/* ==========================================================================
   07. HERO VIDEO BANNER SECTION 
========================================================================== */
   .hero-banner-wrapper {
    position: relative;
    width: 100%;

    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-color: var(--bg-global);

    isolation: isolate;

    margin-top: 0;
}

.hero-banner-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
    filter: brightness(0.8) contrast(1.05);
}

.hero-banner-overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 1200px;
    margin: auto;
    padding:clamp(4.5rem,8vw,7rem) 1.5rem 2rem;
    width: 100%;
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.3rem;
    border-radius: 50px;
    background: var(--badge-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-soft);
    color: var(--badge-text);
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
	margin-top: 3rem;
    margin-bottom: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.hero-badge i {
    color: var(--gold-primary);
    font-size: 0.85rem;
    animation: pulse-icon 2s infinite ease-in-out;
}

.hero-title {
    color: var(--text-main); 
    line-height: 1;
    margin-bottom: 1.25rem;
   /* font-size: clamp(2.3rem, 5.5vw, 5rem); */
    letter-spacing: -0.015em;
    transition: color 0.3s ease;
}

.hero-title .stroke {
 /* font-family: 'Poppins', sans-serif; */
 font-weight: 900;
 color: transparent !important; 
-webkit-text-stroke-width: 1px !important;
-webkit-text-stroke-color: var(--text-main) !important; 
}

.hero-banner-wrapper .hero-title {
    color: #ffffff;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .hero-banner-wrapper .hero-title {
    color: var(--text-main);
    text-shadow: 0 2px 15px rgba(255, 255, 255, 0.6);
}

.hero-title .hero-accent {
    display: block;
    font-family: 'Poppins', sans-serif;
    /* font-size: clamp(1.5rem, 2.5vw, 2.5rem); */
	letter-spacing: 5px;
	text-transform: uppercase;
    font-weight: 500;
    font-style: normal;
	margin-top: 0.3rem;
    color: var(--gold-primary); 
   background: var(--badge-text);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: goldShimmer 6s linear infinite;
}

@keyframes goldShimmer {
    from {
        background-position: 0% center;
    }
    to {
        background-position: 200% center;
    }
}

.hero-description,
.hero-tagline {
    color: var(--text-main);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.9rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    max-width: 780px;
    margin: 0 auto 2.25rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.hero-banner-wrapper .hero-description,
.hero-banner-wrapper .hero-tagline {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .hero-banner-wrapper .hero-description,
[data-theme="light"] .hero-banner-wrapper .hero-tagline {
    color: var(--text-main);
    text-shadow: none;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.hero-scroll-indicator {
    position: relative;
    z-index: 5;
    text-align: center;
    padding-bottom: 2rem;
}

.hero-scroll-indicator a {
    color: var(--gold-light);
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.35s ease;
    opacity: 0.85;
}

[data-theme="light"] .hero-scroll-indicator a {
    color: var(--text-main);
}

.scroll-mouse {
    width: 22px;
    height: 36px;
    border: 2px solid var(--gold-primary);
    border-radius: 20px;
    position: relative;
}

.scroll-wheel {
    width: 4px;
    height: 7px;
    background: var(--gold-primary);
    border-radius: 4px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollAnim 2s infinite;
}


@media (max-width: 1199.98px) {

    .hero-content {
        max-width: 900px;
		margin-bottom: 50px;
        padding: 6rem 2rem 2.5rem;
    }

    .hero-title {
        font-size: clamp(2.5rem, 5vw, 4.2rem);
    }

    .hero-description,
    .hero-tagline {
        max-width: 720px;
    }

}


@media (max-width: 991.98px) {

    .hero-banner-wrapper {
      min-height: 100svh;
		min-height:100dvh;
		min-height:100vh;
    }

    .hero-content {
		margin-top: 100px;
		margin-bottom: 50px;
        padding: 5rem 2rem 2rem;
        max-width: 760px;
    }

    .hero-title {
        font-size: clamp(2.2rem, 6vw, 3.6rem);
        line-height: 1.2;
    }

    .hero-description,
    .hero-tagline {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 2rem;
    }

    .hero-buttons {
        gap: .9rem;
    }

    .hero-badge {
        font-size: .75rem;
        padding: .45rem 1.1rem;
    }

}


@media (max-width: 767.98px) {

    .hero-banner-wrapper {
        min-height: 100svh;
		min-height:100dvh;
		min-height:100vh;
        justify-content: center;
    }

    .hero-content {
		margin-top: 100px;
		margin-bottom: 50px;
        padding: 5rem 1.25rem 2rem;
        max-width: 100%;
    }

    .hero-badge {
        font-size: .88rem;
        padding: .45rem 1rem;
        gap: .45rem;
        letter-spacing: 1px;
        margin-bottom: 1rem;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.18;
        margin-bottom: 1rem;
    }

    .hero-description,
    .hero-tagline {
        font-size: .95rem;
        line-height: 1.65;
        margin-bottom: 1.75rem;
        max-width: 100%;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        gap: .9rem;
    }

    .hero-buttons .btn,
    .hero-buttons a.btn {
        width: 100%;
        max-width: 320px;
    }

    .hero-scroll-indicator {
        padding-bottom: 1.2rem;
    }

    .scroll-mouse {
        width: 20px;
        height: 34px;
    }

}


@media (max-width: 575.98px) {

    .hero-content {
		margin-top: 100px;
		margin-bottom: 50px;
        padding: 4.5rem 1rem 1.5rem;
    }

    .hero-title {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        line-height: 1.15;
    }

    .hero-description,
    .hero-tagline {
        font-size: .9rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .hero-badge {
        font-size: .68rem;
        padding: .4rem .9rem;
    }

    .hero-buttons .btn,
    .hero-buttons a.btn {
        width: 100%;
        min-height: 50px;
        font-size: .95rem;
    }

    .hero-scroll-indicator {
        display: none;
    }

}


@media (max-width: 360px) {

    .hero-content {
		margin-top: 50px;
		margin-bottom: 50px;
        padding: 4rem .85rem 1.25rem;
    }

    .hero-title {
        font-size: 1.65rem;
    }

    .hero-description,
    .hero-tagline {
        font-size: .88rem;
    }

    .hero-badge {
        font-size: .65rem;
        padding: .35rem .8rem;
    }

}



@media (max-height: 500px) and (orientation: landscape) {

    .hero-banner-wrapper {
        min-height: 650px;
    }

    .hero-content {
        padding: 4rem 2rem 1.5rem;
    }

    .hero-title {
        font-size: 2.3rem;
    }

    .hero-description {
        margin-bottom: 1.25rem;
    }

    .hero-scroll-indicator {
        display: none;
    }

}



@supports (object-fit: cover) {

    .hero-banner-video {
        object-fit: cover;
        object-position: center center;
    }

}






/* ==========================================================================
   4. HOTEL ROOMS HERO SECTION
   ========================================================================== */
.rooms-hero {
    background: var(--hero-overlay), 
                url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    text-align: center;
    position: relative;
    padding: 100px 20px;
}

.hero-content h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 1px;
}

.hero-content p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-top: 12px;
}

/* ==========================================================================
   5. ROOMS GRID & SIDEBAR LAYOUT
   ========================================================================== */
.rooms-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}

/* Sidebar Filters */
.filter-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-cute);
    padding: 24px;
    position: sticky;
    top: 30px;
    box-shadow: var(--shadow-smooth);
    height: fit-content;
}

.filter-card h3 { 
    color: var(--text-main); 
    margin-bottom: 20px; 
    font-size: 1.2rem; 
}

.filter-group h4 {
    color: var(--accent-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.filter-group label {
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.filter-group label:hover {
    color: var(--text-main);
}

.filter-group input[type="radio"],
.filter-group input[type="checkbox"] {
    accent-color: var(--accent-color);
}

/* Rooms Grid */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ==========================================================================
   6. ROOM CARD COMPONENT
   ========================================================================== */
.room-card {
    background: var(--card-bg);
    border-radius: var(--radius-cute);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-smooth);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.room-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-color);
}

.room-image {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.room-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.room-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--badge-bg);
    backdrop-filter: blur(8px);
    color: var(--badge-text);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid var(--border-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.room-content { 
    padding: 20px; 
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.room-content h3 {
    font-size: 1.4rem;
    color: var(--text-main);
    margin-bottom: 15px;
}

.room-desc {
    color: var(--text-main);
    font-size: 0.85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}

/*
.room-details {
    display: flex;
    gap: 10px;
    padding-bottom: 15px;
}
*/


.detail-item {
    font-size: 0.92rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-global);
    padding: 4px 8px;
    border-radius: 6px;
}

.detail-item i {
    color: var(--accent-color);
}

.amenities-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-light);
    color: var(--gold-primary);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.room-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-color);
}

.period {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-view {
    background: var(--gold-gradient);
    color: #000000;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-view:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

/* ==========================================================================
   7. RESPONSIVE BREAKPOINTS
========================================================================== */
@media (max-width: 1200px) {
    .rooms-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .rooms-wrapper { grid-template-columns: 1fr; }
    .filter-card { position: static; }
}

@media (max-width: 600px) {
    .rooms-grid { grid-template-columns: 1fr; }
}



/* ==========================================================
   PREMIUM ROOM AMENITIES
   ========================================================== */

.hotelgg_room .hotelgg-room-amenities {
    position: relative;
    padding: 1rem 0;

    border-top: 1px solid var(--border-soft);

    isolation: isolate;
}


/* ==========================================================
   SUBTLE GOLD AMBIENT LINE
   ========================================================== */

.hotelgg_room .hotelgg-room-amenities::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 52px;
    height: 1px;

    background: var(--gold-gradient);

    border-radius: 999px;
}


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

.hotelgg_room .hotelgg-room-amenities__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .75rem;

    margin-bottom: .8rem;
}


/* ----------------------------------------------------------
   LABEL
   ---------------------------------------------------------- */

.hotelgg_room .hotelgg-room-amenities__label {
    display: inline-flex;
    align-items: center;

    gap: .5rem;

    color: var(--text-main);

    font-size: .88rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .09em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   SPARKLE ICON
   ---------------------------------------------------------- */

.hotelgg_room .hotelgg-room-amenities__label > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 7px;

    background: var(--accent-light);

    color: var(--gold);

    font-size: .7rem;

    border: 1px solid var(--border-soft);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .02);

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

.hotelgg_room .hotelgg-room-amenities:hover
.hotelgg-room-amenities__label > i {
    transform: rotate(-8deg) scale(1.08);

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, .18),
            rgba(212, 175, 55, .06)
        );

    box-shadow:
        0 5px 15px rgba(212, 175, 55, .12);
}


/* ==========================================================
   AMENITY COUNT
   ========================================================== */

.hotelgg_room .hotelgg-room-amenities__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 25px;
    height: 25px;

    padding: 0 .45rem;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, .16),
            rgba(170, 119, 28, .08)
        );

    border: 1px solid var(--border-soft);

    color: var(--gold);

    font-size: .66rem;
    font-weight: 750;

    line-height: 1;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04);
}


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

.hotelgg_room .hotelgg-room-amenities__icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .55rem;
}


/* ==========================================================
   INDIVIDUAL AMENITY
   ========================================================== */

.hotelgg_room .hotelgg-amenity-icon-wrap {
    position: relative;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, .095),
            rgba(212, 175, 55, .025)
        );

    border: 1px solid var(--border-soft);

    color: var(--gold);

    cursor: help;

    outline: none;

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        color .3s ease;
}


/* ==========================================================
   INNER GLOW
   ========================================================== */

.hotelgg_room .hotelgg-amenity-icon-wrap::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .035),
            transparent 55%
        );

    pointer-events: none;
}


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

.hotelgg_room .hotelgg-amenity-icon-wrap > i {
    position: relative;
    z-index: 1;

    font-size: 1rem;

    line-height: 1;

    color: inherit;

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


/* ==========================================================
   HOVER EFFECT
   ========================================================== */

.hotelgg_room .hotelgg-amenity-icon-wrap:hover,
.hotelgg_room .hotelgg-amenity-icon-wrap:focus-visible {

    transform: translateY(-4px);

    color: var(--gold-light);

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

    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, .20),
            rgba(170, 119, 28, .08)
        );

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .22),
        0 5px 18px rgba(212, 175, 55, .12);
}

