/* ========== BASE ========== */

:root {
    /* Brown & Green Eco Theme Colors */
    --eco-brown: #8B4513;
    --eco-brown-dark: #654321;
    --eco-brown-light: #D2B48C;
    --eco-brown-lighter: #F5E6D3;
    --eco-green: #2D5016;
    --eco-green-dark: #1A3009;
    --eco-green-medium: #5A8A3A;
    --eco-green-light: #7CB342;
    --eco-green-lighter: #C5E1A5;
    --eco-cream: #F5F1E8;
    --eco-sand: #E8DCC5;
    --eco-earth: #3E2723;
    --eco-text: #2C2416;
    --eco-muted: #6B5D4F;

    /* Legacy variables for compatibility */
    --earth: #3E2723;
    --forest: #5A8A3A;
    --cream: #F5F1E8;
    --sand: #E8DCC5;
    --text: #2C2416;
    --muted: #6B5D4F;

    --panel: rgba(255, 255, 255, 0.96);
    --shadow: 0 22px 60px rgba(45, 80, 22, 0.18);
    --shadow-brown: 0 18px 45px rgba(139, 69, 19, 0.15);
    --radius: 18px;
}

body {
    margin: 0;
    font-family: 'Poppins', 'Noto Sans Tamil', system-ui, sans-serif;
    color: var(--eco-text);
    background: linear-gradient(180deg, #F5F1E8 0%, #F0EBE0 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Kalam', 'Kavivanar', 'Noto Sans Tamil', cursive;
    margin: 0;
    color: var(--eco-green-dark);
    font-weight: 700;
    letter-spacing: -0.02em;
}

p {
    margin: 0;
}

.max-width {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (max-width: 480px) {
    .max-width {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

.section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--eco-cream) 0%, #F0EBE0 100%);
    position: relative;
}

.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--eco-green-light), transparent);
    opacity: 0.3;
}

.section-title {
    display: inline-block;

    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2rem);
    margin-bottom: 0.35rem;
    color: #3E2723;
}

.section-lead {
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 1.3rem;
    max-width: 780px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.2rem;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--eco-green-medium) 0%, var(--eco-green) 50%, var(--eco-green-dark) 100%);
    color: #ffffff;
    box-shadow: 0 18px 35px rgba(90, 138, 58, 0.4), 0 0 24px rgba(45, 80, 22, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--eco-green) 0%, var(--eco-green-dark) 50%, var(--eco-green-dark) 100%);
    box-shadow: 0 22px 45px rgba(90, 138, 58, 0.5), 0 0 30px rgba(45, 80, 22, 0.4);
}

.btn-brown {
    background: linear-gradient(135deg, var(--eco-brown-light) 0%, var(--eco-brown) 50%, var(--eco-brown-dark) 100%);
    color: #ffffff;
    box-shadow: 0 18px 35px rgba(139, 69, 19, 0.4), 0 0 24px rgba(101, 67, 33, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.btn-brown:hover {
    background: linear-gradient(135deg, var(--eco-brown) 0%, var(--eco-brown-dark) 50%, var(--eco-brown-dark) 100%);
    box-shadow: 0 22px 45px rgba(139, 69, 19, 0.5), 0 0 30px rgba(101, 67, 33, 0.4);
}

.btn-ghost {
    border: 2px solid var(--eco-green-medium);
    color: var(--eco-green-dark);
    background: rgba(197, 225, 165, 0.2);
    backdrop-filter: blur(10px);
}

.btn-ghost:hover {
    background: rgba(197, 225, 165, 0.4);
    border-color: var(--eco-green);
}

.btn:hover {
    transform: translateY(-3px);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--eco-green-light);
    background: linear-gradient(135deg, rgba(197, 225, 165, 0.3), rgba(124, 179, 66, 0.2));
    color: var(--eco-green-dark);
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    backdrop-filter: blur(10px);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    padding: 0.45rem 0.85rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(197, 225, 165, 0.25), rgba(124, 179, 66, 0.15));
    border: 1px solid var(--eco-green-light);
    color: var(--eco-green-dark);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.chip:hover {
    background: linear-gradient(135deg, rgba(197, 225, 165, 0.4), rgba(124, 179, 66, 0.25));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 138, 58, 0.2);
}

.fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Organic text shadow for headings */
h1,
h2,
h3 {
    text-shadow: 0 2px 4px rgba(45, 80, 22, 0.1);
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Selection color */
::selection {
    background: var(--eco-green-lighter);
    color: var(--eco-green-dark);
}

::-moz-selection {
    background: var(--eco-green-lighter);
    color: var(--eco-green-dark);
}

/* Link styles */
a {
    transition: color 0.3s ease;
}

a:hover {
    color: var(--eco-green);
}

/* ===== Tamilkaadu: shared image dimensions, alignment, font sizes ===== */
main img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Shared image containers – consistent height/width across pages */
main .heritage-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--eco-sand);
}

main .heritage-card-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    background: var(--eco-sand);
}

main .frame-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

main .room-image-placeholder,
main .room-image-placeholder img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--eco-sand);
}

main .room-card-image-wrapper {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    background: var(--eco-sand);
}

main .room-card-image-wrapper img,
main .room-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center top;
}

/* Typography – consistent font sizes site-wide */
main .section-title,
main h2.section-title {
    font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2rem);
    font-weight: 500;
    font-family: 'Playfair Display', serif;
    color: var(--eco-earth);
}

main .heritage-text-content h2,
main .heritage-section h2 {
    font-size: 2rem;
    font-weight: 500;
    font-family: 'Playfair Display', serif;
    color: var(--eco-earth);
}

main .room-details h3,
main .room-card-title {
    font-size: 1.75rem;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    color: var(--eco-earth);
}

main .room-price,
main .heritage-section .room-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--eco-brown);
    font-family: 'Poppins', sans-serif;
}

main .heritage-text-content p,
main .heritage-section p,
main .section-lead {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--eco-text);
    font-family: 'Poppins', sans-serif;
}

