body{
    background: #000;
}/* Background Fix and Base Setup */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* BACKGROUND IMAGE FIX: Make sure the path is correct relative to your CSS file.
       If your image is in an 'images' folder alongside your index.html, use this path.
       Alternatively, replace this with your actual image path or a cloud-hosted URL. */
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/bg-banner.webp') no-repeat center center/cover;
    background-size: cover;
    padding-top: 70px;
    opacity: 0; /* Starts invisible for animation */
}

/* Base Styles (copied from previous response and slightly tweaked) */
:root {
    --neon: #ff0055;
    --glass: rgba(255, 255, 255, 0.05);
    --font-gaming: 'Orbitron', sans-serif;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    padding: 0 5%;
}

.navbar .container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-gaming);
    font-size: 1.5rem;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
}

.logo span { color: var(--neon); }

.nav-links a {
    text-decoration: none;
    color: #bbb;
    margin: 0 15px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--neon);
}

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

.login-btn {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
}

.join-btn {
    background: var(--neon);
    color: #fff;
    padding: 10px 22px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    box-shadow: 0 4px 15px rgba(255, 0, 85, 0.3);
    transition: 0.3s;
}

.join-btn:hover {
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.6);
    transform: translateY(-2px);
}

/* Hero Content Styling */
.hero-content {
    opacity: 0; /* Starts invisible for animation */
    transform: translateY(20px); /* Starts slightly down for animation */
}

.mini-tag {
    display: inline-block;
    border: 1px solid var(--neon);
    color: var(--neon);
    padding: 5px 15px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    border-radius: 2px;
}

.hero-content h1 {
    font-family: var(--font-gaming);
    font-size: clamp(2rem, 6vw, 4rem);
    margin-bottom: 20px;
}

.hero-content h1 span {
    color: var(--neon);
}

.hero-content p {
    color: #ccc;
    max-width: 600px;
    margin: 0 auto 30px;
    font-size: 1rem;
    line-height: 1.6;
}

