/* Workflow Tab Styling */
    .workflow-tabs {
        background: #e0f2f7;
        border-radius: 12px;
        padding: 5px !important;
        display: inline-flex !important;
        border: none;
    }
    .workflow-tabs .nav-link {
        color: #333;
        border: none;
        padding: 10px 25px;
        border-radius: 10px !important;
        font-weight: 500;
    }
    .workflow-tabs .nav-link.active {
        background-color: #00acee !important; /* darkened from #00acee — white text passes 4.86:1 */
        color: white !important;
    }

    /* Carousel Customization */
    .carousel-container {
        position: relative;
        max-width: 1000px;
        margin: auto;
    }

    /* Floating Arrows */
    .custom-prev, .custom-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        border: none;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }
    .custom-prev { left: -70px; }
    .custom-next { right: -70px; }
    .custom-prev:hover, .custom-next:hover { background: #f8f9fa; }

    /* Custom Indicators */
    .carousel-indicators [data-bs-target] {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid #00acee;
        background-color: transparent;
        opacity: 1;
    }
    .carousel-indicators .active {
        background-color: #00acee;
    }

    .laptop-mockup {
        max-width: 100%;
        height: 707px;
        padding: 20px;
    }
    .carousel-item img {
        pointer-events: none;
    }
    .custom-prev, .custom-next {
        pointer-events: auto !important;
    }

    /* =====================================================
       RESPONSIVE: Tablet (768px – 991px)
       ===================================================== */
    @media (max-width: 991px) {
        /* Bring arrows inside the carousel container */
        .custom-prev { left: -20px; }
        .custom-next { right: -20px; }

        .laptop-mockup {
            height: 460px;
            padding: 12px;
        }
    }

    /* =====================================================
       RESPONSIVE: Mobile (up to 767px)
       ===================================================== */
    @media (max-width: 767px) {

        /* --- Hero --- */
        /* Skip the large background image download on mobile — use a solid dark background instead.
           !important overrides the inline style="background-image:..." on the section element. */
        /* .hero {
            background-image: none !important;
            background-color: #0d1b2a;
        } */
        /* Overlay not needed without a background image */
        /* .hero:before {
            display: none;
        } */

        .hero-title {
            font-size: 2.4rem;
        }

        .hero-description {
            font-size: 1.2rem;
        }

        /* Stack hero buttons full-width */
        .hero .btn-primary,
        .hero .btn-secondary {
            display: block;
            width: 100%;
            text-align: center;
            margin-bottom: 12px;
            margin-right: 0;
        }

        .btn-primary,
        .btn-secondary {
            font-size: 1rem !important;
        }

        /* --- Workflow tabs --- */
        .workflow-tabs {
            /* display: flex; */
            flex-wrap: wrap;
            width: auto;
            justify-content: center;
        }
        .workflow-tabs .nav-link {
            padding: 8px 14px;
            font-size: 0.85rem;
        }

        /* --- Carousel --- */
        /* Bring arrows inside the image area on mobile */
        .custom-prev {
            left: 5px;
            width: 36px;
            height: 36px;
        }
        .custom-next {
            right: 5px;
            width: 36px;
            height: 36px;
        }

        /* Laptop mockup: auto-height fills container proportionally */
        .laptop-mockup {
            height: auto;
            max-height: 260px;
            width: 100%;
            padding: 8px;
            object-fit: contain;
        }

        #workflowTabContent .carousel-item {
            height: 328px;
        }

        /* Accredited section: tighten gap */
        .accredited-wrapper .gap-5 {
            gap: 1.5rem !important;
        }
        .accredited-wrapper .col-lg-2 h4 {
            text-align: center !important;
            margin-bottom: 1rem;
        }
        .accredited-wrapper .d-flex.align-items-center div {
            width: 100%;
        }

        #features .col-lg-6.mb-4.mb-lg-0.text-center.text-lg-start.order-lg-1 {
            padding-top: 18px;
        }
    }

    /* =====================================================
       RESPONSIVE: Small mobile (up to 480px)
       ===================================================== */
    @media (max-width: 480px) {
        .hero-title {
            font-size: 2.2rem;
        }

        .laptop-mockup {
            max-height: 210px;
        }

        .workflow-tabs .nav-link {
            padding: 7px 10px;
            font-size: 0.8rem;
        }
    }