/* 
    Colors

    Gray: #918F90
    Blue: #004E7F
    Teal: #02A7A4
    White: #ffffff

*/

@font-face {
    font-family: LatoSemibold;
    src: url("assets/fonts/LatoSemibold.ttf") format("opentype");
}

:root {
    --gray: #918F90;
    --blue: #004E7F;
    --teal: #02A7A4;
    --white: #ffffff;
    --header-height: 80px;
}

* {
    font-family: LatoSemibold;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.1em;
    list-style: none;
    margin: 0;
    outline: none;
    padding: 0;
    position: relative;
    text-decoration: none;
}

a {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    text-decoration: none;
}

h1, h2, h3, h4, p {
    color: black;
    margin: 0;
}
  
body, html {
    background-color: var(--white);
    box-sizing: border-box;
    color: black;
    cursor: default;
    display: flex;
    flex-direction: column;
    font-family: 'LatoSemibold';
    height: 100%;
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
}

button:focus {
    outline: none;
    text-transform: none;;
}

.center {
    text-align: center;
}

.content {
    flex: 1;
}

.content--inner {
    background-color: var(--white);
    height: calc(100% - var(--header-height));
    padding-bottom: var(--header-height);
}

.hidden {
    display: none;
}

.separator {
    border-bottom: 0.25em solid var(--teal);
    margin: 2em auto;
    width: 10em;
}

/* HEADER STYLES */

.header {
    /* background-color: white; */
    /* box-shadow: 1px 1px 6px 0px lightgrey; */
    display: block;
    height: var(--header-height);
    margin: auto;
    position: absolute;
    text-align: center;
    top: var(--header-height);
    width: 100%;
    z-index: 999;
}

.header__inner {
    background-color: var(--white);
    display: block;
    height: 100%;
    margin: 0 auto;
    padding: 0.1em 4em;
    width: 1000px;
}

.header__logo-container {
    display: table;
    float: left;
    height: 100%; 
}

.header__logo-container img {
    height: var(--header-height);
}

.header__nav {
    float: right;
    height: 100%;
}

.header__nav a {
    cursor: pointer;
    display: table;
    float: left;
    height: 100%;
    margin: 0 1.4em; /*0px 20px; */
}

.header__nav a li {
    color: var(--blue);
    display: table-cell;
    font-size: 1.2em;
    height: 100%;
    text-transform: uppercase;
    vertical-align: middle;
}

.header__nav a:last-child {
    margin-right: 0;
}

/* .header__nav a:after {
    background: var(--teal);
    bottom: 1.6em;
    content: "";
    height: 0.2em;
    left: 0;
    position: absolute;
    -webkit-transition: width 250ms ease-in-out;
    -moz-transition: width 250ms ease-in-out;
    -o-transition: width 250ms ease-in-out;
    transition: width 250ms ease-in-out;
    width: 0;
}

.header__nav a.active:after {
    width: 100%;   
} */

.header__nav a.active li {
    color: var(--teal);
}

.header__top-nav__item {
    cursor: pointer;
    position: relative;
}

.header__top-nav__item:after {
    bottom: -4px;
    content: "";
    height: 0.15em;
    left: 0;
    position: absolute;
    -webkit-transition: width 250ms ease-in-out;
    -moz-transition: width 250ms ease-in-out;
    -o-transition: width 250ms ease-in-out;
    transition: width 250ms ease-in-out;
    width: 0;
}

.header__top-nav__item.active:after {
    width: 100%;   
}

/* MOBILE NAVIGATION STYLES */

.down {
    transition: top 0.4s;
    transition-property: top;
    top: var(--header-height);
}

#mobileMenuToggle{
    border-radius: 5px;
    cursor: pointer;
    display: none;
    float: right;
    height: 80px;
    position: relative;
    right: 80px;
    width: 80px;
}

#modalClose span {
    background: var(--blue);
}

#mobileMenuToggle #hamburger {
    height: 100%;
    position: absolute;
    width: 100%;
}

