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

@media (max-width:1280px){

    .navbar{

        padding:16px 28px;

    }

    .nav-links{

        gap:24px;

    }

    .nav-cta{

        display:none;

    }

}

/* ==========================================
   Tablet & Mobile
========================================== */

@media (max-width:992px){

    .navbar{

        width:94%;

        margin:16px auto;

        padding:16px 22px;

        justify-content:space-between;

    }

    .brand-logo{

        width:240px;

        max-width:100%;

        height:auto;

}

    .nav-links{

        display:none;

    }

    .menu-toggle{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

    }

    /* Mobile Menu */

    .mobile-menu{

        position:fixed;

        top:0px;

        left:50%;

        transform:translateX(-50%) translateY(-20px);

        width:94%;

        max-width:500px;

        background:#fff;

        border-radius:18px;

        padding:24px;

        box-shadow:0 24px 60px rgba(15,23,42,.12);

        display:flex;

        flex-direction:column;

        gap:8px;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:.3s ease;

        z-index:999;

    }

    .menu-open .mobile-menu{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:translateX(-50%) translateY(0);

    }

    .mobile-menu a{

        display:block;

        width:100%;

        padding:14px 18px;

        border-radius:12px;

        text-decoration:none;

        color:#111827;

        font-size:16px;

        font-weight:600;

        transition:.25s;

    }

    .mobile-menu a:hover{

        background:#F8FAFC;

        color:#2563EB;

    }

    .mobile-menu .btn{

        width:100%;

        justify-content:center;

        margin-top:14px;

    }

}

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

@media (max-width:768px){

    .navbar{

        padding:14px 18px;

    }

    .brand-logo{

        width:190px;

    }

}

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

@media (max-width:480px){

    .navbar{

        padding:12px 16px;

        border-radius:18px;

    }

    .brand-logo{

        width:170px;

    }

    .mobile-menu{

        top:0px;

        width:92%;

    }

}