/* --- 1. LUXURY VARIABLES (Updated for SKP Bronze/Gold) --- */
        :root {
    --gold:#bf9b67;
    --gold-hover:#e3cca8;
    --dark-bg:#0f0f0f;
    --charcoal:#1a1a1a;
    --cream:#f9f7f2;
    --text-body:#b0b0b0;
    --text-dark:#2c2c2c;
    --font-heading:'Cormorant Garamond',serif;
    --font-body:'Montserrat',sans-serif;
    --transition:all .6s cubic-bezier(.25,1,.5,1);
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-body);
    background:var(--dark-bg);
    color:var(--text-body);
    line-height:1.8;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5{
    font-family:var(--font-heading);
    font-weight:400;
    letter-spacing:.5px;
}
h2{font-size:3.5rem;margin-bottom:1.5rem;color:var(--gold)}
p{font-weight:300;font-size:1.05rem}
a{text-decoration:none;color:inherit;transition:var(--transition)}
img{width:100%;display:block}

.container{max-width:1300px;margin:0 auto;padding:0 40px}
.section-padding{padding:120px 0}

/* UTILITIES */
.text-center{text-align:center}
.gold-text{color:var(--gold)}
.italic{font-style:italic}

/* BUTTON */
.btn-luxury{
    display:inline-block;    padding:13px 40px;    border:1px solid var(--gold);    color:var(--gold);    text-transform:uppercase;    letter-spacing:2px;    font-size:.8rem;    background:transparent;   position:relative;    overflow:hidden;}
.btn-luxury::before{
    content:'';    position:absolute;    inset:0;    background:var(--gold);    transform:translateX(-100%);    transition:var(--transition);    z-index:-1;}
.btn-luxury:hover{color:var(--dark-bg)}
.btn-luxury:hover::before{transform:translateX(0)}
.btn-luxury2{
    display:inline-block;    padding:13px 40px;    border:1px solid var(--gold);    color:var(--gold);    text-transform:uppercase;    letter-spacing:2px;    font-size:.8rem;    background:transparent;   position:relative;    overflow:hidden;}
.btn-luxury2::before{
    content:'';    position:absolute;    inset:0;    background:var(--gold);    transform:translateX(-100%);    transition:var(--transition);    z-index:-1;}
.btn-luxury2:hover{color:var(--dark-bg)}
.btn-luxury2:hover::before{transform:translateX(0)}


/* HEADER */
header{
    position:fixed;
    top:0;width:100%;
    z-index:1000;
    padding:20px 0;
    transition:var(--transition);
}
header.scrolled{
    background:rgba(15,15,15,.95);
    padding:10px 0;
    box-shadow:0 5px 20px rgba(0,0,0,.5);
    backdrop-filter:blur(10px);
}

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

/* LOGO */
.logo-container{
    display:flex;
    align-items:center;
    gap:15px;
}
.logo-img{height:70px;width:auto}
.logo-text{
    display:none;
    font-family:var(--font-heading);
    font-size:1.5rem;
    color:var(--gold);
    letter-spacing:2px;
    text-transform:uppercase;
}

/* NAV LINKS */
.nav-links{
    display:flex;
    gap:40px;
}
.nav-links a{
    color:#fff;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:1.5px;
    position:relative;
}
.nav-links a::after{
    content:'';
    position:absolute;
    bottom:-5px;left:0;
    width:0;height:1px;
    background:var(--gold);
    transition:.4s;
}
.nav-links a:hover::after{width:100%}

/* MOBILE TOGGLE */
.menu-toggle{
    display:none;
    background:none;
    border:none;
    flex-direction:column;
    gap:5px;
}
.menu-toggle span{
    width:22px;
    height:2px;
    background:var(--gold);
}

/* MOBILE SIDEBAR */
.mobile-sidebar{
    position:fixed;
    top:0;
    left:-100%;
    width:78%;
    height:100vh;
    background:#0f0f0f;
    padding:90px 30px;
    transition:.45s cubic-bezier(.4,0,.2,1);
    z-index:2000;
}
.mobile-sidebar.active{left:0}
.mobile-sidebar a{
    display:block;
    margin-bottom:26px;
    color:#fff;
    font-size:.9rem;
    letter-spacing:2px;
    text-transform:uppercase;
}
.close-menu{
    position:absolute;
    top:20px;
    right:20px;
    background:none;
    border:none;
    font-size:1.6rem;
    color:var(--gold);
}

/* TABLET */
@media (max-width:991px){
    .container{padding:0 24px}
    h2{font-size:2.6rem}
    .logo-img{height:56px}
    .nav-links{gap:26px}
}

