/* Homepage | .hero */

main>section:first-child {
  margin-top: 6.040vw
    /*88px*/
  ;
}

.hero {
  padding: 4.873vw
    /*71px*/
    0 3.432vw
    /*50px*/
    0;
  text-align: center;
}

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.hero .text {
  color: var(--black-70, rgba(0, 0, 0, 0.70));
  margin-top: 2.128vw
    /*31px*/
  ;
  max-width: 43.377vw
    /*632px*/
  ;
}

.hero .button-container {
  margin-top: 2.883vw
    /*42px*/
  ;
  gap: 1.098vw
    /*16px*/
  ;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

.hero .title .multiple-img {
  margin-top: -0.618vw
    /*-9px*/
  ;
}

.multiple-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.multiple-img .img {
  display: block;
  height: 5.491vw
    /* 80px*/
  ;
  margin: 0 !important;
}

.multiple-img .img img {
  display: block;
  height: 100%;
}

.img.auto-slider {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--light-Green);
}

.auto-slider img {
  display: block;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.auto-slider img.-active {
  opacity: 1;
  pointer-events: auto;
}

.auto-slider img:not(:first-child) {
  position: absolute;
}

/* Homepage | partners-section */

.partners-section {
  padding: 5.491vw
    /*80px*/
    0 8.236vw
    /*120px*/
    0;
}

.partners-section .img {
  height: 3.844vw
    /*56px*/
  ;
  margin-right: 6.589vw
    /*96px*/
  ;
}

.partners-section .img img {
  display: block;
  height: 100%;
  display: block;
  width: auto;
}


/* Homepage | pinned-section */

.pinned-section .container {
  padding-top: 5.491vw
    /*80px*/
  ;
}

.pinned-section .container .title {
  margin-top: 1.647vw
    /*24px*/
  ;
}

.section-title .img {
  display: inline-flex;
  height: 4.942vw
    /*72px*/
  ;
  vertical-align: middle;
  margin-top: -0.686vw
    /*-10px*/
  ;
  width: auto !important;
}

.section-title .img img {
  display: block;
  height: 100%;
}

.section-title .img.-middle {
  height: 4.118vw
    /*60px*/
  ;
  margin-top: -0.206vw
    /*-3px*/
  ;
}

.section-title .img.-small {
  height: 3.844vw
    /*56px*/
  ;
  margin: -0.343vw
    /*-5px*/
    0 0 0.412vw
    /*6px*/
  ;
}

.pinned-section .pinned-slider__wrapper {
  padding: 1.098vw
    /*16px*/
    2.745vw
    /*40px*/
  ;
  pointer-events: auto;
}

.pinned-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* body.-has-banner .pinned-slider {
  padding-top: 120px;
}

body:not(.-has-banner) .pinned-slider {
  padding-top: 80px;
} */

.pinned-slider__card {
  width: 100%;
  transform-origin: top;
  pointer-events: none;
  /* margin: 4.393vw
    
  0;
  */
  /* transition: opacity 0.4s; */
  opacity: 0;
  pointer-events: none;
}

.pinned-slider__card .pinned-slider__card-wrapper {
  pointer-events: none;
}

.pin-spacer .pinned-slider__card {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s;
}

.pin-spacer .pinned-slider__card .pinned-slider__card-wrapper  {
  pointer-events: auto;
}

.pinned-slider__card .service-card .overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: var(--White, #FFF);
}

.pinned-slider__card .service-card {
  position: relative;
  z-index: 1;
}

.pinned-slider__card.-hidden {
  opacity: 0;
}

.pinned-slider__card-wrapper {
  pointer-events: auto;
  transform: translateY(100vh);
  max-height: 70vh;
}

.pinned-slider__card:not(:first-child) {
  position: absolute;
  left: 0;
}


/* .pinned-slider__card-wrapper {
  height: clamp(70vh, 41.181vw, 41.181vw);
} */

/* Homepage | industries-section */

.industries-section {
  padding: 13.727vw
    /*200px*/
    0 8.236vw
    /*120px*/
    0;
  overflow: hidden;
}

.industries-section .section-title {
  margin-top: 1.030vw
    /*15px*/
  ;
}

.industries-section .section-title+.text {
  margin-top: 2.128vw
    /*31px */
  ;
}

.industries-section .carousel-slider {
  margin-top: 2.883vw
    /*42px*/
  ;
  width: 100%;
  padding: 0 1.098vw
    /*16px*/
  ;
}

.carousel-slider .swiper-wrapper {
  padding: 2.745vw
    /*40px*/
    0;
}

.carousel-slider .swiper-pagination {
  margin: 2.745vw
    /*40px*/
    auto 0 auto;
}

.swiper-pagination {
  position: relative;
  border-radius: 2.745vw
    /*40px*/
  ;
  border: 1px solid var(--Light-grey-2, #D1DDE8);
  padding: 0.480vw
    /*7px*/
  ;
  gap: 0.412vw
    /*6px*/
  ;
  bottom: auto !important;
  left: auto !important;
  top: auto !important;
  display: flex;
  width: fit-content !important;
  justify-content: center;
  align-items: center;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 0.412vw
    /*6px*/
  ;
  height: 0.412vw
    /*6px*/
  ;
  border-radius: 50%;
  background: var(--Light-grey-2) !important;
  opacity: 1 !important;
  transition: background 0.4s;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--Black) !important;
}

.carousel-slider .swiper-slide {
  width: 21.963vw
    /*320px*/
  ;
}

.carousel-slider .swiper-slide .industry-card {
  transition: opacity 0.4s;
}

.carousel-slider .swiper-slide:not(.swiper-slide-visible) .industry-card {
  opacity: 0;
  pointer-events: none;
}

/* Homepage | expirience-section */

.expirience-section {
  padding: 5.491vw
    /*80px*/
    0 13.727vw
    /*200px*/
    0;
}

.expirience-section .section-title {
  margin-top: 1.304vw
    /*19px*/
  ;
}

.expirience-section .statistic-list {
  margin: 5.491vw
    /*80px*/
    0;
}

.statistic-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.098vw
    /*16px*/
  ;
}

