body {
  background: #000;
  color: white;
  position: relative;
}

/* Hero Section */
.hero {
  position: relative;
  height: calc(800px + var(--header-height));
  background-image: url(../img/Lines+Ellipse+Rectangle.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  gap: 120px;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-height) + 5rem);

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 60%, #000000 100%);
    pointer-events: none;
    z-index: 5;
  }

  & .hero-content {
    width: 100%;
    z-index: 6;
    max-width: calc(1344px + var(--main-padding-inline) * 2);
    padding-inline: var(--main-padding-inline);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }

  & .hero-left {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    z-index: 2;

    & h1 {
      font-family: Impact;
      font-weight: 400;
      font-size: 88px;
      line-height: 100%;
      text-transform: uppercase;
      max-width: 520px;
    }
  }

  & .hero-center {
    display: flex;
    justify-content: center;
    align-items: center;

    & .hero-bottle {
      position: absolute;
      height: 90%;
      object-fit: contain;
      bottom: 0;
      filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
      z-index: 1;
    }
  }

  & .hero-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: right;
    z-index: 2;

    & h1, & h2 {
      font-family: Impact;
      font-weight: 400;
      font-size: 88px;
      line-height: 100%;
      text-transform: uppercase;
      max-width: 467px;
    }

    & p {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 300;
      font-size: 18px;
      line-height: 26px;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  & .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  & .hero-bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 6;
    max-width: calc(1344px + var(--main-padding-inline) * 2);
    padding-inline: var(--main-padding-inline);
    margin: 0 auto;

    & p {
      font-family: "Helvetica Neue", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      line-height: 20px;
      text-align: right;
    }
  }

  @media (max-width: 1060px) {
    & .hero-left {
      & h1, h2 {
        font-size: 64px;
      }
    }

    & .hero-right {
      & h1, h2 {
        font-size: 64px;
      }
    }
  }

  @media (max-width: 800px) {
    height: 100dvh;
    min-height: 680px;
    gap: 0;
    padding-top: var(--header-height);
    padding-bottom: 1.25rem;
    justify-content: space-between;

    & .hero-content {
      flex-direction: column;
      gap: 1.25rem;
      padding-top: 2rem;
      align-content: start;
    }

    & .hero-left {
      order: 1;
      text-align: left;
      gap: 0;

      & h1, h2 {
        font-size: 32px;
        line-height: 34px;
      }
    }

    & .hero-center {
      width: 400px;

      & .hero-bottle {
        position: absolute;
        width: 400px;
        height: auto;
        aspect-ratio: 1/1;
        overflow: hidden;
        bottom: 50%;
        transform: translateY(80%) translateX(-27.5%);
        left: 20%;
        z-index: 3;
      }
    }

    & .hero-right {
      order: 2;
      text-align: right;
      align-self: flex-end;
      z-index: 4;

      & h1, h2 {
        font-size: 48px;
        line-height: 100%;
      }
    }

    & .hero-bottom {
      flex-direction: column;
      gap: 60px;
      align-items: center;
      position: relative;

      & .hero-buttons {
        width: 100%;
        gap: 0.5rem;
        align-items: flex-end;
      }

      & p {
        font-size: 14px;
        line-height: 20px;
        text-align: right;
        align-self: flex-end;
      }
    }
  }

  @media (max-width: 600px) {
    & .hero-center {
      & .hero-bottle {
        position: absolute;
        width: 400px;
        height: auto;
        aspect-ratio: 1/1;
        overflow: hidden;
        bottom: 50%;
        transform: translateY(80%) translateX(-27.5%);
        left: 0;
        z-index: 3;
      }
    }
  }
}

