/* Basic Reset & Root Variables — light (7am–7pm): white, blue, red */
:root {
    --primary-color: #061f3d;
    --secondary-color: #1a7cff;
    --secondary-hover: #0d62d6;
    --accent-red: #e11d48;
    --accent-red-soft: rgba(225, 29, 72, 0.14);
    --accent-red-glow: rgba(225, 29, 72, 0.35);
    --light-gray: #eef3f9;
    --white-color: #fff;
    --muted: #5c6b7f;
    --text-color: #061f3d;
    --page-bg: #f0f5fb;
    --page-bg-2: #e8f0fa;
    --glass-bg: rgba(255, 255, 255, 0.52);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-highlight: rgba(26, 124, 255, 0.12);
    --icon-tile-bg: linear-gradient(135deg, rgba(225, 29, 72, 0.12), rgba(26, 124, 255, 0.08));
    --font-primary: 'Lora', serif;
    --font-secondary: 'Montserrat', sans-serif;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 12px rgba(6, 31, 61, 0.06);
    --shadow-md: 0 14px 40px rgba(6, 31, 61, 0.1);
    --shadow-lg: 0 24px 60px rgba(6, 31, 61, 0.14);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
}

/* Dark (7pm–7am): deep glass, cool white text, blue + red accents */
[data-theme="dark"] {
    --light-gray: #141c2c;
    --muted: #94a3b8;
    --text-color: #e8eef7;
    --page-bg: #0b101c;
    --page-bg-2: #0f172a;
    --glass-bg: rgba(22, 32, 52, 0.55);
    --glass-bg-strong: rgba(28, 40, 64, 0.72);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(26, 124, 255, 0.18);
    --icon-tile-bg: linear-gradient(135deg, rgba(225, 29, 72, 0.22), rgba(26, 124, 255, 0.12));
    --shadow-sm: 0 2px 16px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

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

html {
    scroll-behavior: smooth;
    background-color: var(--page-bg);
    min-height: 100%;
}

/* Fluid mesh background (both themes) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 100% 80% at 0% -20%, rgba(26, 124, 255, 0.18), transparent 55%),
        radial-gradient(ellipse 80% 60% at 100% 10%, rgba(225, 29, 72, 0.12), transparent 50%),
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 60%),
        linear-gradient(165deg, var(--page-bg) 0%, var(--page-bg-2) 100%);
    background-size: 100% 100%, 100% 100%, 120% 120%, 100% 100%;
    animation: meshDrift 22s var(--ease-out) infinite alternate;
    pointer-events: none;
}

@keyframes meshDrift {
    0% {
        background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%;
        filter: saturate(1);
    }
    100% {
        background-position: 8% 4%, 92% 8%, 48% 96%, 0% 0%;
        filter: saturate(1.08);
    }
}

[data-theme="dark"] body::before {
    background:
        radial-gradient(ellipse 90% 70% at 10% 0%, rgba(26, 124, 255, 0.22), transparent 55%),
        radial-gradient(ellipse 70% 50% at 95% 20%, rgba(225, 29, 72, 0.14), transparent 50%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(30, 58, 138, 0.2), transparent 55%),
        linear-gradient(165deg, var(--page-bg) 0%, var(--page-bg-2) 100%);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body::before {
        animation: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--secondary-color), #3d7eea);
    color: var(--white-color);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: top 0.25s var(--ease-out);
}

.skip-link:focus {
    top: 1rem;
    outline: 2px solid var(--white-color);
    outline-offset: 2px;
}

body {
    font-family: var(--font-secondary);
    line-height: 1.65;
    color: var(--text-color);
    background-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: color 0.5s var(--ease-out);
}

/* Navigation Bar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(6, 31, 61, 0.55) 100%);
    background-color: rgba(6, 31, 61, 0.58);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.45s var(--ease-out), padding 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), backdrop-filter 0.45s var(--ease-out);
}

.navbar.scrolled {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(6, 31, 61, 0.88) 100%);
    background-color: rgba(6, 31, 61, 0.9);
    box-shadow: var(--shadow-sm);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    padding: 0.65rem clamp(1rem, 4vw, 2.5rem);
}

[data-theme="dark"] .navbar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(8, 12, 24, 0.65) 100%);
    background-color: rgba(8, 12, 24, 0.62);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .navbar.scrolled {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(8, 12, 24, 0.92) 100%);
    background-color: rgba(6, 10, 20, 0.92);
}

.nav-logo {
    color: var(--white-color);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-logo img {
    height: 60px; /* Increased from 40px */
    width: auto;
    vertical-align: middle;
    transition: height 0.4s ease;
}

