/*----AGE VERIFICATION ---*/
  .gradient-button {
    background: linear-gradient(to left, #9867e5, #83c3fa);
    color: #fff;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .gradient-button:hover {
    background: linear-gradient(to bottom, #ff6600, #ff9900);
  }



  .header-section {
    background-color:#fff; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height:300px;
    
  }

  .header-image {
    height:auto;
    width:100%;
    object-fit:contain;
    object-position: right;
  }


  .header-slide-carousel{
    /* height:160px; */

    height:auto;
    width:100%;
    background-color:#000;

}


.header-slide-carousel img{
    object-fit:cover;
    /* height:160px; */

    height:auto;
    width:100%;
}






  /* Slideshow container */
  .slideshow-container {
    /* max-width: 1000px; */
    position: relative;
    margin: auto;
    /* height:700px; */
  }

  /* Hide the images by default */
  .mySlides {
    display: none;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  /* .active,
  .dot:hover {
    background-color: #717171;
  } */

  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @keyframes fade {
    from {
      opacity: .4
    }

    to {
      opacity: 1
    }
  }

  /*----sub section ---*/

  .intro-product-container{
    background-color:#eaeaea;
    /* height:450px; */

  }
  .intro-product-section{
    width:100%;
    margin:auto;

  }  
  .intro-product-image{
    width:140px;
    height:auto;
  }


  /*----gallery grid ---*/
  .home-gallery {
    /* display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; */



    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(18, 7vw);
    grid-gap: 10px;
  }

  .home-gallery-item {
    background-color: #f0f0f0;
    /* padding: 20px; */
    text-align: center;

  }

.home-gallery-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;

}

/* 
  .home-gallery-item:nth-child(1),
  .home-gallery-item:nth-child(3),
  .home-gallery-item:nth-child(4) {
    grid-row: span 10;
    
  }

  .home-gallery-item:nth-child(2),
  .home-gallery-item:nth-child(5),
  .home-gallery-item:nth-child(6) {
    grid-row: span 4;
  } */
  .home-gallery-item:nth-child(1){

    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 6;
  
  }
  .home-gallery-item:nth-child(2){

    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 4;
  
  }
  .home-gallery-item:nth-child(3){

    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 6;
  
  }
  .home-gallery-item:nth-child(4){

    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 6;
    grid-row-end: 9;
  
  }
  .home-gallery-item:nth-child(5){

    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 9;
  
  }
  .home-gallery-item:nth-child(6){

    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 6;
    grid-row-end: 9;
  
  }


/*-- add on the switch images --*/


.home-gallery-item:nth-child(7) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 9;
    grid-row-end: 14;
  }
  .home-gallery-item:nth-child(8) {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 9;
    grid-row-end: 12;
  }
  .home-gallery-item:nth-child(9) {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 9;
    grid-row-end: 14;
  }
  .home-gallery-item:nth-child(10) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 14;
    grid-row-end: 17;
  }
  .home-gallery-item:nth-child(11) {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 12;
    grid-row-end: 17;
  }
  .home-gallery-item:nth-child(12) {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 14;
    grid-row-end: 17;
  }
  









  /*------ABOUT PAGE --------*/
  .about-header-bg{
    margin-top: 50px;
    height: 700px;
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .about-header-title{
    padding:50px;
  }

  /*------HEATMASTER SYSTEM--------*/
  .text-with-outline {
    font-size: 30px;
    font-family: 'Raleway-Black';
    color: transparent;
    /* -webkit-text-stroke: 2px white; */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white; letter-spacing: 4px;
    /* transform: scaleX(1.1);  */
    line-height:35px;
    /* text-shadow:
    0 0 40px rgba(255, 255, 255, 0.5), /* White glow effect with a 10px blur */
    /*0 0 40px rgba(255, 255, 255, 0.5);   */
}



.heatmaster-header-1-container{
    /* width: 100%;
     */
     height:580px;
    background-size: cover;
    margin-top: 50px;
    background-repeat: no-repeat;
    background-position: center;
}

.heatmaster-header-1-subcontainer{
    text-align: center; 
    margin:auto; padding-top:35px;
}


.heatmaster-header-1-sub-title{
    font-family: 'Raleway-Black'; 
    color: #fff;
    font-size: 26px; 
    line-height:26px;
}


.heatmaster-header-1-desc{
    /* margin-left: 20%; */
    color: #fff;
    /* margin-right: 20%;  */
    line-height: 20px; 
    font-size:18px;
}






.heatmaster-header-2-container{
    height: 700px;   
    background-size: cover;
    background-repeat: no-repeat; 
    position:relative;
}
.heatmaster-header-2-desc-container{
    height: 600px;
    padding-top: 20px;
}

.heatmaster-header-2-sub-title{
    font-family: 'Raleway-Bold'; 
    color: #fff;
    font-size:26px; 
    line-height:26px;
}
.heatmaster-header-2-image{
    height: 200px; 
    width:auto;
    bottom:0; 
    position:absolute;
}
.heatmaster-header-2-desc{
    color: #fff;
    /* margin-right: 20%;  */
    line-height: 20px; 
    font-size:18px; 
}







.heatmaster-header-3-container{
    height: 600px;   
    background-size: cover;
    background-repeat: no-repeat; 
    position:relative;
}
.heatmaster-header-3-desc-container{
    height: 650px;
    /* width: 800px;
    position: absolute;
    left: 10%; */
    padding-top: 20px;
}
.heatmaster-header-3-sub-title{
    font-family: 'Raleway-Bold'; 
    color: #fff;
    font-size: 26px; 
    line-height:26px;
}
.heatmaster-header-3-image{
    height: 200px; 
    width:auto;
    bottom:0; 
    right:0;
    position:absolute;
}
.heatmaster-header-3-desc{
    color: #fff; 
    line-height: 20px; 
    font-size:18px;
}





.heatmaster-header-4-container{
    height: 650px;   
    background-size: cover;
    background-repeat: no-repeat; 
    position:relative;
}
.heatmaster-header-4-desc-container{
    height: 600px;
    padding-top: 20px;
}

.heatmaster-header-4-sub-title{
    font-family: 'Raleway-Bold'; 
    color: #fff;
    font-size:26px; 
    line-height:26px;
}
.heatmaster-header-4-image{
    height: 200px; 
    width:auto;
    bottom:0; 
    position:absolute;
}
.heatmaster-header-4-desc{
    color: #fff;
    /* margin-right: 20%;  */
    line-height: 20px; 
    font-size:18px; 
}





/*----Products----*/

.product-header-bg{
  background-position: center;
  background-size: cover;
  height: 600px;
}

.product-header-content-row{
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 500px; 
  width: 100%;
  margin: auto;
}

.product-header-content-image{
  width:150px;
  margin-top:50px;
}


.slider-wrapper {
  position: relative;
}

.slider {
  height:400px;
}

.slick-list{
    height: 400px;
}
.slick-track {
    height:400px;
  }
  
.slick-arrow{
    margin: 20px;

}

#custom-prev {
  right:100px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px; 
  height: 50px;
  background-color: #0d0d0d;
  color: white; 
  cursor: pointer; 

}


