/* =========== General Styling & Variables =========== */
:root {
    --primary-blue: #075577;
    --primary-blue-hover: #0a75a3; 
    --dark-text: #000000;
    --body-text: #4d4d4d;
    --light-gray-bg: #f8f8f8;
    --white-color: #ffffff;
    --border-color: #dddddd;
    --heading-font: 'Roboto', sans-serif;
    --body-font: 'Roboto', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body-font); color: var(--body-text); line-height: 1.6; font-size: 17px; }
.container { max-width: 61.5rem; margin: 0 auto; padding: 0 1.25rem; }
h1, h2, h3, h4, h5 { font-family: var(--heading-font); }
h1 { font-size: 2.8rem; line-height: 3rem; margin-bottom: .4rem; color: var(--dark-text); font-weight: 900; }
h2 { font-size: 2.4rem; line-height: 2.4rem; margin-bottom: 1.5rem; color: var(--dark-text); font-weight: 900; }
h2reverse { font-size: 2.4rem; line-height: 2.4rem; margin-bottom: 1.5rem; color: var(--white-color); font-weight: 900; }
h3 { font-size: 1.6rem; line-height: 1.6rem; margin-bottom: 1rem; color: var(--primary-blue); font-weight: 600; }
p { font-size: 1.4rem; line-height: 1.6; margin-bottom: 1rem;  font-weight: 300; }
a { color: var(--primary-blue); text-decoration: none; }
.footertext { font-size: 1.0rem; line-height: 1.4rem; font-weight: 300; margin-top: 4rem; }
img { max-width: 100%; height: auto; }

/* Non-breaking space for anti-orphan control */
.no-orphan {
    white-space: nowrap;
}

/* =========== Buttons =========== */
.btn { 
    display: inline-block; 
    background-color: var(--primary-blue); 
    color: var(--white-color); 
    text-align: center; 
    padding: 10px 28px; 
    border-radius: 24px; 
    font-size: 14px; 
    font-weight: 500; 
    transition: background-color 0.3s ease; 
}
.btn:hover { background-color: var(--primary-blue-hover); }

/* =========== Header =========== */
.site-header { background-color: var(--white-color); padding: 15px 0; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.site-logo img { height: 60px; }
.main-navigation ul { list-style: none; display: flex; gap: 25px; }
.main-navigation a { color: var(--dark-text); font-weight: 700; }
.main-navigation a:hover { color: var(--primary-blue); }

/* =========== Slider Section =========== */
.slider-container { position: relative; width: 100%; height: 60vh; overflow: hidden; }
.slides { display: flex; height: 100%; }
.slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; display: flex; align-items: center; }
.slide-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #07557783; z-index: 2; }
.slide-content { max-width: 61.5rem; margin: 0 auto; padding: 0 1.25rem; width: 100%; position: relative; z-index: 3; }
.slide-content h1, .slide-content p, .slide-content .btn { color: var(--white-color); }
.slide-heading { max-width: 550px; }
.slide-description { max-width: 550px; }
.slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 10px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; border: none; }
.dot.active { background-color: var(--white-color); }

/* =========== Content & Benefits Sections =========== */
.content-section, .benefits-section, .why-us-section, .deals-section { padding: 60px 0; }
.content-container { display: flex; align-items: top; gap: 7rem; }
.content-text { flex: 1; }
.content-section.reversed .content-container { flex-direction: row-reverse; }

/* FIX: RESTORED CIRCLE IMAGE STYLES */
.content-image { 
    width: 365px; 
    height: 365px; 
    border-radius: 50%; 
    overflow: hidden; 
    flex-shrink: 0; 
}
.content-image img { width: 100%; height: 100%; object-fit: cover; }

