/* ==========================================================
   PROJECT TITAN
   navbar.css
========================================================== */

.navbar{

    position: fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    transition:.35s ease;

    padding:10px 0;

}

.navbar.scrolled{

    background:rgb(255,255,255);

    backdrop-filter:blur(18px);

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

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    padding:14px 0;

}

.navbar .container{


    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ===========================
LOGO
=========================== */

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:60px;

    transition:.35s;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.company-name{

    font-family:'Poppins',sans-serif;

    font-size:22px;

    font-weight:700;

    color:#fff;

    transition:.35s;


}

.company-sub{

    font-size:12px;
    color:rgba(255,255,255,.75);
    letter-spacing:.5px;
    transition:.35s;
    margin-top: -6px;

}

.navbar.scrolled .company-name{

    color:var(--navy);

}

.navbar.scrolled .company-sub{

    color:var(--gray);

}

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

.nav-menu{

    display:flex;

    align-items:center;

    gap:40px;


}

.nav-menu a{

    position:relative;

    font-weight:500;

    color:#fff;

    transition:.35s;

}

.navbar.scrolled .nav-menu a{

    color:var(--dark);

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.nav-menu a:hover::after,

.nav-menu a.active::after{

    width:100%;

}

.nav-menu a:hover{

    color:var(--primary);

}

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

.btn-quote{

    padding:14px 28px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.35s;

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

}

.btn-quote:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

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

}

/* ===========================
HAMBURGER
=========================== */

.hamburger{

    width:45px;

    height:45px;

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    cursor:pointer;

}

.hamburger span{

    width:28px;

    height:3px;

    background:#fff;

    transition:.35s;

    border-radius:50px;

}

.navbar.scrolled .hamburger span{

    background:var(--navy);

}

.hamburger.active span:nth-child(1){

    transform:rotate(45deg) translate(6px,6px);

}

.hamburger.active span:nth-child(2){

    opacity:0;

}

.hamburger.active span:nth-child(3){

    transform:rotate(-45deg) translate(7px,-7px);

}

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

.mobile-nav{

    position:fixed;

    top:0;

    right:-100%;

    width:330px;

    height:100vh;

    background:var(--navy);

    padding:120px 40px;

    display:flex;

    flex-direction:column;

    gap:28px;

    transition:.45s;

    z-index:9998;

}

.mobile-nav.active{

    right:0;

}

.mobile-nav a{

    color:#fff;

    font-size:18px;

    font-weight:500;

    transition:.3s;

}

.mobile-nav a:hover{

    color:var(--secondary);

    padding-left:10px;

}

.mobile-btn{

    margin-top:20px;

    background:var(--primary);

    padding:15px;

    border-radius:999px;

    text-align:center;

}