@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* ========================================= */
/* F1 LOADING SCREEN                         */
/* ========================================= */

#f1-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0A0A0F 0%, #15151E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#f1-loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
}

.f1-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

/* Logo Animation */
.f1-logo-container {
    animation: logoFloat 2s ease-in-out infinite;
}

.loading-logo {
    width: 200px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(225, 6, 0, 0.6));
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* F1 Starting Lights Grid */
.f1-lights-container {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(21, 21, 30, 0.8);
    border: 3px solid var(--f1-red);
    border-radius: 15px;
    box-shadow: 0 0 40px rgba(225, 6, 0, 0.4);
    position: relative;
}

/* Racing stripe behind lights */
.f1-lights-container::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--f1-yellow) 20%, 
        var(--f1-yellow) 80%, 
        transparent);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* Individual Light */
.f1-light {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #2a2a2a;
    border: 3px solid #444;
    box-shadow: 
        inset 0 0 10px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.2s ease;
}

/* Light Inner Glow */
.f1-light::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Red State */
.f1-light.red {
    background: radial-gradient(circle, #FF0000, #8B0000);
    border-color: #FF0000;
    box-shadow: 
        0 0 30px rgba(255, 0, 0, 0.8),
        0 0 60px rgba(255, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 100, 100, 0.5);
    animation: redPulse 0.5s ease-in-out;
}

.f1-light.red::before {
    opacity: 1;
}

@keyframes redPulse {
    0% {
        transform: scale(1);
        box-shadow: 
            0 0 20px rgba(255, 0, 0, 0.6),
            0 0 40px rgba(255, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 
            0 0 40px rgba(255, 0, 0, 1),
            0 0 80px rgba(255, 0, 0, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 
            0 0 30px rgba(255, 0, 0, 0.8),
            0 0 60px rgba(255, 0, 0, 0.4);
    }
}

/* Green State - All lights go green together */
.f1-light.green {
    background: radial-gradient(circle, #00FF00, #008000);
    border-color: #00FF00;
    box-shadow: 
        0 0 40px rgba(0, 255, 0, 1),
        0 0 80px rgba(0, 255, 0, 0.6),
        inset 0 0 20px rgba(100, 255, 100, 0.5);
    animation: greenFlash 0.3s ease-in-out;
}

.f1-light.green::before {
    opacity: 1;
}

@keyframes greenFlash {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 
            0 0 60px rgba(0, 255, 0, 1),
            0 0 100px rgba(0, 255, 0, 0.8);
    }
    100% {
        transform: scale(1);
    }
}

/* Loading Text */
.loading-text {
    font-family: "Orbitron", sans-serif;
    font-size: 1.2rem;
    color: var(--f1-silver);
    text-transform: uppercase;
    letter-spacing: 3px;
    display: flex;
    gap: 0.3rem;
}

.loading-dot {
    animation: dotBounce 1.4s infinite;
}

.loading-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotBounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    40% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .f1-lights-container {
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .f1-light {
        width: 40px;
        height: 40px;
    }
    
    .loading-logo {
        width: 150px;
    }
    
    .f1-loading-container {
        gap: 2rem;
    }
}

@media screen and (max-width: 480px) {
    .f1-lights-container {
        gap: 0.8rem;
        padding: 1rem;
    }
    
    .f1-light {
        width: 35px;
        height: 35px;
    }
    
    .loading-logo {
        width: 120px;
    }
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: "Rajdhani", sans-serif;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    background: #0A0A0F;
}

/* Racing stripes effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(225, 6, 0, 0.03) 100px,
            rgba(225, 6, 0, 0.03) 102px
        );
    pointer-events: none;
    z-index: 0;
}

:root{
    --base-font-size: 16px;
    --nav-height: 90px;
    --f1-red: #E10600;
    --f1-dark: #15151E;
    --f1-darker: #0A0A0F;
    --f1-silver: #C0C0C0;
    --f1-white: #FFFFFF;
    --f1-yellow: #FFD700;
    font-size: var(--base-font-size);
}

/* ========================================= */
/* NAVBAR STYLES                             */
/* ========================================= */

nav{
    width: 100%;
    height: var(--nav-height);
    background: linear-gradient(135deg, rgba(21, 21, 30, 0.95), rgba(10, 10, 15, 0.95));
    border-bottom: 3px solid var(--f1-red);
    /* CHANGED FROM fixed TO absolute SO IT SCROLLS AWAY */
    position: absolute; 
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    backdrop-filter: blur(10px);
    z-index: 999;
    transition: transform 0.25s ease;
    box-shadow: 0 4px 20px rgba(225, 6, 0, 0.3);
}

nav a {
    color: var(--f1-silver);
    text-decoration: none;
}

nav #navlogo{
    width: 140px;
    display: flex;
    place-content: center;
    
}

nav #navlogo img{
    width: 100%;
    height: auto;
}

/* Desktop Links */
#nav-links-desktop{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

#nav-links-desktop a{
    font-family: "Orbitron", sans-serif;
    color: var(--f1-silver);
    font-size: 0.95rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-wrap: nowrap;
    position: relative;
    padding: 8px 0;
}

#nav-links-desktop a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--f1-red);
    transition: width 0.3s ease;
}

#nav-links-desktop a:hover{
    color: var(--f1-red);
    text-shadow: 0 0 10px rgba(225, 6, 0, 0.5);
}

#nav-links-desktop a:hover::after {
    width: 100%;
}

/* Hamburger Menu */
#hamburger-menu {
    display: none; 
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1000;
}

.hb-line {
    width: 30px;
    height: 3px;
    background-color: var(--f1-white);
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Mobile Menu Container */
#mobile-menu {
    /* CHANGED FROM fixed TO absolute SO IT SCROLLS AWAY WITH NAV */
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    height: 0; 
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(15px);
    overflow: hidden;
    transition: height 0.4s ease-in-out;
    z-index: 998;
    border-bottom: 2px solid var(--f1-red);
}

#mobile-menu.active {
    height: 350px; 
}

#nav-links-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    gap: 1.5rem;
}

#nav-links-mobile li a {
    font-family: "Orbitron", sans-serif;
    color: var(--f1-white);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.3s;
}

#nav-links-mobile li a:hover {
    color: var(--f1-red);
    text-shadow: 0 0 10px rgba(225, 6, 0, 0.8);
}


/* ========================================= */
/* GENERAL STYLES                            */
/* ========================================= */

p{
    letter-spacing: 0.05rem;
    line-height: 1.8rem;
    color: var(--f1-silver);
}

section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

section .sec-para{
    flex: 1;
    font-weight: 400;
    font-size: 1.0625rem;
    letter-spacing: 0.05rem;
    text-align: justify;
    line-height: 1.8rem;
    color: var(--f1-silver);
}

.sec-heading{
    font-family: "Orbitron", sans-serif;
    font-weight: 800;
    font-size: 3.125rem;
    letter-spacing: 0.15rem;
    color: var(--f1-white);
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--f1-white), var(--f1-silver));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    text-shadow: 0 0 30px rgba(225, 6, 0, 0.3);
    text-align: center;
}

.sec-para{
    font-family: "Rajdhani", sans-serif;
}

#reg-head{
    font-family: "Orbitron", sans-serif;
    backdrop-filter: blur(10px);
    font-size: 2.88rem;
    font-weight: 800;
    color: var(--f1-white);
    width: 100%;
    text-align: center;
    padding: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* ========================================= */
/* HERO SECTION                              */
/* ========================================= */
/* ========================================= */
/* F1 HERO ENHANCEMENTS                      */
/* ========================================= */

/* F1 Racing Grid Background */

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 50px,
            rgba(225, 6, 0, 0.08) 50px,
            rgba(225, 6, 0, 0.08) 51px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 50px,
            rgba(225, 6, 0, 0.08) 50px,
            rgba(225, 6, 0, 0.08) 51px
        );
    pointer-events: none;
    animation: grid-scroll 20s linear infinite;
    z-index: 0;
}

@keyframes grid-scroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* F1 Car Decorations */
.hero-decoration {
    position: absolute;
    pointer-events: none;
    opacity: 0.3;
    z-index: 1;
}

.hero-car-left {
    bottom: 15%;
    left: 5%;
    width: 250px;
    height: auto;
    animation: float-left 6s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(225, 6, 0, 0.6));
}

.hero-car-right {
    top: 20%;
    right: 5%;
    width: 220px;
    height: auto;
    animation: float-right 7s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(225, 6, 0, 0.6));
}

@keyframes float-left {
    0%, 100% { 
        transform: translateY(0px) translateX(0px);
        opacity: 0.3;
    }
    50% { 
        transform: translateY(-20px) translateX(10px);
        opacity: 0.5;
    }
}

