:root {

    --primary-color: #044569;
    --secondary-color: #058F48;

    --white: #ffffff;
    --light-bg: #f3f7fa;

    --text-dark: #132433;
    --text-light: #647381;

    --border-color: rgba(4, 69, 105, 0.08);

    --primary-shadow: rgba(4, 69, 105, 0.12);
    --secondary-shadow: rgba(5, 143, 72, 0.18);

}

/* =========================================================
                    GLOBAL STYLES
    ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: 'Poppins', sans-serif;
    background: var(--light-bg);
    min-height: 200vh;

}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.container {

    width: 100%;
    max-width: 1440px;
    margin: auto;
    padding: 0 20px;

}

/* =========================================================
                    HEADER
    ========================================================= */

header {

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    z-index: 9999;

    padding-top: 18px;

    transition: 0.5s ease;

}

header.scrolled {

    padding-top: 10px;

}

/* =========================================================
                    MAIN HEADER WRAPPER
    ========================================================= */

.header-wrapper {

    position: relative;

    background:
        rgba(255, 255, 255, 0.78);

    backdrop-filter: blur(22px);

    border-radius: 34px;

    border: 1px solid rgba(255, 255, 255, 0.8);

    overflow: hidden;

    box-shadow:
        0 18px 55px rgba(4, 69, 105, 0.08);

}

.header-wrapper::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    background:
        radial-gradient(circle,
            rgba(5, 143, 72, 0.08),
            transparent);

    top: -200px;
    right: 0px;

}

/* .header-wrapper::after {

    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    background:
        radial-gradient(circle,
            rgba(4, 69, 105, 0.08),
            transparent);

    bottom: -220px;
    left: -180px;

} */

/* =========================================================
                    TOP BAR
    ========================================================= */

.topbar {

    padding:
        8px 38px;

    border-bottom:
        1px solid rgba(4, 69, 105, 0.06);

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

    flex-wrap: wrap;

    gap: 18px;

    position: relative;
    z-index: 2;

}

.topbar-left,
.topbar-right {

    display: flex;
    align-items: center;
    gap: 32px;

    flex-wrap: wrap;

}

.topbar-item {

    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--text-light);

    font-size: 14px;
    font-weight: 500;

}

.topbar-item i {

    color: var(--secondary-color);

}

.live-status {

    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--primary-color);

    font-size: 14px;
    font-weight: 600;

}

.pulse-dot {

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--secondary-color);

    position: relative;

}

.pulse-dot::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: var(--secondary-color);

    animation: pulse 1.5s infinite;

}

@keyframes pulse {

    0% {

        transform: scale(1);
        opacity: 0.8;

    }

    100% {

        transform: scale(2.8);
        opacity: 0;

    }

}

/* =========================================================
                    NAVBAR
    ========================================================= */

.navbar {

    padding:
        16px 38px;

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

    position: relative;
    z-index: 2;

}

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

.logo {

    display: flex;
    align-items: center;
    gap: 18px;

}

.logo-icon {

    width: 66px;
    height: 66px;

    border-radius: 24px;

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

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

    color: #fff;

    font-size: 26px;

    box-shadow:
        0 18px 40px rgba(4, 69, 105, 0.16);

    transition: 0.5s ease;

}

.logo:hover .logo-icon {

    transform:
        rotate(-8deg) scale(1.08);

}

.logo-text h2 {

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

    font-size: 34px;
    font-weight: 700;

    color: var(--text-dark);

    line-height: 1;

}

.logo-text span {

    font-size: 13px;

    letter-spacing: 6px;

    color: var(--secondary-color);

    font-weight: 700;

    text-transform: uppercase;

}

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

.nav-menu {

    display: flex;
    align-items: center;
    gap: 46px;

}

.nav-link {

    position: relative;

    color: var(--text-dark);

    font-size: 15px;
    font-weight: 600;

    transition: 0.4s ease;

}

.nav-link:hover {

    color: var(--primary-color);

}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 0%;
    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(to right,
            var(--primary-color),
            var(--secondary-color));

    transition: 0.5s ease;

}

.nav-link:hover::after {

    width: 100%;

}

/* =========================================================
                    NAV ACTIONS
    ========================================================= */

.nav-actions {

    display: flex;
    align-items: center;
    gap: 16px;

}

/* TRACK BUTTON */

.track-btn {

    position: relative;

    overflow: hidden;

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

    color: #fff;

    padding:
        18px 32px;

    border-radius: 18px;

    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 15px;
    font-weight: 600;

    box-shadow:
        0 18px 35px rgba(4, 69, 105, 0.16);

    transition: 0.5s ease;

}

