/* Base configuration styles */
.service-brand-card {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    font-family: 'Montserrat', sans-serif;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

/* Core child element transitions */
.icon-square-container,
.timeline-badge,
.card-heading-title,
.trigger-arrow,
.trigger-label {
    transition: all 0.25s ease-in-out;
}

/* Custom color definitions */
.bg-brand-mint {
    background-color: #eefbf7;
}

.text-brand-green {
    color: #0b6951 !important;
}

.text-brand-dark {
    color: #0c2e26;
}

/* ==========================================
       🔥 PREMIUM HOVER INTERACTIONS
    ========================================== */

/* 1. Card Container Lifting Elevation */
.service-brand-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(11, 105, 81, 0.08) !important; /* Subtle colored shadow glow */
    border-color: #0b6951 !important; /* Elegant green structural card border */
}

    /* 2. Top Left Icon Pop & Expansion */
    .service-brand-card:hover .icon-square-container {
        background-color: #0b6951 !important; /* Inverts color block to solid green */
        color: #ffffff !important;
        transform: scale(1.05);
    }

    /* 3. Top Right Timeline Color Flip */
    .service-brand-card:hover .timeline-badge {
        background-color: #0b6951 !important;
        color: #ffffff !important;
    }

    /* 4. Core Heading Text Highlight */
    .service-brand-card:hover .card-heading-title {
        color: #0b6951 !important;
    }

    /* 5. Footer Requirements Trigger Line Color Shifting */
    .service-brand-card:hover .trigger-label {
        color: #053a2c !important;
    }

    /* 6. Footer Action Arrow Side Shift Push Animation */
    .service-brand-card:hover .trigger-arrow {
        transform: translateX(5px);
        color: #053a2c !important;
    }