/* --- GOOGLE FONTS --- */
/* font-family: 'Poppins', sans-serif; */
/* font-family: 'Playfair Display', serif; */

html {
    height: 100%;
    /* This MUST be transparent to see the new beach background */
    background-color: transparent; 
}

/* Update this rule */
body {
    background-color: #0d1a26;
    font-family: 'Poppins', sans-serif;
    color: var(--dark-text);
    line-height: 1.7;
    overflow-x: hidden;
}

/* --- CSS VARIABLES --- */
:root {
    --white-color: #ffffff;
    --sand-color: #f5f7fa;
    --dark-text: #2c3e50;
    --light-text: #7f8c8d;
    --accent-yellow: #fec544;
    --accent-blue: #45c3d2;
    --header-height: 100px;
    --border-radius: 12px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); 
}

section {
    scroll-margin-top: var(--header-height);
}
#home {
    scroll-margin-top: 0;
}

/* --- LENIS SMOOTH SCROLL STYLES (as per the guide) --- */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}
/* --- END LENIS STYLES --- */

/* --- RESET & GLOBAL STYLES --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: 'Playfair Display', serif; line-height: 1.2; }
p { 
    margin-bottom: 1rem; 
    color: var(--light-text); /* Ensures all paragraphs are readable */
}
a { color: var(--accent-blue); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-yellow); }
.section-title { font-size: 2.8rem; margin-bottom: 1.5rem; color: var(--dark-text); }
.section-subtitle { max-width: 600px; margin: -1rem auto 3rem; }
.text-center { text-align: center; }

/* --- HEADER / NAVIGATION --- */
.main-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    height: var(--header-height); transition: var(--transition);
}
.main-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.main-header .container {
    max-width: 100%;
    padding: 0 40px;
}
.main-header .container { display: flex; justify-content: space-between; align-items: center; height: 100%; }

.logo img { height: 75px; transition: var(--transition); }
.main-nav ul { display: flex; align-items: center; list-style: none; }
.main-nav ul li { margin-left: 25px; }
.main-nav ul li a {
    font-weight: 600;
    color: var(--white-color);
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
}
.main-header.scrolled .main-nav ul li a {
    color: var(--dark-text);
}
.main-nav ul li a::after {
    content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px; background-color: var(--accent-yellow); transition: var(--transition);
}
.main-nav ul li a:hover::after { width: 100%; }

/* This new, highly specific selector targets the button link directly to override default navigation styles. */
.main-nav ul li a.btn-nav-quote {
    background-color: transparent;
    color: var(--white-color);
    padding: 15px 35px;
    border-radius: 50px;
    border: 2px solid var(--accent-yellow);
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 700;
}

/* This targets the hover state with the same high specificity. */
.main-nav ul li a.btn-nav-quote:hover {
    background-color: var(--accent-yellow);
    color: var(--dark-text);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.main-header.scrolled .main-nav ul li a.btn-nav-quote {
    color: var(--dark-text);
}

/* This specifically removes the unwanted underline animation from the button only. */
.main-nav ul li a.btn-nav-quote::after {
    display: none;
}
/* --- Desktop/Mobile Button Swap --- */
.btn-mobile {
    display: none;
}
.btn-nav-quote:hover::after { display: none; }
.hamburger { display: none; background: none; border: none; cursor: pointer; z-index: 1001; }
.hamburger-bar {
    display: block; width: 25px; height: 3px; margin: 5px auto;
    background-color: var(--white-color);
    border-radius: 3px; transition: var(--transition);
}
.main-header.scrolled .hamburger-bar {
    background-color: var(--dark-text);
}

/* --- TEXT SHADOWS for better readability --- */
.hero-title,
.hero-subtitle,
.section-title,
.country-name {
    text-shadow: var(--text-shadow);
}

.hero {
    height: 100vh;
    position: relative; 
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--white-color);
    background-color: transparent; 
    overflow: hidden;
    pointer-events: none; /* This tells the entire container to ignore clicks/taps */
}

/* This is the NEW background image layer */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Sits far behind the content */
    background:
        /* The dark tint for readability */
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        /* The background image */
        url('https://i.postimg.cc/ryS8BZcy/image3549-1.jpg') no-repeat center center/cover;
}

/* This is the NEW smooth gradient fade layer */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px; /* Controls the height of the fade */
    z-index: -1; /* Sits behind the content but on top of the image */
    background: linear-gradient(to bottom, transparent 0%, var(--sand-color) 100%);
}


.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
    /* THE DEFINITIVE FIX: This makes the overlay completely "invisible" to clicks and touches. */
    pointer-events: none;

    background: 
        linear-gradient(to bottom, transparent 60%, var(--sand-color) 100%),
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('https://i.postimg.cc/BZwZs1Rb/image3549-1.jpg') no-repeat center center/cover;
}
/* Find your existing .hero-content rule and add pointer-events: auto; */
.hero-content {
    position: relative;
    z-index: 2;
    animation: fadeIn 1s .5s both;
    pointer-events: auto; /* This RE-ENABLES clicks/taps only for this container and its children */
}
.hero-title { font-size: 5rem; margin-bottom: 1rem; text-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2.5rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
}
.btn {
    padding: 15px 35px; border-radius: 50px; font-weight: 600; transition: var(--transition);
    border: 2px solid transparent; display: inline-block; margin: 5px; text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; /* ADD THIS LINE */
}
.btn-primary { background-color: var(--accent-yellow); color: var(--dark-text); }
.btn-primary:hover { background-color: transparent; border-color: var(--accent-yellow); color: var(--accent-yellow); transform: translateY(-3px); }
.btn-secondary { background-color: transparent; border: 2px solid var(--accent-blue); color: var(--white-color); }
.btn-secondary:hover { background-color: var(--accent-blue); color: var(--white-color); transform: translateY(-3px); }

