/* ==========================================================
   about — من نحن: إطار بشكل hero (نص + صورة + أسهم + نقاط) وتحته أزرار رسالتنا / رؤيتنا / قيمنا
   ========================================================== */

:root {
    --ebmnt1-about-sky-start: var(--ebmnt1-color-helper-sky-light);
    --ebmnt1-about-sky-end: var(--ebmnt1-color-helper-sky);
    --ebmnt1-about-ray-color: rgba(255, 255, 255, 0.35);
    --ebmnt1-about-edge-color: var(--ebmnt1-color-page-background);
    --ebmnt1-about-star-color: var(--ebmnt1-color-white);
    --ebmnt1-about-frame-background: linear-gradient(180deg, var(--ebmnt1-color-helper-pink-softer), var(--ebmnt1-color-helper-pink-soft));
    --ebmnt1-about-frame-border-color: var(--ebmnt1-color-white);
    --ebmnt1-about-frame-shadow-color: var(--ebmnt1-color-shadow);
    --ebmnt1-about-frame-outline-color: var(--ebmnt1-color-helper-lavender);
    --ebmnt1-about-cloud-color: var(--ebmnt1-color-white);
    --ebmnt1-about-kicker-color: var(--ebmnt1-color-secondary);
    --ebmnt1-about-title-color: var(--ebmnt1-color-helper-purple);
    --ebmnt1-about-title-accent-color: var(--ebmnt1-color-primary);
    --ebmnt1-about-text-color: var(--ebmnt1-color-text);
    --ebmnt1-about-tab-background: var(--ebmnt1-color-white);
    --ebmnt1-about-tab-text-color: var(--ebmnt1-color-helper-purple);
    --ebmnt1-about-tab-icon-color: var(--ebmnt1-color-primary);
    --ebmnt1-about-tab-border-color: var(--ebmnt1-color-helper-lavender);
    --ebmnt1-about-tab-active-background: var(--ebmnt1-color-primary);
    --ebmnt1-about-tab-active-text-color: var(--ebmnt1-color-white);
    --ebmnt1-about-tab-active-icon-color: var(--ebmnt1-color-white);
    --ebmnt1-about-panel-background: var(--ebmnt1-color-white);
    --ebmnt1-about-panel-border-color: var(--ebmnt1-color-helper-lavender);
    --ebmnt1-about-panel-text-color: var(--ebmnt1-color-text);
    --ebmnt1-about-panel-icon-color: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-about-arrow-background: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-about-arrow-icon-color: var(--ebmnt1-color-white);
    --ebmnt1-about-dot-background: var(--ebmnt1-color-helper-sky-strong);
    --ebmnt1-about-dot-active-background: var(--ebmnt1-color-primary);
    --ebmnt1-about-photo-ring-color: var(--ebmnt1-color-white);
    --ebmnt1-about-deco-one-color: var(--ebmnt1-color-primary);
    --ebmnt1-about-deco-two-color: var(--ebmnt1-color-helper-yellow);
    --ebmnt1-about-deco-three-color: var(--ebmnt1-color-helper-sky-strong);
    --ebmnt1-about-badge-background: var(--ebmnt1-color-white);
    --ebmnt1-about-badge-text-color: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-about-font-size-title: clamp(1.6rem, 1.1rem + 2.4vw, 2.9rem);
    --ebmnt1-about-font-size-kicker: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
    --ebmnt1-about-font-size-text: clamp(0.92rem, 0.86rem + 0.3vw, 1.1rem);
    --ebmnt1-about-font-size-tab: clamp(0.8rem, 0.74rem + 0.35vw, 1rem);
}

