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

::-webkit-scrollbar {
    width: 15px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #1660a081; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #165fa0; 
  }


  /* .wrapper{
    overflow: hidden;
  } */

/* -----------------home page css -----------------------*/

.top-bar{
    background-color: #165fa0;
}

.top-bar .box1 i{
    padding: 3px 15px 3px 0;
    font-size: 22px;
}

.top-bar .box2 p{
    margin: 0;
    color: #fff;
    font-size: 17px;
}

.top-bar .box3 i{
    font-size: 17px;
}

.top-bar .box3 a{
    text-decoration: none;
    color: #fff;
    font-size: 17px;
}

.bottom-bar{
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #ffffffce;
    transition: 0.3s;
}

.bottom-bar .box2 nav{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-bar .box2 nav ul{
    padding: 0;
    margin: 0;
    display: flex;
}

.bottom-bar .box2 nav ul li{
    list-style-type: none;
    margin: 15px;
}

.bottom-bar .box2 nav ul li a{
    text-decoration: none;
    color: #165fa0;
    font-size: 19px;
    position: relative;
    font-weight: 500;
}

.bottom-bar .box2 nav ul li a::after{
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: -10px;
    transform: scale(0);
    background-color: #165fa0;
    transition: 0.3s;
}

.bottom-bar .box2 nav ul li a:hover::after{
    transform: scale(1);
}



.bottom-bar .box3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bottom-bar .box3 .req-btn{
    text-decoration: none;
    color: #fff;
    background-color: #165fa0;
    display: block;
    padding: 10px 14px;
    text-align: center;
    border-radius: 50px;
    transition: all ease-in-out 0.3s;
}

.bottom-bar .box3 .req-btn:hover{
    background-color: transparent;
    color: #165fa0;
    outline: 1px solid #165fa0;
}


/* home section start */
.home-section{
    position: relative;
    overflow: hidden;
}

.home-section .home-bg-1{
    background-image: url('../img/Banner/1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    min-height: 500px;
    background-color: #edeaea;
}

.home-section .home-bg-2{
    background-image: url('../img/Banner/2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px; 
}

.home-section .home-bg-3{
    background-image: url('../img/Banner/3.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px;
}

.home-section .home-bg-1 .content{
   position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
}

.home-section .home-bg-2 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 .home-section .home-bg-3 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 
 .home-section .content h1{
    color: #fff;
  }
  
.home-section .content p{
    color: #fff;
}

.home-section .content a{
    text-decoration: none;
    color: #fff;
    background-color: #165fa0;
    padding: 10px 15px;
    border-radius: 50px;
}

/* .carousel .carousel-control-prev{
    background-color: red;
} */


.carousel .carousel-indicators button{
    background-color: #fff !important;
    margin: 0 5px;
    padding-inline: 8px;
}
/* home section end */


/* wwa and enq form */

.wwa-enqform .box1 .bluebox{
    width: 20%;
    height: 5px;
    background-color: #165fa0;
    margin-bottom: 20px;
}

.wwa-enqform .box1 h1{
    color: #165fa0;
}

.wwa-enqform .box1 h4{
    color: #165fa0;
}

.wwa-enqform .box2{
    background-image: url('../img/form-bg.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.wwa-enqform .box2 .formbox{
    width: 100%;
    height: 100%;
    padding: 10px;
    border: #fff solid 1px;
    border-radius: 10px;
}

.wwa-enqform .box2 .formbox h1{
   color: #fff;
   text-align: center;
}

.wwa-enqform .box2 .formbox input{
    width: 100%;
    padding: 7px 15px;
    outline: 0;
    background-color: transparent;
    border: #fff solid 1px;
    border-radius: 20px;
    color: #000;
}

.wwa-enqform .box2 .formbox input:focus{
    background-color: #fff;
    transition: 0.3s;
}

.wwa-enqform .box2 .formbox input::placeholder{
    color: #fff;
}

.wwa-enqform .box2 .formbox a{
    text-decoration: none;
    color: #fff;
    background-color: #165fa0;
    padding: 9px 60px;
    border-radius: 20px;
    transition: all ease-in-out 0.3s;
}

.wwa-enqform .box2 .formbox a:hover{
    color: #165fa0;
    background-color: #fff;
}


/* wwa and enq form */

/* whom we deal with */

.wwdeal .bluebox{
    width: 12%;
    height: 5px;
    background-color: #165fa0;
    margin-bottom: 20px;
}

.wwdeal h1{
    color: #165fa0;
}

.wwdeal .box1, .box2, .box3{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.wwdeal .box1 h4, .box2 h4{
    color: #165fa0;
}

.wwdeal .box3 h4{
    margin: 6px 0 0 0;
    color: #165fa0;
}

/* whom we deal with */

/* trusted wholesaler */

.wholesalerusa .bluebox{
    width: 12%;
    height: 5px;
    background-color: #165fa0;
    margin-bottom: 20px;
}

.wholesalerusa h1{
    color: #165fa0;
}

.wholesalerusa .box1, .box2, .box3{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.wholesalerusa .box1 h4, .box2 h4{
    color: #165fa0;
}

.wholesalerusa .box3 h4{
    margin: 2px 0 0 0;
    color: #165fa0;
}


/* trusted wholesaler */

/* product categories */
.productcat .bluebox{
    width: 12%;
    height: 5px;
    background-color: #165fa0;
    margin-bottom: 20px;
}

.productcat h1{
    color: #165fa0;
}


.productcat .box h4{
    color: #165fa0;
}


.productcat .box .product{
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.productcat .box .product img{
    transition: 0.5s;
}

.productcat .box .product:hover img{
    transform: scale(1.3);
}


.productcat .box .product:hover .proinfo{
    bottom: 0;
}

.productcat .box .product .proinfo{
    width: 100%;
    height: 100%;
    padding: 5px;
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #1660a07e;
    transition: 0.5s;
    backdrop-filter: blur(5px);
}

.productcat .box .product .proinfo p{
   margin: 0;
   color: #fff;
}

/* product categories */

/* we work with the best */
.workbest .bluebox{
    width: 12%;
    height: 5px;
    background-color: #165fa0;
    margin-bottom: 20px;
}

.workbest h1{
    color: #165fa0;
}

.workbest p{
    margin: 0;
}

.workbest .box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



/* we work with the best */

/* sign up for work with us */

.signupform{
    background: linear-gradient(to top, #165fa0 50%, #fff 50%);
}

.signupform .container{
    background-color: #fff;
    border-radius: 20px;
    border: #165fa0 1px solid;
}

.signupform input{
    width: 100%;
    padding: 7px 15px;
    outline: 0;
    border: #165fa0 1px solid;
    border-radius: 5px;
}

.signupform input:focus{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}


.signupform a{
    text-decoration: none;
    color: #fff;
    display: block;
    text-align: center;
    padding: 8px 0;
    background-color: #165fa0;
    border-radius: 20px;
    transition: all ease-in-out 0.3s;
}

.signupform a:hover{
    color: #165fa0;
    background-color: #fff;
    outline: #165fa0 solid 1px;
}

/* sign up for work with us */

/* footer */
.footer{
    background-color: #165fa0;
}

.footer .box2{
   display: flex;
   flex-direction: column;
   align-items: start;
}


.footer .box2 h3{
    color: #fff;
}

.footer .box2 ul{
    margin: 0;
    padding: 0;
}

.footer .box2 ul li{
    list-style-type: none;
}

.footer .box2 ul li a{
   text-decoration: none;
   color: #fff;
}

.footer .box3{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
 }
 

.footer .box3 h3{
    color: #fff;
}

.footer .box3 p{
    color: #fff;
}

.footer .box3 a{
    color: #fff;
    text-decoration: none;
}

.footer .box4 i{
    padding: 0 10px 0 0;
}

.footer .box5 p{
   color: #fff;
   margin-bottom: 14px;
   text-align: center;
}

/* footer */

/*---------------------------- home page css --------------------------*/



/*---------------------------- about page css --------------------------*/

.about-home-section{
    position: relative;
    overflow: hidden;
}

.about-home-section .about-home-bg-1{
    background-image: url('../img/Banner/About\ Us.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    min-height: 500px;
    background-color: #edeaea;
}

.about-home-section .about-home-bg-2{
    background-image: url('../img/Banner/About\ Us.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px; 
}

.about-home-section .about-home-bg-3{
    background-image: url('../img/Banner/About\ Us.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px;
}

.about-home-section .about-home-bg-1 .content{
   position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
}

.about-home-section .about-home-bg-2 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 .about-home-section .about-home-bg-3 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 
 .about-home-section .content h1{
    color: #fff;
  }
  
.about-home-section .content p{
    color: #fff;
}

.about-home-section .content a{
    text-decoration: none;
    color: #fff;
    background-color: #165fa0;
    padding: 10px 15px;
    border-radius: 50px;
}

.aboutus .bluebox{
    width: 12%;
    height: 5px;
    background-color: #165fa0;
    margin-bottom: 20px;
}

.aboutus h1{
    color: #165fa0;
}

.aboutus p{
    margin: 0;
}

/*---------------------------- about page css --------------------------*/


/*---------------------------- ourproduct page css --------------------------*/

.ourproduct-home-section{
    position: relative;
    overflow: hidden;
}

.ourproduct-home-section .ourproduct-home-bg-1{
    background-image: url('../img/Banner/product.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    min-height: 500px;
    background-color: #edeaea;
}

.ourproduct-home-section .ourproduct-home-bg-2{
    background-image: url('../img/Banner/product.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px; 
}

.ourproduct-home-section .ourproduct-home-bg-3{
    background-image: url('../img/Banner/product.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px;
}

.ourproduct-home-section .ourproduct-home-bg-1 .content{
   position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
}

.ourproduct-home-section .ourproduct-home-bg-2 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 .ourproduct-home-section .ourproduct-home-bg-3 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 
 .ourproduct-home-section .content h1{
    color: #fff;
  }
  
.ourproduct-home-section .content p{
    color: #fff;
}

.ourproduct-home-section .content a{
    text-decoration: none;
    color: #fff;
    background-color: #165fa0;
    padding: 10px 15px;
    border-radius: 50px;
}

.ourproduct .bluebox{
    width: 20%;
    height: 5px;
    background-color: #165fa0;
    margin-inline: auto;
    margin-bottom: 5px;
}

.ourproduct h1{
    color: #165fa0;
    margin-bottom: 50px;
}


.ourproduct h3{
    color: #165fa0;
}

/*---------------------------- our prodcuts page css --------------------------*/

/*---------------------------- brands page css --------------------------*/

.brands-home-section{
    position: relative;
    overflow: hidden;
}

.brands-home-section .brands-home-bg-1{
    background-image: url('../img/Banner/brands.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    min-height: 500px;
    background-color: #edeaea;
}

.brands-home-section .brands-home-bg-2{
    background-image: url('../img/Banner/brands.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px; 
}

.brands-home-section .brands-home-bg-3{
    background-image: url('../img/Banner/brands.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px;
}

.brands-home-section .brands-home-bg-1 .content{
   position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
}

.brands-home-section .brands-home-bg-2 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 .brands-home-section .brands-home-bg-3 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 
 .brands-home-section .content h1{
    color: #fff;
  }
  
.brands-home-section .content p{
    color: #fff;
}

.brands-home-section .content a{
    text-decoration: none;
    color: #fff;
    background-color: #165fa0;
    padding: 10px 15px;
    border-radius: 50px;
}

.brands .bluebox{
    width: 12%;
    height: 5px;
    background-color: #165fa0;
    margin-bottom: 20px;
}

.brands h1{
    color: #165fa0;
}

.brands p{
    margin: 0;
}

/*---------------------------- brands page css --------------------------*/


/*---------------------------- contactus page css --------------------------*/

.contactus-home-section{
    position: relative;
    overflow: hidden;
}

.contactus-home-section .contactus-home-bg-1{
    background-image: url('../img/Banner/contactus-ban.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    min-height: 500px;
    background-color: #edeaea;
}

.contactus-home-section .contactus-home-bg-2{
    background-image: url('../img/Banner/contactus-ban.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px; 
}

.contactus-home-section .contactus-home-bg-3{
    background-image: url('../img/Banner/contactus-ban.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px;
}

.contactus-home-section .contactus-home-bg-1 .content{
   position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
}

.contactus-home-section .contactus-home-bg-2 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 .contactus-home-section .contactus-home-bg-3 .content{
    position: absolute;
   top: 30%;
   left: 9%;
   width: 35%;
 }

 
 .contactus-home-section .content h1{
    color: #000;
  }
  
.contactus-home-section .content p{
    color: #000;
}

.contactus-home-section .content a{
    text-decoration: none;
    color: #fff;
    background-color: #165fa0;
    padding: 10px 15px;
    border-radius: 50px;
}

.contactus .bluebox{
    width: 12%;
    height: 5px;
    background-color: #165fa0;
    margin-bottom: 20px;
}

.contactus h1{
    color: #165fa0;
    margin-bottom: 20px;
}

/* contactus */

.contactus .box1 .bluebox{
    width: 20%;
    height: 5px;
    background-color: #165fa0;
    margin-bottom: 15px;
}

.contactus .box1 h1{
    color: #165fa0;
}

.contactus .box1 h5{
    color: #000;
}

.contactus .box1 a{
    text-decoration: none;
    color: #000;
}


.contactus .box2{
    background-image: url('../img/form-bg.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.contactus .box2 .formbox{
    width: 100%;
    height: 100%;
    padding: 10px;
    border: #fff solid 1px;
    border-radius: 10px;
}

.contactus .box2 .formbox h1{
   color: #fff;
   text-align: center;
}

.contactus .box2 .formbox input{
    width: 100%;
    padding: 7px 15px;
    outline: 0;
    background-color: transparent;
    border: #fff solid 1px;
    border-radius: 20px;
    color: #000;
}

.contactus .box2 .formbox input:focus{
    background-color: #fff;
    transition: 0.3s;
}

.contactus .box2 .formbox input::placeholder{
    color: #fff;
}

.contactus .box2 .formbox a{
    text-decoration: none;
    color: #fff;
    background-color: #165fa0;
    padding: 9px 60px;
    border-radius: 20px;
    transition: all ease-in-out 0.3s;
}

.contactus .box2 .formbox a:hover{
    color: #165fa0;
    background-color: #fff;
}


/* contactus */

/*---------------------------- contactus page css --------------------------*/