@charset "utf-8";

/* CSS Document */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body,
html {
	position: relative;
	width: 100%;
}

body,
td,
th,
#submitButton,
textarea,
input,
select {
	color: #3a3a3a;
	font-size: calc(16px + (16 - 16) * ((100vw - 640px) / (1920 - 640)));
	font-weight: 400;
	font-style: normal;
	font-family: "Inter", sans-serif;
	line-height: 1.5;

}

.description {
	padding-top: 0%;
	padding-bottom: 0%;
}

strong {
	font-weight: 600;
}

h1 {
	font-size: calc(40px + (60 - 40) * ((100vw - 640px) / (1920 - 640)));
	font-family: "Merriweather", serif;
	line-height: 1.3;
	font-weight: 800
}

h2 {
	font-size: calc(30px + (45 - 30) * ((100vw - 640px) / (1920 - 640)));
	font-family: "Merriweather", serif;
	line-height: 1.3;
}

h3 {
	font-size: calc(25px + (30 - 25) * ((100vw - 640px) / (1920 - 640)));
	font-family: "Merriweather", serif;
	line-height: 1.3;
}

h4 {
	font-size: calc(16px + (18 - 16) * ((100vw - 640px) / (1920 - 640)));
	font-family: "Merriweather", serif;
	line-height: 1.3;

}


.but {
	position: relative;
	z-index: 2;
	padding: 8px 25px;
	font-size: clamp(14px, 2vw, 16px);
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
	text-transform: uppercase;
	border-radius: 50px;
	display: inline-block;
	font-weight: 600 !important;
	text-decoration: none;
	white-space: nowrap;
	background-color: #c6b7aa;
	color: #fff
}

.but:hover {
	background-color: #333;
	color: #fff !important;
	text-decoration: none !important;
	transition: background-color 0.3s, color 0.3s;
}

a {
	color: #3a3a3a;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #000;
}

a:focus {
	text-decoration: none;
	color: #000;
}

.content {
	padding-top: 60px;
	padding-bottom: 60px;
}

@media(max-width:991px) {
	.content {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

.padding-x {
	padding-left: 8vw;
	padding-right: 8vw;
}

@media(max-width:1367px) {
	.padding-x {
		padding-left: 5vw;
		padding-right: 5vw;
	}
}

@media(max-width:991px) {
	.padding-x {
		padding-left: 6vw;
		padding-right: 6vw;
	}
}

.title {
	text-wrap: balance;
	font-weight: 300
}


/*desctop navigation*/
.navbar {
	position: inherit
}

.navigation {
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
	z-index: 10000 !important;

}

@media(max-width:991px) {
	.navigation .padding-x {
		padding-left: 3vw;
		padding-right: 3vw;
	}
}

.navigation li {
	list-style: none;
}

.navigation .nav-link {
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: 500;
	text-transform: uppercase;
}

.navigation .navbar-nav .nav-link.active,
.navigation .navbar-nav .nav-link.show {
	color: #ab9681;
}

.navigation a:hover.nav-link,
.navigation a:focus.nav-link {
	color: #ab9681;
	text-decoration: none;
}

.navigation .phone a {
	text-decoration: none;
}

.navigation .phone a span {
	text-decoration: none;
	font-size: 16px
}

.navigation .phone .bi-telephone {
	font-size: 24px;
	color: #ab9681;

}


.navigation .bi-list {
	font-size: 32px;
}

.navigation .bi::before {
	vertical-align: -.160em !important;
}

.navigation .navbar-expand .navbar-nav {
	width: 100%;
}


.navigation .dropdown-toggle::after {
	font-family: bootstrap-icons !important;
	display: inline-block;
	margin-left: .455em;
	vertical-align: -1px;
	content: "\F282";
	border: none;
	font-size: 12px
}


.mobile-menu.offcanvas {
	width: 100% !important;
	z-index: 10040;
	background-color: #fef8ef;
}

.offcanvas-backdrop {
	z-index: 10000;
}

.mobile-menu .nav-link a {
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-family: "Merriweather", serif;

}

.mobile-menu .nav-link {
	color: #333;
	text-decoration: none;
	padding-top: 15px;
	padding-bottom: 15px;


}

.mobile-menu .nav-link:not(:last-child) {

	border-bottom: 1px #D4D4D4 dashed;

}

.mobile-menu a:hover {
	text-decoration: none;
	background: none
}

.mobile-menu .dropdown-toggle::after {
	font-family: bootstrap-icons !important;
	display: inline-block;
	margin-left: .255em;
	vertical-align: -4px;
	content: "\F282";
	border: none
}


.mobile-menu .offcanvas-header {
	padding-bottom: 0px
}


.title-box h4 {
	color: #ab9681;
	text-transform: uppercase;
	font-weight: 300;
	line-height: 1
}

.title-box h2 {
	font-weight: 300;
	line-height: 1
}


.intro {
	background-color: #fef8ef;
	position: relative;
	overflow: hidden
}

.intro .box img {

	max-width: 15vw;
	height: auto
}

.intro .icon-name {
	font-size: calc(11px + (11 - 11) * ((100vw - 640px) / (1920 - 640)));
	font-family: "Merriweather", serif;
}


.intro .water {
	position: absolute;
	z-index: 1;
	right: 2px;
	bottom: 2px;

}

.intro .water img {
	max-width: 20vw
}


.accommodation {
	background-color: #c6b7aa;
	color: #fef8ef;
	font-family: "Merriweather", serif;
}

.accommodation a {
	color: #fef8ef
}

.accommodation a:hover:not(.link) {
	color: #fef8ef;
	text-decoration: none
}

.accommodation a:hover .link {
	text-decoration: underline
}

.accommodation .room-description {
	font-weight: 300;
	letter-spacing: 1px;
	font-size: 15px;
}

.accommodation .persons {
	font-weight: 500
}

.accommodation .hover-div {
	border: 10px solid #fef8ef
}

.location {
	background-color: #fef8ef;
}

.location ul {
	padding-left: 1rem;
}

.location li {
	padding-top: 6px;
	padding-bottom: 6px
}

@media(min-width:991px) {
	.location.content {
		padding-top: 100px;
		padding-bottom: 100px;
	}
}

.location .pict-description {
	font-size: calc(18px + (22 - 18) * ((100vw - 640px) / (1920 - 640)));
	font-family: "Merriweather", serif;
	line-height: 1.3;
	padding-top: 5px;
	padding-bottom: 5px;
	opacity: 0.5
}


@media(min-width:991px) {
	.location .sticky-col {
		position: sticky !important;
		top: 18vh;
		/* Разстояние от горната част на екрана */
		z-index: 10;
		/* По избор, за да стои над други елементи */
	}

}


.map {
	height: 90vh;

}

@media (min-width: 991px) {
	.map {
		height: 60vh;

	}
}


.rooms {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90vh
}

@media (max-width: 991px) {

	.rooms,
	.rooms img {
		height: 40vh
	}
}

.rooms h1 {
	position: absolute;
	color: #fff;
	/* text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);*/
}

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

}

.gallery {
	background-color: #c6b7aa;
	color: #fef8ef;
}

@media (max-width: 575px) {
	.gallery.padding-x {
		padding-left: 3vw;
		padding-right: 3vw;
	}
}

.gallery .item {
	border: 5px solid #FEF8EF
}

@media (min-width: 991px) {
	.gallery .item img {
		height: 80vh;
		width: 100%;
		object-fit: cover
	}
}


.contacts .form-control {
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	border-radius: 0px;

}

/*.contacts .form-control::placeholder {
	color: var(--bs-secondary-color);
	opacity: 1;
	font-size: 13px
}*/


/* carousel ------*/
.slider.owl-theme .owl-nav {
	margin-top: 0px
}

.slider .owl-nav div.owl-prev,
.slider .owl-nav div.owl-next {
	color: #fff;
	font-size: 20px;
	margin-top: -20px;
	position: absolute;
	top: 50%;
	text-align: center;
	line-height: 5px !important;
	opacity: 0;
	width: 60px;
	height: 60px;
	background-color: #A48D78;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slider .owl-nav div.owl-prev {
	left: 5%;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
}

.slider .owl-nav div.owl-next {
	right: 5%;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
}

.slider:hover .owl-nav div.owl-next {
	right: -2%;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	opacity: 1;
}

.slider:hover .owl-nav div.owl-prev {
	left: -2%;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	opacity: 1;
}

.slider:hover .owl-nav div.owl-next:hover,
.slider:hover .owl-nav div.owl-prev:hover {
	color: #fff;
	background-color: #4E4E4E;
	border: none;
}


/* carousel ------*/

/* carousel ------*/


.owl-theme.slider .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background-color: #888170;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background-color: #CCBFA4;
}

