/* =====================================
   NOVA STEM RACING
   MAIN STYLESHEET
   Cosmic x Formula Racing Theme
===================================== */

:root{

/* NOVA PALETTE */

--primary:#327FAE;
--secondary:#84A2F3;
--deep:#384E9D;
--accent:#53B8F6;
--navy:#182C6A;

--white:#FFFFFF;
--light:#D7E0F7;
--black:#000000;

/* EFFECTS */

--glass:rgba(255,255,255,.05);
--glass-border:rgba(255,255,255,.08);

--gradient-main:
linear-gradient(
90deg,
#327FAE,
#84A2F3,
#D7E0F7
);

--gradient-space:
linear-gradient(
135deg,
#182C6A,
#384E9D,
#327FAE
);

--shadow-glow:
0 0 20px rgba(83,184,246,.35);

--shadow-heavy:
0 0 40px rgba(83,184,246,.3);

}

html,
body{
    overflow-x:hidden;
    max-width:100%;
}
/* =====================================
   RESET
===================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

html{
overflow-x:hidden;
}

body{

background:#000;
color:white;

font-family:'Inter',sans-serif;

overflow-x:hidden;
position:relative;

}

/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#050505;
}

::-webkit-scrollbar-thumb{
background:var(--secondary);
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:var(--accent);
}

/* =====================================
   BACKGROUND EFFECTS
===================================== */

body::before{

content:"";

position:fixed;
inset:0;

background:

radial-gradient(
circle at 20% 30%,
rgba(83,184,246,.18),
transparent 35%
),

radial-gradient(
circle at 80% 20%,
rgba(132,162,243,.12),
transparent 30%
),

radial-gradient(
circle at 50% 90%,
rgba(50,127,174,.12),
transparent 35%
);

z-index:-2;

}

body::after{

content:"";

position:fixed;

width:200vw;
height:200vh;

top:-50%;
left:-50%;

background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Ccircle cx='5' cy='5' r='1' fill='white' opacity='.6'/%3E%3C/svg%3E");

animation:starDrift 140s linear infinite;

z-index:-3;

opacity:.4;

}

@keyframes starDrift{

from{
transform:translateX(0);
}

to{
transform:translateX(-600px);
}

}

/* =====================================
   GLOBAL TYPOGRAPHY
===================================== */

h1,h2,h3,h4,h5,h6{

font-family:'Orbitron',sans-serif;
font-weight:700;

}

p{

line-height:1.8;
color:#d8d8d8;

}

a{

text-decoration:none;
color:white;

}

img{

max-width:100%;
display:block;

}

.container{

max-width:1400px;
margin:auto;

}
.container1{

max-width:1400px;
margin:auto;

}

section{

padding:120px 8%;
position:relative;

}

/* =====================================
   LOADER
===================================== */

#loader{

position:fixed;
inset:0;

background:black;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

z-index:999999;

transition:1s;

}

#loader img{

width:190px;

filter:
drop-shadow(0 0 20px rgba(83,184,246,.4));

animation:
loaderPulse 2.2s infinite ease-in-out;

}

.loading-text{

margin-top:25px;

font-family:'Orbitron';

letter-spacing:5px;

font-size:.95rem;

color:var(--secondary);

}

@keyframes loaderPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

/* =====================================
   HUD NAVBAR
===================================== */

.navbar{

position:fixed;

top:20px;
left:50%;

transform:translateX(-50%);

width:90%;
max-width:1400px;

background:rgba(7,7,15,.55);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:15px 30px;

display:flex;
justify-content:space-between;
align-items:center;

z-index:1000;

}

.navbar::before{

content:"";

position:absolute;

inset:0;

border-radius:22px;

background:
linear-gradient(
90deg,
transparent,
rgba(83,184,246,.12),
transparent
);

pointer-events:none;

}

.logo{

display:flex;
align-items:center;
gap:14px;

font-family:'Orbitron';
font-weight:800;

}

.logo img{

width:48px;

}

.nav-links{

display:flex;
gap:30px;

}

.nav-links a{

position:relative;

font-weight:500;

transition:.3s;

}

.nav-links a::after{

content:"";

position:absolute;

bottom:-8px;
left:0;

width:0;
height:2px;

background:var(--secondary);

transition:.3s;

}

