*{
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;

}









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



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

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

        .faults:hover .under{

            width:190px;
        background: green;
        }





/* end of article1 */


/* faults */

.faults-center{
    background: #0d6e6d;
    padding: 20px 10px;

}

.faults-center p{
    font-family: 'Roboto', sans-serif;
   font-size: 19px;
   width:97%;
    margin:0 auto;
   color:rgb(204, 203, 203);

}


.faults-flex {
 margin-top:40px;

}

.singleFlex{
    padding:20px 0px;
    width:96%;
    margin:0 auto;
}

.singleFlex h2{
    /* margin-left: 5px; */
   padding:10px 0px;
 position:relative;
 color:#d5d7da;

}


/* forn underline */
.singleFlex .title1:after{
  position:absolute;
  width:150px;
  padding:1px;
  background: rgb(209, 208, 208);
 
  content: "";
  top:35px;
  left:0;

}


.singleFlex .title2:after{
    position:absolute;
    width:110px;
    padding:1px;
    background: rgb(209, 208, 208);
   
    content: "";
    top:35px;
    left:0;
  
  }

  .singleFlex .title3:after{
    position:absolute;
    width:115px;
    padding:1px;
    background: rgb(209, 208, 208);
   
    content: "";
    top:35px;
    left:0;
  
  }

  .singleFlex .title4:after{
    position:absolute;
    width:175px;
    padding:1px;
    background: rgb(209, 208, 208);
   
    content: "";
    top:35px;
    left:0;
  
  }

/* end of underline */



.singleFlex p{
    /* margin-left: 5px; */
    width:100%;
}



/* end of faults */





    /* lightbox gallery slider */
    
    .gallery{
        padding:10px 10px 0px 10px;
        
         }
        
        .gallery h1{
           
            text-align: center;
            font-size: 25px;
            
            }
            
            .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:160px;
                    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;
                overflow: hidden;
                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 */



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

    .contact .h1{
        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*/