/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   00. SETTINGS & THEME
       - CSS Variables (Colors, Fonts)
   01. GENERIC & RESETS
       - Box-sizing Reset
       - Global Styles (html, body)
   02. BASE STYLES
       - Typography (h1, h2, h3, p)
       - Links, Images
   03. LAYOUT
       - Section Wrappers
       - Header & Navigation
       - Footer
   04. COMPONENTS
       - Buttons (CTA, Secondary, Slider, Modal Close)
       - Cards (Room Card, Room Detail, Attraction Card)
       - Dropdown (Language)
       - Modal (Overlay, Container, Booking List, Policies List)
       - Slider (Review Slider, Room Slider)
       - Lightbox (Gallery Page)
       - Forms (Contact Form)
       - Miscellaneous Components (Social Media, Awards, etc.)
   05. PAGE-SPECIFIC STYLES
       - Homepage (Hero, About, Rooms Preview, Amenities, Video, etc.)
       - Inner Pages (Page Hero, Spa, Contact, Gallery, Tourism)
   06. UTILITIES
       - Animations (@keyframes)
   07. MEDIA QUERIES
       - Tablet Breakpoint (min-width: 768px)
       - Desktop Breakpoint (min-width: 1024px)
   ========================================================================== */


/* ==========================================================================
   00. SETTINGS & THEME
   ========================================================================== */
:root {
    /*Reserve space for the scrollbar. 
    This tells the browser to keep the scrollbar gutter, 
    a stable width, whether or not the content is currently scrollable, 
    which eliminates the layout shift. */
    scrollbar-gutter: stable;

    --primary-color: #2C3E2A; /* Forest Green */
    --secondary-color: #F5F5DC; /* Beige/Off-white */
    --accent-color: #C3A38A; /* Muted Gold */
    --font-headings: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --brand-font: 'Imperial Script', cursive;
}


/* ==========================================================================
   01. GENERIC & RESETS
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--primary-color);
    color: var(--secondary-color);
    line-height: 1.6;
}

/* Prevents background from scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}


/* ==========================================================================
   02. BASE STYLES
   ========================================================================== */
h1, h2, h3 {
    font-family: var(--font-headings);
    font-weight: 700;
    color: var(--secondary-color);
}

h1 { font-size: clamp(2.5rem, 1.821rem + 3.393vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 1.457rem + 1.714vw, 2.5rem); }
h3 { font-size: 1.5rem; }

p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

a {
    color: var(--secondary-color);
    text-decoration: none;
}

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


/* ==========================================================================
   03. LAYOUT
   ========================================================================== */
section {
    padding: 4rem 5%;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

/* --- Header & Navigation --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(44, 62, 42, 0.8);
    backdrop-filter: blur(10px);
    transition: background-color 0.3s ease;
}

.header.scrolled {
    background-color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Creates space between the logo and the text */
    font-family: var(--brand-font);
    font-size: 1rem;
    font-weight: 400;
    position: relative;
    z-index: 10;
}

.logo-img {
    /*height: 60px;*/ /* Sets the logo height as requested */
    width: auto;  /* Maintains the aspect ratio */
    display: block;
    width: 46px;
}

.logo-text {
    display: none;
}

.nav-menu {
    position: fixed;
    left: -100%;
    top: 0;
    flex-direction: column;
    justify-content: center;
    background-color: var(--primary-color);
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: left 0.3s ease-in-out;
    list-style: none;
    gap: 0;
    padding-top: 65px;
}

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

.nav-item {
    width: 100%;
}
    
.nav-link {
    display: block;
    padding: 1.5rem 0;
    font-size: 1.2rem;
}
    
.nav-link.cta-button {
    margin: 1rem auto;
    width: 50%;
}

.nav-link.active {
    color: var(--accent-color);
    font-weight: bold;
    /*text-decoration: underline;*/ /* Optional: adds an underline */
}

.hamburger {
    display: block;
    cursor: pointer;
    z-index: 10;
    border: none;
    background: transparent;
}

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

