/* css reset */

*, 
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* css responsive */

html {
    font-size: 62.5%;
}

@media (max-width: 1280px) {

    html {
        font-size: 50%;
    }
}

@media (max-width: 980px) {
    html {
        font-size: 40%;
    }
}

@media (max-width: 760px) {
    html {
        font-size: 35%;
    }

    .mobile {
        display: none;
    }

    .mob-img {
        width: 35rem;
        height: auto;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 32.5%;
    }

    .mob-img {
        width: 30rem;
        height: auto;
    }
}

/* css basic */

body {
    color: #fff;
    background-color: #041b2d; 
    background-image: linear-gradient(180deg, rgba(29, 40, 57, 0.65), rgba(29, 40, 57, 0.65)), url("canadian_forest.jpg");
    background-attachment: fixed;
    font-family: "Bona Nova SC", sans-serif;
    font-weight: 300;
}

h1 {
    font-size: 7rem;
    font-weight: 400;
    font-family: "Baskervville SC", sans-serif;
    text-align: center;
}

h2, h3 {
    font-size: 3rem;
    font-weight: 300;
    font-family: "Baskervville SC", sans-serif;
}

ul {
    list-style: none;
}

a {
    color: #fff;
    text-decoration: none;
}

/* css header */

.navigation-bar {
    display: flex;
    width: 100%;
    background: #041b2d;
    position: fixed;
}

.navigation-bar > ul {
    display: flex;
    margin-right: 5rem;
}

.navigation-bar > ul > li > a {
    display: block;
    padding: 2.5rem;
    font-size: 1.8rem;
}

.navigation-bar > ul > li> a:hover {
    background: #1d293a;
}

.mobile > p {
    display: block;
    padding: 2rem;
    font-size: 2.2rem;
    font-family: "Baskervville SC", sans-serif;
    margin-right: 2rem;
}

@media (max-width: 760px) {
    .navigation-bar {
        justify-content: center;
    }

    .navigation-bar > ul {
        margin-right: 0;
    }

    .navigation-bar > ul > li > a {
        font-size: 3.25rem;
    }
}

@media (max-width: 480px) {
    .navigation-bar {
        position: relative;
    }

    .navigation-bar > ul > li > a {
        font-size: 4.2rem;
    }
}

