/* html, body {
  overflow-x: hidden;
} */
* {
  margin: 0;
  padding: 0;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
  -webkit-tap-highlight-color: transparent;
}
a {
  text-decoration: none;
}
body > .box {
  width: 100%;
  height: 50vh;
  position: fixed;
  top: 280px;
  left: 0;
  z-index: 1;
  background-color: transparent;
  overflow: hidden;
}
body > .box > .fish {
  width: 250px;
  height: 250px;
  position: absolute;
  background: url("../img/fish/fish.png") center center/contain no-repeat;
  top: 1px;
  left: 1px;
  -webkit-animation: 7s linear 0s infinite alternate fish;
  animation: 7s linear 0s infinite alternate fish;
}
body > .box-2 {
  top: 530px;
}
body > .box-2 > .big-fish {
  width: 350px;
  height: 380px;
  -webkit-animation: 10s linear 0s infinite alternate big-fish;
  animation: 10s linear 0s infinite alternate big-fish;
  background: url("../img/fish/big-fish.png") center center/contain no-repeat;
}

@-webkit-keyframes fish {
  from {
    top: 1px;
  }
  to {
    top: 50px;
  }
}

@keyframes fish {
  from {
    top: 1px;
  }
  to {
    top: 50px;
  }
}

@-webkit-keyframes big-fish {
  from {
    top: 1px;
  }
  to {
    top: 100px;
  }
}

@keyframes big-fish {
  from {
    top: 1px;
  }
  to {
    top: 100px;
  }
}

@-webkit-keyframes heightOut {
  0% {
    height: auto;
  }
  100% {
    height: 0px;
  }
}
@keyframes heightOut {
  0% {
    height: auto;
  }
  100% {
    height: 0px;
  }
}

@keyframes heightIn {
  0% {
    height: 0px;
  }
  100% {
    height: auto;
  }
}
@-webkit-keyframes heightIn {
  0% {
    height: 0px;
  }
  100% {
    height: auto;
  }
}
.container {
  padding: 0 15px;
  max-width: 1130px;
  margin: 0 auto;
}
.page__zones .over-wrapper {
  overflow: visible !important;
}
.section__title {
  margin: 0 auto;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.section__title .crumbs {
  font-family: "Cera Pro";
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 100%;
  color: #ffffff;
}
.section__title .title {
  margin-top: 33px;
  font-family: "Cera Round Pro";
  font-style: normal;
  font-weight: bold;
  font-size: 80px;
  line-height: 85%;
  letter-spacing: -0.05em;
  color: #ffffff;
}
.section__title .divider {
  margin-top: 32px;
}

.zones {
  /* background: url(../img/top.png) 0 0 no-repeat, url(../img/bottom.png) bottom center no-repeat; */
  /* background-size: 100% auto, 100% auto; */
  /* background-color: #00c7ff; */
  margin-bottom: -15px;
  position: relative;
}
.zones__wrapper {
  /* padding-left: 285px; */
  margin-top: 67px;
  display: flex;
  /* align-items: flex-start; */
  z-index: 1;
  position: relative;
}
.zones__nav {
  width: 255px;
  position: sticky;
  /* height: 540px; */
  background: #ffffff;
  border-radius: 50px;
  padding: 23px;
  padding-top: 53px;
  margin-right: 30px;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: 130px;
  left: 0;
  transition: none;
}

.zones__nav_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 17px;
  position: relative;
}
.zones__nav_item > svg {
  margin-right: 20px;
}
.zones__nav_item > svg path {
  fill: #00acdd;
}
.zones__nav_item > a {
  font-family: "Cera Round Pro";
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 120%;
  background-color: transparent;
  letter-spacing: -0.05em;
  color: #00acdd;
  text-align: left;
}
.zones__nav_item::after {
  content: "";
  display: block;
  opacity: 0;
  width: 28px;
  height: 53px;
  background-color: #fff;
  position: absolute;
  top: 1px;
  right: -21px;
  transform: rotate(45deg);
  border-radius: 5px;
}
.zones__nav_item-active > svg path {
  fill: #fb7015;
}
.zones__nav_item-active > a {
  color: #fb7015;
}
.zones__nav_item-active::after {
  opacity: 1;
}
.zones__nav_item:hover > svg path {
  fill: #fb7015;
}
.zones__nav_item:hover > a {
  color: #fb7015;
}
.zones__nav_btn {
  display: block;
  width: 100%;
  margin-top: 35px;
  height: 55px;
  text-align: center;
  letter-spacing: -0.05em;
  color: #ffffff;
  font-family: Cera Pro;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 55px;
  background: #fb7015;
  border-radius: 99px;
}
.zones__cards {
  display: flex;
  flex-direction: column;
}

