/* ==========================
   HOTEL SHARNAM
   Premium CSS
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8f8f8;
    color:#333;
    line-height:1.6;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

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

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#0d1b2a;
    z-index:1000;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

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

.logo h2{
    color:#fff;
    font-size:30px;
}

.logo span{
    color:#d4af37;
}

nav ul{
    display:flex;
    gap:35px;
}

nav a{
    color:#fff;
    font-weight:500;
    transition:.3s;
}

nav a:hover{
    color:#d4af37;
}

.book-btn{
    background:#d4af37;
    color:#fff;
    padding:12px 24px;
    border-radius:30px;
    transition:.3s;
    display:none;
}

.book-btn:hover{
    background:#b48a15;
}

/* ==========================
        HERO
========================== */

.hero{
    height:90vh;
    background:url("../images/background.png") center center/cover no-repeat;
}

.overlay{
    width:100%;
    height:119%;
    background:rgba(0,0,0,.55);

    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-content{
    text-align:center;
    color:#fff;
}

.hero-content h1{
    font-size:60px;
    margin-bottom:20px;
}

.hero-content p{
    font-size:22px;
    margin-bottom:30px;
}

.btn{
    background:#d4af37;
    color:#fff;
    padding:15px 35px;
    border-radius:40px;
    display:inline-block;
    transition:.3s;
}

.btn:hover{
    background:#fff;
    color:#0d1b2a;
}

/* ==========================
      COMMON SECTION
========================== */

section{
    padding:90px 0;
}

section h2{
    text-align:center;
    margin-bottom:40px;
    color:#0d1b2a;
    font-size:38px;
}

/* ==========================
        ABOUT
========================== */

.about p{
    max-width:800px;
    margin:auto;
    text-align:center;
    font-size:18px;
}

/* ==========================
        ROOMS
========================== */

.room-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.room-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.4s;
}

.room-card:hover{
    transform:translateY(-10px);
}

.room-card img{
    height:250px;
    object-fit:cover;
}

.room-card h3{
    padding:20px;
}

.room-card p{
    padding:0 20px 20px;
    color:#d4af37;
    font-size:20px;
    font-weight:600;
}

.room-card a{
    display:block;
    margin:20px;
    background:#0d1b2a;
    color:#fff;
    padding:12px;
    text-align:center;
    border-radius:30px;
    transition:.3s;
}

.room-card a:hover{
    background:#d4af37;
}

/* ==========================
      FACILITIES
========================== */

.facility-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:25px;
    text-align:center;
}

.facility-grid div{
    background:#fff;
    padding:35px;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.facility-grid i{
    font-size:40px;
    color:#d4af37;
    margin-bottom:15px;
}

/* ==========================
       GALLERY
========================== */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

.gallery-grid img{
    height:220px;
    object-fit:cover;
    border-radius:10px;
    transition:.3s;
}

.gallery-grid img:hover{
    transform:scale(1.05);
}

/* ==========================
       BOOKING
========================== */

.booking form{
    max-width:700px;
    margin:auto;
}

.booking input,
.booking textarea,
.booking select{
    width:100%;
    padding:15px;
    margin-bottom:20px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:16px;
}

.booking textarea{
    resize:vertical;
    min-height:120px;
}

.booking button{
    width:100%;
    padding:15px;
    background:#d4af37;
    color:#fff;
    border:none;
    font-size:18px;
    cursor:pointer;
    border-radius:30px;
    transition:.3s;
}

.booking button:hover{
    background:#0d1b2a;
}

/* ==========================
      CONTACT
========================== */

.contact{
    background:#0d1b2a;
    color:#fff;
    text-align:center;
}

.contact h2{
    color:#000;
}

.contact p{
    margin-bottom:15px;
}

/* ==========================
      FOOTER
========================== */

footer{
    background:#08121d;
    color:#fff;
    text-align:center;
    padding:20px;
}

/* ==========================
    WHATSAPP BUTTON
========================== */

.whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:30px;
    box-shadow:0 5px 20px rgba(0,0,0,.3);
    z-index:999;
}

.whatsapp:hover{
    transform:scale(1.1);
}

/* ==========================
      RESPONSIVE
========================== */

@media(max-width:992px){

header .container{
    flex-direction:column;
    gap:15px;
}

nav ul{
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

.hero-content h1{
    font-size:42px;
}

.hero-content p{
    font-size:18px;
}

}

@media(max-width:768px){

section{
    padding:70px 0;
}

.hero{
    height:80vh;
}

.hero-content h1{
    font-size:32px;
}

.hero-content p{
    font-size:16px;
}

.logo h2{
    font-size:24px;
}

.book-btn{
    padding:10px 18px;
}

.room-card img{
    height:220px;
}

section h2{
    font-size:30px;
}

}

@media(max-width:480px){

nav ul{
    flex-direction:column;
    align-items:center;
}

.hero-content h1{
    font-size:28px;
}

.hero-content p{
    font-size:15px;
}

.btn{
    padding:12px 25px;
}

.whatsapp{
    width:55px;
    height:55px;
    font-size:26px;
}

}
/* Sticky Header */

header.sticky{
    background:#08121d;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
}

/* Active Menu */

nav a.active{
    color:#d4af37;
}

/* Scroll Top Button */

#scrollTop{
    position:fixed;
    right:25px;
    bottom:95px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#d4af37;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
}

#scrollTop.show{
    opacity:1;
    visibility:visible;
}

/* Fade Animation */

.hidden{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.show{
    opacity:1;
    transform:translateY(0);
}

/* Hero Animation */

.hero-content{
    opacity:0;
    transform:translateY(50px);
}

.hero-content.hero-show{
    opacity:1;
    transform:translateY(0);
    transition:1s;
}



/* Gallery */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:20px;

}

.gallery-grid img{

height:250px;

object-fit:cover;

border-radius:10px;

cursor:pointer;

transition:.4s;

}

.gallery-grid img:hover{

transform:scale(1.05);

}

/* Lightbox */

.lightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.9);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

}

.lightbox img{

max-width:90%;

max-height:85%;

border-radius:10px;

}

.lightbox.show{

display:flex;

}

.close{

position:absolute;

top:30px;

right:40px;

font-size:45px;

color:#fff;

cursor:pointer;

}

/* Reviews */

.reviews{

padding:80px 0;

background:#f7f7f7;

}

.review-card{

background:#fff;

padding:35px;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

text-align:center;

}

.review-card p{

margin:20px 0;

font-size:16px;

line-height:1.7;

}

.review-card h3{

margin-top:10px;

color:#0d1b2a;

}

.review-card span{

color:#777;

font-size:14px;

}

.stars{

font-size:26px;

color:#D4AF37;

margin-bottom:15px;

}

.swiper{

padding-bottom:60px;

}

.swiper-pagination-bullet-active{

background:#D4AF37 !important;

}


.contact{
    padding:80px 0;
    background:#f8f8f8;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}

.contact-info{
    background:#fff;
    color:#0d1b2a;
    padding:30px;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.contact-info h3{
    margin-bottom:20px;
    color:#0d1b2a;
}

.contact-info p{
    margin-bottom:15px;
    line-height:1.8;
}

.map iframe{
    width:100%;
    height:295px;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

@media(max-width:768px){

.contact-wrapper{
    grid-template-columns:1fr;
}

}

.captcha-box{

margin:20px 0;

}

.captcha-box img{

border:1px solid #ccc;

border-radius:8px;

margin-bottom:10px;

}

.captcha-box button{

padding:10px 15px;

cursor:pointer;

margin-left:10px;

}

.captcha-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.refresh-btn{
    width:38px;
    height:38px;
    border:none;
    border-radius:6px;
    background:#0b5d3b;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    transition:.3s;
}

.refresh-btn:hover{
    background:#08472d;
}

.captcha-box{
    margin:20px 0;
}

.captcha-code{

    display:inline-block;

    padding:12px 25px;

    background:#f2f2f2;

    border:2px dashed #0b5d3b;

    color:#0b5d3b;

    font-size:24px;

    font-weight:bold;

    letter-spacing:5px;

    user-select:none;

    margin-bottom:10px;

}

.captcha-box input{

    width:100%;

    padding:12px;

}



/* Reviews */

.reviews{

padding:80px 0;

background:#f8f8f8;

}

.reviewSlider{

padding:30px 10px 60px;

}

.review-card{

background:#fff;

padding:30px;

border-radius:15px;

box-shadow:0 8px 25px rgba(0,0,0,.12);

text-align:center;

height:250px;

display:flex;

flex-direction:column;

justify-content:center;

transition:.4s;

}

.review-card:hover{

transform:translateY(-8px);

}

.review-card h3{

font-size:28px;

margin-bottom:15px;

}

.review-card p{

line-height:28px;

margin-bottom:20px;

}

.review-card h4{

color:#0b5d3b;

}

.swiper-button-next,
.swiper-button-prev{

color:#0b5d3b;

}

.swiper-pagination-bullet-active{

background:#0b5d3b;

}


/* =========================================
   HOTEL SHARNAM HERO
========================================= */

.hero-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 90%;
    text-align: center;

    z-index: 10;
    color: #ffffff;
}

.hero-small {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 6px;
    margin-bottom: 10px;
    color: #f2c94c;
}

.hero-content h1 {
    margin: 0;

    font-size: clamp(48px, 6vw, 90px);
    line-height: 1.1;

    font-weight: 700;
    letter-spacing: 5px;

    color: #ffffff;

    text-shadow:
        0 3px 8px rgba(0,0,0,0.8),
        0 0 25px rgba(0,0,0,0.55);
}

.hero-line {
    width: 100px;
    height: 3px;

    background: #e1b12c;

    margin: 20px auto;
}

.hero-content p {
    margin: 0 0 28px;

    font-size: 20px;
    letter-spacing: 3px;

    color: #ffffff;

    text-shadow:
        0 2px 5px rgba(0,0,0,0.8);
}

.hero-book-btn {
    display: inline-block;

    padding: 14px 30px;

    background: #e1b12c;
    color: #ffffff;

    text-decoration: none;

    border-radius: 30px;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;

    transition: 0.3s;
}

.hero-book-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}


/* MOBILE */

@media (max-width: 768px) {

    .hero-small {
        font-size: 13px;
        letter-spacing: 4px;
    }

    .hero-content h1 {
        font-size: 42px;
        letter-spacing: 2px;
    }

    .hero-content p {
        font-size: 14px;
        letter-spacing: 1px;
    }

}




/* =====================================================
   HOTEL SHARNAM - HERO FINAL FIX
===================================================== */

.hero {
    position: relative !important;

    min-height: 540px !important;
    height: calc(100vh - 140px) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}


/* DARK LAYER OVER MAP */

.hero .overlay {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: rgba(0, 0, 0, 0.42) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 1 !important;
}


/* HERO TEXT */

.hero .hero-content {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    transform: none !important;

    width: 90% !important;
    max-width: 1000px;

    margin: 0 auto;

    text-align: center !important;

    z-index: 5 !important;

    color: #ffffff !important;
}


/* WELCOME TO */

.hero .hero-small {
    margin-bottom: 12px;

    color: #e5b93c !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    letter-spacing: 7px;

    text-transform: uppercase;
}


/* HOTEL SHARNAM */

.hero .hero-content h1 {
    margin: 0 !important;

    padding: 0 !important;

    color: #ffffff !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: clamp(52px, 6vw, 92px) !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    letter-spacing: 5px !important;

    text-transform: uppercase;

    text-shadow:
        0 3px 6px rgba(0,0,0,.95),
        0 0 20px rgba(0,0,0,.75),
        0 0 35px rgba(255,255,255,.15) !important;
}


/* GOLD LINE */

.hero .hero-line {
    width: 110px !important;
    height: 3px !important;

    margin: 20px auto !important;

    background: #e5b93c !important;

    border-radius: 5px;
}


/* TAGLINE */

.hero .hero-content p {
    margin: 0 0 28px !important;

    color: #ffffff !important;

    font-size: 19px !important;

    font-weight: 400;

    letter-spacing: 3px;

    text-shadow:
        0 2px 6px rgba(0,0,0,.9);
}


/* HERO BOOK BUTTON */

.hero .hero-book-btn {
    display: inline-block !important;

    padding: 14px 32px !important;

    background: #e5b93c !important;

    color: #ffffff !important;

    border: 2px solid #e5b93c;

    border-radius: 30px;

    text-decoration: none !important;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 1px;

    transition: all .3s ease;
}


.hero .hero-book-btn:hover {
    background: transparent !important;

    color: #ffffff !important;

    border-color: #ffffff;

    transform: translateY(-3px);
}


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

@media (max-width: 768px) {

    .hero {
        min-height: 500px !important;
        height: 70vh !important;
    }

    .hero .hero-small {
        font-size: 12px !important;
        letter-spacing: 4px;
    }

    .hero .hero-content h1 {
        font-size: 40px !important;
        letter-spacing: 2px !important;
    }

    .hero .hero-content p {
        font-size: 14px !important;
        letter-spacing: 1px;
    }

    .hero .hero-book-btn {
        padding: 12px 25px !important;
        font-size: 13px;
    }

}



/* ===== HERO VISIBILITY FIX ===== */

.hero .hero-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
}

