/* ==========================================================================
   ebmnt1-why-us.css  -  لماذا تختارنا (بنفس تصميم سيكشن "Trusted Guidance")
   ========================================================================== */

:root {
    /* colors */
    --ebmnt1-why-title-text-color: var(--ebmnt1-color-neutral-ink);
    --ebmnt1-why-text-color: var(--ebmnt1-color-helper-grey);
    --ebmnt1-why-divider-color: var(--ebmnt1-color-helper-grey-border);
    --ebmnt1-why-item-title-text-color: var(--ebmnt1-color-neutral-ink);
    --ebmnt1-why-item-text-color: var(--ebmnt1-color-helper-grey);
    --ebmnt1-why-icon-color: var(--ebmnt1-color-secondary);
    --ebmnt1-why-icon-cyan-bg-color: var(--ebmnt1-color-helper-cyan);
    --ebmnt1-why-icon-cream-bg-color: var(--ebmnt1-color-helper-cream);
    --ebmnt1-why-icon-pink-bg-color: var(--ebmnt1-color-helper-pink);
    --ebmnt1-why-item-hover-bg-color: var(--ebmnt1-color-helper-sand);

    /* font sizes */
    --ebmnt1-why-title-font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
    --ebmnt1-why-text-font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
    --ebmnt1-why-item-title-font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.5rem);
    --ebmnt1-why-item-text-font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
    --ebmnt1-why-icon-font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);

    /* sizes */
    --ebmnt1-why-icon-size: clamp(3.4rem, 3rem + 1.2vw, 4.1rem);
    --ebmnt1-why-item-radius: 1.25rem;
}

.ebmnt1-why__inner {
    align-items: stretch;
    gap: 2.5em;
    text-align: start;
}

.ebmnt1-why__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9em;
}

.ebmnt1-why__title {
    font-size: var(--ebmnt1-why-title-font-size);
    color: var(--ebmnt1-why-title-text-color);
}

.ebmnt1-why__text {
    max-width: 44rem;
    font-size: var(--ebmnt1-why-text-font-size);
    color: var(--ebmnt1-why-text-color);
}

.ebmnt1-why__divider {
    width: 100%;
    height: 1px;
    background-color: var(--ebmnt1-why-divider-color);
}

.ebmnt1-why__list {
    display: flex;
    flex-direction: column;
    gap: 1.75em;
}

.ebmnt1-why-item {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    border-radius: var(--ebmnt1-why-item-radius);
    transition: transform var(--ebmnt1-transition-medium);
}

.ebmnt1-why-item:hover {
    transform: translateY(-0.35rem);
}

.ebmnt1-why-item__icon {
    flex: 0 0 auto;
    width: var(--ebmnt1-why-icon-size);
    height: var(--ebmnt1-why-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ebmnt1-why-icon-color);
    font-size: var(--ebmnt1-why-icon-font-size);
    transition: transform var(--ebmnt1-transition-medium);
}

.ebmnt1-why-item:hover .ebmnt1-why-item__icon {
    transform: rotate(-10deg) scale(1.08);
}

.ebmnt1-why-item__icon--cyan {
    background-color: var(--ebmnt1-why-icon-cyan-bg-color);
}

.ebmnt1-why-item__icon--cream {
    background-color: var(--ebmnt1-why-icon-cream-bg-color);
}

.ebmnt1-why-item__icon--pink {
    background-color: var(--ebmnt1-why-icon-pink-bg-color);
}

.ebmnt1-why-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.ebmnt1-why-item__title {
    font-size: var(--ebmnt1-why-item-title-font-size);
    color: var(--ebmnt1-why-item-title-text-color);
}

.ebmnt1-why-item__text {
    font-size: var(--ebmnt1-why-item-text-font-size);
    color: var(--ebmnt1-why-item-text-color);
}

@media (min-width: 768px) {
    .ebmnt1-why__list {
        flex-direction: row;
        gap: 2em;
    }

    .ebmnt1-why-item {
        flex: 1;
    }
}

@media (min-width: 1024px) {
    .ebmnt1-why__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 3em;
    }

    .ebmnt1-why__list {
        gap: 3em;
    }
}