.zones__card {
  /* min-height: 540px; */
  max-width: 825px;
  padding: 60px;
  padding-left: 30px;
  background: #ffffff;
  border-radius: 50px;
  position: relative;
  margin: 0 0 30px;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
  -webkit-tap-highlight-color: transparent;
}
.zones__card_content {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}
.zones__card:last-child {
  margin-bottom: 0;
}
.zones__card .anchor {
  display: block;
  position: absolute;
  left: 0;
  top: -150px;
}
.zones__card_slider {
  margin-right: 29px;
  width: 100%;
  max-width: 385px;
}
.zones__card_slider > .slider-for .slick-slide {
  position: relative;
  width: 355px;
  height: 260px;
}
.zones__card_slider > .slider-for .slick-slide > div {
  position: absolute;
  width: 100%;
  height: 100%;
}
.zones__card_slider > .slider-for .slick-slide > div > img {
  object-fit: cover;
}
.zones__card_slider > .slider-for {
  max-width: 100%;
  border-radius: 40px;
  /* overflow: hidden;  */
}
.zones__card_slider > .slider-for video,
.zones__card_slider > .slider-for img {
  max-width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.zones__card_slider > .slider-for .slick-slide > div {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  overflow: hidden;
}
.zones__card_slider > .slider-for .video_wrapper {
  width: 100%;
  height: 317px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.zones__card_slider > .slider-for .video_wrapper .video-over {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1200;
  display: none;
  cursor: pointer;
}
.zones__card_slider > .slider-for .video_wrapper .video-play {
  position: absolute;
  width: 65px;
  height: 65px;
  top: 48%;
  left: 50%;
  transform: translate(-50%);
  background: url("../img/zones/slider/play.png");
  z-index: 1100;
  cursor: pointer;
}
.zones__card_slider > .slider-for .video_wrapper .video-play:hover {
  transform: scale(1.2) translate(-50%);
}
.zones__card_slider > .slider-for .video_wrapper.video-is-playing .video-play {
  opacity: 0;
  visibility: hidden;
}
.zones__card_slider > .slider-for .video_wrapper.video-is-playing .video-over {
  display: block;
}
.zones__card_slider > .slider-nav {
  height: 65px;
  width: 85%;
  max-width: 320px;
  margin: 0 auto;
  margin-top: 10px;
}
.zones__card_slider > .slider-nav .slick-track {
  min-width: 100%;
  height: 65px;
}
.zones__card_slider .slick-prev {
  top: 47%;
  left: -20px;
}
.zones__card_slider .slick-next {
  top: 47%;
  right: -20px;
}
.zones__card_slider > .slider-nav .slick-track > * {
  margin-left: 0;
  display: block;
  width: 65px !important;
  height: 65px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  object-fit: contain;
}
.zones__card_slider > .slider-nav .slick-track > * > * {
  width: 100%;
  height: 100%;
}
.zones__card_slider > .slider-nav .slick-track > * > * > * {
  width: 100%;
  height: 100%;
}

/* .zones__card_slider > .slider-nav .slick-track > *:not(:last-child) {
      margin-right: 10px; } */
.zones__card_wrapper {
  padding-top: 20px;
}
.zones__card_title {
  font-family: "Cera Round Pro";
  text-align-last: left;
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  line-height: 100%;
  letter-spacing: -0.05em;
  color: #00acdd;
}
.zones__card_descr {
  margin-top: 16px;
  font-family: "Cera Round Pro";
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 140%;
  color: #00acdd;
}
.zones__card_divider {
  display: block;
  margin-top: 24px;
}
.zones__card_dimensions {
  margin-top: 26px;
  display: grid;
  gap: 15px 0;
  grid-template: repeat(2, auto) / repeat(2, auto);
  align-items: center;
  font-family: "Cera Pro";
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 100%;
  text-transform: uppercase;
  color: #fb7015;
}
.zones__card_dimensions span {
  font-size: 26px;
}
.zones__card_bg-img {
  position: absolute;
  height: auto;
}
.zones__card_bg-img.img-1 {
  margin-left: -300px;
  top: -93px;
  right: -140px;
  transform: matrix(-0.94, 0.35, 0.35, 0.94, 0, 0);
  width: 270px;
}
.zones__card_bg-img.img-2 {
  top: 0;
  right: -203px;
  width: 290px;
}
.zones__card_bg-img.img-3 {
  top: 0;
  right: -168px;
  width: 260px;
}
.zones__card {
  /* position: relative; */
}
.zones__card_wrapper {
  position: relative;
}
.zones__btns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.zones__card_trigger {
  font-family: "Cera Round Pro";
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -0.03em;
  height: 45px;
  line-height: 42px;
  /* padding: 0 38px; */
  padding: 0;
  width: 220px;
  color: #00acdd;
  border: 2px solid #00acdd;
  background: transparent;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
  -webkit-tap-highlight-color: transparent;
  position: relative !important;
  inset: auto !important;
  /* position: absolute;
  bottom: -20px;
  right: 0; */
}
.zones__card_phone {
  font-family: "Cera Round Pro";
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -0.03em;
  height: 45px;
  line-height: 42px;
  /* padding: 0 38px; */
  padding: 0 15px !important;
  width: fit-content;
  max-width: 242px;
  color: #00acdd;
  border: 2px solid #00acdd;
  background: transparent;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
  -webkit-tap-highlight-color: transparent;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* position: absolute;
  bottom: -20px;
  right: 0; */
}
.zones__card_trigger:hover,
.zones__card_trigger:active,
.zones__card_trigger:focus,
.zones__card_phone:hover,
.zones__card_phone:active,
.zones__card_phone:focus {
  color: #fff;
  background: #00acdd;
  line-height: 42px;
  padding: 0 38px;
  font-style: normal;
  font-weight: normal;
  font-family: "Cera Round Pro";
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 90%;
  position: absolute;
  bottom: -20px;
  right: 0;
}
.zones__card_text {
  margin-top: 30px;
  /* opacity: 1; */
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
  -webkit-tap-highlight-color: transparent;
  animation-iteration-count: 1;
}
.zones__card_text h3 {
  margin-top: 30px;
  font-family: "Cera Pro";
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 100%;
  text-transform: uppercase;
  color: #00acdd;
}

.zones__card_text ul li {
  font-family: "Cera Pro";
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: #000000;
  text-decoration: none;
  list-style: none;
  padding: 0 0 0 30px;
  position: relative;
  margin-bottom: 10px;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
  -webkit-tap-highlight-color: transparent;
}
.zones__card_text b {
  font-size: 16px;
  line-height: 150%;
  color: #000000;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
  -webkit-tap-highlight-color: transparent;
}
.zones__card_text {
  font-size: 16px;
  line-height: 150%;
  color: #000000;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
  -webkit-tap-highlight-color: transparent;
}
.zones__card_text ul li:before {
  content: "";
  width: 10px;
  height: 10px;
  border: 3px solid #00acdd;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 8px;
}

/* @media (max-width: 1500px) {
  .zones__wrapper {
    margin-left: -100px;
  }
} */
@media (max-width: 1385px) {
  .bottom .footer-obj-2 img {
    width: 180px;
  }
  .bottom .footer-obj-2 {
    bottom: -48px;
    margin-right: -458px;
  }
  .bottom .footer-obj-1 img {
    width: 480px;
  }
  .bottom .footer-obj-1 {
    top: 17px;
    margin-left: -758px;
  }
  .zones__wrapper {
    margin-left: -50px;
  }
  .zones__card_bg-img.img-1 {
    top: -42px;
    right: -91px;
    width: 188px;
  }
  .zones__card_bg-img.img-2 {
    top: -42px;
    right: -115px;
    width: 199px;
  }
  .zones__card_bg-img.img-3 {
    top: -32px;
    right: -104px;
    width: 187px;
  }
}

@media (max-width: 1290px) {
  ul.footer-menu {
    margin: 0;
  }
  .zones__wrapper {
    margin-left: -20px;
  }

  .zones__card_bg-img.img-1 {
    top: -38px;
    right: -26px;
    width: 144px;
  }
  .zones__card_bg-img.img-2 {
    top: -40px;
    right: -49px;
    width: 154px;
  }
  .zones__card_bg-img.img-3 {
    top: -29px;
    right: -38px;
    width: 142px;
  }
}

@media (max-width: 1199px) {
  .zones__wrapper {
    margin-left: auto;
  }

  .zones__card_bg-img.img-1 {
    display: none;
  }
  .zones__card_bg-img.img-2 {
    display: none;
  }
  .zones__card_bg-img.img-3 {
    display: none;
  }
  .zones__card {
    padding: 45px;
  }
  .zones__card_dimensions {
    font-size: 15px;
  }
  .zones__card_dimensions div {
    padding-right: 5px;
  }
  .zones__card_slider {
    margin-right: 15px;
  }
  .zones__card_descr {
    width: 90%;
  }
  /* .zones__card_trigger {
    margin-top: 30px;
  } */
  .zones__nav_item > a {
    font-size: 18px;
  }
  .zones__nav_item > svg {
    margin-right: 14px;
  }
  .zones__nav_btn {
    font-size: 15px;
  }
  .zones__card_dimensions span {
    font-size: 35px;
  }
}
@media (max-width: 991px) {
  .zones__wrapper {
    flex-direction: column;
    align-items: center;
  }
  .zones__nav {
    position: relative;
    top: unset;
    width: 100%;
    margin-bottom: 60px;
    height: auto;
    padding: 35px;
    margin-right: 0;
    top: 0 !important;
  }
  .zones__nav_items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .zones__nav_item {
    width: 32%;
  }
  .zones__nav_btn {
    width: 33%;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .zones {
    margin-bottom: 60px;
  }
  .zones__wrapper {
    flex-direction: column;
  }
  .zones__nav {
    margin-top: -50px;
  }
  .zones__nav_items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .zones__nav_item > a {
    font-size: 15px;
  }
  .zones__nav_btn {
    width: 40%;
    margin: 0 auto;
  }

  .zones__card {
    min-height: unset;
  }
  .zones__card_content {
    flex-direction: column;
    align-items: center;
  }
  .zones__card_trigger {
    line-height: 18px;
    width: 100%;
  }
  .zones__card_phone {
    line-height: 18px;
    width: 100%;
    max-width: 100%;
  }
  .zones__card_wrapper {
    /* padding-bottom: 70px; */
    width: 100%;
  }
  .zones__card_trigger {
    position: static;
  }
  .zones__card_trigger:hover,
  .zones__card_trigger:focus,
  .zones__card_trigger:active {
    position: static;
  }
}

@media (max-width: 540px) {
  .zones__card_text table {
    width: 100% !important;
  }
  .zones__card_text table tr {
    display: flex;
    flex-wrap: wrap;
  }
  .zones__card_text > table > tbody > tr > td {
    width: 100%;
  }
  .zones__card_text table td:nth-child(odd) {
    margin-bottom: 10px;
    flex-grow: 1;
    width: 50%;
  }
  .zones__nav {
    padding: 25px;
  }
  .zones__card {
    padding: 30px;
  }
  .zones__cards {
    width: 100%;
    max-width: 100%;
  }
  .zones__card_slider {
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }
  .zones__card_slider .my_video {
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }
  .zones__card_bg-img {
    display: none;
  }
  .zones__nav_items {
    width: 100%;
    justify-content: space-between;
  }
  .zones__nav_item {
    width: 49%;
  }
  .zones__nav_item > * {
    margin-right: 5px;
  }
  .zones__nav_item > svg {
    margin-right: 5px;
  }
  .zones__card_slider > .slider-nav .slick-track > * {
    width: 55px !important;
    height: 55px;
  }
  .zones__card_slider > .slider-nav .slick-track > *:not(:last-child) {
    margin-right: 5px;
  }
  .zones__nav_btn {
    width: 190px;
  }
  .zones__card_slider .slider-for {
    height: auto;
  }
  .zones__card_slider > .slider-for .video_wrapper {
    height: 258px;
  }
  /* .zones__card_slider .slick-prev,
  .zones__card_slider .slick-next {
    top: 0;
  } */
  .zones__card_slider > .slider-nav {
    max-width: 240px;
    margin-left: 0;
    margin-top: 20px;
  }
  .zones__card_slider > .slider-nav,
  .zones__card_slider > .slider-nav .slick-track {
    height: auto;
  }
  .zones__card_title {
    text-align: left;
  }
  .zones__card_dimensions span {
    font-size: 30px;
  }
  .zones__card_slider .slick-slide {
    margin: 0;
  }
}