:root {
--accent-color: #C39E88;
} @font-face {
font-family: 'Bicubik';
src: url(//atmospherevillage.com/wp-content/themes/astra-child/fonts/ofont.ru_Bicubik.woff2) format('woff2'),
url(//atmospherevillage.com/wp-content/themes/astra-child/fonts/ofont.ru_Bicubik.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
html,
body{
background:#f8f8f8 !important;
overflow-x:hidden;
} body,
p,
a,
.main-nav,
.main-nav a,
.booking-btn {
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none !important;
}  button:focus,
button:hover,
button:active,
button:focus-visible,
.ast-button:hover,
.ast-button:focus,
.ast-custom-button:hover,
.ast-custom-button:focus,
#ast-scroll-top:hover,
#ast-scroll-top:focus {
background-color: inherit !important;
border-color: inherit !important;
color: inherit !important;
} .accom-single button:not(.mobile-booking-btn):not(.booking-sheet-close),
.accom-single button:not(.mobile-booking-btn):not(.booking-sheet-close):hover,
.accom-single button:not(.mobile-booking-btn):not(.booking-sheet-close):focus,
.accom-single button:not(.mobile-booking-btn):not(.booking-sheet-close):focus-visible,
.accom-single button:not(.mobile-booking-btn):not(.booking-sheet-close):active,
.accom-lightbox button,
.accom-lightbox button:hover,
.accom-lightbox button:focus,
.accom-lightbox button:focus-visible,
.accom-lightbox button:active {
background: none ;
background-color: transparent;
border: none ;
border-color: transparent ;
outline: none ;
box-shadow: none ;
color: inherit ;
-webkit-tap-highlight-color: transparent;
} #ast-scroll-top,
#ast-scroll-top:hover,
#ast-scroll-top:focus {
background-color: var(--accent-color) !important;
border-color: var(--accent-color) !important;
} .split-container {
display: flex;
width: 100%;
height: 100vh;
position: relative;
margin: 0;
padding: 0;
} .split {
flex: 1;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
transition: flex 0.6s ease-in-out;
} .split::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: #000;
z-index: 100;
pointer-events: none;
}
.split.left {
background-image: url(//atmospherevillage.com/wp-content/uploads/2026/01/Villa.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.split.left::after {
left: 0;
transform: translateX(0);
}
.split.right {
background-image: url(//atmospherevillage.com/wp-content/uploads/2026/01/Villa-s-dvumya-spalnyami.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.split.right::after {
right: 0;
transform: translateX(0);
} .split-container.loaded .split.left::after {
animation: slideLeftOut 0.6s ease 1.2s forwards;
}
.split-container.loaded .split.right::after {
animation: slideRightOut 0.6s ease 1.2s forwards;
}
@keyframes slideLeftOut {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slideRightOut {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
} .split::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
z-index: 1;
pointer-events: none;
opacity: 1;
transition: opacity 0.4s ease;
}  .split-container::before {
content: '';
position: absolute;
width: 2px;
height: calc(50vh - 120px);
background: rgba(255, 255, 255, 0.9);
top: 0;
left: 50%;
transform: translateX(-50%) scaleY(0);
transform-origin: bottom;
z-index: 101;
pointer-events: none;
transition: left 0.6s ease-in-out;
} .split-container::after {
content: '';
position: absolute;
width: 2px;
height: calc(50vh - 120px);
background: rgba(255, 255, 255, 0.9);
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleY(0);
transform-origin: top;
z-index: 101;
pointer-events: none;
transition: left 0.6s ease-in-out;
} .split-container.loaded::before {
animation: lineGrowDown 0.6s ease 0.6s forwards;
}
.split-container.loaded::after {
animation: lineGrowUp 0.6s ease 0.6s forwards;
}
@keyframes lineGrowDown {
from {
transform: translateX(-50%) scaleY(0);
}
to {
transform: translateX(-50%) scaleY(1);
}
}
@keyframes lineGrowUp {
from {
transform: translateX(-50%) scaleY(0);
}
to {
transform: translateX(-50%) scaleY(1);
}
} .logo-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
z-index: 101;
cursor: pointer;
text-align: center;
transition: left 0.6s ease-in-out;
opacity: 0;
}
.split-container.loaded .logo-center {
animation: logoFadeIn 0.5s ease 0.3s forwards;
}
@keyframes logoFadeIn {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.logo-svg {
width: 300px;
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.6));
} .location-name {
position: absolute;
bottom: 60px;
width: 100%;
text-align: center;
font-family: 'Allura', cursive;
font-size: 72px;
font-weight: 400;
color: white;
margin: 0;
z-index: 2;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
opacity: 0;
}
.split-container.loaded .location-name {
animation: titleFadeIn 0.4s ease 1.8s forwards;
transition: opacity 0.4s ease;
}
@keyframes titleFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .arrow-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: auto;
z-index: 2;
opacity: 0;
filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.6));
pointer-events: none;
}
.split-container.loaded .arrow-hint {
animation: contentFadeIn 0.4s ease 1.8s forwards;
transition: opacity 0.4s ease;
}
@keyframes contentFadeIn {
from {
opacity: 0;
transform: translate(-50%, -50%) translateY(20px);
}
to {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
} .hover-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 3;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
width: 100%;
height: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(to top, rgb(0 0 0 / 40%) 0%, transparent 100%);
}
.hover-title {
font-family: 'Allura', cursive;
font-size: 8.125rem;
font-weight: 300;
margin: 0;
margin-bottom: 0;
color: #fff;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}
.hover-description {
font-size: 1.75rem;
margin: 0 0 30px 0;
line-height: 1.6;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
max-width: 500px;
}
.hover-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 40px;
background: rgba(195, 158, 136, 0.85); color: white;
text-decoration: none;
border: 2px solid white;
border-radius: 50px;
font-size: 1.25rem;
position: relative;
overflow: hidden;
z-index: 1;
}
.hover-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--accent-color);
clip-path: inset(0 100% 0 0);
transition: clip-path 0.4s ease;
z-index: -1;
border-radius: 50px;
}
.hover-button::after {
content: '';
width: 24px;
height: 24px;
background-image: url(//atmospherevillage.com/wp-content/uploads/2025/11/btn-str.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.hover-button:hover::before {
clip-path: inset(0 0 0 0);
}
.hover-button:not(:hover)::before {
clip-path: inset(0 100% 0 0);
}
.hover-button:hover {
color: white;
}
.hover-address {
display: block;
font-size: 1rem;
margin: 20px 0 0 0;
color: white;
text-align: center;
line-height: 1.5;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
cursor: pointer;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.hover-address:hover {
color: var(--accent-color);
text-shadow: 0 2px 15px rgba(195, 158, 136, 0.8);
} .map-link-village,
.map-link-sofia {
cursor: pointer !important;
transition: color 0.3s ease, opacity 0.3s ease;
}
.map-link-village:hover,
.map-link-sofia:hover {
color: #fff !important;
opacity: 1;
}  .fullscreen-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
url(//atmospherevillage.com/wp-content/uploads/2025/12/Rectangle-14-min.jpg) center/cover no-repeat;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
overflow-y: auto;
}
.fullscreen-menu.active {
opacity: 1;
visibility: visible;
}
.fullscreen-menu-inner {
min-height: 100%;
display: flex;
flex-direction: column;
padding: 30px 50px 40px;
box-sizing: border-box;
} .menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
.menu-logo {
display: block;
}
.menu-logo img {
height: 50px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.fullscreen-menu.active .menu-logo img {
opacity: 1;
transform: translateY(0);
} .menu-logo-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
z-index: 10;
}
.menu-logo-container .menu-logo {
width: 250px;
height: auto;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.5s ease, transform 0.5s ease;
z-index: 2;
color: var(--accent-color);
}
.fullscreen-menu.active .menu-logo-container .menu-logo {
opacity: 1;
transform: scale(1);
} .menu-line {
position: absolute;
top: 50%;
height: 2px;
background: rgba(255, 255, 255, 0.8);
transform: translateY(-50%) scaleX(0);
transition: transform 0.6s ease 0.3s;
}
.menu-line-left {
right: calc(50% + 150px);
width: calc(50% - 150px);
transform-origin: right center;
}
.menu-line-right {
left: calc(50% + 150px);
width: calc(50% - 150px);
transform-origin: left center;
}
.fullscreen-menu.active .menu-line {
transform: translateY(-50%) scaleX(1);
}
.menu-close {
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 10px;
opacity: 0;
transform: rotate(-90deg);
transition: opacity 0.3s ease 0.2s, transform 0.4s ease 0.2s, color 0.3s ease;
}
.fullscreen-menu.active .menu-close {
opacity: 1;
transform: rotate(0);
}
.menu-close:hover {
color: var(--accent-color);
transform: rotate(90deg);
} .menu-nav {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
} .fullscreen-menu .menu-nav {
position: absolute;
top: calc(50% + 130px);
left: 50%;
transform: translateX(-50%);
width: 100%;
} .menu-nav ul,
.menu-nav-list {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px 40px;
align-items: center;
}
.menu-nav li,
.menu-nav-item {
margin: 0;
overflow: hidden;
}
.menu-nav li a,
.menu-nav-item a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 35px;
font-weight: 500;
color: #fff;
text-decoration: none;
padding: 10px 0;
position: relative;
opacity: 0;
transform: translateY(40px);
transition: color 0.3s ease, opacity 0.5s ease, transform 0.5s ease;
text-transform: uppercase;
letter-spacing: 1px;
} .menu-nav li:nth-child(1) a,
.menu-nav li:nth-child(2) a,
.menu-nav-item:nth-child(1) a,
.menu-nav-item:nth-child(2) a {
color: var(--accent-color);
} .fullscreen-menu.active .menu-nav li:nth-child(1) a,
.fullscreen-menu.active .menu-nav-item:nth-child(1) a { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.fullscreen-menu.active .menu-nav li:nth-child(2) a,
.fullscreen-menu.active .menu-nav-item:nth-child(2) a { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
.fullscreen-menu.active .menu-nav li:nth-child(3) a,
.fullscreen-menu.active .menu-nav-item:nth-child(3) a { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }
.fullscreen-menu.active .menu-nav li:nth-child(4) a,
.fullscreen-menu.active .menu-nav-item:nth-child(4) a { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }
.fullscreen-menu.active .menu-nav li:nth-child(5) a,
.fullscreen-menu.active .menu-nav-item:nth-child(5) a { opacity: 1; transform: translateY(0); transition-delay: 1.1s; }
.fullscreen-menu.active .menu-nav li:nth-child(6) a,
.fullscreen-menu.active .menu-nav-item:nth-child(6) a { opacity: 1; transform: translateY(0); transition-delay: 1.2s; }
.menu-nav li a::after,
.menu-nav-item a::after {
content: '';
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 60%;
height: 2px;
background: var(--accent-color);
transition: transform 0.3s ease;
}
.menu-nav li a:hover,
.menu-nav-item a:hover {
color: #fff;
}
.menu-nav li a:hover::after,
.menu-nav-item a:hover::after {
transform: translateX(-50%) scaleX(1);
} .menu-booking {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
}
.fullscreen-menu.active .menu-booking {
opacity: 1;
transform: translateY(0);
}
.menu-booking-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-booking-btn:hover {
background: var(--accent-color);
border-color: var(--accent-color);
transform: translateX(5px);
}
.menu-booking-btn svg {
transition: transform 0.3s ease;
}
.menu-booking-btn:hover svg {
transform: translateX(5px);
} .menu-contacts {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity 0.4s ease 0.6s;
}
.fullscreen-menu.active .menu-contacts {
opacity: 1;
}
.menu-contact-item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
transition: color 0.3s ease;
}
.menu-contact-item:hover {
color: var(--accent-color);
}
.menu-social {
display: flex;
gap: 15px;
}
.menu-social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #fff;
transition: all 0.3s ease;
}
.menu-social-btn:hover {
background: var(--accent-color);
transform: translateY(-3px);
}
.menu-social-btn svg {
width: 22px;
height: 22px;
}  .split.left.active {
flex: 1.5;
}
.split.left.active ~ .split.right {
flex: 0.5;
} .split.left.active .location-name,
.split.left.active .arrow-hint,
.split.left.active::before {
opacity: 0 !important;
} .split-container:has(.split.left.active) .split.right .arrow-hint {
opacity: 0 !important;
} .split.left.active .hover-content {
opacity: 1;
pointer-events: auto;
} .split-container:has(.split.left.active) .logo-center {
left: 75%;
}
.split-container:has(.split.left.active)::before {
left: 75%;
}
.split-container:has(.split.left.active)::after {
left: 75%;
} .split.right.active {
flex: 1.5;
}
.split-container:has(.split.right.active) .split.left {
flex: 0.5;
} .split.right.active .location-name,
.split.right.active .arrow-hint,
.split.right.active::before {
opacity: 0 !important;
} .split-container:has(.split.right.active) .split.left .arrow-hint {
opacity: 0 !important;
} .split.right.active .hover-content {
opacity: 1;
pointer-events: auto;
} .split-container:has(.split.right.active) .logo-center {
left: 25%;
}
.split-container:has(.split.right.active)::before {
left: 25%;
}
.split-container:has(.split.right.active)::after {
left: 25%;
} .site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9998;
transition: background 0.3s ease;
}
.site-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #FFFFFF;
opacity: 0.5;
}
.header-container {
display: grid;
grid-template-columns: 150px 1fr 150px;
align-items: center;
padding: 30px 10px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
} .burger-menu {
justify-self: start;
} .header-center {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
} .header-actions {
justify-self: end;
} .header-transparent {
background: rgba(0, 0, 0, 0.2);
}
.header-transparent .main-nav a {
color: white;
}
.header-transparent .booking-btn {
color: white;
border-color: white;
} .header-solid {
background: var(--accent-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-solid .header-container {
padding: 15px 10px;
}
.header-solid .header-logo img {
max-height: 50px;
}
.header-solid .burger-menu {
padding: 10px 14px;
}
.header-solid .burger-icon {
width: 30px;
height: 7px;
}
.header-solid .booking-btn {
padding: 7px 20px;
font-size: 14px;
}
.header-solid .phone-icon {
width: 24px;
height: 24px;
}
.header-solid .main-nav a {
color: #fff;
}
.header-solid .booking-btn {
color: #fff;
border-color: #fff;
} .burger-menu {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 24px;
border: 0.5px solid #fff;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s ease;
}
.burger-menu:hover {
background: rgba(255, 255, 255, 0.1);
}
.burger-icon {
width: 37px;
height: 8px;
display: block;
} .main-nav {
display: flex;
gap: 50px;
align-items: center;
}
.main-nav a {
font-size: 16px;
font-weight: 400;
text-decoration: none;
transition: opacity 0.3s ease;
}
.main-nav a:hover {
opacity: 0.7;
} .header-logo {
flex-shrink: 0;
}
.header-logo img {
height: auto;
display: block;
} .header-actions {
display: flex;
align-items: center;
gap: 20px;
} .booking-btn {
display: inline-block;
padding: 12px 37px;
border: 1px solid;
border-radius: 50px;
font-size: 16px;
font-weight: 400;
text-decoration: none;
transition: all 0.3s ease;
}
.booking-btn:hover {
background: rgba(255, 255, 255, 0.1);
} .phone-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
transition: opacity 0.3s ease;
}
.phone-icon:hover {
opacity: 0.7;
}
.phone-icon img {
width: 100%;
height: 100%;
display: block;
} .site-header.scrolled {
background: var(--accent-color) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.site-header.scrolled .header-container {
grid-template-columns: auto 1fr;
padding: 15px 50px;
gap: 30px;
} .site-header.scrolled .burger-menu {
display: none;
} .site-header.scrolled .header-center {
grid-column: 1;
justify-content: flex-start;
gap: 0;
} .site-header.scrolled .header-center .main-nav {
display: none;
} .site-header.scrolled .header-logo img {
max-height: 40px;
transition: max-height 0.3s ease;
} .site-header.scrolled .header-actions {
grid-column: 2;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 30px;
} .main-nav-scrolled {
display: none;
} .site-header.scrolled .main-nav-scrolled {
display: flex;
} .site-header.scrolled .booking-btn-normal,
.site-header.scrolled .phone-icon-normal {
display: none;
} .booking-btn-scrolled,
.phone-icon-scrolled {
display: none;
} .site-header.scrolled .booking-btn-scrolled,
.site-header.scrolled .phone-icon-scrolled {
display: inline-flex;
} .site-header.scrolled .booking-btn-scrolled {
padding: 8px 24px;
font-size: 14px;
} .site-header.scrolled .phone-icon-scrolled {
width: 24px;
height: 24px;
} .site-header.scrolled .main-nav {
gap: 25px;
} .site-header.scrolled .main-nav a {
color: white;
}  .village-page,
.sofia-page {
padding-top: 0;
min-height: 100vh;
} body:not(.page-template-page-village):not(.page-template-page-sofia) main {
padding-top: 120px;
} .site-footer{
background:#EBE4E0;
padding:40px 0 0;
}
.footer-container,
.footer-bottom-container{
max-width:1400px;
margin:0 auto;
padding:0 20px;
}
.footer-content{
display:flex;
align-items:stretch;
padding:40px 0;
}
.footer-line-vertical{
width:1px;
background:#997058;
}
.footer-logo-block{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:15px;
margin:0 100px;
}
.footer-logo-text{
display:flex;
flex-direction:column;
align-items:center;
}
.footer-logo-title{
font-size:24px;
font-weight:600;
color:#997058;
letter-spacing:3px;
}
.footer-logo-subtitle{
font-family:'Allura', cursive;
font-size:32px;
color:#997058;
margin-top:-5px;
}
.footer-info{
flex:1;
display:flex;
flex-direction:column;
gap:25px;
margin:0 40px 0 60px;
}
.footer-nav-row{
display:flex;
justify-content:space-between;
align-items:center;
}
.footer-menu{
display:flex;
gap:40px;
}
.footer-menu a{
font-size:20px;
color:#997058;
text-decoration:none;
}
.footer-menu a:hover{
color:#3d3d3d;
}
.footer-scroll-top{
background:none;
border:none;
cursor:pointer;
padding:0;
}
.footer-scroll-top:hover{
transform:translateY(-5px);
}
.footer-description{
font-size:16px;
color:#585858;
line-height:1.6;
max-width:400px;
}
.footer-contacts{
display:flex;
justify-content:space-between;
gap:30px;
}
.footer-contacts-col{
display:flex;
flex-direction:column;
gap:30px;
}
.footer-contact-item{
display:flex;
align-items:center;
gap:10px;
font-size:16px;
color:#585858;
}
.footer-contact-item a{
color:#585858;
text-decoration:none;
}
.footer-contact-item a:hover{
color:#997058;
}
.footer-contact-item svg{
flex-shrink:0;
width:30px;
height:30px;
}
.footer-social{
display:flex;
gap:15px;
}
.footer-social-link:hover{
transform:scale(1.1);
}
.footer-bottom{
background:#DCCEC6;
padding:20px 0;
}
.footer-bottom-container{
display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;
color:#585858;
}
.footer-bottom-container a{
color:#585858;
text-decoration:none;
}
.footer-bottom-container a:hover{
color:#997058;
} .video-wrapp{
position:relative;
overflow:hidden;
}
.video-player{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 0.3s ease;
z-index:1;
}
.video-play-btn{
transition:opacity 0.3s ease;
z-index:2;
} .mobile-navbar{
display: none;
position: fixed;
bottom: 10px;
margin: 0 10px;
left: 0;
right: 0;
background: #fff;
padding: 20px 0px 12px;
z-index: 9997;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
border-radius: 20px;
justify-content: space-around;
align-items: flex-end;
}
.mobile-navbar-item{
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
text-decoration:none;
color:#B09382;
font-size:12px;
}
.mobile-navbar-item svg{
width:34px;
height:24px;
}
.mobile-navbar-home{
display:flex;
align-items:center;
justify-content:center;  background:#B09382;
border-radius:50%;
border:none;
cursor:pointer;
padding: 15px;
margin-top:-30px;
box-shadow:0 4px 15px rgba(176,147,130,0.4);
}
.mobile-navbar-home svg{
width:28px;
height:28px;
} @media (max-width:768px){
.mobile-navbar{
display:flex;
} body:not(.page-template-page-village):not(.page-template-page-sofia) main {
padding-top: 40px;
} .video-wrapp{
height:60vh !important;
min-height:300px;
} .site-footer{
padding-bottom:100px;
}
.footer-container{
padding:0 10px;
}
.footer-content{
flex-direction:column;
padding:30px 0;
gap:30px;
} .footer-line-vertical{
display:none;
} .footer-logo-block{
margin:0;
align-items:center;
}
.footer-logo-block svg{
width:100px;
height:auto;
}
.footer-logo-title{
font-size:20px;
letter-spacing:2px;
}
.footer-logo-subtitle{
font-size:26px;
} .footer-info{
margin:0;
gap:20px;
} .footer-nav-row{
flex-direction:column;
gap:20px;
}
.footer-menu{
flex-wrap:wrap;
justify-content:center;
gap:15px 25px;
}
.footer-menu a{
font-size:16px;
}
.footer-scroll-top svg{
width:40px;
height:40px;
} .footer-description{
text-align:center;
max-width:100%;
font-size:14px;
} .footer-contacts{
flex-direction:column;
gap:20px;
}
.footer-contacts-col{
gap:15px;
}
.footer-contact-item{
font-size:14px;
}
.footer-contact-item svg{
width:24px;
height:24px;
}  .footer-scroll-top{
display:none;
} .footer-nav-row{
justify-content:center;
} .footer-description{
display:none;
} .footer-contacts-col:first-child{
display:flex;
}
.footer-contacts-col:first-child .footer-contact-item svg {
display: none;
}
.footer-contacts-col:first-child .footer-contact-item {
justify-content: center;
text-align: center;
}
.footer-contacts-col:first-child .footer-contact-item a {
text-align: center;
} .footer-contacts{
justify-content:center;
}
.footer-contacts-col{
align-items:center;
text-align:center;
} .footer-contact-item{
justify-content:center;
} .footer-social{
justify-content:center;
} .footer-bottom-container{
flex-direction:column;
gap:10px;
text-align:center;
font-size:12px;
}
} .news-archive-page{
padding:60px 0 100px;
}
.news-archive-container{
max-width:1400px;
margin:0 auto;
padding:0 10px;
}
.news-archive-title{
font-family:'Montserrat', sans-serif;
font-size:48px;
font-weight:700;
color:#1a1a1a;
margin-bottom:50px;
text-transform:uppercase;
} .news-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
} .news-grid-card{
display:flex;
flex-direction:column;
background:#fff;
border-radius:12px;
overflow:hidden;
text-decoration:none;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.news-grid-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.news-grid-card-image{
width:100%;
height:250px;
background-size:cover;
background-position:center;
background-color:#eee;
}
.news-grid-card-content{
padding:25px;
display:flex;
flex-direction:column;
flex-grow:1;
}
.news-grid-card-date{
font-size:14px;
color:#997058;
margin-bottom:10px;
}
.news-grid-card-title{
font-family:'Montserrat', sans-serif;
font-size:20px;
font-weight:700;
color:#1a1a1a;
margin:0 0 15px;
line-height:1.3;
}
.news-grid-card-excerpt{
font-size:14px;
color:#666;
line-height:1.6;
margin:0 0 20px;
flex-grow:1;
}
.news-grid-card-link{
display:inline-flex;
align-items:center;
gap:8px;
font-size:14px;
color:#997058;
transition:color 0.3s ease;
}
.news-grid-card-link svg{
width:20px;
height:20px;
transition:transform 0.3s ease;
}
.news-grid-card:hover .news-grid-card-link{
color:#7a5a45;
}
.news-grid-card:hover .news-grid-card-link svg{
transform:translate(3px, -3px);
} .news-archive-page .nav-links{
display:flex;
justify-content:center;
gap:10px;
margin-top:50px;
}
.news-archive-page .page-numbers{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
background:#fff;
color:#1a1a1a;
border-radius:8px;
text-decoration:none;
transition:background 0.3s ease, color 0.3s ease;
}
.news-archive-page .page-numbers.current,
.news-archive-page .page-numbers:hover{
background:#997058;
color:#fff;
}
.news-no-posts{
text-align:center;
font-size:18px;
color:#666;
} @media (max-width:1024px){
.news-grid{
grid-template-columns:repeat(2, 1fr);
gap:20px;
}
.news-archive-title{
font-size:36px;
margin-bottom:40px;
}
} @media (max-width:768px){
.news-archive-page{
padding:40px 0 60px;
}
.news-grid{
grid-template-columns:1fr;
gap:20px;
}
.news-archive-title{
font-size:28px;
margin-bottom:30px;
}
.news-grid-card-image{
height:200px;
}
.news-grid-card-content{
padding:20px;
}
.news-grid-card-title{
font-size:18px;
}
} .accommodation-archive-page{
padding:60px 0 100px;
font-family: 'Montserrat', sans-serif;
}
.accommodation-archive-container{
max-width:1400px;
margin:0 auto;
padding:0 10px;
} .accommodation-breadcrumbs {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
margin-bottom: 20px;
}
.accommodation-breadcrumbs a {
color: #3d3d3d;
text-decoration: none;
transition: color 0.3s ease;
}
.accommodation-breadcrumbs a:hover {
color: var(--accent-color);
}
.accommodation-breadcrumbs .breadcrumb-sep {
color: #999;
}
.accommodation-breadcrumbs .breadcrumb-current {
color: #999;
}
.accommodation-archive-title{
font-family:'Montserrat', sans-serif;
font-size:48px;
font-weight:700;
color:#1a1a1a;
margin-bottom:30px;
} .accommodation-filter{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:40px;
}
.accommodation-filter-btn{
padding:12px 24px;
background:#fff;
border:1px solid #ddd;
border-radius:30px;
color:#666;
font-size:14px;
text-decoration:none;
transition:all 0.3s ease;
}
.accommodation-filter-btn:hover,
.accommodation-filter-btn.active{
background:#997058;
border-color:#997058;
color:#fff;
} .accommodation-location-info {
background: #fff;
border-radius: 12px;
padding: 20px 25px;
margin-bottom: 30px;
border-left: 4px solid var(--accent-color);
}
.accommodation-location-address {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.accommodation-location-address svg {
flex-shrink: 0;
color: var(--accent-color);
}
.accommodation-location-address a {
color: #333;
font-size: 15px;
text-decoration: none;
transition: color 0.3s ease;
}
.accommodation-location-address a:hover {
color: var(--accent-color);
}
.accommodation-location-description {
margin: 0;
color: #666;
font-size: 14px;
line-height: 1.5;
padding-left: 30px;
} .accommodation-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
} .accommodation-card{
display:flex;
flex-direction:column;
background:#fff;
border-radius:16px;
overflow:hidden;
text-decoration:none;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.accommodation-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,0.12);
}
.accommodation-card-image{
position:relative;
width:100%;
height:280px;
background-size:cover;
background-position:center;
background-color:#eee;
}
.accommodation-card-category{
position:absolute;
top:15px;
left:15px;
background:#F5F1EE;
color:#3d3d3d;
padding:6px 14px;
border-radius:20px;
font-size:12px;
text-transform:uppercase;
letter-spacing:0.5px;
font-weight:500;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.accommodation-card-content{
padding:25px;
display:flex;
flex-direction:column;
flex-grow:1;
}
.accommodation-card-title{
font-family:'Montserrat', sans-serif;
font-size:22px;
font-weight:600;
color:#1a1a1a;
margin:0 0 15px;
line-height:1.3;
}
.accommodation-card-meta{
display:flex;
gap:20px;
margin-bottom:20px;
}
.accommodation-card-meta-item{
display:flex;
align-items:center;
gap:6px;
font-size:14px;
color:#666;
}
.accommodation-card-meta-item svg{
color:#997058;
}
.accommodation-card-footer{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:auto;
padding-top:15px;
border-top:1px solid #eee;
}
.accommodation-card-price{
font-size:18px;
font-weight:600;
color:#1a1a1a;
}
.accommodation-card-price small{
font-size:14px;
font-weight:400;
color:#666;
}
.accommodation-card-link{
display:inline-flex;
align-items:center;
gap:8px;
font-size:14px;
color:#997058;
transition:color 0.3s ease;
}
.accommodation-card-link svg{
width:20px;
height:20px;
transition:transform 0.3s ease;
}
.accommodation-card:hover .accommodation-card-link{
color:#7a5a45;
}
.accommodation-card:hover .accommodation-card-link svg{
transform:translate(3px, -3px);
}
.accommodation-no-posts{
text-align:center;
font-size:18px;
color:#666;
} .accommodation-archive-page .nav-links{
display:flex;
justify-content:center;
gap:10px;
margin-top:50px;
}
.accommodation-archive-page .page-numbers{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
background:#fff;
color:#1a1a1a;
border-radius:8px;
text-decoration:none;
transition:background 0.3s ease, color 0.3s ease;
}
.accommodation-archive-page .page-numbers.current,
.accommodation-archive-page .page-numbers:hover{
background:#997058;
color:#fff;
} .accommodation-single-page{
padding-bottom:80px;
} .accommodation-gallery{
max-width:1400px;
margin:0 auto 50px;
padding:0 10px;
}
.accommodation-gallery-main{
width:100%;
height:500px;
border-radius:16px;
overflow:hidden;
margin-bottom:15px;
}
.accommodation-gallery-main img{
width:100%;
height:100%;
object-fit:cover;
}
.accommodation-gallery-thumbs{
display:flex;
gap:10px;
overflow-x:auto;
padding-bottom:10px;
}
.accommodation-gallery-thumb{
flex-shrink:0;
width:120px;
height:80px;
border:2px solid transparent;
border-radius:8px;
overflow:hidden;
cursor:pointer;
padding:0;
background:none;
transition:border-color 0.3s ease;
}
.accommodation-gallery-thumb:hover,
.accommodation-gallery-thumb.active{
border-color:#997058;
}
.accommodation-gallery-thumb img{
width:100%;
height:100%;
object-fit:cover;
} .accommodation-single-container{
max-width:1400px;
margin:0 auto;
padding:0 10px;
}
.accommodation-single-content{
display:grid;
grid-template-columns:1fr 380px;
gap:50px;
} .accommodation-single-main{
}
.accommodation-single-category{
display:inline-block;
background:#997058;
color:#fff;
padding:6px 16px;
border-radius:20px;
font-size:12px;
text-transform:uppercase;
letter-spacing:0.5px;
margin-bottom:15px;
}
.accommodation-single-title{
font-family:'Montserrat', sans-serif;
font-size:42px;
font-weight:700;
color:#1a1a1a;
margin:0 0 25px;
line-height:1.2;
}
.accommodation-single-meta{
display:flex;
gap:30px;
margin-bottom:30px;
padding-bottom:30px;
border-bottom:1px solid #eee;
}
.accommodation-single-meta-item{
display:flex;
align-items:center;
gap:10px;
font-size:16px;
color:#666;
}
.accommodation-single-meta-item svg{
color:#997058;
}
.accommodation-single-description{
font-size:16px;
line-height:1.8;
color:#444;
margin-bottom:40px;
}
.accommodation-single-description p{
margin-bottom:15px;
} .accommodation-single-amenities h3{
font-family:'Montserrat', sans-serif;
font-size:24px;
font-weight:700;
color:#1a1a1a;
margin:0 0 20px;
}
.amenities-list{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:15px;
list-style:none;
padding:0;
margin:0;
}
.amenities-list li{
display:flex;
align-items:center;
gap:10px;
font-size:15px;
color:#444;
} .accommodation-single-sidebar{
}
.accommodation-booking-card{
position:sticky;
top:140px;
background:#fff;
border-radius:16px;
padding:30px;
box-shadow:0 5px 30px rgba(0,0,0,0.1);
}
.accommodation-booking-price{
display:flex;
align-items:baseline;
gap:5px;
margin-bottom:25px;
}
.accommodation-booking-price .price-amount{
font-size:32px;
font-weight:600;
color:#1a1a1a;
}
.accommodation-booking-price .price-period{
font-size:16px;
color:#666;
}
.accommodation-booking-btn{
display:block;
width:100%;
padding:18px;
background:#997058;
color:#fff;
text-align:center;
text-decoration:none;
font-size:16px;
font-weight:500;
border-radius:12px;
transition:background 0.3s ease;
margin-bottom:15px;
}
.accommodation-booking-btn:hover{
background:#7a5a45;
color:#fff;
}
.accommodation-booking-note{
font-size:13px;
color:#888;
text-align:center;
margin:0;
} .accommodation-single-nav{
margin-top:60px;
padding-top:30px;
border-top:1px solid #eee;
}
.back-to-archive{
display:inline-flex;
align-items:center;
gap:10px;
color:#997058;
text-decoration:none;
font-size:15px;
transition:color 0.3s ease;
}
.back-to-archive:hover{
color:#7a5a45;
} @media (max-width:1024px){
.accommodation-grid{
grid-template-columns:repeat(2, 1fr);
gap:20px;
}
.accommodation-archive-title{
font-size:36px;
}
.accommodation-single-content{
grid-template-columns:1fr;
gap:40px;
}
.accommodation-booking-card{
position:static;
}
.accommodation-gallery-main{
height:400px;
}
.accommodation-single-title{
font-size:32px;
}
} @media (max-width:768px){
.accommodation-archive-page{
padding:40px 0 60px;
}
.accommodation-grid{
grid-template-columns:1fr;
gap:20px;
}
.accommodation-archive-title{
font-size:28px;
margin-bottom:20px;
}
.accommodation-filter{
gap:8px;
margin-bottom:30px;
}
.accommodation-filter-btn{
padding:10px 18px;
font-size:13px;
}
.accommodation-card-image{
height:220px;
}
.accommodation-card-content{
padding:20px;
}
.accommodation-card-title{
font-size:18px;
}
.accommodation-card-meta{
flex-wrap:wrap;
gap:12px;
} .accommodation-single-page{
padding-bottom:60px;
}
.accommodation-gallery{
margin-bottom:30px;
}
.accommodation-gallery-main{
height:280px;
border-radius:12px;
}
.accommodation-gallery-thumb{
width:80px;
height:60px;
}
.accommodation-single-title{
font-size:26px;
}
.accommodation-single-meta{
flex-direction:column;
gap:15px;
}
.amenities-list{
grid-template-columns:1fr;
}
.accommodation-booking-card{
padding:20px;
}
.accommodation-booking-price .price-amount{
font-size:26px;
}
} .accom-single {
padding: 0;
position: relative;
} .accom-bottom-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 0;
pointer-events: none;
line-height: 0;
}
.accom-bottom-bg img {
width: 100%;
height: auto;
display: block;
} .accom-breadcrumbs-row {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto 20px;
padding: 20px 10px 0;
}
.accom-breadcrumbs {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.accom-breadcrumbs a {
color: #3d3d3d;
text-decoration: none;
transition: color 0.3s ease;
}
.accom-breadcrumbs a:hover {
color: var(--accent-color);
}
.accom-breadcrumbs .breadcrumb-sep {
color: #999;
}
.accom-breadcrumbs .breadcrumb-current {
color: #999;
} .accom-share {
position: relative;
}
.accom-share-btn {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
cursor: pointer;
font-size: 14px;
color: #3d3d3d;
padding: 8px 12px;
border-radius: 8px;
transition: background 0.3s ease;
}
.accom-share-btn:hover {
background: rgba(0, 0, 0, 0.05);
}
.accom-share-btn svg {
stroke: #3d3d3d;
} .accom-share-dropdown {
position: absolute;
top: 100%;
right: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
padding: 8px;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 100;
}
.accom-share-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.share-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: #3d3d3d;
text-decoration: none;
border-radius: 8px;
transition: background 0.3s ease;
font-size: 14px;
width: 100%;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
}
.share-item:hover {
background: #f5f5f5;
}
.share-whatsapp svg {
color: #25D366;
}
.share-telegram svg {
color: #0088cc;
}
.share-copy svg {
stroke: #666;
}
.accom-single-wrapper {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 25%;
gap: 30px;
max-width: 1400px;
margin: 0 auto;
padding: 0 10px 100px 10px;
align-items: start; } .accom-single-left {
display: flex;
flex-direction: column;
gap: 20px;
} .accom-slider {
position: relative;
border-radius: 20px;
overflow: hidden;
}
.accom-slider-container {
position: relative;
width: 100%;
height: 620px;
}
.accom-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.accom-slide.active {
opacity: 1;
}
.accom-slide img {
width: 100%;
height: 100%;
object-fit: cover;
} .accom-slider-btn,
.accom-slider-btn:hover,
.accom-slider-btn:focus,
.accom-slider-btn:focus-visible,
.accom-slider-btn:active {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
cursor: pointer;
z-index: 10;
padding: 0;
transition: transform 0.3s ease;
outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
color: inherit !important;
}
.accom-slider-btn:hover {
transform: translateY(-50%) scale(1.1);
}
.accom-slider-btn circle,
.accom-slider-btn path {
transition: fill 0.3s ease;
}
.accom-slider-btn:hover circle {
fill: var(--accent-color);
}
.accom-slider-btn:hover path {
fill: #fff;
}
.accom-slider-prev {
left: 20px;
}
.accom-slider-next {
right: 20px;
} .accom-slider-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.accom-slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
padding: 0;
transition: background 0.3s ease;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.accom-slider-dot:focus {
outline: none;
}
.accom-slider-dot.active {
background: #fff;
}
.accom-slider-dot:hover {
background: rgba(255, 255, 255, 0.8);
} .accom-slider-container {
cursor: pointer;
} .accom-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.accom-lightbox.active {
opacity: 1;
visibility: visible;
}
.accom-lightbox-close,
.accom-lightbox-close:hover,
.accom-lightbox-close:focus,
.accom-lightbox-close:focus-visible,
.accom-lightbox-close:active {
position: absolute;
top: 20px;
right: 30px;
background: none !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
color: #fff !important;
font-size: 40px;
cursor: pointer;
z-index: 10;
line-height: 1;
transition: transform 0.3s ease;
outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
}
.accom-lightbox-close:hover {
transform: scale(1.2);
}
.accom-lightbox-content {
max-width: 90%;
max-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
}
.accom-lightbox-img {
max-width: 100%;
max-height: 85vh;
object-fit: contain;
border-radius: 10px;
}
.accom-lightbox-btn,
.accom-lightbox-btn:hover,
.accom-lightbox-btn:focus,
.accom-lightbox-btn:focus-visible,
.accom-lightbox-btn:active {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
cursor: pointer;
z-index: 10;
padding: 0;
transition: transform 0.3s ease;
outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
color: inherit !important;
}
.accom-lightbox-btn:hover {
transform: translateY(-50%) scale(1.1);
}
.accom-lightbox-btn circle,
.accom-lightbox-btn path {
transition: fill 0.3s ease;
}
.accom-lightbox-btn:hover circle {
fill: var(--accent-color);
}
.accom-lightbox-btn:hover path {
fill: #fff;
}
.accom-lightbox-prev {
left: 30px;
}
.accom-lightbox-next {
right: 30px;
}
.accom-lightbox-counter {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
z-index: 10;
} button.accom-video-btn {
position: absolute;
bottom: 25px;
right: 25px;
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: #F5F1EE !important;
border: none !important;
border-radius: 50px;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
color: #3d3d3d !important;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
button.accom-video-btn:hover {
background: #EBE5E1 !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
button.accom-video-btn svg {
width: 20px;
height: 20px;
fill: #3d3d3d !important;
}
button.accom-video-btn:hover svg {
fill: #3d3d3d !important;
} .accom-video-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.accom-video-lightbox.active {
opacity: 1;
visibility: visible;
}
.accom-video-lightbox-close,
.accom-video-lightbox-close:hover,
.accom-video-lightbox-close:focus,
.accom-video-lightbox-close:focus-visible,
.accom-video-lightbox-close:active {
position: absolute;
top: 20px;
right: 30px;
background: none !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
color: #fff !important;
font-size: 40px;
cursor: pointer;
z-index: 10;
line-height: 1;
transition: transform 0.3s ease;
outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
}
.accom-video-lightbox-close:hover {
transform: scale(1.2);
}
.accom-video-lightbox-content {
width: 90%;
max-width: 1200px;
}
.accom-video-wrapper {
position: relative;
padding-bottom: 56.25%; height: 0;
overflow: hidden;
border-radius: 10px;
}
.accom-video-wrapper iframe,
.accom-video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: #000;
} .accom-info-block {
background: #F5F1EE;
padding: 45px;
border-radius: 20px;
}
.accom-info-title {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 400;
color: #3d3d3d;
margin: 0 0 10px 0;
line-height: 1.1;
}
.accom-info-meta {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 20px;
}
.accom-info-meta-item {
display: flex;
align-items: center;
gap: 8px;
color: #585858;
font-size: 16px;
}
.accom-info-meta-item svg {
stroke: #585858;
flex-shrink: 0;
}
.accom-info-divider {
height: 1px;
background: rgba(0, 0, 0, 0.1);
margin: 20px 0;
}
.accom-info-description {
color: #585858;
font-size: 22px;
line-height: 1.7;
}
.accom-info-description p {
margin: 0 0 15px 0;
font-size: 22px;
}
.accom-info-description ul {
list-style: none;
padding: 0;
margin: 15px 0;
}
.accom-info-description ul li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
font-size: 22px;
}
.accom-info-description ul li::before {
content: '•';
position: absolute;
left: 0;
color: var(--accent-color);
} .accom-equipment-block {
background: #F5F1EE;
padding: 40px;
border-radius: 20px;
}
.accom-rules-block {
background: #f5f1ee00;
padding: 40px;
border-radius: 20px;
border: 1px solid #585858;
}
.accom-block-title {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 400;
color: #3d3d3d;
margin: 0 0 25px 0;
} .accom-equipment-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.accom-equipment-tag {
background: #fff;
border: 1px solid #ddd;
padding: 10px 18px;
border-radius: 25px;
font-size: 18px;
color: #3d3d3d;
} .accom-equipment-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.accom-equipment-category h3 {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 600;
color: #3d3d3d;
margin: 0 0 15px 0;
}
.accom-equipment-category ul {
list-style: none;
padding: 0;
margin: 0;
}
.accom-equipment-category ul li {
font-size: 18px;
color: #585858;
line-height: 2;
}
.accom-equipment-category ul li.equipment-hidden {
display: none;
}
.accom-equipment-block.expanded .accom-equipment-category ul li.equipment-hidden {
display: list-item;
}
.equipment-toggle-btn {
background: none;
border: none;
padding: 20px 0 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
color: #997058;
cursor: pointer;
transition: color 0.3s ease;
}
.equipment-toggle-btn:hover {
color: #7a5c47;
}
.equipment-toggle-btn .toggle-less {
display: none;
}
.accom-equipment-block.expanded .equipment-toggle-btn .toggle-more {
display: none;
}
.accom-equipment-block.expanded .equipment-toggle-btn .toggle-less {
display: inline;
} .accom-check-times {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 30px;
margin-bottom: 30px;
padding: 30px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.accom-check-time {
display: flex;
flex-direction: column;
gap: 0px;
text-align: left;
}
.accom-check-label {
font-family: 'Montserrat', sans-serif;
font-size: 25px;
font-weight: 700;
color: #997058;
}
.accom-check-value {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 400;
color: #997058;
}
.accom-check-line {
width: 80px;
height: 0;
border-top: 2px dashed #B09382;
}
.accom-check-icon {
flex-shrink: 0;
}
.accom-check-icon img {
width: auto;
height: 60px;
display: block;
}
.accom-rules-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.accom-rule-item {
display: flex;
align-items: center;
gap: 15px;
}
.accom-rule-icon {
width: 32px;
height: 32px;
object-fit: contain;
flex-shrink: 0;
}
.accom-rule-text {
font-size: 22px;
color: #585858;
line-height: 1.6;
} .accom-single-right {
position: relative; margin: 0 !important;
padding: 0 !important;
} .booking-info-block {
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 16px;
padding: 30px 25px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.booking-info-title {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 600;
color: #2c2c2c;
margin: 0 0 24px 0;
text-align: center;
}
.booking-info-details {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 28px;
}
.booking-info-item {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #4a4a4a;
}
.booking-info-item svg {
flex-shrink: 0;
color: #C39E88;
}
.booking-info-btn {
display: block;
width: 100%;
background: linear-gradient(135deg, #C39E88 0%, #A67C5B 100%);
color: #fff !important;
text-decoration: none !important;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 600;
padding: 16px 24px;
border-radius: 12px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.booking-info-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(195, 158, 136, 0.3);
} .mobile-booking-btn {
display: none; position: fixed;
bottom: 105px; left: 20px;
right: 20px;
z-index: 999;
background: linear-gradient(135deg, #C39E88 0%, #A67C5B 100%);
color: #fff !important;
border: none;
border-radius: 16px;
padding: 18px 24px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 6px 25px rgba(166, 124, 91, 0.45), 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
text-decoration: none !important;
}
.mobile-booking-btn:active,
.mobile-booking-btn:hover {
transform: scale(0.98);
color: #fff !important;
}
.mobile-booking-btn svg {
flex-shrink: 0;
} .booking-bottom-sheet {
display: none; position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.booking-bottom-sheet.active {
pointer-events: auto;
opacity: 1;
}
.booking-sheet-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.booking-bottom-sheet.active .booking-sheet-overlay {
opacity: 1;
}
.booking-sheet-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-radius: 24px 24px 0 0;
max-height: 85vh;
min-height: 50vh;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.booking-bottom-sheet.active .booking-sheet-content {
transform: translateY(0);
}
.booking-sheet-header {
position: relative;
padding: 12px 20px 16px;
border-bottom: 1px solid #eee;
flex-shrink: 0;
}
.booking-sheet-handle {
width: 40px;
height: 4px;
background: #ddd;
border-radius: 2px;
margin: 0 auto 12px;
}
.booking-sheet-close {
position: absolute;
top: 12px;
right: 16px;
background: #f5f5f5;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
max-width: 36px;
max-height: 36px;
flex-shrink: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
aspect-ratio: 1 / 1;
}
.booking-sheet-close:hover {
background: #eee;
}
.booking-sheet-close svg {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
stroke: #666;
}
.booking-sheet-body {
flex: 1;
overflow-y: auto;
padding: 20px;
-webkit-overflow-scrolling: touch;
}
.booking-sheet-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 20px 0;
text-align: center;
} .tl-booking-widget-mobile {
min-height: 300px;
}
.tl-booking-widget-mobile .tl-widget-placeholder {
padding: 60px 20px;
} .booking-sheet-body .accom-single-right {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
.booking-sheet-body .accom-single-right #block-search,
.booking-sheet-body .accom-single-right #tl-search-form {
width: 100% !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
} .booking-sheet-body .accom-single-right * {
visibility: visible !important;
opacity: 1 !important;
color: inherit !important;
} .booking-sheet-body iframe {
width: 100% !important;
min-height: 500px !important;
border: none !important;
display: block !important;
background: white !important;
}  .route-archive-page {
padding: 0 0 80px;
background: #fff;
}
.route-archive-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
.route-breadcrumbs {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #888;
margin-bottom: 30px;
padding-top: 20px;
}
.route-breadcrumbs a {
color: #888;
text-decoration: none;
transition: color 0.3s ease;
}
.route-breadcrumbs a:hover {
color: #997058;
}
.breadcrumb-sep {
color: #ccc;
}
.breadcrumb-current {
color: #3d3d3d;
}
.route-archive-title {
font-family: 'Montserrat', sans-serif;
font-size: 48px;
font-weight: 600;
color: #3d3d3d;
margin: 0 0 30px;
} .route-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.route-filter-btn {
display: inline-flex;
align-items: center;
padding: 10px 24px;
border: 1px solid #ddd;
border-radius: 50px;
font-size: 14px;
color: #3d3d3d;
text-decoration: none;
transition: all 0.3s ease;
}
.route-filter-btn:hover {
border-color: #997058;
color: #997058;
}
.route-filter-btn.active {
background: #997058;
border-color: #997058;
color: #fff;
} .route-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
} .route-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.route-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.route-card-image {
position: relative;
height: 220px;
background-size: cover;
background-position: center;
}
.route-card-category {
position: absolute;
top: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.95);
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
color: #3d3d3d;
}
.route-card-content {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.route-card-title {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 600;
color: #3d3d3d;
margin: 0 0 12px;
line-height: 1.3;
}
.route-card-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.route-card-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #888;
}
.route-card-meta-item svg {
color: #997058;
}
.route-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 15px;
border-top: 1px solid #f0f0f0;
}
.route-card-price {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 600;
color: #997058;
}
.route-card-link {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #997058;
}
.route-card-link svg {
transition: transform 0.3s ease;
}
.route-card:hover .route-card-link svg {
transform: translate(3px, -3px);
}
.route-no-posts {
text-align: center;
font-size: 18px;
color: #888;
padding: 60px 0;
} .route-single-page {
padding: 0 0 80px;
background: #fff;
}
.route-breadcrumbs-row {
max-width: 1400px;
margin: 0 auto;
padding: 20px 40px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.route-share-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #f5f5f5;
border: none;
border-radius: 8px;
font-size: 14px;
color: #3d3d3d;
cursor: pointer;
transition: all 0.3s ease;
}
.route-share-btn:hover {
background: #eee;
}
.route-share {
position: relative;
}
.route-share-dropdown {
position: absolute;
top: 100%;
right: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
padding: 8px;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 100;
}
.route-share-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.route-share-dropdown .share-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: #3d3d3d;
text-decoration: none;
border-radius: 8px;
transition: background 0.3s ease;
font-size: 14px;
width: 100%;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
}
.route-share-dropdown .share-item:hover {
background: #f5f5f5;
}
.route-share-dropdown .share-whatsapp svg {
color: #25D366;
}
.route-share-dropdown .share-telegram svg {
color: #0088cc;
}
.route-share-dropdown .share-copy svg {
color: #666;
}
.route-single-wrapper {
display: grid;
grid-template-columns: 1fr 380px;
gap: 40px;
max-width: 1400px;
margin: 0 auto;
padding: 30px 40px 0;
}
.route-single-left {
min-width: 0;
}
.route-single-right {
position: relative;
} .route-info-block {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
}
.route-info-title {
font-family: 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 600;
color: #3d3d3d;
margin: 0 0 15px;
}
.route-info-category {
display: inline-block;
background: #f5f5f5;
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
.route-info-meta {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-bottom: 25px;
}
.route-info-meta-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
color: #585858;
}
.route-info-meta-item svg {
color: #997058;
}
.route-info-meta-item.difficulty-easy {
color: #4caf50;
}
.route-info-meta-item.difficulty-easy svg {
color: #4caf50;
}
.route-info-meta-item.difficulty-medium {
color: #ff9800;
}
.route-info-meta-item.difficulty-medium svg {
color: #ff9800;
}
.route-info-meta-item.difficulty-hard {
color: #f44336;
}
.route-info-meta-item.difficulty-hard svg {
color: #f44336;
}
.route-info-divider {
height: 1px;
background: #e0e0e0;
margin: 25px 0;
}
.route-info-description {
font-size: 16px;
line-height: 1.8;
color: #585858;
}
.route-info-description p {
margin: 0 0 15px;
}
.route-info-description p:last-child {
margin-bottom: 0;
} .route-includes-block {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 30px;
}
.route-block-title {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 600;
color: #3d3d3d;
margin: 0 0 25px;
}
.route-includes-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.route-includes-col h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
margin: 0 0 15px;
}
.route-includes-col.included h3 {
color: #4caf50;
}
.route-includes-col.not-included h3 {
color: #f44336;
}
.route-includes-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.route-includes-col ul li {
position: relative;
padding: 8px 0 8px 20px;
font-size: 15px;
color: #585858;
border-bottom: 1px solid #f0f0f0;
}
.route-includes-col ul li:last-child {
border-bottom: none;
}
.route-includes-col ul li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
}
.route-includes-col.included ul li::before {
background: #4caf50;
}
.route-includes-col.not-included ul li::before {
background: #f44336;
} .route-slider {
position: relative;
margin-bottom: 30px;
}
.route-slider-container {
position: relative;
height: 500px;
border-radius: 20px;
overflow: hidden;
}
.route-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
cursor: pointer;
}
.route-slide.active {
opacity: 1;
}
.route-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.route-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
z-index: 10;
padding: 0;
transition: transform 0.3s ease;
}
.route-slider-btn:hover {
transform: translateY(-50%) scale(1.1);
}
.route-slider-prev {
left: 20px;
}
.route-slider-next {
right: 20px;
}
.route-slider-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.route-slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.route-slider-dot.active,
.route-slider-dot:hover {
background: #fff;
} .route-booking-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 25px;
position: sticky;
top: 120px;
}
.route-booking-price {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.route-booking-price .price-value {
font-family: 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 700;
color: #997058;
}
.route-booking-price .price-label {
font-size: 14px;
color: #888;
}
.route-booking-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #997058;
color: #fff;
border: none;
padding: 16px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
transition: background 0.3s ease;
}
.route-booking-btn:hover {
background: #B09382;
color: #fff;
}
.route-booking-note {
font-size: 13px;
color: #888;
text-align: center;
margin: 15px 0 0;
line-height: 1.5;
} .route-booking-title {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
color: #333;
margin: 0 0 15px;
text-align: center;
}
.route-booking-form .form-group {
margin-bottom: 12px;
}
.route-booking-form input[type="text"],
.route-booking-form input[type="tel"],
.route-booking-form input[type="date"] {
width: 100%;
padding: 14px 16px;
border: 1px solid #ddd;
border-radius: 10px;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
transition: border-color 0.3s, box-shadow 0.3s;
background: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.route-booking-form input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(195, 158, 136, 0.15);
}
.route-booking-form .form-row {
display: grid;
grid-template-columns: 48% 48%;
gap: 10px;
}
@media (max-width: 480px) {
.route-booking-form .form-row {
grid-template-columns: 1fr;
gap: 15px;
}
}
.route-booking-form .form-group-half {
flex: 1;
}
.route-booking-form .form-group-half label {
display: block;
font-size: 13px;
color: #666;
margin-bottom: 6px;
} .number-input {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 10px;
overflow: hidden;
}
.number-input input {
flex: 1;
min-width: 30px;
text-align: center;
border: none;
font-size: 15px;
font-weight: 600;
padding: 6px 2px;
background: #fff;
font-family: 'Montserrat', sans-serif;
}
.number-input input:focus {
outline: none;
}
.number-btn {
width: 28px;
min-width: 28px;
height: 28px;
border: none;
background: #f5f5f5;
font-size: 14px;
color: #666;
cursor: pointer;
transition: background 0.2s;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 4px;
margin: 4px;
}
.number-btn:hover {
background: #e8e8e8;
}
.number-btn:active {
background: #ddd;
} .route-booking-form .checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 12px;
color: #666;
line-height: 1.4;
}
.route-booking-form .checkbox-label input[type="checkbox"] {
display: none;
}
.route-booking-form .checkbox-label .checkmark {
width: 18px;
height: 18px;
min-width: 18px;
border: 2px solid #ddd;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
margin-top: 1px;
}
.route-booking-form .checkbox-label input:checked + .checkmark {
background: var(--accent-color);
border-color: var(--accent-color);
}
.route-booking-form .checkbox-label input:checked + .checkmark::after {
content: '';
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-top: -2px;
}
.route-booking-form .checkbox-label .checkbox-text a {
color: var(--accent-color);
}
.route-booking-form .checkbox-label.error .checkmark {
border-color: #dc3545;
animation: shake 0.5s;
}
.route-booking-form .checkbox-label.error .checkbox-text {
color: #dc3545;
} .route-booking-form .route-booking-btn {
margin-top: 15px;
position: relative;
}
.route-booking-form .route-booking-btn .btn-loader {
display: none;
width: 20px;
height: 20px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.route-booking-form .route-booking-btn.loading .btn-text {
opacity: 0;
}
.route-booking-form .route-booking-btn.loading .btn-loader {
display: block;
position: absolute;
} .route-form-message {
text-align: center;
padding: 10px;
border-radius: 8px;
font-size: 14px;
margin-top: 10px;
display: none;
}
.route-form-message.success {
display: block;
background: #d4edda;
color: #155724;
}
.route-form-message.error {
display: block;
background: #f8d7da;
color: #721c24;
} .route-booking-divider {
display: flex;
align-items: center;
text-align: center;
margin: 20px 0;
color: #999;
font-size: 13px;
}
.route-booking-divider::before,
.route-booking-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #e0e0e0;
}
.route-booking-divider span {
padding: 0 15px;
} .route-phone-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 20px;
background: transparent;
border: 2px solid var(--accent-color);
border-radius: 10px;
color: var(--accent-color);
font-size: 16px;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
transition: all 0.3s;
}
.route-phone-btn:hover {
background: var(--accent-color);
color: #fff;
}
.route-phone-btn svg {
transition: stroke 0.3s;
}
.route-phone-btn:hover svg {
stroke: #fff;
} .route-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.route-lightbox.active {
opacity: 1;
visibility: visible;
}
.route-lightbox-close {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
color: #fff;
font-size: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.route-lightbox-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.route-lightbox-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.3s ease;
z-index: 10;
}
.route-lightbox-btn:hover {
transform: translateY(-50%) scale(1.1);
}
.route-lightbox-btn svg {
width: 50px;
height: 50px;
}
.route-lightbox-btn.prev {
left: 30px;
}
.route-lightbox-btn.next {
right: 30px;
}
.route-lightbox-content {
max-width: 90%;
max-height: 85vh;
}
.route-lightbox-content img {
max-width: 100%;
max-height: 85vh;
object-fit: contain;
}
.route-lightbox-counter {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 16px;
background: rgba(0, 0, 0, 0.5);
padding: 8px 20px;
border-radius: 20px;
} .banya-page {
padding: 30px 20px 60px;
max-width: 1400px;
margin: 0 auto;
} .banya-breadcrumbs-row {
margin-bottom: 30px;
}
.banya-breadcrumbs {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #666;
}
.banya-breadcrumbs a {
color: #666;
transition: color 0.3s;
}
.banya-breadcrumbs a:hover {
color: var(--accent-color);
}
.banya-breadcrumbs .breadcrumb-sep {
color: #ccc;
}
.banya-breadcrumbs .breadcrumb-current {
color: #333;
} .banya-wrapper {
display: grid;
grid-template-columns: 1fr 380px;
gap: 40px;
align-items: start;
} .banya-left {
display: flex;
flex-direction: column;
gap: 30px;
} .banya-slider {
position: relative;
border-radius: 16px;
overflow: hidden;
background: #e0e0e0;
aspect-ratio: 16/10;
}
.banya-slider-container {
width: 100%;
height: 100%;
position: relative;
}
.banya-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
cursor: pointer;
}
.banya-slide.active {
opacity: 1;
}
.banya-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banya-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
z-index: 10;
padding: 0;
transition: transform 0.3s, opacity 0.3s;
opacity: 0.9;
}
.banya-slider-btn:hover {
transform: translateY(-50%) scale(1.1);
opacity: 1;
}
.banya-slider-prev {
left: 20px;
}
.banya-slider-next {
right: 20px;
}
.banya-slider-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.banya-slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
padding: 0;
transition: background 0.3s, transform 0.3s;
}
.banya-slider-dot:hover {
background: rgba(255, 255, 255, 0.8);
}
.banya-slider-dot.active {
background: #fff;
transform: scale(1.2);
} .banya-info-block {
background: #fff;
border-radius: 16px;
padding: 30px;
}
.banya-title {
font-family: 'Montserrat', sans-serif;
font-size: 48px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 30px;
text-transform: uppercase;
}
.banya-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 15px;
}
.banya-meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: #555;
}
.banya-meta-item svg {
color: var(--accent-color);
}
.banya-address {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
.banya-address svg {
flex-shrink: 0;
color: var(--accent-color);
margin-top: 2px;
}
.banya-divider {
height: 1px;
background: #eee;
margin: 20px 0;
}
.banya-description {
font-size: 15px;
line-height: 1.7;
color: #555;
}
.banya-description p {
margin: 0 0 15px;
}
.banya-description p:last-child {
margin-bottom: 0;
} .banya-included-block,
.banya-rules-block {
background: #fff;
border-radius: 16px;
padding: 30px;
}
.banya-block-title {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 700;
margin: 0 0 20px;
color: #1a1a1a;
}
.banya-included-list,
.banya-rules-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.banya-included-list li,
.banya-rules-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: #555;
}
.banya-included-list svg {
flex-shrink: 0;
color: #28a745;
margin-top: 2px;
}
.banya-rules-list svg {
flex-shrink: 0;
color: var(--accent-color);
margin-top: 2px;
} .banya-right {
position: sticky;
top: 100px;
}
.banya-booking-card {
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.banya-booking-title {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 20px;
text-align: center;
text-transform: uppercase;
}
.banya-booking-price {
text-align: center;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.banya-booking-price .price-value {
display: block;
font-size: 24px;
font-weight: 700;
color: var(--accent-color);
}
.banya-booking-price .price-min {
display: block;
font-size: 13px;
color: #888;
margin-top: 5px;
} .banya-booking-form .form-group {
margin-bottom: 15px;
}
.banya-booking-form input[type="text"],
.banya-booking-form input[type="tel"],
.banya-booking-form input[type="date"],
.banya-booking-form select {
width: 100%;
padding: 14px 16px;
border: 1px solid #ddd;
border-radius: 10px;
font-size: 15px;
font-family: inherit;
transition: border-color 0.3s, box-shadow 0.3s;
background: #fff;
}
.banya-booking-form input:focus,
.banya-booking-form select:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(195, 158, 136, 0.15);
}
.banya-booking-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
line-height: 1.5;
height: auto;
min-height: 50px;
cursor: pointer;
} .form-group-checkbox {
margin-top: 5px;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 13px;
color: #666;
line-height: 1.4;
}
.checkbox-label input[type="checkbox"] {
display: none;
}
.checkbox-label .checkmark {
width: 20px;
height: 20px;
min-width: 20px;
border: 2px solid #ddd;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
margin-top: 1px;
}
.checkbox-label input:checked + .checkmark {
background: var(--accent-color);
border-color: var(--accent-color);
}
.checkbox-label input:checked + .checkmark::after {
content: '';
width: 6px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-top: -2px;
}
.checkbox-label .checkbox-text a {
color: var(--accent-color);
}
.checkbox-label .checkbox-text a:hover {
text-decoration: underline !important;
}
.checkbox-label.error .checkmark {
border-color: #dc3545;
animation: shake 0.5s;
}
.checkbox-label.error .checkbox-text {
color: #dc3545;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-5px); }
40%, 80% { transform: translateX(5px); }
} .banya-booking-btn {
width: 100%;
padding: 16px;
background: var(--accent-color);
color: #fff;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
margin-top: 10px;
position: relative;
}
.banya-booking-btn:hover {
background: #b08a74;
transform: translateY(-2px);
}
.banya-booking-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.banya-booking-btn.loading .btn-text {
opacity: 0;
}
.banya-booking-btn .btn-loader {
display: none;
}
.banya-booking-btn.loading .btn-loader {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
} .banya-form-message {
text-align: center;
padding: 10px;
border-radius: 8px;
font-size: 14px;
margin-top: 15px;
display: none;
}
.banya-form-message.success {
display: block;
background: #d4edda;
color: #155724;
}
.banya-form-message.error {
display: block;
background: #f8d7da;
color: #721c24;
} .banya-booking-divider {
display: flex;
align-items: center;
gap: 15px;
margin: 20px 0;
color: #999;
font-size: 14px;
}
.banya-booking-divider::before,
.banya-booking-divider::after {
content: '';
flex: 1;
height: 1px;
background: #eee;
} .banya-phone-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px;
border: 2px solid var(--accent-color);
border-radius: 10px;
color: var(--accent-color);
font-size: 16px;
font-weight: 600;
transition: all 0.3s;
}
.banya-phone-btn:hover {
background: var(--accent-color);
color: #fff;
}
.banya-booking-note {
text-align: center;
font-size: 13px;
color: #999;
margin: 15px 0 0;
} .banya-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
}
.banya-lightbox.active {
display: flex;
}
.banya-lightbox-close {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
color: #fff;
font-size: 30px;
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.banya-lightbox-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.banya-lightbox-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 0;
opacity: 0.8;
transition: opacity 0.3s, transform 0.3s;
}
.banya-lightbox-btn:hover {
opacity: 1;
transform: translateY(-50%) scale(1.1);
}
.banya-lightbox-btn.prev {
left: 30px;
}
.banya-lightbox-btn.next {
right: 30px;
}
.banya-lightbox-content img {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
}
.banya-lightbox-counter {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 16px;
background: rgba(0, 0, 0, 0.5);
padding: 8px 20px;
border-radius: 20px;
} .pool-page {
padding: 0 0 80px;
background: #fafafa;
}
.pool-breadcrumbs-row {
max-width: 1400px;
margin: 0 auto;
padding: 30px 40px 0;
}
.pool-breadcrumbs {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #666;
}
.pool-breadcrumbs a {
color: #666;
text-decoration: none;
transition: color 0.3s;
}
.pool-breadcrumbs a:hover {
color: var(--accent-color);
}
.pool-breadcrumbs .breadcrumb-sep {
color: #ccc;
}
.pool-breadcrumbs .breadcrumb-current {
color: #333;
}
.pool-wrapper {
display: grid;
grid-template-columns: 1fr 380px;
gap: 40px;
max-width: 1400px;
margin: 0 auto;
padding: 40px;
} .pool-left {
min-width: 0;
} .pool-slider {
position: relative;
border-radius: 20px;
overflow: hidden;
margin-bottom: 30px;
cursor: pointer;
}
.pool-slider-container {
position: relative;
}
.pool-slide {
display: none;
}
.pool-slide.active {
display: block;
}
.pool-slide img {
width: 100%;
height: 500px;
object-fit: cover;
}
.pool-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
z-index: 10;
padding: 0;
transition: transform 0.3s, opacity 0.3s;
opacity: 0.9;
}
.pool-slider-btn:hover {
transform: translateY(-50%) scale(1.1);
opacity: 1;
}
.pool-slider-prev {
left: 20px;
}
.pool-slider-next {
right: 20px;
}
.pool-slider-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.pool-slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
padding: 0;
transition: background 0.3s, transform 0.3s;
}
.pool-slider-dot:hover {
background: rgba(255, 255, 255, 0.8);
}
.pool-slider-dot.active {
background: #fff;
transform: scale(1.2);
} .pool-info-block {
background: #fff;
border-radius: 20px;
padding: 40px;
}
.pool-title {
font-family: 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 600;
margin: 0 0 25px;
color: #222;
}
.pool-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.pool-meta-item {
display: flex;
align-items: center;
gap: 8px;
color: #555;
font-size: 15px;
}
.pool-meta-item svg {
color: var(--accent-color);
flex-shrink: 0;
}
.pool-address {
display: flex;
align-items: flex-start;
gap: 10px;
color: #666;
font-size: 14px;
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid #eee;
}
.pool-address svg {
color: var(--accent-color);
flex-shrink: 0;
margin-top: 2px;
}
.pool-description {
color: #555;
font-size: 15px;
line-height: 1.7;
margin-bottom: 30px;
}
.pool-description p {
margin: 0 0 15px;
}
.pool-features,
.pool-rules {
margin-bottom: 30px;
}
.pool-features h3,
.pool-rules h3 {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 600;
margin: 0 0 15px;
color: #222;
}
.pool-features ul,
.pool-rules ul {
list-style: none;
padding: 0;
margin: 0;
}
.pool-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
color: #555;
font-size: 14px;
}
.pool-features li svg {
flex-shrink: 0;
}
.pool-rules li {
position: relative;
padding: 8px 0 8px 20px;
color: #555;
font-size: 14px;
}
.pool-rules li::before {
content: '•';
position: absolute;
left: 0;
color: var(--accent-color);
} .pool-right {
position: sticky;
top: 100px;
height: fit-content;
}
.pool-info-card {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.pool-card-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #4CAF50, #45a049);
color: #fff;
padding: 10px 18px;
border-radius: 30px;
font-size: 14px;
font-weight: 500;
margin-bottom: 20px;
}
.pool-card-title {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 600;
margin: 0 0 15px;
color: #222;
}
.pool-card-desc {
color: #666;
font-size: 14px;
line-height: 1.6;
margin: 0 0 25px;
}
.pool-card-locations {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 25px;
}
.pool-location-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: #f8f8f8;
border-radius: 12px;
}
.pool-location-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pool-location-icon.village {
background: linear-gradient(135deg, var(--accent-color), #b08a74);
color: #fff;
}
.pool-location-icon.sofia {
background: linear-gradient(135deg, #607D8B, #546E7A);
color: #fff;
}
.pool-location-info {
display: flex;
flex-direction: column;
gap: 3px;
}
.pool-location-name {
font-weight: 600;
font-size: 14px;
color: #333;
}
.pool-location-distance {
font-size: 13px;
color: #888;
}
.pool-card-divider {
text-align: center;
position: relative;
margin: 25px 0;
}
.pool-card-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #eee;
}
.pool-card-divider span {
background: #fff;
padding: 0 15px;
position: relative;
color: #999;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.pool-phone-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px;
background: #fff;
border: 2px solid var(--accent-color);
border-radius: 12px;
color: var(--accent-color);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
}
.pool-phone-btn:hover {
background: var(--accent-color);
color: #fff;
}
.pool-card-note {
text-align: center;
color: #999;
font-size: 12px;
margin: 15px 0 0;
} .pool-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
}
.pool-lightbox.active {
display: flex;
}
.pool-lightbox-close {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 30px;
cursor: pointer;
border-radius: 50%;
transition: background 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.pool-lightbox-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.pool-lightbox-prev,
.pool-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
cursor: pointer;
border-radius: 50%;
transition: background 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.pool-lightbox-prev:hover,
.pool-lightbox-next:hover {
background: rgba(255, 255, 255, 0.2);
}
.pool-lightbox-prev {
left: 30px;
}
.pool-lightbox-next {
right: 30px;
}
.pool-lightbox-content img {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
}
.pool-lightbox-counter {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 16px;
background: rgba(0, 0, 0, 0.5);
padding: 8px 20px;
border-radius: 20px;
} @media (max-width: 1024px) {
.pool-wrapper {
grid-template-columns: 1fr;
padding: 20px;
}
.pool-right {
position: static;
}
.pool-slide img {
height: 400px;
}
}
@media (max-width: 768px) {
.pool-breadcrumbs-row {
padding: 20px 20px 0;
}
.pool-slide img {
height: 300px;
}
.pool-info-block {
padding: 25px;
}
.pool-title {
font-size: 26px;
}
.pool-meta {
flex-direction: column;
gap: 12px;
}
.pool-slider-btn svg {
width: 36px;
height: 36px;
}
.pool-slider-prev {
left: 10px;
}
.pool-slider-next {
right: 10px;
}
}
@media (max-width: 480px) {
.pool-slide img {
height: 250px;
}
.pool-info-block {
padding: 20px;
border-radius: 15px;
}
.pool-slider {
border-radius: 15px;
}
.pool-title {
font-size: 22px;
}
.pool-info-card {
padding: 20px;
border-radius: 15px;
}
.pool-card-badge {
font-size: 13px;
padding: 8px 14px;
}
} .about-page {
padding: 0 0 80px;
background: #fafafa;
}
.about-breadcrumbs-row {
max-width: 1400px;
margin: 0 auto;
padding: 30px 40px 0;
}
.about-breadcrumbs {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #666;
}
.about-breadcrumbs a {
color: #666;
text-decoration: none;
transition: color 0.3s;
}
.about-breadcrumbs a:hover {
color: var(--accent-color);
}
.about-breadcrumbs .breadcrumb-sep {
color: #ccc;
}
.about-breadcrumbs .breadcrumb-current {
color: #333;
}
.about-wrapper {
display: grid;
grid-template-columns: 1fr 380px;
gap: 40px;
max-width: 1400px;
margin: 0 auto;
padding: 40px;
align-items: start;
} .about-left {
min-width: 0;
} .about-intro {
background: #fff;
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
}
.about-title {
font-family: 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 600;
color: #333;
margin: 0 0 25px;
}
.about-text {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 1.7;
color: #555;
}
.about-text p {
margin: 0 0 15px;
}
.about-text p:last-child {
margin-bottom: 0;
} .about-infrastructure {
background: #fff;
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
}
.about-section-title {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 600;
color: #333;
margin: 0 0 30px;
}
.infrastructure-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px 40px;
list-style: none;
padding: 0;
margin: 0;
}
.infrastructure-list li {
position: relative;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #333;
line-height: 1.5;
}
.infrastructure-list li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background: var(--accent-color);
border-radius: 50%;
} .about-locations {
background: #fff;
border-radius: 20px;
padding: 40px;
}
.locations-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.location-card {
border-radius: 15px;
overflow: hidden;
background: #fafafa;
transition: transform 0.3s, box-shadow 0.3s;
}
.location-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.location-image {
position: relative;
height: 200px;
overflow: hidden;
}
.location-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.location-card:hover .location-image img {
transform: scale(1.05);
}
.location-content {
padding: 25px;
}
.location-content h3 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 600;
color: #333;
margin: 0 0 10px;
}
.location-content p {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #666;
margin: 0 0 20px;
line-height: 1.6;
} .location-content .about-btn {
margin-top: 15px;
}
.location-content .about-btn-link:hover svg path {
stroke: #fff;
} .about-right {
position: sticky;
top: 120px;
}
.about-contact-card {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.about-contact-title {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 600;
color: #333;
margin: 0 0 25px;
text-align: center;
}
.about-contact-phone {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px;
background: #f5f5f5;
border-radius: 10px;
color: #333;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
transition: background 0.3s, color 0.3s;
}
.about-contact-phone:hover {
background: var(--accent-color);
color: #fff;
}
.about-contact-phone svg {
flex-shrink: 0;
}
.about-contact-email {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px;
color: #666;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
margin-bottom: 20px;
transition: color 0.3s;
}
.about-contact-email:hover {
color: var(--accent-color);
}
.about-contact-messengers {
display: flex;
gap: 10px;
margin-bottom: 25px;
}
.messenger-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 15px;
border-radius: 10px;
color: #fff;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 500;
transition: transform 0.3s, opacity 0.3s;
}
.messenger-btn:hover {
transform: translateY(-2px);
opacity: 0.9;
color: #fff;
}
.messenger-btn.whatsapp {
background: #25D366;
}
.messenger-btn.telegram {
background: #0088cc;
}
.about-contact-divider {
position: relative;
text-align: center;
margin: 25px 0;
}
.about-contact-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #eee;
}
.about-contact-divider span {
position: relative;
background: #fff;
padding: 0 15px;
color: #999;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
}
.about-location-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.about-location-btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
background: #f5f5f5;
border-radius: 10px;
color: #333;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
transition: background 0.3s, color 0.3s, transform 0.3s;
}
.about-location-btn:hover {
background: var(--accent-color);
color: #fff;
transform: translateX(5px);
}
.about-location-btn svg {
transition: transform 0.3s;
}
.about-location-btn:hover svg {
transform: translateX(3px);
} @media (max-width: 1024px) {
.about-wrapper {
grid-template-columns: 1fr;
padding: 30px 20px;
}
.about-right {
position: static;
}
.about-contact-card {
max-width: 500px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.about-breadcrumbs-row {
padding: 20px 20px 0;
}
.about-intro,
.about-infrastructure,
.about-locations {
padding: 25px;
border-radius: 15px;
}
.about-title {
font-size: 26px;
}
.about-section-title {
font-size: 20px;
margin-bottom: 20px;
}
.infrastructure-list {
grid-template-columns: 1fr;
gap: 12px;
}
.locations-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.location-image {
height: 180px;
}
}
@media (max-width: 480px) {
.about-intro,
.about-infrastructure,
.about-locations {
padding: 20px;
}
.about-title {
font-size: 22px;
}
.about-contact-card {
padding: 20px;
}
.about-contact-phone {
font-size: 16px;
}
.messenger-btn {
padding: 10px 12px;
font-size: 12px;
}
.location-content {
padding: 20px;
}
.location-content h3 {
font-size: 18px;
}
} .contacts-page {
padding: 0 0 60px;
background: #fff;
}
.contacts-breadcrumbs-row {
max-width: 1200px;
margin: 0 auto;
padding: 20px 30px;
background: transparent;
}
.contacts-breadcrumbs {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #666;
}
.contacts-breadcrumbs a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.contacts-breadcrumbs a:hover {
color: var(--accent-color);
}
.contacts-breadcrumbs .breadcrumb-sep {
margin: 0 10px;
color: #999;
}
.contacts-breadcrumbs .breadcrumb-current {
color: var(--accent-color);
}
.contacts-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 40px 30px;
}
.contacts-title {
font-family: 'Montserrat', sans-serif;
font-size: 42px;
font-weight: 600;
color: #333;
margin: 0 0 40px;
text-align: center;
} .contacts-general {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 50px;
padding: 30px;
background: #f8f8f8;
border-radius: 12px;
}
.contacts-item {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.contacts-item:hover {
color: var(--accent-color);
}
.contacts-item svg {
flex-shrink: 0;
color: var(--accent-color);
} .contacts-locations {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.contacts-location-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 30px;
display: flex;
flex-direction: column;
overflow: hidden;
} .contacts-location-image {
display: block;
width: calc(100% + 60px);
margin: -30px -30px 25px -30px;
height: 350px;
overflow: hidden;
}
.contacts-location-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.contacts-location-image:hover img {
transform: scale(1.05);
} .contacts-location-title-link {
text-decoration: none;
display: block;
}
.contacts-location-title-link:hover .contacts-location-title {
color: var(--accent-color);
}
.contacts-location-title {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 600;
color: #333;
margin: 0 0 15px;
transition: color 0.3s ease;
} .contacts-location-address {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #666;
margin: 0 0 20px;
line-height: 1.6;
text-decoration: none;
transition: color 0.3s ease;
}
.contacts-location-address:hover {
color: var(--accent-color);
}
.contacts-location-address:hover svg {
transform: scale(1.1);
}
.contacts-location-address svg {
flex-shrink: 0;
color: var(--accent-color);
margin-top: 2px;
transition: transform 0.3s ease;
} .contacts-map {
width: 100%;
height: 300px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
background: #eee;
} .contacts-location-btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
background: #f5f5f5;
border-radius: 10px;
color: #333;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
transition: background 0.3s, color 0.3s, transform 0.3s;
margin-top: auto;
}
.contacts-location-btn:hover {
background: var(--accent-color);
color: #fff;
transform: translateX(5px);
}
.contacts-location-btn svg {
transition: transform 0.3s;
}
.contacts-location-btn:hover svg {
transform: translateX(3px);
} @media (max-width: 900px) {
.contacts-locations {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.contacts-breadcrumbs-row {
padding: 15px 20px;
}
.contacts-wrapper {
padding: 30px 20px;
}
.contacts-title {
font-size: 32px;
margin-bottom: 30px;
}
.contacts-general {
flex-direction: column;
gap: 15px;
padding: 20px;
}
.contacts-location-card {
padding: 20px;
}
.contacts-location-image {
width: calc(100% + 40px);
margin: -20px -20px 20px -20px;
height: 260px;
}
.contacts-location-title {
font-size: 20px;
}
.contacts-map {
height: 250px;
}
} .burger-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//atmospherevillage.com/wp-content/uploads/2025/11/viland.webp);
background-size: cover;
background-position: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.burger-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20, 20, 20, 0.92);
z-index: 1;
}
.burger-overlay.active {
opacity: 1;
visibility: visible;
}
.burger-container {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
padding: 40px 60px;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
} .burger-close {
position: absolute;
top: 40px;
right: 60px;
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 10px;
opacity: 0;
transform: rotate(-90deg) scale(0.8);
transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
z-index: 10;
}
.burger-overlay.animated .burger-close {
opacity: 1;
transform: rotate(0) scale(1);
}
.burger-close:hover {
color: var(--accent-color);
transform: rotate(90deg) scale(1.1);
} .burger-content {
flex: 1;
display: flex;
gap: 80px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
} .burger-left {
flex: 0 0 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 25px;
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}
.burger-overlay.animated .burger-left {
opacity: 1;
transform: translateX(0);
} .burger-locations {
display: flex;
flex-direction: column;
gap: 25px;
}
.burger-section-title {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-color);
margin: 0 0 10px;
} .burger-location-card {
display: flex;
gap: 20px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
text-decoration: none;
transition: background 0.3s ease, transform 0.3s ease;
}
.burger-location-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(10px);
}
.burger-location-image {
flex: 0 0 120px;
height: 90px;
border-radius: 10px;
overflow: hidden;
}
.burger-location-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.burger-location-card:hover .burger-location-image img {
transform: scale(1.1);
}
.burger-location-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.burger-location-info h4 {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 600;
color: #fff;
margin: 0 0 8px;
}
.burger-location-address {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 12px;
}
.burger-location-address svg {
flex-shrink: 0;
opacity: 0.6;
}
.burger-location-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 500;
color: var(--accent-color);
transition: gap 0.3s ease;
}
.burger-location-card:hover .burger-location-btn {
gap: 10px;
} .burger-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 60px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.burger-nav-list {
list-style: none;
padding: 0;
margin: 0 0 50px;
}
.burger-nav-item {
overflow: hidden;
}
.burger-nav-item a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
font-weight: 600;
color: #fff;
text-decoration: none;
padding: 12px 0;
position: relative;
opacity: 0;
transform: translateY(60px);
transition: color 0.3s ease, opacity 0.5s ease, transform 0.5s ease;
}
.burger-overlay.animated .burger-nav-item:nth-child(1) a { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.burger-overlay.animated .burger-nav-item:nth-child(2) a { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.burger-overlay.animated .burger-nav-item:nth-child(3) a { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.burger-overlay.animated .burger-nav-item:nth-child(4) a { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.burger-overlay.animated .burger-nav-item:nth-child(5) a { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.burger-overlay.animated .burger-nav-item:nth-child(6) a { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.burger-nav-item a::after {
content: '';
position: absolute;
bottom: 8px;
left: 0;
width: 0;
height: 3px;
background: var(--accent-color);
transition: width 0.3s ease;
}
.burger-nav-item a:hover {
color: var(--accent-color);
}
.burger-nav-item a:hover::after {
width: 100%;
} .burger-contacts {
display: flex;
align-items: center;
gap: 30px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
}
.burger-overlay.animated .burger-contacts {
opacity: 1;
transform: translateY(0);
}
.burger-phone {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 500;
transition: color 0.3s ease;
}
.burger-phone:hover {
color: var(--accent-color);
}
.burger-social {
display: flex;
gap: 12px;
}
.burger-social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #fff;
transition: background 0.3s ease, transform 0.3s ease;
}
.burger-social-btn:hover {
background: var(--accent-color);
transform: translateY(-3px);
}
.burger-social-btn svg {
width: 24px;
height: 24px;
} .burger-logo-mobile {
display: none;
} .burger-mobile-locations {
display: none;
} .burger-mobile-locations .burger-location-card {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease;
}
.burger-mobile-locations .burger-location-card:nth-child(1) {
transition-delay: 0s;
}
.burger-mobile-locations .burger-location-card:nth-child(2) {
transition-delay: 0.1s;
}
.burger-overlay.animated .burger-mobile-locations .burger-location-card {
opacity: 1;
transform: translateY(0);
}
.burger-overlay.animated .burger-mobile-locations .burger-location-card:nth-child(1) {
transition-delay: 0.5s;
}
.burger-overlay.animated .burger-mobile-locations .burger-location-card:nth-child(2) {
transition-delay: 0.6s;
} .burger-contacts-mobile {
display: none;
} .burger-contacts-desktop {
display: flex;
} .map-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.map-modal.active {
opacity: 1;
pointer-events: auto;
}
.map-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.map-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 900px;
max-height: 80vh;
height: 100%;
background: #fff;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.map-modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
background: rgba(0, 0, 0, 0.5);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: background 0.3s ease, transform 0.3s ease;
flex-shrink: 0;
}
.map-modal-close:hover {
background: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
.map-modal-close svg {
width: 24px;
height: 24px;
fill: #fff;
flex-shrink: 0;
}
.map-modal-title {
padding: 25px 30px 15px;
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 600;
color: #2A2A2A;
border-bottom: 1px solid #E5E5E5;
}
.map-modal-map {
flex: 1;
height: 100%;
background: #f5f5f5;
}
.map-modal-map iframe {
width: 100%;
height: 100%;
}
.map-modal-footer {
padding: 20px 30px;
background: #F9F9F9;
border-top: 1px solid #E5E5E5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.map-modal-address {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #666;
flex: 1;
}
.map-modal-route-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--accent-color);
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
text-decoration: none;
transition: background 0.3s ease, transform 0.3s ease;
white-space: nowrap;
}
.map-modal-route-btn:hover {
background: #B38B75;
transform: translateY(-2px);
color: #fff;
}
.map-modal-route-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
} .phone-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.phone-modal.active {
opacity: 1;
pointer-events: auto;
}
.phone-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.phone-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
background: #fff;
border-radius: 12px;
padding: 40px 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.phone-modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
padding: 0;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, transform 0.3s ease;
flex-shrink: 0;
aspect-ratio: 1 / 1;
}
.phone-modal-close:hover {
background: rgba(0, 0, 0, 0.2);
transform: rotate(90deg);
}
.phone-modal-close svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.phone-modal-title {
margin: 0 0 30px;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 600;
color: #2A2A2A;
text-align: center;
}
.phone-modal-phone {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 24px;
background: var(--accent-color);
color: #fff;
text-decoration: none;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 600;
transition: background 0.3s ease, transform 0.2s ease;
margin-bottom: 25px;
}
.phone-modal-phone:hover {
background: #B08E78;
transform: translateY(-2px);
color: #fff;
}
.phone-modal-phone:focus,
.phone-modal-phone:visited,
.phone-modal-phone:active {
color: #fff;
}
.phone-modal-phone svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.phone-modal-divider {
display: flex;
align-items: center;
margin: 25px 0;
gap: 15px;
}
.phone-modal-divider::before,
.phone-modal-divider::after {
content: '';
flex: 1;
height: 1px;
background: #E5E5E5;
}
.phone-modal-divider span {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #999;
}
.phone-modal-messengers {
display: flex;
gap: 12px;
}
.phone-modal-messenger {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 16px;
text-decoration: none;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
transition: transform 0.2s ease, opacity 0.3s ease;
}
.phone-modal-messenger:hover {
transform: translateY(-2px);
opacity: 0.9;
}
.phone-modal-messenger svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.phone-modal-messenger.whatsapp {
background: #25D366;
color: #fff;
}
.phone-modal-messenger.whatsapp:hover,
.phone-modal-messenger.whatsapp:focus,
.phone-modal-messenger.whatsapp:visited,
.phone-modal-messenger.whatsapp:active {
color: #fff;
}
.phone-modal-messenger.telegram {
background: #0088cc;
color: #fff;
}
.phone-modal-messenger.telegram:hover,
.phone-modal-messenger.telegram:focus,
.phone-modal-messenger.telegram:visited,
.phone-modal-messenger.telegram:active {
color: #fff;
} @media (max-width: 768px) {
.map-modal-content {
width: 95%;
max-height: 90vh;
}
.map-modal-title {
font-size: 20px;
padding: 20px 20px 12px;
}
.map-modal-map {
min-height: 300px;
}
.map-modal-footer {
flex-direction: column;
align-items: stretch;
padding: 15px 20px;
gap: 12px;
}
.map-modal-address {
font-size: 13px;
text-align: center;
}
.map-modal-route-btn {
width: 100%;
justify-content: center;
}
}p{
margin-bottom:0;
}
.video-wrapp{
width:100%;
height:100vh;
background:url(//atmospherevillage.com/wp-content/uploads/2026/01/less.webp) no-repeat center center;
background-size:cover;
position:relative;
overflow:hidden;
cursor:pointer;
} .video-wrapp.video-wrapp-sofia{
background:url(//atmospherevillage.com/wp-content/uploads/2025/12/2025-12-10-15.34.46.jpg) no-repeat center center;
background-size:cover;
}
.video-play-btn{
position:absolute;
width:100px;
height:100px;
pointer-events:none;
transition:transform 0.15s ease-out;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
.video-play-btn svg{
width:100%;
height:100%;
}
.photo-wrap{
position:relative;
}
.photo-item-1{
background:url(//atmospherevillage.com/wp-content/uploads/2026/01/gostinitsa.webp) no-repeat center center;
background-size:cover;
width:505px;
height:463px;
border-radius:20px;
}
.photo-item-2{
background: url(//atmospherevillage.com/wp-content/uploads/2025/12/Rectangle-15-min.png) no-repeat center center;
background-size: cover;
width: 278px;
height: 273px;
border-radius: 20px;
position: absolute;
top: 230px;
right: 0;
}
.photo-sofia-1{
background: url(//atmospherevillage.com/wp-content/uploads/2026/01/Villa-s-dvumya-spalnyami.webp) no-repeat center center;
background-size: cover;
}
.photo-sofia-2{
background: url(//atmospherevillage.com/wp-content/uploads/2025/12/RNI-Films-IMG-27BF83A1-9D49-49DE-AA00-D2F362D82781.webp) no-repeat center center;
background-size: cover;
} .elementor-38 .elementor-element.elementor-element-6366b96 .elementor-heading-title,
.elementor-639 .elementor-element.elementor-element-6366b96 .elementor-heading-title{
font-family: 'Allura', cursive !important;
font-size:96px;
font-weight:400;
}  .subtitle-video {
font-family: 'Allura', cursive !important;
} .title-about {
font-size: 50px;
font-weight: 700;
line-height: 60px;
color: #3D3D3D;
margin-bottom: 30px;
}
.title-about span {
color: var(--accent-color);
}
.about-p{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:40px;
}
.about-btn {
display: flex;
}
.about-btn-link {
display: flex;
align-items: center;
position: relative;
gap: 20px;
padding: 15px 30px 15px 80px;
border-radius: 50px;
background: var(--accent-color);
color: #fff;
font-size: 16px;
overflow: hidden;
z-index: 1;
}
.about-btn-link span {
transition: transform 0.4s ease;
position: relative;
z-index: 1;
}
.about-btn-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #e4d7ce;
border-radius: 50px;
transition: width 0.4s ease;
z-index: -1;
}
.about-btn-link:hover::before {
width: 100%;
}
.about-btn-link:hover {
color: #3d3d3d;
font-weight:500;
}
.about-btn-link:hover span {
transform: translateX(-50px);
}
.about-btn-link svg {
position: absolute;
width: 70px;
height: 70px;
left: -5px;
transition: all 0.4s ease;
}
.about-btn-link svg circle {
transition: fill 0.3s ease;
}
.about-btn-link svg path {
transition: fill 0.3s ease, stroke 0.3s ease;
}
.about-btn-link:hover svg {
left: calc(100% - 65px);
transform: rotate(45deg);
}
.about-btn-link:hover svg circle {
fill: var(--accent-color);
}
.about-btn-link:hover svg path {
fill: #fff;
stroke: var(--accent-color);
}
.elementor-38 .elementor-element.elementor-element-ed053bc .elementor-heading-title,
.elementor-639 .elementor-element.elementor-element-ed053bc .elementor-heading-title{
color:var(--accent-color);
} .grid-numer-wrapp{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 20px;
}
.grid-numer-wrapp-sofia{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 20px;
}
.numer{
background:#ccc;
border-radius:20px;
display:flex;
align-items:end;
padding-bottom:40px;
position:relative;
overflow:hidden;
}
.numer > a,
.numer > div{
z-index:2;
}
.numer::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
transform:scale(1);
transition:transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index:0;
}
.numer:hover::before{
transform:scale(1.15);
}
.numer::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:60%;
background:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
z-index:1;
}
.numer:hover::after{
background:linear-gradient(to top, rgba(90, 56, 41, 1) 0%, rgba(90, 56, 41, 0) 100%);
transition:background 0.6s ease;
}
.numer-1{
height:295px;
background:#ccc;
}
.numer-1::before{
background-image:url(//atmospherevillage.com/wp-content/uploads/2026/01/Bolshoe-shale.webp);
}
.numer-sofia-1{
grid-column:span 1;
grid-row:span 2;
height:600px;
display: flex;
justify-content: center;
text-align: center;
}
.numer-sofia-1::before{
background-image:url(//atmospherevillage.com/wp-content/uploads/2025/12/IMG_1495.jpg);
background-position: center bottom;
}
.numer-2{
background:#ccc;
}
.numer-2::before{
background-image:url(//atmospherevillage.com/wp-content/uploads/2026/01/Malenkoe-shale.webp);
}
.numer-3{
grid-column:span 2;
grid-row:span 2;
background:#ccc;
display:flex;
justify-content:center;
text-align:center;
}
.numer-sofia-3{
grid-column:span 1;
grid-row:span 2;
}
.numer-3::before{
background-image:url(//atmospherevillage.com/wp-content/uploads/2026/01/Villa.webp);
}
.numer-sofia-3::before{
background-image:url(//atmospherevillage.com/wp-content/uploads/2025/12/IMG_1495.jpg);
}
.numer-4{
grid-column:span 2;
background:#ccc;
}
.numer-4::before{
background-image:url(//atmospherevillage.com/wp-content/uploads/2026/01/Afrejm.webp);
}
.numer-4::after{
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to right, rgba(90, 56, 41, 0.85) 0%, rgba(90, 56, 41, 0.5) 25%, rgba(90, 56, 41, 0.2) 40%, rgba(90, 56, 41, 0) 55%);
opacity:0;
transition:opacity 0.6s ease;
}
.numer-4:hover::after{
opacity:1;
}
.numer-5{
background:#ccc;
}
.numer-5::before{
background-image:url(//atmospherevillage.com/wp-content/uploads/2025/12/638849861008073169-7c89258f-4c09-4c4e-8893-ec1eaf4bfacf-1.jpeg);
}
.numer-6{
grid-column:span 2;
background:#ccc;
}
.numer-6::before{
background-image:url(//atmospherevillage.com/wp-content/uploads/2025/12/638849868376394598-e0936946-355a-46db-bdb2-96a232749522-2.jpeg);
}
.numer-6::after{
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to right, rgba(90, 56, 41, 0.85) 0%, rgba(90, 56, 41, 0.5) 25%, rgba(90, 56, 41, 0.2) 40%, rgba(90, 56, 41, 0) 55%);
opacity:0;
transition:opacity 0.6s ease;
}
.numer-6:hover::after{
opacity:1;
}
.numer-7{
background:#ccc;
}
.numer-7::before{
background-image:url(//atmospherevillage.com/wp-content/uploads/2025/12/IMG_1226.png);
} .news-carousel-wrapper{
width:100%;
}
.news-carousel-counter{
display:none;
}
.news-carousel{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
}
.news-card{
display:flex;
flex-direction:column;
text-decoration:none;
}
.news-card-image{
width:100%;
height:300px;
border-radius:20px;
position:relative;
overflow:hidden;
}
.news-card-image::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center center;
background-image:inherit;
transform:scale(1);
transition:transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-card:hover .news-card-image::before{
transform:scale(1.15);
}
.news-card-content{
padding-top:30px;
padding-right:5px;
}
.news-card-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:15px;
margin-bottom:15px;
}
.news-card-title{
font-size:24px;
font-weight:600;
color:var(--accent-color);
margin:0;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
line-height:1.3;
}
.news-card-icon{
flex-shrink:0;
width:58px;
height:58px;
transition:transform 0.3s ease;
margin-right:-5px;
}
.news-card-icon svg circle{
transition:fill 0.3s ease, stroke 0.3s ease;
}
.news-card-icon svg path{
transition:fill 0.3s ease;
}
.news-card:hover .news-card-icon{
transform:rotate(45deg);
}
.news-card:hover .news-card-icon svg circle{
fill:var(--accent-color);
stroke:var(--accent-color);
}
.news-card:hover .news-card-icon svg path{
fill:#fff;
}
.news-card-excerpt{
font-size:16px;
color:#585858;
margin:0;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
line-height:1.5;
}
.number-title-svg{
display:grid;
grid-template-columns:1fr 42px;
gap:20px;
align-items:center;
justify-content:space-between;
padding:0 30px;
width: 100%;
position:relative;
z-index:2;
}
.numer-1 .number-title-svg,
.numer-2 .number-title-svg,
.numer-3 .number-title-svg,
.numer-5 .number-title-svg,
.numer-7 .number-title-svg{
display:grid;
}
.number-title-svg span{
color:#fff;
font-size:24px;
font-weight:600;
line-height:30px;
}
.number-title-svg svg{
transition:transform 0.4s ease, margin-left 0.4s ease;
}
.numer-4 .number-title-svg,
.numer-6 .number-title-svg{
display:flex !important;
grid-template-columns:none !important;
gap:10px !important;
width:100%;
position:relative;
justify-content:flex-start !important;
}
.numer-4 .number-title-svg span,
.numer-6 .number-title-svg span{
flex-shrink:0;
flex-grow:0;
transition:flex-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.numer-4:hover .number-title-svg span,
.numer-6:hover .number-title-svg span{
flex-grow:1;
}
.numer-4 .number-title-svg svg,
.numer-6 .number-title-svg svg{
flex-shrink:0;
}
.number-title-svg svg circle{
transition:fill 0.4s ease, stroke 0.4s ease;
}
.number-title-svg svg path{
transition:fill 0.4s ease;
}
.numer:hover .number-title-svg svg{
transform:rotate(45deg);
}
.numer:hover .number-title-svg svg circle{
fill:#fff;
stroke:#fff;
}
.numer:hover .number-title-svg svg path{
fill:rgba(90, 56, 41, 1);
}
.about-btn-link-number{
background:none;
border:1px solid #fff;
}
.about-btn-link-number svg circle{
fill:#fff;
}
.number-3-wrap{
position:relative;
z-index:2;
}
.number-e3-title{
font-size:32px;
font-weight:600;
color:#fff;
margin-bottom:16px;
}
.number-3-p{
color:#fff;
font-size:16px;
margin-bottom:27px;
}
.about-btn-number{
display: flex;
justify-content: center;
}
.about-btn-link-number::before {
background: #fff;
}
.number-4-span{
font-size: 32px !important;
} .active-wrap{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:50px;
}
.active-item{
padding:20px;
border-radius:20px;
} .active-card{
display:contents;
} .active-arrow{
display:none;
}
.active-item-1{
display: flex;
flex-direction: column;
justify-content: center;
}
.active-item-2{
background:#fff;
}
.active-item-4{
background:#DCCEC6;
}
.active-title{
font-size:36px;
font-weight:700;
color: var(--accent-color);
margin-bottom:10px;
}
.active-p{
font-size:16px;
color:#000;
}
.active-btn{
margin-top:20px;
}
.active-svg{
display:flex;
}
.active-svg-1{
background:#EBE4E0;
padding:20px 10px 15px;
border-radius:10px;
}
.active-svg-2{
background:#EBE4E0;
padding:14px 11px 10px 17px;
border-radius:10px;
}
.active-svg-3{
background:#F3F1F0;
padding:18px 15px 13px 16px;
border-radius:10px;
}
.active-subtitle{
color:#3d3d3d;
font-size:20px;
margin:20px 0 10px;
font-weight:600;
}
.slogan span{
display:inline-block;
color:#707070;
font-size:16px;
border-radius:50px;
border:1px solid #707070;
padding:3px 26px;
opacity:70%;
margin-bottom:15px;
}
.slogan-wrap span{
margin-bottom:0;
} .single-news-page{
padding:60px 0;
}
.breadcrumbs-wrapper{
max-width:800px;
margin:0 auto 30px;
padding:0 20px;
}
.breadcrumbs{
font-size:14px;
color:#585858;
}
.breadcrumbs a{
color:#585858;
text-decoration:none;
transition:color 0.3s ease;
}
.breadcrumbs a:hover{
color:var(--accent-color);
}
.breadcrumbs .separator{
margin:0 10px;
color:#585858;
}
.breadcrumbs .current{
color:var(--accent-color);
}
.single-news-content{
max-width:800px;
margin:0 auto;
padding:0 20px;
}
.single-news-title{
font-size:36px;
font-weight:700;
color:var(--accent-color);
margin-bottom:20px;
line-height:1.3;
}
.single-news-date{
display:none;
}
.single-news-image{
margin-bottom:40px;
position:relative;
}
.single-news-image img{
width:100%;
height:400px;
border-radius:20px;
object-fit:cover;
}
.single-news-image::after{
content:attr(data-date);
position:absolute;
bottom:20px;
right:20px;
background:rgba(0, 0, 0, 0.7);
color:#fff;
padding:8px 20px;
border-radius:50px;
font-size:14px;
font-weight:500;
}
.single-news-text{
font-size:16px;
line-height:1.8;
color:#3d3d3d;
margin-bottom:60px;
}
.single-news-text p{
margin-bottom:20px;
}
.single-news-text h2,
.single-news-text h3{
color:var(--accent-color);
margin-top:40px;
margin-bottom:20px;
}
.single-news-gallery{
margin-top:60px;
}
.gallery-title{
font-size:28px;
font-weight:700;
color:var(--accent-color);
margin-bottom:30px;
}
.gallery-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
}
.gallery-item img{
width:100%;
height:auto;
border-radius:20px;
object-fit:cover;
} .faq-accordion{
width:100%;
}
.faq-item{
border-bottom:1px solid #e0e0e0;
border-radius:0;
transition:background 0.4s ease, margin 0.4s ease, border-color 0.4s ease, border-radius 0.4s ease;
}
.faq-item.active{
border-bottom:1px solid transparent;
background:#DFDAD7;
border-radius:20px;
margin:10px 0;
}
.faq-question{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 30px;
cursor:pointer;
transition:all 0.3s ease;
}
.faq-question-text{
font-size:20px;
font-weight:500;
color:#333;
flex:1;
padding-right:20px;
transition:color 0.3s ease;
}
.faq-item.active .faq-question-text{
color:#997058;
}
.faq-icon{
width:24px;
height:24px;
position:relative;
flex-shrink:0;
}
.faq-icon::before,
.faq-icon::after{
content:'';
position:absolute;
background:var(--accent-color);
transition:transform 0.3s ease;
}
.faq-icon::before{
width:2px;
height:24px;
left:50%;
top:0;
transform:translateX(-50%);
}
.faq-icon::after{
width:24px;
height:2px;
top:50%;
left:0;
transform:translateY(-50%);
}
.faq-item.active .faq-icon::before{
transform:translateX(-50%) rotate(90deg);
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.5s ease-out;
}
.faq-answer-inner{
border-top:1px solid #ccc;
margin:0 30px;
padding:20px 0 25px;
}
.faq-answer p{
margin:0;
font-size:16px;
line-height:1.6;
color:#666;
} .scroll-arrow{
animation:scrollArrowMove 2s ease-in-out infinite;
}
.scroll-arrow svg path:first-child{
animation:scrollArrowColor1 2s ease-in-out infinite;
}
.scroll-arrow svg path:last-child{
animation:scrollArrowColor2 2s ease-in-out infinite;
animation-delay:0.3s;
}
@keyframes scrollArrowMove{
0%, 100%{
transform:translateY(0);
}
50%{
transform:translateY(12px);
}
}
.scroll-arrow svg path{
stroke-width:1.5;
stroke-opacity:1 !important;
}
.scroll-arrow svg path:first-child{
stroke:rgba(255, 255, 255, 0.9);
}
.scroll-arrow svg path:last-child{
stroke:rgba(255, 255, 255, 0.7);
}
@keyframes scrollArrowColor1{
0%, 20%{
stroke:rgba(255, 255, 255, 0.9);
}
40%, 60%{
stroke:#997058;
}
80%, 100%{
stroke:rgba(255, 255, 255, 0.9);
}
}
@keyframes scrollArrowColor2{
0%, 20%{
stroke:rgba(255, 255, 255, 0.7);
}
40%, 60%{
stroke:#997058;
}
80%, 100%{
stroke:rgba(255, 255, 255, 0.7);
}
}body{
background:#f8f8f8 !important;
}
.svg-adres{
display: flex;
align-items: center;
justify-content: center;
width: 90%;
text-align: center;
margin: 0 auto;
position:relative;
}
.svg-adres svg{
position:absolute;
width:50px;
height:50px;
}
.adres-text{
color:#fff;
font-size:18px;
font-family: "Montserrat", Sans-serif;
z-index:9;
}
.title-svg-mobile{
display:none;
flex-direction:column;
align-items:center;
margin-bottom:50px;
}
.title-mobile{
font-size:32px;
color:#3d3d3d;
text-align:center;
font-weight:600;
line-height:42px;
position: absolute;
top: 30px;
}
.title-mobile span{
color:#997058;
}
.number-title-svg-mobile{
display:none !important;
}
.span-no{
display:none;
} @media (max-width: 1024px) and (min-width: 768px) { .split.left.active,
.split.right.active {
flex: 1 !important;
}
.split-container:has(.split.left.active) .logo-center,
.split-container:has(.split.right.active) .logo-center {
left: 50% !important;
}
.split-container:has(.split.left.active)::before,
.split-container:has(.split.left.active)::after,
.split-container:has(.split.right.active)::before,
.split-container:has(.split.right.active)::after {
left: 50% !important;
} .arrow-hint {
display: none !important;
} .hover-content {
opacity: 1 !important;
pointer-events: auto !important;
}
.hover-title {
font-size: 5rem;
}
.hover-description {
font-size: 1.25rem;
}
.logo-center {
width: 200px;
}
.logo-svg {
width: 200px;
}  .fullscreen-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 30px;
} .menu-logo-container {
position: relative;
top: auto;
left: auto;
transform: none;
flex-direction: column;
align-items: center;
width: auto;
margin-bottom: 0;
} .menu-logo-container .menu-logo {
width: 220px;
} .menu-line {
display: none;
} .menu-logo-container::after {
content: '';
display: block;
width: 2px;
height: 100px;
background: rgba(255, 255, 255, 0.8);
margin-top: 30px;
transform: scaleY(0);
transform-origin: top center;
transition: transform 0.5s ease 0.4s;
}
.fullscreen-menu.active .menu-logo-container::after {
transform: scaleY(1);
} .fullscreen-menu .menu-nav {
position: relative;
top: auto;
left: auto;
transform: none;
width: auto;
margin-top: 30px;
}
.menu-nav ul {
flex-direction: column;
gap: 25px;
align-items: center;
}
.menu-nav li a {
font-size: 28px;
text-align: center;
padding: 10px 0;
} .fullscreen-menu.active .menu-nav li:nth-child(1) a { transition-delay: 0.8s; }
.fullscreen-menu.active .menu-nav li:nth-child(2) a { transition-delay: 0.9s; }
.fullscreen-menu.active .menu-nav li:nth-child(3) a { transition-delay: 1.0s; }
.fullscreen-menu.active .menu-nav li:nth-child(4) a { transition-delay: 1.1s; }
.fullscreen-menu.active .menu-nav li:nth-child(5) a { transition-delay: 1.2s; } .menu-close {
position: absolute;
top: 25px;
right: 25px;
font-size: 36px;
}
} @media (max-width: 767px) { body:has(.split-container) { } .split-container {
flex-direction: column;
height: 100vh;
position: relative;
} .split::before {
display: none;
}
.split {
flex: none !important;
width: 100%;
height: 50vh !important;
min-height: 50vh !important;
max-height: 50vh !important;
} .split.left::before {
display: block !important;
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
z-index: 1;
pointer-events: none;
} .split.right::before {
display: block !important;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
z-index: 1;
pointer-events: none;
} .split.left.active,
.split.right.active {
flex: none !important;
height: 50vh !important;
} .split-container::before,
.split-container::after {
display: none;
} .arrow-hint {
display: none !important;
} .logo-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
z-index: 102;
}
.logo-svg {
width: 100px;
} .logo-center::before,
.logo-center::after {
content: '';
position: absolute;
height: 2px;
width: 50vw;
background: rgba(255, 255, 255, 0.9);
top: 50%;
transform: translateY(-50%) scaleX(0);
z-index: -1;
pointer-events: none;
} .logo-center::before {
right: calc(50% + 60px);
transform-origin: right;
} .logo-center::after {
left: calc(50% + 60px);
transform-origin: left;
}
.split-container.loaded .logo-center::before {
animation: lineGrowFromRight 0.6s ease 0.6s forwards;
}
.split-container.loaded .logo-center::after {
animation: lineGrowFromLeft 0.6s ease 0.6s forwards;
}
@keyframes lineGrowFromRight {
from {
transform: translateY(-50%) scaleX(0);
}
to {
transform: translateY(-50%) scaleX(1);
}
}
@keyframes lineGrowFromLeft {
from {
transform: translateY(-50%) scaleX(0);
}
to {
transform: translateY(-50%) scaleX(1);
}
} .hover-content {
opacity: 1 !important;
pointer-events: auto !important;
} .location-name {
display: none;
} .hover-content {
width: 100%;
max-width: none;
}
.hover-title {
font-size: 3.5rem;
margin-bottom: 12px;
}
.hover-description {
font-size: 1rem;
margin: 0 0 15px 0;
line-height: 1.5;
max-width:320px;
}
.hover-button {
padding: 10px 25px;
font-size: 0.95rem;
margin-bottom: 10px;
gap: 6px;
}
.hover-button::after {
width: 16px;
height: 16px;
}
.hover-address {
display: block;
font-size: 0.875rem;
} .split::after {
width: 100%;
height: 100%;
}
.split.left::after {
transform: translateY(0);
}
.split.right::after {
transform: translateY(0);
}
.split-container.loaded .split.left::after {
animation: slideUpOut 0.6s ease 1.2s forwards;
}
.split-container.loaded .split.right::after {
animation: slideDownOut 0.6s ease 1.2s forwards;
}
@keyframes slideUpOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes slideDownOut {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}  .fullscreen-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
} .menu-logo-container {
position: relative;
top: auto;
left: auto;
transform: none;
flex-direction: column;
align-items: center;
width: auto;
margin-bottom: 0;
} .menu-logo-container .menu-logo {
width: 180px;
height: auto;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.fullscreen-menu.active .menu-logo-container .menu-logo {
opacity: 1;
transform: scale(1);
} .menu-line {
display: none;
} .menu-logo-container::after {
content: '';
display: block;
width: 2px;
height: 80px;
background: rgba(255, 255, 255, 0.8);
margin-top: 25px;
transform: scaleY(0);
transform-origin: top center;
transition: transform 0.5s ease 0.4s;
}
.fullscreen-menu.active .menu-logo-container::after {
transform: scaleY(1);
} .fullscreen-menu .menu-nav {
position: relative;
top: auto;
left: auto;
transform: none;
width: auto;
margin-top: 25px;
}
.menu-nav ul {
flex-direction: column;
gap: 20px;
align-items: center;
}
.menu-nav li a {
font-size: 22px;
text-align: center;
padding: 8px 0;
} .fullscreen-menu.active .menu-nav li:nth-child(1) a { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
.fullscreen-menu.active .menu-nav li:nth-child(2) a { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }
.fullscreen-menu.active .menu-nav li:nth-child(3) a { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }
.fullscreen-menu.active .menu-nav li:nth-child(4) a { opacity: 1; transform: translateY(0); transition-delay: 1.1s; }
.fullscreen-menu.active .menu-nav li:nth-child(5) a { opacity: 1; transform: translateY(0); transition-delay: 1.2s; } .menu-close {
position: absolute;
top: 20px;
right: 20px;
font-size: 32px;
}
} @media (max-width: 1024px){
.news-carousel{
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 768px){ .news-carousel{
display:flex;
grid-template-columns:none;
overflow-x:scroll;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
gap:15px;
padding-bottom:10px;
scrollbar-width:none;
}
.news-carousel::-webkit-scrollbar{
display:none;
} .news-card{
flex:0 0 85vw;
scroll-snap-align:start;
}
.news-card-image{
height:220px;
}
.news-card-content{
padding-top:20px;
}
.news-card-title{
font-size:20px;
}
.news-card-icon{
width:48px;
height:48px;
}
.news-card-icon svg{
width:48px;
height:48px;
}
.news-card-excerpt{
display:none;
}
} @media (max-width: 768px){
.single-news-content{
padding:0 5px;
}
.breadcrumbs-wrapper{
padding:0 5px;
}
.single-news-title{
font-size:28px;
}
.single-news-image img{
height:200px;
border-radius:10px;
}
.single-news-image::after{
font-size:12px;
padding:6px 15px;
bottom:15px;
right:15px;
}
.gallery-grid{
grid-template-columns:1fr;
}
.gallery-item img{
border-radius:10px;
}
} @media (max-width: 1300px) { .site-header.scrolled .header-container {
grid-template-columns: 1fr auto 1fr !important;
padding: 15px 30px !important;
gap: 15px !important;
}
.site-header.scrolled .burger-menu {
display: inline-flex !important;
}
.site-header.scrolled .header-center {
grid-column: auto !important;
justify-content: center !important;
gap: 0 !important;
}
.site-header.scrolled .header-center .main-nav {
display: none !important;
}
.site-header.scrolled .header-logo img {
max-height: 50px !important;
}
.site-header.scrolled .header-actions {
grid-column: auto !important;
justify-content: flex-end !important;
gap: 0 !important;
}
.site-header.scrolled .main-nav-scrolled {
display: none !important;
}
.site-header.scrolled .booking-btn-scrolled {
display: none !important;
}
.site-header.scrolled .phone-icon-scrolled {
display: none !important;
}
.site-header.scrolled .booking-btn-normal {
display: none !important;
}
.site-header.scrolled .phone-icon-normal {
display: inline-flex !important;
width: 32px !important;
height: 32px !important;
}
.header-container {
grid-template-columns: 1fr auto 1fr;
padding: 15px 30px;
gap: 15px;
} .burger-menu {
justify-self: start;
padding: 10px 15px;
}
.burger-icon {
width: 36px;
height: 8px;
} .header-center {
justify-self: center;
gap: 0;
}
.header-center .main-nav {
display: none;
}
.header-logo img {
max-height: 50px;
} .header-actions {
justify-self: end;
gap: 0;
}
.booking-btn-normal {
display: none;
}
.phone-icon {
width: 32px;
height: 32px;
} .header-solid .header-container {
padding: 15px 30px;
}
.header-solid .header-logo img {
max-height: 50px;
}
.header-solid .burger-menu {
padding: 10px 15px;
}
.header-solid .burger-icon {
width: 36px;
height: 8px;
}
.header-solid .phone-icon {
width: 32px;
height: 32px;
}
} @media (max-width: 768px) {
.site-header.scrolled .header-container {
padding: 10px 15px !important;
gap: 10px !important;
}
.site-header.scrolled .header-logo img {
max-height: 35px !important;
}
.site-header.scrolled .phone-icon-normal {
width: 24px !important;
height: 24px !important;
}
.header-container {
padding: 10px 15px;
gap: 10px;
}
.burger-menu {
padding: 8px 12px;
}
.burger-icon {
width: 28px;
height: 6px;
}
.header-logo img {
max-height: 35px;
}
.phone-icon {
width: 24px;
height: 24px;
}
.header-solid .header-container {
padding: 10px 15px;
}
.header-solid .header-logo img {
max-height: 35px;
}
.header-solid .burger-menu {
padding: 8px 12px;
}
.header-solid .burger-icon {
width: 28px;
height: 6px;
}
.header-solid .phone-icon {
width: 24px;
height: 24px;
}
} @media (max-width: 1150px) { .room-carousel-counter {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
margin: 0 auto 20px;
color: #707070;
font-size: 14px;
font-weight: 500;
border: 1px solid #707070;
border-radius: 50px;
padding: 3px 20px;
gap: 5px;
} .grid-numer-wrapp {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
gap: 15px;
padding: 0px 15px;
grid-template-columns: none;
grid-template-rows: none;
scrollbar-width: none;
}
.grid-numer-wrapp::-webkit-scrollbar {
display: none;
} .numer {
flex: 0 0 85vw;
max-width: 500px;
height: 456px;
scroll-snap-align: start;
padding-bottom: 10px;
}
.numer-1,
.numer-3 {
height: 456px;
grid-column: auto;
grid-row: auto;
} .numer::after {
background: linear-gradient(to top, rgba(90, 56, 41, 1) 0%, rgba(90, 56, 41, 0) 100%);
height: 40%;
} .number-title-svg span {
font-size: 32px;
font-weight: 600;
line-height: 40px;
text-align: left;
}
.numer-4,
.numer-6 {
grid-column: auto;
} .numer:hover::before {
transform: scale(1);
}
.numer:hover::after {
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
} .numer-4::after,
.numer-6::after {
opacity: 1 !important;
background: linear-gradient(to top, rgba(90, 56, 41, 1) 0%, rgba(90, 56, 41, 0) 100%); !important;
top: auto !important;
bottom: 0 !important;
height: 40% !important;
}
.numer:hover .number-title-svg svg {
transform: rotate(0);
}
.numer:hover .number-title-svg svg circle {
fill: transparent;
stroke: white;
}
.numer:hover .number-title-svg svg path {
fill: white;
} .numer-3 {
display: flex;
align-items: flex-end;
justify-content: flex-start;
text-align: left;
} .number-3-wrap {
display: none !important;
} .number-title-svg-mobile {
display: grid !important;
} .number-4-span,
.number-6-span {
font-size: 32px !important;
font-weight: 600;
}
.number-title-svg {
padding: 0 20px 40px 20px;
gap: 50px;
} .numer-4 .number-title-svg,
.numer-6 .number-title-svg {
display: grid !important;
grid-template-columns: 1fr 42px !important;
gap: 20px !important;
justify-content: space-between !important;
padding: 0 20px 50px 20px !important;
}
.numer-4,
.numer-6 {
align-items: flex-end !important;
padding-bottom: 0 !important;
}
.title-svg-mobile {
display: flex;
} .active-wrap {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
} @media (max-width: 768px){
.photo-item-1{
width:294px;
height:234px;
border-radius:20px;
}
.photo-item-2{
width: 163px;
height: 157px;
top: 60px;
right: 0;
border:1px solid #fff;
} .grid-numer-wrapp{
position:relative;
}
.span-yes{
display:none;
}
.span-no{
display:inline-block;
}
.title-about {
font-size: 34px;
line-height: 44px;
} .scroll-arrow svg path{
stroke-width:3 !important;
} .numer {
max-width: none;
}
.title-about{
display:none;
}
.about-p{
margin-top:20px;
padding:0 10px;
}
.about-btn {
justify-content: center;
}
.about-btn-link {
padding: 15px 70px 15px 100px;
border: 1px solid var(--accent-color);
background: #cccccc00;
color: var(--accent-color);
}
} @media (max-width: 767px) {
.active-btn {
display: none;
}
.active-wrap {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
} .active-item-1 {
background: transparent !important;
border-radius: 0 !important;
text-align: center;
padding: 0 20px 30px !important;
}
.active-item-1 .slogan {
margin-bottom: 15px;
}
.active-item-1 .slogan span {
border: 1px solid #707070;
border-radius: 50px;
padding: 5px 20px;
font-size: 14px;
}
.active-title {
font-size: 32px !important;
margin-bottom: 15px !important;
}
.active-item-1 .active-p {
font-size: 16px;
color: #3d3d3d;
} .active-item-2,
.active-item-3,
.active-item-4 {
display: flex !important;
flex-direction: column;
background: transparent !important;
border-radius: 0 !important;
padding: 0px !important;
margin-bottom: 25px;
} .active-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
background: #e8e0db;
border-radius: 20px;
padding: 12px 15px;
gap: 10px;
} .active-card .active-svg {
width: 55px;
height: 55px;
margin-top: 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0%;
}
.active-card .active-svg svg {
width: 51px;
height: 31px;
}
.active-card .active-svg-2 svg {
width: 45px !important;
height: 45px !important;
}
.active-svg-3 svg {
width: 42px;
height: 38px;
} .active-card .active-subtitle {
margin: 0 !important;
font-size: 20px !important;
font-weight: 600;
color: #3d3d3d;
padding-left: 15px;
border-left: 2px solid #b09382;
line-height: 1.3;
width: 96%;
} .active-arrow {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #d5c8c0;
border-radius: 50%;
} .active-item-2 .active-p,
.active-item-3 .active-p,
.active-item-4 .active-p {
margin: 15px auto 0;
font-size: 14px;
color: #3d3d3d;
text-align: center;
width: 92%;
} .active-svg-1,
.active-svg-2,
.active-svg-3 {
background: transparent !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
}
}  @media (max-width: 1024px) {
.accom-breadcrumbs-row {
padding: 15px 20px 0;
}
.accom-single-wrapper {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 20px 80px 20px;
}
.accom-single-right { display: none;
position: static;
} body.booking-popup-active .accom-single-right {
display: block !important;
position: static !important;
width: 100% !important;
max-width: none !important;
background: transparent !important;
padding: 0 !important;
margin: 20px 0 !important;
} body.booking-popup-active .booking-sheet-body .accom-single-right {
position: relative !important;
}
.accom-booking-card {
position: relative;
top: 0;
} .mobile-booking-btn {
display: flex;
}
.booking-bottom-sheet {
display: block;
}
.accom-slider-container {
height: 500px;
}
.accom-info-title {
font-size: 40px;
}
.accom-info-description,
.accom-info-description p,
.accom-info-description ul li {
font-size: 18px;
}
.accom-block-title {
font-size: 20px;
}
.accom-check-label {
font-size: 22px;
}
.accom-check-value {
font-size: 18px;
}
.accom-equipment-grid {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 767px) {
.accom-breadcrumbs-row {
padding: 15px 15px 0;
gap: 10px;
}
.accom-breadcrumbs {
font-size: 12px;
gap: 6px;
}
.accom-share-btn span {
display: none;
}
.accom-share-btn {
padding: 8px;
}
.accom-single-wrapper {
grid-template-columns: 1fr;
gap: 15px;
padding: 0 15px 60px 15px;
}
.accom-single-right {
order: -1;
}
.accom-slider-container {
height: 350px;
}
.accom-slider-btn svg {
width: 35px;
height: 35px;
}
.accom-slider-prev {
left: 10px;
}
.accom-slider-next {
right: 10px;
}
.accom-slider-dots {
bottom: 15px;
gap: 8px;
}
.accom-slider-dot {
width: 8px;
height: 8px;
} .accom-video-btn {
bottom: 15px;
right: 15px;
padding: 10px 15px;
font-size: 12px;
}
.accom-video-btn svg {
width: 16px;
height: 16px;
} .accom-video-lightbox-close {
top: 15px;
right: 15px;
font-size: 30px;
}
.accom-video-lightbox-content {
width: 95%;
}
.accom-info-block {
padding: 25px 20px;
border-radius: 15px;
}
.accom-info-title {
font-size: 28px;
margin-bottom: 10px;
}
.accom-info-meta {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.accom-info-description,
.accom-info-description p,
.accom-info-description ul li {
font-size: 16px;
line-height: 1.6;
}
.accom-block-title {
font-size: 18px;
} .accom-equipment-block {
padding: 25px 20px;
}
.accom-equipment-tags {
gap: 8px;
}
.accom-equipment-tag {
font-size: 12px;
padding: 6px 12px;
}
.accom-equipment-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.accom-equipment-category h3 {
font-size: 16px;
}
.accom-equipment-category li {
font-size: 14px;
} .accom-rules-block {
padding: 25px 20px;
}
.accom-check-times {
flex-wrap: nowrap;
gap: 15px;
justify-content: flex-start;
}
.accom-check-time {
text-align: left;
min-width: auto;
}
.accom-check-label {
font-size: 18px;
}
.accom-check-value {
font-size: 14px;
} .accom-check-line {
display: none;
}
.accom-check-icon {
flex-shrink: 0;
}
.accom-check-icon img {
height: 40px;
} .accom-rules-list {
gap: 15px;
}
.accom-rule-item {
gap: 12px;
}
.accom-rule-icon {
width: 28px;
height: 28px;
}
.accom-rule-text {
font-size: 14px;
} .accom-booking-card {
padding: 20px;
border-radius: 15px;
}
.accom-booking-title {
font-size: 18px;
}
.accom-booking-subtitle {
font-size: 13px;
}
.accom-booking-btn {
padding: 14px 20px;
font-size: 14px;
} .accom-lightbox-btn svg {
width: 35px;
height: 35px;
}
.accom-lightbox-prev {
left: 10px;
}
.accom-lightbox-next {
right: 10px;
}
.accom-lightbox-close {
top: 15px;
right: 15px;
font-size: 30px;
}
.accom-lightbox-counter {
bottom: 20px;
font-size: 14px;
} .accom-bottom-bg {
display: block;
}
.accom-bottom-bg img {
height: auto;
}
} @media (max-width: 480px) {
.accom-slider-container {
height: 280px;
}
.accom-info-title {
font-size: 24px;
}
.accom-info-block,
.accom-equipment-block,
.accom-rules-block {
padding: 20px 15px;
border-radius: 12px;
} .accom-check-times {
gap: 12px;
}
.accom-check-label {
font-size: 16px;
}
.accom-check-value {
font-size: 12px;
}
.accom-check-icon img {
height: 35px;
}
.accom-booking-card {
padding: 15px;
}
}  @media (max-width: 1024px) {
.route-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.route-single-wrapper {
grid-template-columns: 1fr;
gap: 30px;
padding: 20px 20px 0;
}
.route-booking-card {
position: static;
}
.route-breadcrumbs-row {
padding: 15px 20px 0;
}
.route-archive-container {
padding: 0 20px;
}
.route-archive-title {
font-size: 36px;
}
.route-includes-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.route-slider-container {
height: 420px;
}
.route-slider-btn svg {
width: 45px;
height: 45px;
}
} @media (max-width: 767px) {
.route-archive-page {
padding: 0 0 60px;
}
.route-archive-container {
padding: 0 15px;
}
.route-breadcrumbs {
font-size: 12px;
gap: 6px;
flex-wrap: wrap;
}
.route-archive-title {
font-size: 28px;
margin-bottom: 20px;
}
.route-filter {
gap: 8px;
margin-bottom: 25px;
}
.route-filter-btn {
padding: 8px 16px;
font-size: 13px;
}
.route-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.route-card-image {
height: 200px;
}
.route-card-title {
font-size: 18px;
}
.route-card-price {
font-size: 16px;
} .route-single-page {
padding: 0 0 60px;
}
.route-breadcrumbs-row {
padding: 15px 15px 0;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.route-share-btn span {
display: none;
}
.route-share-btn {
padding: 8px;
}
.route-single-wrapper {
padding: 15px 15px 0;
gap: 20px;
}
.route-slider-container {
height: 350px;
}
.route-slider-btn svg {
width: 40px;
height: 40px;
}
.route-slider-dots {
bottom: 15px;
gap: 8px;
}
.route-slider-dot {
width: 8px;
height: 8px;
}
.route-info-block {
padding: 20px 15px;
}
.route-info-title {
font-size: 24px;
}
.route-info-meta {
gap: 15px;
}
.route-info-meta-item {
font-size: 14px;
}
.route-includes-block {
padding: 20px 15px;
}
.route-block-title {
font-size: 18px;
}
.route-includes-col h3 {
font-size: 14px;
}
.route-includes-col ul li {
font-size: 14px;
padding: 6px 0 6px 16px;
}
.route-booking-card {
padding: 20px 15px;
}
.route-booking-price .price-value {
font-size: 26px;
}
.route-booking-btn {
padding: 14px;
font-size: 15px;
} .route-lightbox-btn svg {
width: 40px;
height: 40px;
}
.route-lightbox-btn.prev {
left: 15px;
}
.route-lightbox-btn.next {
right: 15px;
}
.route-lightbox-close {
top: 15px;
right: 15px;
width: 40px;
height: 40px;
font-size: 24px;
}
.route-lightbox-counter {
bottom: 20px;
font-size: 14px;
}
} @media (max-width: 480px) {
.route-slider-container {
height: 280px;
border-radius: 15px;
}
.route-slider-btn svg {
width: 35px;
height: 35px;
}
.route-slider-btn.prev {
left: 10px;
}
.route-slider-btn.next {
right: 10px;
}
.route-info-title {
font-size: 22px;
}
.route-info-block,
.route-includes-block {
padding: 15px;
border-radius: 12px;
}
.route-booking-card {
padding: 15px;
border-radius: 12px;
}
.route-booking-price .price-value {
font-size: 24px;
}
} @media (max-width: 1024px) {
.banya-wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
.banya-right {
position: static;
order: -1;
}
.banya-booking-card {
max-width: 500px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.banya-page {
padding: 20px 15px 40px;
}
.banya-breadcrumbs {
font-size: 13px;
}
.banya-slider {
border-radius: 12px;
aspect-ratio: 4/3;
}
.banya-slider-btn {
width: 36px;
height: 36px;
}
.banya-slider-btn svg {
width: 36px;
height: 36px;
}
.banya-slider-prev {
left: 10px;
}
.banya-slider-next {
right: 10px;
}
.banya-info-block,
.banya-included-block,
.banya-rules-block {
padding: 20px;
border-radius: 12px;
}
.banya-title {
font-size: 26px;
}
.banya-block-title {
font-size: 20px;
}
.banya-included-list,
.banya-rules-list {
grid-template-columns: 1fr;
}
.banya-booking-card {
padding: 20px;
border-radius: 12px;
}
.banya-lightbox-btn {
width: 40px;
height: 40px;
}
.banya-lightbox-btn svg {
width: 40px;
height: 40px;
}
.banya-lightbox-btn.prev {
left: 10px;
}
.banya-lightbox-btn.next {
right: 10px;
}
}
@media (max-width: 480px) {
.banya-title {
font-size: 22px;
}
.banya-meta {
flex-direction: column;
gap: 10px;
}
.banya-booking-form input[type="text"],
.banya-booking-form input[type="tel"],
.banya-booking-form input[type="date"],
.banya-booking-form select {
padding: 12px 14px;
font-size: 14px;
}
.banya-booking-btn {
padding: 14px;
font-size: 15px;
}
.banya-phone-btn {
padding: 12px;
font-size: 15px;
}
.checkbox-label {
font-size: 12px;
}
.checkbox-label .checkmark {
width: 18px;
height: 18px;
min-width: 18px;
}
} @media (max-width: 1024px) {
.fullscreen-menu-inner {
padding: 25px 30px 30px;
}
.menu-nav-item a {
font-size: 2rem;
padding: 12px 0;
}
.menu-booking {
flex-direction: column;
align-items: center;
}
.menu-booking-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 768px) {
.fullscreen-menu-inner {
padding: 20px 20px 30px;
}
.menu-header {
margin-bottom: 20px;
}
.menu-logo img {
height: 40px;
}
.menu-close svg {
width: 28px;
height: 28px;
}
.menu-nav-item a {
font-size: 1.6rem;
padding: 10px 0;
}
.menu-booking {
margin-top: 25px;
gap: 12px;
}
.menu-booking-btn {
padding: 12px 25px;
font-size: 13px;
}
.menu-contacts {
flex-direction: column;
gap: 20px;
margin-top: 25px;
padding-top: 20px;
}
.menu-contact-item {
font-size: 15px;
}
.menu-social-btn {
width: 40px;
height: 40px;
}
.menu-social-btn svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.fullscreen-menu-inner {
padding: 15px 15px 25px;
}
.menu-logo img {
height: 35px;
}
.menu-nav-item a {
font-size: 1.4rem;
padding: 8px 0;
}
.menu-booking-btn {
padding: 12px 20px;
font-size: 12px;
border-radius: 30px;
}
.menu-contact-item {
font-size: 14px;
}
}  @media (max-width: 1200px) {
.burger-content {
gap: 40px;
}
.burger-left {
width: 350px;
}
.burger-nav-item a {
font-size: 2.5rem;
}
} @media (max-width: 1024px) {
.burger-content {
flex-direction: column;
gap: 30px;
padding: 0 30px;
}
.burger-left {
width: 100%;
max-width: 600px;
display: flex;
gap: 20px;
order: 2;
}
.burger-section-title {
display: none;
}
.burger-location-card {
flex: 1;
}
.burger-location-image {
height: 150px;
}
.burger-right {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-left: 0;
padding-top: 30px;
order: 1;
}
.burger-nav-item a {
font-size: 2rem;
padding: 10px 0;
}
} @media (max-width: 768px) {
.burger-overlay {
background-size: cover;
}
.burger-container {
padding: 20px 15px;
}
.burger-close {
top: 20px;
right: 20px;
}
.burger-close svg {
width: 28px;
height: 28px;
}
.burger-content {
padding: 0 10px;
gap: 25px;
} .burger-left {
display: none;
} .burger-logo-mobile {
display: block;
width: 100%;
text-align: center;
order: 0;
margin-bottom: 30px;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.burger-overlay.animated .burger-logo-mobile {
opacity: 1;
transform: scale(1);
transition-delay: 0.1s;
}
.burger-logo-mobile a {
display: inline-block;
}
.burger-logo-mobile img {
width: 160px;
height: auto;
} .burger-mobile-locations {
display: flex;
flex-direction: row;
gap: 15px;
width: 100%;
order: 2;
margin-top: 20px;
}
.burger-mobile-locations .burger-location-card {
flex: 1;
flex-direction: column;
padding: 10px;
border-radius: 12px;
}
.burger-mobile-locations .burger-location-image {
width: 100%;
height: 100px;
border-radius: 8px;
margin-bottom: 10px;
}
.burger-mobile-locations .burger-location-info {
padding: 0;
}
.burger-mobile-locations .burger-location-info h4 {
font-size: 14px;
margin-bottom: 8px;
}
.burger-mobile-locations .burger-location-btn {
font-size: 12px;
}
.burger-mobile-locations .burger-location-address {
display: none;
}
.burger-right {
border-top: none;
padding-top: 0;
width: 100%;
}
.burger-nav-list {
text-align: center;
}
.burger-nav-item a {
font-size: 1.6rem;
padding: 8px 0;
display: block;
text-align: center;
} .burger-contacts-desktop {
display: none;
}
.burger-contacts-mobile {
display: flex;
margin-top: 25px;
padding-top: 20px;
justify-content: center;
}
.burger-phone {
font-size: 16px;
}
.burger-social-btn {
width: 44px;
height: 44px;
}
} @media (max-width: 480px) {
.burger-container {
padding: 15px 10px;
}
.burger-close {
top: 15px;
right: 15px;
}
.burger-close svg {
width: 24px;
height: 24px;
}
.burger-nav-item a {
font-size: 1.4rem;
padding: 7px 0;
}
.burger-mobile-locations {
gap: 10px;
}
.burger-mobile-locations .burger-location-card {
padding: 8px;
}
.burger-mobile-locations .burger-location-image {
height: 80px;
}
.burger-mobile-locations .burger-location-info h4 {
font-size: 12px;
margin-bottom: 5px;
}
.burger-mobile-locations .burger-location-btn {
font-size: 11px;
}
.burger-phone {
font-size: 14px;
}
.burger-phone svg {
width: 18px;
height: 18px;
}
.burger-social-btn {
width: 40px;
height: 40px;
}
.burger-social-btn svg {
width: 20px;
height: 20px;
}
}#block-search,
#block-search * {
box-sizing: border-box;
}
#block-search {
position: relative;
z-index: 1;
background: #E4D7CE;
border-radius: 20px;
margin-bottom: 15px;
}
#block-search.block-search--inner {
max-width: 1400px !important;
margin: 0 auto 20px;
}
.tl-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
}
.tl-button {
display: flex;
justify-content: center;
align-items: center;
background-color: #c39e88;
background-image: linear-gradient(0deg, #c39e88, #c39e88);
border: 1px solid hsla(0, 0%, 100%, 0);
border-radius: 30px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .38), inset 0 1px 0 0 hsla(0, 0%, 100%, 0);
color: #3d3d3d;
cursor: pointer;
font-family: "Montserrat", "Arial", sans-serif;
font-size: 13.5px;
font-style: normal;
font-weight: 700;
height: 54px;
min-width: 168px;
padding: 0 12px;
text-shadow: 0 0 0 transparent;
text-transform: none;
white-space: normal;
max-width: 200px;
}
.tl-button:hover {
background-color: #e4d7ce;
background-image: linear-gradient(0deg, #e4d7ce, #e4d7ce);
border: 1px solid #c39e88;
border-bottom-color: #c39e88 !important;
color: #3d3d3d;
}
@media screen and (max-width: 1440px) {
#block-search.block-search--inner {
margin: 0 20px 20px;
}
}