/* --- WELCOME SECTION --- */
.welcome-section {
    padding: 120px 0;
    background-color: transparent;
}
.welcome-container { display: flex; align-items: center; gap: 4rem; }
.welcome-text { flex-basis: 50%; }
/* This new rule creates a well-proportioned rectangular frame */
.welcome-image {
    flex-basis: 45%;
    position: relative;
    width: 100%; /* Take up the available width */
    height: 0; /* Let the padding define the height */
    padding-bottom: 60%; /* This creates a 5:3 aspect ratio rectangle */
    border-radius: var(--border-radius);
    overflow: hidden; /* Ensures the image respects the border-radius */
    box-shadow: var(--shadow);
}

/* We must also update the image rule to fill this new container */
.welcome-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the key to preventing distortion */
    object-position: center; /* This ensures the crop is well-centered */
}

/* --- VACATION TYPES SECTION --- */
.vacation-types-section {
    padding: 120px 0;
    background-color: transparent;
}
.vacation-types-section .section-title {
    color: var(--dark-text);
    margin-bottom: 4rem;
}
.types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.category-card {
    text-align: center;
    transition: var(--transition);
}
.category-card:hover {
    /* This makes the card both lift up AND grow larger */
    transform: translateY(-10px) scale(1.05);
}
/* This container is now a perfect square */
.category-card .card-image-container {
    position: relative; /* This is essential for the image positioning */
    width: 100%;
    aspect-ratio: 1 / 1; /* The key to the square shape */
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

/* This makes the image fill the square container perfectly */
.category-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Fills the container */
    object-fit: cover; /* Prevents the image from being distorted */
    border-radius: 24px;
}
.category-card h3 {
    color: var(--dark-text);
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}


/* --- FOOTER --- */
.main-footer {
    background-color: var(--dark-text); color: #bdc3c7;
    padding: 40px 0; text-align: center; font-size: 0.9rem;
}
.main-footer p { color: #bdc3c7; }

/* --- ANIMATIONS --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ======================================= */
/* ---      RESPONSIVE STYLES      --- */
/* ======================================= */

/* --- TABLETS (Medium Devices) --- */
@media (max-width: 992px) {
    .main-header .container {
        padding: 0 20px;
    }
    .section-title { font-size: 2.5rem; }
    .hero-title { font-size: 4rem; }
    .welcome-container { flex-direction: column; text-align: center; }
    
    .types-grid {
        grid-template-columns: 1fr; /* Stack on tablets and mobile */
        gap: 3rem;
        max-width: 400px; /* Constrain width on mobile for better aesthetics */
        margin: 0 auto;
    }
}

/* ====== RESORTS VISITED SECTION ====== */
.resorts-visited-section {
    padding: 120px 0;
    background-color: transparent;
}

.resorts-accordion {
    max-width: 800px;
    margin: 4rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-item {
    background: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden; /* Important for the smooth open/close animation */
    transition: var(--transition);
}

.accordion-item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
    list-style: none; /* Removes default dropdown arrow */
    width: 100%;
}
.accordion-header::-webkit-details-marker {
    display: none; /* Hides default arrow in Safari */
}

.country-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--dark-text);
}

.chevron-icon {
    width: 10px;
    height: 10px;
    border-style: solid;
    border-color: var(--dark-text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.accordion-item[open] > .accordion-header .chevron-icon {
    transform: rotate(225deg);
}

.accordion-content {
    padding: 0 2rem 1.5rem;
    border-top: 1px solid #e0e0e0;
}
.accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.accordion-content li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    font-size: 1rem;
    color: var(--light-text);
}
.accordion-content li:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.resort-name {
    display: inline-flex !important; /* Keeps it on the same row as stars if space allows */
    align-items: center !important;  /* Locks vertical centering */
    flex-wrap: wrap !important;
    font-weight: 600;
    color: var(--dark-text);
    gap: 15px !important;            /* Adds consistent space between Name, Tags, and Button */
    line-height: 1.2 !important;
}

/* Ensure margins don't conflict with the new gap */
.resort-name > span {
    margin: 0 !important;
}
.resort-name .favorite-badge {
    margin-left: 0 !important; /* Let 'gap' handle the spacing */
}

.star-rating {
    display: flex;
    gap: 0.3rem;
}
.star-rating svg {
    width: 18px;
    height: 18px;
    fill: #d8d8d8; /* Default color for an empty star */
}
.star-rating .star-filled {
    fill: var(--accent-yellow); /* Color for a filled star */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .accordion-header {
        padding: 1.25rem 1.5rem;
    }
    .country-name {
        font-size: 1.25rem;
    }
}

/* ====== LETS CONNECT SECTION (CONTACT FOOTER) ====== */
.contact-footer {
    padding: 120px 0 20px; /* Added 20px padding to the bottom */
    background-color: var(--accent-yellow);
    text-align: center;
}

.contact-footer .section-title {
    color: var(--dark-text);
}

.contact-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Left text | Middle image | Right icons */
    align-items: center;
    gap: 2rem;
    margin-top: 4rem;
    text-align: left;
}

.contact-portrait {
    grid-column: 2 / 3; /* Places the portrait in the middle column */
    grid-row: 1 / 2;
    margin: 0 auto;
}
.contact-portrait img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%; /* Perfect circle */
    border: 5px solid var(--white-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.contact-details {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: right;
}
.contact-details p {
    color: var(--dark-text);
    line-height: 1.6;
    font-weight: 500;
}
.affiliation-text {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 1rem;
}

.social-links {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    display: flex;
    gap: 1.5rem;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.1);
    color: var(--dark-text);
    border-radius: 50%;
    transition: var(--transition);
}
.social-icon:hover {
    background-color: var(--dark-text);
    color: var(--white-color);
    transform: translateY(-5px) scale(1.1);
}

