/* Responsive styles for new sections */
@media (max-width: 1199px) {
    .hero-title {
        font-size: 42px;
    }
    
    .mask-group-img {
        top: 120px;
        width: 900px;
        height: 231.26px;
    }
    
    .hero-section::after {
        width: 1000px;
        height: 738px;
        top: 50px;
        left: 100px;
    }

    .testimonial-card.active {
        transform: translate(0%, -100px);
    }
}

/* Fix for screens larger than 1440px - ensure navbar takes full width */
@media (min-width: 1441px) {
    .header {
        width: 100% !important;
        max-width: 100% !important;
        left: 0;
        transform: none;
        padding: 24px 80px;
    }
    
    .header.sticky {
        width: 100% !important;
        max-width: 100% !important;
        left: 0;
        transform: none;
        padding: 24px 80px;
    }
    
    .header .navbar {
        width: 100%;
        max-width: 100%;
    }
    
    .header .navbar-collapse {
        width: auto;
        flex-grow: 1;
        justify-content: flex-end;
    }
    
    /* Fix testimonials section width for large screens */
    .testimonials-sec {
        width: 100% !important;
        max-width: 100% !important;
        left: 0;
        transform: none;
    }

  

}

@media (max-width: 1440px) {
    .header {
        width: 100%;
        max-width: 1440px;
        padding: 24px 40px;
    }
    
    .header.sticky {
        padding: 24px 40px;
    }
    
    .header .navbar-collapse {
        width: auto;
        flex-grow: 1;
        justify-content: flex-end;
    }
    


  h2.testimonials-title.sub-title {
    text-align: left;
}


.features-container .col {
    padding: 20px 35px;
    gap: 10px;
}

.video-content .sub-title {
    color: var(--color_white);
    text-align: left;
    max-width: none;
}

.contact-content .sub-title{
    text-align: left;
    margin: 0;
}

}

@media (max-width: 991px) {

   .offcanvas-end {
    top: 0;
    right: 0;
    width: 320px;
    border-left: 1px solid rgba(0,0,0,.2);
    transform: translateX(100%);
    height: 100vh;
}


.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

.header .navbar-nav .nav-link{
    color: var(--primary1);
    opacity: 1;
    font-size: 20px;
    font-weight: 400;
}

.header .navbar-nav .nav-link:hover{
    color: var( --primary1);
}

.header .navbar-nav {
    display: inline-flex;
    align-items: self-start;
}

.offcanvas-header .btn-close {
    background-color: #2b71b8;
    padding: 20px;
    opacity: 1;
    z-index: 999;
    margin-left: -16px;
    margin-top: -151px;
    border-radius: 0px 0px 20px 0px;
}

.offcanvas-body{
        margin-top: -30px;
}
button.btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}



    .header {
        padding: 20px 25px;
        height: auto;
    }
    
    .header.sticky {
        padding: 20px 25px;
    }
    
    .header .navbar-logo {
        width: 160px;
        height: 39.7px;
    }
    
    .header .navbar-collapse {
        width: 100%;
        height: auto;
        margin-top: 20px;
    }
    
    .header .navbar-nav {
        flex-direction: column;
        gap: 15px;
    }
    
    .header .navbar-nav .nav-link {
        width: auto;
        height: auto;
               margin: 10px 10px;
        text-align: center;
        justify-content: center;
        
    }
    
    .hero-title {
        font-size: 36px;
        text-align: center;
    }
    
    .hero-subtitle {
        text-align: center;
        margin: 0 auto 40px;
    }
    
    .carousel-controls {
        justify-content: center;
    }
    
    .product-showcase {
        order: 2;
    }
    
    .hero-content {
        order: 1;
        padding-bottom: 20px;
    }
    
    .hero-main-row {
        min-height: 300px;
        padding: 30px 0;
    }
    
    
    .mask-group-img {
        top: 110px;
        width: 800px;
        height: 205.55px;
    }
    
    .hero-section::after {
        width: 800px;
        height: 590px;
        top: 40px;
        left: 80px;
    }
    
    .features-bar {
        margin-top: 25px;
    }
    
    .features-container .col {
        padding: 15px 30px;
        min-height: 60px;
        flex-direction: column;
        gap: 15px;
    }
    
    .feature-text {
        font-size: 14px;
        white-space: normal;
        text-align: center;
    }
    
    .feature-icon {
        font-size: 16px;
    }
    
    .hero-section {
        padding-top: 280px;
    }
    
    .benefits-sec {
        padding-top: 60px;
    }

    .contact-content .sub-title {
    padding-top: 24px;
    text-align: center !important;
}

}