.navbar.scrolled .nav-logo img {
    height: 40px; /* Shrink logo on scroll */
}

.nav-menu {
    display: flex;
    list-style: none;
}

.nav-item {
    margin-left: 1.5rem;
    position: relative; /* For dropdown positioning */
}

.nav-link {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    position: relative;
    transition: color 0.3s var(--ease-out);
}

.nav-link:hover {
    color: var(--white-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-red));
    transition: width 0.35s var(--ease-out);
}

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

.nav-link-button {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #3d94ff 70%, rgba(225, 29, 72, 0.35) 100%);
    color: var(--white-color);
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 14px rgba(26, 124, 255, 0.35);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}

.nav-link-button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(26, 124, 255, 0.4);
}

.nav-link-button:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
}

.dropdown-toggle {
    color: var(--white-color);
    padding-left: 0.5rem;
    cursor: pointer;
    display: inline-flex; /* To align icon vertically */
}

/* Dropdown Menu */
.dropdown-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: var(--primary-color);
    min-width: 220px;
    box-shadow: var(--shadow-md);
    z-index: 1;
    list-style: none;
    padding: 0.5rem 0;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0; /* Adjust for transform */
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.dropdown-content a {
    color: var(--white-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: background-color 0.3s ease;
}

.dropdown-content a:hover {
    background-color: var(--secondary-color);
}

.nav-item:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    position: relative; /* Needed for absolute children */
    overflow: hidden; /* Hide parts of slides during Ken Burns effect */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white-color);
    padding: 0 1rem;
}

.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.6s var(--ease-out), transform 12s ease-out;
}

.hero-slideshow .slide.active {
    opacity: 1;
    transform: scale(1);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, rgba(6, 31, 61, 0.75) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.65) 100%);
    z-index: 2;
}

.hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 4vw + 1rem, 3.75rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.12;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
    animation: heroTitleIn 1s var(--ease-out) both;
}

.hero-content {
    position: relative; /* To bring it above the overlay */
    z-index: 3;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.hero-subtitle {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.35rem);
    margin-bottom: 2rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.04em;
    animation: heroSubtitleIn 1s var(--ease-out) 0.15s both;
}

.hero-content .btn-primary {
    animation: heroSubtitleIn 1s var(--ease-out) 0.3s both;
}

@keyframes heroTitleIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroSubtitleIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn {
    text-decoration: none;
    padding: 0.95rem 1.85rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-block;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), filter 0.35s var(--ease-out);
}

.btn:focus-visible {
    outline: 2px solid var(--white-color);
    outline-offset: 3px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--secondary-color), #4a9fff);
    color: var(--white-color);
    box-shadow: 0 6px 24px rgba(26, 124, 255, 0.4);
}

.btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(26, 124, 255, 0.45);
}

/* General Content Sections */
.content-section {
    padding: clamp(3rem, 8vw, 5.5rem) clamp(1rem, 4vw, 2.5rem);
    overflow-x: hidden; /* Prevent horizontal scrollbar from animations */
    text-align: center;
}

.section-title {
    font-family: var(--font-primary);
    font-size: clamp(1.75rem, 2vw + 1.25rem, 2.65rem);
    margin-bottom: 0.35rem;
    color: var(--text-color);
    position: relative;
    display: inline-block;
    padding-bottom: 1rem;
    transition: color 0.45s var(--ease-out);
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-red));
}

.bg-light {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

/* Footer */
.main-footer {
    background: linear-gradient(180deg, #051a33 0%, var(--primary-color) 55%, #0a1a32 100%);
    color: var(--white-color);
    text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
}

.main-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), var(--accent-red), transparent);
    opacity: 0.85;
    pointer-events: none;
}

