@font-face {
    font-family: 'Azonix';
    src: url('assets/fonts/Azonix.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('assets/fonts/Figtree-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('assets/fonts/Figtree-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('assets/fonts/Figtree-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand-green-dark: #0d372e;
    --brand-green-light: #164a3e; /* Derived for gradient */
    --gold-dark: #a97537;
    --gold-light: #d4b779;
}

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

body {
    font-family: 'Arial', sans-serif;
    background-color: #fdfaf7;
    color: white;
    overflow-x: clip;
}

html {
    overflow-x: clip;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    pointer-events: none;
}

.logo-container {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.developer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.developer-by {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    color: #fff1dc;
    margin-bottom: 2px;
    font-weight: 500;
    line-height: 1;
}

.developer-logo {
    height: 85px;
    width: auto;
    object-fit: contain;
}


.logo {
    height: 120px;
    width: auto;
}

.nav-container {
    pointer-events: auto;
    display: flex;
    justify-content: flex-end;
}

.nav-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.nav-pill {
    background-color: #fff1dc;
    color: #333;
    text-decoration: none;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(10px);
    border-radius: 23px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-width: 130px;
    min-height: 48px;
    white-space: nowrap;
    contain: layout style;
}

.nav-pill svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-color: #333;
    color: white;
    border-radius: 50%;
    padding: 5px;
}

@media (hover: hover) {
    .nav-pill:hover {
        background-color: white;
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        transform: translateX(-5px);
    }

    .nav-pill:hover svg {
        background-color: #000;
    }
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 150px;
    padding-bottom: 15vw; /* Space for the curve */
    
    /* Emerald Green Gradient */
    background: linear-gradient(135deg, var(--brand-green-dark) 0%, #1a4d41 100%);
    overflow: hidden;
    perspective: 1000px; /* For 3D effects */
    z-index: 10;
}

.hero-curve-container {
    position: absolute;
    bottom: -1px; /* Overlap slightly to prevent gaps */
    left: 0;
    width: 100%;
    height: 15vw; /* Controls the height of the arch */
    z-index: 5;
    pointer-events: none;
}

.hero-curve-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-curve-svg path {
    vector-effect: non-scaling-stroke; /* Ensures border stays consistent width */
}

.hero-title {
    font-family: 'Azonix', sans-serif;
    font-size: 16vw;
    
    /* Golden Gradient Text */
    background: linear-gradient(to bottom, #d4b779 0%, #a97537 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #d4b779; /* Fallback */
    
    line-height: 1;
    position: relative;
    z-index: 1;
    margin-bottom: -15vw;
    display: block;
    
    /* Animation */
    opacity: 0;
    transform: translateY(50px);
    animation: fadeSlideUp 1.2s ease-out forwards;
    animation-delay: 0.2s;
    transition: transform 0.5s ease-out, filter 0.5s ease;
}

.hero-title:hover {
    filter: brightness(1.2);
    transform: scale(1.02) translateY(0); /* Slight scale on hover, keeps parallax active via JS though */
}

.hero-image-container {
    position: absolute;
    bottom: -4vw;
    left: 50%;
    transform: translateX(-50%) translateY(80px) scale(0.95);
    z-index: 2;
    width: 60%;
    max-width: 1200px;
    opacity: 0;
    animation: fadeSlideUpScale 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.5s;
    transition: transform 0.1s ease-out, filter 0.5s ease;
}

.hero-image-container:hover .hero-image {
    transform: scale(1.02);
    filter: drop-shadow(0 40px 60px rgba(0,0,0,0.5));
}

.hero-image {
    width: 100%;
    height: auto;
    aspect-ratio: 926 / 803;
    display: block;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.4));
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Clouds Animation */
.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cloud {
    position: absolute;
    object-fit: contain;
    filter: brightness(1.1);
}

.cloud-1 {
    top: 5%;
    left: -5%;
    width: 600px;
    z-index: 0; /* Behind Title */
    opacity: 0.35;
    animation: floatCloudLeft 25s ease-in-out infinite alternate;
}

.cloud-2 {
    top: 25%;
    right: -10%;
    width: 500px;
    z-index: 3; /* Above Building */
    opacity: 0.6;
    animation: floatCloudRight 30s ease-in-out infinite alternate;
}

.cloud-3 {
    bottom: 30%;
    left: -8%;
    width: 450px;
    z-index: 0; /* Below Text/Building */
    opacity: 0.25;
    animation: floatCloudLeft 35s ease-in-out infinite alternate;
}

.cloud-4 {
    top: 15%;
    left: 40%;
    width: 350px;
    z-index: 3; /* Above Building */
    opacity: 0.5;
    animation: floatCloudRight 28s ease-in-out infinite alternate;
}

@keyframes floatCloudLeft {
    0% { 
        transform: translate(0, 0) scale(1); 
    }
    50% {
        transform: translate(100px, -50px) scale(1.05);
    }
    100% { 
        transform: translate(200px, -80px) scale(1.1); 
    }
}

@keyframes floatCloudRight {
    0% { 
        transform: translate(0, 0) scale(1); 
    }
    50% {
        transform: translate(-100px, 50px) scale(1.05);
    }
    100% { 
        transform: translate(-200px, 100px) scale(1.1); 
    }
}

/* Expandable Menu */
.menu-container {
    /* Styles inherited from nav-pill */
    /* width/height transition for expansion */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Initial Pill State */
    width: 130px;
    height: 48px;
    padding: 0; /* Reset padding to handle inner layout */
    position: relative;
    cursor: pointer;
    z-index: 101; /* Ensure above other nav items when expanded */
    background-color: #fff1dc; /* Ensure consistent background */
}

/* Expanded State */
.menu-container.active {
    width: 300px;
    height: auto;
    /* Use max-height for transition if needed, or JS will handle auto height via layout */
    /* For smooth height transition with auto, max-height is often used */
    /* But since we want to expand to fit content, we can use a large max-height */
    max-height: 800px; 
    border-radius: 20px;
    cursor: default; /* Container itself isn't a button anymore */
}

/* Header (Menu Text + Icon) */
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 48px; /* Fixed height for header part */
    padding: 0 18px; /* Match original pill padding */
    cursor: pointer; /* Clickable area to toggle */
    flex-shrink: 0;
}

.menu-header span {
    font-size: 16px;
    font-weight: 500;
    transition: opacity 0.2s ease, width 0.2s ease;
    white-space: nowrap;
}

/* Hide text when active */
.menu-container.active .menu-header span {
    opacity: 0;
    width: 0;
    overflow: hidden;
    margin: 0;
}

/* Ensure icon stays right aligned */
.menu-container.active .menu-header {
    justify-content: flex-end;
}

.menu-icon-wrapper {
    width: 28px;
    height: 28px;
    background-color: #333;
    color: white;
    border-radius: 50%;
    /* Remove flex centering to match original SVG padding behavior if needed, 
       but flex is better for centering the inner SVG. 
       Original had padding: 5px on the SVG tag itself. 
    */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px; /* Add padding back to wrapper to simulate the original look */
    transition: background-color 0.3s;
}

.menu-icon-wrapper:hover {
    background-color: #000;
}

.menu-icon-wrapper svg {
    width: 100%;
    height: 100%;
    display: block;
    /* Reset any inherited padding */
    padding: 0; 
}

/* Menu List */
.menu-list {
    list-style: none;
    padding: 10px 20px 20px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
}

.menu-container.active .menu-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0.1s; /* Wait for expansion slightly */
}

.menu-item-link {
    display: block;
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--brand-green-dark);
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid rgba(13, 55, 46, 0.1);
    transition: color 0.2s, padding-left 0.2s;
}

