.top {
    margin-bottom: 80px;
}

.top .title {
    font-size: 54px;
    font-weight: 900;
    color: #0c593f;
    margin-bottom: 20px;
}

.top .description {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}

.value-box {
    z-index: 9;
    text-align: left;
    position: relative;
    margin-bottom: 30px;
    border-bottom: 3px solid #d6b7c4;
}

.value-box .icon {
    width: 80px;
    /* height: 80px; */
    padding: 10px;
    object-fit: cover;
    margin-left: 15px;
}

.value-box .title {
    margin: 0;
    color: #ec66a2;
    font-weight: 600;
}

.value-box .description {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}

.center-box {
    height: 100%;
    display: flex;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
}

.center-box .value-box {
    width: 60%;
    margin: 0 auto;
    margin-bottom: 0;
    text-align: center;
    border-bottom: 2px solid transparent;
}

.center-box .icon {
    margin-top: 25px;
}

.value {
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    display: flex;
    font-size: 500px;
    color: #ffeb3b;
    font-weight: bold;
    border-radius: 50%;
    position: absolute;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transform: translate(-50%, -50%);
}

.box-1,
.box-2,
.box-3,
.box-4,
.box-5,
.box-6,
.box-7 {
    position: relative;
}

.box-1::before {
    top: 70%;
    content: "";
    width: 80px;
    height: 80px;
    left: -120px;
    position: absolute;
    background-size: contain;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-image: url(assets/arrow.jpg);
}

.box-1::after {
    top: 70%;
    content: "";
    width: 80px;
    height: 80px;
    right: -120px;
    position: absolute;
    background-size: contain;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-image: url(assets/arrow.jpg);
}

.box-3::before {
    top: 15%;
    content: "";
    width: 80px;
    height: 80px;
    right: 80px;
    position: absolute;
    background-size: contain;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-image: url(assets/arrow.jpg);
}

.box-6::before {
    top: 15%;
    content: "";
    width: 80px;
    height: 80px;
    right: 80px;
    position: absolute;
    background-size: contain;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-image: url(assets/arrow.jpg);
}

.box-7::before {
    top: 30%;
    content: "";
    width: 80px;
    height: 80px;
    left: -120px;
    position: absolute;
    background-size: contain;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-image: url(assets/arrow.jpg);
}

.box-7::after {
    top: 30%;
    content: "";
    width: 80px;
    height: 80px;
    right: -120px;
    position: absolute;
    background-size: contain;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-image: url(assets/arrow.jpg);
}

@media (max-width: 992px) {
    .box-1::before {
        display: none;
    }

    .box-1::after {
        display: none;
    }

    .box-3::before {
        display: none;
    }

    .box-6::before {
        display: none;
    }

    .box-7::before {
        display: none;
    }

    .box-7::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .center-box {
        height: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .value-box {
        margin-bottom: 30px;
    }

    .d-flex.justify-content-center {
        flex-direction: column;
        align-items: center;
    }
}

@media(max-width: 460px) {
    .top .title {
        font-size: 34px;
    }

    .top {
        margin-bottom: 30px;
    }
}