/* Alignment – content inside max-width */
main .max-width {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (max-width: 768px) {
    main .heritage-image {
        height: 380px;
    }

    main .heritage-card-image {
        height: 260px;
    }

    main .room-image-placeholder,
    main .room-image-placeholder img {
        height: 320px;
    }

    main .room-card-image-wrapper {
        height: 260px;
    }

    main .heritage-text-content h2,
    main .heritage-section h2 {
        font-size: 1.75rem;
    }

    main .room-details h3,
    main .room-card-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    main .heritage-image {
        height: 280px;
    }

    main .heritage-card-image {
        height: 200px;
    }

    main .room-image-placeholder,
    main .room-image-placeholder img {
        height: 260px;
    }

    main .room-card-image-wrapper {
        height: 220px;
    }

    main .heritage-text-content h2,
    main .heritage-section h2 {
        font-size: 1.5rem;
    }

    main .room-details h3,
    main .room-card-title {
        font-size: 1.35rem;
    }

    main .max-width {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

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

.tk-header {
    position: sticky;
    top: 0;
    z-index: 60;
    /* ensure above hero/overlays */
    overflow: visible;
    backdrop-filter: blur(14px);
    background: #202d26;
    border-bottom: 2px solid rgba(90, 138, 58, 0.15);
    transition: box-shadow 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
}

.tk-header.scrolled {
    box-shadow: 0 12px 40px rgba(45, 80, 22, 0.15), 0 4px 12px rgba(139, 69, 19, 0.1);
    border-bottom-color: rgba(90, 138, 58, 0.25);
}

.tk-max {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 480px) {
    .tk-max {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .tk-bar {
        min-height: 64px;
    }
}

/* Add comfortable vertical rhythm */
.tk-bar {
    min-height: 78px;
}

/* Three-column grid: equal side gaps, nav centered */
.tk-bar-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
@media (min-width: 768px) {
    .tk-bar-grid {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}
.tk-bar-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}
.tk-bar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}
.tk-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

/* Mobile: logo left, hamburger right corner */
@media (max-width: 767px) {
    .tk-bar-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tk-bar-center {
        display: none !important;
    }
    .tk-bar-left {
        flex: 0 0 auto;
    }
    .tk-bar-right {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

.tk-nav a {
    padding: 0.35rem 0;
}

.tk-nav,
.tk-nav a {
    font-family: 'Poppins', 'Noto Sans Tamil', sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Header nav & CTA always visible on dark header (all pages e.g. nearby) */
.tk-header .tk-nav,
.tk-header .tk-nav a {
    color: #fff !important;
}
.tk-header .tk-nav a:hover {
    opacity: 0.9;
}
.tk-header .tk-cta .btn-primary {
    background: #8B4513 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.35);
}

.tk-brand {
    font-family: 'Kalam', 'Kavivanar', 'Noto Sans Tamil', cursive;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tk-cta {
    font-family: 'Kalam', 'Kavivanar', cursive;
    font-weight: 600;
}

.tk-sectors {
    position: relative;
}

.tk-sectors-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: rgba(245, 241, 232, 0.98);
    color: var(--eco-earth);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(45, 80, 22, 0.15), 0 4px 12px rgba(139, 69, 19, 0.1);
    border: 1px solid rgba(90, 138, 58, 0.2);
    padding: 0.5rem 0.75rem;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    min-width: 200px;
    z-index: 80;
}

.tk-sectors:hover .tk-sectors-menu,
.tk-sectors:focus-within .tk-sectors-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.tk-sectors-menu a {
    display: block;
    padding: 0.4rem 0.2rem;
    color: var(--eco-green-dark);
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tk-sectors-menu a:hover {
    color: var(--eco-green);
    background: rgba(197, 225, 165, 0.2);
    padding-left: 0.5rem;
}

/* Mobile menu visibility helper */
.tk-mobile {
    display: none;
}

.tk-mobile.show {
    display: block;
}

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

.tk-footer {
    background: linear-gradient(180deg, #3E2723 0%, #5D4037 50%, #654321 100%);
    color: #f8f6ef;
    padding: 3.5rem 0 2.5rem;
    border-top: 2px solid rgba(139, 69, 19, 0.4);
    position: relative;
}

.tk-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--eco-brown-light), #A0522D, transparent);
    opacity: 0.5;
}

.tk-footer .max-width {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.tk-footer h3 {
    font-family: 'Poppins', 'Noto Sans Tamil', sans-serif;
    margin: 0 0 0.75rem;
    color: #F5E6D3;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
}

.tk-footer h3.tk-footer-brand {
    font-family: 'Kalam', 'Kavivanar', 'Noto Sans Tamil', cursive;
    font-weight: 700;
    font-size: 1.25rem;
}

.tk-footer p,
.tk-footer li {
    font-family: 'Poppins', 'Noto Sans Tamil', sans-serif;
}

.tk-footer a {
    font-family: 'Poppins', 'Noto Sans Tamil', sans-serif;
    color: #f8f6ef;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tk-footer a:hover {
    color: var(--eco-brown-light);
    padding-left: 4px;
}

.tk-footer .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.4rem;
}

.tk-footer .panel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(210, 180, 140, 0.25);
    border-radius: 14px;
    padding: 1.1rem;
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.tk-footer .panel:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(210, 180, 140, 0.4);
    transform: translateY(-2px);
}

.tk-footer .links li {
    margin-bottom: 0.35rem;
    list-style: none;
}

.tk-footer .social {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.tk-footer .social a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(210, 180, 140, 0.2);
    border: 1px solid rgba(210, 180, 140, 0.3);
    transition: all 0.3s ease;
}

.tk-footer .social a:hover {
    background: rgba(210, 180, 140, 0.35);
    border-color: var(--eco-brown-light);
    transform: translateY(-2px);
    color: var(--eco-brown-light);
}

.tk-footer .newsletter input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(210, 180, 140, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fdfcf9;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

.tk-footer .newsletter input:focus {
    outline: none;
    border-color: var(--eco-brown-light);
    background: rgba(255, 255, 255, 0.15);
}

.tk-footer .newsletter input::placeholder {
    color: rgba(210, 180, 140, 0.6);
}

.tk-footer .newsletter button {
    margin-top: 0.75rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-family: 'Kalam', cursive;
    color: #ffffff;
    background: linear-gradient(135deg, var(--eco-brown-light) 0%, var(--eco-brown) 50%, var(--eco-brown-dark) 100%);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
}

.tk-footer .newsletter button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 69, 19, 0.4);
    background: linear-gradient(135deg, var(--eco-brown) 0%, var(--eco-brown-dark) 50%, var(--eco-brown-dark) 100%);
}

.tk-footer .bottom {
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(210, 180, 140, 0.25);
    text-align: center;
    color: rgba(210, 180, 140, 0.85);
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
}

.tk-footer .bottom a {
    color: var(--eco-brown-light);
    transition: color 0.2s ease;
}

.tk-footer .bottom a:hover {
    color: #F5E6D3;
}

@media (max-width: 480px) {
    .tk-footer .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 640px) {
    .tk-footer {
        padding: 3rem 0 2rem;
    }
}

/* ========== INDEX ========== */

/* Kalpa-inspired Heritage Styling */
.heritage-section {
    background: #F5F1E8;
    padding: 5rem 0;
}

.heritage-section-dark {
    background: #3E2723;
    color: white;
    padding: 5rem 0;
}

.heritage-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.heritage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.heritage-card-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    background: #E8DCC5;
}

.heritage-card-content {
    padding: 2rem;
}

.heritage-btn {
    background: #8B4513;
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: background 0.3s ease;
    font-family: 'Poppins', sans-serif;
    border: none;
    cursor: pointer;
}

.heritage-btn:hover {
    background: #654321;
    color: white;
}

.heritage-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.heritage-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
    background: #E8DCC5;
}

.heritage-text-content h2 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: #3E2723;
    font-family: 'Playfair Display', serif;
    display: inline-block;

    padding: 0.5rem 1.5rem;
    border-radius: 4px;
}

.heritage-text-content p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4A4A4A;
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
}

.heritage-section-dark h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
    display: inline-block;

    padding: 0.5rem 1.5rem;
    border-radius: 4px;
}

.heritage-section-dark p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
}

/* Cultural Background Pattern */
.accommodation-showcase-section {
    background: #F5F1E8;
    position: relative;
}