.menu-item-link:last-child {
    border-bottom: none;
}

.menu-item-link:hover {
    color: var(--gold-dark);
    padding-left: 10px;
}

.menu-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-green-dark) 0%, var(--brand-green-light) 100%);
    box-shadow: 0 6px 16px rgba(13, 55, 46, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.menu-download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(13, 55, 46, 0.3);
    filter: brightness(1.05);
}

/* Keyframes */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideUpScale {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(80px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Spiritual Compliance Section */
.spiritual-compliance {
    background-color: #fdfaf7;
    color: var(--brand-green-dark);
    padding: 20px 0px 0px 0px;
    position: relative;
    z-index: 1;
    contain: layout style;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.section-title {
    font-family: 'Figtree', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #0d372e;
    margin-bottom: 60px;
}

.features-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 40px;
    margin-bottom: 60px;
    min-height: 280px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    gap: 80px;
    margin-top: -50px;
}

.features-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    width: 100%;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
    position: relative;
    padding: 0 20px;
    transition: transform 0.3s ease;
    max-width: 180px;
}

.feature-card.label {
    align-items: center;
    justify-content: center;
    padding: 0;
    max-width: none;
    width: 100%;
}

.feature-card.label p {
    font-size: 1.3rem;
    font-weight: 400;
    color: #666;
    text-align: center;
    line-height: 1.3;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wreath-icon {
    width: 24px;
    height: 48px;
    display: inline-block;
    vertical-align: middle;
    background: linear-gradient(to bottom, #d4b779, #a5805f);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.wreath-icon.left {
    -webkit-mask-image: url('assets/icons/Wreath-Left.svg');
    mask-image: url('assets/icons/Wreath-Left.svg');
}

.wreath-icon.right {
    -webkit-mask-image: url('assets/icons/Wreath-Right.svg');
    mask-image: url('assets/icons/Wreath-Right.svg');
}

.feature-card:not(:last-child):not(.label)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    height: 50%;
    width: 1px;
    background-color: #e0e0e0;
}

.feature-card:hover:not(.label) {
    transform: translateY(-3px);
}

.feature-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    object-fit: contain;
    filter: grayscale(20%);
    transform: scale(1.1);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.feature-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Marquee CSS moved to marquee.html */

/* Gallery / Reserve Button (Styles kept for consistency if needed) */
.reserve-btn {
    background-color: #1e1e1e;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.reserve-btn:hover {
    background-color: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.reserve-btn .material-symbols-outlined {
    font-size: 20px;
    background-color: white;
    color: #1e1e1e;
    border-radius: 50%;
    padding: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* About Us Section */
.about-section {
    padding: 100px 0;
    background-color: #fdfaf7; /* Matching the warm white/beige from reference */
}

.about-grid {
    display: grid;
    grid-template-columns: 50% 45%; /* Adjusted for better balance */
    gap: 5%;
    align-items: start;
}

/* Left Side - Images */
.about-images {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto; /* Row 1: Images, Row 2: Experience Text */
    gap: 30px;
    height: auto; /* Allow auto height based on content */
}

.about-image-main {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    border-radius: 10px;
    overflow: hidden;
    height: 500px; /* Increassssed from 420px */
    width: 100%;
}

.about-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-image-small {
    grid-column: 2 / 3;
    grid-row: 1 / 3; /* Spans both rows to look tall */
    border-radius: 10px;
    overflow: hidden;
    align-self: start;
    height: 700px; /* Increased from 600px */
    margin-bottom: 0;
}

.about-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-experience {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: transparent;
    padding: 20px 0;
    text-align: left;
    box-shadow: none;
    align-self: end; /* Aligns to bottom of the grid area */
}

.experience-number {
    font-size: 6rem;
    font-weight: 400;
    color: #4a4a4a; /* Dark grey from reference */
    line-height: 1;
    margin-bottom: 10px;
}

.experience-text {
    font-size: 1.2rem;
    color: #4a4a4a;
    font-weight: 400;
}

/* Right Side - Content */
.about-content {
    padding-left: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left; /* Explicitly force left alignment */
    align-items: flex-start; /* Align flex items to start */
}

/* --- Keyframes --- */
@keyframes blinking-dot {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.about-label {
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    width: 100%; /* Ensure it spans full width */
}

.about-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #0d372e;
    border-radius: 50%;
    margin-right: 10px;
    animation: blinking-dot 1.5s infinite ease-in-out;
}

.about-title {
    font-family: 'Figtree', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #0d372e;
    margin: 0 0 15px 0; /* Reduced margin to bring logo closer */
    line-height: 1.2;
    width: 100%; /* Ensure it spans full width */
}

.about-logo {
    height: 80px; /* Adjust height as needed */
    width: auto;
    max-width: 100%;
    aspect-ratio: 829 / 309;
    object-fit: contain;
    margin-bottom: 25px;
    display: block;
}

.about-description {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: left; /* Explicitly force left alignment for text block */
}

.about-facts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    margin-top: auto; /* Pushes this container to the bottom */
    width: 100%;
}

.fact-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.fact-number {
    font-family: 'Figtree', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 30.72px;
    color: rgb(30, 30, 30);
}

.fact-label {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.04px;
    color: rgba(30, 30, 30, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- About Section Mobile Styles --- */
@media (max-width: 1024px) {
    .about-section {
        padding: 60px 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-images {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 20px;
        max-width: 600px;
        margin: 0 auto;
    }

    .about-image-main {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        height: 280px;
    }

    .about-image-small {
        grid-column: 2 / 3;
        grid-row: 1 / 3; /* Spans both rows - taller image */
        height: 420px;
    }

    .about-experience {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        text-align: left;
        align-self: end;
        padding: 20px 0 0 0;
    }

    .experience-number {
        font-size: 4rem;
    }

    .experience-text {
        font-size: 1rem;
    }

    .about-content {
        padding-left: 0;
        text-align: center;
        align-items: center;
        max-width: 600px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .about-label {
        justify-content: center;
    }

    .about-title {
        font-size: 2.5rem;
        text-align: center;
    }

    .about-logo {
        height: 60px;
        margin: 0 auto 20px;
    }

    .about-description {
        text-align: justify;
        font-size: 1rem;
    }

    .about-facts {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 15px;
        padding: 20px 0;
    }

    .fact-item {
        text-align: center;
        align-items: center;
        flex: 1;
    }

    .fact-number {
        font-size: 20px;
    }

    .fact-label {
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    .about-section {
        padding: 40px 0;
    }

    .about-grid {
        gap: 30px;
    }

    .about-images {
        gap: 15px;
        max-width: 100%;
        padding: 0 15px;
    }

    .about-image-main {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        height: 200px;
    }

    .about-image-small {
        grid-column: 2 / 3;
        grid-row: 1 / 3; /* Spans both rows - taller image */
        height: 320px;
    }

    .about-experience {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        text-align: left;
        align-self: end;
        padding: 15px 0 0 0;
    }

    .experience-number {
        font-size: 3rem;
    }

    .experience-text {
        font-size: 0.9rem;
    }

    .about-content {
        padding: 0 15px;
    }

    .about-title {
        font-size: 2rem;
    }

    .about-logo {
        height: 50px;
        margin-bottom: 15px;
    }

    .about-description {
        text-align: justify;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .about-facts {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 10px;
        padding: 15px 0;
    }

    .fact-item {
        text-align: center;
        align-items: center;
        flex: 1;
    }

    .fact-number {
        font-size: 18px;
    }

    .fact-label {
        font-size: 10px;
        line-height: 1.3;
    }
}

/* --- New Card Section (Kaleo Style) --- */

.kaleo-scroll-track {
    height: 400vh; 
    position: relative;
    background-color: #f3e9e2; /* Beige background for this section */
    color: #2c2926;
    font-family: "Georgia", "Times New Roman", serif;
}

.kaleo-sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kaleo-content-header {
    text-align: center;
    max-width: 780px;
    padding: 0 24px;
    margin-bottom: 2vh; 
    z-index: 20;
    position: relative;
}

.kaleo-eyebrow {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6b635b;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.kaleo-eyebrow::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #0d372e;
    border-radius: 50%;
    margin-right: 10px;
    animation: blinking-dot 1.5s infinite ease-in-out;
}

.kaleo-headline {
    font-size: 1.35rem; 
    line-height: 1.6;
    font-weight: 400;
    color: #2c2926;
}

@media (min-width: 768px) {
    .kaleo-headline {
        font-size: 1.4rem;
    }
}

.kaleo-headline .word {
    opacity: 0.2; 
    transition: opacity 0.3s ease; 
    display: inline-block; 
    white-space: pre; 
}

.kaleo-headline .word-icon {
    display: inline-block;
    color: #d4c5b0;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
    margin: 0 4px;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.kaleo-dynamic-captions-container {
    position: relative;
    height: 60px; /* Fixed height to reserve space */
    width: 100%;
    margin-bottom: 20px; /* Space between caption and stack */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 25;
}

.kaleo-caption-text {
    position: absolute;
    font-family: 'Caveat', cursive;
    font-size: 2rem;
    color: #4a4a4a;
    text-align: center;
    letter-spacing: 0.5px;
    opacity: 0; /* Hidden by default, controlled by JS */
    width: 100%;
    transition: opacity 0.1s linear;
}

.kaleo-card-stack-wrapper {
    position: relative;
    width: 300px; 
    height: 200px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .kaleo-card-stack-wrapper {
        width: 550px;
        height: 360px;
    }
}

.kaleo-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    will-change: transform, opacity;
    transform-origin: center center;
    background-color: #ddd; /* Fallback */
}

.kaleo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.kaleo-card:nth-child(1) { z-index: 1; }
.kaleo-card:nth-child(2) { z-index: 2; }
.kaleo-card:nth-child(3) { z-index: 3; }
.kaleo-card:nth-child(4) { z-index: 4; }
.kaleo-card:nth-child(5) { z-index: 5; }
.kaleo-card:nth-child(6) { z-index: 6; }

/* --- Overlapping Split Section --- */
.overlapping-split-wrapper {
    position: relative;
    width: 100%;
    /* Ensure it has height to scroll through. 
       Actually, if items are sticky, the wrapper just needs to contain them.
       But since they stack, they are normal flow siblings, so the wrapper height 
       will be sum of their heights if they weren't sticky. 
       With sticky, they take up space in flow, but stick to top. 
       So wrapper grows naturally. */
}

.sticky-split-card {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* Ensure z-index increases for subsequent cards automatically in DOM order */
}

.split-content {
    display: flex;
    width: 100%;
    height: 100%;
}

.split-left {
    width: 50%;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8vw;
}

.split-right {
    width: 50%;
    height: 100%;
    background-color: #eee;
}

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

.split-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.split-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 40px;
}

.split-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.9;
    max-width: 500px;
}

@media (max-width: 768px) {
    .split-content {
        flex-direction: column;
    }
    
    .split-left, .split-right {
        width: 100%;
        height: 50%;
    }
    
    .split-left {
        padding: 40px 20px;
    }
    
    .split-title {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }
}

/* --- Horizontal Scroll Section --- */

.horizontal-scroll-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Background matches the transition from previous section */
    background-color: #f5f5f5; 
}

.horizontal-scroll-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.horizontal-scroll-track {
    display: flex;
    width: 400%; /* 4 cards */
    height: 100%;
    will-change: transform;
}

.horizontal-card {
    width: 25%; /* Changed from 100vw to 25% of the 400% track */
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color, #fff);
    color: var(--text-color, #000);
    overflow: hidden;
    position: relative;
}

.h-card-content {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.h-card-text {
    width: 45%;
    padding: 0 5vw 0 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.h-card-image {
    width: 55%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.h-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.5s ease;
    aspect-ratio: 16 / 9;
}

.horizontal-card:hover .h-card-image img {
    transform: scale(1.05);
}

.h-card-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 2rem;
    opacity: 0.8;
    display: block;
    font-weight: 500;
}

.h-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 4vw;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.h-card-desc {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 500px;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.h-card-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 10px;
    padding-bottom: 30px;
}

.h-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgb(255 255 255 / 63%);
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.95rem;
    color: #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.h-pill:hover {
    transform: translateY(-2px);
}

.h-pill .material-symbols-outlined {
    font-size: 24px;
    color: var(--brand-green-dark);
}

@media (max-width: 768px) {
    .h-card-content {
        flex-direction: column;
    }
    
    .h-card-text {
        width: 100%;
        padding: 40px 20px;
        order: 2;
    }
    
    .h-card-image {
        width: 100%;
        height: 50%;
        order: 1;
    }
    
    .h-card-title {
        font-size: 2.5rem;
    }
}

/* Islamic Banner Container */
#islamic-banner-container {
    width: 90%;
    margin: 0 auto;
    height: 350px;
    border-radius: 30px;
    overflow: hidden; /* Ensure content respects border-radius */
    margin-bottom: 50px; /* Add some spacing from footer */
}

/* Footer Container Spacing */
#footer-container {
    margin-top: 290px;
}

/* Tablet Refinements */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-image-container {
        bottom: -2vw;
    }
}

/* Mobile Refinements */
@media (max-width: 768px) {
    /* Header Spacing */
    header {
        padding: 20px 20px; /* Reduced side padding from 40px to 20px */
    }

    .developer-info {
        display: flex;
    }

    .developer-logo {
        height: 50px;
    }

    .developer-by {
        font-size: 10px;
    }

    .logo-container {
        gap: 10px;
    }

    /* Hero Section Height */
    .hero {
        min-height: 80vh;
        padding-top: 180px; /* Increased to push content down */
        justify-content: center; /* Center content vertically */
    }

    /* Logo resizing (60% of original) */
    .logo {
        height: 72px; /* 60% of 120px */
    }

    /* Navigation Buttons resizing (60% of original) */
    .nav-pill {
        padding: 6px 11px; /* 60% of 10px 18px */
        font-size: 10px;   /* 60% of 16px */
        min-width: auto;   /* Reset min-width */
        border-radius: 14px; /* Scaled border radius */
        gap: 6px;
        min-height: 29px;
        white-space: nowrap;
    }

    .nav-pill svg {
        width: 17px;  /* 60% of 28px */
        height: 17px;
        padding: 3px;
    }

    .nav-stack {
        gap: 9px; /* 60% of 15px */
    }

    /* Menu Button Mobile Fixes - match Enquire Now pill exactly */
    .menu-container {
        width: auto;
        min-width: auto;
        height: 29px; /* Match nav-pill height - clips hidden menu-list */
        border-radius: 14px;
        padding: 0; /* Reset, handled by menu-header */
        overflow: visible;
    }

    .menu-container.active {
        width: auto;
        height: 29px;
        border-radius: 14px;
    }

    .menu-header {
        height: 29px;
        width: auto;
        padding: 6px 11px; /* Match nav-pill padding exactly */
        gap: 6px;
    }

    .menu-container.active .menu-header {
        width: auto;
        justify-content: flex-end;
    }

    .menu-header span {
        font-size: 10px; /* Match nav-pill font-size */
    }

    .menu-icon-wrapper {
        width: 17px;
        height: 17px;
        padding: 3px;
    }

    /* Prevent hidden menu-list from affecting container width */
    .menu-list {
        width: 200px;
        min-width: 200px;
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        padding: 10px 14px 14px 14px;
        background-color: #fff1dc;
        border-radius: 14px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .menu-container.active .menu-list {
        width: 200px;
        min-width: 200px;
        padding: 10px 14px 14px 14px; /* Tighter padding */
        gap: 6px; /* Reduced gap between items */
    }

    .menu-item-link {
        font-size: 13px; /* Smaller font for mobile */
        padding: 5px 0; /* Tighter vertical padding */
    }

    .menu-download-btn {
        font-size: 12px;
        padding: 7px 10px;
        border-radius: 14px;
        box-shadow: 0 4px 12px rgba(13, 55, 46, 0.22);
    }

    /* Hero Content Refinements */
    .hero-title {
        font-size: 18vw; /* Slightly larger relative to screen width for impact */
        margin-bottom: 35vh;
    }

    .hero-image-container {
        width: 100%;
        bottom: -4vw;
    }

    /* Clouds adjustments for mobile */
    .cloud {
        opacity: 0.5; /* Slightly more visible */
    }
    
    .cloud-1 {
        width: 80%; /* Relative width */
        top: 10%;
    }
    
    .cloud-2 {
        width: 60%;
        top: 30%;
    }
    
    .cloud-3 {
        width: 70%;
        bottom: 20%;
    }
    
    .cloud-4 {
        width: 50%;
        top: 55%;
    }

    /* Spiritual Compliance 2x2 Grid */
    .features-grid {
        padding: 30px 20px; /* Reduced side padding */
        gap: 40px; /* Reduced gap between label and grid */
    }

    .features-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 10px; /* Vertical gap 30px, Horizontal gap 10px */
        width: 100%;
    }

    .feature-card {
        max-width: none; /* Allow filling the grid cell */
        padding: 0 5px;
        width: 100%;
    }

    /* Adjust Separators for Grid */
    /* Remove default right border for even items (end of row) */
    .features-row .feature-card:nth-child(even)::after {
        display: none;
    }
    
    /* Ensure odd items have the border */
    .features-row .feature-card:nth-child(odd)::after {
        right: -5px; /* Adjust position based on gap */
    }
}

.whatsapp-chat {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.whatsapp-chat img {
    display: block;
    width: 56px;
    height: 56px;
}

@media (max-width: 768px) {
    .whatsapp-chat {
        bottom: 42px;
    }

    .whatsapp-chat img {
        width: 40px;
        height: 40px;
    }
}

/* Enquire Overlay */
.enquire-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(13, 55, 46, 0.95); /* brand-green-dark with opacity */
    backdrop-filter: blur(10px);
    z-index: 2000; /* Higher than menu */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.enquire-content {
    background-color: #fdfaf7;
    padding: 60px 40px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.enquire-overlay.active .enquire-content {
    transform: translateY(0);
}

.enquire-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enquire-close-btn:hover {
    background-color: rgba(0,0,0,0.05);
}

.enquire-title {
    font-family: 'Azonix', sans-serif;
    font-size: 28px;
    color: var(--brand-green-dark);
    margin-bottom: 30px;
    text-align: center;
}

.enquire-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid #8ca58c; /* Greenish border from image */
    border-radius: 8px;
    background-color: white;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: var(--brand-green-dark);
    outline: none;
    transition: border-color 0.3s;
}

.form-group input::placeholder {
    color: #8ca58c;
}

.form-group input:focus {
    border-color: var(--brand-green-dark);
}

.preferred-time-label {
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    color: #666;
    margin-top: 10px;
}

.time-inputs {
    display: flex;
    gap: 20px;
}

.time-inputs .form-group {
    flex: 1;
}

.submit-btn {
    background-color: var(--brand-green-dark);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s, transform 0.2s;
}

.submit-btn:hover {
    background-color: var(--brand-green-light);
    transform: translateY(-2px);
}

/* Mobile Responsiveness for Form and Menu */
@media (max-width: 480px) {
    .enquire-content {
        padding: 25px 20px;
        width: 90%;
    }

    .enquire-title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .enquire-form {
        gap: 12px;
    }

    .form-group input {
        padding: 10px;
        font-size: 14px;
    }

    .preferred-time-label {
        font-size: 14px;
        margin-top: 5px;
    }
    
    .time-inputs {
        flex-direction: row;
        gap: 10px;
    }

    .submit-btn {
        padding: 12px;
        font-size: 16px;
        margin-top: 10px;
    }

    .enquire-close-btn {
        top: 10px;
        right: 10px;
        padding: 5px;
    }

    .menu-list {
        width: 180px; /* Even smaller for very small screens */
        min-width: 180px;
    }

    .menu-container.active .menu-list {
        width: 180px;
        min-width: 180px;
    }

    .menu-item-link {
        font-size: 12px; /* Even smaller font */
    }
}