.track-btn:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 24px 45px rgba(5, 143, 72, 0.20);

}

.track-btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120px;

    width: 80px;
    height: 100%;

    background:
        rgba(255, 255, 255, 0.22);

    transform: skewX(30deg);

    transition: 0.8s ease;

}

.track-btn:hover::before {

    left: 120%;

}

/* USER BUTTON */

.user-btn {

    width: 60px;
    height: 60px;

    border-radius: 20px;

    border:
        1px solid rgba(4, 69, 105, 0.08);

    background:
        rgba(255, 255, 255, 0.85);

    color: var(--primary-color);

    font-size: 18px;

    cursor: pointer;

    transition: 0.5s ease;

    box-shadow:
        0 10px 25px rgba(4, 69, 105, 0.08);

}

.user-btn:hover {

    transform:
        translateY(-5px);

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

    color: #fff;

}

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

.menu-toggle {

    display: none;

    width: 60px;
    height: 60px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.9);

    border:
        1px solid rgba(4, 69, 105, 0.08);

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

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    transition: 0.4s ease;

    box-shadow:
        0 10px 25px rgba(4, 69, 105, 0.06);

}

.menu-toggle:hover {

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

}

.menu-toggle span {

    width: 24px;
    height: 3px;

    border-radius: 20px;

    background: var(--primary-color);

    transition: 0.4s ease;

}

.menu-toggle:hover span {

    background: #fff;

}

.menu-toggle.active span:nth-child(1) {

    transform:
        rotate(45deg) translateY(11px);

}

.menu-toggle.active span:nth-child(2) {

    opacity: 0;

}

.menu-toggle.active span:nth-child(3) {

    transform:
        rotate(-45deg) translateY(-11px);

}

/* =========================================================
                    MOBILE SIDEBAR
    ========================================================= */

.mobile-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.28);

    backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;

    transition: 0.4s ease;

    z-index: 9998;

}

.mobile-overlay.active {

    opacity: 1;
    visibility: visible;

}

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

@media(max-width:1100px) {

    .menu-toggle {

        display: flex;

    }

    .track-btn {

        display: none;

    }

    .nav-menu {

        position: fixed;

        top: 0;
        right: 0;

        width: 360px;
        height: 100vh;

        background:
            rgba(255, 255, 255, 0.92);

        backdrop-filter: blur(24px);

        flex-direction: column;

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

        padding: 60px;

        gap: 34px;

        transform:
            translateX(100%);

        transition:
            transform 0.45s ease;

        z-index: 9999;

        box-shadow:
            -15px 0 50px rgba(0, 0, 0, 0.08);

    }

    .nav-menu.active {

        transform:
            translateX(0);

    }

    .nav-link {

        font-size: 24px;

    }

}

@media(max-width:768px) {

    .topbar {

        display: none;

    }

    .navbar {

        padding:
            20px 22px;

    }

    .logo-text h2 {

        font-size: 26px;

    }

    .logo-icon {

        width: 56px;
        height: 56px;

        font-size: 22px;

    }

    .user-btn,
    .menu-toggle {

        width: 56px;
        height: 56px;

    }

}

@media(max-width:500px) {

    header {

        padding-top: 14px;

    }

    .header-wrapper {

        border-radius: 28px;

    }

    .navbar {

        padding:
            18px 18px;

    }

    .nav-menu {

        width: 100%;

        padding: 40px;

    }

    .logo {

        gap: 14px;

    }

    .logo-text h2 {

        font-size: 22px;

    }

    .logo-text span {

        font-size: 11px;

        letter-spacing: 4px;

    }

    .logo-icon {

        width: 52px;
        height: 52px;

        border-radius: 18px;

    }

    .user-btn,
    .menu-toggle {

        width: 52px;
        height: 52px;

        border-radius: 18px;

    }

}


