/* ==========================================
   CUSTOM CSS FOR AUTOMOTCENTRE.COM
   Banner Section (Section 1) Styling
   ========================================== */

/* Target the section containing "# Car Repair" - more specific */
.elementor-page-8 .elementor-section:not(.elementor-location-header):not(.elementor-location-footer) {
    /* Only apply to first main content section */
}

/* More specific: Target section that contains h3 with "# Car Repair" */
.elementor-page-8 h3:contains("# Car Repair"),
.elementor-page-8 h3:has-text("# Car Repair") {
    /* This won't work - CSS doesn't support :contains */
}

/* Better approach: Target by the heading content's parent section */
.elementor-page-8 .elementor-section:has(h3:contains("# Car Repair")) {
    padding: 80px 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
}

/* Since :has() might not work, let's target all main content sections and be more specific */
.elementor-page-8 .elementor-section.elementor-section-boxed,
.elementor-page-8 .elementor-section.elementor-section-stretched {
    /* Only if it's not header/footer */
}

/* Actually, let's target the heading directly and style its container */
.elementor-page-8 h3:first-of-type,
.elementor-page-8 h2:first-of-type {
    color: #273171 !important;
    font-weight: 700 !important;
}

/* Target the main heading */
.elementor-page-8 h2:nth-of-type(1) {
    color: #1a1a1a !important;
    font-weight: 800 !important;
    font-size: 48px !important;
    line-height: 1.2 !important;
    margin-bottom: 25px !important;
}

/* Target paragraph in first section */
.elementor-page-8 .elementor-section:not(.elementor-location-header) p:first-of-type {
    color: #555555 !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    margin-bottom: 30px !important;
}

/* Target "Book Appointment" link */
.elementor-page-8 .elementor-button,
.elementor-page-8 a[href*="make-an-appointment"] {
    display: inline-block !important;
    padding: 15px 35px !important;
    background-color: #DD3333 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(221, 51, 51, 0.3) !important;
}

.elementor-page-8 .elementor-button:hover,
.elementor-page-8 a[href*="make-an-appointment"]:hover {
    background-color: #c53030 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(221, 51, 51, 0.4) !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .elementor-page-8 h2:nth-of-type(1) {
        font-size: 38px !important;
    }
}

@media (max-width: 767px) {
    .elementor-page-8 h2:nth-of-type(1) {
        font-size: 28px !important;
    }
    
    .elementor-page-8 .elementor-section:not(.elementor-location-header) p:first-of-type {
        font-size: 16px !important;
    }
    
    .elementor-page-8 .elementor-button,
    .elementor-page-8 a[href*="make-an-appointment"] {
        padding: 12px 25px !important;
        font-size: 14px !important;
    }
}