/* ==========================================================================
   1. GLOBAL VARIABLES & RESET
   ========================================================================== */
:root {
    /* THEME: Luxury Charcoal */
    --primary-color: #383326;       /* Deep Charcoal Grey */
    --secondary-color: #72706a;     /* Transparent Charcoal for Hover */
    --gold: #9D8F63;                /* Antique Gold */
    --deep-gold: #756b45df;         /* Darker Gold */
    --ct-bar: #504f4a;              /* Specific Charcoal */
    --ct-bar-v2:#656257e0;
    --underlays-v2: #656257e0;
    --underlays: #504f4a;           /* Image Backgrounds */
    --accent-grey: #f5f5f5;         /* Light Grey Backgrounds */
    --text-color: #515151c7;        /* Standard Text */
    --white: #ffffff;
    --charcoal-gold: #656257e0;     /* Charcoal Gold (For CTA Bar) */
}

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

body {
    font-family: 'Manrope', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
}

/* ==========================================================================
   2. TYPOGRAPHY & UTILITIES
   ========================================================================== */
p {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;       
    font-weight: 400;      
    color: #3d3d3d;        
    line-height: 1.7;      
    margin-bottom: 20px;
}

h1 { 
    font-family: 'Manrope', sans-serif; 
    font-size: 3.5rem; 
    font-weight: 700; 
    color: #383838; 
    line-height: 1.2;
}

h2 { 
    font-family: 'Manrope', sans-serif; 
    font-size: 2rem; 
    font-weight: 600; 
    color: var(--gold); 
    margin-bottom: 20px;
}

h3 { 
    font-family: 'Manrope', sans-serif; 
    font-size: 1.5rem; 
    font-weight: 600; 
    color: #3d3d3d; 
    margin-bottom: 15px;
}

h4 { 
    font-family: 'Manrope', sans-serif; 
    font-size: 1.1rem; 
    font-weight: 700; 
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

h5 { 
    font-family: 'Manrope', sans-serif; 
    font-size: 0.9rem; 
    font-weight: 700; 
    color: #767676; 
    text-transform: uppercase;
}
h6 { 
    font-family: 'Manrope', sans-serif; 
    font-size: 0.9rem; 
    font-weight: 400; 
    color: #7e7e7e; 
    text-transform: none;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* =========================================
   3. GLOBAL COMPONENTS (Buttons & Preloader)
   ========================================= */

/* =========================================
   PRELOADER (Sequential Fading Dots)
   ========================================= */
#preloader {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: var(--white); 
    z-index: 99999;
    display: flex; 
    justify-content: center; 
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

.loader-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 30px; /* Space between logo and dots */
}

/* Bigger Logo */
.loader-content img { 
    width: 280px; 
    max-width: 85vw; /* Ensures it fits nicely on mobile */
    height: auto; 
}

/* Dots Container */
.fading-dots {
    display: flex;
    gap: 8px; /* Spacing between the dots */
}

/* Individual Dot Styling */
.fading-dots .dot {
    width: 12px;
    height: 12px;
    background-color: var(--gold); /* Uses your luxury gold color */
    border-radius: 50%;
    /* The animation applies to all dots, but we delay them below */
    animation: fadeSequence 1.4s infinite ease-in-out both;
}

/* Timing delays for the sequential effect */
.fading-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}
.fading-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}
.fading-dots .dot:nth-child(3) {
    animation-delay: 0s;
}

/* The Keyframe Animation */
@keyframes fadeSequence {
    0%, 80%, 100% { 
        opacity: 0.2; 
        transform: scale(0.8); /* Slight shrinking makes the fade feel softer */
    }
    40% { 
        opacity: 1; 
        transform: scale(1);
    }
}

/* Hides the preloader when the page loads */
.loader-hidden { 
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none; 
}

/* --- BUTTONS (Standardized 220px) --- */
/* Primary: Transparent (Hero) */
.hero-btn, .btn-primary {
    display: inline-flex; justify-content: center; align-items: center; 
    width: 220px; padding: 15px 0;
    background-color: transparent; border: 2px solid var(--white); color: var(--white);
    text-transform: uppercase; font-size: 0.9rem; font-weight: 700;
    transition: all 0.3s ease;
}
.hero-btn:hover, .btn-primary:hover { 
    background-color: var(--primary-color); border-color: var(--primary-color); color: var(--white); 
}

/* Secondary: Solid Gold (Forms/Finance) */
.btn-secondary, .btn-browse, .apply-btn, .btn-submit {
    display: inline-flex; justify-content: center; align-items: center; 
    width: 220px; padding: 15px 0;
    background-color: #656257e0; border: 2px solid #656257e0; color: var(--white);
    text-transform: uppercase; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    transition: all 0.3s ease;
}
.btn-secondary:hover, .btn-browse:hover, .apply-btn:hover, .btn-submit:hover { 
    background-color: var(--gold); border-color: var(--gold); color: var(--white);
}

/* CTA Button: Transparent for Blue Bar */
.btn-cta {
    display: inline-flex; justify-content: center; align-items: center; 
    width: 220px; padding: 15px 0;
    border: 1px solid var(--white); color:var(--white); background: transparent;
    text-transform: uppercase; font-size: 0.9rem; font-weight: 600;
}
.btn-cta:hover { border: 1px solid var(--gold); color:var(--gold); background: transparent; }

/* Nav specific button */
.btn-finance { 
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--primary-color); color: var(--white) !important; 
    padding: 12px 28px; border-radius: 4px; font-weight: 700; font-size: 0.9rem;
    text-transform: uppercase; transition: background 0.3s;
}
.btn-finance:hover { background-color: var(--secondary-color); }

/* The "All Services" Button (Outline Dark) */
.btn-outline-dark {
    display: inline-block; padding: 12px 30px; border: 1px solid #ccc;
    background-color: transparent; color: #333; text-transform: uppercase;
    font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: 0.3s;
}
.btn-outline-dark:hover { border-color: var(--primary-color); color: var(--primary-color); }


