/* ======================== LOCATION PAGE STYLES ======================== */

/* Hero Section */
.location-hero {
    position: relative;
    width: 100%;
    height: 430px;
    overflow: hidden;
}
.mirror-image{
transform: scaleX(-1);
}
.fixed-height{
    height: 4.7rem;
}
.location-hero-img {
    
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.location-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to bottom, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.5)); */
    /* display: flex;
    align-items: flex-end; */
    display: flex;
    /* justify-content: center;    */
    align-items: center;       
    text-align: center;
    padding: 50px 150px;
}

.location-hero-title {
    font-family: 'Poppins', sans-serif;
    font-size: 4rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    /* letter-spacing: 1px; */
    text-shadow: 0px 0px 20px #000;
}

/* Description */
.location-description {
    padding: 50px 20px;
    text-align: center;
}

.text-center {
  text-align: center !important;
}

.destinations1-carousal .image-container {
  position: relative;
  overflow: hidden;
  display: block;
}

.destinations1-carousal .image-container span {
  position: absolute;
  bottom: 2rem;
  left: 15%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  z-index: 2;
  /* text-shadow: 1px 1px 1px #00000036; */
  /* box-shadow: 0 0 10px #00000075; */
  /* border-radius: 5px; */
  padding: 0.6rem 1rem;
}
@media (max-width:667px) {
.destinations1-carousal .image-container span {
    bottom: 1.8rem ;  
    font-size: 1rem ;
}
}
.destinations1-carousal .image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: #000;
  opacity: 0.2; */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.35) 0%,  
    rgba(0, 0, 0, 0.15) 25%,
    rgba(0, 0, 0, 0) 50%
  );
  pointer-events: none;
}

.location-description-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: black;
    max-width: 70rem;
    margin: 0 auto;
    line-height: 1.5;
}

/* Section Title */
.location-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    text-align: center;
    margin-bottom: 35px;
}

.text-primary {
    color: #e02020 !important;
}

.text-grey {
    color: rgb(66 63 65) !important;
}

/* ======================== MUST-VISIT SPOTS ======================== */
.location-spots {
    padding: 30px 0 50px;
    background-color: rgb(241 241 242);
}

.spots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.spot-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 230px;
    cursor: pointer;
}

.spot-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.spot-card:hover img {
    transform: scale(1.06);
}

.spot-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem;
    /* padding: 20px 16px 14px; */
    background: linear-gradient(to top, rgba(241, 4, 9, 0.95), rgba(241, 4, 9, 0.7));
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    text-align: center;
    font-weight: 500;
}

/* ======================== PLACES TO EAT ======================== */
.location-restaurants {
    padding: 50px 0 50px;
}

.places-eat-heading {
    margin-bottom: 35px;
}

.places-eat-tagline {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #111;
    margin: 0 0 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.places-eat-star {
    color: #111;
}

.places-eat-title {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #e02020;
    margin: 0;
    line-height: 1.1;
}

.places-eat-title em {
    font-style: italic;
    font-weight: 600;
}

@media (max-width: 768px) {
    .places-eat-title {
        font-size: 1.8rem;
    }
    .places-eat-tagline {
        font-size: 1.5rem;
    }
}

.restaurant-tag {
    background: rgb(255 194 0);
    color: rgb(92 64 62);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 6px 20px;
    border-radius: 20px;
    display: block;
    width: fit-content;
    margin: 0 auto 16px;
    text-align: center;
    letter-spacing: 0.3px;
}

.restaurants-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 32px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}

.restaurant-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 14px 14px 6px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 360px;
    display: flex;
    flex-direction: column;
}

/* Middle column - popped up slightly */
.restaurants-grid .restaurant-card:nth-child(3n+2) {
    transform: translateY(-30px);
}

