*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

body{
    background-color: aliceblue; 
    min-height: 200vh;  
    overflow-x: hidden; 
}
html{
    overflow-x: hidden;
}

.header{
    padding: 4px 50px;
    height: auto;
    display:flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 1;
    background: transparent;    
}
 .sticky{
    background: aliceblue;
    transition: all 0.5s linear;
 }
 .sticky .mobile-nav-icon[name="menu-outline"]{
    color: black !important;
}
.sticky .mobile-nav-icon[name="close-outline"]{
    color: #000000;
}
.header .mobile-nav-icon[name="menu-outline"]{
    color: #fff;
}
.header .mobile-nav-icon[name="close-outline"]{
    color: #000000;
}
.header .logo img{
  max-width: 40%;
}
.navbar-list{
  display: flex;
  gap: 20px;
  list-style: none;  
}
.navbar-link:link,
.navbar-link:visited{
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    color: #000000;
    transition: all 0.6s;
}
.mobile-nav-icon{
    width: 2rem;
    height: 2rem;
    color: #000000;
}
.mobile-navbar-btn{
    display: block;
    background: transparent;
    cursor: pointer;
    z-index: 99;   
}
.navbar{
    /* display: none; */
    width: 100%;
    height: 100vh;
    background-color: aliceblue;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateX(100%);
    transition: all 0.6s linear;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;   
}
.active .navbar{
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.active .mobile-navbar-btn 
.mobile-nav-icon[name="close-outline"]{
    display: block;
}
.active .mobile-navbar-btn 
.mobile-nav-icon[name="menu-outline"]{
    display: none;
}
.navbar-list{
    flex-direction: column;
    align-items: right;
    font-weight:600;
    justify-content: center;
}
.mobile-nav-icon[name="close-outline"]{
    display: none;
}


.benner{
    position: relative;
    width: 100%;
    height: 80vh !important;
    top: 0;
    left: 0;
    overflow: hidden;               
}
video{
    width: 100%;    
}
.overlay{
    position: absolute;
    width: 100%;
    height: auto;
    background-color: #00000044;    
    top:30%;
    left: 0;
}
.overlay h2{
    text-align: center;    
    color: yellow; 
    font-size: 100px; 
    letter-spacing: 2px; 
}
.overlay h2 samp{
    color: white;
    font-size: 100px; 
    letter-spacing: 2px;
}
.overlay p{
    text-align: center;    
    color: rgb(255, 255, 255); 
    font-size: 20px; 
    letter-spacing: 1px; 
    padding: 10px 200px;
}
.about_us{
    width: 90%;
    display: flex;
    align-items: center;
    margin: auto;
    justify-content: space-between;
    height: auto; 
    background-color: aliceblue;  
}
.about_text{
    width: 50%;
}
.about_text h6{
    color: #6c6a6a;
    text-transform: uppercase;
    padding: 100px 0px 0px 50px;
    letter-spacing: 5px;
    font-weight: 70;
    font-size: 16px;

}
.about_text h3{
    color: #6c6a6a;
    font-size: 50px;
    padding: 10px 0px 0px 50px;
    text-transform: uppercase;
    letter-spacing: 14px;   
}
.about_text p{
    color: #6c6a6a;
    font-size: 16px;
    padding: 10px 10px 10px 50px;    
    letter-spacing: 2px; 
    font-family: 'DM Serif Display', serif;;
    line-height: 20px;

}
.about_img{
    width: 50%; 
    text-align: center;       
}
.about_img img{
    max-width: 100%;  
}
.awards{
    width: 100%;
}
.awards h3{
    color: #6c6a6a;
    font-size: 50px;
    padding: 60px 0px 0px 0px;
    text-transform: uppercase;
    letter-spacing: 14px; 
    text-align: center;  
}
.logo-slider {
    overflow: hidden;
    padding: 30px 0 0 0;
    white-space: nowrap;
    position: relative;
}

.logo-slider:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: inline-block;
    animation: 45s slide infinite linear;
}
.logos-slide button{
    width: 400px;
    height:290px;
    margin:0px 40px;
    background: none;
    overflow: hidden; 
    text-align: center;
    border: none;   
}
.logos-slide button img{
    width: 210px;
    height: 200px;
    border-radius: 100%;
    border: 10px solid  rgb(4, 90, 119);    
}
.logos-slide button h4{
    padding: 5px 40px;
}
.logos-slide img{
    width: 150px;
    height: 120px;
    background:none;
    overflow: hidden;
    margin: 0px 40px; 
           
}


