/* ==========================================================
   Palworld France
   Responsive
   Author : ErATOme51
========================================================== */

/* ==========================================================
   <= 1200px
========================================================== */

@media (max-width:1200px){

    .container{

        width:min(95%,1200px);

    }

}

/* ==========================================================
   <= 992px
========================================================== */

@media (max-width:992px){

    h1{

        font-size:52px;

    }

    .hero-logo{

        max-width:340px;

    }

    .grid-4{

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

    }

    .grid-3{

        grid-template-columns:1fr;

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .vote-wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }

    .vote-left{

        text-align:center;

    }

    .vote-features{

        justify-items:center;

    }

}

/* ==========================================================
   <= 768px
========================================================== */

@media (max-width:768px){

    header{

        padding:18px 0;

    }

    nav{

        display:none;

    }

    .hero{

        min-height:100vh;

        padding:140px 20px 80px;

    }

    .hero-small{

        min-height:40vh;

        padding-top:140px;

    }

    h1{

        font-size:42px;

    }

    .hero-small h1{

        font-size:40px;

    }

    .hero p{

        font-size:18px;

    }

    .hero-logo{

        max-width:260px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:340px;

        justify-content:center;

    }

    .section-title{

        font-size:34px;

    }

    .section-subtitle{

        font-size:18px;

    }

    .grid-4,

    .grid-3,

    .grid-2{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .vote-left h2{

        font-size:34px;

    }

    .vote-card{

        padding:35px;

    }

    .vote-card h3{

        font-size:28px;

    }

    .vote-stars{

        font-size:34px;

        letter-spacing:4px;

    }

}

/* ==========================================================
   <= 576px
========================================================== */

@media (max-width:576px){

    .container{

        width:92%;

    }

    h1{

        font-size:34px;

    }

    .hero-small h1{

        font-size:32px;

    }

    .hero p{

        font-size:16px;

    }

    .section-title{

        font-size:28px;

    }

    .section-subtitle{

        font-size:16px;

    }

    .card{

        padding:25px;

    }

    .vote-card{

        padding:25px;

    }

    .vote-left h2{

        font-size:28px;

    }

    .vote-features div{

        font-size:16px;

        text-align:center;

    }

    .server-ip{

        font-size:15px;

        word-break:break-word;

    }

    footer{

        text-align:center;

    }

}