.footer-inner {
    max-width: 720px;
    margin: 0 auto;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.5rem;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.25s var(--ease-out);
}

.footer-nav a:hover {
    color: var(--white-color);
}

.footer-copy {
    font-size: 0.95rem;
    opacity: 0.92;
}

.main-footer .powered-by {
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- New Styles --- */

/* Generic Page Header (for sub-pages) */
.page-header {
    min-height: 38vh;
    padding: clamp(5rem, 12vh, 7rem) 1rem clamp(2.5rem, 6vh, 4rem);
    background: linear-gradient(135deg, rgba(6, 31, 61, 0.82) 0%, rgba(0, 0, 0, 0.55) 100%), url('images/view1.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white-color);
}

.page-header .page-title {
    font-family: var(--font-primary);
    font-size: clamp(1.85rem, 3vw + 1rem, 3rem);
    animation: fadeInDown 0.9s var(--ease-out) both;
}

/* About Page: Two-column layout */
.about-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    text-align: left;
    max-width: 1100px;
    margin: 0 auto;
}

.about-image, .about-text {
    flex: 1;
}

.about-text p {
    color: var(--muted);
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Rooms Page: Card Layout */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto 0;
}

.room-card {
    background: var(--glass-bg-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-align: left;
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out), background 0.45s var(--ease-out);
}

.room-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(26, 124, 255, 0.1);
    border-color: rgba(26, 124, 255, 0.22);
}

.room-card img {
    width: 100%;
    height: clamp(200px, 28vw, 240px);
    object-fit: cover;
    transition: transform 0.6s var(--ease-out);
}

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

.room-card-content {
    padding: 1.5rem;
}

.room-card-content h3 {
    font-family: var(--font-primary);
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.room-card-content h3 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.room-card-content h3 a:hover {
    color: var(--secondary-color);
}

.room-card-content .price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.room-card-content p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--muted);
}