.cultural-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(139, 69, 19, 0.1) 35px, rgba(139, 69, 19, 0.1) 70px),
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(101, 67, 33, 0.1) 35px, rgba(101, 67, 33, 0.1) 70px),
        radial-gradient(circle at 20% 50%, rgba(139, 69, 19, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(101, 67, 33, 0.05) 0%, transparent 50%);
    background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%;
    pointer-events: none;
    z-index: 0;
}

.cultural-bg-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(139, 69, 19, 0.08) 40px, rgba(139, 69, 19, 0.08) 80px),
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(101, 67, 33, 0.08) 40px, rgba(101, 67, 33, 0.08) 80px);
    background-size: 100% 100%;
}

/* Accommodation Showcase Styles */
.accommodation-showcase {
    position: relative;
    min-height: 650px;
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accommodation-frame {
    position: absolute;
    width: 340px;
    height: 260px;
}

.frame-border {
    width: 100%;
    height: 100%;
    border: 10px solid #8B4513;
    border-radius: 12px;
    padding: 5px;
    background: #F5F1E8;
    box-shadow: 0 8px 24px rgba(62, 39, 35, 0.25);
    transform: rotate(-2deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.accommodation-frame:hover .frame-border {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 12px 32px rgba(62, 39, 35, 0.35);
}

.frame-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.frame-top {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.frame-bottom-left {
    top: 200px;
    left: 8%;
    z-index: 2;
}

.frame-bottom-left .frame-border {
    transform: rotate(5deg);
}

.frame-bottom-left:hover .frame-border {
    transform: rotate(0deg) scale(1.05);
}

.frame-bottom-right {
    top: 220px;
    right: 8%;
    z-index: 1;
}

.frame-bottom-right .frame-border {
    transform: rotate(-5deg);
}

.frame-bottom-right:hover .frame-border {
    transform: rotate(0deg) scale(1.05);
}

.frame-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.label-top-right {
    top: 50%;
    left: calc(100% + 1rem);
    transform: translateY(-50%);
    right: auto;
    flex-direction: row;
}

.label-bottom-left {
    top: 180px;
    left: -200px;
    flex-direction: row-reverse;
}

.label-bottom-right {
    top: 200px;
    right: -140px;
    flex-direction: row;
}

.label-text {
    white-space: nowrap;
}

.label-arrow {
    flex-shrink: 0;
}

@media (max-width: 1024px) {

    .accommodation-showcase-section .text-center.mb-12,
    .accommodation-showcase-section .accommodation-showcase-heading {
        display: none !important;
    }

    .accommodation-showcase-section .frame-label {
        display: none !important;
    }

    .accommodation-showcase {
        min-height: 650px;
        max-width: 100%;
    }

    .accommodation-frame {
        width: 300px;
        height: 230px;
    }

    .frame-top {
        top: 10px;
    }

    .frame-bottom-left {
        top: auto;
        bottom: 80px;
        left: 2%;
    }

    .frame-bottom-right {
        top: auto;
        bottom: 60px;
        right: 2%;
    }

    .label-top-right {
        left: calc(100% + 0.75rem);
        top: 50%;
        transform: translateY(-50%);
        right: auto;
    }

    .label-bottom-left {
        left: -160px;
    }

    .label-bottom-right {
        right: -120px;
    }
}

@media (max-width: 768px) {
    .accommodation-showcase {
        min-height: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        padding: 2rem 0;
    }

    .accommodation-frame {
        position: relative;
        width: 100%;
        max-width: 350px;
        height: 260px;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .frame-border {
        transform: rotate(0deg) !important;
    }

    .frame-label {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: 1rem;
        justify-content: center;
    }

    .label-arrow {
        display: none;
    }
}

@media (max-width: 480px) {
    .accommodation-frame {
        max-width: 100%;
        height: 220px;
    }

    .room-listing-content {
        padding: 0 0.5rem;
    }
}

.room-listing {
    background: #F5F1E8;
    padding: 3rem 0;
    margin: 2rem 0;
}

.room-listing-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.room-image-placeholder {
    width: 100%;
    height: 400px;
    background: #E8DCC5;
    border-radius: 8px;
    object-fit: cover;
}

.room-details h3 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #3E2723;
    font-family: 'Playfair Display', serif;
}

.room-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.room-features li {
    padding: 0.5rem 0;
    color: #4A4A4A;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    position: relative;
    padding-left: 1.5rem;
}

.room-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #8B4513;
    font-weight: bold;
}

.room-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: #8B4513;
    margin: 1.5rem 0;
    font-family: 'Poppins', sans-serif;
}

@media (max-width: 768px) {

    .heritage-two-col,
    .room-listing-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .heritage-section,
    .heritage-section-dark {
        padding: 3rem 0;
    }
}

/* ========== STAY_AREA ========== */

/* Stay Page Hero - Matching Screenshot Design */
.stay-hero {
    background: #F5F1E8;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.stay-hero-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
    min-height: 600px;
}

.stay-hero-content {
    position: relative;
    z-index: 1;
}

.stay-hero-subtitle {
    font-size: 0.85rem;
    font-weight: 400;
    color: #8B4513;
    margin-bottom: 0.75rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.stay-hero-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #3E2723;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
}

.stay-hero-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4A4A4A;
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
    max-width: 550px;
}

.stay-hero-cta {
    font-size: 0.95rem;
    color: #8B4513;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.stay-hero-cta strong {
    color: #3E2723;
    font-weight: 600;
}

/* Image Carousel - Right to Left Animation */
.stay-hero-carousel {
    position: relative;
    height: 600px;
    overflow: hidden;
    border-radius: 8px;
}

.carousel-track {
    display: flex;
    animation: scrollRightToLeft 30s linear infinite;
    gap: 1rem;
    height: 100%;
}

.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes scrollRightToLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.carousel-item {
    flex: 0 0 auto;
    width: 400px;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

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

/* Duplicate items for seamless loop */
.carousel-track::after {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 400px;
}

@media (max-width: 1024px) {
    .stay-hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

    .stay-hero-carousel {
        height: 400px;
    }

    .carousel-item {
        width: 300px;
    }
}

.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

@media (min-width: 1024px) {
    .room-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .room-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .stay-hero {
        padding: 3rem 0 2rem;
    }

    .stay-hero-title {
        font-size: 1.5rem;
    }

    .stay-hero-carousel {
        height: 280px;
    }

    .carousel-item {
        width: 100%;
        max-width: 280px;
    }
}

/* Card Design with Asymmetric Shape - Matching Home Page Theme */
.room-card {
    background: white;
    /* Asymmetric shape: angled top edge - left side taller (0%) than right side (12%) */
    clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%);
    /* Rounded bottom corners matching home page */
    border-radius: 0 0 8px 8px;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top: 0;
}


.room-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Image Container - Matches card's asymmetric top edge */
.room-card-image-wrapper {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    background: #E8DCC5;
    /* Match the card's angled top edge - left taller than right */
    clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%);
}

/* Room Image - Fills the asymmetric container */
.room-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center top;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Card Content */
.room-card-content {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Top Row: Address + Icons on same line */
.room-card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.room-card-location {
    color: #4A4A4A;
    font-size: 0.875rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    flex: 1;
}

.room-card-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 1rem;
}

.room-icon {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--eco-text);
    font-size: 0.875rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.room-icon i {
    color: #8B4513;
    font-size: 0.9rem;
}

