:root{
    --l-golden: #f4eedc;
    --violet: rgba(58,29,61,1);
    --orange: rgba(195,96,39,1);
    --d-overlay: #282828;
    --l-overlay: #f5f5f5;
    --bg-body: #f5f5f6;
    --bg-footer: #141414;
    --black-text: #282828;
    --grey-text: #585858;
    --light-text: #fcfbf1;
}

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

.body{
    overflow-x: hidden;
    
}

h1{
    text-transform: uppercase;
    color: var(--light-text);
    font-size: 1.7rem;
    text-align: center;
}

p{
    line-height: 1.3;
}

.image-panel{
    background-image: url(images/bokeh_shara2.jpg);
    background-size: cover;
    width: 100%;
    height: 10em;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-panel::after{
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.2;
    background-color:  var(--l-overlay);
}

/*-----KDO JSEM PAGE----*/

.aboutme-page{
    width: 90%;
    margin: 3em auto;
}

.foto{
    width: 95%;
    object-fit: cover;
    margin: 1em auto;
    border-radius: 2px;
}

.aboutme-page  >h3{
    text-align: center;
    margin-top: 2em;
}

.aboutme-page ul{
    line-height: 1.6;
}

.aboutme-page li{
    padding-bottom: .5em;
}

/*-----REFERENCE PAGE-----*/

.testimonials-page{
    width: 100%;
    margin: 1em auto;

}

.card-reference{
    width: 95%; 
    margin: 1em auto;
    background-color: var(--bg-body);
    display: flex;
    justify-content: start;
    position: relative;
    padding: 2em;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);

}

.round-client-photo{
    width: 7em;
    clip-path: circle(50% at 50% 50%);
    object-fit: cover;
    position: absolute;
    top: 0.5em;
    left:0.5em;
    border: 2px solid var(--violet);
    border-radius: 50%;
    
}

.reference-card-text{
    display: flex;
    flex-direction: column;
    align-items: end;
}

.reference-card-text > h2{
    font-size: 1.2rem;
    margin-top: -1em;
}

.reference{
    background: linear-gradient(rgba(201,95,17,0.5) 30%, rgba(226,172,63,0.5));
    border-radius: 0 30% 0 30% / 0 20% 0% 20%;
    background-clip: border-box;
    padding: 1em 1.5em;
    width: 80%;
    text-align: left;
    text-indent: 1em;
    text-align-last: center;

}

.quote1, .quote2, .quote3, .quote4, 
.quote5{
    position: absolute;
    fill: var(--black-text);
}

.quote1{
    right: 6%;
    bottom: 2%;
}

.quote2{
    right: 6%;
    bottom: 3%;
}

.quote3{
    right: 6%;
    bottom: 3%;
}

.quote4{
    right: 6%;
    bottom: 3%;
}

.quote5{
    right: 6%;
    bottom: 3%;
}

/*-----KONTAKT-----*/


.contact-page{
    width: 80%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
    padding: 3em 0;
}

.contact-page h2{
    font-size: 1.2rem;

}

