:root {
    --gold: #D29806;
    --gold-dark: #A98951;
    --dark: #222222;
    --white: #FFFFFF;
    --cream-light: #FFFCF7;
    /* Very light background for Amenities/Invest */
    --gray-text: #555555;
    --border-color: #E0E0E0;
    --font-main: 'Inter', sans-serif;
    --font-serif: 'Playfair Display', serif;
}

/* Reset & Basic Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--dark);
    line-height: 1.5;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

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

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 60px 0;
}

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

.text-left {
    text-align: left;
}

.gold-icon {
    color: var(--gold);
}

.highlight-text {
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.btn-gold {
    background: #D29806;
    color: white;
    padding: 12px 30px;
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
    border-radius: 155px;
}

.btn-gold:hover {
    background: #b08218;
}

.btn-gold.rounded {
    border-radius: 4px;
    padding: 12px 40px;
}

.btn-gold.rounded-full {
    border-radius: 50px;
}

.mt-4 {
    margin-top: 2rem;
}

.mt-5 {
    margin-top: 3rem;
}

/* Serif Titles (for section headings) */
.serif-title {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
    color: #333;
}

/* Header */
.header {
    background: #1F2328;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo-img {
    height: 50px;
}

.nav-menu {
    display: flex;
    gap: 30px;
}

.nav-menu a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.header-cta {
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
}

.header-cta:hover {
    background: var(--gold);
    color: #fff;
}

.hamburger {
    display: none;
}

.hero {
    width: 100%;
    height: auto;       /* Removes the forced 70vh height */
    min-height: auto;   /* Resets min-height */
    padding: 0;
    background-color: #080808; /* Matches your header black */
    display: flex;      /* Removes slight gap at bottom of image */
    justify-content: center;
}

