@charset "UTF-8";
/**
 * Custom styles для всего проекта
 * Этот файл используется для кастомизации стилей на всех страницах
 * Подключается поверх всех остальных стилей для максимального приоритета
 */
/* Локальные variable-шрифты: fonts/Inter/Inter-VariableFont.ttf, fonts/Oswald/Oswald-VariableFont.ttf */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter/Inter-VariableFont.ttf") format("truetype");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/Oswald/Oswald-VariableFont.ttf") format("truetype");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/Raleway/Raleway-VariableFont.ttf") format("truetype");
}
:root {
  --buttonSize: 150px;
  --lightBlue: rgba(24, 176, 207, 1);
  --darkBlue: rgba(20, 110, 129, 1);
  --lightBlueTransparent: rgba(24, 176, 207, 0.5);
  --darkBlueTransparent: rgba(20, 110, 129, 0.5);
  --lightBlue90: rgba(24, 176, 207, 0.9);
  --darkBlue90: rgba(20, 110, 129, 0.9);
  --gray: rgba(76, 76, 76, 1);
  --info: #17a2b8;
}

/* Базовые шрифты: Inter для текста, Oswald подключается точечно */
body {
  font-family: "Raleway", "Inter", sans-serif;
}

.header,
.pageHeaderSecondary,
.relativeHeader {
  position: fixed;
  display: flex;
  justify-content: center;
  left: 0;
  top: 0;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transform: translate(0px, 0%);
  transition: 0.3s;
  z-index: 99;
}
.header:before,
.pageHeaderSecondary:before,
.relativeHeader:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.98);
  transform: scaleY(0);
  transform-origin: 0% 0%;
  transition: all 0.3s, transform-origin 0s;
}
.header.scrolled, .header.scrolled.headerListingType,
.pageHeaderSecondary.scrolled,
.pageHeaderSecondary.scrolled.headerListingType,
.relativeHeader.scrolled,
.relativeHeader.scrolled.headerListingType {
  transform: translate(0px, -100%);
}
.header.scrolled.scrolledTop, .header.scrolled.headerListingType.scrolledTop,
.pageHeaderSecondary.scrolled.scrolledTop,
.pageHeaderSecondary.scrolled.headerListingType.scrolledTop,
.relativeHeader.scrolled.scrolledTop,
.relativeHeader.scrolled.headerListingType.scrolledTop {
  transform: translate(0px, 0%);
}
.header.scrolled:before, .header.scrolled.headerListingType:before,
.pageHeaderSecondary.scrolled:before,
.pageHeaderSecondary.scrolled.headerListingType:before,
.relativeHeader.scrolled:before,
.relativeHeader.scrolled.headerListingType:before {
  transform-origin: 0% 0%;
  transform: scaleY(1);
}
.header.scrolled .navigationBlock .menuLi,
.header.scrolled .navigationBlock a.menuLi, .header.scrolled.headerListingType .navigationBlock .menuLi,
.header.scrolled.headerListingType .navigationBlock a.menuLi,
.pageHeaderSecondary.scrolled .navigationBlock .menuLi,
.pageHeaderSecondary.scrolled .navigationBlock a.menuLi,
.pageHeaderSecondary.scrolled.headerListingType .navigationBlock .menuLi,
.pageHeaderSecondary.scrolled.headerListingType .navigationBlock a.menuLi,
.relativeHeader.scrolled .navigationBlock .menuLi,
.relativeHeader.scrolled .navigationBlock a.menuLi,
.relativeHeader.scrolled.headerListingType .navigationBlock .menuLi,
.relativeHeader.scrolled.headerListingType .navigationBlock a.menuLi {
  color: var(--darkBlue);
  text-shadow: 0 0 0px transparent;
}
.header.scrolled .navigationBlock .menuLi:hover,
.header.scrolled .navigationBlock a.menuLi:hover, .header.scrolled.headerListingType .navigationBlock .menuLi:hover,
.header.scrolled.headerListingType .navigationBlock a.menuLi:hover,
.pageHeaderSecondary.scrolled .navigationBlock .menuLi:hover,
.pageHeaderSecondary.scrolled .navigationBlock a.menuLi:hover,
.pageHeaderSecondary.scrolled.headerListingType .navigationBlock .menuLi:hover,
.pageHeaderSecondary.scrolled.headerListingType .navigationBlock a.menuLi:hover,
.relativeHeader.scrolled .navigationBlock .menuLi:hover,
.relativeHeader.scrolled .navigationBlock a.menuLi:hover,
.relativeHeader.scrolled.headerListingType .navigationBlock .menuLi:hover,
.relativeHeader.scrolled.headerListingType .navigationBlock a.menuLi:hover {
  color: #025fac;
}
.header.scrolled .languageBlock .language.active, .header.scrolled.headerListingType .languageBlock .language.active,
.pageHeaderSecondary.scrolled .languageBlock .language.active,
.pageHeaderSecondary.scrolled.headerListingType .languageBlock .language.active,
.relativeHeader.scrolled .languageBlock .language.active,
.relativeHeader.scrolled.headerListingType .languageBlock .language.active {
  color: var(--darkBlue);
  text-shadow: 0 0 0px transparent;
}
.header.scrolled .languageBlock .languagesList li, .header.scrolled.headerListingType .languageBlock .languagesList li,
.pageHeaderSecondary.scrolled .languageBlock .languagesList li,
.pageHeaderSecondary.scrolled.headerListingType .languageBlock .languagesList li,
.relativeHeader.scrolled .languageBlock .languagesList li,
.relativeHeader.scrolled.headerListingType .languageBlock .languagesList li {
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  color: rgba(0, 109, 199, 0.75);
  transition: 0.25s;
}
.header.scrolled .languageBlock .languagesList li:hover, .header.scrolled.headerListingType .languageBlock .languagesList li:hover,
.pageHeaderSecondary.scrolled .languageBlock .languagesList li:hover,
.pageHeaderSecondary.scrolled.headerListingType .languageBlock .languagesList li:hover,
.relativeHeader.scrolled .languageBlock .languagesList li:hover,
.relativeHeader.scrolled.headerListingType .languageBlock .languagesList li:hover {
  color: rgb(2, 95, 172);
}
.header.scrolled .languageBlock .languagesList li:first-child:before, .header.scrolled.headerListingType .languageBlock .languagesList li:first-child:before,
.pageHeaderSecondary.scrolled .languageBlock .languagesList li:first-child:before,
.pageHeaderSecondary.scrolled.headerListingType .languageBlock .languagesList li:first-child:before,
.relativeHeader.scrolled .languageBlock .languagesList li:first-child:before,
.relativeHeader.scrolled.headerListingType .languageBlock .languagesList li:first-child:before {
  background-color: rgba(0, 109, 199, 0.4);
}
.header.scrolled .languageBlock .languagesList li::after, .header.scrolled.headerListingType .languageBlock .languagesList li::after,
.pageHeaderSecondary.scrolled .languageBlock .languagesList li::after,
.pageHeaderSecondary.scrolled.headerListingType .languageBlock .languagesList li::after,
.relativeHeader.scrolled .languageBlock .languagesList li::after,
.relativeHeader.scrolled.headerListingType .languageBlock .languagesList li::after {
  background-color: rgba(0, 109, 199, 0.4);
}
.header.scrolled .languageBlock .languagesList li a, .header.scrolled.headerListingType .languageBlock .languagesList li a,
.pageHeaderSecondary.scrolled .languageBlock .languagesList li a,
.pageHeaderSecondary.scrolled.headerListingType .languageBlock .languagesList li a,
.relativeHeader.scrolled .languageBlock .languagesList li a,
.relativeHeader.scrolled.headerListingType .languageBlock .languagesList li a {
  text-shadow: 0 0 0px transparent;
  color: rgba(0, 109, 199, 0.7);
}
.header.scrolled .languageBlock:hover .language.active, .header.scrolled.headerListingType .languageBlock:hover .language.active,
.pageHeaderSecondary.scrolled .languageBlock:hover .language.active,
.pageHeaderSecondary.scrolled.headerListingType .languageBlock:hover .language.active,
.relativeHeader.scrolled .languageBlock:hover .language.active,
.relativeHeader.scrolled.headerListingType .languageBlock:hover .language.active {
  color: #025fac;
}
.header.scrolled .languageBlock::after, .header.scrolled.headerListingType .languageBlock::after,
.pageHeaderSecondary.scrolled .languageBlock::after,
.pageHeaderSecondary.scrolled.headerListingType .languageBlock::after,
.relativeHeader.scrolled .languageBlock::after,
.relativeHeader.scrolled.headerListingType .languageBlock::after {
  background: rgba(0, 110, 199, 0.4);
}
.header.scrolled .userBlock .loginBlock, .header.scrolled.headerListingType .userBlock .loginBlock,
.pageHeaderSecondary.scrolled .userBlock .loginBlock,
.pageHeaderSecondary.scrolled.headerListingType .userBlock .loginBlock,
.relativeHeader.scrolled .userBlock .loginBlock,
.relativeHeader.scrolled.headerListingType .userBlock .loginBlock {
  color: var(--darkBlue);
  text-shadow: 0 0 0px transparent;
}
.header.scrolled .userBlock .loginBlock:hover, .header.scrolled.headerListingType .userBlock .loginBlock:hover,
.pageHeaderSecondary.scrolled .userBlock .loginBlock:hover,
.pageHeaderSecondary.scrolled.headerListingType .userBlock .loginBlock:hover,
.relativeHeader.scrolled .userBlock .loginBlock:hover,
.relativeHeader.scrolled.headerListingType .userBlock .loginBlock:hover {
  color: #025fac;
}
.header.scrolled .userBlock .loginBlock:hover .userIcon svg path, .header.scrolled.headerListingType .userBlock .loginBlock:hover .userIcon svg path,
.pageHeaderSecondary.scrolled .userBlock .loginBlock:hover .userIcon svg path,
.pageHeaderSecondary.scrolled.headerListingType .userBlock .loginBlock:hover .userIcon svg path,
.relativeHeader.scrolled .userBlock .loginBlock:hover .userIcon svg path,
.relativeHeader.scrolled.headerListingType .userBlock .loginBlock:hover .userIcon svg path {
  fill: #025fac;
}
.header.scrolled .userBlock .loginBlock .userIcon svg path, .header.scrolled.headerListingType .userBlock .loginBlock .userIcon svg path,
.pageHeaderSecondary.scrolled .userBlock .loginBlock .userIcon svg path,
.pageHeaderSecondary.scrolled.headerListingType .userBlock .loginBlock .userIcon svg path,
.relativeHeader.scrolled .userBlock .loginBlock .userIcon svg path,
.relativeHeader.scrolled.headerListingType .userBlock .loginBlock .userIcon svg path {
  fill: var(--darkBlue);
}
.header.hiddenHeader.scrolled:before, .header.headerListingDetails.scrolled:before,
.pageHeaderSecondary.hiddenHeader.scrolled:before,
.pageHeaderSecondary.headerListingDetails.scrolled:before,
.relativeHeader.hiddenHeader.scrolled:before,
.relativeHeader.headerListingDetails.scrolled:before {
  transform-origin: 0% 0%;
  transform: scaleY(1);
  transition: all 0.3s 0.3s, transform-origin 0s 0s;
}
.header.hiddenHeader:before, .header.headerListingDetails:before,
.pageHeaderSecondary.hiddenHeader:before,
.pageHeaderSecondary.headerListingDetails:before,
.relativeHeader.hiddenHeader:before,
.relativeHeader.headerListingDetails:before {
  transform-origin: 0% 0%;
  transform: scaleY(0);
  transition: all 0.3s 0.3s, transform-origin 0s 0s;
}
.header.headerListingDetails.scrolled,
.pageHeaderSecondary.headerListingDetails.scrolled,
.relativeHeader.headerListingDetails.scrolled {
  transform: translate(0px, 0%);
}
.header.headerListingDetails.scrolled:before,
.pageHeaderSecondary.headerListingDetails.scrolled:before,
.relativeHeader.headerListingDetails.scrolled:before {
  transform-origin: 0% 0%;
  transform: scaleY(1);
}
.header.headerListingDetails.scrolled .navigationBlock .menuLi,
.header.headerListingDetails.scrolled .navigationBlock a.menuLi,
.pageHeaderSecondary.headerListingDetails.scrolled .navigationBlock .menuLi,
.pageHeaderSecondary.headerListingDetails.scrolled .navigationBlock a.menuLi,
.relativeHeader.headerListingDetails.scrolled .navigationBlock .menuLi,
.relativeHeader.headerListingDetails.scrolled .navigationBlock a.menuLi {
  color: var(--darkBlue);
  text-shadow: 0 0 0px transparent;
}
.header.headerListingDetails.scrolled .navigationBlock .menuLi:hover,
.header.headerListingDetails.scrolled .navigationBlock a.menuLi:hover,
.pageHeaderSecondary.headerListingDetails.scrolled .navigationBlock .menuLi:hover,
.pageHeaderSecondary.headerListingDetails.scrolled .navigationBlock a.menuLi:hover,
.relativeHeader.headerListingDetails.scrolled .navigationBlock .menuLi:hover,
.relativeHeader.headerListingDetails.scrolled .navigationBlock a.menuLi:hover {
  color: #025fac;
}
.header.headerListingDetails.scrolled .languageBlock .language.active,
.pageHeaderSecondary.headerListingDetails.scrolled .languageBlock .language.active,
.relativeHeader.headerListingDetails.scrolled .languageBlock .language.active {
  color: var(--darkBlue);
  text-shadow: 0 0 0px transparent;
}
.header.headerListingDetails.scrolled .languageBlock .languagesList li,
.pageHeaderSecondary.headerListingDetails.scrolled .languageBlock .languagesList li,
.relativeHeader.headerListingDetails.scrolled .languageBlock .languagesList li {
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  color: rgba(0, 109, 199, 0.75);
  transition: 0.25s;
}
.header.headerListingDetails.scrolled .languageBlock .languagesList li:hover,
.pageHeaderSecondary.headerListingDetails.scrolled .languageBlock .languagesList li:hover,
.relativeHeader.headerListingDetails.scrolled .languageBlock .languagesList li:hover {
  color: rgb(2, 95, 172);
}
.header.headerListingDetails.scrolled .languageBlock .languagesList li:first-child:before,
.pageHeaderSecondary.headerListingDetails.scrolled .languageBlock .languagesList li:first-child:before,
.relativeHeader.headerListingDetails.scrolled .languageBlock .languagesList li:first-child:before {
  background-color: rgba(0, 109, 199, 0.4);
}
.header.headerListingDetails.scrolled .languageBlock .languagesList li::after,
.pageHeaderSecondary.headerListingDetails.scrolled .languageBlock .languagesList li::after,
.relativeHeader.headerListingDetails.scrolled .languageBlock .languagesList li::after {
  background-color: rgba(0, 109, 199, 0.4);
}
.header.headerListingDetails.scrolled .languageBlock .languagesList li a,
.pageHeaderSecondary.headerListingDetails.scrolled .languageBlock .languagesList li a,
.relativeHeader.headerListingDetails.scrolled .languageBlock .languagesList li a {
  text-shadow: 0 0 0px transparent;
  color: rgba(0, 109, 199, 0.7);
}
.header.headerListingDetails.scrolled .languageBlock:hover .language.active,
.pageHeaderSecondary.headerListingDetails.scrolled .languageBlock:hover .language.active,
.relativeHeader.headerListingDetails.scrolled .languageBlock:hover .language.active {
  color: #025fac;
}
.header.headerListingDetails.scrolled .languageBlock::after,
.pageHeaderSecondary.headerListingDetails.scrolled .languageBlock::after,
.relativeHeader.headerListingDetails.scrolled .languageBlock::after {
  background: rgba(0, 110, 199, 0.4);
}
.header.headerListingDetails.scrolled .userBlock .loginBlock,
.pageHeaderSecondary.headerListingDetails.scrolled .userBlock .loginBlock,
.relativeHeader.headerListingDetails.scrolled .userBlock .loginBlock {
  color: var(--darkBlue);
  text-shadow: 0 0 0px transparent;
}
.header.headerListingDetails.scrolled .userBlock .loginBlock:hover,
.pageHeaderSecondary.headerListingDetails.scrolled .userBlock .loginBlock:hover,
.relativeHeader.headerListingDetails.scrolled .userBlock .loginBlock:hover {
  color: #025fac;
}
.header.headerListingDetails.scrolled .userBlock .loginBlock:hover .userIcon svg path,
.pageHeaderSecondary.headerListingDetails.scrolled .userBlock .loginBlock:hover .userIcon svg path,
.relativeHeader.headerListingDetails.scrolled .userBlock .loginBlock:hover .userIcon svg path {
  fill: #025fac;
}
.header.headerListingDetails.scrolled .userBlock .loginBlock .userIcon svg path,
.pageHeaderSecondary.headerListingDetails.scrolled .userBlock .loginBlock .userIcon svg path,
.relativeHeader.headerListingDetails.scrolled .userBlock .loginBlock .userIcon svg path {
  fill: var(--darkBlue);
}
.header.headerListingDetails .navigationBlock .menuLi,
.header.headerListingDetails .navigationBlock a.menuLi,
.pageHeaderSecondary.headerListingDetails .navigationBlock .menuLi,
.pageHeaderSecondary.headerListingDetails .navigationBlock a.menuLi,
.relativeHeader.headerListingDetails .navigationBlock .menuLi,
.relativeHeader.headerListingDetails .navigationBlock a.menuLi {
  color: white;
}
.header.headerListingType,
.pageHeaderSecondary.headerListingType,
.relativeHeader.headerListingType {
  transform: translate(0px, -100%);
}
.header.headerListingType.scrolledTop,
.pageHeaderSecondary.headerListingType.scrolledTop,
.relativeHeader.headerListingType.scrolledTop {
  transform: translate(0px, 0%);
}
.header.headerListingType .navigationBlock a.menuLi,
.header.headerListingType .navigationBlock .menuli,
.pageHeaderSecondary.headerListingType .navigationBlock a.menuLi,
.pageHeaderSecondary.headerListingType .navigationBlock .menuli,
.relativeHeader.headerListingType .navigationBlock a.menuLi,
.relativeHeader.headerListingType .navigationBlock .menuli {
  color: white;
}
.header .headerContent,
.pageHeaderSecondary .headerContent,
.relativeHeader .headerContent {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 90vw;
  padding: 30px 0px;
}
.header .leftBlock,
.pageHeaderSecondary .leftBlock,
.relativeHeader .leftBlock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
}
.header .rightBlock,
.pageHeaderSecondary .rightBlock,
.relativeHeader .rightBlock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
}
.header .logo,
.pageHeaderSecondary .logo,
.relativeHeader .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 200px;
  height: 60px;
}
.header .logo img,
.pageHeaderSecondary .logo img,
.relativeHeader .logo img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.header .menuBlock,
.pageHeaderSecondary .menuBlock,
.relativeHeader .menuBlock {
  display: flex;
}
.header .navigationBlock,
.pageHeaderSecondary .navigationBlock,
.relativeHeader .navigationBlock {
  position: relative;
  display: flex;
  gap: 35px;
}
.header .navigationBlock a.menuLi,
.header .navigationBlock .menuLi,
.pageHeaderSecondary .navigationBlock a.menuLi,
.pageHeaderSecondary .navigationBlock .menuLi,
.relativeHeader .navigationBlock a.menuLi,
.relativeHeader .navigationBlock .menuLi {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--darkBlue);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  transition: 0.25s;
}
.header .navigationBlock a.menuLi:hover,
.header .navigationBlock .menuLi:hover,
.pageHeaderSecondary .navigationBlock a.menuLi:hover,
.pageHeaderSecondary .navigationBlock .menuLi:hover,
.relativeHeader .navigationBlock a.menuLi:hover,
.relativeHeader .navigationBlock .menuLi:hover {
  text-shadow: 0 0 6px var(--darkBlue);
}
.header .navigationBlock a.menuLi.active,
.header .navigationBlock .menuLi.active,
.pageHeaderSecondary .navigationBlock a.menuLi.active,
.pageHeaderSecondary .navigationBlock .menuLi.active,
.relativeHeader .navigationBlock a.menuLi.active,
.relativeHeader .navigationBlock .menuLi.active {
  text-decoration: underline;
}
.header .languageBlock,
.pageHeaderSecondary .languageBlock,
.relativeHeader .languageBlock {
  position: relative;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  align-items: center;
  color: white;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  transition: 0.25s;
}
.header .languageBlock:hover,
.pageHeaderSecondary .languageBlock:hover,
.relativeHeader .languageBlock:hover {
  color: var(--darkBlue);
}
.header .languageBlock:after,
.pageHeaderSecondary .languageBlock:after,
.relativeHeader .languageBlock:after {
  position: absolute;
  left: 100%;
  transform: translate(15px, 0);
  content: "";
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: 0.25s;
}
.header .languageBlock .language,
.pageHeaderSecondary .languageBlock .language,
.relativeHeader .languageBlock .language {
  cursor: pointer;
}
.header .languageBlock .language.active,
.pageHeaderSecondary .languageBlock .language.active,
.relativeHeader .languageBlock .language.active {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  transition: 0.25s;
}
.header .languageBlock .languagesList,
.pageHeaderSecondary .languageBlock .languagesList,
.relativeHeader .languageBlock .languagesList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 5px);
  display: flex;
  width: 150px;
  height: -moz-fit-content;
  height: fit-content;
}
.header .languageBlock .languagesList.hide,
.pageHeaderSecondary .languageBlock .languagesList.hide,
.relativeHeader .languageBlock .languagesList.hide {
  display: none;
}
.header .languageBlock .languagesList li,
.pageHeaderSecondary .languageBlock .languagesList li,
.relativeHeader .languageBlock .languagesList li {
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.75);
  transition: 0.25s;
}
.header .languageBlock .languagesList li:hover,
.pageHeaderSecondary .languageBlock .languagesList li:hover,
.relativeHeader .languageBlock .languagesList li:hover {
  color: rgb(255, 255, 255);
}
.header .languageBlock .languagesList li:first-child:before,
.pageHeaderSecondary .languageBlock .languagesList li:first-child:before,
.relativeHeader .languageBlock .languagesList li:first-child:before {
  content: "";
  display: flex;
  position: relative;
  place-self: center;
  width: 35px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 0px 0px 5px 0px;
}
.header .languageBlock .languagesList li::after,
.pageHeaderSecondary .languageBlock .languagesList li::after,
.relativeHeader .languageBlock .languagesList li::after {
  content: "";
  display: flex;
  position: relative;
  place-self: center;
  width: 35px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 5px 0px 0px 0px;
}
.header .languageBlock .languagesList li:last-child:after,
.pageHeaderSecondary .languageBlock .languagesList li:last-child:after,
.relativeHeader .languageBlock .languagesList li:last-child:after {
  display: none;
}
.header .languageBlock .languagesList li a,
.pageHeaderSecondary .languageBlock .languagesList li a,
.relativeHeader .languageBlock .languagesList li a {
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.75);
}
.header .contactsBlock,
.pageHeaderSecondary .contactsBlock,
.relativeHeader .contactsBlock {
  position: relative;
  display: flex;
  align-items: center;
  display: none;
}
.header .contactsBlock:after,
.pageHeaderSecondary .contactsBlock:after,
.relativeHeader .contactsBlock:after {
  content: "";
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.8);
}
.header .contactsBlock svg,
.pageHeaderSecondary .contactsBlock svg,
.relativeHeader .contactsBlock svg {
  width: 12px;
}
.header .userBlock,
.pageHeaderSecondary .userBlock,
.relativeHeader .userBlock {
  display: flex;
  align-items: center;
}
.header .userBlock .loginBlock,
.pageHeaderSecondary .userBlock .loginBlock,
.relativeHeader .userBlock .loginBlock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: white;
  font-weight: 400;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: 0.25s;
}
.header .userBlock .loginBlock:hover,
.pageHeaderSecondary .userBlock .loginBlock:hover,
.relativeHeader .userBlock .loginBlock:hover {
  text-decoration: underline;
}
.header .userBlock .userIcon,
.pageHeaderSecondary .userBlock .userIcon,
.relativeHeader .userBlock .userIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  min-width: 15px;
  height: 15px;
  box-shadow: 0 0 2px transparent;
  transition: 0.15s;
}
.header .userBlock .userIcon svg,
.pageHeaderSecondary .userBlock .userIcon svg,
.relativeHeader .userBlock .userIcon svg {
  max-width: 100%;
  max-height: 100%;
}
.header .userBlock .userIcon svg path,
.pageHeaderSecondary .userBlock .userIcon svg path,
.relativeHeader .userBlock .userIcon svg path {
  fill: white;
  transition: 0.25s;
}
.header .userBlock .content,
.pageHeaderSecondary .userBlock .content,
.relativeHeader .userBlock .content {
  display: flex;
  position: absolute;
  right: 0;
  top: 100%;
  width: 300px;
  border-radius: 8px;
  padding: 20px;
  background: white;
  box-shadow: 0 0 10px var(--darkBlue) 38;
}
.header .userBlock .content.hide,
.pageHeaderSecondary .userBlock .content.hide,
.relativeHeader .userBlock .content.hide {
  display: none;
}
.header .burgerBlock,
.pageHeaderSecondary .burgerBlock,
.relativeHeader .burgerBlock {
  display: none;
}
.header .closeIcon,
.pageHeaderSecondary .closeIcon,
.relativeHeader .closeIcon {
  display: none;
}
.header .addEventButton,
.pageHeaderSecondary .addEventButton,
.relativeHeader .addEventButton {
  display: none;
}

