/* ==========================================================
   ebmnt1-about.css
   من نحن: بعد سكشن خطوات العمل
   - خلفية halftone
   - النقاط: الصف الأول (أيقونة + اسم) في نفس الصف بـ flex-start
     والصف التاني الشرح (فقرة أو unordered list)
   - صورة بركنين مقطوعين (notch) فيهم قوايم النقاط
   ========================================================== */

:root {
    /* ---------- ألوان ---------- */
    --ebmnt1-about-background-image: url("../images/halftone-texture.jpg");
    --ebmnt1-about-text-color: var(--ebmnt1-color-helper-body-gray);

    /* النقاط */
    --ebmnt1-about-point-icon-background-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-about-point-icon-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-about-point-title-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-about-point-text-color: var(--ebmnt1-color-helper-body-gray);
    --ebmnt1-about-point-divider-color: var(--ebmnt1-color-helper-border-gray);
    --ebmnt1-about-point-list-icon-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-about-point-list-text-color: var(--ebmnt1-color-helper-body-gray);

    /* صف الاتصال */
    --ebmnt1-about-call-icon-background-color: var(--ebmnt1-color-helper-surface);
    --ebmnt1-about-call-icon-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-about-call-label-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-about-call-number-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-about-call-number-hover-text-color: var(--ebmnt1-color-primary-blue);

    /* زرار الاتصال (بتصميم زرار قابل للضغط) */
    --ebmnt1-about-call-button-background-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-about-call-button-border-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-about-call-button-shadow-color: var(--ebmnt1-color-helper-shadow);
    --ebmnt1-about-call-button-hover-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-about-call-button-hover-label-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-about-call-button-hover-number-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-about-call-button-hover-icon-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-about-call-button-hover-icon-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-about-call-arrow-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-about-call-arrow-color: var(--ebmnt1-color-helper-heading-dark);

    /* كروت القوايم فوق الصورة */
    --ebmnt1-about-yellow-card-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-about-yellow-card-icon-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-about-yellow-card-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-about-blue-card-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-about-blue-card-icon-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-about-blue-card-text-color: var(--ebmnt1-color-helper-white);

    /* ---------- مقاسات ---------- */
    --ebmnt1-about-edge-gap: 1.5em;
    --ebmnt1-about-layout-gap: 1.75em;
    --ebmnt1-about-text-column-gap: 1.25em;
    --ebmnt1-about-body-gap: 1em;
    --ebmnt1-about-points-gap: 1em;
    --ebmnt1-about-point-gap: 0.75em;
    --ebmnt1-about-point-head-gap: 0.75em;
    --ebmnt1-about-point-icon-size: 2.6rem;
    --ebmnt1-about-point-icon-radius: 12px;
    --ebmnt1-about-point-icon-font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
    --ebmnt1-about-point-list-gap: 0.5em;
    --ebmnt1-about-point-list-icon-font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
    --ebmnt1-about-call-icon-size: 3rem;
    --ebmnt1-about-call-icon-font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2.2rem);
    --ebmnt1-about-media-height: 28rem;
    --ebmnt1-about-call-arrow-size: 2.2rem;
    --ebmnt1-about-call-arrow-font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    --ebmnt1-about-card-radius: 15px;
    --ebmnt1-about-card-padding: 1.25em;
    --ebmnt1-about-card-list-gap: 0.65em;
    --ebmnt1-about-card-icon-font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.25rem);
    --ebmnt1-about-top-tab-width: 69%;
    --ebmnt1-about-bottom-tab-width: 83%;
    --ebmnt1-about-pallet-image-width: 70%;
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-about-media-height: 32rem;
        --ebmnt1-about-edge-gap: 2em;
        --ebmnt1-about-top-tab-width: 62%;
        --ebmnt1-about-bottom-tab-width: 75%;
    }
}

@media (min-width: 1024px) {
    :root {
        --ebmnt1-about-media-height: 34.375rem;
        --ebmnt1-about-layout-gap: 2.5em;
        --ebmnt1-about-edge-gap: 3em;
    }
}

.ebmnt1-about {
    gap: var(--ebmnt1-about-edge-gap);
    background-image: var(--ebmnt1-about-background-image);
    background-position: 0 0;
}

.ebmnt1-about__layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ebmnt1-about-layout-gap);
}