@keyframes float-right {
    0%, 100% { 
        transform: translateY(0px) translateX(0px);
        opacity: 0.3;
    }
    50% { 
        transform: translateY(-15px) translateX(-10px);
        opacity: 0.5;
    }
}

/* Racing Checkered Flags */
.racing-flag {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
    animation: wave-flag 2s ease-in-out infinite;
}

.flag-left {
    top: 10%;
    left: 8%;
    animation-delay: 0s;
}

.flag-right {
    bottom: 10%;
    right: 8%;
    animation-delay: 1s;
}

@keyframes wave-flag {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.1); }
}

/* Speed Lines Effect */
.speed-lines {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(225, 6, 0, 0.6) 50%, 
        transparent 100%);
    animation: speed-line 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.speed-lines:nth-child(5) {
    top: 45%;
    animation-delay: 0.3s;
    height: 2px;
}

.speed-lines:nth-child(6) {
    top: 55%;
    animation-delay: 0.6s;
    height: 2px;
}

@keyframes speed-line {
    0% { 
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% { 
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Tire Marks Decoration */
.tire-marks {
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    height: 200px;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 8px,
            rgba(255, 255, 255, 0.02) 8px,
            rgba(255, 255, 255, 0.02) 12px
        );
    transform: skewY(-3deg);
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
}

/* F1-Themed Countdown Redesign */
#countdown {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 650px;
    max-width: 95%;
    height: auto;
    gap: 0;
    font-family: "Orbitron", sans-serif;
    background: linear-gradient(135deg, rgba(21, 21, 30, 0.9), rgba(10, 10, 15, 0.9));
    border: 3px solid var(--f1-red);
    border-radius: 15px;
    padding: 20px 15px;
    box-shadow: 
        0 0 40px rgba(225, 6, 0, 0.5),
        inset 0 0 30px rgba(225, 6, 0, 0.1);
    position: relative;
    overflow: hidden;
}

#countdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--f1-yellow), transparent);
    animation: racing-light 3s linear infinite;
}

@keyframes racing-light {
    0% { left: -100%; }
    100% { left: 200%; }
}

.count-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.pit-stop-line {
    width: 3px;
    height: 80px;
    background: linear-gradient(180deg, 
        transparent, 
        var(--f1-red) 20%, 
        var(--f1-yellow) 50%, 
        var(--f1-red) 80%, 
        transparent);
    margin: 0 5px;
    box-shadow: 0 0 10px rgba(225, 6, 0, 0.5);
}

#countdown .count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--f1-white);
    font-family: "Orbitron", sans-serif;
    font-weight: 700;
    position: relative;
}

.lap-indicator {
    font-size: 0.65rem;
    color: var(--f1-yellow);
    letter-spacing: 2px;
    font-weight: 800;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    margin-bottom: 5px;
}

#countdown .count p:nth-child(2) {
    font-size: 2.8rem;
    color: var(--f1-red);
    text-shadow: 
        0 0 15px rgba(225, 6, 0, 0.8),
        0 0 30px rgba(225, 6, 0, 0.4);
    line-height: 1;
    font-weight: 900;
    letter-spacing: 2px;
}

#countdown .count p:nth-child(3) {
    font-size: 0.75rem;
    color: var(--f1-silver);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

/* Position Indicator (P1) */
.position-indicator {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(225, 6, 0, 0.2), rgba(139, 0, 0, 0.2));
    border: 2px solid var(--f1-yellow);
    border-radius: 50px;
    padding: 12px 30px;
    font-family: "Orbitron", sans-serif;
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.3),
        inset 0 0 20px rgba(225, 6, 0, 0.2);
    animation: pulse-position 2s ease-in-out infinite;
}

@keyframes pulse-position {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    }
}

.position-number {
    font-size: 2rem;
    font-weight: 900;
    color: var(--f1-yellow);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    letter-spacing: 2px;
}

.position-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--f1-white);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Mobile Responsive Updates */
@media screen and (max-width: 900px) {
    .hero-car-left,
    .hero-car-right,
    .racing-flag,
    .tire-marks,
    .speed-lines {
        display: none;
    }
    
    #countdown {
        width: 100%;
        padding: 15px 10px;
    }
    
    #countdown .count p:nth-child(2) {
        font-size: 2rem;
    }
    
    .pit-stop-line {
        height: 60px;
        margin: 0 3px;
    }
    
    .position-indicator {
        padding: 10px 20px;
        gap: 10px;
    }
    
    .position-number {
        font-size: 1.5rem;
    }
    
    .position-text {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 480px) {
    #countdown .count p:nth-child(2) {
        font-size: 1.8rem;
    }
    
    .lap-indicator {
        font-size: 0.55rem;
    }
    
    #countdown .count p:nth-child(3) {
        font-size: 0.65rem;
    }
}
#intro{
    height: 100vh;
    background-image: url(ChatGPT\ Image\ Dec\ 27\,\ 2025\,\ 12_59_27\ AM.png);
    /* background: 
        radial-gradient(ellipse at center, rgba(225, 6, 0, 0.15) 0%, transparent 70%),
        linear-gradient(135deg, #0A0A0F 0%, #15151E 50%, #0A0A0F 100%); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
    
#intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(225, 6, 0, 0.03) 2px,
            rgba(225, 6, 0, 0.03) 4px
        );
    pointer-events: none;
}
    
#intro h1{
    font-family: "Orbitron", sans-serif;
}

#intro-contents{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem; 
    gap: 2.5rem;
    z-index: 1;
    width: 100%;
    padding: 0 20px;
}

#hero-heading {
    display: flex;               
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap; 
    justify-content: center;
}

#intro-heading-l1{
    font-size: 5.4rem;
    font-weight: 900;
    margin: 0;
    color: var(--f1-white);
    letter-spacing: 0.8rem;
    text-transform: uppercase;
    text-shadow: 
        0 0 20px rgba(225, 6, 0, 0.5),
        0 0 40px rgba(225, 6, 0, 0.3);
    text-align: center;
}

#intro-heading-l2{
    font-size: 5.7rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--f1-red) 0%, #8B0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: 0.8rem;
    text-transform: uppercase;
    filter: drop-shadow(0 0 30px rgba(225, 6, 0, 0.8));
    text-align: center;
}

#countdown{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 500px;
    max-width: 90%;
    height: 80px;
    gap: 1rem;
    font-family: "Orbitron", sans-serif;
    transform: scale(80%) translateY(-10px);
    background: rgba(21, 21, 30, 0.5);
    border: 2px solid var(--f1-red);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 30px rgba(225, 6, 0, 0.3);
}

#countdown .seperator{
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--f1-red), transparent);
    height: 60%;
}

#countdown .count{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    color: var(--f1-white);
    font-family: "Orbitron", sans-serif;
    font-weight: 700;
    flex: 1;
}

#countdown .count p:nth-child(1){
    font-size: 2.2rem;
    color: var(--f1-red);
    text-shadow: 0 0 10px rgba(225, 6, 0, 0.5);
}

#countdown .count p:nth-child(2){
    font-size: 0.9rem;
    color: var(--f1-silver);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================= */
/* ABOUT SECTION                             */
/* ========================================= */

#about{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 5rem;
    background: linear-gradient(135deg, #0A0A0F 0%, #15151E 50%, #0A0A0F 100%);
    background-position: center;
    background-size: cover;
    position: relative;
}

#about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--f1-red), transparent);
}

#about #aboutimg{
    flex: 1;
    width: 100%;
}

#about #aboutimg img{
    width: 100%;
    border: 3px solid var(--f1-red);
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(225, 6, 0, 0.3);
}

#about h1{
    color: var(--f1-white);
}

#about #aboutus-content{
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    min-width: 300px;
    width: 100%;
}

#about #aboutus-content p{
    color: var(--f1-silver);
    line-height: 1.8rem;
}

.about-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    width: 100%;
    max-width: 1200px;
}

/* ========================================= */
/* WHO CAN PARTICIPATE                       */
/* ========================================= */

section#who-can-participate{
    background: linear-gradient(135deg, rgba(225, 6, 0, 0.1) 0%, rgba(10, 10, 15, 1) 50%, rgba(225, 6, 0, 0.1) 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 3rem;
    padding: 50px;
    min-height: 300px;
    
    position: relative;
    border-top: 3px solid var(--f1-red);
    border-bottom: 3px solid var(--f1-red);
}

section#who-can-participate .blender{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(180deg, #0A0A0F 0%, transparent 100%);
}