.pageHeaderSecondary {
  position: absolute;
  background: transparent;
  height: 110px;
  z-index: 1;
}
.pageHeaderSecondary .navigationBlock .menuLi,
.pageHeaderSecondary .navigationBlock a.menuLi {
  color: white;
}

.relativeHeader {
  position: relative;
}

#bread_crumbs {
  position: absolute;
  width: 100%;
  left: 0;
  top: 121px;
  background: transparent;
  z-index: 9;
}
#bread_crumbs.breadCrumbsListingType {
  position: relative;
  top: 0;
}
#bread_crumbs.breadCrumbsListingType ul {
  color: var(--gray);
}
#bread_crumbs.breadCrumbsListingType ul *:not(:last-child):after {
  color: var(--gray);
}
#bread_crumbs.breadCrumbsListingType ul li {
  color: var(--gray);
}
#bread_crumbs.breadCrumbsListingType ul li a {
  color: var(--gray);
}
#bread_crumbs ul {
  color: white;
  padding: 5px 0px;
}
#bread_crumbs ul li {
  color: white;
}
#bread_crumbs ul li:hover a {
  text-decoration: underline;
}
#bread_crumbs ul li a {
  color: white;
}
#bread_crumbs ul li a:hover {
  text-decoration: underline;
}

.mainBanner {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.mainBanner .imageBlock {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/mainBG.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
}
.mainBanner .maskBlock {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%; /* или 55% — как по макету */
  height: 100%;
}
.mainBanner .maskBlock svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.mainBanner .button {
  position: absolute;
  left: 60%;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-family: Oswald;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  z-index: 1;
  text-shadow: 0 0 4px transparent;
  transition: 0.15s;
}
.mainBanner .button:hover {
  text-shadow: 0 0 4px white;
}
.mainBanner .button:hover .buttonCircle {
  transform: scale(0.95);
}
.mainBanner .button:hover .buttonCircle::before {
  width: 70%;
  height: 70%;
}
.mainBanner .button .buttonCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--buttonSize);
  height: var(--buttonSize);
  background: var(--darkBlueTransparent);
  border-radius: 50%;
  transition: 0.15s;
}
.mainBanner .button .buttonCircle::before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
  width: 80%;
  height: 80%;
  border-radius: 50%;
  transition: 0.15s;
}
.mainBanner .button .buttonText {
  font-family: Oswald;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 400;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 80%;
}
.mainBanner .contentBlock {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: black;
  width: 60%;
  height: 100%;
  padding: 0px calc(var(--buttonSize) * 0.5 + 20px) 0px calc(var(--buttonSize) * 0.5);
}
.mainBanner .titleBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.mainBanner .titleBlock .description {
  font-family: Oswald;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gray);
}
.mainBanner .titleBlock .title {
  font-family: "Oswald", sans-serif;
  font-size: 72px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--darkBlue);
  text-transform: uppercase;
  letter-spacing: -1.5px;
}
.mainBanner .titleBlock .subtitle {
  font-size: 24px;
  color: var(--gray);
}
.mainBanner .headerContent {
  position: absolute;
  display: flex;
  justify-content: space-between;
  left: 0;
  top: 0;
  width: 60%;
  height: -moz-fit-content;
  height: fit-content;
  background: white;
  padding: 20px calc(var(--buttonSize) * 0.5 + 20px) 0px calc(var(--buttonSize) * 0.5);
  z-index: 1;
}
.mainBanner .headerContent .leftBlock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
}
.mainBanner .headerContent .rightBlock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
}
.mainBanner .headerContent .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 200px;
  height: 60px;
}
.mainBanner .headerContent .logo img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mainBanner .headerContent .menuBlock {
  display: flex;
}
.mainBanner .headerContent .navigationBlock {
  position: relative;
  display: flex;
  gap: 35px;
}
.mainBanner .headerContent .navigationBlock a.menuLi,
.mainBanner .headerContent .navigationBlock .menuLi {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--darkBlue);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  transition: 0.25s;
}
.mainBanner .headerContent .navigationBlock a.menuLi:hover,
.mainBanner .headerContent .navigationBlock .menuLi:hover {
  text-shadow: 0 0 6px var(--darkBlue);
}
.mainBanner .headerContent .navigationBlock a.menuLi.active,
.mainBanner .headerContent .navigationBlock .menuLi.active {
  text-decoration: underline;
}
.mainBanner .headerContent .languageBlock {
  position: relative;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  align-items: center;
  color: white;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  transition: 0.25s;
}
.mainBanner .headerContent .languageBlock:hover {
  color: var(--darkBlue);
}
.mainBanner .headerContent .languageBlock:after {
  position: absolute;
  left: 100%;
  transform: translate(15px, 0);
  content: "";
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: 0.25s;
}
.mainBanner .headerContent .languageBlock .language {
  cursor: pointer;
}
.mainBanner .headerContent .languageBlock .language.active {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  transition: 0.25s;
}
.mainBanner .headerContent .languageBlock .languagesList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 5px);
  display: flex;
  width: 150px;
  height: -moz-fit-content;
  height: fit-content;
}
.mainBanner .headerContent .languageBlock .languagesList.hide {
  display: none;
}
.mainBanner .headerContent .languageBlock .languagesList li {
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.75);
  transition: 0.25s;
}
.mainBanner .headerContent .languageBlock .languagesList li:hover {
  color: rgb(255, 255, 255);
}
.mainBanner .headerContent .languageBlock .languagesList li:first-child:before {
  content: "";
  display: flex;
  position: relative;
  place-self: center;
  width: 35px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 0px 0px 5px 0px;
}
.mainBanner .headerContent .languageBlock .languagesList li::after {
  content: "";
  display: flex;
  position: relative;
  place-self: center;
  width: 35px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 5px 0px 0px 0px;
}
.mainBanner .headerContent .languageBlock .languagesList li:last-child:after {
  display: none;
}
.mainBanner .headerContent .languageBlock .languagesList li a {
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.75);
}
.mainBanner .headerContent .contactsBlock {
  position: relative;
  display: flex;
  align-items: center;
  display: none;
}
.mainBanner .headerContent .contactsBlock:after {
  content: "";
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.8);
}
.mainBanner .headerContent .contactsBlock svg {
  width: 12px;
}
.mainBanner .headerContent .userBlock {
  display: flex;
  align-items: center;
}
.mainBanner .headerContent .userBlock .loginBlock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--darkBlue);
  font-weight: 400;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: 0.25s;
}
.mainBanner .headerContent .userBlock .loginBlock:hover {
  text-decoration: underline;
}
.mainBanner .headerContent .userBlock .userIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  min-width: 15px;
  height: 15px;
  box-shadow: 0 0 2px transparent;
  transition: 0.15s;
}
.mainBanner .headerContent .userBlock .userIcon svg {
  max-width: 100%;
  max-height: 100%;
}
.mainBanner .headerContent .userBlock .userIcon svg path {
  fill: var(--darkBlue);
  transition: 0.25s;
}
.mainBanner .headerContent .userBlock .content {
  display: flex;
  position: absolute;
  right: 0;
  top: 100%;
  width: 300px;
  border-radius: 8px;
  padding: 20px;
  background: white;
  box-shadow: 0 0 10px var(--darkBlue) 38;
}
.mainBanner .headerContent .userBlock .content.hide {
  display: none;
}
.mainBanner .headerContent .burgerBlock {
  display: none;
}
.mainBanner .headerContent .closeIcon {
  display: none;
}
.mainBanner .headerContent .addEventButton {
  display: none;
}

