/* =========================
   SERVICE-HERO.CSS – FULLY RESPONSIVE
   Centered, solid green background
   Fluid typography and padding
========================= */

.services-hero {
    width: 100%;
    padding: 12vh 0 8vh;          /* fluid vertical padding using viewport height */
    background: #0a1f1a;
    position: relative;
}

/* Remove any gradient overlay */
.services-hero::before {
    display: none;
}

.services-hero .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 40px);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-content h1 {
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    color: #e2d6f0;
    line-height: 1.2;
}

/* Gradient alternative (uncomment if preferred) */
/*
.hero-content h1 {
    background: linear-gradient(135deg, #c084fc 0%, #4ade80 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
*/

.hero-content p {
    font-size: clamp(1rem, 4vw, 1.2rem);
    color: #d1e0d6;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Tablet (≤ 900px): reduce vertical padding */
@media (max-width: 900px) {
    .services-hero {
        padding: 10vh 0 6vh;
    }
    .hero-content h1 {
        margin-bottom: 20px;
    }
}

/* Mobile (≤ 768px): slightly more compact */
@media (max-width: 768px) {
    .services-hero {
        padding: 8vh 0 5vh;
    }
    .hero-content h1 {
        margin-bottom: 16px;
    }
    .hero-content p {
        padding: 0;
    }
}

/* Small phones (≤ 480px): tighter vertical spacing */
@media (max-width: 480px) {
    .services-hero {
        padding: 6vh 0 4vh;
    }
    .hero-content h1 {
        margin-bottom: 12px;
    }
}

/* Very narrow (≤ 360px): minimal padding */
@media (max-width: 360px) {
    .services-hero {
        padding: 4vh 0 3vh;
    }
}