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

.main-header {

    position: sticky;

    top: 0;

    z-index: 9999;

    padding-top: 18px;

    transition: var(--transition);
}


/* =========================================
   SCROLLED
========================================= */

.main-header.header-scrolled {

    padding-top: 10px;
}


/* =========================================
   WRAPPER
========================================= */

.header-wrapper {

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

    gap: 30px;

    padding: 18px 24px;

    border-radius: 28px;

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

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

    backdrop-filter: blur(20px);

    box-shadow:
        0 12px 40px rgba(15,35,68,0.08);
}


/* =========================================
   LEFT
========================================= */

.header-left {

    display: flex;
    align-items: center;

    gap: 40px;
}


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

.logo-wrapper img {

    height: 44px;

    width: auto;
}


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

.main-nav {

    display: flex;
    align-items: center;

    gap: 30px;
}

.main-nav a {

    position: relative;

    color: var(--primary);

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

    transition: var(--transition);
}

.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0%;
    height: 2px;

    background:
        var(--accent);

    transition: var(--transition);
}

.main-nav a:hover {

    color: var(--accent);
}

.main-nav a:hover::after {

    width: 100%;
}


/* =========================================
   RIGHT
========================================= */

.header-right {

    display: flex;
    align-items: center;

    gap: 18px;
}


/* =========================================
   STATUS
========================================= */

.header-status {

    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 12px 16px;

    border-radius: 100px;

    background:
        rgba(15,35,68,0.06);

    color: var(--primary);

    font-size: 13px;
    font-weight: 600;
}

.status-live-dot {

    width: 10px;
    height: 10px;

    border-radius: 100%;

    background:
        #00b46e;

    box-shadow:
        0 0 14px rgba(0,180,90,0.45);
}


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

.header-btn {

    padding-inline: 24px;
}


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

.mobile-menu-btn {

    display: none;

    width: 52px;
    height: 52px;

    border-radius: 18px;

    border: none;

    background:
        rgba(15,35,68,0.06);

    cursor: pointer;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 5px;
}

.mobile-menu-btn span {

    width: 20px;
    height: 2px;

    border-radius: 100px;

    background:
        var(--primary);
}


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

@media (max-width: 1200px) {

    .main-nav {

        display: none;
    }

    .mobile-menu-btn {

        display: flex;
    }

}

@media (max-width: 768px) {

    .main-header {

        padding-top: 12px;
    }

    .header-wrapper {

        padding: 14px 18px;
    }

    .header-status {

        display: none;
    }

    .header-btn {

        display: none;
    }

    .logo-wrapper img {

        height: 38px;
    }

}