@charset "utf-8";

*{box-sizing: border-box;}
html,body{margin:0;}
body{
    font-family: 'Fira Sans', sans-serif;
}
.wrapper{
    max-width:1200px;
    padding: 0 40px;
    margin: 0 auto;
}
a{text-decoration: none;}

/* header */
header{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    background:rgba(0,9,57,0.95);
}
.header_flex{
    display:flex;
    justify-content: space-between;
}
a#call_logo{
    color:#fff;
    font-size:24px;
    padding: 15px 10px;
    text-transform:uppercase;
    line-height:20px;
}
a#call_logo i{
    color:#00d5ff;
}
a#contact_us{
    line-height:24px;
    background:#ffd200;
    color:#000;
    padding: 15px 30px;
    font-weight: 600;
    transition:ease all 300ms;
}
a#contact_us:hover{
    background:#e0bc18;
    cursor:pointer;
}

/* Hero */
#hero{
    min-height:400px;
    background-size:cover;
    background-position:center;
    background-image:url('img/hero.jpg');
}
.hero_flex{
    padding-top:54px;
    display:flex;
    align-items: center;
}
.hero_text{
    width:50%;
    padding: 150px 0;
}
.hero_text h2{
    font-weight:400;
    line-height:1.4em;
}
.hero_logo{
    height: 56px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-image: url('img/logo.png');
}
.hero_buttons{
    margin: 40px 0 0 0;
    display:flex;
    justify-content: space-between;
    gap:20px;
}
.hero_buttons a{
    font-size:17px;
    color:#000;
    font-weight:600;
    text-transform:uppercase;
    text-align: center;
    padding: 8px;
    border-radius:20px;
    flex: 1 0 40%;
    background:#ffd200;
    box-shadow: 0 4px 5px 1px #555;
    transition:ease all 300ms;
}
.hero_buttons a:hover{
    background:#fff;
    cursor:pointer;
}

/* Sub-Hero */
#subhero{
    background:#f3f6fc;
    padding: 35px 0;
    overflow:hidden;
    position: relative;
}
.watermark{
    position: absolute;
    z-index: 2;
    height:100%;
    width:500px;
    top:0;
    left:-100px;
    opacity:0.5;
    background-size: cover;
    background-position: center;
    background-image: url('img/watermark.png')
}
#subhero .wrapper{
    position:relative;
    z-index: 5;
}
#subhero h2{
    text-align: center;
    color:#1a1ca2;
    font-weight:700;
    line-height:1.4em;
    margin: 0 0 30px 0;
}
#subhero h2 i{
    color:#00d5ff;
}
.subhero_image{
    border-radius:20px;
    box-shadow: 0 4px 25px 1px #999;
    height:280px;
    margin: 0 0 60px 0;
    background-size: cover;
    background-position: center;
    background-image: url('img/subhero.jpg')
}
.triple{
    display:flex;
    justify-content: space-between;
}
.triple p{
    display:block;
    flex: 0 0 30%;
    padding: 0 0 0 50px;
    position:relative;
    color:#000000;
    font-weight:600;
}
.triple p:before{
    content:'\f058';
    font-family:'Font Awesome 5 Free';
    font-weight:400;
    color:#00d5ff;
    position:absolute;
    left:15px;
    top:0;
    font-size:24px;
}