.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); }

/* --- Footer --- */
.footer {
    background-color: #1a2419;
    padding: 4rem 5% 2rem;
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
    text-align: center;
}

.footer-column h4 {
    font-family: var(--font-headings);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 0.5rem;
}

.footer-column a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #4a5c48;
    padding-top: 2rem;
}


/* ==========================================================================
   04. COMPONENTS
   ========================================================================== */

/* --- Buttons --- */
.cta-button,
button.cta-button {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--primary-color);
    padding: 12px 24px;
    font-weight: 700;
    border: 2px solid var(--accent-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.cta-button:hover,
button.cta-button:hover {
    background-color: transparent;
    color: var(--accent-color);
}

.secondary-button,
button.secondary-button {
    display: inline-block;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 20px;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: transparent;
    cursor: pointer;
}

.secondary-button:hover,
button.secondary-button:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--primary-color);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
.modal-close-btn:hover {
    color: #000;
    transform: rotate(90deg);
}

.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    padding: 1rem;
    z-index: 3001;
    transition: color 0.2s ease;
}
.lightbox-btn:hover { color: var(--accent-color); }
.lightbox-close-btn { top: 20px; right: 20px; }
.lightbox-prev-btn { left: 20px; }
.lightbox-next-btn { right: 20px; }

/* --- Cards --- */
.room-card {
    border: 1px solid var(--accent-color);
    text-align: center;
}
.room-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    background-color: #4a5c48;
}
.room-card h3 { margin: 1.5rem 0 0.5rem; }
.room-card p { padding: 0 1rem 1.5rem; }

.room-detail-card,
.attraction-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 4rem;
}

.room-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* --- Dropdown --- */
.nav-item.dropdown {
    position: relative;
}
.dropdown-toggle::after {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f078";
    font-size: 0.8rem;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    /*left: 0;*/
    left: 50%;
    background-color: var(--primary-color);
    border: 1px solid var(--accent-color);
    list-style: none;
    padding: 0.5rem 0;
    margin-top: 10px;
    min-width: 100px;
    z-index: 1001;
}
.dropdown-menu.active { display: block; }
.dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--secondary-color);
    transition: background-color 0.2s ease;
}
.dropdown-item:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
}

/* --- Modal --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal-container {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 2rem;
    border-radius: 5px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    overflow-y: auto;
}
.modal-overlay.active .modal-container { transform: scale(1); }
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.modal-title {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin: 0;
}
.booking-options-list,
.policies-list {
    list-style: none;
    padding: 0;
}
.booking-options-list { margin-top: 1.5rem; }
.booking-options-list li { margin-bottom: 1rem; }
.booking-options-list .secondary-button {
    display: block;
    text-align: center;
    width: 100%;
}
.policies-list li {
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* --- Sliders --- */
.review-slider-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.review-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.review-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 1rem 3rem;
    text-align: center;
}
.room-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.room-slider-wrapper {
    display: flex;
    transition: transform 0.4s ease-in-out;
}
.room-slide {
    min-width: 100%;
    box-sizing: border-box;
}
.room-slide img {
    width: 100%;
    display: block;
    height: 400px;
    object-fit: cover;
}
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}
.slider-nav:hover { background-color: rgba(0, 0, 0, 0.8); }
.slider-nav.prev { left: 10px; }
.slider-nav.next { right: 10px; }
.slider-pagination {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.pagination-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.pagination-dot.active { background-color: #fff; }

/* --- Lightbox --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-content { max-width: 90vw; max-height: 85vh; }
.lightbox-content img { /*width: 100%; height: 100%;*/ max-height: 85vh; object-fit: contain; }

/* --- Forms --- */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 1rem;
    background-color: #243522;
    border: 1px solid var(--accent-color);
    color: var(--secondary-color);
    font-family: var(--font-body);
}
.contact-form ::placeholder {
    color: var(--secondary-color);
    opacity: 0.7;
}

