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

}






/* banner slider */
.banner{

/* background: url(./images/sun.jpg); */
/* min-height: 90vh;
background-attachment: fixed;
background-position: center;
background-size:  cover ;   
background-repeat: no-repeat; */
margin-top:2px;


}


/* 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 */


    /* socia media */





    .media{
display:flex;
flex-direction: column;
width:40px;
position: absolute;
top:140px;

    }

   .media .fab {
        padding: 5px;
        font-size: 30px;
        width: 45px;
        text-align: center;
        text-decoration: none;
        margin: 1px 0px;
        opacity:0.6;
        transition: 1s all ease;
        border:px solid #fff;
      }



      .media .fab:hover{

opacity:1;

width:60px;

padding: 5px;

      }

   

    .media a .fa-facebook-square{
        background: #3B5998;
    color:white;

    }

    .media a .fa-youtube-square{
        background: #bb0000;
       color:rgb(245, 244, 244);
   
       }

       .media a .fa-linkedin{
        background: #007bb5;
       color:rgb(245, 244, 244);
   
       }

       .media a .fa-twitter-square{
        background: #55ACEE;
       color:rgb(245, 244, 244);
   
       }




  /* end of socia media */



/* special offers */
#main{
    background: #e0dfdf;
}

  #offers{
padding:10px;
padding-bottom:30px;
/* background: rgb(238, 235, 235); */

  }

#offers .h1{
text-align: center;

font-size: 35px;
}

.subText .under{
border:1px solid rgb(238, 235, 235);
text-align: center;
margin:0 auto;
width:1px;
transition:all 1s ease;

}

.subText {
   padding:20px;
    
    }

    #offers:hover .under {
        width:100px;
        border:1px solid green;
         }



.offer-center-left{
background: #797a7a;
margin-top:30px;
 border-radius: 10px;
 padding-bottom:10px;
 font-family: 'Roboto', sans-serif;
 /* font-family: 'Thasadith', sans-serif; */
}

.offer-center-left h2{

text-align: center;
color:rgb(221, 217, 217);
padding:5px;

}
.lists{

list-style: none;

}

.lists li a{

    text-decoration:none;
    display: block;
    padding:10px;
    color:white;
    font-size: 16px;
    /* background:#323232; */
    background:#202020;
    transition:0.5s all;
    
  
}

.lists li a:hover {

  
    color:orange;
    padding-left: 15px;
  
    

}

.underli{

border:1px solid rgb(128, 127, 127);
width:3px;
transition:all 1s ease;
}

 li:hover .underli {
border:1px solid orange;
    
    width:140px;
    

}




.offer-center-right{

    background: rgb(7, 78, 126);
margin-top:30px;
 padding:20px;
 
}


.offer-center-right h2{
text-transform: capitalize;
text-align: center;
color: #d4d3d3
}
.offer-center-right  .underline{

width:120px;
margin:5px auto;
background: rgb(241, 178, 6);
height:2px;

}





.right-subBox{

width:100%;

margin:0 auto;
text-align: center;

}

.right-subBox img{

width:90%;
height:220px;
margin:0 auto;
text-align: center;
border-radius: 10px;
border:1px solid rgb(102, 101, 101);
}


.right-subBox p{

    width:100%;
    margin:0 auto;
    text-align: center;
    padding:10px;
    font-size: 20px;


    }

    .right-subBox h3{
    color:rgb(11, 117, 68);
   margin:0;
   padding: 0;
   font-size:23px;
    }

    .rigthBox{

 border:1px solid rgb(235, 235, 233);
 width:90%;
  margin:20px auto;
  background: #ccc;
  padding:10px;
    }

    .rigthBox .buy{
    
        text-align: center;
       margin:0px auto;
       margin-top:15px;
       color:rgb(167, 163, 163);
       width:70%;
       display: block;
       background: rgb(49, 49, 49);
       padding:7px;
       font-size: 20px;
       text-decoration: none;
       transition: background 1s ease, color 1s ease,transform 0.5s ease;

    } 

    .rigthBox .buy:hover{
    
      
       color:#fff;
       background: rgb(4, 88, 74);
       transform: scale(1.2);
      

    } 

    
   /* .paypal{

  width:100%;
  margin:0 auto;
   //background: red;
   margin-top: 15px;
   text-align: center;
   } */

  

 



    /* for take it box hover */

    /* .rigthBox:hover .buy{
    
      
        color:#fff;
        background: rgb(4, 88, 74);
        transform: scale(1.2);
       
 
     } */
   /* end for take it box hover */


    .rigthBox span{
text-decoration:line-through;
    margin:5px;
    font-size: 19px;
     color: #bb0000;
    }



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

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



