/* RESET & BASE STYLES */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        text-transform: none;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        color: #111111;
        background-color: #f8fefa;
        line-height: 1.5;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    ul {
        list-style: none;
    }

    .container {
        width: min(100%, 1440px);
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 24px;
    }

    /* Utility: show only on small screens when needed */
    .mobile-only {
        display: none;
    }

    .text-green {
        color: #087a1d;
    }

    .text-blue {
        color: #2563eb;
    }

    .text-sales {
        color: #087a1d;
    }

    .bg-light {
        background-color: #f8fafc;
    }

    /* BUTTONS */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid transparent;
    }

    .btn:hover {
        transform: scale(1.05);
    }

    .btn-green {
        background-color: #087a1d;
        color: #ffffff;
    }

    .btn-green:hover {
        background-color: #065f46;
    }

    .btn-outline-green {
        border-color: #087a1d;
        color: #087a1d;
        background: transparent;
    }

    .btn-outline-green:hover {
        background-color: #d1fae5;
    }

    .btn-whatsapp {
        background-color: #29a71a;
        color: #ffffff;
    }

    .btn-whatsapp:hover {
        background-color: #29a71a;
    }

    .btn-img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: inline-block;
        vertical-align: middle;
    }

    .btn-demo-green {
        border-color: #087a1d;
        color: #087a1d;
        background: transparent;
    }

    .btn-demo-green:hover {
        background-color: #d1fae5;
        color: #087a1d;
    }

    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .btn-outline-dark {
        border-color: #e2e8f0;
        color: #334155;
        background: #f8fefa;
    }

    .btn-outline-dark:hover {
        background-color: #f1f5f9;
    }

    /* NAVBAR */
    .navbar {
        position: sticky;
        top: 0;
        background: #f8fefa;
        z-index: 1000;
        border-bottom: 1px solid #f1f5f9;
        /* padding: 15px 0; */
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8fefa;
        position: relative;
    }

    .logo {
        font-weight: 800;
        font-size: 20px;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* Header logo styling */
    .header-logo-img,
    .header-logo img {
        width: 136px;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* Footer logo styling */
    .footer-logo-img,
    .footer-logo img {
        width: 242px;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .logo-text {
        display: none;
    }

    .logo-accent {
        color: #087a1d;
    }

    .nav-links {
        display: flex;
        gap: 60px;
        align-items: center;
    }

    .nav-links a {
        font-size: 16px;
        font-weight: 700;
        color: #111111;
        display: flex;
        align-items: center;
    }

    .nav-links a:hover {
        color: #087a1d;
        margin: 0 auto;
    }

    .nav-actions {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    /* Mobile nav toggle (hamburger) */
    .nav-toggle {
        display: none;
        background: transparent;
        border: none;
        width: 40px;
        height: 40px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        padding: 6px;
    }

    .nav-toggle .hamburger,
    .nav-toggle .hamburger::before,
    .nav-toggle .hamburger::after {
        display: block;
        width: 22px;
        height: 2px;
        background: #0f172a;
        border-radius: 2px;
        position: relative;
    }

    .nav-toggle .hamburger::before,
    .nav-toggle .hamburger::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .nav-toggle .hamburger::before {
        top: -7px;
    }

    .nav-toggle .hamburger::after {
        top: 7px;
    }

    /* when nav open, rotate hamburger into X */
    .nav-container.open .nav-toggle .hamburger {
        background: transparent;
    }

    .nav-container.open .nav-toggle .hamburger::before {
        top: 0;
        transform: rotate(45deg);
    }

    .nav-container.open .nav-toggle .hamburger::after {
        top: 0;
        transform: rotate(-45deg);
    }

    /* HERO SECTION */
    .hero-banner {
        position: relative;
        width: 100%;
        min-height: 600px;
        display: flex;
        align-items: flex-start;
        padding-top: 60px;
    }

    .hero-banner .banner-container {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        max-width: 1420px;
        width: 100%;
        height: 90%;
        z-index: 0;
        background-position: center right;
    }

    .mobile-banner-image {
        display: none;
    }

    .hero-overlay {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: 30px 60px;
    }

    .hero-content {
        max-width: 600px;
    }

    /* ==========================================
   DROPDOWN & SUBMENU STYLES
   ========================================== */

    /* Dropdown Container */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-toggle {
        font-size: 14px;
        font-weight: 500;
        color: #475569;
        cursor: pointer;
        padding: 10px 0;
        display: inline-block;
        text-align: center;
    }

    .dropdown-toggle:hover {
        color: #087a1d;
    }

    /* Main Dropdown Menu */
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #ffffff;
        min-width: 200px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 8px 0;
        z-index: 1010;
    }

    /* Open dropdowns on hover for desktop */
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    /* Show dropdown when .open is present (toggled by JS) or when focused for accessibility */
    .nav-links .dropdown.open>.dropdown-menu,
    .dropdown:focus-within .dropdown-menu,
    .dropdown-toggle:focus+.dropdown-menu {
        display: block;
    }

    /* Caret image sizing in header dropdown toggles */
    .dropdown-caret {
        width: 14px;
        height: 14px;
        margin-left: 4px;
        display: inline-block;
        vertical-align: middle;
        object-fit: contain;
    }

    @media (max-width: 900px) {
        .dropdown-caret {
            width: 12px;
            height: 12px;
            margin-left: 6px;
        }

        .nav-links a:hover {
            margin: 0 0;
        }

        /* Disable hover dropdowns on mobile; use .open class for tap-to-toggle instead */
        .dropdown:hover .dropdown-menu {
            display: none !important;
        }

    }

    /* Dropdown Links */
    .dropdown-menu a {
        display: block;
        padding: 10px 16px;
        font-size: 13px;
        color: #334155;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .dropdown-menu a:hover {
        background-color: #f0fdf4;
        color: #087a1d;
    }

    /* Submenu Container */
    .dropdown-submenu {
        position: relative;
    }

    .submenu-toggle {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    /* Submenu Flyout Menu */
    .submenu-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        background-color: #ffffff;
        min-width: 200px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 8px 0;
        z-index: 1020;
    }

    .dropdown-submenu:hover .submenu-menu {
        display: block;
    }

    .hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
    }

    .hero-content h1 {
        font-size: 44px;
        line-height: 1.15;
        font-weight: 700;
        margin-bottom: 16px;
    }

    .hero-content p {
        font-size: 16px;
        color: #111111;
        font-weight: 600;
        margin: 31px 250px 31px 0;
    }

    .hero-btns {
        display: flex;
        gap: 15px;
        margin-bottom: 30px;
    }

    .trust-badges {
        display: flex;
        gap: 40px;
        align-items: center;
        margin-top: 10px;
    }

    .badge-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: #475569;
        font-weight: 600;
        position: relative;
    }

    .badge-item+.badge-item::before {
        content: "";
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 35px;
        background: #dfe7ee;
    }

    .badge-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #f8fafc;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
        overflow: hidden;
        flex-shrink: 0;
    }

    .meta-icon {
        width: 28px;
        height: 28px;
        background: #edf6ff;
    }

    .meta-icon img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
    }

    .people-icon {
        width: 30px;
        height: 30px;
        background: #ecfdf5;
    }

    .people-icon img {
        width: 30px;
        height: 36px;
        object-fit: contain;
        display: block;
    }

    .badge-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .badge-text strong {
        font-size: 16px;
        font-weight: 700;
        color: #087a1d;
    }

    .badge-text span {
        font-size: 12px;
        color: #111111;
        font-weight: 600;
        margin: 4px 0 0 0;
    }

    .green-text {
        color: #28a719;
    }

    .badge-strong {
        font-size: 13px;
        line-height: 1.2;
    }

    .badge-small {
        font-size: 12px;
        line-height: 1.3;
        color: #475569;
    }

    /* MOCK PHONE FRAME */
    .phone-frame {
        width: 320px;
        margin: 0 auto;
        border: 8px solid #0f172a;
        border-radius: 36px;
        background: #f8fafc;
        overflow: hidden;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }

    .phone-header {
        background: #075e54;
        color: white;
        padding: 12px;
        font-size: 12px;
        font-weight: bold;
    }

    .chat-bubble {
        background: white;
        padding: 10px;
        margin: 10px;
        border-radius: 8px;
        font-size: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* SECTION HEADERS */
    .section-title {
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        margin: 40px 0;
    }

    /* BANNER SECTION */
    .banner-container {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* CHALLENGE VS SOLUTION */
    .comparison-section {
        padding: 0px 0;
        background: #f8fefa;
        margin: auto;
        max-width: 1620px;
    }

    .comparison-wrapper {
        display: flex;
        align-items: stretch;
        gap: 18px;
        margin: 0 auto;
        padding: 0 10px;
    }

    .labels-column {
        width: 160px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* gap: 18px; */
    }

    .label-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 18px 12px;
        min-height: 120px;
        border: 2px solid;
    }

    .challenge-label {
        font-size: 15px;
        color: #ef4444;
        border-color: #fff5f5;
        background-color: #fff5f5;
        gap: 4px;
    }

    .solution-label {
        font-size: 15px;
        color: #087a1d;
        border-color: #f0fdf4;
        background-color: #f0fdf4;
        gap: 4px;
    }

    .arrow-icon {
        font-size: 18px;
        line-height: 1;
    }

    .badge-arrow {
        width: 13px;
        height: 13px;
        object-fit: contain;
        display: block;
        margin-top: 0px;
    }

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(220px, 1fr));
        gap: 10px;
        flex: 1;
    }

    .vertical-card {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .card-combined {
        position: relative;
        /* for absolute-positioned arrow */
        display: flex;
        flex-direction: column;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }

    /* Arrow between challenge & solution */
    .card-arrow {
        position: absolute;
        left: 44%;
        /* align near the left icon */
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        z-index: 20;
        pointer-events: none;
        /* decorative */
    }

    /* Keep the downward arrow visible on mobile so the challenge/solution comparison stays clear. */
    .card-row {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 24px 22px;
        min-height: 120px;
        background: #f8fefa;
    }

    .challenge-row {
        /* background: #fff5f5; */
        /* remove full-width border; use centered decorative divider instead */
        border-bottom: none;
    }

    /* Decorative centered divider between challenge and solution inside the card */
    .card-combined::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50%;
        /* centered vertically between the two rows */
        width: 60%;
        height: 1px;
        background: #e2e8f0;
        z-index: 8;
        pointer-events: none;
    }

    /* Make sure the rows have a transparent background so the divider shows clearly */
    .card-row {
        background: transparent;
    }

    @media (max-width: 700px) {
        .card-combined::after {
            width: 40%;
        }
    }


    .card-row strong {
        display: block;
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 6px;
    }

    .solution-row strong {
        color: #087a1d;
        font-size: 18px;
    }

    .card-row p {
        font-size: 12px;
        color: #000000;
        line-height: 1.5;
    }

    .comparison-section .card-row .icon-box {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .comparison-section .card-row .icon-box img {
        width: 58px;
        height: 58px;
        object-fit: contain;
        display: block;
        padding: 0;
    }

    .arrow-divider {
        text-align: center;
        font-size: 20px;
        color: #087a1d;
        line-height: 1;
        padding: 8px 0;
        background: #ffffff;
        border-bottom: 1px solid #f8d7d7;
    }

    .comp-grid {
        display: grid;
        grid-template-columns: 120px 1fr 1fr 1fr;
        gap: 15px;
        align-items: center;
    }

    .comp-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        padding: 20px;
        border-radius: 10px;
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .comp-card.challenge {
        background: #fff5f5;
        border-color: #fed7d7;
    }

    .comp-card.solution {
        background: #f0fdf4;
        border-color: #d1fae5;
    }

    .icon-box {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        flex-shrink: 0;
    }

    /* Images inside icon boxes should fit the container */
    .icon-box img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        display: block;
        padding: 2px;
    }

    .bg-red {
        background-color: #db9696;
    }

    .bg-orange {
        background-color: #e9b793;
    }

    .bg-purple {
        background-color: #d1b2ee;
    }

    .bg-green {
        background-color: #c6f0c2;
    }

    .provider-icon-orange {
        background-color: #e9b793;
    }

    /* FEATURES GRID */
    .features-section {
        padding: 10px 6px;
    }

    .features-grid {
        background: #f8fefa;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .feature-card {
        background: #f8fefa;
        border: 1px solid #e2e8f0;
        padding: 30px 24px;
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        gap: 20px;
        align-items: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
        transform-origin: center center;
        will-change: transform;
        background-clip: padding-box;
    }

    .feature-card:hover,
    .feature-card:focus-within,
    .feature-card:active {
        transform: scale(1.03);
        border-color: #087a1d;
        box-shadow: 0 10px 30px rgba(8, 122, 29, 0.12);
        z-index: 5;
    }

    .features-section .feature-card .icon-box {
        width: 60px;
        height: 60px;
        min-width: 60px;
        border-radius: 18px;
        background: transparent;
        color: #087a1d;
        flex-shrink: 0;
        line-height: 1;
        transition: box-shadow 180ms ease;
        transform-origin: center center;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
    }

    .features-section .feature-card .icon-box img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        display: block;
        padding: 0;
    }

    /* Make the section title focusable and indicate it is interactive */
    .features-section .section-title {
        cursor: pointer;
    }

    /* Removed icon-only scaling — full card now scales on hover/focus/active */

    /* Removed global scaling triggered by the section title per request */

    .feature-card h3 {
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 8px;
        margin-top: 0;
    }

    .feature-card p {
        font-size: 13px;
        color: #111111;
        line-height: 1.6;
        margin: 0;
    }

    /* STEPS SECTION */

    /* Step icons: replace emoji with image from assets/icons/your_data.png */
    .step-icon {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        /* leave background to .step-circle */
        margin: 0 auto;
        flex-shrink: 0;
    }

    .step-icon-img {
        width: 62px;
        height: 62px;
        object-fit: contain;
        display: block;
    }



    /* Testimonials: place arrows at both ends and ensure cards fit */
    .testimonials-row {
        position: relative;
        /* needed for absolute-positioned arrows */
        display: block;
        /* stack children; viewport will handle layout */
    }

    /* Arrow buttons positioned outside the flow at the row edges */
    .testimonial-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #ffffff;
        border: 1px solid rgba(2, 6, 23, 0.08);
        width: 56px;
        height: 56px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(2, 6, 23, 0.08);
        z-index: 30;
    }

    .testimonial-arrow.left {
        left: 8px;
    }

    .testimonial-arrow.right {
        right: 8px;
    }

    /* image inside arrow buttons */
    .testimonial-arrow-img {
        width: 18px;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .testimonial-arrow:focus-visible {
        outline: 3px solid rgba(8, 122, 29, 0.15);
        outline-offset: 2px;
    }

    /* Give the viewport horizontal padding so first/last cards don't hide under arrows */
    .testimonials-row .testimonials-viewport {
        padding: 0 76px;
        /* space for arrows + breathing room */
        box-sizing: border-box;
        overflow: hidden;
    }

    .testimonials-grid {
        display: flex;
        gap: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        align-items: stretch;
        /* allow horizontal scroll inside viewport (the track itself should be scrollable) */
        overflow-x: auto;
        scroll-behavior: smooth;
    }

    /* Slightly reduce card width so 3 fit comfortably with arrows visible */
    .testimonials-grid .testimonial-card {
        flex: 0 0 calc(33.333% - 32px);
        box-sizing: border-box;
        min-height: 220px;
        /* increase height as requested */
        padding: 18px;
    }

    @media (max-width: 900px) {
        .testimonial-arrow {
            width: 48px;
            height: 48px;
            font-size: 18px;
        }

        .testimonials-row .testimonials-viewport {
            padding: 0 56px;
        }

        .testimonials-grid .testimonial-card {
            flex: 0 0 calc(100% - 32px);
            min-height: 260px;
        }
    }

    /* end testimonials adjustments */
    .testimonials-row {
        /* ensure arrows don't push the track off-screen */
        padding-left: 6px;
        padding-right: 6px;
    }

    .testimonials-row .testimonials-viewport {
        /* keep track slightly narrower so arrows have visual breathing room */
        padding-left: 56px;
        padding-right: 56px;
        overflow: hidden;
    }

    .testimonials-grid {
        display: flex;
        gap: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        align-items: stretch;
    }

    .testimonials-grid .testimonial-card {
        /* slightly reduce card width so three fit with arrows visible */
        flex: 0 0 calc(33.333% - 20px);
        box-sizing: border-box;
    }

    @media (max-width: 900px) {
        .testimonials-grid .testimonial-card {
            /* single card visible on mobile but leave padding for arrows */
            flex: 0 0 calc(100% - 20px);
            min-height: 260px;
        }

        /* Hide the arrow buttons on mobile to keep the UI clean */
        .testimonial-arrow {
            display: none !important;
        }

        /* Reduce viewport side padding when arrows are hidden */
        .testimonials-row .testimonials-viewport {
            padding: 0 16px;
        }


    }

    /* keep existing STEPS SECTION comment and styles */
    .steps-section {
        text-align: center;
        padding: 8px 0 40px 0;
        max-width: 1390px;
        margin: 0 auto;
        background: #eef9ee;
    }

    .steps-grid {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 60px;
        position: relative;
    }

    .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        min-width: 160px;
    }

    .step-circle {
        position: relative;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        box-shadow: 0 4px 12px rgb(68 76 70 / 40%);
        z-index: 5;
        /* keep circles above connector line */
    }

    .step-icon {
        font-size: 34px;
        line-height: 1;
        z-index: 1;
    }

    .step-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 22px;
        height: 22px;
        background: #087a1d;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(8, 122, 29, 0.25);
        /* border: 3px solid white; */
    }

    .step-item h3 {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

    .step-item p {
        font-size: 13px;
        color: #64748b;
        margin-top: -10px;
    }

    .step-connector {
        position: relative;
        width: 140px;
        flex: 0 0 140px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .step-connector::before {
        content: "";
        position: absolute;
        left: -50px;
        right: -50px;
        height: 2px;
        border-top: 2px dashed #9aa7b3;
        top: 43px;
        transform: translateY(-50%);
        z-index: 1;
    }

    .connector-arrow {
        position: relative;
        width: 22px;
        height: 12px;
        z-index: 3;
        display: block;
        object-fit: contain;
    }

    /* small image at the end of the connector line */
    .step-connector .connector-end {
        position: absolute;
        right: -64px;
        /* align to the end of the dashed line */
        top: 35px;
        /* sit slightly above the dotted line */
        width: 13px;
        height: auto;
        z-index: 5;
        pointer-events: none;
    }

    /* Add arrow head at the end of the last connector */
    .steps-grid .step-connector:last-of-type::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background-image: url('assets/icons/arrow_right.png');
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 4;
        pointer-events: none;
    }

    @media (max-width: 700px) {
        .steps-grid {
            flex-direction: column;
            gap: 20px;
        }

        .step-circle {
            width: 56px;
            height: 56px;
        }

        .step-icon-img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            display: block;

        }

        .step-icon {
            font-size: 26px;
        }

        .step-badge {
            width: 18px;
            height: 18px;
            font-size: 11px;
            top: -3px;
            right: -3px;
        }

        .step-connector {
            display: none;
        }
    }

    /* INDUSTRY TABS */
    .industry-section {
        padding: 16px 0;
    }

    .tab-buttons {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 0 24px;
    }

    .tab-btn {
        padding: 8px 16px;
        border-radius: 6px;
        border: 1px solid #f8fefa;
        background: #f8fefa;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .tab-btn:hover,
    .tab-btn:focus-visible {
        transform: scale(1.05);
        border-color: #087a1d;
        outline: none;
    }

    .tab-btn.active {
        background: #f8fefa;
        color: #087a1d;
        border-color: #087a1d;
    }

    .industry-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
        background: #f8fefa;
        padding: 10px;
        border-radius: 8px;

    }

    .industry-copy h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .industry-heading {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .industry-copy p {
        color: #64748b;
        font-size: 14px;
        margin-bottom: 18px;
        max-width: 460px;
    }

    .industry-copy ul {
        display: grid;
        gap: 9px;
        margin-bottom: 22px;
        font-size: 13px;
        font-weight: 500;
    }

    .industry-copy li::before {
        content: '✓';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        border-radius: 50%;
        background: #087a1d;
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
    }

    .industry-visual {
        min-height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .industry-visual img {
        display: block;
        width: 105%;
        max-width: 550px;
        height: auto;
    }

    /* PROVIDER / INTEGRATION BADGES */
    .provider-section {
        max-width: 1390px;
        margin: auto;
        padding: 0;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        background-color: #f8fefa;
    }

    .provider-section .container {
        padding: 0;
    }

    .provider-grid {
        display: grid;
        grid-template-columns: 1.7fr repeat(4, 1fr);
        min-height: 145px;
        text-align: center;
    }

    .provider-title,
    .provider-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .provider-title {
        align-items: flex-start;
        text-align: left;
        padding-left: 28px;
    }

    .provider-title h3 {
        font-size: 24px;
        line-height: 1.2;
    }

    .provider-item {
        border-left: 1px solid #e2e8f0;
    }

    .provider-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        color: #ffffff;
        font-size: 21px;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 10px;
        overflow: hidden;
        background-color: transparent;
        /* image will provide visual */
    }

    .provider-icon-img {
        width: 40px;
        height: 40px;
        display: block;
        object-fit: contain;
    }

    .provider-icon-green {
        background: #087a1d;
    }

    .provider-icon-blue {
        background: #1d70da;
    }

    .provider-item h4 {
        font-size: 14px;
        margin: 0 0 3px;
    }

    .provider-item p {
        font-size: 12px;
        color: #111111;
        max-width: 130px;
        line-height: 1.35;
    }

    /* TESTIMONIALS */
    /* .testimonials-section {
        padding: 60px 0;
    } */

    .testimonials-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .testimonials-heading .section-title {
        text-align: left;
    }

    .testimonial-controls {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }

    .testimonial-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #f8fefa;
        border-radius: 50%;
        background: #f8fefa;
        color: #087a1d;
        cursor: pointer;
        font-size: 20px;
    }

    /* .testimonial-arrow:hover,
    .testimonial-arrow:focus-visible {
        transform: scale(1.05);
        background: #ecfdf5;
        outline: none;
    } */

    .testimonials-viewport {
        overflow: hidden;
    }

    .testimonials-grid {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .testimonials-grid::-webkit-scrollbar {
        display: none;
    }

    .testimonial-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* push user-info to bottom */
        flex: 0 0 calc((100% - 40px) / 3);
        min-width: 0;
        scroll-snap-align: start;
        background: white;
        border: 1px solid #e2e8f0;
        padding: 28px 24px 20px 24px;
        /* extra top padding for quote */
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        min-height: 220px;
        /* ensure consistent height */
    }

    .testimonial-card p {
        font-size: 16px;
        font-weight: 700;
        color: #475569;
        margin: 0 0 12px 0;
        position: relative;
        padding-top: 28px;
        /* space for quote icon */
    }

    /* Quote icon placed above the testimonial text */
    .testimonial-card p::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 0;
        width: 20px;
        height: 20px;
        background-image: url('assets/icons/open.png');
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.95;
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        /* small gap before user info */
        /* ensure it stays at the bottom when content is short */
        margin-bottom: 0;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #cbd5e1;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .user-details h5 {
        font-size: 15px;
    }

    .user-details span {
        font-size: 12px;
        color: #64748b;
    }

    /* Social icons in footer */

    /* Container layout */
    .footer-socials {
        display: flex;
        gap: 10px;
        padding: 2px;
        align-items: center;
    }

    /* Base styles for all 4 social icons */
    .footer-socials .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        /* Circular shape */
        color: #ffffff;
        /* White icon color */
        border: 2px solid #ffffff;
        /* White inner circular border */
        text-decoration: none;
        font-size: 22px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    /* Individual Brand Colors & Outer Matching Rings */
    .footer-socials .social-link[aria-label="Facebook"] {
        background-color: #0f172a;
        box-shadow: 0 0 0 2px #0f172a;
    }

    .footer-socials .social-link[aria-label="LinkedIn"] {
        background-color: #0f172a;
        box-shadow: 0 0 0 2px #0f172a;
    }

    .footer-socials .social-link[aria-label="Twitter"] {
        background-color: #0f172a;
        box-shadow: 0 0 0 2px #0f172a;
    }

    .footer-socials .social-link[aria-label="Instagram"] {
        background-color: #0f172a;
        box-shadow: 0 0 0 2px #0f172a;
    }

    .footer-socials .social-link:hover {
        transform: translateY(-2px);
        opacity: 0.9;
    }

    /* Styling for the large left WhatsApp icon */
    .cta-wa-icon {
        font-size: 87px;
        color: #ffff;
        background-color: #29a71a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Styling for the small icon inside the button */
    .btn-wa-icon {
        font-size: 18px;
        /* Size inside button */
        margin-right: 8px;
        /* Space between icon and text */
    }

    @media (max-width: 700px) {
        .footer-grid {
            grid-template-columns: 1fr;
            /* stack columns */
            gap: 20px;
        }

        .footer-socials {
            justify-content: flex-start;
            gap: 14px;
        }
    }

    /* ==========================================
   CTA BANNER (MATCHING THE IMAGE DESIGN)
   ========================================== */
    .cta-banner {
        position: relative;
        background: linear-gradient(100deg, #027a48 0%, #064e3b 35%, #083344 70%, #031b4e 100%);
        border-radius: 16px;
        padding: 36px 44px;
        color: #ffffff;
        overflow: hidden;
        box-shadow: 0 10px 25px -5px rgba(2, 122, 72, 0.25);
        margin: 40px -10px;
    }

    /* Subtle dot pattern backgrounds (Left & Right accents) */
    .cta-banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 90px;
        height: 100%;
        background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
        background-size: 12px 12px;
        pointer-events: none;
    }

    .cta-banner::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 90px;
        height: 100%;
        background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
        background-size: 12px 12px;
        pointer-events: none;
    }

    .cta-banner-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
        gap: 40px;
    }

    /* Left Grouping */
    .cta-left-group {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    /* Large 3D WhatsApp Icon Container */
    .cta-wa-icon {
        width: 72px;
        height: 72px;
        flex-shrink: 0;
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
        transition: transform 0.3s ease;
    }

    .cta-wa-icon svg {
        width: 100%;
        height: 100%;
    }

    .cta-wa-icon:hover {
        transform: scale(1.05);
    }

    /* Typography */
    .cta-heading-block h2 {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.25;
        color: #ffffff;
        margin: 0;
        letter-spacing: -0.2px;
    }

    .cta-heading-block p {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.85);
        margin-top: 26px;
        font-weight: 400;
    }

    /* Buttons Container */
    .cta-buttons {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
    }

    /* Request Demo Button (Solid White) */
    .btn-cta-light {
        background-color: #ffffff;
        color: #059669;
        font-weight: 700;
        font-size: 14px;
        padding: 14px 28px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
        transition: all 0.2s ease;
        border: none;
        text-decoration: none;
    }

    .btn-cta-light:hover {
        background-color: #f8fafc;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .btn-arrow {
        font-size: 16px;
        transition: transform 0.2s ease;
    }

    .btn-cta-light:hover .btn-arrow {
        transform: translateX(3px);
    }

    /* Talk to Sales Button (Outlined with WhatsApp Icon) */
    .btn-cta-outline {
        border: 1.5px solid rgba(255, 255, 255, 0.35);
        background-color: rgba(255, 255, 255, 0.05);
        color: #ffffff;
        font-weight: 600;
        font-size: 14px;
        padding: 13px 26px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        backdrop-filter: blur(4px);
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .btn-cta-outline:hover {
        background-color: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.7);
        transform: translateY(-2px);
    }

    .btn-wa-icon {
        width: 18px;
        height: 18px;
        fill: #ffffff;
    }

    /* Responsive Styles for Mobile/Tablet */
    @media (max-width: 992px) {
        .cta-banner-content {
            flex-direction: column;
            text-align: center;
        }

        .cta-left-group {
            flex-direction: column;
            gap: 16px;
        }

        .cta-buttons {
            flex-direction: column;
            width: 100%;
        }

        .btn-cta-light,
        .btn-cta-outline {
            width: 100%;
            justify-content: center;
        }
    }

    /* FOOTER */
    .footer {
        background: #0f172a;
        color: #ffffff;
        padding: 60px 0 20px 0;
        font-size: 13px;
    }

    .footer-brand-link {
        color: #ffffff;
        margin-bottom: 10px;
        display: inline-block;
    }

    .footer-brand-copy {
        font-size: 12px;
        margin-top: -4px;
        max-width: 250px;
        margin-bottom: 36px;
        color: #ffffff;
        line-height: 1.6;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 2fr repeat(4, 1fr);
        gap: 40px;
        margin-bottom: 40px;
    }

    .footer-col h4 {
        color: white;
        margin-bottom: 15px;
        font-size: 14px;
    }

    .footer-col ul li {
        margin-bottom: 8px;
    }

    .footer-col ul li a:hover {
        color: white;
    }

    .footer-bottom {
        border-top: 1px solid #1e293b;
        padding-top: 20px;
        text-align: center;
        font-size: 12px;
    }

    /* ==========================================
    SCROLL ANIMATIONS
    ========================================== */

    @keyframes slideUpIn {
        from {
            opacity: 0;
            transform: translateY(60px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-on-scroll {
        opacity: 0;
        transform: translateY(60px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .animate-on-scroll.animated {
        animation: slideUpIn 0.8s ease-out forwards;
    }

    /* Stagger animation for multiple items */
    .feature-card.animate-on-scroll {
        animation: slideUpIn 0.8s ease-out forwards;
    }

    .feature-card.animate-on-scroll:nth-child(1) {
        animation-delay: 0.1s;
    }

    .feature-card.animate-on-scroll:nth-child(2) {
        animation-delay: 0.2s;
    }

    .feature-card.animate-on-scroll:nth-child(3) {
        animation-delay: 0.3s;
    }

    .feature-card.animate-on-scroll:nth-child(4) {
        animation-delay: 0.4s;
    }

    .feature-card.animate-on-scroll:nth-child(5) {
        animation-delay: 0.5s;
    }

    .feature-card.animate-on-scroll:nth-child(6) {
        animation-delay: 0.6s;
    }

    /* Stagger for step cards */
    .step-card.animate-on-scroll {
        animation: slideUpIn 0.8s ease-out forwards;
    }

    .step-card.animate-on-scroll:nth-child(1) {
        animation-delay: 0.1s;
    }

    .step-card.animate-on-scroll:nth-child(2) {
        animation-delay: 0.2s;
    }

    .step-card.animate-on-scroll:nth-child(3) {
        animation-delay: 0.3s;
    }

    /* Stagger for comparison cards */
    .comp-card.animate-on-scroll {
        animation: slideUpIn 0.8s ease-out forwards;
    }

    .comp-card.animate-on-scroll:nth-child(1) {
        animation-delay: 0.1s;
    }

    .comp-card.animate-on-scroll:nth-child(2) {
        animation-delay: 0.2s;
    }

    .comp-card.animate-on-scroll:nth-child(3) {
        animation-delay: 0.3s;
    }

    .comp-card.animate-on-scroll:nth-child(4) {
        animation-delay: 0.4s;
    }

    /* Stagger for testimonial cards */
    .testimonial-card.animate-on-scroll {
        animation: slideUpIn 0.8s ease-out forwards;
    }

    .testimonial-card.animate-on-scroll:nth-child(1) {
        animation-delay: 0.1s;
    }

    .testimonial-card.animate-on-scroll:nth-child(2) {
        animation-delay: 0.2s;
    }

    .testimonial-card.animate-on-scroll:nth-child(3) {
        animation-delay: 0.3s;
    }

    /* Testimonials layout and controls */
    .testimonials-section .testimonials-heading {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 0 24px 0;
    }

    .testimonials-section .testimonials-heading .section-title {
        margin: 0;
        text-align: center;
        font-size: 26px;
        font-weight: 700;
    }

    /* position controls to left and right over the same horizontal line as the heading */
    .testimonial-controls {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        pointer-events: none;
        /* allow buttons to individually enable pointer events */
    }

    .testimonial-controls .testimonial-arrow {
        pointer-events: auto;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        color: #087a1d;
        /* green arrow color */
        border: 2px solid rgba(8, 122, 29, 0.08);
        box-shadow: 0 2px 8px rgba(8, 122, 29, 0.06);
        font-size: 20px;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .testimonial-controls .testimonial-arrow:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(8, 122, 29, 0.12);
    }

    .testimonials-viewport {
        margin-top: 18px;
        overflow: hidden;
        /* we control scrolling on the inner track */
    }

    /* Use a horizontal scroll track so only 3 cards are visible at a time on desktop */
    .testimonials-grid {
        display: flex;
        gap: 18px;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        /* space for scrollbar if visible */
    }

    /* Each card takes one third of the viewport (three visible) */
    .testimonials-grid .testimonial-card {
        flex: 0 0 calc(33.3333% - 12px);
        scroll-snap-align: start;
        background: #f8fefa;
        border: 1px solid #e6eef4;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
    }

    .testimonial-card p {
        font-size: 15px;
        color: #0f172a;
        margin-bottom: 12px;
        margin-right: 22px;
    }

    .testimonial-card .user-info {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .testimonial-card .user-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
    }

    /* hide scrollbar on WebKit */
    .testimonials-grid::-webkit-scrollbar {
        height: 8px;
    }

    .testimonials-grid::-webkit-scrollbar-thumb {
        background: rgba(2, 6, 23, 0.08);
        border-radius: 8px;
    }

    /* Responsive: show 1 card on small screens and make it scrollable, center heading, keep arrows on sides */
    @media (max-width: 900px) {
        .testimonials-grid {
            gap: 12px;
        }

        .testimonials-grid .testimonial-card {
            flex: 0 0 100%;
        }

        .testimonial-controls {
            padding: 0 6px;
        }

        .testimonial-controls .testimonial-arrow {
            width: 40px;
            height: 40px;
            font-size: 18px;
        }

        .testimonials-section .testimonials-heading {
            padding-bottom: 8px;
        }
    }

    /* Stagger for provider items */
    .provider-item.animate-on-scroll {
        animation: slideUpIn 0.8s ease-out forwards;
    }

    .provider-item.animate-on-scroll:nth-child(1) {
        animation-delay: 0.1s;
    }

    .provider-item.animate-on-scroll:nth-child(2) {
        animation-delay: 0.2s;
    }

    .provider-item.animate-on-scroll:nth-child(3) {
        animation-delay: 0.3s;
    }

    .provider-item.animate-on-scroll:nth-child(4) {
        animation-delay: 0.4s;
    }

    @media (min-width: 500px) and (max-width: 900px) {
        .footer-grid {
            grid-template-columns: 1fr 1fr 1fr 1fr !important;
            gap: 15px !important;
        }


        .btn-cta-light,
        .btn-cta-outline {
            width: 60% !important;
        }

        .hero-btns .btn {
            width: 60% !important;
        }

        .hero-content p {
            margin-right: 212px !important;
        }
    }

    /* RESPONSIVE DESIGN */
    @media (max-width: 900px) {

        .hero-grid,
        .comp-grid,
        .features-grid,
        .steps-grid,
        .provider-grid,
        .testimonials-grid {
            grid-template-columns: 1fr;
            gap: 10px;

        }



        .industry-content {
            grid-template-columns: 1fr;
        }

        .footer-grid {
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .footer-grid>div:first-child {
            grid-column: 1 / -1;
        }

        .footer-col {
            text-align: left;
        }

        .footer-col h4 {
            margin-bottom: 12px;
        }

        .footer-col ul li {
            margin-bottom: 6px;
        }

        .provider-section {
            margin: 0 10px;
        }

        /* Hide desktop nav items and show mobile menu */
        .nav-links,
        .nav-actions {
            display: none;
        }

        .nav-toggle {
            display: inline-flex;
        }

        /* Mobile menu layout when toggled */
        .nav-container.open .nav-links {
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            text-align: center;
            background: #f8fefa;
            padding: 16px 20px 20px 20px;
            box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
            border-bottom: 1px solid #eef2f7;
            z-index: 1200;
        }

        .nav-container.open .nav-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: absolute;
            top: calc(100% + 1px + (var(--nav-links-height, 0px)));
            left: 0;
            right: 0;
            background: transparent;
            padding: 0 20px 20px 20px;
            z-index: 1199;
        }

        .nav-links a {
            padding: 12px 0;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            display: block;
            color: #111111;
            width: 100%;
        }

        .nav-links a:hover {
            color: #087a1d;
        }

        /* Dropdowns become accordion-like on mobile */
        .nav-links .dropdown .dropdown-menu,
        .nav-links .dropdown .submenu-menu {
            position: static;
            display: none;
            box-shadow: none;
            border: none;
            background: transparent;
            padding: 0;
            margin: 0;
            text-align: center;
            width: 100%;
            top: auto;
            left: auto;
        }

        .nav-links .dropdown-menu a,
        .nav-links .submenu-menu a {
            padding: 10px 0;
            display: block;
            color: #111111;
            font-size: 14px;
            font-weight: 600;
            width: 100%;
            transition: color 0.2s ease;
            text-align: center;
        }

        .nav-links .dropdown-menu a:hover,
        .nav-links .submenu-menu a:hover {
            color: #087a1d;
            background-color: transparent;
            text-align: unset;
        }

        .nav-links .submenu-toggle {
            justify-content: center;
            display: block !important;
        }

        .nav-links .dropdown.open>.dropdown-menu {
            display: block !important;
            margin-top: 4px;
        }

        .nav-links .dropdown-submenu.open>.submenu-menu {
            display: block !important;
            margin-top: 4px;
        }

        .cta-flex {
            flex-direction: column;
            gap: 20px;
            text-align: center;
        }

        .comp-grid {
            gap: 10px;
        }

        /* Hero adjustments for medium screens */
        .hero-banner {
            min-height: 420px;
            padding-top: 40px;
        }

        .hero-overlay {
            padding: 20px;
        }

        .hero-content h1 {
            font-size: 32px;
        }

        .hero-content p {
            margin-right: 0;
        }

        .hero-btns {
            flex-direction: column;
            align-items: stretch;
        }

        .hero-btns .btn {
            width: 100%;
        }

        .nav-links {
            gap: 12px;
            flex-wrap: wrap;
        }

        .header-logo-img,
        .header-logo img {
            margin: 6px 0 2px 10px;
            width: 96px;
        }

        .footer-logo-img,
        .footer-logo img {
            width: 180px;
        }

        .logo-text {
            display: inline-block;
        }

        .features-grid {
            grid-template-columns: 1fr;
        }

        .cards-grid {
            grid-template-columns: 1fr;
        }

        /* Industry tabs: provide a mobile-only <select> and hide desktop buttons on small screens */
        .tab-buttons .tab-btn {
            display: inline-flex;
        }

        .mobile-only {
            display: none;
        }

        /* On mobile, hide the left labels column and stack challenge+solution vertically
           Show icon centered above text for each card for improved readability */
        .labels-column {
            display: none;
        }

        .card-combined {
            width: 100%;
        }

        .comparison-section {
            padding: 34px 0;
        }

        .card-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 8px;
            padding: 16px 14px;
            min-height: auto;
            /* allow rows to size to content */
        }

        .card-row .icon-box {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
        }

        .card-row .icon-box img {
            width: 60%;
            height: 60%;
        }

        .challenge-row {
            border-bottom: none;
            padding-bottom: 20px;
        }

        .solution-row {
            padding-top: 20px;
        }

        .feature-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 20px;
            padding: 18px 12px;
            min-height: auto;
        }

        .feature-card h3 {
            margin-bottom: 14px;
        }

        .card-combined::after {
            display: none;
        }

        .card-arrow {
            top: 50%;
            left: 48%;
        }

        .card-row strong {
            font-size: 16px;
        }

        .card-row p {
            font-size: 13px;
            margin: 0;
            color: #334155;
        }

        .testimonials-viewport {
            overflow-x: auto;
        }

        /* show the mobile select and hide desktop tab buttons on small screens */
        @media (max-width: 900px) {
            .mobile-only {
                display: block;
                width: 100%;
                margin-top: 12px;
                padding: 10px 12px;
                border-radius: 8px;
                border: 1px solid #e6eef4;
                background: #fff;
                font-size: 16px;
                color: #0f172a;
            }

            .provider-title h3 {
                text-align: center;
            }

            .tab-buttons .tab-btn {
                display: none;
            }
        }

        /* Steps: stack vertically on smaller screens and hide connectors */
        .steps-grid {
            flex-direction: row;
            align-items: center;
            gap: 50px;
        }

        .step-icon-img {
            width: 48px;
            height: 48px;
        }

        .step-connector {
            display: none;
        }

        .step-item {
            min-width: 30%;
            max-width: 380px;
            width: 100%;
        }

        .step-circle {
            width: 62px;
            height: 62px;
        }

        .step-badge {
            top: -9px;
            right: -8px;
            width: 26px;
            height: 26px;
            font-size: 13px;
        }
    }

    /* Small screens */
    @media (max-width: 600px) {
        .hero-banner {
            min-height: 360px;
            padding: 6px 0;
            background: #f5f8f1;
            position: relative;
        }

        .hero-banner .banner-container {
            display: none;
        }

        .mobile-banner-image {
            display: block;
            width: 120%;
            max-width: 420px;
            margin: 28px 0 0 -24px;
            /* border-radius: 14px; */
            object-fit: cover;
            /* box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); */
        }

        /* Add a semi-opaque blue background behind hero text on mobile for readability */
        /* .hero-overlay {
            border-radius: 10px;
            background: linear-gradient(259deg, rgb(175 175 175 / 92%), rgb(205 205 205 / 72%));
            color: #ffffff;
            z-index: 2;
        } */

        .hero-content h1 {
            font-size: 30px;
            color: #111111;
        }

        .hero-content p {
            color: #111111;
            margin-right: 0;
        }

        .hero-content {
            max-width: 100%;
        }

        /* Make buttons visible on dark background */
        .hero-btns .btn {
            color: #111111;
        }

        .hero-btns .btn.btn-whatsapp {
            background-color: #29a71a;
            /* teal-like for contrast */
            border-color: transparent;
        }

        .hero-btns .btn.btn-demo-green,
        .hero-btns .btn.btn-outline-green {
            /* border-color: rgba(255, 255, 255, 0.28); */
            color: #111111;
            /* background: transparent; */
        }

        .hero-btns .btn.btn-demo-green:hover,
        .hero-btns .btn.btn-outline-green:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .nav-container {
            padding: 0px 0;
        }

        .logo {
            font-size: 18px;
        }

        .btn {
            font-size: 15px;
            padding: 12px 16px;
        }

        .badge-item {
            gap: 8px;
        }
    }

    /* Accessibility: focus styles and keyboard friendly interactions */

    /* Enquiry modal (full-screen) styles - professional blue theme */
    .enquiry-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(2, 6, 23, 0.6);
        z-index: 1400;
        padding: 24px;
    }

    .enquiry-modal.open {
        display: flex;
    }

    .enquiry-modal-panel {
        width: 100%;
        max-width: 880px;
        background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
        border-radius: 12px;
        box-shadow: 0 18px 50px rgba(2, 6, 23, 0.25);
        overflow: auto;
        max-height: 96vh;
        position: relative;
        padding: 0;
        /* header will provide padding */
        border: 1px solid rgba(11, 99, 204, 0.12);
    }

    .enquiry-close {
        position: absolute;
        right: 12px;
        top: 12px;
        background: transparent;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #287e03;
    }

    .enquiry-modal-header {
        background: linear-gradient(90deg, #287e03, #1f5d02);
        color: #fff;
        padding: 20px 24px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .enquiry-modal-header h2 {
        margin: 0 0 6px 0;
        font-size: 20px;
    }

    .enquiry-modal-header p {
        margin: 0 0 0 0;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
    }

    .enquiry-modal-body {
        padding: 20px 22px 28px 22px;
    }

    /* Form controls inside modal */
    .enquiry-modal-body input[type="text"],
    .enquiry-modal-body input[type="email"],
    .enquiry-modal-body input[type="url"],
    .enquiry-modal-body textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid rgba(11, 99, 204, 0.14);
        border-radius: 8px;
        font-size: 15px;
        background: #fff;
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .enquiry-modal-body textarea {
        min-height: 120px;
    }

    .enquiry-modal-body input:focus,
    .enquiry-modal-body textarea:focus {
        outline: none;
        border-color: rgba(11, 99, 204, 0.45);
        box-shadow: 0 6px 20px rgba(11, 99, 204, 0.12);
    }

    .enquiry-modal .form-row {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
    }

    .enquiry-modal .form-row .field {
        flex: 1;
    }

    .enquiry-modal .form-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        margin-top: 12px;
    }

    /* Buttons: primary uses blue inside modal */
    .enquiry-modal .btn.btn-green {
        background: #287e03;
        border-color: #1f5d02;
        color: #fff;
    }

    .enquiry-modal .btn.btn-green:hover {
        background: #1f5d02;
    }

    .enquiry-modal .btn.btn-outline-dark {
        border-color: rgba(2, 6, 23, 0.08);
        color: #287e03;
        background: transparent;
    }

    .enquiry-modal .error-list {
        background: #fff5f5;
        border: 1px solid #fecaca;
        color: #7f1d1d;
        padding: 10px;
        border-radius: 8px;
        margin-top: 8px;
    }

    .enquiry-modal .note {
        color: #287e03;
        font-weight: 600;
        /* margin-top: 8px; */
        font-size: 18px;
    }

    @media (max-width: 720px) {
        .enquiry-modal-panel {
            width: 100%;
            padding: 0;
            border-radius: 10px;
        }

        .enquiry-modal {
            padding: 12px;
        }

        .enquiry-modal .form-row {
            flex-direction: column;
        }

        .enquiry-modal .form-actions {
            flex-direction: column-reverse;
            align-items: stretch;
        }
    }

    a:focus-visible,
    button:focus-visible,
    .input:focus-visible,
    .btn:focus-visible,
    .tab-btn:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.9);
        outline-offset: 3px;
        border-radius: 6px;
    }

    a:focus,
    button:focus {
        outline: none;
    }

    .dropdown:focus-within .dropdown-menu,
    .dropdown-toggle:focus+.dropdown-menu {
        display: block;
    }

    /* Skip link */
    .skip-link {
        position: absolute;
        left: -999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .skip-link:focus,
    .skip-link:active {
        left: 16px;
        top: 16px;
        width: auto;
        height: auto;
        padding: 8px 12px;
        background: #087a1d;
        color: #fff;
        z-index: 9999;
        border-radius: 4px;
    }

    /* Make interactive elements keyboard-focusable if not naturally focusable */
    .dropdown-toggle[role="button"] {
        cursor: pointer;
    }

    /* reduce motion for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation: none !important;
            transition: none !important;
        }
    }

    /* Enquiry page styles moved from enquiry.php */
    .enquiry-hero {
        padding: 28px 0;
        background: linear-gradient(180deg, #f8fafc, #ffffff);
        text-align: center;
    }

    /* make the enquiry take a large 'sheet' shape (A-series aspect ratio) while remaining responsive */
    /* A-series paper ratio is sqrt(2) ~ 1.414; portrait aspect-ratio width/height = 594/841 ~ 0.706 */
    .enquiry-container {
        max-width: 1200px;
        width: min(1100px, 95vw);
        aspect-ratio: 594 / 841;
        /* keeps sheet-like proportions */
        margin: 20px auto;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .enquiry-card {
        width: 100%;
        height: 100%;
        background: #fff;
        border: 1px solid #e6eef4;
        padding: 28px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
        overflow: auto;
        box-sizing: border-box;
        position: relative;
        transition: filter 0.3s ease, transform 0.3s ease;
    }

    .enquiry-card.success-state {
        filter: blur(2px);
        transform: scale(0.99);
    }

    .enquiry-title {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .enquiry-sub {
        color: #475569;
        margin-bottom: 18px;
    }

    .form-row {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
    }

    .form-row .field {
        flex: 1;
    }

    input[type="text"],
    input[type="email"],
    input[type="url"],
    textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #d6e1e9;
        border-radius: 8px;
        font-size: 15px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    input.is-invalid,
    textarea.is-invalid {
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
        background: #fff8f8;
    }

    textarea {
        min-height: 160px;
        resize: vertical;
    }

    .form-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        margin-top: 12px;
    }

    .form-actions .btn {
        padding: 10px 18px;
    }

    .note {
        font-size: 13px;
        color: #64748b;
    }

    .enquiry-success-box {
        position: absolute;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%) scale(0.9);
        min-height: 120px;
        width: min(80%, 420px);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: rgba(236, 253, 245, 0.96);
        color: #166534;
        border: 1px solid #bbf7d0;
        border-radius: 14px;
        font-size: 20px;
        font-weight: 700;
        padding: 24px;
        box-shadow: 0 16px 40px rgba(22, 101, 52, 0.15);
        animation: successPop 0.45s ease forwards;
        backdrop-filter: blur(2px);
        z-index: 2;
    }

    @keyframes successPop {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.7);
        }

        100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    .error-list {
        background: #fff5f5;
        border: 1px solid #fecaca;
        color: #7f1d1d;
        padding: 10px 12px;
        border-radius: 8px;
        margin-bottom: 12px;
        text-align: left;
    }

    .error-list ul {
        margin: 0;
        padding-left: 18px;
    }

    .error-list li {
        margin: 4px 0;
    }

    /* snackbar / toast */
    .snackbar {
        position: fixed;
        left: 50%;
        bottom: 28px;
        transform: translateX(-50%) translateY(20px);
        background: #287e03;
        color: #fff;
        padding: 12px 18px;
        border-radius: 8px;
        box-shadow: 0 8px 28px rgba(8, 122, 29, 0.24);
        opacity: 0;
        pointer-events: none;
        transition: transform 260ms cubic-bezier(.2, .9, .3, 1), opacity 260ms ease;
        z-index: 1200;
        font-weight: 600;
    }

    .snackbar.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    @media (max-width: 900px) {
        .enquiry-container {
            width: calc(100% - 24px);
            aspect-ratio: auto;
            max-width: none;
            margin: 12px;
        }

        .enquiry-card {
            padding: 18px;
        }

        textarea {
            min-height: 140px;
        }

        .snackbar {
            bottom: 18px;
        }
    }

    @media (max-width: 420px) {
        .form-row {
            flex-direction: column;
        }

        .form-actions {
            flex-direction: column-reverse;
            align-items: stretch;
        }
    }

    /* Utilities and classes moved from landing_page.php inline styles */
    .banner-bg {
        background-image: url('assets/Banner.jpeg');
        background-size: cover;
        background-position: center;
    }

    .underline {
        text-decoration: underline;
    }

    /* icon circle small padding and full-round */
    .icon-circle {
        border-radius: 50%;
        padding: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* specific background color utilities used inline on page */
    .bg-color-fb6e6d {
        background: #fb6e6d;
    }

    .bg-color-29a71a {
        background: #29a71a;
    }

    .bg-color-f99c33 {
        background: #f99c33;
    }

    .bg-color-048b30 {
        background: #048b30;
    }

    .bg-color-078327 {
        background: #078327;
    }

    .bg-color-7e5ec5 {
        background: #7e5ec5;
    }

    .bg-color-1c8adb {
        background: #1c8adb;
    }

    .bg-color-098f3d {
        background: #098f3d;
    }

    .bg-color-8464c9 {
        background: #8464c9;
    }

    .bg-color-fb901c {
        background: #fb901c;
    }

    .bg-color-1995a5 {
        background: #1995a5;
    }

    .bg-color-edb112 {
        background: #edb112;
    }

    /* provider icon special */
    .provider-icon-orange {
        background-color: #056cf3;
    }

    /* avatar utilities */
    .user-avatar.avatar-1 {
        background-image: url('./assets/avatar/Cr-01.png');
        background-size: cover;
        background-position: center;
    }

    .user-avatar.avatar-2 {
        background-image: url('./assets/avatar/Cr-02.png');
        background-size: cover;
        background-position: center;
    }

    .user-avatar.avatar-3 {
        background-image: url('./assets/avatar/Cr-03.png');
        background-size: cover;
        background-position: center;
    }

    /* enquiry message placeholders */
    #enquiry-error,
    #enquiry-success {
        display: none;
        margin-top: 12px;
    }

    /* small helper to visually hide elements (use where needed) */
    .hidden {
        display: none !important;
    }

    /* ========================================== 
    TABLET PORTRAIT & LANDSCAPE VIEW (768px - 1280px)
    ========================================== */

    /* Tablet Portrait: 768px to 1024px */
    @media (min-width: 901px) and (max-width: 1024px) {
        .container {
            padding: 0 20px;
        }

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

        .hero-content h1 {
            font-size: 32px;
        }

        .hero-content p {
            font-size: 14px;
        }

        .hero-btns {
            flex-direction: column;
            gap: 12px;
            margin-top: 20px;
        }

        .hero-btns .btn {
            width: 50%;
            justify-content: center;
        }

        .step-connector::before {
            content: "";
            position: absolute;
            left: -50px;
            right: -50px;
            height: 2px;
            border-top: 2px dashed #9aa7b3;
            top: 24px;
            transform: translateY(-50%);
            z-index: 1;
        }

        .testimonials-row .testimonials-viewport {
            padding-left: 70px;
            padding-right: 64px;
            overflow: hidden;
        }

        .step-connector .connector-end {
            position: absolute;
            right: -64px;
            top: 16px;
            width: 13px;
            height: auto;
            z-index: 5;
            pointer-events: none;
        }

        /* Feature cards: 2 columns on tablet */
        .features-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .feature-card {
            flex-direction: column;
            text-align: center;
            padding: 24px 16px;
            gap: 12px;
        }

        .feature-card:hover,
        .feature-card:focus-within,
        .feature-card:active {
            transform: scale(1.02);
        }

        /* Comparison cards: 2 columns */
        .cards-grid {
            grid-template-columns: repeat(2, minmax(200px, 1fr));
            gap: 12px;
            text-align: center;
        }

        .step-icon-img {
            height: 40px;
            width: 40px;
        }

        .step-badge {

            position: absolute;
            top: -11px;
            right: -6px;
            width: 22px;
            height: 22px;
            background: #087a1d;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: bold;
            box-shadow: 0 2px 8px rgba(8, 122, 29, 0.25);
        }

        .card-row {
            padding: 18px 16px;
            gap: 12px;
        }

        /* Steps: 2 columns on tablet */
        .steps-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        /* Footer: keep 2 columns, adjust spacing */
        .footer-grid {
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 24px;
        }

        .footer-grid>div:first-child {
            grid-column: 1 / -1;
        }

        /* Testimonials: 2 visible on tablet */
        .testimonials-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        /* Provider section: 2 columns */
        .provider-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .provider-title {
            grid-column: 1 / -1;
        }

        /* CTA banner: stack on tablet */
        .cta-banner-content {
            flex-direction: column;
            gap: 16px;
            text-align: center;
        }

        .cta-buttons {
            width: 100%;
            flex-direction: column;
        }

        .cta-buttons .btn {
            width: 50%;
        }

        /* Button sizing */
        .btn {
            padding: 10px 18px;
            font-size: 13px;
        }

        /* Modal adjustments */
        .enquiry-modal-panel {
            width: 90%;
            max-width: 500px;
        }
    }

    /* Tablet Landscape: 1025px to 1280px */
    @media (min-width: 1025px) and (max-width: 1280px) {
        .container {
            padding: 0 30px;
        }

        .section-title {
            font-size: 26px;
            margin: 35px 0;
        }

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

        .hero-content p {
            font-size: 15px;
        }

        .hero-btns {
            flex-direction: row;
            gap: 16px;
            margin-top: 24px;
        }

        /* Feature cards: 3 columns (keep desktop) */
        .features-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .feature-card {
            flex-direction: row;
            padding: 24px 18px;
            gap: 16px;
        }

        /* Comparison cards: 3 columns */
        .cards-grid {
            grid-template-columns: repeat(3, minmax(220px, 1fr));
            gap: 12px;
        }

        .card-row {
            padding: 22px 18px;
            gap: 14px;
        }

        /* Steps: 3 columns */
        .steps-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        /* Footer: 2 columns with brand full width */
        .footer-grid {
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 28px;
        }

        .footer-grid>div:first-child {
            grid-column: 1 / -1;
        }

        /* Testimonials: 3 visible */
        .testimonials-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        /* Provider section: 4 columns (keep desktop) */
        .provider-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .provider-title {
            grid-column: 1 / -1;
        }

        /* CTA banner: horizontal layout */
        .cta-banner-content {
            flex-direction: row;
            gap: 24px;
            justify-content: space-between;
        }

        .cta-buttons {
            flex-direction: row;
            width: auto;
        }

        /* Button sizing */
        .btn {
            padding: 12px 20px;
            font-size: 14px;
        }

        /* Modal adjustments */
        .enquiry-modal-panel {
            width: 85%;
            max-width: 600px;
        }
    }

    /* Tablet spacing adjustments for both orientations */
    @media (min-width: 901px) and (max-width: 1280px) {
        .comparison-section {
            padding: 40px 0;
        }

        .step-icon-img {
            height: 41px;
            width: 41px;
        }

        .step-badge {
            top: -10px;
            right: -9px;
        }

        .step-connector::before {
            top: 25px;
        }

        .comparison-wrapper {
            gap: 16px;
            padding: 0;
        }

        .feature-card h3 {
            font-size: 16px;
        }

        .feature-card p {
            font-size: 12px;
        }

        .label-badge {
            min-height: 100px;
            padding: 14px 10px;
        }

        /* Reduce nav padding slightly on tablet */
        .nav-links {
            gap: 40px;
        }

        .nav-links a {
            font-size: 15px;
        }

        /* Adjust hero banner height */
        .hero-banner {
            min-height: 500px;
            padding-top: 60px;
        }

        /* Testimonial card sizing */
        .testimonial-card {
            padding: 20px;
        }

        .testimonial-card-text {
            font-size: 12px;
            line-height: 1.5;
        }

        .testimonial-author-name {
            font-size: 13px;
        }

        .testimonial-author-title {
            font-size: 11px;
        }

        /* Provider items */
        .provider-item {
            text-align: center;
        }

        .provider-icon {
            width: 50px;
            height: 50px;
            margin: 0 auto 12px;
        }

        .provider-item h3 {
            font-size: 15px;
            margin-bottom: 8px;
        }

        .provider-item p {
            font-size: 12px;
        }

        /* Step items */
        .step-item h3 {
            font-size: 16px;
        }

        .step-item p {
            font-size: 12px;
        }

        .step-circle {
            width: 48px;
            height: 48px;
            font-size: 20px;
        }

        /* Show step connectors in tablet mode */
        .step-connector {
            display: flex !important;
        }

        /* Industry section */
        .industry-copy h3 {
            font-size: 22px;
        }

        .industry-copy p {
            font-size: 13px;
        }

        .industry-benefits li {
            font-size: 12px;
        }
    }

    /* Tablet view: keep desktop industry tabs and show two testimonials. */
    @media (min-width: 800px) and (max-width: 900px) {
        .tab-buttons .tab-btn {
            display: inline-flex;
        }

        .tab-buttons .mobile-only {
            display: none;
        }

        .testimonials-grid .testimonial-card,
        .testimonial-card.animate-on-scroll:nth-child(1) {
            flex: 0 0 calc(50% - 6px);
        }

        .card-arrow {
            left: 49%;
        }

        .comparison-wrapper {
            max-width: 500px !important;
        }

        .footer-logo-img,
        .footer-logo img {
            width: 220px;
        }
    }

    @media (max-width: 630px) {
        .steps-grid {
            flex-direction: column !important;
        }
    }

    @media (max-width: 800px) {
        .hero-content {
            max-width: 100%;
            background-color: #f5f8f1;
        }

        .hero-banner .banner-container {
            display: none;
            padding: 0;
        }

        .hero-banner {
            padding: 0;
        }

        .mobile-banner-image {
            display: block;
            width: 120%;
            max-width: 420px;
            margin: 28px 0 0 -24px;
            /* border-radius: 14px; */
            object-fit: cover;
            /* box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); */
        }

        .comparison-wrapper {
            max-width: 450px !important;
        }
    }

    @media(max-width: 1270px) {
        .step-connector .connector-end {
            top: 18px;
        }
    }