.restaurants-grid .restaurant-card:nth-child(3n+2):hover {
    transform: translateY(-32px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.restaurant-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.restaurant-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.4s ease;
    flex: 1;
    min-height: 0;
}

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

.restaurant-name {
    position: static;
    width: 100%;
    padding: 14px 8px 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    background: transparent;
    text-align: center;
}

/* ======================== ACTIVITIES CAROUSEL ======================== */
.location-activities {
    padding: 0px 0 50px;
}

.activities-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
}

.activity-nav-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    /* border: 2px solid #d0d0d0; */
    border:none;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
    z-index: 2;
    padding: 0;
}

.activity-nav-btn:hover {
    border-color: #e02020;
    color: #e02020;
}

.activity-nav-btn svg {
    width: 30px;
    height: 30px;
}

#activities-carousel {
    flex: 1;
    min-width: 0;
}

.activity-card {
    text-align: center;
}

.activity-card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.activity-name {
    padding: 12px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50;
    align-items: center;
    color: white;
}

/* ======================== ACTIVITY HIGHLIGHT SLIDER ======================== */
.activity-highlight-section {
    padding: 0px 0 70px;
    /* matches Owl stagePadding — anchors nav arrows to the active image */
    --highlight-stage-pad: 60px;
    /* Clip horizontally so peek/cloned slides do not push past the viewport,
       but allow vertical overflow so the active card's drop shadow is visible. */
    overflow-x: clip;
    overflow-y: visible;
}

.activity-highlight-section > .container {
    overflow-x: clip;
    overflow-y: visible;
}

.activity-highlight-wrapper {
    position: relative;
    max-width: 620px;
    margin: 0 auto;
}

.highlight-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.highlight-card img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
}

.highlight-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.2) 25%,
        rgba(0, 0, 0, 0) 50%
    );
    pointer-events: none;
    border-radius: 14px;
    transition: background 0.4s ease;
}

.highlight-title {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
    white-space: nowrap;
}

/* Stage needs visible overflow so the active card's shadow + scale are not clipped */
#highlight-carousel .owl-stage-outer {
    overflow: visible;
}
#highlight-carousel .owl-stage {
    display: flex;
    align-items: center;
}
#highlight-carousel .owl-item {
    position: relative;
    z-index: 1;
}

/* Active (center) — full size, popped up with shadow, in front */
#highlight-carousel .owl-item.active {
    z-index: 3;
}
#highlight-carousel .owl-item.active .highlight-card {
    transform: scale(1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

/* Side peeks — shorter, dimmed; slide inward so they tuck behind the active card */
#highlight-carousel .owl-item:not(.active) {
    z-index: 1;
}
#highlight-carousel .owl-item:not(.active) .highlight-card {
    transform: scale(0.85);
    /* opacity: 0.65; */
}

/* Left peek = item that has .active as its NEXT sibling — push it right */
#highlight-carousel .owl-item:has(+ .owl-item.active) .highlight-card {
    transform: translateX(65%) scale(0.85);
    transform-origin: right center;
}

/* Right peek = item right AFTER .active — push it left */
#highlight-carousel .owl-item.active + .owl-item .highlight-card {
    transform: translateX(-65%) scale(0.85);
    transform-origin: left center;
}

#highlight-carousel .owl-item:not(.active) .highlight-card::after {
    background: rgba(0, 0, 0, 0.5);
}
#highlight-carousel .owl-item:not(.active) .highlight-title {
    display: none;
}

.highlight-nav-btn {
    position: absolute;
    top: 1rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease, color 0.2s ease;
}

.highlight-nav-btn:hover {
    background: #e02020;
    color: #fff;
}

/* Anchor arrows just inside the active image (past the stagePadding) */
.highlight-prev {
    left: calc(var(--highlight-stage-pad) + 0.8rem);
}

.highlight-next {
    right: calc(var(--highlight-stage-pad) + 0.8rem);
}

@media (max-width: 1024px) {
    .activity-highlight-section { --highlight-stage-pad: 50px; }
    .highlight-card img { height: 400px; }
}

