*{
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;
font-family: 'Roboto', sans-serif;

}

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

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;
text-transform: capitalize;
}

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{
          
           padding:5px 25px;
           background: #2c2c2c;
           
          }
        
        .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;

}





.image1 img{
    width:100%;
    text-align: center;
    margin:0 auto;
}


.article1{
   
    padding:10px 10px 0px 10px;
    margin-bottom:0;
    
}



.article1 .h1{
    text-align: center;
    position:relative;
    font-size: 22px;
    padding-top:30px;
   
    }

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

        .article1:hover .under{

            width:260px;
        background: green;
        }









.article1-center{

padding:20px;
background: rgb(52, 125, 128);
/* background: rgb(38, 115, 117); */

/* background: rgb(52, 120, 151); */

}


.paragraph1{
    font-size: 20px;
    text-align:justify;
    color: #c4c7c9;
    font-family: 'Roboto', sans-serif;
    padding-bottom:30px;
}




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

.article1-center{
    display: grid;
    grid-template-columns: 63% 34%;
    justify-content: space-between;

}

}

/* end of article1 */


/* article2 */







    
    .article2 .h1{
        text-align: center;
        position:relative;
        font-size: 22px;
        }
    
        .article2 .h1 .under{
            text-align: center;
            padding:1px;
            width:1px;
            background: transparent;
            margin:2px auto;
            transition: all 1s ease;
            margin-bottom: 10px;
            }
    
            .article2:hover .under{
    
                width:130px;
            background: green;
            }




.article2{
    
    padding:10px 10px 0 10px;
    
}

.article2-center{
     background: #eeeded; 

    
    padding:20px 10px 20px 10px;
}

.article2-center .paragraph2 p{
   color: #444444;
    font-size: 20px;
    padding: 7px;
    padding-left:5px;
    
}

.article2-center .paragraph2{
    padding-bottom: 30px;

}

.article2-center .paragraph2 p i{
    
    font-size: 23px;
    padding-right: 15px;
    color:green;
}

.paragraph2-photo{
width:100%;

}

.paragraph2-photo img{
    width:100%;
    
    }



    @media screen and (min-width:406px){
        .article2-center{
            display: grid;
            grid-template-columns: 56% 44%;
        }

    }


    @media screen and (min-width:676px){
        .article2-center{
            display: grid;
            grid-template-columns: 40% 60%;
        }

    }

    @media screen and (min-width:776px){
        .article2-center{
            display: grid;
            grid-template-columns: 40% 40%;
            justify-content: space-around;
            align-items: center;
        }

    }

    /* end of article2 */


    /* lightbox gallery slider*/
    
    .gallery{
        padding:10px 10px 0px 10px;
        
         }

.gallery h1{
   
    text-align: center;
    font-size: 25px;
     padding-top:10px;
    }
    
    .gallery .h1{
        text-align: center;
        position:relative;
        }
    
        .gallery .h1 .under{
            text-align: center;
            padding:1px;
            width:1px;
            background: transparent;
            margin:2px auto;
            transition: all 1s ease;
            margin-bottom: 10px;
            }
    
            .gallery:hover .under{
    
                width:220px;
            background: green;
            }



    .gallery-center {
        background: rgb(202, 200, 200); 
        /* background: rgb(43, 87, 107); */

        background: url(../images/back2.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-position:center;


        width:100%;
        text-align: center;
      
        text-align: center;
        margin: 0 auto;
        padding-top:30px;
        padding-bottom: 30px;
        }
    
    
    .gallery-center a{
    position:relative;
    width:90%;
    text-align: center;
    margin:20px auto;
    display: block;
    overflow: hidden;
    }
    
    .gallery-center a img{
    
        width:100%;
        display:block;
        text-align: center;
        transition: all 1s ease;
        }
    
        .gallery-center a img:hover{
    
          transform: scale(1.2);
          opacity: 0.5;
          }
    
         
    
    
    
    
        .gallery-center a i{
          position:absolute;
          
         top:50%;
         left:50%;
         transform: translate(-50%,-50%);
          opacity:0;
          font-size: 35px;
          color: rgb(211, 175, 56);
      
          padding:10px;
          }
         
          .gallery-center a:hover i{
            opacity:1;
            background: rgb(233, 234, 235);
            border-radius: 50%;
           }
    
    
    
    
    
    
     @media screen and (min-width:576px){
    
        .gallery-center {
           display:grid;
           grid-template-columns:repeat(2,1fr) ;
            flex-wrap: wrap;
            }
    
          
    .gallery-center a{
    
      margin:10px;
        
        }  
    
     } 
     
     @media screen and (min-width:900px){
    
        .gallery-center {
           display:grid;
           grid-template-columns:repeat(3,1fr) ;
            flex-wrap: wrap;
            }
    
          
    .gallery-center a{
    
      margin:10px auto;
        
        }  
    
     } 
    
    
     @media screen and (min-width:1150px){
    
        .gallery-center {
           display:grid;
           grid-template-columns:repeat(4,1fr) ;
            flex-wrap: wrap;
            }
    
          
    .gallery-center a{
    
      margin:10px auto;
        
        }  
    
     } 
  /*end of lightbox gallery slider */


  /* why us */
.whyUs{
padding:10px 10px 0 10px;

}

.whyUs .h1{
    text-align: center;
    position:relative;
    padding-top:20px;
    }

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

        .whyUs:hover .under{

            width:80px;
        background: green;
        }


    




.whyUs-center{
    background: #eeeded; 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom:20px;
  
}

.whyUs-center p{
   font-size: 20px;
   padding:20px;
   width:90%;
  margin:0 auto;
  
  color: #707070;
}



.whyUs-center .whyUs-icon{
    text-align: center;
    margin:0px auto;
    width:30%;
   
    margin-top:20px;
    
}

.whyUs-icon i{
   font-size: 35px; 
   background: dodgerblue;
   padding:23px;
   border-radius: 50%;
   color:white;
}

.whyUs-icon p{
    text-transform: capitalize;
    padding:20px;
    font-size: 20px;
    font-weight: bold;
    color: #6b6b6b;
 }



    /*end of why us */

/* contact us */

#contactUs{
   
    
   }
   
   
   .contact .h1{
       padding-top:20px;
    text-align: center;
    position:relative;
    
    }


    .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:110px;
        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*/