/* Room Detail Page */
.room-detail-container {
    display: flex;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.room-detail-gallery {
    flex: 1.5;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.room-detail-gallery img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
}

.fade-in-section.is-visible .room-detail-gallery img {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.fade-in-section.is-visible .room-detail-gallery img:nth-child(2) {
    transition-delay: 0.2s;
}

.fade-in-section.is-visible .room-detail-gallery img:nth-child(3) {
    transition-delay: 0.4s;
}

.room-detail-gallery img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.room-detail-info {
    flex: 1;
}

.room-detail-info ul {
    list-style: none;
    margin-top: 1.5rem;
    padding: 0;
}

.room-detail-info ul li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    color: var(--text-color);
}

.room-detail-info ul li i {
    color: var(--accent-red);
    margin-right: 1rem;
    font-size: 1.05rem;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 10px;
    background: var(--icon-tile-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.room-detail-info .section-title {
    color: var(--text-color);
}

.room-detail-info > p {
    color: var(--muted);
}

/* Facilities Page: Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 2rem auto 0;
}

.services-grid > a {
    text-decoration: none;
    color: var(--text-color);
    display: block;
}

.service-card {
    background: var(--glass-bg-strong);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    backdrop-filter: blur(16px) saturate(165%);
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out), background 0.45s var(--ease-out);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(26, 124, 255, 0.12);
    border-color: rgba(26, 124, 255, 0.28);
}

.service-card i {
    font-size: 1.85rem;
    color: var(--accent-red);
    margin-bottom: 1.35rem;
    background: var(--icon-tile-bg);
    width: 76px;
    height: 76px;
    line-height: 76px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.45s var(--ease-out), background 0.45s var(--ease-out), color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

.service-card:hover i {
    background: linear-gradient(135deg, var(--accent-red), #fb7185);
    color: var(--white-color);
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.06) rotate(-2deg);
    box-shadow: 0 12px 32px var(--accent-red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.service-card h3 {
    font-family: var(--font-primary);
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

/* Contact Page */
.contact-container {
    display: flex;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.contact-info, .contact-form {
    flex: 1;
}

.contact-info h3 {
    font-family: var(--font-primary);
    margin-bottom: 1rem;
    color: var(--text-color);
}

.contact-info p {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    color: var(--text-color);
}

.contact-info i {
    color: var(--accent-red);
    margin-right: 1rem;
    font-size: 1rem;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 12px;
    background: var(--icon-tile-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-secondary);
    font-size: 1rem;
    background: var(--glass-bg-strong);
    color: var(--text-color);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.45s var(--ease-out);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgba(26, 124, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(26, 124, 255, 0.15), 0 0 0 1px rgba(225, 29, 72, 0.12);
}

/* Availability Form */
.availability-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem;
    max-width: 900px;
    margin: 2rem auto 0;
    background: var(--glass-bg-strong);
    padding: 0.65rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}

.availability-form .form-group {
    flex: 1 1 150px; /* Flex-grow, flex-shrink, basis */
    margin-bottom: 0;
    text-align: left;
}

.availability-form .form-group label {
    margin-bottom: 0.1rem;
}

.availability-form .form-group input {
    padding: 0.3rem;
}

/* Map Section */
.map-container {
    max-width: 1100px;
    margin: 2rem auto 0;
    border-radius: var(--radius-md);
    overflow: hidden; /* To apply border-radius to iframe */
    box-shadow: var(--shadow-md);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.map-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
    vertical-align: middle; /* Removes bottom space under iframe */
}

/* Photo Gallery */
.gallery-slideshow-container {
    width: min(100%, 1200px);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: min(70vh, 640px);
    margin-top: 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* Hide the images by default */
.gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
    transform: scale(1.02);
}

.gallery-slide.active {
    opacity: 1;
    transform: scale(1);
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
}

/* Caption text */
.gallery-caption {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    padding: 15px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: var(--white-color);
}

/* The dots/bullets/indicators */
.gallery-dots {
    margin-top: 1.25rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.gallery-dot {
    cursor: pointer;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(6, 31, 61, 0.2);
    display: inline-block;
    transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), width 0.3s var(--ease-out);
}

.gallery-dot.active {
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-red));
    transform: scale(1.15);
    width: 26px;
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(26, 124, 255, 0.35);
}

/* Next & previous buttons */
.gallery-prev, .gallery-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Position the "next button" to the right */
.gallery-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.gallery-prev:hover, .gallery-next:hover {
  background-color: rgba(0,0,0,0.8);
}

.gallery-dot:hover:not(.active) {
    background: rgba(6, 31, 61, 0.35);
}

/* Detail Page Slideshow */
.detail-slideshow-container {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--glass-border);
}

.room-detail-container > .detail-slideshow-container {
    flex: 1.5; /* Make it take the gallery space in the flex layout */
    height: 500px;
}

.detail-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.0s ease-in-out;
}

.detail-slide.active {
    opacity: 1;
}

.detail-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Next & previous buttons for detail slideshow */
.detail-prev, .detail-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.detail-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.detail-prev:hover, .detail-next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered grid items when section enters view */
.fade-in-section .services-grid > *,
.fade-in-section .rooms-grid > * {
    opacity: 0;
    transform: translateY(22px);
}

