/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./frontend/src/scss/pages/mission/index.scss ***!
  \*************************************************************************************************************************************/
html {
  --theme-buy-bg: #FFFFFF;
  --theme-btn-primary-hover: #E0A6B2;
  --theme-btn-primary-active: #D497A3;
  --theme-primary-color: #DE8696;
  --theme-ui-primary-color: #E5C1C8;
  --theme-ui-primary-color-hover: #E36279;
  --theme-ui-primary-color-active: #A44F5E;
  --theme-secondary-bg: #FFFFFF;
  --theme-header-border: #FDF7F8;
  --theme-text-color: #585858;
  --theme-button-shadow: .7rem .7rem 1.8rem #AC818966;
  --theme-black: rgba(88, 88, 88, 1);
  --theme-black-075: rgba(88, 88, 88, .75);
  --theme-black-05: rgba(88, 88, 88, .5);
  --theme-black-03: rgba(88, 88, 88, .3);
  --theme-black-005: rgba(88, 88, 88, .05);
  --theme-product-hero-bg: #FDF7F8;
  --theme-modal-overlay: rgba(198, 176, 180, 0.4);
  --theme-primary-bg: #FFFFFF;
  --theme-subfilter-bg: #FFFFFF;
  --theme-article-content-bg: rgba(255, 255, 255, 0.75);
}

html[data-theme=dark-theme] {
  --theme-buy-bg: #D0E5FF;
  --theme-btn-primary-hover: #008589;
  --theme-btn-primary-active: #007E83;
  --theme-primary-color: #20A7AB;
  --theme-ui-primary-color: #20A7AB;
  --theme-ui-primary-color-hover: #008589;
  --theme-ui-primary-color-active: #007E83;
  --theme-secondary-bg: #3B4D64;
  --theme-header-border: #6C7B8F;
  --theme-text-color: #FFFFFF;
  --theme-button-shadow: 7px 7px 18px 0px #20A7AB3D;
  --theme-black: rgba(40, 58, 81, 1);
  --theme-black-075: rgba(40, 58, 81, .75);
  --theme-black-05: rgba(40, 58, 81, .5);
  --theme-black-03: rgba(40, 58, 81, .3);
  --theme-black-005: rgba(40, 58, 81, .05);
  --theme-product-hero-bg: #394A5F;
  --theme-modal-overlay: rgba(40, 58, 81, .5);
  --theme-primary-bg: #4E5F74;
  --theme-subfilter-bg: #3B4D64;
  --theme-article-content-bg: rgba(57, 74, 95, 0.75);
}

.banner {
  position: relative;
  display: grid;
  justify-items: center;
}
.banner__bg {
  position: relative;
  width: 100%;
  z-index: -1;
}
.banner__btn {
  flex: 1;
}
.banner__btns {
  position: absolute;
  display: flex;
  gap: 3.2rem;
  z-index: 2;
  width: 59.2rem;
  top: 36.8rem;
}
@media (max-width: 1024px) {
  .banner__btns {
    width: 51.2rem;
    top: 25rem;
    gap: 1.2rem;
  }
}
@media (max-width: 667px) {
  .banner__btns {
    width: calc(100% - 3.2rem);
    display: grid;
    top: 42.2rem;
  }
}
.banner__description {
  font-size: 2.4rem;
  line-height: 1.2;
  width: 100%;
  padding: 8rem 17rem 0;
}
@media (max-width: 667px) {
  .banner__description {
    padding: 3.2rem 2rem 0;
  }
}

@media (max-width: 667px) {
  .mission-block {
    padding: 0 !important;
  }
}
.mission-block__top-banner {
  position: relative;
  display: grid;
  align-items: center;
}
@media (max-width: 667px) {
  .mission-block__top-banner {
    align-items: start;
  }
}
.mission-block__bg {
  position: relative;
  width: 100%;
  z-index: -1;
}
.mission-block__content {
  display: grid;
  gap: 2.4rem;
  max-width: 61.2rem;
  width: 100%;
  position: absolute;
  left: 8rem;
}
@media (max-width: 1024px) {
  .mission-block__content {
    max-width: 52rem;
  }
}
@media (max-width: 667px) {
  .mission-block__content {
    left: 0;
    gap: 1.6rem;
    padding: 3.2rem 1.6rem;
  }
}
.mission-block__title {
  font-weight: 450;
}
.mission-block__description {
  font-size: 2rem;
}

