/* ===================================================
   Sohail Academy v4.1
   Numora Hero
=================================================== */

/* ==========================================
   HERO SECTION
========================================== */

.game-section,
.game-hero{

    position:relative;

    overflow:hidden;

    padding:90px 0;

    background:
        radial-gradient(circle at top left, rgba(59,130,246,.30), transparent 32%),
        radial-gradient(circle at 80% 10%, rgba(244,114,182,.22), transparent 24%),
        linear-gradient(135deg, #07111F 0%, #102347 45%, #123d6d 100%);

    isolation:isolate;

}

/* ==========================================
   Background Glow
========================================== */

.game-section::before,
.game-hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    top:-180px;

    right:-150px;

    border-radius:50%;

    background:rgba(59,130,246,.18);

    filter:blur(100px);

    animation: driftGlow 10s ease-in-out infinite alternate;

}

.game-section::after,
.game-hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-150px;

    left:-120px;

    border-radius:50%;

    background:rgba(245,158,11,.16);

    filter:blur(100px);

    animation: driftGlowReverse 12s ease-in-out infinite alternate;

}

/* ==========================================
   Hero Content
========================================== */

.game-section .container,
.game-hero .container{

    position:relative;

    z-index:2;

}

/* ==========================================
   Badge
========================================== */

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    color:#F59E0B;

    font-weight:700;

    margin-bottom:25px;

}

/* ==========================================
   Hero Title
========================================== */

.hero-title{

    color:#ffffff;

    font-size:3.6rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:22px;

}

/* ==========================================
   Hero Description
========================================== */

.hero-description{

    color:#CBD5E1;

    font-size:1.12rem;

    line-height:1.9;

    max-width:620px;

    margin-bottom:40px;

}

/* ==========================================
   Hero Statistics
========================================== */

.hero-stats{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.hero-stat{

    width:120px;

    padding:20px;

    text-align:center;

    border-radius:18px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    transition:.35s;

}

.hero-stat:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.10);

}

.hero-stat h3{

    margin:0;

    color:#F59E0B;

    font-size:2rem;

    font-weight:800;

}

.hero-stat span{

    color:#E2E8F0;

    font-size:.9rem;

}

/* ==========================================
   Hero Buttons
========================================== */

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    padding:14px 34px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.hero-buttons .btn-warning{

    background:#F59E0B;

    border:none;

}

.hero-buttons .btn-warning:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(245,158,11,.35);

}

.hero-buttons .btn-outline-light:hover{

    background:#ffffff;

    color:#08111F;

}

/* ==========================================
   Hero Illustration
========================================== */

.hero-image{

    width:100%;

    max-width:620px;

    animation:floatHero 5s ease-in-out infinite;

}

/* ==========================================
   Floating Animation
========================================== */

@keyframes floatHero{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes driftGlow{

    from{

        transform:translate3d(0, 0, 0) scale(1);

    }

    to{

        transform:translate3d(20px, -30px, 0) scale(1.08);

    }

}

@keyframes driftGlowReverse{

    from{

        transform:translate3d(0, 0, 0) scale(1);

    }

    to{

        transform:translate3d(-20px, 30px, 0) scale(1.1);

    }

}

/* ===================================================
   GAME OVERVIEW SECTION
=================================================== */

.game-overview{

    padding:90px 0;

    background:linear-gradient(135deg, rgba(6, 12, 28, 0.95), rgba(15, 25, 49, 0.9));

    position:relative;

    overflow:hidden;

}

.game-overview::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle at top right, rgba(59,130,246,.18), transparent 28%);

    pointer-events:none;

}

.overview-card{

    background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    height:100%;

    border:1px solid rgba(255,255,255,.14);

    box-shadow:0 18px 40px rgba(2,6,23,.24);

    transition:.35s;

    backdrop-filter:blur(10px);

}

.overview-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(37,99,235,.18);

}

.overview-icon{

    width:85px;

    height:85px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2563EB,
        #4F46E5
    );

}

.overview-icon i{

    color:#ffffff;

    font-size:2.4rem;

}

.overview-card h4{

    color:#ffffff;

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:15px;

}

.overview-card p{

    color:#CBD5E1;

    line-height:1.8;

    margin:0;

}

/* ==========================================
   Card Enhancements
========================================== */

.overview-card,
.feature-box,
.testimonial-card,
.stat-box,
.related-card{

    background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06));

    border:1px solid rgba(255,255,255,.14);

    box-shadow:0 18px 40px rgba(2,6,23,.24);

    backdrop-filter:blur(12px);

    color:#F8FAFC;

}

.overview-card h4,
.feature-box h4,
.testimonial-card h5,
.stat-box h2,
.related-card h4{

    color:#ffffff;

}

.overview-card p,
.feature-box p,
.testimonial-card p,
.stat-box p,
.related-card p{

    color:#CBD5E1;

}

.related-card.active-game{

    border-color:rgba(245,158,11,.45);

    box-shadow:0 20px 50px rgba(245,158,11,.16);

}

/* ==========================================
   Tablet
========================================== */

@media(max-width:991px){

    .game-hero{

        text-align:center;

        padding:70px 0;

    }

    .hero-title{

        font-size:2.7rem;

    }

    .hero-description{

        margin:0 auto 35px;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-buttons{

        justify-content:center;

        margin-bottom:45px;

    }

}

/* ==========================================
   Mobile
========================================== */

@media(max-width:576px){

    .hero-title{

        font-size:2rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .hero-stat{

        width:45%;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .overview-card{

        padding:30px 20px;

    }

    .overview-icon{

        width:70px;

        height:70px;

    }

    .overview-icon i{

        font-size:2rem;

    }

}