.tico-logo {
    margin-top: 3rem;
    opacity: 0.8;
}
.tico-logo img {
    max-height: 50px;
}
.tico-logo span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--dark-text);
}

.footer-bottom-line {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 60px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between; /* Pushes items to opposite ends */
    align-items: center;
}

/* Responsive Adjustments for Footer */
@media (max-width: 768px) {
    .contact-card {
        /* This is the key: stack everything into a single column on mobile */
        grid-template-columns: 1fr; 
        gap: 2.5rem; /* Adjusts the vertical space between the items */
    }

    /* We target all three grid items at once */
    .contact-portrait, 
    .contact-details, 
    .social-links {
        /* Force each item onto its own row and take up the full width */
        grid-column: 1 / -1; 
        text-align: center; /* Center-align all the text content */
    }

    /* We can explicitly set the order for a perfect mobile layout */
    .contact-portrait {
        grid-row: 1; /* Portrait image appears first */
    }
    .contact-details {
        grid-row: 2; /* Contact text appears second */
    }
    .social-links {
        grid-row: 3; /* Social icons appear third */
        justify-content: center; /* Ensures the icons themselves are centered */
    }
}

/* ====== PRE-LOADER STYLES ====== */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--white-color); /* Uses the clean white background */
    z-index: 9999; /* Ensures it's on top of all other content */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.7s ease; /* Controls the fade-out animation */
}

/* The state when the loader is hidden */
#loader-wrapper.hidden {
    opacity: 0;
    pointer-events: none; /* Allows clicks to go through to the page */
}

#loader-wrapper img {
    width: 120px; /* Adjust size of logo as needed */
    height: auto;
    animation: pulse 1.5s infinite ease-in-out; /* The pulsing animation */
}

/* Defines the keyframes for the pulse animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* ====== QUOTE SELECTION MODAL ====== */
#quote-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(44, 62, 80, 0.7); /* A dark, semi-transparent overlay */
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#quote-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

#quote-modal-content {
    background: var(--white-color);
    padding: 3rem 4rem;
    border-radius: var(--border-radius);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    text-align: center;
    position: relative;
    max-width: 500px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.4s ease;
}
#quote-modal-overlay.active #quote-modal-content {
    transform: scale(1);
}

#close-modal-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.3s ease;
}
#close-modal-btn:hover {
    color: var(--dark-text);
}

#quote-modal-content .section-title {
    margin-bottom: 1rem;
}
#quote-modal-content p {
    margin-bottom: 2rem;
    color: var(--light-text);
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modal-buttons .btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

/* Add this new rule to fix the secondary button's text color inside the modal */
#quote-modal-content .btn-secondary {
    color: var(--dark-text);
}

/* =================================================================== */
/* ====== PART 1: ALIVE & INTERACTIVE WEBSITE ENHANCEMENTS ====== */
/* =================================================================== */



/* --- 2. The Hero  & Particle Canvas --- */
.hero {
    position: relative; /* Crucial for positioning the  and particles */
}

#interactive-gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Sits at the very back */
    
    background: 
        radial-gradient(40vw circle at var(--gradient-x, 50%) var(--gradient-y, 50%), rgba(148, 199, 199, 0.5), transparent 80%),
        radial-gradient(30vw circle at 10% 90%, rgba(224, 213, 166, 0.4), transparent 70%),
        radial-gradient(30vw circle at 90% 20%, rgba(163, 153, 186, 0.4), transparent 70%);
        
    mix-blend-mode: screen;
    opacity: 0.8;
}

/* 3. Style the particle canvas layer */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    /* Gentle glow rather than heavy blur */
    filter: blur(2px);
    -webkit-filter: blur(2px);
    opacity: 1; /* Keep the color full and saturated */
}

/* 4. CRUCIAL: Ensure the main content is on top */
.page-content {
    position: relative;
    z-index: 2; /* This brings all your content to the front */
    background-color: transparent; /* Must be transparent to see the background */
}

/* Ensure hero content stays on top */
.hero-content {
    position: relative;
    z-index: 2;
}

/* The beautiful transparent-to-sand  */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0; /* Aligns the  to the very bottom */
    left: 0;
    width: 100%;
    height: 250px; /* Increased height for a smoother fade */
    /* This is the magic: a gradient from transparent to the sand color */
    background: linear-gradient(to bottom, rgba(247, 245, 242, 0), var(--sand-color));
    z-index: 3;
    transition: all 0.5s ease;
}


/* --- 3. Scroll-Triggered Animation Foundation --- */
/* This is the initial "hidden" state for elements that will animate in */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* This is the "visible" state that our JS will toggle */
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- 4. Enhanced & Dynamic Button Interactions --- */
/* Make all buttons have a more "physical" feel */
.btn {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    transform: translateY(-4px) scale(1.02);
}


/* --- 5. Invented Effect: Interactive Accordion Hover --- */
/* Makes the "Resorts Visited" dropdowns more dynamic */
.accordion-item {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.accordion-item:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: translateX(10px);
}
.accordion-item[open] {
    transform: translateX(5px);
}

/* --- 6. Interactive 3D Tilt Effect --- */
.tilt-card {
    transform-style: preserve-3d; /* This enables the 3D effect */
    will-change: transform; /* Optimizes performance */
    transform: perspective(1000px); /* Sets the 3D "depth" */
}
.tilt-card .card-image-container {
    /* Adds a subtle, glowing border on hover that matches the brand */
    box-shadow: 0 0 0px 0px rgba(254, 197, 68, 0); 
    transition: box-shadow 0.4s ease;
}
.tilt-card:hover .card-image-container {
    box-shadow: 0 0 25px 5px rgba(254, 197, 68, 0.3);
}

/* ======================================= */
/* ====== MOBILE RESPONSIVE STYLES ====== */
/* ======================================= */