#custom-next {
    display: flex;
    justify-content: center;
    align-items: center; 
    width: 50px;
    height: 50px; 
    background-color: #0d0d0d; 
    color: white; 
    cursor: pointer; 
}


#what_in_box_slider{
  height:350px !important;
}
#what_in_box_slider .slick-list .slick-track{
  height:350px !important;
}
#what-in-box-custom-prev {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #0d0d0d;
  color: white;
  cursor: pointer;
}

#what-in-box-custom-next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #0d0d0d;
  color: white;
  cursor: pointer;
}


.how_to_use_slider_container{

  background-color:#000;
  height: 650px;
}

.product_spec_container{
  background-position: center;
  background-size: cover;
  height:850px;
}




/*-----CONTACT US-------*/
.contact-us-header-overlay{
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-us-header-overlay::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 50% black overlay */
  z-index: 1; /* Adjust the z-index to control the stacking order */
}


/*------------SHOP NOW-----------*/
.selected-product-variant-card {
  border: 1px solid black; /* You can adjust the border style and color as needed */
}


  /* Hide the number input's up and down arrows */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
  }

  .product-image-gallery {

    background-color: #fff;
    height: 600px;
  }

  .product-image-gallery-slider .slick-list .slick-track{
    
    height: 350px !important;

  }

  #slider_thumbnail  .slick-list, 
  #slider_thumbnail  .slick-track{
    height: 120px !important;
  }


  .product-item{
    height:120px;

  }

  .product_item_image_side{
    height:100%;   

  }



  /* warranty  */

#info-popup{
    display: none;
    padding-top: 15%;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 80%;
    background: rgba(0, 0, 0, 0.75);
    text-align: center;
    z-index: 1100;
    transform: translate(-50%, -50%);
    margin: 0;
    border-radius: 20px;

}
  .popup img {
    max-width: 100%;
    max-height: 70%;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
}
  
  #close-popup {
    position: absolute;
    top: 5%;
    right: 0%;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transform: translate(-50%, -50%);

  }
  


/* shop main page */
.mok_fwrd_slider_section {
    background-color: #fff;
    height: 780px;
  }
  .mok_fwrd_slider_container {
    height: 300px;
  }
  #mok_fwrd_slider .slick-list,  .slick-track {
      height: 400px;
  }
  
  .mok_fwrd_switch_slider_section {
    background-color: #f5f5fb;
    height: 780px;
  }
  
  .mok_fwrd_switch_slider_container {
      height: 300px;
    }
    #mok_fwrd_switch_slider .slick-list,  .slick-track {
        height: 400px;
    }
    #mok_fwrd_switch_navigation_arrow{
      display:flex;
    }



.product-switch-image-gallery {
    background-color: #fff;
    height: 600px;
  }
.product-switch-image-gallery-slider .slick-list .slick-track {
    height: 350px !important;
  }
  
#slider_switch_thumbnail .slick-list,
#slider_switch_thumbnail .slick-track {
  height: 120px !important;
}


/* mok fwrd switch detail page  */

.product-switch-header-bg{


  background-position: right;
  background-size: cover;
  /* width: 100%; */
  background-repeat: no-repeat;
  height: 180px;
}

.product-switch-how-container{
    /* height: 470px;
    padding-top:20px; */

}
.product-switch-how-container img{
 
    height: 450px;
    width: 100%;
    object-fit: cover;
    margin-top:30px;
}