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

/*====================================
            Top Header
====================================*/

.top-header {
    background: var(--primary-dark);
    color: var(--white);
    font-size: 14px;
}

    .top-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
    }

.top-right,
.top-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .top-left a {
        color: var(--white);
        transition: var(--transition);
    }

        .top-left a:hover {
            color: #ffd54f;
        }

        .top-left a.active-lang {
            color: #ffd54f;
            font-weight: 700;
        }

/*====================================
            Main Header
====================================*/

.site-header {
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: var(--shadow-sm);
}

    .site-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 85px;
    }

/*====================================
                Logo
====================================*/

.logo {
    display: flex;
    align-items: center;
}

.site-logo-img {
    height: 62px;
    width: auto;
    display: block;
}

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

.nav-menu {
    display: flex;
    gap: 35px;
}

    .nav-menu a {
        color: #333;
        font-weight: 700;
        position: relative;
        transition: var(--transition);
    }

        .nav-menu a:hover {
            color: var(--primary-dark);
        }

        .nav-menu a::after {
            content: "";
            position: absolute;
            bottom: -8px;
            inset-inline-start: 0;
            width: 0;
            height: 3px;
            background: var(--primary-dark);
            transition: var(--transition);
        }

        .nav-menu a:hover::after {
            width: 100%;
        }

/*====================================
            Mobile Button
====================================*/

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--primary);
    cursor: pointer;
}