/* Services Section Styles */
.services {position: relative; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; text-align: center; background-image: url('../img/services-bg.jpg'); background-size: cover; background-position: center; background-attachment: fixed; padding: 8rem 0 4rem 0;}
.services-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 1); z-index: 1;}
.services-container {color: white; padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; z-index: 2; position: relative;}
.services-title {font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; margin-bottom: 2rem; letter-spacing: -0.02em;}
.services-description {font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 300; line-height: 1.8; opacity: 0.9; margin-bottom: 4rem;}

/* Services Grid */
.services-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 4rem;}
.service-card {text-align: center; color: white;}
.service-icon {font-size: 3rem; margin-bottom: 1.5rem; opacity: 0.9;}
.service-title {font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem;}
.service-text {font-size: 1rem; font-weight: 300; line-height: 1.6; opacity: 0.8;}

/* Responsive */
@media (max-width: 768px) {
    .services-grid {grid-template-columns: 1fr; gap: 2.5rem;}
    .services-container {padding: 3rem 1rem;}
}

@media (max-width: 1024px) and (min-width: 769px) {
    .services-grid {grid-template-columns: repeat(2, 1fr); gap: 2.5rem;}
}