.offer-center-left{
width:33%;
align-self: flex-start;
padding-bottom:10px;
/* margin:30px 0; */
}

.offer-center-right{
    width:64%;
   
    }

    .boxes{

  display: flex;
   width:100%;
   flex-wrap: wrap;
    }

    .boxes .rigthBox{
     flex:0 1 calc(50% - 15px);
     
    }


    .right-subBox img{

        width:90%;
        height:100px;
        }

        .rigthBox .buy{
    
           padding:4px;
        }


}



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

 
    
   
    
    .offer-center-left{
    width:27%;
    align-self: flex-start;
    /* margin:30px 0; */
    }
    
    .offer-center-right{
        width:70%;
       
        }
    
        .boxes{
    
      display: flex;
       width:100%;
       flex-wrap: wrap;
        }
    
        .boxes .rigthBox{
         flex:0 1 calc(50% - 15px);
         
        }
    
    
        .right-subBox img{
    
            width:80%;
            height:120px;
            }
    
            .rigthBox .buy{
        
               padding:4px;
            }
        }
    
 
  
@media screen and (min-width:940px){

 
    
   
    
    .offer-center-left{
    width:19%;
    align-self: flex-start;
    /* margin:30px 0; */
    }
    
    .offer-center-right{
        width:79%;
       background: rgb(7, 78, 126); 
       /* //background: rgb(16, 120, 180);  */
        }
    
    
        .boxes .rigthBox{
         flex:0 1 calc(25% - 15px);
         
        }
    
    
        .right-subBox img{
    
            width:100%;
            height:120px;
            }
    
            .rigthBox .buy{
        
               padding:4px;
            }
        }
    


  /*end of special offers */

  /*about us  */

  #about .subText{
text-align: center;
font-size: 24px;
color: rgb(207, 205, 205);
/* color: rgb(12, 12, 12); */
  }



  .subText .under{
    border:1px solid transparent;
    text-align: center;
    margin:0 auto;
    width:1px;
    transition:all 1s ease;
    
    }
    
    .subText {
       padding:20px;
        
        }
    
        #about:hover .under {
            width:150px;
            border:1px solid green;
             }










  #about{

 background: url(../images/back2.jpg);
 background-attachment: fixed;
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
padding:10px;
margin:0 auto;
padding-bottom: 50px;
  }






  
  .about-center-left{
   background: rgba(0,0,0,0.5);
   padding:15px;
   font-family: 'Quicksand', sans-serif;
  }

  
  .about-center-left h2{
    color:yellow;
    padding:5px;
 
   }

   .about-center-left p{
   color:#fff;
   font-size: 19px;
  line-height: 1.5;
  text-align: justify
   }

   .about-center-right{

    margin-top:20px;
    background: rgba(0,0,0,0.5);
    padding:15px;
    font-family: 'Quicksand', sans-serif;
   }


   .about-center-right h2{
    color:yellow;
    padding:5px;
 
   }

    .box1{
list-style: none;
 
    }

    .box1 li{
color:#fff;
font-size: 19px;
line-height: 1.7;
    }

    .box1 i{
  color:green;
  margin-right: 10px;
font-size: 23px;
    }




    @media screen and (min-width:650px){
        .about-center{
    
    display:grid;
    grid-template-columns: 53% 43%;
    justify-content: space-between;
    grid-column-gap: 4%;
    padding:10px;
    
        }
    
        
         
    
    }



@media screen and (min-width:880px){
    .about-center{

display:grid;
grid-template-columns: 40% 57%;
justify-content: space-between;
align-self: center;
grid-column-gap: 2%;


    }

    .about-center-left{
     
        padding:15px 15px 35px 15px;
      
       }

    .about-center-rightBox{

       display: grid;
       grid-template-columns: repeat(2,1fr);

       }
     

}


/* contact us */

#contactUs{

    /* background: #e0dfdf; */
    
}


 .subText h1{
text-align: center;


 }


 .subText .under{
    border:1px solid transparent;
    text-align: center;
    margin:0 auto;
    width:1px;
    transition:all 1s ease;
    
    }
    
    .subText {
       padding:20px;
        
        }
    
        #contactUs:hover .under {
            width:150px;
            border:1px solid 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;
font-size: 18px;

 }

 .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*/