.hotelgg_room .hotelgg-amenity-icon-wrap:hover > i,
.hotelgg_room .hotelgg-amenity-icon-wrap:focus-visible > i {
    transform: scale(1.12);
}


/* ==========================================================
   ACTIVE / FOCUS
   ========================================================== */

.hotelgg_room .hotelgg-amenity-icon-wrap:focus-visible {
    outline: 2px solid rgba(212, 175, 55, .55);
    outline-offset: 3px;
}


/* ==========================================================
   PREMIUM BOOTSTRAP TOOLTIP
   ========================================================== */

.hotelgg-tooltip {
    --bs-tooltip-bg: #111111;
    --bs-tooltip-color: #f8f3e5;
    --bs-tooltip-opacity: 1;
}


/* ----------------------------------------------------------
   TOOLTIP BODY
   ---------------------------------------------------------- */

.hotelgg-tooltip .tooltip-inner {
    position: relative;

    max-width: 240px;

    padding: .62rem .82rem;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #1a1a1a,
            #0d0d0d
        );

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

    color: #f3e5ab;

    font-family: inherit;

    font-size: .88rem;
    font-weight: 650;

    line-height: 1.35;

    letter-spacing: .015em;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .38),
        0 4px 15px rgba(212, 175, 55, .08);
}


/* ==========================================================
   TOOLTIP ARROW
   ========================================================== */

.hotelgg-tooltip .tooltip-arrow::before {
    border-top-color: #111111 !important;
}


/* ==========================================================
   LIGHT THEME
   ========================================================== */

[data-theme="light"] .hotelgg_room
.hotelgg-room-amenities {

    border-top-color:
        rgba(170, 119, 28, .14);
}


/* ----------------------------------------------------------
   LIGHT THEME ICON
   ---------------------------------------------------------- */

[data-theme="light"] .hotelgg_room
.hotelgg-amenity-icon-wrap {

    background:
        linear-gradient(
            145deg,
            rgba(170, 119, 28, .075),
            rgba(170, 119, 28, .025)
        );

    border-color:
        rgba(170, 119, 28, .16);

    color: var(--accent-color);

    box-shadow:
        0 3px 12px rgba(0, 0, 0, .025);
}


/* ----------------------------------------------------------
   LIGHT THEME HOVER
   ---------------------------------------------------------- */

[data-theme="light"] .hotelgg_room
.hotelgg-amenity-icon-wrap:hover,
[data-theme="light"] .hotelgg_room
.hotelgg-amenity-icon-wrap:focus-visible {

    color: var(--gold-dark);

    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, .16),
            rgba(170, 119, 28, .06)
        );

    border-color:
        rgba(170, 119, 28, .38);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .08),
        0 5px 18px rgba(170, 119, 28, .10);
}


/* ----------------------------------------------------------
   LIGHT THEME COUNT
   ---------------------------------------------------------- */

[data-theme="light"] .hotelgg_room
.hotelgg-room-amenities__count {

    color: var(--gold-dark);

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, .13),
            rgba(170, 119, 28, .06)
        );

    border-color:
        rgba(170, 119, 28, .16);
}


/* ==========================================================
   LIGHT TOOLTIP
   ========================================================== */

[data-theme="light"] .hotelgg-tooltip {
    --bs-tooltip-bg: #1a1a1a;
    --bs-tooltip-color: #f3e5ab;
}


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

@media (max-width: 575.98px) {

    .hotelgg_room .hotelgg-room-amenities {
        margin-top: 1.05rem;
        padding-top: .85rem;
    }

    .hotelgg_room .hotelgg-room-amenities__icons {
        gap: .45rem;
    }

    .hotelgg_room .hotelgg-amenity-icon-wrap {

        width: 39px;
        height: 39px;

        flex-basis: 39px;

        border-radius: 10px;
    }

    .hotelgg_room .hotelgg-amenity-icon-wrap > i {
        font-size: .9rem;
    }

    .hotelgg_room .hotelgg-room-amenities__label {
        font-size: .67rem;
    }

}



/* ==========================================================================
   HOTELGG ROOM DETAILS
   PREMIUM ROOM AMENITIES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Amenities Section
   -------------------------------------------------------------------------- */

.hotelgg_room_details .hotelgg-room-amenities-section {
    position: relative;
    width: 100%;
}


/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.hotelgg_room_details .hotelgg-room-amenities-heading {
    margin-bottom: 1.5rem;
}

.hotelgg_room_details .hotelgg-room-amenities-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 0.55rem;

    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;

    text-transform: uppercase;

    color: var(--gold-primary, #D4AF37);
}

.hotelgg_room_details .hotelgg-room-amenities-eyebrow::before {
    content: "";

    width: 24px;
    height: 1px;

    flex-shrink: 0;

    background: currentColor;
}

.hotelgg_room_details .hotelgg-room-amenities-heading h2 {
    margin: 0;

    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;

    color: var(--text-main, #222);
}

.hotelgg_room_details .hotelgg-room-amenities-heading p {
    max-width: 600px;

    margin: 0.6rem 0 0;

    font-size: 0.94rem;
    line-height: 1.7;

    color: var(--text-muted, #777);
}


/* --------------------------------------------------------------------------
   Amenities Grid
   -------------------------------------------------------------------------- */

.hotelgg_room_details .hotelgg-room-amenities {
    width: 100%;
}

.hotelgg_room_details .hotelgg-room-amenities__grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(190px, 1fr));

    gap: 14px;

    width: 100%;
}


/* --------------------------------------------------------------------------
   Amenity Card
   -------------------------------------------------------------------------- */

.hotelgg_room_details .hotelgg-amenity-card {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;
    min-height: 78px;

    gap: 14px;
    padding: 14px 16px;

    overflow: hidden;

    background: var(
        --card-bg,
        rgba(255, 255, 255, 0.82)
    );

    border: 1px solid var(
        --border-soft,
        rgba(0, 0, 0, 0.08)
    );

    border-radius: 14px;

    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.035);

    transition:
        transform 0.35s cubic-bezier(.2, .8, .2, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


/* Premium shine */

.hotelgg_room_details .hotelgg-amenity-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    pointer-events: none;

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

    transform: skewX(-20deg);

    transition: left 0.65s ease;
}


/* Hover */

.hotelgg_room_details .hotelgg-amenity-card:hover {
    transform: translateY(-4px);

    border-color:
        color-mix(
            in srgb,
            var(--gold-primary, #D4AF37) 45%,
            transparent
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.08);
}

.hotelgg_room_details .hotelgg-amenity-card:hover::before {
    left: 140%;
}


/* --------------------------------------------------------------------------
   Amenity Icon
   -------------------------------------------------------------------------- */

.hotelgg_room_details .hotelgg-amenity-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    border-radius: 12px;

    color: var(--gold-primary, #D4AF37);

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--gold-primary, #D4AF37) 14%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--gold-primary, #D4AF37) 5%,
                transparent
            )
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--gold-primary, #D4AF37) 18%,
            transparent
        );

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}

.hotelgg_room_details .hotelgg-amenity-card__icon i {
    font-size: 1.05rem;

    transition:
        transform 0.35s ease;
}

.hotelgg_room_details .hotelgg-amenity-card:hover
.hotelgg-amenity-card__icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--gold-light, #F3E5AB),
            var(--gold-primary, #D4AF37)
        );

    transform: scale(1.06);
}

.hotelgg_room_details .hotelgg-amenity-card:hover
.hotelgg-amenity-card__icon i {
    transform: scale(1.08);
}


/* --------------------------------------------------------------------------
   Amenity Name
   -------------------------------------------------------------------------- */

.hotelgg_room_details .hotelgg-amenity-card__content {
    min-width: 0;
    flex: 1;
}

.hotelgg_room_details .hotelgg-amenity-card__name {
    display: block;

    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;

    color: var(--text-main, #222);

    overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   DARK THEME
   -------------------------------------------------------------------------- */

[data-theme="dark"] .hotelgg_room_details
.hotelgg-amenity-card {
    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .hotelgg_room_details
.hotelgg-amenity-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--gold-primary, #D4AF37) 45%,
            transparent
        );

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

[data-theme="dark"] .hotelgg_room_details
.hotelgg-amenity-card__icon {
    background:
        color-mix(
            in srgb,
            var(--gold-primary, #D4AF37) 10%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(--gold-primary, #D4AF37) 20%,
            transparent
        );
}


/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    .hotelgg_room_details
    .hotelgg-room-amenities-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .hotelgg_room_details
    .hotelgg-room-amenities__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .hotelgg_room_details
    .hotelgg-amenity-card {
        min-height: 72px;
        padding: 12px;
    }

}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

    .hotelgg_room_details
    .hotelgg-room-amenities-heading h2 {
        font-size: 1.45rem;
    }

    .hotelgg_room_details
    .hotelgg-room-amenities-heading p {
        font-size: 0.88rem;
    }

    .hotelgg_room_details
    .hotelgg-room-amenities__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hotelgg_room_details
    .hotelgg-amenity-card {
        min-height: 68px;
        padding: 11px 13px;

        border-radius: 12px;
    }

    .hotelgg_room_details
    .hotelgg-amenity-card__icon {
        flex-basis: 42px;

        width: 42px;
        height: 42px;

        border-radius: 10px;
    }

    .hotelgg_room_details
    .hotelgg-amenity-card__name {
        font-size: 0.9rem;
    }

}




/* ==========================================================
   PREMIUM ROOM DETAILS
   ========================================================== */

.room-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
	margin-bottom: 15px;
}

/* Individual detail tile */
.room-details .detail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 13px;

    background:
        linear-gradient(
            145deg,
            var(--card-bg),
            var(--accent-light)
        );

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    color: var(--text-main);

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;

    overflow: hidden;
}

/* Elegant top highlight */
.room-details .detail-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--accent-color),
        transparent
    );

    opacity: 0.35;
}

/* Soft hover effect */
.room-details .detail-item:hover {
    transform: translateY(-2px);

    border-color: var(--accent-color);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.10),
        0 4px 15px rgba(170, 119, 28, 0.10);
}


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

.room-details .detail-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;

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

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            var(--accent-light),
            transparent
        );

    border: 1px solid var(--border-soft);

    color: var(--accent-color);

    font-size: 14px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.room-details .detail-item:hover .detail-icon {
    background: var(--gold-gradient);
    color: #ffffff;
    transform: scale(1.06);
}


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

.room-details .detail-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.room-details .detail-label {
    margin-bottom: 3px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;

    white-space: nowrap;
}

.room-details .detail-value {
    color: var(--text-main);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================
   DARK THEME REFINEMENT
   ========================================================== */

[data-theme="dark"] .room-details .detail-item,
:root .room-details .detail-item {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 5px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .room-details .detail-item:hover,
:root .room-details .detail-item:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 28px rgba(0, 0, 0, 0.38),
        0 5px 18px rgba(212, 175, 55, 0.12);
}


/* ==========================================================
   LIGHT THEME REFINEMENT
   ========================================================== */

[data-theme="light"] .room-details .detail-item {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            rgba(170, 119, 28, 0.035)
        );

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.045);
}

[data-theme="light"] .room-details .detail-item:hover {
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08),
        0 5px 15px rgba(170, 119, 28, 0.10);
}


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

@media (max-width: 767.98px) {

    .room-details {
        gap: 8px;
        margin-top: 15px;
    }

    .room-details .detail-item {
        padding: 10px;
        gap: 9px;
    }

    .room-details .detail-icon {
        flex-basis: 33px;
        width: 33px;
        height: 33px;
        font-size: 13px;
    }

    .room-details .detail-value {
        font-size: 12px;
    }
}


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

