.about-box {
    background: #efeff0;
}
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}
.start-box {
    padding: 40px;
    height: 100%;
    font-size: 0.9rem;
}
.start-box .h5 {
    font-size: 1.3rem;
    font-weight: bold;
}
.start-box.box-dark {
    background-color: #535353; 
    color: #fff;
}
.box-dark .h5{
    color: #fff;
}
.start-box.box-light {
    background-color: #aaeaf9;
    color: #222222;
}
.box-light .h5{
    color: #222222;
}
.start-box li {
    list-style-type: none; 
    position: relative;
    margin-left: 15px;
    padding: 5px;
}

.start-box li::before {
    content: '\2713 '; 
    position: absolute;
    left: -15px; 
    top: 5px;
    color: rgb(247, 24, 8); 
    font-size: 1.1rem;
    font-weight: bold;
}
.mid-box {
    background: #fff;
    height: 100%;
    padding: 40px;
    font-size: 0.9rem;
}
.mid-box h4{
    font-size: 2rem;
    color: #00c1df;
    font-weight: 900;
}
.mid-box-cont {
    border: 2px solid#00c1df;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 4px 4px 4px #00c1df;
    font-size: 1rem;
    color: #fc3205;
}

.sub-content-box {
    height: 300px; 
    color: white;
    padding: 40px;
}
.sub-content-box .sub-header {
    font-size: 1.3rem;
    font-weight: bold;
    align-self: center;
    justify-self: center;
}
.sub-content-box .sub-content{
    font-size: 0.9rem;
    padding: 20px;
    align-self: center;
    justify-self: center;
}

.sub-content-box:nth-child(4n-3) {
    background-color: #2ea2fa;
    color: #f8fdfe;
}

.sub-content-box:nth-child(4n-2) {
    background-color: #d2d0d0;
    color: #575859;
}

.sub-content-box:nth-child(4n-1) {
    background-color: #fff9f9;
    color: #6c7178;
}

.sub-content-box:nth-child(4n) {
    background-color: #5a5a5a;
    color: rgb(235, 233, 233);
}

@media (max-width: 900px) {
    .sub-content-container {
        grid-template-columns: 1fr;
    }

    .sub-content-box {
        height: auto;
        padding: 15px;
    }
}
@media (max-width: 767px) {
    .start-box-container {
        flex-direction: column;
    }

    .start-box {
        margin-bottom: 0;
    }
    .mid-box-cont {
        margin-top: 1.2rem;
        font-size: 0.9rem;
    }
}