@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
        
        :root { 
            --color-primary: #429255; 
            --color-secondary: #3E437D; 
            --font-size-heading: 32px;
            --font-weight-heading: 700;
            --font-size-body: 16px;
            --font-size-menu: 16px;
            --paragraph-line-height: 1.6;
            --paragrapgh-font-size: 18px;
            --paragrapgh-font-weight: 400;
            --soft-teal: #e6f4f1;
            --icon-teal: #0d9488;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        img, video, canvas, svg {
            max-width: 100%;
            height: auto;
        }

        iframe {
            max-width: 100%;
        }
 /* Scroll padding to account for fixed header (80px header height) */
        html {
            scroll-padding-top: 100px;
        }
        body { 
            font-family: "Poppins", sans-serif;
            color: #333;
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }
        html {
            scroll-behavior: smooth;
        }

        .hero-tagline{
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            word-break: normal;
            overflow-wrap: normal;
            hyphens: none;
        }

        @media (max-width: 1023px) {
            .hero-mobile-50vh {
                height: calc(var(--vh, 1vh) * 50);
            }
            .hero-mobile-min-50vh {
                min-height: calc(var(--vh, 1vh) * 50);
            }
        }

        @media (min-width: 1024px) {
            header .max-w-7xl,
            footer .max-w-7xl,
            main .max-w-7xl,
            main .max-w-6xl,
            main .max-w-5xl,
            main .max-w-4xl,
            main .max-w-3xl,
            main .max-w-2xl,
            main .max-w-xl,
            main .max-w-lg,
            main .max-w-md,
            main .max-w-sm {
                max-width: 100% !important;
            }
        }

        @media (min-width: 1280px) {
            header .max-w-7xl,
            footer .max-w-7xl,
            main .max-w-7xl,
            main .max-w-6xl,
            main .max-w-5xl,
            main .max-w-4xl,
            main .max-w-3xl,
            main .max-w-2xl,
            main .max-w-xl,
            main .max-w-lg,
            main .max-w-md,
            main .max-w-sm {
                max-width: 100% !important;
            }
        }

        @media (min-width: 1536px) {
            header .max-w-7xl,
            footer .max-w-7xl,
            main .max-w-7xl,
            main .max-w-6xl,
            main .max-w-5xl,
            main .max-w-4xl,
            main .max-w-3xl,
            main .max-w-2xl,
            main .max-w-xl,
            main .max-w-lg,
            main .max-w-md,
            main .max-w-sm {
                max-width: 100% !important;
            }
        }

        /* Increased Heading Sizes */
        h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 900; color: var(--color-secondary); line-height: 1.1; }
        h2 { font-size: clamp(32px, 5vw, 48px); font-weight: 900; color: var(--color-secondary); letter-spacing: -0.02em; }

        @media (max-width: 420px) {
            h1 { font-size: clamp(34px, 10vw, 44px); }
            h2 { font-size: clamp(26px, 8vw, 34px); }
        }
        
        .btn-primary { 
            background-color: var(--color-primary); 
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            filter: brightness(1.1);
            transform: translateY(-2px);
        }

        /* Mobile Menu */
        #mobile-menu {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(100%);
        }
        #mobile-menu.active {
            transform: translateX(0);
        }

        /* Video Play Button */
        .video-card .play-btn {
            width: clamp(52px, 4.5vw, 68px);
            height: clamp(36px, 3.2vw, 48px);
            border-radius: 14px;
            background: #ff0000;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
            transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .video-card .play-btn:before {
            content: '';
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-left: 15px solid #ffffff;
            margin-left: 3px;
        }
        .video-card:hover .play-btn {
            background: #e60000;
            transform: scale(1.06);
            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
        }

        .video-card {
            border-radius: 16px;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .video-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
        }
        .video-card img {
            transform: translateZ(0);
        }
        .video-card:hover img {
            transform: scale(1.02);
        }

/* Video row and mobile-side controls */
.video-row { display: flex; align-items: center; gap: 1rem; }
.video-row .flex-1 { min-width: 0; }
.vid-controls-mobile { display: flex; }
.vid-controls-mobile button { min-width: 48px; min-height: 48px; }

@media (max-width: 640px) {
    .video-row { flex-direction: column; align-items: stretch; margin-left: 0 !important; margin-right: 0 !important; }
    .vid-controls-mobile { width: 100%; position: static !important; flex-direction: row; justify-content: center; gap: 0.75rem; }
    .vid-controls-mobile button { position: static !important; }

    .video-row .owl-stage {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Ensure on mobile the heading stacks (handled via HTML classes), and keep desktop layout unchanged */
@media (min-width: 768px) {
    .vid-controls-mobile { display: none; }
}

/* Keep carousel dots centered */
.owl-theme .owl-dots { text-align: center; margin-top: 1rem; }
.owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; display: inline-block; border-radius: 9999px; background: #e6e6e6; }
.owl-theme .owl-dots .owl-dot.active span { background: var(--color-primary); }

#benefits-carousel .item {
    padding: 0.25rem 0.25rem;
}

#benefits-carousel .item > div {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 1rem 0.75rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

@media (min-width: 640px) {
    #benefits-carousel {
        display: none !important;
    }
}

@media (max-width: 640px) {
    #benefits-carousel .owl-dots { margin-top: 0.5rem; }
}

        .owl-carousel .owl-stage-outer {
            overflow: hidden;
            width: 100%;
            touch-action: pan-y;
        }

        .owl-carousel, .owl-stage, .owl-item {
            min-width: 0;
        }

        .owl-carousel {
            width: 100%;
        }

        .owl-carousel .item img {
            display: block;
            width: 100%;
            height: auto;
        }

        @media (max-width: 1023px) {
            #hero-image-carousel,
            #hero-image-carousel .owl-stage-outer,
            #hero-image-carousel .owl-stage,
            #hero-image-carousel .owl-item,
            #hero-image-carousel .item {
                height: 100%;
            }

            #hero-image-carousel .item img {
                height: 100% !important;
                object-fit: cover;
            }
        }

        @media (max-width: 1023px) {
            /* Improve dot contrast when carousel is used as a background */
            #hero-image-carousel .owl-dots {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 14px;
                margin-top: 0;
            }
            #hero-image-carousel .owl-dots .owl-dot span {
                background: rgba(255,255,255,0.45);
            }
            #hero-image-carousel .owl-dots .owl-dot.active span {
                background: rgba(255,255,255,0.95);
            }
        }

        @media (max-width: 639px) {
            #video-carousel .owl-stage-outer,
            #video-carousel2 .owl-stage-outer,
            #video-carousel3 .owl-stage-outer,
            #video-carousel4 .owl-stage-outer,
            #video-carousel5 .owl-stage-outer {
                padding: 0 8px;
            }

            #video-carousel .video-card,
            #video-carousel2 .video-card,
            #video-carousel3 .video-card,
            #video-carousel4 .video-card,
            #video-carousel5 .video-card {
                border-radius: 2.5rem;
                overflow: hidden;
            }
        }

        .line-clamp-2 {
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Modal Styles */
        #video-modal {
            display: none;
            backdrop-filter: blur(8px);
        }
        #video-modal.active {
            display: flex;
        }

        /* Process Step Styles */
        .process-step::after {
            content: '';
            position: absolute;
            top: 40px;
            right: -50%;
            width: 100%;
            border-top: 2px dashed #e2e8f0;
            z-index: 0;
        }
        @media (max-width: 768px) {
            .process-step::after { display: none; }
        }

        .heading-title{
            font-size: clamp(30px, 5vw, 35px); 
            font-weight: 600; 
            color: var(--color-secondary); 
            letter-spacing: -0.02em; 
        }
        /* Owl Navigation Overrides */
        .owl-theme .owl-nav { display: none; }
        .owl-theme .owl-dots .owl-dot.active span { background: var(--color-primary) !important; }

        /* contact us */
        .contact-box {
            border: 1px solid #e5e7eb; /* Light gray border */
            background-color: #fff;
            padding: 2.5rem 1.5rem;
            border-radius: 0.75rem; /* Rounded corners */
            text-align: center;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .contact-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        }
        .contact-box-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 64px;
            height: 64px;
            margin: 0 auto 1.5rem;
            border-radius: 9999px; /* Full circle */
            background-color: var(--color-primary);
            color: white;
            font-size: 2rem;
        }

    /* Smooth Accordion Transitions (Unified for all accordions) */
        .accordion-item {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .accordion-item[open] {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        
        .accordion-item summary {
            cursor: pointer;
            padding-top: 2rem;
            padding-bottom: 2rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            transition: all 0.3s ease;
        }
        
        .accordion-item summary:hover {
            background-color: rgba(66, 146, 85, 0.05);
        }
        
        .accordion-item[open] summary {
            border-bottom: 2px solid #429255;
            background-color: rgba(66, 146, 85, 0.02);
        }
        
        .accordion-item summary::marker {
            display: none;
        }
        
        .accordion-item summary::before {
            display: none;
        }
        
        .accordion-item summary i {
            color: #429255;
            font-size: 1.25rem;
            transition: transform 0.3s ease;
            background: none;
            border: none;
        }
        
        .accordion-item > div {
            animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) ease;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Legacy accordion class for backwards compatibility */
        .vacancy-item {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .vacancy-item[open] {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        
        .vacancy-item summary {
            cursor: pointer;
            padding-top: 2rem;
            padding-bottom: 2rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            transition: all 0.3s ease;
        }
        
        .vacancy-item summary:hover {
            background-color: rgba(66, 146, 85, 0.05);
        }
        
        .vacancy-item[open] summary {
            border-bottom: 2px solid #429255;
            background-color: rgba(66, 146, 85, 0.02);
        }
        
        .vacancy-item summary::marker {
            display: none;
        }
        
        .vacancy-item summary::before {
            display: none;
        }
        
        .vacancy-item summary i {
            color: #429255;
            font-size: 1.25rem;
            transition: transform 0.3s ease;
            background: none;
            border: none;
        }
        
        .vacancy-item > div {
            animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) ease;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        /* Sticky TOC styling */
        .sticky-toc {
            top: 100px;
        }

        /* Active TOC link styling */
        .toc-link {
            position: relative;
            transition: all 0.3s ease;
            padding-left: 0.75rem;
            display: block;
            margin-left: 0.5rem;
        }

        .toc-link::before {
            content: '';
            position: absolute;
            left: -0.5rem;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 0;
            background-color: #429255;
            transition: height 0.3s ease;
        }

        .toc-link:hover {
            color: #429255;
            font-weight: 500;
        }

        .toc-link.active {
            color: #429255;
            font-weight: 600;
        }

        .toc-link.active::before {
            height: 100%;
        }
/* --- FILTER ACCORDION STYLES --- */
        .filter-content {
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.4s ease-in-out;
        }

        /* --- DESKTOP Dropdown Visibility (Hover/Focus-Within) --- */
        .dropdown-desktop:hover .dropdown-menu,
        .dropdown-desktop:focus-within .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }
        
        /* --- TABS Styling --- */
        .tab-button.active {
            border-color: var(--color-primary);
            color: var(--color-menu-text);
            font-weight: 700;
            background-color: #fff;
        }
        .tab-content {
            display: none;
            animation: fadeIn 0.4s ease-in-out;
        }
        .tab-content.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

         .phone-highlight {
            background-color: var(--color-primary);
            height: 100%;
            align-self: stretch;
            border-radius: 0;
            box-sizing: border-box;
            padding: 27px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 15px rgba(66, 146, 85, 0.2);
        }

        .phone-highlight:hover {
            background-color: var(--color-secondary);
            box-shadow: 0 8px 25px rgba(62, 67, 125, 0.2);
        }
        /* Mobile controls positioning for devices under 768px (tablets and below) */
        @media screen and (min-width: 641px) and (max-width: 767px) {
           .vid-controls-mobile {
        position: absolute;
        width: 94%;
        z-index: 3;
    }

   #vid-prev-mobile {
        position: absolute;
        left: 0;
        top: auto;
        bottom: 0;
    }
    #vid-next-mobile {
        position: absolute;
        right: 6px !important;
        top: auto;
        bottom: 0;
    }
    #vid-prev2-mobile{
        position: absolute;
        left: 0px;
        top: auto;
        bottom: 0;
    }
    #vid-next2-mobile{
        position: absolute;
        right: 0px !important;
        top: auto;
        bottom: 0;
    }
    #vid-prev3-mobile{
        position: absolute;
        left: 0px;
        top: auto;
        bottom: 0;
    }
    #vid-next3-mobile{
        position: absolute;
        right: 0px !important;
        top: auto;
        bottom: 0;
    }
    #vid-prev4-mobile{
        position: absolute;
        left: 0px !important;
        top: auto;
        bottom: 0; 
    }
    #vid-next4-mobile{
        position: absolute;
        right: 0px !important;
        top: auto;
        bottom: 0;
    }
    #vid-prev5-mobile{
        position: absolute;
        left: 0px !important;
        top: auto;  
    }
    #vid-next5-mobile{
        position: absolute;
        right: 0px !important;
        top: auto;  
    }

        }