/* Property Name - Large Bold - Matching Home Page */
.room-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #3E2723;
    margin-bottom: 0.75rem;
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
}

/* Price - Large Bold below title */
.room-card-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #8B4513;
    margin-bottom: 0.75rem;
    font-family: 'Poppins', sans-serif;
}

.room-card-price span {
    font-size: 0.875rem;
    color: #4A4A4A;
    font-weight: 400;
}

.room-card-description {
    color: #4A4A4A;
    line-height: 1.7;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Details section – hidden, content used for tooltip */
.room-card-details {
    display: none;
}

.amenities-section {
    margin-bottom: 1.25rem;
}

.amenities-section:last-child {
    margin-bottom: 0;
}

.amenities-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #3E2723;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.amenities-title i {
    color: #8B4513;
    font-size: 0.8rem;
}

.amenities-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.amenities-list li {
    padding: 0.35rem 0;
    color: var(--eco-text);
    font-size: 0.875rem;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    position: relative;
    padding-left: 1.5rem;
}

.amenities-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #8B4513;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Tooltip trigger – "View amenities" link */
.room-details-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0;
    color: #8B4513;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    background: none;
    border: none;
    margin-top: 0.5rem;
    transition: color 0.2s ease;
}

.room-details-tooltip-trigger:hover {
    color: #654321;
}

.room-details-tooltip-trigger i {
    font-size: 0.85rem;
}

/* Tooltip popover */
.room-tooltip-popover {
    position: fixed;
    z-index: 9999;
    max-width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid #E8DCC5;
    padding: 1.25rem;
    padding-top: 2.25rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: #4A4A4A;
    line-height: 1.6;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.room-tooltip-popover.visible {
    opacity: 1;
    visibility: visible;
}

.room-tooltip-popover .amenities-section {
    margin-bottom: 1rem;
}

.room-tooltip-popover .amenities-section:last-child {
    margin-bottom: 0;
}

.room-tooltip-popover .amenities-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #3E2723;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.room-tooltip-popover .amenities-title i {
    color: #8B4513;
}

.room-tooltip-popover .amenities-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.room-tooltip-popover .amenities-list li {
    padding: 0.25rem 0;
    padding-left: 1.25rem;
    position: relative;
}

.room-tooltip-popover .amenities-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #8B4513;
    font-weight: bold;
}

.room-tooltip-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #4A4A4A;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
}

.room-tooltip-close:hover {
    color: #3E2723;
    background: #F5F1E8;
}

.room-tooltip-close i {
    font-size: 1rem;
}

/* Book Button - Matching Home Page Heritage Button (works as button or link to #booking) */
.book-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: #8B4513;
    color: white !important;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
    font-family: 'Poppins', sans-serif;
    margin-top: 1rem;
    display: block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

a.book-btn:hover {
    background: #654321;
    color: white !important;
}

.book-btn:hover {
    background: #654321;
    color: white;
}

/* Common Amenities - Matching Home Page Theme */
.common-amenities {
    background: white;
    border-radius: 8px;
    padding: 3rem;
    margin-top: 4rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.common-amenities-title {
    font-size: 2rem;
    font-weight: 500;
    color: #3E2723;
    margin-bottom: 0.75rem;
    font-family: 'Playfair Display', serif;
    text-align: center;
    display: inline-block;

    padding: 0.5rem 1.5rem;
    border-radius: 4px;
}

.common-amenities-subtitle {
    text-align: center;
    color: #4A4A4A;
    margin-bottom: 2rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(90, 138, 58, 0.1);
    transition: all 0.3s ease;
}

.amenity-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #8B4513;
}

.amenity-item i {
    color: #8B4513;
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

.amenity-item span {
    color: #4A4A4A;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Section Styling - Matching Home Page */
.section-padding {
    padding: 5rem 0;
    background: #F5F1E8;
}

/* RACI Matrix Styling */
.raci-section {
    background: #F5F1E8;
    padding: 5rem 0;
}

.raci-header {
    text-align: center;
    margin-bottom: 3rem;
}

.raci-header h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #3E2723;
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', serif;
}

.raci-header .subtitle {
    font-size: 0.95rem;
    color: #8B4513;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.raci-legend {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.raci-legend h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #3E2723;
    margin-bottom: 1.25rem;
    font-family: 'Playfair Display', serif;
}

.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #F5F1E8;
    border-radius: 6px;
}

.legend-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
    flex-shrink: 0;
}

.badge-r {
    background: #8B4513;
}

.badge-a {
    background: #3E2723;
}

.badge-s {
    background: #5A8A3A;
}

.badge-c {
    background: #D2B48C;
    color: #3E2723;
}

.badge-i {
    background: #C5E1A5;
    color: #3E2723;
}

.legend-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #4A4A4A;
}

.legend-text strong {
    color: #3E2723;
    font-weight: 600;
}

.phase-section {
    margin-bottom: 4rem;
}

.phase-header {
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.phase-header h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: white;
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.raci-table-container {
    background: white;
    border-radius: 0 0 8px 8px;
    overflow-x: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.raci-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
}

.raci-table thead {
    background: #F5F1E8;
}

.raci-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #3E2723;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    border-bottom: 2px solid #8B4513;
    position: sticky;
    top: 0;
    background: #F5F1E8;
    z-index: 10;
}

.raci-table th:first-child {
    min-width: 250px;
}

.raci-table th:nth-child(2),
.raci-table th:nth-child(3),
.raci-table th:nth-child(4),
.raci-table th:nth-child(5),
.raci-table th:nth-child(6) {
    min-width: 150px;
    text-align: center;
}

.raci-table th:last-child {
    min-width: 300px;
}

.raci-table td {
    padding: 1rem;
    border-bottom: 1px solid #E8DCC5;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: #4A4A4A;
    vertical-align: top;
}

.raci-table tbody tr:hover {
    background: #F5F1E8;
}

.raci-table td:first-child {
    font-weight: 500;
    color: #3E2723;
}

.raci-table td:nth-child(2),
.raci-table td:nth-child(3),
.raci-table td:nth-child(4),
.raci-table td:nth-child(5),
.raci-table td:nth-child(6) {
    text-align: center;
}

.checklist-cell {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #4A4A4A;
}

.checklist-cell ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.checklist-cell li {
    margin: 0.25rem 0;
}

@media (max-width: 768px) {
    .raci-header h2 {
        font-size: 2rem;
    }

    .legend-grid {
        grid-template-columns: 1fr;
    }

    .raci-table-container {
        overflow-x: scroll;
    }

    .section-padding {
        padding: 3rem 0;
    }

    .stay-hero {
        padding: 4rem 0 3rem;
    }

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

    .common-amenities {
        padding: 2rem 1.5rem;
    }
}

/* WhatsApp Booking Section - Tamil Nadu design */
.booking-section {
    background: #F5F1E8;
    padding: 5rem 0;
    scroll-margin-top: 5rem;
    /* avoid sticky header overlapping when scrolling from Book Now */
}

.booking-section .booking-card {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.booking-section h3 {
    font-size: 2rem;
    font-weight: 600;
    color: #3E2723;
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', serif;
}

.booking-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #3E2723;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
}

.booking-section .form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #3E2723;
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif;
}

