/* Custom Styles */
      :root {
          --bs-primary: #25d366;
          --bs-primary-rgb: 37, 211, 102;
          --bs-dark: #1a202c;
          --bs-body-font-family: "Poppins", sans-serif;
          --bs-body-color: #4a5568;
      }

      body {
          color: var(--bs-body-color);
      }

      .navbar-brand {
          font-weight: 700;
          font-size: 1.5rem;
      }

      .navbar-brand span {
          color: var(--bs-primary);
      }

      .nav-item .nav-link {
          color: #222222;
          font-weight: 800;


      }

      .btn-primary {
          --bs-btn-bg: var(--bs-primary);
          --bs-btn-border-color: var(--bs-primary);
          --bs-btn-hover-bg: #1da952;
          --bs-btn-hover-border-color: #1da952;
      }

      .display-4 {
          font-weight: 700;
      }

      .lead {
          font-size: 1.25rem;
          font-weight: 400;
      }

      .social-proof-logo {
          height: 35px;
          filter: grayscale(100%);
          opacity: 0.6;
          transition: all 0.3s ease;
      }

      .social-proof-logo:hover {
          filter: grayscale(0%);
          opacity: 1;
      }

      .video-wrapper {
          box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
          border-radius: 0.75rem;
          overflow: hidden;
      }

      .feature-icon {
          font-size: 2rem;
          color: var(--bs-primary);
      }

      .pricing-toggle .nav-link {
          color: var(--bs-dark);
      }

      .pricing-toggle .nav-link.active {
          background-color: var(--bs-primary) !important;
          color: white !important;
      }

      .card.popular {
          border-color: var(--bs-primary);
          border-width: 2px;
      }

      .list-style-check li {
          padding-left: 1.5em;
          text-indent: -1.5em;
      }

      .list-style-check li::before {
          content: "✓";
          color: var(--bs-primary);
          margin-right: 0.5em;
          font-weight: bold;
      }

      .btn-outline-primary {
          --bs-btn-color: #2FD367;
          --bs-btn-border-color: #2FD367;
          --bs-btn-hover-color: #fff;
          --bs-btn-hover-bg: #2FD367;
          --bs-btn-hover-border-color: #2FD367;
          --bs-btn-focus-shadow-rgb: 13, 110, 253;
          --bs-btn-active-color: #fff;
          --bs-btn-active-bg: #2FD367;
          --bs-btn-active-border-color: #2FD367;
          --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          --bs-btn-disabled-color: #2FD367;
          --bs-btn-disabled-bg: transparent;
          --bs-btn-disabled-border-color: #2FD367;
          --bs-gradient: none;
      }

      :root {
          --starter-bg: #F8F2E8;
          --starter-text: #222222;
          --pro-bg: #EAF7F3;
          --pro-text: #2FD367;
          --enterprise-bg: #FFFFFF;
          --enterprise-text: #222222;
          --text-dark: #333333;
          --text-light: #888888;
          --border-color: #EAEAEA;
      }

      .nav-pills .nav-link.active,
      .nav-pills .show>.nav-link {
          color: var(--bs-nav-pills-link-active-color);
          background-color: #1da952;
      }

      /* --- 1. CORE STYLES & SETUP --- */
      :root {
          --accent-green: #2E856E;
          --dark-text: #222222;
          --light-text: #555555;
          --light-grey-bg: #f7f7f7;
          --border-color: #E0E0E0;
      }



      /* --- 2. SECTION STYLES --- */
      .get-started-section-elegant {
          max-width: 900px;
          margin: 0 auto;
          text-align: center;
      }

      .section-subtitle-elegant {
          font-family: "Inter", sans-serif;
          font-weight: 700;
          font-size: 1.8rem;
          text-transform: uppercase;
          letter-spacing: 1.5px;
          color: var(--accent-green);
          margin-bottom: 0.5rem;
      }

      .section-title-elegant {
          font-family: 'Inter', serif;
          font-weight: 600;
          font-size: clamp(1.8rem, 4vw, 2.5rem);
          color: var(--dark-text);
          margin: 0 0 4rem 0;
      }

     

      /* --- PRICING TABLE SECTION --- */
      .pricing-section {
          max-width: 1200px;
          margin: 0 auto;
          text-align: center;
      }

      .section-title {
          font-size: clamp(1.8rem, 4vw, 2.2rem);
          font-weight: 800;
          margin-bottom: 2rem;
      }

      .table-wrapper {
          background-color: var(--bg-color);
          border-radius: 8px;
          overflow-x: auto;
          /* Makes table scrollable on small screens */
          padding: 1rem;
      }

      .pricing-table {
          width: 100%;
          min-width: 600px;
          border-collapse: collapse;
          text-align: left;
      }

      .pricing-table th,
      .pricing-table td {
          padding: 1.25rem 1rem;
          border-bottom: 1px solid var(--border-color);
          vertical-align: middle;
      }

      .pricing-table thead th {
          font-weight: 700;
          font-size: 1.3rem;
      }

      .pricing-table thead th:not(:first-child) {
          text-align: center;
      }

      .pricing-table tbody th {
          font-weight: 400;
      }

      .feature-cell {
          display: flex;
          align-items: center;
          gap: 0.75rem;
      }

      /* UPDATED: Style Font Awesome icons instead of SVG */
      .feature-cell i {
          font-size: 16px;
          width: 18px;
          /* Give it a fixed width for alignment */
          text-align: center;
          flex-shrink: 0;
      }

      .pricing-table tbody td {
          text-align: center;
          font-size: 0.9rem;
          color: var(--text-light-grey);
      }

      /* Helper classes for text colors */
      .text-gold {
          color: var(--accent-gold);
          font-weight: 700;
      }

      .text-green {
          color: var(--accent-green);
          font-weight: 700;
      }

      /* UPDATED: Style Font Awesome checkmark icons */
      td.check-gold i {
          color: var(--accent-gold);
      }

      td.check-green i {
          color: var(--accent-green);
      }

      td.check-grey i {
          color: var(--text-light-grey);
      }


      /* --- PRICING TOGGLE SWITCH --- */
      .pricing-toggle-container {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 1rem;
          margin-bottom: 3rem;
      }

      .toggle-label {
          font-size: 1rem;
          font-weight: 700;
          color: var(--text-light);
          cursor: pointer;
          transition: color 0.2s ease;
      }

      .toggle-label.active {
          color: var(--text-dark);
      }

      .toggle-switch {
          position: relative;
          display: inline-block;
          width: 50px;
          height: 26px;
      }

      .toggle-switch input {
          opacity: 0;
          width: 0;
          height: 0;
      }

      .switch-slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: var(--pro-text);
          border-radius: 26px;
          transition: 0.4s;
      }

      .switch-slider:before {
          position: absolute;
          content: "";
          height: 20px;
          width: 20px;
          left: 3px;
          bottom: 3px;
          background-color: white;
          border-radius: 50%;
          transition: 0.4s;
      }

      input:checked+.switch-slider:before {
          transform: translateX(24px);
      }

      /* --- PRICING CARDS CONTAINER --- */
      .pricing-cards-container {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;
          max-width: 1100px;
          margin: 0 auto;
      }

      /* --- STYLES FOR CARDS (UNCHANGED) --- */
      .pricing-card {
          border: 1px solid var(--border-color);
          border-radius: 12px;
          padding: 2rem;
          display: flex;
          flex-direction: column;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .card-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 1rem;
      }

      .card-header h3 {
          font-size: 1.25rem;
          font-weight: 700;
          margin: 0;
      }

      .card-header .icon {
          font-size: 1.5rem;
      }

      .card-price {
          margin-bottom: 1rem;
      }

      .price-amount {
          font-size: 2rem;
          font-weight: 800;
          margin: 0;
      }

      .price-billing {
          font-size: 0.8rem;
          color: var(--text-light);
          margin: 0.25rem 0 0 0;
      }

      .main-feature {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin-bottom: 1.5rem;
          font-weight: 700;
      }

      .card-cta {
          display: block;
          width: 100%;
          padding: 0.85rem 1rem;
          border: none;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 700;
          text-align: center;
          text-decoration: none;
          cursor: pointer;
      }

      .card-note {
          font-size: 0.75rem;
          color: var(--text-light);
          text-align: center;
          margin: 0.5rem 0 1.5rem 0;
      }

      .feature-list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 0.9rem;
          font-size: 0.9rem;
      }

      .feature-list li {
          display: flex;
          align-items: center;
          gap: 0.75rem;
      }

      .feature-list .icon {
          width: 16px;
          text-align: center;
      }

      .feature-list-intro {
          font-weight: 700 !important;
          margin-bottom: 0.5rem;
      }

      .card-starter {
          background-color: var(--starter-bg);
          border-color: var(--starter-bg);
          color: var(--starter-text);
      }

      .card-starter .price-amount,
      .card-starter .card-header h3 {
          color: var(--text-dark);
      }

      .card-starter .card-cta {
          background-color: var(--starter-text);
          color: #fff;
      }

      .card-pro {
          background-color: var(--pro-bg);
          border-color: var(--pro-bg);
          color: var(--pro-text);
          transform: scale(1.05);
          box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
      }

      .card-pro .price-amount,
      .card-pro .card-header h3 {
          color: var(--text-dark);
      }

      .card-pro .card-cta {
          background-color: var(--pro-text);
          color: #fff;
      }

      .card-pro .feature-list-intro {
          color: var(--text-dark);
      }

      .card-enterprise {
          background-color: var(--enterprise-bg);
          border-color: var(--border-color);
          color: var(--enterprise-text);
      }

      .card-enterprise .price-amount,
      .card-enterprise .card-header h3 {
          color: var(--text-dark);
      }

      .card-enterprise .card-cta {
          background-color: var(--enterprise-text);
          color: #fff;
      }

      .card-enterprise .feature-list-intro {
          color: var(--text-dark);
      }

      @media (max-width: 960px) {
          .card-pro {
              transform: scale(1);
          }
      }


      .badges-container {
          display: flex;
          flex-wrap: wrap;
          /* Allows badges to stack on small screens */
          justify-content: center;
          gap: 1rem;
          /* Space between the badges */
      }

      .partner-badge {
          display: inline-flex;
          align-items: center;
          gap: 0.6rem;
          /* Space between icon and text */

          background-color: #FFFFFF;
          border: 1px solid #EAEAEA;
          border-radius: 50px;
          /* This creates the pill shape */
          padding: 8px 16px;
          /* Vertical and horizontal padding */

          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          /* Soft, subtle shadow */

          color: #4A4A4A;
          /* Text color */
          font-size: 0.9rem;
          font-weight: 600;
          text-decoration: none;
          /* Removes underline if used as a link */

          transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .partner-badge:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }

      .partner-badge i {
          font-size: 1.2rem;
          /* Makes the icon slightly larger than the text */
      }

      /* Official Brand Colors */
      .fa-whatsapp {
          color: #25D366;
      }

      /* The Meta logo is often a gradient, but we'll use their solid blue.
           The infinity icon is a good representation. */
      .fa-infinity {
          color: #0085FF;
      }

      .boxshadow {
          box-shadow: 4px 4px 0px #000;
          border: 1px solid #000;
          transition: all 0.15s ease-out;
      }

      .boxshadow:hover {
          box-shadow: none;
          transform: translate(4px, 4px);
      }

      
        /* --- 2. SECTION & TITLE STYLES --- */
        .get-started-section {
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-title-wrapper {
            text-align: center;
            margin-bottom: 1rem;
        }

        .section-subtitle {
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--accent-green);
            margin-bottom: 0.5rem;
        }

        .section-title {
            font-family: 'Lora', serif;
            font-weight: 600;
            font-size: clamp(2rem, 5vw, 3rem);
            color: var(--dark-text);
            margin: 0;
        }
        
        /* --- 3. HORIZONTAL STEPS CONTAINER --- */
        .horizontal-steps-container {
            position: relative;
            padding: 2rem 0;
            margin-bottom: 7rem;
        }

        /* The horizontal dashed line running behind the cards */
        .horizontal-steps-container::before {
            content: '';
            position: absolute;
            top: 70px; /* Aligns with the vertical center of the indicators */
            left: 10%;
            width: 80%;
            height: 3px;
            background-image: linear-gradient(to right, #E0E0E0 50%, transparent 50%);
            background-size: 20px 3px;
            z-index: -1;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        /* --- 4. STEP CARD STYLING --- */
        .step-card {
            background-color: #fff;
            border-radius: 12px;
            padding: 2rem 1.5rem;
            text-align: center;
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            transition: transform 0.3s ease, box-shadow 0.3s ease;

            /* Animation properties */
            opacity: 0;
            transform: translateY(40px);
        }

        .step-card.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Stagger the animation for each card */
        .step-card:nth-child(1) { transition-delay: 0s; }
        .step-card:nth-child(2) { transition-delay: 0.1s; }
        .step-card:nth-child(3) { transition-delay: 0.2s; }
        .step-card:nth-child(4) { transition-delay: 0.3s; }

        .step-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 30px rgba(46, 133, 110, 0.1);
        }

        .step-indicator {
            width: 50px;
            height: 50px;
            background-color: var(--light-green-bg);
            color: var(--accent-green);
            border-radius: 50%;
            display: grid;
            place-items: center;
            margin: 0 auto 1.5rem auto;
            font-size: 1.25rem;
            font-weight: 800;
            border: 1px solid var(--border-color);
        }

        .step-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--dark-text);
            margin: 0 0 0.5rem 0;
        }

        .step-description {
            font-size: 0.9rem;
            line-height: 1.6;
            margin: 0;
        }

        /* --- 5. RESPONSIVE FOR TABLET & MOBILE --- */
        @media (max-width: 992px) {
            .steps-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
            }
            .horizontal-steps-container::before {
                display: none; /* Hide horizontal line when it wraps */
            }
        }

        @media (max-width: 600px) {
            .steps-grid {
                grid-template-columns: 1fr;
            }
        }

           /* --- 3. FOOTER STYLES --- */

        /* Component 1: Scrolling Marquee */
        .footer-marquee {
            background-color: #26fe39; /* Electric Yellow */
            border-top: 2px solid #000;
            border-bottom: 2px solid #000;
            padding: 1rem 0;
            white-space: nowrap;
            overflow: hidden;
            display: none;
        }

        .marquee-content {
            display: inline-block;
            font-size: 1.5rem;
            font-weight: 900;
            text-transform: uppercase;
            animation: marquee 20s linear infinite;
        }

        .marquee-content span {
            padding: 0 1.5rem;
        }

        @keyframes marquee {
            from { transform: translateX(0%); }
            to { transform: translateX(-50%); }
        }

        /* Component 2: Main Footer Container */
        .footer-main {
            background-color: #000000;
            border: 2px solid #000;
            /* margin: 2rem; */
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        /* The CTA Row inside the footer */
        .footer-cta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap; /* Allows stacking on small screens */
            gap: 1.5rem;
        }

        .footer-cta h2 {
            font-size: clamp(1.5rem, 4vw, 2.5rem); /* Responsive font size */
            font-weight: 900;
            margin: 0;
            color: #fff;
        }

        /* The Grid for all the navigation links */
        .footer-links-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 2rem;
            border-top: 2px solid #ffffff;
            padding-top: 2rem;
        }

        .footer-links-grid h4 {
            font-family: 'IBM Plex Mono', monospace; /* Technical/index font */
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 0;
            margin-bottom: 1rem;
            color: #fff;

        }

        .footer-links-grid ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .footer-links-grid li a {
            text-decoration: none;
            color: #ffffff;
            transition: transform 0.2s ease;
            display: inline-block;
        }
        
        /* Interactive hover effect for links */
        .footer-links-grid li a:hover {
            transform: translateX(8px);
        }

        .footer-links-grid li a:hover::before {
            content: '→ ';
            font-weight: bold;
        }

        /* The Bottom Bar for copyright and socials */
        .footer-bottom-bar {
            border-top: 2px solid #ffffff;
            padding-top: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-bottom-bar p {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.9rem;
            margin: 0;
            color: #fff;

        }

        .social-icons-brutal {
            display: flex;
            gap: 0.5rem;
        }

        .social-icon-box {
            width: 36px;
            height: 36px;
            border: 2px solid #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 900;
            text-decoration: none;
            color: #ffffff;
            transition: background-color 0.2s ease;
        }

        .social-icon-box:hover {
            background-color: #2FD367;
        }