.categoriesSection {
  position: fixed;
  right: 2.5vw;
  top: 50%;
  transform: translate(50%, -50%);
  display: flex;
  z-index: 9;
}
.categoriesSection .waves {
  display: none;
}
.categoriesSection .categoriesList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.categoriesSection .categoryItem {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: 0.15s;
  text-shadow: 0 0 4px transparent;
}
.categoriesSection .categoryItem::before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
  width: 80%;
  height: 80%;
  border-radius: 50%;
  z-index: 2;
  transition: 0.15s;
}
.categoriesSection .categoryItem:hover {
  text-shadow: 0 0 4px white;
  transform: scale(0.95);
}
.categoriesSection .categoryItem:hover::before {
  width: 70%;
  height: 70%;
}
.categoriesSection .categoryItem:hover .labelContainer {
  transform: translate(0px, -50%);
  opacity: 1;
  pointer-events: auto;
  transition: all 0.15s 0s;
}
.categoriesSection .categoryItem:hover .background:after {
  opacity: 1;
}
.categoriesSection .categoryItem .background {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  background: var(--darkBlue90);
  opacity: 1;
  z-index: 1;
  transition: 0.15s;
}
.categoriesSection .categoryItem .background:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 0, 0, 0) 30%, rgba(0, 110, 199, 0.08) 58%, rgba(0, 110, 199, 0.1) 100%);
  opacity: 0.5;
  transition: 0.15s;
}
.categoriesSection .categoryItem .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 3;
}
.categoriesSection .categoryItem .icon svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
}
.categoriesSection .categoryItem .icon img {
  width: 70%;
  height: 70%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.categoriesSection .categoryItem .labelContainer {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translate(50px, -50%);
  z-index: 1;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 0px 10px 0px 0px;
  opacity: 0;
  transition: all 0.15s 0.3s;
  z-index: 0;
  pointer-events: none;
}
.categoriesSection .categoryItem .labelContainer .label {
  display: flex;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 230px;
  padding: 10px 25px 12px 25px;
  background: rgba(255, 255, 255, 0.6588235294);
  border: 1px solid rgba(255, 255, 255, 0.0901960784);
  border-radius: 30px;
  color: var(--darkBlue);
  box-shadow: 3px 3px 6px 0px var(--darkBlueTransparent);
}

.upcomingEvents {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 600px;
}
.upcomingEvents .waves {
  position: absolute;
  top: 0;
  height: 100px;
  width: 100%;
  transform: translate(0px, calc(-100% + 1px));
  z-index: 1;
  pointer-events: none;
}
.upcomingEvents .waves.bottom {
  top: 100%;
  transform: translate(0px, -1px) rotate(180deg);
}
.upcomingEvents .waves svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.upcomingEvents .waves svg path {
  filter: drop-shadow(6px 7px 6px var(--darkBlueTransparent));
}
.upcomingEvents .leftBlock {
  position: relative;
  width: 60%;
  padding: 20px 0px 0px 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.upcomingEvents .leftBlock .cardsList {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  transform-style: flat;
  perspective: 300px;
  width: 100%;
  height: 530px;
}
.upcomingEvents .leftBlock .card {
  position: relative;
  width: 25%;
  height: 350px;
  border-radius: 15px;
  box-shadow: 5px 5px 20px rgba(20, 110, 129, 0.168627451);
  transform: translate3d(0px, 0px, 0px) rotate3d(-0.1, 1, 0, 0deg);
  transform-origin: 50% 50%;
  transition: all 0.3s 0s, z-index 0s 0.3s;
}
.upcomingEvents .leftBlock .card:nth-child(1) {
  z-index: 4;
}
.upcomingEvents .leftBlock .card:nth-child(2) {
  z-index: 3;
}
.upcomingEvents .leftBlock .card:nth-child(3) {
  z-index: 2;
}
.upcomingEvents .leftBlock .card:nth-child(4) {
  z-index: 1;
}
.upcomingEvents .leftBlock .card:hover {
  height: 500px;
  transform: translate3d(0px, 0px, 0px) rotate3d(0, 1, 0, 0deg);
  box-shadow: 5px 5px 20px rgba(20, 111, 129, 0.3764705882);
  transition: all 0.3s 0s, z-index 0s 0s;
}
.upcomingEvents .leftBlock .card:hover .image img {
  transform: scale(1.05);
}
.upcomingEvents .leftBlock .card:hover .cardDescription {
  opacity: 1;
  transform: translate3d(50%, 0px, 0px);
  transition: 0.3s 0.1s;
}
.upcomingEvents .leftBlock .card .image {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 15px;
  overflow: hidden;
}
.upcomingEvents .leftBlock .card .image img {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform: scale(1);
  transition: 0.3s;
}
.upcomingEvents .leftBlock .card .cardName {
  font-family: Oswald;
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - 0px);
  padding: 10px;
  border-radius: 15px;
}
.upcomingEvents .leftBlock .card .cardName .text {
  position: relative;
  font-size: 22px;
  line-height: 1.2;
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.199);
  text-transform: uppercase;
  z-index: 1;
}
.upcomingEvents .leftBlock .card .cardName::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, var(--darkBlue), transparent);
  border-radius: 15px;
  z-index: 0;
}
.upcomingEvents .leftBlock .card .cardDescription {
  position: absolute;
  width: 200px;
  right: 0;
  top: 20px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.8823529412);
  color: rgb(5, 5, 5);
  box-shadow: 0 0 8px rgba(20, 111, 129, 0.4745098039);
  border: 1px solid white;
  font-size: 13px;
  padding: 15px;
  opacity: 0;
  transform: translate3d(0%, 0px, 0px);
  transition: 0.15s;
}
.upcomingEvents .rightBlock {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 5vw 0px calc(var(--buttonSize) * 0.5);
  width: 40%;
}
.upcomingEvents .rightBlock .title {
  font-family: Oswald;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--darkBlue);
}
.upcomingEvents .rightBlock .description {
  margin: 10px 0px 0px 0px;
  font-size: 18px;
  color: var(--gray);
}
.upcomingEvents .rightBlock .button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 20px 0px 0px 0px;
  padding: 10px 35px;
  background-color: var(--darkBlue);
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-family: Oswald;
  font-size: 16px;
  font-weight: 600;
  border-radius: 25px;
  text-shadow: 0px 0px 4px transparent;
  cursor: pointer;
  transition: 0.15s;
}
.upcomingEvents .rightBlock .button:hover {
  text-shadow: 0px 0px 4px white;
}
.upcomingEvents .rightBlock .button:before {
  content: "";
  position: absolute;
  width: calc(100% + 10px);
  height: calc(100% + 8px);
  border-radius: 25px;
  background-color: var(--darkBlue);
  opacity: 0.5;
  z-index: -1;
}

