:root {
        --bb-green: #28a745;
        --bb-light-green: #f2fcf6;
        --bb-card-bg: #ffffff;
        --bb-footer-bg: #0d1b2a;
        --bb-info: #0d6efd;
        --bb-purple: #9b59b6;
        --bb-muted: #6c757d;
      }
    body {
      font-family: 'Inter', sans-serif;
      color: #343a40;
      /* offset for fixed navbar */
      padding-top: 60px;
      font-size: 15px;
    }
    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
    }
    .navbar.fixed-top {
      padding: 0.75rem 2rem;
      background: #fff;
    }
    .hero {
      background-color: var(--bb-light-green);
      padding: 4rem 0;
    }
    .placeholder-image {
      background-color: #e9ecef;
      border-radius: 0.75rem;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .placeholder-image i {
      font-size: 3rem;
      color: #ced4da;
    }
    .feature-card {
      background: var(--bb-card-bg);
      border: 1px solid #e0e0e0;
      border-radius: 0.75rem;
      padding: 1.5rem;
      text-align: center;
      height: 100%;
    }
    .feature-card i {
      font-size: 2rem;
      color: var(--bb-green);
      margin-bottom: 0.75rem;
    }
    .plan-card {
      border: 1px solid #e0e0e0;
      border-radius: 0.75rem;
      padding: 2rem 1.5rem;
      text-align: center;
      position: relative;
      background: #fff;
    }
    .plan-card.popular::before {
      content: "Most Popular";
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--bb-light-green);
      color: var(--bb-green);
      padding: 0.25rem 0.75rem;
      font-size: 0.85rem;
      border-radius: 0.5rem;
      font-weight: 600;
    }
    .testimonial-card {
      background: var(--bb-card-bg);
      border-radius: 0.75rem;
      padding: 1.75rem;
      height: 100%;
    }
    .testimonial-card .fa-star {
      color: #ffc107;
      margin-right: 0.125rem;
    }
    .testimonial-card p {
      font-size: 0.95rem;
      line-height: 1.5;
      margin-top: 1rem;
    }
    .franchise {
      background-color: var(--bb-light-green);
      padding: 4rem 0;
    }
    .cta-section {
      background-color: var(--bb-green);
      color: #fff;
      padding: 3rem 0;
    }
    .cta-section .form-control {
      max-width: 300px;
    }
    .footer {
      background-color: var(--bb-footer-bg);
      color: #adb5bd;
      padding: 3rem 0 1rem;
      font-size: 0.9rem;
    }
    .footer a {
      color: #adb5bd;
      text-decoration: none;
    }
    .footer a:hover {
      color: #fff;
    }


/* Hero */
    .menu-hero {
      background-color: var(--bb-light-green);
      padding: 6rem 0; text-align: center;
    }
    .menu-hero .badge {
      font-size: .9rem; margin: 0 .25rem;
    }
    .badge-rot {
      border: 1px solid var(--bb-green);
      color: var(--bb-green);
      background-color: rgba(40,167,69,0.1);
    }
    .badge-nutri {
      border: 1px solid var(--bb-info);
      color: var(--bb-info);
      background-color: rgba(13,110,253,0.1);
    }
    .badge-infused {
      border: 1px solid var(--bb-purple);
      color: var(--bb-purple);
      background-color: rgba(155,89,182,0.1);
    }

    /* Tabs */
    .nav-tabs {
      background: #f8f8f8;
      border-radius: .5rem;
      display: inline-flex;
      padding: .25rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .nav-tabs .nav-link {
      border: none;
      color: #6c757d;
      padding: .575rem 2.25rem;
    }
    .nav-tabs .nav-link.active {
      color: #000;
      background: #fff;
      border-radius: .5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Active Navigation Styles */
.navbar-nav .nav-link {
    color: #495057;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--bb-green);
    background-color: rgba(40, 167, 69, 0.05);
}

.navbar-nav .nav-link.active {
    color: var(--bb-green);
    font-weight: 600;
    background-color: rgba(40, 167, 69, 0.1);
}

/* Optional: Add a subtle indicator for active state */
.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--bb-green);
    border-radius: 50%;
}

/* Mobile offcanvas active state */
.offcanvas-body .nav-link {
    color: #495057;
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
}

.offcanvas-body .nav-link:hover {
    color: var(--bb-green);
    background-color: rgba(40, 167, 69, 0.05);
}

.offcanvas-body .nav-link.active {
    color: var(--bb-green);
    font-weight: 600;
    background-color: rgba(40, 167, 69, 0.1);
    border-left: 3px solid var(--bb-green);
}