/* Numbers Section */
.numbers {
  padding-block: 120px 148px;

  & .numbers-container {
    max-width: calc(1344px + var(--main-padding-inline) * 2);
    padding-inline: var(--main-padding-inline);
    margin: 0 auto;
    display: flex;
    gap: 3rem;
  }

  & .numbers-title {
    font-family: Impact;
    font-weight: 400;
    font-size: 56px;
    line-height: 60px;
    text-transform: uppercase;
    align-self: flex-start;
    color: white;
    flex-shrink: 0;
    width: 306px;
  }

  & .numbers-content {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
  }

  & .number-card {
    aspect-ratio: 1/1;
    background-image: url(../img/Monotone_noise_1a1a1a.png);
    background-color: #1A1A1A;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;

    &:nth-of-type(2),
    &:nth-of-type(5),
    &:nth-of-type(7) {
      height: calc(306px - 24px);
      width: calc(306px - 24px);

      &:hover {
        height: calc(306px - 24px - 12px);
        width: calc(306px - 24px - 12px);
      }
    }

    &:nth-of-type(1),
    &:nth-of-type(3),
    &:nth-of-type(4),
    &:nth-of-type(6) {
      height: calc(306px + 24px);
      width: calc(306px + 24px);

      &:hover {
        height: calc(306px + 24px - 12px);
        width: calc(306px + 24px - 12px);
      }
    }
  }

  & .number-value {
    font-family: Impact;
    font-weight: 400;
    font-size: 72px;
    line-height: 100%;
    text-align: center;

    color: #fed607;
    margin-bottom: 1rem;
    text-transform: uppercase;
  }

  & .number-description {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    max-width: 230px;
    color: rgba(255, 255, 255, 0.8);
  }

  @media (max-width: 1490px) {
    padding-block: 80px;

    & .numbers-title {
      width: 100%;
      max-width: initial;
      justify-self: flex-start;
    }

    & .numbers-container {
      justify-content: center;
    }

    & .numbers-content {
      max-width: 692px;
      justify-content: right;
    }

    & .number-card {
      &:nth-of-type(1) {
        margin-left: 50%;
      }

      &:nth-of-type(even) {
        height: calc(318px - 24px);
        width: calc(318px - 24px);
        transform: translateY(calc(-50% - 2rem));

        &:hover {
          height: calc(318px - 24px - 12px);
          width: calc(318px - 24px - 12px);
        }
      }

      &:nth-of-type(odd) {
        height: calc(318px + 24px);
        width: calc(318px + 24px);

        &:hover {
          height: calc(318px + 24px - 12px);
          width: calc(318px + 24px - 12px);
        }
      }
    }
  }

  @media (max-width: 820px) {
    & .numbers-title {
      font-size: 32px;
      line-height: 34px;
      max-width: 246px;
      margin-right: auto;
    }

    & .numbers-content {
      max-width: 376px;
      row-gap: 1rem;
      column-gap: 0;
    }

    & .number-value {
      font-size: 40px;
      margin-bottom: 0.5rem;
    }

    & .number-description {
      font-size: 12px;
      line-height: 16px;
      max-width: 148px;
    }

    & .number-card {
      &:nth-of-type(even) {
        height: calc(180px - 16px);
        width: calc(180px - 16px);
        transform: translateY(calc(-50% - 1rem));

        &:hover {
          height: calc(180px - 16px - 8px);
          width: calc(180px - 16px - 8px);
        }
      }

      &:nth-of-type(odd) {
        height: calc(180px + 16px);
        width: calc(180px + 16px);

        &:hover {
          height: calc(180px + 16px - 8px);
          width: calc(180px + 16px - 8px);
        }
      }
    }
  }

  @media (max-width: 399px) {
    & .numbers-content {
      max-width: 280px;
    }

    & .number-value {
      font-size: 32px;
      margin-bottom: 0.5rem;
    }

    & .number-description {
      font-size: 10px;
      line-height: 14px;
      max-width: 100px;
    }

    & .number-card {
      &:nth-of-type(even) {
        height: calc(140px - 12px);
        width: calc(140px - 12px);
        transform: translateY(calc(-50% - 1rem));

        &:hover {
          height: calc(140px - 12px - 6px);
          width: calc(140px - 12px - 6px);
        }
      }

      &:nth-of-type(odd) {
        height: calc(140px + 12px);
        width: calc(140px + 12px);

        &:hover {
          height: calc(140px + 12px - 6px);
          width: calc(140px + 12px - 6px);
        }
      }
    }
  }
}

