/*--------------- Banners as a background ---------------  */

#about-us-banner {
  background-image: url('/images/page-banner/about-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:50%;
}

/*About us test banner start */
#about-us-banner-test{
  background-image: url('/images/page-banner/about-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:50%;
}

.about-us-banner-test{
     top:418px !important;
}
/*About us test banner end */



#product-gallery-banner{
  background-image: url('/images/page-banner/product-gallery-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:50%;
}

#career-banner{
  background-image: url('/images/page-banner/career-banner.webp'); 
  background-repeat: no-repeat;
  background-size: 100% auto;
  /*background-size: 132% auto;*/
  background-attachment: local; 
  padding-top:40%;
  position:relative;
}

/*.bg_banner img{*/
/*    position:relative;*/
/*    height: auto;*/
/*}*/


#bulk-order-banner{
  background-image: url('/images/page-banner/bulk-order-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:50%;
}

#faq-banner{
  background-image: url('/images/page-banner/faq-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:50%;
}

#company-policy-banner{
  background-image: url('/images/page-banner/policy-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:50%;
}

.user-based-banner{
    background-image: url('/images/page-banner/user-based-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:10%;
}

.home-page-banner{
  background-image: url('/images/page-banner/home-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:10%;
}

.product-details-banner{
  background-image: url('/images/page-banner/product-detail-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:50%;
}


.contact-us-banner{
  background-image: url('/images/page-banner/contact-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:40%;
}

.news-page-banner{
  background-image: url('/images/page-banner/policy-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:35%;
}

/*.news-detail-page-banner{*/
/*  background-image: url('/images/page-banner/policy-banner.webp');*/
/*  background-repeat: no-repeat;*/
/*  background-size: 100% auto;*/
/*  background-attachment: local; */
/*  padding-top:35%;*/
/*}*/


.patent-banner{
  background-image: url('/images/page-banner/patent-banner.webp'); /* Update path */
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local; 
  padding-top:40%;
}


/* ---------------- Banner heading style ---------------- */
.banner-heading-custom {
    position:absolute;
    /*width:550px;*/
    min-width:100%;
    /*top:370px;*/
    top:418px;
    left:50%;
    transform: translate(-50%, -50%);
    color:var(--white-color);
    text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.25);
    /*background-color:red;*/
    text-align:center;
    font-size:70px;
    font-family:var(--gupter);
    font-weight:bold;
    text-transform:uppercase;
    padding-left:15px;
    padding-right:15px;
}

/*@media only screen and (max-width: 1024px) {*/
/*    font-size:50px;*/
/*}*/

@media only screen and (max-width: 1024px){
    #faq-banner .banner-heading-custom,
    #company-policy-banner .banner-heading-custom{
        top: 320px !important;
    }
    
#about-us-banner,
#product-gallery-banner,
#bulk-order-banner, 
#faq-banner, 
#company-policy-banner,
#career-banner,
/*.user-based-banner,*/
/*.home-page-banner,*/
.product-details-banner,
.contact-us-banner,
.news-page-banner, 
.patent-banner{
background-size: 250% auto !important;
}

}

@media only screen and (max-width: 434px){
.banner-heading-custom{
top:300px !important;
font-size:40px !important;
}

#faq-banner .banner-heading-custom {
    top: 230px !important;
}

#company-policy-banner .banner-heading-custom{
    top: 300px !important;
}

 
#about-us-banner,
#product-gallery-banner,
#bulk-order-banner, 
#faq-banner, 
#company-policy-banner,
/*.user-based-banner,*/
/*.home-page-banner,*/
.product-details-banner,
.contact-us-banner,
.news-page-banner,
.patent-banner{
background-size: 250% auto !important;
padding-top:80%;
}


#company-policy-banner{
    padding-top:100% !important;
}


.product-details-banner{
 padding-top:100%;
}

#career-banner{
    background-size: 320% auto !important;
    padding-top:80%;
}

.user-based-banner,
.home-page-banner{
background-size: 250% auto !important;
padding-top:40%;
}

}


@media(min-width: 540px) and (max-width: 551px){
    .banner-heading-custom{
        top: 220px !important;
    }
    
    body.home-page-banner,
    body.user-based-banner{
        padding-top: 24% !important;
    }
    
    #faq-banner .banner-heading-custom,
    #company-policy-banner .banner-heading-custom{
        top: 260px !important;
        font-size:44px;
    }
}


@media (min-width: 434px) and (max-width: 991px){
    .banner-heading-custom{
        top: 320px ;
    }
    
    .home-page-banner,
    .user-based-banner{
        padding-top: 18% !important;
    }
    
    .green-box-for-tab p{
        text-align:center !important;
    }
}


@media (max-width: 992px){

#about-us-banner,
#product-gallery-banner,
#bulk-order-banner, 
#faq-banner, 
#company-policy-banner,
#career-banner,
/*.user-based-banner,*/
/*.home-page-banner,*/
.product-details-banner,
.contact-us-banner,
.news-page-banner, 
.patent-banner{
background-size: 250% auto !important;
}

.product-details-banner{
padding-top:70%;
}

.patent-banner{
padding-top:80%;
}

}


@media (max-width: 551px){
    .product-details-banner{
      padding-top:90%;
    }
}


@media (max-width: 651px){
   #faq-banner .banner-heading-custom{
    font-size: 38px !important;
    top: 260px !important;
   }
   
   #faq-banner{
     padding-top: 100%;
   }
}