/* Buttons Styling */
.btn-group {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-glow, .btn-outline {
    padding: 14px 30px;
    font-family: var(--font-gaming);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.4s;
}

.btn-glow {
    background: var(--neon);
    color: white;
    border: none;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
}

.btn-outline {
    background: transparent;
    color: white;
    border: 1px solid #fff;
}

.btn-outline:hover {
    background: #fff;
    color: #000;
}

/* ANIMATION KEYFRAMES */

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

/* Smooth Hero Entrance Animation */
@keyframes heroEntrance {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ANIMATION CLASSES */

.animated-hero {
    animation: heroEntrance 0.8s ease-out forwards; /* Background comes in */
}

.animation-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards; /* Content slides and fades in */
}

/* Sequential Animation Delays */
.animation-fade-in-up-delay-1 { animation-delay: 0.2s; }
.animation-fade-in-up-delay-2 { animation-delay: 0.4s; }
.animation-fade-in-up-delay-3 { animation-delay: 0.6s; }
.animation-fade-in-up-delay-4 { animation-delay: 0.8s; }

/* Glitch Effect Animation for Title */
@keyframes glitch {
    0% {
        text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    2% {
        text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    4% {
        text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    6% {
        text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    8% {
        text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    10% {
        text-shadow: 0px 0 0 red, 0px 0 0 blue;
    }
    100% {
        text-shadow: 0px 0 0 red, 0px 0 0 blue;
    }
}


.glitch-text{
    color: #fff;
}

.glitch-text span {
    position: relative;
    display: inline-block;
    animation: glitch 2s linear infinite;
}

/* Responsiveness (copied from previous response and slightly tweaked) */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .navbar { height: 60px; }
    .hero-content h1 { font-size: 2.5rem; }
    .btn-group { flex-direction: column; align-items: center; } /* Column buttons on mobile */
}









/* General Setup */
.reg-section {
    background-color: #000;
    color: #fff;
    padding: 60px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header Styling */
.reg-header {
    text-align: center;
    margin-bottom: 50px;
}

.reg-header h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.divider {
    position: relative;
    height: 1px;
    background: linear-gradient(to right, transparent, #ffcc00, transparent);
    width: 60%;
    margin: 20px auto;
}

.divider span {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffcc00;
    background: #000;
    padding: 0 10px;
}

.reg-header p {
    color: #ccc;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Flexbox Layout */
.reg-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.reg-image, .reg-content {
    flex: 1;
    min-width: 300px;
}

/* Image Glow Effect */
.image-wrapper {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #333;
    transition: transform 0.3s ease;
}

.image-wrapper img {
    width: 100%;
    display: block;
}

.image-overlay-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    box-shadow: inset 0 0 50px rgba(255, 204, 0, 0.2);
    pointer-events: none;
}

.image-wrapper:hover {
    transform: scale(1.02);
    border-color: #ffcc00;
}

/* Steps Styling */
.reg-content h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.step-intro {
    color: #aaa;
    margin-bottom: 25px;
}

.steps-list {
    list-style: none;
    padding: 0;
}

.steps-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.dot {
    width: 10px;
    height: 10px;
    background: #ffcc00;
    border-radius: 50%;
    margin-top: 6px;
    box-shadow: 0 0 10px #ffcc00;
}

.steps-list p {
    margin: 0;
    color: #eee;
    line-height: 1.4;
}

/* Button Styling */
.btn-gold {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 35px;
    background: linear-gradient(145deg, #ffcc00, #b8860b);
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3);
    transition: 0.3s;
}

.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .reg-header h1 { font-size: 1.8rem; }
    .reg-flex { flex-direction: column; text-align: center; }
    .steps-list li { justify-content: center; text-align: left; }
    .btn-gold { width: 100%; box-sizing: border-box; }
}
.mainlogo img{
    width: 40%;
}

/* Footer Main Styling */
.main-footer {
    background-color: #0a0a0a;
    color: #ffffff;
    padding: 60px 0 20px 0;
    font-family: 'Poppins', sans-serif;
    border-top: 2px solid #1a1a1a;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 0 20px;
}

/* Brand Section */
.footer-logo {
    font-size: 1.6rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.footer-logo span {
    color: #ffcc00; /* Golden touch */
}

.brand-info p {
    color: #999;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

/* App Download Box */
.app-download {
    background: #151515;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #333;
    width: fit-content;
}

.app-icon {
    font-size: 2rem;
    color: #3DDC84; /* Android Green */
}

.app-text span {
    display: block;
    font-size: 0.75rem;
    color: #888;
}

.app-text a {
    color: #ffcc00;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
}

/* Links Styling */
.footer-col h3 {
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: #ffcc00;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #bbb;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links a i {
    font-size: 0.7rem;
    color: #ffcc00;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 5px;
}

/* Social Media Grid */
.social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.social-box {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    border-radius: 8px;
    color: white;
    font-size: 1.2rem;
    transition: 0.3s;
    text-decoration: none;
}

.social-box.fb:hover { background: #3b5998; }
.social-box.yt:hover { background: #ff0000; }
.social-box.ig:hover { background: #e1306c; }

/* Copyright Bottom */
.footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #222;
    font-size: 0.85rem;
    color: #666;
}

.footer-bottom span {
    color: #ffcc00;
}

/* Responsiveness */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-col h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-links a { justify-content: center; }
    .app-download { margin: 0 auto; }
    .social-grid { justify-content: center; max-width: 200px; margin: 0 auto; }
}


/* Section Container */
.info-section {
    background-color: #000000;
    color: #ffffff;
    padding: 60px 0;
    width: 100%;
    font-family: 'Arial', sans-serif;
}

.info-container {
    max-width: 1200px; /* Isse aap full width ke liye 100% bhi kar sakte hain */
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
.content-block {
    margin-bottom: 40px;
}

.content-block h2 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #ffffff;
    text-transform: uppercase;
}

.content-block h2 span {
    color: #ffcc00; /* Yellow/Gold Color from image */
}

.content-block p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #dddddd;
    margin-bottom: 15px;
}

/* Highlighting Styles */
.highlight-text {
    color: #ffcc00;
    font-weight: bold;
}

.gold-text {
    color: #ffcc00;
    font-weight: 600;
}

/* Animation for Hover (Optional Smooth Effect) */
.content-block:hover h2 span {
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
    transition: 0.3s ease-in-out;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .content-block h2 {
        font-size: 1.4rem;
    }
    .content-block p {
        font-size: 0.95rem;
        text-align: justify;
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    text-decoration: none;
}

.whatsapp-float img {
    width: 35px;
    height: 35px;
}

/* Pulse Animation */
.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #25d366;
    border-radius: 50%;
    z-index: -1;
    animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Hover Effect */
.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Tooltip (Optional) */
.tooltip-text {
    position: absolute;
    right: 75px;
    background: #333;
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.whatsapp-float:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    .whatsapp-float img {
        width: 30px;
        height: 30px;
    }
    .tooltip-text {
        display: none; /* Mobile par tooltip hide rakha hai */
    }
}


/* --- Common Styles --- */
.banner-desktop, .banner-mobile {
    width: 100%;
    height: 400px; /* Aap height apne hisaab se adjust kar sakte hain */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

/* Desktop Banner Styling */
.banner-desktop {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('../images/banner-3.webp') no-repeat center center/cover;
}

/* Mobile Banner Styling */
.banner-mobile {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                url('mobile-image.jpg') no-repeat center center/cover;
    height: 300px; /* Mobile ke liye height thodi kam */
}

/* Text and Button Styles */
span { color: #ffcc00; }
h1, h2 { color: #fff; margin-bottom: 10px; font-weight: 800; }
p { color: #ccc; margin-bottom: 20px; }
.btn-main, .btn-mobile {
    padding: 10px 25px;
    background: #ffcc00;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
}

/* --- Responsive Logic (Display None) --- */

/* Jab screen 769px se badi ho (Desktop) */
@media (min-width: 769px) {
    .banner-mobile {
        display: none !important; /* Mobile banner ko hide kar do */
    }
}

/* Jab screen 768px ya usse chhoti ho (Phone) */
@media (max-width: 768px) {
    .banner-desktop {
        display: none !important; /* Desktop banner ko hide kar do */
    }
    .banner-mobile {
        display: flex; /* Mobile banner ko dikhao */
    }
}

/* --- Desktop State (Default) --- */
/* Pehle se hi mobile banner ko hide rakhenge */
.sky-mobile-view {
    display: none !important;
}

/* Desktop banner ko dikhayenge */
.sky-desktop-view {
    display: block !important;
    width: 100%;
    height: auto;
}

/* --- Mobile State (Responsive) --- */
/* Jab screen 768px se chhoti ho (Phone) */
@media screen and (max-width: 768px) {
    .sky-desktop-view {
        display: none !important; /* Desktop hide ho jayega */
    }
    
    .sky-mobile-view {
        display: block !important; /* Mobile show ho jayega */
        width: 100%;
        height: auto;
    }
}

/* Extra space remove karne ke liye wrapper */
.sky-banner-wrapper {
    width: 100%;
    line-height: 0;
}


.contact-section {
    background: #000;
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
}

.contact-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.contact-info, .contact-form-wrapper {
    flex: 1;
    min-width: 320px;
}

.contact-info h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.contact-info h2 span { color: #ffcc00; }

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    background: #111;
    border-radius: 12px;
    border: 1px solid #222;
}

.info-item i { color: #ffcc00; font-size: 1.5rem; }

/* Form Styling */
.input-group {
    position: relative;
    margin-bottom: 30px;
}

.input-group input, .input-group textarea {
    width: 100%;
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid #333;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

.input-group label {
    position: absolute;
    top: 12px;
    left: 0;
    color: #888;
    pointer-events: none;
    transition: 0.3s;
}

/* Floating Label Logic */
.input-group input:focus ~ label,
.input-group input:valid ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:valid ~ label {
    top: -15px;
    font-size: 12px;
    color: #ffcc00;
}

.input-group input:focus, .input-group textarea:focus {
    border-bottom-color: #ffcc00;
}

/* Original Gold Submit Button Style */
.submit-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background: linear-gradient(145deg, #ffcc00, #d4af37);
    color: #000;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.2);
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 204, 0, 0.4);
    color: #000;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-container { flex-direction: column; }
    .contact-info { text-align: center; }
    .info-item { justify-content: center; }
}

.about-section {
    background: #000;
    color: #fff;
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
}

.about-header {
    text-align: center;
    margin-bottom: 60px;
}

.about-header h1 {
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
}

.about-header h1 span { color: #ffcc00; }

.tagline {
    color: #888;
    letter-spacing: 2px;
    font-size: 14px;
}

/* Flex Layout */
.about-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 60px;
}

.about-image, .about-content {
    flex: 1;
}

.image-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #222;
}

.image-box img {
    width: 100%;
    display: block;
    transition: 0.5s;
}

.image-box:hover img {
    transform: scale(1.05);
}

.experience-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: #fff;
    color: #000 !important;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.experience-badge .num { font-size: 24px; font-weight: 800; display: block; }
.experience-badge .txt { font-size: 12px; font-weight: 600; }

/* Content Styling */
.about-content h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.about-content h2 span { color: #ffcc00; }

.about-content p {
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 30px 0;
}

.feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #eee;
}

.feat i { color: #ffcc00; }

/* Button */
.about-btn {
    display: inline-block;
    padding: 15px 35px;
    background: linear-gradient(145deg, #ffcc00, #d4af37);
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.3s;
    text-transform: uppercase;
}

.about-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 204, 0, 0.3);
}

/* Stats Styling */
.about-stats {
    display: flex;
    justify-content: space-around;
    background: #111;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #222;
    text-align: center;
}

.stat-box h3 {
    font-size: 2.5rem;
    color: #ffcc00;
    margin-bottom: 5px;
}

.stat-box p { color: #888; font-size: 14px; text-transform: uppercase; }

/* Mobile Responsive */
@media (max-width: 992px) {
    .about-flex { flex-direction: column; text-align: center; }
    .about-features { justify-content: center; grid-template-columns: 1fr; }
    .feat { justify-content: center; }
    .about-stats { flex-direction: column; gap: 30px; }
}

.title-section {
    position: relative;
    width: 100%;
    /* Increase height and padding to separate from the header */
    min-height: 350px; 
    padding-top: 80px;  /* Spacing from the header */
    padding-bottom: 50px; /* Spacing below the text */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Darker, deeper gradient */
    background: #000;
    background-size: 300% 300%;
    animation: dark-gradient-animation 15s ease infinite; /* Optional subtle animation */
    color: #f1f1f1; /* White with slight tint */
    overflow: hidden;
    margin-top: 0; 
}

/* Optional: Subtle animation to make it dynamic */
@keyframes dark-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.container {
    z-index: 2;
    padding: 0 15px; /* Side padding for small screens */
}

.main-title {
    font-size: 3rem;
    font-weight: 900; /* Bolder font weight */
    text-transform: uppercase;
    letter-spacing: 3px; /* Slightly more space for premium feel */
    margin-bottom: 15px;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.7);
    color: #ffffff;
}

.highlight {
    color: #ffde59; /* Richer, lighter gold for VIP */
}

.sub-text {
    font-size: 1.25rem;
    opacity: 0.85;
    letter-spacing: 1.5px;
    line-height: 1.4; /* Better readability */
    color: #e0e0e0;
}

/* Responsive Fix */
@media (max-width: 768px) {
    .main-title {
        font-size: 2.2rem;
    }
    .title-section {
        min-height: 280px;
        padding-top: 60px;
        padding-bottom: 30px;
    }
    .sub-text {
        font-size: 1.1rem;
    }
}

    /* Container Styling */
    .support-container {
        max-width: 1200px;
        margin: 40px auto;
        padding: 0 20px;
        font-family: 'Arial', sans-serif;
    }

    /* Grid Layout: Row me 3 box */
    .support-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Individual Box Styling */
    .grid-box {
        background: #111827; /* Dark BG for Gaming Look */
        border: 1px solid #374151;
        border-radius: 10px;
        padding: 25px;
        text-align: center;
        text-decoration: none;
        transition: all 0.3s ease;
        display: block;
    }

    .grid-box:hover {
        transform: translateY(-5px);
        border-color: #3b82f6; /* Blue highlight on hover */
        background: #1f2937;
    }

    .icon-box {
        font-size: 35px;
        margin-bottom: 15px;
    }

    .grid-box h3 {
        color: #ffffff;
        font-size: 18px;
        margin-bottom: 8px;
        text-transform: uppercase;
    }

    .grid-box p {
        color: #9ca3af;
        font-size: 14px;
        line-height: 1.4;
    }

    /* Responsive Design */
    @media (max-width: 992px) {
        .support-grid {
            grid-template-columns: repeat(2, 1fr); /* Tablets par 2 box */
        }
    }

    @media (max-width: 600px) {
        .support-grid {
            grid-template-columns: 1fr; /* Mobile par 1 box */
        }
    }



/* Container jo sab kuch page ke beech mein layega */
.footer-links-wrapper {
    text-align: center;
    width: 100%;
    margin-top: 40px;
}

/* Heading ki unique styling */
.footer-title-unique {
    color: #fff;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 600;
}

/* Heading ke niche ki center line */
.title-underline {
    background: #ffcc00;
    height: 3px;
    width: 50px;
    margin: 0 auto 20px;
}

/* Links ki main class jo ek line aur center mein rahegi */
.footeradd09dd {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    list-style: none;
    padding: 20px 0;
    margin: 0 auto;
}

/* Individual Button Styling */
.footeradd09dd li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 22px;
    border-radius: 4px;
    border: 1px solid rgba(255, 204, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

/* Icon style */
.footeradd09dd li a i {
    font-size: 10px;
    margin-right: 10px;
    color: #ffcc00; /* Normal state mein yellow icon */
}

/* --- YELLOW HOVER EFFECT --- */
.footeradd09dd li a:hover {
    background: #ffcc00;
    color: #000;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 204, 0, 0.4);
    border-color: #ffcc00;
}

/* Hover hone par icon ka color black */
.footeradd09dd li a:hover i {
    color: #000;
}


.gaming-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding: 40px 20px;
    background-color: #ffffff;
}

.gaming-card {
    text-decoration: none;
    color: #000;
    border: 3px solid #000;
    position: relative;
    background: #fff;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

/* Hover Effect: Box thoda slide hoga aur shadow aayegi */
.gaming-card:hover {
    background-color: #000;
    color: #fff;
    transform: translate(-5px, -5px);
    box-shadow: 8px 8px 0px #000;
}

.card-content {
    padding: 30px;
}

.gaming-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    display: block;
    border-bottom: 4px solid currentColor;
    padding-bottom: 5px;
}

.gaming-card p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Bottom text button style */
.btn-text {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border: 1px solid currentColor;
    padding: 8px 15px;
    display: inline-block;
}

/* Home Card ki special styling */
.home-card {
    border-style: dashed; /* Home box thoda alag dikhega */
}

/* Responsive fix */
@media (max-width: 600px) {
    .gaming-container {
        grid-template-columns: 1fr;
    }
}

.nav-button-container {
    display: flex;
    flex-wrap: wrap;       /* Mobile par buttons ko neeche shift karega */
    justify-content: center;
    gap: 10px;             /* Buttons ke beech ka gap */
    padding: 20px;
    background-color: #000; /* Dark background section ka */
}

.mini-btn {
    text-decoration: none;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
    text-align: center;
    transition: all 0.3s ease;
    flex: 1 1 auto;        /* Buttons ko screen ke hisab se stretch karega */
    max-width: 150px;      /* Desktop pe zyada bada na ho */
    min-width: 100px;      /* Mobile pe bahut chota na ho */
}

/* Black Style (Yellow Border/Text) */
.btn-black {
    background-color: #1a1a1a;
    color: #ffd700;
    border: 1px solid #ffd700;
}

.btn-black:hover {
    background-color: #ffd700;
    color: #000;
}

/* Yellow Style (Black Text) */
.btn-yellow {
    background-color: #ffd700;
    color: #000;
    border: 1px solid #ffd700;
}

.btn-yellow:hover {
    background-color: #000;
    color: #ffd700;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .nav-button-container {
        gap: 8px;
        padding: 10px;
    }
    
    .mini-btn {
        font-size: 12px;
        padding: 6px 10px;
        /* Choti screen par 1 line mein 2 ya 3 buttons fit honge */
        flex-basis: calc(33.33% - 10px); 
    }
}

@media (max-width: 400px) {
    .mini-btn {
        /* Bahut choti screen par 1 line mein 2 buttons */
        flex-basis: calc(50% - 10px);
    }
}

/* ==========================================================================
   1. DESKTOP STYLES 
   ========================================================================== */
.navbar {
    width: 100%;
    background-color: #000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 9999;
}

.navbar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.navbar .mainlogo img {
    max-height: 45px;
    width: auto;
    display: block;
}

.navbar .nav-links {
    display: flex;
    gap: 25px;
}

.navbar .nav-links a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.navbar .nav-links a.active, 
.navbar .nav-links a:hover {
    color: #25D366; 
}

.navbar .join-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #25D366;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

/* ==========================================================================
   2. MOBILE & TABLET STYLES
   ========================================================================== */
@media screen and (max-width: 991px) {
    
    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    .navbar .mainlogo img {
        max-height: 35px;
        width: auto;
    }

    .navbar .nav-actions {
        margin-left: auto;
        margin-right: 50px;
    }

    .navbar .join-btn {
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
        display: block;
    }

     .navbar .nav-links {
        position: absolute;
        top: 12px;
        right: 15px;
        width: 30px;
        height: 35px;
        cursor: pointer;
        display: block;
        z-index: 10002;
    }

     .navbar .nav-links::before {
        content: "";
        position: absolute;
        left: 3px;
        top: 10px;
        width: 24px;
        height: 3px;
        background: #333;
        box-shadow: 0 7px 0 #333, 0 14px 0 #333;
        transition: all 0.3s ease;
        pointer-events: none;
    }

     .navbar .nav-links a {
        position: fixed;
        left: 0;
        width: 100%; /* पूरा 100% चौड़ाई */
        background-color: #ffffff;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 10001;
        box-sizing: border-box;
        
        /* छिपाने के लिए */
        display: none;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    /* ==================================================================
  
       ================================================================== */
    
    .navbar .nav-links.nav-active a {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    /* प्रत्येक लिंक की टॉप पोजीशन हेडर पट्टी (मानक 60px) के नीचे सेट करना */
    .navbar .nav-links.nav-active a:nth-child(1) { top: 60px; }
    .navbar .nav-links.nav-active a:nth-child(2) { top: 110px; } /* 50px का अंतर */
    .navbar .nav-links.nav-active a:nth-child(3) { top: 160px; }

    /* 2. मेनू ओपन होने पर बर्गर आइकन 'X' बन जाएगा */
    .navbar .nav-links.nav-active::before {
        background: transparent;
        box-shadow: 0 7px 0 #333, 0 7px 0 #333;
        transform: rotate(45deg);
        top: 6px;
    }
}

/* सबसे छोटी मोबाइल स्क्रीन (320px या नीचे) के लिए ऑटो-एडजस्टमेंट */
@media screen and (max-width: 340px) {
    .navbar .mainlogo img {
        max-height: 28px;
    }
    .navbar .join-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    .navbar .nav-actions {
        margin-right: 42px;
    }
}