.statistic-list .col {
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  gap: 1.098vw
    /*16px*/
  ;
}

.statistic-list .col.-animated .statistic-card {
  transition: margin 0.7s ease-out;
  margin: 0 !important;
}

.expirience-section .button {
  margin-top: 2.196vw
    /*32px*/
  ;
  width: fit-content;
}

/* Homepage | sticky-part-section */


.sticky-part-section {
  padding: 13.727vw
    /*200px*/
    0;
}

.sticky-part-section__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3.432vw
    /*50px*/
  ;
}

.sticky-part-section__fixed {
  position: sticky;
  top: 10.295vw
    /*150px*/
  ;
  width: fit-content;
}

.sticky-part-section__fixed .section-title {
  margin-top: 1.167vw
    /*17px*/
  ;
}

.sticky-part-section__fixed .text {
  margin-top: 1.990vw
    /*29px*/
  ;
  max-width: 32.944vw
    /*480px*/
  ;
}

.sticky-part-section__fixed .button {
  margin-top: 3.432vw
    /*50px*/
  ;
  width: fit-content;
}

.sticky-part-section__relative {
  width: 35.964vw
    /*524px*/
  ;
  min-width: 35.964vw
    /*524px*/
  ;
}

.sticky-part-section__relative .benefit-card+.benefit-card {
  margin-top: 4.393vw
    /*64px*/
  ;
}

.benefit-card .img {
  width: 5.491vw
    /*80px*/
  ;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

.benefit-card .img img {
  display: block;
  width: 100%;
  border-radius: 50%;
}

.benefit-card .title {
  margin-top: 2.196vw
    /*32px*/
  ;
}

.benefit-card .text {
  margin-top: 1.098vw
    /*16px*/
  ;
  max-width: 30.199vw
    /*440px*/
  ;
  color: var(--Black-70);
}


.sticky-part-section .button.-mob {
  display: none;
}

/* Homepage | background-video-section */

.background-video-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 1.098vw
    /*16px*/
  ;
  background: var(--Black, #000);
  overflow: hidden;
}

.background-video-wrapper .bg {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.background-video-wrapper .bg:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.80) 100%);
}

