/* ================================================
   Why Area Cards - Enhanced Readability
   ================================================ */

.why-area-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.why-area-card h3 {
    transition: color 0.3s ease;
}

.why-area-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    transition: font-size 0.3s ease, line-height 0.3s ease;
}

/* Hover Effects */
.why-area-card:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.why-area-card:hover h3 {
    color: var(--color-accent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .why-area-card p {
        font-size: 0.9rem;
    }

    .why-area-card:hover {
        transform: scale(1.02) translateY(-3px);
    }
}

/* Wide Card Layout */
.why-area-card-wide {
    width: 100%;
    max-width: 100% !important;
}

.wide-card-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.wide-card-left {
    flex: 0 0 250px;
}

.wide-card-right {
    flex: 1;
}

@media (max-width: 768px) {
    .wide-card-inner {
        flex-direction: column;
        gap: 1rem;
    }
    
    .wide-card-left {
        flex: none;
        width: 100%;
    }
}