@font-face {
  font-family: "Space Age Cyrillic";
  src: url(../fonts/spaceagecyrillic_regular.ttf);
}

@font-face {
  font-family: 'SegoeUIVariable';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/SegoeUIVariableStaticDisplaySemilight.ttf);
}
@font-face {
  font-family: 'SegoeUIVariable';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/SegoeUIVariableStaticDisplay.ttf);
}
@font-face {
  font-family: 'SegoeUIVariable';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/SegoeUIVariableStaticDisplaySemibold.ttf);
}
@font-face {
  font-family: 'SegoeUIVariable';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/SegoeUIVariableStaticDisplayBold.ttf);
}

.footer {
  padding: 25px 60px;
  background: #F1F7FF;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 30px;
}

.footer-social-logo {
  margin-right: 9px;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.footer-social-item img {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform 0.2s;
}

.footer-social-item:hover img {
  transform: translateY(-5px);
}

.footer-wrapper {
  display: flex;
  align-items: center;
  gap: 57px;
  text-align: center;
}

.footer-item {
  font-size: 16px; 
  color: #5B5B5B !important;
}

.footer-item:hover {
  color: #559BED !important;
}

.doc_modal .modal__wrapper {
  margin-top: 90px;
}

.doc__modal_wrapper {
  max-height: 600px;
  border-radius: 20px;
  width: 700px;
  min-width: 700px;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc__modal_wrapper h3 {
  font-size: 20px;
  font-weight: 600;
}

.doc__modal_descr {
  overflow-x: hidden;
  overflow-y: auto;
}

@media screen and (max-width: 1024px) {
  .footer-wrapper {
    gap: 30px !important;
  }

  .footer-social {
    gap: 20px;
  }
}

@media screen and (max-width: 920px) {
  .footer {
    flex-direction: column;
    gap: 20px;
  }
}

@media screen and (max-width: 848px) {
  .doc_modal .modal__wrapper {
    margin-top: 10%;
  }

  .doc__modal_wrapper {
    width: 500px;
    min-width: 500px;
  }
}

@media screen and (max-width: 750px) {
  .footer-social {
    flex-direction: column;
    gap: 20px;
  }

  .footer-wrapper {
    flex-direction: column;
    gap: 15px !important;
  }
}

@media screen and (max-width: 530px) {
  .doc__modal_wrapper {
    width: 400px;
    min-width: 400px;
  }
}

@media screen and (max-width: 440px) {
  .doc__modal_wrapper {
    width: 370px;
    min-width: 370px;
  }
}