#mobileMenuToggle #hamburger span {
    background-color: var(--blue);
    display: block;
    height: 4px;
    left: 20px;
    margin: 0.5em 0;
    position: relative;
    top: 20px;
    width: 36px;
}

#mobileMenuToggle #hamburger span:nth-child(1) {
    transition-delay: 0.25s;
}

#mobileMenuToggle #hamburger span:nth-child(2) {
    transition-delay: 0.3125s;
}

#mobileMenuToggle #hamburger span:nth-child(3) {
    transition-delay: 0.375s;
}

#mobileMenuToggle #cross {
    height: 100%;
    margin-top: 1.5em;
    position: absolute;
    transform: rotate(45deg);
    width: 100%;
}

#mobileMenuToggle #cross span {
    background-color: var(--blue);
    display: block;
}

#mobileMenuToggle #cross span:nth-child(1) {
    height: 0%;
    left: 24px;
    position: absolute;
    top: 10%;
    transition-delay: 0s;
    width: 4px;
}

#modalClose #cross span:nth-child(1) {
    left: 19px;
}

#mobileMenuToggle #cross span:nth-child(2) {
    height: 4px;
    left: 10%;
    position: absolute;
    top: 24px;
    transition-delay: 0.25s;
    width: 0%;
}

#mobileMenuToggle.open #hamburger span {
    width: 0%;
}

#mobileMenuToggle.open #hamburger span:nth-child(1) {
    transition-delay: 0s;
}

#mobileMenuToggle.open #hamburger span:nth-child(2) {
    transition-delay: 0.125s;
}

#mobileMenuToggle.open #hamburger span:nth-child(3) {
    transition-delay: 0.25s;
}

#mobileMenuToggle.open #cross span:nth-child(1) {
    height: 45%;
    transition-delay: 0.625s;
}

#mobileMenuToggle.open #cross span:nth-child(2) {
    transition-delay: 0.375s;
    width: 45%;
}

nav {
    background: white;
    box-shadow: 0 0 10px #000;
    color: black;
    left: 0;
    position: fixed;
    top: -100%;
    transition: top 0.4s;
    transition-property: top;
    width: 100%;
    z-index: 99;
}

nav li {
    cursor: pointer;
    list-style: none;
    text-align: center;
}

nav ul {
    padding-left: 0;
}

nav li p:hover {
    background: var(--blue);
    color: white;
    text-decoration: none;
}

nav li p {
    color: var(--blue);
    display: block;
    font-size: 1.5em; /*24px */
    padding: 1em;
    text-decoration: none;
}


/* FOOTER STYLES */

footer {
    background-color: black;
    color: var(--gray);
    height: 60px;
    margin-top: -60px;
    position: relative;
}
  
.footer__container {
    font-size: 1.2em;
    text-align: center;
    width: 100%;
}

footer img {
    height: 40px;
    left: 10em;
    padding-top: 10px;
    position: absolute;
    vertical-align: middle;
}

.copyright {
    color: var(--gray);
    display: inline-block;
    font-weight: bold; 
    line-height: 4.2em;
    padding-bottom: 0;
    text-align: center;
    vertical-align: middle;
}

/* PAGE STYLES */

.banner__container {
    height: auto;
    z-index: 1;
}

.banner__container:after {
    background: rgba(0,0,0,0.7);
    content: '';
    color: #fff;
    position: absolute;
    width: 100%; 
    height: 100%;
    top: -5px;
    left: 0;
    opacity: 1;
}

.banner__container img {
    width: 100%;
}

.banner__container h1 {
    color: var(--white);
    font-size: 2.4em;
    font-weight: bold;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
}

.banner__connect-button {
    background: var(--teal);
    border: 1px solid var(--teal);
    cursor: pointer;
    left: 50%;
    padding: 10px 40px 6px 40px;
    position: absolute;
    top: 80%;
    transform: translate(-50%);
    width: auto;
    z-index: 4;
}

.banner__connect-button:hover div p {
    color: black;
}

.banner__connect-button div p, .banner__connect-button p {
    color: white;
    font-size: 1.4em;
    line-height: 1.4em;
    letter-spacing: 0.1em;
}


