/* ==========================================================
   RESPONSIVE CSS
========================================================== */

/* Large Desktop */
@media (max-width:1400px){

}

/* Laptop */
@media (max-width:1200px){

}

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

@media (max-width:992px){

    .navbar{

        height:72px;

    }

    .menu-toggle{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

    }

    .nav-btn{

        display:none;

    }

    .nav-menu{

        position:fixed;

        top:72px;

        right:-100%;

        width:min(320px, 85vw);

        height:calc(100vh - 72px);

        background:#fff;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:30px 24px;

        transition:.4s ease;

        box-shadow:-10px 0 30px rgba(0,0,0,.08);

        z-index:9999;

    }

    .nav-menu.active{

        right:0;

    }

    .nav-menu li{

        width:100%;

        border-bottom:1px solid #E5E7EB;

    }

    .nav-menu li a{

        display:block;

        width:100%;

        padding:16px 0;
        font-size:16px;
        font-weight:500;

    }

    .mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

    }

    .mobile-overlay.active{

        opacity:1;

        visibility:visible;

    }

}

/*==========================================================
    HERO
==========================================================*/
@media (max-width:992px){
    
    .hero{

        padding-top:130px;

        padding-bottom:70px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .hero-content{

        order:1;

    }

    .hero-dashboard{

        order:2;

    }

    .hero-content p{

        max-width:700px;

        margin:0 auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .dashboard{

        max-width:600px;

        margin:auto;

    }

}

/* Mobile */
@media (max-width:768px){

   .logo img{
        height:42px;
    }


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

    .hero{

        padding-top:120px;

        padding-bottom:60px;

    }

    .hero-content h1{

        font-size:38px;

        line-height:1.15;

        margin:20px 0;

    }

    .hero-content h1 span{

        display:block;

    }

    .hero-content p{

        font-size:18px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:18px;

    }

    .hero-buttons .btn{

        width:100%;

        justify-content:center;

    }

    .hero-features{

        gap:15px;

        font-size:15px;

    }

    .dashboard{

        padding:28px;

    }

    .dashboard-header{

        margin-bottom:25px;

    }

    .dashboard-stat{

        margin-bottom:25px;

    }

    .dashboard-stat h2{

        font-size:44px;

    }

    .metric-card{

        padding:18px;

    }

    .metric-card h4{

        font-size:15px;

    }

    .metric-card span{

        font-size:20px;

    }

    .floating-card{

        display:none;

    }


}

/* Small Mobile */
@media (max-width:576px){

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

    .hero{

        padding-top:110px;

    }

    .hero-content h1{

        font-size:34px;

    }

    .hero-content p{

        font-size:17px;

    }

    .dashboard{

        padding:22px;

        border-radius:20px;

    }

    .dashboard-grid{

        gap:12px;

    }

    .metric-card{

        padding:16px;

    }

    .metric-card h4{

        font-size:14px;

    }

    .metric-card span{

        font-size:18px;

    }

    .technology-tags{

        gap:8px;

    }

    .technology-tags span{

        font-size:13px;

        padding:6px 10px;

    }

    .dashboard-footer{

        font-size:14px;

    }

}