.hero-img {
    width: 100%;        /* Image takes full width */
    height: auto;       /* Height adjusts perfectly to aspect ratio */
    display: block;     /* Prevents inline gaps */
    max-width: 100%;    /* Ensures it works on all screens */
}
/* About / EOI */
.section-about {
    background: var(--cream-light);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-highlight {
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 18px;
}

.about-body {
    margin-bottom: 15px;
    color: var(--gray-text);
    font-size: 15px;
    text-align: justify;
}

/* Features & Location */
.section-features {
    background: #fff;
}

.features-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.feature-card {
    border: 1px solid #D29806;
    border-radius: 12px;
    padding: 40px 30px;
    position: relative;
    background: #fff;
}

/* Icon: light gray circle with thin golden border, golden icon inside */
.card-icon-circle {
    width: 56px;
    height: 56px;
    border: 1px solid #D29806;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon-circle .card-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(52%) sepia(68%) saturate(800%) hue-rotate(15deg) brightness(92%) contrast(90%);
}

.feature-card h2 {
    color: #D29806;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

.card-sub {
    font-size: 14px;
    margin-bottom: 20px;
    color: #222;
    line-height: 1.5;
}

.card-footer {
    font-size: 14px;
    color: #222;
    line-height: 1.5;
    margin-top: 16px;
    margin-bottom: 0;
}

.check-list {
    text-align: left;
    margin-left: 10px;
}

.check-list li {
    margin-bottom: 8px;
    font-size: 14px;
    position: relative;
    padding-left: 36px;
    color: #222;
}

.feature-card .check-list li {
    color: #222;
}

.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 27 27' fill='none'%3E%3Cpath d='M9.08333 14.2917L12.2083 17.4167L17.4167 10.125M25.75 13.25C25.75 15.0111 24.875 16.5694 23.5375 17.5111C23.6816 18.3344 23.6252 19.1803 23.373 19.9772C23.1209 20.774 22.6804 21.4984 22.0889 22.0889C21.4984 22.6804 20.774 23.1209 19.9772 23.373C19.1803 23.6252 18.3344 23.6816 17.5111 23.5375C17.0309 24.2215 16.3928 24.7797 15.6511 25.1648C14.9094 25.55 14.0858 25.7507 13.25 25.75C11.4889 25.75 9.93056 24.875 8.98889 23.5375C8.1656 23.6815 7.31974 23.625 6.5229 23.3729C5.72606 23.1207 5.00169 22.6803 4.41111 22.0889C3.81962 21.4984 3.37914 20.774 3.12698 19.9772C2.87481 19.1803 2.8184 18.3344 2.9625 17.5111C2.2785 17.0309 1.72031 16.3928 1.33518 15.6511C0.950045 14.9094 0.749321 14.0858 0.750002 13.25C0.750002 11.4889 1.625 9.93056 2.9625 8.98889C2.8184 8.1656 2.87481 7.31971 3.12698 6.52285C3.37914 5.72598 3.81962 5.00163 4.41111 4.41111C5.00169 3.81971 5.72606 3.3793 6.5229 3.12714C7.31974 2.87499 8.1656 2.81851 8.98889 2.9625C9.46923 2.27859 10.1073 1.72045 10.849 1.33533C11.5907 0.950211 12.4143 0.749437 13.25 0.750001C15.0111 0.750001 16.5694 1.625 17.5111 2.9625C18.3344 2.81851 19.1803 2.87499 19.9771 3.12714C20.7739 3.3793 21.4983 3.81971 22.0889 4.41111C22.6803 5.00169 23.1207 5.72606 23.3729 6.5229C23.625 7.31974 23.6815 8.1656 23.5375 8.98889C24.2215 9.46914 24.7797 10.1072 25.1648 10.8489C25.55 11.5906 25.7507 12.4142 25.75 13.25Z' stroke='%23D29806' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Shariah Policy – single bordered box, cream bg, two-column list, gold circle + dark check */
.section-shariah {
    background: #FFFCF6;
}

.shariah-box {
    background: #FFFEF9;
    border: 1px solid #D29806;
    border-radius: 12px;
    padding: 48px 40px;
}

.shariah-title {
    color: #D29806;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.shariah-desc {
    font-size: 15px;
    color: #222;
    line-height: 1.6;
    margin-bottom: 24px;
}

.shariah-subtitle {
    color: #D29806;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.shariah-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 40px;
    margin-bottom: 28px;
}

.shariah-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Shariah list icon: gold circle check SVG (same as Features check-list) */
.shariah-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 27 27' fill='none'%3E%3Cpath d='M9.08333 14.2917L12.2083 17.4167L17.4167 10.125M25.75 13.25C25.75 15.0111 24.875 16.5694 23.5375 17.5111C23.6816 18.3344 23.6252 19.1803 23.373 19.9772C23.1209 20.774 22.6804 21.4984 22.0889 22.0889C21.4984 22.6804 20.774 23.1209 19.9772 23.373C19.1803 23.6252 18.3344 23.6816 17.5111 23.5375C17.0309 24.2215 16.3928 24.7797 15.6511 25.1648C14.9094 25.55 14.0858 25.7507 13.25 25.75C11.4889 25.75 9.93056 24.875 8.98889 23.5375C8.1656 23.6815 7.31974 23.625 6.5229 23.3729C5.72606 23.1207 5.00169 22.6803 4.41111 22.0889C3.81962 21.4984 3.37914 20.774 3.12698 19.9772C2.87481 19.1803 2.8184 18.3344 2.9625 17.5111C2.2785 17.0309 1.72031 16.3928 1.33518 15.6511C0.950045 14.9094 0.749321 14.0858 0.750002 13.25C0.750002 11.4889 1.625 9.93056 2.9625 8.98889C2.8184 8.1656 2.87481 7.31971 3.12698 6.52285C3.37914 5.72598 3.81962 5.00163 4.41111 4.41111C5.00169 3.81971 5.72606 3.3793 6.5229 3.12714C7.31974 2.87499 8.1656 2.81851 8.98889 2.9625C9.46923 2.27859 10.1073 1.72045 10.849 1.33533C11.5907 0.950211 12.4143 0.749437 13.25 0.750001C15.0111 0.750001 16.5694 1.625 17.5111 2.9625C18.3344 2.81851 19.1803 2.87499 19.9771 3.12714C20.7739 3.3793 21.4983 3.81971 22.0889 4.41111C22.6803 5.00169 23.1207 5.72606 23.3729 6.5229C23.625 7.31974 23.6815 8.1656 23.5375 8.98889C24.2215 9.46914 24.7797 10.1072 25.1648 10.8489C25.55 11.5906 25.7507 12.4142 25.75 13.25Z' stroke='%23D29806' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 2px;
}

.shariah-item span:last-child {
    font-size: 14px;
    color: #222;
    line-height: 1.5;
}

.shariah-footer {
    font-size: 15px;
    color: #222;
    line-height: 1.6;
    padding-top: 24px;
    margin: 0;
    border-top: 1px solid rgba(210, 152, 6, 0.25);
}

.section-desc {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px;
    color: var(--gray-text);
}

/* 50/50 Layout – left: vertical gold bar on plan items; right: collage + gold accents */
.section-50-50 {
    background: #fff;
    overflow: hidden;
}

.section-50-50 .flex-row {
    display: flex;
    align-items: stretch;
    gap: 50px;
}

.content-side {
    flex: 1;
    padding: 60px 40px 60px 0;
}

.content-side .serif-title {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 700;
    color: #222;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.content-side .gold-highlight {
    color: #D29806;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.5;
}

/* Plan items: short vertical gold bar on left, boxed appearance */
.plan-split-box {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
}

.plan-part {
    padding: 18px 20px 18px 24px;
    font-weight: 700;
    font-size: 15px;
    color: #222;
    border-left: 5px solid #D29806;
    background: #FFFEF9;
    margin-bottom: 2px;
    border-radius: 0 6px 6px 0;
}

.plan-part:last-child {
    margin-bottom: 0;
}

.plan-part::before {
    content: none;
}

.plan-conclusion {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* Right: image collage with main image, overlay, and gold decorative rectangles */
.image-side {
    flex: 1;
    min-height: 380px;
    position: relative;
    display: flex;
    align-items: center;
}

.collage-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
}



.collage-overlay {
    position: absolute;
    left: -8%;
    top: 50%;
    transform: translateY(-50%);
    width: 52%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 2;
}

.collage-overlay-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.collage-gold {
    position: absolute;
    width: 56px;
    height: 20px;
    background: #D29806;
    border-radius: 6px;
    z-index: 1;
}

.collage-gold-top {
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}

.collage-gold-bottom {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}

/* Payment Tables */
.section-payment {
    background: #FDFCF8;
}

.rate-badge {
    text-align: center;
    display: inline-block;
    border-radius: 6px;
    border: 1px solid #D29806;
    color: #D29806;
    padding: 10px 28px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.floor-toggles {
    display: flex;            
    width: fit-content;        
    margin: 30px auto;         
    
    /* Aesthetic Styling */
    justify-content: center;
    align-items: center;
    gap: 6px;
    border: 1px solid #D29806;
    border-radius: 50px;       
    padding: 6px;              
    background: #fff;
}

/* Individual Buttons */
.floor-btn {
    border: none;              
    background: transparent;
    color: #333;
    padding: 15px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;       
    font-family: inherit;     
}

/* Hover Effect */
.floor-btn:hover:not(.active) {
    background-color: rgba(210, 152, 6, 0.08);
    color: #D29806;
}

/* Active State (The Gold Pill) */
.floor-btn.active {
    background-color: #D29806;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(210, 152, 6, 0.2);
}

.commercial-rate {
    margin-top: 20px;
    margin-bottom: 0;
}
.padding-bottom-10px{
    padding-bottom: 10px;
}
.commercial-floor-panel[hidden] {
    display: none !important;
}

.commercial-floor-panel{
    padding-bottom: 30px;
}
.table-container {
    overflow-x: auto;
    overflow-y: visible;
    margin-bottom: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    -webkit-overflow-scrolling: touch;
}

.payment-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #ddd;
}

.payment-table th {
    background: #D29806;
    color: #fff;
    font-size: 12px;
    padding: 14px 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-align: center;
}

.payment-table th:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.margin-top-10px{
    margin-top: 10px;
}
.commercial-table th {
    background: #CA9004;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.payment-table td {
    padding: 12px 10px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 13px;
    color: #222;
    font-weight: 500;
    background: #fff;
}

.payment-table tbody tr:nth-child(even) td {
    background: #FFFEF9;
}

.table-note-box {
    background: #F8F6F0;
    border: 1px solid #D29806;
    border-radius: 12px;
    padding: 28px 30px;
    font-size: 13px;
    color: #444;
}

.table-note-box h4 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #222;
}

