@charset "UTF-8";
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Regular.eot");
  src: local("Gilroy Regular"), local("Gilroy-Regular"),
    url("../fonts/Gilroy-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Gilroy-Regular.woff2") format("woff2"),
    url("../fonts/Gilroy-Regular.woff") format("woff"),
    url("../fonts/Gilroy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Semibold.eot");
  src: local("Gilroy Semibold"), local("Gilroy-Semibold"),
    url("../fonts/Gilroy-Semibold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Gilroy-Semibold.woff2") format("woff2"),
    url("../fonts/Gilroy-Semibold.woff") format("woff"),
    url("../fonts/Gilroy-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Bold.eot");
  src: local("Gilroy Bold"), local("Gilroy-Bold"),
    url("../fonts/Gilroy-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Gilroy-Bold.woff2") format("woff2"),
    url("../fonts/Gilroy-Bold.woff") format("woff"),
    url("../fonts/Gilroy-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  /* Set the sizing of an element to include it's border */
}

* {
  margin: 0;
  /* Set the default margin to 0 */
  padding: 0;
  /* Set the default padding to 0 */
}

ul[role="list"],
ol[role="list"],
ul {
  list-style: none;
  /* Turn off numbered and unordered list decoration */
}

html:focus-within {
  scroll-behavior: smooth;
  /* Make the scrolling inside of any scrollable element smooth */
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  /* Makes link undelines look better */
}

dialog:-internal-dialog-in-top-layer::backdrop {
  background: rgba(51, 51, 51, 0.6);
}

img,
svg,
video,
canvas {
  max-width: 100%;
  /* Makes it responsive */
  height: auto;
  /* Makes it responsive */
  vertical-align: middle;
  /* Makes text next to inline images look better */
  font-style: italic;
  /* If the images don't load it makes the alt decription look better */
  background-repeat: no-repeat;
  /* The background repeat and size are there if you want to load a picture first like a backroung image that is worse quality while the better quality image loads */
  background-size: cover;
}

input,
button,
textarea,
select {
  font: inherit;
  /* Makes these elements inherit fonts */
  cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition: none;
  }
}
body,
html {
  height: 100%;
  background-color: #fafafa;
  /* Makes the body element full screen */
  /* Makes normal scrolling smooth */
}

body,
dialog {
  overflow-x: hidden;
}

body {
  margin: 0 auto;
}

#preloader {
  position: fixed;
  inset: 0;
  background: #050305;
  display: flex;
  z-index: 2000;
  padding: 18px 20px;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
  transition: all 0.35s ease;
}
#preloader > div {
  padding: 18px 20px;
}
#preloader > div > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 241px;
  transition: all 0.5s ease;
}
#preloader > div > svg.active {
  top: 17.6px;
  left: 10px;
  transform: unset;
  width: 95.517px;
  height: 32.804px;
}
@media screen and (min-width: 768px) {
  #preloader > div > svg.active {
    left: 44px;
  }
}
@media screen and (min-width: 1024px) {
  #preloader > div > svg.active {
    left: clamp(108.09px, 10.5555555556vw, 202.67px);
    top: clamp(5.689px, 0.5555555556vw, 10.667px);
    width: clamp(102.4px, 10vw, 192px);
    height: clamp(42.522px, 4.1666666667vw, 80px);
  }
}

#preloader .preloader__inner svg {
  opacity: 0;
  /* збігається з gsap.set */
}

#preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