@media (max-width: 767px) {
    .hero-title {
        font-size: 30px;
    }
    
        .hero-subtitle {
        font-size: 16px;
    }
    
    .hero-main-row {
        min-height: 280px;
        padding: 25px 0;
    }
    
    .mask-group-img {
        top: 100px;
        width: 700px;
        height: 179.84px;
    }
    
    .hero-section::after {
        width: 600px;
        height: 443px;
        top: 30px;
        left: 60px;
    }
    
    .features-bar {
        margin-top: 20px;
    }
    
    .features-container .col {
        padding: 12px 20px;
        min-height: 50px;
        flex-direction: column;
        gap: 12px;
    }
    
    .feature-text {
        font-size: 13px;
        white-space: normal;
        text-align: center;
    }
    
    .feature-icon {
        font-size: 14px;
    }
    
    .hero-section {
        padding-top: 250px;
    }
    
    .benefits-sec {
        padding-top: 60px;
    }
}

@media (max-width: 575px) {
    .header {
        padding: 15px 20px;
    }
    
    .header.sticky {
        padding: 15px 20px;
    }
    
    .header .navbar-logo {
        width: 140px;
        height: 34.74px;
    }
    
   
    
    .hero-title {
        font-size: 26px;
        line-height: 1.3;
    }
    
    .hero-subtitle {
        font-size: 15px;
    }
    
    .carousel-btn {
        width: 45px;
        height: 45px;
    }
    
        .carousel-btn span {
        font-size: 16px;
    }
    
    .hero-main-row {
        min-height: 250px;
        padding: 20px 0;
    }
    
    .mask-group-img {
        top: 90px;
        width: 500px;
        height: 128.59px;
        opacity: 0.8;
    }
    
    .hero-section::after {
        width: 400px;
        height: 295px;
        top: 20px;
        left: 40px;
        opacity: 0.2;
    }
    
    .features-bar {
        margin-top: 15px;
    }
    
    .features-container {
        max-width: 100%;
        margin: 0 10px;
    }
    
    .features-container .col {
        padding: 10px 15px;
        min-height: 40px;
        flex-direction: column;
        gap: 8px;
    }
    
    .feature-text {
      
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
    
    .feature-icon {
        font-size: 12px;
    }
    
    .hero-section {
        padding-top: 220px;
    }
    
    .benefits-sec {
        padding-top: 60px;
    }
}

@media (min-width: 1400px) {
    .container{ max-width: 1440px;}
    .custom-gx { --bs-gutter-x: 7.25rem; }
    
    .hero-section {
        padding-top: 360px;
    }
    
    .hero-main-row {
        min-height: 450px;
        padding: 50px 0;
    }
    
    .mask-group-img {
        top: 150px;
        width: 1200px;
        height: 308px;
    }
}

/* Benefits Section Responsive Styles */
@media (max-width: 1440px) {
    .benefits-header {
        width: 100%;
        max-width: 1280px;
        padding: 0 20px;
    }
    
    .benefits-container {
        width: 100%;
        max-width: 1280px;
        padding: 0 20px;
    }
    
    .benefits-row {
        width: 100%;
        max-width: 1280px;
    }
    
    .benefit-item {
        width: calc(50% - 50px);
    }
    
    .title-btn {
        width: auto;
        min-width: 105px;
    }
    
    .sub-title {
        width: auto;
        max-width: 653px;
        text-align: center;
        margin: 0 auto;
    }
    
    /* Benefits Demo responsive for 1440px */
    .benefits-demo .row {
        width: 100%;
        max-width: 1280px;
        padding: 0 20px;
    }
}

@media (max-width: 1399px) { 
    .about-us-sec p { white-space: normal;}
    .video-content p {white-space: normal;}
    .info-content ul li {margin-top: 10px;line-height: 1.4;}
    .video-sec { padding-top: 50px;padding-bottom: 50px;}
    .line-third { margin-top: 40px;}

    .vector-icon::after{top: 435px;}
    .nav-sec {display: flex !important;align-items: flex-start !important;}
    .vertical-line { margin: 0 50px;}
    .nav-sec .nav { width: 300px;}
    .nav-pills .nav-link{    margin-bottom: 45px;}
    .hero-subtitle { white-space: normal;}

}

@media (max-width: 1280px) {
    label.form-check-label br {display: none;}
   
   
}

@media (max-width: 1199px) {
    .about-us-logo img { max-width: 35%;}
    .why-choose-us h2 {text-align: left;}
    .why-choose-us h6{text-align: left;}
    .why-choose-us p{text-align: left;}
    .about-us-logo {margin-bottom: 40px;}

    .info-content ul li::before{top: 0px;}

    /* .cooking-system-sec img {width: 100%;max-width: 83%;;padding-top: 100px;} */
    .cooking-system-sec:before {right: 140px;height: 100%;}
    .vector-icon::before {right: -140px;}
    .vector-icon::after{top: 395px;}
    .vertical-line{min-height: 500px;margin: 0 40px;}
    .nav-sec .nav { width: 300px;}
    .nav-sec {display: flex !important;align-items: flex-start !important;}
    .step-content { margin-bottom: 55px;}

    .features-container .feature-text {white-space: normal;flex-shrink: unset;}
    
 
   
}

@media (max-width: 991px) {

    .sub-title { font-size: 40px;}

    .contact-us-sec { padding-top: 60px;padding-bottom: 60px;}

    .follow-sec {display: inline-block;}
    .follow-sec h6 strong {text-align: center !important;}
    .follow-sec h6 { text-align: center; margin-bottom: 20px;}
    .about-us-logo img { max-width: 35%;background-color: #2b71b8; z-index: 99;position: relative;padding-left: 20px; padding-right: 20px;}
    
    .owl-carousel .owl-nav {top: 85%;text-align: center;}

     /* benefits sec start */
    .benefits-sec { padding-top: 60px;padding-bottom: 60px;}
    .arrow-img img {margin-top: 0px;}
    .description-box p {text-align: left;white-space: normal;}
    .benefit-title h5 { white-space: normal;}
    .line-second { margin-top: 31px;}
    .line-third {margin-top: 31px; margin-bottom: 31px;}
    .benefits-sec .sub-title { margin-bottom: 45px;}

    .vector-icon::before{
        display: none;
    }
    .vector-icon::after {
    display: none;
    }
      .contact-content .title-btn {
        display: inline-block;
        margin-left: 50%;
        transform: translateX(-50%);
    }




}

@media (max-width: 767px) {

    
    
    .header {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 25px !important;
    }
    
    .header.sticky {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 25px !important;
    }
    
    .mask-group-img {
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        top: 110px !important;
    }

    .sub-title {font-size: 32px;}

    .about-us-logo img { max-width: 50%;padding-left: 40px;padding-right: 40px;}
    
    /* Benefits responsive for 767px */
    .benefit-item {
        flex-direction: column;
        gap: 15px;
        padding: 15px 0;
        align-items: flex-start;
    }
    
    .benefit-title {
        width: 100%;
        align-items: flex-start;
    }
    
    .benefit-text {
        width: 100%;
        align-items: flex-start;
    }
    
    .benefit-title h5 {
        font-size: 18px;
    }
  
}

@media (max-width: 575px) {

    .hotplate-wrapper img {
    margin-bottom: 24px;
    max-width: 280px;
}

    .container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    .header {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 20px !important;
    }
    
    .header.sticky {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 20px !important;
    }
    
    .mask-group-img {
        width: 100% !important;
        max-width: 380px !important;
        height: auto !important;
        top: 105px !important;
    }

    .sub-title {font-size: 30px;}

    .send-message-sec { padding: 25px;}
    .about-us-sec h2 { font-size: 32px;}
    .why-choose-us h2 {font-size: 32px;}
    .about-us-logo::after { right: -7%;height: 60px; }
    .about-us-logo::before{height: 60px;}
    .about-us-logo img {max-width: 80%;}
    .about-us-logo {margin-bottom: 10px;}
    


    .cooking-system-sec img {
    padding-top: 100px;
    padding-bottom: 88px;
} 


}

@media (max-width: 479px) {
   
    
    .header {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 20px !important;
    }
    
    .header.sticky {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 20px !important;
    }
    
    .mask-group-img {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
        top: 100px !important;
    }
    
    .hero-section {
        padding-top: 200px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .hero-main-row {
        min-height: 250px !important;
        padding: 20px 0 !important;
    }
    
    .sub-title {
        font-size: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .benefits-header {
        padding: 0 10px !important;
    }
    
    .benefits-container {
        padding: 0 10px !important;
    }


.cooking-system-sec img {
    padding-top: 90px;
    padding-bottom: 60px;
}

   .footer ul li {
    padding: 5px 10px 5px 10px;
}


}

@media (max-width: 360px) {
   
    .header {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
    }
    
    .header.sticky {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
    }
    
    .mask-group-img {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        top: 80px !important;
    }
    
    .hero-section {
        padding-top: 180px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .hero-main-row {
        min-height: 200px !important;
        padding: 15px 0 !important;
    }
    
    .sub-title {
        font-size: 22px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .benefits-header {
        padding: 0 5px !important;
    }
    
    .benefits-container {
        padding: 0 5px !important;
    }
 
}




     /* -----------------------------
  EXISTING DESKTOP STYLES (keep as-is)
  (Assuming your current desktop CSS remains unchanged)
------------------------------ */

/* -----------------------------
  MOBILE OVERRIDES (<= 767px)
------------------------------ */
@media (max-width: 991px) {
    .testimonials-sec {
    padding-top: 50px;
    padding-bottom: 15px;
}
.testimonials-tag {
    text-align: center;
}
h2.testimonials-title.sub-title {
    text-align: center;
    white-space: normal;
}
p.testimonials-description {
    text-align: center;
    white-space: normal;
    padding-top: 15px;
}
  /* Make the container horizontally scrollable and use snap */
  .carousel-container {
    position: relative !important;
    height: auto !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 25px;
  }

  /* Each card becomes full width, positioned normally */
  .carousel-container .testimonial-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 1 !important;
    filter: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    scroll-snap-align: center;
    transition: transform 0.45s ease, opacity 0.45s ease;
    /* keep visual style (background / padding) from existing styles */
  }

  /* Hide desktop arrows on mobile */
  .carousel-navigation {
    display: none !important;
  }

  /* show dots area (we will create it dynamically via JS) */
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 45px;
    padding-bottom: 8px;
  }

  .carousel-dots span {
    width: 10px;
    height: 10px;
    background: #cfcfcf;
    border-radius: 50%;
    display: inline-block;
    transition: transform 0.25s ease, background 0.25s ease;
  }

  .carousel-dots span.active {
    background:#1c69b6;
    transform: scale(1.35);
  }

  /* Optional: hide overflow to remove ghosting on iOS */
  .testimonials-sec {
    overflow: visible;
  }

  .testimonial-card,
.testimonial-card.active,
.testimonial-card.upper-card,
.testimonial-card.lower-card {
  filter: none !important;
  -webkit-filter: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 1 !important;
}
}