/* css/services.css - 3D SOLID COLOR CARDS + GREY BACKGROUND */
.services-hero {
    background:var(--red-gradient);
    color:#fff;
    padding:180px 5% 120px;
    text-align:center;
    position:relative;
}
.services-hero::before {
    content:''; position:absolute; inset:0;
    background:url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2048&q=95') center/cover;
    opacity:0.25;
}
.services-hero h1 { font-family:'Playfair Display',serif; font-size:4.8rem; }
.services-hero .subtitle { font-size:1.5rem; opacity:0.95; margin-top:1.5rem; }

/* Grey background section */
.section-grey-bg { background:#f4f6f9; padding:80px 5%; }

/* 3D Solid Color Cards */
.services-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2.5rem;
    margin-top:4rem;
}
.service-card {
    background:var(--card-color,#e74c3c);
    color:#fff;
    padding:3rem 2rem;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
    transition:all 0.4s ease;
    transform:translateY(0);
}
.service-card:hover {
    transform:translateY(-15px);
    box-shadow:0 30px 70px rgba(0,0,0,0.3);
}
.service-card i { font-size:3.5rem; margin-bottom:1.5rem; opacity:0.9; }
.service-card h3 { font-size:1.6rem; margin-bottom:1rem; }
.service-card p { opacity:0.9; font-size:1.1rem; }

/* Areas Grid */
.areas-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2.5rem;
    margin-top:4rem;
}
.area-group {
    background:#fff;
    padding:2rem;
    border-radius:15px;
    box-shadow:0 10px 40px rgba(0,0,0,0.08);
}
.area-group h3 {
    color:var(--red);
    margin-bottom:1rem;
    font-size:1.4rem;
    border-bottom:3px solid var(--red);
    padding-bottom:0.5rem;
}
.area-group ul { list-style:none; columns:2; gap:2rem; }
.area-group li { padding:0.4rem 0; font-size:1.05rem; }

@media (max-width:768px) {
    .services-hero h1 { font-size:3.5rem; }
    .area-group ul { columns:1; }
}