* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    letter-spacing: 0.02em;
}

html, body {
    overflow-x: hidden;
    scroll-behavior: auto;
}

.navbar {
    background: rgba(250, 247, 242, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
 }

 .navbar__container {
    display: flex; /*The logo NEXT moved to the side*/
    justify-content: space-between;/*it will see on mobile phone*/
    height: 80px;
    z-index: 1; /*make above of everything*/
    width: 100%; /*itt separate the nav items and the logos to the two corner/side ot the pages*/
    max-width: 1300px;
    margin: 0 auto ; /*first value is the top, second is right, bottom, left if you use 0 0 0 0 definitin. If you use two parameter the the first is top and bottom, second is left/right*/
    padding: 0 50px; /*same as above*/
 }

#navbar__logo img {
    height: 170px;
    width: auto;
}

 /*use # because it is a logo*/
#navbar__logo {
    color: #2C2218;
    background: none;
    -webkit-text-fill-color: unset;
    -moz-text-fill-color: unset;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
}

/*It the actual icon style*/
.fa-gem {
    margin-right: 0.5rem;
}

.navbar__menu {
    display: flex; /*It put the list element int a one row*/
    align-items: center;
    list-style: none; /*Itt will separate the list element -> nem csusznak egymasba*/
    text-align: center;
}

.navbar__item {
    height: 80px;
}

.navbar__links {
    color: #2C2218;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
    letter-spacing: 0.1em;
    font-weight: 300;
}

.navbar__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 24px;
    height: 100%;
    width: 100%;
    border: 1px solid #2C2218;
    outline: none;
    border-radius: 0;
    background: transparent;
    color: #2C2218;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 400;
}

/*define hover effect*/
.button:hover {
    background: #2C2218;
    color: #FAF7F2;
    transition: all 0.4s ease;
}

.navbar__links:hover {
    color: #9C7E5F;
    transition: all 0.3s ease;
}

/*---- mobile responseve part ----*/

/*It triggers at 960px*/
@media screen and (max-width: 960px) {
    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        background: rgba(250, 247, 242, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 80;
        z-index: 1; /*make above of everything*/
        width: 100%;
        max-width: 1300px;
        padding: 0;
    }

    /*This is the mobile menu bars which appear when the windows size is mobile device sized (belowe our minimum settings)*/
    .navbar__menu {
        display: grid;
        grid-template-columns: auto;
        margin: 0;
        width: 100%;
        position: absolute; /*CHECK IT, it put the menu items center but check it*/
        top: -1000px; /*The animation coming from the top and because big negativ number it ensures that it will never seen. When we click it set the top back to the value where we can see it*/
        opacity: 0; /*0 because we dont want to see it*/
        transition: all 0.5s ease;
        height: auto; /*viewport height*/
        z-index: -1;
        background: #FAF7F2;
    }

    /*JavaScript to trigger this*/
    .navbar__menu.active {
        background: #FAF7F2;
        top: 100%; /*This value essentially show the entire active menu*/
        opacity: 1; /*so we will see it*/
        transition: all 0.5s ease;
        z-index: 99;
        height: 70vh;
        font-size: 1.6rem;
    }

    #navbar__logo {
        padding-left: 25px;
        color: #2C2218;
        -webkit-text-fill-color: unset;
        -moz-text-fill-color: unset;
    }

    .navbar__links {
        color: #2C2218;
    }

    /*check why need white space befor .bar*/
    .navbar__toggle .bar {
        width:25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background: #2C2218;
    }

    .navbar__item {
        width: 100%;
    }

    .navbar__links {
        text-align: center;
        padding: 2rem;
        width: 100%;
        display: table;
    }

    /*# means id*/
    #mobile-menu {
        position: absolute;
        top: 25%;
        right: 5%;
        transform: translate(5%, 20%);
    }

    .navbar__btn {
        padding-bottom: 2rem;
    }

    .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80px;
        margin: 0;
    }

    .navbar__toggle .bar {
        display: block;
        cursor: pointer;
    }

    /*nth-child(2) means its targets the second child*/
    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0; /*its mean we dont want to see it at all*/
    }

    /*we want to target the top bar so its 1*/
    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    /*we want to target the third bar now*/
    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

}

/*Index html -- Start*/
/*Hero Section CSS*/
.main {
    background-color: #1a1510;
    background-image:
        linear-gradient(rgba(17, 12, 8, 0.38), rgba(17, 12, 8, 0.52)),
        url('images/heroSectionImage.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2.5rem;
}

.main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, transparent, #FAF7F2);
    pointer-events: none;
    z-index: 1;
}

.main__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    text-align: center;
    color: #FAF7F2;
}

.main__eyebrow,
.section-tag {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: #FAF7F2;
}

.main__eyebrow {
    position: absolute;
    z-index: 2;
    top: calc(80px + 1.5rem);
    left: 2.5rem;
    right: 2.5rem;
    text-align: center;
}

.main__eyebrow::after {
    content: '';
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(250, 247, 242, 0.9);
}

.section-tag {
    color: #9C7E5F;
    margin-bottom: 1rem;
    display: inline-block;
}

