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;
    }
}

<style>
    /* 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 */
        }
    }
</style>