/* =========================================
   RESPONSIVE DESIGN
   LOS SANTOS RP
========================================= */





/* =========================================
   LARGE SCREENS 1600+
========================================= */


@media (min-width:1600px){


    .container {


        width:
        1400px;


    }



    .hero h1 {


        font-size:
        130px;


    }



    .hero-content {


        max-width:
        1000px;


    }


}








/* =========================================
   LAPTOPS
   1200 - 1599
========================================= */


@media(max-width:1599px){


    .hero {


        min-height:
        750px;


    }



    .hero h1 {


        font-size:
        90px;


    }



    .server-panel {


        gap:
        25px;


    }



}








/* =========================================
   TABLETS
   992 - 1199
========================================= */


@media(max-width:1199px){



    header {


        padding:
        20px 0;


    }



    nav {


        gap:
        20px;


    }



    nav a {


        font-size:
        13px;


    }




    .server-online {


        display:
        none;


    }




    .hero-content {


        text-align:
        center;


        margin:
        auto;


    }




    .description {


        margin-left:
        auto;


        margin-right:
        auto;


    }



    .hero-buttons {


        justify-content:
        center;


    }




    .hero-stats {


        justify-content:
        center;


        flex-wrap:
        wrap;


    }




    .stat-card {


        min-width:
        260px;


    }





}









/* =========================================
   MOBILE TABLETS
   768 - 991
========================================= */



@media(max-width:991px){



    header .container {


        border-radius:
        15px;


    }




    .logo {


        font-size:
        22px;


    }





    .hero {


        min-height:
        900px;


    }




    .hero h1 {


        font-size:
        65px;


    }





    .subtitle {


        font-size:
        11px;


        letter-spacing:
        3px;


    }





    .hero-buttons {


        width:
        100%;


    }





    .play-btn,
    .discord-btn {


        width:
        100%;


        text-align:
        center;


    }




    .server-panel {


        padding:
        30px;


    }





    .section-header {


        text-align:
        center;


    }




    .gallery-grid {


        grid-template-columns:
        1fr 1fr;


    }





}









/* =========================================
   PHONES
   480 - 767
========================================= */


@media(max-width:767px){



    .container {


        width:
        92%;


    }



    header {


        padding:
        15px 0;


    }





    header .container {


        justify-content:
        center;


    }




    nav {


        display:
        none;


    }




    .logo {


        font-size:
        20px;


    }




    .hero {


        min-height:
        820px;


    }





    .hero h1 {


        font-size:
        52px;


        letter-spacing:
        -2px;


    }




    .description {


        font-size:
        15px;


    }





    .hero-stats {


        margin-top:
        45px;


    }




    .stat-card {


        min-width:
        auto;


        padding:
        18px;


    }





    .stat-info strong {


        font-size:
        24px;


    }





    section {


        padding:
        80px 0;


    }





    .section-header h2 {


        font-size:
        34px;


    }





    .server-main h3 {


        font-size:
        28px;


    }





    .gallery-grid {


        display:
        flex;


    }





    .gallery-item {


        height:
        230px;


    }





    .download-btn {


        width:
        100%;


        text-align:
        center;


    }




    .footer-links {


        flex-direction:
        column;


        align-items:
        center;


        gap:
        20px;


    }


}









/* =========================================
   SMALL PHONES
   BELOW 480
========================================= */



@media(max-width:480px){



    .hero h1 {


        font-size:
        42px;


    }



    .subtitle {


        font-size:
        10px;


    }



    .description {


        line-height:
        1.5;


    }





    .stat-icon {


        font-size:
        28px;


    }




    .feature-card {


        padding:
        25px;


    }





    .feature-card h3 {


        font-size:
        22px;


    }




    .download-box h2 {


        font-size:
        32px;


    }



}









/* =========================================
   ULTRA SMALL
========================================= */



@media(max-width:360px){


    .hero h1 {


        font-size:
        36px;


    }


}









/* =========================================
   VIDEO OPTIMIZATION
========================================= */



@media(max-width:768px){


    .hero video {


        object-position:
        center;


    }


}





/* =========================================
   REDUCE MOTION
========================================= */



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


    *,
    *::before,
    *::after{


        animation-duration:
        0.01ms !important;


        transition-duration:
        0.01ms !important;


    }


}