/* MOBILE */
@media (max-width:767px){
    header,header.scrolled{
        background:rgba(15,15,15,0.144);
        backdrop-filter:blur(10px);
        padding:12px 0;
    }

    nav{
        display:flex;
        align-items:center;
    }
    .btn-luxury2{
        display:none;
    }

    /* LOGO → LEFT */
    .logo-container{
        order:1;
        position:static;
        transform:none;
        margin-right:auto;
    }

    .logo-img{
        height:64px;
    }

    /* TOGGLE → RIGHT */
    .menu-toggle{
        order:2;
        display:flex;
        margin-left:auto;
    }

    /* HIDE DESKTOP ELEMENTS */
    .nav-links{
        display:none;
    }

   

    .section-padding{
        padding:70px 0;
    }
}

/* SMALL MOBILE */
@media (max-width:480px){
    .container{padding:0 14px}
    h2{font-size:1.8rem}
    p{font-size:.9rem}
    .logo-img{height:54px}
    .btn-luxury{padding:8px 18px}
}


        /* --- 5. HERO SECTION --- */
        .hero {
            height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            /* Luxury Palace Image */
            background: url('/img/hero-bannner.png') center/cover no-repeat;
            z-index: 1;
            animation: slowZoom 20s infinite alternate;
        }
        
        @keyframes slowZoom {
            from { transform: scale(1); }
            to { transform: scale(1.15); }
        }

        .hero-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
            z-index: 2;
        }

        .hero-content {
            position: relative; z-index: 3; text-align: center;
            color: white;
        }

        .hero-subtitle {
            font-size: 1.1rem; letter-spacing: 6px; text-transform: uppercase;
            color: var(--gold); margin-bottom: 20px; display: block;
        }
        
        .hero h1 {
            font-size: 4.5rem; line-height: 1.1; margin-bottom: 30px;
            text-shadow: 0 10px 30px rgba(0,0,0,0.5);
            text-transform: uppercase;
        }
        @media (max-width:991px){
    .hero{
        padding-top:10px;
    }
    .hero h1{
        font-size:3.4rem;
    }
    .hero-subtitle{
        font-size:1rem;
        letter-spacing:4px;
    }
}
@media (max-width:767px){
    .hero{
        min-height:100vh;
        padding-top:10px; /* header + breathing space */
    }

    .hero-content{
        padding:0 20px;
    }

    .hero h1{
        font-size:2.6rem;
        line-height:1.2;
    }

    .hero-subtitle{
        font-size:.85rem;
        letter-spacing:3px;
        margin-bottom:14px;
    }

    .hero p{
        font-size:.95rem;
        margin-bottom:28px !important;
    }
}

