/* upper text  */
.upper-tetx-all-why {
    background-color: #FBFBFB;
}

.heading-why-training h2 {
    text-align: left;
    color: var(--white-color);
}

.heading-why-training h2 span {
    font-weight: 700;
    color: var(--color-primary);
}

.text-main-why-train {
    color: var(--white-color);
    text-align: left;
}

.box-card-why-training {
    background-color: #171717;
    border: 1px solid #212121;
    padding: 40px;
    border-radius: 20px;
    height: 100%;
    position: relative;
}

.box-card-why-training h3 {
    letter-spacing: 0.20000000298023224px;
    text-align: left;
    color: var(--white-color);
    margin-bottom: 20px;
    text-transform: capitalize;
    max-width: calc(100% - 80px);
}

.box-card-why-training p {
    text-align: left;
    margin: 0;
    color: var(--white-color);
}

.box-card-why-training::before {
    content: "1";
    position: absolute;
    font-size: 99px;
    -webkit-text-stroke: 1px #FEC30733;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    right: 11px;
    top: 10px;
    font-family: var(--font-secondary);
}

.box-card-why-training.four-bef::before {
    content: "4" !important;
}

.box-card-why-training.three-bef::before {
    content: "3" !important;
}

.box-card-why-training.two-bef::before {
    content: "2" !important;
}

.box-card-why-training.four-bef::before {
    content: "4" !important;
}

.box-card-why-training.five-bef::before {
    content: "5" !important;
}

.box-card-why-training.six-bef::before {
    content: "6" !important;
}


/* responsiveness  */
@media(max-width: 1399px) {
    .box-card-why-training {
        padding: 30px;
    }
}

@media(max-width: 1199px) {
    .box-card-why-training::before {
        font-size: 70px;
        top: 0px;
    }
}

@media(max-width: 991px) {

    .box-card-why-training {
        padding: 20px;
    }

    .row-gap-5 {
        row-gap: 2rem !important;
    }
}

@media(max-width: 767px) {
    .box-card-why-training {
        padding: 20px;
    }
}

@media(max-width: 575px) {
    .box-card-why-training::before {
        font-size: 60px;
    }

    .box-card-why-training h3 {
        margin-bottom: 10px;
    }

    .box-card-why-training::before {
        font-size: 50px !important;
    }

    .box-card-why-training {
        padding: 15px;
    }

    .box-card-why-training::before {
        font-size: 50px;
        top: 0px;
    }

    .row-gap-5 {
        row-gap: 16px !important;
    }
}