.nav-links a:hover{

color:var(--secondary);

}

.nav-links a:hover::after{

width:100%;

}

/* =====================================
   HERO
===================================== */

.hero{

min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

text-align:center;

}

.hero-content{

max-width:1000px;

}


.hero-tag{
display:inline-block;
padding:10px 20px;
margin-top:20px;
border:1px solid rgba(132,162,243,.4);
border-radius:999px;
background:rgba(132,162,243,.1);
color:var(--secondary);
margin-bottom:25px;
}

.hero h1{

font-size:clamp(2rem,12vw,7rem);

line-height:0.95;

margin-bottom:30px;

background:linear-gradient(
90deg,
#ffffff,
#84A2F3,
#53B8F6
);

background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

max-width:700px;

margin:auto;

font-size:1.15rem;

}

.hero-buttons{

display:flex;
justify-content:center;
gap:20px;

margin-top:40px;

flex-wrap:wrap;

}

*{
    box-sizing:border-box;
    max-width:100%;
}

/* =====================================
   BUTTONS
===================================== */

.btn{

padding:16px 34px;

border-radius:999px;

font-weight:600;

transition:.35s;

display:inline-block;

}

.btn-primary{

background:var(--gradient-main);

color:white;

box-shadow:var(--shadow-glow);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:
0 0 35px rgba(83,184,246,.6);

}

.btn-secondary{

border:1px solid rgba(255,255,255,.2);

background:rgba(255,255,255,.03);

}

.btn-secondary:hover{

transform:translateY(-5px);

border-color:var(--secondary);

}

/* =====================================
   TITLES
===================================== */

.section-title{

font-size:clamp(2rem,5vw,3.5rem);

text-align:center;

margin-bottom:20px;

}

.section-subtitle{

max-width:850px;

margin:auto;

text-align:center;

margin-bottom:60px;

}

/* =====================================
   GLASS CARDS
===================================== */

.glass-card{

background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(20px);

border-radius:24px;

padding:35px;

transition:.4s;

position:relative;

overflow:hidden;

}

.glass-card::before{

content:"";

position:absolute;

top:-100%;
left:-100%;

width:250%;
height:250%;

background:
linear-gradient(
45deg,
transparent,
rgba(255,255,255,.05),
transparent
);

transition:.8s;

}

.glass-card:hover::before{

top:100%;
left:100%;

}

.glass-card:hover{

transform:translateY(-10px);

border-color:var(--secondary);

box-shadow:var(--shadow-glow);

}

/* =====================================
   GRID SYSTEMS
===================================== */

.about-grid,
.sponsor-grid,
.team-grid,
.gallery-grid{

display:grid;

gap:30px;

}

.about-grid{

grid-template-columns:
repeat(auto-fit,minmax(350px,1fr));

}

.sponsor-grid{

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

}

.team-grid{

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

}

.gallery-grid{

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

}

/* =====================================
   STATS
===================================== */

.stats{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.stat{

padding:35px;

background:rgba(255,255,255,.04);

border-radius:24px;

text-align:center;

border:1px solid rgba(255,255,255,.06);

transition:.3s;

}

.stat:hover{

transform:translateY(-8px);

}

.stat h2{

font-size:3.2rem;

color:var(--secondary);

margin-bottom:10px;

}

/* =====================================
   TEAM CARDS
===================================== */

.team-card{

overflow:hidden;

text-align:center;

}

.team-image{

height:320px;

background:
linear-gradient(
135deg,
#182C6A,
#327FAE
);

display:flex;
justify-content:center;
align-items:center;

}

.team-image img{

width:100%;
height:100%;

object-fit:cover;

}

.role{

color:var(--secondary);

margin:10px 0;

font-weight:600;

}

/* =====================================
   SPONSOR CARDS
===================================== */

.sponsor-card{

text-align:center;

padding:40px;

cursor:pointer;

}

.sponsor-card img{

max-width:180px;

margin:auto auto 25px auto;

filter:
drop-shadow(0 0 12px rgba(255,255,255,.15));

}

/* =====================================
   GALLERY
===================================== */

.gallery-item{

overflow:hidden;

border-radius:24px;

cursor:pointer;

}

.gallery-item img{

width:100%;
height:100%;

object-fit:cover;

transition:.6s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

/* =====================================
   CAR VIEWER
===================================== */

.car-viewer{

height:650px;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(24,44,106,.5),
rgba(56,78,157,.2)
);

border:1px solid rgba(255,255,255,.08);

overflow:hidden;

position:relative;

}

#carCanvas{

width:100%;
height:100%;

}