.main__content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.25rem, 9vw, 6.4rem);
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: none;
    margin: 0 0 1.2rem;
    color: #FAF7F2;
    font-weight: 400;
}

.main__content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    margin-bottom: 1rem;
    font-weight: 400;
    color: #FAF7F2;
}

.main__description {
    max-width: 720px;
    margin: 0 auto;
    font-size: clamp(0.88rem, 1.7vw, 1.02rem);
    line-height: 1.5;
    color: rgba(250, 247, 242, 0.9);
}

.main__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    margin-bottom: 0;
}

.main__btn {
    font-size: 0.78rem;
    background: transparent;
    padding: 8px 32px;
    border: 1px solid rgba(250, 247, 242, 0.9);
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.4s;
    outline: none;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main__btn:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.18);
    transition: all 0.4s;
    border-radius: 0;
    z-index: 0;
}

.main__btn:hover:after {
    width: 100%;
}

.main__btn:hover {
    color: #fff;
}

.main__btn--ghost {
    background: rgba(250, 247, 242, 0.12);
}

.home-intro {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 3rem;
    padding: 5rem 8%;
    background: #FAF7F2;
    margin-top: -3rem;
    position: relative;
    z-index: 3;
}

.home-intro__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center top;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(44, 34, 24, 0.12);
}

.home-intro__copy {
    max-width: 520px;
}

.home-intro__copy h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.1;
    color: #2C2218;
    margin-bottom: 1rem;
    font-weight: 400;
}

.home-intro__copy h2::after {
    content: '';
    display: block;
    width: auto;
    height: 1px;
    background: #2C2218;
    margin-top: 1rem;
}

.home-intro__copy p {
    color: #5C4A3A;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

/* Give the image more space on medium and tablet-sized desktop layouts. */
@media screen and (min-width: 769px) and (max-width: 1400px) {
    .home-intro {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 2.5rem;
        padding-left: 4%;
        padding-right: 4%;
    }

    .home-intro__image img {
        height: 540px;
        object-position: center top;
    }
}

.main_products {
    background: #FAF7F2;
    padding: 0;
}

.main_products__image-wrap {
    width: 100%;
    
}

.main_products__image-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.main_products__image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(17, 12, 8, 0.12), rgba(17, 12, 8, 0.38));
    pointer-events: none;
}

.salon {
    background: #FAF7F2;
    padding: 5rem 5.5%;
}

.salon__heading {
    max-width: 1180px;
    margin: 0 auto 2.2rem;
    text-align: center;
    border-bottom: 1px solid rgba(92, 74, 58, 0.55);
    padding-bottom: 1rem;
}

.salon__heading h2 {
    color: #5C4A3A;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 400;
    letter-spacing: 0.04em;
}

.salon__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1180px;
    margin: 0 auto;
}

.salon__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.salon__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.salon__item h3 {
    margin-top: 1rem;
    color: #5C4A3A;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 400;
    line-height: 1;
}

.salon__item p {
    margin-top: 0.35rem;
    color: #5C4A3A;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
}

.home-cta {
    background: #2C2218;
    padding: 3rem 2rem;
}

.home-cta__content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.home-cta__content p {
    color: #FAF7F2;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
}

/*--- Mobile responsive*/
@media screen and (max-width: 768px) {
    .main__content {
        text-align: center;
    }

    .home-intro {
        grid-template-columns: 1fr;
        padding-top: 4rem;
    }

    .home-intro__image img {
        height: auto;
    }

    .main_products__image-wrap,
    .main_products__image-wrap img {
        min-height: 0px;
        height: auto;
    }

    .home-cta__content {
        flex-direction: column;
        align-items: flex-start;
    }

    .salon {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .salon__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }
}

@media screen and (max-width: 480px) {
    .main {
        min-height: 82vh;
        padding: 2rem 1.25rem;
    }

    .main__content h1 {
        font-size: clamp(2.8rem, 11vw, 3.5rem);
    }

    .main__description {
        max-width: 390px;
    }

    .main__btn {
        padding: 8px 28px;
    }

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

/*Landscape*/

@media screen and (orientation: landscape) and (max-height: 500px) {
    .main {
        min-height: 100vh;
    }
}

/*Service Section CSS*/
.services {
    background: #B8AA96;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5rem 2rem 4rem;
}

.services__heading {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto 2.2rem;
    text-align: center;
    border-bottom: 1px solid rgba(92, 74, 58, 0.55);
    padding-bottom: 1rem;
    text-align: center;
}

.services__heading h1 {
    color: #2C2218;
    background: none;
    background-image: none;
    -webkit-text-fill-color: unset;
    -moz-text-fill-color: unset;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 0;
}

.services__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.services__card--wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
}

/*pictures from https://www.pexels.com/ It is a free stock photo and video website */

.services__card {
    width: 100%;
    aspect-ratio: 2 / 3; /* keeps consistent shape while allowing scaling, eg: width (height = width × 3/4).*/
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    box-shadow: 0 18px 45px rgba(44, 34, 24, 0.12);
    transition: transform 0.35s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 2rem;
    text-align: center;
}

