:root {
            --bs-body-bg: #0d1a2b;
            --bs-body-color: #ffffff;
            --bs-primary-dark: #0d1a2b;
            --bs-secondary-dark: #07111d;
            --bs-tertiary-dark: #08192c;
            --bs-border-color: #2c3b48;
            --bs-accent-cyan: #85f8ff;
            --bs-accent-green: #788b01;
            --bs-accent-green-hover: #92a701;
        }

                /* Particle Animation Styling */
        #tsparticles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
        }

        h1,
        h2,
        h3,
        h4,
        .fw-rubik {
            font-family: 'Rubik', sans-serif;
            font-weight: 800;
            text-transform: uppercase;
        }

        .bg-primary-dark {
            background-color: var(--bs-primary-dark) !important;
        }

        .bg-secondary-dark {
            background-color: var(--bs-secondary-dark) !important;
        }

        .bg-tertiary-dark {
            background-color: var(--bs-tertiary-dark) !important;
        }

        .text-accent-cyan {
            color: var(--bs-accent-cyan) !important;
        }

        .text-accent-green {
            color: var(--bs-accent-green) !important;
        }

        .btn-custom-green {
            background-color: var(--bs-accent-green);
            color: #ffffff;
            font-family: 'Rubik', sans-serif;
            font-weight: 700;
        }

        .btn-custom-green:hover {
            background-color: var(--bs-accent-green-hover);
            color: #ffffff;
        }

        .btn-outline-custom-green {
            border-color: var(--bs-accent-green);
            color: #ffffff;
            font-family: 'Rubik', sans-serif;
            font-weight: 700;
        }

        .btn-outline-custom-green:hover {
            background-color: var(--bs-accent-green);
            color: #ffffff;
        }

        /* Hero Carousel Overlay */
        .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(13, 26, 43, 0.7);
            z-index: 1;
        }

        .carousel-item .container {
            position: relative;
            z-index: 2;
        }

        /* Course Card Hover Effect */
        .course-card {
            transition: transform 0.3s ease;
        }

        .course-card:hover {
            transform: translateY(-10px);
        }

        /* FAQ Accordion Styling */
        .accordion-button {
            font-weight: 700;
            font-size: 1.2rem;
        }

        .accordion-button:not(.collapsed) {
            color: var(--bs-body-color);
            background-color: transparent;
            box-shadow: none;
        }

        .accordion-button:focus {
            box-shadow: none;
            border-color: var(--bs-border-color);
        }

        .accordion-button::after {
            background-image: none;
            content: '+';
            font-size: 2rem;
            color: var(--bs-accent-cyan);
            transform: translateY(-4px);
            transition: transform 0.3s ease;
        }

        .accordion-button:not(.collapsed)::after {
            content: '+';
            background-image: none;
            transform: rotate(45deg) translateY(-4px);
        }

        .accordion-body {
            color: #a0aec0;
        }

        /* Navbar link hover effect */
        .nav-link {
            border-bottom: 2px solid transparent;
            transition: color 0.3s, border-color 0.3s;
        }

        .nav-link:hover {
            color: var(--bs-accent-cyan);
            border-bottom-color: var(--bs-accent-cyan);
        }

        /* ---- START: Logo Scroller CSS ---- */
        .logo-scroller {
            max-width: 1200px;
            margin: auto;
            overflow: hidden;
            /* This adds a nice fade effect to the edges */
            -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
            mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
        }

        .scroller-inner {
            display: flex;
            flex-wrap: nowrap;
            gap: 3rem;
            /* Controls the space between logos */
            animation: scroll 10s linear infinite;
        }

        /* Pause the animation on hover for better user experience */
        .logo-scroller:hover .scroller-inner {
            animation-play-state: paused;
        }

        .scroller-inner img {
            height: 65px;
            /* Same height as your original design */
            max-width: none;
            /* Allows images to scroll without squishing */
        }

        /* Override background for logo carousel section */
        section.bg-secondary-dark.logo-scroller-section {
            background-color: #ffffff !important;
        }

        /* The scrolling animation keyframes */
        @keyframes scroll {
            from {
                transform: translateX(0);
            }

            to {
                /* Scrolls exactly the width of the first set of logos */
                transform: translateX(-50%);
            }
        }

        /* ---- END: Logo Scroller CSS ---- */