/*==================================================
        L2RAIZ LANDING
        RESPONSIVE.CSS
==================================================*/

/*=========================================
1600px
=========================================*/

@media (max-width:1600px){

    .hero h1{
        font-size:72px;
    }

    .logo{
        width:320px;
    }

}

/*=========================================
1400px
=========================================*/

@media (max-width:1400px){

    .countdown{
        gap:20px;
    }

    .card{
        width:140px;
        height:160px;
    }

    .card span{
        font-size:58px;
    }

}

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

@media (max-width:1200px){

    .landing{
        padding:40px 30px;
    }

    .hero h1{
        font-size:64px;
    }

    .hero p{
        font-size:17px;
    }

    .card{
        width:130px;
        height:150px;
    }

    .buttons{
        gap:18px;
    }

}

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

@media (max-width:992px){

    .logo{
        width:280px;
    }

    .hero h1{
        font-size:52px;
    }

    .hero p{
        font-size:16px;
    }

    .countdown{
        gap:18px;
    }

    .card{
        width:120px;
        height:140px;
    }

    .card span{
        font-size:48px;
    }

    .btn{
        width:220px;
        height:55px;
    }

}

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

@media (max-width:768px){

    body{
        overflow-y:auto;
    }

    .landing{
        min-height:auto;
        padding:80px 20px 120px;
    }

    .logo{
        width:240px;
    }

    .badge{
        font-size:11px;
        padding:10px 20px;
        letter-spacing:2px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero p{

        font-size:15px;

        line-height:1.7;

        margin-top:18px;

    }

    .countdown{

        margin-top:45px;

        gap:15px;

    }

    .card{

        width:110px;

        height:130px;

    }

    .card span{

        font-size:42px;

    }

    .card small{

        font-size:11px;

    }

    .server-info{

        gap:12px;

        margin-top:35px;

    }

    .info{

        min-width:120px;

        height:46px;

        padding:0 18px;

    }

    .buttons{

        flex-direction:column;

        width:100%;

        gap:15px;

    }

    .btn{

        width:100%;

        max-width:320px;

    }

    footer{

        position:relative;

        margin-top:60px;

        bottom:auto;

        transform:none;

        left:auto;

    }

}

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

@media (max-width:576px){

    .logo{

        width:200px;

    }

    .hero h1{

        font-size:34px;

    }

    .hero p{

        font-size:14px;

    }

    .countdown{

        display:grid;

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

        gap:14px;

        width:100%;

        max-width:300px;

    }

    .card{

        width:100%;

        height:120px;

    }

    .card span{

        font-size:36px;

    }

    .info{

        width:100%;

        max-width:260px;

    }

}

/*=========================================
420px
=========================================*/

@media (max-width:420px){

    .landing{

        padding:60px 15px 100px;

    }

    .logo{

        width:170px;

    }

    .hero h1{

        font-size:30px;

    }

    .hero p{

        font-size:13px;

    }

    .badge{

        font-size:10px;

        padding:8px 18px;

    }

    .card{

        height:105px;

    }

    .card span{

        font-size:32px;

    }

    .btn{

        height:52px;

        font-size:13px;

    }

    footer p{

        font-size:11px;

    }

}

/*=========================================
4K
=========================================*/

@media (min-width:2200px){

    .logo{

        width:450px;

    }

    .hero h1{

        font-size:110px;

    }

    .hero p{

        font-size:24px;

    }

    .card{

        width:190px;

        height:210px;

    }

    .card span{

        font-size:82px;

    }

    .btn{

        width:300px;

        height:70px;

        font-size:16px;

    }

}

@media (max-width:768px){

    body{
        cursor:auto;
    }

    .cursor,
    .cursor-dot{
        display:none;
    }

}