.services__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17, 17, 17, 0.72), rgba(17, 17, 17, 0.08));
}

.services__card--face-care {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17, 17, 17, 0.6) 100%), url('images/1_arckezelesek.png');
}

.services__card--face-massage {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17, 17, 17, 0.6) 100%), url('images/2_arcmasszazsEdited.jpg');
}

.services__card--card3 {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17, 17, 17, 0.6) 100%), url('images/3_gyantazasEdited.jpg');
}

.services__card--card4 {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17, 17, 17, 0.6) 100%), url('images/4_szemoldokfestes_formazas.jpg');
}

.services__card--card5 {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17, 17, 17, 0.6) 100%), url('images/5_szempilla_lifting.jpg');
}

.services__card--card6 {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17, 17, 17, 0.6) 100%), url('images/6_sminkEdited.jpg');
}

.services__card > * {
    position: relative;
    z-index: 1;
}

.services h2 {
    color: rgba(250, 247, 242, 0.94);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 10cqi, 3.2rem);
    font-weight: 400;
    letter-spacing: 0.04em;
}

.services p {
    max-width: 100%;
    font-size: clamp(1.15rem, 5.5cqi, 1.6rem);
    line-height: 1.5;
    color: rgba(250, 247, 242, 0.94);
}

.services__card button {
    color: #FAF7F2;
    padding: 10px 22px;
    border: 1px solid rgba(250, 247, 242, 0.7);
    outline: none;
    border-radius: 999px;
    background: transparent;
    font-size: clamp(0.85rem, 3.2cqi, 1.05rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

/*hover over effects*/
.services__card:hover {
    transform: scale(1.02);
    transition: 0.4s ease;
    cursor: pointer;
}

.services__card:hover button {
    background: rgba(250, 247, 242, 0.14);
}

@media screen and (max-width: 960px){
    .services__container {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1100px;
  }
}

@media screen and (max-width: 480px) {
    .services__container {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.75rem;
  }

  .services__card--wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .services__card {
    aspect-ratio: 4 / 3; /* marad */
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 1.5rem;
    text-align: center;
  }

  .services h2,
  .services p,
  .services__card button {
        position: static;
   }

   .services p {
        max-width: 100%;
   }

    .services__card h2 {
         font-size: clamp(2rem, 10vw, 3rem);
   }

    .services__card p {
         font-size: clamp(1.1rem, 5.5vw, 1.5rem);
    }

    .services__card button {
         margin-top: 0.5rem;
         font-size: clamp(0.8rem, 3.5vw, 1rem);
    }
}

/*Customer Reviews*/
.reviews {
    padding: 4rem 6%;
    background: #FAF7F2;
}

.reviews__heading {
    max-width: 1180px;
    margin: 0 auto 2rem;
    text-align: center;
    border-bottom: 1px solid rgba(92, 74, 58, 0.45);
    padding-bottom: 1rem;
}

.reviews__heading .section-tag {
    color: #9C7E5F;
    margin-bottom: 0.5rem;
}

.reviews__heading h2 {
    color: #2C2218;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
}

.reviews__carousel {
    max-width: 700px;
    margin: 0 auto;
}

.reviews__slides {
    position: relative;
    min-height: var(--review-slides-height, 0px);
}

.review-card {
    min-height: 190px;
    padding: 2rem;
    border: 1px solid rgba(92, 74, 58, 0.35);
    background: #fff;
    text-align: center;
}

.review-card[hidden] {
    display: none;
}

.review-card blockquote {
    color: #5C4A3A;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    line-height: 1.5;
}

.review-card__author {
    margin-top: 1.25rem;
    color: #2C2218;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
}

.reviews__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.reviews__controls button {
    padding: 0.45rem 0.8rem;
    border: 1px solid #5C4A3A;
    background: transparent;
    color: #2C2218;
    cursor: pointer;
}

.reviews__controls button:focus-visible {
    outline: 2px solid #9C7E5F;
    outline-offset: 3px;
}

.reviews__status {
    color: #5C4A3A;
}

@media screen and (max-width: 400px) {
    .reviews__controls {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 0.6rem;
    }

    .reviews__status {
        text-align: center;
        white-space: nowrap;
    }
}

/*Footer section CSS*/
.footer__container {
    background-color: #FAF7F2;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#footer__logo img {
    height: 150px;      /* Adjust as needed */
    width: auto;
    display: block;
    margin: 0 auto;    /* Center the image horizontally */
}

#footer__logo {
    color: #2C2218;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
}

.footer__links {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
}

.footer__link--wrapper {
    display: flex; /*It will put the list element int a one row*/
}

.footer__link--items {
    display: flex;
    flex-direction: column; /*It will organize the child elements in a column*/
    align-items: flex-start; /*It will align the items to the start of the column (left side)*/
    margin: 16px; /*It is 1rem*/
    text-align: left;
    width: 100px;
    box-sizing: border-box; /*It ensures that padding and border are included in the total width and height of the element, 
    preventing unexpected layout issues when adding padding or borders*/
}

.footer__link--items h2 {
    margin-bottom: 16px; /*It is 1rem*/
}

.footer__link--items > h2 {
    color: #2C2218;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.footer__link--items a {
    color: #5C4A3A;
    text-decoration: none;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
}

.footer__link--items a:hover {
    color: #9C7E5F;
    transition: 0.3s ease-out;
}

/*Social icons*/

.social__icon--link {
    color: #5C4A3A;
    font-size: 20px;
}

.social__media {
    max-width: 1000px;
    width: 100%;
}

.social__media--wrap {
    display: flex;
    justify-content: space-between; /*It will put the content at the start and end of the container, creating space between them*/
    align-items: center;
    width: 90%;/*It will make the content take up 90% of the container's width, leaving some space on the sides for better aesthetics and readability*/
    max-width: 1000px;
    margin: 0px auto 0 auto; /*40px top, auto right, 0 bottom, auto left. It centers the content horizontally and adds space above it*/
}

.social__icons {
    display: flex; /*It will put the icons in a row*/
    justify-content: space-between; /*It will put the icons at the start and end of the container, creating space between them*/
    gap: 1.5rem;
    width: auto;
}

/*Currently it is a dead code check it*/
.social__logo {
    color: #fff;
    justify-self: flex-start; /*It will align the logo to the start of the container (left side)*/
    margin-left: 20px;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.website__rights {
    color: #5C4A3A;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
}

/*--- Mobile responsive part ---*/
@media screen and (max-width: 820px) {

    .footer__links {
        padding-top: 2rem; /*It will add space above the links to separate them 
        from the logo and social media icons, improving readability on smaller screens*/
    }

    #footer__logo {
        margin-bottom: 1rem; /*It will add space below the logo to separate it from the links, improving readability on smaller screens*/
    }

    .website__rights {
        margin-bottom: 2rem; /*It will add space below the copyright notice to separate it from the social media icons, improving readability on smaller screens*/
    }


    .footer__link--wrapper {
        flex-direction: column; /*It will organize the link sections in a column, stacking them vertically 
        instead of side by side, which is more suitable for narrow screens*/
    }

    .social__media--wrap {
        flex-direction: column; /*It will organize the social media section in a column, stacking the logo, copyright notice, and icons vertically 
        instead of side by side, which is more suitable for narrow screens*/
    }
}

@media screen and (max-width: 480px) {
    .footer__link--items {
        margin: 0;/*It will remove the margin around each link section (we set 16px previously so this will remove)
        to save space on smaller screens, 
        allowing the sections to fit better within the limited width*/
        padding: 10px; /*It will add padding inside each link section to create some space between the content 
        and the edges of the section, improving readability on smaller screens*/
        width: 100%; /*It will make each link section take up the full width of the container, 
        allowing them to stack vertically and fit better on narrow screens*/
    }
}


/* About Me Page */

.aboutme-page {
    /*background-color: #D1C2A3;*/
    background-image: url('images/stock10.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.rolam__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70vh;
    background: rgba(209, 194, 163, 0.85);
}

.rolam__hero--text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 300;
    font-style: italic;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
    max-width: 800px;
}

.rolam__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: rgba(250, 247, 242, 0.85);
}

