:root{
	--pri-color: #592036;
	--sec-color: orange;
	--head-color: white;
	background: #d3a297;
	font-family: "Bellota";
	background-color: #d3a297;
	background-image: url("data:image/svg+xml,%3Csvg width='48' height='64' viewBox='0 0 48 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 28v-4L36 12 24 24 12 12 0 24v4l4 4-4 4v4l12 12 12-12 12 12 12-12v-4l-4-4 4-4zM8 32l-6-6 10-10 10 10-6 6 6 6-10 10L2 38l6-6zm12 0l4-4 4 4-4 4-4-4zm12 0l-6-6 10-10 10 10-6 6 6 6-10 10-10-10 6-6zM0 16L10 6 4 0h4l4 4 4-4h4l-6 6 10 10L34 6l-6-6h4l4 4 4-4h4l-6 6 10 10v4L36 8 24 20 12 8 0 20v-4zm0 32l10 10-6 6h4l4-4 4 4h4l-6-6 10-10 10 10-6 6h4l4-4 4 4h4l-6-6 10-10v-4L36 56 24 44 12 56 0 44v4z' fill='%23EFD8C9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

html {
}
.logo{
	margin: 10px;
	font-size: 1.5rem;
	font-weight: bold;
  	color: var(--pri-color);
}
.avatar{
	object-fit: cover;
  	width: 100%;
	aspect-ratio: 1;
  	border-radius: 50%;
}
.mail-icon-bg{
	position: relative;
	top: -40px;
	background: white;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 60px;
}
.header-background{
	position: absolute;
	z-index: -100;
	background-image: url(../img/bg.jpg);
	width: 100%;
	text-align: center;
	height: 100vh;
	overflow: hidden;
	top: 0;
	background-size: cover;
	-webkit-mask-image: linear-gradient(to top, transparent, black 3rem); 
    mask-image: linear-gradient(to top, transparent, black 3rem);;
}
.header-bg-text{
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}
.background {
    position: fixed;
    height: 100%;
    width: 100%;
}
.blur-background {
	background: rgba(255, 255, 255, 0.1); /* Poloprůhledné bílé pozadí */
	backdrop-filter: blur(2px); /* Rozmazání */
	-webkit-backdrop-filter: blur(2px); /* Rozmazání pro Safari */
	padding: 20px;
	border-radius: 20px;
}
.bg-image {
    z-index: -2;
    background-image: url('../img/bg.jpg');
    background-size: cover;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    top: 0;
}

.bg-cover {
    background-color: rgba(43,29,20,0.4);
    z-index: -1;  
    top: 75px;
}

.header-bg-white {
    background-color: rgb(255,255,255);
    border-radius: 20px;
}

.container-bg {  
	background-color: rgba(248, 231, 219, 0.4);
	border-radius: 20px;
	backdrop-filter: blur(1.5px);
}
.massage-card{
}
.prices{
	justify-content: center;
}
body {
    background-color: transparent !important;
    font-family: "Bellota";
}

.ref-border{
    border: 1px solid;
}

.headline {
    color: var(--pri-color);
    padding: .3rem 0 .3rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.headline h1 {
    color: #382000;
}

.headline h3 {
    margin: 0;
    font-size: 13pt;
    font-weight: bold;
}

.ref-block {
    background-color: rgb(238, 238, 238);
}

.about-title-block {
    width: 50%;
    border-bottom: 2px solid var(--pri-color);
    border-top: 2px solid var(--pri-color);
}

.about-title {
    font-size: 20pt;
    color: var(--pri-color);
    text-align: center;
    font-weight: bold;
    transition: 0.5s;
    position: relative;
    text-decoration: none;
}

.about-title:hover{
    color: #6a4a5b;
    text-decoration: none;
}   

  
.about-title::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #6a4a5b;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
  
.about-title:hover::before {
    transform: scaleX(1);
}
  
.map {
    max-width: 600px !important;
}

body {
    color: #382000 !important;
    font-family: "Bellota";
}

.tbd-poukazy {
    height: 100vh;
}

.faq-top {
    background-color: #eaeaea;
    padding: .5rem 1rem;
    border-radius: .25rem;
}
.titles-massage{
	text-align: center;
}
.images-massage{
    aspect-ratio: 1/1;
    object-fit: cover;
	border-radius: 50%;
}
.places {
	margin-top: 2rem;
}

.places h2 {
	text-align: center;
}


@media only screen and (max-width: 767px) {
    .me-photo {
        min-height: 570px !important;
    }
}

@media only screen and (min-width: 768px) {
    .me-photo {
        min-height: 869px !important;
    }
}

@media only screen and (min-width: 992px) {
    .me-photo {
        min-height: 570px !important;
    }
}

.contact-form .form-control{
    border-radius: .8rem;
}

.contact-image img{
    width: 11%;
    margin-top: -4%;
}

.contact-form form{
    padding: 11%;
}

.contact-form form .row{
    margin-bottom: -7%;
}

.contact-form h3{
    margin-bottom: 8%;
    margin-top: -10%;
    color: #382000;
}

.contact-form .btnContact {
    width: 50%;
    border: none;
    border-radius: 1rem;
    padding: 1.5%;
    background: var(--pri-color);
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.btnContactSubmit {
    width: 50%;
    border-radius: 1rem;
    padding: 1.5%;
    color: #fff;
    background-color: var(--pri-color);
    border: none;
    cursor: pointer;    
}

.btnContact {
    transition: 0.5s;
}

.btnContact:after {
    position: absolute;
    opacity: 0;  
    top: 14px;
    right: -20px;
}
    
.btnContact:hover{
    padding-right: 24px;
    padding-left: 8px;
    background-color: var(--pri-color);
}
    
.btnContact:hover:after {
    opacity: 1;
    right: 10px;
}

.contact-headline {
    font-size: 18pt;
    color: var(--pri-color);
    padding-left: 1rem;
    margin: auto 1rem;
    border-bottom: 1px solid;
    padding-right: 1rem;
}

.contact-text {
    padding-left: 4rem;
    padding-top: .5rem;
    padding-bottom: 1.5rem;
}

#header-offset {
    padding-top: 1rem;
}

.faq {
    width: 100%;
    text-align: left !important;
}

.phone {
    color: black;
}

.contact-width {
    width: 250px;
}
#header {
    transition: 0.5s;
}

#topbar {
    transition: 0.5s;
}

#topbar h6 {
    text-align: left;
    margin-bottom: .25rem;
    font-weight: bold;
}