/* --- Applies to tablets and mobile phones (screens smaller than 992px) --- */
@media (max-width: 992px) {
    .section-title { font-size: 2.5rem; }
    .hero-title { font-size: 4rem; }
    .welcome-container { flex-direction: column; text-align: center; gap: 2rem; }
    .types-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .accreditations-grid { grid-template-columns: 1fr; text-align: center; }
    .accreditations-content .section-title { text-align: center; }
    .accreditations-content p { margin-left: auto; margin-right: auto; }
    .logos-grid { grid-template-columns: repeat(2, 1fr); max-width: 400px; margin: 0 auto; }
    .contact-card { grid-template-columns: 1fr; gap: 2.5rem; }
    .contact-portrait, .contact-details, .social-links { grid-column: 1 / -1; text-align: center; }
    .contact-portrait { grid-row: 1; }
    .contact-details { grid-row: 2; }
    .social-links { grid-row: 3; justify-content: center; }
}

/* --- MOBILE PHONES (Small Devices) --- */
@media (max-width: 768px) {
    /* --- 1. Base Mobile Styles --- */
    body { line-height: 1.6; }
    .main-header .container { padding: 0 20px; }
    .welcome-section, .vacation-types-section, .accreditations-section, .resorts-visited-section { padding: 80px 0; }

    /* --- 2. Mobile Header and Logo "Seal" Effect --- */
    /* Adjust the header height to accommodate the larger logo */
    .main-header {
        height: 90px;
    }
    .main-header .container {
        position: relative;
        justify-content: flex-end;
    }
    .welcome-image {
        position: relative;
        width: 100%;
        height: 0;
        /* This new percentage creates a wider, more cinematic 16:9 aspect ratio */
        padding-bottom: 125%; 
    }
    .hero::after {
        height: 50px; /* Reduced from 250px to prevent covering buttons */
    }

    /* CRUCIAL FIX: This was missing, and it ensures the image is centered. */
    .welcome-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* This ensures the crop is taken from the vertical and horizontal center */
        object-position: center; 
    }
    .logo {
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -50%);
        z-index: 100;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        /* MODIFIED LINE */
        transition: top 0.4s ease, transform 0.4s ease, height 0.4s ease;
    }
    /* This moves the logo's position up into the header */
    .logo.menu-open {
        top: 45px; /* (Half of the 90px header height) */
    }
    
    /* This shrinks the image itself */
    .logo.menu-open img {
        height: 70px; /* The new, smaller size */
    }
    .logo img {
        height: 120px;
        display: block;
        transition: height 0.4s ease; /* The key transition */
    }

    /* --- 3. Mobile "Cutout" Outline for the Logo --- */
    .logo::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% + 20px); /* A proportional outline for mobile */
        height: calc(100% + 20px);
        border-radius: 50%;
        opacity: 0;
        transition: var(--transition);
        z-index: -1;
    }
    .main-header.scrolled .logo::after {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 1;
    }

    /* --- 4. Mobile Navigation Menu --- */
    .main-nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background-color: var(--white-color); transition: var(--transition); display: flex; justify-content: center; align-items: center; }
    .main-nav.active { right: 0; }
    .main-nav ul { flex-direction: column; text-align: center; }
    .main-nav ul li { margin: 20px 0; }
    .main-nav ul li a,
    .main-header.scrolled .main-nav ul li a { font-size: 1.5rem; color: var(--dark-text) !important; }
    .main-nav .btn-nav-quote { display: inline-block; padding: 15px 40px; margin-top: 20px; text-align: center; width: auto; }

    .hamburger { display: block; }
    .hamburger.active .hamburger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .hamburger-bar:nth-child(2) { opacity: 0; }
    .hamburger.active .hamburger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .hamburger.active .hamburger-bar { background-color: var(--dark-text) !important; }
    .category-card img {
        position: static;
        height: 250px;
        /* This shifts the image down, revealing more of the top */
        object-position: 50% 20%; 
    }

    /* --- 5. Other Mobile Styles (unchanged) --- */
    .section-title { font-size: 2rem; }
    .hero { height: 90vh; }
    .hero-title { font-size: clamp(2.2rem, 8vw, 3.2rem); /* Adapts to prevent squishing */ }
    .hero-subtitle { font-size: 1.2rem; }
    .types-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 400px; margin: 0 auto; }
    .category-card .card-image-container { position: static; aspect-ratio: auto; }
    .category-card img { position: static; height: 250px; }
    .category-card h3 { font-size: 1.1rem; }
}

#mobile-hero-quote-button {
    display: none;
}

/* --- BACKGROUND & PARTICLES --- */

/* This is the solid sand-colored background for the whole site */
body {
    background-color: var(--sand-color);
}

/* ======================================= */
/* ====== FINAL DESIGN & NAVBAR ====== */
/* ======================================= */

/* --- 1. New and Updated Colors --- */
:root {
    --accent-teal: #5CD0D0;
}

/* Set the teal color for the main hero button */
.btn-primary {
    background-color: var(--accent-teal);
    color: var(--dark-text);
}
.btn-primary:hover {
    background-color: transparent;
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}


/* Set the teal hover outline for the vacation cards */
.tilt-card:hover .card-image-container {
    box-shadow: 0 0 25px 5px rgba(92, 208, 208, 0.6);
}

