/* Custom Styling additions specifically tuned for the About Us grid layouts */
    .about-hero {
        position: relative;
        background: linear-gradient(rgba(26, 37, 44, 0.75), rgba(26, 37, 44, 0.85)), 
                    url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=1920&q=80');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        min-height: 60vh;
        display: flex;
        align-items: center;
        color: #fff;
        padding-top: 140px;
        padding-bottom: 80px;
        width: 100%;
        overflow: hidden;
    }

    .about-hero-title {
        font-size: 3.5rem;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 1px;
    }

    /* Asymmetric Narrative Image Stack Styling */
    .narrative-section {
        padding: 100px 0;
        background-color: #ffffff;
        overflow: hidden;
    }

    .image-stack {
        position: relative;
        width: 100%;
        min-height: 450px;
    }

    .image-stack-main {
        width: 75%;
        height: auto;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        object-fit: cover;
    }

    .image-stack-sub {
        position: absolute;
        width: 55%;
        bottom: -30px;
        right: 15px;
        border: 8px solid #fff;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        object-fit: cover;
    }

    /* Core Pillars Section Layout Styling */
    .pillars-section {
        padding: 100px 0;
        background-color: #fcfbf9;
        overflow: hidden;
    }

    .pillar-card {
        background: #fff;
        padding: 40px 30px;
        border-radius: 0;
        box-shadow: 0 5px 25px rgba(0,0,0,0.02);
        height: 100%;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        border-bottom: 3px solid transparent;
    }

    .pillar-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.07);
        border-bottom: 3px solid var(--accent-color);
    }

    .pillar-icon {
        font-size: 2rem;
        color: var(--accent-color);
        margin-bottom: 25px;
    }

    /* Historical Timeline Styling - Fixes White Screen Bug */
    .timeline-section {
        padding: 100px 0;
        background-color: #ffffff;
        overflow: hidden;
    }

    .timeline-wrapper {
        position: relative;
        padding: 30px 0;
        display: flex;
        flex-direction: column;
    }

    .timeline-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: #e0e0e0;
        transform: translateX(-50%);
    }

    .timeline-item {
        position: relative;
        width: 50%;
        margin-bottom: 40px;
        box-sizing: border-box;
    }

    .timeline-item.left {
        align-self: flex-start;
        padding-right: 50px;
    }

    .timeline-item.right {
        align-self: flex-end;
        padding-left: 50px;
        margin-top: 30px;
    }

    .timeline-dot {
        position: absolute;
        top: 24px;
        width: 12px;
        height: 12px;
        background: var(--accent-color, #17a2b8); /* Fallback to info color if variable missing */
        border-radius: 50%;
        z-index: 5;
    }

    .timeline-item.left .timeline-dot {
        right: -6px;
    }

    .timeline-item.right .timeline-dot {
        left: -6px;
    }

    .timeline-content {
        background: #fcfbf9;
        padding: 30px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    }

    .timeline-year {
        font-family: 'Playfair Display', serif;
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--accent-color, #17a2b8);
        margin-bottom: 5px;
    }

    /* Leadership Team Section Layout Styling */
    .leadership-section {
        padding: 100px 0;
        background-color: #f7f5f0;
        overflow: hidden;
    }

    .profile-card {
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.04);
        height: 100%;
        transition: transform 0.3s ease;
    }

    .profile-card:hover {
        transform: translateY(-5px);
    }

    .profile-img-wrap {
        width: 100%;
        height: 320px;
        overflow: hidden;
    }

    .profile-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .profile-info {
        padding: 25px;
    }

    .profile-role {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--accent-color, #17a2b8);
        font-weight: 600;
        display: block;
    }

    /* PERFECT MOBILE RESPONSIVENESS OVERRIDES */
    @media (max-width: 991.98px) {
        .about-hero {
            padding-top: 100px;
            padding-bottom: 60px;
        }
        .image-stack {
            min-height: 380px;
            margin-bottom: 40px;
        }
    }

    @media (max-width: 767.98px) {
        .about-hero-title {
            font-size: 2.3rem;
        }
        .narrative-section, .pillars-section, .timeline-section, .leadership-section {
            padding: 60px 0;
        }
        
        /* Timeline Mobile View Fix */
        .timeline-wrapper::before {
            left: 15px;
            transform: none;
        }
        .timeline-item {
            width: 100% !important;
            align-self: flex-start !important;
            padding-left: 40px !important;
            padding-right: 0 !important;
            margin-top: 0 !important;
        }
        .timeline-item.left .timeline-dot,
        .timeline-item.right .timeline-dot {
            left: 9px;
            right: auto;
        }
        
        .image-stack {
            min-height: 300px;
            margin-bottom: 50px;
        }
        .image-stack-main {
            width: 85%;
        }
        .image-stack-sub {
            width: 50%;
            bottom: -20px;
        }
    }
    
    
    
    /* Contact Page Specific Layout Variables & Design Tokens */
    :root {
        --brand-forest-green: #0b3c26;
        --brand-emerald-glow: #00e194;
        --light-neutral-bg: #fcfbf9;
        --card-border-color: #eaeaea;
    }

    /* Contact Hero Banner Layer */
    .contact-hero {
        position: relative;
        min-height: 60vh;
        background: linear-gradient(rgba(11, 60, 38, 0.75), rgba(11, 60, 38, 0.85)), 
                    url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        color: #ffffff;
        padding-top: 100px;
        padding-bottom: 60px;
        width: 100%;
        overflow: hidden;
    }

    .contact-hero h1 {
        font-family: 'Playfair Display', serif;
        font-size: 3.5rem;
        font-weight: 600;
        letter-spacing: -0.5px;
    }

    .hero-action-btn {
        background-color: var(--brand-emerald-glow);
        color: #000000;
        font-weight: 600;
        padding: 12px 30px;
        border-radius: 50px;
        transition: all 0.3s ease;
        border: none;
    }

    .hero-action-btn:hover {
        background-color: #00c480;
        transform: translateY(-2px);
        color: #000000;
    }

    /* Service Access Shortcuts Row */
    .shortcut-card {
        background: #ffffff;
        border: 1px solid var(--card-border-color);
        padding: 40px 25px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        height: 100%;
    }

    .shortcut-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(11, 60, 38, 0.08);
        border-color: var(--brand-forest-green);
    }

    .shortcut-icon {
        font-size: 1.8rem;
        color: var(--brand-forest-green);
        margin-bottom: 20px;
    }

    /* Virtual Office Tour Interactive Frames */
    .tour-section {
        padding: 90px 0;
        background-color: #ffffff;
        overflow: hidden; /* Added to prevent animation spill */
    }

    .tour-video-box {
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    .tour-video-box img {
        width: 100%;
        height: 230px;
        object-fit: cover;
    }

    .tour-play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand-forest-green);
        font-size: 1rem;
        padding-left: 3px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* Office Matrix Grid Layout */
    .offices-matrix-section {
        padding: 100px 0;
        background-color: var(--light-neutral-bg);
        overflow: hidden; /* Critical Fix for multi-directional staggering */
    }

    .branch-node-card {
        background: #ffffff;
        border: 1px solid var(--card-border-color);
        margin-bottom: 30px;
        transition: all 0.3s ease;
        height: calc(100% - 30px); /* Aligns card heights uniformly */
    }

    .branch-node-card:hover {
        box-shadow: 0 12px 30px rgba(0,0,0,0.06);
    }

    .branch-img-wrap {
        width: 100%;
        height: 190px;
        overflow: hidden;
    }

    .branch-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .branch-details {
        padding: 20px;
    }

    .branch-details h5 {
        color: var(--brand-forest-green);
        font-weight: 600;
        margin-bottom: 12px;
    }

    .branch-meta-link {
        font-size: 0.85rem;
        color: #495057;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        margin-right: 15px;
    }

    .branch-meta-link i {
        color: var(--brand-forest-green);
        margin-right: 6px;
    }

    /* Client Review Grid Modifications */
    .review-panel-box {
        background: #ffffff;
        border: 1px solid var(--card-border-color);
        padding: 30px;
        height: 100%;
    }

    .stars-indicator {
        color: #ffc107;
        margin-bottom: 15px;
    }

    /* GLOBAL MOBILE OVERFLOW PREVENTION & FIXES */
    .overflow-hidden-section {
        overflow: hidden;
        width: 100%;
    }

    /* MOBILE RESPONSIVE MEDIA QUERIES */
    @media (max-width: 767.98px) {
        .contact-hero {
            min-height: 50vh;
            padding-top: 120px;
            padding-bottom: 50px;
        }

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

        .contact-hero .lead {
            font-size: 0.95rem !important;
            padding: 0 15px;
        }

        .tour-section, 
        .offices-matrix-section,
        .overflow-hidden-section {
            padding: 60px 0 !important;
        }

        /* Prevent Flexbox buttons from squeezing on small phones */
        .contact-hero .d-flex {
            flex-direction: column;
            align-items: center;
            gap: 12px !important;
        }

        .contact-hero .btn {
            width: 80%;
            margin: 0 !important;
        }
        
        /* Disable harsh side-animations on mobile to ensure zero scrolling bugs */
        [data-aos="fade-right"],
        [data-aos="fade-left"] {
            transform: none !important;
            opacity: 1 !important;
            transition-property: none !important;
        }
    }



    /* Custom Design System Additions Inspired by screencapture-wasl-ae-en-hospitality-leisure-2026-07-02-14_30_02.jpg */
    .hospitality-hero {
        position: relative;
        height: 75vh;
        background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), 
                    url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=1920&q=80');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-end;
        padding-bottom: 80px;
        color: #fff;
        width: 100%;
        overflow: hidden;
    }

    .hero-floating-card {
        background: rgba(255, 255, 255, 0.95);
        padding: 30px 40px;
        color: var(--primary-color);
        max-width: 600px;
        box-shadow: 0 30px 60px rgba(0,0,0,0.15);
        border-radius: 4px;
    }

    .hero-floating-card h2 {
        font-size: 2.2rem;
        margin: 0;
        font-weight: 500;
    }

    /* Asymmetric Content Block Styles */
    .immersive-section {
        padding: 120px 0;
        background-color: #f9f9f9;
        overflow: hidden; /* Prevent multi-directional spill */
    }

    .split-image-panel {
        width: 100%;
        height: 550px;
        object-fit: cover;
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    }

    /* Creative Portfolio Interactive Cards */
    .portfolio-grid-section {
        padding: 100px 0;
        background-color: #ffffff;
        overflow: hidden; /* Fix for horizontal animation spill */
    }

    .hotel-reveal-card {
        background: #ffffff;
        border: 1px solid #eaeaea;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        height: 100%;
        overflow: hidden;
    }

    .hotel-reveal-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.08);
        border-color: var(--accent-color);
    }

    .hotel-card-img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

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

    .hotel-card-body {
        padding: 25px;
    }

    /* Modern Accordion / Filter Lists */
    .portfolio-filter-row {
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        padding: 25px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .portfolio-filter-row:hover {
        background: #fcfbf9;
    }

    .portfolio-filter-row h4 {
        font-size: 1.2rem;
        margin: 0;
        font-weight: 500;
    }

    /* Corporate Bio Section Components */
    .corporate-bio-section {
        padding: 100px 0;
        background-color: #f4f4f4;
        overflow: hidden; /* Prevent layout breakage from child elements */
    }

    .bio-portrait, .bio-asset-secondary {
        width: 100%;
        height: 400px;
        object-fit: cover;
        box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    }

    /* Custom tracking modifiers */
    .tracking-wide {
        letter-spacing: 2px;
    }

    /* GLOBAL MOBILE OVERFLOW PREVENTION & RESPONSIVE FIXES */
    .responsive-overflow-container {
        overflow: hidden;
        width: 100%;
    }

    @media (max-width: 991.98px) {
        .split-image-panel {
            height: 380px;
        }
    }

    @media (max-width: 767.98px) {
        .hospitality-hero {
            height: 60vh;
            padding-bottom: 40px;
        }

        .hero-floating-card {
            padding: 20px 25px;
            margin: 0 15px;
        }

        .hero-floating-card h2 {
            font-size: 1.6rem;
        }

        .immersive-section, 
        .portfolio-grid-section, 
        .corporate-bio-section,
        .responsive-overflow-container {
            padding: 60px 0 !important;
        }

        .split-image-panel {
            height: 280px;
        }

        .bio-portrait, .bio-asset-secondary {
            height: 250px;
        }

        /* Disable aggressive side animations on mobile to guarantee zero horizontal scroll bugs */
        [data-aos="fade-right"],
        [data-aos="fade-left"] {
            transform: none !important;
            opacity: 1 !important;
            transition-property: none !important;
        }
    }




    /* Design System Overrides Inspired by screencapture-hausandhaus-about-us-our-story-2026-07-02-14_36_42.jpg */
    :root {
        --brand-green-dark: #0b3c26;
        --brand-green-bright: #00e194;
        --neutral-light-bg: #f8f9fa;
        --text-muted-gray: #6c757d;
    }

    /* GLOBAL MOBILE OVERFLOW PREVENTION */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    .story-hero {
        position: relative;
        height: 65vh;
        background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.5)), 
                    url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        width: 100%;
        overflow: hidden;
    }

    .story-hero h1 {
        font-family: 'Playfair Display', serif;
        font-size: 3.5rem;
        font-weight: 600;
        letter-spacing: -0.5px;
    }

    .btn-brand-accent {
        background-color: var(--brand-green-bright);
        color: #000;
        font-weight: 600;
        padding: 12px 30px;
        border-radius: 50px;
        border: none;
        transition: all 0.3s ease;
    }

    .btn-brand-accent:hover {
        background-color: #00c480;
        transform: translateY(-2px);
        color: #000;
    }

    /* Core Layout Paragraph Block */
    .narrative-intro-block {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }

    .narrative-intro-block h2 {
        color: var(--brand-green-dark);
        font-weight: 700;
    }

    /* Image Grid Mosaic Framework */
    .mosaic-strip-wrapper {
        overflow: hidden;
        padding: 40px 0;
        width: 100%;
    }

    .mosaic-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 4px;
        transition: transform 0.4s ease;
    }

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

    /* Video Testimonial Card Elements */
    .video-testimonial-card {
        background: #fff;
        border: none;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: transform 0.3s ease;
        height: 100%;
    }

    .video-testimonial-card:hover {
        transform: translateY(-5px);
    }

    .video-thumbnail-container {
        position: relative;
        width: 100%;
        height: 220px;
    }

    .video-thumbnail-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video-play-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(11, 60, 38, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s ease;
    }

    .video-testimonial-card:hover .video-play-overlay {
        background: rgba(11, 60, 38, 0.4);
    }

    .play-icon-btn {
        width: 55px;
        height: 55px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand-green-dark);
        font-size: 1.2rem;
        padding-left: 4px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }

    /* Clean Review Slider Grids */
    .testimonial-slide-box {
        background: #fff;
        border-radius: 6px;
        padding: 35px;
        box-shadow: 0 5px 25px rgba(0,0,0,0.02);
        border: 1px solid #f0f0f0;
        height: 100%;
    }

    .star-rating-row {
        color: #ffc107;
        margin-bottom: 15px;
    }

    /* SECTION CONTAINER HELPER FOR AOS PROTECTION */
    .responsive-section-fix {
        overflow: hidden;
        width: 100%;
    }

    /* ========================================== */
    /* RESPONSIVE MEDIA QUERIES                   */
    /* ========================================== */
    @media (max-width: 991.98px) {
        .story-hero h1 {
            font-size: 2.8rem;
        }
        .mosaic-img {
            height: 160px;
        }
    }

    @media (max-width: 767.98px) {
        .story-hero {
            height: 50vh;
        }
        .story-hero h1 {
            font-size: 2.2rem;
        }
        .narrative-intro-block h2 {
            font-size: 1.8rem;
        }
        .mosaic-img {
            height: 130px;
        }
        .video-thumbnail-container {
            height: 200px;
        }
        .py-5 {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
        }
        .my-5 {
            margin-top: 30px !important;
            margin-bottom: 30px !important;
        }

        /* Prevent side animations from stretching layout bounds on mobile viewport */
        [data-aos="fade-right"],
        [data-aos="fade-left"] {
            transform: none !important;
            opacity: 1 !important;
            transition-property: none !important;
        }
    }

    @media (max-width: 575.98px) {
        .story-hero h1 {
            font-size: 1.8rem;
        }
        .mosaic-img {
            height: 110px;
        }
        .testimonial-slide-box {
            padding: 20px;
        }
    }




    /* Styling System Inspired by screencapture-investindubai-gov-ae-en-live-and-work-dubai-health-and-wellness-guide-2026-07-02-14_50_06.jpg */
    :root {
        --brand-deep-green: #0b3c26;
        --brand-accent-emerald: #00e194;
        --ui-neutral-bg: #fcfbf9;
        --ui-card-dark: #3a413e;
        --ui-card-teal: #084f3e;
        --ui-border: #eaeaea;
    }

    /* GLOBAL MOBILE OVERFLOW PREVENTION */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Core Content Structure */
    .wellness-hero-container {
        padding: 60px 0 40px 0;
        background: #ffffff;
        width: 100%;
        overflow: hidden;
    }

    .wellness-hero-container h1 {
        font-family: 'Playfair Display', serif;
        color: var(--brand-deep-green);
        font-size: 3rem;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    .guide-banner-img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        border-radius: 8px;
    }

    /* Informational Highlights Box */
    .info-callout-panel {
        background-color: #f0f6f4;
        border-radius: 6px;
        padding: 35px;
        border-left: 4px solid var(--brand-deep-green);
    }

    /* Dense Data Matrix Grids */
    .matrix-section-title {
        font-family: 'Playfair Display', serif;
        color: var(--brand-deep-green);
        font-weight: 700;
        margin-bottom: 25px;
    }

    /* Dark Charcoal Blocks */
    .grid-block-charcoal {
        background-color: var(--ui-card-dark);
        color: #ffffff;
        padding: 30px 24px;
        border-radius: 4px;
        height: 100%;
        transition: transform 0.3s ease;
    }

    .grid-block-charcoal:hover {
        transform: translateY(-4px);
    }

    /* Deep Teal Blocks */
    .grid-block-teal {
        background-color: var(--ui-card-teal);
        color: #ffffff;
        padding: 30px 24px;
        border-radius: 4px;
        height: 100%;
        transition: transform 0.3s ease;
    }

    .grid-block-teal:hover {
        transform: translateY(-4px);
    }

    .block-link {
        color: var(--brand-accent-emerald);
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
    }

    .block-link:hover {
        color: #ffffff;
        text-decoration: underline;
    }

    /* Accordion Link List rows */
    .resource-list-item {
        border-bottom: 1px solid var(--ui-border);
        padding: 18px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--brand-deep-green);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }

    .resource-list-item:hover {
        color: var(--brand-accent-emerald);
        text-decoration: none;
    }

    /* Image Overlap Layout Feature */
    .media-card-frame {
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        height: 100%;
    }

    .media-card-frame img {
        width: 100%;
        height: 100%;
        min-height: 250px;
        object-fit: cover;
    }

    .media-card-content {
        background-color: var(--ui-card-teal);
        color: #ffffff;
        padding: 35px;
        border-radius: 4px;
    }

    /* SECTION CONTAINER HELPER FOR AOS PROTECTION */
    .responsive-section-fix {
        overflow: hidden;
        width: 100%;
    }

    /* ========================================== */
    /* RESPONSIVE MEDIA QUERIES                   */
    /* ========================================== */
    @media (max-width: 991.98px) {
        .wellness-hero-container h1 {
            font-size: 2.4rem;
        }
        .guide-banner-img {
            height: 300px;
        }
    }

    @media (max-width: 767.98px) {
        .wellness-hero-container {
            padding: 40px 0 25px 0;
        }
        .wellness-hero-container h1 {
            font-size: 2rem;
        }
        .guide-banner-img {
            height: 220px;
        }
        .matrix-section-title {
            font-size: 1.6rem;
            margin-bottom: 15px;
        }
        .info-callout-panel {
            padding: 20px;
        }
        .py-5 {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
        }
        
        /* Force image frame height to behave nicely on single-column mobile view */
        .media-card-frame img {
            min-height: 200px;
            height: 220px;
        }

        /* Prevent side animations from stretching layout bounds on mobile viewport */
        [data-aos="fade-right"],
        [data-aos="fade-left"] {
            transform: none !important;
            opacity: 1 !important;
            transition-property: none !important;
        }
    }

    @media (max-width: 575.98px) {
        .wellness-hero-container h1 {
            font-size: 1.75rem;
        }
        .media-card-content {
            padding: 25px 20px;
        }
    }



    /* Styling System Inspired by screencapture-investindubai-gov-ae-en-why-dubai-family-offices-2026-07-02-14_54_11.jpg */
    :root {
        --brand-forest-green: #0b3c26;
        --brand-emerald-glow: #00e194;
        --ui-charcoal-dark: #222624;
        --ui-soft-beige: #fbfbfa;
        --ui-border-light: #eaeaea;
    }

    /* GLOBAL MOBILE OVERFLOW PREVENTION */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Core Document Layout Framework */
    .family-hero-frame {
        padding: 60px 0 40px 0;
        background: #ffffff;
        width: 100%;
        overflow: hidden;
    }

    .family-hero-frame h1 {
        font-family: 'Playfair Display', serif;
        color: var(--brand-forest-green);
        font-size: 3.2rem;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    .asymmetric-hero-banner {
        width: 100%;
        height: 420px;
        object-fit: cover;
        border-radius: 8px 8px 80px 8px; /* Subtle architectural slant inspired by source layout */
    }

    /* Asymmetric Content Image Containers */
    .asymmetric-image-container {
        position: relative;
        overflow: hidden;
        border-radius: 4px 40px 4px 4px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    }

    .asymmetric-image-container img {
        width: 100%;
        height: 100%;
        min-height: 380px;
        object-fit: cover;
    }

    /* Metrics Analytics Layout Row */
    .metrics-display-row {
        padding: 50px 0;
        background-color: #ffffff;
        border-top: 1px solid var(--ui-border-light);
        border-bottom: 1px solid var(--ui-border-light);
        overflow: hidden;
    }

    .metric-value-label {
        font-family: 'Playfair Display', serif;
        font-size: 3rem;
        font-weight: 700;
        color: var(--brand-forest-green);
        line-height: 1.1;
    }

    /* Interactive Operational Feature Nodes */
    .activity-feature-node {
        background: #ffffff;
        border: 1px solid var(--ui-border-light);
        padding: 35px 25px;
        border-radius: 4px;
        height: 100%;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .activity-feature-node:hover {
        border-color: var(--brand-forest-green);
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(11, 60, 38, 0.05);
    }

    .activity-icon-wrap {
        width: 50px;
        height: 50px;
        background-color: #f0f6f4;
        color: var(--brand-forest-green);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    /* Highlighted Action Callout Bar */
    .forest-callout-strip {
        background-color: var(--brand-forest-green);
        color: #ffffff;
        padding: 45px 40px;
        border-radius: 4px 40px 4px 4px;
    }

    .link-action-anchor {
        color: var(--brand-forest-green);
        font-weight: 700;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        font-size: 0.9rem;
    }

    .link-action-anchor:hover {
        color: var(--brand-emerald-glow);
        text-decoration: none;
    }

    /* SECTION CONTAINER HELPER FOR AOS PROTECTION */
    .responsive-section-fix {
        overflow: hidden;
        width: 100%;
    }

    /* ========================================== */
    /* RESPONSIVE MEDIA QUERIES                   */
    /* ========================================== */
    @media (max-width: 991.98px) {
        .family-hero-frame h1 {
            font-size: 2.5rem;
        }
        .asymmetric-hero-banner {
            height: 320px;
        }
    }

    @media (max-width: 767.98px) {
        .family-hero-frame {
            padding: 40px 0 25px 0;
        }
        .family-hero-frame h1 {
            font-size: 2.1rem;
        }
        .asymmetric-hero-banner {
            height: 240px;
            border-radius: 8px 8px 40px 8px;
        }
        .asymmetric-image-container img {
            min-height: 260px;
        }
        .metric-value-label {
            font-size: 2.4rem;
        }
        .forest-callout-strip {
            padding: 30px 25px;
            border-radius: 4px 25px 4px 4px;
        }
        .py-5 {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
        }

        /* Prevent side animations from stretching layout bounds on mobile viewport */
        [data-aos="fade-right"],
        [data-aos="fade-left"] {
            transform: none !important;
            opacity: 1 !important;
            transition-property: none !important;
        }
    }

    @media (max-width: 575.98px) {
        .family-hero-frame h1 {
            font-size: 1.85rem;
        }
        .metric-value-label {
            font-size: 2.2rem;
        }
    }



    /* Careers Page Core Variables & Branding System */
    :root {
        --brand-forest: #0b3c26;
        --brand-emerald: #00e194;
        --neutral-light-bg: #fbfbfa;
        --border-subtle: #eaeaea;
        --text-dark: #1a1a1a;
        --text-gray: #666666;
    }

    /* GLOBAL MOBILE OVERFLOW PREVENTION */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Hero Banner Configuration */
    .careers-hero {
        position: relative;
        min-height: 65vh;
        background: linear-gradient(rgba(11, 60, 38, 0.7), rgba(11, 60, 38, 0.8)), 
                    url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1920&q=80');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        color: #ffffff;
        padding-top: 80px;
        padding-bottom: 40px;
        width: 100%;
        overflow: hidden;
    }

    .careers-hero h1 {
        font-family: 'Playfair Display', serif;
        font-size: 3.5rem;
        font-weight: 600;
        letter-spacing: -0.5px;
    }

    .btn-emerald-pill {
        background-color: var(--brand-emerald);
        color: #000000;
        font-weight: 600;
        padding: 12px 32px;
        border-radius: 50px;
        border: none;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-emerald-pill:hover {
        background-color: #00c480;
        transform: translateY(-2px);
        color: #000000;
    }

    /* Central Highlight Blocks */
    .growth-statement-block {
        max-width: 750px;
        margin: 0 auto;
        text-align: center;
    }

    .growth-statement-block h2 {
        color: var(--brand-forest);
        font-weight: 700;
    }

    /* Interactive Media Cards */
    .media-tour-card {
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 8px 24 rgba(0,0,0,0.04);
        margin-bottom: 20px;
    }

    .media-tour-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .media-tour-card:hover img {
        transform: scale(1.03);
    }

    .media-play-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(11, 60, 38, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .play-circle-icon {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand-forest);
        font-size: 0.95rem;
        padding-left: 3px;
    }

    /* Grid Mosaic Strip Layout */
    .culture-mosaic-container {
        overflow: hidden;
        padding: 30px 0;
    }

    .mosaic-tile {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 4px;
    }

    /* Open Vacancies Node Elements */
    .vacancy-node-card {
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        padding: 30px;
        height: 100%;
        transition: all 0.3s ease;
    }

    .vacancy-node-card:hover {
        border-color: var(--brand-forest);
        box-shadow: 0 10px 30px rgba(11, 60, 38, 0.05);
    }

    .vacancy-node-card h5 {
        color: var(--brand-forest);
        font-weight: 600;
    }

    .vacancy-badge {
        background-color: var(--neutral-light-bg);
        color: var(--brand-forest);
        font-size: 0.75rem;
        font-weight: 600;
        padding: 4px 12px;
        border-radius: 4px;
        display: inline-block;
    }

    /* Testimonial Box Styling */
    .feedback-panel-card {
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        padding: 35px 30px;
        height: 100%;
    }

    .rating-gold-row {
        color: #ffc107;
        margin-bottom: 15px;
    }

    /* SECTION CONTAINER HELPER FOR AOS PROTECTION */
    .responsive-section-fix {
        overflow: hidden;
        width: 100%;
    }

    /* ========================================== */
    /* RESPONSIVE MEDIA QUERIES                   */
    /* ========================================== */
    @media (max-width: 991.98px) {
        .careers-hero h1 {
            font-size: 2.8rem;
        }
        .careers-hero {
            min-height: 50vh;
        }
    }

    @media (max-width: 767.98px) {
        .careers-hero {
            padding-top: 60px;
            min-height: auto;
        }
        .careers-hero h1 {
            font-size: 2.2rem;
        }
        .growth-statement-block h2 {
            font-size: 1.75rem;
        }
        .media-tour-card img {
            height: 200px;
        }
        .py-5 {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
        }
        .my-5 {
            margin-top: 30px !important;
            margin-bottom: 30px !important;
        }
        .pl-lg-5, .pr-lg-5 {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

        /* Prevent horizontal layout stretching from side animations on mobile */
        [data-aos="fade-right"],
        [data-aos="fade-left"] {
            transform: none !important;
            opacity: 1 !important;
            transition-property: none !important;
        }
    }

    @media (max-width: 575.98px) {
        .careers-hero h1 {
            font-size: 1.85rem;
        }
        .btn-emerald-pill {
            padding: 10px 24px;
            width: 100%;
            margin-bottom: 10px;
        }
        .careers-hero .btn-outline-light {
            width: 100%;
        }
        .careers-hero .d-flex {
            flex-direction: column;
            gap: 0 !important;
        }
        .careers-hero .btn-outline-light.mx-2, 
        .careers-hero .btn-emerald-pill.mx-2 {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }



    /* ==========================================================================
       GLOBAL RESPONSIVE RESET (Fixes the right side blank white screen issue)
       ========================================================================== */
    .caesar-page-wrapper {
        width: 100%;
        overflow-x: hidden; /* Prevent horizontal scrolling entirely */
        position: relative;
    }

    /* Core Color Tokens & Typography */
    :root {
        --brand-gold-accent: #c5a880;
        --ui-dark-text: #1a1a1a;
        --ui-muted-gray: #6c757d;
    }

    /* ==========================================================================
       HERO & INTEGRATED CONTENT BLOCK
       ========================================================================== */
    .hero-section {
        position: relative;
        min-height: 80vh; /* Adjusted from 100vh since header is external now */
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        background: #000000;
        color: #ffffff;
    }

    .video-container-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .parallax-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.6;
    }

    /* Hero Center Body */
    .hero-body-content {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .hero-title {
        font-size: 4rem;
        font-weight: 900;
        letter-spacing: 3px;
        line-height: 1.1;
    }

    .btn-custom-outline {
        border: 2px solid #ffffff;
        color: #ffffff;
        background: transparent;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        padding: 12px 30px;
        border-radius: 50px;
        letter-spacing: 1px;
        transition: all 0.3s ease;
    }

    .btn-custom-outline:hover {
        background: #ffffff;
        color: #000000;
    }

    /* ==========================================================================
       CONTENT SECTIONS (Welcome, Features, Floor plans)
       ========================================================================== */
    .welcome-section {
        padding: 100px 0;
        background: #ffffff;
    }

    .section-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--ui-dark-text);
        letter-spacing: 1px;
    }

    .swiper-container {
        width: 100%;
        padding-bottom: 50px;
        overflow: hidden;
    }

    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 450px;
        border-radius: 12px;
    }

    /* Features Grid */
    .features-section {
        padding: 80px 0;
        background: #fafafa;
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }

    .feature-box {
        padding: 30px;
        margin-bottom: 30px;
    }

    .feature-number {
        font-size: 2.5rem;
        font-weight: 300;
        color: var(--brand-gold-accent);
        margin-bottom: 15px;
    }

    /* Residence Floor Plans */
    .plan-section {
        padding: 100px 0;
        background: #ffffff;
    }

    .plan-card {
        border: none;
        background: #ffffff;
        box-shadow: 0 15px 40px rgba(0,0,0,0.05);
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 30px;
        transition: transform 0.3s ease;
    }

    .plan-card:hover {
        transform: translateY(-8px);
    }

    .plan-img {
        height: 260px;
        background-size: cover;
        background-position: center;
    }

    .btn-dark-custom {
        background: var(--ui-dark-text);
        color: #ffffff;
        border: none;
        width: 100%;
        padding: 12px;
        border-radius: 6px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 1px;
        transition: background 0.3s ease;
    }

    .btn-dark-custom:hover {
        background: var(--brand-gold-accent);
        color: #ffffff;
    }

    /* ==========================================================================
       MEDIA QUERIES FOR TRUE RESPONSIVENESS
       ========================================================================== */
    @media (max-width: 991.98px) {
        .hero-title {
            font-size: 2.6rem;
        }
        .swiper-slide {
            height: 300px;
        }
    }

    @media (max-width: 575.98px) {
        .hero-body-content {
            padding-top: 60px;
            padding-bottom: 60px;
        }

        .hero-title {
            font-size: 2.2rem;
        }

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

        .welcome-section, .plan-section, .features-section {
            padding: 60px 0;
        }

        .hero-body-content .d-flex {
            flex-direction: column !important;
            width: 100%;
        }

        .btn-custom-outline {
            width: 100%;
            margin-right: 0 !important;
            margin-bottom: 15px !important;
            text-align: center;
        }
    }