@media (max-width: 768px) {
    .activity-highlight-section { --highlight-stage-pad: 35px; }
    .highlight-card img { height: 320px; }
    .highlight-title {
        font-size: 1.1rem;
        bottom: 1rem;
    }
    .highlight-nav-btn {
        width: 32px;
        height: 32px;
        top: 0.7rem;
    }
    .highlight-prev { left: calc(var(--highlight-stage-pad) + 0.5rem); }
    .highlight-next { right: calc(var(--highlight-stage-pad) + 0.5rem); }
}

@media (max-width: 576px) {
    .activity-highlight-section { --highlight-stage-pad: 20px; }
    .highlight-card img { height: 260px; }
    .highlight-title {
        font-size: 1.25rem;
        bottom: 0.8rem;
    }
}

/* ======================== LANGUAGES SECTION ======================== */

/* Soft fade-to-white + blur at the bottom of the language hero image */
.language-hero-fade {
    background: #fff;
}
.language-hero-fade .location-hero-img {
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%, #000 80%,
        rgba(0, 0, 0, 0.6) 90%,
        rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
        #000 0%, #000 80%,
        rgba(0, 0, 0, 0.6) 90%,
        rgba(0, 0, 0, 0) 100%);
}
.language-hero-fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    /* background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 55%,
        rgba(255, 255, 255, 0.85) 90%,
        #fff 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 60%); */
    pointer-events: none;
    z-index: 1;
}
/* Keep text overlay above the fade */
.language-hero-fade .location-language-hero-overlay {
    z-index: 2;
}

.location-languages {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.location-language-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.5)); */
    display: flex;
    /* justify-content: center; */
    align-items: center;
    /* text-align: center; */
    padding: 50px 50px;
}

.languages-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.languages-text {
    flex: 1;
}

.languages-tag {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    /* background: #fff; */
    color: #fff;
    display: inline-block;
    /* padding: 6px 18px; */
    /* border-radius: 20px; */
    margin-bottom: 10px;
    /* font-style: italic; */
}

.languages-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
    color: #fff;
    max-width: 30rem;
}

.languages-text p strong {
    font-weight: 600;
    /* text-decoration: underline; */
}


.location-languages-img {
   width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ======================== MORE REASONS TO VISIT ======================== */
.location-reasons {
    padding: 60px 0 40px;
    background-color: #95E3F724;
    margin: 2rem;
    border-radius: 0.5rem;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    /* max-width: 1000px; */
    margin: 0 auto;
}

.reason-card {
     background: white;
     padding: 0.5rem;
     box-shadow: #666;
    /* position: relative; */
    border-radius: 14px;
    /* overflow: hidden; */
    text-align: left;
    display: flex;
    flex-direction: column;
}

.reason-card img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    /* border-radius: 14px; */
    display: block;
    /* margin-bottom: 2.2rem; */
    transition: transform 0.4s ease;
    border-radius: 10px 10px 0 0;
}

.reason-card h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: black;
    /* margin-bottom: 4px; */
}
.text-overlay{
    /* border: 1px solid white; */
    width: 100%;
    padding: 0.6rem;
    /* background: rgb(233 220 211); */
    flex: 1;
    border-radius: 0 0 10px 10px;
}
.reason-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: black;
    line-height: 1.6;
    margin: 0;
}

/* ======================== RESPONSIVE - LARGE DESKTOP (1920+) ======================== */
@media (min-width: 1920px) {
    .location-hero {
        height: 560px;
    }

    .location-hero-title {
        font-size: 3.8rem;
    }

    .spots-grid,
    .restaurants-grid,
    .activities-carousel-wrapper,
    .reasons-grid {
        max-width: 1100px;
    }
}

/* ======================== RESPONSIVE - TABLET LANDSCAPE (1100px) ======================== */
@media (max-width: 1100px) {
    .location-hero {
        height: 400px;
    }

    .location-hero-overlay ,.location-language-hero-overlay {
        padding: 40px 50px;
    }

    .location-hero-title {
        font-size: 2.8rem;
    }
}