.table-note-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-note-box ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #444;
}

/* Unfilled diamond with thin gold outline (bullet) */
.table-note-box ul li::before {
    content: '◇';
    color: #D29806;
    font-size: 14px;
    font-weight: normal;
    flex-shrink: 0;
    line-height: 1.5;
}

.section-payment .text-center.mt-4 {
    margin-top: 28px;
}

.section-payment .btn-gold.rounded-full {
    padding: 14px 36px;
    font-size: 15px;
    font-weight: 700;
}

/* Amenities (Icons Grid) */
.amenities-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.amenity-item {
    background: #fff;
    border: 1px solid #E8D7A8;
    border-radius: 10px;
    padding: 28px 16px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.amenity-item:hover {
    border-color: #D29806;
    box-shadow: 0 4px 12px rgba(210, 152, 6, 0.12);
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    height: 48px;
}

.icon-box img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(52%) sepia(68%) saturate(800%) hue-rotate(15deg) brightness(92%) contrast(90%);
}

.icon-box i {
    font-size: 32px;
    color: #D29806;
}

.amenity-item span {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    display: block;
    line-height: 1.4;
}

/* Why Invest Grid */
.invest-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.invest-card {
    border: 1px solid #D29806;
    padding: 50px 24px 24px;
    border-radius: 12px;
    position: relative;
    background: #fff;
    transition: 0.3s;
}

