/* =====================
   HEADER CSS
   Header & Navigation Styles
   ===================== */

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 30px;
    color: var(--color-white);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.header-blk {
    background: #332314 !important;
    position: relative;
}

.header-container {
    display: flex;
    align-items: center;
}

.nav-action-btn-wrap {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 45px;
}

.logo-text-mark {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    color: var(--color-white);
    text-transform: uppercase;
}

/* Logo Sizing */
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 100px;
    /* Adjust this value as needed */
    width: auto;
    max-width: 200px;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-size: 1rem;
    letter-spacing: 0.5px;
    color: var(--color-white);
    font-weight: 500;
    opacity: 0.9;
}

.nav-links a:hover {
    opacity: 1;
    color: #F0EAE0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* =====================
   HEADER RESPONSIVE
   ===================== */
@media (max-width: 991px) {
    .nav-links {
        display: none !important;
    }

    .header-actions .btn-pill {
        display: none !important;
    }

    .nav-action-btn-wrap {
        gap: 0;
    }

    .header-actions {
        gap: 0;
    }
}

@media (max-width: 768px) {

    .nav-links,
    .btn-pill-outline {
        display: none;
    }

    /* Mobile menu logo - can be slightly smaller */
    .logo img {
        height: 50px;
    }
}