/* ======================== RESPONSIVE - TABLET (991px) ======================== */
@media (max-width: 991px) {
    .location-hero {
        height: 450px;
    }

    .location-hero-overlay ,.location-language-hero-overlay{
        padding: 30px 35px;
    }

    .location-hero-title {
        font-size: 2.4rem;
    }

    .location-description {
        padding:130px 16px 25px;
       /* margin-top: 5px; */
    }

    .location-section-title {
        font-size: 1.35rem;
        margin-bottom: 25px;
    }

    .spots-grid {
        gap: 16px;
    }

    .spot-card {
        height: 200px;
    }

    .restaurants-grid {
        gap: 20px 24px;
    }

    .restaurant-card {
        height: 270px;
    }

    .restaurant-card img {
        height: 200px;
    }

    .restaurants-grid .restaurant-card:nth-child(3n+2) {
        transform: translateY(-24px);
    }

    .restaurants-grid .restaurant-card:nth-child(3n+2):hover {
        transform: translateY(-26px);
    }

    /* .activity-card img {
        height: 200px;
    } */

    .languages-content {
        flex-direction: column;
        text-align: left;
        gap: 30px;
    }

    .location-languages-img {
        width: 100%;
    }

    .location-languages-img {
        height: 240px;
        width: 100%;
    }

    .location-languages {
        padding: 45px 0;
    }

    .reasons-grid {
        gap: 20px;
    }

    .reason-card img {
        height: 170px;
    }
}

/* ======================== RESPONSIVE - MOBILE LANDSCAPE / SMALL TABLET (768px) ======================== */
@media (max-width: 768px) {
    .location-hero {
        height: 300px;
    }

    .location-hero-overlay ,.location-language-hero-overlay {
        padding: 24px 24px;
    }

    .location-hero-title {
        font-size: 2rem;
    }

    .location-description {
        padding: 130px 16px 25px;
    }

    .location-description-text {
        font-size: 1.25rem;
        max-width: 100%;
    }

    .location-section-title {
        font-size: 1.2rem;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .location-spots {
        background-color: rgb(241 241 242);
        padding: 20px 0 35px;
    }

    .spots-grid {
        gap: 12px;
    }

    .spot-card {
        height: 180px;
    }

    .spot-label {
        font-size: 0.82rem;
        padding: 16px 12px 10px;
    }

    .location-restaurants {
        padding: 30px 0 35px;
    }

    .restaurants-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 18px;
    }

    .restaurant-card {
        height: 230px;
    }

    .restaurant-card img {
        height: 170px;
    }

    .restaurant-name {
        font-size: 0.85rem;
    }

    /* On 2-column layout, pop every 2nd card */
    .restaurants-grid .restaurant-card:nth-child(3n+2) {
        transform: none;
    }
    .restaurants-grid .restaurant-card:nth-child(3n+2):hover {
        transform: translateY(-2px);
    }
    .restaurants-grid .restaurant-card:nth-child(2n) {
        transform: translateY(-18px);
    }
    .restaurants-grid .restaurant-card:nth-child(2n):hover {
        transform: translateY(-20px);
    }

    .location-activities {
        padding: 30px 0 0px;
    }

    /* .activity-card img {
        height: 180px;
    } */

    .activity-nav-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .activity-nav-btn svg {
        width: 16px;
        height: 16px;
    }

    .location-languages {
        padding: 40px 0;
        margin-top: 10px;
    }

    .languages-content {
        gap: 24px;
    }

    .languages-tag {
        font-size: 0.72rem;
    }

    .languages-text p {
        font-size: 0.9rem;
    }

    .location-languages-img {
        height: 200px;
    }

    .location-reasons {
        padding: 50px 0 0;
    }

    .reasons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .reason-card img {
        height: 160px;
    }

    .reason-card h4 {
        font-size: 0.88rem;
    }

    .reason-card p {
        font-size: 0.78rem;
    }
}

