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

.header {

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

    width: 100%;
    height: var(--header-height);

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

    padding: 0 70px;

    background: #07194b;

    z-index: var(--z-header);

    border-bottom: 1px solid rgba(255,255,255,0.04);

}

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

.logo {

    display: flex;
    align-items: center;

    width: 260px;

    flex-shrink: 0;

}

.logo a {

    display: flex;
    align-items: center;

}

.logo img {

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

    height: auto;

    display: block;

    object-fit: contain;

}

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

.nav {

    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 55px;

}

.nav a {

    position: relative;

    color: #ffffff;

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

    text-decoration: none;

    padding-bottom: 10px;

    transition: var(--transition-fast);

    white-space: nowrap;

    line-height: 1;

}

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

.nav a:hover {

    color: #ffffff;

}

/* =========================================================
   ACTIVE BAR
========================================================= */

.nav a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 0%;
    height: 3px;

    background: var(--color-secondary);

    border-radius: 50px;

    transition: var(--transition-fast);

}

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

    width: 70%;

}

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

.header-right {

    display: flex;
    align-items: center;

    gap: 20px;

    margin-left: auto;

}

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

.header-btn {

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

    height: 56px;

    padding: 0 34px;

    background: var(--color-secondary);

    color: #ffffff;

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

    text-decoration: none;

    border-radius: 8px;

    transition: var(--transition-fast);

    white-space: nowrap;

}

.header-btn:hover {

    background: var(--color-secondary-hover);

    transform: translateY(-2px);

}

/* =========================================================
   BURGER
========================================================= */

.burger {

    width: 28px;
    height: 20px;

    display: none;

    flex-direction: column;
    justify-content: space-between;

    background: transparent;
    border: none;

    cursor: pointer;

    z-index: 1300;

}

.burger span {

    width: 100%;
    height: 2px;

    background: #ffffff;

    border-radius: 20px;

    transition: var(--transition-fast);

}

/* =========================================================
   BURGER ACTIVE
========================================================= */

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

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

}

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

    opacity: 0;

}

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

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

}

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

.mobile-nav {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    background: #07194b;

    display: flex;
    flex-direction: column;

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

    gap: 35px;

    transform: translateY(-100%);

    transition: transform var(--transition-medium);

    z-index: var(--z-menu);

}

.mobile-nav.active {

    transform: translateY(0);

}

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

.mobile-nav a {

    position: relative;

    color: #ffffff;

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

    text-decoration: none;

    transition: var(--transition-fast);

}

/* =========================================================
   MOBILE UNDERLINE
========================================================= */

.mobile-nav a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    transform: translateX(-50%);

    width: 0%;
    height: 2px;

    background: var(--color-secondary);

    transition: var(--transition-fast);

}

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

    width: 70%;

}

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

.mobile-btn {

    margin-top: 15px;

    background: var(--color-secondary);

    color: #ffffff !important;

    padding: 18px 30px;

    border-radius: 8px;

}

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

@media (max-width: 1100px) {

    .header {

        padding: 0 20px;

        justify-content: space-between;

    }

    .nav {

        display: none;

    }

    .header-right {

        display: none;

    }

    .burger {

        display: flex;

    }

    .logo {

        width: 210px;

    }

    .logo img {

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

    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .header {

        height: 80px;

    }

    .logo {

        width: 180px;

    }

    .mobile-nav a {

        font-size: 20px;

    }

}