/* =========================================
   1. VARIABLES & IMPORTS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Roboto:wght@300;400;500;700&family=Bebas+Neue&family=Antonio:wght@400;700&display=swap');

:root {
    --primary-gold: #C69C6D;
    --primary-gold-dark: #a67c52;
    --secondary-brown: #3E2B26;
    --text-dark: #333333;
    --text-light: #666666;
    --light-bg: #f8f9fa;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-dark);
}

/* =========================================
   2. TYPOGRAPHY & UTILITIES
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

/* Antonio Font Utility */
.antonio-font,
.trust-item,
.service-title,
.process-section h2,
.step-label,           
.why-section h2,
.testimonials-section h2,
.testimonials-section h5,
.footer-cta h2,
.footer-cta h5,
.header-phone,
.footer-phone,
.cta-bottom,
.footer-phone-display,
.footer-hours-value,
.quote-form-card h3 {
    font-family: 'Antonio', sans-serif !important;
}

.text-gold { color: #d6ad60 !important; }
.bg-brown { background-color: var(--secondary-brown) !important; }

/* Global Image Utilities */
.logo-img, .icon-fluid {
    max-height: 130px;
    width: auto;
}

/* =========================================
   3. COMPONENTS (Buttons, Forms, Boxes)
   ========================================= */
/* Hero & Footer Call Box */
.hero-cta-box {
    background-color: #d6ad60;
    padding: 8px;
    width: 100%;
    max-width: 580px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    text-align: center;
}

.cta-top {
    background-color: transparent; 
    color: #3E2B26;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.7rem;
    margin-bottom: 5px;
    font-family: 'Roboto', sans-serif;
}

.cta-bottom {
    background-color: #3E2B26;
    color: white;
    display: block;
    padding: 10px 0 15px 0;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: 1px;
}

/* --- UPDATED QUOTE FORM STYLES --- */

/* 1. The Card Container */
.quote-form-card {
    background: white;
    padding: 40px 35px; /* More spacious padding */
    border-radius: 20px; /* Rounded corners like the design */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    position: relative;
    z-index: 30;
}

/* 2. Header Typography */
.quote-form-card h3 {
    font-family: 'Antonio', sans-serif !important; /* Condensed Bold Font */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2.4rem; /* Larger Title */
    line-height: 0.9;
    color: #222;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.form-subtitle {
    font-family: 'Roboto', sans-serif; /* Clean sans-serif for subtitle */
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px; /* Wide spacing */
    color: #333;
    margin-bottom: 5px;
}

/* 3. The Gold Brush Stroke / Divider */
.gold-divider {
    /* 1. Clear previous solid styles */
    background-color: transparent !important;
    border-radius: 0;
    /* 2. Define the dimensions */
    /* Give it enough height for the wave to be visible (try 20px - 30px) */
    height: 33px; 
    
    /* Width matches the design (approx 60-80% of container) */
    width: 100%;
    max-width: 600px;
    
    /* 3. Center the element */
    margin: 0 auto 15px auto;

    /* 4. Load your SVG */
    /* MAKE SURE THIS FILENAME MATCHES YOUR SVG FILE */
    background-image: url('../img/swirl.svg'); 
    
    /* 5. Ensure the SVG scales correctly without repeating */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; /* Keeps the whole wave visible inside the box */
}

/* 4. Input Fields */
.form-control, 
.form-select {
    background-color: #EEEEEE; /* Light gray background */
    border: none;
    border-radius: 6px; /* Slightly rounded corners */
    padding: 15px 20px; /* Taller inputs */
    font-size: 1rem;
    color: #555;
    margin-bottom: 0 !important; /* Reset margin, controlled by rows */
}

.form-control::placeholder {
    color: #666;
    font-weight: 400;
}

.form-select {
    color: #666;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* 5. Checkbox & Terms */
.form-check-input {
    border: 1.5px solid #888;
    margin-top: 0.3em;
}

.terms-label {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #777;
    text-align: left;
}

/* 6. Button */
.btn-gold {
    background-color: #d6ad60;
    color: #222; /* Dark text on gold */
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    padding: 12px 25px;
    box-shadow: 0 4px 10px rgba(214, 173, 96, 0.3);
    transition: all 0.3s;
}

.btn-gold:hover {
    background-color: var(--primary-gold-dark);
    color: white;
    transform: translateY(-2px);
}

.btn-sm {
    font-size: 1rem;
    padding: 8px 15px;
}

/* =========================================
   4. HEADER
   ========================================= */
header {
    background: transparent;
    padding: 15px 0;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.header-quote-box {
    background-color: #d6ad60;
    color: #3E2B26;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: 1px;
    padding: 0px 15px;
    display: inline-block;
    margin-bottom: 5px;
}

.header-phone {
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1;
    color: #3E2B26;
    text-decoration: none;
}

/* =========================================
   5. HERO SECTION
   ========================================= */
.hero-section {
    background: url('../img/hero-bg.webp');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 180px 0 280px;
    position: relative;
}

.hero-subtitle {
    letter-spacing: 2px;
    color: #333;
    font-weight: 400;
}

.hero-main-title { line-height: 0.9; }

.hero-title-top {
    color: #d6ad60;
    display: block;
    font-size: 3.5rem;
}

.hero-title-bottom {
    color: #3E2B26;
    display: block;
    font-size: 3.5rem;
    line-height: 1.3;
}

/* =========================================
   6. TRUST BAR
   ========================================= */
.trust-bar {
    position: relative;
    padding: 35px 0;
    margin-top: -80px;
    color: white;
    overflow: hidden;
    z-index: 10;
}

.trust-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/hero-bg.webp');
    background-size: cover;
    background-position: center bottom;
    filter: blur(10px);
    z-index: -1;
}

.trust-item {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: 0.5px;
}

.trust-item i {
    color: var(--primary-gold);
    font-size: 2.5rem;
    margin-right: 15px;
}

/* =========================================
   7. SECTIONS (Services, Process, Why Us)
   ========================================= */
.services-section { padding: 80px 0; background: white; }
.services-section h2 { font-size: 2.5rem; letter-spacing: 1px; }
.section-heading-brown { color: var(--secondary-brown); font-family: 'Antonio', sans-serif; }

.service-card {
    border: 1px solid #eee;
    padding: 30px 20px;
    text-align: center;
    height: 100%;
    transition: transform 0.3s;
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.service-icon { font-size: 3rem; color: var(--primary-gold); margin-bottom: 20px; }
.service-title { color: var(--primary-gold); margin-bottom: 15px; font-size: 1.4rem; }

/* Process Section */
.process-section { padding: 30px 0; background: #fff; }
.process-main-title { color: var(--secondary-brown); font-size: 3rem; }

.process-item {
    text-align: center;
    padding: 40px 20px;
    height: 100%;
    transition: transform 0.3s ease;
}
.process-item.shadow-card {
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-radius: 4px; 
}
.process-item:hover { transform: translateY(-5px); }

/* Process Typography */
.step-label { 
    color: var(--primary-gold); 
    font-size: 2.2rem; 
    font-weight: 700; 
    margin-bottom: 20px;
}

.step-icon { 
    font-size: 3.5rem; 
    color: #a67c52; 
    margin-bottom: 20px; 
    display: inline-block; 
}

.step-content h4 {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--secondary-brown);
}

.step-content p {
    font-family: 'Roboto', sans-serif !important;
    color: var(--text-light);
}

/* Why Choose Us */
.why-section {
    padding: 90px 0;
    background: url('../img/why-choose-us-bg.webp');
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
    border-top: 5px solid #d6ad60;
    border-bottom: 5px solid #d6ad60;
}
.why-heading { color: var(--secondary-brown); }
.why-section h2 { text-transform: uppercase; font-size: 2.5rem; letter-spacing: 1px; margin-bottom: 1.5rem; }
.why-list li { margin-bottom: 15px; display: flex; align-items: start; }
.why-list i { color: var(--primary-gold); margin-right: 15px; margin-top: 5px; }

/* =========================================
   8. TESTIMONIALS & FOOTER CTA
   ========================================= */
.testimonials-section { padding: 80px 0; background: white; }
.testimonials-section h5 { font-size: 1.6rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.testimonials-section h2 { font-size: 2.5rem; line-height: 1; text-transform: uppercase; letter-spacing: 1px; }
.testimonial-heading { color: var(--secondary-brown); }
.google-badge { max-height: 100px; width: auto; }

.testimonial-card { padding: 20px; }
.stars { color: #FFD700; margin-bottom: 10px; }
.quote-icon { color: var(--primary-gold); font-size: 2rem; opacity: 0.3; }

.testimonial-indicators { display: flex; justify-content: center; gap: 15px; }
.t-line { width: 35px; height: 3px; background-color: #d1d1d1; display: block; }
.t-line.active { background-color: var(--primary-gold); }

/* Footer CTA */
.footer-cta {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/footer-section/top-footer-bg.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    color: white;
    padding-top: 80px;
    padding-bottom: 80px;
}
.footer-cta h2 { font-size: 3.0rem; }
.footer-cta-subtitle { color: #ddd; }

/* =========================================
   9. MAIN FOOTER
   ========================================= */
.main-footer {
    background-color: #300000;
    color: white;
    position: relative;
    padding-top: 80px; 
    padding-bottom: 30px;
    z-index: 10; 
}

.footer-phone { font-size: 1.5rem; color: var(--primary-gold); font-weight: 700; }
.footer-badge {
    background-color: #d6ad60; 
    color: #1a110e; 
    font-weight: 700; 
    font-size: 0.75rem; 
    padding: 4px 8px; 
    letter-spacing: 1px; 
    display: inline-block; 
    margin-bottom: 5px;
}
.footer-phone-display { font-weight: 700; font-size: 3rem; line-height: 0.9; margin-bottom: 10px; }
.footer-hours-label { text-transform: uppercase; color: white; font-size: 0.7rem; letter-spacing: 1px; display: block; }
.footer-hours-value { color: white; text-transform: uppercase; font-weight: 700; font-size: 1.3rem; letter-spacing: 0.5px; }
.footer-copyright { font-size: 0.75rem; opacity: 0.8; }

/* =========================================
   10. DESKTOP ONLY (Fixed Overlap)
   ========================================= */
@media (min-width: 992px) {
    
    /* 1. The Container Section (Rose Background) */
    .footer-cta {
        /* Reduce padding so the background stops 'early' (halfway down the form) */
        padding-bottom: 10px !important; 
        
        /* Ensure background sticks to the top so it doesn't shift */
        background-position: top center !important; 
        
        position: relative;
        z-index: 5; /* Sit above the footer background */
        overflow: visible; /* CRITICAL: Allows the form to hang out of the box */
    }

    /* 2. The Form Card (The Bridge) */
    .quote-form-card {
        /* CRITICAL: Negative margin pulls the 'bottom' of the section UP by 250px.
           This effectively tells the browser "this element is 250px shorter than it looks".
           This pulls the Red footer UP. */
        margin-bottom: -250px !important; 
        
        position: relative;
        z-index: 50; /* Must be highest to sit on top of everything */
    }

    /* 3. The Footer (Red Background) */
    .main-footer {
        /* Reset any previous margins */
        margin-top: 0px !important; 
        
        /* CRITICAL: Add huge top padding to push the Logo/Phone down.
           This creates empty red space for the Form Card to hang over. */
        padding-top: 50px !important; 
        
        position: relative;
        z-index: 1; /* Sit behind the form */
    }

    /* Sticky Header Logic */
    header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        
        background-image: url('../img/hero-bg.webp') !important;
        background-attachment: fixed !important; 
        background-position: center top !important; 
        background-size: cover !important;
        background-repeat: no-repeat !important;
        
        padding: 15px 0 !important;
        box-shadow: none !important;
    }

    .hero-subtitle {
        letter-spacing: 2px;
        color: #333;
        font-weight: 400;
    }
    .hero-section {
        background-image: url('../img/hero-bg.webp') !important;
        background-attachment: fixed !important; 
        background-position: center top !important; 
        background-size: cover !important;
        padding-top: 250px !important; 
        padding-top: 180px !important;   /* try 160–190 if you want tighter/looser */
    }
}

/* =========================================
   11. MOBILE RESPONSIVENESS (Max-Width: 991px)
   ========================================= */
@media (max-width: 991px) {
    
    /* --- HEADER (Transparent Overlay) --- */
    header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: transparent !important; 
        box-shadow: none !important;
        padding: 5px 0 !important;
    }

    /* --- HERO SECTION --- */
    .hero-section {
        background: url('../img/funeral-background-header-mobile.webp') !important;
        background-size: 100% auto !important; 
        background-position: center top !important; 
        background-repeat: no-repeat !important;
        background-color: #300000 !important;
        margin-top: 0px !important; 
        padding-top: 200px !important; 
        padding-bottom: 60px !important;
        margin-bottom: -1px !important;
        position: relative;
        text-align: left;
    }
    
    .header-cta-wrapper {
        background-color: #d6ad60;
        width: 100%;
        padding: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        margin-top: -10px;
    }
    .header-cta-wrapper .header-quote-box {
        background-color: transparent;
        letter-spacing: 2px;
        font-size: 1.1rem;
        display: block;
        padding: 0;
        margin-top: -10px;
    }
    .header-cta-wrapper .header-phone {
        font-size: 2.2rem;
        margin-top: -10px;
        display: block;
    }
    .header-cta-wrapper .header-phone .text-gold {
        color: #ffffff !important;
    }

    .hero-title-top, 
    .hero-title-bottom {
        display: inline;
        font-size: 2.6rem;
        line-height: 1.1;
        padding-top: 100px;
    }
    
    .hero-title-top::after {
        content: "";
        white-space: pre;
    }

    /* Hero Call Box */
    .hero-cta-box {
        background-color: #d6ad60 !important;
        padding: 15px 10px;
        width: 100%;
        margin-bottom: 30px;
        border: none;
    }
    .cta-top {
        font-size: 1.0rem;
        letter-spacing: 1px;
        margin-bottom: 5px;
    }
    .cta-bottom {
        font-size: 1.7rem;
        padding: 12px 5px;
        white-space: nowrap;
    }

    /* --- TRUST BAR --- */
    .trust-bar {
        padding: 60px 0;
        background-color: #300000 !important;
        background-image: none !important;
        margin-top: 0;
    }
    .trust-bar::before { display: none !important; }
    
    .trust-item {
        flex-direction: column;
        text-align: center;
        margin-bottom: 50px;
        justify-content: center;
    }
    .trust-item i { margin-right: 0; margin-bottom: 20px; display: inline-block; }
    .trust-item i img { height: 70px; width: auto; }
    .trust-item div { font-size: 1.8rem; line-height: 1.2; }

    /* --- SERVICES & PROCESS --- */
    .services-section { padding-bottom: 20px !important; }
    .process-section { padding-top: 20px !important; }
    .process-main-title { margin-top: 0; }

    /* --- WHY CHOOSE US --- */
    .why-section {
        background: url('../img/plane-bacground-mobile.webp') !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
        background-color: #ffffff !important;
        padding: 30px 0 470px 0 !important;
    }
    .why-image-wrapper img { display: none !important; }
    .why-section .col-lg-5 { padding-left: 20px; padding-right: 20px; }
    .why-section h2 { font-size: 2.2rem; margin-bottom: 20px; }

    /* --- TESTIMONIALS --- */
    .testimonials-section .row.mb-5 .col-md-4,
    .testimonials-section .row.mb-5 .col-md-8 {
        text-align: left !important;
        padding-left: 35px !important; 
        padding-right: 15px !important; 
    }

    .testimonials-section .row.mb-5 .col-md-4 {
        order: -1;            
        margin-bottom: 15px;
        width: 100%;
    }

    .testimonials-section .row.mb-5 .col-md-8 { 
        order: 1; 
        width: 100%;
    }

    .google-badge { max-height: 80px; }

    /* --- FOOTER (FIXED MOBILE BACKGROUND) --- */
    .footer-cta {
        /* Background color fills the white space */
        background-color: #300000 !important; 
        
        background-image: url('../img/rose-background-footer.webp');
        background-size: 100% auto !important; 
        background-position: center top !important;
        background-repeat: no-repeat !important;
        padding: 60px 0;

        /* PULLS THE FOOTER UP TO HIDE WHITE GAP */
        margin-bottom: -1px !important; 
        position: relative; 
        z-index: 5;
    }
    
    .main-footer { text-align: center !important; }
    .main-footer .text-start { text-align: center !important; width: 100%; }
    .main-footer .d-inline-block, 
    .main-footer .d-inline-flex {
        display: block !important;
        text-align: center !important;
        width: 100%;
    }
    .main-footer .d-inline-flex { display: flex !important; justify-content: center !important; }
    
    .main-footer .footer-hours-label { padding-top: 15px; font-weight: 500; font-size: 0.9rem; }
    .main-footer .footer-phone-display { font-size: 2.4rem; }
    .main-footer .footer-badge { padding: 0px; font-size: 0.9rem; }

    .main-footer .logo-img {
        max-height: 140px !important; 
        width: auto;
        margin-bottom: 20px; 
    }   
    
    /* SCROLL FIX */
    .hero-subtitle {
        padding-top: 70px;
        letter-spacing: 2px;
        color: #333;
        font-weight: 400;
    }
    header.header-scrolled .header-cta-wrapper .header-phone .text-gold {
        color: white !important;
    }
    header.header-scrolled .header-cta-wrapper {
        box-shadow: none;
    }

    .quote-form-card {
        margin-top: 40px !important;
    }
}

@media (max-width: 992px) {
  .quote-form-card {
    margin-top: clamp(20px, 6vw, 40px) !important;
  }
}

@media (max-width: 376px) {
  .quote-form-card {
    margin-top: clamp(20px, 6vw, 20px) !important;
  }
  .hero-cta-box{
    margin-top: -30px !important;
  }
  /* .lead{
    margin-top: -5px !important;
} */
.container{
    margin-top: -40px !important;
}
}
/* =========================================
   SCROLL EFFECT (DESKTOP)
   ========================================= */
header.header-scrolled {
    background-color: #FFFFFF !important;
    background-image: none !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}