/* --- Misc Components --- */
.social-media-links {
    margin-top: 1rem;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}
.social-media-links a i {
    color: var(--secondary-color);
    font-size: 1.5rem;
    transition: color 0.2s ease, transform 0.2s ease;
}
.social-media-links a:hover i {
    color: var(--accent-color);
    transform: scale(1.1);
}
.awards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}
.awards-grid img {
    transition: filter 0.3s ease;
}


/* ==========================================================================
   05. PAGE-SPECIFIC STYLES
   ========================================================================== */
   
/* --- Homepage --- */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 0 5%;
    overflow: hidden;
}
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/quinta.jpg');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    z-index: 1;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.hero-content { position: relative; z-index: 3; }
.hero-content h1 { margin-bottom: 1rem; }
.hero-content .imperial-script-regular,
.hero-content .imperial-script-small {
  font-family: var(--brand-font);
  font-weight: 400;
  font-style: normal;
}
.hero-content .imperial-script-regular {
    font-size: clamp(4.5rem, 4.821rem + 3.393vw, 10rem);
}
.hero-content .imperial-script-small {
  font-size: 2.5rem;
}
.hero-content p { font-size: 1.2rem; margin-bottom: 0; }
.scroll-down-arrow {
    position: absolute;
    bottom: 2rem;
    z-index: 3;
    animation: bounce 2s infinite;
}
.scroll-down-arrow svg {
    width: 30px;
    height: 30px;
    fill: var(--secondary-color);
}
.about-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.about-image {
    width: 100%;
    height: 300px;
    background: url('../img/fondo.jpg');
    background-position: 50% 95%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--accent-color);
}
.about-text { text-align: center; }
.about-text h2 { margin-bottom: 1.5rem; }
.rooms-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.section-cta { text-align: center; margin-top: 3rem; }
.amenities-section { background-color: #243522; }
.amenities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.amenity-item .amenity-icon {
    width: 60px;
    height: 60px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.amenity-item .amenity-icon i {
    color: var(--accent-color);
    font-size: 1.8rem;
}
.video-section { background-color: #243522; }
.video-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.qr-code-wrapper { text-align: center; font-family: var(--brand-font); }
.qr-code-wrapper .qr-img,
.qr-code-wrapper .qr-logo { display: flex; justify-content: center; }
.qr-code-wrapper .qr-logo { padding-bottom: 1rem; }
.gallery-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}
.gallery-preview-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.gallery-preview-grid a:hover img {
    transform: scale(1.05);
    opacity: 0.8;
}
.reviews-section { background-color: var(--primary-color); }
.review-slide p { font-size: 1.2rem; font-style: italic; margin-bottom: 1rem; }
.review-author { font-weight: bold; color: var(--accent-color); }
.awards-section { background-color: #243522; padding: 4rem 5%; }

/* --- Inner Pages --- */
.page-hero {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.rooms-listing { max-width: 1000px; margin: 0 auto; }
.room-detail-text ul {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}
.room-detail-text li {
    padding-left: 1.5rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C3A38A'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E") no-repeat left center;
    background-size: 1rem;
    margin-bottom: 0.5rem;
}
.spa-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto 4rem;
}
.treatments-list { max-width: 800px; margin: 0 auto; }
.treatments-list ul { list-style: none; }
.treatments-list li {
    font-size: 1.1rem;
    border-bottom: 1px solid #4a5c48;
    padding: 1rem 0;
}
.contact-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto 4rem;
}
.map-container { margin-top: 4rem; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}
.gallery-item { overflow: hidden; position: relative; }
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.gallery-item a:hover img { transform: scale(1.1); }
.page-intro-section {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 5% 0;
}

.page-intro-section p {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.attractions-listing {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 5%;
}
.attraction-card img {
    width: 100%;
    object-fit: cover;
    height: 300px;
}
.attraction-text h3 {
    font-family: var(--font-headings);
    color: var(--secondary-color);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
.concierge-cta-section {
    background-color: #243522;
    text-align: center;
}

/* --- Page-Specific Hero Backgrounds --- */
#rooms-hero {
    background-image: url('../img/rooms/suite.jpg');
}

#gallery-hero {
    background-image: url('../img/gallery/gallery-8.jpg');
    background-position: 50% 75%;
}

#tourism-hero {
    background-image: url('../img/tourism/parque.jpg');
}

#contact-hero {
    background-image: url('../img/piso.jpg');
    background-position: 50% 75%;
}


