@font-face {
  font-family: 'Muller';
  src: url('../fonts/MullerMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Muller';
  src: url('../fonts/MullerLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-white: #FFFFFF;
  --color-blue-dark: #122D59;
  --color-muted: #181B2ACC;
  --color-muted-light: #91A1BA;
  --color-blue-light: #E1E7EC;
  --color-blue: #181B2A;
}

body {
  background-color: var(--color-white);
  color: #181B2A;
}
header {
  z-index: 100;
  top: -99px;
}
header a {
  align-content: center;
}

header .menu-pc {
  margin-left: 100px;
  flex-direction: row;
  column-gap: 50px;
  font-family: Rubik;
  font-weight: 300;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
}
.first-block.scroll {
  padding-top: 70px;
}
.first-block.scroll header {
  transition: 0.3s linear;
  padding-bottom: 15px;
  padding-top: 15px;
  background: var(--color-blue-dark);
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0;
}

.container-block {
  padding-left: 20px;
  padding-right: 20px;
}
.first-block {
  position: relative;
  padding-bottom: 40px;
  color: var(--color-white);
}
.first-block:after {
  content: '';
  height: 100%;
  width: 100%;
  background-image: url(../images/first-block-mobile.jpg);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
}

.first-block .content-block {
  margin-top: 80px;
}
.first-block .content-block .h1-subtitle {
  margin-top: 25px;
  font-family: Rubik;
  font-weight: 300;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
}
.first-block .content-block button {
  margin-top: 30px;
}
.first-block .content-block .flex {
  row-gap: 18px;
  margin-top: 40px;
  flex-direction: column;
}

#menuBtn {
  background-image: url(../images/burger.svg);
  width: 25px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
}

button {
  font-family: Muller;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
  padding: 13px 30px;
  background-color: var(--color-white);
  border-radius: 7px;
  color: var(--color-blue-dark);
  cursor: pointer;
  align-content: center;
}
.menu-mobile {
  width: 100%;
  position: absolute;
  z-index: 100;
  left: 0;
  background-color: var(--color-blue-dark);
}
.menu-mobile .menu-list {
  /*display: none;*/
  background-color: white;
  display: flex;
  flex-direction: column;
  color: black;
  margin-top: 35px;
  border-radius: 10px;
  margin-bottom: 35px;
}
.menu-mobile a {
  padding: 15px;
  text-align: center;
  border-bottom: 0.7px solid #E1E7EC;
  font-family: Rubik;
  font-weight: 300;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
}
.menu-mobile a:last-child {
  border-bottom: none;
}
.menu-mobile {
  display: none;
}
.first-block.show-menu .menu-mobile {
  display: block;
}
.first-block.show-menu #menuBtn {
  background-image: url(../images/close.svg);
}

.first-block.show-menu header {
  background-color: var(--color-blue-dark);
}

button:hover {
  background-color: #ECECEC;
}
button:active {
  background-color: #E1E7EC;
}

button.b-outline-dark-blue:hover {
  background-color: #36527F;
  color: #FFFFFF;
}
button.b-outline-dark-blue:active {
  background-color: #122D59;
  color: #FFFFFF;
}