.fade-in-section.is-visible .services-grid > *,
.fade-in-section.is-visible .rooms-grid > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.fade-in-section.is-visible .services-grid > *:nth-child(1),
.fade-in-section.is-visible .rooms-grid > *:nth-child(1) { transition-delay: 0.05s; }
.fade-in-section.is-visible .services-grid > *:nth-child(2),
.fade-in-section.is-visible .rooms-grid > *:nth-child(2) { transition-delay: 0.1s; }
.fade-in-section.is-visible .services-grid > *:nth-child(3),
.fade-in-section.is-visible .rooms-grid > *:nth-child(3) { transition-delay: 0.15s; }
.fade-in-section.is-visible .services-grid > *:nth-child(4),
.fade-in-section.is-visible .rooms-grid > *:nth-child(4) { transition-delay: 0.2s; }
.fade-in-section.is-visible .services-grid > *:nth-child(5),
.fade-in-section.is-visible .rooms-grid > *:nth-child(5) { transition-delay: 0.25s; }
.fade-in-section.is-visible .services-grid > *:nth-child(6),
.fade-in-section.is-visible .rooms-grid > *:nth-child(6) { transition-delay: 0.3s; }
.fade-in-section.is-visible .services-grid > *:nth-child(7),
.fade-in-section.is-visible .rooms-grid > *:nth-child(7) { transition-delay: 0.35s; }
.fade-in-section.is-visible .services-grid > *:nth-child(8),
.fade-in-section.is-visible .rooms-grid > *:nth-child(8) { transition-delay: 0.4s; }
.fade-in-section.is-visible .services-grid > *:nth-child(9),
.fade-in-section.is-visible .rooms-grid > *:nth-child(9) { transition-delay: 0.45s; }
.fade-in-section.is-visible .services-grid > *:nth-child(10),
.fade-in-section.is-visible .rooms-grid > *:nth-child(10) { transition-delay: 0.5s; }
.fade-in-section.is-visible .services-grid > *:nth-child(11),
.fade-in-section.is-visible .rooms-grid > *:nth-child(11) { transition-delay: 0.55s; }
.fade-in-section.is-visible .services-grid > *:nth-child(12),
.fade-in-section.is-visible .rooms-grid > *:nth-child(12) { transition-delay: 0.6s; }

/* Mobile Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999; /* Below navbar (1000) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Responsive Design */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--white-color);
}

