@font-face {
    font-family: 'Morabba Heavy';
    src: url('./font/Morabba Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Kalameh Bold';
    src: url('./font/Kalameh Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Google Fonts - Free and High Quality */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* CSS Variables for consistent theming */
:root {
    --primary-bg: #0a0a0a; /* Very dark grey/black */
    --secondary-bg: #141414;
    --tertiary-bg: #1f1f1f;
    --card-bg: rgba(30, 30, 30, 0.6); /* Glassmorphism base */
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.15);
    --accent-color: #ff2a2a; /* Bright Red */
    --accent-secondary: #bd0000; /* Darker Red */
    --text-primary: #ffffff;
    --text-secondary: #d1d1d1;
    --text-muted: #9e9e9e;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-light: rgba(255, 42, 42, 0.15);
    --shadow-medium: rgba(255, 42, 42, 0.25);
    --shadow-heavy: rgba(0, 0, 0, 0.9);
    --gradient-primary: linear-gradient(135deg, #ff2a2a 0%, #bd0000 100%);
    --gradient-secondary: linear-gradient(135deg, #bd0000 0%, #ff2a2a 100%);
    --gradient-dark: linear-gradient(135deg, #141414 0%, #1f1f1f 100%);
    --glow-text: 0 0 10px rgba(255, 42, 42, 0.5);
    --glow-box: 0 0 20px rgba(255, 42, 42, 0.2);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Kalameh Bold', sans-serif;
    background: var(--primary-bg);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
    font-weight: 400;
}

/* Animated background elements - Simplified */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.02) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* Floating particles removed for performance */


@keyframes twinkle {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200px); }
}

@keyframes backgroundPingPong {
    0% { 
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotate(0deg);
    }
    12.5% {
        opacity: 0.95;
        transform: translateX(40px) translateY(-20px) scale(1.02) rotate(2deg);
    }
    25% {
        opacity: 0.9;
        transform: translateX(0) translateY(-40px) scale(1.05) rotate(0deg);
    }
    37.5% {
        opacity: 0.92;
        transform: translateX(-40px) translateY(-20px) scale(1.02) rotate(-2deg);
    }
    50% {
        opacity: 0.85;
        transform: translateX(0) translateY(0) scale(1) rotate(0deg);
    }
    62.5% {
        opacity: 0.92;
        transform: translateX(-40px) translateY(20px) scale(1.02) rotate(-2deg);
    }
    75% {
        opacity: 0.9;
        transform: translateX(0) translateY(40px) scale(1.05) rotate(0deg);
    }
    87.5% {
        opacity: 0.95;
        transform: translateX(40px) translateY(20px) scale(1.02) rotate(2deg);
    }
    100% { 
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes pulseGlow {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 5px var(--accent-color),
                     0 0 10px var(--accent-color),
                     0 0 20px var(--accent-color);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Morabba Heavy', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Softer shadow */
    letter-spacing: 0.5px;
}

h1 { font-size: 3.5rem; font-weight: 900; }
h2 { font-size: 2.5rem; font-weight: 800; }
h3 { font-size: 1.8rem; font-weight: 700; }

p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Header Styles */
header {
    background: rgba(5, 5, 5, 0.5); /* Neutral black glass */
    backdrop-filter: blur(20px); /* Stronger blur */
    -webkit-backdrop-filter: blur(20px);
    padding: 12px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Glass edge */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.header-left .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-family: 'Kalameh Bold', sans-serif;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.header-left .logo i {
    color: var(--accent-color);
    font-size: 1.8rem;
}

.header-left .logo:hover {
    transform: scale(1.05);
}

.header-right ul {
    display: flex;
    list-style: none;
    gap: 25px;
    align-items: center;
}

.header-right ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-family: 'Kalameh Bold', sans-serif;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 8px;
}

.header-right ul li a:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.header-right ul li a.login-btn {
    background: var(--accent-gradient);
    color: white;
    padding: 10px 24px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}

.header-right ul li a.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
}

.header-right ul li a.logout-link {
    color: #ff4757;
}

.header-right ul li a.logout-link:hover {
    background: rgba(255, 71, 87, 0.1);
}

nav {
    transition: transform 0.3s ease-out;
}

.header-right {
    position: relative;
}

/* Bottom Navigation for Mobile */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(5, 5, 5, 0.6); /* Neutral black glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2000;
    justify-content: flex-start;
    align-items: center;
    padding: 0 5px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Glass edge */
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.2);
}

.bottom-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    gap: 4px;
    flex: 0 0 80px; /* Increased width slightly for better spacing */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; /* Remove the grey highlight on mobile */
}

