/* =========================================
   VRChatCustom 2.0
   Responsive Design
========================================= */



/* ===============================
   LARGE TABLET / SMALL LAPTOP
   1200px
========================================= */


@media (max-width:1200px){


    .hero {


        gap:

        40px;



        padding-left:

        30px;



        padding-right:

        30px;



    }



    .hero-preview {


        width:

        380px;



        height:

        380px;



    }



    .mod-grid {


        grid-template-columns:

        repeat(
            2,
            1fr
        );



    }




    .stats {


        grid-template-columns:

        repeat(
            2,
            1fr
        );



    }



}







/* ===============================
   TABLET
   992px
========================================= */


@media (max-width:992px){



    .navbar {


        padding:

        0 25px;



    }





    .navbar nav {


        display:

        none;



    }





    .menu-btn {


        display:

        flex;



        align-items:

        center;



        justify-content:

        center;



    }






    .hero {


        flex-direction:

        column;



        text-align:

        center;



        padding-top:

        150px;



    }





    .hero-content {


        max-width:

        750px;



    }





    .hero p {


        margin-left:

        auto;



        margin-right:

        auto;



    }





    .hero-buttons {


        justify-content:

        center;



    }





    .hero-preview {


        margin-top:

        50px;



    }





    .featured-grid {


        grid-template-columns:

        1fr;



    }





    .filters {


        flex-direction:

        column;



        align-items:

        stretch;



    }





    .filters select {


        width:

        100%;



    }



}







/* ===============================
   MOBILE
   768px
========================================= */


@media (max-width:768px){



    :root {


        --section-space:

        80px;



    }






    .container {


        padding-left:

        20px;



        padding-right:

        20px;



    }






    .navbar {


        top:

        10px;



        height:

        70px;



        width:

        92%;



        padding:

        0 20px;



    }







    .logo {


        font-size:

        20px;



    }






    .discord-btn {


        display:

        none;



    }








    .hero {


        min-height:

        auto;



        padding-top:

        130px;



    }






    .hero h1 {


        font-size:

        42px;



        letter-spacing:

        -1px;



    }







    .hero p {


        font-size:

        16px;



    }






    .hero-buttons {


        flex-direction:

        column;



        width:

        100%;



    }





    .hero-buttons button {


        width:

        100%;



    }






    .hero-preview {


        width:

        300px;



        height:

        320px;



    }





    .floating-card {


        width:

        240px;



        padding:

        20px;



    }





    .floating-card h3 {


        font-size:

        18px;



    }






    .stats {


        grid-template-columns:

        1fr;



        gap:

        15px;



    }






    .stat-box {


        padding:

        30px 20px;



    }







    .section-title h2 {


        font-size:

        32px;



    }






    .section-title p {


        font-size:

        15px;



    }






    .mod-grid {


        grid-template-columns:

        1fr;



        gap:

        20px;



    }







    .mod-image {


        height:

        200px;



    }







    .filters {


        padding:

        20px;



    }






    .category-filter {


        justify-content:

        center;



    }






    .mod-actions {


        flex-direction:

        column;



    }






    footer {


        padding:

        60px 20px 30px;



    }






    .footer-links {


        flex-direction:

        column;



        gap:

        20px;



    }



}







/* ===============================
   SMALL PHONES
   480px
========================================= */


@media (max-width:480px){



    .hero h1 {


        font-size:

        34px;



    }






    .hero-tag {


        font-size:

        11px;



    }






    .primary-btn,
    .secondary-btn {


        padding:

        13px 22px;



        font-size:

        14px;



    }






    .floating-card {


        width:

        220px;



    }





    .stat-box h2 {


        font-size:

        34px;



    }






    .mod-title {


        font-size:

        19px;



    }



}







/* ===============================
   WINDOWS SUPPORT BADGE
========================================= */


.windows-badge {


    display:

    inline-flex;



    align-items:

    center;



    gap:

    8px;



    padding:

    8px 14px;



    border-radius:

    var(--radius-full);



    background:

    rgba(
        0,
        245,
        212,
        .1
    );



    border:

    1px solid rgba(
        0,
        245,
        212,
        .25
    );



    color:

    var(--primary);



    font-size:

    12px;



    font-weight:

    700;



}