.howItWorks {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 5vw;
  min-height: 70vh;
}
.howItWorks .backgroundImage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/mainBG.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.howItWorks .stepsContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.howItWorks .heading {
  position: relative;
  top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Oswald;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 60px;
  color: white;
  text-shadow: 0 0 4px var(--darkBlueTransparent);
}
.howItWorks .stepsBlock {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.howItWorks .stepsBlock .stepItem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: -moz-fit-content;
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
  flex: 1 1 100%;
  color: white;
  padding: 30px 50px 30px 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 130px;
  background: rgba(20, 110, 129, 0.33);
  backdrop-filter: blur(4px);
  box-shadow: inset -5px 3px 15px 0px rgba(255, 255, 255, 0.5411764706);
}
.howItWorks .stepsBlock .stepItem .number {
  display: flex;
  gap: 5px;
  position: relative;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  opacity: 1;
  font-weight: 900;
}
.howItWorks .stepsBlock .stepItem .number::before {
  content: "";
  position: relative;
  width: 35px;
  height: 1px;
  background: linear-gradient(to left, white, transparent);
}
.howItWorks .stepsBlock .stepItem .number::after {
  content: "";
  position: relative;
  width: 35px;
  height: 1px;
  background: linear-gradient(to right, white, transparent);
}
.howItWorks .stepsBlock .stepItem .title {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: Oswald;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  margin: 0px 0px 20px 0px;
}
.howItWorks .stepsBlock .stepItem .title:after {
  content: "";
  position: absolute;
  left: auto;
  top: 100%;
  width: 100%;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(to right, transparent, white, transparent);
  transform: translate(0px, 12px);
}
.howItWorks .stepsBlock .stepItem .text {
  position: relative;
  font-size: 20px;
  text-align: center;
}
.howItWorks .waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
}
.howItWorks .waves svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.content_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  place-self: center;
  max-width: calc(100% - 10vw);
  width: 100%;
}
.content_block.listings_box h3 {
  font-family: Oswald;
  color: var(--darkBlue);
  font-size: 48px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 35px 0px 0px 0px;
}