@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.outline{
    width: 100%;
    height: auto;
    text-align: center;
    color: darkgrey;
}

.operations{
    width: 90%;    
    height: auto; 
    background-color:#fff; 
    margin:auto; 
    text-align: center;
}
.operations h3{
    color: #6c6a6a;
    font-size: 50px;
    padding: 10px 0px 0px 50px;
    text-transform: uppercase;
    letter-spacing: 14px;     
}
.operations p{
    color: #6c6a6a;
    padding: 10px 350px;
    line-height: 24px;
}

.operations_box{
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;    
}
.operations_box_in{
    width: 27%;
    height: 300px;
    margin: 40px; 
    transition: .9s ease;      
    background-color: none; 
    position: relative;      
    overflow: hidden;    
}
.operations_box_in img{
    max-width: 100%;
}
.operations_box_overlay{
    width: 100%;
    height: 100%;         
    background-color: rgb(4, 90, 119); 
    opacity: 0; 
    right: 0;
    top: 0;
    position: absolute;
    transition: all 0.6s ease;   	
}
.operations_box_in .operations_box_overlay:hover{
    opacity: 0.88;
}
.operations_box_in h3{
 position: absolute;
 text-transform: uppercase;
 font-size: 20px;
 color: white;
 width: auto;
 padding: 20px;
 transition: all 0.6s ease;
 z-index: 0;
 top: 0;  
 letter-spacing: 4px; 
}
.operations_box_overlay p{         
    color: #fff;   
    padding: 30px 20px;     
    transition: all 0.9s ease;
    text-align: left;
    font-size: 30px;
    position: absolute;
   top: 0;
  left: 0;
  right: 100%;  
  overflow: hidden;
  width: 0;
  height: 0;
  transition: .5s ease;
}
.operations_box_overlay h5{         
    color: #fff;   
    padding: 80px 20px;     
    transition: all 0.6s ease;
    text-align: left;
    font-size: 16px;
    position: absolute;
    top: 0;
    font-weight: 150;
    left: 100%;
    right: 0;  
    overflow: hidden;
    width: 0;
    height: 0;
    transition: .5s ease;
    line-height: 25px;
    letter-spacing: 1px;
}
.operations_box_overlay:hover h5{
    width: auto;
    left: 0;
    height: auto;
    
  
}
.operations_box_overlay:hover p{
    width: auto;
    right: 0;
    height: auto;
  
}

.market{
    width: 90%;    
    height: auto;      
    margin:auto; 
    text-align: center;    
}
.market h3{
    color: #6c6a6a;
    font-size: 50px;    
    text-transform: uppercase;
    letter-spacing: 14px;      
}
.market p{    
    color: #6c6a6a;
    padding: 10px 350px;
    line-height: 24px;
}
.market img{   
    max-width: 100%;
}
.CERTIFICATIONS{
    width: 90%;    
    height: auto;      
    margin:auto;
    text-align: center;
    padding: 20px 0px;
}
.CERTIFICATIONS h4{
    color: #079dde;
    font-size: 40px;    
    text-transform: uppercase;
    letter-spacing: 14px;      
}