@media (max-width: 420px) {

    .room-details {
        grid-template-columns: 1fr;
    }

    .room-details .detail-item {
        padding: 11px 12px;
    }

    .room-details .detail-value {
        white-space: normal;
    }
}


/* ==========================================================
   PREMIUM ROOM EMPTY STATE
   ========================================================== */

.rooms-empty-state {
    position: relative;
    width: 100%;
    min-height: 390px;

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

    padding: 55px 35px;
    margin: 10px 0 30px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 20%,
            var(--accent-light),
            transparent 42%
        ),
        var(--card-bg);

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    overflow: hidden;
    isolation: isolate;

    box-shadow: var(--shadow-smooth);

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* ----------------------------------------------------------
   SUBTLE DECORATIVE GLOW
   ---------------------------------------------------------- */

.rooms-empty-state__glow {
    position: absolute;
    top: -130px;
    left: 50%;
    width: 300px;
    height: 300px;

    transform: translateX(-50%);

    background: radial-gradient(
        circle,
        rgba(212, 175, 55, 0.13) 0%,
        rgba(212, 175, 55, 0.045) 35%,
        transparent 72%
    );

    filter: blur(8px);
    pointer-events: none;
    z-index: -1;
}


/* ----------------------------------------------------------
   PREMIUM ICON
   ---------------------------------------------------------- */

.rooms-empty-state__icon-wrap {
    position: relative;

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

    margin-bottom: 22px;
}

.rooms-empty-state__icon-wrap::before,
.rooms-empty-state__icon-wrap::after {
    content: "";
    position: absolute;

    border: 1px solid var(--border-soft);
    border-radius: 50%;

    pointer-events: none;
}

.rooms-empty-state__icon-wrap::before {
    width: 94px;
    height: 94px;
}

.rooms-empty-state__icon-wrap::after {
    width: 112px;
    height: 112px;

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


.rooms-empty-state__icon {
    position: relative;

    width: 70px;
    height: 70px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--accent-light),
            rgba(212, 175, 55, 0.035)
        );

    border: 1px solid var(--border-soft);

    color: var(--accent-color);

    font-size: 25px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


.rooms-empty-state:hover .rooms-empty-state__icon {
    transform: translateY(-3px) scale(1.04);

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(212, 175, 55, 0.20);
}


/* ----------------------------------------------------------
   CONTENT
   ---------------------------------------------------------- */

.rooms-empty-state__content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 570px;
}


/* ----------------------------------------------------------
   EYEBROW
   ---------------------------------------------------------- */

.rooms-empty-state__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-bottom: 10px;

    color: var(--accent-color);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}


.rooms-empty-state__eyebrow-line {
    display: block;

    width: 24px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent-color)
        );

    opacity: 0.7;
}

.rooms-empty-state__eyebrow-line:last-child {
    background:
        linear-gradient(
            90deg,
            var(--accent-color),
            transparent
        );
}


/* ----------------------------------------------------------
   TITLE
   ---------------------------------------------------------- */

.rooms-empty-state__title {
    margin: 0 0 13px;

    color: var(--text-main);

font-family: 'Playfair Display', 'Cinzel', serif;

    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}


/* ----------------------------------------------------------
   MESSAGE
   ---------------------------------------------------------- */

.rooms-empty-state__message {
    max-width: 510px;

    margin: 0 auto;

    color: var(--text-muted);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
}


/* ----------------------------------------------------------
   DECORATIVE DIVIDER
   ---------------------------------------------------------- */

.rooms-empty-state__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 170px;

    margin: 22px auto 17px;
}


.rooms-empty-state__divider span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--border-soft)
        );
}

.rooms-empty-state__divider span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--border-soft),
            transparent
        );
}


.rooms-empty-state__divider i {
    color: var(--accent-color);

    font-size: 8px;

    opacity: 0.8;
}


/* ----------------------------------------------------------
   FILTER HINT
   ---------------------------------------------------------- */

.rooms-empty-state__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin: 0;

    padding: 8px 13px;

    color: var(--text-muted);

    background: var(--accent-light);

    border: 1px solid var(--border-soft);
    border-radius: 30px;

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

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.rooms-empty-state__hint i {
    color: var(--accent-color);
    font-size: 10px;
}


/* ----------------------------------------------------------
   HOVER
   ---------------------------------------------------------- */

.rooms-empty-state:hover {
    border-color: rgba(170, 119, 28, 0.30);

    box-shadow:
        var(--shadow-smooth),
        0 8px 30px rgba(170, 119, 28, 0.07);
}


/* ----------------------------------------------------------
   DARK THEME
   ---------------------------------------------------------- */

[data-theme="dark"] .rooms-empty-state,
:root .rooms-empty-state {
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(212, 175, 55, 0.07),
            transparent 42%
        ),
        var(--card-bg);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 15px 35px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .rooms-empty-state__icon,
:root .rooms-empty-state__icon {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 25px rgba(0, 0, 0, 0.30);
}


/* ----------------------------------------------------------
   LIGHT THEME
   ---------------------------------------------------------- */

[data-theme="light"] .rooms-empty-state {
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(170, 119, 28, 0.055),
            transparent 42%
        ),
        #ffffff;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.055);
}

[data-theme="light"] .rooms-empty-state__icon {
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.06);
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 767.98px) {

    .rooms-empty-state {
        min-height: 350px;

        padding: 45px 25px;
        margin: 5px 0 25px;

        border-radius: 15px;
    }

    .rooms-empty-state__icon {
        width: 64px;
        height: 64px;

        font-size: 22px;
    }

    .rooms-empty-state__icon-wrap::before {
        width: 86px;
        height: 86px;
    }

    .rooms-empty-state__icon-wrap::after {
        width: 102px;
        height: 102px;
    }

    .rooms-empty-state__title {
        font-size: 27px;
    }

    .rooms-empty-state__message {
        font-size: 13px;
        line-height: 1.7;
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 480px) {

    .rooms-empty-state {
        min-height: 330px;

        padding: 40px 18px;
    }

    .rooms-empty-state__eyebrow {
        font-size: 9px;
        letter-spacing: 0.18em;
    }

    .rooms-empty-state__eyebrow-line {
        width: 18px;
    }

    .rooms-empty-state__title {
        font-size: 25px;
    }

    .rooms-empty-state__message {
        max-width: 330px;
        font-size: 12.5px;
    }

    .rooms-empty-state__hint {
        font-size: 10px;
        padding: 7px 10px;
    }
}




/* =========================================================
   HOTEL GURU GRAND
   PREMIUM POKHARA ATTRACTIONS
========================================================= */

.hotelgg-pokhara-attractions {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: var(--bg-global);
    color: var(--text-main);
    isolation: isolate;
}

.hotelgg-attractions-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(212, 175, 55, 0.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(212, 175, 55, 0.055),
            transparent 32%
        );
}

.hotelgg-pokhara-attractions::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--border-soft),
        transparent
    );
    opacity: 0.35;
    pointer-events: none;
}


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

.hotelgg-section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 22px;
    color: var(--accent-color);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.hotelgg-section-eyebrow i {
    font-size: 0.85rem;
}

.hotelgg-eyebrow-line {
    width: 38px;
    height: 1px;
    background: var(--gold-gradient);
    opacity: 0.8;
}

.hotelgg-attractions-title {
    margin: 0;
    color: var(--text-main);
    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: clamp(2.6rem, 5vw, 5rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.hotelgg-attractions-title span {
    display: block;
    color: var(--accent-color);
    
}

.hotelgg-attractions-subtitle {
    max-width: 720px;
    margin: 25px auto 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}


/* =========================================================
   INTRO
========================================================= */

.hotelgg-attractions-intro {
    margin-top: 90px;
}

.hotelgg-intro-content {
    max-width: 570px;
    padding-right: 30px;
}

.hotelgg-intro-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: var(--accent-color);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hotelgg-intro-label i {
    font-size: 0.9rem;
}

.hotelgg-intro-content h3 {
    margin: 0 0 24px;
    color: var(--text-main);
    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 500;
    line-height: 1.08;
}

.hotelgg-intro-content h3 span {
    color: var(--accent-color);
    
}

.hotelgg-intro-content p {
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.85;
}

.hotelgg-intro-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.hotelgg-intro-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-cute);
    background: var(--accent-light);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}

.hotelgg-intro-feature:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color);
}

.hotelgg-feature-icon {
    display: grid;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 50%;
    color: var(--gold);
    background: var(--card-bg);
    box-shadow: var(--shadow-smooth);
}

.hotelgg-intro-feature strong {
    display: block;
    margin-bottom: 3px;
    color: var(--text-main);
    font-size: 0.82rem;
}

.hotelgg-intro-feature small {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}


/* =========================================================
   INTRO IMAGE
========================================================= */

.hotelgg-intro-image {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    border-radius: 28px;
    background: var(--card-bg);
    box-shadow: var(--shadow-smooth);
}

.hotelgg-intro-image::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    pointer-events: none;
}

.hotelgg-intro-image img {
    width: 100%;
    height: 540px;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2,.65,.2,1);
}

.hotelgg-intro-image:hover img {
    transform: scale(1.055);
}

.hotelgg-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 25%,
            rgba(0, 0, 0, 0.82) 100%
        );
}

.hotelgg-image-caption {
    position: absolute;
    right: 35px;
    bottom: 30px;
    left: 35px;
    z-index: 4;
}

.hotelgg-image-caption span {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--gold-light);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hotelgg-image-caption strong {
    display: block;
    color: #fff;
    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 500;
}

.hotelgg-floating-badge {
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #fff;
    background: rgba(15, 15, 15, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hotelgg-floating-badge > i {
    color: var(--gold);
    font-size: 1rem;
}

.hotelgg-floating-badge strong,
.hotelgg-floating-badge small {
    display: block;
}

.hotelgg-floating-badge strong {
    font-size: 0.75rem;
}

.hotelgg-floating-badge small {
    margin-top: 1px;
    color: rgba(255,255,255,.7);
    font-size: 0.62rem;
}


/* =========================================================
   ATTRACTION GRID
========================================================= */

.hotelgg-attractions-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    margin-top: 90px;
}

.hotelgg-attraction-card {
    grid-column: span 4;
    min-width: 0;
}

.hotelgg-attraction-large {
    grid-column: span 8;
}

.hotelgg-attraction-wide {
    grid-column: span 8;
}

.hotelgg-attraction-image {
    position: relative;
    height: 510px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--card-bg);
    box-shadow: var(--shadow-smooth);
}

.hotelgg-attraction-card:not(.hotelgg-attraction-large):not(.hotelgg-attraction-wide)
.hotelgg-attraction-image {
    height: 440px;
}

.hotelgg-attraction-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.9s cubic-bezier(.2,.65,.2,1),
        filter 0.6s ease;
}

.hotelgg-attraction-card:hover .hotelgg-attraction-image img {
    transform: scale(1.08);
    filter: saturate(1.08);
}

.hotelgg-card-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 15%,
            rgba(0,0,0,.12) 35%,
            rgba(0,0,0,.88) 100%
        );
}

.hotelgg-attraction-number {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 3;
    color: rgba(255,255,255,.88);
    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
}

.hotelgg-attraction-top {
    position: absolute;
    top: 19px;
    right: 21px;
    left: 75px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hotelgg-distance {
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50px;
    color: #fff;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hotelgg-distance i {
    margin-right: 4px;
    color: var(--gold-light);
}

.hotelgg-card-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(0,0,0,.3);
    backdrop-filter: blur(10px);
}

.hotelgg-attraction-content {
    position: absolute;
    right: 27px;
    bottom: 26px;
    left: 27px;
    z-index: 4;
}

.hotelgg-card-category {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--gold-light);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hotelgg-attraction-content h3 {
    margin: 0 0 8px;
    color: #fff;
    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
}

.hotelgg-attraction-content p {
    max-width: 650px;
    margin: 0 0 16px;
    color: rgba(255,255,255,.76);
    font-size: 0.82rem;
    line-height: 1.65;
}

.hotelgg-explore-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s ease;
}

