@font-face {
  font-family: "Playfair";
  src: url(/assets/fonts/Playfair/Playfair144pt-Italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url(/assets/fonts/BarlowCondensed/Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.breadcrumbHolder nav.breadcrumb {
  width: fit-content;
  padding: 8px 12px;
  margin: 20px 10px 0;
  position: relative;
  background-color: white;
  z-index: 10;
}

.culturalToursPage .uzorHolder {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  height: 274px;
}
.culturalToursPage .uzorHolder .uzorBlock {
  position: absolute;
  top: var(--mtop, auto);
  left: var(--mleft, auto);
  overflow: hidden;
  width: 325px;
  height: 461px;
}
.culturalToursPage .uzorHolder .uzorBlock .uzorbg IMG {
  width: 325px;
  height: auto;
}
.culturalToursPage .uzorHolder .uzorBlock .uzorCircle {
  position: absolute;
  width: 190px;
  height: 190px;
  top: var(--mtop, auto);
  left: var(--mleft, auto);
  bottom: var(--mbottom, auto);
  right: var(--mright, auto);
}
.culturalToursPage .uzorHolder .uzorBlock .uzorCircle IMG {
  width: 100%;
  height: auto;
}
.culturalToursPage .uzorHolder .uzorBlock .uzorCircle.cw {
  animation: rotateCW 60s linear infinite;
}
.culturalToursPage .uzorHolder .uzorBlock .uzorCircle.ccw {
  animation: rotateCCW 60s linear infinite;
}
.culturalToursPage .toursList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: -80px 24px 160px;
}
.culturalToursPage .toursList article.tour {
  padding: 11px 8px;
  width: 100%;
  min-height: 232px;
  border-radius: 8px;
  background: url(/assets/i/cultural-tours/greenbook-bg.webp) bottom center no-repeat #BCF0ED;
  background-size: contain;
}
.culturalToursPage .toursList article.tour.video {
  padding: 0;
}
.culturalToursPage .toursList article.tour.video VIDEO {
  width: 102%;
  height: 102%;
  object-fit: cover;
  border-radius: 8px;
}
.culturalToursPage .toursList article.tour span.duration {
  display: block;
  margin-bottom: 4px;
  color: #125854;
  font-size: clamp(0.813rem, 0.527rem + 0.951vw, 1.25rem);
  font-weight: 300;
  line-height: 1;
}
.culturalToursPage .toursList article.tour .titleNtourType {
  display: flex;
  flex-direction: column;
  max-width: fit-content;
}
.culturalToursPage .toursList article.tour h2.title {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  color: #597271;
  font-size: clamp(1.875rem, 1.467rem + 1.359vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
}
.culturalToursPage .toursList article.tour span.tourType {
  position: relative;
  top: -10px;
  align-self: flex-end;
  display: inline-block;
  text-align: right;
  color: #125854;
  font-family: "Playfair", serif;
  font-size: clamp(0.938rem, 0.734rem + 0.679vw, 1.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}
.culturalToursPage .toursList article.tour span.tourDetails {
  display: block;
  margin-top: 24px;
  max-width: 90%;
  color: #000;
  font-size: clamp(0.625rem, 0.38rem + 0.815vw, 1rem);
  font-weight: 300;
  line-height: 1.45;
}
.culturalToursPage .toursList article.tour span.tourDetails strong {
  font-weight: 500;
}
.culturalToursPage .toursList article.tour.green {
  background-color: #BCF0ED;
}
.culturalToursPage .toursList article.tour.red {
  background-color: #FF4553;
  background-image: url(/assets/i/cultural-tours/redbook-bg.webp);
}
.culturalToursPage .toursList article.tour.red span.duration {
  color: #fff;
}
.culturalToursPage .toursList article.tour.red h2.title {
  color: #64141A;
}
.culturalToursPage .toursList article.tour.red span.tourType {
  color: white;
}
.culturalToursPage .toursList article.tour.yellow {
  background-color: #FFC77B;
  background-image: url(/assets/i/cultural-tours/yellowbook-bg.webp);
}
.culturalToursPage .toursList article.tour.yellow span.duration {
  color: #fff;
}
.culturalToursPage .toursList article.tour.yellow h2.title {
  color: #8B540A;
}
.culturalToursPage .toursList article.tour.yellow span.tourType {
  color: white;
}
.culturalToursPage .toursList article.tour:nth-child(odd) {
  transform: rotate(-5deg) translateX(3px);
}
.culturalToursPage .toursList article.tour:nth-child(even) {
  transform: rotate(5deg) translateX(-3px);
}

.cardPopup {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.cardPopup.active {
  opacity: 1;
  visibility: visible;
}
.cardPopup .popupContent {
  position: relative;
  max-width: 1360px;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  background-color: white;
  border-radius: 20px;
}
.cardPopup .popupContent span.icon.close {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  top: 24px;
  right: 24px;
  background: url(/assets/i/sprite.svg) -271px -222px no-repeat;
  cursor: pointer;
}
.cardPopup .popupContent img {
  max-width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  display: block;
}
.cardPopup .popupContent .texts {
  height: 100%;
  margin: 24px clamp(16px, 7.9vw, 96px);
  padding: 0 clamp(8px, 1.9vw, 24px);
  overflow-y: auto;
}
.cardPopup .popupContent .texts > h3.title {
  font-size: clamp(2rem, 1.266rem + 2.446vw, 3.125rem);
  color: #00C1AF;
  font-weight: 500;
  line-height: 1;
}
.cardPopup .popupContent .texts > h4.subtitle {
  margin-bottom: 20px;
  font-family: "Playfair", serif;
  font-style: italic;
  font-size: clamp(1.5rem, 0.848rem + 2.174vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
}
.cardPopup .popupContent .texts .tourDetails {
  display: grid;
  gap: 24px;
  margin-bottom: 40px;
}
.cardPopup .popupContent .texts .tourDetails .tourRoute {
  margin-bottom: 24px;
}
.cardPopup .popupContent .texts .tourDetails h4.title {
  margin-bottom: 4px;
  font-size: clamp(1.625rem, 1.38rem + 0.815vw, 2rem);
  line-height: 1;
  font-weight: 500;
  color: #00C1AF;
}
.cardPopup .popupContent .texts .tourDetails .text {
  font-weight: 300;
  font-size: clamp(0.875rem, 0.712rem + 0.543vw, 1.125rem);
  line-height: 1.45;
}
.cardPopup .popupContent .texts .tourDetails .text STRONG {
  font-weight: 500;
}
.cardPopup .popupContent .texts .tourDetails .text A {
  color: #196BD9;
}
@media (min-width: 1024px) {
  .cardPopup .popupContent .texts .tourDetails .text A:HOVER {
    text-decoration: none;
  }
}
.cardPopup .popupContent .texts .tourDetails .routeNDetails .contactBlock {
  display: grid;
  grid-template-columns: 1fr 31px;
  border: solid 1px #DDDDDD;
  padding: 5px;
  border-radius: 15px;
  max-width: 504px;
  margin-top: 24px;
}
.cardPopup .popupContent .texts .tourDetails .routeNDetails .contactBlock span.text {
  display: block;
  padding: 12px;
  font-weight: 500;
  font-size: 1.125rem;
}
.cardPopup .popupContent .texts .tourDetails .routeNDetails .contactBlock span.text A {
  color: #00C1AF;
  text-decoration: none;
}
.cardPopup .popupContent .texts .tourDetails .routeNDetails .contactBlock span.icon {
  display: block;
  width: 31px;
  height: 31px;
  background: url("/assets/i/sprite.svg?v1") -192px -64px no-repeat;
}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  .cardPopup .popupContent .texts .tourDetails .routeNDetails .contactBlock span.icon {
    background-image: url("/assets/i/sprite.svg?v1");
  }
}
.cardPopup .popupContent .texts .tourDetails .tourSchedule h4.title {
  margin-bottom: 16px;
}
.cardPopup .popupContent .texts .tourDetails .tourSchedule .schedule {
  display: grid;
  gap: 16px;
}
.cardPopup .popupContent .texts .tourDetails .tourSchedule .schedule .scheduleItem {
  display: grid;
  gap: 16px;
  grid-template-columns: 64px 1fr;
}
.cardPopup .popupContent .texts .tourDetails .tourSchedule .schedule .scheduleItem span.time {
  font-size: clamp(1.5rem, 1.174rem + 1.087vw, 2rem);
  font-weight: 500;
  line-height: 1;
}
.cardPopup .popupContent .texts::-webkit-scrollbar-track {
  background-color: transparent;
  border-right: 3px solid #D9D9D9;
}
.cardPopup .popupContent .texts::-webkit-scrollbar {
  width: 7px;
  background-color: transparent;
}
.cardPopup .popupContent .texts::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
}
.cardPopup .popupContent .popupBottom {
  display: none;
  background: #D9D9D9;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.cardPopup .popupContent .popupBottom .closeBtn {
  cursor: pointer;
  border: none;
  padding: 0;
  text-align: center;
  font-weight: 500;
  font-size: clamp(0.875rem, 0.386rem + 1.63vw, 1.625rem);
  line-height: 1;
  background-color: transparent;
}
.cardPopup .popupContent .popupBottom .closeBtn:hover {
  opacity: 0.7;
}

@media (min-width: 480px) {
  .culturalToursPage .toursList article.tour {
    min-height: 320px;
  }
  .culturalToursPage .toursList article.tour:nth-child(odd) {
    justify-self: flex-end;
  }
}
@media (min-width: 768px) {
  .culturalToursPage .uzorHolder {
    height: 604px;
  }
  .culturalToursPage .uzorHolder .uzorBlock {
    top: var(--top, auto);
    left: var(--left, auto);
    width: 715px;
    height: 1012px;
  }
  .culturalToursPage .uzorHolder .uzorBlock .uzorbg IMG {
    width: 715px;
    height: auto;
  }
  .culturalToursPage .uzorHolder .uzorBlock .uzorCircle {
    width: 417px;
    height: 417px;
    top: var(--top, auto);
    left: var(--left, auto);
    bottom: var(--bottom, auto);
    right: var(--right, auto);
  }
}
@media (min-width: 1024px) {
  .culturalToursPage .toursList {
    margin: -360px 24px 160px;
    grid-template-columns: repeat(3, 1fr);
  }
  .culturalToursPage .toursList article.tour {
    min-height: 456px;
    padding: 40px 20px;
    margin-bottom: 24px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }
  .culturalToursPage .toursList article.tour span.tourType {
    margin-bottom: 40px;
  }
  .culturalToursPage .toursList article.tour span.tourDetails {
    line-height: 1.8;
  }
  .culturalToursPage .toursList article.tour:HOVER:nth-child(3n+1) {
    transform: rotate(-4deg) translateX(10px) translateY(-10px);
  }
  .culturalToursPage .toursList article.tour:HOVER:nth-child(3n+2) {
    transform: rotate(6deg) translateY(-5px);
  }
  .culturalToursPage .toursList article.tour:HOVER:nth-child(3n+3) {
    transform: rotate(-7deg) translateX(12px) translateY(-7px);
  }
  .cardPopup .popupContent .texts .tourDetails {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 64px;
  }
  .cardPopup .popupContent .texts .tourDetails .tourSchedule .schedule {
    gap: 24px;
  }
  .cardPopup .popupContent .texts .tourDetails .tourSchedule .schedule .scheduleItem {
    grid-template-columns: 80px 1fr;
    gap: 24px;
  }
}
@media (min-width: 1216px) {
  .culturalToursPage .toursList {
    grid-template-columns: repeat(4, 1fr);
  }
  .culturalToursPage .toursList article.tour:nth-child(4n+1) {
    transform: rotate(5deg) translateX(40px);
  }
  .culturalToursPage .toursList article.tour:nth-child(4n+2) {
    transform: rotate(-5deg);
  }
  .culturalToursPage .toursList article.tour:nth-child(4n+3) {
    transform: rotate(5deg) translateX(0);
  }
  .culturalToursPage .toursList article.tour:nth-child(4n+4) {
    transform: rotate(-5deg) translateX(-20px);
  }
  .culturalToursPage .toursList article.tour:HOVER:nth-child(4n+1) {
    transform: rotate(4deg) translateX(30px) translateY(-10px);
  }
  .culturalToursPage .toursList article.tour:HOVER:nth-child(4n+2) {
    transform: rotate(-6deg) translateY(-5px);
  }
  .culturalToursPage .toursList article.tour:HOVER:nth-child(4n+3) {
    transform: rotate(7deg) translateX(12px) translateY(-7px);
  }
  .culturalToursPage .toursList article.tour:HOVER:nth-child(4n+4) {
    transform: rotate(-4deg) translateX(-25px) translateY(-12px);
  }
}
@keyframes rotateCW {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotateCCW {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}