*{margin:0;padding:0;box-sizing:content-box;}
p{font-size:var(--text-M);}
a{color:inherit;text-decoration:none;}
img{cursor:default;}
.hidden{ display:none!important;}
.center{display:flex;flex-direction:column;justify-content:center;align-items:center;}
html{background-color:#E6E1DD;scroll-behavior:smooth;}

body {
    width:100vw;
    overflow-x:hidden;
    font-family:'Neulis Light';
    color:black;
}

main{width:70vw;}

/* BACKGROUND  BACKGROUND  BACKGROUND  BACKGROUND  BACKGROUND  BACKGROUND  BACKGROUND  BACKGROUND  */
.background-img {
    width:100vw; height:100vh;
    position:fixed;
    top:0; left:0;
    overflow:hidden;
    z-index:-1;
}

.background-img img {
    width:100%; height:100%;
    object-fit:cover;
}

.background-img .beige-overlay {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background-color:#F5ECE4;
    opacity:0.6;
}


/* NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  NAV  */
nav{
    width: 100vw; height:12svh;
    position:fixed; top:0;
    z-index:10;
}

.nav-blur{
    background: linear-gradient(#E6E1DD, rgba(245, 236, 228, 0.2));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nav-container{
    width:calc(70% + 20px);
    display:flex; justify-content:space-between; align-items:center;
}

nav .space-between{ display:flex; gap:30px;}

nav a{
    color:var(--sand);
    text-transform: uppercase;
    border: 1px solid transparent;
    padding: 10px 20px;
}

nav img{height: 10svh; cursor:pointer;}

.logo-animation{
    animation: logo-animation 1s ease-in-out forwards;
}

@keyframes logo-animation {
    from{opacity: 0; scale: 0.95;}
    to{opacity: 1; scale: 1;}
}

/* START    START    START    START    START    START    START    START    START    START    START*/

#start{
    height:100svh; width:100vw;
    position:relative;
    background-image:url('../assets/wallpaper01.jpg');
    background-size:cover; background-position:center; background-repeat:no-repeat;
}

#start .logo{width:30%;}

#start .action{
    position:absolute;bottom:10svh;gap:20px;
}

#start h2{
    color:var(--sand); font-family:'Neulis thin';
    animation: h2 0.7s ease-out forwards;
}
#start a{
    border:1px solid var(--sand);
    background-color:transparent;
    color:var(--sand);
    padding: 10px 20px;
    font-size: var(--text-M); text-transform:uppercase;
}

@keyframes h2 {
    from{margin-bottom: -10px; opacity:0;}
    to{margin-bottom: 0; opacity:1;}
}


/* MASSAGE    MASSAGE    MASSAGE    MASSAGE    MASSAGE    MASSAGE    MASSAGE    MASSAGE    MASSAGE*/

h1{
    text-align:center; text-transform:uppercase;
    font-family:'Aboreto'; font-size:var(--text-XXL); font-weight: 300;
    color:var(--wood);
    letter-spacing:24%;
    padding:20vh 0 5vh;
}

.meaning{
    width:630px;
    text-align:center;
    display: flex; flex-direction: column; gap: 20px;
    margin-bottom:10vh;
}

.illustration-massage{
    height:10vh;
    margin-bottom:20vh;
}


/* HISTORY  HISTORY  HISTORY  HISTORY  HISTORY  HISTORY  HISTORY  HISTORY  HISTORY  HISTORY  HISTORY  */

.my-history{
    height:fit-content; width:60vw;
    position:relative;
    background-color:var(--moss); color:var(--sand);
    border-radius:40px;
}

.my-history img{
    position:absolute; bottom:0; right:0;
    width:40%;
    border-radius: 0 0 40px 0;
}

.my-history .text{
    display:flex; flex-direction:column;
    justify-content:space-between;
    margin:50px;
    width:calc(60% - 50px);
}

.my-history h2{
    color:var(--sand);
    font-family:'Aboreto'; font-size:var(--text-L); font-weight:300;
    text-transform:uppercase;
}

.my-history p{
    font-family:'Neulis Thin';
}

.my-history button{
    color:var(--deep); background-color:var(--sand);
    border:none;
    font-size:var(--text-M);
    text-transform:uppercase;
    padding:10px 20px;
    width:fit-content;
    margin-top: 40px;
}




/* MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  MIRIAN  */

.mirian-container{
    position:fixed; top:0; left:0;
    z-index:12;
    height:100dvh; width:100vw;

    background-color:rgba(0, 0, 0, 0.83);
    backdrop-filter:blur (20px);
    -webkit-backdrop-filter:blur(20px);

    display:flex; flex-direction:column;
    align-items:center;
}

.mirian-info{
    width:86vw;
}