body.preloading {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #preloader,
  #preloader .preloader__inner {
    transition: none !important;
  }
}
.header {
  position: fixed;
  top: 0;
  z-index: 1001;
  width: 100%;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .header {
    padding-inline: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .header {
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border: 2px solid #0af;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  border-radius: 24px;
  padding: 12px 10px;
}
@media screen and (min-width: 768px) {
  .header__container {
    padding: 12px 24px;
  }
}
@media screen and (min-width: 1024px) {
  .header__container {
    padding-block: clamp(8.533px, 0.8333333333vw, 16px);
    padding-inline: clamp(26.311px, 2.5694444444vw, 49.333px);
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
    border-width: clamp(2.844px, 0.2777777778vw, 5.333px);
  }
}
.header__container > ul {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 1024px) {
  .header__container > ul {
    gap: clamp(17.067px, 1.6666666667vw, 32px);
  }
}
.header__container > ul > li:first-child > svg {
  width: 92.508px;
  height: 24.499px;
}
@media screen and (min-width: 1024px) {
  .header__container > ul > li:first-child > svg {
    width: clamp(116.37px, 11.3642361111vw, 218.194px);
    height: clamp(30.819px, 3.0096527778vw, 57.786px);
  }
}
.header__container > ul > li > svg {
  width: 72.755px;
  height: 19.452px;
  fill: #090915;
}
@media screen and (min-width: 1024px) {
  .header__container > ul > li > svg {
    width: clamp(91.523px, 8.9377777778vw, 171.605px);
    height: clamp(24.469px, 2.3895833333vw, 45.88px);
  }
}
.header__container > ul > li:last-child > svg {
  width: 90.603px;
  height: 24.993px;
}
@media screen and (min-width: 1024px) {
  .header__container > ul > li:last-child > svg {
    width: clamp(113.974px, 11.1302777778vw, 213.702px);
    height: clamp(31.441px, 3.0703472222vw, 58.951px);
  }
}
.header__container > button {
  display: flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: #090915;
  border: 1px solid #090915;
  transition: all 0.5s ease-in-out;
  position: relative;
  isolation: isolate;
}
@media screen and (min-width: 1024px) {
  .header__container > button {
    width: clamp(34.133px, 3.3333333333vw, 64px);
    height: clamp(34.133px, 3.3333333333vw, 64px);
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
  }
  .header__container > button:hover {
    border-color: #0af;
    background: #0af;
  }
}
.header__container > button svg:first-child {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: opacity 0.2s, transform 0.2s;
}
.header__container > button svg:last-child {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
}
.header__container > button.is-open svg:first-child {
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}
.header__container > button.is-open svg:last-child {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  display: block;
}
.header__container > button > svg:first-child {
  width: 24px;
  height: 24px;
}
@media screen and (min-width: 1024px) {
  .header__container > button > svg:first-child {
    width: clamp(17.067px, 1.6666666667vw, 32px);
    height: clamp(17.067px, 1.6666666667vw, 32px);
  }
}
.header__container > button > svg:last-child {
  display: none;
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1024px) {
  .header__container > button > svg:last-child {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}

.footer {
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .footer {
    padding-inline: 24px;
    padding-bottom: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .footer {
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
    padding-bottom: clamp(7.11px, 0.6944444444vw, 13.33px);
  }
}
.footer__container {
  background: #0d1719;
  padding: 20px 10px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media screen and (min-width: 768px) {
  .footer__container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 46px 24px;
  }
}
@media screen and (min-width: 1024px) {
  .footer__container {
    padding-block: clamp(27.66px, 2.73125vw, 52.44px);
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
  }
}
.footer__container > ul {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
}
@media screen and (min-width: 1024px) {
  .footer__container > ul {
    gap: clamp(17.067px, 1.6666666667vw, 32px);
  }
}
.footer__container > ul > li:first-child > svg {
  width: 108.716px;
  height: 28.792px;
}
@media screen and (min-width: 1024px) {
  .footer__container > ul > li:first-child > svg {
    width: clamp(116.37px, 11.3642361111vw, 218.194px);
    height: clamp(30.819px, 3.0096527778vw, 57.786px);
  }
}
.footer__container > ul > li > svg {
  width: 85.503px;
  height: 22.86px;
  fill: #fff;
}
@media screen and (min-width: 1024px) {
  .footer__container > ul > li > svg {
    width: clamp(91.523px, 8.9377777778vw, 171.605px);
    height: clamp(24.469px, 2.3895833333vw, 45.88px);
  }
}
.footer__container > ul > li:last-child > svg {
  width: 106.478px;
  height: 29.373px;
}
@media screen and (min-width: 1024px) {
  .footer__container > ul > li:last-child > svg {
    width: clamp(113.974px, 11.1302777778vw, 213.702px);
    height: clamp(31.441px, 3.0703472222vw, 58.951px);
  }
}
.footer__container > p {
  color: #fff;
  font-family: "Gilroy";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
@media screen and (min-width: 1024px) {
  .footer__container > p {
    font-size: clamp(12.8px, 1.25vw, 24px);
  }
}

.hero {
  max-width: 1920px;
  margin-inline: auto;
  padding: 80px 10px 0;
}
@media screen and (min-width: 768px) {
  .hero {
    padding: 80px 24px 0;
  }
}
@media screen and (min-width: 1024px) {
  .hero {
    padding-top: clamp(64.04px, 5.9722222222vw, 111.33px);
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.hero__container {
  height: 596px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  border-radius: 24px;
}
@media screen and (min-width: 1024px) {
  .hero__container {
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
    height: clamp(504.89px, 49.3055555556vw, 946.67px);
  }
}
.hero__container > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 38px;
  margin: 16px;
}
@media screen and (min-width: 1024px) {
  .hero__container > div {
    gap: clamp(27.022px, 2.6388888889vw, 50.667px);
    margin: clamp(26.311px, 2.5694444444vw, 49.333px);
    width: clamp(467.911px, 45.6944444444vw, 877.333px);
  }
}
.hero__container > div > h1 {
  color: #fff;
  font-family: "Gilroy";
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .hero__container > div > h1 {
    font-size: clamp(72.533px, 7.0833333333vw, 136px);
  }
}
.hero__container > div > p {
  padding: 24px;
  color: #fff;
  font-family: "Gilroy";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 148%;
  border-radius: 24px;
  background: #0af;
}
@media screen and (min-width: 1024px) {
  .hero__container > div > p {
    font-size: clamp(12.8px, 1.25vw, 24px);
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
    padding: clamp(32px, 3.0555555556vw, 58.667px);
  }
}

#gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
#gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#gallery-lightbox > div:first-child {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
#gallery-lightbox.is-open > div:first-child {
  opacity: 1;
}
#gallery-lightbox.is-open > div:last-child {
  transform: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #gallery-lightbox {
    transition: none;
  }
  #gallery-lightbox > div:first-child {
    transition: none;
  }
  #gallery-lightbox > div:last-child {
    transition: none;
    transform: none;
    opacity: 1;
  }
}
#gallery-lightbox > div:last-child {
  position: relative;
  width: min(1200px, 96vw);
  height: min(86vh, 900px);
  margin: 7vh auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.34s ease;
  will-change: transform, opacity;
}
#gallery-lightbox > div:last-child > button {
  position: absolute;
  top: -48px;
  right: 0;
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: #0af;
  border: 1px solid #0af;
  transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 1024px) {
  #gallery-lightbox > div:last-child > button {
    width: clamp(34.133px, 3.3333333333vw, 64px);
    height: clamp(34.133px, 3.3333333333vw, 64px);
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
  }
  #gallery-lightbox > div:last-child > button:hover {
    border-color: #008ce1;
    background: #008ce1;
  }
}
#gallery-lightbox > div:last-child > button > svg:last-child {
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1024px) {
  #gallery-lightbox > div:last-child > button > svg:last-child {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}
#gallery-lightbox > div:last-child > div:first-child {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
}
#gallery-lightbox > div:last-child > div:first-child > img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  -o-object-fit: contain;
  object-fit: contain;
}
#gallery-lightbox > div:last-child > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#gallery-lightbox > div:last-child > div:last-child > div:first-child {
  display: flex;
  align-items: center;
  gap: 20px;
}
#gallery-lightbox > div:last-child > div:last-child > div:first-child > button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  border-radius: 44px;
  background: #0af;
  border: 1px solid #0af;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