.invest-card:hover {
    box-shadow: 0 10px 25px rgba(210, 152, 6, 0.15);
}

/* Gold circular badge with white number (match design) */
.card-number {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid #D29806;
    border-radius: 50%;
    color: #D29806;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(210, 152, 6, 0.3);
}
.invest-card:hover .card-number {
    background: #D29806;
    color: #fff;
    border: 1px solid #fff;
}

.invest-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #222;
    margin-top: 20px;
}

.invest-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* Why Invest CTA buttons */
.section-cta {
    margin-top: 40px;
}

.section-cta.two-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Footer */
.footer {
    background: #222224;
    padding: 60px 0;
    color: #fff;
    position: relative;
}

.footer-logo {
    text-align: center;
    margin-bottom: 20px;
}

.footer-logo img {
    height: 70px;
    display: inline-block;
    filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(5deg);
    /* Simple Gold filter attempt via CSS */
}

.footer-text {
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
}

.footer-text p {
    margin-bottom: 5px;
}

/* Mobile Responses */
@media (max-width: 900px) {
    .header-inner {
        flex-wrap: wrap;
    }

    .header-nav {
        order: 3;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    .header-nav:has(.nav-menu.active) {
        max-height: 320px;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0;
        padding: 16px 0 24px;
        width: 100%;
        align-items: stretch;
    }

    .nav-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-menu li:last-child {
        border-bottom: none;
    }

    .nav-menu a {
        font-size: 15px;
        padding: 14px 20px;
        display: block;
        text-transform: uppercase;
    }

    .hamburger {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        width: 30px;
        height: 20px;
        position: relative;
    }

    .hamburger span {
        background: #fff;
        height: 2px;
        width: 100%;
        position: absolute;
        left: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .hamburger span:nth-child(1) {
        top: 0;
    }

    .hamburger span:nth-child(2) {
        top: 9px;
    }

    .hamburger span:nth-child(3) {
        top: 18px;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    .about-grid,
    .features-split,
    .shariah-grid,
    .invest-cards-grid {
        grid-template-columns: 1fr;
    }

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

    .flex-row {
        flex-direction: column;
    }

    .content-side {
        padding: 40px 20px;
    }

    .section-50-50 .collage-wrap {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .section-cta.two-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .section-cta a {
        width: 100%;
        text-align: center;
    }

    .floor-toggles {
        /* On mobile, allow the container to fit within the screen padding */
        width: 100%;       
        max-width: 100%;
        
        /* If buttons are too wide, allow internal scrolling */
        overflow-x: auto;
        white-space: nowrap; 
        
        /* Align start so the first button is visible */
        justify-content: flex-start; 
        
        /* Hide scrollbar aesthetics if desired */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    
    /* Hide scrollbar for Chrome/Safari/Opera */
    .floor-toggles::-webkit-scrollbar {
        display: none;
    }
    
    .floor-btn {
        padding: 10px 15px; /* Slightly smaller padding on mobile */
        font-size: 13px;
    }
}