/* --- 1. Reset & Variables --- */
        :root {
            /* Privy Direct Brand Colors */
            --primary-teal: #267c80; /* Main Brand Color */
            --hover-teal: #1b5e61;
            --accent-orange: #e67e22; /* Highlight Color */
            
            --dark-bg: #0b1120;
            --text-main: #555555;
            --text-dark: #111111;
            --white: #ffffff;
            --light-border: #e5e7eb;
            --font-stack: 'Manrope', sans-serif;
            --transition: all 0.3s ease-in-out;
        }

        html {
            scroll-behavior: smooth; /* Enables smooth scrolling for single page nav */
        }

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

        body {
            font-family: var(--font-stack);
            color: var(--text-main);
            max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
            background-color: #ffffff;
        }

        ul { list-style: none; }
        a { text-decoration: none; color: inherit; transition: var(--transition); }

        .container {
    max-width: 1320px;
    width: 100%;
    padding-left: 20px !important;  /* Overrides Bootstrap default */
    padding-right: 20px !important; /* Overrides Bootstrap default */
    margin-left: auto;
    margin-right: auto;
}
        /* --- 2. Top Bar --- */
        .top-bar {
            background-color: #f8f9fa;
            border-bottom: 1px solid var(--light-border);
            font-size: 14px;
            padding: 10px 0;
            color: var(--text-main);
        }
        .top-bar p {
    margin-bottom: 0 !important;
}

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

        .top-right {
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .quick-links {
            display: flex;
            gap: 15px;
            margin-bottom: 0px;
        }

        .quick-links li:not(:last-child) {
            border-right: 1px solid #ccc;
            padding-right: 15px;
        }

        .helpline {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
        }

        .phone-link {
            color: var(--primary-teal);
        }

        /* --- 3. Main Header (Nav) --- */
        .main-header {
            background: var(--white);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }

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

        /* Logo Styling */
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 24px;
            font-weight: 800;
            color: var(--text-dark);
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            /* background: var(--primary-teal); Removed bg so image shows clearly */
            color: var(--white);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            overflow: hidden;
        }
        
        /* New CSS specifically for the logo image */
        .logo-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Desktop Nav */
        .desktop-nav ul {
            display: flex;
            gap: 30px;
            margin-bottom: 0px;
        }

        .desktop-nav a {
            font-weight: 600;
            font-size: 16px;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .desktop-nav a:hover {
            color: var(--primary-teal);
        }

        /* Header Actions */
        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .search-trigger {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            margin-right: 10px;
        }

        .btn {
            padding: 12px 25px;
            border-radius: 5px;
            font-weight: 700;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-login {
            background: var(--text-dark);
            color: var(--white);
        }
        .btn-login:hover { background: #333; }

        .btn-apply {
            background: var(--primary-teal);
            color: var(--white);
        }
        .btn-apply:hover { background: var(--hover-teal); }

        .mobile-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
        }

        /* --- 4. Hero Carousel --- */
        .hero-slider {
            position: relative;
            height: 650px;
            overflow: hidden;
            background: #000;
        }

        .carousel-track {
            position: relative;
            height: 100%;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 1s ease;
            z-index: 1;
        }

        .slide.active {
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }

        .slide-bg {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transform: scale(1.1);
            transition: transform 6s ease; 
        }

        .slide.active .slide-bg {
            transform: scale(1);
        }

        /* Gradient Overlay - Teal Based */
        .teal-gradient-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                rgba(38, 124, 128, 0.95) 0%, 
                rgba(38, 124, 128, 0.95) 45%, 
                rgba(38, 124, 128, 0.6) 55%, 
                rgba(38, 124, 128, 0) 75%);
            z-index: 2;
        }

        .slide-content {
            position: relative;
            z-index: 3;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: var(--white);
            max-width: 1320px;
            padding-right: 50%;
        }

        .badge-group {
            display: inline-flex;
            margin-bottom: 25px;
            background: var(--white);
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            align-self: flex-start;
        }

        .badge-white {
            padding: 8px 15px;
            color: var(--text-dark);
            font-weight: 800;
            background: #fff;
        }

        .badge-orange {
            padding: 8px 15px;
            background: var(--accent-orange);
            color: var(--white);
            font-weight: 600;
        }

        .slide-content h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .slide-content .highlight {
            color: #ffe0b2; /* Light orange tint for visibility */
        }

        .slide-content p {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 35px;
            max-width: 600px;
            opacity: 0.95;
        }

        .btn-hero-primary {
            background: var(--white);
            color: var(--primary-teal);
        }
        .btn-hero-primary:hover {
            background: var(--text-dark);
            color: var(--white);
        }

        .btn-hero-outline {
            background: transparent;
            border: 2px solid var(--white);
            color: var(--white);
        }
        .btn-hero-outline:hover {
            background: var(--white);
            color: var(--primary-teal);
        }

        /* Dots */
        .slider-dots {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 10;
        }

        .dot {
            width: 12px;
            height: 12px;
            background: rgba(255,255,255,0.4);
            border-radius: 50%;
            cursor: pointer;
            transition: 0.3s;
        }

        .dot.active {
            height: 30px;
            background: var(--white);
            border-radius: 10px;
        }

        /* --- 5. Floating Services Strip --- */
        .services-strip {
            position: relative;
            z-index: 20;
            margin-top: -80px;
            margin-bottom: 80px;
        }

        .services-wrapper {
            background: var(--white);
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            padding: 50px 20px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            align-items: center;
        }

        .service-item {
            text-align: center;
            cursor: pointer;
        }

        .icon-box {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px auto;
            perspective: 1000px;
        }

        .icon-inner {
            width: 100%;
            height: 100%;
            background: #e0f2f1;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32px;
            color: var(--primary-teal);
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
            transform-style: preserve-3d;
        }

        .service-item:hover .icon-inner {
            transform: rotateY(180deg); 
            background: var(--primary-teal);
            color: var(--white);
        }

        .service-item h3 {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-dark);
            transition: 0.3s;
        }

        .service-item:hover h3 {
            color: var(--primary-teal);
        }

        /* --- 6. Advisory Services Section --- */
        .advisory-section {
            padding: 50px 0;
            background: #f8f9fa;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title .sub-title {
            color: var(--primary-teal);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 14px;
            margin-bottom: 10px;
            display: block;
        }

        .section-title h2 {
            font-size: 2.5rem;
            color: var(--text-dark);
            font-weight: 800;
        }

        .advisory-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-bottom: 50px;
        }

        .advisory-card {
            background: var(--white);
            border-radius: 10px;
            padding: 40px 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .advisory-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        }

        .advisory-card h3 {
            font-size: 1.5rem;
            color: var(--text-dark);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .advisory-card h3 .num {
            background: var(--primary-teal);
            color: var(--white);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .advisory-card p {
            color: var(--text-main);
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .advisory-card ul {
            margin-left: 20px;
            margin-bottom: 20px;
        }

        .advisory-card ul li {
            margin-bottom: 8px;
            position: relative;
            padding-left: 20px;
        }

        .advisory-card ul li:before {
            content: "•";
            color: var(--primary-teal);
            position: absolute;
            left: 0;
            font-weight: bold;
        }
        /* --- Show More/Less Logic --- */
.hidden-item {
    display: none; /* Hide items by default */
}

.hidden-item.visible {
    display: list-item; /* Show them when the 'visible' class is added */
    animation: fadeIn 0.5s ease;
}

.show-more-btn {
    background: none;
    border: none;
    color: var(--primary-teal);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    margin-left: 20px; /* Aligns with the bullets */
    margin-top: 5px;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.show-more-btn:hover {
    color: var(--accent-orange);
}

        /* --- 7. Real Estate Section --- */
        .realestate-section {
            padding: 100px 0;
            background: var(--white);
        }

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

        .realestate-content h2 {
            font-size: 2.5rem;
            color: var(--text-dark);
            margin-bottom: 20px;
        }

        .realestate-list {
            margin: 25px 0;
        }

        .realestate-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            margin-bottom: 20px;
        }

        .realestate-item i {
            color: var(--primary-teal);
            font-size: 20px;
            margin-top: 5px;
        }

        .realestate-item h4 {
            font-size: 18px;
            color: var(--text-dark);
            margin-bottom: 5px;
        }

        .realestate-visual {
            position: relative;
            height: 500px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }

        .realestate-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* --- Responsive Design --- */
        @media (max-width: 1024px) {
            .desktop-nav, .top-bar { display: none; }
            .mobile-toggle { display: block; }
            .header-actions .btn { display: none; }
            
            .slide-content { padding-right: 0; text-align: center; align-items: center; }
            .slide-content h1 { font-size: 2.5rem; }
            .teal-gradient-overlay {
                background: linear-gradient(180deg, rgba(38,124,128,0.9) 0%, rgba(38,124,128,0.8) 100%);
            }
            .badge-group { align-self: center; }
            .services-wrapper { grid-template-columns: repeat(3, 1fr); }
            .advisory-grid { grid-template-columns: 1fr; }
            .realestate-container { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .services-wrapper { grid-template-columns: 1fr 1fr; }
            .hero-buttons { display: flex; flex-direction: column; width: 100%; gap: 10px; }
            .btn { width: 100%; justify-content: center; }
            .services-strip { margin-top: 0; padding-top: 30px; }
            .services-wrapper { box-shadow: none; border: 1px solid #eee; }
            .slider-dots { display: none; }
            .realestate-visual { height: 300px; }
        }

        /* Mobile Menu */
        .mobile-menu-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100vh;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: 0.3s;
        }

        .mobile-menu-overlay.active { opacity: 1; pointer-events: all; }

        .mobile-menu-container {
            position: absolute;
            top: 0; right: -300px;
            width: 280px;
            height: 100%;
            background: var(--white);
            padding: 20px;
            transition: 0.4s ease-in-out;
        }

        .mobile-menu-overlay.active .mobile-menu-container { right: 0; }

        .mobile-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .mobile-links li {
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .mobile-links a { font-weight: 600; color: var(--text-dark); }

        /* --- Ticker Section --- */
        .ticker-section {
            background: #0b1120;
            color: #fff;
            padding: 12px 0;
            overflow: hidden;
            white-space: nowrap;
            border-bottom: 1px solid #1f2937;
        }

        .ticker-wrap { width: 100%; overflow: hidden; }
        .ticker-move { display: inline-block; white-space: nowrap; animation: ticker 30s linear infinite; }
        .ticker-item { display: inline-block; padding: 0 30px; font-size: 14px; font-weight: 600; }
        .t-up { color: #10b981; margin-right: 5px; }

        @keyframes ticker {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* --- Solutions Section (Tabs) --- */
        .solutions-section {
            padding: 100px 0;
            background: #fff;
            overflow: hidden;
        }

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

        .sub-title {
            color: var(--primary-teal);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 14px;
            margin-bottom: 10px;
            display: block;
        }

        .solutions-content h2 {
            font-size: 2.5rem;
            color: var(--text-dark);
            margin-bottom: 30px;
        }

        .solutions-tabs {
            display: flex;
            gap: 20px;
            border-bottom: 1px solid #eee;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .tab-btn {
            background: none;
            border: none;
            padding: 10px 0;
            font-size: 16px;
            font-weight: 600;
            color: #555;
            cursor: pointer;
            position: relative;
            transition: 0.3s;
        }

        .tab-btn.active { color: var(--primary-teal); }

        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--primary-teal);
        }

        .tab-content { display: none; animation: fadeIn 0.5s ease; }
        .tab-content.active { display: block; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .tab-content h3 { font-size: 1.5rem; margin-bottom: 15px; line-height: 1.4; }

        .stats-row { display: flex; gap: 40px; margin: 30px 0; }
        .stat-box { display: flex; align-items: center; gap: 15px; }
        .stat-box i { font-size: 32px; color: var(--text-dark); }
        .stat-box div { display: flex; flex-direction: column; }
        .stat-box strong { font-size: 24px; color: var(--accent-orange); }
        .stat-box span { font-size: 13px; color: #666; }

        .solution-actions {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-top: 30px;
        }

        .support-info { display: flex; flex-direction: column; font-size: 13px; }
        .support-info a { color: var(--text-dark); font-weight: 700; font-size: 16px; }
        .support-info a i { color: var(--primary-teal); }

        .solutions-visual {
            position: relative;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bg-shape {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 70% 50%, #e0f2f1 0%, #e0f2f1 60%, transparent 60%);
            z-index: 1;
            border-radius: 50%; 
            transform: scale(1.2);
        }

        .image-mask {
            position: relative;
            z-index: 2;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            overflow: hidden;
            border: 10px solid #fff;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }

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

        /* --- About Section --- */
        .about-section { padding: 100px 0; background: #fffafa; }
        .about-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

        .main-img-group { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
        .img-people { width: 100%; height: 450px; object-fit: cover; border-radius: 5px; }
        .img-building { width: 100%; height: 450px; object-fit: cover; border-radius: 5px; }

        .play-btn-overlay {
            position: absolute;
            top: 30px; left: 30px;
            width: 60px; height: 60px;
            background: var(--primary-teal);
            border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            color: #fff; font-size: 20px; cursor: pointer;
            box-shadow: 0 0 0 10px rgba(38, 124, 128, 0.3);
            animation: pulse 2s infinite;
        }
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(38, 124, 128, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(38, 124, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(38, 124, 128, 0); } }

        .since-text {
            position: absolute; right: -20px; top: 50%;
            transform: translateY(-50%) rotate(180deg);
            writing-mode: vertical-rl; font-size: 40px; font-weight: 800;
            color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.2); letter-spacing: 5px;
        }

        .feature-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
        .feature-box {
            background: #fff; padding: 20px; border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            display: flex; align-items: flex-start; gap: 15px;
        }
        .f-icon { font-size: 24px; color: var(--primary-teal); margin-top: 3px; }
        .feature-box h4 { font-size: 15px; line-height: 1.4; color: var(--text-dark); }
        .small-desc { font-size: 14px; color: #666; margin-bottom: 30px; line-height: 1.6; }

        @media (max-width: 991px) {
            .solutions-container, .about-container { grid-template-columns: 1fr; }
            .solutions-visual { order: -1; height: 300px; }
            .bg-shape { transform: scale(1); }
            .image-mask { width: 250px; height: 250px; }
            .main-img-group { display: block; }
            .img-building { display: none; }
            .since-text { display: none; }
        }

        /* --- Loan Calculator Section --- */
        .calculator-section {
            background-color: #050911;
            padding: 100px 0;
            color: #fff;
            position: relative;
            overflow: hidden;
            background-image: radial-gradient(circle at 10% 20%, rgba(38, 124, 128, 0.1) 0%, transparent 40%),
                              radial-gradient(circle at 90% 80%, rgba(38, 124, 128, 0.05) 0%, transparent 40%);
        }

        .calc-container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
        .calc-content .sub-title { color: var(--primary-teal); }
        .calc-content h2 { color: #fff; font-size: 2.5rem; font-weight: 700; margin-bottom: 15px; }
        .calc-desc { font-size: 15px; color: #a0a0a0; margin-bottom: 40px; }
        .color-link { color: var(--primary-teal); font-weight: 700; text-decoration: underline; }

        .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px; }
        .input-group { display: flex; flex-direction: column; }
        .input-group label { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: #fff; }
        .input-group input {
            background: #121824; border: 1px solid #2a3447; padding: 15px;
            border-radius: 5px; color: #fff; font-size: 16px; font-weight: 500; outline: none; transition: 0.3s;
        }
        .input-group input:focus { border-color: var(--primary-teal); box-shadow: 0 0 0 2px rgba(38, 124, 128, 0.2); }

        .calc-image-wrapper { position: relative; display: flex; justify-content: center; align-items: center; }
        .colored-backdrop {
            position: absolute; width: 80%; height: 90%;
            background: var(--primary-teal);
            top: 50%; right: 0; transform: translateY(-50%) skewX(-10deg);
            border-radius: 20px; z-index: 1;
        }
        .calc-image-wrapper img {
            position: relative; z-index: 2; width: 90%;
            border-radius: 10px; box-shadow: -20px 20px 50px rgba(0,0,0,0.5); object-fit: cover;
        }

        @media (max-width: 991px) {
            .calc-container { grid-template-columns: 1fr; }
            .calc-image-wrapper { margin-top: 50px; }
            .colored-backdrop { width: 100%; right: auto; left: 0; transform: translateY(-50%); }
            .calc-image-wrapper img { width: 100%; }
        }

        /* --- Why Privy Direct Grid (Was Investment) --- */
        /* --- Why Privy Direct Section Styling --- */

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-50 {
    margin-top: 50px;
}

/* Subtitle Styling */
.sub-title-teal {
    color: var(--primary-teal);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 10px;
    position: relative;
}

/* Grid Layout */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* Card Styling */
.why-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Hover Effects */
.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(38, 124, 128, 0.15); /* Teal shadow tint */
    border-color: var(--primary-teal);
}

/* Decorative top border on hover */
.why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.why-card:hover::before {
    transform: scaleX(1);
}

/* Icon Styling */
.why-card i {
    font-size: 45px;
    color: var(--primary-teal);
    margin-bottom: 25px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.why-card:hover i {
    transform: scale(1.1) rotate(5deg);
    color: var(--accent-orange); /* Changes to Orange on hover */
}

/* Typography */
.why-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.why-card p {
    font-size: 15px;
    color: var(--text-main);
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
    .why-grid {
        grid-template-columns: 1fr; /* Stacks vertically on tablets/mobile */
        gap: 20px;
    }
    
    .why-card {
        padding: 30px;
    }
}
        .investment-section {
            position: relative; padding: 100px 0; color: #fff; overflow: hidden;
        }
        .inv-bg-image {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover; background-position: center; z-index: 1;
        }
        .inv-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 15, 30, 0.9); z-index: 2;
        }
        .inv-container { position: relative; z-index: 3; }

        .inv-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; flex-wrap: wrap; gap: 30px; }
        .sub-title-white { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; color: #fff; opacity: 0.9; }
        .inv-title-group h2 { font-size: 3rem; font-weight: 700; line-height: 1.2; color: #fff; }
        .inv-info-group { max-width: 400px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
        .inv-info-group p { color: #ccc; font-size: 16px; line-height: 1.6; }

        .btn-white {
            background: #fff; color: #000; padding: 12px 30px;
            border-radius: 5px; font-weight: 700; font-size: 14px;
            display: inline-flex; align-items: center; gap: 10px; transition: 0.3s;
        }
        .btn-white:hover { background: var(--primary-teal); color: #fff; }

        .inv-grid {
            display: grid; grid-template-columns: repeat(4, 1fr);
            border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; overflow: hidden;
        }
        .inv-card {
            position: relative; height: 400px; padding: 30px;
            border-right: 1px solid rgba(255,255,255,0.15);
            display: flex; flex-direction: column; justify-content: space-between;
            transition: 0.3s; cursor: pointer;
        }
        .inv-card:last-child { border-right: none; }
        .inv-num {
            font-size: 40px; font-weight: 300; color: transparent;
            -webkit-text-stroke: 1px rgba(255,255,255,0.3); font-family: 'Manrope', sans-serif; transition: 0.3s;
        }
        .inv-card h3 { font-size: 18px; font-weight: 600; line-height: 1.4; color: #fff; }

        .inv-card.active, .inv-card:hover { position: relative; }
        .card-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover; background-position: center; z-index: 1;
            transition: 0.3s; opacity: 0;
        }
        .inv-card.active .card-bg, .inv-card:hover .card-bg { opacity: 1; }
        .card-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
        }
        .card-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
        .inv-card.active .inv-num, .inv-card:hover .inv-num { color: var(--accent-orange); -webkit-text-stroke: 0; font-weight: 700; }

        @media (max-width: 991px) {
            .inv-header { flex-direction: column; align-items: flex-start; }
            .inv-grid { grid-template-columns: 1fr 1fr; }
            .inv-card { border-bottom: 1px solid rgba(255,255,255,0.15); border-right: 1px solid rgba(255,255,255,0.15); height: 300px; }
            .inv-card:nth-child(2) { border-right: none; }
        }
        @media (max-width: 600px) {
            .inv-title-group h2 { font-size: 2rem; }
            .inv-grid { grid-template-columns: 1fr; }
            .inv-card { border-right: none; }
        }

        /* --- Testimonials Section (Value Prop) --- */
        .testimonials-section {
            padding: 100px 0;
            background-color: #fff9f9;
        }

        .t-section-header { margin-bottom: 50px; }
        .t-section-header h2 { font-size: 2.5rem; font-weight: 800; color: #111; margin-top: 10px; }
        .sub-title-teal { color: var(--primary-teal); font-weight: 700; font-size: 14px; text-transform: uppercase; }

        .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

        .testimonial-card {
            background: #fff; padding: 40px 30px; border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: 0.3s;
            border: 1px solid transparent;
        }
        .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.08); }

        .t-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .t-info h4 { font-size: 18px; font-weight: 700; color: #111; }
        .t-quote-icon { font-size: 30px; color: var(--primary-teal); }
        .t-text { font-style: italic; color: #555; line-height: 1.7; font-size: 15px; }

        @media (max-width: 991px) {
            .testimonials-grid { grid-template-columns: 1fr; }
            .testimonial-card { margin-bottom: 20px; }
        }
        /* --- 10. Contact Section Styling --- */
.contact-section {
    padding: 100px 0;
    background-color: #f4f7f6; /* Light grey-teal tint for separation */
    position: relative;
}

.contact-container {
    max-width: 900px !important; /* Narrower container for better form focus */
}

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

.contact-content h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 800;
}

.contact-content p {
    color: var(--text-main);
    margin-bottom: 40px;
    font-size: 16px;
}

/* Form Grid Layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns */
    gap: 25px;
    text-align: left; /* Align labels to left */
}

/* Make Message box span full width */
.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    background: var(--white);
    font-family: var(--font-stack);
    font-size: 15px;
    color: var(--text-dark);
    transition: var(--transition);
    outline: none;
}

.form-group textarea {
    height: 150px;
    resize: vertical; /* Allow user to resize vertically only */
}

/* Focus State */
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 3px rgba(38, 124, 128, 0.1);
}

.mt-20 {
    margin-top: 20px;
}

/* Button Alignment */
.contact-form button {
    width: 100%;
    justify-content: center;
    padding: 15px 30px;
    font-size: 16px;
}

/* --- Responsive Contact --- */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        gap: 20px;
    }
    
    .form-group.full-width {
        grid-column: span 1;
    }
    
    .contact-content h2 {
        font-size: 2rem;
    }
}

        /* --- Footer --- */
        .main-footer { width: 100%; color: #fff; font-size: 15px; }
        .footer-wrapper { display: flex; flex-wrap: wrap; min-height: 400px; }

        .footer-left {
            background-color: #111111; flex: 3; display: flex; flex-direction: column;
            justify-content: space-between; padding-top: 80px; position: relative;
        }
        .footer-container { padding: 0 50px; max-width: 1200px; margin: 0 auto; width: 100%; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }

        .footer-logo { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 20px; }
        .f-logo-icon {
            width: 45px; height: 45px; background: #fff; color: #111;
            border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 24px;
        }
        .footer-desc { color: #a0a0a0; line-height: 1.6; margin-bottom: 25px; max-width: 350px; }

        .social-links { display: flex; gap: 10px; }
        .social-links a {
            width: 40px; height: 40px; background: #222; display: flex; align-items: center; justify-content: center;
            border-radius: 4px; color: #fff; transition: 0.3s;
        }
        .social-links a:hover { background: var(--primary-teal); }

        .footer-col h3 { font-size: 18px; margin-bottom: 25px; font-weight: 700; }
        .footer-links li { margin-bottom: 12px; }
        .footer-links a { color: #a0a0a0; transition: 0.3s; }
        .footer-links a:hover { color: #fff; padding-left: 5px; }

        .contact-info li { display: flex; gap: 15px; margin-bottom: 20px; color: #a0a0a0; align-items: flex-start; }
        .contact-info i { color: var(--primary-teal); margin-top: 5px; }

        .copyright-area { border-top: 1px solid #222; text-align: center; padding: 25px 0; color: #666; font-size: 14px; }

        .footer-right {
            background-color: var(--primary-teal); flex: 1; padding: 80px 40px;
            position: relative; overflow: hidden; display: flex; flex-direction: column;
        }
        .newsletter-content { position: relative; z-index: 2; max-width: 350px; }
        .footer-right h3 { font-size: 20px; font-weight: 700; margin-bottom: 25px; }
        .newsletter-form input { width: 100%; padding: 15px; border-radius: 5px; border: none; margin-bottom: 15px; font-family: inherit; }
        .newsletter-form button {
            background: transparent; border: 1px solid #fff; color: #fff; padding: 12px 25px;
            font-weight: 700; cursor: pointer; border-radius: 5px; display: flex; align-items: center;
            gap: 10px; transition: 0.3s; text-transform: uppercase;
        }
        .newsletter-form button:hover { background: #fff; color: var(--primary-teal); }
        .footer-graphic {
            position: absolute; bottom: -50px; right: -50px; width: 300px; height: 300px;
            border: 40px solid rgba(255,255,255,0.05); border-radius: 50%; z-index: 1;
        }

        @media (max-width: 991px) {
            .footer-wrapper { flex-direction: column; }
            .footer-left { flex: none; width: 100%; }
            .footer-right { flex: none; width: 100%; padding: 60px 40px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-container { padding: 0 30px; }
        }

        @media (max-width: 600px) {
            .footer-grid { grid-template-columns: 1fr; gap: 30px; }
        }
/* =========================================
   PASTE THIS AT THE BOTTOM OF YOUR CSS
   ========================================= */

/* 1. Global Image Fix (Prevents horizontal scroll) */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 2. Tablet & Small Laptop Adjustments (Max Width: 1024px) */
@media (max-width: 1024px) {
    /* Hide Desktop Nav, Show Hamburger */
    .desktop-nav, .top-bar, .header-actions .btn { display: none; }
    .mobile-toggle { display: block; color: var(--text-dark); }
    
    /* Hero Slider Text Fix */
    .slide-content { 
        padding-right: 0; /* Remove the 50% padding */
        text-align: center; 
        align-items: center; 
        padding-left: 15px;
        padding-right: 15px;
    }
    .slide-content h1 { font-size: 2.5rem; }
    
    /* Services Strip - Wrap to 3 columns */
    .services-wrapper { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 30px;
        padding: 30px;
    }
    
    /* Investment Grid - Wrap to 2 columns */
    .inv-grid { grid-template-columns: 1fr 1fr; }
    .inv-card { 
        border-right: 1px solid rgba(255,255,255,0.15); 
        border-bottom: 1px solid rgba(255,255,255,0.15); 
        height: 300px; 
    }
}

/* 3. Mobile Devices (Max Width: 768px) */
@media (max-width: 768px) {
    /* --- General Layout Stacking --- */
    
    /* 1. Services Strip -> 2 Columns */
    .services-wrapper { grid-template-columns: 1fr 1fr; }
    
    /* 2. Advisory & Real Estate -> 1 Column */
    .advisory-grid, 
    .realestate-container, 
    .solutions-container, 
    .about-container,
    .calc-container { 
        grid-template-columns: 1fr; 
        gap: 40px;
    }

    /* 3. Move Images to Top/Bottom */
    .realestate-visual, .solutions-visual { 
        height: 300px; 
        order: -1; /* Moves image to top */
    }
    .calc-image-wrapper { margin-top: 30px; }

    /* 4. Testimonials & Why Grid -> 1 Column */
    .testimonials-grid, .why-grid { grid-template-columns: 1fr; }

    /* 5. Contact Form -> 1 Column */
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: span 1; }
    
    /* 6. Investment Model -> 1 Column */
    .inv-grid { grid-template-columns: 1fr; }
    .inv-card { border-right: none; }

    /* 7. Footer Stacking */
    .footer-wrapper { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-left, .footer-right { width: 100%; padding: 40px 20px; }
    
    /* 8. Calculator Inputs */
    .input-grid { grid-template-columns: 1fr; }
    .colored-backdrop { width: 100%; transform: none; right: auto; left: 0; }
    
    /* 9. Hero Buttons */
    .hero-buttons { 
        display: flex; 
        flex-direction: column; 
        width: 100%; 
        gap: 15px; 
    }
    .btn-hero-primary, .btn-hero-outline { 
        width: 100%; 
        justify-content: center; 
        margin: 0; 
    }
}

/* 4. Mobile Menu Toggle Visibility Fix */
.mobile-toggle {
    display: none; /* Hidden on desktop */
}
@media (max-width: 1024px) {
    .mobile-toggle { display: block; } /* Visible on mobile/tablet */
}
/* =========================================
   FIX FOR SOLUTIONS / TABS SECTION ALIGNMENT
   (Fixes the cut-off email and squashed icons)
   ========================================= */

@media (max-width: 480px) {
    
    /* 1. Stack the Stats (Expert Due Diligence / Market Insights) */
    .stats-row {
        display: flex;
        flex-direction: column !important; /* Forces them to stack vertically */
        gap: 15px !important;
        margin: 20px 0 !important;
    }

    .stat-box {
        width: 100%;
        justify-content: flex-start; /* Aligns them to the left */
    }

    /* 2. Stack the Bottom Action Area (Button + Email) */
    .solution-actions {
        display: flex;
        flex-direction: column !important; /* Button on top, Email below */
        align-items: flex-start !important;
        gap: 20px !important;
        margin-top: 25px !important;
    }

    /* 3. Make the Button Full Width */
    .solution-actions .btn-apply {
        width: 100%;
        justify-content: center;
    }

    /* 4. Fix the Email Text */
    .support-info {
        width: 100%;
    }
    
    .support-info a {
        font-size: 15px !important;
        word-break: break-all; /* Ensures long emails wrap if needed */
        display: block;        /* Ensures it takes its own line */
    }
}
 /* 2. Specific Fixes for Small Mobile (320px - 380px) */
@media (max-width: 380px) {

    /* Fix the Chart Image (The main culprit in your screenshot) */
    .image-mask {
        width: 260px !important;   /* Force it to be smaller than the screen */
        height: 260px !important;  /* Keep it square */
        max-width: 90%;            /* Ensure it never exceeds screen width */
        margin: 0 auto;            /* Center it perfectly */
    }
    
    /* Fix the Circle Background Shape behind the image */
    .bg-shape {
        transform: scale(0.8) !important; /* Shrink the background blob */
    }
    
    /* Fix the Services Icons (The grid with icons) */
    .services-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr !important; /* Force 2 columns */
        gap: 10px !important;      /* Reduce gap between icons */
        padding: 15px 5px !important; /* Reduce padding so it fits */
        width: 100% !important;
    }
    
    /* Shrink the Icon Circles slightly */
    .icon-box {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 10px;
    }
    .icon-inner {
        font-size: 24px !important; /* Smaller icon size */
    }
    .service-item h3 {
        font-size: 13px !important; /* Smaller text to prevent wrapping */
    }

    /* Fix Container Padding (Gives content more room) */
    .container, 
    .solutions-container, 
    .about-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    /* Fix the Hero Text Alignment */
    .slide-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}
 /* 2. Specific Fixes for Small Mobile (320px - 380px) */
@media (max-width: 320px) {

    /* Fix the Chart Image (The main culprit in your screenshot) */
    .image-mask {
        width: 260px !important;   /* Force it to be smaller than the screen */
        height: 260px !important;  /* Keep it square */
        max-width: 90%;            /* Ensure it never exceeds screen width */
        margin: 0 auto;            /* Center it perfectly */
    }
    
    /* Fix the Circle Background Shape behind the image */
    .bg-shape {
        transform: scale(0.8) !important; /* Shrink the background blob */
    }
    
    /* Fix the Services Icons (The grid with icons) */
    .services-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr !important; /* Force 2 columns */
        gap: 10px !important;      /* Reduce gap between icons */
        padding: 15px 5px !important; /* Reduce padding so it fits */
        width: 100% !important;
    }
    
    /* Shrink the Icon Circles slightly */
    .icon-box {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 10px;
    }
    .icon-inner {
        font-size: 24px !important; /* Smaller icon size */
    }
    .service-item h3 {
        font-size: 13px !important; /* Smaller text to prevent wrapping */
    }

    /* Fix Container Padding (Gives content more room) */
    .container, 
    .solutions-container, 
    .about-container, .feature-box {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    /* Fix the Hero Text Alignment */
    .slide-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}