.hero {
  --bg-hero-url: url("/assets/images/bg-hero-about.webp");
  --background-gradient-h: 100%;
  /* background-position-x: center, calc(50% - 200px); */
  background-position-x: center, 90%;
  padding-bottom: 36px;
  display: flex;
}

.hero__box {
  margin-top: auto;
}

.hero__title {
  margin-top: auto;
  margin-bottom: 12px;
}

.hero__text {
  margin-bottom: 32px;
}

@media (width >= 1024px) {
  .hero {
    background-position-x: center, right;
  }
}

@media (width >= 1440px) {
  .section-box {
    max-width: 50%;
  }

  .hero__text {
    max-width: 380px;
  }
}

.story__container {
  flex-direction: column;
  gap: 50px;
  display: flex;
}

.story__box-wrap {
  --gap: 16px;
}

.story__desc {
  background-color: var(--color-accent-secondary);
  border-radius: 16px;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 412px;
  padding: 30px 20px;
  display: flex;
  position: relative;
}

.story__desc .story__msg,
.story__desc .story__text {
  z-index: 1;
  position: relative;
}

.story__msg {
  max-width: 472px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.12;
}

.story__text {
  max-width: 464px;
}

.story__img {
  object-fit: cover;
  border-radius: 16px;
  height: 215px;
}

.icon-decor-circle {
  position: absolute;
  bottom: 0;
  right: 0;
}

@media (width >= 768px) {
  .story__img {
    height: 400px;
  }
}

@media (width >= 1440px) {
  .story__container {
    gap: 45px;
  }

  .story__box-wrap--2 {
    flex-direction: row-reverse;
  }

  .story__desc {
    min-height: 380px;
  }

  .story__img {
    height: 100%;
  }
}

.values {
  color: var(--color-white);
  background-color: var(--color-accent-primary);
}

.values__box-wrap {
  flex-direction: column;
  gap: 32px;
  max-width: 100%;
  display: flex;
}

.value {
  border: 1px solid var(--color-white);
  backdrop-filter: blur(9.1px);
  background-color: #1988ffb3;
  border-radius: 8px;
  flex-direction: column;
  width: 100%;
  height: 280px;
  padding: 24px 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.value__title {
  margin-top: auto;
  margin-bottom: 12px;
  font-size: 26px;
  line-height: 1.1;
}

.value__icon {
  background-color: var(--color-accent-secondary);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 66px;
  padding: 19px;
  display: flex;
}

.value__icon svg {
  fill: #0d59aa;
  width: 28px;
  height: 28px;
}

@media (width <= 1439px) {
  .value {
    max-width: 333px;
  }
  .values-swiper {
    overflow: visible;
  }
}

@media (width >= 1440px) {
  .values {
    padding: 170px 0;
  }

  .values__box-wrap {
    grid-template-rows: auto 54px;
    grid-template-columns: auto 1024px;
    justify-content: center;
    display: grid;
  }

  .values__box {
    grid-column: 1 / 2;
  }

  .values__box--swiper {
    grid-area: 1 / 2 / 3 / 3;
    width: 100%;
  }
}

.team {
  padding: 80px 0;
}

.team__title {
  margin-bottom: 50px;
}

.team__subtitle {
  margin-bottom: 24px;
}

.team-swiper {
  overflow: visible;
}

.team-list {
  align-items: flex-end;
  height: 420px;
}

.team-member {
  width: fit-content;
  max-height: 392px;
  transition: var(--transition--e200);
  border-radius: 8px;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.team-member.swiper-slide-active {
  max-height: 100%;
}

.team-member__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: var(--transition--e200);
}

.team-member__desc {
  width: 100%;
  height: 180px;
  color: var(--color-white);
  background: linear-gradient(#03090f00 0%, #03090f 100%);
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 24px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.team-member__name {
  font-size: 22px;
}

@media (width <= 1439px) {
  .team-swiper-btn-wrap {
    margin-top: 32px;
  }
}

@media (width >= 768px) {
  .team__container--temp {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (width >= 1440px) {
  .team {
    padding: 100px 0 10px;
  }

  .team-swiper-btn-wrap {
    margin: 0;
    position: absolute;
    top: -100px;
    right: 40px;
  }

  .team-list {
    height: 455px;
  }

  .team-member.swiper-slide-active {
    min-width: 437px;
  }

  .team__container--temp {
    padding-left: 0;
    padding-right: 0;
  }
}

.licenses {
  padding: 20px 0 52px;
}

.licenses__container {
  flex-direction: column;
  gap: 50px;
  display: flex;
}

.licenses__title {
  margin-bottom: 16px;
}

.licenses__subtitle {
  margin-bottom: calc(24px - var(--gap));
}

.licenses__box-wrap {
  grid-template-columns: 1fr;
  gap: 16px;
  display: grid;
}

.licenses__box-title {
  margin-bottom: 16px;
  font-size: 26px;
  line-height: 1.1;
}

.licenses__img {
  object-fit: cover;
  object-position: left 50% top 30%;
  border-radius: 16px;
  width: 100%;
  height: 336px;
}

.licenses-details {
  justify-content: space-between;
  gap: 16px;
  display: flex;
}

.features__list {
  counter-reset: item;
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.feature {
  --d: 32px;
  --p: 24px;
  padding: var(--p);
  padding-top: calc(var(--p) + 12px + var(--d));
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  flex-direction: column;
  gap: 8px;
  display: flex;
  position: relative;
}

.feature:before {
  counter-increment: item;
  content: counter(item) ".";
  top: var(--p);
  left: var(--p);
  width: var(--d);
  height: var(--d);
  color: var(--color-accent-primary);
  background-color: var(--color-accent-secondary);
  font-size: 16px;
  font-weight: 500;
  position: absolute;
}

.feature__title {
  font-size: 22px;
  line-height: 1.1;
}

.feature__text {
  font-size: 16px;
}

@media (width >= 1440px) {
  .licenses {
    padding: 80px 0;
  }

  .licenses__box-wrap {
    grid-template-columns: auto 262px 672px;
    gap: 32px 10px;
  }

  .licenses__box--img {
    grid-area: 1 / 2 / 3 / 3;
  }

  .licenses__box--features {
    grid-area: 1 / 3 / 3 / 4;
  }

  .licenses__box--actions {
    grid-area: 3 / 3 / 4 / 4;
  }

  .licenses__box-title {
    margin-bottom: 24px;
    margin-right: 20px;
    font-size: 28px;
  }

  .licenses__img {
    height: 100%;
  }

  .feature {
    padding-top: var(--p);
    padding-left: calc(44px + var(--d));
    padding-right: 32px;
  }

  .feature:before {
    left: 32px;
  }

  .feature__title {
    align-items: center;
    height: 32px;
    display: flex;
  }

  .licenses-details {
    flex-direction: column;
    justify-content: flex-end;
    gap: 24px;
  }
}

.contacts {
  padding: 20px 0 50px;
}

@media (width >= 1440px) {
  .contacts {
    padding: 100px 0 88px;
  }
}