:root {
            --purple-main: #4B0082; 
            --purple-light: #6A0DAD;
            --white: #FFFFFF;
            --black: #121212;
            --gold: #FFD700;
            --gray-light: #f4f4f4;
        }

        body { 
            margin: 0; padding: 0; 
            font-family: 'Inter', sans-serif; 
            background-color: var(--white); 
            color: var(--black);
            overflow-x: hidden;
        }

        /* Nav Structure */
        nav {
            background: var(--purple-main);
            padding: 0.8rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .logo h1 {
            color: var(--white);
            font-family: 'Playfair Display', serif;
            margin: 0;
            font-size: 1.8rem;
            letter-spacing: 1px;
        }

        .nav-links { display: flex; gap: 20px; align-items: center; }

        .nav-links a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            transition: 0.3s;
            text-transform: uppercase;
        }

        .nav-links a:hover { color: var(--gold); }

        /* Dropdown Logic */
        .dropdown { position: relative; display: inline-block; }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: var(--white);
            min-width: 200px;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 4px;
            top: 100%;
        }
        .dropdown-content a {
            color: var(--black) !important;
            padding: 12px 16px;
            display: block;
            text-transform: none;
            border-bottom: 1px solid #eee;
        }
        .dropdown-content a:hover { background-color: var(--gray-light); color: var(--purple-main) !important; }
        .dropdown:hover .dropdown-content { display: block; }

        /* Special Buttons */
        .portal-link { color: var(--gold) !important; font-weight: bold !important; border: 1px solid var(--gold); padding: 5px 10px; border-radius: 4px; }
        .portal-link:hover { background: var(--gold); color: var(--purple-main) !important; }

        .btn-apply {
            background: var(--white);
            color: var(--purple-main) !important;
            padding: 10px 20px;
            border-radius: 4px;
            font-weight: bold !important;
            transition: 0.3s transform;
        }
        .btn-apply:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

        /* Mobile Menu */
        .menu-toggle { display: none; color: white; font-size: 1.5rem; cursor: pointer; }

        @media (max-width: 1024px) {
            .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: var(--purple-main); padding: 20px; gap: 15px; }
            .nav-links.active { display: flex; }
            .menu-toggle { display: block; }
            .dropdown-content { position: static; width: 100%; box-shadow: none; background: rgba(255,255,255,0.1); }
            .dropdown-content a { color: white !important; }
        }
        
        
        /* Prevent horizontal scrolling globally */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Force images and videos to stay inside their containers */
img, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

/* Ensure all containers use border-box so padding doesn't add to width */
* {
    box-sizing: border-box;
}