.booking-section input[type="text"],
.booking-section input[type="tel"],
.booking-section input[type="email"],
.booking-section input[type="date"],
.booking-section select,
.booking-section textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #E8DCC5;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #3E2723;
}

.booking-section input:focus,
.booking-section select:focus,
.booking-section textarea:focus {
    outline: none;
    border-color: #8B4513;
}

.phone-input-row-wa {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.phone-country-wa {
    flex: 0 0 auto;
    width: 100px;
    min-width: 90px;
    max-width: 110px;
}

.phone-input-row-wa input {
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .phone-input-row-wa {
        flex-direction: column;
    }

    .phone-country-wa {
        min-width: 100%;
    }
}

#booking-room-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
}
@media (min-width: 768px) {
    #booking-room-selection {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 480px) {
    #booking-room-selection {
        grid-template-columns: 1fr;
    }
}

.booking-room-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #F5F1E8;
    border-radius: 6px;
    margin-bottom: 0;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.booking-room-chip:hover {
    border-color: #8B4513;
    background: #F5F1E8;
}

.booking-room-chip.selected {
    border-color: #8B4513;
    background: rgba(139, 69, 19, 0.08);
}

.booking-room-chip input[type="checkbox"] {
    width: auto;
    margin-right: 0.75rem;
}

.booking-room-chip .flex-1 {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.booking-room-chip .room-name {
    font-weight: 600;
    color: #3E2723;
    font-size: 0.85rem;
}

.booking-room-chip .room-price {
    font-weight: 600;
    color: #8B4513;
    font-size: 0.8rem;
}

.booking-quantity-select {
    width: auto;
    min-width: 90px;
    padding: 0.35rem 0.5rem;
    margin-left: 0.5rem;
}

.booking-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #4A4A4A;
}

.booking-summary-row.total {
    font-weight: 700;
    color: #8B4513;
    font-size: 1.1rem;
    border-top: 1px solid #E8DCC5;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.counter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.counter-btn-booking {
    width: 36px;
    height: 36px;
    border: 2px solid #8B4513;
    background: white;
    color: #8B4513;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.counter-btn-booking:hover:not(:disabled) {
    background: #8B4513;
    color: white;
}

.counter-btn-booking:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.counter-display-booking {
    min-width: 2rem;
    text-align: center;
    font-weight: 600;
    color: #3E2723;
}

.whatsapp-submit-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: #3E2723;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.whatsapp-submit-btn:hover {
    background: #3E2723;
    color: white;
}

.booking-section .hidden {
    display: none !important;
}

.booking-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

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

/* Calendar - same design as FairTrip Tamil Nadu, Tamil Nadu colours */
.calendar-container-wa {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.calendar-header-wa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.calendar-nav-btn-wa {
    width: 40px;
    height: 40px;
    border: 2px solid #8B4513;
    background: white;
    color: #8B4513;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    font-size: 0.9rem;
}

.calendar-nav-btn-wa:hover {
    background: #8B4513;
    color: white;
}

.calendar-title-wa {
    font-size: 1.1rem;
    font-weight: 600;
    color: #3E2723;
    font-family: 'Poppins', sans-serif;
}

.calendar-months-wa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .calendar-months-wa {
        grid-template-columns: 1fr;
    }
}

.calendar-month-wa {
    min-width: 0;
}

.month-title-wa {
    font-size: 1rem;
    font-weight: 600;
    color: #8B4513;
    margin-bottom: 0.75rem;
    font-family: 'Poppins', sans-serif;
}

.calendar-grid-wa {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day-header-wa {
    font-size: 0.65rem;
    font-weight: 700;
    color: #4A4A4A;
    text-align: center;
    padding: 0.35rem 0;
    font-family: 'Poppins', sans-serif;
}

.calendar-day-wa {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: #3E2723;
    background: #F5F1E8;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: 'Poppins', sans-serif;
}

.calendar-day-wa:hover:not(.disabled):not(.other-month) {
    background: #E8DCC5;
    color: #3E2723;
}

.calendar-day-wa.other-month {
    color: #B0A090;
    background: transparent;
}

.calendar-day-wa.disabled {
    color: #C0B8A8;
    cursor: not-allowed;
    background: #F5F1E8;
}

.calendar-day-wa.selected {
    background: #8B4513;
    color: white;
}

.calendar-day-wa.range-start,
.calendar-day-wa.range-end {
    background: #8B4513;
    color: white;
}

.calendar-day-wa.in-range {
    background: rgba(139, 69, 19, 0.35);
    color: #3E2723;
}

.date-price-wa {
    font-size: 0.6rem;
    font-weight: 600;
    color: #8B4513;
    margin-top: 1px;
}

.calendar-day-wa.selected .date-price-wa,
.calendar-day-wa.range-start .date-price-wa,
.calendar-day-wa.range-end .date-price-wa {
    color: rgba(255, 255, 255, 0.95);
}

.selected-dates-summary-wa {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #E8DCC5;
}

.selected-dates-summary-wa h4 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.selected-dates-summary-wa .booking-summary-row.total {
    margin-top: 0.75rem;
}

/* Tamilkaadu stay_area only: typography one step smaller than global STAY_AREA rules */
.page-stay-area .stay-hero-subtitle {
    font-size: 0.75rem;
}

.page-stay-area .stay-hero-title {
    font-size: 2.125rem;
}

.page-stay-area .stay-hero-description,
.page-stay-area .stay-hero-cta {
    font-size: 0.875rem;
}

@media (max-width: 1024px) {
    .page-stay-area .stay-hero-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .page-stay-area .stay-hero-title {
        font-size: 1.35rem;
    }
}

.page-stay-area .room-card-location,
.page-stay-area .room-icon {
    font-size: 0.8125rem;
}

.page-stay-area .room-icon i {
    font-size: 0.8125rem;
}

.page-stay-area .room-card-title,
.page-stay-area main .room-card-title,
.page-stay-area main .room-details h3 {
    font-size: 1.5rem;
}

.page-stay-area .room-card-price {
    font-size: 1.25rem;
}

.page-stay-area .room-card-price span {
    font-size: 0.8125rem;
}

.page-stay-area main .heritage-section p {
    font-size: 0.875rem;
}

.page-stay-area main .heritage-section .room-card-description {
    font-size: 0.75rem;
}

.page-stay-area .amenities-title {
    font-size: 0.75rem;
}

.page-stay-area .amenities-title i {
    font-size: 0.75rem;
}

.page-stay-area .amenities-list li {
    font-size: 0.8125rem;
}

.page-stay-area .amenities-list li::before {
    font-size: 0.8125rem;
}

.page-stay-area .room-details-tooltip-trigger {
    font-size: 0.8125rem;
}

.page-stay-area .room-details-tooltip-trigger i {
    font-size: 0.75rem;
}

.page-stay-area .room-tooltip-popover {
    font-size: 0.8125rem;
}

.page-stay-area .room-tooltip-popover .amenities-title {
    font-size: 0.75rem;
}

.page-stay-area .room-tooltip-close i {
    font-size: 0.875rem;
}

.page-stay-area .book-btn {
    font-size: 0.875rem;
}

.page-stay-area .common-amenities-title {
    font-size: 1.75rem;
}

.page-stay-area .common-amenities-subtitle,
.page-stay-area main .heritage-section p.common-amenities-subtitle {
    font-size: 0.875rem;
}

.page-stay-area .amenity-item i {
    font-size: 1.125rem;
}

.page-stay-area .amenity-item span {
    font-size: 0.875rem;
}

.page-stay-area .booking-section h3 {
    font-size: 1.75rem;
}

.page-stay-area .booking-section h4,
.page-stay-area .selected-dates-summary-wa h4 {
    font-size: 1rem;
}

.page-stay-area .booking-section .form-label {
    font-size: 0.8125rem;
}

.page-stay-area .booking-section input[type="text"],
.page-stay-area .booking-section input[type="tel"],
.page-stay-area .booking-section input[type="email"],
.page-stay-area .booking-section input[type="date"],
.page-stay-area .booking-section select,
.page-stay-area .booking-section textarea {
    font-size: 0.875rem;
}

.page-stay-area .booking-room-chip .room-name {
    font-size: 0.75rem;
}

.page-stay-area .booking-room-chip .room-price {
    font-size: 0.75rem;
}

.page-stay-area .booking-summary-row {
    font-size: 0.8125rem;
}

.page-stay-area .booking-summary-row.total {
    font-size: 1rem;
}

.page-stay-area .counter-btn-booking {
    font-size: 0.875rem;
}

.page-stay-area .counter-display-booking {
    font-size: 0.875rem;
}

.page-stay-area .whatsapp-submit-btn {
    font-size: 0.875rem;
}

.page-stay-area .calendar-nav-btn-wa {
    font-size: 0.8125rem;
}

.page-stay-area .calendar-title-wa {
    font-size: 1rem;
}

.page-stay-area .month-title-wa {
    font-size: 0.875rem;
}

.page-stay-area .calendar-day-header-wa {
    font-size: 0.6rem;
}

.page-stay-area .calendar-day-wa {
    font-size: 0.75rem;
}

.page-stay-area .date-price-wa {
    font-size: 0.55rem;
}

.page-stay-area .text-sm {
    font-size: 0.8125rem !important;
}

.page-stay-area #adults-capacity-info-wa,
.page-stay-area #children-capacity-info-wa {
    font-size: 0.75rem !important;
}