.hero .overlay {
    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================
   HOTEL SHARNAM - LUXURY TITLE
========================================= */

.hero .hero-content h1 {
    font-family: Georgia, 'Times New Roman', serif !important;

    font-size: clamp(58px, 7vw, 105px) !important;
    font-weight: 600 !important;

    letter-spacing: 8px !important;
    line-height: 1 !important;

    text-transform: uppercase;

    /* Luxury Gold */
    color: #f4d675 !important;

    text-shadow:
        0 2px 0 #9b7418,
        0 4px 10px rgba(0,0,0,.9),
        0 0 25px rgba(212,175,55,.35) !important;

    position: relative;
    display: inline-block;

    padding: 5px 25px 12px !important;
}


/* Small decorative line under Hotel Sharnam */

.hero .hero-content h1::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -8px;

    transform: translateX(-50%);

    width: 65%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #d4af37,
        #fff0a6,
        #d4af37,
        transparent
    );
}


/* WELCOME TO */

.hero .hero-small {
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    letter-spacing: 9px !important;

    margin-bottom: 18px !important;

    text-shadow: 0 2px 8px rgba(0,0,0,.9);
}


/* Existing gold line ko subtle karo */

.hero .hero-line {
    width: 55px !important;
    height: 2px !important;

    margin: 27px auto 18px !important;

    background: #d4af37 !important;
}


/* TAGLINE */

.hero .hero-content p {
    font-family: 'Poppins', sans-serif !important;

    font-size: 17px !important;
    font-weight: 300 !important;

    letter-spacing: 4px !important;

    color: #ffffff !important;

    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0,0,0,.9);
}


/* MOBILE */

@media (max-width: 768px) {

    .hero .hero-content h1 {
        font-size: 42px !important;
        letter-spacing: 4px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .hero .hero-small {
        font-size: 11px !important;
        letter-spacing: 5px !important;
    }

    .hero .hero-content p {
        font-size: 12px !important;
        letter-spacing: 2px !important;
    }
}



/* =========================================
   HERO TITLE POSITION FINAL FIX
========================================= */

.hero .hero-content {
    position: relative !important;
    top: 35px !important;       /* content ko thoda neeche */
    left: auto !important;
    transform: none !important;

    width: 90% !important;
    max-width: 1100px !important;

    margin: 0 auto !important;

    text-align: center !important;
}


/* HOTEL SHARNAM */

.hero .hero-content h1 {
    font-size: clamp(48px, 5.2vw, 78px) !important;
    line-height: 1.05 !important;

    letter-spacing: 6px !important;

    margin: 0 auto !important;
    padding: 0 20px 15px !important;

    white-space: nowrap;
}


/* WELCOME TO */

.hero .hero-small {
    margin-bottom: 12px !important;
}


/* LINE */

.hero .hero-line {
    margin: 25px auto 18px !important;
}


/* TAGLINE */

.hero .hero-content p {
    margin-bottom: 25px !important;
}


/* MOBILE */

@media (max-width: 768px) {

    .hero .hero-content {
        top: 20px !important;
    }

    .hero .hero-content h1 {
        font-size: 38px !important;
        letter-spacing: 3px !important;
        white-space: normal;
    }
}



/* =========================================
   HERO SUBTEXT - PREMIUM STYLE
========================================= */

/* WELCOME TO */
.hero .hero-small {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 18px;

    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    letter-spacing: 7px !important;
    text-transform: uppercase;

    margin-bottom: 20px !important;

    text-shadow:
        0 2px 5px rgba(0,0,0,.95),
        0 0 12px rgba(0,0,0,.8);
}

/* WELCOME TO - left/right gold lines */
.hero .hero-small::before,
.hero .hero-small::after {
    content: "";

    width: 75px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #f4d35e
    );
}

.hero .hero-small::after {
    background: linear-gradient(
        90deg,
        #f4d35e,
        transparent
    );
}


/* =========================================
   COMFORT • HOSPITALITY • HAPPINESS
========================================= */

.hero .hero-content p {
    display: inline-block !important;

    color: #ffffff !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 17px !important;
    font-weight: 500 !important;

    letter-spacing: 4px !important;
    line-height: 1.6 !important;

    text-transform: uppercase;

    margin: 0 0 28px !important;

    padding: 9px 22px !important;

    border-top: 1px solid rgba(244, 211, 94, .75);
    border-bottom: 1px solid rgba(244, 211, 94, .75);

    background: rgba(0, 0, 0, .20);

    text-shadow:
        0 2px 4px rgba(0,0,0,1),
        0 0 10px rgba(0,0,0,.8);
}


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

@media (max-width: 768px) {

    .hero .hero-small {
        font-size: 12px !important;
        letter-spacing: 4px !important;
        gap: 10px;
    }

    .hero .hero-small::before,
    .hero .hero-small::after {
        width: 35px;
    }

    .hero .hero-content p {
        font-size: 12px !important;
        letter-spacing: 2px !important;
        padding: 7px 10px !important;
    }
}

/* BOOK YOUR STAY - FORCE NEXT LINE & CENTER */

.hero .hero-book-btn {
    display: block !important;
    width: fit-content !important;

    margin: 28px auto 0 !important;

    padding: 15px 35px !important;

    background: #e5b93c !important;
    color: #ffffff !important;

    border-radius: 35px !important;

    font-weight: 600 !important;
    letter-spacing: 1.5px !important;

    text-align: center !important;
}

.hero .hero-content p {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto !important;
}


/* =====================================================
   HOTEL SHARNAM - CLEAN HEADER + MOBILE MENU RESET
===================================================== */
header{position:fixed!important;top:0!important;left:0!important;width:100%!important;height:105px!important;background:#0d1b2a!important;z-index:99999!important;box-shadow:0 5px 15px rgba(0,0,0,.2)!important}
header .container{width:90%!important;max-width:1200px!important;height:105px!important;margin:0 auto!important;padding:5px 0!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;position:relative!important}
header .logo{height:95px!important;display:flex!important;align-items:center!important;flex:0 0 auto!important}
header .logo a{display:block!important}
header .logo img{width:auto!important;height:92px!important;object-fit:contain!important}
header nav{display:block!important;position:static!important;width:auto!important}
header #nav-links{display:flex!important;flex-direction:row!important;align-items:center!important;gap:35px!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important}
header #nav-links li{width:auto!important;margin:0!important;padding:0!important}
header #nav-links li a{display:block!important;color:#fff!important;font-weight:500!important;padding:8px 0!important;white-space:nowrap!important}
header #nav-links li a:hover{color:#d4af37!important}
header .book-btn{display:inline-block!important;background:#d4af37!important;color:#fff!important;padding:11px 24px!important;border-radius:30px!important;white-space:nowrap!important}
.mobile-menu-btn{display:none!important}
.hero{margin-top:105px!important}

@media(max-width:768px){
 header{height:85px!important}
 header .container{width:100%!important;max-width:none!important;height:85px!important;min-height:85px!important;margin:0!important;padding:5px 18px!important;gap:10px!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important; }
 header .logo{height:75px!important;width:auto!important;flex:0 0 auto!important}
 header .logo img{width:auto!important;height:72px!important}
 .mobile-menu-btn{display:flex!important;width:48px!important;height:48px!important;flex:0 0 48px!important;padding:0!important;margin:0!important;align-items:center!important;justify-content:center!important;background:transparent!important;color:#fff!important;border:1px solid #d4af37!important;border-radius:9px!important;font-size:25px!important;cursor:pointer!important;position:relative!important;z-index:100003!important}
 header .book-btn{display:none!important}
 header nav{display:block!important;position:absolute!important;top:85px!important;left:0!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;z-index:100002!important}
 header #nav-links{display:none!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;width:100%!important;margin:0!important;padding:8px 0!important;background:#0d1b2a!important;border-top:2px solid #d4af37!important;box-shadow:0 12px 25px rgba(0,0,0,.45)!important}
 header #nav-links.active{display:flex!important}
 header #nav-links li{display:block!important;width:100%!important;margin:0!important;padding:0!important}
 header #nav-links li a{display:block!important;width:100%!important;padding:14px 24px!important;color:#fff!important;font-size:16px!important;font-weight:500!important;text-align:left!important;border-bottom:1px solid rgba(255,255,255,.10)!important}
 header #nav-links li:last-child a{border-bottom:0!important}
 header #nav-links li a:hover{color:#d4af37!important;background:rgba(212,175,55,.10)!important}
 .hero{margin-top:85px!important}
}


@media (max-width: 768px) {

    #nav-links.mobile-open {
        display: flex !important;
    }

    #nav-links.mobile-open li {
        display: block !important;
        width: 100% !important;
    }

    #nav-links.mobile-open li a {
        display: block !important;
        width: 100% !important;
        padding: 15px 25px !important;
        color: #ffffff !important;
        background: #0d1b2a !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
        text-align: left !important;
    }

}

