@font-face {
    font-family: grotesque;
    src: url(fonts/GrotesqueMT-Light.otf);
  }
  @font-face {
    font-family:bkant;
    src: url(fonts/BKANT.TTF);
  }
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fixed-top{
    opacity: 0;
}
.navbar {
    background-color:#a1a6a2c4;
}
.navbar-toggler{
    background-color:#023373;
    
}
span.navbar-toggler-icon{
    color:#F2F2F2;
}
    a.nav-link:hover, a.nav-link:active {
    font-size: 120%;
    color: #04C4D9!important;
}
.nav-link {
    color: #023373!important;
    text-align: center;
}
.sidenav {
    display: none;

}
.active {
    font-size: 120%;
    color: #04C4D9!important;
    border-bottom-style: solid;
  
}
a:hover {
    text-decoration: none;
}
@media only screen and (min-width:768px){
    .fixed-top{
        opacity: 1;
    }
    .content{
        margin-top: 92px;
    }
    
}
@media only screen and (min-width:1024px){
    .navbar{
        display: none;
    }
    .content{
        margin-top: 0px;
    }

    .sidenav{
        display: contents;
    }
    .sidenav .logo{
        width:100%;
        padding: Opx;

    }
    
    .sidenav .navbar-nav{
        padding-top: 50px;
        padding: 0 auto;
        background-color: #a1a6a29c;
       

    }
    .sidenav .navbar-nav .nav-link{
        padding-top: 30px;
    }
    .social{
        padding-bottom: 20px;
        color: #F2F2F2;
        font-size: smaller;
    }
    .social img{
        margin-left:10px;
        margin-right: 10px;
    }
    .social-wrapper{
    margin: auto;
    }
  
}


h1{
    font-family: bkant;
    color: #04C4D9;
    text-shadow: 4px 4px 4px rgb(0, 0, 0);
    text-align: center;

}
p{
    font-family: grotesque;
    color: #F2F2F2;
}
h3{
    font-family: grotesque;
    color: #fff;

}
h4{
    font-family: bkant;
    color: #04C4D9;
    text-shadow: 1px 1px 4px rgb(0, 0, 0);
    text-align: center;
    font-size: 36px;

}
h2{
    font-family: grotesque;
    color: #04C4D9;
    text-shadow: 4px 4px 4px rgb(0, 0, 0);
}
li{
    font-family: grotesque;
    color: #F2F2F2;
 
}

