.page {
    position: relative;
    width: 100%;
    margin-top: 12vh;
}

.lightText { color: white; }

.bigP {
    font-size: 1.8vw;
    line-height: 2.3vw;
}

/*title*/
.resTitle {
    position: relative;
    text-align: center;
    font-size: 4vw;
    font-weight: 900;
    margin-bottom: 2vw;
}

.resIntro {
    width: 70%;
    margin: 0 auto 4vw;
    text-align: center;
    font-weight: 600;
}

/*paper secction for context*/
.paperBox{
    position: relative;
    width: 100%;
    margin-bottom: 10vw;
}

.paperImage{
    position: relative;
    width: 59%;
    left: 33%;
    transform: translateX(-50%);
    display: block;
}
/*text on the left side*/
.paperT{
    position: absolute;
    width: 45%;
    left: 35%;
    top: 10%;
    transform: translateX(-50%);
    color: #462411;
}

/*different size of the content text*/
.paperti {
    font-size: 2.5vw;
    font-weight: 900;
    margin-bottom: 1vw;
}

.paperSub {
    font-size: 2vw;
    font-weight: 900;
    margin-bottom: 2vw;
}

.paperMain {
    font-size: 1.8vw;
    line-height: 3vw;
    margin-bottom: 2.5vw;
}

.paperC {
    position: absolute;
    top: 0%;
    left: 103%;
    width: 80%;
    min-height: 30vw;
}

/*this is for the blue card in the first section and the text on it*/
.wellness-rightCard {
    width: 100%;
    position: relative;
    margin-bottom: 3vw;
}

.wellness-rightCard .rightC-bg { width: 100%; }

.wellness-rightCard .rightC-text {
    position: absolute;
    width: 80%;
    top: 13%;
    left: 54%;
    transform: translateX(-50%);
}

.rightTi {
    font-size: 1.8vw;
    font-weight: 900;
    margin-bottom: 1vw;
}

.rightC-text ol {
    font-size: 1.4vw;
    line-height: 2.3vw;
    margin-left: 1.2vw;
}

/* image on the right*/
.wellness-imageBox {
    width: 100%;
    position: relative;
}

.wellness-img {
    width: 100%;
    border-radius: 10px;
}

/*I directly copied the settings for the tips block from the residential CSS file 
and adjusted some values (so the naming looks odd—that's because it originally retained the previous CSS's name)*/
.resShop{
    position: relative;
    width: 66%;
    margin:-6vw auto 3vw;
    padding:5vw 7vw;
    background-color: #462411;

    border-top: 6px solid #462411;
    border-bottom: 6px solid #462411;
    text-align: center;
    border-radius: 10px;
    z-index:-1;
}

.resShopTi {
    font-size: 2.5vw;
    font-weight: 900;
    margin-bottom: 2vw;
}

.resShop .bigP{
    position: relative;
    left: -3vw;
    width: 110%;
    margin:0 auto;
}


/*The second part of the information*/
/*Its layout is a mirror-symmetric counterpart to part1's layout, 
so I directly reused the previous naming convention and appended the number 2 to distinguish it.*/
.paperBox2{
    position: relative;
    width: 100%;
    margin-bottom: 10vw;
}
.paperImage2{
    position: relative;
    width:59%;
    left: 66%;
    transform: translateX(-50%);
    display: block;
}
.paperT2{
    position:absolute;
    width: 45%;
    left: 66%;
    top: 10%;
    transform: translateX(-50%);
    color: #462411;
}

.paperC2{
    position: absolute;
    top: 0%;
    right: 110%;
    width: 80%;
    min-height: 30vw;
}
.wellness-leftCard{
    position: relative;
    width: 100%;
    margin-bottom: 3vw;
}
.wellness-leftCard .leftC-bg{
    width: 100%;
}
.wellness-leftCard .leftC-text{
    position: absolute;
    width: 80%;
    top: 13%;
    left: 46%;
    transform: translateX(-50%);
}
.leftTi {
    font-size: 1.8vw;
    font-weight: 900;
    margin-bottom: 1vw;
}

.leftC-text ol {
    font-size: 1.4vw;
    line-height: 2.3vw;
    margin-left: 1vw;
}