.booking-error {
    max-width: 840px;
    margin: 0 auto 20px;
    padding: 14px 18px;

    background: #fff2f2;
    border: 1px solid #dc3545;
    border-left: 5px solid #dc3545;

    border-radius: 8px;

    color: #b42318;
    font-size: 16px;
    font-weight: 600;

    text-align: left;
}

.booking-error i {
    margin-right: 8px;
}

/* =====================================================
   HOTEL SHARNAM - ABOUT SECTION
===================================================== */

.sharnam-about {
    padding: 90px 20px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf8f2 100%
        );
}

.sharnam-about-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 65px;
    align-items: center;
}


/* IMAGE */

.sharnam-about-image {
    position: relative;
}

.about-image-frame {
    position: relative;
    padding: 10px;
    background: #fff;
    border-radius: 22px;
    box-shadow:
        0 20px 55px rgba(13,27,42,.13);
}

.about-image-frame::before {
    content: "";
    position: absolute;
    width: 75%;
    height: 75%;
    left: -18px;
    bottom: -18px;
    background: #d4af37;
    border-radius: 22px;
    z-index: -1;
}

.about-image-frame img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 15px;
}


/* IMAGE BADGE */

.about-image-badge {
    position: absolute;
    left: 30px;
    bottom: 30px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px 20px;

    background: rgba(13,27,42,.94);
    color: #fff;

    border-left: 4px solid #d4af37;
    border-radius: 9px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.25);
}

.about-image-badge i {
    color: #d4af37;
    font-size: 25px;
}

.about-image-badge span {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.about-image-badge strong {
    font-size: 16px;
}


/* CONTENT */

.about-small-title {
    display: block;
    margin-bottom: 8px;

    color: #d4af37;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sharnam-about-content h2 {
    margin: 0;

    color: #0d1b2a;

    font-size: 42px;
    line-height: 1.22;
}

.sharnam-about-content h2 span {
    color: #d4af37;
}

.about-gold-line {
    width: 70px;
    height: 3px;

    margin: 20px 0 25px;

    background: #d4af37;
    border-radius: 10px;
}

.sharnam-about-content > p {
    margin: 0 0 14px;

    color: #667085;

    font-size: 15px;
    line-height: 1.85;
}


/* FEATURES */

.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

    margin-top: 27px;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px;

    background: #fff;

    border: 1px solid #ece7da;
    border-radius: 10px;

    transition: .25s ease;
}

.about-feature:hover {
    transform: translateY(-3px);

    border-color: #d4af37;

    box-shadow:
        0 8px 20px rgba(13,27,42,.08);
}

.about-feature > span {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;
    place-items: center;

    background: #fff8df;
    color: #d4af37;

    border-radius: 50%;

    font-size: 18px;
}

.about-feature div {
    display: flex;
    flex-direction: column;
}

.about-feature strong {
    color: #0d1b2a;
    font-size: 14px;
}

.about-feature small {
    margin-top: 2px;

    color: #667085;
    font-size: 11px;
}


/* BUTTONS */

.about-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;

    margin-top: 28px;
}

.about-book-btn,
.about-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 13px 22px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: .2s ease;
}

.about-book-btn {
    background: #d4af37;
    color: #fff;
}

.about-book-btn:hover {
    background: #bc982d;
}

.about-contact-btn {
    background: #0d1b2a;
    color: #fff;
}

.about-contact-btn:hover {
    background: #162b40;
}


/* =========================================
   OUR PROMISE
========================================= */

.about-promise {
    margin-top: 75px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 25px;
    align-items: center;

    padding: 35px 40px;

    background:
        linear-gradient(
            135deg,
            #0d1b2a,
            #162d43
        );

    border-radius: 17px;

    box-shadow:
        0 15px 40px rgba(13,27,42,.18);
}

.promise-icon {
    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(212,175,55,.5);
    border-radius: 50%;

    color: #d4af37;

    font-size: 27px;
}

.promise-content span {
    color: #d4af37;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.promise-content h3 {
    margin: 5px 0 7px;

    color: #fff;

    font-size: 23px;
}

.promise-content p {
    margin: 0;

    max-width: 750px;

    color: #c9d1da;

    font-size: 13px;
    line-height: 1.7;
}

.promise-btn {
    white-space: nowrap;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 13px 20px;

    background: #d4af37;
    color: #fff;

    border-radius: 7px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .sharnam-about-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-image-frame {
        max-width: 700px;
        margin: auto;
    }

    .about-image-frame img {
        height: 450px;
    }

    .about-promise {
        grid-template-columns: auto 1fr;
    }

    .promise-btn {
        grid-column: 1 / -1;
        justify-self: start;
    }
}


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

@media (max-width: 600px) {

    .sharnam-about {
        padding: 55px 14px;
    }

    .about-image-frame img {
        height: 330px;
    }

    .about-image-frame::before {
        left: -8px;
        bottom: -8px;
    }

    .about-image-badge {
        left: 20px;
        bottom: 20px;
    }

    .sharnam-about-content h2 {
        font-size: 31px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .about-book-btn,
    .about-contact-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .about-promise {
        margin-top: 50px;

        display: block;

        padding: 28px 22px;
    }

    .promise-icon {
        margin-bottom: 18px;
    }

    .promise-content h3 {
        font-size: 20px;
    }

    .promise-btn {
        margin-top: 20px;
    }
}

/* =====================================================
   HOTEL SHARNAM - PREMIUM ROOMS
===================================================== */

.premium-rooms {
    padding: 90px 20px;
    background: #f6f7f9;
}


/* HEADING */

.rooms-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.rooms-small-title {
    display: block;

    color: #d4af37;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;

    margin-bottom: 7px;
}

.rooms-heading h2 {
    margin: 0;

    color: #0d1b2a;

    font-size: 42px;
    font-weight: 700;
}

.rooms-gold-line {
    width: 65px;
    height: 3px;

    margin: 15px auto 18px;

    background: #d4af37;

    border-radius: 20px;
}

.rooms-heading p {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;
}


/* GRID */

.premium-room-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;
}


/* CARD */

.premium-room-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #eaecf0;
    border-radius: 17px;

    box-shadow:
        0 10px 30px rgba(13,27,42,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.premium-room-card:hover {
    transform: translateY(-7px);

    border-color: rgba(212,175,55,.55);

    box-shadow:
        0 20px 45px rgba(13,27,42,.14);
}


/* ROOM IMAGE */

.premium-room-image {
    position: relative;

    height: 265px;

    overflow: hidden;
}

.premium-room-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(13,27,42,.28),
            transparent 55%
        );

    pointer-events: none;
}

.premium-room-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}

.premium-room-card:hover
.premium-room-image img {
    transform: scale(1.06);
}


/* PRICE BADGE */

.room-price-badge {
    position: absolute;

    right: 16px;
    bottom: 16px;

    z-index: 2;

    min-width: 105px;

    padding: 9px 13px;

    background: rgba(13,27,42,.94);
    color: #fff;

    border-left: 3px solid #d4af37;
    border-radius: 8px;

    text-align: right;

    box-shadow:
        0 5px 18px rgba(0,0,0,.2);
}

.room-price-badge small {
    display: block;

    color: #d9dde3;

    font-size: 9px;
}

.room-price-badge strong {
    display: inline-block;

    color: #d4af37;

    font-size: 19px;
}

.room-price-badge span {
    font-size: 10px;
}


/* CONTENT */

.premium-room-content {
    padding: 24px 23px 22px;
}

.room-category {
    display: block;

    margin-bottom: 5px;

    color: #d4af37;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.premium-room-content h3 {
    margin: 0 0 10px;

    color: #0d1b2a;

    font-size: 21px;
    font-weight: 600;
}

.premium-room-content > p {
    min-height: 68px;

    margin: 0;

    color: #667085;

    font-size: 13px;
    line-height: 1.7;
}


/* AMENITIES */

.room-amenities {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin: 19px 0 21px;
}

.room-amenities span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 7px 9px;

    background: #faf8f2;

    border: 1px solid #eee8d7;
    border-radius: 6px;

    color: #475467;

    font-size: 10px;
}

.room-amenities i {
    color: #d4af37;
}


/* FOOTER */

.room-card-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-top: 17px;

    border-top: 1px solid #eaecf0;
}


/* HIDDEN DESKTOP PRICE */

.room-price-mobile {
    display: none;
}

.room-price-mobile strong {
    color: #0d1b2a;
    font-size: 19px;
}

.room-price-mobile span {
    color: #667085;
    font-size: 10px;
}


/* BOOK BUTTON */

.premium-room-btn {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 18px;

    background: #0d1b2a;
    color: #fff;

    border-radius: 7px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition:
        background .2s ease,
        color .2s ease;
}

.premium-room-btn i {
    color: #d4af37;

    transition: transform .2s ease;
}

.premium-room-btn:hover {
    background: #d4af37;
    color: #fff;
}

