/* ============================================================
   ebpt4 — Features / Points
   Namespace  : ebpt4
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');
/* 1. Variables & Colors */
.ebpt4 {
    --ebpt4-helper: #1d5399;
    --ebpt4-primary: #ffffff;
    --ebpt4-secondary: #2b2b2b;

    --ebpt4-border: rgba(0, 0, 0, 0.1);
}

/* 2. Reset */
.ebpt4 *,
.ebpt4 *::before,
.ebpt4 *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "El Messiri", sans-serif;
}

/* 3. Base Styles — Mobile */
.ebpt4 {
    width: 95%;
    margin: 0 auto;
    padding: 0.3rem;

    border: 0.08rem solid var(--ebpt4-border);
    border-radius: 1.5rem;

    background: var(--ebpt4-primary);
}



/* Grid */
.ebpt4__grid {
    display: grid;
    grid-template-columns: 1fr;
}

/* Item */
.ebpt4__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 1.2rem 0.5rem;
}

/* Number */
.ebpt4__number {
    font-size: clamp(1.5rem, 6vw, 2rem);
    color: var(--ebpt4-helper);

        font-weight: 900;
}

/* Title */
.ebpt4__title {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    color: var(--ebpt4-secondary);

}

/* Text */
.ebpt4__text {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
    color: var(--ebpt4-secondary);
    line-height: 1.6;
    max-width: 90%;
}

/* Divider */
.ebpt4__divider {
    width: 90%;
    height: 0.08rem;
    background: var(--ebpt4-border);
    margin-top: 0.5rem;
}
.ebpt4__divider-tab{
    width: 90%;
    height: 0.08rem;
    background: var(--ebpt4-border);
    margin-top: 0.5rem;
     display: none;
}

/* 4. Breakpoints */

@media (min-width: 481px) {
    .ebpt4__item {
        padding: 0.5rem ;
    }
  
}

@media (min-width: 601px) {
    .ebpt4__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ebpt4__divider {
        display: none;
    }
    .ebpt4__divider-tab {
       display: block;
    }
    
}

@media (min-width: 769px) {
    .ebpt4__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ebpt4 {
    width: 90%;
}
}

@media (min-width: 1025px) {
    .ebpt4__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ebpt4 {
        padding: 2rem;
    }
    .ebpt4__divider-tab {
        display: none;
    }
}

@media (min-width: 1281px) {
        .ebpt4 {
    width: 80%;
}
}

@media (min-width: 1441px) {
}

@media (min-width: 1921px) {
}