.hotelgg-explore-link i {
    color: var(--gold);
    transition: transform .3s ease;
}

.hotelgg-explore-link:hover {
    color: var(--gold-light);
}

.hotelgg-explore-link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   EXPERIENCE BOX
========================================================= */

.hotelgg-attractions-bottom {
    margin-top: 70px;
}

.hotelgg-experience-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 32px 36px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            var(--accent-light),
            transparent
        ),
        var(--card-bg);
    box-shadow: var(--shadow-smooth);
}

.hotelgg-experience-box::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--accent-light);
    filter: blur(20px);
}

.hotelgg-experience-icon {
    position: relative;
    z-index: 2;
    display: grid;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    place-items: center;
    border-radius: 50%;
    color: var(--gold);
    background: var(--bg-global);
    box-shadow: var(--shadow-smooth);
    font-size: 1.15rem;
}

.hotelgg-experience-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.hotelgg-experience-content > span {
    display: block;
    margin-bottom: 5px;
    color: var(--accent-color);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hotelgg-experience-content h3 {
    margin: 0 0 5px;
    color: var(--text-main);
    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 500;
}

.hotelgg-experience-content p {
    max-width: 720px;
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.65;
}

.hotelgg-experience-action {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.hotelgg-gold-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-radius: 50px;
    color: #151515;
    background: var(--gold-gradient);
    box-shadow: 0 8px 25px rgba(212,175,55,.18);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-decoration: none;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.hotelgg-gold-button:hover {
    color: #111;
    background: var(--gold-gradient-hover);
    transform: translateY(-3px);
    box-shadow: 0 13px 30px rgba(212,175,55,.27);
}

.hotelgg-gold-button i {
    transition: transform .3s ease;
}

.hotelgg-gold-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.hotelgg-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.65,.2,1);
}

.hotelgg-reveal.hotelgg-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   DARK/LIGHT THEME REFINEMENTS
========================================================= */

[data-theme="light"] .hotelgg-pokhara-attractions {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(170,119,28,.045),
            transparent 30%
        ),
        var(--bg-global);
}

[data-theme="light"] .hotelgg-intro-image,
[data-theme="light"] .hotelgg-attraction-image {
    box-shadow: 0 18px 45px rgba(0,0,0,.08);
}

[data-theme="light"] .hotelgg-floating-badge {
    color: var(--text-main);
    background: rgba(255,255,255,.62);
    border-color: rgba(0,0,0,.08);
}

[data-theme="light"] .hotelgg-floating-badge small {
    color: var(--text-muted);
}

[data-theme="light"] .hotelgg-attraction-image img {
    filter: saturate(.92);
}


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

@media (max-width: 1199.98px) {

    .hotelgg-pokhara-attractions {
        padding: 100px 0;
    }

    .hotelgg-attraction-card {
        grid-column: span 6;
    }

    .hotelgg-attraction-large,
    .hotelgg-attraction-wide {
        grid-column: span 12;
    }

    .hotelgg-attraction-large .hotelgg-attraction-image,
    .hotelgg-attraction-wide .hotelgg-attraction-image {
        height: 480px;
    }

}

@media (max-width: 991.98px) {

    .hotelgg-attractions-intro {
        margin-top: 70px;
    }

    .hotelgg-intro-content {
        max-width: none;
        padding-right: 0;
        margin-bottom: 40px;
    }

    .hotelgg-intro-image,
    .hotelgg-intro-image img {
        height: 500px;
        min-height: 500px;
    }

    .hotelgg-attractions-grid {
        margin-top: 65px;
    }

    .hotelgg-experience-box {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hotelgg-experience-content {
        min-width: calc(100% - 90px);
    }

    .hotelgg-experience-action {
        margin-left: 87px;
    }

}

@media (max-width: 767.98px) {

    .hotelgg-pokhara-attractions {
        padding: 80px 0;
    }

    .hotelgg-attractions-title {
        font-size: 2.65rem;
    }

    .hotelgg-attractions-subtitle {
        padding: 0 10px;
        font-size: .93rem;
    }

    .hotelgg-attractions-intro {
        margin-top: 55px;
    }

    .hotelgg-intro-content h3 {
        font-size: 2.3rem;
    }

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

    .hotelgg-intro-image,
    .hotelgg-intro-image img {
        height: 420px;
        min-height: 420px;
    }

    .hotelgg-floating-badge {
        top: 23px;
        right: 23px;
    }

    .hotelgg-attractions-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 55px;
    }

    .hotelgg-attraction-card,
    .hotelgg-attraction-large,
    .hotelgg-attraction-wide {
        grid-column: auto;
    }

    .hotelgg-attraction-image,
    .hotelgg-attraction-card:not(.hotelgg-attraction-large):not(.hotelgg-attraction-wide)
    .hotelgg-attraction-image,
    .hotelgg-attraction-large .hotelgg-attraction-image,
    .hotelgg-attraction-wide .hotelgg-attraction-image {
        height: 430px;
    }

    .hotelgg-attraction-content {
        right: 22px;
        bottom: 22px;
        left: 22px;
    }

    .hotelgg-experience-box {
        padding: 26px 22px;
        gap: 17px;
    }

    .hotelgg-experience-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
    }

    .hotelgg-experience-content {
        min-width: calc(100% - 70px);
    }

    .hotelgg-experience-content h3 {
        font-size: 1.4rem;
    }

    .hotelgg-experience-action {
        width: 100%;
        margin-left: 69px;
    }

}

@media (max-width: 480px) {

    .hotelgg-pokhara-attractions {
        padding: 65px 0;
    }

    .hotelgg-section-eyebrow {
        font-size: .63rem;
        letter-spacing: .16em;
    }

    .hotelgg-eyebrow-line {
        width: 25px;
    }

    .hotelgg-attractions-title {
        font-size: 2.25rem;
    }

    .hotelgg-attractions-subtitle {
        font-size: .87rem;
        line-height: 1.7;
    }

    .hotelgg-intro-image,
    .hotelgg-intro-image img {
        height: 360px;
        min-height: 360px;
    }

    .hotelgg-image-caption {
        right: 25px;
        bottom: 24px;
        left: 25px;
    }

    .hotelgg-image-caption strong {
        font-size: 1.4rem;
    }

    .hotelgg-attraction-image,
    .hotelgg-attraction-card:not(.hotelgg-attraction-large):not(.hotelgg-attraction-wide)
    .hotelgg-attraction-image {
        height: 390px;
    }

    .hotelgg-attraction-content h3 {
        font-size: 1.65rem;
    }

    .hotelgg-attraction-content p {
        font-size: .76rem;
    }

    .hotelgg-experience-action {
        margin-left: 0;
    }

    .hotelgg-gold-button {
        width: 100%;
        justify-content: center;
    }

}






/* =========================================================
   HOTEL GURU GRAND
   PREMIUM POKHARA ATTRACTIONS — HOME PAGE
========================================================= */

.hotelgg-pokhara-attractions-home {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 75px 0;
    background: var(--bg-global);
    color: var(--text-main);
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.hotelgg-pokhara-home-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 26px;
    background: var(--card-bg);
    box-shadow: var(--shadow-smooth);
}


/* =========================================================
   IMAGE
========================================================= */

.hotelgg-pokhara-home-image {
    position: relative;
    height: 500px;
    min-height: 100%;
    overflow: hidden;
    background: var(--dark-bg);
}

.hotelgg-pokhara-home-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:
        transform 1s cubic-bezier(.2,.65,.2,1),
        filter .6s ease;
}

.hotelgg-pokhara-home-image:hover img {
    transform: scale(1.045);
}


/* Image Overlay */

.hotelgg-pokhara-home-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 15%,
            rgba(0,0,0,.12) 45%,
            rgba(0,0,0,.72) 100%
        );
    pointer-events: none;
}


/* Inner Border */

.hotelgg-pokhara-home-image::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    pointer-events: none;
}


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