.bottom-nav .nav-item:active {
    transform: scale(0.95);
    color: var(--accent-color);
}

.bottom-nav .nav-item i {
    font-size: 1.2rem;
}

.bottom-nav .nav-item.active,
.bottom-nav .nav-item:hover {
    color: var(--accent-color);
}

@media (max-width: 768px) {
    header {
        padding: 15px 20px;
        justify-content: center;
    }
    
    .header-right {
        display: none;
    }

    .bottom-nav {
        display: flex;
    }

    /* Add padding to bottom of body so content isn't hidden by nav */
    body {
        padding-bottom: 70px;
    }
}

/* Main content padding to account for fixed header */
main {
    padding-top: 80px;
}

@media (max-width: 768px) {
    main {
        padding-top: 70px;
    }
}

/* Main Banner */
#cs2-banner {
    background: #0a0a0a;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}

#cs2-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('banner.webp') center/cover no-repeat;
    opacity: 0.1; /* Very subtle background texture */
    z-index: 1;
    filter: grayscale(100%); /* Make it black and white */
}

/* Red Circle Background Effect */
#cs2-banner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65vh;
    height: 65vh;
    background: radial-gradient(circle, rgba(255, 42, 42, 0.25) 0%, rgba(255, 42, 42, 0.05) 60%, transparent 70%);
    border-radius: 50%;
    opacity: 1;
    filter: blur(40px);
    z-index: 1;
    pointer-events: none;
    /* Removed harsh box-shadow */
}

#cs2-banner .banner-content {
    display: flex;
    flex-direction: column; /* Centered layout */
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
}

#cs2-banner .text-content {
    width: 100%; /* Full width */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* RTL adjustment: In LTR CSS for RTL content, 'flex-start' is Left. 
   But since the site is Persian, we want text to be naturally aligned. 
   Let's assume the user wants the text on one side and image on the other.
   The reference image has text on Left, Image on Right.
   For Persian (RTL), text on Right, Image on Left is standard, 
   BUT the user said "Like this image", so maybe they want the layout to match visually?
   Let's stick to standard RTL layout: Text Right, Visual Left.
   OR if the user wants "Like this image" strictly, Text Left, Visual Right.
   Let's go with Text Right (natural for Persian) but with the visual style of the image.
   Wait, the user said "Like this image".
   Let's center the text block on the Right side of the screen, and have the red circle on the Left?
   Actually, let's keep it simple: Text on one side, Visual on other.
   Since the body is likely LTR by default in CSS unless dir="rtl" is set on HTML.
   Let's check if dir="rtl" is set. Usually Persian sites set it.
   I don't see <html dir="rtl"> in the snippets, but the text is Persian.
   I will set `direction: rtl` on the banner text just to be safe, or align based on visual preference.
   Let's align text to the Right (start for Persian).
*/

#cs2-banner .date {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    display: block;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 1;
}

.banner-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2rem;
}

#cs2-banner .btn {
    padding: 1rem 1.5rem; /* Standard vertical, smaller horizontal */
    font-size: 1rem; /* Big font restored */
    border-radius: 50px;
    background: transparent;
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 0;
    font-weight: 600; /* Bold font restored */
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#cs2-banner .btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 42, 42, 0.3);
}

#cs2-banner .btn i {
    font-size: 0.9rem;
}

#cs2-banner .container {
    text-align: center; /* Center alignment */
    position: relative;
    z-index: 2;
    max-width: 1400px;
    padding: 0 2rem;
}