section#who-can-participate h1{
    max-width: 450px;
    width: 100%;
    color: var(--f1-white);
    z-index: 2;
}

section#who-can-participate ul>li{
    color: var(--f1-silver);
    list-style: none;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    padding-left: 30px;
    position: relative;
}

section#who-can-participate ul>li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--f1-red);
    font-size: 0.8rem;
}

section.continuos-bg{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

/* ========================================= */
/* WHY ATTEND                                */
/* ========================================= */

section#why-attend{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #0A0A0F 0%, #15151E 50%, #0A0A0F 100%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

section#why-attend .sec-heading{
    color: var(--f1-white);
}

#why-attend-grid{
    width: 100%;
    display: flex;
    flex-direction: row; 
    justify-content: center; 
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    color: var(--f1-white);
    text-align: center;
}

/* #why-attend-grid .why-attend-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    height: 330px;
    width: 380px;
    max-width: 380px;
    background: rgba(21, 21, 30, 0.6);
    backdrop-filter: blur(15px);
    padding: 2.2rem 2rem;
    border: 2px solid var(--f1-red);
    border-radius: 15px;
    position: relative;
    transition: all 0.3s ease;
}

#why-attend-grid .why-attend-card p{
    text-align: justify;
    color: var(--f1-silver);
    line-height: 1.8rem;
}

#why-attend-grid .why-attend-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--f1-red), transparent);
}

#why-attend-grid .why-attend-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(225, 6, 0, 0.4);
    border-color: var(--f1-yellow);
}

.why-attend-card h2{
    font-family: "Orbitron", sans-serif;
    color: var(--f1-red);
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
} */
/* ========================================= */
/* WHY ATTEND - F1 TEAM COLORS               */
/* ========================================= */

/* ========================================= */
/* WHY ATTEND - F1 CARDS WITH ICON BADGES    */
/* ========================================= */

#why-attend-grid .why-attend-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    height: 380px;
    width: 380px;
    max-width: 380px;
    background: rgba(21, 21, 30, 0.85);
    backdrop-filter: blur(15px);
    padding: 3.5rem 2rem 2.2rem 2rem;
    border: 3px solid var(--f1-red);
    border-radius: 15px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: visible;
}

/* Icon Badge at Top */
.why-attend-card .card-icon-badge {
    position: absolute;
    top: -35px;
    right: -15px;
    width: 70px;
    height: 70px;
    background: linear-gradient(145deg, var(--f1-dark), var(--f1-darker));
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--f1-red);
    box-shadow: 
        0 0 20px rgba(225, 6, 0, 0.5),
        0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 10;
    transition: all 0.4s ease;
}

.why-attend-card .card-icon-badge svg {
    width: 35px;
    height: 35px;
    color: var(--f1-red);
    filter: drop-shadow(0 0 5px rgba(225, 6, 0, 0.5));
    transition: all 0.3s ease;
}

/* F1 Team Color Accents - Icon Badge Colors */
#why-attend-grid .why-attend-card:nth-child(1) {
    border-color: #E10600;
}
#why-attend-grid .why-attend-card:nth-child(1) .card-icon-badge {
    border-color: #E10600;
}
#why-attend-grid .why-attend-card:nth-child(1) .card-icon-badge svg {
    color: #E10600;
}

#why-attend-grid .why-attend-card:nth-child(2) {
    border-color: #00D2BE;
}
#why-attend-grid .why-attend-card:nth-child(2) .card-icon-badge {
    border-color: #00D2BE;
}
#why-attend-grid .why-attend-card:nth-child(2) .card-icon-badge svg {
    color: #00D2BE;
}

#why-attend-grid .why-attend-card:nth-child(3) {
    border-color: #0600EF;
}
#why-attend-grid .why-attend-card:nth-child(3) .card-icon-badge {
    border-color: #0600EF;
}
#why-attend-grid .why-attend-card:nth-child(3) .card-icon-badge svg {
    color: #0600EF;
}

#why-attend-grid .why-attend-card:nth-child(4) {
    border-color: #FF8700;
}
#why-attend-grid .why-attend-card:nth-child(4) .card-icon-badge {
    border-color: #FF8700;
}
#why-attend-grid .why-attend-card:nth-child(4) .card-icon-badge svg {
    color: #FF8700;
}

#why-attend-grid .why-attend-card:nth-child(5) {
    border-color: #006F62;
}
#why-attend-grid .why-attend-card:nth-child(5) .card-icon-badge {
    border-color: #006F62;
}
#why-attend-grid .why-attend-card:nth-child(5) .card-icon-badge svg {
    color: #006F62;
}

#why-attend-grid .why-attend-card:nth-child(6) {
    border-color: #C92D4B;
}
#why-attend-grid .why-attend-card:nth-child(6) .card-icon-badge {
    border-color: #C92D4B;
}
#why-attend-grid .why-attend-card:nth-child(6) .card-icon-badge svg {
    color: #C92D4B;
}

#why-attend-grid .why-attend-card:nth-child(7) {
    border-color: #2B4562;
}
#why-attend-grid .why-attend-card:nth-child(7) .card-icon-badge {
    border-color: #2B4562;
}
#why-attend-grid .why-attend-card:nth-child(7) .card-icon-badge svg {
    color: #2B4562;
}

#why-attend-grid .why-attend-card:nth-child(8) {
    border-color: #B6BABD;
}
#why-attend-grid .why-attend-card:nth-child(8) .card-icon-badge {
    border-color: #B6BABD;
}
#why-attend-grid .why-attend-card:nth-child(8) .card-icon-badge svg {
    color: #B6BABD;
}

#why-attend-grid .why-attend-card:nth-child(9) {
    border-color: #37BEDD;
}
#why-attend-grid .why-attend-card:nth-child(9) .card-icon-badge {
    border-color: #37BEDD;
}
#why-attend-grid .why-attend-card:nth-child(9) .card-icon-badge svg {
    color: #37BEDD;
}

/* Top Accent Line */
#why-attend-grid .why-attend-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: inherit;
    border-radius: 15px 15px 0 0;
}

/* Radial Glow Effect */
#why-attend-grid .why-attend-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(225, 6, 0, 0.15), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 15px;
}

#why-attend-grid .why-attend-card:hover::after {
    opacity: 1;
}

/* Hover Effects */
#why-attend-grid .why-attend-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 15px 50px rgba(225, 6, 0, 0.5);
}

#why-attend-grid .why-attend-card:hover .card-icon-badge {
    transform: rotate(360deg) scale(1.1);
    box-shadow: 
        0 0 30px rgba(225, 6, 0, 0.8),
        0 4px 20px rgba(0, 0, 0, 0.6);
}

#why-attend-grid .why-attend-card:hover .card-icon-badge svg {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px currentColor);
}

/* Text Styles */
#why-attend-grid .why-attend-card p {
    text-align: justify;
    color: var(--f1-silver);
    line-height: 1.8rem;
    font-size: 1rem;
}

.why-attend-card h2 {
    font-family: "Orbitron", sans-serif;
    color: var(--f1-white);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(225, 6, 0, 0.3);
    text-align: center;
    line-height: 1.3;
    margin-top: 0.5rem;
}

/* Responsive Adjustments */
@media screen and (max-width: 900px) {
    #why-attend-grid .why-attend-card {
        height: auto;
        min-height: 350px;
        padding: 3rem 1.5rem 2rem 1.5rem;
    }
    
    .why-attend-card .card-icon-badge {
        width: 60px;
        height: 60px;
        top: -30px;
        right: -10px;
    }
    
    .why-attend-card .card-icon-badge svg {
        width: 30px;
        height: 30px;
    }
    
    .why-attend-card h2 {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 480px) {
    .why-attend-card .card-icon-badge {
        width: 55px;
        height: 55px;
        top: -25px;
        right: -8px;
    }
    
    .why-attend-card .card-icon-badge svg {
        width: 28px;
        height: 28px;
    }
    
    .why-attend-card h2 {
        font-size: 1.3rem;
    }
}
/* ========================================= */
/* REGISTRATION & SCREENING                  */
/* ========================================= */

#reg-and-screening{
    background: linear-gradient(135deg, rgba(225, 6, 0, 0.1) 0%, rgba(10, 10, 15, 1) 50%, rgba(225, 6, 0, 0.1) 100%);
    padding: 5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 3rem;
}

#reg-and-screening li{
    list-style: decimal;
    color: var(--f1-silver);
    margin-left: 20px;
}

#reg-and-screening #reg-pro{
    padding: 5rem;
    background: rgba(21, 21, 30, 0.9);
    border: 2px solid var(--f1-red);
    color: var(--f1-silver);
    line-height: 2rem;
    max-width: 1120px;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(225, 6, 0, 0.3);
    margin-bottom: 5rem;
}