.col-lg-9 .content_block {
  max-width: 100%;
  align-items: flex-start;
}
.col-lg-9 .content_block.listings_box h3 {
  margin: 0px 0px 0px 0px;
}

.inside-container {
  place-self: center;
  margin: 0px 0px 120px 0px;
}
.inside-container .row {
  gap: 0px;
  margin: 0;
}

ul.listingsBoxList,
ul.row.featured {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  width: 100%;
  margin: 30px 0px 0px 0px;
  padding: 0;
}
ul.listingsBoxList li.listingsBoxCard,
ul.row.featured li.listingsBoxCard {
  position: relative;
  width: 200px;
  height: 300px;
  border-radius: 15px;
  box-shadow: 5px 5px 20px rgba(20, 110, 129, 0.168627451);
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(20, 110, 129, 0.4);
  transform: translate(0, 0);
  transition: 0.25s;
}
ul.listingsBoxList li.listingsBoxCard:hover,
ul.row.featured li.listingsBoxCard:hover {
  box-shadow: 1px 3px 10px var(--darkBlueTransparent);
  transform: translate(0px, -3px);
}
ul.listingsBoxList li.listingsBoxCard .picture,
ul.row.featured li.listingsBoxCard .picture {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--lightBlue);
  border-radius: 15px;
  overflow: hidden;
}
ul.listingsBoxList li.listingsBoxCard .picture a,
ul.listingsBoxList li.listingsBoxCard .picture img,
ul.row.featured li.listingsBoxCard .picture a,
ul.row.featured li.listingsBoxCard .picture img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
ul.listingsBoxList li.listingsBoxCard .ad-info,
ul.listingsBoxList li.listingsBoxCard a.ad-info,
ul.row.featured li.listingsBoxCard .ad-info,
ul.row.featured li.listingsBoxCard a.ad-info {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 0px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  z-index: 1;
}
ul.listingsBoxList li.listingsBoxCard .ad-info:before,
ul.listingsBoxList li.listingsBoxCard a.ad-info:before,
ul.row.featured li.listingsBoxCard .ad-info:before,
ul.row.featured li.listingsBoxCard a.ad-info:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% + 25px);
  background: linear-gradient(to top, var(--darkBlue) 0%, rgba(20, 110, 130, 0.6) 85%, transparent 100%);
  z-index: -1;
}
ul.listingsBoxList li.listingsBoxCard .ad-info .place,
ul.listingsBoxList li.listingsBoxCard a.ad-info .place,
ul.row.featured li.listingsBoxCard .ad-info .place,
ul.row.featured li.listingsBoxCard a.ad-info .place {
  font-family: Oswald;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: white;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
ul.listingsBoxList li.listingsBoxCard .ad-info .title,
ul.listingsBoxList li.listingsBoxCard a.ad-info .title,
ul.row.featured li.listingsBoxCard .ad-info .title,
ul.row.featured li.listingsBoxCard a.ad-info .title {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  font-size: 16px;
  color: white;
  margin: 0px 0px 10px 0px;
  z-index: 1;
}
ul.listingsBoxList li.listingsBoxCard .ad-info .title a,
ul.listingsBoxList li.listingsBoxCard a.ad-info .title a,
ul.row.featured li.listingsBoxCard .ad-info .title a,
ul.row.featured li.listingsBoxCard a.ad-info .title a {
  color: currentColor;
  text-decoration: none;
  transition: 0.25s;
}
ul.listingsBoxList li.listingsBoxCard .ad-info .title a:hover,
ul.listingsBoxList li.listingsBoxCard a.ad-info .title a:hover,
ul.row.featured li.listingsBoxCard .ad-info .title a:hover,
ul.row.featured li.listingsBoxCard a.ad-info .title a:hover {
  text-decoration: underline;
}
ul.listingsBoxList li.listingsBoxCard .ad-info .date,
ul.listingsBoxList li.listingsBoxCard a.ad-info .date,
ul.row.featured li.listingsBoxCard .ad-info .date,
ul.row.featured li.listingsBoxCard a.ad-info .date {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: white;
}
ul.listingsBoxList li.listingsBoxCard .ad-info .date:after,
ul.listingsBoxList li.listingsBoxCard a.ad-info .date:after,
ul.row.featured li.listingsBoxCard .ad-info .date:after,
ul.row.featured li.listingsBoxCard a.ad-info .date:after {
  content: "";
  position: relative;
  display: flex;
  width: 50px;
  height: 1px;
  background: linear-gradient(to right, white, transparent);
  margin: 0px 0px 8px 0px;
}

/* ========== Контент страницы (content.tpl): обёртки без Bootstrap-утилит ========== */
/* Обёртка баннера под шапкой: на всю ширину/высоту, контент по центру */
.headerBannerCont {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

/* Отступ сверху у баннера, когда нет хлебных крошек (раньше pt-4) */
.headerBannerContNoBreadcrumb {
  padding-top: 1.5rem;
}

/* Внутренний блок баннера: ограничение по ширине через .point1, обрезка по краям */
.headerBannerInner {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

/* Основной контент страницы: вертикальные отступы (раньше pt-4 pb-5 mt-lg-3) */
.mainContentWrap {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 992px) {
  .mainContentWrap {
    margin-top: 1rem;
  }
}

/* Блок карточек-фото на странице объявления (переключение по клику) */
/* Когда открыт попап картинки — поднимаем блок в стеке до уровня хедера и descPopup */
body.zoomPopupOpen .listingPhotoCards {
  z-index: 9999;
}

.listingPhotoCards {
  position: relative;
  width: 100%;
  min-height: 85vh;
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}
.listingPhotoCards .listingPhotoCardsWrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 85vh;
}
.listingPhotoCards {
  /* Иконки печати и избранного в правом верхнем углу */
}
.listingPhotoCards .listingPhotoCardsTopIcons {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
}
.listingPhotoCards .listingPhotoCardsTopIcons .print,
.listingPhotoCards .listingPhotoCardsTopIcons .favorite {
  /* Стили иконок наследуются от .listing-header .icons или общих; при необходимости задать размер/цвет — раскомментировать */
}
.listingPhotoCards .imagesList {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.listingPhotoCards .imagesList .imageItem {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
}
.listingPhotoCards .imagesList .imageItem.active {
  display: flex;
}
.listingPhotoCards .imagesList .imageItem img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.listingPhotoCards .backgroundOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(to top, var(--darkBlueTransparent), transparent);
}
.listingPhotoCards .bottomPanel {
  position: relative;
  left: 5vw;
  width: -moz-fit-content;
  width: fit-content;
  bottom: 0;
  margin: 0px 0px 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  order: 2;
  z-index: 1;
}
.listingPhotoCards .listingPhotoCardsStack {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Переменные из JS: --listingPhotoCardsSlot0Left .. Slot4Left, --listingPhotoCardsSlotBottom, --listingPhotoCardsCardWidth/Height */
}
.listingPhotoCards .listingPhotoCardsCard {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  overflow: visible;
  background-color: #2a2a2a;
  box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  border-radius: 120px;
  cursor: pointer;
  z-index: 3;
  transition: all 0.5s, z-index 0s;
}
.listingPhotoCards .listingPhotoCardsCard:after {
  content: "";
  position: absolute;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  overflow: hidden;
  border-radius: 120px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  opacity: 1;
  transition: 0.15s;
}
.listingPhotoCards .listingPhotoCardsCard {
  /* Позиции ряда: card1 — самая левая, card5 — самая правая; снизу отступ --listingPhotoCardsSlotBottom (20px) */
}
.listingPhotoCards .listingPhotoCardsCard.card1 {
  left: var(--listingPhotoCardsSlot0Left, 0);
  bottom: var(--listingPhotoCardsSlotBottom, 20px);
  width: var(--listingPhotoCardsCardWidth, 200px);
  height: var(--listingPhotoCardsCardHeight, 300px);
  transition-delay: 0s;
}
.listingPhotoCards .listingPhotoCardsCard.card2 {
  left: var(--listingPhotoCardsSlot1Left, 224px);
  bottom: var(--listingPhotoCardsSlotBottom, 20px);
  width: var(--listingPhotoCardsCardWidth, 200px);
  height: var(--listingPhotoCardsCardHeight, 300px);
  transition-delay: 0.1s;
}
.listingPhotoCards .listingPhotoCardsCard.card3 {
  left: var(--listingPhotoCardsSlot2Left, 448px);
  bottom: var(--listingPhotoCardsSlotBottom, 20px);
  width: var(--listingPhotoCardsCardWidth, 200px);
  height: var(--listingPhotoCardsCardHeight, 300px);
  transition-delay: 0.2s;
}
.listingPhotoCards .listingPhotoCardsCard.card4 {
  left: var(--listingPhotoCardsSlot3Left, 672px);
  bottom: var(--listingPhotoCardsSlotBottom, 20px);
  width: var(--listingPhotoCardsCardWidth, 200px);
  height: var(--listingPhotoCardsCardHeight, 300px);
  transition-delay: 0.3s;
}
.listingPhotoCards .listingPhotoCardsCard.card5 {
  left: var(--listingPhotoCardsSlot4Left, 896px);
  bottom: var(--listingPhotoCardsSlotBottom, 20px);
  width: var(--listingPhotoCardsCardWidth, 200px);
  height: var(--listingPhotoCardsCardHeight, 300px);
  transition-delay: 0.4s;
}
.listingPhotoCards .listingPhotoCardsCard.activating {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  cursor: default;
  z-index: 1;
  transition: all 0.5s 0s linear, z-index 0s 0s;
}
.listingPhotoCards .listingPhotoCardsCard.activating:after {
  opacity: 0;
}
.listingPhotoCards .listingPhotoCardsCard.activating .listingPhotoCardsCardImageTitle {
  opacity: 0;
}
.listingPhotoCards .listingPhotoCardsCard.activating .backgroundOverlay {
  opacity: 1;
}
.listingPhotoCards .listingPhotoCardsCard .backgroundOverlay {
  opacity: 0;
  transition: 0.5s;
}
.listingPhotoCards .listingPhotoCardsCard.invisible, .listingPhotoCards .listingPhotoCardsCard.active {
  left: var(--listingPhotoCardsInactiveLeft, 200%);
  bottom: var(--listingPhotoCardsInactiveBottom, 20px);
  width: var(--listingPhotoCardsCardWidth, 200px);
  height: var(--listingPhotoCardsCardHeight, 300px);
  border-radius: 120px;
  pointer-events: none;
  transition: 0s;
  z-index: 2;
  opacity: 0;
}
.listingPhotoCards .listingPhotoCardsCard.leaving {
  transform: scale(0.5);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s 0s ease, z-index 0s 0s;
  z-index: 2;
}
.listingPhotoCards .listingPhotoCardsCard.leaving.active {
  transform: scale(1);
  opacity: 1;
  z-index: 0;
}
.listingPhotoCards .listingPhotoCardsCard:hover:not(.active) img.listingPhotoCardsCardImg, .listingPhotoCards .listingPhotoCardsCard:hover:not(.activating) img.listingPhotoCardsCardImg {
  width: 105%;
  height: 105%;
}
.listingPhotoCards .listingPhotoCardsCard:hover:not(.active) .listingPhotoCardsCardImageTitle, .listingPhotoCards .listingPhotoCardsCard:hover:not(.activating) .listingPhotoCardsCardImageTitle {
  width: 105%;
  height: 105%;
  padding: 0px calc(0% + 30px) calc(10% + 30px) calc(0% + 30px);
}
.listingPhotoCards .listingPhotoCardsCard:hover:not(.active):after, .listingPhotoCards .listingPhotoCardsCard:hover:not(.activating):after {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}
.listingPhotoCards .listingPhotoCardsCard img.listingPhotoCardsCardImg {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  border-radius: 120px;
  transition: 0.15s;
}
.listingPhotoCards .listingPhotoCardsCard .listingPhotoCardsCardImageTitle {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: flex-end;
  left: 50%;
  right: unset;
  bottom: unset;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0px 30px 30px 30px;
  width: 100%;
  height: 100%;
  font-family: Oswald;
  text-transform: uppercase;
  text-align: center;
  font-size: 15px;
  line-height: 1.3;
  color: #fff;
  opacity: 1;
  transition: 0.125s;
  background: linear-gradient(45deg, var(--darkBlueTransparent), transparent);
  pointer-events: none;
  border-radius: 120px;
}
.listingPhotoCards .listingPhotoCardsCard:not(.active):hover {
  opacity: 0.95;
}
.listingPhotoCards .listingPhotoCardsDetails {
  position: relative;
  left: 5vw;
  bottom: 0px;
  z-index: 22;
  max-width: 520px;
  margin: 0px 0px 30px 0px;
}
.listingPhotoCards .listingPhotoCardsDetails .listingPhotoCardsDetailsInner {
  position: relative;
}
.listingPhotoCards .dateBox {
  font-family: "Oswald";
  font-weight: 300;
  text-transform: uppercase;
  font-size: 15px;
  padding: 0px 0px 5px 0px;
}
.listingPhotoCards .placeBox {
  margin-bottom: 8px;
  overflow: hidden;
}
.listingPhotoCards .placeBox .placeBoxText {
  display: block;
  font-size: 20px;
  font-weight: 500;
  padding-top: 10px;
  position: relative;
}
.listingPhotoCards .placeBox .placeBoxText::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 1px;
  background: linear-gradient(to right, white, transparent);
}
.listingPhotoCards .titleBox {
  margin-top: 2px;
  overflow: hidden;
}
.listingPhotoCards .titleBox .titleBoxText {
  display: block;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1;
}
.listingPhotoCards .descWrap {
  position: relative;
  margin-top: 16px;
  max-height: 120px;
  height: 120px;
  overflow: hidden;
}
.listingPhotoCards .descWrap.is-scrollable {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2392156863);
  border-radius: 20px;
  background: rgba(24, 176, 207, 0.1294117647);
  backdrop-filter: blur(3px);
}
.listingPhotoCards .descWrap.is-scrollable:hover {
  backdrop-filter: unset;
}
.listingPhotoCards .descWrap .desc.value {
  position: relative;
  height: calc(100% - 0px);
  margin-top: 0;
  font-size: 15px;
  line-height: 1.5;
  max-height: 120px;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1411764706);
  overflow-y: auto;
}
.listingPhotoCards .descWrap .desc.value::-webkit-scrollbar {
  width: 2px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.25);
}
.listingPhotoCards .descWrap .desc.value::-webkit-scrollbar-thumb {
  width: 2px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.25);
}
.listingPhotoCards .descWrap .desc.value::-webkit-scrollbar-track {
  width: 2px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.25);
}
.listingPhotoCards .descWrap .desc.value p {
  margin: 0 0 0.5em;
}
.listingPhotoCards .descWrap .descMoreOverlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.listingPhotoCards .descWrap.is-scrollable:hover .descMoreOverlay {
  opacity: 1;
  pointer-events: auto;
}
.listingPhotoCards .descWrap .descMoreButton {
  font-family: "Raleway", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--lightBlue), var(--darkBlue));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(20, 110, 129, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.listingPhotoCards .descWrap .descMoreButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(20, 110, 129, 0.5);
}
.listingPhotoCards .listingPhotoCardsPagination {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 20px;
  pointer-events: auto;
  width: -moz-fit-content;
  width: fit-content;
}
.listingPhotoCards .listingPhotoCardsArrow {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.33);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.listingPhotoCards .listingPhotoCardsArrow:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.listingPhotoCards .listingPhotoCardsArrow svg {
  width: 24px;
  height: 24px;
}
.listingPhotoCards .listingPhotoCardsProgress {
  position: relative;
  width: 200px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  overflow: hidden;
}
.listingPhotoCards .listingPhotoCardsProgressFg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--lightBlue, #18b0cf);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.listingPhotoCards .slideNumbers {
  position: relative;
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.listingPhotoCards .slideNumbersItem {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s, transform 0.3s;
}
.listingPhotoCards .slideNumbersItem.isActive {
  opacity: 1;
  transform: translateY(0);
  z-index: 1;
}
.listingPhotoCards {
  /* Заблокированная карточка (гость / тариф без доступа к фото) */
}
.listingPhotoCards .listingPhotoCardsCardLocked {
  cursor: pointer;
}
.listingPhotoCards {
  /* Видео: иконка воспроизведения */
}
.listingPhotoCards .listingPhotoCardsCardVideo .listingPhotoCardsCardPlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  pointer-events: none;
}
.listingPhotoCards .listingPhotoCardsCardVideo .listingPhotoCardsCardPlay::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -8px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}
.listingPhotoCards {
  /* Кнопки навигации как в старой галерее */
}
.listingPhotoCards .listingPhotoCardsNavButtons {
  position: relative;
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.listingPhotoCards .listingPhotoCardsNavButtons .nav-button,
.listingPhotoCards .listingPhotoCardsNavButtons a.nav-button {
  cursor: pointer;
  font-size: 14px;
  opacity: 1;
}
.listingPhotoCards .listingPhotoCardsNavButtons .nav-button.order-ticket,
.listingPhotoCards .listingPhotoCardsNavButtons a.nav-button.order-ticket {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Oswald;
  font-size: 18px;
  font-weight: 500;
  background: var(--lightBlue);
  padding: 10px 35px;
  margin: 0px 10px 0px 0px;
  border-radius: 80px;
  color: white;
  text-shadow: 0 0 4px transparent;
  text-transform: uppercase;
  z-index: 1;
  transition: 0.15s;
}
.listingPhotoCards .listingPhotoCardsNavButtons .nav-button.order-ticket:before,
.listingPhotoCards .listingPhotoCardsNavButtons a.nav-button.order-ticket:before {
  content: "";
  position: absolute;
  width: calc(100% + 15px);
  height: calc(100% + 15px);
  background: var(--lightBlueTransparent);
  border-radius: 80px;
  z-index: -1;
}
.listingPhotoCards .listingPhotoCardsNavButtons .nav-button:hover,
.listingPhotoCards .listingPhotoCardsNavButtons a.nav-button:hover {
  text-shadow: 0 0 4px transparent;
}
.listingPhotoCards {
  /* Overlay при клике на заблокированное фото/видео */
}
.listingPhotoCards .listingPhotoCardsLockedOverlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  pointer-events: auto;
}
.listingPhotoCards .listingPhotoCardsLockedOverlay.hide {
  display: none;
}
.listingPhotoCards .listingPhotoCardsRestrictedContent {
  text-align: center;
  max-width: 400px;
  padding: 24px;
}
.listingPhotoCards .listingPhotoCardsRestrictedContent p.hide {
  display: none;
}
.listingPhotoCards .listingPhotoCardsRestrictedContent .button {
  margin-top: 12px;
}