/* =====================================
   CTA
===================================== */

.cta{

text-align:center;

}

.cta-box{

padding:80px;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(50,127,174,.15),
rgba(83,184,246,.08)
);

border:1px solid rgba(255,255,255,.08);

text-align:center;

}

.cta-box h2{
    font-size:clamp(1.8rem,4vw,3rem);
    line-height:1.1;
   
    margin-bottom:20px;

}

/* =====================================
   FOOTER
===================================== */

footer{

padding:70px 8%;

text-align:center;

border-top:1px solid rgba(255,255,255,.08);

background:
rgba(255,255,255,.02);

}

footer p{

color:#999;

margin-top:10px;

}

/* =====================================
   SCROLL ANIMATIONS
===================================== */

.reveal{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* =====================================
   TEAM NETWORK
===================================== */

.team-network{

position:relative;

height:1000px;

max-width:1400px;

margin:80px auto;

}

.car-center{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:min(800px,60vw);

z-index:2;

}

.car-center img{

width:100%;

filter:
drop-shadow(0 0 40px rgba(132,162,243,.5));

}

.team-node{

position:absolute;

width:240px;

text-align:center;

z-index:3;

}

.node-dot{

width:18px;
height:18px;

margin:auto;

border-radius:50%;

background:#84A2F3;

box-shadow:
0 0 25px #84A2F3;

animation:pulseNode 2s infinite;

}

@keyframes pulseNode{

0%{
transform:scale(1);
}

50%{
transform:scale(1.4);
}

100%{
transform:scale(1);
}

}

.team-node h3{

margin-top:15px;

font-size:1.3rem;

}

.team-node p{

font-size:.95rem;

color:#c7d4ff;

}


/* POSITIONING */

.aadya{

top:40px;

left:50%;

transform:translateX(-50%);

}

.vani{

left:0;

top:50%;

transform:translateY(-50%);

}

.vedaant{

right:0;

top:50%;

transform:translateY(-50%);

}

.saanvi{

bottom:40px;

left:50%;

transform:translateX(-50%);

}

/* POPUP */

.node-popup{

position:absolute;

top:120%;

left:50%;

transform:translateX(-50%);

width:280px;

padding:20px;

background:rgba(10,10,20,.95);

backdrop-filter:blur(20px);

border-radius:20px;

border:1px solid rgba(132,162,243,.3);

opacity:0;

pointer-events:none;

transition:.3s;

}

.team-node:hover .node-popup{

opacity:1;

}

.node-popup h4{

color:#84A2F3;

margin-bottom:10px;

}

/* CONNECTING LINES */

.team-network::before{

content:"";

position:absolute;

left:50%;

top:160px;

bottom:160px;

width:2px;

background:
linear-gradient(
transparent,
#84A2F3,
transparent
);

transform:translateX(-50%);

opacity:.4;

}

.team-network::after{

content:"";

position:absolute;

top:50%;

left:180px;

right:180px;

height:2px;

background:
linear-gradient(
to right,
transparent,
#84A2F3,
transparent
);

opacity:.4;

}
.mobile-team{
    display:none;
}

.mobile-member{

    background:#0B1025;

    border:1px solid rgba(132,162,243,.25);

    border-radius:25px;

    overflow:hidden;

    margin-bottom:25px;

    cursor:pointer;

}

.mobile-member img{

    width:100%;

    height:350px;

    object-fit:cover;

    display:block;

}

.mobile-member-info{

    max-height:0;

    overflow:hidden;

    transition:.4s ease;

    background:#111A3D;

    padding:0 25px;

}

.mobile-member.active .mobile-member-info{

    max-height:400px;

    padding:25px;

}

.mobile-role{

    color:#84A2F3;

    font-size:.85rem;

    letter-spacing:2px;

}

.mobile-member-info h3{

    margin:10px 0;

}

.mobile-member-info p{

    color:#d7d7d7;

    line-height:1.8;

}


/* MOBILE MENU */

.menu-toggle{
    display:none;
    font-size:2rem;
    color:#84A2F3;
    cursor:pointer;
}

@media (max-width:900px){


    .placement-wrapper{
        display:block;
    }

    .placement-info{
        display:none;
    }

    .mobile-placement{
        display:flex;
        flex-direction:column;
        gap:30px;
        margin-top:30px;
    }

    .mobile-tier-card{

        background:rgba(255,255,255,.05);

        border:1px solid rgba(132,162,243,.2);

        border-radius:25px;

        overflow:hidden;

    }

    .mobile-tier-card img{
        width:100%;
        display:block;
    }

    .mobile-tier-content{
        padding:25px;
    }

    .mobile-tier-content h3{
        color:#84A2F3;
        margin-bottom:10px;
    }


.member-row{
grid-template-columns:1fr;
gap:40px;
margin:80px 0;
}

.member-row.reverse .member-image,
.member-row.reverse .member-content{
order:unset;
}

.member-content h2{
font-size:2rem;
}

.navbar{
    justify-content:space-between;
}

.menu-toggle{
    display:block;
    z-index:10002;
}

.nav-links{

    position:fixed;

    top:0;
    right:-300px;

    width:300px;
    height:100vh;

    background:#0b1025;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:30px;

    transition:right .4s ease;

    z-index:10001;

    box-shadow:
    -10px 0 40px rgba(132,162,243,.25);

}

.nav-links.active{

    right:0;

}

.nav-links a{

    color:white;
    font-size:1.2rem;
    text-decoration:none;

}
.team-network{
display:none;
}

}




@media (max-width:682px){

.hero{
    min-height:auto;
    padding-top:140px;
}

.hero-content{
    width:100%;
}

.hero h1{
    font-size:clamp(2.5rem,8vw,7rem);
    line-height:1;
    max-width:100%;
}

.hero p{
    font-size:1rem;
    width:100%;
    padding:0 10px;
}
.team-network{
display:none;
}

.mobile-team{
        display:block;
        gap:25px;
    }

    .team-showcase{
        display:none;
    }

    .member-image{
        height:420px;
    }


}

.vani-photo{
    object-position:center 20%;
}


/* =====================================
   MEMBER PROFILES
===================================== */

.member-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

margin:140px 0;

}