@media (max-width: 768px) {

    .page-stay-area main .room-card-title,
    .page-stay-area main .room-details h3 {
        font-size: 1.35rem;
    }
}

@media (max-width: 480px) {

    .page-stay-area main .room-card-title,
    .page-stay-area main .room-details h3 {
        font-size: 1.25rem;
    }
}

/* ========== ACTIVITIES ========== */

/* Creative Activities Page Styling */
.activities-hero {
    background: linear-gradient(135deg, #F5F1E8 0%, #E8DCC5 100%);
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.activities-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="%23C5E1A5" opacity="0.3"/></svg>');
    opacity: 0.3;
}

.activities-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.activities-hero h1 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #3E2723;
    margin-bottom: 0.75rem;
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
}

.activities-hero p {
    font-size: 0.95rem;
    color: #4A4A4A;
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
}

.activities-hero .highlight {
    color: #8B4513;
    font-weight: 600;
}

/* Section Styling */
.activities-section {
    background: #F5F1E8;
    padding: 5rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 2rem;
    font-weight: 500;
    color: #3E2723;
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', serif;
    display: inline-block;

    padding: 0.5rem 1.5rem;
    border-radius: 4px;
}

.section-header .badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    margin-top: 0.5rem;
}

.badge-free-header {
    background: #C5E1A5;
    color: #2D5016;
}

.badge-paid-header {
    background: #F5E6D3;
    color: #8B4513;
}

/* Activity Cards Grid - icon style (white cards, brown icons, 4-col) */
.activities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.activity-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid #E0E0E0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

.activity-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.activity-card.free,
.activity-card.paid {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

.activity-card.paid:hover,
.activity-card.free:hover {
    background: #FFFFFF;
    border-color: #E0E0E0;
}

/* Icon: left of text, dark brown, no background wrapper */
.activity-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
}

.activity-icon-wrapper i {
    font-size: 1.25rem;
    color: #6F4A2E;
}

.activity-card.free .activity-icon-wrapper i,
.activity-card.paid .activity-icon-wrapper i {
    color: #6F4A2E;
}

.activity-card-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #333333;
    margin: 0 0 0.25rem 0;
    font-family: 'Poppins', sans-serif;
    line-height: 1.4;
}

.activity-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-free {
    background: rgba(197, 225, 165, 0.4);
    color: #2D5016;
}

.badge-paid {
    background: rgba(210, 180, 140, 0.4);
    color: #654321;
}

/* Decorative Section Divider */
.section-divider {
    max-width: 1400px;
    margin: 5rem auto;
    padding: 0 1.5rem;
    position: relative;
    text-align: center;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D2B48C, transparent);
}

.divider-icon {
    position: relative;
    display: inline-block;
    background: #F5F1E8;
    padding: 0 2rem;
    font-size: 2rem;
    color: #8B4513;
}

/* Info Banner */
.info-banner {
    max-width: 1200px;
    margin: 4rem auto 0;
    padding: 0 1.5rem;
    background: linear-gradient(135deg, #FFF9E6 0%, #F5E6D3 100%);
    border-radius: 16px;
    padding: 2rem;
    border: 2px solid #E8DCC5;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.info-banner-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.info-banner-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: #8B4513;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-banner-icon i {
    font-size: 1.5rem;
    color: white;
}

.info-banner-text {
    flex: 1;
    font-family: 'Poppins', sans-serif;
    color: #654321;
    font-size: 1rem;
    line-height: 1.6;
}

.info-banner-text strong {
    color: #8B4513;
    font-weight: 600;
}

/* Stats Section */
.stats-section {
    background: #3E2723;
    color: white;
    padding: 4rem 0;
    margin-top: 5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 600;
    color: #C5E1A5;
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: #E8DCC5;
    font-family: 'Poppins', sans-serif;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .activities-hero h1 {
        font-size: 2rem;
    }

    .activities-hero p {
        font-size: 0.9rem;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .activities-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .activity-card {
        padding: 14px 16px;
    }

    .info-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .activities-hero {
        padding: 4rem 0 3rem;
    }

    .activities-hero-content {
        padding: 0 0.75rem;
    }

    .activities-hero h1 {
        font-size: 1.6rem;
    }

    .activities-hero p {
        font-size: 0.875rem;
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    .activities-grid {
        padding: 0 0.75rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ========== CONTACT ========== */

/* Contact Page Styling */
.contact-hero {
    background: linear-gradient(135deg, #3E2723 0%, #5A8A3A 100%);
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.contact-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.3;
}

.contact-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.contact-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.contact-hero p {
    font-size: 0.95rem;
    color: #E8DCC5;
    font-family: 'Poppins', sans-serif;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.contact-hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Home hero: fullscreen looping muted YouTube background */
.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-video-bg__poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.7s ease;
}

.hero-video-bg.is-video-ready .hero-video-bg__poster {
    opacity: 0;
    visibility: hidden;
}

.hero-video-bg__wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.78vh;
    transform: translate(-50%, -50%);
}

.hero-video-bg iframe,
.hero-video-bg__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-bg iframe,
    .hero-video-bg__iframe {
        display: none;
    }

    .hero-video-bg.is-video-ready .hero-video-bg__poster,
    .hero-video-bg__poster {
        opacity: 1;
        visibility: visible;
    }
}

/* Home hero: full-bleed fade slider + Ken Burns zoom (legacy) */
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-slider-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    pointer-events: none;
}

.hero-slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    will-change: transform;
}

.hero-slider-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.hero-slider-slide.hero-slider-zoom-in.is-active img {
    animation: heroSliderZoomIn 7s ease-out forwards;
}

.hero-slider-slide.hero-slider-zoom-out.is-active img {
    animation: heroSliderZoomOut 7s ease-out forwards;
}

@keyframes heroSliderZoomIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.12);
    }
}