.rolam__text {
    flex: 1;
}

.rolam__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 0.5rem;
}

.rolam__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 2rem;
}

.rolam__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    color: #4D3A36;
    margin-bottom: 2.5rem;
}

.rolam__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 2.5rem;
    color: #4D3A36;
}

.rolam__list li {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 0.5rem;
}

.rolam__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.rolam__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.rolam__img--wrap {
    flex: 1;
    max-width: 420px;
}

.rolam__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.rolam__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.rolam__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.rolam__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.rolam__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .rolam__hero {
        height: 50vh;
    }

    .rolam__hero--text {
        font-size: 1.8rem;
    }

    .rolam__section {
        flex-direction: column;
        padding: 4rem 5%;
        gap: 2rem;
    }

    .rolam__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .rolam__img {
        height: 550px;
    }

    .rolam__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
}

@media screen and (max-width: 480px) {
    .rolam__hero--text {
        font-size: 1.4rem;
    }
}

/* Contact Page */

.contact-page {
    /*background-color: #D1C2A3;*/
    background-image: url('images/stock10.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.contact__section {
    display: flex;
    gap: 6rem;
    padding: 7rem 8%;
    background: rgba(250, 247, 242, 0.88);
    align-items: flex-start;
}

.contact__info {
    flex: 1;
}

.contact__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    font-weight: 300;
    color: #2C2218;
    margin-bottom: 0.4rem;
}

.contact__subtitle {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2C2218;
    opacity: 0.55;
    margin-bottom: 3rem;
}

.contact__detail {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.6rem;
}

.contact__label {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9C7E5F;
    margin-bottom: 0.25rem;
}

.contact__value {
    font-size: 1rem;
    color: #2C2218;
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 300;
}

.contact__value:hover {
    color: #9C7E5F;
    transition: 0.3s ease;
}

.contact__socials {
    display: flex;
    gap: 1.4rem;
    margin-top: 2.5rem;
}

.contact__social--link {
    color: #2C2218;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.contact__social--link:hover {
    color: #9C7E5F;
}

/* Contact Form */
.contact__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact__form--group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact__form--label {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9C7E5F;
}

