/* ===================================================
   VSPL Responsive Styles
=================================================== */

/* ===========================================
   Large Desktop
=========================================== */

@media (min-width: 1600px){

    .hero{
        max-width:1180px;
    }

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

    .dashboard{
        max-width:820px;
    }

}

/* ===========================================
   Laptop
=========================================== */

@media (max-width: 1400px){

    .hero{

        width:95%;

        gap:50px;

    }

    .hero h1{

        font-size:clamp(76px,9vw,112px);

    }

    .hero h2{

        font-size:26px;

    }

    .dashboard{

        max-width:680px;

    }

}

/* ===========================================
   Tablet
=========================================== */

@media (max-width:1024px){

    body{

        overflow:auto;

    }

    .hero{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        padding:72px 0 96px;

        height:auto;

        gap:0;

    }

    .hero-content{

        width:100%;

        max-width:720px;

        text-align:center;

    }

    .hero-content p{

        margin-left:auto;
        margin-right:auto;

    }

    .logo{

        margin:auto;
        margin-bottom:30px;

    }

    .badge{

        margin:auto;

    }

    .hero-actions{

        justify-content:center;

        display:flex;

    }

    .dashboard{

        width:100%;

    }

    footer{

        position:relative;

        flex-wrap:wrap;

        gap:20px;

    }

}

/* ===========================================
   Mobile
=========================================== */

@media (max-width:768px){

    body{

        overflow:auto;

    }

    .hero{

        width:92%;

        padding:60px 0;

        gap:0;

    }

    .hero h1{

        font-size:52px;

    }

    .hero h2{

        font-size:22px;

    }

    .hero p{

        font-size:16px;

        line-height:1.8;

    }

    .dashboard{

        border-radius:20px;

    }

    .dashboard-header{

        padding:0 15px;

    }

    .dashboard-title{

        display:none;

    }

    .dashboard-body{

        padding:22px;

        min-height:auto;

    }

    .info-row{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .service{

        font-size:15px;

    }

    .launch-btn{

        width:100%;

        max-width:300px;

    }

    footer{

        font-size:13px;

        padding:18px;

        gap:14px;

    }

    .watermark{

        display:none;

    }

}

/* ===========================================
   Small Mobile
=========================================== */

@media (max-width:480px){

    .hero{

        width:90%;

    }

    .hero h1{

        font-size:42px;

    }

    .hero h2{

        font-size:18px;

    }

    .hero p{

        font-size:15px;

    }

    .badge{

        font-size:11px;

        padding:8px 14px;

    }

    .logo{

        width:140px;

    }

    .dashboard{

        border-radius:16px;

    }

    .dashboard-body{

        padding:18px;

    }

    .info-row{

        padding:12px;

    }

    .progress{

        height:6px;

    }

    footer{

        flex-direction:column;

        align-items:center;

    }

}

/* ===========================================
   Reduce Motion
=========================================== */

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}