.heading {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.heading > p {
    font-size: 2.5rem;
    font-weight: 300;
    font-family: "Baskervville SC", sans-serif;
    font-style: italic;
}

/* css main */

.about {
    display: flex; 
    flex-direction: row;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(180deg, rgba(4, 27, 45, 0.9), rgba(4, 27, 45, 0.9));
    justify-content: center;
    align-items: center;
}

.about > div {
    margin: 3.5rem;
}

.about-image {
    border: solid black;
}

.about-statement > h2 {
    margin-bottom: 2rem;
}

.about-statement > p {
    margin: 3rem;
    font-size: 2rem;
    line-height: 4.2rem;
}

@media (max-width: 760px) {
    .about {
        flex-direction: column;
        height: 115vh;
    }

    .about-statement {
        text-align: center;
    }

    .about-statement > p {
        font-size: 2rem;
    }
}

.about-statement > a {
    margin: 3rem;
}

.book-button {
    padding: 2rem;
    font-size: 2rem;
    background: #6694e0;
    border-radius: 3.25%;
}

.book-button:hover {
    background: #95c0ff;
}

.profile {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.education {
    margin: 5rem 10rem;
}

.education > h3 {
    margin-bottom: 2rem;
}

.education > p {
    font-size: 2rem;
    line-height: 3.8rem;
}

.fees {
    margin: 0 15rem;
    padding: 2rem;
    background-image: linear-gradient(180deg, rgba(9, 39, 61, 0.9), rgba(9, 39, 61, 0.9));
    border: black solid;
    border-radius: 3.25%;
}

.fees > h3 {
    margin-bottom: 2rem;
}

.fees > p {
    font-size: 2rem;
    line-height: 3.8rem;
}

@media (max-width: 480px) {
    .profile {
        height: 115vh;
    }

    .education {
        margin: 0 5rem 5rem 5rem;
    }

    .education > p {
        font-size: 2.4rem;
    }

    .fees {
        margin: 5rem 3rem 0 3rem;
    }

    .fees > p {
        font-size: 2.4rem;
    }
}

.style {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(180deg, rgba(4, 27, 45, 0.9), rgba(4, 27, 45, 0.9));
    justify-content: center;
    align-items: center; 
}

.style-statement {
    margin: 10rem;
    font-size: 2.2rem;
    line-height: 4.2rem;
}

.style-statement > a {
    margin: 0rem;
}

.style-image {
    margin: 10rem;
}

@media (max-width: 760px) {
    .style {
        flex-direction: column;
    }
    
    .style-statement {
        margin: 6rem;
        font-size: 3rem;
    }

    .style-image {
        margin: 5rem 0 ;
    }
}

.therapy {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh;
    justify-content: space-evenly;
}

.specialties-list {
    margin: 8rem 3rem 8rem 8rem;
    font-size: 1.8rem;
    line-height: 3rem;
}

.specialties-list > h3 {
    margin-bottom: 2rem;
    text-decoration: underline;
}

.specialties-list > ul > li {
    list-style: disc;
}

.therapy-list {
    margin: 8rem 5rem;
    font-size: 1.8rem;
    line-height: 3rem;
    white-space: nowrap;
}

.therapy-list > h3 {
    margin-bottom: 2rem;
    text-decoration: underline;
}

.therapy-list > ul > li {
    list-style: disc;
}

@media (max-width: 760px) {
    .therapy {
        justify-content: center;
    }
 
    .specialties-list {
        margin: 30rem 0 0 15rem;
        font-size: 3rem;
        line-height: 3.5rem;
    }

    .specialties-list > h3 {
        font-size: 5rem;
    }

    .therapy-list {
        margin: 30rem 0 0 15rem;
        font-size: 3rem;
        line-height: 3.5rem;
    }

    .therapy-list > h3 {
        font-size: 5rem;
    }

 }

 @media (max-width: 480px) {
    .therapy {
        flex-direction: column;
        height: 120vh;
        text-align: center;
    }

    .specialties-list {
        margin: 2rem 3rem 10rem 3rem;
        font-size: 2.8rem;
    }

    .therapy-list {
        margin: 2rem 3rem 2rem 3rem;
        font-size: 2.8rem;
    }
}

.quotes-list {
    display: flex;
    flex-direction: column;
    margin: 0rem 8rem;
    font-family: "Baskervville SC", sans-serif;
    font-size: 2rem;
    justify-content: center;
}

.quote-one {
    margin: 3rem 8rem 3rem 0rem;
    padding: 2rem;
    background-image: linear-gradient(180deg, rgba(9, 39, 61, 0.9), rgba(9, 39, 61, 0.9));
    border: black solid;
    border-radius: 3.25%;
}

.quote-two {
    margin: 3rem 0rem 3rem 8rem;
    padding: 2rem;
    background-image: linear-gradient(180deg, rgba(9, 39, 61, 0.9), rgba(9, 39, 61, 0.9));
    border: black solid;
    border-radius: 3.25%;
}

.quote::before {
    content: '" ';
}

.quote::after {
    content: ' "';
}

.expect {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(180deg, rgba(29, 40, 57, 0.65), rgba(29, 40, 57, 0.65)), url("vancouver_forest.jpg");
    justify-content: center;
    align-items: center; 
    border: 0.5rem solid black;
}

.expect-text {
    margin: 10rem;
    font-size: 2.5rem;
    line-height: 4.2rem;
}

@media (max-width: 480px) {
    .expect-text {
        margin: 5rem;
        font-size: 3rem;
        line-height: 5rem;
    }
}

.advantage {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.advantage > h3 {
    margin-bottom: 2rem;
}

.advantage-list {
    margin: 0 12rem;
    font-size: 2rem;
    line-height: 3rem;
}

.advantage-list > ol> li {
    margin: 2rem 0;
}

@media (max-width: 480px) {
    .advantage-list {
        margin: 0 6rem;
        font-size: 2.5rem;
    }
}

/* css footer */

.book {
    display: flex;
    width: 100%;
    height: 45vh;
    background-color: #041b2d;
    justify-content: space-evenly;
    align-items: center;
}

.book-one {
    display: flex;
    margin-left: 12rem;
}

.logo-bot {
    border-radius: 3.25%;
}

.book-two {
    display: flex;
    flex-direction: row;
    font-size: 3.6rem;
}

.book-two > a {
    margin: 3rem;
    transition: transform 0.25s ease-out;
}

.book-two > a:hover {
    transform: translateY(10px);
}

.book-three {
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    line-height: 2.5rem;
}

.book-three > a:hover {
    color: #95c0ff;
}

@media (max-width: 480px) {
    .book {
        flex-direction: column;
    }

    .book-two {
        font-size: 4.8rem;
    }

    .book-two > a {
        margin: 3.5rem;
    }

    .book-three > p {
        font-size: 3.6rem;
        margin-bottom: 2rem;
    }

    .book-three > a {
        font-size: 3rem;
        line-height: 4.6rem;
    }
}

.copywrite {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 5vh;
    background-color: #041b2d;
    font-size: 1.2rem;
    justify-content: center;
    align-items: center;
}

@media (max-width: 480px) {
    .copywrite {
        font-size: 1.8rem;
    }
}
/* fin */