.contact__form--input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #2C2218;
    padding: 0.6rem 0;
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: #2C2218;
    outline: none;
    transition: border-color 0.3s ease;
    width: 100%;
}

.contact__form--input::placeholder {
    color: #2C2218;
    opacity: 0.35;
}

.contact__form--input:focus {
    border-bottom-color: #9C7E5F;
}

.contact__form--textarea {
    resize: none;
    height: 120px;
}

.contact__form--btn {
    align-self: flex-start;
    padding: 12px 36px;
    border: 1px solid #2C2218;
    background: transparent;
    color: #2C2218;
    font-family: 'Jost', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact__form--btn:hover {
    background: #2C2218;
    color: #FAF7F2;
}

/* Contact Mobile */
@media screen and (max-width: 768px) {
    .contact__section {
        flex-direction: column;
        gap: 3rem;
        padding: 5rem 8% 4rem; /*5rem top, 5% left/right, 4rem bottom*/
    }

    .contact__info,
    .contact__form {
        width: 100%;       /* force full width in column layout */
        flex: unset;       /* remove flex:1 which doesn't apply width in column */
    }

    .contact__form--btn {
        width: 100%;
        text-align: center;
        align-self: stretch;
    }
}



/* Blog Page */
.blog-page {
    position: relative;
    isolation: isolate;
    background: none;
}

.blog-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background: url("images/leafShadow.jpg") center / cover no-repeat;
    pointer-events: none;
}

.blog__hero--title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.25rem, 9vw, 6.4rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: none;
    margin: 0 0 1.2rem;
    color: #2C2218;
}

.blog__hero--text {
    max-width: 800px;
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.7rem, 3.3vw, 1.4rem);
    font-weight: 300;
    font-style: normal;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.blog__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 70vh;
    padding: 0 1.5rem;
    text-align: center;
    background: rgba(209, 194, 163, 0.85);
}

.blog__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: #FAF7F2;
}

.blog__text {
    flex: 1;
}

.blog__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 2rem;
}

.blog__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    color: #4D3A36;
    margin-bottom: 2.5rem;
}

.blog__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.blog__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.blog__img--wrap {
    flex: 1;
    max-width: 420px;
}

.blog__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.blog__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.blog__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.blog__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.blog__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .blog__hero {
        height: 70vh;
    }

    .blog__section {
        flex-direction: column;
        padding: 3rem 5% 4rem;
        gap: 2rem;
    }

    .blog__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .blog__img {
        height: 350px;
    }

    .blog__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
}

@media screen and (max-width: 480px) {
    
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .blog__hero {
        height: auto;
        min-height: 100svh;
        padding: 5rem 1.5rem 2rem;
    }
}


/* Services Page */
.services-page {
    /*background-color: #D1C2A3;*/
    background-image: url('images/stock10.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.services__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70vh;
    background: rgba(209, 194, 163, 0.85);
}

.services__hero--text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 300;
    font-style: italic;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
    max-width: 800px;
}

.services__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: rgba(250, 247, 242, 0.85);
}

.services__text {
    flex: 1;
}

.services__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 0.5rem;
}

.services__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 2rem;
}

.services__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    color: #4D3A36;
    margin-bottom: 2.5rem;
}

.services__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.services__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.services__img--wrap {
    flex: 1;
    max-width: 420px;
}

.services__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.services__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.services__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.services__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.services__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .services__hero {
        height: 50vh;
    }

    .services__hero--text {
        font-size: 1.8rem;
    }

    .services__section {
        flex-direction: column;
        padding: 4rem 5%;
        gap: 2rem;
    }

    .services__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .services__img {
        height: 350px;
    }

    .services__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
}

@media screen and (max-width: 480px) {
    .services__hero--text {
        font-size: 1.4rem;
    }
}

/* Page Transition Animation */
.services-page,
.blog-page,
.aboutme-page,
.contact-page {
    animation: pageReveal 0.4s ease both;
}

@keyframes pageReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*facecare*/
.facecare-page {
    position: relative;
    isolation: isolate;
    background: none;
}

.facecare-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background: url("images/leafShadow.jpg") center / cover no-repeat;
    pointer-events: none;
}

.facecare__hero--title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.25rem, 9vw, 6.4rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: none;
    margin: 0 0 1.2rem;
    color: #2C2218;
}

.facecare__hero--text {
    max-width: 800px;
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.7rem, 3.3vw, 1.4rem);
    font-weight: 300;
    font-style: normal;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
    
}

.facecare__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 70vh;
    padding: 0 1.5rem;
    text-align: center;
    background: rgba(209, 194, 163, 0.85);
}

.facecare__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: #FAF7F2;
}

.facecare__text {
    flex: 1;
}

.facecare__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 0.5rem;
}

.facecare__price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.facecare__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 1rem;
    margin-top: 4rem;
    font-weight: 600;
}

.facecare__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #4D3A36;
    margin-bottom: 0.4rem;
}

.facecare__body--treatment-goal {
    margin-top: 1.2rem;
}

.facecare__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 1rem;
    color: #4D3A36;
}