.modal {
  padding: 20px 15px;
  overflow: unset;
}
.modal h3 {
  font-family: Muller;
  font-weight: 500;
  font-size: 22px;
  line-height: 120%;
  letter-spacing: 0%;
  color: #122D59;
}
.modal .modal-header {
  position: relative;
}
.modal .modal-header .modal-cls-btn {
  position: absolute;
  top: -10px;
  left: calc(100% - 39px);
  background-image: url(../images/close-small.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 16px;
  width: 16px;
}
.modal .sub-title {
  font-family: Rubik;
  font-weight: 300;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
  color: #181B2A;
  margin-top: 10px;
}
.modal form {
  margin-top: 20px;
}
.modal form button {
  margin-top: 10px;
}

.form-control label {
  font-family: Rubik;
  font-weight: 300;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0%;
  margin-bottom: 8px;
}
.form-control input, .form-control textarea {
  font-family: Rubik;
  font-weight: 300;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
  padding: 12px 14px;
  border: 1px solid #E1E7EC;
  width: 100%;
  border-radius: 10px;
  outline: none;
}

/* Общий контейнер-обертка */
.custom-checkbox {
  display: inline-flex;
  align-items: center; /* Центрируем квадрат и текст по вертикали */
  gap: 12px; /* Расстояние между квадратом и текстом */
  cursor: pointer;
  user-select: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Полностью скрываем дефолтный браузерный чекбокс */
.custom-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Стилизуем наш кастомный квадрат */
.checkbox-box {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #dcdcdc; /* Светло-серая рамка с макета */
  border-radius: 4px; /* Плавные скругленные уголки */
  background-color: #fff;
  transition: all 0.2s ease;
}

/* Описание внешнего вида галочки внутри квадрата (по умолчанию скрыта) */
.checkbox-box::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  /* Рисуем галочку с помощью двух рамок прямоугольника */
  border: solid #0e1a34; /* Синий цвет галочки (в тон вашему проекту) */
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); /* Поворачиваем и уменьшаем */
  transition: transform 0.2s ease;
}

/* Стили для текста */
.checkbox-text {
  font-size: 14px;
  color: #181B2A;
  font-family: Rubik;
  font-weight: 300;
  line-height: 130%;
  letter-spacing: 0%;
}

/* ЭФФЕКТЫ ПРИ ВЗАИМОДЕЙСТВИИ: */

/* 1. Эффект наведения мыши (рамка становится чуть темнее) */
.custom-checkbox:hover .checkbox-box {
  border-color: #b5b5b5;
}

/* 2. Состояние, когда чекбокс выбран (активен) */
.custom-checkbox input:checked + .checkbox-box {
  border-color: #0e1a34; /* Меняем цвет рамки на основной */
}

/* Показываем галочку при активации */
.custom-checkbox input:checked + .checkbox-box::after {
  transform: rotate(45deg) scale(1); /* Возвращаем к нормальному размеру */
}

/* 3. Эффект для доступности (подсветка при переключении с клавиатуры через Tab) */
.custom-checkbox input:focus-visible + .checkbox-box {
  outline: 2px solid #0e1a34;
  outline-offset: 2px;
}





.card-1 {
  border-radius: 7px;
  border: 1px solid #E1E7EC;
  padding: 15px;
  color: #E1E7EC;
}
.card-1 .title {
  font-family: Rubik;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
}
.card-1 .subtitle {
  font-family: Rubik;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0%;
  margin-top: 8px;
}

.card-2 {
  padding: 22px 20px;
  background-color: #E1E7EC;
  border-radius: 12px;
  position: relative;
}
.card-2 .card-body {
  display: flex;
  flex-direction: row;
  column-gap: 12px;
}
.card-2 .img-block {
  flex-shrink: 0;
}
.card-2 img {
  height: 40px;
  width: 40px;
}
.card-2 .title {
  font-family: Rubik;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
  color: var(--color-blue-dark)
}
.card-2 .subtitle {
  font-family: Rubik;
  font-weight: 300;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0%;
  margin-top: 6px;
}
.card-2.bg-blue-dark {
  color: white;
}
.card-2.bg-blue-dark .title {
  color: white;
}

.card-3 {
  height: 267px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  color: white;
  padding: 20px;
  position: relative;
}
.card-3:after {
  content: '';
  position: absolute;
  inset: 0; /* Растягиваем на всю площадь */
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(14, 26, 52, 0) 65%, rgba(14, 26, 52, 0.4) 68%, #122D59);
  border-radius: 10px;
}
.card-3 .title {
  margin-top: auto;
  font-family: Rubik;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
  z-index: 2;
}
.card-3 .sub-title {
  font-family: Rubik;
  font-weight: 300;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0%;
  z-index: 2;
}

.card-4 {
  padding: 18px;
  border-radius: 10px;
  position: relative;
}
.card-4.bg-blue-dark {
  color: white;
}
.card-4 .title {
  font-family: Rubik;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
}
.card-4.bg-white .title {
  color: var(--color-blue-dark);
}
.card-4.bg-white .sub-title {
  color: var(--color-blue);
}