/* ---------- العمود النصي ---------- */
.ebmnt1-about__text-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ebmnt1-about-text-column-gap);
}

.ebmnt1-about__text-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ebmnt1-about-body-gap);
}

.ebmnt1-about__pallet {
    flex: 0 0 auto;
    width: var(--ebmnt1-about-pallet-image-width);
}

.ebmnt1-about__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ebmnt1-about-body-gap);
}

.ebmnt1-about__text {
    color: var(--ebmnt1-about-text-color);
}

/* ---------- النقاط ---------- */
.ebmnt1-about__points {
    display: flex;
    flex-direction: column;
    gap: var(--ebmnt1-about-points-gap);
}

.ebmnt1-about__point {
    display: flex;
    flex-direction: column;
    text-align: start;
    gap: var(--ebmnt1-about-point-gap);
    padding-block-end: var(--ebmnt1-about-points-gap);
    border-bottom: 1px solid var(--ebmnt1-about-point-divider-color);
}

.ebmnt1-about__point:last-child {
    padding-block-end: 0;
    border-bottom: 0;
}

/* الصف الأول: الأيقونة + الاسم */
.ebmnt1-about__point-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--ebmnt1-about-point-head-gap);
}

.ebmnt1-about__point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ebmnt1-about-point-icon-size);
    height: var(--ebmnt1-about-point-icon-size);
    border-radius: var(--ebmnt1-about-point-icon-radius);
    background-color: var(--ebmnt1-about-point-icon-background-color);
    font-size: var(--ebmnt1-about-point-icon-font-size);
    color: var(--ebmnt1-about-point-icon-color);
}

.ebmnt1-about__point-title {
    font-size: var(--ebmnt1-font-size-small-title);
    font-weight: var(--ebmnt1-font-weight-semibold);
    line-height: var(--ebmnt1-about-point-icon-size);
    color: var(--ebmnt1-about-point-title-text-color);
}

/* الصف التاني: الشرح (فقرة أو قايمة) */
.ebmnt1-about__point-body {
    color: var(--ebmnt1-about-point-text-color);
}

.ebmnt1-about__point-list {
    display: flex;
    flex-direction: column;
    gap: var(--ebmnt1-about-point-list-gap);
}

.ebmnt1-about__point-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    color: var(--ebmnt1-about-point-list-text-color);
}

.ebmnt1-about__point-list-icon {
    flex-shrink: 0;
    font-size: var(--ebmnt1-about-point-list-icon-font-size);
    line-height: var(--ebmnt1-line-height-body);
    color: var(--ebmnt1-about-point-list-icon-color);
}

/* ---------- صف الاتصال ---------- */
.ebmnt1-about__call-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
}

.ebmnt1-about__call-box {
    display: inline-flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.5em 0.6em 0.5em 1em;
    border: 2px solid var(--ebmnt1-about-call-button-border-color);
    border-radius: var(--ebmnt1-radius-pill);
    background-color: var(--ebmnt1-about-call-button-background-color);
    box-shadow: 0 6px 16px var(--ebmnt1-about-call-button-shadow-color);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--ebmnt1-transition-base), transform var(--ebmnt1-transition-base), box-shadow var(--ebmnt1-transition-base);
}

.ebmnt1-about__call-box:hover,
.ebmnt1-about__call-box:focus-visible {
    background-color: var(--ebmnt1-about-call-button-hover-background-color);
    box-shadow: 0 10px 22px var(--ebmnt1-about-call-button-shadow-color);
    transform: translateY(-3px);
}

.ebmnt1-about__call-box:active {
    transform: translateY(0);
}

.ebmnt1-about__call-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ebmnt1-about-call-icon-size);
    height: var(--ebmnt1-about-call-icon-size);
    border-radius: 50%;
    background-color: var(--ebmnt1-about-call-icon-background-color);
    font-size: var(--ebmnt1-about-call-icon-font-size);
    color: var(--ebmnt1-about-call-icon-color);
}

.ebmnt1-about__call-text {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    font-size: var(--ebmnt1-font-size-label);
    font-weight: var(--ebmnt1-font-weight-semibold);
    line-height: 1.3;
}

.ebmnt1-about__call-label {
    color: var(--ebmnt1-about-call-label-text-color);
}