/* Video Section */
.video-section {
  padding-block: 80px 160px;

  & .video-container {
    max-width: calc(1344px + var(--main-padding-inline) * 2);
    padding-inline: var(--main-padding-inline);
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    justify-content: center;
  }

  & .video-preview {
    flex: 1;
    position: relative;
    aspect-ratio: 16/9;
    background-image: url(../img/video-preview.jpg);
    background-size: center;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 1;
    }

    &:hover {
      transform: scale(1.02);

      & .play-button {
        transform: scale(1.1);
      }
    }
  }

  & .video-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 2;
    padding: 2rem;

    &:hover {
      & .play-button {
        background-color: #fed607;
      }

      & .video-caption {
        color: #fed607;
      }
    }
  }

  & .play-button {
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 72px;
    height: 72px;
    padding: 0;
    mask-image: url(../img/play_24px.svg);
    mask-size: contain;
    background-color: white;
  }

  & .video-caption {
    font-family: "Helvetica Neue";
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  & .video-text {
    flex: 1;
    display: flex;
    max-width: 318px;

    & p {
      font-family: "Helvetica Neue";
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #ffffff99;
    }
  }

  @media (max-width: 900px) {
    padding-block: 80px 120px;

    & .video-container {
      flex-direction: column;
      gap: 2.5rem;
    }

    & .video-preview {
      width: 100%;
      min-height: 251px;
    }

    & .video-text {
      align-self: flex-end;
      & p {
        font-size: 14px;
        line-height: 20px;
        max-width: 246px;
      }
    }

    & .video-caption {
      font-size: 14px;
      line-height: 20px;
    }

    & .play-button {
      width: 56px;
      height: 56px;
    }
  }
}

/* Video Modal */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

  &.active {
    opacity: 1;
    visibility: visible;

    & .video-modal-content {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.video-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.video-modal-content {
  position: relative;
  z-index: 1001;
  width: 90%;
  max-width: 1200px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  transform: translateY(-100px);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease;
}

.video-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1002;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;

  &::after {
    content: "";
    width: 20px;
    height: 20px;
    mask-image: url(../img/cross_24px.svg);
    mask-size: contain;
    background-color: #fed607;
  }

  &:hover::after {
    background-color: white;
  }

  &:hover {
    transform: scale(1.1);
  }
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  & video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
  }
}

@media (max-width: 900px) {
  .video-modal-content {
    width: 95%;
    border-radius: 12px;
  }

  .video-modal-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;

    &::after {
      width: 16px;
      height: 16px;
    }
  }
}

.white-background {
  background-color: #ffffff;
  background-image: url(../img/cells-test.svg);
  background-size: auto;
  color: black;
}

.ribbon {
  width: 100%;
  background-image: url(../img/Ribbons.png);
  height: 152.57px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.our-brands {
  max-width: calc(1344px + var(--main-padding-inline) * 2);
  padding-inline: var(--main-padding-inline);
  margin-inline: auto;
  padding-block: 90px 160px;

  & h2 {
    font-family: Impact;
    font-weight: 400;
    font-size: 72px;
    line-height: 100%;
    text-transform: uppercase;
    max-width: 660px;
    margin-bottom: 80px;

    @media (max-width: 900px) {
      font-size: 60px;
      max-width: 540px;
    }

    @media (max-width: 650px) {
      font-size: 40px;
      max-width: 246px;
    }
  }

  & .scroll-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 240px;
  }

  & .scroll-card {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 1116px;
    min-height: 560px;
    background-color: #1a1a1a;
    position: sticky;
    overflow: hidden;
    display: flex;
    gap: 1.5rem;
    border: 1px solid #000;
    transition: opacity 0.3s ease;

    @media (max-width: 900px) {
      min-height: 519px;
      height: 519px;
      flex-direction: column-reverse;
      gap: 0.5rem;
      align-items: center;
      width: fit-content;
      max-width: 360px;
    }

    & .card-brand {
      position: absolute;
      width: 120px;
      height: 120px;
      top: 32px;
      right: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #4d4d4d;
      border-radius: 50%;

      & img {
        width: 96px;
        height: 96px;
        object-fit: contain;
      }

      @media (max-width: 900px) {
        top: 24px;
        left: 24px;
        height: 80px;
        width: 80px;

        & img {
          width: 64px;
          height: 64px;
        }
      }
    }

    & .card-content {
      flex: 1;
      position: relative;
      width: 100%;
      padding: 3rem 0 3rem 3rem;
      display: flex;
      flex-direction: column;

      @media (max-width: 900px) {
        padding: 0 1.5rem 1.5rem;
        width: initial;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
      }

      & .card-title {
        font-family: Impact;
        font-weight: 400;
        font-size: 40px;
        line-height: 48px;
        text-transform: uppercase;

        color: white;
        margin-bottom: 1.5rem;
        max-width: 450px;

        @media (max-width: 900px) {
          font-size: 24px;
          line-height: 28px;
          margin-bottom: 0;
          width: 100%;
        }
      }

      & .card-description {
        font-family: "Helvetica Neue";
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        max-width: 430px;
        color: #ffffff99;

        @media (max-width: 900px) {
          font-size: 14px;
          line-height: 20px;
          flex-basis: calc(100% - 56px - 1rem);
        }
      }

      & .btn {
        font-family: "Helvetica Neue";
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        margin-top: auto;

        @media (max-width: 900px) {
          padding: 16px;
          align-self: flex-end;
          margin-top: 0;

          & span {
            display: none;
          }
        }
      }
    }

    & .card-image {
      background-size: contain;
      width: 546px;
      height: 546px;

      @media (max-width: 900px) {
        margin-inline: auto;
        width: 287px;
        height: 287px;
        aspect-ratio: 1/1;
      }
    }
  }
}