.feeds{
    width: 90%;    
    height: auto;      
    margin-left: 5%; 
    text-align: center;
    padding: 0px 0px 50px 0px;
}
.feeds h3{
    color: #6c6a6a;
    font-size: 50px;    
    text-transform: uppercase;
    letter-spacing: 14px;
    padding: 40px 0px 10px 0px;      
}
.feeds p{    
    color: #6c6a6a;
    padding: 10px 200px;
    line-height: 24px;
}
.feeds_img{
  width: 70%;
  height: auto;
  display: flex;
  justify-content: space-between;
  margin: auto;
  align-items: center; 
}
.products{
    width: 90%;    
    height: auto;      
    margin:auto;
    text-align: center;
    background-color:#fff;    
}
.products h3{
    color: #6c6a6a;
    font-size: 50px;    
    text-transform: uppercase;
    letter-spacing: 14px;
    padding: 40px 0px 10px 0px;      
}
.products p{    
    color: #6c6a6a;
    padding: 0px 200px;
    line-height: 24px;
}
.products h6{    
    color: #535151;
    padding: 15px 200px;
    line-height: 24px;
    font-size: 16px;
}
.products_img{
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    align-items:center;
    justify-content: center;
}
.products_img_in{
    width: 14%;
    height: 200px;
    margin: 0px 15px; 
    position: relative; 
    overflow: hidden;  
}
.products_img_in img{    
    max-width: 100%;
}
.products_img_overlay{
    width: 100%;
    height: 100%;         
    background-color: rgb(4, 90, 119); 
    opacity: 0; 
    right: 0;
    top: 0;
    position: absolute;
    transition: all 0.6s ease;   	
}
.products_img_in h4{
    width: 100%;       
    opacity:1; 
    text-align: left;
    font-size: 25px;
    font-weight: 200; 
    padding: 50px 20px;   
    position: absolute;
    transition: all 0.6s ease; 
    color: #fff;  	
}
.products_img_in .products_img_overlay:hover{
    opacity: 0.80;
}
.brand{
    width: 90%;    
    height: auto;      
    margin:auto;
    text-align: center;
    background-color:#fff;     
}
.brand h4{
    color: #079dde;
    font-size: 35px;  
    padding: 50px 0px 0px 0px;  
    text-transform: uppercase;
    letter-spacing: 17px;      
}
.brand_img{
 width: 70%;
 height: auto;
 justify-content: center;
 align-items: center;
 display: flex;
 margin: auto;
}
.brand_img_in{
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 0px 50px;
}
.brand_img_in img{
    max-width: 100%;
    cursor: pointer;
    -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease;
  transition: .3s ease;
}
.brand_img_in:hover img{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.factory{
    width: 100%;    
    height: 80vh;
    background-image: url(../img/factory.jpg);
    background-position: center;
    background-size: cover;
    position: relative;    
}
.factory_overlay{
    width: 40%;
    height: 45vh;
    top: 180px;
    left: 160px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.817);
    position: absolute;
   
}
.factory_overlay h4{    
    color: #000000;
    font-size: 30px;  
    padding: 30px 0px 0px 30px;  
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 800;
}
.factory_overlay h5{   
    color: #444343;
    font-size: 25px;  
    padding: 20px 0px 0px 30px;  
    text-transform: uppercase;
    letter-spacing: 20px;
    font-weight: 600;
}
.factory_overlay ul{
    padding: 10px 0px 0px 50px; 
}
.factory_overlay ul li{
    color: #000000;
    padding: 10px 0px;
}
footer{
    width: 96%;
    display: flex;
    justify-content: center;
    align-items: top;
    margin: auto;
    background-color:rgb(5 80 153);
    height: auto;
    margin-top: 50px !important;
    margin:auto;
}

.footer_logo{
    width: 30%;
    height: 300px; 
    text-align: center;  
    background-color: aliceblue; 
}
 .footer_logo img{
    max-width: 50%;
    margin-top: 65px;

 }
.footer_link{
    width: 30%;
    height: auto;
    
}
.footer_link h3{
    text-align: center;
    margin: 30px 0px;
    text-transform: uppercase;
    font-size: 30px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
}
.footer_link ul{}

.footer_link ul li{
    margin: 8px 0px 0px 200px;
    text-align: left;
    font-weight: 400;
    color: #fff;
    text-transform: capitalize;
    font-size: 20px;
}
.footer_link ul li a{   
    text-align: left;
    font-weight: 400;
    color: #fff;
    text-transform: capitalize;
    font-size: 20px;
    text-decoration: none;
}
.footer_adress{
    width: 30%;
    height: auto;
}
.footer_adress h3{
    text-align: center;
    margin: 30px 0px;
    text-transform: uppercase;
    font-size: 30px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
}
.footer_adress p{    
    text-align: left;
    font-weight: 400;
    color: #fff;
    text-transform: capitalize;
    font-size: 20px;
    display: inline-block;
    text-decoration: none;
    margin: 5px 80px;
    line-height: 31px;
    letter-spacing: 1px;
}

.footer_end{
    width: 96%;    
    background-color: rgb(5 80 153);
    height: auto;    
    margin:auto;
    text-align: center;
    border-top: 2px solid aliceblue;
}
    
.footer_end p{
    color: #fff;
    padding: 30px 0px;
}
.footer_end p a{
    color: #fff;
}