.services-section {
    background-color: #f8f9fa;
}

.service-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, border 0.1s ease-in-out;
    padding: 20px;
    border: 2px solid transparent; /* Default border */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
    border: 2px solid #007bff; /* Blue border on hover */
}


@keyframes borderAnimation {
    0% { border-color: transparent; }
    50% { border-color: rgba(0, 123, 255, 0.5); }
    100% { border-color: #007bff; }
}

.service-card:hover {
    animation: borderAnimation 0.1s ease-in-out forwards;
}

.service-img {
    width: 250px; /* Fixed width */
    height: 180px; /* Fixed height */
    object-fit: cover; /* Ensures images maintain aspect ratio */
    border-radius: 8px;
    display: block;
    margin: 0 auto; /* Centers the image */
}