.facecare__list li {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 0.2rem;
}

.facecare__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.facecare__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.facecare__img--wrap {
    flex: 1;
    max-width: 420px;
}

.facecare__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.facecare__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.facecare__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.facecare__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.facecare__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .facecare__hero {
        height: 70svh;
    }
    
    .facecare__section {
        flex-direction: column;
        padding: 1rem 5% 4rem;
        gap: 2rem;
    }

    .facecare__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .facecare__img {
        height: 350px;
    }

    .facecare__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
}

@media screen and (max-width: 480px) {
    

}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .facecare__hero {
        height: auto;
        min-height: 100svh;
        padding: 5rem 1.5rem 2rem;
    }
}

/*Face massage*/
.face-massage-page {
    position: relative;
    isolation: isolate;
    background: none;
}

.face-massage-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background: url("images/leafShadow.jpg") center / cover no-repeat;
    pointer-events: none;
}

.face-massage__hero--title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.25rem, 9vw, 6.4rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: none;
    margin: 0 0 1.2rem;
    color: #2C2218;
}

.face-massage__hero--text {
    max-width: 800px;
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.7rem, 3.3vw, 1.4rem);
    font-weight: 300;
    font-style: normal;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.face-massage__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 70vh;
    padding: 0 1.5rem;
    text-align: center;
    background: rgba(209, 194, 163, 0.85);
}

.face-massage__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: #FAF7F2;
}

.face-massage__text {
    flex: 1;
}

.face-massage__price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.face-massage__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 1rem;
    margin-top: 4rem;
    font-weight: 600;
}

.face-massage__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #4D3A36;
    margin-bottom: 0.4rem;
}

.face-massage__body--treatment-goal {
    margin-top: 1.2rem;
}

.face-massage__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 1rem;
    color: #4D3A36;
}

.face-massage__list li {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 0.2rem;
}

.face-massage__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.face-massage__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.face-massage__img--wrap {
    flex: 1;
    max-width: 420px;
}

.face-massage__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.face-massage__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.face-massage__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.face-massage__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.face-massage__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .face-massage__hero {
        height: 70vh;
    }

    .face-massage__section {
        flex-direction: column;
        padding: 1rem 5% 4rem;
        gap: 2rem;
    }

    .face-massage__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .face-massage__img {
        height: 350px;
    }

    .face-massage__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
}

@media screen and (max-width: 480px) {
    
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .face-massage__hero {
        height: auto;
        min-height: 100svh;
        padding: 5rem 1.5rem 2rem;
    }
}

/*Waxing Section*/

.waxing-page {
    position: relative;
    isolation: isolate;
    background: none;
}

.waxing-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background: url("images/leafShadow.jpg") center / cover no-repeat;
    pointer-events: none;
}

.waxing__hero--title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.25rem, 9vw, 6.4rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: none;
    margin: 0 0 1.2rem;
    color: #2C2218;
}

.waxing__hero--text {
    max-width: 800px;
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.7rem, 3.3vw, 1.4rem);
    font-weight: 300;
    font-style: normal;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.waxing__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 70vh;
    padding: 0 1.5rem;
    text-align: center;
    background: rgba(209, 194, 163, 0.85);
}

.waxing__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: #FAF7F2;
}

.waxing__text {
    flex: 1;
}

.waxing__price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.waxing__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 1rem;
    margin-top: 4rem;
    font-weight: 600;
}

.waxing__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #4D3A36;
    margin-bottom: 0.4rem;
}

.waxing__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 2.5rem;
    color: #4D3A36;
}

.waxing__list li {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 0.2rem;
}

.waxing__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.waxing__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.waxing__img--wrap {
    flex: 1;
    max-width: 420px;
}

.waxing__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.waxing__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.waxing__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.waxing__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.waxing__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .waxing__hero {
        height: 70vh;
    }

    .waxing__section {
        flex-direction: column;
        padding: 1rem 5% 4rem;
        gap: 2rem;
    }

    .waxing__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .waxing__img {
        height: 350px;
    }

    .waxing__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
    
}

@media screen and (max-width: 480px) {
    
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .waxing__hero {
        height: auto;
        min-height: 100svh;
        padding: 5rem 1.5rem 2rem;
    }
}

/*Eyelash section*/
.eyelash-page {
    position: relative;
    isolation: isolate;
    background: none;
}

.eyelash-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background: url("images/leafShadow.jpg") center / cover no-repeat;
    pointer-events: none;
}

.eyelash__hero--title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.25rem, 9vw, 6.4rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: none;
    margin: 0 0 1.2rem;
    color: #2C2218;
}

.eyelash__hero--text {
    max-width: 800px;
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.7rem, 3.3vw, 1.4rem);
    font-weight: 300;
    font-style: normal;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.eyelash__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 70vh;
    padding: 0 1.5rem;
    text-align: center;
    background: rgba(209, 194, 163, 0.85);
}



.eyelash__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: #FAF7F2;
}

.eyelash__text {
    flex: 1;
}



.eyelash__price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.eyelash__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 1rem;
    margin-top: 4rem;
    font-weight: 600;
}