#gallery-lightbox
  > div:last-child
  > div:last-child
  > div:first-child
  > button:last-child {
  transform: rotate(-180deg);
}
@media screen and (min-width: 1024px) {
  #gallery-lightbox
    > div:last-child
    > div:last-child
    > div:first-child
    > button {
    width: clamp(45.511px, 4.4444444444vw, 85.333px);
    height: clamp(45.511px, 4.4444444444vw, 85.333px);
    border-radius: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
  #gallery-lightbox
    > div:last-child
    > div:last-child
    > div:first-child
    > button:hover {
    border-color: #008ce1;
    background: #008ce1;
  }
}
#gallery-lightbox
  > div:last-child
  > div:last-child
  > div:first-child
  > button
  > svg {
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1024px) {
  #gallery-lightbox
    > div:last-child
    > div:last-child
    > div:first-child
    > button
    > svg {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}
#gallery-lightbox > div:last-child > div:last-child > div:first-child > div {
  display: flex;
  gap: 4px;
}
#gallery-lightbox
  > div:last-child
  > div:last-child
  > div:first-child
  > div
  > img {
  width: 48px !important;
  height: 48px !important;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0.5;
  transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 768px) {
  #gallery-lightbox
    > div:last-child
    > div:last-child
    > div:first-child
    > div
    > img {
    width: 96px !important;
    height: 96px !important;
  }
}
#gallery-lightbox
  > div:last-child
  > div:last-child
  > div:first-child
  > div
  > img.current {
  opacity: 1;
  outline: 1px solid #0af;
}
#gallery-lightbox > div:last-child > div:last-child > div:last-child > span {
  color: #fff;
  font-family: "Gilroy";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 148%;
}
@media screen and (min-width: 1024px) {
  #gallery-lightbox > div:last-child > div:last-child > div:last-child > span {
    font-size: clamp(12.8px, 1.25vw, 24px);
  }
}

#video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
#video-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#video-lightbox.is-open .vlb__backdrop {
  opacity: 1;
}
#video-lightbox.is-open .vlb__dialog {
  transform: none;
  opacity: 1;
}
#video-lightbox > div:first-child {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
#video-lightbox > div:last-child {
  position: relative;
  width: min(1100px, 96vw);
  height: min(80vh, 820px);
  margin: 8vh auto;
  display: grid;
  place-items: center;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.34s ease;
}
#video-lightbox > div:last-child > button {
  position: absolute;
  top: -48px;
  right: 0;
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: #0af;
  border: 1px solid #0af;
  transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 1024px) {
  #video-lightbox > div:last-child > button {
    width: clamp(34.133px, 3.3333333333vw, 64px);
    height: clamp(34.133px, 3.3333333333vw, 64px);
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
  }
  #video-lightbox > div:last-child > button:hover {
    border-color: #008ce1;
    background: #008ce1;
  }
}
#video-lightbox > div:last-child > button > svg:last-child {
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1024px) {
  #video-lightbox > div:last-child > button > svg:last-child {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}
#video-lightbox > div:last-child > div > video {
  max-width: 100%;
  max-height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  #video-lightbox,
  #video-lightbox .vlb__backdrop,
  #video-lightbox .vlb__dialog {
    transition: none;
  }
}
.is-hidden {
  opacity: 0;
  visibility: hidden;
}

#global-decor {
  pointer-events: none;
}

.decor-image {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
}

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 24px), 0);
  will-change: transform, opacity;
}

