@import url("variables.css");
@import url("components.css");
@import url("layout.css");
@import url("responsive.css");

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

@media (max-width: 768px){

    body{
        overflow-x: hidden;
    }

    .hero{
        padding: 30px 15px;
        min-height: 100vh;
        display: flex;
        align-items: center;
    }

    .hero-card{
        width: 100%;
        padding: 30px 20px !important;
        border-radius: 18px;
    }

    .app-title{
        font-size: 28px !important;
        line-height: 1.3;
    }

    .app-desc{
        font-size: 15px;
    }

    .logo{
        width: 80px !important;
        height: auto;
    }

    .btn-lg{
        padding: 12px;
        font-size: 16px;
    }

    blockquote{
        font-size: 15px;
    }

    .container{
        padding-left: 15px;
        padding-right: 15px;
    }

}