/* ==========================================================================
   06. UTILITIES
   ========================================================================== */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}


.screen-reader-only {
    position: absolute !important; 
    left: -9999px !important; 
    top: auto !important; 
    width: 1px !important; 
    height: 1px !important; 
    overflow: hidden !important;
}

/* ==========================================================================
   07. MEDIA QUERIES
   ========================================================================== */
   
/* --- Tablet Breakpoint --- */
@media (min-width: 768px) {
    /* Layout */
    section { padding: 4rem 5%; }
    .navbar { padding: 1rem 2rem; }
    
    /* Navigation */
    .hamburger { display: none; }
    .logo-text { display: block; width: 100px;}
    .nav-menu {
        position: static;
        left: auto;
        flex-direction: row;
        width: auto;
        height: auto;
        background-color: transparent;
        transition: none;
        gap: 2rem;
        padding-top: 0;
        display: flex; 
        align-items: center;
    }
    .nav-item { width: auto; }
    .nav-link { display: inline; padding: 0; font-size: 1rem; }
    .nav-link.cta-button { margin: 0; width: auto; padding: 8px 18px; }
    .nav-link:hover { color: var(--accent-color); }
    
    /* Dropdown - Mobile overrides */
    .dropdown-toggle::after { display: inline-block; }
    .dropdown-menu {
        position: absolute;
        background-color: var(--primary-color);
        border: 1px solid var(--accent-color);
        text-align: left;
        width: auto;
        padding: 0.5rem 0;
        margin-top: 10px;
    }
    .dropdown-item { padding: 0.5rem 1rem; font-size: 1rem; }
    
    /* Cards */
    .room-detail-card,
    .attraction-card {
        display: flex;
        gap: 3rem;
    }
    .room-detail-card > *,
    .attraction-card > * {
        flex: 1 1 300px;
    }
    .room-detail-card.reverse,
    .attraction-card.reverse {
        flex-direction: row-reverse;
    }
    .attraction-card img { height: 350px; }

    /* Page Specific */
    .about-container { grid-template-columns: 1fr 1fr; gap: 4rem; text-align: left; }
    .about-image { height: 500px; }
    .about-text { text-align: left; }
    .rooms-grid { grid-template-columns: repeat(2, 1fr); }
    .amenities-grid { grid-template-columns: repeat(2, 1fr); }
    .video-container { grid-template-columns: 2fr 1fr; }
    /*.qr-code-wrapper { text-align: left; }*/
    .gallery-preview-grid { grid-template-columns: repeat(3, 1fr); }
    .spa-intro { grid-template-columns: 1fr 1.5fr; gap: 3rem; }
    .contact-container { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* --- Desktop Breakpoint --- */
@media (min-width: 1024px) {
    /* Base */
    section { padding: 6rem 5%; }
    
    /* Layout */
    .footer-container { grid-template-columns: repeat(3, 1fr); text-align: left; }
    .social-media-links { justify-content: flex-start; }

    /* Page Specific */
    .rooms-grid { grid-template-columns: repeat(3, 1fr); }
    .amenities-grid { grid-template-columns: repeat(3, 1fr); }
}

.section-divider {
  border: none; /* Removes the default 3D border */
  border-top: 2px solid #555; /* Creates a solid, gray line */
  margin: 40px 0; /* Adds spacing above and below the line */
  width: 60%; /* Sets the width to 80% of the container */
  margin-left: auto;
  margin-right: auto; /* Centers the line */
}