/*hero*/
.img-extend {
    background-image: url(../image/day5/day5-bg.jpg);
}

/*extend section*/


.two-imgs {
    display: flex;
    justify-content: center;
    gap: 200px;
}

.day5imgs img {
    width: 100%;
    border-radius: 12px;
}

.day5imgs a {
    padding: 0;
}

.imgs-info h4 {
    margin: 0;
    padding: 10px 0;
}

.imgs-info p {
    color: #ABABAB;
    margin: 0;
    padding-top: 0;
    padding-left: 0;
}

.slogan {
    padding: 100px 100px 50px 100px;
    text-align: center;
    max-width: 1440px;
    margin: auto;
}

/*hin bus*/
.depot {
    margin: auto;
    max-width: 1440px;
    display: flex;
    align-items: center;
}

.round-img-mb {
    display: none;
}

.rect-text-right {
    padding: 150px 50px 150px 0 !important;
}

.rect-text-right h2 {
    color: #FDE2CF;
    margin: 0;
    padding-bottom: 0;
}

.place-info {
    padding-top: 20px;
}

.round-img {
    width: 40%;
}

.round-img img {
    width: 100%;
    border-radius: 12px;
}

/*nasi*/
.text span {
    font-size: 32px;
}

.side-extend {

    background-color: #FDE2CF;
}

.nasi {
    margin: auto;
    max-width: 1440px;
    padding: 150px 0 50px 0;
}

.day-text {
    padding: 50px;
}


.flex-content-right {
    padding: 100px 50px;
}

.day1-img-mb {
    display: none;
}

.deco-box {
    background-color: #F8A720;
    margin: 0 50px 0 0;
    width: 70%;
}

#final-slogan {
    padding: 30px 0 50px 0;
}

.see-more-row {
    padding: 50px;
}


@media screen and (max-width: 1250px) {

    .slogan {
        padding: 100px 50px 50px 50px;
    }

    .rect-text-right {
        padding: 100px 50px 100px 0 !important;
    }

    .nasi {
        padding: 100px 0;
    }
}

@media screen and (max-width: 1185px) {
    .two-imgs {
        gap: 50px;
    }

    .deco-box {
        margin-right: 20px;
    }

    .info-beige-box {
        margin-top: 0 !important;
    }

    .see-more {
        padding: 0 30px 100px 30px;
    }
}

@media screen and (max-width: 1000px) {
    .rect-text-right {
        padding: 50px 50px 50px 0 !important;
    }

    .nasi {
        padding: 50px 0;
    }

    #nasi-lemak {
        padding-top: 0 !important;
    }

    .info-yellow-box {
        margin-top: 0;
    }

    .flex-content-right {
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 950px) {
    .slogan {
        padding: 50px 0 30px 0;
    }

    .rect-text-right {
        width: calc(100% - 15%);
    }

    .imgs-info h4 {
        padding-top: 20px;
    }

    .info-bgebox-mobile {
        margin-top: 0 !important;
    }

    .place-info {
        padding-top: 0;
    }

}

@media screen and (max-width: 850px) {

    .depot {
        flex-direction: column;
    }

    .round-img {
        display: none;
    }

    .round-img-mb {
        display: block;
        padding-bottom: 50px;
    }

    .round-img-mb img {
        width: 100%;
        border-radius: 12px;
    }

    .rect-text-right {
        padding: 30px 0 !important;
        width: 100%;
    }

    .nasi {
        padding: 50px 0 30px 0 !important;
    }

    .deco-box {
        width: 100%;
        margin-right: 30px;
    }

    .see-more a {
        padding: 0 !important;
    }

}

@media screen and (max-width: 800px) {
    .hero-text {
        padding: 100px 0;
    }

    .slogan h4 {
        margin: 0 !important;
    }

    .imgs-info h4 {
        padding-top: 10px;
    }

    .day1-img {
        display: none;
    }

    .day1-img-mb {
        display: block;
    }

    .day1-img-mb img {
        border-radius: 12px;
        width: 100%;
    }

    .flex-content-right {
        width: calc(100% -100px) !important;
    }

    .nasi {
        padding: 100px 0 !important;
    }

    .day-text {
        padding: 30px 50px;
    }

    #nasi-lemak {
        justify-content: center;
        width: calc(100% - 100px);
    }

    .deco-box {
        margin: 20px 0;
        width: 100%;
    }

    .see-more-row {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 640px) {
    .hero-text {
        padding: 50px 0;
    }
}

@media screen and (max-width: 600px) {
    .hero-text {
        padding: 100px 0;
    }

    .title {
        padding-top: 30px;
    }

    .title h2 {
        margin-top: 0;
        padding-top: 0;
    }

    .two-imgs {
        gap: 30px;
        width: 100%;
    }

    .imgs-info p {
        padding: 0 !important;
    }

    .day1-img-mb {
        padding: 10px 0 20px 0;
    }

    .rect-text-right h2 {
        padding: 0 !important;
    }

    .rect-text-right p {
        padding: 20px 0 !important;
        margin: 0;
    }

    .place-info {
        margin: 0 !important;
    }

    .round-img-mb {
        padding-bottom: 50px;
    }

    .text h2 {
        margin-top: 0 !important;
    }

    .nasi {
        flex-direction: column;
        padding-bottom: 50px !important;
    }

    .text span {
        font-size: 20px;
    }

    .deco-box {
        width: 100%;
    }

    .day-text {
        padding: 30px 20px;
    }

    .flex-content-right {
        padding: 0 20px;
        width: calc(100% - 40px) !important;
    }

    #final-slogan {
        padding-bottom: 20px;
    }

    .see-more-row {
        padding: 50px 0 0 20px;
    }
}