.technologies-section {
  padding-block: 160px 200px;

  & .header-wrapper {
    position: relative;
    margin-bottom: 120px;

    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 100vw;
      height: 200px;
      bottom: 0;
      left: 0;
      z-index: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
      backdrop-filter: blur(4px);
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 100vw;
      height: 200px;
      bottom: 200px;
      left: 0;
      z-index: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
      backdrop-filter: blur(4px);
    }

    & .technologies-header {
      max-width: calc(1344px + var(--main-padding-inline) * 2);
      margin-inline: auto;
      padding-inline: var(--main-padding-inline);
      display: flex;
      flex-direction: column;

      & .technologies-title {
        font-family: Impact;
        font-weight: 400;
        font-size: 56px;
        line-height: 60px;
        text-align: right;
        text-transform: uppercase;
        width: 100%;
        max-width: 546px;
        align-self: flex-end;
        margin-bottom: 40px;
        position: relative;
        z-index: 2;
      }

      & .technologies-content-wrapper {
        /* display: flex;
        flex-wrap: wrap; */

        &::before {
          content: "";
          display: block;
          position: absolute;
          width: 85vw;
          height: 100%;
          bottom: 0;
          right: 0;
          z-index: 1;
          background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
        }

        & .technologies-image {
          position: relative;
          width: 432px;
          height: 392px;
          object-fit: contain;
          float: left;
          margin-right: 1.5rem;
          transform: translateY(-20px);
          z-index: 2;
        }

        & .technologies-description {
          position: relative;
          font-family: Impact;
          font-weight: 400;
          font-size: 72px;
          line-height: 100%;
          text-transform: uppercase;
          color: #fed607;
          z-index: 2;

          &:nth-of-type(1) {
            max-width: 888px;
          }
        }
      }

      @media (max-width: 950px) {
        & .technologies-title {
          font-size: 32px;
          line-height: 34px;
          max-width: 246px;
          margin-bottom: 60px;
        }
        & .technologies-content-wrapper {
          display: flex;
          flex-direction: column;

          &::before {
            display: none;
          }

          & .technologies-description {
            display: inline;
            text-align: justify;
            font-size: 40px;
            line-height: 100%;

            & br {
              display: none;
            }
          }

          & .technologies-image {
            transform: translateY(0);
            float: none;
            order: 3;
            margin-right: 0;
          }
        }
      }
    }
  }

  & .technologies-cards {
    max-width: calc(1344px + var(--main-padding-inline) * 2);
    margin-inline: auto;
    padding-inline: var(--main-padding-inline);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    & .card {
      position: relative;
      width: 320px;
      height: 288px;
      padding: 24px;
      background-color: #fff;
      color: black;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      justify-content: space-between;

      & .card-title {
        font-family: Impact;
        font-weight: 400;
        font-size: 32px;
        line-height: 34px;
        text-transform: uppercase;
      }
      & .card-text {
        font-family: "Helvetica Neue";
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
      }
      &:before {
        content: "";
        display: block;
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
      }
      &:nth-of-type(1) {
        rotate: 4deg;
        box-shadow: 0px 10px 15px 0px #0000004d;

        &::before {
          background-image: url(../img/technologies-section/Image.png);
          width: 48px;
          height: 66.83px;
          top: -18px;
          right: 52px;
        }
      }
      &:nth-of-type(2) {
        rotate: -1deg;
        box-shadow: -10px 0px 10px 0px #00000033;

        &::before {
          background-image: url(../img/technologies-section/Image-1.png);
          width: 70px;
          height: 70px;
          right: 4px;
          top: 4px;
        }
      }
      &:nth-of-type(3) {
        rotate: 2deg;
        box-shadow: 20px 10px 40px 0px #00000066;

        &::before {
          background-image: url(../img/technologies-section/Image-2.png);
          width: 80px;
          height: 100px;
          left: -40px;
          top: -24px;
        }
      }
      &:nth-of-type(4) {
        rotate: -8deg;
        box-shadow: -10px 5px 10px 0px #00000033;
        &::before {
          background-image: url(../img/technologies-section/Image-3.png);
          width: 68px;
          height: 64px;
          top: 16px;
          right: 36px;
        }
      }
    }
  }
}