#modal-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
#modal-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#modal-menu > ul {
  padding: 140px 34px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  max-width: 360px;
  width: min(90vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.34s ease;
}
#modal-menu.is-open > ul {
  transform: none;
  opacity: 1;
}
#modal-menu > ul > li > button {
  background: transparent;
  border: 0;
  color: #090915;
  font-family: "Gilroy";
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
#modal-menu > ul > li > button:hover {
  color: #0af;
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  #modal-menu,
  #modal-menu > ul {
    transition: none;
  }
}
.restoration {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  padding-block: 105px;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .restoration {
    padding-block: 150px;
    padding-inline: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .restoration {
    padding-block: clamp(184.89px, 18.0555555556vw, 346.67px);
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.restoration > div:first-child {
  background: url(../images/restoration.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -10px;
  left: 0;
  z-index: -1;
  width: 671.178px;
  height: 422px;
}
@media screen and (min-width: 768px) {
  .restoration > div:first-child {
    width: 768px;
    height: 482.876px;
  }
}
@media screen and (min-width: 1024px) {
  .restoration > div:first-child {
    width: clamp(825.973px, 80.6614583333vw, 1548.7px);
    height: clamp(519.327px, 50.7154861111vw, 973.738px);
  }
}
.restoration > div:last-child {
  background: url(../images/reconstruction.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -285px;
  right: 0;
  width: 663.226px;
  height: 417px;
  z-index: -1;
}
@media screen and (min-width: 1024px) {
  .restoration > div:last-child {
    width: clamp(825.973px, 80.6614583333vw, 1548.7px);
    height: clamp(519.327px, 50.7154861111vw, 973.738px);
    bottom: clamp(-613.34px, -30.5555555556vw, -289.78px);
  }
}
.restoration__container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media screen and (min-width: 768px) {
  .restoration__container {
    gap: 58px;
  }
}
@media screen and (min-width: 1024px) {
  .restoration__container {
    gap: clamp(33.52px, 3.4722222222vw, 85.33px);
  }
}
.restoration__container--head {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media screen and (min-width: 768px) {
  .restoration__container--head {
    flex-direction: row;
    gap: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .restoration__container--head {
    gap: clamp(12.09px, 1.1805555556vw, 22.67px);
  }
}
.restoration__container--head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media screen and (min-width: 768px) {
  .restoration__container--head > div:first-child {
    width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .restoration__container--head > div:first-child {
    gap: clamp(17.778px, 1.7361111111vw, 33.333px);
  }
}
.restoration__container--head > div:first-child > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 55px;
  background: #0af;
  color: #fff;
  font-family: "e-Ukraine";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .restoration__container--head > div:first-child > span {
    width: clamp(31.289px, 3.0555555556vw, 58.667px);
    height: clamp(31.289px, 3.0555555556vw, 58.667px);
    font-size: clamp(11.378px, 1.1111111111vw, 21.333px);
    border-radius: clamp(39.111px, 3.8194444444vw, 73.333px);
  }
}
.restoration__container--head > div:first-child > h2 {
  color: #090915;
  font-family: "Gilroy";
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .restoration__container--head > div:first-child > h2 {
    font-size: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
}
@media screen and (min-width: 768px) {
  .restoration__container--head > div:last-child {
    width: 50%;
  }
}
.restoration__container--head > div:last-child > p {
  color: #090915;
  font-family: "Gilroy";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 148%;
}
@media screen and (min-width: 1024px) {
  .restoration__container--head > div:last-child > p {
    font-size: clamp(12.8px, 1.25vw, 24px);
  }
}
.restoration__container--body {
  position: relative;
}
.restoration__container--body > ul {
  list-style: none;
  display: flex;
  gap: 10px;
  touch-action: pan-y;
  cursor: grab;
  height: 540px;
  will-change: transform;
}
.restoration__container--body > ul.is-dragging {
  cursor: grabbing;
}
@media screen and (min-width: 768px) {
  .restoration__container--body > ul {
    gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .restoration__container--body > ul {
    height: clamp(504.889px, 49.3055555556vw, 946.667px);
    gap: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.restoration__container--body > ul > li {
  min-width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  flex: 0 0 100%;
}
.restoration__container--body > ul > li > img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 24px;
}
.restoration__container--body > div.pagination {
  display: flex;
  gap: 4px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1024px) {
  .restoration__container--body > div.pagination {
    gap: clamp(2.844px, 0.2777777778vw, 5.333px);
    bottom: clamp(14.22px, 1.3888888889vw, 26.67px);
  }
}
.restoration__container--body > div.pagination > span {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.55);
  transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 1024px) {
  .restoration__container--body > div.pagination > span {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}
.restoration__container--body > div.pagination > span.active {
  background-color: #0af;
}
.restoration__container--body > div.buttons {
  position: absolute;
  bottom: 46px;
  right: 20px;
  display: flex;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  .restoration__container--body > div.buttons {
    right: 44px;
    bottom: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .restoration__container--body > div.buttons {
    bottom: clamp(14.22px, 1.3888888889vw, 26.67px);
    right: clamp(40.53px, 3.9583333333vw, 76px);
  }
}
.restoration__container--body > div.buttons > button:last-child {
  transform: rotate(-180deg);
}
.restoration__container--body > div.buttons > button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  border-radius: 44px;
  background: #0af;
  border: 1px solid #0af;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
.restoration__container--body > div.buttons > button:disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media screen and (min-width: 1024px) {
  .restoration__container--body > div.buttons > button {
    width: clamp(45.511px, 4.4444444444vw, 85.333px);
    height: clamp(45.511px, 4.4444444444vw, 85.333px);
    border-radius: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
  .restoration__container--body > div.buttons > button:hover {
    border-color: #008ce1;
    background: #008ce1;
  }
}
.restoration__container--body > div.buttons > button > svg {
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1024px) {
  .restoration__container--body > div.buttons > button > svg {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}

.reconstruction {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .reconstruction {
    padding-inline: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .reconstruction {
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.reconstruction__container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media screen and (min-width: 768px) {
  .reconstruction__container {
    gap: 58px;
  }
}
@media screen and (min-width: 1024px) {
  .reconstruction__container {
    gap: clamp(33.52px, 3.4722222222vw, 85.33px);
  }
}
.reconstruction__container--head {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media screen and (min-width: 768px) {
  .reconstruction__container--head {
    flex-direction: row;
    gap: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--head {
    gap: clamp(12.09px, 1.1805555556vw, 22.67px);
  }
}
.reconstruction__container--head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media screen and (min-width: 768px) {
  .reconstruction__container--head > div:first-child {
    width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--head > div:first-child {
    gap: clamp(17.778px, 1.7361111111vw, 33.333px);
  }
}
.reconstruction__container--head > div:first-child > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 55px;
  background: #0af;
  color: #fff;
  font-family: "e-Ukraine";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--head > div:first-child > span {
    width: clamp(31.289px, 3.0555555556vw, 58.667px);
    height: clamp(31.289px, 3.0555555556vw, 58.667px);
    font-size: clamp(11.378px, 1.1111111111vw, 21.333px);
    border-radius: clamp(39.111px, 3.8194444444vw, 73.333px);
  }
}
.reconstruction__container--head > div:first-child > h2 {
  color: #090915;
  font-family: "Gilroy";
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--head > div:first-child > h2 {
    font-size: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
}
.reconstruction__container--head > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media screen and (min-width: 768px) {
  .reconstruction__container--head > div:last-child {
    width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--head > div:last-child {
    gap: clamp(17.778px, 1.7361111111vw, 33.333px);
  }
}
.reconstruction__container--head > div:last-child > h3 {
  color: #090915;
  font-family: "Gilroy";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 148%;
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--head > div:last-child > h3 {
    font-size: clamp(14.933px, 1.4583333333vw, 28px);
  }
}
.reconstruction__container--head > div:last-child > p {
  color: #090915;
  font-family: "Gilroy";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 148%;
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--head > div:last-child > p {
    font-size: clamp(12.8px, 1.25vw, 24px);
  }
}
.reconstruction__container--body {
  position: relative;
}
.reconstruction__container--body > ul {
  list-style: none;
  display: flex;
  gap: 10px;
  touch-action: pan-y;
  cursor: grab;
  height: 540px;
  will-change: transform;
}
.reconstruction__container--body > ul.is-dragging {
  cursor: grabbing;
}
@media screen and (min-width: 768px) {
  .reconstruction__container--body > ul {
    gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--body > ul {
    height: clamp(504.889px, 49.3055555556vw, 946.667px);
    gap: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.reconstruction__container--body > ul > li {
  min-width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  flex: 0 0 100%;
}
.reconstruction__container--body > ul > li > img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 24px;
}
.reconstruction__container--body > div.pagination {
  display: flex;
  gap: 4px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--body > div.pagination {
    gap: clamp(2.844px, 0.2777777778vw, 5.333px);
    bottom: clamp(14.22px, 1.3888888889vw, 26.67px);
  }
}
.reconstruction__container--body > div.pagination > span {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.55);
  transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--body > div.pagination > span {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}
.reconstruction__container--body > div.pagination > span.active {
  background-color: #0af;
}
.reconstruction__container--body > div.buttons {
  position: absolute;
  bottom: 46px;
  right: 20px;
  display: flex;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  .reconstruction__container--body > div.buttons {
    right: 44px;
    bottom: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--body > div.buttons {
    bottom: clamp(14.22px, 1.3888888889vw, 26.67px);
    right: clamp(40.53px, 3.9583333333vw, 76px);
  }
}
.reconstruction__container--body > div.buttons > button:last-child {
  transform: rotate(-180deg);
}
.reconstruction__container--body > div.buttons > button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  border-radius: 44px;
  background: #0af;
  border: 1px solid #0af;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
.reconstruction__container--body > div.buttons > button:disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--body > div.buttons > button {
    width: clamp(45.511px, 4.4444444444vw, 85.333px);
    height: clamp(45.511px, 4.4444444444vw, 85.333px);
    border-radius: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
  .reconstruction__container--body > div.buttons > button:hover {
    border-color: #008ce1;
    background: #008ce1;
  }
}
.reconstruction__container--body > div.buttons > button > svg {
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1024px) {
  .reconstruction__container--body > div.buttons > button > svg {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}

.waste {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .waste {
    padding-inline: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .waste {
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.waste__container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media screen and (min-width: 768px) {
  .waste__container {
    gap: 58px;
  }
}
@media screen and (min-width: 1024px) {
  .waste__container {
    gap: clamp(33.52px, 3.4722222222vw, 85.33px);
  }
}
.waste__container--head {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media screen and (min-width: 768px) {
  .waste__container--head {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .waste__container--head {
    gap: clamp(17.778px, 1.7361111111vw, 33.333px);
    width: 50%;
  }
}
.waste__container--head > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 55px;
  background: #0af;
  color: #fff;
  font-family: "e-Ukraine";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .waste__container--head > span {
    width: clamp(31.289px, 3.0555555556vw, 58.667px);
    height: clamp(31.289px, 3.0555555556vw, 58.667px);
    font-size: clamp(11.378px, 1.1111111111vw, 21.333px);
    border-radius: clamp(39.111px, 3.8194444444vw, 73.333px);
  }
}
.waste__container--head > h2 {
  color: #090915;
  font-family: "Gilroy";
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .waste__container--head > h2 {
    font-size: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
}
.waste__container--body {
  position: relative;
}
.waste__container--body > ul {
  list-style: none;
  display: flex;
  gap: 10px;
  touch-action: pan-y;
  cursor: grab;
  height: 540px;
  will-change: transform;
}
.waste__container--body > ul.is-dragging {
  cursor: grabbing;
}
@media screen and (min-width: 768px) {
  .waste__container--body > ul {
    gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .waste__container--body > ul {
    height: clamp(504.889px, 49.3055555556vw, 946.667px);
    gap: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.waste__container--body > ul > li {
  min-width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  flex: 0 0 100%;
}
.waste__container--body > ul > li > img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 24px;
}
.waste__container--body > div.pagination {
  display: flex;
  gap: 4px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1024px) {
  .waste__container--body > div.pagination {
    gap: clamp(2.844px, 0.2777777778vw, 5.333px);
    bottom: clamp(14.22px, 1.3888888889vw, 26.67px);
  }
}
.waste__container--body > div.pagination > span {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.55);
  transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 1024px) {
  .waste__container--body > div.pagination > span {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}
.waste__container--body > div.pagination > span.active {
  background-color: #0af;
}
.waste__container--body > div.buttons {
  position: absolute;
  bottom: 46px;
  right: 20px;
  display: flex;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  .waste__container--body > div.buttons {
    right: 44px;
    bottom: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .waste__container--body > div.buttons {
    bottom: clamp(14.22px, 1.3888888889vw, 26.67px);
    right: clamp(40.53px, 3.9583333333vw, 76px);
  }
}
.waste__container--body > div.buttons > button:last-child {
  transform: rotate(-180deg);
}
.waste__container--body > div.buttons > button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  border-radius: 44px;
  background: #0af;
  border: 1px solid #0af;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
.waste__container--body > div.buttons > button:disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media screen and (min-width: 1024px) {
  .waste__container--body > div.buttons > button {
    width: clamp(45.511px, 4.4444444444vw, 85.333px);
    height: clamp(45.511px, 4.4444444444vw, 85.333px);
    border-radius: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
  .waste__container--body > div.buttons > button:hover {
    border-color: #008ce1;
    background: #008ce1;
  }
}
.waste__container--body > div.buttons > button > svg {
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1024px) {
  .waste__container--body > div.buttons > button > svg {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}

.water {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .water {
    padding-inline: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .water {
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.water > div:first-child {
  background: url(../images/reconstruction.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -118px;
  right: 0;
  z-index: -1;
  width: 663.226px;
  height: 417px;
}
@media screen and (min-width: 768px) {
  .water > div:first-child {
    top: -150px;
  }
}
@media screen and (min-width: 1024px) {
  .water > div:first-child {
    width: clamp(825.973px, 80.6614583333vw, 1548.7px);
    height: clamp(519.327px, 50.7154861111vw, 973.738px);
    top: clamp(-338.67px, -17.6388888889vw, -180.62px);
  }
}
.water__container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media screen and (min-width: 768px) {
  .water__container {
    gap: 58px;
  }
}
@media screen and (min-width: 1024px) {
  .water__container {
    gap: clamp(33.52px, 3.4722222222vw, 85.33px);
  }
}
.water__container--head {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media screen and (min-width: 768px) {
  .water__container--head {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .water__container--head {
    gap: clamp(17.778px, 1.7361111111vw, 33.333px);
    width: 50%;
  }
}
.water__container--head > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 55px;
  background: #0af;
  color: #fff;
  font-family: "e-Ukraine";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .water__container--head > span {
    width: clamp(31.289px, 3.0555555556vw, 58.667px);
    height: clamp(31.289px, 3.0555555556vw, 58.667px);
    font-size: clamp(11.378px, 1.1111111111vw, 21.333px);
    border-radius: clamp(39.111px, 3.8194444444vw, 73.333px);
  }
}
.water__container--head > h2 {
  color: #090915;
  font-family: "Gilroy";
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .water__container--head > h2 {
    font-size: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
}
.water__container--body {
  position: relative;
}
.water__container--body > ul {
  list-style: none;
  display: flex;
  gap: 10px;
  touch-action: pan-y;
  cursor: grab;
  height: 540px;
  will-change: transform;
}
.water__container--body > ul.is-dragging {
  cursor: grabbing;
}
@media screen and (min-width: 768px) {
  .water__container--body > ul {
    gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .water__container--body > ul {
    height: clamp(504.889px, 49.3055555556vw, 946.667px);
    gap: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.water__container--body > ul > li {
  min-width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  flex: 0 0 100%;
}
.water__container--body > ul > li > img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 24px;
}
.water__container--body > div.pagination {
  display: flex;
  gap: 4px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1024px) {
  .water__container--body > div.pagination {
    gap: clamp(2.844px, 0.2777777778vw, 5.333px);
    bottom: clamp(14.22px, 1.3888888889vw, 26.67px);
  }
}
.water__container--body > div.pagination > span {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.55);
  transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 1024px) {
  .water__container--body > div.pagination > span {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}
.water__container--body > div.pagination > span.active {
  background-color: #0af;
}
.water__container--body > div.buttons {
  position: absolute;
  bottom: 46px;
  right: 20px;
  display: flex;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  .water__container--body > div.buttons {
    right: 44px;
    bottom: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .water__container--body > div.buttons {
    bottom: clamp(14.22px, 1.3888888889vw, 26.67px);
    right: clamp(40.53px, 3.9583333333vw, 76px);
  }
}
.water__container--body > div.buttons > button:last-child {
  transform: rotate(-180deg);
}
.water__container--body > div.buttons > button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  border-radius: 44px;
  background: #0af;
  border: 1px solid #0af;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
.water__container--body > div.buttons > button:disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media screen and (min-width: 1024px) {
  .water__container--body > div.buttons > button {
    width: clamp(45.511px, 4.4444444444vw, 85.333px);
    height: clamp(45.511px, 4.4444444444vw, 85.333px);
    border-radius: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
  .water__container--body > div.buttons > button:hover {
    border-color: #008ce1;
    background: #008ce1;
  }
}
.water__container--body > div.buttons > button > svg {
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1024px) {
  .water__container--body > div.buttons > button > svg {
    width: clamp(11.378px, 1.1111111111vw, 21.333px);
    height: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}

.innovation {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  padding-block: 105px;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .innovation {
    padding-block: 150px;
    padding-inline: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .innovation {
    padding-block: clamp(106.67px, 10.4166666667vw, 200px);
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.innovation__container {
  padding: 68px 10px;
  border-radius: 24px;
  background: #0af;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media screen and (min-width: 768px) {
  .innovation__container {
    padding: 72px 20px;
    gap: 68px;
  }
}
@media screen and (min-width: 1024px) {
  .innovation__container {
    padding-block: clamp(71.11px, 6.9444444444vw, 133.33px);
    padding-inline: clamp(40.53px, 3.9583333333vw, 76px);
    gap: clamp(35.56px, 3.4722222222vw, 66.67px);
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
  }
}
.innovation__container > h2 {
  color: #fff;
  font-family: "Gilroy";
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  font-size: clamp(31.289px, 3.0555555556vw, 58.667px);
}
.innovation__container > ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .innovation__container > ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 1024px) {
  .innovation__container > ul {
    gap: clamp(12.09px, 1.1805555556vw, 22.67px);
  }
}
.innovation__container > ul > li {
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .innovation__container > ul > li {
    width: calc(50% - 8px);
  }
  .innovation__container > ul > li:last-child {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .innovation__container > ul > li {
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
    padding: clamp(19.911px, 1.9444444444vw, 37.333px);
    gap: clamp(11.378px, 1.1111111111vw, 21.333px);
    width: 32%;
  }
  .innovation__container > ul > li:last-child {
    width: 66%;
  }
}
.innovation__container > ul > li > svg {
  width: 64px;
  height: 64px;
}
@media screen and (min-width: 1024px) {
  .innovation__container > ul > li > svg {
    width: clamp(45.511px, 4.4444444444vw, 85.333px);
    height: clamp(45.511px, 4.4444444444vw, 85.333px);
  }
}
.innovation__container > ul > li > h3 {
  color: #090915;
  font-family: "Gilroy";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  word-break: break-word;
}
@media screen and (min-width: 1024px) {
  .innovation__container > ul > li > h3 {
    font-size: clamp(19.911px, 1.9444444444vw, 37.333px);
  }
}
.innovation__container > ul > li > p {
  color: #090915;
  font-family: "Gilroy";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 148%;
}
@media screen and (min-width: 1024px) {
  .innovation__container > ul > li > p {
    font-size: clamp(12.8px, 1.25vw, 24px);
  }
}

.monitoring {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .monitoring {
    padding-inline: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .monitoring {
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.monitoring__container {
  padding: 156px 10px;
  border-radius: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  gap: 44px;
  position: relative;
  overflow: hidden;
}
.monitoring__container > * {
  position: relative;
  z-index: 1;
}
.monitoring__container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--next-bg, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  border-radius: inherit;
}
.monitoring__container.is-fading::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .monitoring__container::after {
    transition: none;
  }
  .monitoring__container.is-fading::after {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .monitoring__container {
    padding: 222px 68px;
  }
}
@media screen and (min-width: 1024px) {
  .monitoring__container {
    padding-block: clamp(88.18px, 8.6111111111vw, 165.33px);
    padding-inline: clamp(83.91px, 8.1944444444vw, 157.33px);
    gap: clamp(21.33px, 2.0833333333vw, 40px);
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
  }
}
.monitoring__container > h2 {
  color: #fff;
  font-family: "Gilroy";
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .monitoring__container > h2 {
    font-size: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
}
.monitoring__container > ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 1024px) {
  .monitoring__container > ul {
    gap: clamp(5.69px, 0.5555555556vw, 10.667px);
  }
}
.monitoring__container > ul > li {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media screen and (min-width: 1024px) {
  .monitoring__container > ul > li {
    gap: clamp(11.378px, 1.1111111111vw, 21.333px);
  }
}
.monitoring__container > ul > li > svg {
  min-width: 18px;
  width: 18px;
  height: 18px;
}
@media screen and (min-width: 1024px) {
  .monitoring__container > ul > li > svg {
    min-width: clamp(12.8px, 1.25vw, 24px);
    width: clamp(12.8px, 1.25vw, 24px);
    height: clamp(12.8px, 1.25vw, 24px);
  }
}
.monitoring__container > ul > li > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media screen and (min-width: 1024px) {
  .monitoring__container > ul > li > div {
    gap: clamp(2.844px, 0.2777777778vw, 5.333px);
  }
}
.monitoring__container > ul > li > div > h3 {
  color: #fff;
  font-family: "Gilroy";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 148%;
}
@media screen and (min-width: 1024px) {
  .monitoring__container > ul > li > div > h3 {
    font-size: clamp(12.8px, 1.25vw, 24px);
  }
}
.monitoring__container > ul > li > div > p {
  color: #fff;
  font-family: "Gilroy";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 148%;
}
@media screen and (min-width: 1024px) {
  .monitoring__container > ul > li > div > p {
    font-size: clamp(12.8px, 1.25vw, 24px);
  }
}

.camera {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  padding-block: 105px;
}
@media screen and (min-width: 768px) {
  .camera {
    padding-block: 150px 50px;
    padding-inline: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .camera {
    padding-block: clamp(184.89px, 18.0555555556vw, 346.67px);
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
  }
}
.camera > div:first-child {
  background: url(../images/monitoring.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -132px;
  right: -114px;
  z-index: -1;
  width: 885.101px;
  height: 348.598px;
}
@media screen and (min-width: 768px) {
  .camera > div:first-child {
    width: 1109.557px;
    height: 437px;
    top: -138px;
    right: -137px;
  }
}
@media screen and (min-width: 1024px) {
  .camera > div:first-child {
    width: clamp(1494.983px, 145.9944444444vw, 2803.093px);
    height: clamp(588.8px, 57.5vw, 1104px);
  }
}
.camera__container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 124px 20px 0;
  position: relative;
  background-color: #fff;
  border-radius: 24px;
}
@media screen and (min-width: 768px) {
  .camera__container {
    padding: 124px 68px 0;
  }
}
@media screen and (min-width: 1024px) {
  .camera__container {
    flex-direction: row;
    align-items: center;
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
    padding-block: 0;
    padding-left: clamp(81.78px, 7.9861111111vw, 153.33px);
    padding-right: 0;
  }
}
.camera__container > h2 {
  color: #090915;
  font-family: "Gilroy";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  margin-right: auto;
  max-width: 351px;
}
@media screen and (min-width: 1024px) {
  .camera__container > h2 {
    font-size: clamp(31.289px, 3.0555555556vw, 58.667px);
    max-width: clamp(480px, 46.875vw, 900px);
  }
}
.camera__container > img {
  width: 368px;
  height: 304px;
  position: relative;
  right: -20px;
}
@media screen and (min-width: 768px) {
  .camera__container > img {
    width: 438px;
    height: 363px;
    right: -68px;
    bottom: -30px;
    top: -35px;
  }
}
@media screen and (min-width: 1024px) {
  .camera__container > img {
    width: clamp(465.067px, 45.4166666667vw, 872px);
    height: clamp(384.711px, 37.5694444444vw, 721.333px);
    right: 0;
    top: 0;
    bottom: 0;
  }
}

.plans,
.next-plans {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  padding-block: 105px;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .plans,
  .next-plans {
    padding-block: 150px;
    padding-inline: 24px;
  }
  .plans.smart,
  .next-plans.smart {
    padding-bottom: 50px;
  }
}
@media screen and (min-width: 1024px) {
  .plans,
  .next-plans {
    padding-block: clamp(184.89px, 18.0555555556vw, 346.67px);
    padding-inline: clamp(108.09px, 10.5555555556vw, 202.67px);
  }
  .plans.smart,
  .next-plans.smart {
    padding-top: clamp(106.67px, 10.4166666667vw, 200px);
    padding-bottom: 0;
  }
  .plans.next-plans2,
  .next-plans.next-plans2 {
    padding-block: clamp(71.11px, 6.9444444444vw, 133.33px);
  }
}
.plans__container,
.next-plans__container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media screen and (min-width: 768px) {
  .plans__container,
  .next-plans__container {
    gap: 58px;
  }
}
@media screen and (min-width: 1024px) {
  .plans__container,
  .next-plans__container {
    gap: clamp(35.556px, 3.4722222222vw, 66.667px);
  }
}
.plans__container > h2,
.next-plans__container > h2 {
  color: #090915;
  font-family: "Gilroy";
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .plans__container > h2,
  .next-plans__container > h2 {
    font-size: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
}
.plans__container > ul,
.next-plans__container > ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  .plans__container > ul,
  .next-plans__container > ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 1024px) {
  .plans__container > ul,
  .next-plans__container > ul {
    gap: clamp(12.089px, 1.1805555556vw, 22.667px);
  }
}
.plans__container > ul > li,
.next-plans__container > ul > li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.08);
}
@media screen and (min-width: 768px) {
  .plans__container > ul > li,
  .next-plans__container > ul > li {
    width: calc(50% - 4px);
  }
}
@media screen and (min-width: 1024px) {
  .plans__container > ul > li,
  .next-plans__container > ul > li {
    gap: clamp(5.69px, 0.5555555556vw, 10.667px);
    padding: clamp(17.067px, 1.6666666667vw, 32px);
    border-radius: clamp(8.533px, 0.8333333333vw, 16px);
    width: 32%;
  }
}
.plans__container > ul > li > svg,
.next-plans__container > ul > li > svg {
  width: 24px;
  min-width: 24px;
  height: 24px;
}
@media screen and (min-width: 1024px) {
  .plans__container > ul > li > svg,
  .next-plans__container > ul > li > svg {
    width: clamp(17.067px, 1.6666666667vw, 32px);
    min-width: clamp(17.067px, 1.6666666667vw, 32px);
    height: clamp(17.067px, 1.6666666667vw, 32px);
  }
}
.plans__container > ul > li > h3,
.next-plans__container > ul > li > h3 {
  color: #090915;
  font-family: "Gilroy";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 148%;
}
@media screen and (min-width: 1024px) {
  .plans__container > ul > li > h3,
  .next-plans__container > ul > li > h3 {
    font-size: clamp(12.8px, 1.25vw, 24px);
  }
}

.video {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  padding-top: 105px;
  padding-inline: 10px;
}
@media screen and (min-width: 768px) {
  .video {
    padding-inline: 24px;
    padding-top: 100px;
  }
}
@media screen and (min-width: 1024px) {
  .video {
    padding-inline: clamp(26.31px, 2.5694444444vw, 49.33px);
    padding-top: clamp(56.89px, 5.5555555556vw, 106.67px);
  }
}
.video__container {
  background: #0af;
  padding: 10px 10px 42px;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .video__container {
    padding: 20px 20px 64px;
  }
}
@media screen and (min-width: 1024px) {
  .video__container {
    padding-top: clamp(40.53px, 3.9583333333vw, 76px);
    padding-inline: clamp(40.53px, 3.9583333333vw, 76px);
    padding-bottom: clamp(81.07px, 7.9166666667vw, 152px);
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
  }
}
.video__container > div:last-child {
  position: relative;
  width: 100%;
  height: 100%;
}
.video__container > div:last-child > button {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: none;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease-in-out;
}
.video__container > div:last-child > button > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  border-radius: 44px;
  background: #0af;
  border: 1px solid #0af;
  opacity: 1;
}
@media screen and (min-width: 1024px) {
  .video__container > div:last-child > button > span {
    width: clamp(45.511px, 4.4444444444vw, 85.333px);
    height: clamp(45.511px, 4.4444444444vw, 85.333px);
    border-radius: clamp(31.289px, 3.0555555556vw, 58.667px);
  }
  .video__container > div:last-child > button > span:hover {
    border-color: #008ce1;
    background: #008ce1;
  }
}
.video__container > div:last-child > button > span > svg {
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1024px) {
  .video__container > div:last-child > button > span > svg {
    width: clamp(17.067px, 1.6666666667vw, 32px);
    height: clamp(17.067px, 1.6666666667vw, 32px);
  }
}
.video__container > div:last-child > button.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.video__container > div:last-child > video {
  width: 100%;
  height: 100%;
  border-radius: 24px;
}
@media screen and (min-width: 1024px) {
  .video__container > div:last-child > video {
    border-radius: clamp(17.067px, 1.6666666667vw, 32px);
  }
} /*# sourceMappingURL=index.css.map */