/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@400;600;700&display=swap');

/* Theme variables */
:root {
    --bg: #f5f5f5;
    --text: #222;
    --card: #ffffff;
    --header: #111;
    --btn: crimson;
}

[data-theme="dark"] {
    --bg: #0e0e0e;
    --text: #eaeaea;
    --card: #1a1a1a;
    --header: #000;
    --btn: crimson;
}

/* Reset & layout */
* { margin:0; padding:0; box-sizing:border-box; }

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1;
}

body {
    font-family: 'Rajdhani', 'Orbitron', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height:1.6;
    scroll-behavior:smooth;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight:700;
}

/* Header */
header { 
    background: var(--header); 
    color:#fff; 
    padding:20px; 
    text-align:center; 
    position:sticky; 
    top:0; 
    z-index:1000; 
    box-shadow:0 2px 10px rgba(0,0,0,0.7);
}
header nav a { 
    color:#fff; 
    margin:0 15px; 
    text-decoration:none; 
    font-weight:bold; 
    transition:0.3s; 
}
header nav a:hover { 
    color: crimson; 
    text-shadow:0 0 10px crimson; 
}

/* Hero */
.hero { 
    background:url('../assets/images/hero.jpg') center/cover no-repeat; 
    height:500px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#fff; 
    text-align:center; 
    text-shadow:2px 2px 10px #000; 
}
.hero h1 { font-size:3em; animation:fadeInDown 1.5s ease forwards; opacity:0; }

/* Animations */
@keyframes fadeInDown { 
    0% { opacity:0; transform:translateY(-50px);} 
    100% { opacity:1; transform:translateY(0);} 
}

/* Buttons */
.btn { 
    display:inline-block; 
    padding:12px 25px; 
    margin:10px 0; 
    background:var(--btn); 
    color:#fff; 
    border:none; 
    border-radius:8px; 
    cursor:pointer; 
    text-decoration:none; 
    font-weight:600; 
    transition:0.3s; 
    box-shadow:0 0 10px rgba(220,20,60,0.5);
}
.btn:hover { 
    background: darkred; 
    transform:scale(1.05); 
    box-shadow:0 0 20px crimson; 
}

/* Containers & Cards */
.container { max-width:1200px; margin:40px auto; padding:0 20px; }
.card { 
    background:var(--card); 
    border-radius:12px; 
    padding:20px; 
    margin:20px 0; 
    box-shadow:0 4px 20px rgba(0,0,0,0.2); 
    transition:0.3s; 
    opacity:0; 
    transform:translateY(30px) scale(0.98);
}
.card.visible { opacity:1; transform:translateY(0) scale(1);}
.card:hover { transform:translateY(-5px); box-shadow:0 8px 30px rgba(220,20,60,0.6); }
.card img {
    width:200px;
    margin:0 auto 15px;
    display:block;
    border-radius:10px;
}

/* Video */
.video-container { 
    position:relative; 
    padding-bottom:56.25%; 
    height:0; 
    overflow:hidden; 
    opacity:0; 
    transform:translateY(30px);
    transition:0.6s ease; 
}
.video-container.visible { opacity:1; transform:translateY(0);}
.video-container iframe, 
.video-container video { 
    position:absolute; 
    inset:0; 
    width:100%; 
    height:100%; 
    border-radius:12px; 
}

/* Ads */
.ad-container {
    margin:40px 0;
    padding:15px;
    border-radius:12px;
    background: rgba(220,20,60,0.05);
}

/* Footer */
footer { 
    background:#111; 
    color:#fff; 
    text-align:center; 
    padding:15px 0; 
}

/* Fade-in */
.fade-in {
    opacity:0;
    transform:translateY(30px) scale(0.98);
    transition:opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity:1;
    transform:translateY(0) scale(1);
}

/* Responsive */
@media(max-width:768px){
    .hero h1 { font-size:2em; }
    header nav a { display:block; margin:5px 0; }
}