/* blue */
#blue{
    background-size: cover;
    background-position: center;
    background-image: url('img/blue_bg.jpg');
    background-color:#f3f6fc;
    padding: 0 0 40px 0;
}
#blue .wrapper{
    position: relative;
    top:90px;
}
#blue h2{
    margin:0;
    font-weight:700;
    color:#fff;
    font-size:30px;
    line-height:1.3em;
    padding: 0 10% 20px 10%;
    text-align: center;
}
#blue p{
    padding: 0 10%;
    font-size:16px;
    line-height:1.4em;
    text-align: center;
    color:#fff;
    margin: 20px 0 40px 0;
}
.swoosh{
    background-size: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('img/swoosh.png');
    height:50px;
}
.circles{
    display:flex;
    justify-content: space-between;
}
.circle{
    flex: 0 0 300px;
    height:300px;
    border-radius:50%;
    background:#fff;
    box-shadow: 0 3px 11px 0px #9a9a9a;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}
.circle span{
    font-size:18px;
    font-weight:600;
    margin: 0 0 25px 0;
}


/* Locations */
#locations{
    background:#f3f6fc;
    padding: 120px 0 50px 0;
}
#locations h2{
    margin:0;
    font-weight:700;
    color:#1a1ca2;
    font-size:26px;
    line-height:1.3em;
    padding: 0 10% 20px 10%;
    text-align: center;
}
#locations p{
    text-align: center;
    
}
#locations p.larger{
    font-size:18px;
    line-height:1.4em;
}
.lines{
    padding: 10px 10% 10px 10%;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}
.line{
    text-align: center;
    background:#fff;
    border-radius:8px;
    padding: 12px;
    flex: 1 0 100%;
    margin: 5px 0;
    color:#00b3d6;
    font-weight:600;
    font-size:18px;
}
.line span{
    margin: 0 0 0 25px;
    font-size:20px;
    position: relative;
}
.line span:before{
    content:'•';
    position:absolute;
    left:-18px;
}
.line span:first-child{margin:0;}
.line span:first-child:before{display:none;}


/* expertise */

#expertise{
    padding: 80px 0;
    background-image: url('img/grey-bg.jpg');
    background-size:cover;
    background-position: center;
}
#expertise h2{
    margin:0;
    font-weight:700;
    color:#1a1ca2;
    font-size:26px;
    line-height:1.3em;
    padding: 0 10% 20px 10%;
    text-align: center;
}
.expert_grid{
    display:grid;
    gap:10px;
    margin: 50px 0 0 0;
    grid-template-columns: repeat(2,1fr);
}
.grid_item{
    height:250px;
    border-radius:15px;
    display:flex;
    align-items: flex-end;
    position:relative;
    overflow:hidden;
    background-size:cover;
    background-position:center;
}
.grid_item:nth-child(1){background-image:url('img/tile1.jpg');}
.grid_item:nth-child(2){background-image:url('img/tile2.jpg');}
.grid_item:nth-child(3){background-image:url('img/tile3.jpg');}
.grid_item:nth-child(4){background-image:url('img/tile4.jpg');}