/* --- 2. Definitive Symmetrical Desktop Navbar Layout --- */
/* This media query ensures these layout changes only apply to desktop screens */
@media (min-width: 993px) {

    /* --- 1. Increase the height of the navbar --- */
    .main-header {
        height: 120px; /* Increased from 100px */
    }

    /* --- 2. Position the logo correctly --- */
    .logo {
        position: absolute;
        left: 50%;
        top: 100%; /* <-- This aligns the logo's center with the bottom of the header */
        transform: translate(-50%, -50%);
        z-index: 100;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border-radius: 50%;
    }
    .logo img {
        height: 175px; /* Much larger than the navbar height, creating the overlap */
        display: block; /* Important for clean rendering of the shadow */
    }

    /* --- 3. The symmetrical layout logic remains the same --- */
    .main-nav {
        width: 100%;
    }
    .main-nav ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-group-left, .nav-group-right {
        flex: 1; 
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    /* --- 4. Widen the spacer to accommodate the larger logo --- */
    .nav-logo-spacer {
        width: 220px; 
    }
    /* --- This is the new BASE style for the logo's outline --- */
    .logo::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        /* 1. MAKE THE OUTLINE BIGGER */
        width: calc(100% + 40px);
        height: calc(100% + 40px);

        /* Make it a perfect circle */
        border-radius: 50%;
        
        /* Start invisible and prepare for a smooth fade-in */
        opacity: 0;
        transition: var(--transition); /* Use the site's standard transition */
        
        z-index: -1;
    }

    /* --- This new rule makes the outline VISIBLE ONLY WHEN SCROLLED --- */
    .main-header.scrolled .logo::after {
        /* These styles are copied EXACTLY from your .main-header.scrolled rule */
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        
        /* Fade it in */
        opacity: 1;
    }
}

/* ===================================================== */
/* ====== THE LUMINOUS SEMI-TRANSPARENT GLASS CARD ====== */
/* ===================================================== */

.accreditations-section {
    padding: 120px 0;
    background-color: transparent;
    overflow: hidden; 
}
.accreditations-header {
    max-width: 750px;
    margin: 0 auto 5rem auto;
}
.accreditations-header .section-subtitle {
    font-size: 1.1rem;
    color: var(--light-text);
    line-height: 1.8;
}
.logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5rem 6rem;
    max-width: 1100px;
    margin: 0 auto;
}
.trophy-wrapper {
    position: relative;
}
.trophy-wrapper::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100%;
    transform: translateY(100%) scaleY(-1);
    background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, transparent 70%);
    border-radius: var(--border-radius);
    filter: blur(25px);
    opacity: 0;
    transition: opacity 0.5s ease-out;
    z-index: -1;
}
.trophy-wrapper:hover::after {
    opacity: 0.15;
}

/* --- THE MASTER GLASS OBJECT --- */
.logo-item {
    padding: 1.5rem 2rem;
    border-radius: var(--border-radius);
    transition: all 0.4s cubic-bezier(0.1, 0.8, 0.2, 1);
    position: relative; 
    z-index: 1;
    transform-style: preserve-3d;
    overflow: hidden;
    transform: perspective(1500px) translateZ(0);
    will-change: transform, box-shadow;
    background: transparent;
}
.logo-item img {
    max-height: 100px; 
    max-width: 220px;
    width: auto;
    display: block;
    position: relative;
    z-index: 10;
    transition: all 0.4s ease;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2));
}

/* --- THE MULTI-LAYERED GLASS SHADER --- */

/* LAYER 1: The Luminous, Multi-faceted Glass Body */
.logo-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    border-radius: var(--border-radius);
    z-index: 1;

    /* The frosted glass effect is the foundation */
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    
    /* MULTI-LAYERED BACKGROUND for depth and sheen */
    background:
        /* Top-down subtle white sheen */
        linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%),
        /* The main semi-transparent body color */
        rgba(255, 255, 255, 0.08);

    /* COMPLEX SHADOWS for a bevelled "cut glass" edge */
    box-shadow: 
        /* Sharp top highlight */
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        /* Soft inner depth shadow */
        inset 0 -10px 40px rgba(0, 0, 0, 0.05),
        /* The definitive outer border */
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* LAYER 2: The Interactive Stretched Reflection */
.logo-item::after {
    content: '';
    position: absolute;
    z-index: 2; /* Sits on top of the base */
    width: 250%; 
    height: 250%;
    top: -75%; 
    left: -75%;

    /* SHARPER & BRIGHTER light source for a more defined gleam */
    background: radial-gradient(
        ellipse at center,
        rgba(220, 235, 255, 0.7) 0%, /* Bright central point */
        transparent 50% /* Fades out for a less artificial look */
    );

    filter: blur(10px);
    opacity: 0;
    
    transform: translate(var(--mouse-x-offset, 0px), var(--mouse-y-offset, 0px));
    transition: opacity 0.4s ease, transform 0.1s linear;
}


/* --- HOVER STATE: LIGHTS ON --- */
.trophy-wrapper:hover .logo-item {
    box-shadow: 0 40px 60px -20px rgba(0,0,0,0.2);
}

/* On hover, fade in the interactive reflection */
.trophy-wrapper:hover .logo-item::after {
    opacity: 1;
}

/* This is a NEW style to create the beautiful white glare on the glass surface */
.js-tilt-glare-inner {
    /* NEW: Sharper, more defined "hard light" glare */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    /* The opacity is now controlled by the JS, making this the maximum brightness */
    opacity: 1;
}

/* ENHANCED 3D HOVER STATE */
.trophy-wrapper:hover .logo-item img {
    /* The logo now pops out much further for a dramatic 3D effect */
    transform: translateZ(60px); 
    /* The drop shadow is softer and more spread out to match the increased height */
    filter: drop-shadow(0 30px 25px rgba(0,0,0,0.3));
}

/* --- Mobile Fallback --- */
@media (max-width: 768px) {
    .accreditations-section { padding: 80px 0; }
    .logos-grid { gap: 3rem 1rem; }
    .logo-item { overflow: hidden; }
    .logo-item img { max-height: 80px; }
    /* Hide the complex effects on touch devices for performance */
    .trophy-wrapper::after, .logo-item::after { display: none; }
    .trophy-wrapper:hover .logo-item { 
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    }
}

.favorite-badge {
    background-color: var(--accent-yellow);
    color: var(--dark-text);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 8px;
    vertical-align: middle;
}

