/* =========================================================
   FirstPLAYER Website
   Responsive stylesheet
   ========================================================= */


/* =========================================================
   LARGE SCREENS
   1400px+
   ========================================================= */


   @media (min-width: 1400px) {


    .container {

        width: min(1280px, 90%);

    }


    .hero {

        padding-top:140px;

    }


    .player-window {

        transform:
            perspective(1200px)
            rotateY(-10deg)
            translateY(-10px);

    }


}









/* =========================================================
   LAPTOPS
   max 1100px
   ========================================================= */


@media (max-width:1100px) {


    .hero-container {


        gap:40px;


    }



    .cards {


        grid-template-columns:

            repeat(2,1fr);


    }



    .hero-stats {


        gap:25px;


    }


    .story-grid {


        gap:45px;


    }


}









/* =========================================================
   TABLETS
   max 900px
   ========================================================= */


@media (max-width:900px) {



    .nav-links {


        position:absolute;


        top:78px;

        left:0;

        right:0;


        background:white;


        display:none;


        flex-direction:column;


        padding:30px;


        gap:20px;


        border-bottom:

            1px solid
            rgba(0,0,0,.05);


        box-shadow:

            0 20px 40px
            rgba(15,23,42,.08);


    }



    .nav-links.open {


        display:flex;


    }




    .menu-toggle {


        display:block;


    }



    .hero-container {


        grid-template-columns:

            1fr;


        text-align:center;


    }



    .hero-content {


        display:flex;


        flex-direction:column;


        align-items:center;


    }



    .hero p {


        margin-left:auto;

        margin-right:auto;


    }



    .hero-buttons {


        justify-content:center;


    }



    .hero-preview {


        margin-top:40px;


    }



    .player-window {


        transform:none;


    }




    .hero-stats {


        justify-content:center;


        flex-wrap:wrap;


    }




    .story-grid {


        grid-template-columns:

            1fr;


    }



    .story-image {


        order:2;


    }




    .footer-content {


        flex-direction:column;


        gap:20px;


        text-align:center;


    }


}









/* =========================================================
   MOBILE
   max 600px
   ========================================================= */


@media (max-width:600px) {



    .container {


        width:90%;


    }





    .navbar {


        backdrop-filter:

            blur(12px);


    }



    .nav-container {


        height:70px;


    }




    .logo {


        font-size:1.15rem;


    }




    .logo-play {


        width:32px;

        height:32px;


    }




    .language-switch {


        padding:

            7px 10px;


    }







    .hero {


        padding:

            70px 0
            60px;


    }





    .hero h1 {


        font-size:

            2.5rem;


    }




    .hero p {


        font-size:

            1rem;


    }





    .hero-buttons {


        flex-direction:column;


        width:100%;


    }





    .button {


        width:100%;


    }





    .hero-stats {


        display:grid;


        grid-template-columns:

            repeat(2,1fr);


        width:100%;


        gap:25px;


        margin-top:45px;


    }





    .stat {


        text-align:center;


    }







    .player-screen {


        height:220px;


    }





    .play-circle {


        width:65px;


        height:65px;


        font-size:1.4rem;


    }





    .why {


        padding:

            70px 0;


    }





    .section-title {


        margin-bottom:40px;


    }





    .section-title h2,
    .story h2,
    .cta h2 {


        font-size:

            2rem;


    }






    .cards {


        grid-template-columns:

            1fr;


    }







    .feature-card {


        padding:26px;


    }







    .story {


        padding:

            70px 0;


    }





    .image-placeholder {


        height:260px;


        font-size:1.5rem;


    }





    .cta {


        padding:

            30px 0
            70px;


    }





    .cta-box {


        padding:

            45px 25px;


        border-radius:25px;


    }




}









/* =========================================================
   SMALL PHONES
   max 380px
   ========================================================= */


@media (max-width:380px) {



    .hero h1 {


        font-size:

            2.15rem;


    }




    .hero-stats {


        grid-template-columns:

            1fr;


    }



    .version-badge {


        font-size:.75rem;


    }



}