#reg-and-screening #screening-boxes {
    display: flex;
    width: 100%;
    max-width: 1120px;
    flex-direction: row;
    align-items: stretch;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

#reg-and-screening #screening-boxes .screening-card{
    margin-top: 4rem;
    width: 100%;
    max-width: 450px;
    min-height: 450px;
    background: rgba(21, 21, 30, 0.9);
    border: 2px solid var(--f1-red);
    box-shadow: 0 0 40px rgba(225, 6, 0, 0.3);
    border-radius: 20px;
    padding: 3rem;
    padding-top: 8rem;
    position: relative;
    text-align: center;
    font-family: "Rajdhani", sans-serif;
    color: var(--f1-silver);
}

#reg-and-screening #screening-boxes .screening-card .screening-no{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: var(--f1-red);
    border: 3px solid var(--f1-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--f1-white);
    font-family: "Orbitron", sans-serif;
    box-shadow: 0 0 30px rgba(225, 6, 0, 0.6);
}

#Registration-heading, #Screening-heading{
    font-family: "Orbitron", sans-serif;
    font-size: 5rem;
    letter-spacing: 0.3rem;
    z-index: 100;
    text-transform: uppercase;
    text-align: center;
}

/* Last Expo Details */
#last-expo-details{
    justify-content: space-evenly;
    align-items: flex-start;
    background: linear-gradient(135deg, #0A0A0F 0%, #15151E 50%, #0A0A0F 100%);
    width: 100%;
    height: 100%;
    background-position: top;
    background-size: cover;
    color: var(--f1-white);
    position: relative;
    padding: 5rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    border-top: 3px solid var(--f1-red);
}

#last-expo-details #details-left{
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#last-expo-details #details-left .previous-stats{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#last-expo-details #details-left .previous-stats .stat-value{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

#last-expo-details #details-left .previous-stats .stat-value h1{
    font-family: "Orbitron", sans-serif;
    font-size: 3.125rem;
    color: var(--f1-red);
    text-shadow: 0 0 20px rgba(225, 6, 0, 0.5);
}

#last-expo-details #details-left .previous-stats .stat-value p {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--f1-silver);
}

#last-expo-details #details-right{
    width: 100%;
    max-width: 710px;
    color: var(--f1-silver);
}

/* ========================================= */
/* EVENT GALLERY                             */
/* ========================================= */
/* ========================================= */
/* EVENT GALLERY - F1 RACETRACK EXPERIENCE */
/* ========================================= */

#event-gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    min-height: 100vh;
    padding: 6rem 0;
    background: 
        radial-gradient(ellipse at center, rgba(225, 6, 0, 0.05) 0%, transparent 70%),
        linear-gradient(135deg, #0A0A0F 0%, #15151E 50%, #0A0A0F 100%);
    position: relative;
    overflow: hidden;
}

/* Racing Grid Background */
#event-gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 80px,
            rgba(225, 6, 0, 0.03) 80px,
            rgba(225, 6, 0, 0.03) 81px
        );
    pointer-events: none;
    z-index: 0;
}

.gallery-heading{
    font-family: "Orbitron", sans-serif;
    color: var(--f1-white);
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    background: linear-gradient(135deg, var(--f1-white), var(--f1-silver));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 10;
    position: relative;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 20px rgba(225, 6, 0, 0.3));
}

/* PROFESSIONAL F1 RACETRACK CONTAINER */
.slider-container {
    width: 95%;
    max-width: 1800px;
    min-height: 550px;
    overflow: hidden;
    background: 
        radial-gradient(ellipse at center, rgba(40, 40, 45, 1) 0%, rgba(25, 25, 30, 1) 100%);
    padding: 0;
    position: relative;
    border-radius: 0;
    box-shadow: 
        0 30px 100px rgba(0, 0, 0, 0.9),
        inset 0 10px 50px rgba(0, 0, 0, 0.8),
        inset 0 -10px 50px rgba(0, 0, 0, 0.8);
}

/* ASPHALT TEXTURE */
.slider-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.008) 2px,
            rgba(255, 255, 255, 0.008) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.008) 2px,
            rgba(255, 255, 255, 0.008) 3px
        );
    pointer-events: none;
    z-index: 1;
}

/* TOP ROAD EDGE LINE */
.slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    z-index: 10;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.2);
}

/* HIDE OLD FILM STRIPS */
.film-strip-top,
.film-strip-bottom {
    display: none !important;
}

.film-strip {
    display: none !important;
}

.film-strip-content {
    display: none !important;
}

/* BOTTOM ROAD EDGE LINE (repurpose film-strip-bottom) */
.slider-container > .film-strip-bottom {
    display: block !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.3) !important;
    z-index: 10;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.2);
    animation: none !important;
}

/* CREATE CENTER RACING LINE (repurpose first film-strip-top) */
.slider-container > .film-strip-top {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.4) 0px,
        rgba(255, 255, 255, 0.4) 60px,
        transparent 60px,
        transparent 100px
    ) !important;
    z-index: 2;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    animation: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* ADDITIONAL TRACK LINES */
.film-strip-top .film-strip-content > div:first-child {
    display: block !important;
    position: absolute;
    top: -120px;
    left: 0;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        rgba(192, 192, 192, 0.2) 0px,
        rgba(192, 192, 192, 0.2) 40px,
        transparent 40px,
        transparent 70px
    ) !important;
    margin: 0 !important;
}

.film-strip-top .film-strip-content > div:nth-child(2) {
    display: block !important;
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        rgba(192, 192, 192, 0.2) 0px,
        rgba(192, 192, 192, 0.2) 40px,
        transparent 40px,
        transparent 70px
    ) !important;
    margin: 0 !important;
}

/* Hide other divs in film-strip-content */
.film-strip-content > div:nth-child(n+3) {
    display: none !important;
}

/* IMAGE TRACK - RACING GALLERY */
.slider-track {
    display: flex;
    gap: 50px;
    padding: 120px 60px;
    animation: race-scroll 20s linear infinite;
    position: relative;
    z-index: 3;
}

.slider-track img {
    width: 550px;
    height: 380px;
    object-fit: cover;
    border: 3px solid rgba(192, 192, 192, 0.3);
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.7),
        0 0 2px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    position: relative;
    filter: brightness(0.9) contrast(1.1) saturate(1.1);
    background: #000;
}

/* DYNAMIC GLOW EFFECT */
.slider-track img::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, 
        rgba(225, 6, 0, 0.6), 
        rgba(255, 215, 0, 0.3),
        rgba(225, 6, 0, 0.6)
    );
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    filter: blur(25px);
}



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

/* EDGE FADE EFFECTS - Create from slider container */
.slider-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(25, 25, 30, 1) 0%, 
        transparent 100%
    );
    z-index: 4;
    pointer-events: none;
}

/* Right fade using a wrapper trick */
.slider-container {
    box-shadow: 
        0 30px 100px rgba(0, 0, 0, 0.9),
        inset 0 10px 50px rgba(0, 0, 0, 0.8),
        inset 0 -10px 50px rgba(0, 0, 0, 0.8),
        inset -180px 0 150px -100px rgba(25, 25, 30, 1);
}

/* TIRE MARKS using existing film strips (bottom divs) */
.film-strip-bottom .film-strip-content > div:first-child {
    display: block !important;
    position: absolute;
    top: -180px;
    left: -10%;
    width: 120%;
    height: 80px;
    background: 
        repeating-linear-gradient(
            95deg,
            transparent,
            transparent 12px,
            rgba(0, 0, 0, 0.2) 12px,
            rgba(0, 0, 0, 0.2) 16px
        ) !important;
    opacity: 0.4;
    transform: skewY(-1deg);
    margin: 0 !important;
}