.member-row.reverse .member-image{

order:2;

}

.member-row.reverse .member-content{

order:1;

}

.member-image img{

width:100%;

border-radius:30px;

border:1px solid rgba(132,162,243,.2);

box-shadow:
0 0 50px rgba(132,162,243,.15);

transition:.4s;

}

.member-image img:hover{

transform:scale(1.02);

}

.member-role{

display:inline-block;

padding:10px 20px;

border-radius:999px;

background:rgba(132,162,243,.15);

color:#84A2F3;

font-family:'Orbitron';

letter-spacing:2px;

margin-bottom:20px;

}

.member-content h2{

font-size:3rem;

margin-bottom:20px;

}

.member-content p{

font-size:1.1rem;

line-height:1.9;

max-width:600px;

}



/* CLOSE BUTTON STYLE */

.menu-toggle.active{

transform:rotate(90deg);

}

/* ==========================================
   MOBILE FIXES
========================================== */

@media(max-width:480px){

html,
body{
    overflow-x:hidden;
    width:100%;
}

*{
    max-width:100%;
}

section{
    padding:80px 5%;
}

.hero h1{
    font-size:clamp(2rem,10vw,4rem);
    
}

.cta-box h2{
    font-size:clamp(2rem,9vw,3rem);
    line-height:1.1;
}

.about-grid,
.team-grid,
.sponsor-grid,
.values-grid{
    grid-template-columns:1fr;
}

.glass-card,
.team-card,
.sponsor-card,
.value-card{
    width:100%;
}

img{
    max-width:100%;
    height:auto;
}

}

/* ==========================================
   SPONSORSHIP PAGE
========================================== */

/* HERO */

.sponsor-hero{

    min-height:90vh;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding-top:140px;

}

