/* ============================================================
   ebabu1 — About Section
   Namespace  : ebabu1
============================================================ */

/* 1. Variables & Colors */
.ebabu1 {
    --ebabu1-bg: #ffffff;
    --ebabu1-text: #1f2937;
    --ebabu1-title: #0b3a78;
    --ebabu1-border: rgba(0, 0, 0, 0.12);

    --ebabu1-card-bg: #ffffff;
    --ebabu1-card-title: #0b3a78;
    --ebabu1-card-text: #374151;
    --ebabu1-card-btn: #0b3a78;

    --ebabu1-btn-bg: #0b3a78;
    --ebabu1-btn-text: #ffffff;

    --ebabu1-input-bg: #ffffff;
    --ebabu1-input-text: #111827;

    --ebabu1-padding-top: clamp(2rem, 6vw, 4rem);
    --ebabu1-padding-bottom: clamp(2rem, 6vw, 4rem);

    background: var(--ebabu1-bg);
    color: var(--ebabu1-text);
    font-family: "El Messiri", sans-serif;
}

/* 2. Reset داخل الـ namespace */
*,
.ebabu1 *,
.ebabu1 *::before,
.ebabu1 *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 3. Base Styles — Mobile */
.ebabu1 {
    padding-top: var(--ebabu1-padding-top);
    padding-bottom: var(--ebabu1-padding-bottom);
}

.ebabu1__container {
    width: min(92%, 75rem);
    margin-inline: auto;
}

.ebabu1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 5vw, 2.5rem);
    align-items: start;
}

.ebabu1__image-card {
    background: var(--ebabu1-card-bg);
    border-radius: 1rem;
    /* padding: 0.8rem; */
    border: 0.08rem solid var(--ebabu1-border);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.ebabu1__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.8rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ebabu1__content {
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 2.5vw, 1.2rem);
}

.ebabu1__title {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    font-weight: 800;
    color: var(--ebabu1-title);
    line-height: 1.2;
}

.ebabu1__text {
    font-size: clamp(0.95rem, 3.5vw, 1.05rem);
    line-height: 1.9;
    color: var(--ebabu1-card-text);
    max-width: 48rem;
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
    .ebabu1__container {
        width: min(90%, 78rem);
    }

    .ebabu1__image-card {
        padding: 1rem;
        border-radius: 1.1rem;
    }
}

@media (min-width: 601px) {
    .ebabu1__grid {
        gap: 2.2rem;
    }

    .ebabu1__image {
        aspect-ratio: 5 / 4;
    }
}

@media (min-width: 769px) {
    .ebabu1__grid {
        grid-template-columns: 0.95fr 1.3fr;
        align-items: center;
    }

    .ebabu1__content {
        gap: 1.2rem;
    }
}

@media (min-width: 1025px) {
    .ebabu1__container {
        width: min(88%, 82rem);
    }

    .ebabu1__title {
        font-size: clamp(2rem, 2.8vw, 2.8rem);
    }

    .ebabu1__text {
        font-size: clamp(1rem, 1.1vw, 1.08rem);
    }
}

@media (min-width: 1281px) {
    .ebabu1__grid {
        gap: 3rem;
    }
}

@media (min-width: 1441px) {
    .ebabu1__container {
        width: min(86%, 90rem);
    }
}

@media (min-width: 1921px) {
    .ebabu1__container {
        width: min(80%, 100rem);
    }
}