/* FIX: BACKGROUND IMAGE OVERLAY FOR CONTRAST */
.benefits-section {
    background: linear-gradient(
        rgba(7, 85, 119, 0.5), 
        rgba(7, 85, 119, 0.5)  
    ),
    url('images/Path_to_real_estate_development_funding_order.webp'); 
    background-size: cover; 
    background-position: center center; 
    background-attachment: fixed; 
    color: var(--white-color);
}
.benefits-section h2, .benefits-section .section-intro {
    color: var(--white-color); 
    text-align: center; 
}
.section-intro { margin-top: 1rem; text-align: center; }
.benefits-list { list-style: none; padding-left: 0; max-width: 800px; margin: 3rem auto 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
.benefits-list li { padding-left: 50px; position: relative; font-size: 1.2rem; line-height: 1.4rem;font-weight: 500; color: var(--white-color); }
.benefits-list li::before { content: '✔'; position: absolute; left: 0; top: 0; background-color: var(--white-color); color: var(--primary-blue); width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }

/* =========== Why Raise With Us Section =========== */
.why-us-section h2 { text-align: center; }
.why-us-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.card { background-color: var(--white-color); padding: 2rem; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; }
.card-icon { height: 70px; margin-bottom: 1rem; }
.card p {font-size: 1.2rem; font-weight: 300; line-height: 1.2;}

/* =========== Real Estate Deals Section =========== */
.deals-section { background-color: var(--light-gray-bg); }
.deals-section h2 { text-align: center; }
.deal-item { overflow: hidden; }
.deals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.deal-item img { width: 100%; height: 310px; object-fit: cover; border-radius: 8px; }
.disclaimer { font-size: 0.8rem; text-align: center; margin-top: 2rem; font-style: italic; }

/* =========== CTAs & Forms =========== */
.final-cta { background-color: var(--primary-blue); padding: 40px 0; }
.final-cta h2 { color: var(--white-color); text-align: center; margin-bottom: 0; }
.contact-section { padding: 80px 0; }
.form-placeholder { 
    max-width: 600px; 
    margin: 2rem auto 0 auto; 
    padding: 2rem; 
    border: 1px solid var(--border-color); 
    background-color: var(--light-gray-bg);
}

/* =========== Footer =========== (FINAL CLEAN VERSION) */
.site-footer { 
    background-color: #000000 !important; 
    color: #ffffff; 
    padding: 40px 0; 
    overflow: hidden; 
    position: relative;
    z-index: 10;
    width: 100%;
}

/* DESKTOP LAYOUT */
.footer-container { 
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem; 
}

/* FIRST COLUMN (Content) */
.footer-col:first-child {
    display: flex;
    flex-direction: column; 
    flex: 1; 
}

/* SECOND COLUMN (Spacer) */
.footer-col:last-child {
    flex: 1; 
}

/* DESKTOP ORDERING */
.footer-col:first-child .footer-logo { order: 1; margin-bottom: 0.5rem; }
.footer-col:first-child .footertext { 
    order: 2; 
    margin-top: 1.5rem; 
    margin-bottom: 1.5rem; 
}
.footer-col:first-child .btn { order: 3; margin-bottom: 1rem; }
.footer-col:first-child .copyright { order: 4; margin-top: 1.5rem; font-size: 0.9rem; }

/* General Styles */
.footer-logo { height: 75px; }
.footertext { font-size: 1.0rem; line-height: 1.4rem; font-weight: 300; }

/* =========== Mobile Responsiveness =========== */
@media (max-width: 768px) {
    
    /* --- 1. GLOBAL SCALING --- */
p {font-size: 20px; line-height: 1.4rem;}
body { font-size: 14px; }
h1 {
     font-size: 2rem; 
     line-height: 1.2;
    }
h2 { font-size: 1.8rem; }
 .container { padding: 0 1rem; 
    }
h3 { font-size: 1.2rem; line-height: 1.4rem; margin-bottom: 0.5rem; color: var(--primary-blue); font-weight: 600; }

.content-section, .benefits-section, .why-us-section, .deals-section { padding: 20px 0; }

/* 1. Target the button group wrapper */
.button-group {
    /* Ensures the buttons inside stack in a column */
    display: flex;
    flex-direction: column;
    /* This aligns the group to the left (matching the text alignment fix) */
    align-items: flex-start;
    width: 100% !important;
}

/* 2. Target individual buttons within the group */
.button-group .btn {
    /* Overrides the width set by the general .btn rule above, 
       ensuring they only take half the space on desktop */
    width: 100%; 
    /* Ensures stacked buttons have a small visual break */
    margin-bottom: 10px;
}
.content-section .btn, 
.button-group .btn,
.footer-col .btn {
    display: block !important;       
    width: 100% !important;          
    max-width: 100% !important;      
    box-sizing: border-box;          
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

    /* --- 2. HEADER ADJUSTMENTS --- */
.site-logo img { height: 45px; }

    /* --- 3. SLIDER SCALING --- */
.slider-container {
      height: 50vh; 
      min-height: 400px; 
    }
.slide-content { text-align: center; }
.slide-heading { font-size: 2rem; }

    /* --- 4. RE-ORDERING STRATEGY (Header -> Image -> Text) --- */
    
    /* "Unbox" the text container so its children become flex items */
.content-text {
        display: contents;
}

    /* Set the main container to a vertical column AND FORCE IT */
.content-container {
    display: flex;
    flex-direction: column !important; 
    align-items: flex-start; 
    gap: 1.5rem; 
}

    /* Assign Order: 1. Header */
.content-text h1 {
    order: 1;
     margin-bottom: 0.5rem; 
     text-align: left !important;
}

    /* Assign Order: 2. Image */
.content-image {
    order: 2;
    margin: 0 auto; 
        /* FIX: Set both width and height to create a circle, not an oval */
    width: 280px;   
    height: 280px;  
}

/* 3: Paragraphs and Headings - Order 3 */
.content-text h3,
.content-text p {
    order: 3; /* These elements appear immediately after the image */
    text-align: left;
}

/* 4: Buttons and Button Group - Order 4 */
.content-text a.btn, 
.button-group {
    order: 4; /* These elements appear last, below all text */
    text-align: center; 
}
    /* --- 5. GRID COLLAPSE --- */
    
    /* Benefits List - 1 column */
.benefits-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
    
    /* Why Us Cards - 1 column */
.why-us-cards {
    grid-template-columns: 1fr; 
    gap: 1.5rem;
}

    /* Deals Grid - 2 columns */
.deals-grid {
    grid-template-columns: 1fr 1fr; 
    gap: 1rem;
}

    /* Scaling for Deals Grid images */
.deal-item img {
    height: 200px; 
    border-radius: 8px; 
}

    /* --- 6. FOOTER --- (Mobile Single Column) */
    
    /* 1. Force single column stack */
.footer-container {
    display: flex; /* Ensure it overrides Grid */
    flex-direction: column; 
    gap: 2rem;
    text-align: left;
}
    
    /* 2. Content Column Fix: Full width */
.footer-col:first-child {
    display: flex;
    flex-direction: column; 
    width: 100%;
    flex: none; /* Remove desktop flex scaling */
}

    /* 3. Empty Column Fix: Hide it */
.footer-col:last-child {
    display: none;
}

    /* Set the Mobile Order: Logo -> Footertext -> Button -> Copyright */
.footer-col:first-child .footer-logo { order: 1; margin-bottom: 0.5rem; height: auto; max-width: 230px; /* Prevent stretching */ }
.footer-col:first-child .footertext { order: 2; margin-top: 0.5rem; margin-bottom: 0.5rem; } 
.footer-col:first-child .btn { order: 3; margin-top: 0.5rem; margin-bottom: 0.5rem; } 
.footer-col:first-child .copyright { order: 4; margin-top: 0.5rem; }

.footer-col { width: 100%; }