:root {

    /* =========================
       Colors
    ========================= */

    --ebcard2-bg-glass: rgba(255, 255, 255, 0.08);
    --ebcard2-border-color: rgba(255, 255, 255, 0.15);
    --ebcard2-shadow-color: rgba(0, 0, 0, 0.12);

    --ebcard2-btn-bg: #3B0282;
    --ebcard2-title-color: #0C0121;
    --ebcard2-btn-text: #ffffff;

    /* موجودة بالفعل عندك */
    --ebcard2-color-text-primary: #000000;
    --ebcard2-color-text-secondary: #333333;


    /* =========================
       Typography
    ========================= */

    --ebcard2-title-size: 1.2rem;
    --ebcard2-title-weight: 700;

    --ebcard2-text-size: 1rem;
    --ebcard2-text-weight: 700;

    --ebcard2-btn-size: 0.9rem;
    --ebcard2-btn-weight: bold;

    --ebcard2-fs-title: clamp(1.2rem, 4vw, 1.5rem);
    /* =========================
       Radius
    ========================= */
    --ebcard2-card-radius: 24px;
    --ebcard2-image-radius: 10px;
    --ebcard2-btn-radius: 10px;

}


/* =========================
      CARD
========================= */

.ebcard2-section {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 2em);
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 0px;
    gap: 25px;
}

.ebcard2-title-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ebcard2-title {
    color: var(--ebcard2-title-color);
    font-size: var(--ebcard2-fs-title);
    position: relative;
    text-align: center;
    width: fit-content;
    margin: 0% auto;
}


.ebcard2-container {
    overflow: hidden;

    border-radius: var(--ebcard2-card-radius);

    background: var(--ebcard2-bg-glass);

    backdrop-filter: blur(20px);

    border: 1px solid var(--ebcard2-border-color);

    box-shadow: 0 8px 30px var(--ebcard2-shadow-color);

    transition: 0.4s ease;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    padding: 8px;
}

.ebcard2-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.ebcard2 {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.ebcard2-image-wrapper {
    position: relative;
    width: 130px;
    height: fit-content;
    overflow: hidden;
}

.ebcard2-image {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: fill;
    transition: 0.5s ease;
    border-radius: var(--ebcard2-image-radius);
}

/* .ebcard2-container:hover .ebcard2-image {
    transform: scale(1.08);
} */

.ebcard2-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex: 1;
    gap: 8px;
}

.ebcard2-content h3 {
    font-size: var(--ebcard2-title-size);
    font-weight: var(--ebcard2-title-weight);
    color: var(--ebcard2-color-text-primary);
}

.ebcard2-content p {
    font-size: var(--ebcard2-text-size);
    font-weight: var(--ebcard2-text-weight);
    color: var(--ebcard2-color-text-secondary);
}

.ebcard2-btn {
    background: var(--ebcard2-btn-bg);
    color: var(--ebcard2-btn-text);

    padding: 6px 15px;

    border-radius: var(--ebcard2-btn-radius);

    font-weight: var(--ebcard2-btn-weight);
    font-size: var(--ebcard2-btn-size);

    width: 100%;
    text-align: center;
}

@media (min-width:768px) {
    .ebcard2-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Two columns on desktop */
    }
}