.grid_item:after{
    content:'';
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:190px;
    z-index: 1;
    opacity: 0.9;
    
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0f3085+0,0f3085+100&0+16,1+78 */
    background: -moz-linear-gradient(top, rgba(15,48,133,0) 0%, rgba(15,48,133,0) 16%, rgba(15,48,133,1) 78%, rgba(15,48,133,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(15,48,133,0) 0%,rgba(15,48,133,0) 16%,rgba(15,48,133,1) 78%,rgba(15,48,133,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(15,48,133,0) 0%,rgba(15,48,133,0) 16%,rgba(15,48,133,1) 78%,rgba(15,48,133,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000f3085', endColorstr='#0f3085',GradientType=0 ); /* IE6-9 */


}
.grid_item p{
    width:100%;
    padding: 10px 25px;
    text-align: center;
    color:#fff;
    position: relative;
    z-index: 10;
}

/* blue2 */
#blue2{
    background-size: cover;
    background-position: center;
    background-image: url('img/blue-2.jpg');
    background-color:#f3f6fc;
    padding: 90px 0 90px 0;
}
#blue2 h2{
    margin:0;
    font-weight:700;
    color:#fff;
    font-size:24px;
    line-height:1.3em;
    padding: 0 20% 20px 20%;
    text-align: center;
}
#blue2 p{
    padding: 0 10%;
    font-size:16px;
    line-height:1.4em;
    text-align: center;
    color:#fff;
    margin: 20px 0 0 0;
}
.swoosh{
    background-size: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('img/swoosh.png');
    height:50px;
}


/* footer */
footer{
    background:#d6f8ff;
    padding: 50px 0 0 0;
    overflow:hidden;
    position:relative;
}
footer .wrapper{
    position: relative;
    z-index: 5;
}
footer:after{
    content:'';
    position: absolute;
    z-index: 2;
    height:100%;
    width:500px;
    top:0;
    right:-100px;
    background-size: cover;
    background-position: left center;
    background-image: url('img/watermark_blue.png')
}
.footer_flex{
    display:flex;
    justify-content: space-between;
    padding: 0 0 30px 0;
}
.footer_image{
    background-color:#eee;
    border-radius:16px;
    flex: 0 1 40%;
    margin: 0 30px 0 0;
    background-size: cover;
    background-position: center;
    background-image: url('img/footer-ladies.jpg');
    box-shadow: 0 3px 11px 0px #9a9a9a;
}
.footer_form{
    flex: 1 0 60%;
    min-height:500px;
}

.footer_form h2{
    margin:0;
    font-weight:700;
    color:#1a1ca2;
    font-size:26px;
    line-height:1.3em;
}
.footer_form h2 i{
    color:#00d5ff;
    margin: 0 4px 0 0;
}
.footer_form p{
    padding: 0 0 30px 37px;
    color:#1b1ca3;
    font-size:14px;
    margin:4px 0 0 0;
}
.footer_disc{
    color:#1e1752;
    font-style: italic;
    text-align: center;
    padding: 0 5% 50px 5%;
}

#subfooter{
    background:#181c8c;
    position: relative;
    z-index: 4;
}
.subfooter_flex{
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
}
.subfooter_flex .logo{
    height: 50px;
    flex: 0 0 190px;
    background-position: center left;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('img/footer_logo.png');
}
.tagline{
    color:#fff;
    display:flex;
    align-items: center;
    font-size:22px;
    font-weight:700;
}
.tagline a{
    color:#fff;
    text-decoration:underline;
}



