.container {
    margin-top: 60px;
    margin-bottom: 0;
}

p {
    text-align: left;
    text-align: justify;
}

.smalltext {
    margin-top: 10px;
}

.center {
    text-align: center;
}

.reverse {
    flex-direction: row-reverse;
}

.banner {
    display: flex;
    position: relative;
    z-index: 1;
}

.bannerimage {
    width: 30%;
    position: absolute;
    top: 0;
    left: 0;
}

.bannertext {
    margin-top: 170px;
    margin-left: 40%;
}

.bannertext h2 {
    text-align: left;
    margin-bottom: 210px;
}

.intro {
    width: 410px;
}

.infocontainer {
    display: flex;
    flex-direction: column;
    gap: 70px;
    margin: 100px 0;
}

.upper {
    position: relative;
    z-index: 1;
}

.lower {
    position: relative;
    z-index: 1;
}

.info {
    display: flex;
    align-items: center;
    margin: auto;
    width: 85%;
    gap: 60px;
}

.info p {
    margin: 0;
    width: 50%;
}

.imagewithcaption {
    width: 50%;
}

.imagewithcaption p {
    width: 100%;
}

.infoimage {
    width: 100%;
}

.journeytothewest {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.journeytothewest img {
    width: 25%;
    margin: 0;
}

.story {
    margin: auto;
    padding: 100px 0;
    width: 80%;
}

.storycontainer {
    display: flex;
    align-items: center;
    margin: auto;
    width: 100%;
    gap: 60px;
}

.storyimage {
    width: 485px;
}

.storyending {
    display: flex;
    justify-content: space-between;
}

.storyending img {
    width: 50%;
    margin: 0;
}

.bannercloud:nth-child(1) {
    position: absolute;
    transform: scaleX(-1);
    top: 470px;
    right: -10px;
    z-index: -1;
}

.bannercloud:nth-child(2) {
    position: absolute;
    bottom: 510px;
    left: 150px;
    z-index: -1;
}

.bannercloud:nth-child(3) {
    position: absolute;
    bottom: 90px;
    right: -180px;
    z-index: -1;
}

.uppercloud:nth-child(1) {
    position: absolute;
    top: -90px;
    left: -180px;
    z-index: -1;
}

.uppercloud:nth-child(2) {
    position: absolute;
    transform: scaleX(-1);
    bottom: -50px;
    right: -200px;
    z-index: -1;
}

.traditionscloud:nth-child(1) {
    position: absolute;
    transform: scaleX(-1);
    top: -140px;
    right: -250px;
    z-index: -1;
}

.traditionscloud:nth-child(2) {
    position: absolute;
    bottom: 500px;
    left: -360px;
    z-index: -1;
}

.traditionscloud:nth-child(3) {
    position: absolute;
    transform: scaleX(-1);
    bottom: -80px;
    left: -260px;
    z-index: -1;
}

/* Tablet and mobile styles */
@media screen and (max-width: 1080px) {
    .storycontainer {
        gap: 60px;
    }

    .storycontainer p {
        margin: 0;
        width: 50%;
    }

    .storyimage {
        width: 50%;
    }

    .storyimage img {
        width: 100%;
    }

    .storyimage p {
        width: 100%;
    }

    .story {
        padding: 60px 0;
    }

    .bannercloud:nth-child(1) {
        top: 420px;
        right: -10px;
    }

    .bannercloud:nth-child(2) {
        bottom: 510px;
        left: 100px;
    }

    .bannercloud:nth-child(3) {
        bottom: 90px;
        right: -180px;
    }

    .uppercloud:nth-child(1) {
        top: -90px;
        left: -180px;
    }

    .uppercloud:nth-child(2) {
        bottom: -50px;
        right: -200px;
    }

    .traditionscloud:nth-child(1) {
        top: -140px;
        right: -250px;
    }

    .traditionscloud:nth-child(2) {
        bottom: 380px;
        left: -300px;
    }

    .traditionscloud:nth-child(3) {
        bottom: -80px;
        left: -200px;
    }
}

@media screen and (max-width: 900px) {
    .info {
        gap: 40px;
    }

    .storycontainer {
        flex-direction: column;
        width: 100%;
        gap: 20px;
        margin: 20px 0;
    }

    .storycontainer p {
        margin: 0;
        width: 60%;
    }

    .storyimage {
        width: 60%;
    }

    .storyimage img {
        width: 100%;
    }

    .storyimage p {
        width: 100%;
    }

    .bannercloud:nth-child(1) {
        top: 420px;
        right: -200px;
    }

    .bannercloud:nth-child(2) {
        bottom: 600px;
        left: 60px;
    }

    .bannercloud:nth-child(3) {
        bottom: 90px;
        right: -180px;
    }

    .uppercloud:nth-child(1) {
        top: -90px;
        left: -180px;
    }

    .uppercloud:nth-child(2) {
        bottom: -90px;
        right: -200px;
    }

    .traditionscloud:nth-child(1) {
        top: -140px;
        right: -250px;
    }

    .traditionscloud:nth-child(2) {
        bottom: 300px;
        left: -300px;
    }

    .traditionscloud:nth-child(3) {
        bottom: -80px;
        left: -300px;
    }
}

/* Tablet styles */
@media screen and (max-width: 800px) {
    .bannerimage {
        display: none;
    }

    .bannertext {
        margin: auto;
        margin-top: 80px;
        width: 60%;
    }

    .bannertext h2 {
        margin-bottom: 70px;
    }

    .intro {
        width: 100%;
    }

    .peachespainting {
        width: 100%;
    }

    .journeytothewest {
        flex-wrap: wrap;
    }

    .journeytothewest img {
        width: 50%;
    }

    .storycontainer p {
        margin: 0;
        width: 80%;
    }

    .storyimage {
        width: 80%;
    }

    .bannercloud:nth-child(1) {
        top: 200px;
        right: -300px;
    }

    .bannercloud:nth-child(2) {
        bottom: 550px;
        left: -200px;
    }

    .bannercloud:nth-child(3) {
        bottom: 90px;
        right: -180px;
    }

    .uppercloud:nth-child(1) {
        top: -150px;
        left: -380px;
    }

    .uppercloud:nth-child(2) {
        bottom: -120px;
        right: -300px;
    }

    .traditionscloud:nth-child(1) {
        top: -170px;
        right: -350px;
    }

    .traditionscloud:nth-child(2) {
        bottom: 250px;
        left: -430px;
    }

    .traditionscloud:nth-child(3) {
        bottom: -100px;
        left: -450px;
    }
}


/* Mobile styles */
@media screen and (max-width: 600px) {
    .bannertext {
        margin: auto;
        margin-top: 80px;
        width: 80%;
    }

    .info {
        flex-direction: column-reverse;
        gap: 20px;
        width: 80%;
    }

    .info p {
        width: 100%;
    }

    .imagewithcaption {
        width: 100%;
    }

    .story {
        padding: 30px 0 60px 0;
    }

    .storycontainer p {
        margin: 0;
        width: 100%;
    }

    .storyimage {
        width: 100%;
    }

    .storyending {
        flex-direction: column;
    }

    .storyending img {
        width: 100%;
    }

    .bannercloud:nth-child(1) {
        top: 200px;
        right: -200px;
    }

    .bannercloud:nth-child(2) {
        bottom: 450px;
        left: -180px;
    }

    .bannercloud:nth-child(3) {
        bottom: 190px;
        right: -120px;
    }

    .uppercloud:nth-child(1) {
        top: -150px;
        left: -200px;
    }

    .uppercloud:nth-child(2) {
        bottom: -90px;
        right: -200px;
    }

    .traditionscloud:nth-child(1) {
        top: -140px;
        right: -200px;
    }

    .traditionscloud:nth-child(2) {
        bottom: 485px;
        left: -200px;
    }

    .traditionscloud:nth-child(3) {
        bottom: -120px;
        left: -280px;
    }
}

@media screen and (max-width: 390px) {
    .chinesetext {
        width: 100%;
    }
}