.premium-room-btn:hover i {
    color: #fff;
    transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .premium-room-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 650px) {

    .premium-rooms {
        padding: 60px 14px;
    }

    .rooms-heading {
        margin-bottom: 35px;
    }

    .rooms-heading h2 {
        font-size: 33px;
    }

    .premium-room-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .premium-room-image {
        height: 250px;
    }

    .premium-room-content {
        padding: 20px 18px;
    }

    .premium-room-content > p {
        min-height: auto;
    }

    .room-card-footer {
        align-items: center;
    }

    .premium-room-btn {
        width: auto;
        min-width: 125px;
    }

    .room-price-mobile {
        display: block;
    }

    .room-price-badge {
        display: none;
    }

}


/* =====================================================
   HOTEL SHARNAM - PREMIUM FACILITIES
===================================================== */

.premium-facilities {
    position: relative;
    overflow: hidden;

    padding: 90px 20px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(212,175,55,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(212,175,55,.08),
            transparent 30%
        ),
        #0d1b2a;
}


/* DECORATIVE BACKGROUND */

.premium-facilities::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -180px;
    right: -100px;

    border: 1px solid rgba(212,175,55,.15);
    border-radius: 50%;
}

.premium-facilities::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    bottom: -150px;
    left: -80px;

    border: 1px solid rgba(212,175,55,.12);
    border-radius: 50%;
}

.premium-facilities .container {
    position: relative;
    z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.facilities-heading {
    max-width: 700px;

    margin: 0 auto 50px;

    text-align: center;
}

.facilities-small-title {
    display: block;

    margin-bottom: 8px;

    color: #d4af37;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.facilities-heading h2 {
    margin: 0;

    color: #fff;

    font-size: 42px;
    font-weight: 700;
}

.facilities-gold-line {
    width: 65px;
    height: 3px;

    margin: 15px auto 18px;

    background: #d4af37;

    border-radius: 10px;
}

.facilities-heading p {
    margin: 0;

    color: #b9c3ce;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   FACILITY GRID
========================================= */

.premium-facility-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 18px;
}


/* =========================================
   FACILITY CARD
========================================= */

.premium-facility-card {
    position: relative;

    min-height: 245px;

    padding: 30px 20px 25px;

    overflow: hidden;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 14px;

    text-align: center;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.premium-facility-card:hover {
    transform: translateY(-8px);

    background:
        rgba(255,255,255,.09);

    border-color:
        rgba(212,175,55,.65);

    box-shadow:
        0 15px 35px rgba(0,0,0,.2);
}


/* BACKGROUND NUMBER */

.facility-number {
    position: absolute;

    top: 10px;
    right: 14px;

    color:
        rgba(255,255,255,.055);

    font-size: 50px;
    font-weight: 700;

    line-height: 1;
}


/* =========================================
   ICON
========================================= */

.premium-facility-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    display: grid;
    place-items: center;

    background:
        rgba(212,175,55,.10);

    border:
        1px solid rgba(212,175,55,.45);

    border-radius: 50%;

    color: #d4af37;

    font-size: 27px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.premium-facility-card:hover
.premium-facility-icon {

    background: #d4af37;

    color: #0d1b2a;

    transform: rotateY(360deg);
}


/* =========================================
   TEXT
========================================= */

.premium-facility-card h3 {
    margin: 0 0 10px;

    color: #fff;

    font-size: 18px;
    font-weight: 600;
}

.premium-facility-card p {
    margin: 0;

    color: #aeb9c5;

    font-size: 12px;
    line-height: 1.7;
}


/* GOLD BOTTOM LINE */

.facility-bottom-line {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #d4af37;

    transform: translateX(-50%);

    transition: width .3s ease;
}

.premium-facility-card:hover
.facility-bottom-line {
    width: 70%;
}


/* =========================================
   FEATURED AC CARD
========================================= */

.featured-facility {
    border-color:
        rgba(212,175,55,.5);

    background:
        linear-gradient(
            180deg,
            rgba(212,175,55,.11),
            rgba(255,255,255,.05)
        );
}

.facility-popular {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    padding: 4px 13px;

    background: #d4af37;
    color: #0d1b2a;

    border-radius:
        0 0 6px 6px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* =========================================
   BOTTOM CTA
========================================= */

.facilities-footer {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 18px;

    margin-top: 35px;

    padding: 22px 25px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(212,175,55,.28);

    border-radius: 12px;
}

.facilities-footer-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background:
        rgba(212,175,55,.12);

    color: #d4af37;

    border-radius: 50%;

    font-size: 19px;
}

.facilities-footer div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.facilities-footer strong {
    color: #fff;

    font-size: 14px;
}

.facilities-footer span {
    margin-top: 3px;

    color: #aeb9c5;

    font-size: 11px;
}

.facilities-footer a {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding: 11px 18px;

    background: #d4af37;
    color: #fff;

    border-radius: 6px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;

    transition: .2s ease;
}

.facilities-footer a:hover {
    background: #bc982d;
}

.facilities-footer a i {
    transition: transform .2s ease;
}

.facilities-footer a:hover i {
    transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .premium-facility-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================
   SMALL TABLET
========================================= */

@media (max-width: 780px) {

    .premium-facility-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .facilities-footer {
        grid-template-columns:
            auto 1fr;
    }

    .facilities-footer a {
        grid-column: 1 / -1;

        justify-self: start;
    }

}


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

@media (max-width: 550px) {

    .premium-facilities {
        padding: 60px 14px;
    }

    .facilities-heading {
        margin-bottom: 35px;
    }

    .facilities-heading h2 {
        font-size: 32px;
    }

    .premium-facility-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .premium-facility-card {
        min-height: auto;

        padding: 27px 22px 30px;
    }

    .facilities-footer {
        display: block;

        padding: 22px;
    }

    .facilities-footer-icon {
        margin-bottom: 13px;
    }

    .facilities-footer a {
        margin-top: 17px;
    }

}

/* =====================================================
   HOTEL SHARNAM - PREMIUM GALLERY
===================================================== */

.premium-gallery {
    padding: 90px 20px;
    background: #fff;
}


/* HEADING */

.gallery-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.gallery-small-title {
    display: block;
    margin-bottom: 7px;

    color: #d4af37;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.gallery-heading h2 {
    margin: 0;

    color: #0d1b2a;

    font-size: 42px;
    font-weight: 700;
}

.gallery-gold-line {
    width: 65px;
    height: 3px;

    margin: 15px auto 18px;

    background: #d4af37;
    border-radius: 10px;
}

.gallery-heading p {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   GALLERY GRID
========================================= */

.premium-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    grid-auto-rows: 220px;

    gap: 13px;
}


/* NORMAL ITEM */

.gallery-item {
    position: relative;

    overflow: hidden;

    border-radius: 12px;

    cursor: pointer;

    background: #0d1b2a;
}


/* LARGE IMAGE */

.gallery-item.gallery-large {
    grid-column: span 2;
    grid-row: span 2;
}


/* TALL IMAGE */

.gallery-item.gallery-tall {
    grid-row: span 2;
}


/* WIDE IMAGE */

.gallery-item.gallery-wide {
    grid-column: span 2;
}


/* IMAGE */

.gallery-item > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .55s ease,
        filter .4s ease;
}

.gallery-item:hover > img {
    transform: scale(1.08);
}


/* =========================================
   OVERLAY
========================================= */

.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 10px;

    padding: 20px;

    background:
        linear-gradient(
            to top,
            rgba(7,20,33,.92) 0%,
            rgba(7,20,33,.25) 55%,
            transparent 100%
        );

    opacity: 0;

    transition: opacity .3s ease;
}

.gallery-item:hover
.gallery-overlay {
    opacity: 1;
}


/* TEXT */

.gallery-overlay span {
    display: block;

    margin-bottom: 3px;

    color: #d4af37;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.gallery-overlay h3 {
    margin: 0;

    color: #fff;

    font-size: 16px;
    font-weight: 600;
}


/* ZOOM BUTTON */

.gallery-zoom {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;

    background: rgba(255,255,255,.12);
    color: #fff;

    font-size: 15px;

    cursor: pointer;

    backdrop-filter: blur(5px);

    transition: .25s ease;
}

.gallery-zoom:hover {
    background: #d4af37;
    border-color: #d4af37;
}


/* =========================================
   BOTTOM CTA
========================================= */

.gallery-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 30px;

    padding: 20px 25px;

    background: #faf8f2;

    border: 1px solid #eee8d7;
    border-radius: 11px;
}

.gallery-bottom > div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gallery-bottom > div > i {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: grid;
    place-items: center;

    background: #0d1b2a;
    color: #d4af37;

    border-radius: 50%;

    font-size: 17px;
}

.gallery-bottom span {
    display: flex;
    flex-direction: column;

    color: #667085;

    font-size: 11px;
}

.gallery-bottom strong {
    margin-bottom: 2px;

    color: #0d1b2a;

    font-size: 14px;
}

.gallery-bottom > a {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding: 11px 18px;

    white-space: nowrap;

    background: #d4af37;
    color: #fff;

    border-radius: 6px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;
}

.gallery-bottom > a i {
    transition: transform .2s ease;
}

.gallery-bottom > a:hover i {
    transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .premium-gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 220px;
    }

}


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

@media (max-width: 600px) {

    .premium-gallery {
        padding: 60px 14px;
    }

    .gallery-heading {
        margin-bottom: 35px;
    }

    .gallery-heading h2 {
        font-size: 33px;
    }

   /* =========================================
   FIXED PREMIUM GALLERY GRID
========================================= */

.premium-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Sabhi images equal alignment me */
.gallery-item,
.gallery-item.gallery-large,
.gallery-item.gallery-tall,
.gallery-item.gallery-wide {
    position: relative;

    width: 100%;
    height: 240px;

    grid-column: auto;
    grid-row: auto;

    overflow: hidden;

    background: #0d1b2a;

    border-radius: 12px;

    cursor: pointer;
}

.gallery-item > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}

.gallery-item:hover > img {
    transform: scale(1.07);
}


/* TABLET */

@media (max-width: 950px) {

    .premium-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .premium-gallery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .gallery-item,
    .gallery-item.gallery-large,
    .gallery-item.gallery-tall,
    .gallery-item.gallery-wide {
        height: 260px;
    }

}
   
   
   

    /* Mobile par overlay visible */
    .gallery-overlay {
        opacity: 1;

        padding: 16px;

        background:
            linear-gradient(
                to top,
                rgba(7,20,33,.8),
                transparent 65%
            );
    }

    .gallery-bottom {
        display: block;

        padding: 18px;
    }

    .gallery-bottom > a {
        margin-top: 17px;
    }

}

/* =====================================================
   PREMIUM GALLERY LIGHTBOX - FIX
===================================================== */