.sponsor-hero h1{

    font-size:clamp(3rem,7vw,6rem);

    margin:25px 0;

    line-height:1.1;

    background:linear-gradient(
    90deg,
    #ffffff,
    #84A2F3,
    #53B8F6
    );

    -webkit-background-clip:text;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

}

.hero-description{

    max-width:800px;

    margin:auto;

    color:#d7d7d7;

    line-height:1.8;

    font-size:1.1rem;

}

/* HERO STATS */

.hero-stats{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-top:60px;

}

.hero-stat{

    width:180px;

    padding:30px;

    border-radius:25px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(132,162,243,.2);

    backdrop-filter:blur(15px);

}

.hero-stat h2{

    font-size:3rem;

    color:#84A2F3;

    margin-bottom:10px;

}

/* TIER GRID */

.tier-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

    margin-top:50px;

}

.tier-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(132,162,243,.15);

    border-radius:30px;

    padding:40px;

    text-align:center;

    transition:.4s;

    backdrop-filter:blur(20px);

}

.tier-card:hover{

    transform:translateY(-12px);

    border-color:#84A2F3;

    box-shadow:
    0 0 30px rgba(132,162,243,.25);

}

.tier-name{

    font-family:'Orbitron',sans-serif;

    letter-spacing:2px;

    color:#84A2F3;

    margin-bottom:20px;

}

.tier-price{

    font-size:3rem;

    font-weight:700;

    margin-bottom:25px;

}

.tier-card ul{

    list-style:none;

}

.tier-card li{

    margin:15px 0;

    color:#d7d7d7;

}

/* FEATURED */

.featured{

    transform:scale(1.05);

    border:2px solid #84A2F3;

    box-shadow:
    0 0 40px rgba(132,162,243,.35);

}

.cosmic{

    background:
    linear-gradient(
    135deg,
    rgba(132,162,243,.12),
    rgba(83,184,246,.05)
    );

}

/* BENEFITS TABLE */

.benefits-table{

    border-radius:25px;

    overflow:hidden;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(132,162,243,.15);

}

.table-row{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr 1fr;

    text-align:center;

}

.table-row div{

    padding:22px;

    border-bottom:
    1px solid rgba(255,255,255,.08);

}

.table-header{

    background:
    rgba(132,162,243,.15);

    font-family:'Orbitron';

}

/* BUDGET */

.budget-item{

    margin-bottom:35px;

}

.budget-label{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

}

.budget-bar{

    height:14px;

    background:
    rgba(255,255,255,.08);

    border-radius:999px;

    overflow:hidden;

}

.budget-fill{

    height:100%;

    border-radius:999px;

    background:
    linear-gradient(
    90deg,
    #327FAE,
    #84A2F3,
    #53B8F6
    );

}

/* SPONSOR LOGOS */

.sponsor-card{

    border:1px solid rgba(132,162,243,.15);

}

.sponsor-card:hover{

    box-shadow:
    0 0 30px rgba(132,162,243,.2);

}

/* CTA */

.cta-box{

    background:
    linear-gradient(
    135deg,
    rgba(132,162,243,.15),
    rgba(83,184,246,.08)
    );

    border:1px solid rgba(132,162,243,.2);

}

/* MOBILE */

@media(max-width:768px){

    .sponsor-hero{

        padding-top:180px;

        min-height:80vh;

    }

    .hero-stat{

        width:100%;

    }

    .featured{

        transform:none;

    }

    .table-row{

        grid-template-columns:
        1.8fr .8fr .8fr .8fr;

        font-size:.8rem;

    }

    .table-row div{

        padding:12px 8px;

    }

    .tier-price{

        font-size:2.3rem;

    }

}
/* ==========================================
   SPONSOR PLACEMENT
========================================== */

.sponsor-placement{

    padding:120px 8%;

}

.placement-wrapper{

    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:60px;

    align-items:center;

}

.car-render{

    position:relative;

    background:
    rgba(255,255,255,.04);

    border:1px solid rgba(132,162,243,.15);

    border-radius:30px;

    padding:40px;

    overflow:hidden;

}

.car-render img{

    width:100%;

    display:block;

}