.film-strip-bottom .film-strip-content > div:nth-child(2) {
    display: block !important;
    position: absolute;
    top: -80px;
    left: -10%;
    width: 120%;
    height: 80px;
    background: 
        repeating-linear-gradient(
            85deg,
            transparent,
            transparent 12px,
            rgba(0, 0, 0, 0.2) 12px,
            rgba(0, 0, 0, 0.2) 16px
        ) !important;
    opacity: 0.4;
    transform: skewY(1deg);
    margin: 0 !important;
}
/* #event-gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
    min-height: 75vh;
    background: linear-gradient(135deg, #0A0A0F 0%, #15151E 50%, #0A0A0F 100%);
    background-position: center;
    background-size: cover;
    padding: 4rem 0;
    position: relative;
    overflow: hidden; 
}

.slider-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden; 
    background: rgba(21, 21, 30, 0.5);
    border: 2px solid var(--f1-red);
    padding: 30px;
    position: relative;
    box-shadow: 0 0 30px rgba(225, 6, 0, 0.3);
}

.film-strip {
    display: flex;
    position: absolute;
    width: 300%; 
    height: 30px;
    background-color: rgba(0,0,0,0);
    z-index: 5;
    overflow: hidden;
}

.film-strip-content {
    display: flex;
    width: 100%;
}

.film-strip div {
    width: 50px;
    height: 100%;
    margin: 0 5px;
    background: linear-gradient(135deg, var(--f1-red), #8B0000);
    border-radius: 3px;
    flex-shrink: 0;
}

.film-strip-top {
    top: 0;
    padding: 5px 0;
    animation: scroll-strip 32s linear infinite;
}

.film-strip-bottom {
    bottom: 0;
    padding: 5px 0;
    animation: scroll-strip 32s linear infinite;
}

.gallery-heading{
    font-family: "Orbitron", sans-serif;
    color: var(--f1-white);
    font-size: 2.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
}

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

.slider-track {
    display: flex;
    animation: scroll 15s linear infinite;
}

.slider-track img {
    width: 300px; 
    height: auto; 
    margin: 0 5px;
    border: 2px solid var(--f1-red);
    border-radius: 10px;
    transition: all 0.5s ease; 
}

.slider-track img:hover {
    transform: scale(1.1); 
    z-index: 10;
    box-shadow: 0 0 30px rgba(225, 6, 0, 0.6);
    border-color: var(--f1-yellow);
}

.slider-track:hover {
    animation-play-state: paused;
    padding: 0 20px;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
} */

/* ========================================= */
/* REGISTRATION AREA                         */
/* ========================================= */
/* ========================================= */
/* REGISTRATION AREA - UPDATED LAYOUT       */
/* ========================================= */

#registration-area{
    padding: 8rem 2rem;
    background: linear-gradient(135deg, rgba(225, 6, 0, 0.1) 0%, rgba(10, 10, 15, 1) 50%, rgba(225, 6, 0, 0.1) 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

#registration-area #form-blender{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: linear-gradient(180deg, #0A0A0F 0%, transparent 100%);
}

#registration-form{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Helmet image styling */
#registration-form .helmet {
    flex: 1;
    max-width: 450px;
    width: 100%;
    height: auto;
    border: 3px solid var(--f1-red);
    border-radius: 15px;
    box-shadow: 0 0 40px rgba(225, 6, 0, 0.4);
    transition: all 0.3s ease;
    animation: float-registration 6s ease-in-out infinite;
    object-fit: contain;
}

@keyframes float-registration {
    0%, 100% { 
        transform: translateY(0px);
    }
    50% { 
        transform: translateY(-15px);
    }
}

#registration-form .helmet:hover {
    box-shadow: 0 0 60px rgba(225, 6, 0, 0.6);
    border-color: var(--f1-yellow);
    transform: scale(1.02);
}

/* Form container on the right */
#registration-form form{
    flex: 1;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#registration-form .inp-element{
    backdrop-filter: blur(10px);
    min-width: 150px;
    max-width: 700px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    height: 5rem;
    width: 100%;
    background: rgba(21, 21, 30, 0.8);
    padding: 0 1.5rem;
    overflow: hidden;
    border: 2px solid var(--f1-red);
    border-radius: 10px;
    transition: all 0.3s ease;
}

#registration-form .inp-element:focus-within {
    border-color: var(--f1-yellow);
    box-shadow: 0 0 20px rgba(225, 6, 0, 0.4);
}

/* Hide all icons in input elements */
#registration-form .inp-element img {
    display: none;
}

#registration-form .inp-element input{
    background-color: transparent;
    font-size: 1.2rem;
    font-family: "Rajdhani", sans-serif;
    padding: 1rem;
    border: none;
    width: 100%;
    height: 100%;
    color: var(--f1-white);
}

#registration-form .inp-element input::placeholder{
    color: var(--f1-silver);
    font-size: 1.06rem;
}

#registration-form .inp-element input:focus, 
#registration-form .inp-element input:active{
    border: none;
    outline: none;
}
    
#registration-form .submit-form-btn{
    font-family: "Orbitron", sans-serif;
    padding: 1rem 3rem;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--f1-red), #8B0000);
    color: var(--f1-white);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(225, 6, 0, 0.4);
}

#registration-form .submit-form-btn:disabled{
    opacity: 0.5;
}

#registration-form .submit-form-btn:hover:not(:disabled){
    transform: translateY(-3px);
    box-shadow: 0 6px 30px rgba(225, 6, 0, 0.6);
    background: linear-gradient(135deg, #FF0800, var(--f1-red));
}

#registration-form .submit-form-btn:active{
    transform: translateY(0);
}

/* ========================================= */
/* RESPONSIVE UPDATES FOR REGISTRATION      */
/* ========================================= */

@media screen and (max-width: 900px) {
    #registration-area {
        padding: 5rem 1.5rem;
    }
    
    #registration-form {
        flex-direction: column;
    }
    
    #registration-form .helmet {
        max-width: 350px;
    }
    
    #registration-form form {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    #registration-area {
        padding: 4rem 1rem;
    }
    
    #registration-form .helmet {
        max-width: 100%;
    }
} Reduced padding */
}

/* ========================================= */
/* RESPONSIVE UPDATES FOR REGISTRATION      */
/* ========================================= */

@media screen and (max-width: 900px) {
    #registration-area {
        flex-direction: column; /* Stack vertically on mobile */
        padding: 5rem 1.5rem;
    }
    
    #registration-image {
        max-width: 400px;
        width: 100%;
    }
    
    #registration-form {
        max-width: 100%;
        padding: 0 10px;
    }
}

@media screen and (max-width: 480px) {
    #registration-area {
        padding: 4rem 1rem;
    }
    
    #registration-image {
        max-width: 100%;
    }
}
/* #registration-area{
    padding: 8rem 0rem;
    background: linear-gradient(135deg, rgba(225, 6, 0, 0.1) 0%, rgba(10, 10, 15, 1) 50%, rgba(225, 6, 0, 0.1) 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: row;
    gap: 3rem;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

#registration-area #form-blender{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: linear-gradient(180deg, #0A0A0F 0%, transparent 100%);
}

#registration-form{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0 50px;
}

#registration-form p{
    color: var(--f1-silver);
    font-weight: 400;
    align-self: flex-start;
}

#registration-form p a {
    color: var(--f1-red);
    text-decoration: underline;
}

#registration-form form{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#registration-form .inp-element{
    backdrop-filter: blur(10px);
    min-width: 150px;
    max-width: 700px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    height: 5rem;
    width: 100%;
    background: rgba(21, 21, 30, 0.8);
    padding-left: 1.5rem;
    overflow: hidden;
    border: 2px solid var(--f1-red);
    border-radius: 10px;
    transition: all 0.3s ease;
}

#registration-form .inp-element:focus-within {
    border-color: var(--f1-yellow);
    box-shadow: 0 0 20px rgba(225, 6, 0, 0.4);
}

#registration-form .inp-element label img {
    width: 1.5rem;
    height: 1.5rem;
    filter: brightness(0) saturate(100%) invert(19%) sepia(96%) saturate(4945%) hue-rotate(355deg) brightness(94%) contrast(106%);
}

#registration-form .inp-element input{
    background-color: transparent;
    font-size: 1.2rem;
    font-family: "Rajdhani", sans-serif;
    padding: 1rem;
    border: none;
    width: 100%;
    height: 100%;
    color: var(--f1-white);
}

#registration-form .inp-element input::placeholder{
    color: var(--f1-silver);
    font-size: 1.06rem;
}

#registration-form .inp-element input:focus, 
#registration-form .inp-element input:active{
    border: none;
    outline: none;
}
    
#registration-form .submit-form-btn{
    font-family: "Orbitron", sans-serif;
    padding: 1rem 3rem;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--f1-red), #8B0000);
    color: var(--f1-white);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(225, 6, 0, 0.4);
}

#registration-form .submit-form-btn:disabled{
    opacity: 0.5;
}

#registration-form .submit-form-btn:hover:not(:disabled){
    transform: translateY(-3px);
    box-shadow: 0 6px 30px rgba(225, 6, 0, 0.6);
    background: linear-gradient(135deg, #FF0800, var(--f1-red));
}

#registration-form .submit-form-btn:active{
    transform: translateY(0);
} */

/* ========================================= */
/* SPONSORS SECTION                          */
/* ========================================= */

