:root {
    /* colors */
    --dark-blue: rgba(27, 145, 213, 1);
    --cyan: rgba(141, 206, 212, 1);
    --light-blue: rgba(212, 243, 248, 1);
    --pink: rgba(255, 164, 202, 1);
    --sand: rgba(248, 225, 175, 1);

    /* spacing */
    /* 8px */
    --space-1: .5rem;
    /* 12px */
    --space-2: .75rem;
    /* 16px */
    --space-3: 1rem;
    /* 18px */
    --space-4: 1.125rem;
    /* 24px */
    --space-5: 1.5rem;
    /* 32px */
    --space-6: 2rem;
    /* 48px */
    --space-7: 3rem;
    /* 56px */
    --space-8: 3.5rem;
    /* 80px */
    --space-9: 5rem;

    /* font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* font sizes */
    /* 12px */
    --font-size-xx-small: 0.75rem;
    /* 14px */
    --font-size-x-small: 0.875rem;
    /* 16px */
    --font-size-small: 1rem;
    /* 18px */
    --font-size-normal: 1.125rem;
    /* 26px */
    --font-size-large: 1.625rem;
    /* 32px */
    --font-size-x-large: 2rem;
    /*40px*/
    --font-size-x-x-large: 2.5rem;
    /* 48px */
    --font-size-xx-large: 3rem;
    /*56*/
    --font-size-xxx-large: 3.5rem;
    /*75*/
    --font-size-xxx-x-large: 4.6875rem;
    /*98*/
    --font-size-xxxx-large: 6.125rem;
    /*font family*/
    --font-family-main: 'Sarabun', serif;
    --font-family-title: 'SignPainter';
    --font-family-secondary: 'Arima Madurai', serif;


}


/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

/*PAGE 1*/
.body-1 {
    background: linear-gradient(180deg, #1B91D5 50%, #8DCED4 79.4%);
}

.header-1 {
    background-image: url(../assets/background/hero-image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.hero-title {
    margin-top: 4.8125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

.hero-title__1 {
    color: var(--dark-blue);
    font-size: var(--font-size-xxx-large);
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-light);
}

.hero-title__2 {
    color: var(--dark-blue);
    font-size: var(--font-size-large);
    text-align: center;
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-light);
    padding-top: var(--space-3);
}

.hero-title__3 {
    color: var(--pink);
    font-size: var(--font-size-xxxx-large);
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-normal);
    padding-top: var(--space-3);
}

.nav-list {
    display: flex;
    padding: var(--space-8);
}

.nav-list li {
    padding-right: var(--space-9);
}

.nav-list a {
    text-decoration: none;
    color: var(--dark-blue);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-large);
}

.nav-list a:hover {
    text-decoration: none;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
}

.button-primary {
    border-radius: var(--space-6);
    padding: 1rem;
    border: 1px solid;
}

.button-primary:hover {
    background-color: var(--dark-blue);
    color: white;
}

.content-main {
    background-image: url(../assets/bubble/bubbles-content.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1500px;
    width: auto;
    z-index: 1;
    margin-top: -15rem;
    padding-top: 30rem;
}

.content-main h2 {
    padding-left: 7.5625rem;
    color: var(--sand);
    font-family: var(--font-family-title);
    font-size: var(--font-size-xxx-x-large);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.content-main p {
    padding-left: 7.5625rem;
    width: 36.5625rem;
    color: #FFF;
    font-family: Sarabun;
    font-size: var(--font-size-normal);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.content-main strong {
    color: var(--sand);
    font-weight: var(--font-weight-bold);
}

.button-secondary {
    display: flex;
    justify-content: center
}

.button-secondary:hover {
    filter: drop-shadow(2px 16px 16.2px rgba(255, 255, 255, 0.25));
}

.reviews h2 {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-5);
    font-family: var(--font-family-title);
    color: var(--sand);
    font-size: var(--font-size-xxxx-large);
}

.reviews h3 {
    font-family: var(--font-family-title);
    font-size: var(--font-size-x-x-large);
    color: var(--pink);
    margin-bottom: var(--space-9);
}

.reviews p {
    color: var(--dark-blue);
    text-align: center;
    font-family: var(--font-family-main);
    font-size: var(--font-size-normal);
    line-height: normal;
}

.reviews-cards {
    display: flex;
    justify-content: space-around;

}

.reviews-card {
    padding: 1rem;
    width: 23.1875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 23.1875rem;
    height: 27.1875rem;
    border-radius: 50px;
    background: var(--light-blue);
    margin-bottom: var(--space-9);
    box-shadow: -25px -42px 50px 0px rgba(249, 207, 255, 0.50) inset, 15px 24px 62.9px 0px #FFF inset, -17px 28px 65.7px 0px rgba(255, 205, 97, 0.23) inset;
}

.footer {
    display: flex;
    height: 15rem;
    background: var(--sand);
    justify-content: space-around;
}

.footer-newsletter h4 {
    margin-top: var(--space-6);
    color: var(--dark-blue);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
}

.footer-newsletter p {
    margin-top: var(--space-6);
    color: var(--dark-blue);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
}

.form {
    display: flex;
    margin-top: var(--space-5);
    align-items: center;
}

::placeholder {
    color: var(--sand);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-small);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: normal;
}

.form-input {
    display: flex;
    width: 18.75rem;
    max-width: 18.75rem;
    align-items: center;
    border: none;
    background-color: var(--dark-blue);
    padding: var(--space-3);
}

.form-button {
    display: flex;
    font-family: var(--font-family-secondary);
    padding: var(--space-2) var(--space-5);
    justify-content: center;
    align-items: center;
    background: var(--sand);
    color: var(--dark-blue);
    border: var(--dark-blue) solid .0625rem;

}

.form-button:hover {
    background: var(--pink);
    color: var(--sand);
}

.footer-contact h4 {
    margin-top: var(--space-6);
    color: var(--dark-blue);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-normal);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: normal;
}