.partners-geography {
  max-width: calc(1344px + var(--main-padding-inline) * 2);
  margin-inline: auto;
  padding-inline: var(--main-padding-inline);
  padding-block: 160px 80px;

  & h2 {
    max-width: 432px;
    font-family: Impact;
    font-weight: 400;
    font-size: 72px;
    line-height: 100%;
    text-transform: uppercase;
  }

  & .geography-section-container {
    position: relative;
    display: flex;
    justify-content: center;
  }

  & .globe-map-mobile {
    display: none;
  }

  @media (max-width: 1140px) {
    padding-inline: 0;
    padding-block: 120px 60px;

    & h2 {
      padding-inline: var(--main-padding-inline);
      margin-bottom: 20px;
    }

    & .globe-map {
      display: none;
    }

    & .globe-map-mobile {
      display: block;
    }
  }

  @media (max-width: 620px) {
    & h2 {
      font-size: 40px;
      margin-bottom: 60px;
      max-width: 246px;
    }
  }
}

.responsibilities-section {
  padding-block: 80px 120px;
  max-width: calc(1344px + var(--main-padding-inline) * 2);
  margin-inline: auto;
  padding-left: var(--main-padding-inline);
  display: flex;
  flex-direction: column;

  @media (max-width: 1230px) {
    padding-block: 80px;
  }

  & h3 {
    font-family: Impact;
    font-weight: 400;
    font-size: 56px;
    line-height: 60px;
    text-align: right;
    text-transform: uppercase;
    max-width: 774px;
    align-self: flex-end;
    margin-bottom: 80px;

    @media (max-width: 1600px) {
      margin-right: var(--main-padding-inline);
    }

    @media (max-width: 1230px) {
      margin-bottom: 60px;
    }

    @media (max-width: 530px) {
      font-size: 32px;
      line-height: 34px;
    }
  }

  & .responsibilities-content {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 160px;

    @media (max-width: 1230px) {
      margin-bottom: 120px;
    }

    & .responsibilies-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      max-width: 660px;

      & h2 {
        font-family: Impact;
        font-weight: 400;
        font-size: 72px;
        line-height: 100%;
        text-transform: uppercase;
        position: relative;

        &::before {
          content: "";
          display: block;
          position: absolute;
          width: 126px;
          height: 126px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          scale: 1.2;
          z-index: 1;
          background-image: url(../img/responsibilities-section/stamp.png);
          left: 450px;
          top: -10%;

          @media (max-width: 1230px) {
            top: -40px;
            left: 380px;
          }

          @media (max-width: 530px) {
            top: -30px;
            left: 260px;
            width: 84px;
            height: 84px;
          }

          @media (max-width: 365px) {
            width: 84px;
            height: 84px;
            top: -60px;
            scale: 1;
            right: 10px;
            left: initial;
          }
        }

        @media (max-width: 1230px) {
          font-size: 64px;
        }
      }

      & p {
        font-family: "Helvetica Neue";
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        max-width: 318px;
      }
    }
    & .certifications-wrapper {
      flex: 1;
      & .certifications-content {
        overflow: hidden;
        display: flex;
        gap: 1.5rem;
        justify-content: right;

        @media (max-width: 1450px) {
          justify-content: left;
        }

        & img {
          height: 360px;

          @media (max-width: 530px) {
            height: 240px;
          }
        }
      }
    }

    @media (max-width: 1230px) {
      flex-direction: column;
      gap: 3rem;

      & .responsibilies-text {
        gap: 1rem;

        @media (max-width: 530px) {
          max-width: 335px;
          & h2 {
            font-size: 40px;
            line-height: 100%;
          }
        }
      }

      & .certifications-wrapper {
        & .certifications-content {
          justify-content: right;

          @media (max-width: 730px) {
            justify-content: left;
          }

          @media (max-width: 530px) {
            gap: 1rem;
          }
        }
      }
    }
  }

  & .team-image {
    align-self: flex-end;
    background-image: url(../img/responsibilities-section/team-image.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 1002px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1002/564;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 40px;

    @media (max-width: 1600px) {
      width: calc(100% - var(--main-padding-inline));
      margin-right: var(--main-padding-inline);
    }

    @media (max-width: 675px) {
      padding: 20px;
    }

    & span {
      font-family: Impact;
      font-weight: 400;
      font-size: 88px;
      line-height: 100%;
      text-align: right;
      text-transform: uppercase;
      color: #fed607;

      @media (max-width: 675px) {
        font-size: 48px;
      }
    }

    & p {
      font-family: "Helvetica Neue";
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      text-align: right;
      color: #ffffff;
    }
  }
}

