/* Services Page Specific Styles */

/* ============================================================================
   SERVICES HERO SECTION
   ============================================================================ */

.services-hero {
    /* Background image is now set via inline styles from template */
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: var(--white-color);
    position: relative;
}

/* ============================================================================
   SERVICE DETAIL CARDS
   Used on individual service detail pages
   ============================================================================ */

.service-detail-card {
    border-left: 4px solid var(--accent-color);
    background-color: var(--white-color);
    border-radius: var(--radius-lg); /* 0.5rem */
    padding: var(--spacing-5); /* 2rem */
    box-shadow: var(--shadow-md); /* 0 4px 6px rgba(0, 0, 0, 0.1) */
    transition: var(--transition-normal);
}

.service-detail-card:hover {
    transform: translateY(-5px);
}


/* ============================================================================
   RESPONSIVE ADJUSTMENTS (Services Page)
   ============================================================================ */

@media (max-width: 768px) {
    .services-hero {
        padding: 80px 0;
    }
    
    .services-hero h1 {
        font-size: 2.5rem;
    }
    
    .services-hero p {
        font-size: 1rem;
    }
    
    .service-detail-card {
        padding: var(--spacing-4); /* 1.5rem on mobile */
    }
}