.background-video-wrapper .bg img,
.background-video-wrapper .bg video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background-video-wrapper.-static .bg video {
  opacity: 0;
}

.background-video-wrapper .bg video:not(.-full-loaded) {
  opacity: 0;
}

.background-video-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10.981vw
    /*160px*/
    64px 12.491vw
    /*182px*/
    64px;
}

.background-video-wrapper .title {
  margin-top: 1.030vw
    /*15px*/
  ;
  text-align: center;
  color: var(--White);
}

/* Homepage | customer-reviews-wrapper */

.customer-reviews-wrapper {
  padding: 6.589vw
    /*96px*/
    4.393vw
    /*64px*/
  ;
  border-radius: 1.098vw
    /*16px*/
  ;
  background: var(--Light-grey);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.customer-reviews-wrapper .section-title {
  margin-top: 1.647vw
    /*24px*/
  ;
}

.reviews-slider {
  margin-top: 5.491vw
    /*80px */
  ;
  width: 100%;
}

.review-card {
  padding: 2.745vw
    /*40px*/
  ;
  border-radius: 0.549vw
    /*8px*/
  ;
  background: var(--White, #FFF);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.reviews-slider .swiper-slide {
  height: auto;
  width: 49.417vw
    /*720px*/
  ;
}

.review-card .title {
  position: relative;
  padding-top: 3.569vw
    /*52px*/
  ;
  margin-bottom: 2.745vw
    /*40px*/
  ;
  text-align: left;
  color: var(--black-70, rgba(0, 0, 0, 0.70));
}

.review-card .title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.922vw
    /*28px*/
  ;
  height: 1.373vw
    /*20px*/
  ;
  background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyOCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNjQyNDYgMjBWMTUuODQ1MUg0LjMwMTY4QzYuNDM5NDggMTUuODQ1MSA3LjUwODM4IDE0Ljg4MjYgNy41MDgzOCAxMi45NTc3VjEwLjcwNDJINi4zMzUyQzQuNTEwMjQgMTAuNzA0MiAyLjk5ODE0IDEwLjIxMTMgMS43OTg4OCA5LjIyNTM1QzAuNTk5NjI3IDguMjM5NDQgMCA2Ljk5NTMxIDAgNS40OTI5NkMwIDMuODQ5NzcgMC41OTk2MjcgMi41MzUyMSAxLjc5ODg4IDEuNTQ5MjlDMi45OTgxNCAwLjUxNjQzMSA0LjUxMDI0IDAgNi4zMzUyIDBDOC4xNjAxNSAwIDkuNjQ2MTggMC41Mzk5MDYgMTAuNzkzMyAxLjYxOTcyQzExLjk5MjYgMi42NTI1OCAxMi41OTIyIDQuMDE0MDggMTIuNTkyMiA1LjcwNDIzVjEzLjAyODJDMTIuNTkyMiAxNy42NzYxIDEwLjAxMTIgMjAgNC44NDkxNiAyMEgxLjY0MjQ2Wk0xNy4wNTAzIDIwVjE1Ljg0NTFIMTkuNzA5NUMyMS44NDczIDE1Ljg0NTEgMjIuOTE2MiAxNC44ODI2IDIyLjkxNjIgMTIuOTU3N1YxMC43MDQySDIxLjc0M0MxOS45MTgxIDEwLjcwNDIgMTguNDA2IDEwLjIxMTMgMTcuMjA2NyA5LjIyNTM1QzE2LjAwNzQgOC4yMzk0NCAxNS40MDc4IDYuOTk1MzEgMTUuNDA3OCA1LjQ5Mjk2QzE1LjQwNzggMy44NDk3NyAxNi4wMDc0IDIuNTM1MjEgMTcuMjA2NyAxLjU0OTI5QzE4LjQwNiAwLjUxNjQzMSAxOS45MTgxIDAgMjEuNzQzIDBDMjMuNTY4IDAgMjUuMDU0IDAuNTM5OTA2IDI2LjIwMTEgMS42MTk3MkMyNy40MDA0IDIuNjUyNTggMjggNC4wMTQwOCAyOCA1LjcwNDIzVjEzLjAyODJDMjggMTcuNjc2MSAyNS40MTkgMjAgMjAuMjU3IDIwSDE3LjA1MDNaIiBmaWxsPSIjODM5NkE4Ii8+Cjwvc3ZnPgo=);
}