/* ======================== RESPONSIVE - MOBILE PORTRAIT (667px) ======================== */
@media (max-width: 667px) {
    .location-hero {
        height: 260px;
    }

    .location-hero-overlay ,.location-language-hero-overlay{
        padding: 20px 20px;
    }

    .location-hero-title {
        font-size: 2rem;
    }

    .spots-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .spot-card {
        height: 160px;
    }

    .restaurants-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .restaurant-card {
        height: 200px;
    }

    .restaurant-card img {
        height: 145px;
    }

    .restaurants-grid .restaurant-card:nth-child(2n) {
        transform: translateY(-14px);
    }

    /* .activity-card img {
        height: 170px;
    } */

    .location-languages-img{
        height: 180px;
    }

    .reasons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .reason-card img {
        height: 140px;
    }
}

/* ======================== RESPONSIVE - SMALL MOBILE (576px) ======================== */
@media (max-width: 576px) {
    .location-hero {
        height: 240px;
    }

    .location-hero-title {
        font-size: 2rem;
    }

    .location-description {
        padding: 115px 12px 20px;
    }

    .location-description-text {
        font-size: 1.25rem;
        line-height: 1.7;
    }

    .location-section-title {
        font-size: 1.2rem;
        margin-bottom: 18px;
    }

    .spots-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .spot-card {
        height: 140px;
    }

    .spot-label {
        font-size: 0.82rem;
        padding: 14px 8px 8px;
    }

    .restaurants-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .restaurant-card img {
        height: 120px;
        border-radius: 10px;
    }

    .restaurant-name {
        font-size: 1.25rem;
        padding: 6px 2px 0;
    }

    .restaurant-tag {
        font-size: 1.25rem;
        padding: 5px 14px;
    }

    .activity-nav-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .activity-nav-btn svg {
        width: 24px;
        height: 24px;
    }

    /* .activity-card img {
        height: 160px;
        border-radius: 10px;
    } */

    .activity-name {
        font-size: 0.82rem;
    }

    .languages-content {
        gap: 20px;
    }

    .languages-tag {
        font-size: 1.5rem;
        /* padding: 5px 14px; */
    }

    .languages-text p {
        font-size: 1.25rem;
        line-height: 1.7;
    }

    .location-languages-img{
        height: 170px;
        border-radius: 10px;
    }

    .location-reasons {
        padding: 35px 0 20px;
    }

    .reasons-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .reason-card img {
        height: 120px;
        /* border-radius: 10px; */
    }

    .reason-card h4 {
        font-size: 1.5rem;
        margin-bottom: 2px;
    }

    .reason-card p {
        font-size: 1.25rem;
        line-height: 1.5;
    }
}

/* ======================== RESPONSIVE - EXTRA SMALL MOBILE (480px) ======================== */
@media (max-width: 480px) {
    .location-hero {
        height: 450px;
    }

    .location-hero-overlay ,.location-language-hero-overlay{
        padding: 16px 16px;
                align-items: flex-start;
    }

    .location-hero-title {
        font-size: 2rem;
    }

    .spot-card {
        height: 130px;
    }

    .restaurants-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .restaurant-card img {
        height: 110px;
    }

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

    .reason-card img {
        height: 110px;
    }
}

/* ======================== MUST-VISIT SPOTS CAROUSEL ======================== */
.must-visit-carousel-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Base 1x card width = (container - 4 gaps of 15px) / 3.25 visible units
   so on desktop we see [2x][1x][0.25x] */
.must-visit-carousal {
    width: calc((min(100vw, 1170px) - 60px) / 3.25);
}

.must-visit-featured {
    width: calc(((min(100vw, 1170px) - 60px) / 3.25) * 2);
}

.must-visit-carousal .image-container {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 14px;
    height: 400px;
    width: 100%;
}