main{
    height: 100vp;
}
   
    
body{
    background: linear-gradient( #8c8f8c, #131212);
    background-size: cover;
    height:100%;
}

.index-intro{
    width:100%;
    margin: 0px;
    padding: 0px;
}
.index-intro .container-fluid{
    padding: 0px;
}
.index-intro .page-header{
    background-image: url(images/screen1-375.png);
    background-position: center;
    background-size: cover;
    background-repeat: none;
    margin: 0px;
    padding: 0px;
    height:200px;
}

.index-intro h3{
    color:#04C4D9;
    text-align: center;
    padding-top: 73px;
    letter-spacing: 10px;
    font-family: grotesque;
    text-shadow: 0px 2px  black;
}
.what-we-do p{
    color:#F2F2F2
}
.services p{
    text-align: center;
}
.services h3{
    text-align: center;
}
.conversation h1{
    font-size: 30px;
    text-align: center;
}
.conversation p{
    text-align: center;
}
.conversation{
    margin-bottom: 200px;
}
.col-lg-10{
    padding:0px;
}
@media only screen and (min-width:768px){
    .index-intro .page-header{
        background-image: url(images/screen1-768.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
    }  
    .conversation{
        margin-bottom: 100px;
    }
    .index-intro h3{
        padding-top: 73px;
        letter-spacing: 10px;
        text-shadow: 0px 2px  black;
    }
    
         
}
@media only screen and (min-width: 1000px){
    .index-intro .page-header{
        background-image: url(images/screen1-1024.png);
        background-position: end;
        background-size: cover;
        background-repeat: none;
        height: 250px;
    }  
    .index-intro h3{
        padding-top: 120px;
        letter-spacing: 15px;
        text-shadow: 0px 2px  black;
    }
  
}

/* SERVICES PAGE */

.services-intro{
    width:100%;
    margin: 0px;
    padding: 0px;
}
.services-intro .container-fluid{
    padding: 0px;
}
.services-intro .page-header{
    background-image: url(images/screen8-375.png);
    background-position: center;
    background-size: cover;
    background-repeat: none;
    margin: 0px;
    padding: 0px;
    height:200px;
}
.services-intro h4{
    padding-top: 80px;
}
.services-intro p{
    text-align: center;
}

.button{
    background-color: none;
    font-family: grotesque;
    margin-top: 20px;
    color: #fff;
    border-color: #023373;
    border-style: solid;
    padding:10px;
}

@media only screen and (min-width:768px){

    .services-wrapper-text{
        padding-left:30px
    }
    .services-wrapper-text-2{
        text-align: end;
        padding-right: 0px;
    }
    .services-intro .page-header{
        background-image: url(images/screen8-768.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
    }  


}
@media only screen and (min-width: 1024px){
    .services-intro .page-header{
        background-image: url(images/screen8-1024.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
        height:250px;
    }  
    .services-intro h4{
        padding-top: 100px;
    }
    
  
}
/* PLANNING PAGE */
.planning-intro{
    width:100%;
    margin: 0px;
    padding: 0px;
}
.planning-intro .container-fluid{
    padding: 0px;
}
.planning-intro .page-header{
    background-image: url(images/screen3-375.png);
    background-position: end;
    background-size: cover;
    background-repeat: none;
    margin: 0px;
    padding: 0px;
    height:200px;
}

.planning-intro h4{
    padding-top: 50px;
   text-align: end;
   padding-right: 20px;

}
.planning-intro p{
    text-align: center;
    padding: 20px;
    color:#F2F2F2
}
.planning-text h3{
    color:#04C4D9
}
@media only screen and (min-width:768px){
    .planning-intro .page-header{
        background-image: url(images/screen3-768.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
    } 
    .planning-intro h4{
        padding-top:80px;
       text-align: end;
       padding-right: 20px;
    
    }
 
}
@media only screen and (min-width: 1024px){
    .planning-intro .page-header{
        background-image: url(images/screen3-1024.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
        height: 250px;
    } 
    .planning-intro h4{
        padding-top:100px;
       text-align: end;
       padding-right: 20px;
    
    }
 
    
  
}


/* LEGAL PAGE */
.legal-intro{
    width:100%;
    margin: 0px;
    padding: 0px;
}
.legal-intro .container-fluid{
    padding: 0px;
}
.legal-intro .page-header{
    background-image: url(images/screen4-375.png);
    background-position: end;
    background-size: cover;
    background-repeat: none;
    margin: 0px;
    padding: 0px;
    height:200px;
}
.legal-intro h4{
    padding-top: 110px;
   text-align: center;
}
.legal-intro p{
    text-align: center;
    padding: 20px;
    color:#F2F2F2
}
.legal-text h3{
    color:#04C4D9
}
@media only screen and (min-width:768px){
    .legal-intro .page-header{
        background-image: url(images/screen4-768.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
    }  
}
@media only screen and (min-width: 1024px){
    .legal-intro .page-header{
        background-image: url(images/screen4-1024.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
        height: 250px;

    } 
     
  

    .legal-text{
        width:80%;
        margin:0 auto;

    }
}
/* SYSTEMS PAGE */

.systems-intro{
    width:100%;
    margin: 0px;
    padding: 0px;
}
.systems-intro .container-fluid{
    padding: 0px;
}
.systems-intro .page-header{
    background-image: url(images/screen5-375.png);
    background-position: center;
    background-size: cover;
    background-repeat: none;
    margin: 0px;
    padding: 0px;
    height:200px;
}
.systems-intro h4{
    padding-top: 80px;
   text-align: center;
   


}
.systems-intro p{
    text-align: center;
    padding: 20px;
    color:#F2F2F2
}
.systems-text h3{
    color:#04C4D9
}
@media only screen and (min-width:768px){
    .systems-intro .page-header{
        background-image: url(images/screen5-768.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
    } 
    .systems-intro h4{
        float: right;
        margin-right: 20px;
    }
 
}
@media only screen and (min-width: 1000px){
    .systems-intro .page-header{
        background-image: url(images/screen5-1024.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
        height: 250px;
    }  
  
    .systems-text{
        width:80%;
        margin:0 auto;

    }
    
}

/* ABOUT US */

.about-us-intro{
    width:100%;
    margin: 0px;
    padding: 0px;
}
.about-us-intro .container-fluid{
    padding: 0px;
}
.about-us-intro .page-header{
    background-image: url(images/screen6-375.png);
    background-position: center;
    background-size: cover;
    background-repeat: none;
    margin: 0px;
    padding: 0px;
    height:200px;
}
.about-us-intro h4{
    padding-top: 78px;


}
.about-us-intro p{
    text-align: center;
    padding: 20px;
    color:#F2F2F2
}
.about-us-text{
    width:100vp;
    margin:0px;
    padding-left: 20px;
    padding-right: 30px;
    margin-bottom: 100px;
    
}
.about-us-text h3{
    color:#023373;
    font-family: bkant;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    font-size: 40px;
    border-left-style: solid;
    border-color: #04C4D9;
}
@media only screen and (min-width:768px){
    .p-wrapper{
        border-left-style: solid;
        margin-left:20px;
        border-color: #04C4D9;
    }
    .p-wrapper-2{
        text-align: end;
        border-right-style: solid;
        border-color: #04C4D9;

    }
    .about-us-text h3{
        border-left-style: none;
   
    }
    .about-us-text .h3-2 h3{
        color:#033e8b;  
    }

    .about-us-intro .page-header{
        background-image: url(images/screen6-768.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
    }  
}
@media only screen and (min-width: 1000px){
    .about-us-intro .page-header{
        background-image: url(images/screen6-1024.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
        height:250px;

    } 
    .about-us-intro h4{
        padding-top: 100px;
    
    
    } 
  
    .about-us-text{
        width:80%;
        margin:0 auto;

    }
    
}

/* CONTACT US */
.contact-us-intro{
    width:100%;
    margin: 0px;
    padding: 0px;
}
.contact-us-intro .container-fluid{
    padding: 0px;
}
.contact-us-intro .page-header{
    background-image: url(images/screen7-375.png);
    background-position: center;
    background-size: cover;
    background-repeat: none;
    margin: 0px;
    padding: 0px;
    height:200px;
}
.contact-us-intro h4{
    padding-top: 78px;

}
.contact-us-intro p{
    text-align: center;
    padding: 20px;
    color:#F2F2F2
}

.contact-us-text h3{
    color: #04C4D9; 
    font-family: bkant;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    font-size: 40px;
}
.contact-us-text a{
    color:#F2F2F2;
    font-size: 18px;
    padding-left: 10px;
}
.contact-us-text a img{
    padding-right: 20px;
}
.contact-us-text{
    margin-bottom: 250px;
}
@media only screen and (min-width:768px){
    .contact-us-intro .page-header{
        background-image: url(images/screen7-768.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
    }    
    .contact-us-text{
        margin-bottom: 0px;
    }
      
}
@media only screen and (min-width:1000px){
    .contact-us-intro .page-header{
        background-image: url(images/screen7-1024.png);
        background-position: center;
        background-size: cover;
        background-repeat: none;
        height:250px;
    }          
}

/* FOOTER */
footer{
    display: none;
}
footer .col-6 {
display: block;
}
footer .col-6 p{
text-align: center;
font-size: 10px;
}

.button-bar{
    padding-top: 10px;
    padding-bottom: 0px;
    background-color: #1d1b1bf1;

}
.button-bar .btn{
    height:40px;
    width: 80px;
    background-color: #023373;
    font-family: grotesque;
    font-size: 8px;
    border-radius: 0px;
    border-color: #1312126c;
    
}
.button-bar-footer .col p{
    text-align: center;
    line-height:5px;
    letter-spacing: 6px;
    font-size: smaller;
    padding: 0 auto;
    
}

.button-bar  img{
Width:50px;
margin: 15px ;
border-style: solid;
border-radius: 50%;
background-color: #023373;
padding:5px;
border-color: #04C4D9;

}


@media only screen and (min-width:375px){
    .button-bar .btn{
        width: 100px;
        font-size: 11px;
        
    }
    .button-bar-footer .col p{
        text-align: center;
        letter-spacing: 8px;
        
    }
    .button-bar .col img{
        Width:60px;
        margin: auto;
    }        
    
}
@media only screen and (min-width:420px){
    .button-bar .btn{
        width: 120px;
        font-size: 14px;
        
    }
    .button-bar-footer .col p{
        text-align: center;
        letter-spacing: 10px;
        
    }
    .button-bar .col .img-fluid{
        Width:70px;
    }   
    
}
@media only screen and (min-width:768px){
    footer{
        display: contents;
    }
    footer .col-6 p{
        font-size: 10px;
        letter-spacing: 8px;
        }
    .button-bar {
        display: none;
    }
   
        
}

@media only screen and (min-width:1000px){
    .contact-us-text{
        width:80%;
        margin:0 auto;

    }
    .col-lg-10{
        padding:0px;
        margin:0px;
    }
    
}