@keyframes heroSliderZoomOut {
    from {
        transform: scale(1.14);
    }

    to {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider-slide {
        transition: opacity 0.6s ease;
    }

    .hero-slider-slide.is-active img {
        animation: none !important;
        transform: scale(1) !important;
    }
}

.hero-btn {
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-btn-primary {
    background: white;
    color: #3E2723;
}

.hero-btn-primary:hover {
    background: #F5F1E8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #E8DCC5;
}

/* Contact Methods Section */
.contact-methods {
    background: #F5F1E8;
    padding: 5rem 0;
}

.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.contact-method-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid #E8DCC5;
}

.contact-method-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: #5A8A3A;
}

.contact-method-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #5A8A3A 0%, #2D5016 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
}

.contact-method-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #3E2723;
    margin-bottom: 0.75rem;
    font-family: 'Playfair Display', serif;
}

.contact-method-card p {
    font-size: 0.9rem;
    color: #4A4A4A;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif;
}

.contact-method-card .muted {
    font-size: 0.85rem;
    color: #8B4513;
    margin-bottom: 1rem;
}

.contact-method-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #5A8A3A;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s ease;
}

.contact-method-link:hover {
    color: #2D5016;
}


/* Location Section */
.location-section {
    background: #F5F1E8;
    padding: 5rem 0;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.location-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #E8DCC5;
}

.location-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #3E2723;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.location-card p {
    font-size: 0.9rem;
    color: #4A4A4A;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    font-family: 'Poppins', sans-serif;
}

.location-card .muted {
    font-size: 0.85rem;
    color: #8B4513;
}

.location-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #5A8A3A;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    margin-top: 0.5rem;
    transition: color 0.3s ease;
}

.location-link:hover {
    color: #2D5016;
}

/* CTA Section */
.contact-cta {
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
    padding: 4rem 0;
    text-align: center;
}

.contact-cta-content {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.contact-cta h2 {
    font-size: 2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.contact-cta p {
    font-size: 0.95rem;
    color: #E8DCC5;
    margin-bottom: 2rem;
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
}

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

.cta-btn {
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-btn-primary {
    background: white;
    color: #3E2723;
}

.cta-btn-primary:hover {
    background: #F5F1E8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cta-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #E8DCC5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-hero h1 {
        font-size: 2rem;
    }

    .contact-hero-cta,
    .cta-buttons {
        flex-direction: column;
    }

    .hero-btn,
    .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .contact-hero {
        padding: 4rem 0 3rem;
    }

    .contact-hero-content {
        padding: 0 0.75rem;
    }

    .contact-hero h1 {
        font-size: 1.6rem;
    }

    .contact-hero p {
        font-size: 0.875rem;
    }

    .contact-methods-grid,
    .location-grid {
        padding: 0 0.75rem;
        gap: 1.5rem;
    }

    .contact-cta-content {
        padding: 0 0.75rem;
    }

    .contact-cta h2 {
        font-size: 1.5rem;
    }
}

/* ========== NEARBY ========== */

/* Creative Nearby Places Page Styling */
.nearby-hero {
    background: linear-gradient(135deg, #3E2723 0%, #654321 50%, #8B4513 100%);
    padding: 8rem 0 6rem;
    position: relative;
    overflow: hidden;
    color: white;
}

.nearby-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M100 0 L120 80 L200 80 L140 130 L160 210 L100 160 L40 210 L60 130 L0 80 L80 80 Z" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
    opacity: 0.3;
}

.nearby-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.nearby-hero h1 {
    font-size: 2.5rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.nearby-hero p {
    font-size: 1rem;
    color: #E8DCC5;
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
}

/* Category Navigation */
.category-nav {
    background: white;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.category-nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 0;
}

.category-nav-btn {
    padding: 1.2rem 2rem;
    border: none;
    background: white;
    color: #3E2723;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border-bottom: 3px solid transparent;
}

.category-nav-btn:hover {
    background: #F5F1E8;
    color: #8B4513;
}

.category-nav-btn.active {
    background: #F5F1E8;
    color: #8B4513;
    border-bottom-color: #8B4513;
}

.category-nav-btn .icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

/* Main Content Sections */
.places-section {
    background: #F5F1E8;
    padding: 0;
}

/* Category Section with Unique Layouts */
.category-section {
    padding: 5rem 0;
    position: relative;
}

.category-section:nth-child(even) {
    background: white;
}

.category-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
}

.category-title {
    font-size: 2rem;
    font-weight: 500;
    color: #3E2723;
    margin-bottom: 0.75rem;
    font-family: 'Playfair Display', serif;
    position: relative;
    display: inline-block;

    padding: 0.5rem 1.5rem;
    border-radius: 4px;
}

.category-subtitle {
    font-size: 0.95rem;
    color: #4A4A4A;
    font-family: 'Poppins', sans-serif;
    margin-top: 1rem;
    font-weight: 400;
}

/* Nature Section - Large Feature Cards */
.category-nature .places-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.nature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.nature-feature-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #E8DCC5;
}

.nature-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #5A8A3A;
}

.nature-card-image {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #C5E1A5 0%, #A5D177 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nature-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="3" fill="rgba(255,255,255,0.3)"/></svg>');
}

.nature-card-image-icon {
    position: relative;
    z-index: 1;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
}

.nature-card-content {
    padding: 1.25rem;
    flex: 1;
}

.nature-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
}

.nature-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #3E2723;
    font-family: 'Playfair Display', serif;
    flex: 1;
    line-height: 1.3;
}

.distance-pill {
    background: linear-gradient(135deg, #5A8A3A 0%, #2D5016 100%);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
}

.nature-card-description {
    font-size: 0.85rem;
    color: #4A4A4A;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nature-card-details {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.nature-feature-card.expanded .nature-card-details {
    display: grid;
}

.detail-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #F5F1E8;
    border-radius: 6px;
    font-size: 0.8rem;
}

.detail-box i {
    color: #5A8A3A;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.detail-box-text {
    font-size: 0.8rem;
    color: #3E2723;
    font-family: 'Poppins', sans-serif;
}

.detail-box-text strong {
    display: block;
    font-weight: 600;
    margin-bottom: 0.1rem;
    font-size: 0.75rem;
}

.nature-card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #F5F1E8;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.map-link-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #5A8A3A 0%, #2D5016 100%);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.map-link-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(90, 138, 58, 0.3);
}

.expand-details-btn {
    padding: 0.6rem 1rem;
    background: #F5F1E8;
    color: #5A8A3A;
    border: 1px solid #E8DCC5;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.expand-details-btn:hover {
    background: #E8DCC5;
    border-color: #5A8A3A;
}