/* ======================================= */
/* ====== DEFINITIVE CENTERED FOOTER ====== */
/* ======================================= */

/* This is the main layout controller */
.footer-bottom-line {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 40px;  /* Reduced the top margin */
    padding-top: 25px; /* Gave it a little padding */
    
    /* This creates the centered vertical stack */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* This creates consistent space between each item */
}

/* This styles the admin login icon */
#admin-login-button svg {
    width: 18px;
    height: 18px;
    fill: var(--dark-text);
    opacity: 0.5;
    transition: all 0.3s ease;
}

#admin-login-button:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

/* This is the CSS for your watermark */
.made-by-credit {
    /* No margin needed as 'gap' handles the spacing */
    display: flex;
    justify-content: center;
    align-items: center;
}

.made-by-credit a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.credit-text {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0;
    width: 0;
    transition: width 0.4s ease, opacity 0.2s ease, margin-right 0.4s ease;
}

.credit-logo {
    height: 35px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all 0.4s ease;
}

.made-by-credit a:hover .credit-text {
    opacity: 1;
    width: 85px;
    margin-right: 0.75rem;
}

.made-by-credit a:hover .credit-logo {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ====== 1. LIQUID LANGUAGE SWITCHER STYLES ====== */

/* The container for the switch */
.lang-switcher {
    display: flex;
    align-items: center;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 8px;
    border-radius: 20px;
    transition: var(--transition);
}
.main-header.scrolled .lang-switcher {
    background: rgba(0, 0, 0, 0.05);
}

/* The "EN" and "FR" text links */
.lang-switcher .lang-option {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: 16px;
    color: var(--white-color);
    position: relative;
    z-index: 2; /* Sits on top of the sliding indicator */
    transition: color 0.4s ease;
}
.main-header.scrolled .lang-switcher .lang-option {
    color: var(--dark-text);
}
.lang-switcher .lang-option:not(.active) {
    color: var(--light-text);
}
.main-header:not(.scrolled) .lang-switcher .lang-option:not(.active) {
    color: rgba(255,255,255,0.7);
}

/* The animated underline/background effect */
.lang-switcher .lang-separator {
    position: absolute;
    top: 5px;
    left: 6px; /* Initial position on 'EN' */
    height: calc(100% - 10px);
    width: 45px; /* Adjust width to perfectly fit text */
    background-color: var(--accent-yellow);
    border-radius: 16px;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Mobile Menu Adjustments */
@media (max-width: 992px) {
    .lang-switcher {
        order: -1; /* Puts it at the top of the mobile menu links */
        margin-bottom: 20px;
    }
    .lang-switcher .lang-option,
    .main-header.scrolled .lang-switcher .lang-option {
        color: var(--dark-text) !important;
    }
    .lang-switcher .lang-option:not(.active) {
       color: var(--light-text) !important;
    }
}


/* ====== 2. GLASS LANGUAGE PROMPT BANNER ====== */
#language-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 200%); /* Start hidden below the screen */
    z-index: 5000;
    
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2.5rem;
    border-radius: var(--border-radius);
    
    /* The premium glass effect */
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    
    opacity: 0;
    visibility: hidden;
    transition: transform 0.6s ease, opacity 0.6s ease, visibility 0.6s;
}

#language-prompt.visible {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

#language-prompt p {
    margin: 0;
    font-weight: 500;
    color: var(--dark-text);
    font-size: 1.1rem;
}

.prompt-buttons {
    display: flex;
    gap: 1rem;
}

/* Use existing button styles but with smaller padding */
#language-prompt .btn {
    padding: 10px 25px;
    box-shadow: none;
}
#language-prompt .btn-secondary {
    background-color: rgba(0,0,0,0.1);
    border-color: transparent;
    color: var(--dark-text);
}
#language-prompt .btn-secondary:hover {
    background-color: var(--dark-text);
    color: var(--white-color);
}

/* ====== RESORT PHOTO SCROLLER STYLES ====== */
.accordion-content li.resort-item {
    display: flex; /* Changed from flex */
    flex-direction: column; /* Stack info and photos vertically */
    align-items: stretch;
    gap: 1rem;
    padding-bottom: 1.5rem;
}
.resort-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.resort-photos {
    display: flex;
    gap: 1rem;
    overflow-x: auto; /* This creates the horizontal scroll */
    padding-bottom: 10px; /* Space for the scrollbar */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--accent-yellow) transparent; /* Firefox */
    max-width: 100%; /* ADD THIS LINE TO ENABLE DESKTOP SCROLLING */
}
/* Styling the scrollbar for Webkit browsers (Chrome, Safari) */
.resort-photos::-webkit-scrollbar {
    height: 6px;
}
.resort-photos::-webkit-scrollbar-track {
    background: transparent;
}
.resort-photos::-webkit-scrollbar-thumb {
    background-color: var(--accent-yellow);
    border-radius: 10px;
}
.resort-photos .photo-item {
    flex-shrink: 0; /* Prevents images from shrinking */
    width: 200px; /* Width of each photo preview */
    aspect-ratio: 4 / 3; /* Handles all image orientations gracefully */
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.resort-photos .photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the key to preventing distortion */
    display: block;
}


/* ====== EXPERIENCE PAGE STYLING ====== */
.page-title-spacer {
    padding-top: 180px; /* Adjust this value to push content down */
}
.luxury-section {
    padding-top: 0; 
    padding-bottom: 120px;
}
.luxury-section .section-title {
    margin-top: 100px;
}

/* ======================================= */
/* ====== EXPERIENCE PAGE HEADER FIX ====== */
/* ======================================= */

/* This rule targets the header ONLY on the experience page */
.experience-page .main-header .main-nav ul li a {
    /*
       This !important tag is necessary to override the default styles
       that make the links white/transparent when at the top of the page.
       It forces the links to use the dark text color at all times.
    */
    color: var(--dark-text) !important;
}