.listingTypePageHeader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(20vh + 110px);
  padding: 200px 0px 30px 0px;
  width: 100%;
  background: url("../img/headerBack.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.listingTypePageHeader:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(20, 110, 129, 0.4), rgba(20, 110, 129, 0.25));
  z-index: 0;
}
.listingTypePageHeader .listingTypePageHeader__title {
  position: relative;
  font-family: Oswald;
  font-size: 56px;
  font-weight: 600;
  color: white;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2588235294);
  text-transform: uppercase;
  margin: 0 0 0px 0px;
  line-height: 1.3;
}
.listingTypePageHeader .listingTypePageHeader__sectionName {
  position: relative;
  display: flex;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  font-family: Oswald;
  font-size: 24px;
  font-weight: 400;
  color: white;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2588235294);
  text-transform: uppercase;
  margin: 0 0 5px 0px;
}
.listingTypePageHeader .listingTypePageHeader__sectionName:before {
  content: "";
  position: absolute;
  bottom: -7px;
  width: 150%;
  height: 1px;
  background: linear-gradient(to right, transparent, white, transparent);
}
.listingTypePageHeader .listingTypePageHeader__description {
  position: relative;
  max-width: 500px;
  font-family: "Open Sans";
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  color: white;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0);
  margin: 10px 0px 0px 0px;
  z-index: 1;
}