/* Form Fields */
.form-row { display: flex; gap: 20px; margin-bottom: 20px; }
.form-group { flex: 1; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 12px; border: 1px solid #ddd;
    font-family: 'Manrope', sans-serif; font-size: 1rem; color: #333;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { 
    outline: none; border-color: var(--primary-color); 
}

/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */
.main-nav { background: var(--white); padding: 25px 0; border-bottom: 1px solid #eaeaea; }
.nav-flex { display: flex; align-items: center; }
.logo img { height: 55px; width: auto; margin-right: 40px; } 

.menu { 
    display: flex; align-items: center; margin: 0; padding: 0; 
    flex-grow: 1; justify-content: center; gap: 40px; 
}
.menu li { display: flex; align-items: center; }

.menu a { 
    font-family: 'Manrope', sans-serif; 
    font-weight: 550; font-size: 1rem; color: #333; 
    text-transform: uppercase; text-decoration: none; 
    letter-spacing: 0.5px; padding: 0 2px;
}
.menu a:hover { color: var(--gold); }

@media (max-width: 768px) { .menu { display: none; } }

/* ==========================================================================
   5. HOME PAGE SECTIONS
   ========================================================================== */

/* --- Hero Section (Magazine Style) --- */
.hero {
    background-color: #222; 
    height: 95vh; 
    display: flex; align-items: center; justify-content: center;
    position: relative; text-align: center; color: var(--white);
    padding-bottom: 0; overflow: hidden;
}
.hero-slidesbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; transform: scale(1);
    transition: opacity 1.5s ease-in-out, transform 7s linear; z-index: 0;
}
.hero-slide.active { opacity: 1; transform: scale(1.1); z-index: 1; }
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.2); z-index: 2;
}
.hero-content { position: relative; z-index: 3; max-width: 900px; padding: 20px; width: 100%; }
.hero h1 { 
    color: var(--white); font-size: 4rem; margin-bottom: 15px; font-weight: 300; 
    text-shadow: 2px 2px 20px rgba(0,0,0,0.6);
}
.hero h1 span { font-weight: 700; display: block; }
.hero p { 
    font-size: 1.3rem; color: var(--white); margin-bottom: 0; font-weight: 300; 
    text-shadow: 1px 1px 10px rgba(0,0,0,0.8); letter-spacing: 0.5px;
}
.hero-buttons { display: flex; gap: 20px; justify-content: center; margin-top: 30px; }

/* Scroll Indicator */
.scroll-indicator {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 3; animation: bounce 2s infinite;
}
.scroll-indicator i { color: var(--white); font-size: 1.5rem; opacity: 0.8; }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
    40% {transform: translateY(-10px) translateX(-50%);}
    60% {transform: translateY(-5px) translateX(-50%);}
}

/* --- 4. FLOATING INFO BAR (Clean Architectural Style) --- */
.info-bar-section { position: relative; z-index: 10; margin-top: -80px; margin-bottom: 80px; }

.info-bar {
    background: var(--white); 
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    display: grid; grid-template-columns: repeat(3, 1fr); padding: 50px 40px;
}

.info-col { 
    display: flex; 
    gap: 25px; /* Increased gap for cleaner separation */
    padding-left: 40px; padding-right: 20px; 
    border-right: 1px solid #eee; 
    align-items: center; 
    transition: transform 0.3s ease; /* Smooth hover set up */
}
.info-col:last-child { border-right: none; }

/* Optional: Slight lift on hover */
.info-col:hover { transform: translateY(-3px); }

/* The Icon (No Box) */
.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon i { 
    font-size: 2.2rem; /* Made slightly larger since box is gone */
    color: var(--deep-gold); 
}

.info-text h4 { font-size: 0.85rem; margin-bottom: 5px; text-transform: uppercase; font-weight: 700; color: #999; letter-spacing: 1px; }
.contact-value { font-size: 1rem; color: #222; margin: 0; line-height: 1.4; font-weight: 500; }

.info-link {
    display: inline-block; margin-top: 5px; font-size: 0.9rem; color: var(--primary-color);
    font-weight: 500; text-decoration: none; text-transform: none; 
    transition: all 0.3s ease;
}
.info-link:hover { color: var(--gold); transform: translateX(0px); }

/* --- About Preview --- */
.about-section { padding-bottom: 80px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text h2 { font-size: 2rem; margin-bottom: 20px; line-height: 1.3; }
.about-text p { color: #333333; margin-bottom: 20px; font-size: 0.95rem; }
.about-image { position: relative; padding-left: 40px; padding-bottom: 30px; }
.about-image::before {
    content: ''; position: absolute; bottom: 0; left: 0; width: 80%; height: 90%;
    background-color: var(--underlays); z-index: -1;
}
.about-image img { width: 100%; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }

/* --- Vendor Carousel --- */
.vendor-section { padding: 60px 0; background-color: var(--white); }
.vendor-header { margin-bottom: 40px; text-align: left; }
.vendor-header h4 { color: var(--primary-color); font-size: 1.1rem; text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.vendor-header h2 { font-size: 2rem; color: var(--gold); margin: 0; }

.vendor-slider { background: white; height: 100px; overflow: hidden; position: relative; width: 100%; margin: 20px 0; }
.vendor-slider::before, .vendor-slider::after {
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    content: ""; height: 100px; position: absolute; width: 150px; z-index: 2;
}
.vendor-slider::after { right: 0; top: 0; transform: rotateZ(180deg); }
.vendor-slider::before { left: 0; top: 0; }
.slide-track { animation: scroll 40s linear infinite; display: flex; width: calc(250px * 26); }
.slide { height: 100px; width: 250px; display: flex; align-items: center; justify-content: center; }
.slide img { width: 150px; opacity: 1; transition: 0.3s; }
.slide img:hover { transform: scale(1.1); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 13)); } }


/* --- 6. SERVICES CAROUSEL --- */
.services-intro-text { padding-top: 80px; padding-bottom: 40px; background-color: var(--white); }

.services-section { padding: 80px 0; background-color: var(--white); }

.section-header-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 40px; 
}

.carousel-nav { display: flex; gap: 10px; }
.carousel-nav button {
    background-color: var(--charcoal-gold); color: white; border: none; width: 45px; height: 45px;
    cursor: pointer; transition: 0.3s; font-size: 1.2rem; border-radius: 4px; 
}
.carousel-nav button:hover { background-color: var(--deep-gold); }

.carousel-window { overflow: hidden; width: 100%; padding-bottom: 40px; }
.carousel-track { display: flex; gap: 30px; transition: transform 0.5s ease-in-out; }

/* --- NEW CARD STYLE (Compact, Static, Gold Bar) --- */
.service-card {
    /* Default to 100% width (Responsive first) */
    width: 100%;
    
    background: var(--white);
    border-radius: 12px; 
    overflow: hidden; 
    border: none;
    
    /* Static Shadow */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    
    display: flex; 
    flex-direction: column; 
    
    /* Required for Gold Bar */
    position: relative; 
    transition: box-shadow 0.3s ease;
}

/* The Gold Bar Animation */
.service-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 6px;
    background-color: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease-in-out;
}

