/* --- SERVICES SECTION CONTAINER --- */
.services-section {
    background-color: var(--light-bg); /* The very light grey we set in global.css */
    padding: 100px 0;
}

/* --- SECTION HEADINGS --- */
.section-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 60px auto;
}

.section-subtitle {
    display: inline-block;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.section-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--dark-text);
    margin-bottom: 20px;
}

.section-desc {
    font-size: 16px;
    color: var(--secondary-grey);
    line-height: 1.7;
}

/* --- THE GRID LAYOUT --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
    gap: 30px; /* Perfect spacing between cards */
}

/* --- INDIVIDUAL CARDS --- */
/* --- INDIVIDUAL CARDS (THEME COLORED) --- */
.service-card {
    background-color: var(--primary-blue); /* Flips the background to Navy Blue */
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(10, 54, 157, 0.15); /* Soft blue shadow */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column; /* Keeps the button pushed to the bottom */
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(10, 54, 157, 0.3);
}

/* Icons inside the cards */
.card-icon {
    font-size: 32px;
    color: var(--white); /* White icon */
    margin-bottom: 25px;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white circle behind icon */
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.card-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--white); /* White title text */
}

.card-text {
    font-size: 15px;
    color: #d1d8ec; /* Light theme-matched blue-grey for easy reading */
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1; /* This pushes the button down evenly on all cards */
}

/* --- THE NEW BUTTONS --- */
.card-btn {
    display: inline-block;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
    align-self: flex-start; /* Keeps the button on the left */
    transition: all 0.3s ease;
}

.card-btn:hover {
    color: #ffffff;
    border-bottom-color: var(--white);
    padding-right: 8px; /* Cool hover effect that slides the arrow right */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 32px;
    }
}