.descPopup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.descPopup.is-open {
  display: flex;
}
.descPopup .descPopupBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.descPopup .descPopupInner {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.descPopup .descPopupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.descPopup .descPopupTitle {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gray);
}
.descPopup .descPopupClose {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(76, 76, 76, 0.08);
  color: var(--gray);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.descPopup .descPopupClose:hover {
  background: rgba(76, 76, 76, 0.15);
}
.descPopup .descPopupContent {
  padding: 24px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray);
}
.descPopup .descPopupContent p {
  margin: 0 0 0.75em;
}
.descPopup .descPopupContent p:last-child {
  margin-bottom: 0;
}

.zoomPopup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.zoomPopup.is-open {
  display: flex;
}
.zoomPopup .zoomPopupBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.zoomPopup .zoomPopupInner {
  position: relative;
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoomPopup .zoomPopupClose {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--gray);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  z-index: 2;
}
.zoomPopup .zoomPopupClose:hover {
  background: #fff;
}
.zoomPopup .zoomPopupImageWrap {
  position: relative;
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}
.zoomPopup .zoomPopupImage {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

@media (max-width: 1680px) {
  .upcomingEvents .leftBlock {
    padding: 20px 0px 0px calc(5vw + 20px);
  }
  .upcomingEvents .leftBlock .cardsList {
    gap: 1.5vw;
    height: calc(26vw + 30px);
  }
  .upcomingEvents .leftBlock .card {
    height: 22vw;
    border-radius: 1.5vw;
  }
  .upcomingEvents .leftBlock .card .image {
    border-radius: 1.5vw;
  }
  .upcomingEvents .leftBlock .card .cardName::before {
    border-radius: 0px 0px 1.5vw 1.5vw;
  }
  .upcomingEvents .leftBlock .card .cardName .text {
    font-size: 1.5vw;
  }
  .upcomingEvents .leftBlock .card:hover {
    height: 26vw;
  }
  .upcomingEvents .rightBlock {
    padding: 0px calc(5vw + 20px) 0px calc(var(--buttonSize) * 0.5);
  }
  .categoriesSection {
    right: calc(2.5vw + 10px);
  }
}
@media (max-width: 1280px) {
  .mainBanner .titleBlock .title {
    font-size: 48px;
  }
  .mainBanner .titleBlock .subtitle {
    font-size: 18px;
  }
  .mainBanner .titleBlock .description {
    font-size: 16px;
  }
  .upcomingEvents {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px calc(5vw + 20px);
    height: -moz-fit-content;
    height: fit-content;
  }
  .upcomingEvents .leftBlock {
    width: 100%;
    padding: 0px;
    height: -moz-fit-content;
    height: fit-content;
  }
  .upcomingEvents .leftBlock .cardsList {
    height: calc(42vw + 30px);
  }
  .upcomingEvents .leftBlock .card {
    height: 35vw;
  }
  .upcomingEvents .leftBlock .card:hover {
    height: 42vw;
  }
  .upcomingEvents .leftBlock .card:hover .cardDescription {
    transform: translate3d(25%, 0px, 0px);
  }
  .upcomingEvents .leftBlock .card:hover:last-child {
    z-index: 4;
  }
  .upcomingEvents .leftBlock .card:hover:last-child .cardDescription {
    transform: translate3d(-10%, 0px, 0px);
  }
  .upcomingEvents .rightBlock {
    width: 100%;
    padding: 0px 0px 20px 0px;
  }
  .listingPhotoCards .bottomPanel {
    margin: 0px 0px 50px 0px;
  }
  .listingPhotoCards .listingPhotoCardsWrap {
    position: relative;
  }
  .listingPhotoCards .listingPhotoCardsDetails {
    position: relative;
    bottom: 0;
    max-width: 600px;
    left: 5vw;
    order: 1;
    margin: 160px 0px 30px 0px;
  }
  .listingPhotoCards .listingPhotoCardsPagination {
    order: 2;
  }
  .listingPhotoCards .listingPhotoCardsNavButtons {
    order: 3;
  }
}
@media (max-width: 991px) {
  :root {
    --buttonSize: 100px;
  }
  .mainBanner .contentBlock {
    width: 70%;
  }
  .mainBanner .titleBlock .title {
    font-size: 36px;
  }
  .mainBanner .titleBlock .subtitle {
    font-size: 18px;
    line-height: 1.3;
  }
  .mainBanner .maskBlock svg path {
    d: path("M 0 0 L 80 0 Q 60 50 80 100 L 0 100 Z");
  }
  .mainBanner .button {
    left: 70%;
  }
  .mainBanner .button .buttonText {
    font-size: 15px;
    padding: 3px 0px 0px 0px;
  }
  .categoriesSection .categoriesList {
    gap: 1.5vw;
  }
  .categoriesSection .categoryItem {
    width: 5vw;
    height: 5vw;
  }
  .categoriesSection .categoryItem .background {
    width: 5vw;
    height: 5vw;
  }
  .upcomingEvents .leftBlock .card:last-child .cardDescription {
    left: unset;
    right: 0;
  }
  .upcomingEvents .leftBlock .card .cardDescription {
    width: 150px;
    right: unset;
    left: 0;
  }
  .upcomingEvents .leftBlock .card .cardName .text {
    font-size: 18px;
  }
  .upcomingEvents .rightBlock {
    margin: 20px 0px 0px 0px;
  }
  .upcomingEvents .rightBlock .title {
    font-size: 30px;
  }
  .upcomingEvents .rightBlock .description {
    font-size: 18px;
    line-height: 1.3;
  }
  ul.listingsBoxList li.listingsBoxCard,
  ul.row.featured li.listingsBoxCard {
    width: calc(25% - 15px);
    height: 31vw;
  }
}
@media (max-width: 768px) {
  .mainBanner .button {
    left: 75%;
  }
  .mainBanner .contentBlock {
    width: 75%;
  }
  .mainBanner .maskBlock svg path {
    d: path("M 0 0 L 85 0 Q 65 50 85 100 L 0 100 Z");
  }
  ul.listingsBoxList li.listingsBoxCard,
  ul.row.featured li.listingsBoxCard {
    width: calc(33% - 12px);
    height: 40vw;
  }
}
@media (max-width: 640px) {
  ul.listingsBoxList li.listingsBoxCard,
  ul.row.featured li.listingsBoxCard {
    width: calc(50% - 10px);
    height: 56vw;
  }
  .upcomingEvents {
    padding: 0 0px 150px 0px;
  }
  .upcomingEvents .leftBlock {
    padding: 0;
  }
  .upcomingEvents .leftBlock:before {
    content: "";
    display: flex;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    position: absolute;
    background: linear-gradient(to right, white, transparent);
    z-index: 1;
  }
  .upcomingEvents .leftBlock:after {
    content: "";
    display: flex;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    position: absolute;
    background: linear-gradient(to left, white, transparent);
    z-index: 1;
  }
  .upcomingEvents .leftBlock .cardsList {
    position: relative;
    justify-content: flex-start;
    overflow: auto;
    height: calc(50vw + 30px);
    padding: 0px calc(5vw + 20px);
  }
  .upcomingEvents .leftBlock .cardsList .card {
    height: 40vw;
    min-width: 25vw;
    width: 25vw;
  }
  .upcomingEvents .leftBlock .cardsList .card:hover {
    height: 50vw;
  }
  .upcomingEvents .rightBlock {
    padding: 0px calc(5vw + 20px);
  }
  .upcomingEvents .waves {
    width: 1500px;
    display: none;
  }
  .upcomingEvents .waves.bottom {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    top: unset;
    transform: translate(0);
    display: flex;
    width: 1500px;
  }
  .mainBanner .button {
    left: 50%;
    transform: translate(-50%, -50%);
    top: 80%;
  }
  .mainBanner .contentBlock {
    width: 100%;
    padding: 0px calc(5vw + 20px);
  }
  .mainBanner .maskBlock svg path {
    d: path("M 0 0 L 100 0 L 120 100 Q 50 60 -20 100 L -20 150 Q 50 50 120 150 L 100 0 Z");
  }
  .categoriesSection {
    left: 0;
    bottom: 0;
    right: unset;
    top: unset;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    flex-direction: row;
    align-items: flex-end;
    transform: translate(0, 0);
    gap: 10px;
  }
  .categoriesSection .waves {
    display: flex;
    position: absolute;
    width: 100%;
    min-height: 100px;
    height: 110%;
    bottom: 0;
    opacity: 0.9;
  }
  .categoriesSection .waves svg {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: drop-shadow(2px 4px 6px var(--lightBlueTransparent));
  }
  .categoriesSection .waves svg path {
    d: path("M -20 11 C 5 -3 38 11 99 5 C 202 1 144 9 267 10 L 200 40 L 0 40 Z");
  }
  .categoriesSection .categoriesList {
    width: 100%;
    height: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 10px 20px 10px 20px;
    overflow: auto;
    gap: 15px;
  }
  .categoriesSection .categoryItem {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    align-self: flex-start;
  }
  .categoriesSection .categoryItem:last-child:after {
    display: none;
  }
  .categoriesSection .categoryItem:after {
    position: absolute;
    left: 100%;
    transform: translate(7px, 0px);
    content: "";
    width: 1px;
    height: 50px;
    background: linear-gradient(to top, transparent, var(--darkBlue), transparent);
  }
  .categoriesSection .categoryItem:hover .labelContainer {
    transform: translate(0px, 0px);
  }
  .categoriesSection .categoryItem:before {
    display: none;
  }
  .categoriesSection .categoryItem .labelContainer {
    position: relative;
    right: unset;
    top: unset;
    transform: translate(0, 0);
    font-size: 10px;
    opacity: 1;
    padding: 0;
    width: 100%;
    pointer-events: auto;
  }
  .categoriesSection .categoryItem .labelContainer .label {
    place-self: center;
    width: -moz-fit-content;
    width: fit-content;
    max-width: unset;
    padding: 0;
    background: none;
    word-break: auto-phrase;
    box-shadow: unset;
    text-align: center;
  }
  .categoriesSection .categoryItem .background {
    position: relative;
    width: 8vw;
    height: 8vw;
  }
  .page-footer {
    padding-bottom: 100px;
  }
}
@media (max-width: 480px) {
  ul.listingsBoxList li.listingsBoxCard,
  ul.row.featured li.listingsBoxCard {
    width: 150px;
    height: 240px;
  }
  ul.listingsBoxList li.listingsBoxCard .ad-info .title,
  ul.listingsBoxList li.listingsBoxCard a.ad-info .title,
  ul.row.featured li.listingsBoxCard .ad-info .title,
  ul.row.featured li.listingsBoxCard a.ad-info .title {
    font-size: 15px;
    line-height: 1.2;
  }
}/*# sourceMappingURL=new-main-styles.css.map */