.card-4 .sub-title {
  font-family: Rubik;
  font-weight: 300;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0%;
}
.card-4.bg-gradient-1 {
  color: white;
}

.b-outline-dark-blue {
  border: 1px solid var(--color-blue-dark);
}

/* colors */
.c-black {
  color: black;
}

.h2 {
  font-family: Muller;
  font-weight: 500;
  font-size: 26px;
  line-height: 120%;
  letter-spacing: 0%;
  color: var(--color-blue-dark);
}
.txt-1-light, .txt-1-l {
  font-family: Rubik;
  font-weight: 300;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
}
.txt-1-m {
  font-family: Rubik;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0%;
}

.txt-muted {
  color: var(--color-muted);
}
.txt-muted-light {
  color: var(--color-muted-light);
}

/* background */
.bg-blue-light {
  background-color: var(--color-blue-light);
}
.bg-blue-dark {
  background-color: var(--color-blue-dark);
}
.bg-white {
  background-color: white;
}
.bg-gradient-1 {
  background: linear-gradient(37.87deg, #34446F 3.7%, #52618A 24.47%, #637098 50.43%, #3F507A 76.39%, #26365F 101.87%);
}

.pt-80 {
  padding-top: 80px;
}
.pb-80 {
  padding-bottom: 80px;
}

h1 {
  font-family: Muller;
  font-weight: 500;
  font-size: 32px;
  line-height: 120%;
  letter-spacing: 0%;
}

.alert-info {
  padding: 12px 14px;
  background-color: #E1E7EC;
  font-family: Rubik;
  font-weight: 300;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0%;
  color: var(--color-blue-dark);
}

footer {
  padding-top: 30px;
  padding-bottom: 30px;
  color: black;
}
footer a {
  font-family: Rubik;
  font-weight: 300;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;
  color: black;
}
footer .block2 {
  text-align: center;
  margin-top: 30px;
}
footer .block2 .uppercase {
  margin-top: 12px;
}
footer .block2 .flex-column {
  margin-top: 10px;
}
footer .block2 .flex-column a:nth-child(1){
  margin-left: auto;
}
footer .block2 .flex-column a:nth-child(2){
  margin-right: auto;
}
footer .block3 {
  margin-top: 20px;
}
footer .block3 hr {
  color: #E0E0E0;
}
footer .block4 .flex {
  flex-direction: column;
  row-gap: 10px;
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}
footer .block1 a:nth-child(3), footer .block1 a:nth-child(4){
  margin-top: 12px;
  margin-bottom: 12px;
}

footer a.phone {
  font-family: Muller;
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;
}
footer p {
  font-family: Muller;
  font-weight: 400;
  font-size: 10px;
  line-height: 130%;
  letter-spacing: 0%;
  text-transform: uppercase;
}
footer .copyright {
  font-family: Muller;
  font-weight: 300;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0%;
  text-align: center;
  color: #7F7F7F;
}

@media (min-width: 768px) {
  .first-block .content-block {
    margin-top: 90px;
  }
  .first-block .content-block button {
    margin-top: 40px;
  }
  .first-block .content-block .flex {
    margin-top: 72px;
    flex-direction: row;
    column-gap: 18px;
  }
  .first-block:after {
    background-image: url(../images/first-block-tablet.jpg);
  }
  .container-block {
    padding-left: 40px;
    padding-right: 40px;
  }
  .card-2 .card-body {
    flex-direction: column;
    row-gap: 15px;
  }
  .h2 {
    font-family: Muller;
    font-weight: 500;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: 0%;
  }
  .section-2 .cards-block {
    column-gap: 18px;
  }
  .pt-80 {
    padding-top: 100px;
  }
  .section-3 .card-2 .card-body {
    flex-direction: row;
    column-gap: 18px;
  }
  .section-3 .cards-block .card-2:after {
    background-size: contain;
    width: 22px;
  }
  .alert-info {
    font-weight: 400;
    font-size: 14px;
  }
  footer .block1 a:nth-child(3), footer .block1 a:nth-child(4){
    margin-top: 0px;
    margin-bottom: 0px;
  }
  footer .block2 {
    margin-top: 0px;
    text-align: right;
  }
  footer .block2 .block2-1 {
    display: flex;
  }

  footer .block2 .uppercase {
    font-size: 12px;
    position: relative;
    left: -10px;
    margin-top: auto;
  }
  footer a {
    text-align: left;
  }
  footer .block4 .flex {
    flex-direction: row;
    justify-content: space-between;
  }
  .modal {
    padding: 30px;
  }
  .form-control label {
    font-size: 16px;
  }
  .form-control input, .form-control textarea {
    padding: 15px;
  }
}

@media (min-width: 1440px) {
  .first-block .content-block {
    margin-top: 130px;
  }
  .first-block .content-block .flex {
    margin-top: 80px;
  }
  .first-block:after {
    background-image: url(../images/first-block-pc.jpg);
  }
  .container-block {
    padding-left: 80px;
    padding-right: 80px;
  }
  .card-2 {
    padding: 25px;
  }
  .section-1 {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .section-1 .txt-1-light:nth-child(2) {
    margin-top: 22px;
  }
  .section-1 .txt-1-light:nth-child(3) {
    margin-top: 30px;
  }
  .section-1 .txt-1-light:nth-child(4) {
    margin-top: 15px;
  }
  .section-1 .link-block {
    margin-top: 37px;
    margin-bottom: 0;
  }
  .card-2 .title {
    font-size: 18px;
  }
  .card-2 .subtitle {
    font-size: 16px;
  }
  .txt-1-light, .txt-1-l {
    font-size: 18px;
    line-height: 140%;
  }
  .h2 {
    font-size: 36px;
  }
  button {
    font-size: 18px;
    height: 50px;
  }
  .pt-80 {
    padding-top: 100px;
  }
  .pb-80 {
    padding-bottom: 120px;
  }
  .card-4 {
    border-radius: 15px;
  }
  .card-4 .title {
    font-size: 18px;
  }
  .card-4 .sub-title {
    font-size: 16px;
  }
  footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  footer a.phone {
    font-size: 32px;
    position: relative;
    top: -10px;
  }
  footer .block2 .uppercase {
    margin-left: auto;
    color: black;
  }
  footer .block4 .flex {
    font-family: Muller;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #7F7F7F;
  }
  footer .block3 {
    margin-top: 30px;
  }
  footer .block4 {
    margin-top: 11px;
  }
  .modal {
    padding: 40px;
  }
  .modal h3 {
    font-size: 28px;
  }
  .modal .sub-title {
    font-size: 18px;
  }
  .form-control input, .form-control textarea {
    font-size: 18px;
  }
  .modal .modal-header .modal-cls-btn {
    top: -25px;
    left: calc(100% - 20px);
  }
  header img {
    height: 40px;
    width: 205.53px;
    margin-left: 6px;
  }
  .first-block {
    padding-bottom: 116px;
  }
  .first-block .content-block .h1-subtitle {
    font-size: 18px;
    line-height: 140%;
  }
  button {

  }
  h1 {
    font-size: 44px;
  }
  .card-1 .subtitle {
    margin-top: 10px;
  }
  .first-block .content-block .flex {
    column-gap: 20px;
  }
  .section-1 .link-block .txt-1-m {
    font-family: Muller;
    font-weight: 500;
    font-size: 18px;
  }
  .card-2 .card-body {
    column-gap: 16px;
    row-gap: 24px;
  }
  .card-2 img {
    height: 50px;
    width: 50px;
  }
  .card-3 .title {
    font-family: Rubik;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
  }
  .card-3 .sub-title {
    font-family: Rubik;
    font-weight: 300;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0%;
  }
  footer a {
    font-size: 16px;
  }
  footer img {
    width: 37px;
    height: 38px;
  }
  footer .block2 .uppercase {
    height: 37px;
    align-content: center;
  }
}