.project {
  display: grid;
  gap: 2rem;
}
@media (max-width: 667px) {
  .project {
    padding: 0 1.6rem;
  }
}
@media (max-width: 667px) {
  .project__title {
    padding: 0;
  }
}

.ambassador {
  display: grid;
  gap: 2rem;
}

.video {
  background: #F4E3E9;
}
.video__icon {
  opacity: 0.9;
  transition: opacity 0.3s;
  position: absolute;
  width: 10rem;
  height: 10rem;
  z-index: 10;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width=%27100%27 height=%27100%27 viewBox=%270 0 100 100%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg filter=%27url%28%23filter0_b_6806_28152%29%27%3E%3Crect width=%27100%27 height=%27100%27 rx=%2750%27 fill=%27white%27 fill-opacity=%270.75%27/%3E%3Cpath d=%27M64.0083 47.4361L42.7983 34.7311C42.3446 34.4692 41.8303 34.3306 41.3065 34.3291C40.7827 34.3276 40.2676 34.4634 39.8125 34.7228C39.3574 34.9822 38.9782 35.3562 38.7125 35.8077C38.4468 36.2592 38.304 36.7723 38.2983 37.2961L38.2983 62.7061C38.304 63.2299 38.4468 63.7431 38.7125 64.1946C38.9781 64.646 39.3574 65.0201 39.8125 65.2795C40.2676 65.5389 40.7827 65.6746 41.3065 65.6731C41.8303 65.6717 42.3446 65.5331 42.7983 65.2711L64.0083 52.5661C64.4491 52.2987 64.8136 51.9222 65.0666 51.4729C65.3195 51.0236 65.4524 50.5167 65.4524 50.0011C65.4524 49.4855 65.3195 48.9786 65.0666 48.5293C64.8136 48.08 64.4491 47.7035 64.0083 47.4361Z%27 fill=%27%23DE8696%27/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id=%27filter0_b_6806_28152%27 x=%27-6%27 y=%27-6%27 width=%27112%27 height=%27112%27 filterUnits=%27userSpaceOnUse%27 color-interpolation-filters=%27sRGB%27%3E%3CfeFlood flood-opacity=%270%27 result=%27BackgroundImageFix%27/%3E%3CfeGaussianBlur in=%27BackgroundImageFix%27 stdDeviation=%273%27/%3E%3CfeComposite in2=%27SourceAlpha%27 operator=%27in%27 result=%27effect1_backgroundBlur_6806_28152%27/%3E%3CfeBlend mode=%27normal%27 in=%27SourceGraphic%27 in2=%27effect1_backgroundBlur_6806_28152%27 result=%27shape%27/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
}
.video__container {
  padding: 2rem 0;
  display: grid;
  justify-items: center;
  align-items: center;
}
@media (max-width: 667px) {
  .video__container {
    padding: 2.5rem 0;
  }
}
.video__box {
  width: 90rem;
  height: 50rem;
  position: relative;
  box-shadow: 0px 0px 2.8rem 0px rgba(181, 137, 149, 0.7490196078);
  border: 0.2rem solid rgb(255, 255, 255);
}
@media (max-width: 667px) {
  .video__box {
    width: 100%;
    height: 21rem;
    border: none;
  }
}
.video__instance {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.video__preview {
  position: absolute;
  width: calc(100% + 0.2rem);
  height: calc(100% + 0.2rem);
  top: -0.1rem;
  left: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  z-index: 5;
}
.video__preview img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video__preview:hover .video__icon {
  opacity: 1;
}
.video__container {
  position: relative;
}

.redirect__content {
  display: grid;
  background: #F4E3E9;
  gap: 3.2rem;
  padding: 4rem 20rem;
  text-align: center;
  justify-items: center;
}
@media (max-width: 1024px) {
  .redirect__content {
    padding: 4rem;
  }
}
@media (max-width: 667px) {
  .redirect__content {
    padding: 4rem 1.6rem;
  }
}
.redirect__text {
  font-size: 2.4rem;
  line-height: 4rem;
  color: var(--theme-primary-color);
  font-weight: 500;
  text-transform: uppercase;
}
.redirect__text a {
  text-decoration: underline;
  text-underline-offset: 0.5rem;
}
@media (max-width: 667px) {
  .redirect__text {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
}

.numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 667px) {
  .numbers {
    grid-template-columns: 1fr;
  }
}
.numbers__position {
  align-content: start;
  gap: 1.2rem;
  display: grid;
  padding: 4rem 3.2rem;
  background: #F4E3E9;
  border: 0.1rem solid var(--theme-primary-color);
  margin-right: -0.1rem;
}
@media (max-width: 667px) {
  .numbers__position {
    gap: 0.8rem;
    align-content: center;
    padding: 0 2.6rem;
    height: 22rem;
    text-align: center;
    margin-right: 0;
    margin-top: -0.1rem;
  }
}
.numbers__position a {
  color: var(--theme-primary-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5rem;
}
.numbers__number {
  font-size: 4.8rem;
  line-height: 1.3;
  font-weight: 450;
  color: var(--theme-primary-color);
  text-decoration: none !important;
}
@media (max-width: 667px) {
  .numbers__number {
    font-size: 4.6rem;
  }
}
.numbers__text {
  font-size: 2rem;
}

.article-card {
  display: block;
  width: 100%;
  height: 100%;
}
.article-card__container {
  position: relative;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.article-card__types {
  display: flex;
  grid-gap: 1.2rem;
  color: #DE8696;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
}
.article-card__content {
  padding: 1.2rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: var(--theme-article-content-bg);
  backdrop-filter: blur(3px);
  z-index: 2;
}
.article-card__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.3s;
  z-index: 1;
}
.article-card__description {
  font-size: 2rem;
  height: 4.8rem;
  display: grid;
  align-items: center;
}
@media (max-width: 667px) {
  .article-card__description {
    height: 3.8rem;
  }
}
.article-card:hover .article-card__img {
  transform: scale(1.1);
}

.advice {
  display: grid;
  grid-gap: 2.4rem;
}
@media (max-width: 667px) {
  .advice {
    padding: 0;
    grid-gap: 2rem;
  }
}
@media (min-width: 667px) {
  .advice__splide[data-type=big] .advice__container {
    display: grid !important;
    grid-template-areas: "big-1 small-1 small-2" "big-1 small-3 small-4";
    grid-gap: 1.6rem;
    grid-template-columns: 1fr 32.6rem 32.6rem;
    grid-template-rows: 26.4rem 26.4rem;
  }
}
@media (min-width: 667px) {
  .advice__splide[data-type=big] .advice__item:nth-child(1) {
    grid-area: big-1;
  }
  .advice__splide[data-type=big] .advice__item:nth-child(1) .article-card__content {
    padding: 2rem;
  }
  .advice__splide[data-type=big] .advice__item:nth-child(1) .article-card__types {
    font-size: 1.6rem;
  }
  .advice__splide[data-type=big] .advice__item:nth-child(1) .article-card__description {
    font-size: 2.4rem;
    line-height: 2.8rem;
    height: 5.6rem;
  }
}
.advice__btn {
  justify-self: center;
}
@media (max-width: 667px) {
  .advice__title {
    padding: 0 1.6rem;
  }
}

.mission__content {
  display: grid;
  grid-gap: 5.6rem;
}
@media (max-width: 667px) {
  .mission__content {
    grid-gap: 4rem;
  }
}
.mission__disclaimer {
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  line-height: 2.2rem;
  font-weight: 400;
  opacity: 0.6;
  max-width: 94rem;
}