/* خلفية السماء + أشعة + سحب أعلى وأسفل (مأخوذة من تصميم من نحن) */
.ebmnt1-about {
    background-color: var(--ebmnt1-about-sky-end);
    background-image:
        radial-gradient(circle at 50% 0, var(--ebmnt1-about-edge-color) 0 1.15rem, transparent 1.2rem),
        radial-gradient(circle at 50% 100%, var(--ebmnt1-about-edge-color) 0 1.15rem, transparent 1.2rem),
        repeating-conic-gradient(from 0deg at 50% 45%, var(--ebmnt1-about-ray-color) 0 5deg, transparent 5deg 12deg),
        linear-gradient(180deg, var(--ebmnt1-about-sky-start), var(--ebmnt1-about-sky-end));
    background-size: 2.6rem 1.3rem, 2.6rem 1.3rem, auto, auto;
    background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
    background-position: center top, center bottom, 0 0, 0 0;
}

.ebmnt1-about__star {
    position: absolute;
    color: var(--ebmnt1-about-star-color);
    font-size: clamp(0.8rem, 0.7rem + 0.8vw, 1.4rem);
    opacity: 0.75;
    animation: ebmnt1-about-twinkle 3.2s ease-in-out infinite;
}

@keyframes ebmnt1-about-twinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.9) rotate(0deg); }
    50% { opacity: 0.95; transform: scale(1.15) rotate(15deg); }
}

.ebmnt1-about__frame {
    position: relative;
    isolation: isolate;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4em;
    padding: clamp(1.4rem, 1rem + 2vw, 3rem) clamp(2.6rem, 2rem + 3vw, 4.4rem) clamp(3.4rem, 3rem + 2vw, 5rem);
    border-radius: 1.6rem;
    background: var(--ebmnt1-about-frame-background);
    border: 4px solid var(--ebmnt1-about-frame-border-color);
    outline: 2px dashed var(--ebmnt1-about-frame-outline-color);
    outline-offset: -0.8rem;
    box-shadow: 0 1.4rem 2rem -1.2rem var(--ebmnt1-about-frame-shadow-color);
    overflow: hidden;
}

/* سحب صغيرة أسفل الإطار */
.ebmnt1-about__frame::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -0.1rem;
    z-index: -1;
    height: 2.2rem;
    background-image: radial-gradient(circle at 50% 100%, var(--ebmnt1-about-cloud-color) 0 62%, transparent 64%);
    background-size: 3.4rem 100%;
    background-repeat: repeat-x;
}

.ebmnt1-about__layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6em;
}

.ebmnt1-about__text-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9em;
}

.ebmnt1-about__kicker {
    font-size: var(--ebmnt1-about-font-size-kicker);
    font-weight: 600;
    color: var(--ebmnt1-about-kicker-color);
}

.ebmnt1-about__title {
    font-size: var(--ebmnt1-about-font-size-title);
    color: var(--ebmnt1-about-title-color);
    font-weight: 700;
}

.ebmnt1-about__title strong {
    color: var(--ebmnt1-about-title-accent-color);
}

.ebmnt1-about__text {
    font-size: var(--ebmnt1-about-font-size-text);
    color: var(--ebmnt1-about-text-color);
    max-width: 38rem;
}

.ebmnt1-about__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.3em 1em;
    border-radius: 999px;
    background-color: var(--ebmnt1-about-badge-background);
    color: var(--ebmnt1-about-badge-text-color);
    font-size: var(--ebmnt1-about-font-size-tab);
    font-weight: 700;
}

.ebmnt1-about__badge i {
    color: var(--ebmnt1-about-badge-text-color);
}

/* ---------- أزرار التبديل ---------- */

.ebmnt1-about__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
}

.ebmnt1-about__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55em 1.1em;
    border-radius: 999px;
    border: 2px solid var(--ebmnt1-about-tab-border-color);
    background-color: var(--ebmnt1-about-tab-background);
    color: var(--ebmnt1-about-tab-text-color);
    font-size: var(--ebmnt1-about-font-size-tab);
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.ebmnt1-about__tab i {
    color: var(--ebmnt1-about-tab-icon-color);
    transition: color 0.3s ease;
}

.ebmnt1-about__tab:hover {
    transform: translateY(-0.15em);
}

.ebmnt1-about__tab.ebmnt1-is-active {
    background-color: var(--ebmnt1-about-tab-active-background);
    border-color: var(--ebmnt1-about-tab-active-background);
    color: var(--ebmnt1-about-tab-active-text-color);
}