/* Hover State */
.service-card:hover { 
    /* No jumping, just deeper shadow */
    box-shadow: 0 15px 40px rgba(0,0,0,0.12); 
}
.service-card:hover::after {
    transform: scaleX(1); /* Reveal Gold Bar */
}

/* Image Section */
.card-image { 
    height: 240px; 
    overflow: hidden; 
}
.card-image img { 
    width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.5s; 
}
.service-card:hover .card-image img { transform: scale(1.05); }

/* Content Section */
.card-content { 
    padding: 0 30px 30px 30px; 
    position: relative; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    
    /* Reduced min-height to remove empty whitespace */
    min-height: 200px; 
}

/* Icon Box */
.card-content .icon-box {
    background: var(--deep-gold); 
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    position: relative; 
    top: -25px; /* Overlap amount */
    margin-bottom: -15px; 
    border-radius: 4px;
}
.card-content .icon-box img { width: 60px; height: auto; }

/* Typography */
.card-content h3 { 
    margin-bottom: 15px; 
    font-size: 1.3rem; 
    color: #222; 
}

.card-content p { 
    color: #666; 
    margin-bottom: 20px; 
    font-size: 0.95rem; 
    line-height: 1.6; 
}

.link-blue { 
    color: var(--primary-color); 
    font-weight: 600; 
    text-decoration: none; 
    margin-top: auto; 
    font-size: 0.95rem;
}
.link-blue:hover { 
    text-decoration: none; 
    color: var(--gold); 
}
/* --- FORCE 2 CARDS ON HOME PAGE CAROUSEL (Desktop Only) --- */
.carousel-track .service-card {
    min-width: calc(50% - 15px); /* 50% width minus half the gap */
    width: calc(50% - 15px);
}

.services-footer { display: flex; justify-content: center; margin-top: 50px; width: 100%; }

/* --- RESPONSIVE FIX FOR CAROUSEL --- */
@media (max-width: 768px) {
    /* On mobile, reset to 1 card per view (100% width) */
    .carousel-track .service-card {
        min-width: 100%;
        width: 100%;
    }
}
/* --- Blue CTA Bar --- */
.cta-bar { 
    background-color: var(--ct-bar-v2); padding: 60px 0; color: var(--white); 
    margin-top: 50px; position: relative; overflow: hidden; 
}
.cta-bar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('assets/images/index/cta-left.svg'), url('assets/images/index/cta-right.svg');
    background-position: left bottom, right bottom; background-repeat: no-repeat; background-size: auto 100%;
    opacity: 0.3; pointer-events: none;
}
.cta-content { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.cta-text h2 { color: var(--white); font-size: 2rem; margin-bottom: 5px; font-weight: 400; }
.cta-text p { color: var(--white); font-size: 1.5rem; margin: 0; font-weight: 300; }

/* --- 8. WHY US --- */
.why-us-section { 
    padding: 80px 0; 
    background-color: var(--accent-grey); 
}

/* Container for the image */
.why-image {
    height: 100%;
    display: flex;
    align-items: center; /* Centers image vertically */
    position: relative;  /* Needed for the grey box positioning */
    padding-left: 30px;  /* Pushes image right so box shows on left */
    padding-bottom: 30px; /* Pushes image up so box shows on bottom */
}

/* THE DARK GREY UNDERLAY BOX */
.why-image::before {
    content: '';
    position: absolute;
    bottom: 0;       /* Align to bottom of container */
    left: 0;         /* Align to left of container */
    width: 80%;      /* Width of the grey box */
    height: 90%;     /* Height of the grey box */
    background-color: var(--underlays); /* Charcoal Color */
    z-index: 1;      /* Sits behind the image */
}

.why-image img {
    position: relative;
    z-index: 2;      /* Sits ON TOP of the grey box */
    width: 100%;
    height: 600px;   /* Reduced from 600px to be "slightly smaller" */
    object-fit: cover; 
    border-radius: 0; /* SQUARE CORNERS (Fixed) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Responsive: Hide box on mobile */
@media (max-width: 992px) {
    .why-image { padding: 0; margin-bottom: 30px; }
    .why-image::before { display: none; }
    .why-image img { height: 350px; }
}
/* --- 9. FINANCE SECTION (Hybrid - Updated) --- */
.finance-section { 
    padding: 100px 0; 
    background: #fff; 
}

/* We use the split-layout class, but we need to override alignment 
   to make sure the button pushes to the bottom correctly */
.finance-section .split-layout {
    align-items: stretch; /* Forces left and right sides to be equal height */
}

/* LEFT COLUMN: Organized to push button down */
.finance-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%; /* Takes up full height of the section */
}

.finance-text-wrapper h4 { margin-bottom: 10px; }
.finance-text-wrapper h2 { margin-bottom: 20px; }
.finance-text-wrapper p { margin-bottom: 30px; }

/* LOGOS: Strict 3-Column Grid */
.finance-trust-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Exactly 3 logos per row */
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    width: 100%;
}