.cooperation-map-section {
  position: relative;
  padding-block: 200px;
  background-image: url(../img/cooperation-map-section/background.png);
  background-repeat: no-repeat;

  &::before {
    content: "";
    position: absolute;
    background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    height: 320px;
    bottom: 0;
  }

  & .cooperation-map-content {
    max-width: calc(1344px + var(--main-padding-inline) * 2);
    margin-inline: auto;
    padding-inline: var(--main-padding-inline);
  }

  & h2 {
    font-family: Impact;
    font-weight: 400;
    font-size: 72px;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 60px;
    max-width: 660px;

    @media (max-width: 860px) {
      font-size: 32px;
      line-height: 34px;
    }
  }

  & .cooperation-map-text {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 120px;

    & h4 {
      font-family: Impact;
      font-weight: 400;
      font-size: 40px;
      line-height: 48px;
      text-align: justify;
      text-transform: uppercase;
      color: #fed607;
      max-width: 774px;
    }

    & span {
      font-family: "Helvetica Neue";
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      vertical-align: bottom;
      color: #ffffff99;
      max-width: 204px;
    }

    @media (max-width: 860px) {
      flex-direction: column-reverse;
    }

    @media (max-width: 540px) {
      align-items: flex-start;
      gap: 40px;

      & h4 {
        font-size: 24px;
        line-height: 28px;
      }

      & span {
        align-self: flex-end;
        max-width: 246px;
      }
    }
  }

  & .cooperation-map-cards {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;

    @media (max-width: 928px) {
      justify-content: center;
    }
  }
  & .cooperation-map-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px;
    background-image: url(../img/Monotone_noise_1a1a1a.png);
    background-color: #fed607;
    height: 640px;
    width: fit-content;
    flex: 1 1 432px;
    max-width: 432px;
    color: black;

    & > .card-image {
      position: absolute;
      width: 238.27px;
      height: 238.27px;
      right: -40px;
      top: -40px;
      background-size: contain;
      background-image: url(../img/cooperation-map-section/Tape-1.png);

      & span {
        position: absolute;
        top: 50%;
        transform: rotate(45deg) translateY(-75%);
        font-family: "Helvetica Neue";
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        max-width: 215px;
      }
    }

    & h4 {
      margin-bottom: 16px;
      font-family: Impact;
      font-weight: 400;
      font-size: 40px;
      line-height: 48px;
      text-transform: uppercase;
      padding-right: 40px;
    }
    & p {
      margin-bottom: 32px;
      font-family: "Helvetica Neue";
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
    }
    & ul {
      list-style: square;
      padding-left: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 3rem;

      & li {
        font-family: "Helvetica Neue";
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
      }
    }
    & .btn {
      margin-top: auto;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
    }

    @media (max-width: 500px) {
      height: auto;
      padding: 32px;

      & > .card-image {
        display: block;
        position: absolute;
        background-image: url(../img/cooperation-map-section/Tape-1-mobile.png);
        width: 310.77px;
        height: 210.42px;
        background-size: contain;
        right: -19px;
        top: -52px;

        & span {
          transform: rotate(30deg) translate(30%, -145%);
        }
      }

      & h4 {
        padding-right: 30%;
      }
    }

    @media (max-width: 400px) {
      padding: 18px;

      & .btn {
        & span {
          display: none;
        }
      }

      & > .card-image {
        display: none;
      }

      & h4 {
        padding-right: 0;
      }
    }
  }
}