.ebmnt1-about__call-number {
    direction: ltr;
    text-align: start;
    color: var(--ebmnt1-about-call-number-text-color);
    transition: color var(--ebmnt1-transition-base);
}



.ebmnt1-about__call-icon,
.ebmnt1-about__call-label,
.ebmnt1-about__call-number {
    transition: background-color var(--ebmnt1-transition-base), color var(--ebmnt1-transition-base);
}

.ebmnt1-about__call-box:hover .ebmnt1-about__call-icon {
    background-color: var(--ebmnt1-about-call-button-hover-icon-background-color);
    color: var(--ebmnt1-about-call-button-hover-icon-color);
}

.ebmnt1-about__call-box:hover .ebmnt1-about__call-label {
    color: var(--ebmnt1-about-call-button-hover-label-color);
}

.ebmnt1-about__call-box:hover .ebmnt1-about__call-number {
    color: var(--ebmnt1-about-call-button-hover-number-color);
}

.ebmnt1-about__call-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ebmnt1-about-call-arrow-size);
    height: var(--ebmnt1-about-call-arrow-size);
    border-radius: 50%;
    background-color: var(--ebmnt1-about-call-arrow-background-color);
    font-size: var(--ebmnt1-about-call-arrow-font-size);
    color: var(--ebmnt1-about-call-arrow-color);
    transition: transform var(--ebmnt1-transition-base);
}

.ebmnt1-about__call-box:hover .ebmnt1-about__call-arrow {
    transform: translateX(-4px);
}

/* ---------- الصورة + الـ notch ---------- */
.ebmnt1-about__media {
    width: 100%;
}

.ebmnt1-about__media-frame {
    height: var(--ebmnt1-about-media-height);
}

.ebmnt1-about__top-tab {
    width: var(--ebmnt1-about-top-tab-width);
}

.ebmnt1-about__bottom-tab {
    width: var(--ebmnt1-about-bottom-tab-width);
}

.ebmnt1-about__card {
    flex: 1 1 auto;
    width: 100%;
    padding: var(--ebmnt1-about-card-padding);
    border-radius: var(--ebmnt1-about-card-radius);
}

.ebmnt1-about__card--yellow {
    background-color: var(--ebmnt1-about-yellow-card-background-color);
}

.ebmnt1-about__card--blue {
    background-color: var(--ebmnt1-about-blue-card-background-color);
}

.ebmnt1-about__card-list {
    display: flex;
    flex-direction: column;
    gap: var(--ebmnt1-about-card-list-gap);
}

.ebmnt1-about__card-item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: var(--ebmnt1-font-size-label);
    font-weight: var(--ebmnt1-font-weight-medium);
    line-height: 1.3;
    text-align: start;
}

.ebmnt1-about__card-icon {
    flex-shrink: 0;
    font-size: var(--ebmnt1-about-card-icon-font-size);
}

.ebmnt1-about__card--yellow .ebmnt1-about__card-icon {
    color: var(--ebmnt1-about-yellow-card-icon-color);
}

.ebmnt1-about__card--yellow .ebmnt1-about__card-item {
    color: var(--ebmnt1-about-yellow-card-text-color);
}

.ebmnt1-about__card--blue .ebmnt1-about__card-icon {
    color: var(--ebmnt1-about-blue-card-icon-color);
}

.ebmnt1-about__card--blue .ebmnt1-about__card-item {
    color: var(--ebmnt1-about-blue-card-text-color);
}

/* ---------- تابلت ---------- */
@media (min-width: 768px) {
    .ebmnt1-about__call-row {
        align-items: flex-start;
    }

    .ebmnt1-about__text-column {
        text-align: start;
    }

    .ebmnt1-about__text-column .ebmnt1-section-heading {
        align-items: flex-start;
        text-align: start;
    }

    .ebmnt1-about__text-row {
        flex-direction: row;
        align-items: flex-end;
    }

    .ebmnt1-about__pallet {
        width: 40%;
    }


}

/* ---------- لابتوب ---------- */
@media (min-width: 1024px) {
    .ebmnt1-about__layout {
        flex-direction: row;
        align-items: center;
    }

    .ebmnt1-about__text-column {
        flex: 0 0 56%;
        width: 56%;
    }

    .ebmnt1-about__media {
        flex: 0 0 40%;
        width: 40%;
    }
}