/* Import base styles from the main stylesheet */
@import url('styles.css');

/* Services Page Specific Styles */

.services-header {
    background-color: #2a2a2a; /* Slightly lighter dark background */
    color: #f8f9fa;
    padding: 120px 0 60px 0; /* Adjust padding for fixed nav */
    text-align: center;
}

.services-header .section-title {
    font-size: 3.2em; /* Slightly larger for emphasis */
    font-weight: 700;
    color: #00BFFF; /* Highlight color */
    margin-bottom: 20px; /* Increased margin */
}

.services-header .services-intro {
    font-size: 1.3em; /* Slightly larger intro text */
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.8;
    line-height: 1.7; /* Improved readability */
}

/* Services Section Styling */
.services-section { /* Renamed from .services to avoid potential conflicts */
    padding: 80px 0; /* Consistent padding */
    background: #212121; /* Dark background */
}

.services-grid {
    display: grid;
    /* Changed to 2 columns by default for all four cards */
    grid-template-columns: repeat(2, 1fr);
    gap: 40px; /* Increased gap between cards */
    padding: 0 20px; /* Add some horizontal padding */
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center; /* Center items in the grid */
    align-items: stretch; /* Ensure cards stretch to same height */
}

/* Removed specific style for the 4th service card as it's no longer needed for 2x2 layout */
/* .services-grid .service-card:nth-child(4) {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
} */


.service-card {
    background: #2a2a2a; /* Card background slightly lighter than section */
    padding: 40px; /* More padding inside cards */
    border-radius: 15px; /* Softer rounded corners */
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    border: 1px solid #333333; /* Subtle border */
    display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to the top */
}

.service-card:hover {
    transform: translateY(-12px); /* More pronounced lift effect */
    box-shadow: 0 25px 50px rgba(0, 191, 255, 0.2); /* Stronger blue accent shadow */
    border-color: #00BFFF; /* Blue accent border on hover */
}

.service-icon {
    width: 90px; /* Larger icon size */
    height: 90px;
    margin: 0 auto 30px auto; /* Increased bottom margin */
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #00BFFF; /* More prominent blue border */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3b3b3b; /* Background for the icon circle */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Shadow for the icon itself */
}

.service-icon img {
    width: 90%; /* Make image slightly smaller than container to show border */
    height: 90%;
    object-fit: cover;
    border-radius: 50%; /* Ensure image is also circular */
}

.service-title {
    font-size: 1.8em; /* Larger title font */
    font-weight: 700;
    color: #f8f9fa; /* White text */
    margin-bottom: 15px; /* Space below title */
    text-transform: capitalize; /* Consistent capitalization */
}

.service-description {
    color: #cccccc; /* Lighter gray for description */
    line-height: 1.7; /* Improved line height for readability */
    font-size: 1.05em; /* Slightly larger description font */
    flex-grow: 1; /* Allows description to take available space */
}

/* Responsive Design for Services Page (Option 2) */
@media (max-width: 992px) {
    .services-header .section-title {
        font-size: 2.8em;
    }
    .services-header .services-intro {
        font-size: 1.1em;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* Still 2 columns on medium screens */
        gap: 30px;
    }
    /* Removed specific style for the 4th service card in this breakpoint */
    /* .services-grid .service-card:nth-child(4) {
        grid-column: auto;
        max-width: none;
        margin: 0;
    } */
    .service-card {
        padding: 30px;
    }
    .service-icon {
        width: 80px;
        height: 80px;
    }
    .service-title {
        font-size: 1.6em;
    }
}

@media (max-width: 768px) {
    .services-header {
        padding: 100px 0 50px 0;
    }
    .services-header .section-title {
        font-size: 2.2em;
    }
    .services-header .services-intro {
        font-size: 1em;
    }
    .services-grid {
        grid-template-columns: 1fr; /* Stack cards vertically on smaller screens */
        gap: 25px;
        padding: 0 15px;
    }
    .service-card {
        padding: 25px;
    }
    .service-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }
    .service-title {
        font-size: 1.4em;
    }
    .service-description {
        font-size: 0.95em;
    }
}

@media (max-width: 480px) {
    .services-header .section-title {
        font-size: 1.8em;
    }
    .services-header .services-intro {
        font-size: 0.9em;
    }
    .service-card {
        padding: 20px;
    }
}