/* =========================
   RESPONSIVE
========================= */

/* Tablet */
@media (max-width: 1024px) {
  .fw-slide {
    flex: 0 0 calc((100% - 120px - 20px) / 2.2);
  }

  .sec-hdr {
    margin-bottom: 40px;
  }
}

/* Mobile */
@media (max-width: 768px) {

  .fw-track {
    padding: 60px 20px;
  }

  .fw-slide {
    flex: 0 0 85%;
  }

  .sec-hdr {
    flex-direction: column;
    align-items: flex-start;
  }

  .arr-group {
    margin-top: 15px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {

  .fw-slide {
    flex: 0 0 100%;
    padding: 70px 16px 20px;
  }

  .fw-slide h3 {
    font-size: 20px;
  }

  .rec-det-h {
    font-size: 16px;
  }
}




/* Mobile css */
@media (max-width: 768px) {
    .hero-vector img {
        width: 100%;
    }
    
    .why-card-1,
    .why-card-2{
        transform: rotate(0.0deg);
        margin-bottom: 20px;
    }
    .why-card-1.yellow,
    .why-card-2.yellow{
        transform: rotate(0.0deg);
        margin-bottom: 20px;
        left: 0;
        top: 0;
    }
    .why-card-1.pink,
    .why-card-2.pink{
        transform: rotate(0.0deg);
        left: 0;
        top: 0;
    }

    .final-cta {
        margin: 0;
    }

    .how-sec {
        padding: 0;
    }

    .testi-sec,
    .recipes-sec {
        overflow: hidden;
    }
  
  }





  
/* ===================== TABLET ===================== */
@media (max-width: 1024px) {

    .recipe-bar {
        padding: 25px 40px;
    }

    .recipe-item {
        padding: 0 25px;
    }

    .recipe-item h6 {
        font-size: 20px;
    }

    .video-btn {
        padding: 14px 28px;
        font-size: 16px;
    }
}

/* ===================== MOBILE ===================== */
@media (max-width: 768px) {

    .recipe-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
    }

    .recipe-info {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .recipe-item {
        padding: 0;
    }

    /* Remove vertical dividers on mobile */
    .recipe-item::after {
        display: none;
    }

    .recipe-item p {
        font-size: 14px;
    }

    .recipe-item h6 {
        font-size: 18px;
    }

    .video-btn {
        margin-top: 10px;
        padding: 14px 28px;
        font-size: 16px;
    }
    .youtube-link h6 {
        margin-left: 0px;
    }
}

/* ===================== SMALL MOBILE ===================== */
@media (max-width: 480px) {

    .recipe-info {
        flex-direction: column;
        gap: 18px;
    }

    .video-btn {
        width: 100%;
        text-align: center;
    }
}






/* ================= TABLET ================= */

@media (max-width: 1024px) {

    .ingredients-grid {
        gap: 20px;
    }

    .section-title {
        font-size: 28px;
    }

    .ingredients-card {
        padding: 25px;
    }

    .instructions-card {
        padding: 28px;
    }
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .ingredients-grid {
        grid-template-columns: 1fr; /* Stack cards */
    }

    .section-title {
        font-size: 24px;
    }

    .summary-text {
        font-size: 15px;
    }

    .ingredients-card h3 {
        font-size: 18px;
    }

    .ingredients-card li {
        font-size: 15px;
    }

    .instructions-card {
        padding: 22px;
    }

    .instructions-card h3 {
        font-size: 20px;
    }

    .step h4 {
        font-size: 16px;
    }

    .step p {
        font-size: 14px;
    }
}

/* ================= SMALL MOBILE ================= */

@media (max-width: 480px) {

    .container {
        width: 100%;
        padding: 20px;
    }

    .ingredients-card {
        padding: 18px;
        border-radius: 16px;
    }

    .instructions-card {
        padding: 18px;
        border-radius: 16px;
    }

    .ingredients-card li {
        flex-direction: column;
        align-items: flex-start;
    }

    .ingredients-card li b {
        margin-top: 4px;
    }
}

 /* ═══════════════════════════════   STEP SECTION Css  ═══════════════════════════════  */

/* ================= TABLET ================= */

@media (max-width: 1024px) {
    .dot-line{
        display: none;
    }

    .step-card-1,
    .step-card-1.yellow,
    .step-card-1.pink,
    .step-card-1.blue {
        transform: rotate(0.0deg);
        top: 0;
        left: 0px;
    }

    .how-row.step {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

    .mt-200 {
        margin-top: 0px;
    }
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

   
}

/* ================= SMALL MOBILE ================= */

@media (max-width: 480px) {

    .how-row.step {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    
}

.hero-vector img {
    margin-top: -12px;
}

.recipes-sec,
.cats-sec {
    padding: 0px;
}
.how-sub {
    margin-bottom: 15px;
}

    .hero-top h1 {
        font-size: 18px;
    }

    .hero-top p {
        font-size: 12px;
    }

    .hero-slider-section {
        padding: 0px;
    }
    .hero-top {
        padding-bottom: 0px;
    }
    .how-sec h2 {
        font-size: 18px;
    }
    .how-sec p {
        font-size: 12px;
    }

    .how-card-1.pink {
        top: 0;
    }

    .quote-img {
        right: -45px;
    }
    .quote-img img {
        width: 65%;
    }
    .tc-text{
        font-size: 12px;
    }

    .tc-av img {
        width: 55px;
    }
    .fw-track.testi {
        padding-top: 0px;
    }
    .why-heading,
    .why-heading2 span,
    .why-heading3 span,
    .why-heading4 span,
    .why-heading5 span,
    .why-heading6 span {
        font-size: 18px;
    }
    .final-cta {
        padding: 72px 15px;
    }

    .final-cta p {
        font-size: 12px;
    }
    .btn-final {
        font-size: 11px;
    }

    .page-header {
        padding: 30px 0px;
    }
    .page-header p {
        font-size: 12px;
    }

    .recipe-summary-section,
    .butter-chicken img {
        padding: 0px;
    }
}

/* ═══════════════════════════════
       RESPONSIVE
    ═══════════════════════════════ */
 @media (max-width: 991px) {
     .nav-pill-center {
         display: none;
     }

     .nav-right {
         display: none;
     }

     .hamburger {
         display: flex;
     }

     .hero-top h1 {
         font-size: 36px;
     }

     .how-row {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }

     .how-card-1,
     .how-card-1.yellow,
     .how-card-1.pink {
         transform: unset;
     }

     .how-card-1.pink {
         left: 0;
     }

     .how-card-1.yellow {
         left: 0;
         top: 0;
     }

     .cta-band {
         padding: 38px 22px;
     }

     .cta-band h2 {
         font-size: 26px;
     }

     .fw-slide {
         flex: 0 0 calc((100% - 60px * 2 - 20px) / 2.1);
     }

     .sec-hdr {
         flex-direction: column;
         align-items: flex-start;
         gap: 14px;
     }

     .final-cta h2 {
         font-size: 28px;
     }

     .hc-meta {
         flex-wrap: wrap;
     }

     .hcm {
         min-width: 45%;
         border-right: none;
         padding-right: 0;
         margin-right: 0;
         margin-bottom: 8px;
     }

     /* hero circles smaller */
     .hs-slide:nth-child(1) .food-disc,
     .hs-slide:nth-child(7) .food-disc {
         width: 78px;
         height: 78px;
         margin-bottom: 20px;
         font-size: 30px;
     }

     .hs-slide:nth-child(2) .food-disc,
     .hs-slide:nth-child(6) .food-disc {
         width: 95px;
         height: 95px;
         margin-bottom: 8px;
         font-size: 38px;
     }

     .hs-slide:nth-child(3) .food-disc,
     .hs-slide:nth-child(5) .food-disc {
         width: 112px;
         height: 112px;
         margin-bottom: 0;
         font-size: 46px;
     }

     .hs-slide:nth-child(4) .food-disc {
         width: 128px;
         height: 128px;
         margin-bottom: -6px;
         font-size: 54px;
     }
 }

 @media (max-width: 575px) {
     .hero-top h1 {
         font-size: 26px;
     }

     .fw-slide {
         flex: 0 0 calc(100% - 0px);
     }

     .cta-band h2 {
         font-size: 18px;
     }
     .cta-band p {
        font-size: 12px;
     }
     .final-cta h2 {
         font-size: 22px;
     }

     .btn-gen .btn-txt {
         display: none;
     }

     .hs-slide:nth-child(1) .food-disc,
     .hs-slide:nth-child(7) .food-disc {
         width: 58px;
         height: 58px;
         margin-bottom: 14px;
         font-size: 22px;
     }

     .hs-slide:nth-child(2) .food-disc,
     .hs-slide:nth-child(6) .food-disc {
         width: 74px;
         height: 74px;
         margin-bottom: 6px;
         font-size: 30px;
     }

     .hs-slide:nth-child(3) .food-disc,
     .hs-slide:nth-child(5) .food-disc {
         width: 88px;
         height: 88px;
         margin-bottom: 0;
         font-size: 36px;
     }

     .hs-slide:nth-child(4) .food-disc {
         width: 102px;
         height: 102px;
         margin-bottom: -5px;
         font-size: 42px;
     }

     .how-row {
         grid-template-columns: auto;
     }
     footer {
        padding: 0px;
     }
 }