/* We also need to force the hamburger icon to be dark on mobile */
.experience-page .main-header .hamburger-bar {
    background-color: var(--dark-text) !important;
}

/* ======================================= */
/* ====== HERO BUTTON HIERARCHY ====== */
/* ======================================= */

/* 1. Makes the container stack the buttons vertically */
.hero-cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px;
    gap: 1rem; /* This creates the space between the two buttons */
}

/* 2. Defines the new "large" size for the primary button */
.btn.btn-large {
    padding: 18px 45px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* ======================================= */
/* ====== NEW MOBILE RESPONSIVE FIXES ====== */
/* ======================================= */

@media (max-width: 768px) {

    /* --- 1. HERO BUTTONS (HOMEPAGE) --- */
    /* Reduces the size of the larger "Request Your Quote" button to
       make it feel more proportional on smaller screens. */
    .hero-cta-buttons .btn.btn-large {
        padding: 15px 35px; /* Reverts to standard button padding */
        font-size: 1rem;    /* Reverts to standard button font size */
    }

    /* --- 2. EXPERIENCE PAGE HEADER SPACER --- */
    /* The desktop spacer was too large for the mobile header.
       This value provides the perfect amount of space below the
       hanging logo without creating a large empty gap. */
    .experience-page .page-title-spacer {
        padding-top: 160px; /* Reduced from 180px */
    }

    /* --- 3. RESORT PHOTO SCROLLER --- */
    /* Makes the photo previews slightly smaller on mobile, allowing
       more to fit on the screen and improving the scroll experience. */
    .resort-photos .photo-item {
        width: 150px; /* Reduced from 200px */
    }
    .resort-photos {
        gap: 0.8rem; /* Slightly reduces the space between photos */
    }

}

/* ================================================= */
/* ====== FINAL MOBILE OVERLAP & SCALING FIXES ====== */
/* ================================================= */

@media (max-width: 768px) {

    /* --- 1. Hero Content Overlap Fix --- */
    /* On mobile, the hero section needs to be pushed down to make
       room for the header and the hanging logo. This adds padding
       at the top, which moves the vertically centered content down. */
    .hero {
        padding-top: 120px;
    }

    /* --- 2. Mobile Menu Language Switcher Scaling Bug Fix --- */
    /* This is a preventative fix. Some mobile browsers incorrectly apply
       transform effects (like scaling) on touch events inside a
       transformed container (like the slide-in menu). This rule
       explicitly FORCES the language switcher to maintain its normal
       size at all times, preventing the "growing" bug. */
    /* Fix: Stop buttons and switcher from "growing" or jumping on mobile scroll */
    .main-nav.active .lang-switcher,
    .main-nav.active .btn-nav-quote,
    .main-nav.active .lang-option {
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
        font-size: 0.9rem !important; /* Forces the text to stay small like the desktop state */
        height: auto !important;
        transition: none !important; /* Stops the "jumpy" feeling when the header background appears */
    }

    /* Keep the Get a Quote button shape consistent */
    .main-nav.active a.btn-nav-quote {
        padding: 15px 35px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

}

/* ====== LAZY LOAD IMAGE PLACEHOLDER ====== */
.lazy-load-container {
    background-color: #f9f9f9;
    position: relative;
}

/* This rule creates the initial centered watermark placeholder */
.lazy-load-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://i.postimg.cc/VLcJjDPq/bd64a898e9fe04e5cb56c2468fd9.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    opacity: 0.2;
    transition: opacity 0.3s ease-in-out;
}

/* This rule shows the spinner and hides the placeholder when loading */
.lazy-load-container.loading::before {
    background-image: url('https://i.postimg.cc/136gFrJS/bd64a82ba898e9fe04e5cb56c2468fd9.png');
    background-size: 40px;
    background-color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

/* When the image is fully loaded, hide the ::before element (the placeholder/spinner) */
.lazy-load-container.loaded::before {
    opacity: 0;
}

/* This is the NEW watermark that appears on top of the loaded image */
.lazy-load-container::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 25%;
    height: 25%;
    background-image: url('https://i.postimg.cc/VLcJjDPq/bd64a898e9fe04e5cb56c2468fd9.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* So it doesn't interfere with mouse events */
    z-index: 2;
}

/* When the image is loaded, fade in the new watermark */
.lazy-load-container.loaded::after {
    opacity: 0.5; /* Semi-transparent */
}

.lazy-load-container img {
    /* Start with the image invisible */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* When the image has loaded, this makes it fade in */
.lazy-load-container img[src] {
    opacity: 1;
}

/* file: style.css */
/* ======================================= */
/* ====== NEW LIGHTBOX STYLES ====== */
/* ======================================= */

/* --- Clickable Cursor --- */
.photo-item-link {
    cursor: zoom-in;
}

/* --- Overlay --- */
#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(20, 20, 20, 0.88); /* Slightly softer background */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px; /* Increased padding for a larger frame around the image */
}
#lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- Image Container & Image --- */
#lightbox-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#lightbox-image {
    max-width: calc(100vw - 120px); /* New: Forces a horizontal margin */
    max-height: calc(100vh - 120px); /* New: Forces a vertical margin */
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.6);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#lightbox-overlay.active #lightbox-image.loaded {
    opacity: 1;
    transform: scale(1);
}

/* --- Navigation & Close Buttons --- */
#lightbox-close, #lightbox-prev, #lightbox-next {
    position: absolute;
    background: rgba(0,0,0,0.25);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10000;
}
#lightbox-close:hover {
    background: rgba(0,0,0,0.5);
    transform: scale(1.1); /* Makes the 'X' button bigger */
}