.footer-contact p {
    margin-top: var(--space-5);
}

.footer-contact a {
    margin-top: var(--space-5);
    color: var(--dark-blue);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-small);
    text-decoration: none;
}

.footer-follow h4 {
    margin-top: var(--space-6);
    color: var(--dark-blue);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-normal);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: normal;
}

.footer-follow ul {
    margin-top: var(--space-5);
}

.footer-follow a {
    color: var(--dark-blue);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-small);
    text-decoration: none;
}

.footer-follow a:hover {
    color: var(--pink);
}

.footer-address h4 {
    margin-top: var(--space-6);
    color: var(--dark-blue);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-normal);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: normal;
}

.footer-address p {
    margin-top: var(--space-6);
    color: var(--dark-blue);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-small);
    text-decoration: none;
}


/*PAGE 2*/
.body-2 {
    background: linear-gradient(180deg, #8DCED4 90%, #FFA4CA 95%);
}

.header-2 {
    background-image: url(../assets/background/tips.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.fold-title {
    margin-top: var(--space-9);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

.fold-title__1 {
    color: var(--dark-blue);
    font-size: var(--font-size-xxx-large);
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-light);
    text-align: center;
}

.fold-title__2 {
    color: var(--dark-blue);
    font-size: var(--font-size-large);
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-light);
    padding-top: var(--space-3);
}

.fold-title__3 {
    color: var(--pink);
    font-size: var(--font-size-xxxx-large);
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-normal);
    padding-top: var(--space-3);
    padding-bottom: 50rem;
}

.tip-1 {
    background-image: url(../assets/background/1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: auto;
    height: 1330px;
}

.tip-1__border {
    border-radius: var(--space-7);
    background: var(--light-blue);
    width: 41.875rem;
    height: 17.1875rem;
    padding-top: var(--space-6);
    box-shadow: 0px 4px 40px 0px var(--light-blue), -25px -42px 50px 0px rgba(249, 207, 255, 0.40) inset, 15px 24px 62.9px 0px #FFF inset, -17px 28px 65.7px 0px rgba(255, 205, 97, 0.40) inset;
}

.tip-1__illustration {
    width: 539px;
    height: 539px;
    margin-left: 6.8125rem;
}


.tip-1__title {
    display: flex;
    justify-content: center;
    padding-top: 20rem;
}

.tip-1__title img {
    z-index: 3;
}

.tip-1__flex {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -18rem;
}

.tip-1 h2 {
    font-family: var(--font-family-title);
    font-size: var(--font-size-xxx-x-large);
    color: var(--pink);
    padding-left: var(--space-6);
}

.tip-1 p {
    font-family: var(--font-family-main);
    font-size: var(--font-size-normal);
    color: var(--dark-blue);
    padding-left: var(--space-6);
    padding-top: var(--space-4);
    padding-right: var(--space-6);
    line-height: 137%;
}

.tip-1 strong {
    color: var(--pink);
    font-weight: var(--font-weight-bold);
}

.tip-23 {
    background-image: url(../assets/background/2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: auto;
    height: 1700px;
}

.tip-2__flex {
    display: flex;
    align-items: center;
    margin-top: -25rem;
}

.tip-2 h2 {
    font-family: var(--font-family-title);
    font-size: var(--font-size-xxx-x-large);
    color: var(--pink);
    padding-left: 20rem;

}

.tip-2 p {
    font-family: var(--font-family-main);
    font-size: var(--font-size-normal);
    color: var(--dark-blue);
    padding-left: var(--space-6);
    padding-top: var(--space-4);
    padding-right: var(--space-6);
    line-height: 137%;
}

.tip-2 strong {
    color: var(--pink);
    font-weight: var(--font-weight-bold);
}

.tip-2__border {
    padding-top: var(--space-6);
    margin-left: 15rem;
    margin-right: 7rem;
    border-radius: var(--space-6);
    background: var(--light-blue);
    width: 41.875rem;
    height: 17.1875rem;
    box-shadow: 0px 4px 40px 0px var(--light-blue), -25px -42px 50px 0px rgba(249, 207, 255, 0.40) inset, 15px 24px 62.9px 0px #FFF inset, -17px 28px 65.7px 0px rgba(255, 205, 97, 0.40) inset;

}

.tip-2__title {
    display: flex;
    justify-content: center;
}

.tip-2__title img {
    z-index: 3;
}

.tip-3 {
    margin: -5rem 0 0 18rem;
}

.tip-3 h2 {
    font-family: var(--font-family-title);
    font-size: var(--font-size-xxxx-large);
    color: var(--dark-blue);
    padding-left: var(--space-6);
}

.tip-3 p {
    font-family: var(--font-family-main);
    font-size: var(--font-size-normal);
    color: var(--dark-blue);
    padding-left: var(--space-6);
    padding-top: var(--space-6);
    padding-right: var(--space-6);
    line-height: 137%;
}

.tip-3 strong {
    color: var(--pink);
    font-weight: var(--font-weight-bold);
}

.tip-3__border {
    padding-top: var(--space-6);
    width: 59.4375rem;
    height: 32.75rem;
    border-radius: 50px;
    background: var(--light-blue);
    box-shadow: 0px 4px 40px 0px var(--dark-blue), -25px -42px 50px 0px rgba(249, 207, 255, 0.40) inset, 15px 24px 62.9px 0px #FFF inset, -17px 28px 65.7px 0px rgba(255, 205, 97, 0.40) inset;
    margin-top: -10rem;
}

.tip-3__title {
    margin-left: 50rem;
}

.tip-3__title img {
    z-index: 3;

}

.tip-3__illustration {
    margin: -20rem 0 0 25rem;
}

.tip-3__illustration img {
    z-index: 3;
}

.quiz-button p {
    font-size: var(--font-size-large);
    color: var(--dark-blue);
    margin-left: 2rem;
    margin-top: 2rem;
    text-align: center;
    font-weight: var(--font-weight-bold);
    border-radius: 15px;
    border: 2px solid var(--dark-blue);
    background: var(--pink);
    width: 210px;
    height: 78px;
    padding-bottom: 4rem;
}

.quiz-button p:hover {
    border-radius: 15px;
    border: 2px solid var(--pink);
    background: var(--sand);
}

.tip-section {
    display: flex;
    justify-content: space-around;
    padding-bottom: var(--space-9);
    width: 90rem;
    gap: 1rem;
}

.tip-4 {
    width: 50%;
    margin-left: 10rem;
}

.tip-4__title {
    margin-left: -5rem;
}

.tip-4__title img {
    z-index: 3;
}

.tip-4__border {
    padding-top: var(--space-6);
    border-radius: 3.125rem;
    background: var(--light-blue);
    width: 33.625rem;
    height: 35rem;
    box-shadow: 0px 4px 40px 0px var(--light-blue), -25px -42px 50px 0px rgba(249, 207, 255, 0.40) inset, 15px 24px 62.9px 0px #FFF inset, -17px 28px 65.7px 0px rgba(255, 205, 97, 0.40) inset;
    margin-top: -5rem;
}

.tip-4 h3 {
    font-family: var(--font-family-title);
    font-size: var(--font-size-xxx-x-large);
    color: var(--pink);
    text-align: end;
    padding-right: var(--space-6);
}

.tip-4 p {
    font-family: var(--font-family-main);
    font-size: var(--font-size-normal);
    color: var(--dark-blue);
    text-align: center;
    width: 421px;
    padding-left: var(--space-9);
    padding-top: var(--space-6);
    line-height: 137%;
}

.tip-4 strong {
    color: var(--pink);
    font-weight: var(--font-weight-bold);
}

.tip-4__illustration {
    display: block;
    margin-top: -2rem;
    margin-left: auto;
    margin-right: auto;
}

.tip-5 {

    width: 50%;
}

.tip-5__title {
    margin-left: 25rem;
}

.tip-5__title img {
    z-index: 3;
}

.tip-5__border {

    border-radius: 3.125rem;
    background: var(--light-blue);
    width: 33.625rem;
    height: 35rem;
    box-shadow: 0px 4px 40px 0px var(--light-blue), -25px -42px 50px 0px rgba(249, 207, 255, 0.40) inset, 15px 24px 62.9px 0px #FFF inset, -17px 28px 65.7px 0px rgba(255, 205, 97, 0.40) inset;
    margin-top: -5rem;
}

.tip-5 h3 {
    font-family: var(--font-family-title);
    font-size: var(--font-size-xxx-x-large);
    color: var(--pink);
    padding-top: var(--space-6);
    padding-left: var(--space-6);
}

.tip-5 p {
    font-family: var(--font-family-main);
    font-size: var(--font-size-normal);
    color: var(--dark-blue);
    padding-left: var(--space-9);
    padding-top: var(--space-6);
    padding-right: var(--space-9);
    text-align: center;
    line-height: 137%;
}

.tip-5 strong {
    color: var(--pink);
    font-weight: var(--font-weight-bold);
}

.tip-5__illustration {
    transform: scaleX(-1);
    margin: 0 0 -2rem -2rem;
    margin-top: -1rem;
}