#cs2-banner h1 {
    font-size: 5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: white; /* Solid white text */
    background: none;
    -webkit-text-fill-color: white;
    line-height: 1.1;
    position: relative;
    letter-spacing: -2px;
    text-align: center;
}

#cs2-banner h1 .dot {
    color: var(--accent-color);
    display: inline-block;
    margin-right: 3px;
}

#cs2-banner p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 0 auto 2.5rem auto; /* Center block */
    max-width: 600px; /* Slightly wider for center */
    text-align: center;
    line-height: 1.8;
    font-weight: 300;
}

/* Mobile Responsiveness for Banner */
@media (max-width: 992px) {
    #cs2-banner .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }
    
    #cs2-banner .text-content {
        width: 100%;
        align-items: center;
        text-align: center;
    }
    
    #cs2-banner h1, 
    #cs2-banner p, 
    #cs2-banner .container {
        text-align: center;
    }
    
    #cs2-banner::after {
        top: 30%;
        right: 50%;
        transform: translate(50%, -50%);
        width: 40vh;
        height: 40vh;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slider Container */
.slider-container {
    background: rgba(20, 20, 35, 0.4);
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 24px;
    max-width: 900px;
    width: 90%;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    backdrop-filter: blur(6px);
    min-height: 250px;
    transition: transform 0.3s ease;
}

.slider-container:hover {
    box-shadow: 0 8px 32px 0 rgba(255, 42, 42, 0.1);
    border-color: rgba(255, 42, 42, 0.2);
}

.slider-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 42, 42, 0.5), transparent);
}

.slider-item {
    padding: 1.5rem;
    text-align: center;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    position: relative;
    z-index: 2;
}

.slider-item h3 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 0 20px rgba(255, 42, 42, 0.6);
    font-family: 'Morabba Heavy', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.slider-item p {
    font-size: 1.3rem;
    color: var(--text-secondary);
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 1rem;
}

.slider-nav button {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    width: 50px;
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    transition: all 0.3s ease;
    pointer-events: all;
    box-shadow: 
        0 4px 15px rgba(255, 42, 42, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 8px var(--accent-color);
    letter-spacing: 1px;
}

.slider-nav button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 42, 42, 0.2), transparent);
    transition: left 0.6s ease;
}

.slider-nav button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 42, 42, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.slider-nav button:hover::before {
    left: 100%;
}

.slider-nav button:hover::after {
    width: 100px;
    height: 100px;
}

.slider-nav button:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 
        0 10px 30px rgba(255, 42, 42, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    color: #ffffff;
    text-shadow: 0 0 15px var(--accent-color);
    border-color: #ffffff;
}

.slider-nav button:active {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 
        0 5px 20px rgba(255, 42, 42, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}



/* Resources Section */
.latest-resources {
    margin: 6rem auto;
    max-width: 1200px;
    padding: 0 2rem;
}

.latest-resources h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 3rem;
    color: white;
    text-shadow: 0 0 20px rgba(189, 0, 0, 0.5);
    position: relative;
}

.latest-resources h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 42, 42, 0.5);
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.resource-item {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.resource-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 42, 42, 0.8), transparent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.resource-item:hover::before {
    transform: scaleX(1);
}

.resource-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 42, 42, 0.1);
    border-color: rgba(255, 42, 42, 0.3);
    background: rgba(30, 30, 50, 0.7);
}

.resource-item h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.resource-item p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.events-page {
    margin: 4rem auto 6rem;
    max-width: 1200px;
    padding: 0 2rem;
}

.events-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.events-header h2 {
    font-size: 3rem;
    color: white;
    text-shadow: 0 0 20px rgba(189, 0, 0, 0.5);
}

.events-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-top: 0.8rem;
}

.events-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 1rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.event-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
}

.event-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 42, 42, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.event-media {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.event-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-image-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 42, 42, 0.25), transparent 60%);
}