.finance-trust-strip img {
    height: 40px; 
    width: auto;
    object-fit: contain;
    /* Optional: Center logos in their "cell" */
    justify-self: start; 
    transition: 0.3s;
}

.finance-trust-strip img:hover { transform: scale(1.1); }

/* BUTTON: Pushed to bottom */
.finance-section .apply-btn {
    margin-top: auto; /* This forces the button to the bottom line */
}

/* RIGHT COLUMN: Image Sizing */
.finance-section .split-image-wrapper {
    height: 100%;
    display: flex;
    align-items: center; /* Centers image vertically if wrapper is taller */
}

/* Control the Image Height Here */
.finance-section .split-image-wrapper img {
    width: 100%;
    height: 550px; /* Reduced height (approx 35% shorter) */
    object-fit: cover; /* Crops the sides so image doesn't squash */
    border-radius: 4px; /* Optional slight curve */
    position: relative;
    z-index: 2;
}

/* Adjust the Dark Grey Box to match new image size */
.finance-section .shape-right-top {
    top: -20px;
    right: -20px;
    bottom: 50px; /* Release bottom constraint */
    height: 550px; /* Match image height */
    width: 80%;
}

/* Responsive */
@media (max-width: 992px) {
    .finance-text-wrapper { text-align: center; align-items: center; }
    .finance-trust-strip { 
        justify-content: center; 
        grid-template-columns: 1fr 1fr; /* Switch to 2 cols on tablet */
        justify-items: center;
    }
    .finance-section .split-image-wrapper img { height: 300px; } /* Smaller on mobile */
    .finance-section .apply-btn { margin-top: 30px; }
}


