/* Consistent Card Styling for ONE Sphere Solutions
 * Applies the gold left border with hover effects to all service cards
 * Prevents content shifting using pseudo-elements
 */

/* Service cards styling with gold left border */
.services-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5rem 1.5rem 1.5rem calc(1.5rem + 4px); /* Add space for the left border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    box-sizing: border-box;
    height: 100%;
}

/* Add pseudo-element for the border to prevent content shifting */
.services-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: var(--brand-gold);
    transition: width 0.3s ease;
}

.services-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.services-card:hover::before {
    width: 8px; /* Expanded gold border on hover without shifting content */
}

/* Title styling with hover effect */
.services-card h3 {
    color: var(--brand-blue);
    margin-bottom: 1rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.services-card:hover h3 {
    color: var(--brand-gold); /* Title changes to gold on hover */
}

/* Icon styling */
.services-card h3 i {
    margin-right: 0.5rem;
    color: var(--brand-gold);
}

/* Ensure content doesn't shift on mobile */
@media (max-width: 768px) {
    .services-card {
        padding: 1.2rem 1.2rem 1.2rem calc(1.2rem + 4px);
    }
}