#lightbox {
    position: fixed !important;

    inset: 0 !important;

    z-index: 9999999 !important;

    display: none;

    align-items: center !important;
    justify-content: center !important;

    padding: 60px 30px 30px;

    box-sizing: border-box;

    background: rgba(5, 12, 20, .96) !important;
}


/* OPEN STATE */

#lightbox.gallery-lightbox-open {
    display: flex !important;
}


/* IMAGE */

#lightbox #lightbox-img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 92vw !important;
    max-height: 86vh !important;

    object-fit: contain;

    border-radius: 8px;

    box-shadow:
        0 15px 60px rgba(0,0,0,.55);
}


/* CLOSE BUTTON */

.gallery-lightbox-close {
    position: fixed !important;

    top: 22px !important;
    right: 28px !important;

    z-index: 10000000 !important;

    width: 48px;
    height: 48px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;

    background: #d4af37 !important;
    color: #0d1b2a !important;

    font-size: 23px;

    cursor: pointer;

    transition: .2s ease;
}

.gallery-lightbox-close:hover {
    transform: rotate(90deg);

    background: #fff !important;
}


/* MOBILE */

@media (max-width: 600px) {

    #lightbox {
        padding: 70px 15px 20px;
    }

    #lightbox #lightbox-img {
        max-width: 96vw !important;
        max-height: 80vh !important;
    }

    .gallery-lightbox-close {
        top: 15px !important;
        right: 15px !important;

        width: 44px;
        height: 44px;
    }

}

/* =====================================================
   HOTEL SHARNAM - PREMIUM CUSTOMER REVIEWS
===================================================== */

.premium-reviews {
    position: relative;

    padding: 90px 20px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #faf8f2 0%,
            #ffffff 100%
        );
}


/* DECORATION */

.premium-reviews::before {
    content: "\201C";

    position: absolute;

    top: -70px;
    left: 3%;

    color: rgba(212,175,55,.07);

    font-family: Georgia, serif;
    font-size: 350px;
    line-height: 1;

    pointer-events: none;
}


/* =========================================
   HEADING
========================================= */

.reviews-heading {
    position: relative;
    z-index: 2;

    max-width: 720px;

    margin: 0 auto 48px;

    text-align: center;
}

.reviews-small-title {
    display: block;

    margin-bottom: 7px;

    color: #d4af37;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.reviews-heading h2 {
    margin: 0;

    color: #0d1b2a;

    font-size: 42px;
    font-weight: 700;
}

.reviews-gold-line {
    width: 65px;
    height: 3px;

    margin: 15px auto 18px;

    background: #d4af37;

    border-radius: 10px;
}

.reviews-heading p {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   SWIPER
========================================= */

.premium-review-slider {
    position: relative;

    padding:
        10px 5px 55px !important;
}


/* =========================================
   REVIEW CARD
========================================= */

.premium-review-card {
    position: relative;

    height: 100%;

    min-height: 250px;

    padding: 27px 25px;

    box-sizing: border-box;

    background: #fff;

    border:
        1px solid #e8e3d8;

    border-radius: 15px;

    box-shadow:
        0 10px 30px rgba(13,27,42,.07);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.premium-review-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(212,175,55,.65);

    box-shadow:
        0 18px 40px rgba(13,27,42,.12);
}


/* GOLD TOP BORDER */

.premium-review-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 25px;
    right: 25px;

    height: 3px;

    background: #d4af37;

    border-radius:
        0 0 5px 5px;
}


/* =========================================
   REVIEW TOP
========================================= */

.review-top {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* AVATAR */

.review-avatar {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #0d1b2a,
            #1d3952
        );

    color: #d4af37;

    border:
        2px solid rgba(212,175,55,.45);

    border-radius: 50%;

    font-size: 15px;
    font-weight: 700;
}


/* GUEST */

.review-guest {
    flex: 1;
}

.review-guest h3 {
    margin: 0;

    color: #0d1b2a;

    font-size: 15px;
    font-weight: 600;
}

.review-guest span {
    display: block;

    margin-top: 2px;

    color: #98a2b3;

    font-size: 10px;
}


/* QUOTE */

.review-quote {
    color:
        rgba(212,175,55,.25);

    font-size: 31px;
}


/* =========================================
   STARS
========================================= */

.review-stars {
    display: flex;

    align-items: center;

    gap: 3px;

    margin-top: 22px;

    color: #d4af37;

    font-size: 13px;
}

.review-stars span {
    margin-left: 6px;

    color: #667085;

    font-size: 11px;
    font-weight: 600;
}


/* =========================================
   REVIEW TEXT
========================================= */

.review-text {
    min-height: 52px;

    margin:
        14px 0 18px;

    color: #475467;

    font-size: 13px;
    line-height: 1.75;
}


/* =========================================
   VERIFIED
========================================= */

.review-verified {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        5px 9px;

    background: #f6f8fa;

    color: #667085;

    border-radius: 5px;

    font-size: 9px;
    font-weight: 600;
}

.review-verified i {
    color: #d4af37;
}


/* =========================================
   SWIPER PAGINATION
========================================= */

.premium-review-slider
.swiper-pagination {
    bottom: 8px !important;
}

.premium-review-slider
.swiper-pagination-bullet {
    width: 7px;
    height: 7px;

    background: #98a2b3;

    opacity: .45;
}

.premium-review-slider
.swiper-pagination-bullet-active {
    width: 22px;

    background: #d4af37;

    opacity: 1;

    border-radius: 10px;
}


/* =========================================
   CUSTOM NAVIGATION
========================================= */

.review-navigation {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-top: 8px;
}

.review-navigation span {
    color: #667085;

    font-size: 11px;
}

.review-prev,
.review-next {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid #ded7c5;

    border-radius: 50%;

    background: #fff;
    color: #0d1b2a;

    cursor: pointer;

    transition: .2s ease;
}

.review-prev:hover,
.review-next:hover {
    background: #d4af37;
    color: #fff;

    border-color: #d4af37;
}


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

@media (max-width: 600px) {

    .premium-reviews {
        padding: 60px 14px;
    }

    .reviews-heading {
        margin-bottom: 35px;
    }

    .reviews-heading h2 {
        font-size: 32px;
    }

    .premium-review-card {
        min-height: auto;

        padding: 25px 20px;
    }

}

/* =====================================================
   HOTEL SHARNAM - PREMIUM CONTACT SECTION
===================================================== */

.premium-contact {
    position: relative;
    overflow: hidden;

    padding: 90px 20px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f8fa 100%
        );
}


/* =========================================
   HEADING
========================================= */

.contact-heading {
    max-width: 720px;

    margin: 0 auto 50px;

    text-align: center;
}

.contact-small-title {
    display: block;

    margin-bottom: 7px;

    color: #d4af37;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.contact-heading h2 {
    margin: 0;

    color: #0d1b2a;

    font-size: 42px;
    font-weight: 700;
}

.contact-gold-line {
    width: 65px;
    height: 3px;

    margin: 15px auto 18px;

    background: #d4af37;

    border-radius: 20px;
}

.contact-heading p {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   MAIN GRID
========================================= */

.premium-contact-wrapper {
    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 25px;

    align-items: stretch;
}


/* =========================================
   LEFT CONTACT CARD
========================================= */

.contact-details-card {
    position: relative;

    padding: 35px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #0d1b2a,
            #162e45
        );

    border-radius: 17px;

    box-shadow:
        0 15px 40px rgba(13,27,42,.16);
}


/* DECORATIVE CIRCLE */

.contact-details-card::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -120px;
    bottom: -120px;

    border:
        1px solid rgba(212,175,55,.15);

    border-radius: 50%;
}


.contact-card-label {
    display: block;

    margin-bottom: 8px;

    color: #d4af37;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}


.contact-details-card > h3 {
    margin: 0;

    color: #fff;

    font-size: 30px;
    line-height: 1.3;
}


.contact-details-card > h3 span {
    color: #d4af37;
}


.contact-intro {
    margin:
        13px 0 28px;

    color: #b9c3ce;

    font-size: 12px;
    line-height: 1.75;
}


/* =========================================
   CONTACT ITEMS
========================================= */

.contact-detail-item {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-top: 13px;

    padding: 14px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 10px;

    transition: .25s ease;
}


.contact-link {
    text-decoration: none;
}


.contact-detail-item:hover {
    background:
        rgba(255,255,255,.09);

    border-color:
        rgba(212,175,55,.45);

    transform: translateX(3px);
}


/* ICON */

.contact-detail-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    background:
        rgba(212,175,55,.12);

    color: #d4af37;

    border:
        1px solid rgba(212,175,55,.3);

    border-radius: 50%;

    font-size: 15px;
}


.contact-detail-item > div:last-child {
    display: flex;
    flex-direction: column;
}


.contact-detail-item small {
    margin-bottom: 2px;

    color: #d4af37;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
}


.contact-detail-item strong {
    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.contact-detail-item p {
    margin: 3px 0 0;

    color: #aeb9c5;

    font-size: 10px;
    line-height: 1.55;
}


/* =========================================
   CALL / WHATSAPP
========================================= */

.contact-action-buttons {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;

    margin-top: 22px;
}


.contact-call-btn,
.contact-whatsapp-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 10px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition: .2s ease;
}


.contact-call-btn {
    background: #d4af37;
    color: #fff;
}


.contact-call-btn:hover {
    background: #bc982d;
}


.contact-whatsapp-btn {
    background: #25d366;
    color: #fff;
}


.contact-whatsapp-btn:hover {
    background: #1ebc59;
}


/* =========================================
   MAP CARD
========================================= */

.contact-map-card {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #fff;

    border:
        1px solid #e5e7eb;

    border-radius: 17px;

    box-shadow:
        0 12px 35px rgba(13,27,42,.08);
}


/* MAP HEADER */

.map-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 17px 20px;

    border-bottom:
        1px solid #eaecf0;
}


.map-header > div {
    display: flex;

    align-items: center;

    gap: 11px;
}


.map-header > div > span {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    background: #fff8df;
    color: #d4af37;

    border-radius: 50%;
}


.map-header > div > div {
    display: flex;
    flex-direction: column;
}


.map-header strong {
    color: #0d1b2a;

    font-size: 13px;
}


.map-header small {
    margin-top: 2px;

    color: #667085;

    font-size: 10px;
}


.map-location-badge {
    padding: 5px 10px;

    background: #0d1b2a;
    color: #d4af37;

    border-radius: 20px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* =========================================
   MAP
========================================= */

.premium-map {
    flex: 1;

    min-height: 440px;

    background: #eee;
}


.premium-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 440px;

    border: 0;
}


