/* Header */


header{
    position:sticky;
    top:0;
    z-index:1000;
    height:96px;
    background:rgba(7,48,71,.92);

    backdrop-filter:blur(14px);

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

/* Navbar */

.navbar{

    position:relative;

    height:96px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}


/* Logo */

.logo{
    justify-self:start;
}

.logo img{
    height:46px;
    width:auto;

    display:block;
}

/* Navigation */

.nav-links{

    position:absolute;

    left:50%;
    top:50%;

    transform:
    translate(-50%, -50%);

    display:flex;
    align-items:center;

    gap:34px;
}

.nav-links a{

     position:relative;

    color:
    rgba(255,255,255,.88);

    font-weight:800;

    font-size:16px;
}


/* Right Buttons */


.nav-actions{

    justify-self:end;

    display:flex;
    align-items:center;

    gap:14px;
}

.lang-btn{
    width:54px;
    height:54px;

    border-radius:999px;

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

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

    color:var(--white);

    font-weight:900;

    cursor:pointer;

    transition:.2s;
}

.lang-btn:hover{
    background:
    rgba(255,255,255,.12);
}

.quote-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:54px;

    padding:0 28px;

    border-radius:999px;

    font-weight:900;

    background:
    linear-gradient(
        90deg,
        var(--green),
        var(--green-light)
    );

    color:var(--navy);

    box-shadow:
    0 12px 28px rgba(53,179,74,.22);

    transition:.2s;
}

.quote-btn:hover{
    transform:translateY(-2px);
}

/* Dropdown */

.nav-dropdown{
    position:relative;

    display:flex;
    align-items:center;
}

.dropdown-btn{
    position:relative;

    background:none;
    border:none;

    color:
    rgba(255,255,255,.88);

    font-weight:800;

    font-size:16px;

    font-family:inherit;

    cursor:pointer;

    padding:0;

    display:flex;
    align-items:center;

    height:24px;
}

.dropdown-menu{
    position:absolute;

    top:calc(100% + 18px);
    left:0;
pointer-events:none;
    min-width:220px;

    background:#fff;

    border-radius:18px;

    padding:12px;

    display:flex;
    flex-direction:column;

    gap:6px;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:.22s ease;

    box-shadow:
    0 18px 50px rgba(0,0,0,.14);

    z-index:999;
}

.dropdown-menu.active{
    opacity:1;
    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;
}

.dropdown-menu a{
    color:#073047;

    text-decoration:none;

    padding:12px 14px;

    border-radius:12px;

    font-weight:600;

    transition:.18s;
}

.dropdown-menu a:hover{
    background:#f3f8fb;

    color:#35b34a;
}

/* =========================
   Active Navigation
========================= */

.nav-links a,
.dropdown-btn{

    position:relative;

    transition:.25s ease;
}


/* Hover */

.nav-links a:hover,
.dropdown-btn:hover{

    color:#7CFF7C;
}


/* Active */

.nav-links a.active,
.dropdown-btn.active{

    color:#ffffff;
}


/* Glow Line */

.nav-links a.active::after,
.dropdown-btn.active::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-14px;

    transform:translateX(-50%);

    width:72%;
    height:4px;

    border-radius:999px;

    background:#63d84e;

    box-shadow:
    0 0 10px rgba(99,216,78,.9),
    0 0 20px rgba(99,216,78,.7),
    0 0 34px rgba(99,216,78,.45);
}


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

.mobile-menu-btn{

    display:none;
}

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

.mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;
    height:100vh;

    background:#073047;

    z-index:5000;

    transition:.35s ease;

    padding:34px 28px;

    box-shadow:
    -10px 0 40px rgba(0,0,0,.18);
}

.mobile-menu.active{

    right:0;
}

.mobile-menu-inner{

    display:flex;
    flex-direction:column;

    gap:24px;

    margin-top:60px;
}

.mobile-menu a{

    color:#fff;

    font-size:20px;

    font-weight:700;
}

.mobile-product-group{

    display:flex;
    flex-direction:column;

    gap:14px;

    padding-left:12px;
}

.mobile-product-title{

    color:#8fdcff;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.mobile-close-btn{

    position:absolute;

    top:24px;
    right:24px;

    width:54px;
    height:54px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:34px;

    cursor:pointer;
}

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

@media (max-width:768px){

    .navbar{

        height:auto;

        padding:18px 0;
    }

    .nav-links{

        display:none;
    }

    .nav-actions{

        display:flex;
        align-items:center;

        gap:12px;
    }

    .logo img{

        height:46px;
    }

    .lang-btn{

        width:50px;
        height:50px;

        font-size:15px;
    }

    .quote-btn{

        padding:13px 18px;

        font-size:15px;

        border-radius:18px;
    }

    .mobile-menu-btn{

        width:50px;
        height:50px;

        border:none;

        border-radius:50%;

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

        color:#fff;

        font-size:26px;

        display:flex;
        align-items:center;
        justify-content:center;

        cursor:pointer;
    }

}



/* Responsive */

@media (max-width:920px){

    .nav-links{
        display:none;
    }

    .navbar{
        height:74px;
    }

    .logo img{
        height:40px;
    }

}

@media (max-width:560px){

    .quote-btn{
        display:none;
    }

    .navbar{
        height:70px;
    }

    .logo img{
        height:36px;
    }

}