#topbar svg {
    margin-right: 1rem;
}

#navbar-collapse {
    flex-grow: 0;
}

#header-offset {
    margin-top: 8.2rem;
}

@media only screen and (max-width: 991px) {
    #header-offset {
        margin-top: 3.5rem;
    }
    #topbar {
        display: none;
    }
    .bg-cover {
        top: 0;
    }
    html, body {
        overflow-x: hidden;
    }
}

.hover-underline-animation {
    display: inline-block;
    position: relative;
    color: var(--pri-color);
}

.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--pri-color);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.nav-link-active {
    color: var(--pri-color) !important;
    font-weight: bold;
}

.nav-border-right {
    /* border-right: 1px solid black; */
}

.nav-border-bottom {
    /* border-bottom: 1px solid black; */
}
footer {
    background-color: var(--pri-color);
    color: white;
    width: 100%;
}
footer a{
	color: white;
}
footer > div {
	padding-top: 1rem;
}
.footer-1 {
    background-color: rgba(255,255,255,0.8);
    width: 100%;
}

.footer-1-text {
    font-weight: bold;
    color: var(--pri-color);
}
.footer-1-text:hover {
    color: var(--pri-color);
}
.flash-message {
    background-color: var(--pri-color);
    color: white;
    border-radius: 10px;
}