/* Essential for preventing white flash on load */
        html, body {
            margin: 0;
            padding: 0;
            background-color: black; /* Ensures black background from the very start */
            height: 100%;
            width: 100%;
        }

        /* Custom font families */
        .font-roboto {
            font-family: 'Roboto', sans-serif;
        }
        .font-domine {
            font-family: 'Domine', serif;
        }
        .font-montserrat {
            font-family: 'Montserrat', sans-serif;
        }

        /* Custom styles for the modal animation */
        @keyframes modal-dissolve-out {
            0% {
                opacity: 1;
                transform: scale(1);
                filter: blur(0px);
            }
            100% {
                opacity: 0;
                transform: scale(1.05); /* Scales up slightly as it disappears */
                filter: blur(5px); /* Subtle blur at the end */
            }
        }

        @keyframes loading-text-pulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }

        .modal-active {
            animation: modal-dissolve-out 1.2s forwards ease-out; /* Smooth dissolve animation */
        }

        /* Ensure the main content is not visible until the modal is gone */
        .main-content {
            opacity: 0;
            transition: opacity 0.8s ease-in-out 0.3s; /* Slightly longer, delayed transition for main content */
            background-color: black; /* Default background for content, but image will layer over it */
            background-image: url('../images/slides/slide-04.jpg'); /* Placeholder background image */
            background-size: cover; /* Cover the entire area */
            background-position: center; /* Center the background image */
            background-repeat: no-repeat; /* Do not repeat the image */
            background-attachment: fixed; /* Fixes the background image relative to the viewport */
        }

        .main-content-visible {
            opacity: 1;
        }

        /* Button hover effect */
        .btn-hover-effect {
            transition: all 0.3s ease-in-out;
        }
        .btn-hover-effect:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
            opacity: 0.9;
        }

        /* Scroll reveal animation */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px); /* Smaller translate for minimalist feel */
            transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Faster reveal */
        }
        .scroll-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Subtle background pattern for sections */
        .section-bg-pattern {
            background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* Marquee Animation Styles */
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
            display: flex;
            justify-content: center; /* Center content when not enough to scroll */
            width: 100%; /* Ensure it spans full width */
        }

        .marquee-content {
            display: inline-flex; /* Use inline-flex to keep items in a row */
            animation: marquee-scroll 30s linear infinite; /* Adjust duration for speed */
            will-change: transform; /* Optimize for animation */
        }

        .marquee-content:hover {
            animation-play-state: paused; /* Pause on hover */
        }

        .marquee-content img {
            margin: 0 2rem; /* Space between logos */
            flex-shrink: 0; /* Prevent logos from shrinking */
            max-height: 60px; /* Adjust max height for logos */
            width: auto; /* Maintain aspect ratio */
            opacity: 0.8;
            transition: opacity 0.3s ease-in-out;
        }

        .marquee-content img:hover {
            opacity: 1;
        }

        @keyframes marquee-scroll {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-100%); }
        }