@media(max-width: 992px) {
    .nav-link::after {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .navbar {
        padding: 0.8rem 1.5rem;
    }

    .nav-logo img {
        height: 32px;
    }

    .nav-menu {
        position: fixed;
        left: -280px;
        top: 0;
        flex-direction: column;
        background-color: rgba(0, 35, 71, 0.9);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        width: 280px;
        height: 100vh;
        overflow-y: auto;
        text-align: left;
        transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
        padding: 80px 1.5rem 2rem 1.5rem;
        z-index: 1001; /* Ensure above overlay */
    }

    .nav-menu.active {
        left: 0;
    }

    /* Staggered Navigation Animation */
    .nav-item {
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        opacity: 0;
        transform: translateX(-30px);
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        text-align: center;
    }

    .nav-menu.active .nav-item {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-link {
        display: block;
        padding: 1rem 0;
        font-size: 1.1rem;
        width: 100%;
    }

    .nav-link-button {
        display: inline-block;
        text-align: center;
        margin: 1.5rem 0;
    }

    /* Animation Delays */
    .nav-menu.active .nav-item:nth-child(1) { transition-delay: 0.1s; }
    .nav-menu.active .nav-item:nth-child(2) { transition-delay: 0.2s; }
    .nav-menu.active .nav-item:nth-child(3) { transition-delay: 0.3s; }
    .nav-menu.active .nav-item:nth-child(4) { transition-delay: 0.4s; }
    .nav-menu.active .nav-item:nth-child(5) { transition-delay: 0.5s; }
    .nav-menu.active .nav-item:nth-child(6) { transition-delay: 0.6s; }

    /* Scale animation for cards on scroll in mobile */
    .room-card, .service-card {
        transition: transform 0.5s ease;
    }

    .nav-logo {
        font-size: 1.2rem;
    }

    .nav-item.dropdown {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: relative;
    }

    .dropdown-toggle {
        position: absolute;
        right: 0;
        top: 0;
        padding: 0;
        width: 50px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Style the dropdown container for mobile */
    .dropdown-content {
        position: static;
        display: block; /* Let max-height control visibility */
        max-height: 0;
        overflow: hidden;
        background-color: transparent;
        box-shadow: none;
        width: 100%;
        padding: 0;
        margin-top: 0;
        border-radius: 0;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        /* Fix: Reset desktop styles for mobile view */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Expand the dropdown when parent is active */
    .nav-item.dropdown.active > .dropdown-content {
        max-height: 1000px; /* Increased to ensure all items are visible */
        padding: 0 0 1rem 0;
        background-color: rgba(0, 0, 0, 0.2);
    }

    /* Rotate caret on active dropdown */
    .nav-item.dropdown.active .dropdown-toggle i {
        transform: rotate(180deg);
    }

    .dropdown-toggle i {
        font-size: 1rem;
        transition: transform 0.4s ease;
    }

    .about-container {
        flex-direction: column;
    }

    .contact-container {
        flex-direction: column;
    }

    /* Indent sub-menu items */
    .dropdown-content a {
        padding-left: 1.5rem;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Fix gap in availability form on mobile */
    .availability-form {
        gap: 0.45rem;
        padding: 0.65rem;
    }

    .availability-form .form-group label {
        font-size: 0.78rem;
        margin-bottom: 0.15rem;
    }

    .availability-form .form-group input {
        padding: 0.45rem 0.5rem;
        font-size: 0.9rem;
    }

    /* Shorter hero so guests see content sooner */
    .hero {
        min-height: 78dvh;
        min-height: 78vh;
    }

    .hero-title {
        font-size: clamp(1.35rem, 5.5vw, 1.85rem);
    }

    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.35rem;
    }

    .hero-content .btn-primary {
        padding: 0.75rem 1.35rem;
        font-size: 0.88rem;
    }

    .content-section {
        padding: 2.15rem 0.85rem;
    }

    .section-title {
        font-size: 1.5rem;
        padding-bottom: 0.65rem;
        margin-bottom: 0.25rem;
    }

    .section-title::after {
        width: 42px;
        height: 3px;
    }

    /* Homepage: dense 2-column services (less vertical scroll) */
    main > section.hero + section.content-section .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.55rem;
        margin-top: 0.75rem;
    }

    main > section.hero + section.content-section .service-card {
        padding: 0.65rem 0.4rem;
        border-radius: var(--radius-sm);
    }

    main > section.hero + section.content-section .service-card i {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 1.1rem;
        margin-bottom: 0.35rem;
        border-radius: 12px;
    }

    main > section.hero + section.content-section .service-card h3 {
        font-family: var(--font-secondary);
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 0;
        letter-spacing: 0.02em;
    }

    main > section.hero + section.content-section.fade-in-section.is-visible .services-grid > * {
        transition-delay: 0s !important;
    }

    /* Facilities page: 2-column tiles, shorter copy */
    main > header.page-header + section.content-section .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem 0.6rem;
        margin-top: 0.75rem;
    }

    main > header.page-header + section.content-section .service-card {
        padding: 0.72rem 0.5rem;
        border-radius: var(--radius-sm);
    }

    main > header.page-header + section.content-section .service-card i {
        width: 48px;
        height: 48px;
        line-height: 48px;
        font-size: 1.15rem;
        margin-bottom: 0.4rem;
        border-radius: 12px;
    }

    main > header.page-header + section.content-section .service-card h3 {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
        line-height: 1.2;
    }

    main > header.page-header + section.content-section .service-card p {
        font-size: 0.68rem;
        line-height: 1.35;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    main > header.page-header + section.content-section.fade-in-section.is-visible .services-grid > * {
        transition-delay: 0s !important;
    }

    /* Rooms page: tighter “Book your stay” band */
    section.bg-light.content-section > p {
        font-size: 0.88rem;
        line-height: 1.45;
        margin-bottom: 0.65rem;
    }

    section.bg-light.content-section .section-title {
        margin-bottom: 0.35rem;
    }

    .page-header {
        min-height: unset;
        height: auto;
        padding: clamp(4.25rem, 11vw, 5rem) 1rem 1.35rem;
    }

    .page-header .page-title {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
    }

    .map-container iframe {
        height: 280px;
    }

    .footer-inner {
        max-width: 100%;
    }

    .footer-nav {
        gap: 0.35rem 0.75rem;
        margin-bottom: 1.1rem;
    }

    .footer-nav a {
        font-size: 0.82rem;
    }

    .main-footer {
        padding: 1.65rem 0.85rem;
    }

    .gallery-slideshow-container {
        height: min(44vh, 340px);
        width: 100%;
        border-radius: var(--radius-md);
    }

    .gallery-caption {
        font-size: 1.05rem;
        padding: 10px 12px;
    }

    .about-container,
    .contact-container {
        gap: 1.35rem;
    }

    .contact-info p {
        font-size: 0.9rem;
        margin-bottom: 0.65rem;
    }

    .form-group {
        margin-bottom: 1.1rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.65rem 0.75rem;
        font-size: 0.95rem;
    }
}

@media(max-width: 992px) {
    .room-detail-container {
        flex-direction: column;
    }

    .room-detail-container > .detail-slideshow-container {
        height: 300px; /* Adjust height for mobile */
        flex: auto; /* Reset flex for stacked layout */
    }

    /* Room details: amenity list in two columns, less scrolling */
    .room-detail-info ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem 0.65rem;
        margin-top: 1rem;
    }

    .room-detail-info ul li {
        font-size: 0.82rem;
        margin-bottom: 0;
        align-items: flex-start;
        line-height: 1.3;
    }

    .room-detail-info ul li i {
        margin-right: 0.4rem;
        font-size: 0.95rem;
        width: 18px;
        margin-top: 0.1em;
    }

    .room-detail-info > p {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .room-detail-info .section-title {
        font-size: 1.35rem;
        padding-bottom: 0.5rem;
    }
}

/* Narrow phones: swipeable room cards */
@media (max-width: 640px) {
    .rooms-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.7rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0.25rem 0.35rem 0.65rem;
        margin-left: -0.35rem;
        margin-right: -0.35rem;
        width: calc(100% + 0.7rem);
        max-width: none;
        scrollbar-width: thin;
    }

    .rooms-grid::-webkit-scrollbar {
        height: 5px;
    }

    .rooms-grid::-webkit-scrollbar-thumb {
        background: rgba(6, 31, 61, 0.25);
        border-radius: 999px;
    }

    .rooms-grid .room-card {
        flex: 0 0 min(86vw, 300px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .fade-in-section.is-visible .rooms-grid > * {
        transition-delay: 0s !important;
    }

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

    .room-card-content {
        padding: 0.75rem 0.8rem;
    }

    .room-card-content h3 {
        font-size: 0.95rem;
    }

    .room-card-content .price {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
    }

    .room-card-content p {
        font-size: 0.76rem;
        line-height: 1.4;
        margin-bottom: 0.55rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .room-card .btn-primary {
        padding: 0.6rem 0.85rem;
        font-size: 0.8rem;
        width: 100%;
        text-align: center;
    }

    .room-detail-container > .detail-slideshow-container {
        height: 210px !important;
    }

    section.bg-light.content-section {
        padding-top: 1.35rem !important;
        padding-bottom: 1.35rem !important;
    }
}

@media (hover: none) and (max-width: 992px) {
    .room-card:active,
    .service-card:active {
        transform: none;
    }

    .room-card:hover,
    .service-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    .room-card:hover img {
        transform: none;
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: linear-gradient(145deg, var(--secondary-color), #2563eb);
    color: var(--white-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    transition: all 0.4s ease;
    z-index: 999;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 24px rgba(26, 124, 255, 0.35), 0 0 0 1px rgba(225, 29, 72, 0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: linear-gradient(135deg, var(--secondary-hover), var(--secondary-color));
    transform: scale(1.08);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--white-color);
    outline-offset: 3px;
}

.contact-form h3 {
    color: var(--text-color);
}

/* Crisper icon rendering */
.fa-solid,
.fa-brands {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

/* Dark theme: drawer, overlay, dropdowns */
[data-theme="dark"] .nav-menu {
    background-color: rgba(10, 15, 28, 0.94) !important;
    box-shadow: 5px 0 28px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .menu-overlay {
    background: rgba(0, 0, 0, 0.68);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

[data-theme="dark"] .dropdown-content {
    background-color: rgba(14, 20, 36, 0.96);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .skip-link {
    background: linear-gradient(135deg, var(--accent-red), #fb7185);
}

[data-theme="dark"] .btn-primary {
    box-shadow: 0 6px 24px rgba(26, 124, 255, 0.35), 0 0 0 1px rgba(225, 29, 72, 0.2);
}

[data-theme="dark"] .gallery-dot:not(.active) {
    background: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .gallery-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.28);
}