.reviews-slider .swiper-slide .review-card {
  height: 100%;
  transition: opacity 0.7s;
}

.reviews-slider .swiper-slide:not(.swiper-slide-active) .review-card {
  opacity: 0.4;
}

.review-card .logo {
  margin: auto 0 0 0;
  height: 3.844vw
    /*56px*/
  ;
}

.review-card .logo img {
  height: 100%;
  display: block;
}

.reviews-slider .swiper-pagination {
  margin: 2.745vw
    /*40px*/
    auto 0 auto;
}

.reviews-slider {
  position: relative;
}

.reviews-slider .swiper-wrapper {
  position: relative;
}

.reviews-slider .swiper-navigation {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.reviews-slider .swiper-navigation .navigation-button {
  position: absolute;
  top: 0;
  pointer-events: auto;
  cursor: pointer;
  height: 100%;
  width: calc(((100% - 49.417vw) / 2) + 4.393vw);
}

.reviews-slider .swiper-navigation .navigation-button.next {
  right: 0;
  cursor: url(../images/icons/slider-arrow-right.svg) 40 40, pointer;
  transform: translateX(4.393vw);
}

.reviews-slider .swiper-navigation .navigation-button.prev {
  left: 0;
  cursor: url(../images/icons/slider-arrow-left.svg) 40 40, pointer;
  transform: translateX(-4.393vw);
}


/* Homepage | news-section */

.news-section {
  padding: 13.727vw
    /*200px*/
    0 5.491vw
    /*80px */
    0;
}

.news-section__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.098vw;
}

.news-section__wrapper-left {
  position: sticky;
  top: 10.295vw
    /*150px*/
  ;
  width: 28.552vw
    /*416px*/
  ;
  min-width: 28.552vw
    /*416px*/
  ;
}

.news-section__wrapper-left .title {
  margin-top: 1.304vw
    /*19px*/
  ;
}

.news-section__wrapper-left .button {
  margin-top: 3.020vw
    /*44px*/
  ;
  width: fit-content;
}

.news-section__wrapper-right {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.745vw
    /*40px*/
    1.098vw
    /*16px*/
  ;
}

.news-section__wrapper-right .article-preview {
  grid-column: span 3;
}

.mobile-slider {
  display: none;
}

/* Homepage | upcoming-events */

.upcoming-events {
  margin: 4.118vw
    /*60px*/
    0 13.727vw
    /*200px*/
    0;
}

.upcoming-events .section-title {
  margin-top: 1.647vw
    /*24px*/
  ;
}

.upcoming-events .event-list {
  margin-top: 4.393vw
    /*64px*/
  ;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.098vw
    /*16px*/
  ;
  width: 100%;
}

.upcoming-events .event-list .event-card {
  grid-column: span 1;
}

.upcoming-events .button {
  margin-top: 4.393vw
    /*64px*/
  ;
}

/* Homepage | team-section */

.team-section {
  padding: 13.727vw
    /*200px*/
    0 13.727vw
    /*200px*/
    0;
  overflow: hidden;
}

.team-section .section-title {
  margin-top: 1.647vw
    /*24px*/
  ;
}

.team-grid {
  margin-top: 4.393vw
    /*64px*/
  ;
}

.team-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.team-grid__col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 37.062vw
    /*540px*/
  ;
}

.team-grid .static-img {
  display: none;
}