/* =========================================================
                    OVERLAY
    ========================================================= */

    .mobile-overlay {

        position: fixed;

        inset: 0;

        background:
            rgba(7, 18, 28, 0.42);

        backdrop-filter: blur(10px);

        opacity: 0;
        visibility: hidden;

        transition: 0.45s ease;

        z-index: 9998;

    }

    .mobile-overlay.active {

        opacity: 1;
        visibility: visible;

    }

    /* =========================================================
                    SIDEBAR
    ========================================================= */

    .lux-sidebar {

        position: fixed;

        top: 0;
        right: 0;

        width: 390px;
        max-width: 100%;

        height: 100vh;

        background:
            rgba(255, 255, 255, 0.82);

        backdrop-filter: blur(26px);

        border-left:
            1px solid rgba(4, 69, 105, 0.08);

        padding:
            28px;

        display: flex;
        flex-direction: column;

        justify-content: space-between;

        overflow-y: auto;

        z-index: 9999;

        transform:
            translateX(100%);

        transition:
            transform 0.5s cubic-bezier(.77, 0, .175, 1);

        box-shadow:
            -20px 0 60px rgba(0, 0, 0, 0.08);

    }

    .lux-sidebar.active {

        transform:
            translateX(0);

    }

    .lux-sidebar::before {

        content: "";

        position: absolute;

        width: 100%;
        height: 300px;

        background:
            radial-gradient(circle,
                rgba(5, 143, 72, 0.10),
                transparent);

        top: -120px;
        right: -120px;

    }

    .lux-sidebar::after {

        content: "";

        position: absolute;

        width: 260px;
        height: 260px;

        background:
            radial-gradient(circle,
                rgba(4, 69, 105, 0.08),
                transparent);

        bottom: -120px;
        left: -120px;

    }

    /* =========================================================
                    TOP
    ========================================================= */

    .lux-sidebar-top {

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

        margin-bottom: 35px;

        position: relative;
        z-index: 2;

    }

    /* LOGO */

    .lux-logo {

        display: flex;
        align-items: center;
        gap: 14px;

    }

    .lux-logo-icon {

        width: 60px;
        height: 60px;

        border-radius: 20px;

        background:
            linear-gradient(135deg,
                #044569,
                #058F48);

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

        color: #fff;

        font-size: 22px;

        box-shadow:
            0 18px 35px rgba(4, 69, 105, 0.16);

    }

    .lux-logo-text h2 {

        font-size: 30px;
        font-weight: 700;

        color: #132433;

        line-height: 1;

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

    }

    .lux-logo-text span {

        font-size: 12px;

        letter-spacing: 5px;

        color: #058F48;

        font-weight: 700;

        text-transform: uppercase;

    }

    /* CLOSE BUTTON */

    .lux-close-btn {

        width: 52px;
        height: 52px;

        border-radius: 18px;

        border: none;

        background:
            rgba(255, 255, 255, 0.7);

        color: #044569;

        font-size: 18px;

        cursor: pointer;

        transition: 0.4s ease;

        box-shadow:
            0 10px 25px rgba(4, 69, 105, 0.06);

    }

    .lux-close-btn:hover {

        background:
            linear-gradient(135deg,
                #044569,
                #058F48);

        color: #fff;

        transform:
            rotate(90deg);

    }

    /* =========================================================
                    USER CARD
    ========================================================= */

    .lux-user-card {

        background:
            rgba(255, 255, 255, 0.7);

        border:
            1px solid rgba(4, 69, 105, 0.06);

        border-radius: 26px;

        padding:
            22px;

        display: flex;
        align-items: center;
        gap: 18px;

        margin-bottom: 35px;

        position: relative;
        z-index: 2;

        box-shadow:
            0 12px 35px rgba(4, 69, 105, 0.06);

    }

    .lux-user-avatar {

        width: 70px;
        height: 70px;

        border-radius: 22px;

        background:
            linear-gradient(135deg,
                #044569,
                #058F48);

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

        color: #fff;

        font-size: 24px;

        box-shadow:
            0 15px 35px rgba(4, 69, 105, 0.14);

    }

    .lux-user-info h3 {

        font-size: 20px;
        font-weight: 700;

        color: #132433;

        margin-bottom: 6px;

    }

    .lux-user-info p {

        color: #647381;

        font-size: 14px;

        font-weight: 500;

    }

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

    .lux-menu {

        display: flex;
        flex-direction: column;

        gap: 14px;

        position: relative;
        z-index: 2;

    }

    .lux-link {

        position: relative;

        display: flex;
        align-items: center;
        gap: 18px;

        padding:
            18px 20px;

        border-radius: 22px;

        overflow: hidden;

        color: #132433;

        font-size: 16px;
        font-weight: 600;

        transition: 0.4s ease;

    }

    .lux-link::before {

        content: "";

        position: absolute;

        inset: 0;

        background:
            linear-gradient(135deg,
                #044569,
                #058F48);

        opacity: 0;

        transition: 0.4s ease;

    }

    .lux-link>* {

        position: relative;
        z-index: 2;

    }

    .lux-link-icon {

        width: 50px;
        height: 50px;

        border-radius: 16px;

        background:
            rgba(4, 69, 105, 0.06);

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

        font-size: 18px;

        transition: 0.4s ease;

    }

    .lux-arrow {

        margin-left: auto;

        opacity: 0;

        transform:
            translateX(-10px);

        transition: 0.4s ease;

    }

    .lux-link:hover,
    .lux-link.active {

        color: #fff;

        transform:
            translateX(6px);

        box-shadow:
            0 18px 35px rgba(4, 69, 105, 0.14);

    }

    .lux-link:hover::before,
    .lux-link.active::before {

        opacity: 1;

    }

    .lux-link:hover .lux-link-icon,
    .lux-link.active .lux-link-icon {

        background:
            rgba(255, 255, 255, 0.14);

        color: #fff;

    }

    .lux-link:hover .lux-arrow,
    .lux-link.active .lux-arrow {

        opacity: 1;

        transform:
            translateX(0);

    }

    /* =========================================================
                    BOTTOM
    ========================================================= */

    .lux-bottom {

        margin-top: 40px;

        position: relative;
        z-index: 2;

    }

    /* TRACK BUTTON */

    .lux-track-btn {

        position: relative;

        overflow: hidden;

        width: 100%;

        padding:
            20px 24px;

        border-radius: 24px;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;

        background:
            linear-gradient(135deg,
                #044569,
                #058F48);

        color: #fff;

        font-size: 16px;
        font-weight: 700;

        margin-bottom: 28px;

        box-shadow:
            0 20px 40px rgba(4, 69, 105, 0.16);

        transition: 0.5s ease;

    }

    .lux-track-btn:hover {

        transform:
            translateY(-5px);

    }

    .lux-track-glow {

        position: absolute;

        width: 120px;
        height: 120px;

        background:
            rgba(255, 255, 255, 0.18);

        border-radius: 50%;

        top: -50px;
        right: -40px;

    }

    /* CONTACT BOX */

    .lux-contact-box {

        background:
            rgba(255, 255, 255, 0.6);

        border:
            1px solid rgba(4, 69, 105, 0.06);

        border-radius: 24px;

        padding:
            22px;

        display: flex;
        flex-direction: column;

        gap: 22px;

        box-shadow:
            0 12px 35px rgba(4, 69, 105, 0.05);

    }

    .lux-contact-item {

        display: flex;
        align-items: center;
        gap: 16px;

    }

    .lux-contact-icon {

        width: 52px;
        height: 52px;

        border-radius: 16px;

        background:
            linear-gradient(135deg,
                rgba(4, 69, 105, 0.08),
                rgba(5, 143, 72, 0.08));

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

        color: #058F48;

        font-size: 18px;

    }

    .lux-contact-item h5 {

        font-size: 15px;
        font-weight: 700;

        color: #132433;

        margin-bottom: 4px;

    }

    .lux-contact-item span {

        color: #647381;

        font-size: 13px;

        font-weight: 500;

    }

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

    @media(max-width:500px) {

        .lux-sidebar {

            width: 100%;

            padding:
                24px 20px;

        }

        .lux-logo-text h2 {

            font-size: 24px;

        }

        .lux-user-card {

            padding:
                18px;

        }

        .lux-user-avatar {

            width: 62px;
            height: 62px;

        }

        .lux-link {

            padding:
                16px 18px;

        }

    }

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

.mobile-menu-btn {

    width: 56px;
    height: 56px;

    min-width: 56px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.95);

    border:
        1px solid rgba(4, 69, 105, 0.08);

    display: none;

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

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    position: relative;
    z-index: 10000;

    transition: 0.4s ease;

    box-shadow:
        0 10px 30px rgba(4, 69, 105, 0.08);

}

/* SHOW ONLY ON MOBILE */

@media(max-width:1100px){

    .mobile-menu-btn{

        display: flex;

    }

}

/* HOVER EFFECT */

.mobile-menu-btn:hover {

    background:
        linear-gradient(135deg,
            #044569,
            #058F48);

}

/* LINES */

.mobile-menu-btn span {

    width: 24px;
    height: 3px;

    border-radius: 50px;

    background: #044569;

    transition: 0.4s ease;

}

/* HOVER LINE COLOR */

.mobile-menu-btn:hover span {

    background: #fff;

}

/* ACTIVE ANIMATION */

.mobile-menu-btn.active span:nth-child(1) {

    transform:
        rotate(45deg) translateY(11px);

}

.mobile-menu-btn.active span:nth-child(2) {

    opacity: 0;

}

.mobile-menu-btn.active span:nth-child(3) {

    transform:
        rotate(-45deg) translateY(-11px);

}

.menu-toggle{
    display:none;
}