/* =========================================
   MAP FOOTER
========================================= */

.map-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 15px 20px;
}


.map-footer > div {
    display: flex;

    align-items: center;

    gap: 10px;
}


.map-footer > div > i {
    color: #d4af37;

    font-size: 18px;
}


.map-footer > div span {
    display: flex;
    flex-direction: column;
}


.map-footer strong {
    color: #0d1b2a;

    font-size: 11px;
}


.map-footer span span,
.map-footer small {
    color: #667085;

    font-size: 9px;
}


.map-footer > a {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 9px 13px;

    white-space: nowrap;

    background: #0d1b2a;
    color: #fff;

    border-radius: 6px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 600;

    transition: .2s ease;
}


.map-footer > a:hover {
    background: #d4af37;
}


/* =========================================
   BOTTOM BOOKING STRIP
========================================= */

.contact-booking-strip {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 18px;

    margin-top: 28px;

    padding: 24px 28px;

    background: #fff;

    border:
        1px solid #e8e3d8;

    border-radius: 13px;

    box-shadow:
        0 8px 25px rgba(13,27,42,.05);
}


.contact-booking-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    background: #0d1b2a;
    color: #d4af37;

    border-radius: 50%;

    font-size: 19px;
}


.contact-booking-text {
    display: flex;
    flex-direction: column;
}


.contact-booking-text span {
    color: #d4af37;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.4px;
}


.contact-booking-text strong {
    margin-top: 2px;

    color: #0d1b2a;

    font-size: 15px;
}


.contact-booking-text p {
    margin: 3px 0 0;

    color: #667085;

    font-size: 10px;
}


.contact-booking-strip > a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 18px;

    background: #d4af37;
    color: #fff;

    border-radius: 7px;

    text-decoration: none;

    white-space: nowrap;

    font-size: 11px;
    font-weight: 700;

    transition: .2s ease;
}


.contact-booking-strip > a:hover {
    background: #bc982d;
}


.contact-booking-strip > a i {
    transition: transform .2s ease;
}


.contact-booking-strip > a:hover i {
    transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .premium-contact-wrapper {
        grid-template-columns: 1fr;
    }

    .premium-map {
        min-height: 400px;
    }

    .premium-map iframe {
        min-height: 400px;
    }

}


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

@media (max-width: 600px) {

    .premium-contact {
        padding: 60px 14px;
    }

    .contact-heading {
        margin-bottom: 35px;
    }

    .contact-heading h2 {
        font-size: 32px;
    }

    .contact-details-card {
        padding: 27px 20px;
    }

    .contact-details-card > h3 {
        font-size: 25px;
    }

    .contact-action-buttons {
        grid-template-columns: 1fr;
    }

    .premium-map,
    .premium-map iframe {
        min-height: 340px;
    }

    .map-footer {
        display: block;
    }

    .map-footer > a {
        margin-top: 14px;
    }

    .contact-booking-strip {
        display: block;

        padding: 22px;
    }

    .contact-booking-icon {
        margin-bottom: 13px;
    }

    .contact-booking-strip > a {
        margin-top: 16px;
    }

}

/* =====================================================
   HOTEL SHARNAM - PREMIUM FOOTER
===================================================== */

.premium-footer {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #081522 0%,
            #0d1b2a 55%,
            #10263a 100%
        );

    color: #fff;
}


/* =========================================
   GOLD TOP LINE
========================================= */

.footer-gold-line {
    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4af37,
            #f0d77a,
            #d4af37,
            transparent
        );
}


/* =========================================
   MAIN FOOTER
========================================= */

.footer-main {
    display: grid;

    grid-template-columns:
        1.35fr .75fr 1fr 1fr;

    gap: 45px;

    padding: 65px 0 55px;
}


/* =========================================
   LOGO / ABOUT
========================================= */

.footer-logo {
    display: inline-block;

    margin-bottom: 20px;
}


.footer-logo img {
    display: block;

    width: auto;
    max-width: 180px;

    height: auto;
    max-height: 80px;

    object-fit: contain;
}


.footer-about > p {
    max-width: 330px;

    margin: 0 0 23px;

    color: #aeb9c5;

    font-size: 12px;
    line-height: 1.8;
}


/* =========================================
   MINI CONTACT
========================================= */

.footer-mini-contact {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.footer-mini-contact a {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #c5ced7;

    text-decoration: none;

    font-size: 11px;

    transition: .2s ease;
}


.footer-mini-contact a i {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    background:
        rgba(212,175,55,.1);

    color: #d4af37;

    border-radius: 50%;

    font-size: 10px;
}


.footer-mini-contact a:hover {
    color: #d4af37;

    transform: translateX(3px);
}


/* =========================================
   COLUMN HEADINGS
========================================= */

.footer-column h3 {
    margin: 5px 0 7px;

    color: #fff;

    font-size: 15px;
    font-weight: 600;
}


.footer-heading-line {
    width: 35px;
    height: 2px;

    margin-bottom: 21px;

    background: #d4af37;

    border-radius: 10px;
}


/* =========================================
   QUICK LINKS
========================================= */

.footer-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.footer-column ul li {
    margin-bottom: 10px;
}


.footer-column ul li a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #aeb9c5;

    text-decoration: none;

    font-size: 11px;

    transition: .2s ease;
}


.footer-column ul li a i {
    color: #d4af37;

    font-size: 7px;

    transition: transform .2s ease;
}


.footer-column ul li a:hover {
    color: #fff;

    transform: translateX(4px);
}


/* =========================================
   LOCATION
========================================= */

.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-bottom: 17px;
}


.footer-contact-item > div {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    background:
        rgba(212,175,55,.1);

    color: #d4af37;

    border-radius: 50%;

    font-size: 11px;
}


.footer-contact-item p {
    display: flex;
    flex-direction: column;

    margin: 0;

    color: #aeb9c5;

    font-size: 10px;
    line-height: 1.7;
}


.footer-contact-item p strong {
    margin-bottom: 1px;

    color: #fff;

    font-size: 10px;
    font-weight: 500;
}


/* DIRECTIONS */

.footer-direction-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 2px;

    color: #d4af37;

    text-decoration: none;

    font-size: 10px;
    font-weight: 600;

    transition: .2s ease;
}


.footer-direction-link:hover {
    color: #fff;
}


/* =========================================
   BOOKING COLUMN
========================================= */

.footer-booking > p {
    margin: 0 0 18px;

    color: #aeb9c5;

    font-size: 11px;
    line-height: 1.7;
}


/* BOOK BUTTON */

.footer-book-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;

    box-sizing: border-box;

    padding: 11px 13px;

    background: #d4af37;
    color: #fff;

    border-radius: 6px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    transition: .2s ease;
}


.footer-book-btn:hover {
    background: #bc982d;

    transform: translateY(-2px);
}


.footer-book-btn
.fa-arrow-right {
    margin-left: auto;
}


/* WHATSAPP */

.footer-whatsapp-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;

    box-sizing: border-box;

    margin-top: 9px;

    padding: 10px 13px;

    background:
        rgba(37,211,102,.10);

    color: #42df7b;

    border:
        1px solid rgba(37,211,102,.35);

    border-radius: 6px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 600;

    transition: .2s ease;
}


.footer-whatsapp-btn:hover {
    background: #25d366;
    color: #fff;

    border-color: #25d366;
}


/* SECURE TEXT */

.footer-secure-text {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 12px;

    color: #7f8c99;

    font-size: 8px;
}


.footer-secure-text i {
    color: #d4af37;
}


/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom {
    background:
        rgba(0,0,0,.20);

    border-top:
        1px solid rgba(255,255,255,.07);
}


.footer-bottom-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 65px;
}


.footer-bottom p {
    margin: 0;

    color: #84919e;

    font-size: 9px;
}


.footer-bottom p strong {
    color: #d4af37;

    font-weight: 600;
}


/* BOTTOM LINKS */

.footer-bottom-links {
    display: flex;

    align-items: center;

    gap: 9px;
}


.footer-bottom-links a {
    color: #84919e;

    text-decoration: none;

    font-size: 9px;

    transition: .2s ease;
}


.footer-bottom-links a:hover {
    color: #d4af37;
}


.footer-bottom-links span {
    color:
        rgba(255,255,255,.15);

    font-size: 8px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .footer-main {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 40px;

        padding:
            55px 0 45px;
    }

}


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

@media (max-width: 600px) {

    .footer-main {
        grid-template-columns: 1fr;

        gap: 35px;

        padding:
            45px 5px 40px;
    }


    .footer-logo img {
        max-width: 160px;
    }


    .footer-about > p {
        max-width: 100%;
    }


    .footer-bottom-inner {
        flex-direction: column;

        justify-content: center;

        gap: 8px;

        padding:
            17px 0;

        text-align: center;
    }

}

/* =====================================================
   FOOTER COLUMN ALIGNMENT FIX
===================================================== */

/* Main footer columns top se same line */
.footer-main {
    align-items: start;
}