.eyelash__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #4D3A36;
    margin-bottom: 0.4rem;
}

.eyelash__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 2.5rem;
    color: #4D3A36;
}

.eyelash__list li {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 0.2rem;
}

.eyelash__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.eyelash__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.eyelash__img--wrap {
    flex: 1;
    max-width: 420px;
}

.eyelash__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.eyelash__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.eyelash__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.eyelash__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.eyelash__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .eyelash__hero {
        height: 70vh;
    }

    .eyelash__section {
        flex-direction: column;
        padding: 1rem 5% 4rem;
        gap: 2rem;
    }

    .eyelash__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .eyelash__img {
        height: 350px;
    }

    .eyelash__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
}

@media screen and (max-width: 480px) {
    
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .eyelash__hero {
        height: auto;
        min-height: 100svh;
        padding: 5rem 1.5rem 2rem;
    }
}

/*Makeup section*/
.makeup-page {
    position: relative;
    isolation: isolate;
    background: none;
}

.makeup-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background: url("images/leafShadow.jpg") center / cover no-repeat;
    pointer-events: none;
}

.makeup__hero--title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.25rem, 9vw, 6.4rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: none;
    margin: 0 0 1.2rem;
    color: #2C2218;
}

.makeup__hero--text {
    max-width: 800px;
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.7rem, 3.3vw, 1.4rem);
    font-weight: 300;
    font-style: normal;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.makeup__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 70vh;
    padding: 0 1.5rem;
    text-align: center;
    background: rgba(209, 194, 163, 0.85);
}

.makeup__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: #FAF7F2;
}

.makeup__text {
    flex: 1;
}

.makeup__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 0.5rem;
}

.makeup__price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.makeup__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 1rem;
    margin-top: 4rem;
    font-weight: 600;
}

.makeup__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #4D3A36;
    margin-bottom: 0.4rem;
}

.makeup__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 2.5rem;
    color: #4D3A36;
}

.makeup__list li {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 0.2rem;
}

.makeup__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.makeup__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.makeup__img--wrap {
    flex: 1;
    max-width: 420px;
}

.makeup__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.makeup__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.makeup__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.makeup__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.makeup__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .makeup__hero {
        height: 70vh;
    }

    .makeup__section {
        flex-direction: column;
        padding: 1rem 5% 4rem;
        gap: 2rem;
    }

    .makeup__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .makeup__img {
        height: 350px;
    }

    .makeup__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
}

@media screen and (max-width: 480px) {
    
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .makeup__hero {
        height: auto;
        min-height: 100svh;
        padding: 5rem 1.5rem 2rem;
    }
}

/*Eyebrow section*/
.eyebrow-page {
    position: relative;
    isolation: isolate;
    background: none;
}

.eyebrow-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background: url("images/leafShadow.jpg") center / cover no-repeat;
    pointer-events: none;
}

.eyebrow__hero--title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.25rem, 9vw, 6.4rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: none;
    margin: 0 0 1.2rem;
    color: #2C2218;
}

.eyebrow__hero--text {
    max-width: 800px;
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.7rem, 3.3vw, 1.4rem);
    font-weight: 300;
    font-style: normal;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.eyebrow__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 70vh;
    padding: 0 1.5rem;
    text-align: center;
    background: rgba(209, 194, 163, 0.85);
}

.eyebrow__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: #FAF7F2;
}

.eyebrow__text {
    flex: 1;
}

.eyebrow__price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 300;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.eyebrow__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 1rem;
    margin-top: 4rem;
    font-weight: 600;
}

.eyebrow__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #4D3A36;
    margin-bottom: 0.4rem;
}

.eyebrow__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 2.5rem;
    color: #4D3A36;
}

.eyebrow__list li {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 0.2rem;
}

.eyebrow__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.eyebrow__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.eyebrow__img--wrap {
    flex: 1;
    max-width: 420px;
}

.eyebrow__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.eyebrow__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.eyebrow__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.eyebrow__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.eyebrow__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .eyebrow__hero {
        height: 70vh;
    }

    .eyebrow__section {
        flex-direction: column;
        padding: 1rem 5% 4rem;
        gap: 2rem;
    }

    .eyebrow__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .eyebrow__img {
        height: 350px;
    }

    .eyebrow__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
}

@media screen and (max-width: 480px) {
    
    .eyebrow__price {
        font-size: 1.5rem;
    }

    .eyebrow__subtitle {
        font-size: 0.9rem;
        letter-spacing: 0.12em;
        margin-top: 2rem;
    }

    .eyebrow__section {
        padding: 3rem 1.1rem;
    }

    .eyebrow__img {
        height: 280px;
    }

    .eyebrow__btn {
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 360px) {
    .eyebrow__title {
        font-size: 2.2rem;
    }

    .eyebrow__price {
        font-size: 1.35rem;
    }

    .eyebrow__subtitle {
        font-size: 0.8rem;
        letter-spacing: 0.08em;
    }

    .eyebrow__body,
    .eyebrow__list li {
        font-size: 0.92rem;
    }

    .eyebrow__section {
        padding: 2.5rem 0.9rem;
    }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .eyebrow__hero {
        height: auto;
        min-height: 100svh;
        padding: 5rem 1.5rem 2rem;
    }
}

/*GYIK Section*/
.gyik-page {
    position: relative;
    isolation: isolate;
    background: none;
}

.gyik-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background: url("images/leafShadow.jpg") center / cover no-repeat;
    pointer-events: none;
}

