:root {
    --text-colour: #6f5955;
    --text-colour2: #8db9b9;
    --dark-background: #6f5955;
    --medium-background: #f4efeb;
    --light-background: white;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--text-colour);
}

@font-face {
  font-family: 'The Seasons';
  src:  url('../assets/fonts/TheSeasonsBold/The\ Seasons\ Bold.woff') format('woff'),
        url('../assets/fonts/TheSeasonsBold/The\ Seasons\ Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Black Mango Regular';
  src:  url('../assets/fonts/BlackMango/Black\ Mango.woff') format('woff'),
        url('../assets/fonts/BlackMango/Black\ Mango.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

html, body {
    font-family: 'The Seasons', serif;
    height: 100%;
    overflow-x: hidden;
}

body {
    display: grid;
    grid-template: "sidebar main" auto
                   "sidebar footer" 100px / 1fr 4fr;
}

.sidebar {
    background: linear-gradient(var(--light-background) 35%, var(--medium-background));
    grid-area: sidebar;
    z-index: 2;
}

.sidebar__mobile-menu {
    color: var(--text-colour);
    font-size: 2rem;
    margin-top: 1rem;
    margin-left: 1rem;
    position: absolute;
    visibility: hidden;
    z-index: 2;
}

.logo {
    width: 100%;
}

.navigation {
    margin: 3rem 2rem;
}

.navigation__list {
    list-style: none;
}

.navigation__element {
    color: var(--text-colour);
    font-size: 1.5rem;
    margin-top: 1rem;
    transition: font-weight 0.3s ease;
}

.navigation__element:hover {
    font-weight: 700;
}

.navigation__radio {
    display: none;
}

.navigation__radio:checked ~ label {
    color: var(--text-colour2);
    font-weight: 700;
}

.navigation__label {
    cursor: pointer;
}

.contact-info {
    color: var(--text-colour);
    display: grid;
    gap: 0.5rem;
    margin-left: 2rem;
}

.contact-info__phone {
    font-size: 1.5rem;
    font-weight: 700;
}

.social-media {
    color: var(--text-colour);
    cursor: pointer;
    display: flex;
    font-size: 2rem;
    gap: 1.5rem;
    justify-content: center;
    margin: 3rem 2rem 0 2rem;
}

.social-media__facebook,
.social-media__instagram,
.social-media__whatsapp,
.social-media__booksy {
    color: inherit;
    transition: color .2s ease;
}

.social-media__facebook:hover,
.social-media__instagram:hover,
.social-media__whatsapp:hover {
    color: var(--text-colour2);
}

.social-media__booksy-icon {
    background-image: url('../assets/Booksy.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    transition: background-image .2s ease;
    width: 2rem;
}

.social-media__booksy-icon:hover {
    background-image: url('../assets/Booksy-hover.png');
}

main {
    grid-area: main;
    overflow-y: scroll;
    scrollbar-width: thin;
}

.start {
    background: linear-gradient(45deg, var(--light-background) 35%, var(--medium-background));
    padding-bottom: 5rem;
}

.start__banner {
    display: block;
    height: 100%;
    min-height: 90svh;
    min-width: 100%;
    position: relative;
}

.start__banner div {
    position: absolute;
    min-height: 90svh;
    min-width: 100%;
}

.start__banner-img1 {
    animation: change-background 40s ease infinite forwards;
    background: no-repeat url('../assets/22.webp') center/cover;
    opacity: 1;
}

.start__banner-img2 {
    animation: change-background 40s ease 10s infinite forwards;
    background: no-repeat url('../assets/33.webp') center/cover;
    opacity: 0;
}

.start__banner-img3 {
    animation: change-background 40s ease 20s infinite forwards;
    background: no-repeat url('../assets/39.webp') center/cover;
    opacity: 0;
}

.start__banner-img4 {
    animation: change-background 40s ease 30s infinite forwards;
    background: no-repeat url('../assets/51.webp') center/cover;
    opacity: 0;
}

.start__text {
    color: var(--text-colour);
    display: grid;
    gap: 3rem;
    margin: 4rem;
}

.start__text h1 {
    color: var(--text-colour);
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.start__text h2 {
    color: var(--text-colour);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.start__text div {
    display: grid;
    gap: 1rem;
}

.start__massages-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-family: 'Black Mango Regular';
    font-size: 2rem;
    font-weight: 500;
    gap: 2rem;
    justify-content: space-evenly;
    list-style: none;
    margin: 2rem auto;
}

.start__massages-list-item {
    border: solid 1px var(--text-colour2);
    border-radius: 0.5rem;
    font-size: 2.5rem;
    letter-spacing: 2px;
    padding: 1rem;
    text-align: center;
    transition: background-color 0.2s ease-in-out,
                color 0.2s ease-in-out;
    word-spacing: 2px;
}

.start__massages-list-item:hover {
    background-color: var(--text-colour2);
    color: var(--light-background);
}

.start__expectations-info {
    align-items: center;
    gap: 0;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
}

.start__expectations-list {
    margin-left: 1rem;
}

.start__expectations-video {
    border: 10px solid var(--text-colour2);
    width: min(500px, 100%);
}

.start__expectations-adnotation {
    grid-column: 1 / span 2;
}

.start__holistic {
    display: grid;
    grid-template-columns: 1fr 2fr;
    place-items: center;
}

.start__holistic-info {
    align-items: center;
    gap: 0;
    justify-content: center;
    text-align: center;
}

.start__holistic-image {
    border: 10px solid var(--text-colour2);
    width: min(800px, 100%);
}

.start__preparation {
    display: grid;
    grid-template-columns: 2fr 1fr;
    place-items: center;
}

.start__preparation-info {
    align-items: center;
    gap: 0;
    justify-content: center;
    margin-left: 2rem;
}

.start__preparation-image {
    border: 10px solid var(--text-colour2);
    width: min(800px, 100%);
}

.start__vouchers {
    display: grid;
    grid-template-columns: 2fr 1fr;
    place-items: center;
}

.start__vouchers-image {
    border: 10px solid var(--text-colour2);
    margin-top: 1rem;
    width: min(400px, 100%);
}

.start__products {
    display: grid;
    place-items: center;
}

.start__products-image {
    border: 10px solid var(--text-colour2);
    margin-top: 1rem;
    width: min(800px, 100%);
}

.about-me {
    background: linear-gradient(45deg, var(--light-background) 35%, var(--medium-background));
    display: none;
    gap: 3rem;
    grid-template-columns: 2fr 3fr;
    height: fit-content;
    min-height: 100%;
    padding: 2rem;
}

.about-me__titles-and-photo {
    margin-left: 2rem;
    width: 80%;
}

.about-me__subtitle {
    margin-top: 3rem;
}

.about-me__title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 3rem;
    margin-top: 1rem;
}

.about-me__portrait {
    border: 10px solid var(--text-colour2);
    width: min(300px, 100%);
}

.about-me__text {
    margin: 8rem min(5%, 5rem) 2rem 2rem;
    text-align: justify;
}

.gallery {
    background: linear-gradient(45deg, var(--light-background) 35%, var(--medium-background));
    display: none;
    padding: 2rem 2rem 2rem 4rem;
}

.gallery__subtitle {
    margin-top: 3rem;
}

.gallery__title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 3rem;
    margin-top: 1rem;
}

.gallery__images {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr;
}

.gallery__images-column {
    display: grid;
    gap: 1rem;
}

.gallery__image {
    border: 10px solid var(--text-colour2);
    transition: border 0.3s ease;
    width: clamp(100px, 100%, 400px);
}

.gallery__image:hover {
    border: 10px solid var(--medium-background);
    cursor: pointer;
}

.massages {
    background: linear-gradient(45deg, var(--light-background) 35%, var(--medium-background));
    display: none;
    gap: 1rem;
    height: fit-content;
    justify-content: center;
    justify-items: center;
    padding: 2rem 2rem 2rem 4rem;
    text-align: center;
}

.massages__subtitle {
    margin-top: 3rem;
}

.massages__title {
    font-size: 2rem;
    font-weight: 500;
    margin-top: 1rem;
}

.massages__name {
    font-family: 'Black Mango Regular';
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: 2rem;
    word-spacing: 2px;
}

.massages__name span {
    font-size: 2rem;
}

.massages__info {
    align-self: center;
    max-width: 700px;
}

.massages ul {
    display: flex;
    gap: 1rem;
    list-style: none;
}

.massages ol {
    display: flex;
    text-align: start;
}

.massages__list {
    align-items: flex-start;
    flex-direction: column;
    list-style: circle;
    margin-left: 1rem;
}

.massages__footer {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
    list-style: none;
    margin-top: 2rem;
}

.massages__preparation {
    width: 70%;
}

.prices {
    background: linear-gradient(45deg, var(--light-background) 35%, var(--medium-background));
    display: none;
    gap: 1rem;
    height: fit-content;
    justify-items: center;
    padding: 2rem 2rem 2rem 4rem;
    text-align: center;
}

.prices__subtitle {
    margin-top: 3rem;
}

.prices__title {
    font-size: 2rem;
    font-weight: 500;
    margin-top: 1rem;
}

.massages__prices {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
    list-style: none;
    margin-top: 1rem;
    min-width: 30%;
}

.massages__prices li {
    border: solid 1px var(--text-colour2);
    padding: 0.5rem;
}

.massages__price {
    margin-top: 0.5rem;
}


.contact {
    background: linear-gradient(45deg, var(--light-background) 35%, var(--medium-background));
    display: none;
    height: fit-content;
    min-height: 100%;
    padding: 2rem 2rem 2rem 4rem;
}

.contact__subtitle {
    margin-top: 3rem;
}

.contact__title {
    color: var(--text-colour);
    font-size: 2rem;
    font-weight: 500;
    margin-top: 1rem;
}

.contact__info {
    display: grid;
    gap: 1rem;
}

.contact__info i {
    margin-right: 1rem;
}

.contact__booksy-icon {
    background-image: url('../assets/Booksy.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 1.1rem;
    margin-right: 1rem;
    width: 1.1rem;
}

.contact__social-media {
    color: var(--text-colour);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact__social-media:hover {
    color: var(--text-colour2);
}

footer {
    background: var(--medium-background);
    display: flex;
    grid-area: footer;
    justify-content: center;
    min-height: 100px;
}

.footer-title {
    color: var(--text-colour);
    font-size: 1rem;
    font-weight: 400;
    margin-top: 2rem;
    letter-spacing: 2px;
    text-align: center;
}

@keyframes change-background {
    0% {
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}

@media screen and (width < 700px) {

    body {
        grid-template: "main" auto
                       "footer" 1fr / 1fr;
    }

    .sidebar__mobile-menu {
        cursor: pointer;
        visibility: visible;
    }

    .sidebar {
        left: -600px;
        min-height: 100svh;
        position: absolute;
        width: 270px;
    }

    .show-sidebar {
        animation: show-sidebar 1s ease forwards;
    }

    .hide-sidebar {
        animation: hide-sidebar 1s ease forwards;
    }

    .logo {
        margin-bottom: 2rem;
        position: relative;
        float: right;
        width: 80%;
    }

    .contact-info__phone {
        font-size: 1.2rem;
    }

    .pop-up-content {
        width: 70%;
    }

    .start__banner {
        min-height: calc(100svh - 70px);
    }

    .start__banner div {
        min-height: 100%;
    }

    .start__banner-img4 {
        background: no-repeat url('../assets/51-mobile.webp') center/cover;
    }

    .start__expectations,
    .start__holistic,
    .start__preparation,
    .start__vouchers {
        grid-template-columns: 1fr;
    }

    .start__expectations div {
        display: block;
    }

    .start__expectations-list {
        margin-bottom: 1rem;
    }

    .start__expectations-adnotation p {
        margin-bottom: 1rem;
    }

    .start__expectations-video {
        width: 100%;
    }

    .about-me {
        grid-template-columns: 1fr;
    }

    .about-me__text {
        margin-top: 1rem;
    }

    .gallery__images {
        grid-template-columns: 1fr;
    }

    .massages__footer {
        flex-wrap: wrap;
    }

    .contact__map {
        margin: 2rem 0;
        width: 100%;
    }

    footer {
        min-height: 70px;
    }

    .footer-title {
        margin-top: 1.5rem;
    }

    @keyframes show-sidebar {
        0% {
            left: -600px;
        }

        100% {
            left: 0px;
        }
    }

    @keyframes hide-sidebar {
        0% {
            left: 0px;
        }

        100% {
            left: -600px;
        }
    }
}

@media screen and (width < 390px) {

    .footer-title {
        font-size: 0.8rem;
        font-weight: 500;
    }

}

@media screen and (height < 800px) {

    .navigation {
        margin: 1rem 0.5rem;
    }

    .navigation__element {
        margin-left: 2rem;
    }

    .contact-info__phone {
        font-size: 1.2rem;
    }

    .social-media {
        margin: 1rem;
    }

    footer {
        min-height: 70px;
    }

    .footer-title {
        margin-top: 1.5rem;
    }
}

@media screen and (height < 800px) and (orientation: landscape) {

    body {
        grid-template: "sidebar main" auto
                       "sidebar footer" 70px / 1fr 7fr;
    }
}

@media screen and (height < 800px) and (orientation: horizontal) {

    body {
        grid-template: "main" auto
                       "footer" 1fr / 1fr;
    }
}

@media screen and (width < 1300px) {

    .contact-info__phone {
        font-size: 1.3rem;
    }
}

@media screen and (height < 590px) {

    .navigation__element {
        font-size: 1.2rem;
        font-weight: 500;
        margin-top: 0.5rem;
    }

    .contact-info {
        gap: 0.2rem;
    }
}

@media screen and (height < 625px) {

    .navigation__element {
        font-size: 1.3rem;
        font-weight: 500;
        margin-top: 0.5rem;
    }
}