.team-member {
  grid-column: span 1;
  aspect-ratio: 1/1;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

.team-member img {
  display: block;
  width: 100%;
}

.team-member.-icon img {
  display: block;
  width: 2.745vw
    /*40px*/
  ;
  aspect-ratio: 1/1;
}

.team-member.-mob {
  display: none;
}

.team-grid__col.-second-rounded .team-member:nth-child(2n+1) {
  border-radius: 50%;
}

.team-grid__col.-first-rounded .team-member:nth-child(2n+2) {
  border-radius: 50%;
}

.team-grid__col .team-member.-rounded {
  border-radius: 50% !important;
}

.team-grid__col.-mob {
  display: none !important;
}

.team-grid .video {
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.team-grid .video video,
.team-grid .video iframe {
  display: block;
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
}

.team-grid .video>* {
  /* padding: 0 !important; */
  width: 100%;
  height: 100%;
}

.team-grid.-before-start-video .video {
  opacity: 0;
}

/* .video-static-afterview {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.video-static-afterview picture,
.video-static-afterview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-grid.-static .video-static-afterview {
  opacity: 1;
} */

.team-grid.-static .video {
  opacity: 0;
}

.team-section .text-container {
  max-width: 43.377vw
    /*632px*/
  ;
  margin: 4.393vw
    /*64px*/
    auto 0 auto;
}

.team-section .text-container p+p {
  margin-top: 1.647vw
    /*24px*/
  ;
}

.team-section .text-container .text {
  color: var(--black-70, rgba(0, 0, 0, 0.70));
  padding-right: 7.687vw
    /*112px*/
  ;
}

.pinned-video {
  width: 100%;
  margin-top: 3.294vw
    /*48px*/
  ;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.pinned-video__inner {
  /* translateY(-27.3%) */
  /* transform-origin: top; */
  /* transform: scale(0.45); */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.098vw
    /*16px*/
  ;
  clip-path: inset(0 0 0 0 round 1.098vw);
  /* width: 45%;
  margin: 0 auto; */
  transform: scale(0.45);
  transform-origin: top;
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 95vh;
}

.pinned-video .showreel {
  width: 100%;
  aspect-ratio: 1408/768;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pinned-video .showreel>* {
  /* width: 100%;
  padding: 0 !important;
  height: 100%; */
}


.pinned-video .showreel iframe {
  position: absolute;
  width: 100%;
  height: 105%;
}

.pinned-video video {
  display: block;
  width: 100%;
  /* max-height: calc(100vh - calc(2.745vw * 3)); */
  border-radius: inherit;
  object-fit: cover;
  aspect-ratio: 11/6;
}

.pinned-video .preview {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s;
}

.pinned-video .preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pinned-video .preview:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0.3;
  background: var(--Black, #000);
  width: 100%;
  height: 100%;
}

.play-button {
  position: absolute;
  z-index: 2;
  border-radius: 5.491vw
    /*80px*/
  ;
  background: var(--white-70, rgba(255, 255, 255, 0.70));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.549vw
    /*8px*/
    1.647vw
    /*24px*/
    0.549vw
    /*8px*/
    0.549vw
    /*8px*/
  ;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.098vw
    /*16px*/
  ;
  cursor: pointer;
  transition: background 0.4s, opacity 0.4s;
  opacity: 0;
  pointer-events: none;
}


.pinned-video__inner.-show-button .play-button {
  opacity: 1;
  pointer-events: auto;
}

.play-button .arrow {
  width: 3.844vw
    /*56px*/
  ;
  display: block;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.play-button .arrow svg {
  display: block;
  width: 100%;
}

.play-button .arrow rect,
.play-button .arrow path {
  transition: fill 0.4s;
}

.pinned-video__inner.-show-toolbar .video-toolbar {
  opacity: 1;
  pointer-events: auto;
}

.pinned-video__inner.-show-toolbar .preview {
  opacity: 0;
  pointer-events: none;
}

.pinned-video__inner:before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--Black);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
}

.pinned-video__inner.-video-ended iframe {
  /* transition: 0.4s;
  opacity: 0; */
  pointer-events: none;
}

.pinned-video__inner.-video-ended:before {
  opacity: 1;
}

.video-toolbar {
  position: absolute;
  z-index: 2;
  bottom: 2.745vw
    /*40px*/
  ;
  border-radius: 5.491vw
    /*80px*/
  ;
  background: var(--white-50, rgba(255, 255, 255, 0.50));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.275vw
    /*4px*/
  ;
  gap: 0.275vw
    /*4px*/
  ;

  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.4s;
  opacity: 0;
  pointer-events: none;
}

.video-toolbar>* {
  width: 4.942vw
    /*72px*/
  ;
  aspect-ratio: 1/1;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 50%;

  transition: opacity 0.4s, background 0.4s;
  cursor: pointer;
}

.video-toolbar .fullScreen:before,
.video-toolbar .mute:after,
.video-toolbar .mute:before,
.video-toolbar .play:after,
.video-toolbar .play:before {
  background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI0LjE5MiAxNy4zOTQtMTIuNzI2IDcuMzg0QzEwLjM4NiAyNS40MDQgOSAyNC42NDYgOSAyMy4zODRWOC42MTZjMC0xLjI2IDEuMzg0LTIuMDIgMi40NjYtMS4zOTJsMTIuNzI2IDcuMzg0YTEuNjA0IDEuNjA0IDAgMCAxIDAgMi43ODZaIiBmaWxsPSIjMDAwIi8+PC9zdmc+);
  content: "";
  display: block;
  height: 2.196vw
    /*32px*/
  ;
  width: 2.196vw
    /*32px*/
  ;
  position: absolute;
  transition: opacity .4s, transform .4s;
  opacity: 0.4;
}

.video-toolbar .play:after {
  background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI0IDguNXYxNWMwIC4zOTgtLjE1My43OC0uNDI2IDEuMDYtLjI3My4yODItLjY0My40NC0xLjAyOS40NEgxOC45MWMtLjM4NiAwLS43NTYtLjE1OC0xLjAyOC0uNDRhMS41MjQgMS41MjQgMCAwIDEtLjQyNy0xLjA2di0xNWMwLS4zOTguMTU0LS43OC40MjctMS4wNi4yNzItLjI4Mi42NDItLjQ0IDEuMDI4LS40NGgzLjYzN2MuMzg1IDAgLjc1NS4xNTggMS4wMjguNDQuMjczLjI4LjQyNi42NjIuNDI2IDEuMDZaTTEzLjA5IDdIOS40NTZjLS4zODYgMC0uNzU2LjE1OC0xLjAyOS40NEExLjUyNCAxLjUyNCAwIDAgMCA4IDguNXYxNWMwIC4zOTguMTUzLjc4LjQyNiAxLjA2LjI3My4yODIuNjQzLjQ0IDEuMDI5LjQ0aDMuNjM2Yy4zODYgMCAuNzU2LS4xNTggMS4wMjgtLjQ0LjI3My0uMjguNDI3LS42NjIuNDI3LTEuMDZ2LTE1YzAtLjM5OC0uMTU0LS43OC0uNDI3LTEuMDZBMS40MzMgMS40MzMgMCAwIDAgMTMuMDkxIDdaIiBmaWxsPSIjMDAwIi8+PC9zdmc+);
  opacity: 0;
  transform: scale(0);
}

.video-toolbar .mute:before {
  background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiBmaWxsPSIjMDAwIj48cGF0aCBkPSJNMjMuMzA2IDE4LjM1M2EzLjQ3MyAzLjQ3MyAwIDAgMCAuOTM4LTIuMzYxYzAtLjg3LS4zMzQtMS43MDktLjkzOC0yLjM2YS43NzUuNzc1IDAgMCAwLTEuMDUyLS4wNTUuNjkyLjY5MiAwIDAgMC0uMDc0IDFjLjM2Mi4zOS41NjIuODk0LjU2MiAxLjQxNXMtLjIgMS4wMjUtLjU2MiAxLjQxNmEuNjkyLjY5MiAwIDAgMCAuMDc0IDEgLjc3NS43NzUgMCAwIDAgMS4wNTItLjA1NVpNMjggMTUuOTkyYy4wMDEtMS43NTctLjY4LTMuNDUzLTEuOTEyLTQuNzYzYS43NzQuNzc0IDAgMCAwLTEuMDUyLS4wNDcuNjkzLjY5MyAwIDAgMC0uMDY2IDEgNS41NTggNS41NTggMCAwIDEgMS41MjkgMy44MSA1LjU1OCA1LjU1OCAwIDAgMS0xLjUzIDMuODA5LjcwOC43MDggMCAwIDAtLjE5OS41MTkuNjg3LjY4NyAwIDAgMCAuMjUuNDk4Ljc2MS43NjEgMCAwIDAgLjU0OC4xOC43ODMuNzgzIDAgMCAwIC41Mi0uMjQ0QzI3LjMyIDE5LjQ0NCAyOCAxNy43NDkgMjggMTUuOTkyWk0xOC41MzMgMjYuOTE0YS44MjIuODIyIDAgMCAxLS44NzgtLjA5M2wtNy4yNzUtNS43NDRINS42NjdjLS40NDIgMC0uODY2LS4xNzktMS4xNzktLjQ5NkExLjcwNiAxLjcwNiAwIDAgMSA0IDE5LjM4NHYtNi43NjljMC0uNDQ5LjE3Ni0uODc5LjQ4OC0xLjE5NmExLjY1NCAxLjY1NCAwIDAgMSAxLjE3OS0uNDk2aDQuNzEzbDcuMjc1LTUuNzQ0YS44Mi44MiAwIDAgMSAxLjEuMDY5Ljg1My44NTMgMCAwIDEgLjI0NS41OTh2MjAuMzA4YS44NTYuODU2IDAgMCAxLS40NjcuNzZaIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAzMikiIGQ9Ik0wIDBoMzJ2MzJIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=);
}