.location, .phone, 
.email, .opening-hours{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.location > address {
    font-style: normal;
}

.location address > a{
    color: var(--black-text);
    padding: 0 .6em;
}

.location address > a:hover,
.location address >a:active{
    color: var(--grey-text);
    padding: 0 .5rem;
    border-left: 1px solid var(--violet);
    border-right: 1px solid var(--violet);
}

.location p{
    text-align: center;
    color: var(--grey-text);
    font-size: .9rem;
    margin-top: .7em;
}

.phone address a{
    color: var(--black-text);
}

.phone address > a:hover,
.phone address > a:active{
    color: var(--grey-text);
    padding: 0 .5rem;
    border-left: 1px solid var(--violet);
    border-right: 1px solid var(--violet);
}

.email address a{
    color: var(--black-text);
    padding: 0 .5em;
}

.email address > a:hover,
.email address > a:active{
    color: var(--grey-text);
    padding: 0 .5em;
    border-left: 1px solid var(--violet);
    border-right: 1px solid var(--violet);
}

svg{
    width: 4em;
}

/*-----CENÍK-----*/

.prices-page{
    width: 90%;
    margin: 1em auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3em;
}

.price-card{
    width: 60%;
    height: 24em;
    padding: 1em;
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 20px;
    text-align: center;
    transition: all .3s ease-in;
}

.price-card:hover,
.price-card:active{
    transition: all .3s ease-in;
    transform: translateY(-15px);
}

.price-card > h2 {
    font-size: 1.2rem;
}

.price-card > :nth-child(2){
    font-weight: 900;
    font-size: 1.1rem;
    width: 4em;
    border-bottom: 1px solid var(--black-text);
    border-top: 1px solid var(--black-text);
}

.price-card > :nth-child(3){
    color: #585858;
}

.yellow{
    background-color: rgba(226,172,63, .3);
    margin-bottom: -50px;
    z-index: 0;
}

.yellow > button{
    all: unset;
    
    border-radius: 10px;
    width: 6em;
    height: 2em;
    padding: .5em 1em;
    text-transform: uppercase;
    text-align: center;
    margin-top: -1em;
    transition: .3s;
    cursor: pointer;
    transition: all .3s ease-in-out;
    
    background: #efdfbf;
box-shadow: inset 20px 20px 55px #cbbea2,
            inset -20px -20px 55px #ffffdc;
}

.yellow > button:hover,
.yellow > button:active{
    transition: all .3s ease-in-out;
    border-radius: 10px;
    background: linear-gradient(145deg, #ffefcc, #d7c9ac);
box-shadow:  20px 20px 60px #cbbea2,
             -20px -20px 60px #ffffdc;
            
}

.orange{
    background-color: rgba(220,110,35, .3);
    margin-bottom: -50px;
    z-index: 1;
}

.orange > button{
    all: unset;
    
    border-radius: 10px;
    width: 6em;
    height: 2em;
    padding: .5em 1em;
    text-transform: uppercase;
    text-align: center;
    transition: .3s;
    cursor: pointer;
    transition: all .3s ease-in-out;

    background: #edccb6;
    box-shadow: inset 20px 20px 55px #c9ad9b,
        inset -20px -20px 55px #ffebd1;
}

.orange > button:hover,
.orange > button:active{
    transition: all .3s ease-in-out;
    background: linear-gradient(145deg, #fedac3, #d5b8a4);
    box-shadow:  20px 20px 55px #c9ad9b,
             -20px -20px 55px #ffebd1;
}

.purple{
    background-color: rgba(58,29,61, .3);
    z-index: 2;
}

.purple > button{
    all: unset;
    
    margin-top: 4em;
    border-radius: 10px;
    width: 6em;
    height: 2em;
    padding: .5em 1em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease-in-out;
    
    background: #bdb4be;
    box-shadow: inset 20px 20px 55px #a199a2,
            inset -20px -20px 55px #d9cfdb;
}

.purple > button:hover,
.purple > button:active{
    transition: all .3s ease-in-out;
    background: linear-gradient(145deg, #cac1cb, #aaa2ab);
    box-shadow:  20px 20px 55px #a199a2,
             -20px -20px 55px #d9cfdb;
}

/*-----MASAZE-----*/ /*-----BODYWORK-----*/

.massage-guidepost > ul{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-top: 2em;
}

.massage-guidepost a{
    padding: 0 .5em;
}


.massage-guidepost a:hover,
.massage-guidepost a:active{
    border-left: 1px solid var(--violet);
    border-right: 1px solid var(--violet);
}

.massage-info{
    width: 90%;
    margin: 0 auto;
    margin-top: 3em;
    margin-bottom: 2em;
}

.massage-types{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 3em;
    display: grid;
    grid-template-columns: 1fr;
}

.massage-description{
    padding-top: 2em;
    padding-bottom: .5em;
}

.massage-description h2{
    padding-bottom: 1em;
}

.image{
    background-position: center;
    background-size: cover;
    min-height: 20em;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.grid-image1{
    background-image: url(images/klasicka-masaz-compressed.jpg);
}

.grid-image2{
    background-image: url(images/relaxacni-psychosomaticka-masaz.jpg);
}

.grid-image3{
    background-image: url(images/havajska-masaz.jpg);
}

.grid-image4{
    background-image: url(images/shiatsu-compressed.jpg);
    background-position: bottom;
}

.grid-image5{
    background-image: url(images/reflexni_terapie-compressed.jpg) ;
}






@media screen and (min-width: 35.5em){

    /*---REFERENCE----*/

    .cards-carousel-container{
        display: flex;
        flex-flow: row wrap;

    }

    .card-reference{
        flex-basis: 60%;
    }

    .round-client-photo{
        width: 7em;
    }

    .reference{
        width: 85%;
    }
    
}


@media screen and (min-width: 48em){
    
    /*---KDO JSEM---*/

    .foto{
        width: 70%;
        display: block;
        margin: 1em auto;
    }

    /*---REFERENCE---*/

    .cards-carousel-container{
        width: 80%;
        margin: 0 auto;
    }   

    .reference{
        width: 90%;
    }

    .quote1{
        right: 4%;
        bottom: 4%;
    }
    
    .quote2{
        right: 4%;
        bottom: 5%;
    }
    
    .quote3{
        right: 4%;
        bottom: 5%;
    }
    
    .quote4{
        right: 4%;
        bottom: 5%;
    }
    
    .quote5{
        right: 4%;
        bottom: 5%;
    }
}

@media screen and (min-width: 64em){

    /*---KDO JSEM---*/

    .foto-container{
        grid-row: 1/  span 3;
        grid-column: 2/ span 1;
    }

    .aboutme-page{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
    }

    .aboutme-page h3{
        grid-column: 1/3;
    }

    .aboutme-page ul{
        grid-column: 1/3;
        place-self: center;
    }
      
      
    /*---MASAZE, BODYWORK---*/

   

    .massage-types{
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 25em;
        gap: 2em;
    }

    .grid-item2{
        grid-column: 2/3;
    }

    .grid-image2{
        grid-row: 2/3;
    }

    .grid-image4{
        background-position: bottom;
    }
      
    .grid-image5{
        grid-row:  2/3;
    }

    /*---REFERENCE---*/

    .card-reference{
        flex-basis: 45%;
    }

    .reference{
        padding-top: 2em;
    }

    .quote1, .quote2, .quote3, .quote4, .quote5{
        right: 5%;
    }

    .quote2{
        bottom: 41%;
    }

    .quote4{
        bottom: 12%;
    }
    
    /*---CENÍK---*/

    .prices-page{
        flex-direction: row;
    }

    .price-card:hover,
    .price-card:active{
        transition: .3s;
        transform: translateX(15px);
    }
    
    .yellow,
    .orange{
        margin-bottom: 0;
    }

    /*---KONTAKT---*/

    .contact-page{
        flex-direction: row;
        justify-content: space-evenly;
        gap: 2em;
        min-height: 43dvh;
    }

    .location{
        text-align: center;
    }
}

@media screen and (min-width: 80em){
    .aboutme-page{
        width: 70%;
    }

    .massage-info{
        width: 80%;
        margin: 2em auto;
    }

    .massage-types{
        width: 80%;
        margin: 3em auto;
    }

    .cards-carousel-container{
        width: 70%
    }

    .round-client-photo{
        width: 7.3em;
    }

    .quote2{
        bottom: 35%;
    }

    .prices-page{
        width: 80%;
    }

}