*{
box-sizing: border-box;
margin:0;
padding:0;

}




.logoBtn img{
width:90px;
height:45px;
margin-top:10px;
padding:0;
}

ul li a{
background: #323232;
display: block;
color:rgb(189, 186, 186);
font-size: 18px;
padding:10px 10px;
text-decoration: none;
transition:background 1s ease,color 1s ease,padding 1s ease;
text-transform: capitalize;
font-family: 'Roboto', sans-serif;
}

ul li a:hover{
background:rgb(37, 37, 37);
color:rgb(223, 120, 18) ;
padding-left:25px;
}

ul li a:nth-child(2):hover {
    padding:7px 10px;
  }

ul{
    background: #323232;
    list-style: none;
   padding-top:10px;
   padding-bottom: 10px;
}

.main-nav{
display:none;

}


.sub-nav{

display:none;
margin:0;
padding:0px;

}


.main-nav > li:hover .sub-nav{

display: flex;
flex-direction: column;
background: #888;
}



 .sub-nav li a{

    background: rgb(77, 76, 76);
  padding:5px 5px;
 
}

.sub-nav li a:hover{

    background: #2c2c2c;
    padding:5px 25px;
}


.logoBtn .logo{
padding:0;
margin:0;
margin-left: 10px;
width:100px;


}

.navbarBtn .bar1,
.navbarBtn .bar2,
.navbarBtn .bar3{
width:25px;
border:1px solid orange;
margin:4px auto;
display: block;
transition:all 1s ease;
}


.change .bar1{

transform: rotate(-35deg) translate(-3px,5px);

}

.change .bar2{

   opacity:0;
    
 }

.change .bar3{

 transform: rotate(36deg) translate(-3px,-5px);
        
 }


.navbarBtn{
border:2px solid #c0bebe;
width:35px;
align-self: center;
margin-right: 10px;
cursor: pointer;

}


.logoBtn{
display: flex;
justify-content: space-between;
padding:5px;

}

nav{
background: #3f3f3f;
font-family: 'Krub', sans-serif;

}


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

    .navbarBtn{
      display: none;
        
        }

nav{
display:flex;
justify-content: space-between;
}

nav ul{
    display: flex ;
    align-self: center;
    justify-content: flex-end;
    margin-right: 30px;
    width:100%;
    background:#3f3f3f; 
}

.main-nav{
display: flex !important;

}

ul li a{
padding: 7px 25px;
background: #3f3f3f;
}

ul li a:hover{
    background:none;
    color:rgb(223, 120, 18) ;
    padding-left:10px 30px;
    }



    ul.main-nav{
        display: flex;
        flex-direction: row;
        }


      .sub-nav{
   padding-top:12px;
   z-index: 1;

      }

        .sub-nav  li a{
         background: #3f3f3f;
         padding:5px 25px;


        }

        .sub-nav  li a:hover{
            background: #2c2c2c;
            padding:5px 25px;
           
            
           }
        
        .main-nav > li:hover .sub-nav {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #3f3f3f;
            width: 150px;
            position: absolute;
        }


    
.logoBtn img{
    width:100px;
    height:50px;
    margin-top:5px;
    padding:0;
    }

}

/* for sticky scroll */
#myNav{
   
}

.sticky{
    position: fixed;
    width: 100%;
    top:0;
    z-index: 10;
    opacity:1;
}

/* end of sticky scroll */



