/* ===========================================================
   GP ANSOR WARULOR SYSTEM
   RESPONSIVE
=========================================================== */

/* ==========================
   DESKTOP
========================== */

@media (max-width:1200px){

.container{

    max-width:100%;
    padding-left:24px;
    padding-right:24px;

}

.hero-container{

    gap:20px;

}

.hero-left h1{

    font-size:52px;
}

}

/* ==========================
   TABLET
========================== */

@media (max-width:992px){

.navbar-container{

    height:70px;
}

.navbar-menu{

    display:none;
}

.hero{

    min-height:auto;
    padding:40px 0;

}

.hero-container{

    grid-template-columns:1fr;
    gap:50px;

}

.hero-left{

    order:2;
    text-align:center;

}

.hero-left p{

    margin:auto;
    margin-bottom:40px;

}

.hero-button{

    justify-content:center;

}

.hero-info{

    justify-content:center;
    flex-wrap:wrap;

}

.hero-right{

    order:1;
    justify-content:center;
    min-height:auto;

}

.hero-image{

    justify-content:center;

}

.hero-image img{

    max-width:none;

}

.footer-container{

    flex-direction:column;
    text-align:center;

}

.footer-left{

    flex-direction:column;
}

}

/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

.page-wrapper{

    padding:10px;
}

.page-card{

    border-radius:18px;
}

.navbar-brand img{

    width:52px;

    height:52px;

}

.brand-title h2{

    font-size:20px;

}

.brand-title span{

    font-size:12px;

}

.hero{

    padding:40px 0;

}

.hero-left h1{

    font-size:38px;

}

.hero-left p{

    font-size:16px;

    line-height:30px;

}

.hero-button{

    flex-direction:column;

}

.hero-button .btn{

    width:100%;

}

.hero-info{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;

}

.info-item{

    width:100%;
    padding:16px;

}

.footer-right{

    flex-direction:column;
    gap:12px;

}

.social-media{

    justify-content:center;

}

}

/* ==========================
   SMALL MOBILE
========================== */

@media (max-width:480px){

.container{

    padding-left:18px;
    padding-right:18px;

}

.hero-left h1{

    font-size:30px;

}

.hero-left p{

    font-size:15px;

}

.hero-info{

    grid-template-columns:1fr;

}

.info-item{

    max-width:220px;
    margin:auto;

}

.footer-left h3{

    font-size:20px;

}

.footer-left p{

    font-size:13px;

}

}
/* =======================================================
   LOGIN RESPONSIVE
======================================================= */

@media (max-width:768px){

    .login-wrapper{

        grid-template-columns:1fr;
        height:auto;
        min-height:100dvh;

    }

    .login-left{

        display:none;

    }

    .login-right{

        width:100%;
        min-height:100dvh;
        padding:20px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#F8FAFC;

    }

    .login-card{

        width:100%;
        max-width:420px;
        padding:28px 24px;
        border-radius:20px;
        box-shadow:0 10px 30px rgba(0,0,0,.08);

    }

    .login-logo{

        width:72px;
    }

    .login-card h1{

        font-size:34px;
    }

    .login-card p{

        font-size:15px;
        margin-bottom:28px;

    }

    .login-option{

        flex-direction:column;
        align-items:flex-start;
        gap:12px;

    }

    .login-btn{

        margin-top:12px;

    }

    .login-footer{

        margin-top:24px;
		font-size:10px;
    }

}
@media (max-width:480px){

    .login-right{

        padding:20px;
    }

    .login-card{

        padding:18px 18px;

    }

    .login-card h1{

        font-size:28px;

    }

    .form-group input{

        height:48px;

    }

}