/* Basic styling for the service items */
.service-item {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    /* Smooth transition */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Zoom effect on hover */
.service-item:hover {
    transform: scale(1.1);
    /* Zooms in the card */
}

/* Ensure the icons and text also zoom slightly and remain smooth */
.service-icon i,
.service-desc h4 a,
.service-desc p,
.read-btn span {
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Optional: Add shadow effect on hover for more visual depth */
.service-item:hover {
    transform: scale(1.1);
    /* Zoom */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    /* Enhance the shadow on hover */
}

/* Adjust the hover effect for the icon color */
.service-item:hover .service-icon i {
    /* color: #fff; */
    /* Change icon color on hover */
    
}

/* Optional: animate the button arrow on hover */
.read-btn i {
    transition: transform 0.3s ease;
}

.service-item:hover .read-btn i {
    transform: translateX(5px);
    /* Animate the arrow moving on hover */
}