/* ================= RESET ================= */
   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }


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

header{
    position:fixed;
    width:100%;
    top:0;
    z-index:1000;
    transition:0.4s;
}

.nav-container{
    width:92%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 0;
}

.logo img{
    height:90px;
}

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

.menu a{
    text-decoration:none;
    font-size:15.67px;
    letter-spacing:0.5px;
    font-weight:200;
    color:#fff;
}

.right-menu{
    display:flex;
    gap:25px;
    align-items:center;
}

.login{
    text-decoration:none;
    font-size:17px;
    letter-spacing:1.5px;
    color:#fff;
}

.book-btn{
    padding:14px 28px;
    background:#b08a32;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    letter-spacing:1.5px;
}

header.transparent{
    background:transparent;
}
header.scrolled{
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,0.08);
}
header.scrolled .menu a,
header.scrolled .login{
    color:#b08a32;
}

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

.mobile-header{
    display:none;
    position:fixed;
    top:0;
    width:100%;
    z-index:2000;
    transition:0.3s ease;
    padding:18px 20px;
}

.mobile-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.mobile-header.transparent{
    background:transparent;
}

.mobile-header.transparent .mobile-login{
    color:#fff;
}

.mobile-header.transparent .hamburger span{
    background:#fff;
}

.mobile-header.scrolled{
    background:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,0.08);
}

.mobile-header.scrolled .mobile-login{
    color:#b08a32;
}

.mobile-header.scrolled .hamburger span{
    background:#b08a32;
}

.mobile-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.mobile-login{
    text-decoration:none;
    font-size:14px;
    letter-spacing:1.5px;
}

.hamburger{
    width:24px;
    cursor:pointer;
}
.hamburger span{
    display:block;
    height:2px;
    margin:6px 0;
    transition:0.3s;
}

/* ===================================================== */
/* ================= MOBILE MENU ======================== */
/* ===================================================== */

.mobile-menu{
    position:fixed;
    inset:0;
    background:#f6f6f6;
    transform:translateX(100%);
    transition:0.4s ease;
    z-index:2500;
    padding:25px;
    overflow-y:auto;
}

.mobile-menu.active{
    transform:translateX(0);
}

.menu-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.close-btn{
    font-size:26px;
    color:#b08a32;
    cursor:pointer;
}

.menu-links{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.menu-links a{
    text-decoration:none;
    font-size:20px;
    letter-spacing:2px;
    color:#b08a32;
}


/* ===================================================== */
/* ================= MOBILE BOTTOM BAR ================== */
/* ===================================================== */

.mobile-bottom-bar{
    display:none;
}

@media(max-width:992px){

    header{
        display:none; /* desktop hidden only in mobile */
    }

    .mobile-header{
        display:block;
    }

    .mobile-bottom-bar{
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        display:flex;
        background:#fff;
        border-top:1px solid #e5e5e5;
        z-index:2200;
    }

    .bottom-item{
        flex:1;
        text-align:center;
        padding:14px 5px;
        font-size:13px;
        letter-spacing:1px;
        border-right:1px solid #e5e5e5;
    }

    .bottom-item:last-child{
        border-right:none;
    }

    .bottom-book{
        background:#b08a32;
        color:#fff;
        font-weight:600;
    }

    body{
        padding-bottom:60px;
    }
}



/* ================= EXACT TAJ MEGA MENU (FULL WIDTH UPDATE) ================= */

.has-mega {
    /* Changed from relative to static to allow child to take full screen width */
    position: static; 
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* Now covers full screen width */
    background: #f4f4f4;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.35s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.mega-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-wrapper {
    width: 100%; /* Full width wrapper */
    display: flex;
    min-height: 420px;
}

/* LEFT GOLD BLOCK */
.mega-left {
    width: 32%;
    background: #b08a32;
    color: #fff;
    padding: 80px 70px; /* Reduced top padding for balance */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mega-left h2 {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.mega-left p {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.mega-link {
    color: #fff;
    text-decoration: underline;
    font-size: 15px;
    letter-spacing: 1px;
}

/* RIGHT SIDE */
.mega-right {
    width: 68%;
    background: #f4f4f4;
    display: flex;
    padding: 80px 100px;
    align-items: flex-start;
    justify-content: flex-start; /* Aligned to start for divider spacing */
    background-image: url('https://www.tajhotels.com/content/dam/luxury/hotels/Taj_Mahal_Delhi/images/3x2/Amet-Wellness-3x2.jpg'); /* Added faint background image like screenshot */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-blend-mode: overlay;
}

.mega-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mega-col a {
    text-decoration: none;
    color: #b08a32;
    font-size: 16px;
    letter-spacing: 1.6px;
    font-weight: 400;
}

/* VERTICAL DIVIDER */
.mega-divider {
    width: 1px;
    background: #e1e1e1;
    margin: 0 80px; /* Increased margin to spread items out */
}

.manage-booking {
    margin-top: 10px;
    display: block;
}


/*mobile dropdown*/

/* Mobile Dropdown */
.mobile-dropdown {
    width: 100%;
}

.mobile-dropdown-toggle {
    color: #b08a32;
    padding: 15px 0;
   
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    
        text-decoration: none;
    font-size: 20px;
    letter-spacing: 2px;
   
}

.mobile-submenu {
    color: #b08a32;
    display: none;
    padding-left: 15px;
    animation: fadeDown 0.3s ease;
}

.mobile-submenu.active {
    display: block;
}

.mobile-sub-col {
    margin-bottom: 15px;
}

.mobile-sub-col strong {
    display: block;
    margin: 10px 0;
    font-size: 14px;
    color: #b08b4f; /* luxury gold tone */
}

.mobile-sub-col a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}