.video-toolbar .mute:after {
  background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiBmaWxsPSIjMDAwIj48cGF0aCBkPSJNMTguNTMzIDUuMDg2YS44MjIuODIyIDAgMCAwLS44NzguMDkzbC03LjI3NSA1Ljc0NEg1LjY2N2MtLjQ0MiAwLS44NjYuMTc4LTEuMTc5LjQ5NkExLjcwNiAxLjcwNiAwIDAgMCA0IDEyLjYxNnY2Ljc2OWMwIC40NDguMTc2Ljg3OS40ODggMS4xOTYuMzEzLjMxOC43MzcuNDk2IDEuMTc5LjQ5Nmg0LjcxM2w3LjI3NSA1Ljc0NGEuODIuODIgMCAwIDAgMS4xLS4wNjkuODUzLjg1MyAwIDAgMCAuMjQ1LS41OThWNS44NDZhLjg1Ni44NTYgMCAwIDAtLjQ2Ny0uNzZaTTI2LjczNyAxNmwyLjAwNy0yLjAwNmEuODc1Ljg3NSAwIDEgMC0xLjIzOC0xLjIzOEwyNS41IDE0Ljc2M2wtMi4wMDYtMi4wMDdhLjg3NS44NzUgMCAxIDAtMS4yMzggMS4yMzhMMjQuMjYzIDE2bC0yLjAwNyAyLjAwNmEuODc1Ljg3NSAwIDEgMCAxLjIzOCAxLjIzOGwyLjAwNi0yLjAwNyAyLjAwNiAyLjAwN2EuODc1Ljg3NSAwIDEgMCAxLjIzOC0xLjIzOEwyNi43MzcgMTZaIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgzMnYzMkgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==);
  opacity: 0;
}

