:root {
            --primary-purple: #7750b9;
            --dark-purple: #3e2a60;
            --secondary-orange: #e4852a;
            --bright-orange: #f29d4e;
            --light-bg: #f4f5f7;       
        }

        @font-face {
            font-family: "Ubuntu-Titling";
            src: url("../fonts/Ubuntu-Titling/UbuntuTitling-Bold.ttf");
        }

        /* Typography Mapping */
        body {
            font-family: 'Montserrat', sans-serif;
            color: #333;
            overflow-x: hidden;
            background-color: #fff;
        }

        h1, h2, h3, h4, h5, h6, .navbar-brand, .stat-number, .tile-content h3 {
            font-family: 'Ubuntu-Titling', sans-serif;
            font-weight: 700;
        }

        /* Buttons & Utility */
        .btn-orange {
            background-color: var(--secondary-orange);
            color: #fff;
            border-radius: 30px;
            padding: 9px 26px;
            font-weight: 300;
            border: none;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .btn-orange:hover {
            background-color: var(--primary-purple);
            color: #fff;
            transform: translateY(-2px);
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(230, 133, 35, 0.3);
        }

        .btn-orange-alt {
            background-color: var(--secondary-orange);
            color: #fff;
            border-radius: 30px;
            padding: 9px 26px;
            font-weight: 300;
            border: none;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .btn-orange-alt:hover {
            background-color: white;
            color: var(--secondary-orange);
            transform: scale(1.1);
        }

        .btn-purple {
            background-color: var(--primary-purple);
            color: #fff;
            border-radius: 30px;
            padding: 9px 26px;
            font-weight: 300;
            border: none;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .btn-purple:hover {
            background-color: var(--dark-purple);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(84, 45, 130, 0.3);
        }

        .btn-plain
        {
            display: block;
            color: #333;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .btn-plain:hover
        {
            transform: scale(1.1);
            font-weight: 400;
            color: var(--secondary-orange);
        }

        /* Navbar */
        .navbar {
            background-color: var(--primary-purple);
            padding: 15px 0;
        }
        .navbar-nav .nav-link {
            color: #fff;
            font-weight: 600;
            font-size: 0.85rem;
            margin-right: 18px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .navbar-nav .nav-link.active {
            color: var(--secondary-orange) !important;
            font-weight: 800;
        }

        .navbar-nav .nav-link:hover {
            color: var(--secondary-orange) !important;
        }


        /* Hero Section with Layered Skewed Gradients over Background Image */
        .hero-section {
            position: relative;
            background-image: url('../images/banner-1.png');
            background-size: cover;
            background-repeat: no-repeat;
            /* Shifted to the right as the focal point */
            background-position: 90% center; /* Try 'right center' if 90% isn't far enough */
            padding: 260px 0;
            overflow: hidden;
        }

        /* 2. After the Screen Break (Tablets & Mobile - 768px and below) */
        @media (max-width: 991px) {
            .hero-section {
                /* Shift it back to the center for smaller screens */
                background-position: center center; 
                background-image: none;
                background-color: #3e2a60;
                /* Optional: If 'cover' zooms in way too much on mobile, 
                you can force it to fit the width perfectly */
                 /*background-size: 100% auto; */
            }
        }

        /* 1. Behind Skewed Layer: Orange Gradient */
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: -15%;
            width: 52%;
            height: 100%;
            background: linear-gradient(-45deg, var(--secondary-orange), var(--bright-orange));
            transform: skewX(-16deg);
            z-index: 1;
            box-shadow: 5px 0 25px rgba(0,0,0,0.15);
        }

        /* 2. Front Skewed Layer: Purple Gradient */
        .hero-section::after {
            content: '';
            position: absolute;
            top: 0;
            left: -20%;
            width: 55%;
            height: 100%;
            background: linear-gradient(180deg, var(--dark-purple) 1%, var(--primary-purple) 20%);
            /*background-image: url('../images/Hero-Cover.png');
            background-position: center;
            background-size: contain;*/
            transform: skewX(-12deg);
            z-index: 2;
            box-shadow: 10px 0 30px rgba(0,0,0,0.25);
        }

        .hero-container {
            position: relative;
            z-index: 3; /* Places text content above overlays */
        }

        .hero-title {
            font-size: 5.8rem;
            color: #fff;
            line-height: 0.9;
            letter-spacing: 1px;
        }

        @media (max-width: 991.98px) {
            .hero-section {
                padding: 80px 0;
                background-image: url("../images/banner-1.png");
                background-size: cover;
                background-position: right center;
            }
            .hero-section::before {
                width: 100%;
                left: 0;
                transform: none;
                background: var(--bright-orange);
                opacity: 0.1;
            }
            .hero-section::after {
                width: 100%;
                left: 0;
                transform: none;
                background: linear-gradient(135deg, rgba(49, 20, 82, 0.8), rgba(84, 45, 130, 0.8));
            }
            .hero-title {
                font-size: 2.8rem;
            }
        }

        /* Accreditation Bar */
        .accreditation-bar {
            background-color: var(--secondary-orange);
            padding: 20px 0;
        }
        .accreditation-bar i {
            font-size: 2rem;
            color: #fff;
            opacity: 0.95;
        }

        /* Intro Section */
        .badge-purple {
            background-color: var(--primary-purple);
            color: white;
            padding: 6px 18px;
            border-radius: 20px;
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .badge-orange {
            background-color: var(--secondary-orange);
            color: white;
            padding: 6px 18px;
            border-radius: 20px;
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
        }

        /* Pillar Cards */
        .pillar-card {
            border: none;
            background: transparent;
        }
        .pillar-card img {
            border-radius: 16px;
            object-fit: cover;
            height: 240px;
            width: 100%;
        }

        /* Testimonial Banner */
        .testimonial-banner {
            background-color: var(--secondary-orange);
            color: #fff;
            padding: 10px 0;
        }

        /* Stats Section */
        .stats-section {
            background-color: var(--secondary-orange);
            color: #fff;
            padding: 20px 0;
        }
        .stat-number {
            font-size: 5rem;
            line-height: 1;
            margin-bottom: 5px;
        }

        /* Interactive Tiles */
        .interactive-tile {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: 340px;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        }
        .tile-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .tile-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(108, 49, 174, 0.5); /* Default Rich Purple Overlay */
            transition: background-color 0.4s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 35px;
            z-index: 2;
        }
        .tile-overlay-light {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(108, 60, 163, 0.5); /* Default Rich Purple Overlay */
            transition: background-color 0.4s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 35px;
            z-index: 2;
        }
        .tile-content h3 {
            color: #fff;
            text-transform: uppercase;
            margin-bottom: 5px;
            font-size: 1.8rem;
            letter-spacing: -0.5px;
            text-shadow: 
                /* Layer 1: Tight, dark outline for light backgrounds */
                0 0 8px rgba(119, 119, 119, 0.6), 
                0 0 8px rgba(119, 119, 119, 0.6),
                
                /* Layer 2: Wide, soft dark ambient glow for medium backgrounds */
                0 0 12px rgba(0, 0, 0, 0.5),
                
                /* Layer 3: Ultra-wide dark diffusion to separate it from complex textures */
                0 0 30px rgba(0, 0, 0, 0.3);
        }
        .tile-content p {
            color: var(--secondary-orange);
            font-size: 1.2rem;
            font-weight: 800;
            text-shadow: 
                /* Layer 1: Tight, dark outline for light backgrounds */
                0 0 8px rgba(73, 73, 73, 0.6), 
                0 0 8px rgba(73, 73, 73, 0.6),
                
                /* Layer 2: Wide, soft dark ambient glow for medium backgrounds */
                0 0 12px rgba(0, 0, 0, 0.5),
                
                /* Layer 3: Ultra-wide dark diffusion to separate it from complex textures */
                0 0 30px rgba(0, 0, 0, 0.3);
        }
        .tile-action {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .btn-tile-action {
            background-color: var(--primary-purple);
            color: white;
            font-weight: 700;
            border-radius: 30px;
            padding: 10px 28px;
            border: none;
            display: inline-block;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .btn-tile-action:hover {
            background-color: white;
            color: var(--secondary-orange);
            font-weight: 700;
            border-radius: 30px;
            padding: 10px 28px;
            border: none;
            display: inline-block;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* Mouse-over State: Transits seamlessly to vibrant Orange Overlay & triggers button arrival */
        .interactive-tile:hover .tile-overlay {
            background-color: rgba(230, 133, 35, 0.88);
        }
        .interactive-tile:hover .tile-bg {
            transform: scale(1.06);
        }
        .interactive-tile:hover .tile-action {
            opacity: 1;
            transform: translateY(0);
        }

        /* Footer */
        footer {
            background-color: var(--dark-purple);
            color: #fff;
            padding: 50px 0;
        }
        footer a {
            color: #fff;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        footer a:hover {
            color: var(--secondary-orange);
        }

        /* 1. HOVER TEXT CSS */
        
        /* Container must be relative so overlay can be absolute */
        .image-overlay-container {
            position: relative;
            cursor: pointer;
            overflow: hidden; /* Keeps zoom effect contained */
            border-radius: 8px; /* Optional rounding */
        }

        /* The image itself */
        .image-overlay-container img {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease; /* Zoom transition */
        }

        /* The hidden overlay layer */
        .overlay-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(107, 49, 174, 0.65); /* Semi-transparent black */
            color: white;
            display: flex;
            align-items: center; /* Vertical center */
            justify-content: center; /* Horizontal center */
            opacity: 0; /* Hidden initially */
            transition: opacity 0.3s ease; /* Fade transition */
            font-size: 1.1rem;
            font-weight: bold;
            padding: 10px;
            text-align: center;
        }

        /* 2. HOVER TRIGGERS */
        .image-overlay-container:hover .overlay-text {
            opacity: 1; /* Show text */
        }

        .image-overlay-container:hover img {
            transform: scale(1.05); /* Slight zoom on image */
        }

        /* Optional: Modal centering fix if needed */
        .modal-dialog-centered {
            display: flex;
            align-items: center;
            min-height: calc(100% - 1rem);
        }

        .gallery-img {
            border-radius: 15px;
        }

        /* ==========================================================================
        Blog Page - Custom Stylesheet Additions
        ========================================================================== */

        /* Hero Section with Layered Skewed Gradients over Background Image */
        .hero-section-blog {
            /*position: relative;*/
            background-image: url('../images/blog-tmp-banner.png');
            background-size: cover;
            background-repeat: no-repeat;
            /* Shifted to the right as the focal point */
            background-position: center center; /* Try 'right center' if 90% isn't far enough */
            padding: 240px 0;
            overflow: hidden;
        }

        /* 1. The Transparent Purple Overlay Layer */
        .hero-section-blog::before {
            content: '';
            /*position: absolute;*/
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary-purple);
            opacity: 0.6; /* Adjust this value (0.0 to 1.0) to change transparency */
            z-index: 1;   /* Places it above the background image */
            
            /* If you want to make it skewed later as your comment suggests, you can uncomment this: */
            /* transform: skewY(-3deg); transform-origin: top left; scale: 1.1; */
        }

        .blog-title {
            font-size: 3.4rem;
            padding: 0px;
            margin-bottom: 25px;
            color: #545454;
        }

        .blog-subtitle {
            font-size: 1.6rem;
            color: var(--secondary-orange);
            padding: 0px;
            margin: 0px;
        }

        /* Base Container (Ultra-Wide Monitors > 1600px) */
        .blog-main-container {
            background-color: #fff;
            border-radius: 50px;
            margin-top: -150px;
            width: 100%;
            max-width: 45%; /* Thinner on large screens to avoid excessively long line lengths */
            transition: all 0.3s ease;
        }

        /* Standard Laptops & Desktops (1200px to 1599px) */
        @media (max-width: 1599px) {
            .blog-main-container {
                max-width: 60%;
                margin-top: -120px;
            }
        }

        /* Small Laptops & Large Tablets in Landscape (992px to 1199px) */
        @media (max-width: 1199px) {
            .blog-main-container {
                max-width: 75%;
                margin-top: -100px;
                border-radius: 36px;
            }
        }

        /* Tablets in Portrait (768px to 991px) */
        @media (max-width: 991px) {
            .blog-main-container {
                max-width: 88%;
                margin-top: -80px;
                border-radius: 28px;
            }
            
            .blog-main-container .row.px-5 {
                padding-left: 2rem !important;
                padding-right: 2rem !important;
            }
        }

        /* Large Mobile Phones (576px to 767px) */
        @media (max-width: 767px) {
            .blog-main-container {
                max-width: 94%;
                margin-top: -60px;
                border-radius: 20px;
            }

            .blog-main-container .row.px-5 {
                padding-left: 1.25rem !important;
                padding-right: 1.25rem !important;
            }
        }

        /* Small Mobile Phones (< 575px) */
        @media (max-width: 575px) {
            .blog-main-container {
                max-width: 98%; /* Maximizes available width on tiny screens */
                margin-top: -40px;
                border-radius: 16px;
            }

            .blog-main-container .row.px-5 {
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
            }
        }


        /* ==========================================================================
        "What We Do" Page - Custom Stylesheet Additions
        ========================================================================== */

        /* 1. Global Utilities & Resets for New Page */
        .wwd-page-wrapper {
            overflow-x: hidden;
        }
        .font-headings {
            font-family: 'Ubuntu-Titling', 'Ubuntu', sans-serif;
        }
        .font-body {
            font-family: 'Montserrat', sans-serif;
        }

        /* 2. Hero Section Layout */
        .wwd-hero {
            position: relative;
            min-height: 80vh;
            display: flex;
            align-items: center;
            background: linear-gradient(rgba(62, 42, 96, 0.8), rgba(62, 42, 96, 0.8)), 
                        url('../images/blog-photo-wide.png') no-repeat center center;
            background-size: cover;
            background-attachment: scroll;
        }
        .wwd-hero-title {
            font-size: 4.5rem;
            line-height: 1.1;
        }
        .wwd-hero-text {
            font-size: 1.5rem;
            max-width: 750px;
        }

        /* 3. Section 1 - How We Work & Icon Row */
        .wwd-img-fluid-rounded {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 16px;
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08);
        }
        .wwd-icon-feature-box {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
            text-align: center;
            height: 100%;
            transition: transform 0.3s ease;
        }
        .wwd-icon-feature-box:hover {
            transform: translateY(-5px);
        }
        .wwd-icon-feature-box i {
            font-size: 2rem;
            color: var(--secondary-orange);
            margin-bottom: 10px;
            display: inline-block;
        }

        /* 4. Section 2 - Horizontal Timeline */
        .wwd-timeline-container {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 15px;
        }
        .wwd-timeline-node {
            flex: 1;
            background-color: #ffffff;
            border-radius: 12px;
            padding: 25px 20px;
            position: relative;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            border-top: 4px solid var(--primary-purple);
            transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer;
        }
        .wwd-timeline-node:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(119, 80, 185, 0.15);
            border-top-color: var(--secondary-orange);
        }
        .wwd-timeline-step {
            background-color: var(--light-bg);
            color: var(--dark-purple);
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            margin-bottom: 15px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .wwd-timeline-node:hover .wwd-timeline-step {
            background-color: var(--secondary-orange);
            color: #ffffff;
        }

        /* 5. Section 3 - Creating Homes & Stats */
        .wwd-stat-card {
            background-color: #ffffff;
            border-left: 4px solid var(--secondary-orange);
            padding: 15px 20px;
            border-radius: 4px 12px 12px 4px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        }
        .wwd-stat-number {
            font-size: 2rem;
            color: var(--dark-purple);
            font-weight: 700;
            line-height: 1.2;
        }

        /* 6. Section 4 - Building The Right Team Cards */
        .wwd-team-card {
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 16px;
            padding: 35px 25px;
            height: 100%;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
            transition: all 0.3s ease;
        }
        .wwd-team-card:hover {
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            transform: translateY(-5px);
        }
        .wwd-team-icon-circle {
            width: 60px;
            height: 60px;
            background-color: rgba(228, 133, 42, 0.1);
            color: var(--secondary-orange);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        /* 7. Section 5 - Family Partnership Split */
        .wwd-family-section {
            background-color: #f9f7fd;
        }

        /* 8. Section 6 - What Makes Us Different Large Feature Cards */
        .wwd-feature-card-large {
            background-color: #ffffff;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
            padding: 40px;
            height: 100%;
            border: 1px solid rgba(0,0,0,0.03);
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        .wwd-feature-card-large:hover {
            transform: scale(1.02);
        }
        .wwd-feature-card-large::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            background-color: var(--primary-purple);
        }
        .wwd-feature-card-large.accent-orange::before {
            background-color: var(--secondary-orange);
        }

        /* 9. Section 7 - Outcomes Dark Grid Layout */
        .wwd-dark-section {
            background-color: var(--dark-purple);
            color: #ffffff;
        }
        .wwd-outcome-badge {
            background-color: rgba(255, 255, 255, 0.07);
            padding: 20px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            height: 100%;
            border: 1px solid rgba(255,255,255,0.05);
            transition: background-color 0.3s ease;
        }
        .wwd-outcome-badge:hover {
            background-color: rgba(255, 255, 255, 0.12);
        }
        .wwd-outcome-badge i {
            color: #2ec4b6; /* Crisp Green Check */
            font-size: 1.3rem;
        }

        /* 10. Section 8 - Testimonial Quote Section Layout */
        .wwd-quote-mark {
            font-size: 4rem;
            color: rgba(119, 80, 185, 0.15);
            line-height: 0;
            vertical-align: middle;
        }
        .wwd-quote-text {
            font-size: 1.35rem;
            line-height: 1.6;
            color: var(--dark-purple);
        }

        /* 11. Final CTA Branded Section */
        .wwd-cta-branded {
            background: linear-gradient(180deg, var(--primary-purple) 0%, var(--dark-purple) 100%);
            color: #ffffff;
        }
        .wwd-btn-referral {
            background-color: var(--secondary-orange);
            color: #ffffff;
            border: none;
            border-radius: 30px;
            transition: background-color 0.2s ease;
        }
        .wwd-btn-referral:hover {
            background-color: var(--bright-orange);
            color: #ffffff;
        }

        /* 12. Responsive Breakpoint Overrides */
        @media (max-width: 1199.98px) {
            .wwd-timeline-container {
                flex-direction: column;
                gap: 20px;
            }
            .wwd-timeline-node::after {
                display: none;
            }
            .wwd-timeline-node {
                border-top: none;
                border-left: 4px solid var(--primary-purple);
                padding: 20px;
            }
            .wwd-timeline-node:hover {
                transform: translateX(5px) translateY(0);
                border-left-color: var(--secondary-orange);
            }
        }

        @media (max-width: 991.98px) {
            .wwd-hero-title {
                font-size: 3rem;
            }
            .wwd-hero-text {
                font-size: 1.25rem;
            }
        }

        /* ==========================================================================
        Get in Touch Page - Custom Stylesheet Additions
        ========================================================================== */

        .git-page-wrapper {
            background-color: var(--light-bg);
        }

        /* Contact Hero Header */
        .git-hero {
            background: linear-gradient(135deg, var(--dark-purple) 0%, var(--primary-purple) 100%);
            color: #ffffff;
            padding: 80px 0;
        }

        .git-hero-title {
            font-family: 'Ubuntu-Titling', sans-serif;
            font-size: 3.5rem;
            font-weight: 700;
        }

        /* The main card container - allows natural vertical expansion */
        .git-form-card {
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.02);
            height: 100%; 
            display: flex;
            flex-direction: column;
        }

        /* Cleaned wrapper container with no strict geometric aspect constraints */
        .git-iframe-placeholder {
            width: 100%;
            flex-grow: 1;
            display: block;
            position: relative;
        }

        /* Ensures the iframe renders completely flat and expands nicely */
        .git-iframe-placeholder iframe {
            width: 100% !important;
            min-height: 700px; /* Serves as a solid baseline height for shorter states */
            height: 100%;
            border: none;
            display: block;
        }

        /* Office Contact Cards */
        .git-office-card {
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
            border: 1px solid rgba(0, 0, 0, 0.02);
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .git-office-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        }

        .git-office-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
        }

        .git-border-purple::before {
            background-color: var(--primary-purple);
        }

        .git-border-orange::before {
            background-color: var(--secondary-orange);
        }

        .git-card-title {
            font-family: 'Ubuntu-Titling', sans-serif;
            color: var(--dark-purple);
        }

        /* Contact Detail Items */
        .git-detail-link {
            color: #333333;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .git-detail-link:hover {
            color: var(--secondary-orange);
        }

        .git-icon-box {
            width: 35px;
            text-align: center;
            color: var(--primary-purple);
        }

        .git-icon-box-orange {
            color: var(--secondary-orange);
        }

        /* Map Section Wrapper */
        .git-map-section {
            background-color: #ffffff;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .git-map-container {
            position: relative;
            width: 100%;
            height: 450px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .git-map-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Responsive Scaling Overrides */
        @media (max-width: 991.98px) {
            .git-hero-title {
                font-size: 2.8rem;
            }
            .git-iframe-placeholder {
                min-height: 500px;
            }
            .git-map-container {
                height: 350px;
            }
        }