/*==================================================
NOCTIS TECHNOLOGIES
HEADER
==================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:20px 0;

    transition:all .35s ease;

}

.header.scrolled{

    padding:14px 0;

}


/*==================================================
NAVIGATION BAR
==================================================*/

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    height:72px;

    padding:0 26px;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.65);

    border-radius:999px;

    box-shadow:
    var(--shadow),
    inset 0 1px rgba(255,255,255,.9);

}


/*==================================================
BRAND LOGO / WORDMARK
==================================================*/

.brand{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.brand img{

    width:48px;

    height:48px;

    object-fit:contain;

}

.brand-text{

    display:flex;

    flex-direction:column;

    line-height:1;

}

.brand-title{

    font-family:"Space Grotesk",sans-serif;

    font-size:1.18rem;

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

}

.brand-subtitle{

    margin-top:6px;

    font-size:.84rem;

    color:var(--sage-dark);

    letter-spacing:.08em;

}


/*==================================================
DESKTOP NAVIGATION LINKS
==================================================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:34px;

}

.nav-links li{

    list-style:none;

}

.nav-links a{

    position:relative;

    font-size:.95rem;

    font-weight:600;

    color:var(--text-light);

    transition:.35s;

}

.nav-links a:hover,
.nav-links a.active{

    color:var(--primary);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--sage)
    );

    transition:.35s;

}

.nav-links a:hover::after,
.nav-links a.active::after{

    width:100%;

}


/*==================================================
RIGHT NAVIGATION AREA
==================================================*/

.nav-right{

    display:flex;

    align-items:center;

    gap:16px;

}


/*==================================================
MOBILE MENU TOGGLE BUTTON
==================================================*/

.menu-toggle{

    display:none;

    width:52px;

    height:52px;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:#fff;

    color:var(--text);

    border:1px solid var(--border);

    box-shadow:var(--shadow-xs);

    transition:.35s;

}

.menu-toggle:hover{

    transform:scale(1.05);

    border-color:var(--primary);

    color:var(--primary);

}


/*==================================================
MOBILE NAVIGATION MENU
==================================================*/

.mobile-menu{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    height:100dvh;

    background:rgba(252,252,251,.98);

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    transform:translateX(100%);

    transition:.45s ease;

    z-index:9999;

    overflow-y:auto;

    padding:100px 30px 40px;

}

.mobile-menu.active{

    transform:translateX(0);

}


/*==================================================
MOBILE MENU LINKS
==================================================*/

.mobile-menu nav{

    display:flex;

    flex-direction:column;

    max-width:700px;

    margin:auto;

}

.mobile-menu nav a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 0;

    font-family:"Space Grotesk",sans-serif;

    font-size:1.25rem;

    font-weight:600;

    color:var(--text);

    border-bottom:1px solid var(--divider);

    transition:.3s;

}

.mobile-menu nav a:hover{

    color:var(--primary);

    padding-left:10px;

}

.mobile-menu nav a.active{

    color:var(--primary);

}


/*==================================================
MOBILE CTA BUTTON
==================================================*/

.mobile-menu .btn-primary{

    margin-top:34px;

    width:100%;

    border-bottom:none;

    color:#fff;

}

.mobile-menu .btn-primary:hover{

    color:#fff;

    padding-left:0;

}


/*==================================================
SCROLL PROGRESS BAR
==================================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    z-index:10001;

}

/*==================================================
BODY MENU LOCK
==================================================*/

body.menu-open{

    overflow:hidden;

}

/*==================================================
NAVIGATION RESPONSIVE
==================================================*/

@media (max-width:1100px){

    .nav-links{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .nav-right .btn-primary{

        display:none;

    }

}


@media (min-width:1101px){

    .mobile-menu{

        display:none;

    }

}


@media (max-width:768px){

    .header{

        padding:14px 0;

    }

    .navbar{

        height:66px;

        padding:0 18px;

        border-radius:24px;

    }

    .brand-title{

        font-size:1.05rem;

    }

    .brand-subtitle{

        font-size:.78rem;

    }

    .mobile-menu{

        padding:90px 24px 30px;

    }

}


@media (max-width:480px){

    .navbar{

        padding:0 14px;

    }

    .menu-toggle{

        width:48px;

        height:48px;

    }

    .mobile-menu nav a{

        font-size:1.1rem;

        padding:18px 0;

    }

}


body.menu-open{

    overflow:hidden;

}


/*==================================================
MENU OPEN
==================================================*/

.mobile-menu{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    transform:translateX(100%);
    transition:transform .45s ease;
    display:flex;
}

.mobile-menu.active{
    transform:translateX(0);
}

@media (min-width:1101px){
    .mobile-menu{
        display:none;
    }
}

/*==================================================
END OF NAVIGATION CSS
==================================================*/