.video-toolbar .fullScreen:before {
  background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEzLjcxNSAxMy43MTMgNS43MTUgNS43MTVNMTQuODU4IDE5LjQyOGg0LjU3MnYtNC41NzJNMTAuMjg1IDEwLjI4NiA0LjU3MSA0LjU3TTkuMTQgNC41NzFINC41N3Y0LjU3MiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+);
}

.video-toolbar .fullScreen {
  display: none;
}

.video-toolbar .play.-running:after {
  opacity: 0.4;
  transform: scale(1);
}

.video-toolbar .play.-running:before {
  opacity: 0;
  transform: scale(0);
}

.video-toolbar .mute.-muted:before {
  opacity: 0;
}

.video-toolbar .mute.-muted:after {
  opacity: 0.4;
}

.video-toolbar .play .progressbar {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
}

.video-toolbar .play .progressbar svg {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.progressbarLine {
  transition: 0.5s;
}

.controls {
  display: none !important;
}


/* Homepage | code-section */

.code-section__wrapper {
  border-radius: 1.098vw
    /*16px*/
  ;
  background: var(--Light-grey, #E8EDF1);
  padding: 10.981vw
    /*160px*/
    4.393vw
    /*64px*/
  ;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8.511vw
    /*124px*/
  ;
}

.code-section__wrapper-left {
  width: 43.377vw
    /*632px*/
  ;
  min-width: 43.377vw
    /*632px*/
  ;
}

.code-section__wrapper-left .button.-mob {
  display: none;
}

.code-example {
  width: 100%;
  aspect-ratio: 632/480;
  border-radius: 0.549vw
    /*8px*/
  ;
  background: var(--Dark-grey-2, #586977);
  overflow: hidden;
}

.code-section__wrapper-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.code-section__wrapper-right .title {
  margin-top: 1.647vw
    /*24px*/
  ;
}

.code-section__wrapper-right .text {
  margin-top: 1.647vw
    /*24px*/
  ;
  color: var(--Black-70);
}

.code-section__wrapper-right .button {
  margin-top: 3.294vw
    /*48px*/
  ;
}

.token.punctuation {
  color: var(--White);
}

.token.entity,
.token.operator,
.token.url {
  color: var(--White);
}

.token.class-name,
.token.constant,
.token.property,
.token.symbol {
  color: var(--white-70, rgba(255, 255, 255, 0.70));
}

.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable {
  color: var(--Light-green, #45ED94);
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
  background: var(--Dark-grey-2, #586977);
}

.code-example__tabs {
  height: 100%;
  max-height: calc(100% - 5.216vw
      /*76px*/
    );
  overflow: hidden;
}

.code-example__item {
  max-height: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.code-example__item-inner {
  position: relative;
  overflow: hidden;
  max-height: 100%;
  height: 100%;
  grid-column: span 12;
}

.code-for-copy {
  padding: 1.647vw
    /*24px*/
  ;
  width: fit-content;
  min-width: 100%;
}

.code-example__item .copy-button {
  position: absolute;
  z-index: 2;
  right: 1.647vw
    /*24px*/
  ;
  top: 1.647vw
    /*24px*/
  ;
}

.code-example__menu {
  padding: 1.647vw
    /*24px*/
  ;
  height: 5.216vw
    /*76px*/
  ;
  min-height: 5.216vw
    /*76px*/
  ;
  background: var(--white-20, rgba(255, 255, 255, 0.20));
  overflow: hidden;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.code-example__menu-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  width: fit-content;
  max-height: 100%;
  gap: 0.275vw
    /*4px*/
  ;
}


pre[class*=language-] {
  padding: 0;
  margin: 0;
}

pre[class*=language-] * {
  white-space: break-spaces !important;
}

.code-example__menu-item {
  border-radius: 2.745vw
    /*40px*/
  ;

  color: var(--White);
  height: 1.922vw
    /*28px*/
  ;
  min-width: 5.491vw
    /*80px*/
  ;
  padding: 0 0.686vw
    /*10px*/
    0.069vw
    /*1px*/
    0.686vw
    /*10px*/
  ;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.4s, background 0.4s;
  cursor: pointer;
}

body.-apple .code-example__menu-item .arrow {
  margin-top: -2px;
}

body.-apple .code-example__menu-item {
  padding-top: 4px;
  padding-bottom: 1px;
}

.code-example__menu-item.-active {
  background: var(--Black, #000);
  opacity: 1;
  pointer-events: none;
}

.code-example .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical {
  top: 1.098vw
    /*16px*/
  ;
  bottom: 0;
  padding: 0;
  width: 0.206vw
    /*3px*/
  ;
  color: var(--white-70, rgba(255, 255, 255, 0.70));
}

.code-example .os-theme-dark>.os-scrollbar-vertical .os-scrollbar-handle:before,
.code-example .os-theme-light>.os-scrollbar-vertical .os-scrollbar-handle:before {
  left: 0;
  right: 0;
}

.code-example .os-theme-dark>.os-scrollbar-vertical,
.code-example .os-theme-light>.os-scrollbar-vertical {
  width: 3px;
  top: 16px;
  bottom: 16px;
}

.code-example .os-theme-dark>.os-scrollbar-horizontal,
.code-example .os-theme-light>.os-scrollbar-horizontal {
  height: 3px;
  left: 0;
}

.code-example .os-theme-dark>.os-scrollbar,
.code-example .os-theme-light>.os-scrollbar {
  padding: 0;
}