/* clockweather */
.clockWeather{
    display: flex;
    justify-content: flex-end;
    background: #e3e9eb; 
    padding:5px;
    opacity:1;
    font-family: 'Roboto', sans-serif;
    
    }
    
    .clockWeather #clock{
    margin-right: 100px;
    align-self: center;
    color:rgb(15, 15, 15);
    /* font-size: 18px; */
    width:290px;
    }
    
    .clockWeather button{
        margin-right: 30px;
      font-size: 17px;
      padding:0 5px;
      
        }
    
    .call{
    width:160px;
    
    margin-right: 40px;
    
    
    }
    
    .call p{
        width:120px;
        padding-top:5px;
        
        
        
        }
    
        .call i{
            padding-right: 10px;
            color:green;
            
            
            
            }
    
    
    
            @media screen and (max-width:776px){
                .clockWeather #clock{
                    margin-right: 30px;
                    margin-top:3px;
                   
                    /* font-size: 18px; */
                 
                    }
    
                    .clockWeather button{
                        margin-right: 15px;
                      font-size: 16px;
                     
                      
                        }
    
                        .call{
                            width:200px;
                            
                            margin-right: 15px;
                            
                            
                            }
    
    
            }
    
    
    
    
    
    
    
    
            @media screen and (max-width:576px){
                .clockWeather #clock{
                    margin-right: 30px;
                     font-size: 15px;
                    margin-top:3px;
                    /* font-size: 18px; */
                 
                    }
    
                    .clockWeather button{
                        margin-right: 15px;
                      font-size: 16px;
                      font-size: 15px;
                      
                        }
    
                        .call{
                            width:110px;
                            font-size: 15px;
                            margin-right: 15px;
                            
                            
                            }
    
    
            }
    
    
    
            @media screen and (max-width:476px){
                .clockWeather #clock{
                    margin-right: 10px;
                   margin-top:3px;
                   font-size: 15px;
                    /* font-size: 18px; */
                 
                    }
    
                    .clockWeather button{
                        margin-right: 5px;
                      font-size: 15px;
                     
                      
                        }
    
                        .call{
                            width:110px;
                            
                            margin-right: 15px;
                            
                            
                            }
    
    
            }
    
    /* end of clockweather */

/* article1 */


#main{
    background: #e0dfdf;

}









.contactForm{
    
    padding:10px;
    margin-bottom:0;
    font-family: 'Roboto', sans-serif;
    
}



.contactForm .h1{
    text-align: center;
    position:relative;
    font-size: 22px;
    padding-top:30px;
    color: #5f5f5f;
    }

    .contactForm .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .contactForm:hover .under{

            width:230px;
        background: green;
        }



    .contactForm-center{
     background: rgb(13, 110, 109);
     padding:20px;
    }

    .forma{
       width:90%;
       margin: 0 auto; 
    }

    .forma h2{
        text-align: center;
        margin-bottom: 30px;
        color: rgb(216, 218, 218);
       
    }

    .forma p{
        font-size: 21px;
        color:#cdcecf;
        padding-left: 5px;
       
    }

    .forma #name{
        width:100%;
        padding: 12px;
        border:none;
        margin-top:10px;
        margin-bottom: 10px;

    }

    .forma #name:placeholder{
    
        outline:none;
        color:rgb(117, 117, 117);
        padding: 0;

    }
    .forma #area{
        width:100%;
    }

    .buttonForm .btn{
        padding: 8px 20px;
        font-size: 20px;
        margin-top:20px; 
        width: 120px;
        border: none;
        outline: none;
        transition: all 1s ease;
        background: rgb(199, 198, 198);
        border-radius: 10px;
    }

    .buttonForm .btn:hover{
        background: #323232;
        color: #e0dfdf;
        border-radius: 0;
    }
    
    .buttonForm {
       
       width: 100%;
        /* text-align: center; */
       
    }


    .personalInfo{
        text-align: center;
        margin-top: 40px;
        font-family: 'Roboto', sans-serif;
    }

    .personalInfo h2{
        text-align: center;
        margin-top: 20px;
        color: #cdcecf;
        text-decoration: underline;
    }

    .personalInfo p{
        text-align: center;
        margin-top: 20px;
        color: #cdcecf;
        font-size: 20px;
    }

    .personalInfo strong{
        text-align: center;
        margin-top: 20px;
        color: #292828;
     
    }

    .personalInfo a{
        
       text-decoration: none;
        color: #e4a214;
        
    }

    .personalInfo a:hover{
        
        text-decoration: none;
         color: #08345e;
         
     }




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

        .contactForm-center{
         
            display: grid;
            grid-template-columns: repeat(2,1fr);
          

        }

        
        .personalInfo h2{
            text-align: center;
            margin-top: 0px;
            color: #cdcecf;
            text-decoration: underline;
        }

        .personalInfo{
            text-align: center;
            margin-top: 130px;
        }


    }



    .map{
    padding-right: 10px;
    padding-left: 10px;
     
    }

    .map .h1{
        text-align: center;
        position:relative;
        font-size: 22px;
        padding-top:30px;
        color: #5f5f5f;
        }
    
        .map .h1 .under{
            text-align: center;
            padding:1px;
            width:1px;
            background: transparent;
            margin:2px auto;
            transition: all 1s ease;
            margin-bottom: 10px;
            
            }
    
            .map:hover .under{
    
                width:150px;
            background: green;
            }

         iframe{
        border:1px solid black;

         }   