#sponsors{
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    background-position: center;
    background-size: cover;
    padding: 5rem 4rem;
    gap: 4rem;
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--f1-red);
}

#sponsors h1 {
    color: var(--f1-white);
}

#sponsors::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #E50914 25%, 
        #FFD700 50%, 
        #E50914 75%, 
        transparent 100%);
    animation: race-line 3s linear infinite;
}

#sponsors::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #E50914 25%, 
        #FFD700 50%, 
        #E50914 75%, 
        transparent 100%);
    animation: race-line 3s linear infinite reverse;
}

@keyframes race-line {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.sponors-image-container{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-content: center;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.sponsor-image-wrapper{
    width: 10rem;
    height: 7rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    box-shadow: 
        0 4px 15px rgba(229, 9, 20, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.sponsor-image-wrapper::before{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #E50914, #FFD700, #E50914);
    border-radius: 0.5rem;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sponsor-image-wrapper:hover::before{
    opacity: 1;
    animation: border-glow 1.5s ease infinite;
}

@keyframes border-glow {
    0%, 100% { 
        background: linear-gradient(45deg, #E50914, #FFD700, #E50914);
    }
    50% { 
        background: linear-gradient(45deg, #FFD700, #E50914, #FFD700);
    }
}

.sponsor-image-wrapper:hover{
    transform: translateY(-10px) scale(1.08);
    box-shadow: 
        0 15px 35px rgba(229, 9, 20, 0.5),
        0 5px 15px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sponsor-image-wrapper::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, 
        rgba(229, 9, 20, 0.1) 0%, 
        transparent 50%, 
        rgba(255, 215, 0, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sponsor-image-wrapper:hover::after{
    opacity: 1;
}

img.sponsor-image {
    display: block;
    max-width: 75%;
    max-height: 75%;
    object-fit: contain;
    filter: brightness(0.9) contrast(1.1);
    transition: all 0.4s ease;
}

.sponsor-image-wrapper:hover img.sponsor-image{
    filter: brightness(1.1) contrast(1.2);
    transform: scale(1.05);
}

div.sponsor-image-wrapper > a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}


/* ========================================= */
/* MEDIA QUERIES (RESPONSIVE LOGIC)          */
/* ========================================= */

/* Tablet & Mobile Breakpoint */
@media screen and (max-width: 900px) {
    
    /* 1. Navbar Fixes */
    #nav-links-desktop {
        display: none; 
    }

    #hamburger-menu {
        display: flex; 
    }
    
    nav {
        padding: 10px 20px;
    }

    /* 2. Hero Section Fixes */
    #intro {
        height: auto;
        min-height: 100vh;
        padding-top: 100px; 
    }

    #intro-heading-l1, #intro-heading-l2 {
        font-size: 3rem; 
        letter-spacing: 0.2rem;
    }
    
    #countdown {
        width: 100%;
        transform: scale(1);
        margin-top: 20px;
    }

    /* 3. About Section Fixes */
    #about {
        padding: 3rem 1.5rem;
    }

    #about #aboutus-content {
        flex-direction: column; 
    }
    
    #about #aboutimg {
        width: 100%;
        max-width: 400px;
    }

    /* 4. Who Can Participate Fixes */
    section#who-can-participate {
        flex-direction: column;
        text-align: center;
        padding: 3rem 1.5rem;
    }
    
    section#who-can-participate ul>li {
        text-align: left;
    }

    /* 5. Last Expo Details Fixes */
    #last-expo-details {
        flex-direction: column;
        padding: 3rem 1.5rem;
    }
    
    #last-expo-details #details-left .previous-stats {
        justify-content: space-around;
    }

    /* 6. General Heading Sizes */
    .sec-heading, #Registration-heading, #Screening-heading {
        font-size: 2.5rem;
        word-wrap: break-word;
    }

    /* 7. Registration Fixes */
    #reg-and-screening {
        padding: 3rem 1rem;
    }
    
    #reg-and-screening #reg-pro {
        padding: 2rem;
        font-size: 0.9rem;
    }
}

/* Small Mobile Breakpoint */
@media screen and (max-width: 480px) {
    #intro-heading-l1, #intro-heading-l2 {
        font-size: 2.2rem;
    }
    
    #last-expo-details #details-left .previous-stats {
        flex-direction: column;
        gap: 2rem;
    }
    
    .why-attend-card {
        width: 100%;
        height: auto;
    }

    #sponsors {
        padding: 3rem 1rem;
    }
}




/* =====================================================
   PURPLE · BLACK · WHITE THEME OVERRIDE
   Paste this at the VERY END of your existing CSS
   (No existing code modified)
   ===================================================== */

:root{
    --f1-red: #8b5cf6;        /* primary purple */
    --f1-yellow: #c4b5fd;     /* soft lavender highlight */
    --f1-dark: #0b0b10;       /* near-black */
    --f1-darker: #050508;     /* deeper black */
    --f1-white: #ffffff;     /* white */
    --f1-silver: #cfcfe6;     /* light muted text */
}

/* Global backgrounds */
body{
    background: #0b0b10;
}

body::before{
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 100px,
        rgba(139, 92, 246, 0.08) 100px,
        rgba(139, 92, 246, 0.08) 102px
    );
}

/* Navbar */
nav{
    background: linear-gradient(135deg, rgba(15,15,25,0.95), rgba(5,5,10,0.95));
    border-bottom: 3px solid var(--f1-red);
}

#nav-links-desktop a:hover,
#nav-links-mobile li a:hover{
    color: var(--f1-red);
    text-shadow: 0 0 12px rgba(139, 92, 246, 0.8);
}

/* Buttons */
#registration-form .submit-form-btn{
    background: linear-gradient(135deg, #8b5cf6, #5b21b6);
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5);
}

#registration-form .submit-form-btn:hover:not(:disabled){
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.7);
}

/* Inputs */
#registration-form .inp-element{
    border-color: var(--f1-red);
    background: rgba(15, 15, 25, 0.85);
}

#registration-form .inp-element:focus-within{
    border-color: #c4b5fd;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.6);
}

/* Headings */
.sec-heading,
#Registration-heading,
#Screening-heading{
    background: linear-gradient(135deg, #ffffff, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Cards (why attend, screening, etc.) */
.why-attend-card,
#reg-and-screening #screening-boxes .screening-card{
    background: rgba(15, 15, 25, 0.9);
    border-color: var(--f1-red);
}

.why-attend-card:hover{
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.5);
}

/* Card icon badge */
.why-attend-card .card-icon-badge{
    border-color: var(--f1-red);
    box-shadow:
        0 0 25px rgba(139, 92, 246, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.6);
}

.why-attend-card .card-icon-badge svg{
    color: var(--f1-red);
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.7));
}

/* Section backgrounds */
#event-gallery,
#last-expo-details,
#sponsors{
    background:
        radial-gradient(circle at center, rgba(139,92,246,0.08), transparent 70%),
        linear-gradient(135deg, #050508 0%, #111126 50%, #050508 100%);
}

/* Accent animated lines */
#sponsors::before,
#sponsors::after{
    background: linear-gradient(
        90deg,
        transparent 0%,
        #8b5cf6 30%,
        #ffffff 50%,
        #8b5cf6 70%,
        transparent 100%
    );
}

/* Countdown / numbers */
#countdown .count p:nth-child(2){
    color: #a78bfa;
    text-shadow:
        0 0 15px rgba(139, 92, 246, 0.9),
        0 0 35px rgba(139, 92, 246, 0.5);
}

.lap-indicator{
    color: #ddd6fe;
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}

/* Position indicator */
.position-indicator{
    background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(88,28,135,0.25));
    border-color: #c4b5fd;
    box-shadow:
        0 0 30px rgba(139, 92, 246, 0.4),
        inset 0 0 20px rgba(139, 92, 246, 0.25);
}

/* Sponsor cards */
.sponsor-image-wrapper{
    background: linear-gradient(145deg, #141427, #0a0a14);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25);
}

.sponsor-image-wrapper::before{
    background: linear-gradient(45deg, #8b5cf6, #ffffff, #8b5cf6);
}

/* Glow accents override */
*{
    --glow-purple: rgba(139, 92, 246, 0.6);
}


/* ================================
   F1 TIMER – PURPLE / BLACK UPGRADE
   (Non-destructive override)
================================ */

/* Main timer container */
#countdown {
    background: linear-gradient(135deg, #0b0015, #12001f);
    border: 3px solid #7b2cff;
    box-shadow:
        0 0 25px rgba(140, 70, 255, 0.6),
        inset 0 0 25px rgba(140, 70, 255, 0.15);
    border-radius: 14px;
    position: relative;
}

/* Animated racing scan line */
#countdown::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        #b266ff,
        transparent
    );
    animation: f1-scan 2.8s linear infinite;
}