/* Quick Links, Contact Us, Book Your Stay */
.footer-column {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* All headings exactly same height / position */
.footer-column h3 {
    margin: 5px 0 7px !important;
    padding: 0 !important;

    min-height: 24px;

    display: flex;
    align-items: center;

    line-height: 1.2;
}

/* Gold line sabki same position */
.footer-heading-line {
    width: 44px;
    height: 3px;

    margin-top: 8px !important;
    margin-bottom: 25px !important;

    background: #d4af37;

    border-radius: 10px;
}

/* Contact column ko accidental spacing se protect karo */
.footer-location {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Booking column bhi same top line */
.footer-booking {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Quick Links first item */
.footer-column ul {
    margin-top: 0 !important;
}

/* Contact first item */
.footer-location .footer-contact-item:first-of-type {
    margin-top: 0 !important;
}

/* Booking first paragraph */
.footer-booking > p {
    margin-top: 0 !important;
}


@media (min-width: 951px) {

    .footer-main {
        grid-template-columns:
            1.45fr 0.85fr 1fr 1fr;

        column-gap: 55px;
    }

    /* Teen headings ki exact baseline */
    .footer-main > .footer-column {
        align-self: start;
    }

}

/* =====================================================
   FINAL MOBILE GALLERY FIX
   Keep this at the END of style.css
===================================================== */

@media (max-width: 600px) {

    /* Gallery grid completely reset */
    .premium-gallery-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;

        gap: 18px !important;

        width: 100% !important;
        height: auto !important;

        overflow: visible !important;
    }


    /* Reset ALL gallery cards */
    .premium-gallery-grid .gallery-item,
    .premium-gallery-grid .gallery-item.gallery-large,
    .premium-gallery-grid .gallery-item.gallery-tall,
    .premium-gallery-grid .gallery-item.gallery-wide {

        position: relative !important;

        display: block !important;

        grid-column: 1 !important;
        grid-row: auto !important;

        width: 100% !important;
        height: 270px !important;
        min-height: 270px !important;
        max-height: 270px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        border-radius: 14px !important;
    }


    /* Images */
    .premium-gallery-grid .gallery-item > img {

        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        object-fit: cover !important;

        transform: none;
    }


    /* No zoom transform on touch/mobile */
    .premium-gallery-grid .gallery-item:hover > img {
        transform: none !important;
    }


    /* Overlay */
    .premium-gallery-grid .gallery-overlay {

        position: absolute !important;

        inset: 0 !important;

        display: flex !important;

        align-items: flex-end !important;
        justify-content: space-between !important;

        box-sizing: border-box !important;

        padding: 18px !important;

        opacity: 1 !important;

        background:
            linear-gradient(
                to top,
                rgba(7,20,33,.90) 0%,
                rgba(7,20,33,.30) 38%,
                transparent 68%
            ) !important;
    }


    /* Text stays inside image */
    .premium-gallery-grid .gallery-overlay > div {
        position: relative !important;

        z-index: 2;

        max-width: calc(100% - 60px);
    }


    .premium-gallery-grid .gallery-overlay span {
        margin-bottom: 4px !important;

        font-size: 9px !important;
    }


    .premium-gallery-grid .gallery-overlay h3 {
        margin: 0 !important;

        color: #fff !important;

        font-size: 16px !important;
        line-height: 1.3 !important;
    }


    /* Zoom button */
    .premium-gallery-grid .gallery-zoom {

        position: relative !important;

        z-index: 3;

        flex: 0 0 42px !important;

        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;
    }

}

.premium-gallery {
    padding: 55px 14px !important;
}

.premium-gallery .container {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}

.gallery-heading {
    padding: 0 15px;
}

/* =====================================================
   HOTEL SHARNAM FOOTER - FINAL DESKTOP ALIGNMENT
===================================================== */

@media (min-width: 951px) {

    /* Four clean columns */
    .premium-footer .footer-main {
        display: grid !important;

        grid-template-columns:
            1.35fr
            0.75fr
            1fr
            1fr !important;

        column-gap: 70px !important;

        align-items: start !important;
    }


    /* -----------------------------------------
       ALL THREE RIGHT COLUMNS
       Same starting position
    ----------------------------------------- */

    .premium-footer .footer-column {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;

        align-self: start !important;
    }


    /* Heading */
    .premium-footer .footer-column h3 {
        display: block !important;

        width: 100% !important;
        min-height: 24px !important;

        margin: 5px 0 0 !important;
        padding: 0 !important;

        text-align: left !important;

        line-height: 24px !important;
    }


    /* Gold line */
    .premium-footer
    .footer-column
    .footer-heading-line {

        display: block !important;

        width: 55px !important;
        height: 3px !important;

        margin:
            14px 0
            32px 0 !important;

        padding: 0 !important;

        transform: none !important;
    }


    /* =========================================
       QUICK LINKS
    ========================================= */

    .premium-footer
    .footer-column ul {

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    .premium-footer
    .footer-column ul li {

        margin:
            0 0 18px 0 !important;

        padding: 0 !important;

        text-align: left !important;
    }


    .premium-footer
    .footer-column ul li a {

        justify-content:
            flex-start !important;

        margin: 0 !important;

        text-align: left !important;
    }


    /* =========================================
       CONTACT COLUMN
    ========================================= */

    .premium-footer
    .footer-location {

        text-align: left !important;
    }


    .premium-footer
    .footer-location
    .footer-contact-item {

        justify-content:
            flex-start !important;

        margin:
            0 0 20px 0 !important;

        text-align: left !important;
    }


    .premium-footer
    .footer-location
    .footer-contact-item p {

        margin: 0 !important;

        text-align: left !important;
    }


    /* Get Directions */
    .premium-footer
    .footer-direction-link {

        display: inline-flex !important;

        justify-content:
            flex-start !important;

        margin:
            3px 0 0 0 !important;

        padding: 0 !important;

        text-align: left !important;

        transform: none !important;
    }


    /* =========================================
       BOOK YOUR STAY
    ========================================= */

    .premium-footer
    .footer-booking {

        text-align: left !important;
    }


    .premium-footer
    .footer-booking > p {

        min-height: 54px;

        margin:
            0 0 18px 0 !important;

        padding: 0 !important;

        text-align: left !important;
    }


    .premium-footer
    .footer-book-btn,
    .premium-footer
    .footer-whatsapp-btn {

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    .premium-footer
    .footer-secure-text {

        justify-content:
            center !important;
    }

}

/* =====================================================
   HOTEL SHARNAM - FINAL PREMIUM HEADER + HERO
===================================================== */

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

header {
    background: rgba(8, 24, 38, 0.98) !important;
    border-bottom: 1px solid rgba(212, 175, 55, .18);
    box-shadow: 0 5px 25px rgba(0,0,0,.15);
}

.navbar {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LOGO */

.logo img {
    width: auto;
    max-width: 135px;
    max-height: 105px;
    object-fit: contain;
    transition: transform .3s ease;
}

.logo img:hover {
    transform: scale(1.03);
}


/* =========================
   NAVIGATION
========================= */

.nav-links {
    display: flex;
    align-items: center;
    gap: 42px;
}

.nav-links a {
    position: relative;

    padding: 12px 0;

    color: #fff !important;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition: color .25s ease;
}

/* GOLD UNDERLINE */

.nav-links a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 0;
    height: 2px;

    background: #d4af37;

    transform: translateX(-50%);

    transition: width .25s ease;
}

.nav-links a:hover {
    color: #d4af37 !important;
}

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


/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;

    min-height: calc(100vh - 118px);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}


/* BETTER DARK OVERLAY */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,15,24,.60),
            rgba(4,15,24,.42),
            rgba(4,15,24,.60)
        );

    z-index: 1;
}


/* subtle bottom gradient */

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 150px;

    background:
        linear-gradient(
            to top,
            rgba(5,18,29,.38),
            transparent
        );

    z-index: 1;
}


/* =========================
   HERO CONTENT
========================= */

.hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1050px;

    margin: 0 auto;
    padding: 60px 20px;

    text-align: center;
}


/* WELCOME */

.hero-content .welcome-text {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    margin-bottom: 22px;

    color: #fff;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 8px;

    text-transform: uppercase;
}

.hero-content .welcome-text::before,
.hero-content .welcome-text::after {
    content: "";

    width: 55px;
    height: 1px;

    background: #d4af37;
}


/* HOTEL NAME */

.hero-content h1 {
    margin: 0;

    color: #e2bd43;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(58px, 7vw, 105px);
    font-weight: 700;

    line-height: .98;

    letter-spacing: 3px;

    text-transform: uppercase;

    text-shadow:
        0 3px 0 #8e6d18,
        0 8px 20px rgba(0,0,0,.55);
}


/* GOLD DECORATION BELOW HOTEL NAME */

.hero-title-decoration {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    max-width: 600px;

    margin: 28px auto 18px;
}

.hero-title-decoration::before,
.hero-title-decoration::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4af37
        );
}

.hero-title-decoration::after {
    background:
        linear-gradient(
            90deg,
            #d4af37,
            transparent
        );
}

.hero-title-decoration span {
    width: 35px;
    height: 2px;

    background: #d4af37;
}


/* TAGLINE */

.hero-content .tagline {
    display: inline-block;

    margin: 0;

    padding: 13px 30px;

    border-top: 1px solid rgba(212,175,55,.65);
    border-bottom: 1px solid rgba(212,175,55,.65);

    color: #fff;

    font-size: 16px;
    font-weight: 600;

    letter-spacing: 6px;

    text-transform: uppercase;

    text-shadow: 0 2px 8px rgba(0,0,0,.8);
}


/* =========================
   BOOK BUTTON
========================= */

.hero-content .btn {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 245px;

    margin-top: 32px;

    padding: 17px 32px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e0b72f,
            #d4af37
        ) !important;

    color: #fff !important;

    border: 1px solid #ebcb60;
    border-radius: 40px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.25);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.hero-content .btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(0,0,0,.35);
}


/* SHINE EFFECT */

.hero-content .btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .6s ease;
}

.hero-content .btn:hover::before {
    left: 140%;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .navbar {
        min-height: 105px;
    }

    .hero {
        min-height: calc(100vh - 105px);
    }

}


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

@media (max-width: 600px) {

    header {
        position: relative;
    }

    .navbar {
        min-height: 105px;

        padding-left: 18px;
        padding-right: 18px;
    }

    .logo img {
        max-width: 105px;
        max-height: 90px;
    }


    /* HERO */

    .hero {
        min-height: 620px;

        background-position: center !important;
    }

    .hero::before {
        background:
            rgba(4,15,24,.58);
    }

    .hero-content {
        padding:
            65px 20px 70px;
    }


    /* WELCOME */

    .hero-content .welcome-text {
        gap: 10px;

        margin-bottom: 20px;

        font-size: 10px;

        letter-spacing: 4px;
    }

    .hero-content .welcome-text::before,
    .hero-content .welcome-text::after {
        width: 25px;
    }


    /* HOTEL NAME */

    .hero-content h1 {
        font-size:
            clamp(43px, 14vw, 62px);

        line-height: 1.02;

        letter-spacing: 1px;

        overflow-wrap: normal;
        word-break: normal;
    }


    .hero-title-decoration {
        max-width: 290px;

        margin:
            22px auto 15px;
    }


    /* TAGLINE */

    .hero-content .tagline {
        padding: 11px 8px;

        font-size: 10px;

        line-height: 1.7;

        letter-spacing: 3px;
    }


    /* BUTTON */

    .hero-content .btn {
        min-width: 215px;

        margin-top: 28px;

        padding: 15px 25px;

        font-size: 11px;
    }

}


/* =====================================================
   HOTEL SHARNAM - FINAL SECTION NAVIGATION
===================================================== */