@media (max-width:480px){
    .hero{
        padding-top:10px;
    }

    .hero h1{
        font-size:2.2rem;
    }

    .hero-subtitle{
        font-size:.75rem;
        letter-spacing:2px;
    }
}


        /* --- 6. SERVICES --- */
        .amenities { background: var(--dark-bg); }
        .amenities-wrapper {
            display: grid; grid-template-columns: 1fr 1fr;
            border: 1px solid rgba(191, 155, 103, 0.2);
        }
        
        .amenity-item {
            padding: 40px;
            border-bottom: 1px solid rgba(191, 155, 103, 0.1);
            cursor: pointer;
            transition: var(--transition);
            display: flex; justify-content: space-between; align-items: center;
            color: white;
        }
        
        .amenity-item:hover { background: var(--charcoal); padding-left: 50px; }
        .amenity-item h3 { font-size: 1.8rem; margin-bottom: 5px; color: #fff; transition: 0.3s; }
        .amenity-item:hover h3 { color: var(--gold); }
        .amenity-item span { font-family: var(--font-body); font-size: 0.8rem; color: #777; letter-spacing: 1px; text-transform: uppercase; }

        .amenity-img-holder {
            background: url('/img/Dulex-rooms.jpeg') center/cover;
            height: 100%;
            filter: grayscale(30%);
            transition: var(--transition);
        }
        .amenity-img-holder:hover { filter: grayscale(0%); }

        @media (max-width:1024px){.amenities-wrapper{grid-template-columns:1fr 1fr}.amenity-item{padding:32px}.amenity-item h3{font-size:1.55rem}.amenity-img-holder{min-height:420px}.stats-grid{gap:26px}}

        @media (max-width:991px){.amenities-wrapper{grid-template-columns:1fr 1fr}.amenity-item{padding:30px}.amenity-item h3{font-size:1.45rem}.amenity-img-holder{min-height:380px}.stats-grid{gap:24px}}

        @media (max-width:767px){.amenities-wrapper{grid-template-columns:1fr}.amenities-list{order:1}.amenity-img-holder{order:2;min-height:260px}.amenity-item{padding:22px 20px}.amenity-item:hover{padding-left:20px}.amenity-item h3{font-size:1.3rem}.amenity-item span{font-size:.7rem;letter-spacing:.8px}.stats-grid{grid-template-columns:1fr;gap:20px}.stat-item span{font-size:2.2rem}.stat-item p{font-size:.85rem;letter-spacing:1px}}

        @media (max-width:480px){.amenity-item{padding:18px 16px}.amenity-item h3{font-size:1.15rem}.amenity-img-holder{min-height:220px}.stat-item span{font-size:2rem}}


        /* --- 7. STATS --- */
        .stats-section { background: var(--dark-bg); color: var(--gold); padding-top: 50px; }
        .stats-grid { display: flex; justify-content: space-between; border-top: 1px solid rgba(191, 155, 103, 0.3); padding-top: 40px; }
        
        .stat-item { text-align: center; flex: 1; }
        .stat-item span { font-family: var(--font-heading); font-size: 3.5rem; display: block; line-height: 1; }
        .stat-item p { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; color: #fff; }

        /* --- 8. ROOM OVERVIEW --- */
        .room-section { background: var(--cream); color: var(--text-dark); position: relative; }
        
        .room-header { text-align: center; max-width: 800px; margin: 0 auto 60px auto; }
        .room-header h5 { color: var(--gold); font-size: 0.9rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 15px; font-family: var(--font-body); font-weight: 600; }
        
        .room-content-wrapper { display: flex; align-items: center; min-height: 600px; }
        
        .room-nav { width: 25%; padding-right: 40px; border-right: 1px solid rgba(0,0,0,0.1); }
        
        .r-link {
            display: block; padding: 20px 0;
            font-family: var(--font-heading); font-size: 1.5rem;
            color: #999; cursor: pointer; transition: 0.4s;
            position: relative;
        }
        
        .r-link::before { content: '—'; margin-right: 10px; opacity: 0; transition: 0.4s; color: var(--gold); }
        .r-link:hover, .r-link.active { color: var(--dark-bg); padding-left: 10px; }
        .r-link.active::before { opacity: 1; }

        .room-display { width: 75%; padding-left: 50px; display: flex; gap: 40px; opacity: 1; transition: opacity 0.5s; }
        .room-display.fade { opacity: 0; }

        .room-visual { width: 55%; height: 500px; overflow: hidden; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
        .room-visual img { height: 100%; object-fit: cover; transition: transform 1s; }
        .room-visual:hover img { transform: scale(1.05); }

        .room-info { width: 45%; padding-top: 20px; }
        .room-info h3 { font-size: 2.5rem; color: var(--charcoal); margin-bottom: 20px; }
        .room-specs { display: flex; gap: 20px; margin: 25px 0; padding: 20px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
        .spec { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); display: flex; align-items: center; gap: 8px; }
        
        .room-amenities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
        .ra-item { font-size: 0.9rem; color: #555; display: flex; align-items: center; gap: 10px; }
        .ra-item i { color: var(--gold); font-size: 0.7rem; }

        @media (max-width:1024px){.room-content-wrapper{min-height:auto}.room-nav{width:30%;padding-right:30px}.room-display{width:70%;padding-left:30px;gap:30px}.room-visual{height:420px}.room-info h3{font-size:2.2rem}}

        @media (max-width:991px){.room-content-wrapper{align-items:flex-start}.room-nav{width:32%}.r-link{font-size:1.35rem}.room-display{width:68%;gap:25px}.room-visual{height:380px}.room-info h3{font-size:2rem}}

        @media (max-width:767px){.room-content-wrapper{flex-direction:column;gap:40px}.room-nav{width:100%;padding-right:0;border-right:none;border-bottom:1px solid rgba(0,0,0,.1);display:flex;overflow-x:auto;gap:25px;padding-bottom:15px}.r-link{padding:10px 0;font-size:1.2rem;white-space:nowrap}.r-link::before{display:none}.room-display{width:100%;padding-left:0;flex-direction:column;gap:30px}.room-visual{width:100%;height:280px}.room-info{width:100%;padding-top:0}.room-info h3{font-size:1.8rem}.room-specs{flex-direction:column;gap:12px}.room-amenities-grid{grid-template-columns:1fr}}

        @media (max-width:480px){.room-header{margin-bottom:40px}.room-header h2{font-size:1.9rem}.room-header p{font-size:.9rem}.r-link{font-size:1.05rem}.room-visual{height:220px}.room-info h3{font-size:1.6rem}.ra-item{font-size:.75rem}}

        @media (max-width:767px){.room-specs{flex-direction:row;justify-content:space-around;gap:24px;padding:16px 0}.room-amenities-grid{grid-template-columns:1fr 1fr;gap:14px}.room-info .btn-luxury{display:flex;margin:26px auto 0 auto;width:auto;min-width:unset; justify-self: center;}}



        /* --- 9. WEDDINGS --- */
        .events-section {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/standard-room.jpeg');
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 150px 0;
        }

        .events-box { max-width: 900px; border: 1px solid rgba(255,255,255,0.3); padding: 80px; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); }
        .events-box h2 { color: white; font-size: 3rem; }
        .events-box p { color: #ddd; margin-bottom: 30px; }

        @media (max-width:1024px){.events-section{padding:120px 40px}.events-box{max-width:800px;padding:60px}.events-box h2{font-size:2.6rem}.events-box p{font-size:1rem}}

        @media (max-width:991px){.events-section{padding:100px 30px}.events-box{padding:50px}.events-box h2{font-size:2.3rem}.events-box p{font-size:.95rem}}

        @media (max-width:767px){.events-section{padding:90px 20px;background-attachment:scroll}.events-box{padding:40px;border-width:1px}.events-box h2{font-size:2rem;line-height:1.3}.events-box p{font-size:.9rem}.events-box .btn-luxury{display:inline-block;width:auto;padding:12px 32px}}

        @media (max-width:480px){.events-section{padding:80px 16px}.events-box{padding:28px}.events-box h2{font-size:1.7rem}.events-box p{font-size:.85rem;margin-bottom:24px}.events-box .btn-luxury{padding:10px 26px}}


        /* --- 10. BOOKING FORM --- */
        .booking-section { background: var(--dark-bg); padding-bottom: 100px; }
        .booking-container {
            background: #121212;
            padding: 60px;
            border: 1px solid #222;
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 60px;
            align-items: center;
        }

        .booking-text h2 { color: white; font-size: 3rem; line-height: 1.2; }
        .booking-text span { color: var(--gold); font-style: italic; }

        .booking-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
        .input-group { position: relative; }
        .input-group label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: #666; margin-bottom: 10px; }
        
        .input-group input, .input-group select {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid #333;
            color: white;
            padding: 10px 0;
            font-family: var(--font-heading);
            font-size: 1.2rem;
            outline: none;
            transition: 0.3s;
        }
        
        .input-group input:focus, .input-group select:focus { border-bottom-color: var(--gold); }
        ::-webkit-calendar-picker-indicator { filter: invert(1); }

        @media (max-width:1024px){.booking-container{padding:50px;gap:50px}.booking-text h2{font-size:2.6rem; text-align: center;}.booking-fields{gap:24px}.input-group input,.input-group select{font-size:1.1rem}}

        @media (max-width:991px){.booking-container{grid-template-columns:1fr;gap:40px}.booking-text{text-align:center}.booking-text h2{font-size:2.4rem}.booking-fields{grid-template-columns:1fr 1fr;gap:22px}}

        @media (max-width:767px){.booking-section{padding-bottom:70px}.booking-container{padding:35px;gap:30px}.booking-fields{grid-template-columns:1fr;gap:20px}.booking-text h2{font-size:2rem;line-height:1.3}.booking-text p{font-size:.9rem}.input-group label{font-size:.65rem}.input-group input,.input-group select{font-size:1rem}.booking-container .btn-luxury{width:auto;display:block;margin:30px auto 0 auto}}

        @media (max-width:480px){.booking-container{padding:26px}.booking-text h2{font-size:1.7rem}.booking-text p{font-size:.85rem}.input-group input,.input-group select{font-size:.95rem}.booking-container .btn-luxury{padding:12px 30px}}

        /* --- 11. FOOTER --- */
        footer { background: #050505; padding: 80px 0; text-align: center; border-top: 1px solid #111; }
        .footer-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
        .footer-logo-text { font-family: var(--font-heading); font-size: 2.5rem; color: var(--gold); }
        .copyright { color: #444; font-size: 0.8rem; letter-spacing: 1px; margin-top: 20px; }

        /* --- RESPONSIVE --- */
        @media (max-width: 1024px) {
            .amenities-wrapper, .room-content-wrapper, .booking-container { display: block; }
            .room-nav, .room-display, .room-visual, .room-info { width: 100%; padding: 0; }
            .room-nav { display: flex; overflow-x: auto; border-bottom: 1px solid #ddd; border-right: none; margin-bottom: 30px; }
            .r-link { padding: 15px; white-space: nowrap; font-size: 1.2rem; }
            .hero h1 { font-size: 2.5rem; }
            .booking-fields { grid-template-columns: 1fr; }
        }