@font-face{
    font-family: montserrat; 
    src:url("../font/Montserrat-Regular.otf"); 
    /* need to change per server details */
}
html{
    font-family:montserrat, sans-serif; 
    overflow-x: hidden;
    overflow-y:scroll;

    scroll-behavior: smooth;
    
}   
body{
    margin:0;
} 

header, main, footer{
    font-size:16px; 
    background: rgb(250, 250, 250);

    max-width:1600px; 

}
@media screen and (min-width: 1600px){
   header, main, footer{
        margin-left:auto;
        margin-right:auto; 

        background-color:rgb(235, 235, 235);
    }
} 
h1{
    font-size:2rem;
}
figure{
    margin:0;
}
p{
    font-weight:600;
}
.reCaptcha{
    grid-area: 4/2/4/2;
    color:#fff;
    padding-left:25px;
     font-size:0.6rem;
    font-style:italic;
}
.grecaptcha-badge { visibility: hidden; }
/* -----------------------navbar------------------------- */
#services{ display:none;}
.phone{ display:none;}
.phone-mob{display:none;}
.nav-btn{display:none;}

.nav{
    display: grid;
    grid-template-columns: 0.4fr 1fr; 
    max-width:1600px;
    margin:0 auto;


  
    background-image:linear-gradient( rgb(202, 202, 202),rgb(235, 235, 235));
}
.nav-links{
    display:grid;
    grid-template-columns: repeat(4, 130px);  
    justify-content: end; 
    align-items: center;
    text-align:center;
  
}
@media screen and (min-width:900px){
    .nav-links{
    grid-template-columns: repeat(4, 150px);  
    }
}
.a-nav{
    text-decoration: none;
    color:rgb(83, 83, 83);
    font-weight:600;
    margin-right:10px;
}
.a-nav:hover{
    background:#a80101;
    color:#fff;
    padding:10px;
    border-radius: 5px;
}
/* sticky top nav */
.nav-scrolled{
    position:sticky;
    top:0;

    z-index:1;
    max-width:1610px;
    box-shadow:0 3px 20px rgba(0,0,0,0.3);
    background-image:linear-gradient(rgba(202, 202, 202,0.95),rgba(235, 235, 235,0.95));
    border-radius:5px; 
    animation:nav linear 250ms;
   
}
@keyframes nav{
    0%{opacity:0;};
    100%{opacity:1;};
}

.logo{
    display:inline-block;
    font-style:italic;
    font-weight:600;
    font-size: 1.8rem;
}
.logo img{
    max-width:50px;
    vertical-align: middle;

    padding:10px;

}
.logo a{   
    color:rgb(83, 83, 83);
    text-decoration: none;
}
/* services dropdown */
.dropdown {
    display: inline-block;
    padding:10px 0;
    border-radius:5px;   
}
.dropdown-content {
    position: absolute;    
    overflow:hidden;
    opacity:0;
    height:0;
    width:150px;
    
    border-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 0;
  	background-color:#a80101;
    background-color:#a80101f6;
}
.drop-btn{
    text-decoration: none;
    color:rgb(83, 83, 83);
    font-weight:600;
}
.dropdown:hover{
    background-color:#a80101;
    color:#fff;
    
    transition:all 100ms ease-in;
  
}
.dropdown:hover .dropdown-content {
    height:900px; 
    opacity:1;
    z-index:1;  
    transition:all 250ms cubic-bezier(0, 0, 1, 1);;
}
.dropdown:hover .drop-btn{
    color:#fff;    
}


/* links inside dropdown */
.dropdown-btn{
    background-color:#a80101f6;
    color: #fff;
    padding: 10px 0px 10px 10px;
    margin:10px 5px;
    width:120px;
    text-decoration: none;
    text-align:left;
    font-size:0.8rem;
    display: block;
    border-radius: 5px;
    border:0;
    }
.dropdown-btn:hover {
    background-color: #fff;
    color:grey;
    transition: all 250ms ease-in;    
}