.hotelgg-pokhara-home-location {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 3;

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

    padding: 9px 14px;

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

    color: #fff;
    background: rgba(0,0,0,.35);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hotelgg-pokhara-home-location i {
    color: var(--gold-light);
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.hotelgg-pokhara-home-image-caption {
    position: absolute;
    right: 30px;
    bottom: 27px;
    left: 30px;
    z-index: 3;
}

.hotelgg-pokhara-home-image-caption span {
    color: rgba(255,255,255,.88);
    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: 1.25rem;
    
}


/* =========================================================
   NUMBER
========================================================= */

.hotelgg-pokhara-home-number {
    position: absolute;
    right: 28px;
    top: 22px;
    z-index: 3;

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

    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: .8rem;
    letter-spacing: .18em;
}


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

.hotelgg-pokhara-home-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    height: 500px;
    padding: 50px 55px;

    background:
        radial-gradient(
            circle at 100% 0%,
            var(--accent-light),
            transparent 38%
        ),
        var(--card-bg);
}


/* =========================================================
   EYEBROW
========================================================= */

.hotelgg-pokhara-home-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 17px;

    color: var(--accent-color);

    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hotelgg-pokhara-home-line {
    width: 28px;
    height: 1px;
    background: var(--gold-gradient);
}

.hotelgg-pokhara-home-eyebrow i {
    font-size: .82rem;
}


/* =========================================================
   TITLE
========================================================= */

.hotelgg-pokhara-home-title {
    max-width: 540px;
    margin: 0 0 15px;

    color: var(--text-main);

    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.hotelgg-pokhara-home-title span {
    display: block;

    color: var(--accent-color);

  
}


/* =========================================================
   SUBTITLE
========================================================= */

.hotelgg-pokhara-home-subtitle {
    max-width: 530px;

    margin: 0 0 14px;

    color: var(--text-main);

    font-size: .91rem;
    font-weight: 500;
    line-height: 1.65;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hotelgg-pokhara-home-description {
    max-width: 540px;

    margin: 0;

    color: var(--text-muted);

    font-size: .92rem;
    line-height: 1.75;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.hotelgg-pokhara-home-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid var(--border-soft);
}

.hotelgg-pokhara-home-highlight {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.hotelgg-pokhara-home-highlight-icon {
    display: grid;
    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    place-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 50%;

    color: var(--accent-color);
    background: var(--accent-light);

    font-size: .88rem;
}

.hotelgg-pokhara-home-highlight strong {
    display: block;

    overflow: hidden;

    color: var(--text-main);

    font-size: .68rem;
    font-weight: 800;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.hotelgg-pokhara-home-highlight small {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: var(--text-muted);

    font-size: .57rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   ACTION
========================================================= */

.hotelgg-pokhara-home-action {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 25px;
}

.hotelgg-pokhara-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 11px 18px;

    border-radius: 50px;

    color: #151515;
    background: var(--gold-gradient);

    box-shadow:
        0 8px 22px rgba(212,175,55,.17);

    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;

    text-decoration: none;

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

.hotelgg-pokhara-home-button:hover {
    color: #111;

    background: var(--gold-gradient-hover);

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(212,175,55,.25);
}

.hotelgg-pokhara-home-button i {
    transition: transform .3s ease;
}

.hotelgg-pokhara-home-button:hover i {
    transform: translateX(4px);
}


/* Small note */

.hotelgg-pokhara-home-note {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--text-muted);

    font-size: .61rem;
}

.hotelgg-pokhara-home-note i {
    color: var(--accent-color);
    font-size: .68rem;
}


/* =========================================================
   LIGHT THEME
========================================================= */

[data-theme="light"] .hotelgg-pokhara-home-container {
    box-shadow:
        0 18px 45px rgba(0,0,0,.07);
}

[data-theme="light"] .hotelgg-pokhara-home-content {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(170,119,28,.055),
            transparent 38%
        ),
        var(--card-bg);
}


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

@media (max-width: 991.98px) {

    .hotelgg-pokhara-attractions-home {
        padding: 65px 0;
    }

    .hotelgg-pokhara-home-container {
        width: min(720px, calc(100% - 32px));
    }

    .hotelgg-pokhara-home-image {
        height: 390px;
    }

    .hotelgg-pokhara-home-content {
        height: auto;
        min-height: 390px;
        padding: 42px 42px;
    }

    .hotelgg-pokhara-home-title {
        font-size: 2.5rem;
    }

    .hotelgg-pokhara-home-description {
        max-width: 650px;
    }

}


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

@media (max-width: 767.98px) {

    .hotelgg-pokhara-attractions-home {
        padding: 50px 0;
    }

    .hotelgg-pokhara-home-container {
        width: calc(100% - 24px);
        border-radius: 20px;
    }

    .hotelgg-pokhara-home-image {
        height: 310px;
    }

    .hotelgg-pokhara-home-image::after {
        inset: 10px;
        border-radius: 14px;
    }

    .hotelgg-pokhara-home-location {
        top: 20px;
        left: 20px;
        padding: 8px 11px;
        font-size: .59rem;
    }

    .hotelgg-pokhara-home-image-caption {
        right: 22px;
        bottom: 22px;
        left: 22px;
    }

    .hotelgg-pokhara-home-image-caption span {
        font-size: 1.05rem;
    }

    .hotelgg-pokhara-home-content {
        min-height: auto;
        padding: 34px 25px 30px;
    }

    .hotelgg-pokhara-home-title {
        font-size: 2.15rem;
    }

    .hotelgg-pokhara-home-subtitle {
        font-size: .83rem;
    }

    .hotelgg-pokhara-home-description {
        font-size: .74rem;
        line-height: 1.7;
    }

    .hotelgg-pokhara-home-highlights {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .hotelgg-pokhara-home-highlight {
        padding: 7px 0;
    }

    .hotelgg-pokhara-home-action {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-top: 20px;
    }

}


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

@media (max-width: 420px) {

    .hotelgg-pokhara-home-image {
        height: 270px;
    }

    .hotelgg-pokhara-home-title {
        font-size: 1.9rem;
    }

    .hotelgg-pokhara-home-content {
        padding: 30px 21px 27px;
    }

    .hotelgg-pokhara-home-number {
        top: 18px;
        right: 20px;
    }

}


/* =========================================================
   PREMIUM POKHARA HOME SECTION
========================================================= */

.hotelgg-new-pokhara {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 90px 0;
    background: var(--bg-global);
    color: var(--text-main);
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.hotelgg-new-pokhara__wrapper {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 58%)
        minmax(420px, 42%);

    width: 100%;
    min-height: 550px;
}


/* =========================================================
   IMAGE / VISUAL
   IMPORTANT:
   LEFT EDGE IS COMPLETELY FLUSH
========================================================= */

.hotelgg-new-pokhara__visual {
    position: relative;
    min-height: 550px;
    overflow: hidden;

    border-radius: 0 28px 28px 0;

    background: var(--dark-bg);
}


/* Image */

.hotelgg-new-pokhara__image {
    display: block;

    width: 100%;
    height: 550px;

    object-fit: cover;
    object-position: center;

    transition:
        transform 1.2s cubic-bezier(.2,.65,.2,1),
        filter .8s ease;
}

.hotelgg-new-pokhara__visual:hover
.hotelgg-new-pokhara__image {
    transform: scale(1.035);
}


/* Image overlay */

.hotelgg-new-pokhara__image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.12) 45%,
            rgba(0,0,0,.45) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 30%,
            rgba(0,0,0,.58) 100%
        );

    pointer-events: none;
}


/* =========================================================
   VIDEO BUTTON
========================================================= */

.hotelgg-new-pokhara__video {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 5;

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

    color: #fff;
    text-decoration: none;

    transform:
        translate(-50%, -50%);

    transition:
        transform .4s ease;
}

.hotelgg-new-pokhara__video:hover {
    color: #fff;

    transform:
        translate(-50%, -50%)
        scale(1.05);
}


/* Outer ring */

.hotelgg-new-pokhara__video-ring {
    position: relative;

    display: grid;

    width: 74px;
    height: 74px;

    place-items: center;

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

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

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


/* Animated ring */

.hotelgg-new-pokhara__video-ring::before {
    content: "";

    position: absolute;
    inset: -7px;

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

    animation:
        hotelgg-new-pokhara-pulse
        2.4s ease-in-out infinite;
}


/* Play icon */

.hotelgg-new-pokhara__video-icon {
    display: grid;

    width: 45px;
    height: 45px;

    place-items: center;

    border-radius: 50%;

    color: #161616;
    background: var(--gold-gradient);

    box-shadow:
        0 7px 25px rgba(212,175,55,.28);

    font-size: .85rem;

    transition:
        transform .35s ease,
        background .35s ease;
}

.hotelgg-new-pokhara__video:hover
.hotelgg-new-pokhara__video-icon {
    transform: scale(1.08);

    background: var(--gold-gradient-hover);
}


/* Video text */

.hotelgg-new-pokhara__video-text {
    display: flex;
    flex-direction: column;

    min-width: 150px;
}

.hotelgg-new-pokhara__video-text strong {
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hotelgg-new-pokhara__video-text small {
    margin-top: 3px;

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

    font-size: .61rem;
}


/* Pulse */

@keyframes hotelgg-new-pokhara-pulse {

    0% {
        opacity: .8;
        transform: scale(.95);
    }

    70% {
        opacity: 0;
        transform: scale(1.15);
    }

    100% {
        opacity: 0;
        transform: scale(1.15);
    }

}


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

.hotelgg-new-pokhara__location {
    position: absolute;

    top: 28px;
    left: 30px;

    z-index: 5;

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

    padding: 9px 14px;

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

    color: #fff;

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    font-size: .64rem;
    font-weight: 700;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.hotelgg-new-pokhara__location i {
    color: var(--gold-light);
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.hotelgg-new-pokhara__image-label {
    position: absolute;

    left: 30px;
    bottom: 28px;

    z-index: 5;

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

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

    font-size: .58rem;
    font-weight: 700;

    letter-spacing: .15em;
}

.hotelgg-new-pokhara__image-label div {
    width: 30px;
    height: 1px;

    background: var(--gold);
}

.hotelgg-new-pokhara__image-label span:first-child {
    color: var(--gold-light);

    font-family: 'Playfair Display', 'Cinzel', serif;
    font-size: .8rem;
}


/* =========================================================
   CONTENT PANEL
   OVERLAPS IMAGE
========================================================= */

.hotelgg-new-pokhara__content {
    position: relative;

    z-index: 10;

    align-self: center;

    margin-left: -100px;

    min-height: 480px;

    padding: 48px 50px 45px;

    border:
        1px solid var(--border-soft);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            var(--card-bg),
            var(--bg-global)
        );

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

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* Decorative glow */

.hotelgg-new-pokhara__content::before {
    content: "";

    position: absolute;

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

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: var(--accent-light);

    filter: blur(35px);

    pointer-events: none;
}


/* Decorative gold line */

.hotelgg-new-pokhara__content-decoration {
    position: absolute;

    top: 35px;
    right: 35px;

    width: 38px;
    height: 38px;

    border-top: 1px solid var(--accent-color);
    border-right: 1px solid var(--accent-color);

    opacity: .65;
}


/* =========================================================
   EYEBROW
========================================================= */

.hotelgg-new-pokhara__eyebrow {
    position: relative;

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

    margin-bottom: 16px;

    color: var(--accent-color);

    font-size: .65rem;
    font-weight: 800;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.hotelgg-new-pokhara__eyebrow-line {
    width: 27px;
    height: 1px;

    background: var(--gold-gradient);
}


/* =========================================================
   TITLE
========================================================= */

.hotelgg-new-pokhara__title {
    position: relative;

    max-width: 560px;

    margin: 0 0 14px;

    color: var(--text-main);

   font-family: 'Playfair Display', 'Cinzel', serif;

    font-size: clamp(2.1rem, 3.5vw, 3.25rem);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -.04em;
}

.hotelgg-new-pokhara__title span {
    display: block;

    color: var(--accent-color);
}


/* =========================================================
   SUBTITLE
========================================================= */

.hotelgg-new-pokhara__subtitle {
    position: relative;

    max-width: 560px;

    margin: 0 0 12px;

    color: var(--text-main);

    font-size: .84rem;

    font-weight: 500;

    line-height: 1.7;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hotelgg-new-pokhara__description {
    position: relative;

    max-width: 560px;

    margin: 0;

    color: var(--text-muted);

    font-size: .92rem;

    line-height: 1.75;
}


/* =========================================================
   FEATURES
========================================================= */

.hotelgg-new-pokhara__features {
    position: relative;

    display: grid;

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

    gap: 9px;

    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid var(--border-soft);
}

.hotelgg-new-pokhara__feature {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.hotelgg-new-pokhara__feature-icon {
    display: grid;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    place-items: center;

    border:
        1px solid var(--border-soft);

    border-radius: 50%;

    color: var(--accent-color);

    background:
        var(--accent-light);

    font-size: .65rem;

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

.hotelgg-new-pokhara__feature:hover
.hotelgg-new-pokhara__feature-icon {
    transform: translateY(-3px);

    border-color:
        var(--accent-color);
}

.hotelgg-new-pokhara__feature-content {
    min-width: 0;
}

.hotelgg-new-pokhara__feature-content strong {
    display: block;

    overflow: hidden;

    color: var(--text-main);

    font-size: .64rem;
    font-weight: 800;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.hotelgg-new-pokhara__feature-content small {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: var(--text-muted);

    font-size: .54rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}


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

.hotelgg-new-pokhara__footer {
    position: relative;

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

    margin-top: 22px;
}


/* CTA */

.hotelgg-new-pokhara__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 11px 18px;

    border-radius: 50px;

    color: #171717;

    background:
        var(--gold-gradient);

    box-shadow:
        0 8px 22px rgba(212,175,55,.17);

    font-size: .65rem;
    font-weight: 800;

    letter-spacing: .04em;

    text-decoration: none;

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

.hotelgg-new-pokhara__button:hover {
    color: #111;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(212,175,55,.27);

    background:
        var(--gold-gradient-hover);
}

.hotelgg-new-pokhara__button i {
    transition:
        transform .3s ease;
}

.hotelgg-new-pokhara__button:hover i {
    transform: translateX(4px);
}


/* Trust */

.hotelgg-new-pokhara__trust {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--text-muted);

    font-size: .58rem;
}

.hotelgg-new-pokhara__trust-icon {
    display: grid;

    width: 27px;
    height: 27px;

    place-items: center;

    border-radius: 50%;

    color: var(--accent-color);

    background:
        var(--accent-light);

    font-size: .6rem;
}

.hotelgg-new-pokhara__trust small {
    color: var(--text-muted);
}


/* =========================================================
   LIGHT THEME
========================================================= */

[data-theme="light"] .hotelgg-new-pokhara__content {
    box-shadow:
        0 25px 60px rgba(0,0,0,.10);
}

[data-theme="light"] .hotelgg-new-pokhara__video-ring {
    background:
        rgba(255,255,255,.28);
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .hotelgg-new-pokhara {
        padding: 75px 0;
    }

    .hotelgg-new-pokhara__wrapper {
        grid-template-columns:
            minmax(0, 56%)
            minmax(400px, 44%);
    }

    .hotelgg-new-pokhara__content {
        margin-left: -80px;

        padding:
            42px 40px;
    }

    .hotelgg-new-pokhara__title {
        font-size: 2.65rem;
    }

}


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

@media (max-width: 991.98px) {

    .hotelgg-new-pokhara {
        padding: 65px 0;
    }

    .hotelgg-new-pokhara__wrapper {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }

    .hotelgg-new-pokhara__visual {
        height: 450px;
        min-height: 450px;

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

    .hotelgg-new-pokhara__image {
        height: 450px;
    }

    /*
     * Content still overlaps image,
     * but less aggressively.
     */
    .hotelgg-new-pokhara__content {
        width: calc(100% - 70px);

        margin-top: -75px;
        margin-left: auto;
        margin-right: 35px;

        min-height: auto;

        padding: 40px;
    }

    .hotelgg-new-pokhara__title {
        font-size: 2.55rem;
    }

}


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

@media (max-width: 767.98px) {

    .hotelgg-new-pokhara {
        padding: 50px 0;
    }

    .hotelgg-new-pokhara__visual {
        height: 350px;
        min-height: 350px;

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

    .hotelgg-new-pokhara__image {
        height: 350px;
    }

    .hotelgg-new-pokhara__location {
        top: 20px;
        left: 20px;

        padding: 8px 11px;

        font-size: .58rem;
    }

    .hotelgg-new-pokhara__image-label {
        right: 20px;
        bottom: 20px;

        font-size: .49rem;
    }

    /*
     * Keep the overlap,
     * but make the panel nearly full width.
     */
    .hotelgg-new-pokhara__content {
        width: calc(100% - 30px);

        margin-top: -55px;
        margin-right: 15px;

        padding:
            32px 24px 28px;

        border-radius: 20px;
    }

    .hotelgg-new-pokhara__content-decoration {
        top: 23px;
        right: 23px;

        width: 28px;
        height: 28px;
    }

    .hotelgg-new-pokhara__title {
        font-size: 2.15rem;
    }

    .hotelgg-new-pokhara__subtitle {
        font-size: .85rem;
    }

    .hotelgg-new-pokhara__description {
        font-size: .73rem;
    }

    .hotelgg-new-pokhara__features {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .hotelgg-new-pokhara__feature {
        padding: 5px 0;
    }

    .hotelgg-new-pokhara__footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 13px;
    }

    .hotelgg-new-pokhara__button {
        width: 100%;

        justify-content: center;
    }

    /*
     * Video button becomes more compact.
     */
    .hotelgg-new-pokhara__video-ring {
        width: 62px;
        height: 62px;
    }

    .hotelgg-new-pokhara__video-icon {
        width: 39px;
        height: 39px;

        font-size: .88rem;
    }

    .hotelgg-new-pokhara__video-text strong {
        font-size: .62rem;
    }

    .hotelgg-new-pokhara__video-text small {
        font-size: .54rem;
    }

}


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

@media (max-width: 420px) {

    .hotelgg-new-pokhara__visual {
        height: 300px;
        min-height: 300px;
    }

    .hotelgg-new-pokhara__image {
        height: 300px;
    }

    .hotelgg-new-pokhara__content {
        width: calc(100% - 20px);

        margin-top: -42px;
        margin-right: 10px;

        padding:
            27px 20px 25px;
    }

    .hotelgg-new-pokhara__title {
        font-size: 1.85rem;
    }

    .hotelgg-new-pokhara__video-text {
        display: none;
    }

    .hotelgg-new-pokhara__video {
        left: 50%;
    }

}



/* =========================================================
   PREMIUM SPA & STEAM BATH HOME SECTION
========================================================= */

.hotelgg-new-spa {
    position: relative;
    width: 100%;
    overflow: hidden;

    padding: 90px 0;

    background: var(--bg-global);
    color: var(--text-main);
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.hotelgg-new-spa__wrapper {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(420px, 42%)
        minmax(0, 58%);

    width: 100%;
    min-height: 550px;
}


/* =========================================================
   IMAGE AREA — RIGHT
========================================================= */

.hotelgg-new-spa__visual {
    position: relative;

    min-height: 550px;

    overflow: hidden;

    border-radius:
        28px 0 0 28px;

    background: var(--dark-bg);
}


.hotelgg-new-spa__image {
    display: block;

    width: 100%;
    height: 550px;

    object-fit: cover;
    object-position: center;

    transition:
        transform 1.2s cubic-bezier(.2,.65,.2,1),
        filter .8s ease;
}


.hotelgg-new-spa__visual:hover
.hotelgg-new-spa__image {
    transform: scale(1.035);
}


/* Image overlay */

.hotelgg-new-spa__image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            270deg,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.14) 48%,
            rgba(0,0,0,.48) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 30%,
            rgba(0,0,0,.60) 100%
        );

    pointer-events: none;
}


/* =========================================================
   VIDEO BUTTON
========================================================= */

.hotelgg-new-spa__video {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 5;

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

    color: #fff;
    text-decoration: none;

    transform:
        translate(-50%, -50%);

    transition:
        transform .4s ease;
}


.hotelgg-new-spa__video:hover {
    color: #fff;

    transform:
        translate(-50%, -50%)
        scale(1.05);
}


/* Outer ring */

.hotelgg-new-spa__video-ring {
    position: relative;

    display: grid;

    width: 74px;
    height: 74px;

    place-items: center;

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

    border-radius: 50%;

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

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


/* Animated ring */

.hotelgg-new-spa__video-ring::before {
    content: "";

    position: absolute;

    inset: -7px;

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

    border-radius: 50%;

    animation:
        hotelgg-new-spa-pulse
        2.4s ease-in-out infinite;
}


/* Play */

.hotelgg-new-spa__video-icon {
    display: grid;

    width: 45px;
    height: 45px;

    place-items: center;

    border-radius: 50%;

    color: #161616;

    background:
        var(--gold-gradient);

    box-shadow:
        0 7px 25px rgba(212,175,55,.28);

    font-size: .85rem;

    transition:
        transform .35s ease,
        background .35s ease;
}


.hotelgg-new-spa__video:hover
.hotelgg-new-spa__video-icon {
    transform: scale(1.08);

    background:
        var(--gold-gradient-hover);
}


.hotelgg-new-spa__video-text {
    display: flex;
    flex-direction: column;

    min-width: 150px;
}


.hotelgg-new-spa__video-text strong {
    font-size: .88rem;
    font-weight: 800;

    letter-spacing: .07em;
    text-transform: uppercase;
}


.hotelgg-new-spa__video-text small {
    margin-top: 3px;

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

    font-size: .61rem;
}


@keyframes hotelgg-new-spa-pulse {

    0% {
        opacity: .8;
        transform: scale(.95);
    }

    70% {
        opacity: 0;
        transform: scale(1.15);
    }

    100% {
        opacity: 0;
        transform: scale(1.15);
    }

}


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

.hotelgg-new-spa__location {
    position: absolute;

    top: 28px;
    right: 30px;

    z-index: 5;

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

    padding: 9px 14px;

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

    border-radius: 50px;

    color: #fff;

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    font-size: .64rem;
    font-weight: 700;

    letter-spacing: .09em;
    text-transform: uppercase;
}


.hotelgg-new-spa__location i {
    color: var(--gold-light);
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.hotelgg-new-spa__image-label {
    position: absolute;

    right: 30px;
    bottom: 28px;

    z-index: 5;

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

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

    font-size: .58rem;
    font-weight: 700;

    letter-spacing: .15em;
}


.hotelgg-new-spa__image-label div {
    width: 30px;
    height: 1px;

    background:
        var(--gold);
}


.hotelgg-new-spa__image-label span:first-child {
    color:
        var(--gold-light);

font-family: 'Playfair Display', 'Cinzel', serif;

    font-size: .8rem;
}


/* =========================================================
   CONTENT PANEL
   LEFT SIDE
========================================================= */

.hotelgg-new-spa__content {
    position: relative;

    z-index: 10;

    align-self: center;

    margin-right: -100px;

    min-height: 480px;

    padding:
        48px 50px 45px;

    border:
        1px solid var(--border-soft);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            var(--card-bg),
            var(--bg-global)
        );

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

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* Decorative glow */

.hotelgg-new-spa__content::before {
    content: "";

    position: absolute;

    left: -100px;
    bottom: -100px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        var(--accent-light);

    filter: blur(35px);

    pointer-events: none;
}


/* Corner decoration */

.hotelgg-new-spa__content-decoration {
    position: absolute;

    top: 35px;
    left: 35px;

    width: 38px;
    height: 38px;

    border-top:
        1px solid var(--accent-color);

    border-left:
        1px solid var(--accent-color);

    opacity: .65;
}


/* =========================================================
   EYEBROW
========================================================= */

.hotelgg-new-spa__eyebrow {
    position: relative;

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

    margin-bottom: 16px;

    color:
        var(--accent-color);

    font-size: .65rem;
    font-weight: 800;

    letter-spacing: .18em;
    text-transform: uppercase;
}


.hotelgg-new-spa__eyebrow-line {
    width: 27px;
    height: 1px;

    background:
        var(--gold-gradient);
}


/* =========================================================
   TITLE
========================================================= */

.hotelgg-new-spa__title {
    position: relative;

    max-width: 560px;

    margin: 0 0 18px;

    color:
        var(--text-main);

    font-family: 'Playfair Display', 'Cinzel', serif;

    font-size:
        clamp(2.1rem, 3.5vw, 3.25rem);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -.04em;
}


.hotelgg-new-spa__title span {
    display: block;

    color:
        var(--accent-color);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hotelgg-new-spa__description {
    position: relative;

    max-width: 550px;

    margin: 0;

    color:
        var(--text-muted);

    font-size: .92rem;

    line-height: 1.8;
}


/* =========================================================
   FEATURES
========================================================= */

.hotelgg-new-spa__features {
    position: relative;

    display: grid;

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

    gap: 12px;

    max-width: 540px;

    margin-top: 25px;

    padding-top: 19px;

    border-top:
        1px solid var(--border-soft);
}


.hotelgg-new-spa__feature {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;

    padding: 5px 0;
}


.hotelgg-new-spa__feature-icon {
    display: grid;

    flex: 0 0 39px;

    width: 39px;
    height: 39px;

    place-items: center;

    border:
        1px solid var(--border-soft);

    border-radius: 50%;

    color:
        var(--accent-color);

    background:
        var(--accent-light);

    font-size: .88rem;

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


.hotelgg-new-spa__feature:hover
.hotelgg-new-spa__feature-icon {
    transform:
        translateY(-3px);

    border-color:
        var(--accent-color);
}


.hotelgg-new-spa__feature-content strong {
    display: block;

    color:
        var(--text-main);

    font-size: .7rem;
    font-weight: 800;
}


.hotelgg-new-spa__feature-content small {
    display: block;

    margin-top: 2px;

    color:
        var(--text-muted);

    font-size: .57rem;
}


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

.hotelgg-new-spa__footer {
    position: relative;

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

    margin-top: 25px;
}


/* Button */

.hotelgg-new-spa__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding:
        11px 19px;

    border-radius: 50px;

    color: #171717;

    background:
        var(--gold-gradient);

    box-shadow:
        0 8px 22px rgba(212,175,55,.17);

    font-size: .65rem;
    font-weight: 800;

    letter-spacing: .04em;

    text-decoration: none;

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


.hotelgg-new-spa__button:hover {
    color: #111;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px rgba(212,175,55,.27);

    background:
        var(--gold-gradient-hover);
}


.hotelgg-new-spa__button i {
    transition:
        transform .3s ease;
}


.hotelgg-new-spa__button:hover i {
    transform:
        translateX(4px);
}


/* Trust */

.hotelgg-new-spa__trust {
    display: flex;
    align-items: center;
    gap: 7px;

    color:
        var(--text-muted);

    font-size: .58rem;
}


.hotelgg-new-spa__trust-icon {
    display: grid;

    width: 27px;
    height: 27px;

    place-items: center;

    border-radius: 50%;

    color:
        var(--accent-color);

    background:
        var(--accent-light);

    font-size: .6rem;
}


.hotelgg-new-spa__trust small {
    color:
        var(--text-muted);
}


/* =========================================================
   LIGHT THEME
========================================================= */

[data-theme="light"] .hotelgg-new-spa__content {
    box-shadow:
        0 25px 60px rgba(0,0,0,.10);
}


[data-theme="light"] .hotelgg-new-spa__video-ring {
    background:
        rgba(255,255,255,.28);
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .hotelgg-new-spa {
        padding: 75px 0;
    }

    .hotelgg-new-spa__wrapper {
        grid-template-columns:
            minmax(400px, 44%)
            minmax(0, 56%);
    }

    .hotelgg-new-spa__content {
        margin-right: -80px;

        padding:
            42px 40px;
    }

    .hotelgg-new-spa__title {
        font-size: 2.65rem;
    }

}


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

@media (max-width: 991.98px) {

    .hotelgg-new-spa {
        padding: 65px 0;
    }

    .hotelgg-new-spa__wrapper {
        display: grid;

        grid-template-columns: 1fr;
    }

    .hotelgg-new-spa__visual {
        order: 2;

        height: 450px;
        min-height: 450px;

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

    .hotelgg-new-spa__image {
        height: 450px;
    }

    .hotelgg-new-spa__content {
        order: 1;

        width:
            calc(100% - 70px);

        margin-right: 35px;
        margin-bottom: -75px;

        min-height: auto;

        padding: 40px;

    }

    .hotelgg-new-spa__title {
        font-size: 2.55rem;
    }

}


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

@media (max-width: 767.98px) {

    .hotelgg-new-spa {
        padding: 50px 0;
    }

    .hotelgg-new-spa__visual {
        height: 350px;
        min-height: 350px;

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

    .hotelgg-new-spa__image {
        height: 350px;
    }

    .hotelgg-new-spa__location {
        top: 20px;
        right: 20px;

        padding: 8px 11px;

        font-size: .57rem;
    }

    .hotelgg-new-spa__image-label {
        left: 20px;
        bottom: 20px;

        font-size: .49rem;
    }

    /* Content */

    .hotelgg-new-spa__content {
        width:
            calc(100% - 30px);

        margin-right: 15px;
        margin-bottom: -55px;

        padding:
            32px 24px 28px;

        border-radius: 20px;
    }

    .hotelgg-new-spa__content-decoration {
        top: 23px;
        left: 23px;

        width: 28px;
        height: 28px;
    }

    .hotelgg-new-spa__title {
        font-size: 2.15rem;
    }

    .hotelgg-new-spa__description {
        font-size: .88rem;
    }

    .hotelgg-new-spa__features {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .hotelgg-new-spa__footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 13px;
    }

    .hotelgg-new-spa__button {
        width: 100%;

        justify-content: center;
    }

    /* Video */

    .hotelgg-new-spa__video-ring {
        width: 62px;
        height: 62px;
    }

    .hotelgg-new-spa__video-icon {
        width: 39px;
        height: 39px;

        font-size: .88rem;
    }

    .hotelgg-new-spa__video-text strong {
        font-size: .61rem;
    }

    .hotelgg-new-spa__video-text small {
        font-size: .53rem;
    }

}


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

@media (max-width: 420px) {

    .hotelgg-new-spa__visual {
        height: 300px;
        min-height: 300px;
    }

    .hotelgg-new-spa__image {
        height: 300px;
    }

    .hotelgg-new-spa__content {
        width:
            calc(100% - 20px);

        margin-right: 10px;
        margin-bottom: -42px;

        padding:
            27px 20px 25px;
    }

    .hotelgg-new-spa__title {
        font-size: 1.85rem;
    }

    .hotelgg-new-spa__video-text {
        display: none;
    }

}





/* ============================================================
   PREMIUM PUBLIC VIDEO GALLERY
   ============================================================ */

.hg-public-video-gallery {
    --hg-video-gold: #D4AF37;
    --hg-video-gold-light: #F3E5AB;
    --hg-video-gold-dark: #AA771C;

    --hg-video-navy: #081B33;

   padding: clamp(70px, 9vw, 120px) 20px;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(212,175,55,.08),
            transparent 30%
        ),
        var(--bg-global, #0d0d0d);

    color: var(--text-main, #fff);
}

.hg-public-video-container {
    width: min(1280px, 100%);
    margin: 0 auto;
}

.hg-public-video-heading {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.hg-public-video-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: var(--hg-video-gold);

    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hg-public-video-heading h2 {
    margin: 0 0 15px;

    color: var(--text-main, #fff);

    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.hg-public-video-heading p {
    margin: 0;

    color: var(--text-muted, #9da6b2);

    font-size: 1rem;
    line-height: 1.8;
}

.hg-public-video-grid {
    display: grid;

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

    gap: 26px;
}

.hg-public-video-card {
    overflow: hidden;

    background:
        var(--card-bg, #161616);

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

    border-radius: 20px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.16);

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

.hg-public-video-card:hover {
    transform: translateY(-7px);

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

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

.hg-public-video-media {
    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background:
        #050505;
}

.hg-public-video-player {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hg-public-video-ratio {
    position: relative;

    width: 100%;
    height: 100%;
}

.hg-public-video-ratio iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

.hg-public-video-thumbnail {
    position: absolute;

    inset: 0;

    background-position: center;
    background-size: cover;

    opacity: .08;

    pointer-events: none;
}

.hg-public-video-shine {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent 40%
        );

    opacity: .6;
}

.hg-public-video-content {
    padding: 21px 22px 24px;
}

.hg-public-video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;

    color:
        var(--hg-video-gold);

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hg-public-video-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hg-public-video-featured {
    color:
        var(--hg-video-gold-light);
}

.hg-public-video-content h3 {
    margin: 0 0 9px;

    color:
        var(--text-main, #fff);

    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
}

.hg-public-video-content p {
    margin: 0;

    color:
        var(--text-muted, #9da6b2);

    font-size: .9rem;
    line-height: 1.7;
}

.hg-public-video-empty {
    padding: 70px 20px;

    text-align: center;

    color:
        var(--text-muted, #9da6b2);

    border:
        1px dashed
        rgba(212,175,55,.25);

    border-radius: 20px;
}

.hg-public-video-empty i {
    display: block;

    margin-bottom: 15px;

    color:
        var(--hg-video-gold);

    font-size: 2rem;
}

.hg-public-video-empty p {
    margin: 0;
}


/* ============================================================
   LIGHT THEME
   ============================================================ */

[data-theme="light"] .hg-public-video-gallery {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(212,175,55,.10),
            transparent 30%
        ),
        #f8f7f3;

    color: #081B33;
}

[data-theme="light"] .hg-public-video-heading h2 {
    color: #081B33;
}

[data-theme="light"] .hg-public-video-heading p {
    color: #687282;
}

[data-theme="light"] .hg-public-video-card {
    background: #fff;

    border-color:
        rgba(8,27,51,.08);

    box-shadow:
        0 18px 50px rgba(8,27,51,.08);
}

[data-theme="light"] .hg-public-video-content h3 {
    color: #081B33;
}

[data-theme="light"] .hg-public-video-content p {
    color: #687282;
}


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

@media (max-width: 1100px) {

    .hg-public-video-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .hg-public-video-gallery {
        padding:
            65px 16px;
    }

    .hg-public-video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hg-public-video-heading {
        margin-bottom: 32px;
    }

    .hg-public-video-heading h2 {
        font-size: 2rem;
    }
}




/* ========================================
   MAXIMIZE ICON / LIGHTBOX BUTTON STYLING 
============================================= */

.hg-video-lightbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.65); 
    color: #ffffff; 
    border-radius: 50%; 
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px); 
    margin-right: 10px; 
}


.hg-video-lightbox i {
    font-size: 1.1rem; 
    transition: transform 0.3s ease;
}

.hg-video-lightbox .fa-expand {
  color: #363636;
  display: inline-block; 
  animation: spin-float-scale 3s infinite linear;
}

@keyframes spin-float-scale {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  50% {
    transform: translateY(0) scale(1.4) rotate(180deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(360deg);
  }
}



.hg-video-lightbox:hover {
    background-color: var(--gold); 
    color: #ffffff;
    transform: scale(1.1); 
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); 
}

.hg-video-lightbox:hover i {
    transform: scale(1.1); 
}


.vbox-overlay {
    background: rgba(15, 15, 15, 0.9) !important; 
    backdrop-filter: blur(8px); 
}

.vbox-close {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    top: 25px !important;
    right: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.vbox-close:hover {
    background-color: var(--gold) !important; 
    transform: rotate(90deg) scale(1.1) !important; 
}

.sk-center {
    color: var(--gold) !important; 
}


/* ===============================
   HOMEPAGE ROOM CATEGORY CARDS
  ================================= */

/* ==========================================================================
   HOTEL GURU GRAND
   HOME ROOMS & SUITES
   PREMIUM DARK / LIGHT THEME
   ========================================================================== */

.hotelgg-home-rooms {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 8vw, 125px) 0;
    background:
        radial-gradient(
            circle at 8% 15%,
            var(--accent-light),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 85%,
            var(--accent-light),
            transparent 28%
        ),
        var(--bg-global);
    color: var(--text-main);
    overflow: hidden;
}

/* Subtle luxury texture */
.hotelgg-home-rooms::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.35;
    background-image:
        linear-gradient(
            90deg,
            transparent 49.5%,
            var(--border-soft) 50%,
            transparent 50.5%
        );
    background-size: 180px 180px;
    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 15%,
        black 85%,
        transparent
    );
}


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

.hotelgg-home-rooms__header {
    max-width: 820px;
    margin: 0 auto clamp(42px, 6vw, 68px);
}

.hotelgg-home-rooms .section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 9px 17px;
    margin-bottom: 18px;

    border: 1px solid var(--border-soft);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--accent-light),
            transparent
        );

    color: var(--accent-color);

    font-family: "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 8px 25px rgba(0,0,0,0.04);
}

.hotelgg-home-rooms .section-badge i {
    font-size: 0.95rem;
    color: var(--accent-color);
}

.hotelgg-home-rooms .section-title {
    position: relative;
    margin: 0;

    color: var(--text-main);

    font-family:
        "Playfair Display",
        "Cinzel",
        serif;

    font-size: clamp(2.25rem, 4vw, 4rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.hotelgg-home-rooms .section-title::after {
    content: "";
    display: block;

    width: 58px;
    height: 2px;

    margin: 20px auto 0;

    background: var(--gold-gradient);
    border-radius: 999px;

    box-shadow:
        0 0 15px rgba(212,175,55,0.25);
}

.hotelgg-home-rooms .section-subtitle {
    max-width: 700px;
    margin: 20px auto 0;

    color: var(--text-muted);

    font-family: "Poppins", sans-serif;
    font-size: 0.96rem;
    line-height: 1.9;
}


/* ==========================================================================
   ROOM GRID
   ========================================================================== */

.hotelgg-home-rooms__grid {
    --bs-gutter-y: 28px;
}

.hotelgg-home-rooms__grid > div {
    display: flex;
}


/* ==========================================================================
   CATEGORY CARD
   ========================================================================== */

.hotelgg-category-card {
    position: relative;
    width: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--card-bg),
            color-mix(
                in srgb,
                var(--card-bg) 90%,
                var(--accent-color)
            )
        );

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    color: var(--text-main);

    box-shadow: var(--shadow-smooth);

    transition:
        transform 0.5s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}

.hotelgg-category-card::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,0.45),
            transparent 30%,
            transparent 70%,
            rgba(212,175,55,0.18)
        );

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.5s ease;

    pointer-events: none;
    z-index: 3;
}

.hotelgg-category-card:hover {
    transform: translateY(-9px);

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

    box-shadow:
        var(--shadow-hover),
        0 25px 60px rgba(0,0,0,0.15);
}

.hotelgg-category-card:hover::before {
    opacity: 1;
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.hotelgg-category-card__media {
    position: relative;

    height: clamp(255px, 27vw, 335px);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--dark-bg),
            var(--card-bg)
        );
}

.hotelgg-category-card__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.001);

    transition:
        transform 1.1s cubic-bezier(.2,.7,.2,1),
        filter 0.8s ease;
}

.hotelgg-category-card:hover
.hotelgg-category-card__media img {
    transform: scale(1.075);

    filter:
        saturate(1.08)
        contrast(1.03);
}


/* ==========================================================================
   IMAGE SHADE
   ========================================================================== */

.hotelgg-category-card__shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.62) 0%,
            rgba(0,0,0,0.18) 36%,
            rgba(0,0,0,0.18) 55%,
            rgba(0,0,0,0.82) 100%
        );

    z-index: 1;
}


/* ==========================================================================
   IMAGE GOLD EDGE
   ========================================================================== */

.hotelgg-category-card__media::after {
    content: "";

    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 18px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(243,229,171,0.7),
            transparent
        );

    opacity: 0.65;

    z-index: 2;
}


/* ==========================================================================
   TOP IMAGE CONTENT
   ========================================================================== */

.hotelgg-category-card__top {
    position: absolute;

    top: 18px;
    left: 18px;
    right: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    z-index: 4;
}

.hotelgg-category-card__eyebrow,
.hotelgg-category-card__rooms {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 34px;
    padding: 7px 12px;

    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;

    background:
        rgba(0,0,0,0.32);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: #ffffff;

    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hotelgg-category-card__eyebrow i {
    color: var(--gold-light);
    font-size: 0.66rem;
}

.hotelgg-category-card__rooms {
    color: var(--gold-light);
    white-space: nowrap;
}


/* ==========================================================================
   IMAGE TITLE
   ========================================================================== */

.hotelgg-category-card__image-title {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 25px;

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

    z-index: 4;
}

.hotelgg-category-card__image-line {
    width: 3px;
    height: 34px;

    flex: 0 0 auto;

    border-radius: 999px;

    background: var(--gold-gradient);

    box-shadow:
        0 0 15px rgba(212,175,55,0.35);
}

.hotelgg-category-card__image-title h3 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Playfair Display",
        "Cinzel",
        serif;

    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 600;
    line-height: 1.15;
}


/* ==========================================================================
   BODY
   ========================================================================== */

.hotelgg-category-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 27px 27px 24px;

    background:
        linear-gradient(
            180deg,
            var(--card-bg),
            color-mix(
                in srgb,
                var(--card-bg) 96%,
                var(--accent-color)
            )
        );
}


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

.hotelgg-category-card__heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 13px;
}

.hotelgg-category-card__label {
    display: block;

    margin-bottom: 6px;

    color: var(--accent-color);

    font-family: "Poppins", sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hotelgg-category-card__heading h3 {
    margin: 0;

    color: var(--text-main);

    font-family:
        "Playfair Display",
        "Cinzel",
        serif;

    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.2;
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.hotelgg-category-card__description {
    min-height: 58px;
    margin: 0 0 22px;

    color: var(--text-muted);

    font-family: "Poppins", sans-serif;
    font-size: 0.84rem;
    line-height: 1.75;
}


/* ==========================================================================
   META INFORMATION
   ========================================================================== */

.hotelgg-category-card__meta {
    display: grid;

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

    gap: 10px;

    padding: 14px 0;

    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.hotelgg-category-card__meta-item {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;
}

.hotelgg-category-card__meta-item + .hotelgg-category-card__meta-item {
    padding-left: 12px;
    border-left: 1px solid var(--border-soft);
}

.hotelgg-category-card__meta-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            var(--accent-light),
            transparent
        );

    border: 1px solid var(--border-soft);

    color: var(--accent-color);

    font-size: 0.82rem;
}

.hotelgg-category-card__meta-item small {
    display: block;

    margin-bottom: 2px;

    color: var(--text-muted);

    font-family: "Poppins", sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hotelgg-category-card__meta-item strong {
    display: block;

    color: var(--text-main);

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}


/* ==========================================================================
   AMENITIES
   ========================================================================== */

.hotelgg-category-card__amenities {
    padding-top: 20px;
}

.hotelgg-category-card__amenities-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;
}

.hotelgg-category-card__amenities-heading span {
    height: 1px;
    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--border-soft)
        );
}

.hotelgg-category-card__amenities-heading span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--border-soft),
            transparent
        );
}

.hotelgg-category-card__amenities-heading small {
    flex: 0 0 auto;

    color: var(--text-muted);

    font-family: "Poppins", sans-serif;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* Amenity list */

.hotelgg-category-card__amenity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.hotelgg-category-card__amenity {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    max-width: 100%;

    padding: 6px 9px;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    background:
        var(--accent-light);

    color: var(--text-muted);

    font-family: "Poppins", sans-serif;
    font-size: 0.65rem;
    font-weight: 500;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.hotelgg-category-card__amenity:hover {
    transform: translateY(-2px);

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

    background:
        rgba(212,175,55,0.14);

    color: var(--text-main);
}

.hotelgg-category-card__amenity > i,
.hotelgg-category-card__amenity > svg,
.hotelgg-category-card__amenity img {
    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    color: var(--accent-color);

    object-fit: contain;
}


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

.hotelgg-category-card__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-top: auto;
    padding-top: 23px;
}

.hotelgg-category-card__price {
    min-width: 0;
}

.hotelgg-category-card__price > span {
    display: block;

    margin-bottom: 2px;

    color: var(--text-muted);

    font-family: "Poppins", sans-serif;
    font-size: 0.61rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hotelgg-category-card__price strong {
    color: var(--text-main);

    font-family:
        "Playfair Display",
        "Cinzel",
        serif;

    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1;
}

.hotelgg-category-card__price small {
    margin-left: 4px;

    color: var(--text-muted);

    font-family: "Poppins", sans-serif;
    font-size: 0.66rem;
}

.hotelgg-category-card__contact {
    color: var(--accent-color) !important;
    font-size: 1.35rem !important;
}


/* ==========================================================================
   EXPLORE BUTTON
   ========================================================================== */

.hotelgg-category-card__explore {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 43px;
    padding: 10px 15px;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--accent-light),
            transparent
        );

    color: var(--accent-color);

    text-decoration: none;

    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;

    white-space: nowrap;

    overflow: hidden;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.hotelgg-category-card__explore::before {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--gold-gradient);

    transform: translateX(-105%);

    transition:
        transform 0.45s cubic-bezier(.2,.7,.2,1);

    z-index: -1;
}

.hotelgg-category-card__explore:hover {
    color: #ffffff;

    border-color: transparent;

    transform: translateY(-2px);
}

.hotelgg-category-card__explore:hover::before {
    transform: translateX(0);
}

.hotelgg-category-card__explore i {
    transition:
        transform 0.3s ease;
}

.hotelgg-category-card__explore:hover i {
    transform: translateX(4px);
}


/* ==========================================================================
   ALL ROOMS ACTION
   ========================================================================== */

.hotelgg-home-rooms__action {
    margin-top: clamp(42px, 5vw, 62px);
}

.hotelgg-home-rooms__all-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 54px;
    padding: 14px 24px;

    border: 1px solid var(--border-soft);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--accent-light),
            transparent
        );

    color: var(--text-main);

    text-decoration: none;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;

    overflow: hidden;

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

