@charset "UTF-8";
@font-face {
  font-family: "RobotoSlab";
  src: url("../fonts/RobotoSlab-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "RobotoSlab";
  src: url("../fonts/RobotoSlab-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "RobotoSlab";
  src: url("../fonts/RobotoSlab-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Rodchenko";
  src: url("../fonts/Rodchenko.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
:root {
  --font-family: "RobotoSlab";
  --base-font-size: 18px;
  --wrapper: min(1210px, 100% - 60px);
  --clr-white: #fff;
  --clr-bg: #EAE9E4;
  --clr-black: #000;
  --clr-sect1: #07163C;
  --clr-sect2: #123F6C;
  --clr-sect3: #546678;
  --clr-sect4: #757854;
  --clr-red: #F22424;
  --radius: 20px;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

body {
  background: var(--clr-bg);
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: normal;
  margin: 0;
  position: relative;
}

.top-bg-image {
  width: 100%;
  max-width: 1498px;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: calc(50% - 80px);
  transform: translateX(-50%);
  overflow: hidden;
  z-index: -1;
}

.header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 145px;
  padding-block: 40px 45px;
  display: flex;
  align-items: center;
  z-index: 9999;
  transition: ease 0.3s;
}
.header.scrolled {
  background: rgba(234, 233, 228, 0.9019607843);
}

.container {
  position: relative;
  width: var(--wrapper);
  margin-inline: auto;
}

.main-menu {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
.main-menu > * {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  color: var(--clr-white);
  text-decoration: none;
  text-align: center;
  height: 57px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.25);
  flex: 0 0 217px;
}
.main-menu > *:first-child {
  background: var(--clr-sect1);
}
.main-menu > *:nth-child(2) {
  background: var(--clr-sect2);
}
.main-menu > *:nth-child(3) {
  background: var(--clr-sect3);
  padding-inline: 20px;
}
.main-menu > *:nth-child(4) {
  background: var(--clr-sect4);
}

.section1 {
  --clr-sect-current: var(--clr-sect1);
  background: url(../img/sect1-bg.png), url(../img/sect2-bg.png);
  background-repeat: no-repeat;
  background-position: left 66%, right 100%;
}

.section2 {
  --clr-sect-current: var(--clr-sect2);
  background: url(../img/sect3-bg.png), url(../img/sect4-bg.png);
  background-repeat: no-repeat;
  background-position: left 30%, right 78%;
}

.section3 {
  --clr-sect-current: var(--clr-sect3);
  background: url(../img/sect5-bg.png);
  background-repeat: no-repeat;
  background-position: right 65%;
}

.section4 {
  --clr-sect-current: var(--clr-sect4);
}

.section2, .section3, .section4 {
  padding-top: 55px;
  position: relative;
}
.section2::before, .section3::before, .section4::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 55px;
  top: 0;
  left: 0;
  background: url(../img/section-top.svg) repeat-x;
  background-size: cover;
  z-index: -2;
}
.section2::after, .section3::after, .section4::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1350px;
  left: 0;
  top: 52px;
  background: linear-gradient(180deg, #F8F7F7 0%, #EAE9E4 100%);
  z-index: -1;
}

h1 {
  font-family: "Rodchenko";
  font-size: 50px;
  line-height: 90%;
  color: #3e5287;
  margin-block: 0;
}

h2 {
  color: #7B0303;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  line-height: 1.4;
  margin-block: 30px 50px;
}

.d-flex {
  display: flex;
}

.jc-center {
  justify-content: center;
}

.anons {
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-block: 300px 60px;
}
.anons .item {
  width: calc(33.33% - 20px);
}
.anons .item:first-child {
  position: relative;
  padding-right: 30px;
}
.anons .item:first-child::after {
  content: url(../img/top-bg2.png);
  position: absolute;
  left: -130px;
  top: calc(100% - 30px);
  z-index: -1;
}
.anons .item:first-child p {
  position: relative;
}
.anons .item:first-child p::before {
  content: "";
  position: absolute;
  display: block;
  width: calc(100% + 58px);
  height: calc(100% + 118px);
  top: -59px;
  left: -28px;
  background: url(../img/top-bg3.png) center/cover no-repeat;
  z-index: -2;
}
.anons .item:nth-child(2) {
  margin-top: 85px;
}
.anons .item:last-child {
  margin-top: 160px;
}
.anons p {
  margin: 0 0 20px;
}

.row {
  margin-bottom: 100px;
}
.row .text {
  display: flex;
  gap: 30px;
  line-height: 1.7;
}
.row .text p {
  margin-block: 0 20px;
}
.row .text p:last-child {
  margin: 0;
}
.row .text p.title {
  font-weight: 700;
}
.row .text p.title + .red {
  margin-top: -20px;
}
.row .text p.red {
  color: var(--clr-red);
  font-size: 20px;
  font-weight: 300;
}
.row .text .left {
  width: calc(50% - 15px);
}
.row .text .right {
  width: calc(50% - 15px);
}
.row .picture {
  display: flex;
}
.row .slider-block {
  display: flex;
  gap: 30px;
  align-items: flex-end;
}
.row .slider-block .text-wrap {
  width: calc(50% + 207px);
  margin-block: auto 0;
  background: var(--clr-sect-current);
  border-radius: 20px;
  display: flex;
  align-items: center;
  color: var(--clr-white);
  line-height: 1.7;
  padding-block: 40px 50px;
  position: relative;
  transition: ease 0.5s;
}
.row .slider-block .text-wrap .descr {
  transition: ease 0.3s;
}
.row .slider-block .text-wrap svg {
  width: 50px;
  height: 20px;
}
.row .slider-block .text-wrap .slider-prev {
  position: absolute;
  bottom: 22px;
  width: 50px;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  scale: -1 1;
}
.row .slider-block .text-wrap .slider-next {
  position: absolute;
  bottom: 22px;
  width: 50px;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.row .slider-block .slider-wrap {
  width: calc(50% - 15px);
  margin-bottom: 70px;
}
.row .slider-block .slider-wrap .swiper-wrapper {
  height: 100%;
}
.row .slider-block .slider-wrap .swiper-slide {
  height: auto;
}
.row .slider-block .slider-wrap .swiper-slide .picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.row .slider-block .slider-wrap .swiper-slide .picture img {
  max-width: 100%;
}
.row .slider-block .slider-wrap .swiper-slide .text {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  padding-right: 50px;
  padding-block: 34px;
}
.row .slider-block__left .text-wrap {
  order: 1;
  margin-inline: -207px 0;
  padding-inline: 207px 50px;
}
.row .slider-block__left .text-wrap .slider-prev {
  right: unset;
  left: -80px;
}
.row .slider-block__left .text-wrap .slider-prev svg path {
  fill: var(--clr-sect-current);
}
.row .slider-block__left .text-wrap .slider-next {
  right: unset;
  left: 30px;
}
.row .slider-block__left .text-wrap .slider-next svg path {
  fill: var(--clr-white);
}
.row .slider-block__right .text-wrap {
  order: 0;
  margin-inline: 0 -207px;
  padding-inline: 50px 207px;
}
.row .slider-block__right .text-wrap .slider-prev {
  left: unset;
  right: 30px;
}
.row .slider-block__right .text-wrap .slider-prev svg path {
  fill: var(--clr-white);
}
.row .slider-block__right .text-wrap .slider-next {
  right: -80px;
  left: unset;
}
.row .slider-block__right .text-wrap .slider-next svg path {
  fill: var(--clr-sect-current);
}

.row1 .slider-block {
  margin-top: -170px;
}

.row2 .slider-block {
  margin-top: -170px;
}

.row3 .slider-block {
  margin-top: -250px;
}

.row4 .slider-block {
  margin-top: -270px;
}
.row4 .slider-block .ml {
  margin-left: -100px;
}

.row5 .slider-block {
  margin-top: -100px;
}
.row5 .slider-block .ml {
  margin-left: 100px;
}

.row6 .slider-block {
  margin-top: -210px;
}

.row8 .slider-block {
  margin-top: -70px;
}

.row9 .slider-block {
  margin-top: -180px;
  margin-bottom: 25px;
}

.row10 {
  margin-bottom: 200px;
}
.row10 .slider-block {
  margin-top: -220px;
}

.row11 .slider-block {
  margin-top: -230px;
}

.row12 {
  margin-bottom: 200px;
}
.row12 .slider-block {
  margin-top: -70px;
}

.row13 .slider-block {
  margin-top: -180px;
}

.row14 .d-flex {
  gap: 30px;
}

.row15 {
  margin-bottom: 200px;
}
.row15 .slider-block {
  margin-top: -170px;
}
.row15 .slider-block .ml {
  margin-left: 100px;
}

.row16 .slider-block {
  margin-top: -200px;
}
.row16 .slider-block .ml {
  margin-left: -100px;
}

.row17 .slider-block {
  margin-top: -120px;
}

.row18 .right {
  position: relative;
}
.row18 .slider-block {
  margin: 0;
  margin-top: 50px;
}
.row18 .slider-block .text-wrap {
  position: absolute;
  width: 100%;
  top: 110px;
  height: calc(100% - 160px) !important;
  margin-inline: 0;
  padding-inline: 40px;
  display: flex;
  align-items: flex-end;
}
.row18 .slider-block .text-wrap .descr {
  margin-right: 70px;
}
.row18 .slider-block .text-wrap .slider-prev, .row18 .slider-block .text-wrap .slider-next {
  bottom: 100px;
}
.row18 .slider-block .slider-wrap {
  width: calc(100% - 80px);
  margin-inline: 40px;
}

.row19 {
  width: calc(100% - 140px);
  margin-inline: 70px;
}
.row19 .block-wrap {
  display: flex;
  gap: 0;
  max-width: 2020px;
  margin-inline: auto;
}
.row19 .block-wrap .item {
  border-radius: 20px;
  background: var(--clr-sect-current);
  margin-top: 70px;
  color: var(--clr-white);
  padding-inline: 30px;
  padding-bottom: 35px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.row19 .block-wrap .item .picture {
  margin-block: -45px 30px;
  margin-left: -15px;
}
.row19 .block-wrap .item .picture img {
  max-width: 100%;
}
.row19 .block-wrap .item .text {
  margin-block: auto 0;
}
.row19 .block-wrap .item:first-child {
  margin-right: 5vw;
}
.row19 .block-wrap .item:first-child .picture {
  width: calc(100% - 15px + 7.3vw);
  aspect-ratio: 659/441;
}
.row19 .block-wrap .item:nth-child(2) {
  margin-right: 2vw;
}
.row19 .block-wrap .item:nth-child(2) .picture {
  width: calc(100% - 15px + 4vw);
  aspect-ratio: 590/441;
}
.row19 .block-wrap .item:last-child {
  margin-right: 4vw;
}
.row19 .block-wrap .item:last-child .picture {
  width: calc(100% - 15px + 7vw);
  aspect-ratio: 665/440;
}

.section-logo .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: 150px 120px;
}
.section-logo::after {
  content: url(../img/sect2-bg.png);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.footer {
  position: relative;
  padding-block: 50px 150px;
  background: #757854;
}
.footer::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 70px;
  top: -68px;
  left: 0;
  background: url(../img/footer-top.svg) repeat-x;
  background-size: cover;
}
.footer .thanks {
  text-align: center;
  font-size: 50px;
  line-height: 1.7;
  font-family: "Rodchenko";
  margin-bottom: 50px;
  color: #fef8f8;
}
.footer .button-row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.footer a {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  color: var(--clr-white);
  font-size: 20px;
  text-decoration: none;
}
.footer a span {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--clr-white);
}

.modal-video {
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: var(--radius);
  padding: 50px;
  max-width: 1200px;
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: 0.25s;
  z-index: 99;
  pointer-events: none;
}
.modal-video.is-active {
  top: 50%;
  opacity: 1;
  pointer-events: inherit;
}
.modal-video .close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 30px;
  background: #fff;
  border-radius: var(--radius);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 50;
  transition: 0.6s;
}
.overlay:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
  z-index: -1;
}
.overlay.is-active {
  pointer-events: inherit;
  opacity: 1;
}

video {
  border-radius: var(--radius);
  max-width: 100%;
  /* Скрываем элементы управления громкостью */
  /* Для Firefox */
  /* Общие стили для всех браузеров */
}
video::-webkit-media-controls-settings-button {
  display: none !important;
}
video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-mute-button {
  display: none !important;
}
video::-moz-range-track {
  display: none !important;
}
video::-webkit-media-controls-panel {
  -webkit-appearance: none;
}

.video-label {
  position: fixed;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #F12525;
  border-radius: 50px 0 0 50px;
  color: #fff;
  transition: 1s;
  z-index: 6;
}
.video-label.is-active {
  right: -100%;
}