.owl-theme.slider .owl-nav.disabled+.owl-dots {
	top: 40px;
	position: relative;
	margin-top: 0px;
}

.owl-theme .owl-nav.disabled+.owl-dots {
	margin-top: -30px;
	position: relative
}

/* carousel ------*/

.sub-footer {
	background-color: #fef8ef;
	font-size: 12px;
	text-transform: uppercase;
	padding-bottom: 20px;
	padding-top: 20px
}

.sub-footer a {
	color: rgba(255, 255, 255, 0.40);
}


/*pdp*/


.contact-form {
	background-color: #fff7ed;
	border-top-left-radius: 5vmax;
	border-top-right-radius: 5vmax;
}

.contact-form .form-control {
	padding: .600rem 1rem;
	font-size: 14px;
	border-radius: 25px;
	border-color: rgba(0, 0, 0, 0.3);
}

.contact-form .form-label {
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 500
}

.contact-form .form-check-label {
	font-size: 12px;
	font-weight: 500
}

.contact-form .form-check-label a {
	text-decoration: underline
}

.contact-form .form-check-input {
	width: 0.8em;
	height: 0.8em;
	margin-top: 0.4em;
	border-color: rgba(0, 0, 0, 1);
}

@media (max-width: 767px) {
	.contact-form button {
		width: 100%
	}
}


/* ! Animations */
.hover-div {
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

.hover-div img {
	width: 100%;
	transition: all ease-in-out .7s;
}

.hover-div:hover img {
	transition: all ease-in-out .5s;
	transform: scale(1.2);
}

/* ! Animations */

input.error {
	border-bottom-color: #c00 !important;
}

input[type=checkbox].error {
	border-color: #c00 !important;
}

select.error {
	border-bottom-color: #c00 !important;
}

textarea.error {
	border-bottom-color: #c00 !important;
}

label.error {
	display: block;
	color: #c00;
	font-size: 0.75rem !important;
	font-weight: normal;
	padding: 0px !important;
	margin-top: 0px;
	background: none;
}

#ui-datepicker-div {
	z-index: 2 !important;
}