.event-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.event-date {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.event-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.event-status {
    margin-top: 0.5rem;
    align-self: flex-start;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.status-planned {
    border-color: rgba(255, 255, 255, 0.15);
}

.status-registration {
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffd166;
}

.status-active {
    border-color: rgba(76, 175, 80, 0.4);
    color: #8be28b;
}

.status-finished {
    border-color: rgba(189, 0, 0, 0.4);
    color: #ff6b6b;
}

/* Auth Section */
.auth-section {
    background: var(--card-bg);
    padding: 3rem;
    margin: 8rem auto 4rem;
    border-radius: 24px;
    max-width: 500px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
}

.auth-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
}

.auth-section h2 {
    text-align: center;
    margin-bottom: 2rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 600;
}

.form-group input {
    width: 100%;
    padding: 1rem;
    background: var(--tertiary-bg);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 20px var(--shadow-light);
    background: var(--secondary-bg);
}

.btn {
    width: 100%;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.5);
    color: #fff;
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.btn span {
    position: relative;
    z-index: 1;
}

/* Ripple Effect Styles */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4); /* Made white for better visibility on dark buttons */
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-8px);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.6);
    }
}

/* Slider Dots */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* Footer */
footer {
    background: var(--secondary-bg);
    color: var(--text-secondary);
    text-align: center;
    padding: 3rem 2rem;
    margin-top: 6rem;
    border-top: 1px solid var(--border-color);
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
}

/* Responsive Design */
@media (max-width: 480px) {
    #cs2-banner h1 {
        font-size: 2.5rem;
    }

    #cs2-banner p {
        font-size: 1rem;
    }

    #cs2-banner .image-content {
        min-height: 300px;
    }
}  



/* Motion Graphics - Floating Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.floating {
    animation: float 4s ease-in-out infinite;
}

/* Reveal Animation on Scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    opacity: 0;
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading {
    animation: pulse 2s ease-in-out infinite;
}

/* Additional Form Styles */
input[type="checkbox"] {
    accent-color: var(--accent-color);
    transform: scale(1.2);
}

input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

input:focus::placeholder {
    opacity: 0.5;
}

/* Enhanced Button Styles */
.btn span {
    position: relative;
    z-index: 1;
    display: inline-block;
    transition: transform 0.3s ease;
}

.btn:hover span {
    transform: scale(1.05);
}

/* Loading States */
.loading {
    pointer-events: none;
    opacity: 0.7;
}

.loading .btn {
    background: var(--gradient-secondary);
}

/* Success States */
.success {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
}

/* Error States */
.error {
    border-color: #a084dc !important; /* Changed from red to purple */
    box-shadow: 0 0 20px rgba(160, 132, 220, 0.3) !important; /* Changed from red to purple */
}

/* Enhanced Resource Items */
.resource-item {
    position: relative;
    overflow: hidden;
}

.resource-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.resource-item:hover::after {
    left: 100%;
}

/* Enhanced Slider */
.slider-container {
    position: relative;
    overflow: hidden;
}

.slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(147, 112, 219, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(147, 112, 219, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.slider-item {
    position: relative;
    z-index: 2;
}

/* Enhanced Navigation */
nav a {
    position: relative;
    overflow: hidden;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

nav a:hover::after {
    width: 80%;
}

/* Enhanced Footer */
footer {
    background: var(--secondary-bg);
    color: var(--text-secondary);
    text-align: center;
    padding: 3rem 2rem;
    margin-top: 6rem;
    border-top: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: right; /* RTL */
}

.footer-logo {
    grid-column: span 1; /* Adjust as needed */
    text-align: center;
}

.footer-logo .logo-text {
    font-family: 'Morabba Heavy', sans-serif;
    font-size: 2.5rem;
    color: var(--text-primary);
    text-shadow: 0 0 10px rgba(189, 0, 0, 0.5);
}

.footer-about {
    grid-column: span 1; /* Adjust as needed */
}

.footer-about h3,
.footer-nav h3 {
    font-family: 'Morabba Heavy', sans-serif;
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    position: relative;
}

.footer-about h3::after,
.footer-nav h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.footer-about p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    text-align: justify;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-nav ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.footer-nav ul li a:hover {
    color: var(--accent-color);
    transform: translateX(-5px);
}

.footer-nav ul li a i {
    color: var(--accent-color);
    font-size: 1.2rem;
}

.footer-social-language {
    grid-column: span 1; /* Adjust as needed */
    text-align: center;
}

.social-icons {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.social-icons a {
    color: var(--text-secondary);
    font-size: 1.8rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
    color: var(--accent-color);
    transform: translateY(-3px) scale(1.1);
}

.language-selector {
    margin-top: 1.5rem;
}

.btn-language {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-language:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-color);
    color: white;
    box-shadow: 0 0 15px rgba(255, 42, 42, 0.3);
}

.footer-copyright {
    grid-column: 1 / -1; /* Span all columns */
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
}

.footer-copyright p {
    margin: 0.5rem 0;
}

.designer-credit {
    color: var(--accent-color);
    font-weight: 600;
}

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo,
    .footer-about,
    .footer-nav,
    .footer-social-language {
        grid-column: span 1;
        text-align: center;
    }

    .footer-about h3::after,
    .footer-nav h3::after {
        right: 50%;
        transform: translateX(50%);
    }

    .footer-nav ul {
        align-items: center;
    }

    .footer-nav ul li a {
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--primary-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 4px;
}

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

/* Custom Selection */
::selection {
    background: var(--accent-color);
    color: white;
}

::-moz-selection {
    background: var(--accent-color);
    color: white;
}

/* Focus Styles */
*:focus {
    outline: none;
}

/* Smooth Animations */
* {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Exclude buttons from global transition to prevent conflicts */
button, .btn, #cs2-banner .btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}

/* Enhanced Slider Fade Effect */
.slider-container {
    position: relative;
}

.slider-item {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-item.fade-out {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

.slider-item.fade-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Improved Responsive Design */
@media (max-width: 768px) {
    .slider-container {
        margin: 1rem auto;
        padding: 1.5rem;
        width: 95%;
        min-height: 200px;
    }
    
    .slider-item {
        padding: 1rem;
        min-height: 150px;
    }
    
    .slider-item h3 {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
    
    .slider-item p {
        font-size: 1.1rem;
    }
    
    .slider-nav button {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .slider-nav {
        padding: 0 0.5rem;
    }
    
    #cs2-banner h1 {
        font-size: 2.5rem;
    }
    
    #cs2-banner p {
        font-size: 1.1rem;
    }
    
    .resource-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .auth-section {
        margin: 2rem 1rem;
        padding: 2rem;
    }
    
    .latest-resources {
        margin: 3rem auto;
        padding: 0 1rem;
    }
    
    .latest-resources h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .slider-container {
        padding: 1rem;
        width: 98%;
    }
    
    .slider-item h3 {
        font-size: 1.8rem;
    }
    
    .slider-item p {
        font-size: 1rem;
    }
    
    .slider-nav button {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Slightly darker for better focus */
    backdrop-filter: blur(8px); /* Stronger blur */
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
}

.modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: rgba(20, 20, 20, 0.7); /* Glassmorphism base */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    max-width: 700px; /* Slightly wider */
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border */
    transform: scale(0.95) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 2rem;
    text-align: right; /* Default RTL for content */
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    left: 20px; /* RTL: Close button on left */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
    line-height: 1;
}

.modal-close:hover {
    background: rgba(255, 42, 42, 0.1);
    color: var(--accent-color);
    transform: rotate(90deg);
    border-color: var(--accent-color);
}

.modal-header {
    padding: 2.5rem 2.5rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header h2 {
    color: var(--accent-color); /* Solid accent color */
    background: none;
    -webkit-text-fill-color: initial;
    font-size: 2.2rem;
    margin: 0;
    text-shadow: 0 0 15px rgba(255, 42, 42, 0.4); /* Cleaner shadow */
    font-family: 'Morabba Heavy', sans-serif;
}

.modal-body {
    padding: 2.5rem;
}

/* Connect Steps Styling Refined */
.connect-steps {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex-direction: column; /* Stack vertically on mobile default, change for desktop if needed */
}

@media (min-width: 768px) {
    .connect-steps {
        flex-direction: row; /* Side by side on desktop */
    }
}

.step-card {
    flex: 1;
    background: rgba(30, 30, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px 25px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.step-card:hover {
    background: rgba(40, 40, 40, 0.6);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 42, 42, 0.3);
}

.step-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    filter: drop-shadow(0 0 8px rgba(255, 42, 42, 0.3));
    animation: floatIcon 4s ease-in-out infinite;
}

.step-card h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--text-primary);
    text-shadow: none; /* Removed heavy shadow */
}

.step-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 25px;
    line-height: 1.6;
    text-shadow: none;
}

.code-box {
    background: rgba(10, 10, 10, 0.8);
    border-radius: 12px;
    padding: 15px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    direction: ltr; /* Code should be LTR */
}

.code-box code {
    font-family: 'JetBrains Mono', monospace;
    color: #a5f3fc;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-footer {
    padding: 1.5rem 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
}

.login-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.text-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s;
}

.text-link:hover {
    color: #ff5555;
    text-shadow: 0 0 8px rgba(255, 85, 85, 0.4);
}
    
    .info-section {
        padding: 1rem;
    }
}

/* CS2 Page Styles */
.page-banner {
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.8), rgba(0, 212, 255, 0.8)), url('cs2_background.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 8rem 2rem 4rem;
    text-align: center;
    margin-top: 70px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.page-banner h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.page-banner p {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.content-section {
    padding: 4rem 2rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.info-card {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 20px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.info-card:hover::before {
    transform: scaleX(1);
}

.info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-color);
}

.info-card .info-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: bounce 2s ease-in-out infinite;
}

.info-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.info-card p {
    color: var(--text-secondary);
    line-height: 1.8;
}

.features-section {
    padding: 4rem 2rem;
    background: rgba(147, 112, 219, 0.05);
}

.features-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3rem;
}

.features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-item {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 15px;
    border-right: 3px solid var(--accent-color);
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateX(-5px);
    background: rgba(147, 112, 219, 0.1);
}

.feature-item h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.feature-item p {
    color: var(--text-secondary);
    font-size: 1rem;
}

@media (max-width: 768px) {
    .page-banner h1 {
        font-size: 2.5rem;
    }
    
    .page-banner p {
        font-size: 1.2rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .features-list {
        grid-template-columns: 1fr;
    }
}

.approval-badge {
  position: fixed;
  top: 24px;
  right: 24px;
  background: linear-gradient(93deg, #8464fb 10%, #a084dc 90%);
  color: #fff;
  font-size: 1.3rem;
  font-family: 'Morabba Heavy', 'DM Sans', sans-serif;
  padding: 0.7rem 2.1rem 0.7rem 1.5rem;
  border-radius: 18px 22px 18px 42px;
  box-shadow: 0 0 36px 8px #a084dc90, 0 0 2px #ac7ce4;
  border: 2px solid #a084dc;
  opacity: 0.92;
  z-index: 99999;
  animation: badgeGlowApproval 2s cubic-bezier(.7,0,.4,1.15) infinite alternate;
}

@keyframes badgeGlowApproval {
  0% {
    box-shadow: 0 0 24px 3px #a084dc55, 0 0 4px #ac7ce4;
  }
  100% {
    box-shadow: 0 0 42px 8px #a084dccc, 0 0 12px #ac7ce4;
  }
}

/* Admin Panel Styles */
.admin-dashboard {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 70px auto 4rem;
    background: var(--secondary-bg);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

.admin-dashboard h1 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.admin-dashboard p {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.admin-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.admin-section-card {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.admin-section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-color);
}

.admin-section-card h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.admin-section-card p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.admin-section-card .btn {
    display: inline-block;
    width: auto;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.admin-sub-section {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    margin-bottom: 3rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.admin-sub-section h3 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Secondary Button Style */
.btn-secondary {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    padding: 0.8rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: center;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Primary Button Style (if needed explicitly) */
.btn-primary {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-shadow: 0 4px 15px rgba(255, 42, 42, 0.3);
}

.btn-primary:hover {
    background: #ff4757; /* Slightly lighter red */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 42, 42, 0.5);
}