.ebmnt1-about__tab.ebmnt1-is-active i {
    color: var(--ebmnt1-about-tab-active-icon-color);
}

.ebmnt1-about__panels {
    width: 100%;
    max-width: 38rem;
    display: grid;
}

.ebmnt1-about__panel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 1em 1.2em;
    border-radius: 1.2rem;
    background-color: var(--ebmnt1-about-panel-background);
    border: 2px dashed var(--ebmnt1-about-panel-border-color);
    color: var(--ebmnt1-about-panel-text-color);
    font-size: var(--ebmnt1-about-font-size-text);
    text-align: start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.8rem);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.ebmnt1-about__panel.ebmnt1-is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.ebmnt1-about__values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
}

.ebmnt1-about__value {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
}

.ebmnt1-about__value i {
    color: var(--ebmnt1-about-panel-icon-color);
}

/* ---------- الصورة ---------- */

.ebmnt1-about__photo-side {
    position: relative;
    width: min(100%, 22rem);
    display: flex;
    justify-content: center;
}

.ebmnt1-about__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.05;
    border-radius: 58% 42% 55% 45% / 52% 55% 45% 48%;
    filter: drop-shadow(0 1rem 1rem var(--ebmnt1-about-frame-shadow-color));
}

.ebmnt1-about__photo::before {
    content: "";
    position: absolute;
    inset: -0.6rem;
    border: 3px solid var(--ebmnt1-about-photo-ring-color);
    border-radius: inherit;
    transform: rotate(4deg);
}

.ebmnt1-about__photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 82%;
    border-radius: inherit;
}

.ebmnt1-about__deco {
    position: absolute;
    font-size: clamp(1.1rem, 1rem + 1vw, 1.8rem);
    animation: ebmnt1-about-deco-float 4.5s ease-in-out infinite;
}

.ebmnt1-about__deco--one { top: -0.4rem; left: 0; color: var(--ebmnt1-about-deco-one-color); }
.ebmnt1-about__deco--two { bottom: 1rem; right: -0.4rem; color: var(--ebmnt1-about-deco-two-color); animation-delay: -1.5s; }
.ebmnt1-about__deco--three { top: 30%; right: -0.8rem; color: var(--ebmnt1-about-deco-three-color); animation-delay: -3s; }

/* ---------- الأسهم والنقاط ---------- */

.ebmnt1-about__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 3.2rem;
    background-color: var(--ebmnt1-about-arrow-background);
    color: var(--ebmnt1-about-arrow-icon-color);
    transform: translateY(-50%);
    transition: transform 0.25s ease;
}

.ebmnt1-about__arrow i {
    color: var(--ebmnt1-about-arrow-icon-color);
}

.ebmnt1-about__arrow:hover {
    transform: translateY(-50%) scale(1.12);
}

/* أسهم نصف دائرية ملتصقة بحافة الإطار */
.ebmnt1-about__arrow--prev { right: 0; border-radius: 3.2rem 0 0 3.2rem; }
.ebmnt1-about__arrow--next { left: 0; border-radius: 0 3.2rem 3.2rem 0; }

.ebmnt1-about__dots {
    position: absolute;
    bottom: 0.8rem;
    left: 1.2rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.45em;
    z-index: 3;
}

.ebmnt1-about__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--ebmnt1-about-dot-background);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.ebmnt1-about__dot.ebmnt1-is-active {
    background-color: var(--ebmnt1-about-dot-active-background);
    transform: scale(1.35);
}

@keyframes ebmnt1-about-deco-float {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-0.7rem) rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ebmnt1-about__deco { animation: none; }
}

@media (min-width: 1024px) {
    .ebmnt1-about__layout {
        flex-direction: row;
        align-items: center;
        gap: 3em;
    }

    .ebmnt1-about__text-side {
        flex: 1.2;
        align-items: flex-start;
        text-align: start;
    }

    .ebmnt1-about__tabs {
        justify-content: flex-start;
    }

    .ebmnt1-about__photo-side {
        flex: 0.8;
    }
}