/* --- Testimonials --- */
.testimonials-section { padding: 80px 0; background: var(--accent-grey); }
.testi-header { margin-bottom: 50px; }
.testi-header h4 { color: var(--primary-color); font-size: 1.1rem; text-transform: uppercase; margin-bottom: 10px; }
.testi-header h2 { font-size: 2.2rem; max-width: 600px; line-height: 1.2; }
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; }
.testi-left { position: relative; padding-right: 20px; }
.featured-card {
    background: white; padding: 40px; border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: relative;
    z-index: 2; min-height: 250px; display: flex; flex-direction: column; justify-content: center;
}
.featured-card p { font-size: 1rem; font-weight: 400; color: #333; margin-bottom: 20px; }
.blue-shape {
    position: absolute; top: 50px; right: -250px; width: 120%; height: 120%;
    background-color: var(--underlays-v2); z-index: 1;
}
.testi-right { display: flex; flex-direction: column; gap: 30px; position: relative; z-index: 5; }
.side-card { background: white; padding: 30px; border: 1px solid #eee; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.side-card p { font-size: 1rem; color: #333; margin-bottom: 15px; }
.testi-author { display: flex; align-items: center; gap: 15px; }
.author-img img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.author-info strong { display: block; color: var(--primary-color); font-size: 0.9rem; }
.author-info span { font-size: 0.8rem; color: #888; }

/* ==========================================================================
   6. PAGE: FINANCE, SERVICES, CONTACT, LEGAL
   ========================================================================== */

/* --- Top Section: Text Left / Form Right --- */
.finance-page-layout { 
    display: grid; 
    /* Left column gets slightly more space (1.2fr), Right gets (1fr) */
    grid-template-columns: 1.2fr 1fr; 
    gap: 80px; 
    align-items: flex-start; 
}

/* Left Column Styling */
.finance-info-col h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 20px; }
.finance-info-col .intro-text { font-size: 1.1rem; color: #555; margin-bottom: 40px; }

.finance-text-block {
    margin-bottom: 40px;
    padding-left: 20px;
    border-left: 3px solid #eee; /* Subtle line to organize content */
}

.finance-text-block h3 {
    color: var(--deep-gold);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.finance-text-block p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
}

/* The Gold Check List */
.gold-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gold-check-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    color: #555;
    font-size: 0.95rem;
}

/* Create the Gold Checkmark icon */
.gold-check-list li::before {
    content: '\f00c'; /* FontAwesome Check Code */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--gold);
    font-size: 0.9rem;
}

/* --- Partners Grid Section --- */
.partners-section { padding: 80px 0; background-color: var(--accent-grey); }
.partners-header { text-align: center; margin-bottom: 50px; }
.partners-header h4 { color: var(--primary-color); font-size: 1.1rem; text-transform: uppercase; margin-bottom: 10px; }
.partners-header h2 { font-size: 2.2rem; color: var(--gold); }

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

.partner-card {
    background: var(--white); padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-bottom: 4px solid var(--gold);
    transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; min-height: 480px;
}
.partner-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.partner-card h3 { font-size: 1.3rem; margin-bottom: 15px; color: #222; }
.partner-card p { color: #666; font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; flex-grow: 1; }

.logo-grid { 
    display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center;
    margin-top: auto; padding-top: 20px; border-top: 1px solid #eee;
}
.logo-grid img { height: 55px; width: auto; max-width: 140px; object-fit: contain; filter: none; opacity: 1; transition: 0.3s; }
.logo-grid img:hover { transform: scale(1.05); }

/* --- Responsive Adjustments for Finance --- */
@media (max-width: 992px) {
    .finance-page-layout { grid-template-columns: 1fr; gap: 50px; }
    .partners-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .partners-grid { grid-template-columns: 1fr; }
}
/* =========================================
   11. PAGE: ABOUT
   ========================================= */

/* General Section Styling */
.page-section { padding: 80px 0; }
.bg-grey { background-color: var(--accent-grey); }

.split-layout { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    align-items: center; 
}

/* Headings & Text */
.sub-heading { color: var(--primary-color); font-size: 1.2rem; text-transform: uppercase; margin-bottom: 10px; }
.split-text h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 25px; }
.split-text h2 { font-size: 2rem; margin-bottom: 20px; line-height: 1.2; }
.split-text p { color: #666; font-size: 1rem; margin-bottom: 20px; line-height: 1.7; }

.button-row { display: flex; gap: 20px; margin-top: 30px; }

/* Image Wrapper with Blue Shapes */
.split-image-wrapper { position: relative; padding: 20px; }
.img-responsive { width: 100%; height: auto; position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.img-tall { width: 100%; height: 500px; object-fit: cover; min-height: 300px; }

.shape-box { position: absolute; background-color: var(--underlays); z-index: 1; }
.shape-left-bottom { top: 50px; bottom: -20px; left: -20px; width: 90%; }
.shape-right-top { top: -20px; bottom: 50px; right: -20px; width: 90%; }
.shape-right-full { top: 50px; bottom: -20px; right: -20px; width: 90%; }

/* =========================================
   11b. NEW VALUES & ACCREDITATION SECTION
   ========================================= */

.values-section {
    padding: 100px 0;
    background-color: var(--white);
}

.values-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

/* --- VALUES GRID --- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    margin-bottom: 80px; /* Space before the logos */
    text-align: center;
}

.value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.value-icon {
    margin-bottom: 25px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30%;
    background-color: var(--accent-grey); /* Subtle circle background */
    transition: transform 0.3s ease;
}

.value-item:hover .value-icon {
    transform: translateY(-5px);
    background-color: #f0f0f0;
}

/* FILTER: Turns Blue Icons into Gold/Bronze to match theme */
.value-icon img {
    width: 90px;
    height: auto;
    /* This filter approximates your Gold color from Blue icons */
    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(350deg);
}

.value-item h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.value-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
}

/* --- ACCREDITATION STRIP --- */
.accreditation-strip {
    border-top: 1px solid #eaeaea;
    padding-top: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.accreditation-strip h5 {
    color: #999;
    letter-spacing: 2px;
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
}

.accreditation-logos {
    display: flex;
    gap: 60px;
    align-items: center;
    justify-content: center;
    opacity: 0.8; /* Make them slightly subtle */
}

.accreditation-logos img {
    height: 60px; /* Standardize height */
    width: auto;
    filter: grayscale(100%); /* Makes them black & white for professionalism */
    transition: 0.3s;
}

.accreditation-logos img:hover {
    filter: none; /* Color on hover */
    opacity: 1;
}

/* Responsive for About Page */
@media (max-width: 992px) {
    .split-layout { grid-template-columns: 1fr; gap: 40px; }
    .reverse-mobile { display: flex; flex-direction: column-reverse; }
    
    .values-grid { grid-template-columns: 1fr; gap: 40px; }
    .accreditation-logos { gap: 30px; flex-direction: column; }
    
    .shape-box { display: none; }
    .button-row { flex-direction: column; }
    .btn-secondary { width: 100%; }
}

/* Legal Page Headers */
.page-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.089), rgba(0, 0, 0, 0.105)), url('assets/images/index/hero-bg.jpg');
    background-size: cover; background-position: center;
    height: 40vh; display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--white); margin-bottom: 50px;
}
.header-content h1 { 
    font-size: 3rem; text-transform: uppercase; letter-spacing: 1px; color: var(--white);
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.legal-section { padding-bottom: 80px; }
.legal-content h3 {
    font-size: 1.5rem; color: var(--secondary-color); margin-top: 40px; margin-bottom: 15px;
    border-bottom: 1px solid #eee; padding-bottom: 10px;
}
.legal-content p { margin-bottom: 15px; color: #555; font-size: 1rem; }
.legal-content ul { list-style: disc; margin-left: 20px; margin-bottom: 20px; color: #555; }
.legal-content li { margin-bottom: 8px; }

/* Resources Page */
.resources-section { padding: 80px 0; text-align: center; background-color: var(--white); }
.resources-intro { max-width: 700px; margin: 0 auto 50px auto; }
.resources-intro h2 { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; }
.resource-placeholder img { width: 100%; max-width: 900px; height: auto; border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); margin: 0 auto; }

/* Service Detail Pages (Tabs/Sidebar) */
.service-tab-section { padding: 60px 0; }
.service-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; align-items: flex-start; }
.service-intro { padding: 60px 0; background-color: var(--white); }
.intro-flex { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.intro-left { display: flex; align-items: flex-start; gap: 30px; max-width: 800px; }
.service-icon-large { background-color: var(--charcoal-gold); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; }
.service-icon-large img { width: 70px; height: auto; }
.intro-details h1 { font-size: 2.5rem; color: #222; margin-bottom: 10px; }
.intro-details p { font-size: 1rem; color: #666; line-height: 1.6; max-width: 500px; }
.service-hero-image { width: 100%; height: 600px; overflow: hidden; }
.service-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tabs-nav { display: flex; border-bottom: 2px solid #eee; margin-bottom: 30px; flex-wrap: wrap; }
.tab-btn { background: none; border: none; padding: 15px 30px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 1rem; color: #555; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.3s; }
.tab-btn:hover { color: var(--gold); }
.tab-btn.active { color: var(--primary-color); border-bottom: 3px solid var(--gold); }
.tab-content { animation: fadeEffect 0.5s; }
@keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
.tab-content h2 { font-size: 2rem; margin-bottom: 20px; }
.tab-content p { margin-bottom: 15px; color: #555; line-height: 1.7; }
.check-list { list-style: disc; margin-left: 20px; color: #555; line-height: 1.8; }
.review-box { background: #f9f9f9; padding: 25px; border-left: 4px solid var(--primary-color); margin-bottom: 20px; }
.review-box .stars { color: #FFD700; margin-bottom: 10px; font-size: 0.9rem; }
.review-box p { font-style: italic; color: #333; font-weight: 500; }
.review-box strong { display: block; color: var(--primary-color); margin-top: 10px; }
.ba-block { margin-bottom: 40px; }
.ba-header { background: var(--charcoal-gold); color: white; padding: 10px 15px; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 15px; }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ba-item { position: relative; }
.ba-item img { width: 100%; height: 100%; object-fit: cover; }
.ba-label { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.9); color: #333; padding: 4px 8px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ba-scope h3 { font-size: 1.3rem; margin-top: 30px; margin-bottom: 15px; color: #222; }
.sidebar-form-box { background: white; border: 1px solid #ddd; padding: 30px; border-top: 5px solid var(--gold); position: sticky; top: 100px; }
.sidebar-header { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.sidebar-header h3 { font-size: 1.2rem; margin-bottom: 5px; }
.sidebar-header p { font-size: 0.9rem; color: #666; }
.more-services-section { padding: 80px 0; background-color: var(--accent-grey); }
.ms-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.ms-header h2 { font-size: 2rem; color: var(--gold); }
.more-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.more-services-grid .service-card { width: 100%; }




/* ==========================================================================
   12. FOOTER
   ========================================================================== */
footer { background-color: var(--white); border-top: 1px solid #eaeaea; margin-top: 0; }

/* --- CONTACT STRIP (UNTOUCHED) --- */
.footer-contact-strip { padding: 50px 0; border-bottom: 1px solid #eaeaea; }
.contact-box-wrapper { border: 1px solid #e5e5e5; padding: 40px; background-color: #fff; }
.contact-strip-grid { display: flex; justify-content: space-between; align-items: center; }
.contact-item { display: flex; align-items: center; gap: 20px; flex: 1; justify-content: center; }
.with-borders { border-left: 1px solid #ddd; border-right: 1px solid #ddd; }

.contact-text h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 5px; color:#757575 ; text-transform: uppercase; letter-spacing: 1px; }
.contact-text a { font-size: 1rem; color: #222; text-decoration: none; font-weight: 500; }
.contact-text a:hover { color: var(--gold); text-decoration: none; }
.whatsapp-link { color: #222 !important; font-weight: 600; }
.whatsapp-link:hover { color: var(--gold) !important; text-decoration: none; }


/* --- MAIN FOOTER (Redesigned 4-Column Layout) --- */
.main-footer { 
    padding: 80px 0; /* Increased breathing room */
    background-color: whitesmoke; 
}

.footer-layout { 
    display: grid; 
    /* 4 Columns: Brand | Links | Areas | Payments */
    /* 1.2fr (Brand) - 0.8fr (Links) - 1.5fr (Areas) - 1fr (Payments) */
    grid-template-columns: 1.2fr 0.8fr 1.5fr 1fr; 
    gap: 40px; 
    align-items: start; /* Default alignment */
}

.footer-col h5 { 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    color: #7d7d7d; /* Lighter grey for headers */
    margin-bottom: 20px; 
    font-weight: 700; 
    letter-spacing: 1px;
}

/* 1. Brand (Vertically Centered) */
.footer-brand { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    align-self: center; /* <--- Centers the Logo/Slogan vertically in the row */
}
.footer-logo { height: 50px; width: auto; align-self: flex-start; }
.slogan { font-size: 0.95rem; color: #555; margin: 0; }

/* 2. Quick Links */
.footer-nav { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    padding-left: 15%; /* Removed padding since we removed the 5th column */
}
.footer-nav ul { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; /* Comfortable spacing */
    list-style: none; 
    padding: 0; 
    margin: 0; 
    line-height: 1;
}
.footer-nav a { 
    font-family: 'Manrope', sans-serif; 
    font-weight: 500; 
    color: #444444; 
    font-size: 0.95rem; 
    text-decoration: none;
    transition: 0.3s;
}
.footer-nav a:hover { color: var(--gold); padding-left: 0px; }

/* 3. Areas (Clean Text Block) */
.footer-areas p { 
    font-size: 0.95rem; 
    color: #444444; 
    line-height: 1.8; 
    margin: 0;
}

/* 4. Payments */
.footer-payments { text-align: left; }
.payment-icons { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.payment-icons img { height: 30px; width: auto; opacity: 0.8; }
.secure-text { margin-top: 15px; font-style: italic; color: #888; font-size: 0.85rem; font-weight: 400; }

/* Copyright */
.footer-copyright { background-color: #f9f9f9; padding: 20px 0; text-align: center; font-size: 0.85rem; color: #888; }
.footer-grid { display: flex; justify-content: space-between; }
.footer-grid a { color: #888; margin: 0 10px; }

/* --- RESPONSIVE FOOTER --- */
@media (max-width: 992px) {
    /* Tablet: 2 Columns x 2 Rows */
    .footer-layout { 
        grid-template-columns: 1fr 1fr; 
        gap: 50px; 
    }
    
    /* Contact Strip Mobile */
    .contact-box-wrapper { padding: 20px; border: none; }
    .contact-strip-grid { flex-direction: column; gap: 40px; }
    .contact-item { width: 100%; justify-content: flex-start; }
    .with-borders { border: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 30px 0; }
    
    .footer-grid { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 600px) {
    /* Mobile: 1 Column Stack */
    .footer-layout { 
        grid-template-columns: 1fr; 
        text-align: center;
    }
    .footer-brand, .footer-nav, .footer-areas, .footer-payments { 
        align-items: center; 
    }
    .footer-logo { align-self: center; }
    .payment-icons { justify-content: center; }
}
/* ==========================================================================
                         Contact Bar Bottom Strip / Copyright
   ========================================================================== */

/* Contact Icons (Clean Style - No Box) */
.icon-box-solid, .icon-box-outline {
    background-color: transparent; /* Removes the Blue Box */
    width: auto; 
    height: auto;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--deep-gold); /* Forces Gold Color */
    font-size: 2.2rem;  /* Large Clean Icon */
    border: none;
}
/* Copyright */
.footer-copyright { background-color: var(--white); padding: 20px 0; text-align: center; font-size: 0.85rem; color: #888; }
.footer-copyright :hover { color: var(--gold); }
.footer-grid { display: flex; justify-content: space-between; }
.footer-grid a { color: #888; margin: 0 10px; }

/* ==========================================================================
   13. GLOBAL RESPONSIVE RULES
   ========================================================================== */
@media (max-width: 992px) {
    .contact-box-wrapper { padding: 20px; border: none; }
    .contact-strip-grid { flex-direction: column; gap: 40px; }
    .contact-item { width: 100%; justify-content: flex-start; }
    .with-borders { border: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 30px 0; }
    
    .footer-layout { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-brand, .footer-areas { grid-column: span 2; text-align: center; }
    .footer-logo { align-self: center; }
    .footer-nav { padding-left: 0; align-items: center; }
    .footer-socials-vertical { flex-direction: row; justify-content: center; grid-column: span 2; }
    .footer-payments { text-align: center; }
    .payment-icons { justify-content: center; }
    .footer-grid { flex-direction: column; gap: 10px; text-align: center; }

    /* Finance Page Mobile */
    .finance-grid { grid-template-columns: 1fr; gap: 40px; }
    .finance-text { text-align: center; align-items: center; }
    .apply-btn { margin-top: 30px; margin-left: auto; margin-right: auto; }
    .finance-logos { justify-items: center; margin: 0 auto 30px auto; grid-template-columns: 1fr 1fr; gap: 20px; }
    .finance-content-right { text-align: center; }
    
    .partners-grid { grid-template-columns: 1fr 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .underlay { display: none; }
    .main-contact-form { padding: 20px; }
    .form-row { flex-direction: column; gap: 0; }
    .form-group { margin-bottom: 20px; }
    
    /* About Page Mobile */
    .split-layout { grid-template-columns: 1fr; gap: 40px; }
    .reverse-mobile { display: flex; flex-direction: column-reverse; }
    .cert-grid { grid-template-columns: 1fr; }
    .shape-box { display: none; }
    .button-row { flex-direction: column; }
    .btn-secondary { width: 100%; }
    
    /* Detail Pages */
    .service-layout { grid-template-columns: 1fr; }
    .sidebar-form-box { position: static; margin-top: 40px; }
    .ba-grid { grid-template-columns: 1fr; }
    .intro-flex { flex-direction: column; align-items: flex-start; }
    .intro-right { align-self: flex-start; }
    .service-hero-image { height: 300px; }
}

@media (max-width: 768px) {
    .menu { display: none; }
    .hero { height: 80vh; }
    .hero h1 { font-size: 2.5rem; }
    .hero p { font-size: 1.1rem; }
    
    .info-bar { grid-template-columns: 1fr; gap: 20px; text-align: center; padding: 40px 20px; }
    .info-col { flex-direction: column; border: none; padding: 0; }
    
    .about-grid, .testi-container, .testi-cards, .services-page-grid { grid-template-columns: 1fr; }
    .partners-grid { grid-template-columns: 1fr; }
    .cta-content { flex-direction: column; text-align: center; gap: 20px; }
    .cta-bar::before { display: none; }
    .floating-review { position: static; margin-top: 20px; }
    .service-card { min-width: 100%; }
    .section-header-row { flex-direction: column; gap: 20px; align-items: flex-start; }
    .testi-grid { grid-template-columns: 1fr; } 
    .blue-shape { display: none; } 
    .featured-card { margin-bottom: 20px; }
    .footer-layout { grid-template-columns: 1fr; }
    .footer-brand, .footer-areas, .footer-socials-vertical { grid-column: auto; }
    .ms-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .more-services-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   14. PAGE: CONTACT & FAQ (Missing Section)
   ========================================================================== */

/* --- Contact Page Layout --- */
.contact-page-section { padding: 80px 0; }
.contact-layout { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    align-items: flex-start; 
}

/* Left Column: Info */
.contact-info-col h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 20px; }
.intro-text { font-size: 1.1rem; color: #555; margin-bottom: 40px; }

.contact-list { display: flex; flex-direction: column; gap: 30px; }
.c-item { display: flex; gap: 20px; align-items: flex-start; }
/* --- CONTACT PAGE ICON UPDATES --- */

/* The Icon (Clean, No Box) */
.c-icon { 
    background: transparent; /* Removed the background color */
    width: 60px; 
    height: auto; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--deep-gold); /* Large Gold Icon */
    font-size: 2rem; 
    flex-shrink: 0; 
}

/* Text Styling updates to match */
.c-text h5 { 
    font-size: 0.9rem; 
    margin-bottom: 5px; 
    color: #8c8c8c; /* Lighter grey for label */
    text-transform: uppercase; 
    letter-spacing: 1px;
    font-weight: 700;
}

.c-text a, .c-text p { 
    font-size: 1rem; 
    color: #222; /* Darker text for readability */
    line-height: 1.5; 
    text-decoration: none; 
    font-weight: 500;
}

.c-text a:hover { 
    color: var(--gold); 
}
/* Right Column: Form with Blue Box */
.contact-form-col { position: relative; padding: 20px; }

/* The Blue Shape Behind */
.underlay {
    position: absolute;
    top: 50px; right: -20px; bottom: -20px; left: 50px; 
    background-color: var(--underlays);
    z-index: 0;
}

/* THE WHITE FORM BOX */
.main-contact-form {
    background: white;
    padding: 50px 40px; /* More breathing room */
    box-shadow: 0 15px 50px rgba(0,0,0,0.1); /* Deeper, softer shadow */
    position: relative;
    z-index: 2;
    border: none; /* Removed the thin grey border */
    border-top: 5px solid var(--gold); /* Adds a premium gold accent strip on top */
}

/* Form Title */
.form-title {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 30px;
    font-weight: 600; /* Elegant lighter weight */
}

/* Form Fields Layout */
.form-row { display: flex; gap: 20px; margin-bottom: 25px; }
.form-group { flex: 1; margin-bottom: 25px; }

/* Labels (Architectural Style) */
.form-group label { 
    display: block; 
    font-weight: 700; 
    margin-bottom: 8px; 
    font-size: 0.75rem; /* Smaller */
    text-transform: uppercase; /* Uppercase */
    letter-spacing: 1px; /* Spaced out */
    color: #888; /* Light Grey */
    transition: 0.3s;
}

/* Inputs (Modern Grey Block Style) */
.form-group input, 
.form-group textarea, 
.form-group select {
    width: 100%;
    padding: 15px 20px; /* Taller, comfortable touch targets */
    border: 1px solid transparent; /* No visible border initially */
    background-color: #f4f4f4;     /* Light Grey Background */
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    color: #333;
    transition: all 0.3s ease;
    border-radius: 4px;
}

/* Focus State (When user clicks) */
.form-group input:focus, 
.form-group textarea:focus, 
.form-group select:focus {
    outline: none;
    background-color: var(--white); /* Turns white */
    border-color: var(--gold);      /* Gold border appears */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* When input is focused, make label Gold too */
.form-group:focus-within label {
    color: var(--gold);
}

/* Submit Button (Full Width, Charcoal) */
.btn-submit {
    display: flex; justify-content: center; align-items: center; 
    width: 100%; /* Full Width */
    padding: 18px 0;
    
    background-color: #656257e0; /* Charcoal gold */
    color: white;
    border: none;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.95rem;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 1px;
}

.btn-submit:hover { 
    background-color: var(--gold); /* Turns Gold on hover */
    /*transform: translateY(-2px);  Subtle lift */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .main-contact-form { padding: 30px 20px; }
    .form-row { flex-direction: column; gap: 0; }
}

/* --- FAQ Accordion Section --- */
.faq-section { padding: 80px 0; background: #fff; }
.center-header { text-align: center; margin-bottom: 50px; }

.faq-list { max-width: 800px; margin: 0 auto; }

details {
    margin-bottom: 15px;
    border: 1px solid #eee;
    padding: 20px;
    transition: all 0.3s ease;
}
details[open] { border-left: 4px solid var(--deep-gold); background: #fcfcfc; }

summary {
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none; /* Hides default triangle */
    display: flex; justify-content: space-between; align-items: center;
}
/* Custom Plus Icon logic */
summary i { color: var(--primary-color); transition: 0.3s; }
details[open] summary i { transform: rotate(45deg); } /* Turns + into x */

details p { margin-top: 15px; color: #555; line-height: 1.6; }
/* =========================================
   12. PAGE: SERVICES (The Fix)
   ========================================= */

.services-page-section {
    padding: 80px 0;
    background-color: var(--accent-grey);
}

.services-page-grid {
    display: grid;
    /* This forces exactly 3 columns */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
}

/* Force cards to fill the grid cells */
.services-page-grid .service-card {
    width: 100% !important;     /* Override any fixed width from homepage */
    min-width: 0 !important;    /* Allow them to shrink to fit the grid */
    max-width: none !important; /* Remove constraints */
    height: 100%;               /* Makes all cards the same height */
}

/* Optional: Make images slightly taller on this page for better impact */
.services-page-grid .card-image {
    height: 250px; 
}

/* RESPONSIVE: Stack them on mobile/tablet */
@media (max-width: 992px) {
    .services-page-grid {
        grid-template-columns: 1fr 1fr; /* 2 Columns on Tablet */
    }
}

@media (max-width: 768px) {
    .services-page-grid {
        grid-template-columns: 1fr; /* 1 Column on Mobile */
    }
}
/* =========================================
   MOBILE FIX FOR CONTACT PAGE
   ========================================= */
@media (max-width: 850px) {
    
    /* 1. Stack the main text and the form vertically */
    .contact-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 50px; /* Adds nice breathing room between text and form */
    }

    /* 2. Ensure the form column takes up the full width of the phone screen */
    .contact-form-col {
        width: 100% !important;
        margin: 0 auto;
    }

    /* 3. Stack the inner form inputs (Name/Email) so they aren't squished */
    .main-contact-form .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0px; 
    }
    
    .main-contact-form .form-group.half {
        width: 100% !important;
    }
}
/* =========================================
   HAMBURGER MENU & TRANSLUCENT DROPDOWN
   ========================================= */

/* 1. Hide the hamburger on desktop */
.hamburger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--deep-gold); /* Change to your primary color if needed */
}

/* Ensure the parent nav is relative so the dropdown attaches to it */
.main-nav {
    position: relative;
}

/* 2. Mobile View Rules */
@media (max-width: 850px) {
    
    /* Show the hamburger icon */
    .hamburger {
        display: block;
    }

    /* Make the box slightly wider so long words like "RESOURCES" fit perfectly */
    .menu {
        display: none; 
        position: absolute;
        top: 100%; 
        left: 50%; /* Changed from 60% */
        width: 50%; /* Changed from 40% */
        flex-direction: column;
        gap: 0px; 
        padding: 15px 0;
        z-index: 999;
        background-color: rgba(255, 255, 255, 0.425); 
        backdrop-filter: blur(8px); 
        -webkit-backdrop-filter: blur(8px); 
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }

    .menu.active {
        display: flex !important;
    }

    .menu li {
        margin: 0 !important; 
        width: 100%;
    }
    
    /* Adds 25px of empty padding to the left of the text! */
    .menu li a {
        padding: 12px 20px 12px 25px !important; /* Top, Right, Bottom, Left */
        display: block !important;
        text-align: left !important;
    }
}