.must-visit-carousal .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.must-visit-carousal .image-container:hover img {
    transform: scale(1.05);
}

.must-visit-carousal .image-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 30%,
        rgba(0, 0, 0, 0) 55%
    );
    pointer-events: none;
}

.must-visit-carousal .image-container .spot-title {
    position: absolute;
    left: 1.5rem;
    bottom: 1.2rem;
    transform: none;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    z-index: 2;
    padding: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1024px) {
    .must-visit-carousal {
        width: calc((100vw - 50px) / 2.5);
    }
    .must-visit-featured {
        width: calc(((100vw - 50px) / 2.5) * 1.6);
    }
    .must-visit-carousal .image-container {
        height: 340px;
    }
    .must-visit-carousal .image-container .spot-title {
        font-size: 1.3rem;
        left: 1.2rem;
        bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .must-visit-carousal {
        width: calc((100vw - 40px) / 2.2);
    }
    .must-visit-featured {
        width: calc(((100vw - 40px) / 2.2) * 1.5);
    }
    .must-visit-carousal .image-container {
        height: 260px;
    }
    .must-visit-carousal .image-container .spot-title {
        font-size: 1.1rem;
        left: 1rem;
        bottom: 1.25rem;
    }
}

@media (max-width: 576px) {
    .must-visit-carousal .image-container {
        height: 220px;
    }
    .must-visit-carousal .image-container .spot-title {
        font-size: 1.25rem;
    }
}

/* ======================== KALPENI GALLERY COLLAGE ======================== */
.gallery-section {
    padding: 10px 0 50px;
    /* background-color: rgb(241 241 242); */
}

.gallery {
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-top {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: center;
}

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

.gallery-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 300px;
}
.gallery-item-2 {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 380px;
}
.gallery-item-3 {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 400px;
}

.gallery-top .gallery-featured {
    height: 355px;
    /* width: 550px; */
}

.gallery-item img , .gallery-item-2 img, .gallery-item-3 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover img ,.gallery-item-3:hover img,.gallery-item-2:hover img{
    transform: scale(1.06);
}

@media (max-width: 768px) {
.gallery-item-2 {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 180px;
}
.gallery-item-3 {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 200px;
}

    .gallery-top {
        grid-template-columns: 1fr 1.3fr 1fr;
        gap: 8px;
        margin-bottom: 8px;
    }

    .gallery-bottom {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .gallery-item {
        height: 110px;
    }

    .gallery-top .gallery-featured {
        height: 140px;
    }
}

/* ======================== SCATTERED POLAROID STRIP ======================== */
.polaroid-strip {
    position: relative;
    /* Confine polaroid children's z-indexes (transform creates stacking
       contexts on each .polaroid). Without this, their z-index 1-4 escapes
       into the root and renders above the mobile fixed bottom tab bar
       (.nav-scroll-wrapper, z-index 1050). */
    isolation: isolate;
    z-index: 0;
    /* Top half white, bottom half red */
    background: linear-gradient(to bottom, #fff 0%, #fff 50%, #E71720 50%, #E71720 100%);
    margin: 0;
    /* Bottom padding contains the cards' translateY overhang INSIDE the
       strip's red half, so the strip's red flushes directly into the red
       footer with no transparent gap. Avoids the negative-z-index ::after
       hack which renders unreliably on iOS Safari. */
    padding: 15px 40px 180px;
    /* Clip horizontally; vertical visible isn't needed any more since the
       overhang now fits inside the padding. */
    overflow: hidden;
}

/* The site-wide footer adds margin-top: 6rem which leaves a white gap
   between the polaroid strip and the red footer. Drop the margin when the
   footer follows the strip so the two red blocks sit flush. !important
   guards against any later .skyhop-footer override. */
.polaroid-strip ~ #footer .skyhop-footer,
.polaroid-strip + #footer .skyhop-footer {
    margin-top: 0 !important;
}

/* Inner row keeps the cards centered and width-constrained */
.polaroid-row {
    max-width: 1400px;
}

.polaroid-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 1600px;
    padding-bottom: 4rem;
    margin: -140px auto 0;
}

.polaroid {
    flex: 0 0 auto;
    width: 250px;
    /* background: #fff; */
    border-radius: 14px;
    /* padding: 10px; */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    margin: 0 -10px;
    position: relative;
    /* defaults — overridden per-card below */
    --rot: 0deg;
    --ty: 0px;
    --overhang: 150px;
    transform: rotate(var(--rot)) translateY(calc(var(--overhang) + var(--ty)));
}

.polaroid img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}