/* end of article1 */


/* contact us */

#contactUs{
    /* border-top:2px solid white; */
    background: #e0dfdf;
    
   }
   
   
   .contact .h1{
       padding-top:20px;
    text-align: center;
    position:relative;
    
    }

    .contact .h1{
        text-align: center;
        position:relative;
        color: #5f5f5f;
        } 
        
        
        .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .contact .h1{
            text-align: center;
            position:relative;
            
            }
            
            .contact:hover .under{

            width:140px;
        background: green;
        }

   




 .contact-center{

background: #065174;
padding:10px;
font-family: 'Roboto', sans-serif;
 }


 .contact-centerLeft{
 
 padding:20px;
 /* background: #043e55; */

 }

 .contact-centerLeft .adress{


text-align: center;

margin:0 auto;


 }

 .contact-centerLeft h2,
  .contact-centerCenter h2,
  .contact-centerRight h2 {
  
     text-decoration: underline;
     font-weight: 100;
     color:rgb(243, 163, 13);
 }



.adress h3{
color:white;
line-height: 1.5;
font-weight: 100;
padding-top:0px;
font-size: 21px;
text-decoration: underline;
}

.adress .fa-map-marker-alt{
    color:rgb(94, 10, 10);
    margin-right: 10px;
}

.adress .fa-phone{
    color:rgb(42, 172, 16);
    margin-right: 10px;
}

.adress .fa-envelope-square{
    color:rgb(83, 7, 7);
    margin-right: 10px;
}


.adress p {
    font-size: 19px;
    color:rgb(175, 175, 174);
        
    
    }


.adress p a{
font-size: 19px;
color:rgb(175, 175, 174);
    

}


.contact-centerCenter{

padding:20px;

}

 .contact-center h2{
  text-align: center;
 
  padding:10px;
 }



 .contact-centerCenter .links{
list-style: none;
margin:0 auto;
width:100%;

text-align: center;
display: flex;
justify-content: center;
 }

 .contact-centerCenter .links li{
 
padding:5px;


 }

 .contact-centerCenter .links a{
    color:white;
    text-decoration: none;
    font-size: 19px;
    padding:2px;
    display: block;
   opacity:0.7;
    
     }

     .contact-centerCenter .links a:hover{
        color:white;
        opacity:1;
       
        
         }




    .contact-centerRight{
     padding-top:20px;
    
     
    }

     .contact-centerRight .med{
      display: flex;
      list-style: none;
      justify-content: center;

     }

     .med a{
      font-size: 25px;
      margin:15px;
     border:1px solid #fff;
      padding:5px 10px;
      display: block;
      border-radius: 10%;
     
     }
   
     .med .fab{
     color:white;
    opacity:0.7;
   
     }

     .med a:hover .fab{
        color:white;
       opacity:1;
        }

        .med a:hover{
        border:1px solid yellow;

        }


 
        #foot{
      background: #073950;
         padding:15px;
         text-align: center;
         color: wheat;
         font-size: 19px;
        }



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

            .contact-center{
             display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
            }


            .contact-centerLeft ,
            .contact-centerCenter,
            .contact-centerRight{
             flex:1 0 calc(40% - 10px);
       
            
            }


            .contact-centerCenter .links{
         
                display: flex;
                justify-content: center;
                flex-direction: column;  
               
                 }

                 .contact-centerCenter .links a{
                    color:white;
                    text-decoration: none;
                    font-size: 19px;
                    padding:10px;
                   
                    
                     }

                 .contact-centerCenter .links li{
                    padding:0px;
      
                   }  
                   
                

        }











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

            .contact-center{
             display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
            }


            .contact-centerLeft ,
            .contact-centerCenter,
            .contact-centerRight{
             flex:1 0 calc(30% - 10px);
       

            }

        }


/* end of contact us */

        /*for  button scroll up*/
.totop{

    margin:0 ;
    width:95%;
    }
    
    
    .totop #top{
    display:inline-block;
    background: black;/*#034f84  */
    /* border-radius: 50%; */
    padding: 5px;
    opacity:0.6;
    display:none;
    position:fixed;
    bottom:50px;
    margin-right:10px ;
    right:0;
    
    }
    
    .totop #top:hover{
    
    opacity:1;
    }
    
   
    #top .fas{
      color:dodgerblue;
      font-size: 25px;
      
    }
    /*end of button scroll up*/