@keyframes f1-scan {
    0% { left: -120%; }
    100% { left: 120%; }
}

/* Divider lines between values */
#countdown .seperator {
    width: 3px;
    background: linear-gradient(
        180deg,
        transparent,
        #9d4edd,
        transparent
    );
    box-shadow: 0 0 10px rgba(160, 90, 255, 0.8);
}

/* Number styling */
#countdown .count p:nth-child(1) {
    font-size: 2.6rem;
    font-weight: 900;
    color: #c77dff;
    text-shadow:
        0 0 10px rgba(199, 125, 255, 0.8),
        0 0 25px rgba(120, 0, 255, 0.6);
    letter-spacing: 2px;
}

/* Label text */
#countdown .count p:nth-child(2) {
    font-size: 0.75rem;
    color: #e9d5ff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Add digital “module” feel */
#countdown .count {
    background: rgba(20, 0, 40, 0.45);
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow:
        inset 0 0 12px rgba(140, 70, 255, 0.25),
        0 0 15px rgba(140, 70, 255, 0.2);
    min-width: 90px;
}

/* Subtle glow pulse */
#countdown .count {
    animation: timerPulse 2s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% {
        box-shadow:
            inset 0 0 12px rgba(140, 70, 255, 0.25),
            0 0 12px rgba(140, 70, 255, 0.25);
    }
    50% {
        box-shadow:
            inset 0 0 20px rgba(180, 120, 255, 0.6),
            0 0 25px rgba(180, 120, 255, 0.6);
    }
}

/* Mobile polish */
@media (max-width: 480px) {
    #countdown .count p:nth-child(1) {
        font-size: 2rem;
    }

    #countdown .count {
        min-width: 70px;
        padding: 8px;
    }
}


/* ===============================
   CONTACT – PURPLE F1 THEME
================================ */

#contact {
  padding: 5rem 2rem;
  background: radial-gradient(circle at top, #1b0033, #050008 70%);
  border-top: 3px solid #8b5cf6;
}

.contact-wrapper {
  max-width: 1300px;
  margin: auto;
  text-align: center;
}

.contact-title {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 3rem;
  background: linear-gradient(90deg, #c084fc, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 25px rgba(139,92,246,0.6);
}

/* Grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
  justify-items: center;
}

/* Card */
.team-card {
  width: 100%;
  max-width: 260px;
  background: rgba(20, 10, 35, 0.9);
  border: 2px solid rgba(139, 92, 246, 0.4);
  border-radius: 18px;
  padding: 1.8rem 1.2rem 2rem;
  text-align: center;
  transition: 0.4s ease;
  box-shadow:
    0 0 25px rgba(139, 92, 246, 0.25),
    inset 0 0 25px rgba(139, 92, 246, 0.15);
  position: relative;
  overflow: hidden;
}

.team-card:hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow:
    0 0 45px rgba(168, 85, 247, 0.8),
    inset 0 0 30px rgba(168, 85, 247, 0.3);
}

/* Image */
.team-card img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #a78bfa;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
  margin-bottom: 1rem;
}

/* Text */
.team-card h3 {
  color: #e9d5ff;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.team-card p {
  font-size: 0.9rem;
  color: #c4b5fd;
  margin-bottom: 1rem;
}

/* Icons */
.contact-icons {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.contact-icons a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.6);
  color: #e9d5ff;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}

.contact-icons a:hover {
  background: #8b5cf6;
  color: black;
  transform: scale(1.15);
  box-shadow: 0 0 25px #a78bfa;
}

/* Responsive */
@media (max-width: 500px) {
  .contact-title {
    font-size: 2.1rem;
  }
}
/* ===============================
   FIX HORIZONTAL SCROLL
================================ */

/* Prevent page-wide horizontal scroll */
body {
  overflow-x: hidden;
}

/* Keep scroll ONLY inside contact row */
.contact-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  gap: 2rem;

  overflow-x: auto;
  overflow-y: hidden;

  max-width: 100%;
  padding: 1rem 0 1.5rem;
  scroll-behavior: smooth;
}

/* Hide scrollbar but keep scrolling */
.contact-grid::-webkit-scrollbar {
  height: 6px;
}

.contact-grid::-webkit-scrollbar-track {
  background: transparent;
}

.contact-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #8b5cf6, #c084fc);
  border-radius: 10px;
}

/* Prevent cards from stretching */
.team-card {
  flex: 0 0 260px;
  max-width: 260px;
}
/* PERFECT CIRCULAR IMAGE */
.team-card img {
  width: 110px;
  height: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;

  border: 3px solid #a78bfa;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.7);
  margin: 0 auto 1rem;
}
.site-footer {
  width: 100%;
  padding: 1.8rem 1rem;
  background: #08000f;
  border-top: 1px solid rgba(139, 92, 246, 0.35);
  text-align: center;
}

.footer-content {
  max-width: 1100px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-email {
  color: #c4b5fd;
  font-size: 0.95rem;
  font-weight: 500;
}

.footer-address {
  color: #a78bfa;
  font-size: 0.9rem;
}

.footer-copy {
  color: #9f9fbd;
  font-size: 0.85rem;
  margin-top: 6px;
}

/* ========================================= */
/* MOBILE FIXES - ADD TO BOTTOM OF CSS      */
/* ========================================= */

/* Hide helmet image */
#registration-form .helmet {
    display: none !important;
}

/* Mobile adjustments - only resize on mobile */
@media screen and (max-width: 900px) {
    #intro {
        background-size: 70% auto;
        background-position: center bottom;
    }
    
    #registration-form {
        flex-direction: column;
        width: 100%;
    }
    
    #registration-form form {
        max-width: 100%;
    }
}

@media screen and (max-width: 600px) {
    #intro {
        background-size: 100% auto;
    }
    
    #intro-heading-l1,
    #intro-heading-l2 {
        font-size: 2.2rem;
        letter-spacing: 0.2rem;
    }
    
    #registration-area {
        padding: 4rem 1rem;
    }
    
    #reg-head {
        font-size: 1.8rem;
    }
    
    #registration-form .inp-element {
        height: 4rem;
    }
}

@media screen and (max-width: 480px) {
    #intro {
        background-size: 120% auto;
    }
    
    #intro-heading-l1,
    #intro-heading-l2 {
        font-size: 1.8rem;
    }
    
    #registration-form .inp-element {
        height: 3.8rem;
        padding: 0 0.8rem;
    }
    
    #registration-form .submit-form-btn {
        padding: 0.8rem 2rem;
        font-size: 0.9rem;
    }
}

/* Timer mobile fixes */
@media screen and (max-width: 900px) {
    #countdown {
        width: 90%;
        padding: 15px 10px;
        gap: 0.8rem;
    }
    
    #countdown .count {
        min-width: 70px;
        padding: 8px 10px;
    }
    
    #countdown .count p:nth-child(1) {
        font-size: 2rem;
    }
    
    #countdown .count p:nth-child(2) {
        font-size: 0.7rem;
    }
}

@media screen and (max-width: 600px) {
    #countdown {
        width: 95%;
        padding: 12px 8px;
        gap: 0.6rem;
    }
    
    #countdown .count {
        min-width: 60px;
        padding: 6px 8px;
    }
    
    #countdown .count p:nth-child(1) {
        font-size: 1.6rem;
    }
    
    #countdown .count p:nth-child(2) {
        font-size: 0.65rem;
    }
    
    #countdown .seperator {
        width: 2px;
        height: 40%;
    }
}

@media screen and (max-width: 480px) {
    #countdown {
        padding: 10px 6px;
        gap: 0.5rem;
    }
    
    #countdown .count {
        min-width: 50px;
        padding: 5px 6px;
    }
    
    #countdown .count p:nth-child(1) {
        font-size: 1.4rem;
    }
    
    #countdown .count p:nth-child(2) {
        font-size: 0.6rem;
        letter-spacing: 1px;
    }
}

/* Gallery section mobile fixes */
@media screen and (max-width: 900px) {
    #event-gallery {
        padding: 4rem 0;
        min-height: auto;
    }
    
    .gallery-heading {
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
    }
    
    .slider-container {
        width: 100%;
        min-height: 350px;
        padding: 0;
    }
    
    .slider-track {
        padding: 80px 30px;
        gap: 30px;
    }
    
    .slider-track img {
        width: 350px;
        height: 240px;
    }
}