/* Ensure the Order Now button stands out */
.navbar .btn-success {
    background-color: var(--bb-green);
    border-color: var(--bb-green);
    font-weight: 600;
    padding: 0.5rem 1.5rem;
}

.navbar .btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    /* Menu cards */
    .menu-card {
      position: relative;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: .75rem;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .menu-card .menu-img {
      background: #e9ecef;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .menu-card .rating-badge {
      position: absolute;
      top: .5rem;
      right: .5rem;
      background: #fff;
      border-radius: .5rem;
      padding: .25rem .5rem;
      font-size: .85rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      display: flex; align-items: center;
    }
    .menu-card .rating-badge .fa-star {
      color: #ffc107; margin-right: .25rem;
    }
    .menu-card .menu-body {
      padding: 1rem; flex: 1;
    }

    /* Feature icons */
    .feature-icon { font-size: 1.75rem; margin-bottom: .5rem; }
    .feature-icon.green { color: var(--bb-green); }
    .feature-icon.blue  { color: var(--bb-info); }
    .feature-icon.purple{ color: var(--bb-purple); }
    .feature-icon.orange{ color: #fd7e14; }

    /* Rotation & Delivery cards */
    .rd-card {
      background: #fff; border-radius: .75rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      padding: 1.5rem; text-align: center; height: 100%;
    }
    .rd-card .fa-clock,
    .rd-card .fa-utensils {
      font-size: 2rem; margin-bottom: .75rem;
      color: var(--bb-green);
    }


    /* Plan cards */
    .plan-card {
      border: 1px solid #e0e0e0;
      border-radius: .75rem;
      padding: 2rem 1.5rem;
      text-align: left;
      position: relative;
      background: #fff;
      height: 100%;
    }
    .plan-card.popular {
      border-color: var(--bb-green);
    }
    .plan-card.popular::before {
      content: "Most Popular";
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--bb-light-green);
      color: var(--bb-green);
      padding: .25rem .75rem;
      font-size: .85rem;
      border-radius: .5rem;
      font-weight: 600;
    }
    .plan-card .price {
      font-size: 2rem;
      color: var(--bb-green);
      font-weight: 700;
    }
    .plan-card ul {
      margin-top: .5rem;
      margin-bottom: 1.5rem;
      padding-left: 1rem;
    }
    .plan-card ul li {
      margin-bottom: .5rem;
    }

    /* Delivery Info */
    .delivery-info {
      background: #fff;
      border-radius: .75rem;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      display: flex;
      flex-wrap: wrap;
    }
    .delivery-info > div {
      flex: 1 1 50%;
      padding: 1.5rem;
      text-align: center;
    }
    .delivery-info .border-end {
      border-right: 1px solid #e0e0e0;
    }
    .delivery-info i {
      font-size: 1.75rem;
      color: var(--bb-green);
      margin-bottom: .5rem;
    }

    /* Features */
    .feature-icon {
      font-size: 1.75rem;
      margin-bottom: .5rem;
    }
    .feature-icon.green   { color: var(--bb-green); }
    .feature-icon.blue    { color: var(--bb-info); }
    .feature-icon.purple  { color: var(--bb-purple); }
    .feature-icon.orange  { color: #fd7e14; }

    /* Testimonials */
    .testimonial-card {
      background: #fff;
      border-radius: .75rem;
      padding: 1.5rem;
      height: 100%;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      text-align: left;
    }
    .testimonial-card .stars i {
      color: #ffc107;
      margin-right: .125rem;
    }

    /* FAQ */
    .accordion-button::after {
      /*font-family: "Font Awesome 5 Free";
      content: "\f107";
      font-weight: 900;*/
    }
    .accordion-button.collapsed::after {
      /*content: "\f105";*/
    }

    /* Hero */
    .hero-franchise {
      background-color: var(--bb-light-green);
      padding: 4rem 0;
    }
    .hero-franchise .badge-info {
      background-color: transparent;
      color: var(--bb-info);
      border: 1px solid var(--bb-info);
      font-weight: 600;
      padding: .25rem .75rem;
      border-radius: .5rem;
    }
    .placeholder-image {
      background: #e9ecef;
      border-radius: .75rem;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Stats under hero */
    .franchise-stats h5 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: .25rem;
    }
    /* Feature cards */
    .feature-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: .75rem;
      padding: 1.5rem;
      text-align: center;
      height: 100%;
    }
    .feature-card i {
      font-size: 2rem;
      margin-bottom: .75rem;
    }
    /* Investment details */
    .investment-card {
      background: #fff;
      border-radius: .75rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      padding: 1.5rem;
      height: 100%;
    }
    .investment-card h6 {
      font-weight: 600;
      margin-bottom: .75rem;
    }
    .investment-card ul {
      padding-left: 1rem;
      margin-bottom: 0;
    }
    /* Franchise list */
    .franchise-list .card {
      border: 1px solid #e0e0e0;
      border-radius: .75rem;
      padding: 1.25rem;
      height: 100%;
    }
    .franchise-list .badge {
      font-size: .75rem;
    }
    /* Apply form */
    .apply-form {
      max-width: 700px;
      margin: 0 auto;
      background: #fff;
      border-radius: .75rem;
      padding: 2rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    /* Process steps */
    .process-step {
      text-align: center;
      flex: 1;
    }
    .process-step .step-circle {
      width: 2.5rem;
      height: 2.5rem;
      background: var(--bb-green);
      color: #fff;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      margin-bottom: .5rem;
    }
    /* Final CTA */
    .final-cta {
      background: var(--bb-green);
      color: #fff;
      padding: 3rem 0;
      text-align: center;
    }
    .final-cta input {
      max-width: 200px;
    }

    /* Hero */
    .hero-reviews {
      background-color: var(--bb-light-green);
      padding: 4rem 0;
      text-align: center;
    }
    .hero-reviews .stat {
      margin-top: 1.5rem;
    }
    .hero-reviews .stat h4 {
      font-size: 2rem;
      margin-bottom: .25rem;
      font-weight: 700;
    }
    .hero-reviews .stat small {
      color: #6c757d;
    }

    /* Metric cards */
    .metric-card {
      background: #fff;
      border-radius: .75rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      padding: 2rem 1.5rem;
      text-align: center;
    }
    .metric-card i {
      font-size: 2rem;
      margin-bottom: .75rem;
      color: var(--bb-green);
    }

    /* Review cards */
    .review-card {
      background: #fff;
      border-radius: .75rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      padding: 1.5rem;
      text-align: left;
      height: 100%;
    }
    .review-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .75rem;
    }
    .review-header .fa-quote-right {
      color: var(--bb-green);
      font-size: 1.25rem;
    }
    .review-card .stars i {
      color: #ffc107;
      margin-right: .125rem;
    }
    .review-card small {
      color: #6c757d;
    }
    .plan-badge {
      font-size: .75rem;
      background: var(--bb-light-green);
      color: var(--bb-green);
      padding: .25rem .5rem;
      border-radius: .5rem;
      margin-right: .5rem;
      font-weight: 600;
    }

    /* Success stories by plan */
    .success-box {
      border-radius: .75rem;
      padding: 1.5rem;
      background: #fff;
      position: relative;
      height: 100%;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    .success-box.weekly { border: 1px solid var(--bb-green); }
    .success-box.fifteen { border: 1px solid var(--bb-info); }
    .success-box.thirty { border: 1px solid var(--bb-purple); }
    .success-box h6 {
      margin-bottom: .75rem;
      font-weight: 600;
    }
    .success-box .stars i { color: #ffc107; margin-right: .125rem; }

    /* Why customers love */
    .love-stat {
      text-align: center;
    }
    .love-stat h3 {
      font-size: 2rem;
      color: var(--bb-green);
      margin-bottom: .25rem;
      font-weight: 700;
    }
    .love-stat small {
      color: #6c757d;
    }
* Hero */
    .hero-touch {
      background-color: var(--bb-light-green);
      padding: 4rem 0;
      text-align: center;
    }
    .hero-touch h1 {
      font-size: 2.5rem;
    }
    .hero-touch p {
      font-size: 1rem;
      color: #6c757d;
    }

    /* Contact section */
    .contact-form,
    .contact-info {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: .75rem;
      padding: 2rem;
      height: 100%;
    }
    .contact-form .btn {
      background: var(--bb-green);
      border: none;
    }
    .contact-info h5 {
      margin-top: 1rem;
    }
    .contact-info i {
      color: var(--bb-green);
      margin-right: .5rem;
    }

    /* Business hours */
    .hours-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: .75rem;
      padding: 1.5rem;
      height: 100%;
    }
    .hours-card dt {
      font-weight: 600;
    }
    .hours-card dd {
      margin: 0 0 1rem 0;
      color: #6c757d;
    }

    /* Locations */
    .location-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: .75rem;
      padding: 1.5rem;
      height: 100%;
    }
    .location-card i {
      color: var(--bb-green);
      margin-right: .5rem;
    }

    /* FAQ */
    .accordion-button::after {
      font-family: "Font Awesome 5 Free";
      content: "\f107";
      font-weight: 900;
    }
    .accordion-button.collapsed::after {
      content: "\f105";
    }
    .cta-final {
      background: var(--bb-green);
      color: #fff;
      padding: 3rem 0;
      text-align: center;
    }
    .cta-final .btn {
      background: #fff;
      color: var(--bb-green);
      font-weight: 600;
      border: none;
    }
/* Hero */
    .hero-blog {
      background-color: var(--bb-light-green);
      padding: 4rem 0;
      text-align: center;
    }
    .hero-blog .badge {
      font-size: .9rem;
      margin: 0 .5rem;
    }
    .badge-expert { border: 1px solid #555; color: #555; background: rgba(0,0,0,0.05);}
    .badge-cat    { border: 1px solid var(--bb-info); color: var(--bb-info); background: rgba(13,110,253,0.1);}
    .badge-reader { border: 1px solid var(--bb-green); color: var(--bb-green); background: rgba(40,167,69,0.1);}

    /* Search & filters */
    .search-bar {
      max-width: 600px;
      margin: 2rem auto;
      display: flex;
    }
    .search-bar input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .search-bar .btn {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .category-filters .btn {
      margin-right: .5rem;
      margin-bottom: .5rem;
    }

    /* Featured article */
    .featured-card {
      background: #fff;
      border-radius: .75rem;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      margin-bottom: 3rem;
    }
    .featured-card .img-col {
      flex: 1 1 50%;
      background: #e9ecef;
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .featured-card .body-col {
      flex: 1 1 50%;
      padding: 2rem;
      text-align: left;
    }
    .featured-card .badge-cat {
      margin-bottom: .5rem;
    }
    .featured-card .meta {
      font-size: .9rem;
      color: #6c757d;
      margin: 1rem 0;
    }
    .featured-card .meta i {
      margin-right: .25rem;
    }

    /* Latest articles */
    .article-card {
      background: #fff;
      border-radius: .75rem;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .article-card .img-wrap {
      background: #e9ecef;
      min-height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .article-card .card-body {
      flex: 1;
      padding: 1rem;
    }
    .article-card .badge-cat {
      font-size: .75rem;
      margin-bottom: .5rem;
    }
    .article-card .meta {
      font-size: .85rem;
      color: #6c757d;
      margin: .75rem 0;
    }
    .article-card .meta i { margin-right: .25rem; }
    .article-card .tags small {
      background: #f1f3f5;
      color: #495057;
      border-radius: .5rem;
      padding: .25rem .5rem;
      margin-right: .25rem;
      font-size: .75rem;
    }

    /* Subscription CTA */
    .subscribe-section {
      background: var(--bb-green);
      color: #fff;
      padding: 3rem 0;
      text-align: center;
    }
    .subscribe-section input {
      max-width: 300px;
      display: inline-block;
      margin-right: .5rem;
    }

    /* Category grid */
    .category-card {
      background: #fff;
      border-radius: .75rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      text-align: center;
      padding: 2rem 1rem;
      height: 100%;
    }
    .category-card i {
      font-size: 2rem;
      color: var(--bb-green);
      margin-bottom: .75rem;
    }
    .category-card small {
      color: #6c757d;
      display: block;
      margin-bottom: .75rem;
    }

    /* Breadcrumb */
    .breadcrumb {
      background: none;
      padding: 0;
      margin-bottom: 1rem;
    }
    .breadcrumb-item + .breadcrumb-item::before {
      content: "›";
    }

    /* Article header */
    .article-header h1 {
      font-size: 2.5rem;
      margin-bottom: .5rem;
    }
    .article-meta {
      color: var(--bb-muted);
      font-size: .9rem;
    }
    .article-meta i {
      margin-right: .25rem;
    }
    .share-buttons .btn {
      color: var(--bb-muted);
      font-size: 1.1rem;
      margin-left: .5rem;
    }

    /* Featured image placeholder */
    .featured-image {
      background: #e9ecef;
      border-radius: .5rem;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1.5rem 0;
    }

    /* Content styling */
    .article-content h4 {
      margin-top: 2rem;
      margin-bottom: .5rem;
    }
    .article-content ul {
      margin-left: 1.25rem;
    }
    .article-content ul li {
      margin-bottom: .5rem;
    }

    /* Back & author section */
    .post-footer {
      border-top: 1px solid #e0e0e0;
      padding-top: 1.5rem;
      margin-top: 2rem;
    }
    .author-box {
      display: flex;
      align-items: center;
      margin-top: 1rem;
    }
    .author-avatar {
      background: #e9ecef;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--bb-muted);
    }
    .author-info {
      margin-left: 1rem;
    }