/* HOMEPAGE */
.home-blurb__container {
    margin: auto;
    padding: 4em;
    width: 38em;
}

.home-blurb__container h2 {
    color: var(--blue);
    font-size: 2em;
    font-weight: bold;
}

.home-blurb__container p {
    font-size: 1.3em;
    font-weight: normal;
}

.home-cards__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-bottom: 2em;
}

.home-cards--item {
    align-items: center;
    background-color: black;
    box-shadow: 0px 0px 10px -2px black;
    color: white;
    display: flex;
    flex-direction: column;
    height: 20em;
    justify-content: space-around;
    margin-bottom: 2em;
    text-align: center;
    width: 25%;
}

.home-cards--item h3 {
    color: white;
    font-size: 1.7em;
    text-transform: uppercase;
}

.home-cards--item p {
    color: white;
}

.home-cards--item .fa-user, .home-cards--item .fa-hands, .home-cards--item .fa-phone {
    font-size: 5em;
}

.card-button--white {
    background-color: white;
    color: black;
    cursor: pointer;
    height: 2.8em;
    width: 20em;
}

.card-button--white p {
    color: black;
    display: inline-block;
    font-size: 1.2em;
    line-height: 2.4em;
    padding-right: 0.2em;
    vertical-align: middle;
}

.card-button--white i {
    vertical-align: middle;
}

.about-card {
    background-color: var(--blue);
}

.about-card .card-button--white:hover p, .about-card .card-button--white:hover i {
    color: var(--blue);
}

.services-card {
    background-color: var(--teal);
}

.services-card .card-button--white:hover p, .services-card .card-button--white:hover i {
    color: var(--teal);
}

.contact-card {
    background-color: var(--gray);
}

.contact-card .card-button--white:hover p, .contact-card .card-button--white:hover i {
    color: var(--gray);
}

/* ABOUT STYLES */

.about__container {
    padding: 5em;
}

.about__side {
    display: inline-block;
    margin-right: -4px;
    vertical-align: top;
    width: 60%;
}

.about__side:first-child {
    text-align: center;
    width: 40%;
}

.about__side img {
    height: 35em;
    padding-top: 6em;
}

.about__side h3 {
    color: var(--blue);
    font-size: 2em;
    text-transform: uppercase;
}

.about__side p {
    font-size: 1.3em;
    line-height: 1.5em;
    padding-bottom: 2em;
    text-align: left;
}

.about__side div {
    margin-left: 0;
}

.increase-width {
    width: 100%;
}

/* SERVICES STYLES */ 

.services-blurb__container {
    padding-bottom: 2em;
    width: 60em;
}

.services-blurb__container h3 {
    color: var(--blue);
    font-size: 2em;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.services-cards--item {
    height: auto;
    justify-content: unset;
    margin: 1em 1em;
    min-height: 14em;
    padding: 2em;
}

.services-cards--item p {
    font-size: 1.2em;
    padding-top: 2em;
}

/* CONTACT STYLES */

form {
    padding-bottom: 5em;
    padding-top: 5em;
    text-align: center;
    width: 100%;
}

form h3 {
    color: var(--blue);
    font-size: 2em;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

form h4 {
    font-size: 1.5em;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
}

form .input {
    margin: auto;
    width: 50em;
}

form div input, form div textarea {
    background-color: #F1F1F1;
    border: none;
    height: 40px;
    letter-spacing: 0.1em;
    margin: 10px auto;
    padding: 4px 10px;
    width: 50em;
}

form div textarea  {
    margin-bottom: 20px;
    min-height: 100px;
    resize: vertical;
}

.send-button, .cancel-button {
    background-color: var(--gray);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    margin-right: 20px;
    padding: 10px 40px 6px 40px;
    text-align: center;
    width: auto;
}

.send-button {
    background-color: var(--teal);
}

.send-button:hover {
    color: black;
}

.cancel-button:hover {
    color: black;
}

/* SCROLLBAR STYLES */

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: black;
  -webkit-box-shadow: none;
  transition: background-color 5000s ease-in-out 0s;
}

::-webkit-scrollbar {
    width: 10px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
    margin-bottom: 20px;
    margin-top: 20px;
}

body::-webkit-scrollbar-track {
    margin-bottom:0;
    margin-top: 0;
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--gray); 
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--gray); 
}