.hotelgg-home-rooms__all-button::before {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--gold-gradient);

    transform: translateY(105%);

    transition:
        transform 0.45s cubic-bezier(.2,.7,.2,1);

    z-index: -1;
}

.hotelgg-home-rooms__all-button:hover {
    color: #ffffff;

    border-color: transparent;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(212,175,55,0.18);
}

.hotelgg-home-rooms__all-button:hover::before {
    transform: translateY(0);
}

.hotelgg-home-rooms__all-button i {
    color: var(--accent-color);

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}

.hotelgg-home-rooms__all-button:hover i {
    color: #ffffff;
    transform: translateX(5px);
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.hotelgg-home-rooms__empty {
    max-width: 650px;

    margin: 20px auto 0;
    padding: 55px 30px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            var(--card-bg),
            var(--dark-bg)
        );

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    box-shadow: var(--shadow-smooth);
}

.hotelgg-home-rooms__empty-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

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

    border-radius: 50%;

    background:
        var(--accent-light);

    border: 1px solid var(--border-soft);

    color: var(--accent-color);

    font-size: 1.5rem;
}

.hotelgg-home-rooms__empty h3 {
    margin: 0 0 10px;

    color: var(--text-main);

    font-family:
        "Playfair Display",
        "Cinzel",
        serif;

    font-size: 1.6rem;
    font-weight: 600;
}

