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

      /* *********************** Nav styling*************************** */
      .custom-navbar {
        padding: 15px 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        transition: 0.3s;
      }

      .home-navbar {
        background-color: transparent !important;
      }

      .inner-navbar {
        background-color: #ffffff !important;
        /* Solid background for inner pages */
        position: relative !important;
        /* Relative so it doesn't overlap content */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }

      .nav-logo {
        height: 70px;
        transition: 0.3s;
      }

      .navbar-nav .nav-link {
        color: #333 !important;
        font-weight: 500;
        margin: 0 10px;
        font-size: 18px;
        transition: 0.3s;
      }

      .navbar-nav .nav-link:hover,
      .nav-active {
        color: #6b963e !important;
      }

      .nav-right {
        gap: 20px;
      }

      .btn-login {
        background-color: #f19e24;
        color: white;
        border: none;
        padding: 8px 25px;
        border-radius: 8px;
        font-weight: 600;
        display: flex;
        align-items: center;
        transition: 0.3s;
      }

      .btn-login:hover {
        background-color: #e08d1f;
        transform: translateY(-2px);
      }

      .nav-icon {
        font-size: 20px;
        color: #333;
        cursor: pointer;
        transition: 0.3s;
      }

      .nav-icon:hover {
        color: #f19e24;
      }

      .cart-icon {
        position: relative;
      }

      .cart-badge {
        position: absolute;
        top: -5px;
        right: 5px;
        background-color: #ff0000;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 50%;
        font-weight: 700;
      }

      .navbar-toggler {
        background-color: rgba(255, 255, 255, 0.5) !important;
        padding: 5px;
      }

      /* --- RESPONSIVENESS --- */
      @media (max-width: 991px) {

        .navbar-collapse.show,
        .navbar-collapse.collapsing {
          background: rgba(255, 255, 255, 0.98);
          padding: 20px;
          border-radius: 15px;
          margin-top: 15px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          /* Add this to ensure it stays on top of other content */
          position: relative;
          z-index: 1001;
        }

        .nav-logo {
          height: 55px;
        }

        .navbar-nav .nav-link {
          margin: 10px 0;
          font-size: 20px;
        }

        .nav-right {
          gap: 10px;
        }
      }

      /* ********************* hero styling***************************** */
      .hero {
        background: url("../img/Rectangle 1.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 140px;
        padding-bottom: 30px;
        min-height: 80vh;
      }

      .get {
        font-size: 28px;
        color: #000000;
      }

      .discount {
        font-size: 140px;
        color: #f19e24;
        line-height: 1;
      }

      .discount span {
        font-size: 60px;
        color: #f19e24;
      }

      .plan-text {
        font-size: 26px;
        color: #000000;
        margin-bottom: 14px !important;
        margin-top: -10px !important;
      }

      .hero-leaf {
        width: 210px;
        left: 377px;
        top: 24px;
        z-index: 1;
        pointer-events: none;
        display: block !important;
      }

      .healthy-heading {
        font-size: 40px;
        color: #6b963e;
        line-height: 1.2;
        font-weight: 600 !important;
      }

      .order-now {
        background-color: #719544;
        color: white;
        padding: 12px 35px;
        font-size: 18px;
        border-radius: 8px;
        transition: 0.3s;
      }

      .order-now:hover {
        background-color: #5d7a38;
      }

      .hero-badges {
        width: 450px;
      }

      /* --- RESPONSIVENESS --- */
      @media (max-width: 1200px) {
        .hero-leaf {
          left: 140px;
          top: 90px;
          width: 200px;
        }
      }

      @media (max-width: 991px) {
        .discount {
          font-size: 100px;
        }

        .discount span {
          font-size: 40px;
        }

        .hero-leaf {
          left: 110px;
          top: 70px;
          width: 160px;
        }
      }

      @media (max-width: 768px) {
        .hero {
          padding-top: 100px;
        }

        .hero-content {
          text-align: center;
        }

        .order-now {
          margin: 20px auto 0;
        }

        .discount {
          font-size: 70px;
        }

        .discount span {
          font-size: 25px;
        }

        .plan-text {
          font-size: 18px;
        }

        .healthy-heading {
          font-size: 24px;
        }

        .hero-badges {
          width: 100%;
          max-width: 320px;
          margin: 30px auto 0;
        }

        .hero-leaf {
          display: none !important;
        }
      }

      /* *************************** Menu Section *************************** */
      .menu {
        background-color: #fdf0de;
      }

      .menu-heading {
        font-size: 60px;
        font-weight: 700;
      }

      .color {
        color: #6b963e;
      }

      .menu-img {
        position: relative;
        /* Yeh zaroori hai takay absolute child isi ke andar rahe */
        width: 320px;
        /* Image se thora bada size rakhein */
        height: 320px;
        margin: 0 auto 20px;
        /* Center karne ke liye aur niche se gap dene ke liye */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .menu-img .menu-bg-img {
        width: 100%;
        /* Container ke hisab se size adjust hoga */
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        /* Yeh piche rahega */
      }

      .menu-img .menu-item-img {
        width: 250px;
        /* Food image ka size thora chota rakhein takay bg nazar aaye */
        height: 250px;
        object-fit: cover;
        border-radius: 50%;
        /* Image ko round karne ke liye */
        position: relative;
        z-index: 2;
        /* Yeh orange bg ke upar nazar aayegi */
      }

      .menu-inner-box .item-name {
        font-size: 26px;
        font-weight: 700;
        margin-top: -20px;
      }

      .menu-inner-box .item-desc {
        font-size: 18px;
        color: #979797;
        font-weight: 400;
        letter-spacing: -0.4px;
        margin-top: -18px;
      }

      .menu-button {
        background-color: #f19e24;
        color: white;
        padding: 12px 29px;
        font-weight: 700;
        letter-spacing: -0.4px;
        border-radius: 12px;
        border: none;
        outline: none;
        cursor: pointer;
        transition: 0.1s ease-in;
      }

      .menu-button:hover {
        background-color: #b46e06;
      }

      /* --- RESPONSIVENESS --- */
      @media (max-width: 768px) {
        .menu-heading {
          font-size: 40px;
        }
      }

      /* ***************Meal plan styling******************************* */
      .meal-plan {
        background-color: #fff;
      }

      .meal-plan-heading {
        font-size: 50px;
        font-weight: 800;
      }

      .meal-plan-heading .color {
        color: #719544;
      }

      .swiper-container-wrapper {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
      }

      .slider-wrapper {
        padding-bottom: 60px;
      }

      .white-top {
        background-color: #ffffff;
        height: 220px;
      }

      .user-img {
        max-width: 90%;
        max-height: 100%;
        object-fit: contain;
      }

      .meal-desc-box {
        background-color: #719544;
        color: white;
      }

      .plan-heading {
        font-size: 20px;
      }

      .meal-desc {
        font-size: 13px;
        opacity: 0.9;
        line-height: 1.5;
      }

      .calories {
        color: #f19e24;
      }

      .subscribe {
        background-color: #f19e24;
        color: white;
        padding: 12px;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.3s ease;
      }

      .subscribe:hover {
        background-color: #e08d1f;
      }

      .slider-button {
        width: 50px !important;
        height: 50px !important;
        background: #ffffff !important;
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        color: #719544 !important;
        top: 45% !important;
      }

      .slider-button::after {
        font-size: 20px !important;
      }

      .swiper-pagination-bullet-active {
        background: #f19e24 !important;
        width: 25px;
        border-radius: 5px;
      }

      /* --- RESPONSIVENESS --- */
      @media (max-width: 991px) {
        .meal-plan-heading {
          font-size: 38px;
        }
      }

      @media (max-width: 768px) {
        .white-top {
          height: 180px;
        }

        .slider-button {
          display: none !important;
        }
      }

      /* *********************** How works section********************* */
      .how-works {
        background-color: #e9efe2;
        padding: 60px 0;
        /* Padding thori barhai hai breathing space ke liye */
      }

      .how-works-heading {
        font-size: 60px;
        font-weight: 700;
        letter-spacing: -1px;
        margin-bottom: 40px;
      }

      .works-box-img {
        background-color: #f19e24;
        width: 100px;
        height: 100px;
        border-radius: 12px;
      }

      .works-box-img img {
        width: 40px;
        height: auto;
      }

      .how-works-nested-box .works-heading {
        font-size: 22px;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 8px;
        color: #1a1a1a;
      }

      .works-desc {
        font-size: 16px;
        color: #7a7a7a;
        line-height: 1.5;
        max-width: 280px;
        margin: 0 auto;
      }

      /* Desktop Alignment */
      .how-works-inner-box-1,
      .how-works-inner-box-3 {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        /* Steps ko plate ke hisab se distribute karne ke liye */
        gap: 30px;
      }

      .works-img {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
      }

      /* --- RESPONSIVENESS --- */
      @media (max-width: 1199px) {
        .how-works-heading {
          font-size: 50px;
        }

        .works-img {
          max-width: 380px;
        }
      }

      @media (max-width: 991px) {
        .how-works-heading {
          font-size: 40px;
        }

        .how-works-inner-box-1,
        .how-works-inner-box-3 {
          height: auto;
          justify-content: center;
          align-items: center;
          gap: 40px;
        }

        .works-img {
          max-width: 320px;
          margin: 40px auto;
          /* Mobile par image ke upar-niche gap */
        }
      }

      @media (max-width: 576px) {
        .how-works-heading {
          font-size: 32px;
        }

        .works-box-img {
          width: 85px;
          height: 85px;
        }

        .works-desc {
          font-size: 15px;
        }
      }

      /* ******************** Book section**************** */
      .book-box-2 {
        max-width: 500px;
        height: 600px;
      }

      .book-heading {
        font-size: 60px;
        font-weight: 700;
        word-spacing: -0.6px;
        letter-spacing: -1px;
      }

      .book-heading .color {
        color: #719544;
      }

      .book-box-2 img {
        object-fit: cover;
        object-position: center;
      }

      .book-desc {
        font-size: 30px;
        margin-top: -16px;
        color: #000000;
      }

      .book-button {
        background-color: #f19e24;
        color: white;
        padding: 12px 56px;
        font-weight: bold;
        border-radius: 12px;
        cursor: pointer;
        margin-top: 50px;
        transition: 0.1s ease-in;
      }

      .book-button:hover {
        background-color: #b46e06;
      }

      /* --- RESPONSIVENESS --- */
      @media (max-width: 991px) {
        .book-heading {
          font-size: 45px;
        }

        .book-desc {
          font-size: 24px;
          margin-top: 0;
        }

        .book-box-2 {
          height: 400px;
          margin: 0 auto;
        }
      }

      @media (max-width: 576px) {
        .book-heading {
          font-size: 35px;
        }
      }

      /* *************************Testi styling********************** */
      .testi {
        background: url("../img/Rectangle 7.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 30px !important;
        padding-bottom: 250px !important;
        /* Increased from 140px */
      }

      .testi-heading {
        font-size: 55px;
        font-weight: 700;
      }

      .testi-box {
        background-color: white;
        border-radius: 10px;
        padding: 30px 20px 60px;
        height: 100%;
        margin-top: 40px;
      }

      .client-img-box {
        position: absolute;
        bottom: -90px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
      }

      .client-img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
      }

      .client-name {
        font-weight: 600;
        font-size: 20px;
        color: #000000;
        margin-top: 10px;
        white-space: nowrap;
      }

      .star-img-box {
        width: 120px;
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .testi-desc {
        color: #000000;
        margin-top: 14px;
        font-size: 20px;
        line-height: 1.4;
        flex-grow: 1;
      }

      .quote-img-box {
        width: 60px;
        height: 60px;
      }

      /* --- RESPONSIVENESS --- */
      @media (max-width: 991px) {
        .testi-heading {
          font-size: 38px;
        }

        .testi-box {
          margin-bottom: 130px !important;
          position: relative;
          padding: 30px 20px 30px;
        }

        .client-img-box {
          bottom: 80px;
          z-index: 5;
        }

        .testi-main-box.row {
          row-gap: 140px;
        }
      }

      /* *********************** Asked questions ******************* */
      .questions {
        background-color: #e9efe2;
      }

      .questions-heading {
        font-size: 45px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 20px;
        line-height: 1.2;
      }

      .questions-heading .color {
        color: #719544;
      }

      .questions-img {
        max-width: 450px;
      }

      .faq-container {
        gap: 16px;
      }

      .faq-item {
        transition: all 0.3s ease;
        border-bottom: 1px solid #999898;
        overflow: hidden;
        background-color: transparent;
      }

      .faq-question {
        padding: 20px 25px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        gap: 15px;
      }

      .faq-question p {
        font-size: 18px;
        font-weight: 500;
        color: #000000;
        transition: color 0.3s ease;
        flex: 1;
      }

      .faq-question span {
        font-size: 20px;
        color: #000000;
        transition: transform 0.3s ease, color 0.3s ease;
      }

      .faq-answer {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        background-color: #ffffff;
        transition: all 0.3s ease-in-out;
        padding: 0 25px;
      }

      .faq-answer p {
        color: #979797;
        font-size: 18px;
        line-height: 1.5;
        padding: 15px 0;
      }

      .faq-item.active .faq-question {
        background-color: #719544;
      }

      .faq-item.active .faq-question p,
      .faq-item.active .faq-question span {
        color: #ffffff;
      }

      .faq-item.active .faq-question span {
        transform: rotate(180deg);
      }

      .faq-item.active .faq-answer {
        max-height: 300px;
        opacity: 1;
        padding: 0 25px 20px 25px;
      }

      @media (max-width: 768px) {
        .questions-heading {
          font-size: 32px;
        }

        .faq-question p {
          font-size: 16px;
        }
      }

      /* ******************** choose section **************** */
      .choose-box-1 {
        max-width: 580px;
      }

      .choose-heading {
        font-size: 45px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 20px;
        line-height: 1.2;
      }

      .choose-heading .color {
        color: #719544;
      }

      .chooose-desc {
        font-size: 22px;
        color: #000000;
        font-weight: 600;
      }

      .choose-detail {
        font-size: 17px;
        /* Thora refined size */
        color: #7a7a7a;
        line-height: 1.6;
        text-align: justify;
        /* Design jaisa clean edge dene ke liye */
      }

      .inner-nested-box {
        flex-basis: calc(50% - 1rem);
      }

      .vector-img {
        background-color: #f19e24;
        min-width: 55px;
        height: 50px;
        border-radius: 50px;
      }

      .vector-detail {
        font-weight: 600;
        font-size: 15px;
        color: #1a1a1a;
      }

      .small-img-custom {
        height: 110px;
        width: 100%;
        object-fit: cover;
        border-radius: 50px;
      }

      /* Icons box ki spacing design jaisi karne ke liye */
      .choose-box-1-inner-main {
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
        justify-content: space-between;
      }

      .inner-nested-box {
        flex-basis: 1 !important;
        /* Grid handle karega isay */
      }

      /* --- RESPONSIVENESS --- */
      @media (max-width: 991px) {
        .choose-heading {
          font-size: 35px;
        }
      }

      @media (max-width: 576px) {
        .inner-nested-box {
          flex-basis: 100%;
        }

        .small-img-custom {
          height: 80px;
        }
      }

      /* ************************Footer******************* */
      .footer {
        background-color: #222;
        color: white;
        padding: 60px 0 20px;
        position: relative;
        overflow: hidden;
      }

      .footer-logo {
        width: 80px;
        margin-bottom: 20px;
      }

      .footer-text {
        font-size: 18px;
        margin-bottom: 20px;
        font-weight: 400;
      }

      /* Social icons layout */
      .social-icons {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
      }

      .social-icons a {
        color: white;
        font-size: 20px;
        text-decoration: none;
        transition: 0.3s;
      }

      .social-icons a:hover {
        color: #f19e24;
      }

      .footer-title {
        color: #f19e24;
        font-weight: 700;
        margin-bottom: 25px;
      }

      .footer-links {
        list-style: none;
        padding: 0;
      }

      .footer-links li {
        margin-bottom: 12px;
      }

      .footer-links li a {
        color: white;
        text-decoration: none;
        transition: 0.3s;
      }

      .footer-links li a:hover {
        color: #f19e24;
      }

      .help-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }

      .help-icon {
        background-color: #f19e24;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-size: 20px;
        color: white;
        flex-shrink: 0;
        /* Icon dabbe na */
      }

      .help-text strong {
        display: block;
        font-size: 16px;
      }

      .help-text p {
        margin: 0;
        font-size: 14px;
        color: #ccc;
      }

      .footer-line {
        border-color: #444;
        margin: 40px 0 20px;
      }

      .copyright {
        text-align: center;
        font-size: 14px;
        color: #888;
      }

      /* Leaves Positioning */
      .footer-leaf-left {
        position: absolute;
        bottom: -50px;
        left: -100px;
        width: 300px;
        opacity: 0.2;
        transform: rotate(45deg);
      }

      .footer-leaf-right {
        position: absolute;
        top: 50px;
        right: -80px;
        width: 250px;
        opacity: 0.2;
      }

      /* --- RESPONSIVENESS & CENTERING --- */
      @media (max-width: 991px) {
        .footer {
          text-align: center;
          /* Poora content center align */
        }

        .footer-logo {
          margin: 0 auto 20px;
          /* Logo center */
        }

        .social-icons {
          justify-content: center;
          /* Social icons center */
          margin-bottom: 30px;
        }

        .footer-links {
          margin-bottom: 30px;
        }

        .help-item {
          flex-direction: column;
          /* Icon upar, text neeche */
          justify-content: center;
          margin-bottom: 25px;
        }

        .help-icon {
          margin-right: 0;
          margin-bottom: 10px;
        }
      }

      @media (max-width: 576px) {

        .footer-leaf-left,
        .footer-leaf-right {
          width: 150px;
          /* Mobile par leaves choti */
          opacity: 0.1;
        }

        .footer-title {
          font-size: 20px;
        }
      }

      /* Order Page Badges (Unchanged) */
      .plan-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
      }

      .badge {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 4px;
        margin-bottom: 5px;
        font-weight: 700;
      }

      .badge.off {
        background-color: #ff0000;
        color: white;
      }

      .badge.trail {
        background-color: #6b963e;
        color: white;
      }

      /* ******************** Order Page Styles (Migrated from static) ***************** */

      .section-label {
        font-weight: 700;
        font-size: 22px;
        margin: 0;
      }

      .selection-card .card-header {
        margin-bottom: 20px !important;
      }

      .button-row {
        display: flex !important;
        flex-wrap: wrap !important;
        /* Ye line buttons ko next line par bhejay gi */
        gap: 12px !important;
        /* Buttons ke darmiyan space */
        width: 100% !important;
        justify-content: flex-start;
        /* Buttons ko left se start karega */
      }

      .best-plans-right-green-box {
        padding-bottom: 20px !important;
      }

      .green-box-inner {
        padding-bottom: 20px;
      }

      .btn-plan {
        /* flex: 1 1 0; <-- Is line ko hata dein ya niche wali se replace karein */
        flex: 0 1 auto;
        /* Isse button utni hi width lega jitna text hai, aur wrap hoga */
        min-width: fit-content;
        padding: 10px 25px;
        border: 1px solid #ccc;
        background-color: transparent;
        color: #333;
        border-radius: 50px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        /* Text ko ek hi line mein rakhega */
        transition: 0.3s;
        -webkit-tap-highlight-color: transparent;
      }

      .query-message {
        font-size: 18px;
        color: #000000;
      }

      .coupon-code {
        font-size: 18px !important;
        margin-top: 24px !important;
      }

      .promo-text {
        font-size: 18px !important;
      }

      /* Mobile par agar aap chahte hain buttons thore bade dikhen */
      @media (max-width: 576px) {
        .btn-plan {
          padding: 8px 20px;
          font-size: 14px;
        }
      }

      .btn-plan.active {
        background: #719544 !important;
        color: white !important;
        border-color: #719544 !important;
      }

      /* Only apply hover if the device supports a real hover state */
      @media (hover: hover) {
        .btn-plan:hover:not(.active) {
          background: #e9efe2;
          color: #719544;
          border-color: #719544;
        }
      }

      /* Ensure focus doesn't mimic the active selection */
      .btn-plan:focus {
        outline: none;
        box-shadow: none !important;
        /* Remove glow on mobile */
      }

      /* Re-assert active state over focus */
      .btn-plan.active:focus,
      .btn-plan.active:active {
        background: #719544 !important;
        color: white !important;
        border-color: #719544 !important;
      }

      .write input {
        display: block;
        width: 99%;
        padding: 12px 46px;
        border-radius: 50px;
        border: 1px solid #ccc;
      }

      .date-input-container {
        position: relative;
        width: 100%;
        max-width: 400px;
      }


      .custom-date-input {
        width: 100%;
        padding: 12px 20px;
        border: 1px solid #ccc;
        border-radius: 50px;
        font-size: 16px;
        outline: none;
        appearance: none;
        -webkit-appearance: none;
      }

      .calendar-icon {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #f19e24;
        font-size: 20px;
        pointer-events: none;
      }

      .plan-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
      }

      .badge {
        font-size: 12px;
        font-weight: bold;
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        margin: 0;
      }

      .trail {
        background-color: #f19e24;
      }

      .off {
        background-color: #ff0000;
      }

      .write-btn-plan {
        border: 1px solid white;
        background-color: #f19e24;
        color: white;
        padding: 10px 30px;
        border-radius: 50px;
        cursor: pointer;
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .xmark {
        position: absolute;
        top: 8px;
        right: 12px;
        font-size: 12px;
      }

      .food-images-row img {
        width: 98px;
        height: 80px;
        border-radius: 12px;
        object-fit: cover;
        margin-top: 18px;
        max-width: 100%;
        height: auto;
      }

      .best-plans-right-green-box {
        background-color: #719544;
        color: white;
        padding: 40px 30px;
        border-radius: 25px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 500px;
      }

      .green-box-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
      }

      .pay-label {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
      }

      .pay-label span {
        color: #f19e24;
      }

      .btn-apply {
        background: white;
        padding: 12px 0;
        width: 100%;
        border: none;
        border-radius: 10px;
        font-weight: 700;
        color: #333;
        margin-top: 10px;
        cursor: pointer;
      }

      .promo-text span {
        color: #f19e24;
        font-weight: 700;
      }

      .price-display {
        background-color: rgba(255, 255, 255, 0.15);
        padding: 20px;
        border-radius: 15px;
        margin-bottom: 30px;
        width: 100%;
      }

      .price-display p {
        margin: 0;
        font-size: 14px;
        opacity: 0.9;
      }

      .price-display span {
        font-size: 32px;
        font-weight: 700;
      }

      .btn-get-started {
        background: #f19e24;
        color: white;
        border: none;
        padding: 16px;
        border-radius: 12px;
        font-size: 18px;
        font-weight: 500;
        width: 100%;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }

      .terms-text {
        font-size: 14px;
        margin-top: 15px;
        opacity: 0.8;
      }

      .terms-text a {
        color: white;
        text-decoration: underline;
      }

      .form-reset {
        background-color: #969696;
        color: white;
        padding: 12px 26px;
        border-radius: 10px;
        border: none;
      }

      .next {
        background-color: #f19e24;
        color: white;
        padding: 12px 18px;
        border: none;
        border-radius: 10px;
      }


      .best-plans-heading {
        font-size: 44px !important;
        color: #6b963e !important;
        font-weight: 700 !important;
      }



      /* ***************************************************************************
***************************Meal Page CSS ******************************* */


      /* ******************* hero styling ***************************** */
      .hero-img-div {
        width: 100%;
        height: 350px;
      }

      .hero-img-div img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* ************************meal-detail-section************************ */
      /* Section Background */
      .meal-detail-section {
        background-color: #e9efe2;
        padding: 40px;
        font-family: sans-serif;
        position: relative;
        min-height: 500px;
      }

      /* Container to keep everything centered and aligned */
      /* .meal-detail-main-box {
      max-width: 900px;
      margin: 0 auto;
  } */

      /* Top Header Bar (Greenish) */
      .personal-detail-heading {
        background-color: #D0DDC1;
        padding: 15px 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        /* Chaaro sides se rounded jaisa image 1 mein hai */
        margin-bottom: 28px;
        /* Yeh gap create karega white box aur header ke beech */
      }

      .personal-detail-heading p {
        margin: 0;
        font-weight: 700;
        color: #333;
        font-size: 22px;
      }

      .scedule-detail-heading {
        background-color: #D0DDC1;
        padding: 15px 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        /* Chaaro sides se rounded jaisa image 1 mein hai */
        margin-bottom: 32px;
        /* Yeh gap create karega white box aur header ke beech */
      }

      .scedule-box {
        margin-top: 60px;
      }

      .scedule-detail-heading p {
        margin: 0;
        font-weight: 700;
        color: #333;
        font-size: 22px;
      }

      /* Main White Box */
      .personal-detail-box {
        background-color: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      }

      .personal-info-container {
        padding: 30px 25px;
      }

      .personal-info-heading {
        color: #8bab5e;
        font-weight: 600;
        margin-bottom: 25px;
        font-size: 19px;
      }

      /* Grid setup remains same */
      .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 50px;
        row-gap: 22px;
      }

      .info-item {
        display: flex;
        align-items: center;
      }

      .label {
        font-weight: 700;
        color: #000;
        font-size: 16px;
      }

      .value {
        color: #777;
        font-size: 16px;
      }

      /* Leaf Positioning */
      .bg-slightly-leaf-img {
        position: absolute;
        bottom: 20px;
        left: 20px;
        z-index: 1;
      }

      .bg-slightly-leaf-img img {
        width: 150px;
      }

      /* Layout Spacing */
      /* .scedule-box {
      margin: 20px auto;
  } */

      /* ******************* hero styling ***************************** */

      .hero-img-div {

        width: 100%;

        height: 350px;

      }

      .hero-img-div img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

      }



      /* ************************meal-detail-section************************ */

      /* Section Background */

      .meal-detail-section {
        background-color: #e9efe2;
        font-family: sans-serif;
        position: relative;
        min-height: 500px;
      }

      .personal-detail-heading,
      .scedule-detail-heading {
        background-color: #D0DDC1;
        padding: 15px 25px;
      }

      .personal-detail-box {
        background-color: white;
        border-radius: 10px;
      }

      .personal-info-heading {
        color: #8bab5e;
        font-weight: 600;
        font-size: 19px;
      }

      .label {
        color: #000;
        font-size: 16px;
      }

      /* Large screen par label ki fixed width taake values aik hi line se start hon */
      @media (min-width: 992px) {
        .label {
          min-width: 100px;
        }
      }

      .value {
        color: #777;
        font-size: 16px;
      }

      /* Mobile responsive padding */
      @media (max-width: 767px) {
        .personal-info-container {
          padding: 25px !important;
        }
      }

      /* Schedule Grid Logic */
      .scedule-info-container {
        background-color: white;
        display: grid;
      }

      .grid-row {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr 1fr;
        min-height: auto;
      }

      .skip-link {
        color: red;
        /* font-size: 15px; */
        font-weight: 500;
        text-decoration: none;
        margin-top: 10px !important;
      }

      /* Mobile Responsive: Stack all cells in one column */
      @media (max-width: 768px) {
        .grid-row {
          grid-template-columns: 1fr !important;
          /* Single column layout */
        }

        .grid-cell {
          border-right: none !important;
          /* Right border ki zaroorat nahi mobile pe */
          border-bottom: 1px solid #dee2e6;
          /* Har cell ke baad line */
          padding: 20px 10px !important;
        }

        /* Pehli image ko mobile par hide karna behtar hai ya width set karein */
        .main-img-cell {
          display: none !important;
        }

        .label-cell img {
          width: 100px !important;
          /* Mobile par image size chota */
        }

        .date {
          margin-bottom: 10px;
        }

        /* Skip link spacing */
        .skip-link {
          margin-top: 10px !important;
          margin-bottom: 5px;
        }
      }

      /* Existing Classes */
      .orange-bg {
        background-color: #FDF0DE !important;
      }

      .day-name {
        font-weight: 700;
        margin-top: 12px;
      }

      .date {
        font-size: 16px;
        margin-top: 8px;
        color: #8bab5e;
        font-weight: 600;
      }

      .meal-label {
        font-weight: 700;
      }

      .green-select {
        background-color: #E2EBD6;
        border: 1px solid gray !important;
        /* Border ko visible rakhne ke liye */
        min-width: 130px;
        /* Width thodi barhai hai taake arrow aur text na jurein */

        /* Padding: Top, Right (arrow ke liye zyada space), Bottom, Left */
        padding: 8px 35px 8px 15px !important;

        border-radius: 50px;
        margin-top: 14px;
        cursor: pointer;
        outline: none;
        appearance: none;
        /* Default arrow hatane ke liye */

        /* Custom Arrow SVG (taake yeh border ke sath na jure) */
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        /* Arrow ko border se 15px door rakhega */
        background-size: 12px;
      }

      .red-select {
        background-color: #FEF9E2;
        border: 1px solid #8bab5e !important;
        /* Border ko visible rakhne ke liye */
        min-width: 130px;
        /* Width thodi barhai hai taake arrow aur text na jurein */

        /* Padding: Top, Right (arrow ke liye zyada space), Bottom, Left */
        padding: 8px 35px 8px 15px !important;
        /* font-size: 15px; */
        font-weight: 600;
        border-radius: 50px;
        /* margin-top: 8px !important; */
        cursor: pointer;
        outline: none;
        appearance: none;
        /* Default arrow hatane ke liye */

        /* Custom Arrow SVG (taake yeh border ke sath na jure) */
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        /* Arrow ko border se 15px door rakhega */
        background-size: 12px;
      }



      /* Buttons Styling */
      .form-reset {
        background-color: #969696;
        color: white;
        padding: 12px 22px;
        border-radius: 10px;
        border: none;
      }

      .next {
        background-color: #f19e24;
        color: white;
        padding: 12px 18px;
        border: none;
        border-radius: 10px;
      }





      /* ***************************************************************** */
      /* ************************ Profile Page ********************************** */
      .profile {
        background-color: #E9EFE2;
        font-family: sans-serif;
      }

      .main-links-box {
        background-color: #c9d6b9;
      }

      .main-links-box a {
        text-decoration: none;
        color: #1a1a1a;
        font-weight: 600;
        font-size: 16px;
      }

      .main-links-box a:hover {
        font-weight: bold;
        border-bottom: 2px solid #000;
      }

      .profile-heading {
        font-size: 30px;
        color: #6B963E;
        font-weight: 600;
      }

      .profile-dsc,
      .info-desc,
      .personal-info-desc,
      .login-desc,
      .visi-desc {
        font-size: 16px;
        color: #707070;
      }


      .discard {
        background-color: #9b9b9b;
      }

      .edit {
        background-color: #6d9043;
      }

      .update {
        background-color: #f7a22a;
        color: #707070 !important;
      }

      .profile-buttons button:hover {
        opacity: 0.9;
      }

      .display-info,
      .personal-info,
      .login-info,
      .visibility {
        font-size: 20px;
      }

      .input-box input::placeholder,
      .input-box textarea::placeholder,
      .input-wrapper input::placeholder {
        font-size: 17px;
      }

      .joined-da {
        font-size: 16px;
        color: #6d9043;
      }

      .joined-da span {
        color: black;
      }

      .profile-img {
        font-size: 13px;
        color: #666;
      }

      .login-inputs input:focus {
        border-color: #6d9043;
      }

      .make-ptofile-private {
        background-color: #f7a22a;
      }


      /* Outer box jo poori jagah lega */
      .notification-show-box {
        background-color: #fff;
        width: 100%;
        height: 500px;
        /* Image ke mutabiq height di hai */
        display: flex;
        justify-content: center;
        /* Horizontally center */
        align-items: center;
        /* Vertically center */
        border-bottom: 1px solid #f0f0f0;
        margin-top: 30px;
        border-radius: 14px;
        padding: 20px 0px;
      }

      /* Inner box jo text ko handle karega */
      .notification-inner-box {
        text-align: center;
        /* Text ko center karne ke liye */
        width: 90%;
        /* Text ki width ko control karne ke liye */
        height: 90%;
        border: 2px solid rgb(226, 224, 224);
        border-radius: 14px;
        background-color: #F9F9F9;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      /* "No Notifications Yet" styling */
      .no-noti {
        font-size: 20px;
        font-weight: 700;
        color: #8f8f8f;
        /* Darker grey/black */
        margin-bottom: 10px;
      }

      /* Description styling */
      .no-noti-desc {
        font-size: 15px;
        color: #a5a4a4;
        /* Light grey color jaisa image mein hai */
        line-height: 1.5;
        margin: 0;
      }


      /* Responsive UI Improvements */
      .payment-method {
        font-size: 20px;
        color: #000;
      }

      .payment-method-desc {
        font-size: 16px;
        color: #707070;
      }

      .custom-input {
        background-color: #F9F9F9;
        font-size: 14px;
        outline: none;
        border: 1px solid #e0e0e0 !important;
        transition: border-color 0.3s ease;
      }

      .custom-input:focus {
        border-color: #000 !important;
      }

      .debit-credit-card {
        font-size: 14px;
        color: #000;
      }

      .card-icons {
        pointer-events: none;
      }

      /* Mobile specific fixes */
      @media (max-width: 991px) {
        .payment-method-box {
          gap: 0px !important;
          /* Row gy-4 handles spacing instead */
        }

        .payment-method {
          font-size: 18px;
        }
      }


      /* ******************************************************************* */
      /* ********************** Settings page********************************* */
      .marketing-emails-container {
        background-color: #FFFFFF;
        padding: 48px;
        margin-top: 30px;
        border-radius: 14px;
      }

      .header-section {
        margin-bottom: 20px;
      }

      .marketing-email {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
        color: #000;
      }

      .marketing-desc {
        font-size: 14px;
        color: #919191;
        margin-top: 0;
      }

      .marketing-email-inner-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 0px;
        border-bottom: 1px solid rgb(175, 175, 175);
        /* Light line separator */
        max-width: 1100px;
        /* border: 2px solid red; */
        margin: auto;
      }

      .marketing-inner-box-heading {
        /* font-size: 15px; */
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: #000;
      }

      .marketing-inner-box-desc {
        font-size: 14px;
        color: #919191;
        /* margin: 4px 0 0 0; */
      }

      /* --- Toggle Switch Styling --- */
      .toggle-switch {
        appearance: none;
        width: 40px;
        height: 22px;
        background-color: #ddd;
        border-radius: 20px;
        position: relative;
        cursor: pointer;
        outline: none;
        transition: 0.3s;
      }

      .toggle-switch:checked {
        background-color: #76a05d;
        /* Image wala green color */
      }

      .toggle-switch::before {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        background-color: white;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: 0.3s;
      }

      .toggle-switch:checked::before {
        left: 20px;
      }



      /* ---------- Responsive CSS ---------- */

      /* Tablet */
      @media (max-width: 1024px) {
        .marketing-emails-container {
          padding: 32px;
        }

        .marketing-email-inner-box {
          padding: 20px 0;
          max-width: 100%;
        }
      }

      /* Mobile */
      @media (max-width: 768px) {
        .marketing-emails-container {
          padding: 24px 16px;
        }

        .marketing-email {
          font-size: 18px;
        }

        .marketing-desc {
          font-size: 13px;
        }

        .marketing-email-inner-box {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          padding: 16px 0;
        }

        .toggle-switch {
          align-self: flex-end;
        }

        .marketing-inner-box-heading {
          font-size: 15px;
        }

        .marketing-inner-box-desc {
          font-size: 13px;
        }
      }

      /* Small Mobile */
      @media (max-width: 480px) {
        .marketing-emails-container {
          padding: 20px 12px;
        }

        .marketing-email {
          font-size: 16px;
        }

        .marketing-email-inner-box {
          gap: 10px;
        }
      }




      /* ********************************************************************** */
      /* ***************************** MyOrders styling ****************************/
      /* Container styling */
      .myOrders-buttons {
        display: flex;
        gap: 12px;
        /* Buttons ke darmiyan fasla */
        align-items: center;
      }

      /* Common button styling */
      .myOrders-buttons button {
        padding: 10px 24px;
        border-radius: 50px;
        /* Fully rounded corners */
        /* font-size: 14px; */
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid #bbbbbb;
        /* Light border for unselected buttons */
        background-color: transparent;
        color: #333;
        outline: none;
      }

      /* "All" Button (Selected State) */
      .myOrders-buttons button.all {
        background-color: #6d9441;
        /* Exact green shade from image */
        color: white;
        border-color: #6d9441;
      }

      /* Hover effect for other buttons */
      .myOrders-buttons button:hover:not(.all) {
        background-color: #f8f8f8;
        border-color: #ccc;
      }


      /* Main Card Container */
      .myOrders-one {
        display: flex;
        align-items: center;
        background: #f9f9f9;
        /* Light grey background */
        border: 2px solid #cccbcb;
        border-radius: 12px;
        padding: 25px 20px;
        margin-bottom: 15px;
        position: relative;
        margin-top: 40px;
      }

      /* Image Styling */
      .myOrders-one img {
        width: 170px;
        height: 150px;
        object-fit: cover;
        border-radius: 15px;
        margin-right: 20px;
      }

      /* Middle Text Content */
      .img-desc-box {
        flex-grow: 1;
      }

      .orderId {
        color: #f2a93e;
        /* Orange/Gold shade */
        font-size: 13px;
        margin-bottom: 8px;
        font-weight: 500;
      }

      .myOrderImgHeading {
        font-size: 22px;
        font-weight: 700;
        color: #000;
        margin-bottom: -2px;
      }

      .myOrderImgDesc {
        color: #777;
        font-size: 14px;
        margin-bottom: 20px;
      }

      .myOrderImgPrice {
        color: #6d9441;
        /* Green color from image */
        font-weight: 700;
        font-size: 15px;
        margin: 0;
      }

      /* Status and Date (Right Side) */
      .status-date-box {
        display: flex;
        align-items: center;
        gap: 15px;
        position: absolute;
        top: 20px;
        right: 20px;
      }

      .status {
        background-color: #d1dbbd;
        /* Very light green background */
        color: #6d9441;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        margin: 0;
      }

      /* Status Dot */
      .status::before {
        content: "";
        width: 8px;
        height: 8px;
        background-color: #6d9441;
        border-radius: 50%;
        margin-right: 8px;
        display: inline-block;
      }

      .status2 {
        background-color: #F7DEB9;
        /* Very light green background */
        color: #e08d1f;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        margin: 0;
      }

      .status2::before {
        content: "";
        width: 8px;
        height: 8px;
        background-color: #e08d1f;
        border-radius: 50%;
        margin-right: 8px;
        display: inline-block;
      }

      .status3 {
        background-color: #FBB2BB;
        /* Very light green background */
        color: #FF0D0D;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        margin: 0;
      }

      .status3::before {
        content: "";
        width: 8px;
        height: 8px;
        background-color: #FF0D0D;
        border-radius: 50%;
        margin-right: 8px;
        display: inline-block;
      }

      .date {
        color: #888;
        font-size: 14px;
        margin: 0;
      }


      /* Mobile and Tablet Responsiveness */
      @media (max-width: 768px) {
        .myOrders-one {
          flex-direction: column;
          /* Content ko upar niche karne ke liye */
          align-items: flex-start;
          padding: 15px;
          position: relative;
        }

        .myOrders-one img {
          width: 100%;
          /* Mobile par image full width ho jayegi */
          height: 200px;
          margin-right: 0;
          margin-bottom: 15px;
        }

        .status-date-box {
          position: static;
          /* Absolute position khatam karke normal flow mein laya */
          margin-bottom: 15px;
          width: 100%;
          justify-content: flex-start;
        }

        .img-desc-box {
          width: 100%;
        }

        .myOrderImgHeading {
          font-size: 18px;
          /* Mobile par heading thori choti */
        }

        .myOrders-buttons {
          justify-content: flex-start;
          gap: 8px;
        }

        .myOrders-buttons button {
          padding: 8px 16px;
          /* Choti screens par buttons ka size kam */
          font-size: 13px;
        }
      }

      /* Extra Small Screens (Phones) */
      @media (max-width: 480px) {
        .status-date-box {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 5px;
        }

        .date {
          font-size: 12px;
        }
      }