.nav-links {
    display: flex;
    align-items: center;

    gap: 27px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* NORMAL LINKS */

.nav-links li {
    margin: 0;
    padding: 0;
}

.nav-links .nav-link {
    position: relative;

    display: block;

    padding: 13px 0;

    color: #fff !important;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: .25s ease;
}


/* UNDERLINE */

.nav-links .nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 5px;

    width: 0;
    height: 2px;

    background: #d4af37;

    transform: translateX(-50%);

    transition: width .25s ease;
}


.nav-links .nav-link:hover,
.nav-links .nav-link.active {
    color: #d4af37 !important;
}


.nav-links .nav-link:hover::after,
.nav-links .nav-link.active::after {
    width: 100%;
}


/* =========================================
   BOOK NOW BUTTON
========================================= */

.nav-links .nav-book-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 11px 17px;

    background:
        linear-gradient(
            135deg,
            #e0b72f,
            #d4af37
        );

    color: #fff !important;

    border:
        1px solid #e9c952;

    border-radius: 7px;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 5px 15px rgba(212,175,55,.16);

    transition: .25s ease;
}


.nav-links .nav-book-btn:hover {
    transform: translateY(-2px);

    background: #cba42d;

    box-shadow:
        0 8px 20px rgba(212,175,55,.25);
}


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

@media (max-width: 950px) {

    .nav-links {
        gap: 0;
    }

    .nav-links .nav-link {
        width: 100%;

        padding: 14px 20px;

        box-sizing: border-box;
    }


    /* Mobile me underline nahi */
    .nav-links .nav-link::after {
        display: none;
    }


    /* Active mobile item */

    .nav-links .nav-link.active {
        background:
            rgba(212,175,55,.10);

        color: #d4af37 !important;
    }


    /* Mobile Book Now */

    .nav-book-item {
        padding: 12px 20px 20px !important;
    }


    .nav-links .nav-book-btn {
        width: 100%;

        box-sizing: border-box;

        padding: 13px 20px;
    }

}

#home,
#about,
#rooms,
#facilities,
#gallery,
#reviews,
#booking,
#contact {
    scroll-margin-top: 115px;
}

html {
    scroll-behavior: smooth;
}

/* =====================================================
   FINAL MOBILE NAVIGATION FIX
   KEEP AT VERY END OF style.css
===================================================== */

@media (max-width: 950px) {

    /* Navbar */
    .navbar {
        position: relative !important;
        z-index: 10002 !important;
    }


    /* =========================================
       MOBILE MENU - DEFAULT CLOSED
    ========================================= */

    .nav-links {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        display: none !important;
        flex-direction: column !important;

        gap: 0 !important;

        margin: 0 !important;
        padding: 12px 15px 18px !important;

        box-sizing: border-box !important;

        background: #0d1b2a !important;

        border-top: 1px solid rgba(212,175,55,.25);
        border-bottom: 2px solid #d4af37;

        box-shadow:
            0 15px 30px rgba(0,0,0,.28);

        z-index: 99999 !important;
    }


    /* =========================================
       OPEN MENU
    ========================================= */

    .nav-links.active {
        display: flex !important;
    }


    /* MENU ITEMS */

    .nav-links li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* NORMAL LINKS */

    .nav-links .nav-link {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        padding: 13px 15px !important;

        box-sizing: border-box !important;

        color: #fff !important;

        border-bottom:
            1px solid rgba(255,255,255,.06);

        font-size: 13px !important;
        font-weight: 500 !important;

        text-align: left !important;

        background: transparent !important;

        border-radius: 5px;

        transition: .2s ease;
    }


    /* ACTIVE SECTION */

    .nav-links .nav-link.active {
        color: #d4af37 !important;

        background:
            rgba(212,175,55,.10) !important;
    }


    /* Remove desktop underline */

    .nav-links .nav-link::after {
        display: none !important;
    }


    /* =========================================
       BOOK NOW
    ========================================= */

    .nav-book-item {
        width: 100% !important;

        padding: 13px 0 0 !important;
    }


    .nav-links .nav-book-btn {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        padding: 13px 15px !important;

        box-sizing: border-box !important;

        background: #d4af37 !important;
        color: #fff !important;

        border-radius: 6px !important;
    }

}

/* =========================================
   HERO QUICK HOTEL INFO
========================================= */

.hero-quick-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 0;

    width: fit-content;
    max-width: 900px;

    margin: 35px auto 0;

    padding: 14px 25px;

    background: rgba(8, 21, 34, .78);

    border: 1px solid rgba(212, 175, 55, .55);
    border-radius: 8px;

    backdrop-filter: blur(5px);

    box-shadow: 0 8px 25px rgba(0,0,0,.22);
}

.hero-quick-info span {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 0 20px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: .5px;

    white-space: nowrap;
}

.hero-quick-info span + span {
    border-left: 1px solid rgba(255,255,255,.20);
}

.hero-quick-info i {
    color: #d4af37;
    font-size: 15px;
}


/* MOBILE */

@media (max-width: 600px) {

    .hero-quick-info {
        width: 92%;
        margin-top: 28px;

        display: grid;
        grid-template-columns: 1fr 1fr;

        padding: 13px 10px;
        gap: 0;
    }

    .hero-quick-info span {
        justify-content: center;

        padding: 10px 5px;

        font-size: 10px;

        white-space: normal;
    }

    .hero-quick-info span + span {
        border-left: 0;
    }

    .hero-quick-info span:nth-child(even) {
        border-left: 1px solid rgba(255,255,255,.15);
    }

    .hero-quick-info span:nth-child(n+3) {
        border-top: 1px solid rgba(255,255,255,.15);
    }
}



/* =====================================================
   HERO LINES - MATCH HOTEL SHARNAM WIDTH
===================================================== */

/* Hotel title ki visual width ke according */
.hero .hero-content {
    --hero-title-width: 1050px;
}


/* Decorative gold line */
.hero .hero-title-decoration {
    width: min(100%, var(--hero-title-width)) !important;
    max-width: var(--hero-title-width) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* Comfort • Hospitality • Happiness */
.hero .hero-content .tagline {
    display: block !important;

    width: min(100%, var(--hero-title-width)) !important;
    max-width: var(--hero-title-width) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;

    text-align: center !important;
}


/* MOBILE */
@media (max-width: 768px) {

    .hero .hero-content {
        --hero-title-width: 92%;
    }

}


/* =========================================
   BOOK NOW BUTTON - TEXT VISIBILITY FIX
========================================= */

.nav-links .nav-book-btn {
    background: #d4af37 !important;
    color: #ffffff !important;
}

/* Mouse Over */
.nav-links .nav-book-btn:hover {
    background: #d4af37 !important;
    color: #0d1b2a !important;
}

/* Icon */
.nav-links .nav-book-btn:hover i {
    color: #0d1b2a !important;
}

/* Click / Focus */
.nav-links .nav-book-btn:focus,
.nav-links .nav-book-btn:active {
    background: #d4af37 !important;
    color: #0d1b2a !important;
}

/* Book Now ko active menu styling se protect karo */
.nav-links .nav-book-btn::after {
    display: none !important;
}

/* =========================================
   HERO CONTACT INFORMATION
========================================= */

.hero-contact-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 18px;

    margin: 22px auto 0;

    color: #fff;
}

.hero-contact-info a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #fff !important;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: .4px;

    text-decoration: none;

    transition: .25s ease;
}

.hero-contact-info a i {
    color: #d4af37;

    font-size: 13px;
}

.hero-contact-info a:hover {
    color: #d4af37 !important;
}

.hero-contact-divider {
    width: 1px;
    height: 16px;

    background: rgba(212,175,55,.55);
}


/* Facilities box thoda paas lao */

.hero-contact-info + .hero-quick-info {
    margin-top: 24px !important;
}


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

@media (max-width: 600px) {

    .hero-contact-info {
        flex-direction: column;

        gap: 9px;

        margin-top: 18px;
    }

    .hero-contact-info a {
        font-size: 11px;
    }

    .hero-contact-divider {
        display: none;
    }

    .hero-contact-info + .hero-quick-info {
        margin-top: 20px !important;
    }

}


/* ===== FINAL 5 ROOM LAYOUT ===== */

@media (min-width: 951px) {

    #rooms .premium-room-grid {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 30px 25px !important;
    }

    #rooms .premium-room-grid > .premium-room-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Top 3 */
    #rooms .premium-room-card:nth-child(1) {
        grid-column: 1 / 3 !important;
    }

    #rooms .premium-room-card:nth-child(2) {
        grid-column: 3 / 5 !important;
    }

    #rooms .premium-room-card:nth-child(3) {
        grid-column: 5 / 7 !important;
    }

    /* Bottom 2 centered */
    #rooms .premium-room-card:nth-child(4) {
        grid-column: 2 / 4 !important;
    }

    #rooms .premium-room-card:nth-child(5) {
        grid-column: 4 / 6 !important;
    }
}


/* TABLET */

@media (min-width: 601px) and (max-width: 950px) {

    #rooms .premium-room-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    #rooms .premium-room-card {
        grid-column: auto !important;
        width: 100% !important;
    }

    #rooms .premium-room-card:nth-child(5) {
        grid-column: 1 / -1 !important;
        width: calc(50% - 12px) !important;
        justify-self: center !important;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    #rooms .premium-room-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    #rooms .premium-room-card {
        grid-column: 1 !important;
        width: 100% !important;
    }
}


/* =========================================
   EMAIL OTP FIELD - FINAL SIZE FIX
========================================= */

.email-otp-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Email textbox ko maximum space */
.email-otp-row input[type="email"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Send OTP button chhota */
.email-otp-row .send-otp-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 55px !important;

    padding: 0 15px !important;
    height: 60px !important;

    font-size: 14px !important;
    white-space: nowrap !important;
}


/* MOBILE */
@media (max-width: 600px) {

    .email-otp-row {
        gap: 8px !important;
    }

    .email-otp-row .send-otp-btn {
        min-width: 90px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}

#booking #sendEmailOtpBtn{
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: none !important;
    border-radius: 50% !important;

    background: #d4af37 !important;
    color: #ffffff !important;

    font-size: 17px !important;
    cursor: pointer !important;

    box-shadow: 0 5px 12px rgba(212,175,55,.25);
    transition: all .25s ease;
}

#booking #sendEmailOtpBtn:hover{
    background: #0d1b2a !important;
    transform: translateY(-2px);
}

#booking .email-input-row{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#booking .email-input-row #email{
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}