.hotelgg-home-rooms__empty p {
    max-width: 500px;

    margin: 0 auto;

    color: var(--text-muted);

    font-family: "Poppins", sans-serif;
    font-size: 0.86rem;
    line-height: 1.8;
}


/* ==========================================================================
   LIGHT THEME REFINEMENTS
   ========================================================================== */

[data-theme="light"] .hotelgg-home-rooms {
    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(170,119,28,0.06),
            transparent 32%
        ),
        radial-gradient(
            circle at 95% 90%,
            rgba(170,119,28,0.05),
            transparent 30%
        ),
        var(--bg-global);
}

[data-theme="light"] .hotelgg-category-card {
    box-shadow:
        0 14px 40px rgba(25,20,10,0.07);
}

[data-theme="light"] .hotelgg-category-card:hover {
    box-shadow:
        0 20px 48px rgba(80,55,15,0.12),
        0 8px 25px rgba(170,119,28,0.08);
}

[data-theme="light"] .hotelgg-category-card__body {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fdfbf7 100%
        );
}

[data-theme="light"] .hotelgg-category-card__amenity {
    background:
        rgba(170,119,28,0.055);
}

[data-theme="light"] .hotelgg-category-card__explore {
    background:
        rgba(170,119,28,0.055);
}

[data-theme="light"] .hotelgg-home-rooms::before {
    opacity: 0.2;
}


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