@media(max-width:1290px){
    #hero{
        background-position: center right -150px;
    }
    .hero_text{
        padding: 125px 0;
    }
}
@media(max-width:1100px){

    .circles{
        justify-content: space-around;
    }
    .circle {
        flex: 0 0 250px;
        height: 250px;
    }

}
@media(max-width:1000px){
    .hero_text {
        padding: 95px 0;
    }
    .hero_text h2{
        font-size: 19px;
    }
    .hero_logo{
        height:40px;
    }

    .circle {
        flex: 0 0 220px;
        height: 220px;
    }
    .circle img{
        max-width:100px;
    }

    .lines {
        padding: 10px 5% 10px 5%;
    }

    .footer_image{display:none;}

    .footer_form p {
        padding: 0 10px;
        margin: 0 0 35px 0;
    }
    .footer_form h2 {
        margin: 0;
        font-size: 26px;
        padding: 0 10px;
    }   
    .footer_form h2 i{
        display:block;
        margin: 0 0 8px 0; 
    }
    #form{padding: 0 10px;}

}
@media(max-width:900px){
    .hero_text {
        padding: 75px 0;
    }

    .triple{flex-direction:column;}
    .triple p:before{
        top: -4px;
    }
    .subhero_image{margin: 0 0 40px 0;}

    #blue h2{
        font-size:25px;
    }
    .swoosh{height:40px;}

    #locations h2{
        font-size:22px;
    }

    .tagline{
        font-size:18px;
    }

}
@media(max-width:800px){
    .hero_text {
        padding: 55px 0;
    }
    .hero_buttons{
        gap: 10px;
        flex-direction: column;
    }

    #subhero h2{
        font-size:20px;
    }

    .circle {
        flex: 0 0 180px;
        height: 180px;
    }
    .circle span {
        font-size: 15px;
    }

    .lines {
        padding: 30px;
        background: #fff;
        border-radius: 8px;
    }
    .line {
        text-align: center;
        flex: 1 0 100%;
        color: #00b3d6;
        font-weight: 600;
        font-size: 18px;
        display: flex;
        padding:0;
        margin:0;
        flex-direction: column;
    }
    .line span:first-child,
    .line span {
        font-size: 20px;
        position: relative;
        display: block;
        margin: 0 0 10px 0;
    }
    .line span:before{display:none;}

    .grid_item p{
        padding: 0 25px 15px 25px;
        margin:0;
    }
    .expert_grid{
        padding: 0 15%;
        grid-template-columns: repeat(1,1fr);
    }
    .grid_item{
        background-position: top center;
    }

    .subfooter_flex .logo {
        width: 160px;
        background-position: center top;
        flex: 0 0 50px;
    }
    #subfooter{padding: 40px 0;}
    .subfooter_flex{
        flex-direction: column;
        align-items: center;
    }

}
@media(max-width:700px){
    .hero_logo{
        background-image:url('img/footer_logo.png');
        height: 24px;
    }
    .hero_text h2{
        color:#fff;
        font-size: 16px;
    }
    .hero_text {
        width:100%;
        padding: 30px;
        background: #0d1543;
        margin: 200px 0 0 0;
    }
    #hero .wrapper{padding:0;}
    .hero_buttons{
        margin: 20px 0 0 0;
        flex-direction: row;
    }
    header .wrapper{padding:0;}
    a#call_logo{padding: 15px 10px 15px 20px;}

    #hero {
        background-position: top 54px right;
        background-size: auto 200px;
        background-repeat: no-repeat;
    }

    .circle {
        flex: 0 0 150px;
        height: 150px;
    }
    .circle img{max-width:80px;}
    .circle span {
        font-size: 15px;
    }
    
    .expert_grid{
        padding: 0 10%;
    }

}
@media(max-width:600px){
    .wrapper{padding:0 20px;}

    #subhero h2 {
        font-size: 17px;
    }
    .subhero_image{height:190px;}
    
    .triple p:before{
        top: 0;
    }

    #blue{padding: 50px 0 40px 0;}
    #blue .wrapper{top:0;}
    .circles {
        justify-content: space-around;
        flex-direction: column;
    }
    .circle {
        flex: 0 0 80px;
        height: 80px;
        border-radius: 15px;
        margin: 0 0 10px 0;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: space-between;
        padding: 0 30px 0 20px;
    }
    .circle img {
        max-height: 60px;
        margin: 0 20px 0 0;
    }
    .circle span {
        font-size: 25px;
        margin:0;
    }

    #blue2 h2,
    #blue h2{
        padding: 0 5% 20px 5%;
        font-size: 20px;
    }
    #blue2 p,
    #blue p{font-size:15px;padding: 0 5%;}

    #blue2{
        padding: 50px 0;
    }

    #locations{
        padding: 50px 0;
    }
    #locations p.larger{
        margin: 30px 0 0 0;
        font-size:15px;
    }
    #locations p{
        font-size:15px;
        font-weight: 600;
        margin: 0 0 40px 0;
        color: #122661;
    }
    #locations h2{
        font-size:20px;
        padding: 0 5% 10px 5%;
    }

    #expertise{
        padding: 40px 0;
    }
    #expertise h2{
        font-size:20px;
        padding: 0 5% 10px 5%;
    }
    .expert_grid{
        margin: 10px 0 0 0;
        padding: 0 5%;
    }

    .footer_form h2{
        font-size: 21px;
        padding: 0 10px 4px 10px;
    }
    .tagline{
        flex-direction: column;
    }
    .tagline a{
        color:#fed725;
        margin: 20px 0 0 0;
        font-size:26px;
    }

}
@media(max-width:500px){
    .hero_buttons{
        flex-direction: column;
    }
    .hero_text{
        background: rgba(0,9,57,0.85);
        margin: 150px 0 0 0;
    }
    #hero {
        background-size: auto 150px;
    }

    .circle {
        flex: 0 0 70px;
    }
    .circle span {
        text-align: right;
        font-size: 18px;
    }
    .circle img{margin: 0 10px 0 0;max-height: 50px;}
    
}