@media screen and (min-width: 375px) {
    .challenge .p1:after, .challenge .p2:after,
    .challenge .p3:after, .challenge .p4:after,
    .challenge .p5:after, .challenge .p6:after,
    .challenge .p7:after, .challenge .p8:after{
        width: 50px;
        height: 50px;
        z-index: -1;
    }

    .challenge .point{
        display: block;
        font-size: 6px;
        z-index: 11;
    }
}

@media screen and (min-width: 414px) {
    .challenge .p1:after, .challenge .p2:after,
    .challenge .p3:after, .challenge .p4:after,
    .challenge .p5:after, .challenge .p6:after,
    .challenge .p7:after, .challenge .p8:after{
        width: 55px;
        height: 55px;
    }
}

@media screen and (min-width: 576px) {
    .main-slide-content{
        min-height: 300px;
    }

    .challenge .p1:after, .challenge .p2:after,
    .challenge .p3:after, .challenge .p4:after,
    .challenge .p5:after, .challenge .p6:after,
    .challenge .p7:after, .challenge .p8:after{
        width: 80px;
        height: 80px;
    }

    .challenge .point{
        font-size: 9px;
        width: 80px;
    }

    .challenge .p7:after{
        transform: translate(-90%, -50%);
    }

    .challenge .p3:after{
        transform: translate(-10%, -50%);
    }

    .channel-logo{
        object-fit: contain;
        width: 100%;
        height: 80px;
    }

    .section-title,.challenge-title{
        font-size: 20px;
    }

    .award-wrapper{
        margin-top: -8rem;
    }

    .service-wrapper{
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    html,body{
        font-size: 14px;
    }

    .sized-box{
        padding: 48px 0;
    }

    .main-slide-content{
        min-height: 350px;
    }

    .challenge .p1:after, .challenge .p2:after,
    .challenge .p3:after, .challenge .p4:after,
    .challenge .p5:after, .challenge .p6:after,
    .challenge .p7:after, .challenge .p8:after{
        width: 100px;
        height: 100px;
    }

    .section-title,.challenge-title{
        font-size: 22px;
    }

    .challenge .point{
        font-size: 12px;
        width: 120px;
    }

    .challenge-wrapper{
        margin-top: 4rem;
        margin-bottom: 2rem;
    }

    .gradient-title h3{
        font-size: 20px;
    }

    .challenge .p1:after, .challenge .p2:after,
    .challenge .p3:after, .challenge .p4:after,
    .challenge .p5:after, .challenge .p6:after,
    .challenge .p7:after, .challenge .p8:after{
        width: 120px;
        height: 120px;
    }

    .story-avatar{
        max-width: 110px;
    }

    .story-title, .story-pos{
        margin-left: 30%;
    }

    .story-title{
        font-size: 16px;
    }

    .story-pos{
        font-size: 12px;
    }

    .story-desc{
        font-size: 12px;
    }

    .story-icon {
        bottom: 0%;
        max-width: 50px;
    }

    .service-wrapper{
        width: 95%;
    }

    .service-title{
        font-size: 18px;
    }

    .service-point{
        font-size: 14px;
    }

    .award-title{
        font-size: 16px;
    }

    .award-wrapper{
        margin-top: -12rem;
    }

    .last-md-left{
        text-align-last: left;
    }

    .brp-list{
        padding-left: 12px;
    }

    .brp-list li{
        margin-bottom: 8px;
    }
}

@media screen and (min-width: 992px) {
    .main-slide-content{
        min-height: 350px;
    }

    .challenge-wrapper{
        width: 80%;
    }

    .challenge .point{
        font-size: 14px;
    }

    .hideOnMobile{
        display: block;
    }

    .showOnMobile{
        display: none;
    }

    .gos-navbar{
        justify-content: start;
    }

    .gos-menu ul li{
        padding: 1rem;
    }

    .gos-menu .dropdown{
        position: absolute;
        top: 100%;

        background: var(--cl-white);
        z-index: 11;
        min-width: 350px;

        border-radius: 10px;

        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);

        display: none;
    }

    .gos-menu a{
        text-decoration: unset;

        background-image: var(--bg-gradient-horizon);
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;

        transition: ease 0.3s all;
    }

    .gos-menu a:after{
        content: " ";
        height: 2px;
        width: 0;
        background: var(--bg-gradient-horizon);
        display: block;
        transition: ease 0.3s all;
    }

    .gos-menu a:hover{
        background-image: var(--bg-gradient-horizon);
        transition: ease 0.3s all;
    }

    .gos-menu a:hover::after{
        width: 100%;
        transition: ease 0.3s all;
    }

    .w-\[btn-mobile\]{
        width: 150px;
    }

    .last-left{
        text-align-last: start!important;
    }

    .story-title, .story-pos{
        margin-left: 22%;
    }

    .story-title{
        font-size: 18px;
    }

    .story-pos{
        font-size: 14px;
    }

    .story-desc{
        font-size: 14px;
    }

    .story-icon {
        bottom: 2%;
        max-width: 60px;
    }

    .service-wrapper{
        width: 100%;
    }

    .award-title{
        font-size: 18px;
    }

    .brp-list{
        display: flex;
        flex-wrap: wrap;
    }

    .brp-list li{
        width: 45%;
    }

    .brp-list li:nth-child(even){
        margin-left: 2rem;
    }

    .slide-icon{
        max-width: 80px;
        margin-right: 1rem;
    }
}

@media screen and (min-width: 1024px) {

}

@media screen and (min-width: 1200px) {
    html,body{
        font-size: 16px;
    }

    .main-slide-content{
        min-height: 400px;
    }

    .section-title, .challenge-title{
        font-size: 26px;
    }

    .gradient-title h3{
        font-size: 22px;
    }

    .challenge .p1:after, .challenge .p2:after,
    .challenge .p3:after, .challenge .p4:after,
    .challenge .p5:after, .challenge .p6:after,
    .challenge .p7:after, .challenge .p8:after{
        width: 140px;
        height: 140px;
    }

    .challenge .point{
        font-size: 16px;
        width: 140px;
    }

    .story-avatar{
        max-width: 130px;
        top: -3rem;
        left: -3rem;
    }

    .story-title, .story-pos{
        margin-left: 22%;
    }

    .story-title{
        font-size: 20px;
    }

    .story-pos{
        font-size: 16px;
    }

    .story-desc{
        font-size: 16px;
    }

    .story-icon {
        bottom: -2%;
        max-width: 80px;
    }

    .award-wrapper{
        width: 80%;
        margin-top: -14rem;
        margin-left: auto;
        margin-right: auto;
    }

    .service-title{
        font-size: 20px;
    }

    .service-point{
        font-size: 16px;
    }

    .award-wrapper{
        margin-top: -16rem;
    }

    .award-title{
        font-size: 20px;
    }

    .slide-icon{
        max-width: 120px;
    }
}

@media screen and (min-width: 1400px) {
    .challenge-wrapper{
        width: 70%;
    }

    .w-\[90\]{
        width: 80%;
    }

    .main-slide-content{
        min-height: 450px;
    }

    .story-wrapper{
        width: 80%;
    }

    .service-wrapper{
        width: 90%;
    }
}