.logo-spot{

    position:absolute;

    background:
    rgba(132,162,243,.95);

    color:white;

    padding:8px 14px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:600;

    box-shadow:
    0 0 20px rgba(132,162,243,.5);

}

.title-partner{

    top:35%;
    left:40%;

}

.side-pod{

    top:55%;
    left:55%;

}

.rear-wing{

    top:22%;
    right:18%;

}

.nose{

    bottom:30%;
    left:15%;

}

.placement-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.placement-card{

    padding:30px;

    border-radius:25px;

    background:
    rgba(255,255,255,.05);

    border:1px solid rgba(132,162,243,.15);

}

.placement-card h3{

    color:#84A2F3;

    margin-bottom:15px;

}
/* ==========================================
   CAR SHOWCASE
========================================== */

.car-showcase{

    padding:120px 8%;

    text-align:center;

}

.car-showcase model-viewer{

    width:100%;

    height:600px;

    margin-top:40px;

    border-radius:30px;

    background:
    radial-gradient(
        circle,
        rgba(132,162,243,.08),
        transparent 70%
    );

}

@media(max-width:768px){

    .car-showcase model-viewer{

        height:400px;

    }

}

/* ==========================================
   NOVA MOBILE MENU
========================================== */

.menu-toggle{

    display:none;

    width:55px;
    height:55px;

    border-radius:50%;

    background:
    rgba(132,162,243,.1);

    border:
    1px solid rgba(132,162,243,.3);

    backdrop-filter:blur(15px);

    cursor:pointer;

    position:relative;

    box-shadow:
    0 0 25px rgba(132,162,243,.15);

}

/* HAMBURGER LINES */

.menu-toggle span{

    position:absolute;

    left:50%;

    width:26px;
    height:3px;

    background:#84A2F3;

    border-radius:999px;

    transform:
    translateX(-50%);

    transition:.35s ease;

    box-shadow:
    0 0 10px rgba(132,162,243,.8);

}

.menu-toggle span:nth-child(1){

    top:18px;

}

.menu-toggle span:nth-child(2){

    top:26px;

}

.menu-toggle span:nth-child(3){

    top:34px;

}

/* OPEN STATE */

.menu-toggle.active span:nth-child(1){

    top:26px;

    transform:
    translateX(-50%)
    rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    top:26px;

    transform:
    translateX(-50%)
    rotate(-45deg);

}

/* MOBILE NAVIGATION */

@media(max-width:900px){

    .menu-toggle{

        display:block;

        z-index:10001;

    }

    .nav-links{

        position:fixed;

        top:0;
        right:-100%;

        width:80%;
        max-width:350px;

        height:100vh;

        background:
        rgba(5,10,30,.97);

        backdrop-filter:blur(25px);

        display:flex;

        flex-direction:column;

        justify-content:center;
        align-items:center;

        gap:35px;

        transition:.4s ease;

        z-index:10000;

        border-left:
        1px solid rgba(132,162,243,.15);

    }

    .nav-links.active{

        right:0;

    }

    .nav-links a{

        font-size:1.2rem;

        font-family:'Orbitron',sans-serif;

        color:white;

        transition:.3s;

    }

    .nav-links a:hover{

        color:#84A2F3;

        text-shadow:
        0 0 12px rgba(132,162,243,.8);

    }

}

/* DESKTOP */

@media(min-width:901px){

    .menu-toggle{

        display:none;

    }

}
/* ==========================================
   MODEL VIEWER CONTAINER
========================================== */

.car-viewer-container{

    position:relative;

    width:100%;

    height:700px;

    border-radius:30px;

    overflow:hidden;

    background:
    radial-gradient(
        circle at center,
        rgba(255,255,255,.15) 0%,
    rgba(220,235,255,.08) 45%,
    rgba(132,162,243,.03) 100%
    );

    border:
    1px solid rgba(132,162,243,.3);

    box-shadow:
    0 0 50px rgba(132,162,243,.25);

}

.car-viewer-container model-viewer{

    width:100%;
    height:100%;

    background:transparent;

}
.car-viewer-container::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:80px;

    width:500px;
    height:120px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
    radial-gradient(
        ellipse,
        rgba(132,162,243,.45),
        transparent 70%
    );

    filter:blur(25px);

    pointer-events:none;

}