.omega-bottles {
  max-width: 1078.46px;
  width: 100%;
  aspect-ratio: 1078.46/480.87;
}

.results-section {
  padding-bottom: 160px;
  background: linear-gradient(360deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);

  & .results-section-container {
    display: flex;
    flex-direction: column;
    max-width: calc(1344px + var(--main-padding-inline) * 2);
    margin-inline: auto;
    padding-inline: var(--main-padding-inline);
  }

  & h2 {
    font-family: Impact;
    font-weight: 400;
    font-size: 72px;
    line-height: 100%;
    text-align: right;
    text-transform: uppercase;
    max-width: 660px;
    align-self: flex-end;
    margin-bottom: 60px;
  }

  & .results-content {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  & .results-items-container {
    display: flex;
    gap: 1.5rem;
  }

  & .results-item {
    max-width: 318px;
    display: flex;
    flex-direction: column;
    gap: 3rem;

    & .results-item-text {
      min-height: 240px;
      gap: 3rem;

      & h4 {
        font-family: Impact;
        font-weight: 400;
        font-size: 40px;
        line-height: 48px;
        text-transform: uppercase;
        color: #fed607;
        margin-bottom: 1.5rem;
      }

      & p {
        font-family: Impact;
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
        text-transform: uppercase;
      }
    }

    & .review {
      background-color: #333333;
      padding: 20px;
      display: flex;
      gap: 20px;
      height: 220px;

      & .quote {
        font-family: Impact;
        font-weight: 400;
        font-size: 160px;
        line-height: 100%;
        vertical-align: top;
        align-self: flex-start;
        text-transform: uppercase;
        color: #fed607;
      }
      & .review-content {
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: space-between;

        & p {
          font-family: "Helvetica Neue";
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
        }

        & span {
          font-family: "Helvetica Neue";
          font-weight: 500;
          font-size: 12px;
          line-height: 16px;
          color: #ffffff99;
        }
      }
    }

    &:nth-of-type(2) {
      margin-top: 80px;
    }

    &:nth-of-type(3) {
      margin-top: 160px;
    }
  }

  & .results-content-description {
    max-width: 204px;
    font-family: "Helvetica Neue";
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-left: auto;
    color: #ffffff99;
  }

  @media (max-width: 1325px) {
    & .results-content-description {
      order: 1;
    }
    & .results-items-container {
      order: 2;
    }
  }

  @media (max-width: 900px) {
    & .results-content {
      flex-direction: column;
      gap: 120px;
    }

    & .results-items-container {
      flex-direction: column;
      gap: 80px;
    }

    & .results-item {
      &:nth-of-type(2) {
        margin-top: 0;
        align-self: center;
      }

      &:nth-of-type(3) {
        margin-top: 0;
        align-self: flex-end;
      }
    }
  }

  @media (max-width: 800px) {
    & h2 {
      margin-top: 80px;
      font-size: 40px;
      line-height: 100%;
      text-align: right;
    }
  }

  @media (max-width: 600px) {
    padding-bottom: 120px;

    & .results-item {
      max-width: 271px;
      gap: 2rem;
      & .results-item-text {
        min-height: 0;

        & h4 {
          font-size: 32px;
          line-height: 34px;
          margin-bottom: 16px;
        }

        & p {
          font-size: 20px;
          line-height: 24px;
        }
      }

      & .review {
        height: auto;
        padding: 1rem;

        & .review-content {
          padding: 0.25rem;
          gap: 2rem;
        }
      }
    }
  }
}