/* Basic typography */
body {
    font-family: 'Be Vietnam Pro', sans-serif;
}

/* Reset lists */
ul,
li {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

/* .main-header {
     background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8),   
    rgba(0, 0, 0, 0.3)    
  );
} */


.main-header {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8),  /* top - dark black opacity */
    rgba(0, 0, 0, 0)     /* bottom - fully transparent */
  );
}

/* Header button */
.header-btn {
    border-radius: 30px;
    color: #fff;
    background-color: #FF0000;
    border: none;
    padding: 6px 20px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.header-btn:hover {
    background: linear-gradient(to right, #FF0000, #8B0000);
}

.header-nav {
    gap: 50px;
    align-items: center;
    color: #FFFFFF;
    font-weight: medium;
    top: 10px;
    font-size: 17px;
}

/* responsive gap */
@media (min-width: 992px) and (max-width: 1200px) {
    .header-nav {
        gap: 30px;
    }
}

/* Hamburger styling */
.hamburger {
    font-size: 25px;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    display: none;
    /* shown via media query below */
    z-index: 10010;
}

/* Ensure header bar keeps stacking context for absolute nav */
.header-bar {
    position: relative;
    z-index: 10000;
    background: transparent !important;
}

/* Mobile behaviour: hide nav and show hamburger */
@media (max-width: 991px) {
    .hamburger {
        display: inline-block;
    }
@media (max-width: 992px) {
    .header-nav {
        display: none !important;
        flex-direction: column;
        gap: 16px;
        background-color: rgba(24, 22, 22, 0.9);
        position: absolute;
        top: calc(100% + 8px);
        right: 16px;
        width: calc(100% - 32px);
        max-width: 320px;
        padding: 16px;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        opacity: 0;
        transform: scaleX(0); /* collapse horizontally */
        transform-origin: right center; /* shrink/expand from right */
        /* transition: transform 0.22s ease, opacity 0.22s ease; */
        z-index: 10005;
        pointer-events: none;
        top: 30px;
    }

    .header-nav.active {
        display: flex !important;
        opacity: 1;
        transform: scaleX(1); /* expand fully */
        pointer-events: auto;
    }
}


    .header-nav li {
        list-style: none;
        padding: 8px 0;
        color: #fff;
    }

    /* Make sure nav items are readable */
    .header-nav li:focus {
        outline: 2px solid rgba(255, 255, 255, 0.25);
        outline-offset: 2px;
    }

    /* Ensure logo not overlapped by menu on very small widths */

}



@media (max-width:576px) {
    .logo {
        max-height: 50px;
    }
    .hamburger{
        margin-right: -30px;
        margin-top: -8px;
        font-size: 20px;
    }
    .header-nav {

          top: 56px;
}
}

.sticky-header.scrolled {
    background-color: rgba(24, 22, 22, 0.9) !important;
    transition: background-color 0.3s ease;
}