/* MEDIA QUERIES */

@media screen and (max-width: 1445px) {
    .banner__container h1 {
        top: 60%;
    }

    .banner__connect-button {
        top: 75%;
    }

    .header {
        top: 30px;
    }
}

@media screen and (max-width: 1245px) {
    .home-cards--item {
        width: 40%;
    }

    .about__side {
        display: block;
        margin: auto;
        width: 100%;
    }

    .about__side:first-child {
        width: 100%;
    }

    .about__container {
        padding: 2em;
    }

    .about__side img {
        padding-bottom: 1em;
        padding-top: 0;
    }

    .about__side div {
        margin-left: auto;
    }

    .about__side h3 {
        text-align: center;
    }

    .increase-width--mobile {
        width: 100%;
    }
}

@media screen and (max-width: 1180px) {
    .header__inner {
        width: 80%;
    }
}

@media screen and (max-width: 960px) {
    .services-blurb__container {
        padding-left: 0;
        padding-right: 0;
        width: 75%;
    }

    .about__side img { 
        height: 25em;
    }
}

@media screen and (max-width: 850px) {
    .home-cards--item {
        width: 65%;
    }
}

@media screen and (max-width: 780px) {
    #mobileMenuToggle {
        display: unset;
    }

    .banner__container {
        padding-top: var(--header-height);
    }

    .header__nav {
        display: none;
    }

    .header {
        position: fixed;
        top: 0;
    }

    .header__inner {
        width: 100%;
    }

    footer img {
        display: none;
    }

    .banner__container h1 {
        font-size: 1.8em;
    }

    .banner__connect-button div p, .banner__connect-button p {
        font-size: 1.2em;
    }

    .banner__connect-button {
        padding: 5px 40px 3px 40px;
    }

    .home-blurb__container {
        padding-left: 0;
        padding-right: 0;
        width: 80%;
    }

    form .input {
        width: 80%;
    }

    form div input, form div textarea {
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    form .input {
        margin-left: 2%;
        width: 90%;
    }

    .home-blurb__container {
        width: 90%;
    }

    .banner__container h1 {
        font-size: 1.5em;
    }

    .home-blurb__container h2, .services-blurb__container h3, .about__side h3 {
        font-size: 1.6em;
    }

    .home-blurb__container p, .services-blurb__container p, .about__side p, .services-cards--item p {
        font-size: 1.1em;
    }

    .services-cards--item {
        margin-left: auto;
        margin-right: auto;
        padding: 1em;
        width: 90%;
    }

    .about__container {
        padding: 0.5em;
    }

    .about__side p {
        line-height: 1.3em;
    }

    .banner__connect-button {
        padding: 3px 40px 2px 40px;
        text-align: center;
        width: 50%;
    }

    .copyright {
        font-size: 0.6em;
        line-height: 6em;
    }

    .home-cards--item {
        height: 18em;
    }

    .home-cards--item h3 {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 360px) {
    .home-cards--item {
        margin-left: auto;
        margin-right: auto;
        width: 95%;
    }

    .services-cards--item {
        width: 90%;
    }

    .home-blurb__container {
        padding-bottom: 2em;
        padding-top: 2em;
    }

    .send-button, .cancel-button {
        margin-right: 5px;
    }

    .header__logo-container img {
        height: 60px;
        padding-top: 10px;
    }

    .header__inner {
        padding-left: 2em
    }

    #mobileMenuToggle {
        right: 2em;
    }

    .card-button--white {
        width: 90%;
    }

    .home-cards--item h3 {
        font-size: 1.3em;
    }
}

@media screen and (max-width: 280px) {
    .send-button, .cancel-button {
        margin-bottom: 1em;
        margin-right: 0;
        width: 50%;
    }

    
    .home-blurb__container p, .services-blurb__container p, .about__side p, .services-cards--item p {
        font-size: 0.9em;
    }
}