@media (max-width: 1199.98px) {

    .hotelgg-category-card__media {
        height: 290px;
    }

    .hotelgg-category-card__body {
        padding: 24px;
    }

}


@media (max-width: 767.98px) {

    .hotelgg-home-rooms {
        padding:
            70px
            0
            80px;
    }

    .hotelgg-home-rooms__header {
        margin-bottom: 36px;
    }

    .hotelgg-home-rooms .section-title {
        font-size: 2.25rem;
    }

    .hotelgg-home-rooms .section-subtitle {
        padding: 0 12px;

        font-size: 0.84rem;
        line-height: 1.8;
    }

    .hotelgg-category-card__media {
        height: 275px;
    }

    .hotelgg-category-card__body {
        padding: 23px 21px 21px;
    }

    .hotelgg-category-card__description {
        min-height: auto;
    }

}


@media (max-width: 575.98px) {

    .hotelgg-home-rooms {
        padding:
            60px
            0
            70px;
    }

    .hotelgg-home-rooms .section-badge {
        font-size: 0.65rem;
        padding: 8px 14px;
    }

    .hotelgg-home-rooms .section-title {
        font-size: 2rem;
    }

    .hotelgg-home-rooms .section-subtitle {
        font-size: 0.8rem;
    }

    .hotelgg-category-card {
        border-radius: 15px;
    }

    .hotelgg-category-card__media {
        height: 255px;
    }

    .hotelgg-category-card__top {
        top: 14px;
        left: 14px;
        right: 14px;
    }

    .hotelgg-category-card__eyebrow,
    .hotelgg-category-card__rooms {
        min-height: 31px;
        padding: 6px 9px;

        font-size: 0.58rem;
    }

    .hotelgg-category-card__image-title {
        left: 19px;
        right: 19px;
        bottom: 20px;
    }

    .hotelgg-category-card__image-title h3 {
        font-size: 1.4rem;
    }

    .hotelgg-category-card__body {
        padding: 21px 18px 19px;
    }

    .hotelgg-category-card__heading h3 {
        font-size: 1.4rem;
    }

    .hotelgg-category-card__meta {
        grid-template-columns: 1fr;
    }

    .hotelgg-category-card__meta-item + .hotelgg-category-card__meta-item {
        padding-left: 0;
        padding-top: 10px;

        border-left: 0;
        border-top: 1px solid var(--border-soft);
    }

    .hotelgg-category-card__bottom {
        align-items: center;
        gap: 12px;
    }

    .hotelgg-category-card__price strong {
        font-size: 1.4rem;
    }

    .hotelgg-category-card__explore {
        min-height: 40px;
        padding: 8px 12px;

        font-size: 0.64rem;
    }

    .hotelgg-home-rooms__all-button {
        width: 100%;
        max-width: 340px;
    }

}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.hotelgg-category-card__explore:focus-visible,
.hotelgg-home-rooms__all-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}