@media (min-width: 0px){
    body{
        background-color: #f5f7fc;
    }
    .img-full-hero{
        display: none;
    }
    .guide-box{
        width: 100%;
    }
    .guide-certification-preview{
        height: 300px;
    }
    .course-box-section{
        width: 350px;
        max-height: 0px;
    }
    /* .side-filter-box {
        position: fixed;
        top: 84px;
        bottom: 0;
        left: 0; 
        width: 250px;
        background-color: #fff;
        overflow-y: auto;
        padding: 1rem;
    } */
    .section-story-0{
        justify-content: center;
    }
    .img-principle-box{
        display: block;
    }
    .img-principle-box, .img-stories-hero{
        width: 300px;
        height: 300px;
        z-index: 99;
    }
}
@media (min-width: 576px) {
    body{
        background-color: #f5f7fc;
    }
    .img-full-hero{
        display: none;
    }
    .guide-box{
        width: 100%;
    }
    .course-box-section{
        width: 400px;
        max-height: 0px;
    }
    .section-story-0{
        justify-content: center;
    }
    .img-principle-box{
        display: block;
    }
}

@media (min-width: 768px) {
    body{
        background-color: #f5f7fc;
    }
    .img-full-hero{
        display: none;
    }
    .course-box-section{
        width: 360px;
        max-height: 0px;
    }
    .img-principle-box{
        display: block;
    }
    .des-text-c{
        margin-bottom: 40px;
    }
    /* .title-c{
        height: 105px;
    }
    .des-text-c{
        height: 190px;
    } */
     .img-principle-box, .img-stories-hero{
        width: 300px;
        height: 300px;
        z-index: 99;
    }
}

@media (min-width: 992px) {
    body{
        background-color: #f5f7fc;
    }
    .img-full-hero{
        display: none;
    }
    .hero-relative-0{
        margin-top: 73px;
    }
    .guide-box{
        width: 70%;
        padding: 20px 30px 20px 30px; 
    }
    .guide-certification-preview{
        height: 180px;
    }
    .guide-box{
        max-height: 300px;
        min-height: 400px;
    }
    .course-box-section{
        width: 250px;
        max-height: 0px;
    }
    .img-principle-box{
        display: block;
    }
    .img-principle-box, .img-stories-hero{
        width: 350px;
        height: 350px;
        z-index: 99;
    }
}

@media (min-width: 1200px) {
    body{
        background-color: #f5f7fc;
    }
    .img-full-hero{
        display: block;
    }
    .hero-relative-0{
        margin-top: 83px;
    }
    .guide-box{
        min-height: 380px;
    }
    .course-box-section{
        width: 250px;
        max-height: 0px;
    }
    .img-principle-box{
        display: block;
    }
    .des-text-c-details{
        font-size: 1.25rem;
    }
    .img-principle-box, .img-stories-hero{
        width: 400px;
        height: 400px;
        z-index: 99;
    }
}

@media (min-width: 1400px) {
    body{
        background-color: #f5f7fc;
    }
    .img-full-hero{
        display: block;
    }
    .hero-relative-0{
        margin-top: 84px;
    }
    .guide-certification-preview{
        height: 200px;
    }
    .guide-box{
        min-height: 400px;
    }
    .course-box-section{
        width: 280px;
        max-height: 0px;
    }
    .img-principle-box{
        display: block;
    }
}