@media screen and (max-width: 600px) {
    #event-gallery {
        padding: 3rem 0;
    }
    
    .gallery-heading {
        font-size: 1.8rem;
    }
    
    .slider-container {
        min-height: 280px;
    }
    
    .slider-track {
        padding: 60px 20px;
        gap: 20px;
    }
    
    .slider-track img {
        width: 280px;
        height: 200px;
    }
}

@media screen and (max-width: 480px) {
    .gallery-heading {
        font-size: 1.5rem;
    }
    
    .slider-container {
        min-height: 240px;
    }
    
    .slider-track {
        padding: 50px 15px;
        gap: 15px;
    }
    
    .slider-track img {
        width: 240px;
        height: 170px;
    }
}

/* Contact section mobile fixes - 2x2 grid layout */
@media screen and (max-width: 900px) {
    #contact {
        padding: 4rem 1.5rem;
    }
    
    .contact-title {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }
    
    .contact-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        overflow-x: visible;
        padding: 0;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .team-card {
        flex: none;
        max-width: 100%;
        width: 100%;
        padding: 1.5rem 1rem;
    }
    
    .team-card img {
        width: 85px;
        height: 85px;
    }
    
    .team-card h3 {
        font-size: 0.95rem;
    }
    
    .team-card p {
        font-size: 0.8rem;
        margin-bottom: 0.8rem;
    }
    
    .contact-icons a {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 600px) {
    #contact {
        padding: 3rem 1rem;
    }
    
    .contact-title {
        font-size: 1.8rem;
    }
    
    .contact-grid {
        gap: 1.2rem;
        max-width: 500px;
    }
    
    .team-card {
        padding: 1.3rem 0.9rem;
    }
    
    .team-card img {
        width: 75px;
        height: 75px;
    }
    
    .team-card h3 {
        font-size: 0.9rem;
    }
    
    .team-card p {
        font-size: 0.75rem;
    }
    
    .contact-icons a {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 480px) {
    .contact-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .contact-grid {
        gap: 1rem;
        max-width: 100%;
    }
    
    .team-card {
        padding: 1.2rem 0.8rem;
    }
    
    .team-card img {
        width: 70px;
        height: 70px;
        border: 2px solid #a78bfa;
    }
    
    .team-card h3 {
        font-size: 0.85rem;
    }
    
    .team-card p {
        font-size: 0.7rem;
    }
    
    .contact-icons {
        gap: 10px;
    }
    
    .contact-icons a {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

/* Find this section in your CSS and replace it: */

/* ========================================= */
/* MOBILE FIXES - ADD TO BOTTOM OF CSS      */
/* ========================================= */

/* Mobile adjustments - hide helmet only on mobile */
@media screen and (max-width: 900px) {
    #intro {
        background-size: 70% auto;
        background-position: center bottom;
    }
    
    /* Hide helmet image ONLY on mobile/tablet */
    #registration-form .helmet {
        display: none !important;
    }
    
    #registration-form {
        flex-direction: column;
        width: 100%;
    }
    
    #registration-form form {
        max-width: 100%;
    }
}

/* Desktop - ensure helmet is visible */
@media screen and (min-width: 901px) {
    #registration-form .helmet {
        display: block !important;
    }
}

@media screen and (max-width: 600px) {
    #intro {
        background-size: 100% auto;
    }
    
    #intro-heading-l1,
    #intro-heading-l2 {
        font-size: 2.2rem;
        letter-spacing: 0.2rem;
    }
    
    #registration-area {
        padding: 4rem 1rem;
    }
    
    #reg-head {
        font-size: 1.8rem;
    }
    
    #registration-form .inp-element {
        height: 4rem;
    }
}

@media screen and (max-width: 480px) {
    #intro {
        background-size: 120% auto;
    }
    
    #intro-heading-l1,
    #intro-heading-l2 {
        font-size: 1.8rem;
    }
    
    #registration-form .inp-element {
        height: 3.8rem;
        padding: 0 0.8rem;
    }
    
    #registration-form .submit-form-btn {
        padding: 0.8rem 2rem;
        font-size: 0.9rem;
    }
}

/* Find this section in your CSS and replace it: */

/* ========================================= */
/* MOBILE FIXES - ADD TO BOTTOM OF CSS      */
/* ========================================= */

/* Mobile adjustments - hide helmet only on mobile */
@media screen and (max-width: 900px) {
    #intro {
        background-size: 70% auto;
        background-position: center bottom;
    }
    
    /* Hide helmet image ONLY on mobile/tablet */
    #registration-form .helmet {
        display: none !important;
    }
    
    #registration-form {
        flex-direction: column;
        width: 100%;
    }
    
    #registration-form form {
        max-width: 100%;
    }
}

/* Desktop - ensure helmet is visible */
@media screen and (min-width: 901px) {
    #registration-form .helmet {
        display: block !important;
    }
}

@media screen and (max-width: 600px) {
    #intro {
        background-size: 100% auto;
    }
    
    #intro-heading-l1,
    #intro-heading-l2 {
        font-size: 2.2rem;
        letter-spacing: 0.2rem;
    }
    
    #registration-area {
        padding: 4rem 1rem;
    }
    
    #reg-head {
        font-size: 1.8rem;
    }
    
    #registration-form .inp-element {
        height: 4rem;
    }
}

@media screen and (max-width: 480px) {
    #intro {
        background-size: 120% auto;
    }
    
    #intro-heading-l1,
    #intro-heading-l2 {
        font-size: 1.8rem;
    }
    
    #registration-form .inp-element {
        height: 3.8rem;
        padding: 0 0.8rem;
    }
    
    #registration-form .submit-form-btn {
        padding: 0.8rem 2rem;
        font-size: 0.9rem;
    }
}

/* ========================================= */
/* CONTACT SECTION - FIX OVERFLOW/SCROLLBAR */
/* ========================================= */

/* Prevent section from creating horizontal scroll */
#contact {
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
}

.contact-wrapper {
    overflow: hidden;
    width: 100%;
}

.contact-grid {
    width: 100%;
    padding: 1rem;
}

/* Prevent cards from expanding beyond container on hover */
.team-card {
    margin: 15px; /* Add margin to accommodate hover transform */
}

.team-card:hover {
    transform: translateY(-10px) scale(1.02); /* Reduced from scale(1.04) */
    box-shadow:
        0 0 35px rgba(168, 85, 247, 0.7),
        inset 0 0 25px rgba(168, 85, 247, 0.25);
}

/* Mobile specific fixes */
@media screen and (max-width: 900px) {
    .contact-grid {
        padding: 1rem 0.5rem;
        max-width: calc(100vw - 3rem);
    }
    
    .team-card {
        margin: 10px;
    }
    
    .team-card:hover {
        transform: translateY(-8px) scale(1.015); /* Even smaller scale on mobile */
    }
}

@media screen and (max-width: 600px) {
    .contact-grid {
        gap: 1rem;
        padding: 0.8rem 0.3rem;
    }
    
    .team-card {
        margin: 8px;
    }
}

@media screen and (max-width: 480px) {
    .contact-grid {
        padding: 0.5rem 0.2rem;
        gap: 0.8rem;
    }
    
    .team-card {
        margin: 6px;
    }
    
    .team-card:hover {
        transform: translateY(-6px) scale(1.01); /* Minimal scaling on small screens */
    }
}
/* ========================================= */
/* FINAL HAMBURGER FIX - MOBILE ONLY        */
/* ========================================= */

@media screen and (max-width: 900px) {
    /* Ensure nav is always visible */
    nav {
        position: fixed !important;
        transform: translateY(0) !important;
        z-index: 999999 !important;
        background: rgba(10, 10, 15, 0.98) !important;
    }
    
    /* Show hamburger */
    #hamburger-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 30px !important;
        height: 24px !important;
        cursor: pointer !important;
        z-index: 9999999 !important;
    }
    
    .hb-line {
        width: 100% !important;
        height: 3px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }
    
    /* X animation */
    #hamburger-menu.active .hb-line:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    
    #hamburger-menu.active .hb-line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburger-menu.active .hb-line:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
    
    /* Mobile menu */
    #mobile-menu {
        position: fixed !important;
        top: 90px !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(10, 10, 15, 0.98) !important;
        z-index: 999998 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.4s ease !important;
        border-bottom: 2px solid #8b5cf6 !important;
    }
    
    #mobile-menu.active {
        transform: translateX(0) !important;
    }
    
    #nav-links-mobile {
        padding: 2rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    #nav-links-mobile li a {
        color: #ffffff !important;
        font-size: 1.2rem !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
    }
    
    /* Hide desktop links */
    #nav-links-desktop {
        display: none !important;
    }
    
    /* Adjust intro section */
    #intro {
        padding-top: 110px !important;
    }
}