:root {
            --accent: #FFA02E;
            --black: #000000;
            --white: #FFFFFF;
        }

        body {
            background-color: var(--white);
            color: var(--black);
            font-family: 'Manrope', sans-serif;
            margin: 0;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .outfit {
            font-family: 'Outfit', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Fixed Parallax Background */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Text Content */
.hero-white-overlay {
    position: absolute;
    left: 60rem;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    color: white;
    z-index: 10;
}

/* Background Image */
.parallax-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://i1-c.pinimg.com/736x/1b/0b/dd/1b0bddb5b6ce199f72147becb4ea42db.jpg');
    background-size: cover;
    background-position: center;
    left: 50rem;
    z-index: -1;
}


/* Mobile Responsive Only */
@media (max-width: 768px) {

    .hero-white-overlay {
        left: 2rem;
        width: 85%;
        top: 50%;
    }

    .parallax-bg {
        left: 0;
        background-position: center;
    }

}
        /* White Margins for Editorial Look */
        .content-container {
            margin-left: 10%;
            margin-right: 10%;
            background-color: var(--white);
        }

        .hero-section {
            position: relative;
            height: 100vh;
            display: flex;
            align-items: center;
        }

        /* White Margin for Hero */
        .hero-white-overlay {
            height: 100%;
            width: 45%;
            margin-left: 5%;
            padding: 10% 5%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 10;
            animation: slideInLeft 1.2s cubic-bezier(0.19, 1, 0.22, 1);
        }

        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .hr-line {
            border: none;
            border-bottom: 1px solid var(--black);
            margin: 0;
        }

        .nav-link {
            transition: color 0.3s ease;
        }

        .nav-link:hover {
            color: var(--accent);
        }

        .cta-button {
            background-color: var(--accent);
            color: white;
            padding: 18px 40px;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 0.8rem;
            letter-spacing: 0.1em;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .cta-button:hover {
            background-color: var(--black);
            transform: translateY(-3px);
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .image-container {
            overflow: hidden;
            background: #f4f4f4;
        }

        .image-container img {
            transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .image-container:hover img {
            transform: scale(1.05);
        }

        /* Multipage handling */
        .page { display: none; }
        .page.active { display: block; }

        @media (max-width: 1024px) {
            .hero-white-overlay { width: 90%; margin-left: 5%; }
            .content-container { margin-left: 5%; margin-right: 5%; }
        }