.expand-details-btn i {
    transition: transform 0.3s ease;
}

.expand-details-btn.expanded i {
    transform: rotate(180deg);
}

/* Cultural Section - Masonry Style */
.category-cultural .places-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.cultural-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.cultural-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-left: 4px solid #8B4513;
    position: relative;
    border: 1px solid #E8DCC5;
    border-left: 4px solid #8B4513;
}

.cultural-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(139, 69, 19, 0.15);
    border-color: #8B4513;
}

.cultural-card-header {
    padding: 1.25rem;
    background: linear-gradient(135deg, #F5E6D3 0%, #FFF9E6 100%);
}

.cultural-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #3E2723;
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.cultural-distance {
    display: inline-block;
    background: #8B4513;
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.cultural-card-body {
    padding: 1.25rem;
}

.cultural-description {
    font-size: 0.85rem;
    color: #4A4A4A;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cultural-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.cultural-card.expanded .cultural-details-list {
    display: block;
}

.cultural-details-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.8rem;
    color: #4A4A4A;
    font-family: 'Poppins', sans-serif;
}

.cultural-details-list li i {
    color: #8B4513;
    width: 18px;
    font-size: 0.85rem;
}

.cultural-card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #F5F1E8;
    display: flex;
    gap: 0.75rem;
}

.cultural-map-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    background: #8B4513;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.cultural-map-btn:hover {
    background: #654321;
    transform: translateY(-1px);
}

.cultural-expand-btn {
    padding: 0.6rem 1rem;
    background: #F5F1E8;
    color: #8B4513;
    border: 1px solid #E8DCC5;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cultural-expand-btn:hover {
    background: #E8DCC5;
    border-color: #8B4513;
}

.cultural-expand-btn i {
    transition: transform 0.3s ease;
}

.cultural-expand-btn.expanded i {
    transform: rotate(180deg);
}

/* Experience Section - Timeline Style */
.category-experience .places-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.experience-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.experience-item {
    position: relative;
}

.experience-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #E8DCC5;
    border-top: 4px solid #D2B48C;
    display: flex;
    flex-direction: column;
}

.experience-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(210, 180, 140, 0.2);
    border-color: #D2B48C;
}

.experience-marker {
    position: absolute;
    top: -12px;
    left: 1.25rem;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #D2B48C 0%, #8B4513 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(210, 180, 140, 0.3);
    z-index: 10;
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
    gap: 0.75rem;
}

.experience-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #3E2723;
    font-family: 'Playfair Display', serif;
    flex: 1;
    line-height: 1.3;
}

.experience-distance {
    background: linear-gradient(135deg, #D2B48C 0%, #8B4513 100%);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    flex-shrink: 0;
}

.experience-description {
    font-size: 0.85rem;
    color: #4A4A4A;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.experience-details-grid {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.experience-card.expanded .experience-details-grid {
    display: grid;
}

.experience-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #FFF9E6;
    border-radius: 6px;
    font-size: 0.8rem;
}

.experience-detail i {
    color: #8B4513;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.experience-detail-text {
    font-size: 0.8rem;
    color: #3E2723;
    font-family: 'Poppins', sans-serif;
}

.experience-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #F5F1E8;
    display: flex;
    gap: 0.75rem;
}

.experience-map-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #D2B48C 0%, #8B4513 100%);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.experience-map-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(210, 180, 140, 0.3);
}

.experience-expand-btn {
    padding: 0.6rem 1rem;
    background: #F5F1E8;
    color: #8B4513;
    border: 1px solid #E8DCC5;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.experience-expand-btn:hover {
    background: #E8DCC5;
    border-color: #8B4513;
}

.experience-expand-btn i {
    transition: transform 0.3s ease;
}

.experience-expand-btn.expanded i {
    transform: rotate(180deg);
}

/* Hidden class for filtering */
.category-section.hidden {
    display: none;
}

/* Nearby page: info banner overrides (base .info-banner in ACTIVITIES) */
.places-section .info-banner {
    margin: 5rem auto;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.places-section .info-banner-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
}

.places-section .info-banner-icon i {
    font-size: 2rem;
}

.places-section .info-banner-content {
    gap: 2rem;
}

.places-section .info-banner-text {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .nature-grid {
        grid-template-columns: 1fr;
    }

    .experience-timeline::before {
        left: 30px;
    }

    .experience-item {
        flex-direction: row !important;
        padding-left: 4rem;
    }

    .experience-item .experience-card::before {
        left: -30px !important;
        right: auto !important;
        border-right-color: white !important;
        border-left-color: transparent !important;
    }

    .experience-marker {
        position: absolute;
        left: 0;
    }
}

@media (max-width: 768px) {
    .nearby-hero h1 {
        font-size: 2rem;
    }

    .nearby-hero p {
        font-size: 0.9rem;
    }

    .category-nav-container {
        flex-wrap: wrap;
    }

    .category-nav-btn {
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
    }

    .category-title {
        font-size: 1.75rem;
    }

    .cultural-masonry {
        grid-template-columns: 1fr;
    }

    .nature-card-details,
    .experience-details-grid {
        grid-template-columns: 1fr;
    }

    .info-banner-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .nearby-hero {
        padding: 5rem 0 4rem;
    }

    .nearby-hero h1 {
        font-size: 1.6rem;
    }

    .nearby-hero p {
        font-size: 0.875rem;
    }

    .nearby-hero-content {
        padding: 0 0.75rem;
    }

    .category-nav-btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .category-title {
        font-size: 1.5rem;
    }
}

/* ========== AROGYAM / SECTOR PAGES ========== */
/* Only sector-specific rules; .stay-hero, .room-grid, .room-card, .common-amenities come from STAY_AREA */
.sector-hero-visual {
    height: 600px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #C5E1A5 0%, #5A8A3A 50%, #2D5016 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.sector-hero-visual i {
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.35);
}

.room-card-image-wrapper.sector-placeholder {
    background: linear-gradient(135deg, #C5E1A5 0%, #A5D177 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-card-image-wrapper.sector-placeholder i {
    font-size: 4rem;
    color: rgba(62, 39, 35, 0.2);
}

@media (max-width: 1024px) {
    .sector-hero-visual {
        height: 400px;
    }

    .sector-hero-visual i {
        font-size: 5rem;
    }
}

@media (max-width: 480px) {
    .sector-hero-visual {
        height: 280px;
    }
}

/* ========== 404 ========== */

/* Custom styles for the parchment effect */
#parchment {
    background-color: #F5F5DC;
    /* A gentle beige for the parchment */
    background-image: url('https://www.transparenttextures.com/patterns/old-paper.png');
    border: 1px solid #D2B48C;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#parchment.restored {
    border-color: #047857;
    /* primary-dark */
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.3);
}

@media (max-width: 640px) {
    #parchment {
        padding: 1.5rem !important;
    }

    #parchment h1 {
        font-size: 4rem !important;
    }

    #parchment h2 {
        font-size: 1.5rem !important;
    }

    #parchment p {
        font-size: 1rem !important;
    }
}

@media (max-width: 380px) {
    #parchment {
        padding: 1rem !important;
    }

    #parchment h1 {
        font-size: 3rem !important;
    }

    #parchment h2 {
        font-size: 1.25rem !important;
    }
}