.mirian-info h2{
    text-align:center; text-transform:uppercase;
    font-family:'Aboreto'; color:var(--sand);
    font-size:30px;
    margin:10vh 0 3vh;
}

.mirian-info .text-block p {
    color:var(--sand);
    margin-top:20px;
    font-style:italic;
}

.mirian-container img{
    width:100vw;
    position: absolute;
    bottom: 0;
}

#button-close{
    position:fixed; top:3vh; left:3vw;
    z-index:13;

    background-color:transparent; border:none;
}

#button-close i{
    font-size:30px;
    color:var(--sand);
}

/* SECTION-MASSAGE  SECTION-MASSAGE  SECTION-MASSAGE  SECTION-MASSAGE  SECTION-MASSAGE  SECTION-MASSAGE  SECTION-MASSAGE  */

.section-massage img{
    width:100vw; height:50vh;
    margin-left:-15vw;
    object-fit:cover; object-position:center;
    margin-bottom:10vh;
}

.section-massage{
    margin-top:12vh;
    width:100%;
}

.titel{
    text-transform:uppercase;
    font-family:'Aboreto';
    color:var(--wood);
    font-weight:300; font-size:var(--text-L);
}

#behandlungen{
    padding-top:15vh;
    font-size:var(--text-XL);
}

hr{
    margin:5px 0 30px;
    width: 84vw;
}

.section-massage .massage-info{
    margin-left:50px;
}

.section-massage .massage-price-row {
    display:flex;
    gap:100px;
}

.section-massage .massage-price-col {
    display:flex; flex-direction: column;
    gap:10px;
}

.section-massage .description{
    width:50%;
    margin-bottom:50px;
}

.section-salon p{
    color:var(--wood);
}

/* SECTION-SALON  SECTION-SALON  SECTION-SALON  SECTION-SALON  SECTION-SALON  SECTION-SALON  SECTION-SALON  */

.section-salon{
    width:100%;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    gap:10vh;

    padding:25vh 0 5vh;
}

.salon-info-container{
    width:100%;
    display:flex;
    justify-content:space-between;
}

.section-salon .salon-info{
    text-align:center;
}

.section-salon img{
    width:18vh;
}

.section-salon h2{
    margin-bottom:1rem;
}


/* TESTEMONIAL  TESTEMONIAL  TESTEMONIAL  TESTEMONIAL  TESTEMONIAL  TESTEMONIAL  TESTEMONIAL  TESTEMONIAL  TESTEMONIAL  */

.testemonial{
    width:70vw; height: fit-content;
    display:flex;
    justify-content:center; align-items:start;
}

/* SECTION-GALERY  SECTION-GALERY  SECTION-GALERY  SECTION-GALERY  SECTION-GALERY  SECTION-GALERY  SECTION-GALERY  */

.galery {
    width:calc(100vw - 20px);
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin:10px 0 10px;
}

.galery img {
    width:100%;
    height:auto;
    object-fit:cover;
}


/* FOOTER  FOOTER  FOOTER  FOOTER  FOOTER  FOOTER  FOOTER  FOOTER  FOOTER  FOOTER  FOOTER  FOOTER  FOOTER  */

footer{
    position: relative; 
    color:var(--sand);
    width:100vw;
    background-image:url('../assets/pattern.jpg');
    background-size:cover; background-position:center; background-repeat:no-repeat;
    overflow: hidden;
    padding: 10vh 0;
    z-index: 1;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;left: 0;
    width: 100%;height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.footer-container{
    width: 70%;
    margin: auto;
    display:flex; justify-content: space-between;
}

footer .logo{width: 20vw;}

footer .container-logo, .container-info{
    display: flex; flex-direction: column; justify-content: space-between;
}
.container-info{align-items: end;}

.container-info-text{
    display:flex; flex-direction: column; gap:30px;
    margin-top: 30px;
}

.container-logo-block{
    margin-top: 70px;
}

.container-info-block{text-align: end;}

.container-info-icon{
    display:flex; gap:15px;
}

.container-info-icon img{
    width: 30px;
}

footer p{
    font-size:18px; font-family:'Neulis Thin';
}

@media (hover: hover) and (orientation: landscape) and (min-width: 500px) {
    nav a:hover{
        color: white !important;
        border-bottom: 1px solid white;
        transition: 1s ease-in-out;
    }

    .black-hover:hover{
        color: black !important;
        border-bottom: 1px solid black;
        transition: 1s ease-in-out;
    }

    nav .img:hover{
        border: 1px solid transparent!important;
    }

    #start a:hover{
        border:1px solid var(--sand);
        background-color:var(--sand);
        color:black;
        transition: 0.7s ease-in-out;
    }

    
}