#lightbox-prev:hover,
#lightbox-next:hover {
    background: rgba(0,0,0,0.5);
    /* This is the fix: it keeps the arrow centered vertically AND scales it up. */
    transform: translateY(-50%) scale(1.1);
}
#lightbox-close {
    top: 40px;
    right: 40px;
    font-size: 2.5rem;
    line-height: 1;
    padding: 5px 15px 8px;
    border-radius: 50%;
}
#lightbox-prev, #lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    padding: 25px 20px;
    border-radius: 8px;
}
#lightbox-prev { left: 40px; padding-right: 25px; }
#lightbox-next { right: 40px; padding-left: 25px; }

/* --- Loading Spinner --- */
#lightbox-loader {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-yellow);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    display: none; /* Hidden by default */
}
#lightbox-container.loading #lightbox-loader {
    display: block;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #lightbox-overlay {
        padding: 10px; /* Reduces padding on smaller screens */
    }
    #lightbox-close {
        top: 20px;
        right: 20px;
    }
    #lightbox-prev, #lightbox-next {
        padding: 20px 10px;
    }
    #lightbox-image {
        max-width: calc(100vw - 40px); /* Reduces margin on mobile */
        max-height: calc(100vh - 40px); /* Reduces margin on mobile */
    }
    #lightbox-prev { left: 10px; padding-right: 15px; }
    #lightbox-next { right: 10px; padding-left: 15px; }
}

/* file: style.css */
/* ======================================= */
/* ====== GALLERY SCROLL ARROWS ====== */
/* ======================================= */
.resort-photos-wrapper {
    position: relative;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background-color: rgba(30, 30, 30, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.resort-photos-wrapper:hover .scroll-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.scroll-arrow.prev-arrow {
    left: 10px;
}

.scroll-arrow.next-arrow {
    right: 10px;
}

.scroll-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.scroll-arrow:active {
    transform: translateY(-50%) scale(0.9);
    background-color: rgba(0, 0, 0, 0.8);
}

.scroll-arrow.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ======================================= */
/* ====== LIGHTBOX WATERMARK STYLES ====== */
/* ======================================= */

/* This new wrapper shrinks to fit the image, allowing the watermark to be positioned on it. */
#lightbox-image-wrapper {
    position: relative;
    display: flex; /* This provides a more robust shrink-to-fit behavior */
    justify-content: center; /* Ensures image is centered if there's extra space */
    align-items: center; /* Ensures image is centered if there's extra space */
    max-width: 100%;
    max-height: 100%;
}

/* The watermark is now an ::after pseudo-element of the image wrapper */
#lightbox-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 5%; /* Position is now relative to the image's height */
    right: 5%;  /* Position is now relative to the image's width */
    width: 15%;   /* Watermark width is 15% of the image's width */
    height: 0;
    padding-bottom: 15%; /* This ensures the watermark is always a square */
    max-width: 120px;    /* Prevents it from being too big on large images */
    max-height: 120px;
    background-image: url('https://i.postimg.cc/VLcJjDPq/bd64a898e9fe04e5cb56c2468fd9.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}

/* This rule makes the watermark visible only when the lightbox is active and the image is loaded */
#lightbox-overlay.active #lightbox-image-wrapper.loaded::after {
    opacity: 0.4;
}

/* Cruise Enhanced Styling - Forced Specificity */
.resort-info .cruise-line-tag {
    display: inline-block !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: var(--accent-teal) !important; /* Teal Brand Color */
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-right: 20px !important;
    position: relative;
    vertical-align: middle;
}

/* Slick Vertical Separator */
.resort-info .cruise-line-tag::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 1.5px;
    background-color: rgba(0,0,0,0.15);
}

.resort-info .cruise-ship-name {
    display: inline-block !important;
    font-family: 'Playfair Display', serif !important; /* Elegant Serif Font */
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--dark-text) !important;
    letter-spacing: -0.3px !important;
    vertical-align: middle;
}

/* Slick vertical separator */
.cruise-line-tag::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 20%;
    height: 60%;
    width: 1.5px;
    background-color: rgba(0,0,0,0.15);
}

.cruise-ship-name {
    font-weight: 600;
    color: var(--dark-text);
    font-size: 1.05rem;
    letter-spacing: -0.2px;
}

.cruise-description-box {
    margin: 10px 0 15px 0;
    padding: 12px 15px;
    background: rgba(0,0,0,0.03);
    border-left: 3px solid var(--accent-blue);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--light-text);
    max-height: 100px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent;
}

.cruise-description-box::-webkit-scrollbar {
    width: 4px;
}
.cruise-description-box::-webkit-scrollbar-thumb {
    background-color: var(--accent-blue);
    border-radius: 10px;
}

@media (max-width: 768px) {
    .cruise-line-tag {
        display: block;
        border-right: none;
        margin-bottom: 5px;
        padding-right: 0;
    }
}

/* Official Site Badge */
.website-visit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px; /* Space between text and arrow */
    margin-left: 15px !important; /* Backup spacing if gap fails */
    margin-top: 0px !important;
    background-color: transparent;
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    border-radius: 50px;
    padding: 6px 14px; /* Slightly bigger clickable area */
    font-size: 0.75rem; /* Better readability */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    line-height: 1;
    transform: translateY(-1px); /* Optical alignment adjustment */
}

.website-visit-btn svg {
    fill: none; /* Stops the triangle shape */
    stroke: currentColor; /* Draws the lines */
    stroke-width: 1.5;
    width: 10px;
    height: 10px;
    transition: transform 0.3s ease;
}
.website-visit-btn:hover {
    background-color: var(--accent-blue);
    color: var(--white-color);
    box-shadow: 0 4px 15px rgba(69, 195, 210, 0.4);
    transform: translateY(-2px);
    border-color: var(--accent-blue);
}

.website-visit-btn:hover svg {
    transform: translate(2px, -2px); /* Ejects the arrow on hover */
}

/* Specific adjustment for cruise section to align with custom tags */
.resort-item .resort-info {
    flex-wrap: wrap; /* Ensures styling stays safe on small screens */
}