/* ==========================================
   Bang Play Studio
   responsive.css
========================================== */

/* ===============================
   Laptop (≤1200px)
================================ */

@media screen and (max-width:1200px) {

    header {

        padding: 18px 5%;

    }

    section {

        padding: 90px 5%;

    }

    .hero h1 {

        font-size: 56px;

    }

}

/* ===============================
   Tablet (≤992px)
================================ */

@media screen and (max-width:992px) {

    header {

        flex-direction: column;

        gap: 18px;

        padding: 18px;

    }

    nav {

        flex-wrap: wrap;

        justify-content: center;

        gap: 18px;

    }

    .hero {

        padding-top: 140px;

    }

    .hero h1 {

        font-size: 46px;

    }

    .hero p {

        font-size: 18px;

    }

    .counter {

        grid-template-columns: repeat(3, 1fr);

        gap: 20px;

    }

    .game-card > img {

        height: 420px;

    }

}

/* ===============================
   Mobile (≤768px)
================================ */

@media screen and (max-width:768px) {

    header {

        position: fixed;

        flex-direction: column;

        padding: 15px;

    }

    .logo-box {

        font-size: 20px;

    }

    .logo-box img {

        width: 45px;

        height: 45px;

    }

    nav {

        gap: 12px;

    }

    nav a {

        font-size: 14px;

    }

    section {

        padding: 80px 20px;

    }

    .hero {

        min-height: 100vh;

        padding-top: 150px;

    }

    .hero h1 {

        font-size: 36px;

        line-height: 1.3;

    }

    .hero p {

        font-size: 16px;

        line-height: 1.8;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    .btn {

        width: 220px;

        text-align: center;

    }

    .section-title {

        font-size: 32px;

        margin-bottom: 40px;

    }

    .about-grid,

    .service-grid,

    .game-grid {

        grid-template-columns: 1fr;

    }

    .glass-card {

        padding: 25px;

    }

    .game-card > img {

        height: 420px;

    }

    .counter {

        grid-template-columns: 1fr;

    }

    .counter-item {

        padding: 20px;

    }

    .number {

        font-size: 48px;

    }

    .contact-box {

        padding: 30px 20px;

    }

    footer {

        padding: 45px 20px;

    }

}

/* ===============================
   Small Mobile (≤480px)
================================ */

@media screen and (max-width:480px) {

    body {

        font-size: 15px;

    }

    .hero h1 {

        font-size: 30px;

    }

    .hero p {

        font-size: 15px;

    }

    .section-title {

        font-size: 28px;

    }

    .logo-box {

        flex-direction: column;

        gap: 10px;

        text-align: center;

    }

    .logo-box img {

        width: 40px;

        height: 40px;

    }

    nav {

        gap: 10px;

    }

    nav a {

        font-size: 13px;

    }

    .btn {

        width: 100%;

        padding: 14px;

    }

    .play-btn {

        width: 100%;

        display: block;

        text-align: center;

    }

    .glass-card {

        border-radius: 18px;

    }

    .game-card {

        border-radius: 18px;

    }

    .game-card > img {

        height: 420px;

    }

    .contact-box {

        border-radius: 18px;

    }

    footer img {

        width: 70px;

    }

}

/* ===============================
   Large Desktop (≥1600px)
================================ */

@media screen and (min-width:1600px) {

    .hero h1 {

        font-size: 82px;

    }

    .hero p {

        font-size: 24px;

    }

    section {

        max-width: 1500px;

        margin: auto;

    }

    .about-grid,

    .service-grid,

    .game-grid {

        gap: 40px;

    }

}

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

@media screen and (max-height:500px) and (orientation:landscape) {

    .hero {

        min-height: auto;

        padding-top: 170px;

        padding-bottom: 80px;

    }

}

/* ===============================
   Reduce Motion
================================ */

@media (prefers-reduced-motion: reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}