.gyik__hero--title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.25rem, 9vw, 6.4rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: none;
    margin: 0 0 1.2rem;
    color: #2C2218;
}

.gyik__hero--text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 300;
    font-style: italic;
    color: #2C2218;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.05em;
    max-width: 800px;
}

.gyik__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 70vh;
    padding: 0 1.5rem;
    text-align: center;
    background: rgba(209, 194, 163, 0.85);
}

.gyik__section {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 6rem 8%;
    background: #FAF7F2;
}

.gyik__text {
    flex: 1;
}

.gyik__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4D3A36;
    opacity: 0.6;
    margin-bottom: 1rem;
    margin-top: 4rem;
    font-weight: 600;
}

.gyik__body {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.gyik__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 2.5rem;
    color: #4D3A36;
}

.gyik__list li {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 0.5rem;
}

.gyik__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #4D3A36;
    color: #4D3A36;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.gyik__btn:hover {
    background: #4D3A36;
    color: #FAF7F2;
}

.gyik__img--wrap {
    flex: 1;
    max-width: 420px;
}

.gyik__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Values section */
.gyik__values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 8%;
    background: rgba(209, 194, 163, 0.85);
    text-align: center;
}

.gyik__value--item {
    flex: 1;
    max-width: 280px;
    padding: 2rem;
}

.gyik__value--item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #4D3A36;
    margin-bottom: 1rem;
}

.gyik__value--item p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4D3A36;
    opacity: 0.8;
}

/*Connecting section style*/
.home-cta {
    padding: 0;
    background: #FAF7F2;
}

.home-cta__visual {
    position: relative;
    isolation: isolate;
    line-height: 1.2;
}

.home-cta__visual::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: rgba(44, 34, 24, 0.48);
    content: "";
}

.home-cta__image {
    display: block;
    width: 100%;
    height: auto;
}

.home-cta__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 5% 5.6%;
    color: #FAF7F2;
    text-align: center;
}

.home-cta__title {
    margin: 0;
    padding-bottom: 2%;
    border-bottom: 1px solid rgba(250, 247, 242, 0.8);
    color: #FAF7F2;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.85rem, 4vw, 3rem);
    font-weight: 400;
}

.home-cta__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: clamp(0.25rem, 2vw, 2rem);
}

.home-cta__detail h3 {
    margin: 0 0 0.35em;
    color: #FAF7F2;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.75rem, 2.3vw, 1.6rem);
}

.home-cta__detail p,
.home-cta__detail a {
    margin: 0;
    color: #FAF7F2;
    font-size: clamp(0.56rem, 1.9vw, 1.25rem);
    overflow-wrap: anywhere;
}

.home-cta__detail a {
    text-decoration: none;
}

.home-cta__detail a:hover,
.home-cta__detail a:focus-visible {
    text-decoration: underline;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .gyik__hero {
        height: 70vh;
    }

    .gyik__section {
        flex-direction: column;
        padding: 1rem 5% 4rem;
        gap: 2rem;
    }

    .gyik__img--wrap {
        max-width: 100%;
        width: 100%;
    }

    .gyik__img {
        height: 350px;
    }

    .gyik__values {
        flex-direction: column;
        align-items: center;
        padding: 3rem 5%;
    }
}

@media screen and (max-width: 480px) {

}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .gyik__hero {
        height: auto;
        min-height: 100svh;
        padding: 5rem 1.5rem 2rem;
    }
}

/* FAQ (GYIK) styles */
.gyik__faq {
    max-width: 720px;
    margin: 1.5rem auto 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0 6%;
}
.faq-item {
    width: 100%;
    background: #FAF7F2;
    border: 1px solid #E6DDD0;
    border-radius: 28px;
    overflow: hidden; /* Fontos, hogy a tartalom ne lógjon ki a lekerekítésből */
    transition: background 0.25s ease;
}
.faq-question {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    color: #2C2218;
    font-size: 1rem;
    text-align: left;
    transition: background 0.25s ease, transform 0.08s ease;
}
.faq-question:focus {
    outline: none;
    /* A focus-gyűrűt érdemes a szülőelemre tenni, vagy box-shadow helyett outline-t használni */
}

/* 3. Nyitott állapotban most a teljes .faq-item hátterét változtatjuk meg */
.faq-item.open {
    background: #E8D6C2;
}

.faq-icon {
    margin-left: 1rem;
    transition: transform 0.25s ease;
}
.faq-item.open .faq-icon {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 20px;
    color: #4D3A36;
    font-size: 0.95rem;
    line-height: 1.6;
}
.faq-item.open .faq-answer {
    padding: 12px 20px 18px;
    max-height: 400px;
}

@media screen and (max-width: 480px) {
    .gyik__faq { padding: 0 5%; }
    .faq-question { padding: 14px 16px; font-size: 0.98rem; }
}