/* Alternating tilt + push down so the bottom of each card hangs over the footer */
.polaroid:nth-child(1) { --rot: -10deg; --ty: 11px;  z-index: 1; }
.polaroid:nth-child(2) { --rot:  5deg; --ty: 50px; z-index: 2; margin-left: 3rem; }
.polaroid:nth-child(3) { --rot: -3deg; --ty: 5px;  z-index: 3; }
.polaroid:nth-child(4) { --rot:  -9deg; --ty: 56px; z-index: 4; margin-right: 1rem; }
.polaroid:nth-child(5) { --rot: 8deg; --ty: 4px;  z-index: 1; margin-left: 2rem;}
/* 
.polaroid:hover {
    transform: rotate(0deg) translateY(calc(var(--overhang) + var(--ty) - 12px)) scale(1.05);
    z-index: 5;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
} */

@media (max-width: 1199px) {
    .polaroid-strip {
        padding: 15px 35px 150px;
    }
    .polaroid-row {
        margin-top: -100px;
    }
    .polaroid {
        width: 200px;
        margin: 0 -20px;
        --overhang: 110px;
    }
    .polaroid img {
        height: 320px;
    }
}

@media (max-width: 991px) {
    .polaroid:nth-child(1) { --rot: -10deg; --ty: 11px;  z-index: 1; margin-right: -4rem;}
.polaroid:nth-child(2) { --rot:  5deg; --ty: 50px; z-index: 2; margin-left: 4rem;}
.polaroid:nth-child(3) { --rot: -3deg; --ty: 5px;  z-index: 3;margin-left: -2rem; }
.polaroid:nth-child(4) { --rot:  -9deg; --ty: 56px; z-index: 4;margin-right: -6rem; }
.polaroid:nth-child(5) { --rot: 8deg; --ty: 4px;  z-index: 1;margin-left: 0rem;}

    .polaroid-strip {
        padding: 15px 30px 110px;
    }
    .polaroid-row {
        margin-top: -60px;
    }
    .polaroid {
        width: 160px;
        margin: 0 -8px;
        --overhang: 70px;
    }
    .polaroid img {
        height: 260px;
    }
}

@media (max-width: 768px) {
    .polaroid-strip {
        padding: 15px 24px 90px;
        /* Smaller white portion on mobile so there's no white gap near the footer */
        background: linear-gradient(to bottom, #fff 0%, #fff 30%, #E71720 30%, #E71720 100%);
    }
    .polaroid-row {
        margin-top: -45px;
    }
    .polaroid {
        width: 130px;
        margin: 0 -6px;
        --overhang: 50px;
    }
    .polaroid img {
        height: 220px;
    }
}

@media (max-width: 576px) {
    .polaroid-strip {
        padding: 10px 16px 70px;
        /* Even smaller white portion on small mobile */
        background: linear-gradient(to bottom, #fff 0%, #fff 50%, #E71720 50%, #E71720 100%);
    }
    .polaroid-row {
        margin-top: -20px;
    }
    .polaroid {
        width: 100px;
        margin: 0 -20px;
        border-radius: 10px;
        --overhang: 40px;
    }
    .polaroid img {
        height: 160px;
        border-radius: 6px;
    }
}