©* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-family: "Nunito", sans-serif;
}

body {
  margin: 0;
}

.container-common h2 {
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/zagolovok */
  font-family: Nunito;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 100% */
}

.container-common a {
  color: inherit;
  text-decoration: underline;
  font-size: inherit;
  cursor: pointer;
}

.container-common p {
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/normal */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 122.222% */
}

main {
  background: #f2f4f5;
  position: relative;
  overflow: hidden;
}

main ul li::before {
  background: #000;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  top: 7px;
}

main ul li:first-child::before {
  top: 7px;
}

main ol > li::before {
  top: 0;
}

.container-common {
  position: relative;
  padding: 24px 16px 32px;
  min-height: 100vh;
  z-index: 1;
}

.modal__inner select option {
  font-family: Nunito;
}

@media (min-width: 540px) {
  .container-common {
    padding-top: 48px;
    padding-bottom: 137px;
    max-width: 360px;
    margin: 0 auto;
  }
}

.footer {
  display: none;
}

.common-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--ui-kit-react-blue, #1249b5);
  padding: 16px 24px;
  color: var(--ui-kit-react-white, #fff);
  text-align: center;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.15s linear;
}

.common-btn:hover {
  background: #0d3fa3;
}

.common-btn:active {
  background: #00297a;
}

/* Back-to-main button */

.back-to-main {
  width: fit-content;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  margin-bottom: 32px;
  border-radius: 8px;
  border: 1px solid var(--ui-kit-react-blue, #1249b5);
  transition: 0.15s linear;
}

.container-common .back-to-main__text {
  color: var(--ui-kit-react-blue, #1249b5);
  text-align: center;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.28px;
  margin-top: 0;
}

.back-to-main__btn {
  color: inherit;
  text-decoration: none;
}

.back-to-main:hover {
  background: rgba(0, 51, 153, 0.05);
}
.back-to-main:active {
  background: var(--UI-kit-react-Blue-15, rgba(0, 51, 153, 0.15));
}

.container-common .back-to-main__btn {
  text-decoration: none;
  color: var(--ui-kit-react-blue, #1249b5);
}

/* Main */

.grid-container {
  margin-top: 24px;
  display: grid;
  gap: 8px;
}

.nav__boxes {
  text-decoration: none;
  width: 100%;
  height: 120px;
  position: relative;
  padding: 12px;
  border-radius: 12px;
  background: #dbe3f5;
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/normal */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 122.222% */
  transition: 0.15s linear;
}

.container-common .nav__boxes {
  text-decoration: none;
}

.about img {
  position: absolute;
  bottom: 0;
  right: 18px;
}

.shareholders img {
  position: absolute;
  bottom: 0;
  right: -2.8px;
}

.rights img {
  position: absolute;
  bottom: 0;
  right: 12px;
}

.green-boxes {
  margin-top: 16px;
}

.green-boxes a {
  text-decoration: none;
}

.nav__green-boxes {
  background: #dff2df;
}

.partners img {
  position: absolute;
  bottom: 0;
  right: 4.39px;
}

.spreader {
  margin-top: 8px;
}

.spreader img {
  position: absolute;
  bottom: 0;
  right: -3.3px;
}

.orange-boxes {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.orange-boxes a {
  text-decoration: none;
  width: 100%;
}

.nav__orange-boxes {
  background: #f6eae1;
}

.vacancies img {
  position: absolute;
  bottom: 0;
  right: 5.35px;
}

.contacts img {
  position: absolute;
  bottom: 0;
  right: 3.58px;
}

.nav__boxes:hover,
.nav__boxes:active {
  transform: scale(1.04);
}

/* About company */

.about-content p {
  margin-top: 8px;
  margin-bottom: 40px;
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/normal */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 122.222% */
}

.about-content h3,
.shareholders-content h3 {
  color: var(--ui-kit-react-blue, #1249b5);
  /* Txt react/zagolovok */
  font-family: Nunito;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 100% */
}

.about-content li {
  margin-bottom: 24px;
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/normal */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 122.222% */
}

.about-content ul li,
.shareholders-content ol li,
.shareholders-content ul li {
  padding: 0px 0 0px 20px;
}

.about-content ul,
.shareholders-content ol,
.shareholders-content ul {
  padding: 0 0 0 0;
}

/* Shareholders */

.shareholders-content p {
  margin-bottom: 24px;
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/normal */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 122.222% */
}

.shareholders-content p:first-child {
  margin-top: 16px;
}

.shareholders-content p:last-child {
  margin-bottom: 0;
}

.shareholders-content a {
  color: #1249b5;
}

.shareholders-content ol,
ul {
  margin-left: 19px;
}

.shareholders-content li {
  margin-bottom: 24px;
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/normal */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 122.222% */
}

.shareholders-content .rights-list {
  margin-top: 16px;
  color: #1249b5;
}

.shareholders-content .rights-list li::marker {
  color: #1249b5;
}

.rights-list > li::before {
  top: 2px;
}

.box {
  margin-top: 16px;
  margin-bottom: 24px;
  /* padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--background-stroke, #dce2e4);
    background: #fff; */
}

.box h3 {
  margin-bottom: 24px;
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/podzagolovok */
  font-family: Nunito;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 120% */
}

.vacancies__items {
  margin-bottom: 16px;
}

.vacancies__items:last-child {
  margin-bottom: 24px;
}

.box h4 {
  color: var(--ui-kit-react-blue, #1249b5);
  /* Txt react/bold */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  /* 122.222% */
}

.box p {
  color: var(--text-gray, #596680);
  /* Txt react/normal */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.shareholders-content .vacancies-link {
  color: var(--text-gray, #596680);
  font-family: Nunito;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  /* 133.333% */
  text-decoration-line: underline;
}

.shareholders-content .vacancies__img {
  margin-top: 8px;
}

.shareholders-content .blue-text {
  color: var(--ui-kit-react-blue, #1249b5);
  font-weight: 700;
}

.map-container {
  margin-top: 24px;
  margin-bottom: 24px;
  border-radius: 16px;
  border: 1px solid var(--background-stroke, #dce2e4);
  background: url(<path-to-image>), lightgray 0px 0px / 100% 100.174% no-repeat;
}

.contacts-page p {
  margin-top: 8px;
  margin-bottom: 32px;
}

.partners-page__headline {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.partners-page__headline h3 {
  color: #000;
  /* Txt react/podzagolovok */
  font-family: Nunito;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 120% */
}

.shareholders-content .partners-page__text {
  color: #000;
  /* Txt react/16 reg */
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 137.5% */
}

.partners-page__text a {
  color: #000;
}

.distributor-page p {
  margin-bottom: 32px;
}

.distributor-page p:first-child {
  margin-top: 8px;
}

.distributor-page p:last-child {
  margin-bottom: 24px;
}

/* MODAL WINDOW */

.modal-about {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-radius: 32px 32px 0px 0px;
  background: #fff;
  padding: 24px 16px 85px 16px;
  z-index: 3;
  transition: all 0.5s;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 2;
  transition: all 0.5s;
}

.modal__header {
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/zagolovok */
  font-family: Nunito;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 100% */
}

.modal-about p {
  margin-top: 8px;
  color: var(--ui-kit-react-black, #111318);
  /* Txt react/normal */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 122.222% */
}

.modal-about p a {
  color: var(--ui-kit-react-blue, #1249b5);
  /* Txt react/normal */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.btn--close-modal {
  font-family: inherit;
  color: #fff;
  position: absolute;
  top: -60px;
  right: 8px;
  font-size: 3rem;
  cursor: pointer;
  border: none;
  background: none;
}

.hidden {
  visibility: hidden;
  opacity: 0;
}

.modal-about form {
  margin-top: 16px;
}

.modal-about form input,
.modal-about form select {
  margin-bottom: 8px;
  width: 100%;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--ui-kit-react-stroke-blue-30, rgba(0, 51, 153, 0.3));
  background: var(--ui-kit-react-white, #fff);
  padding: 10px 24px 10px 24px;
  color: #8a9fc9;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  appearance: none;
}

.modal-about form input:focus-visible,
.modal-about form select:focus-visible,
.modal-about form textarea:focus-visible {
  outline: 1px solid #1249b5;
}

.modal-about form input:last-child {
  margin-bottom: 0;
}

.modal-about form input::placeholder {
  color: #8a9fc9;
}

.modal-about form .modal-options select {
  color: #1249b5;
}

.modal-about form .modal-options {
  position: relative;
}

.modal-about form .modal-options::before {
  content: "";
  background: url(../img/icon-open.svg) no-repeat;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 16px;
  right: 24px;
}

.modal-textarea {
  width: 100%;
  height: 126px;
  border-radius: 12px;
  border: 1px solid var(--ui-kit-react-stroke-blue-30, rgba(0, 51, 153, 0.3));
  background: #fff;
  padding: 10px 24px 24px 24px;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  /* 114.286% */
}

.modal-textarea::placeholder {
  color: var(--ui-kit-react-blue, #1249b5);
}

.modal-about .common-btn {
  margin-top: 16px;
}

.term {
  display: flex;
  margin-top: 24px;
  gap: 8px;
}

.term__text {
  color: #cf1212;
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 146.667% */
}

input[type="checkbox"] {
  display: none;
}

.term label {
  position: static;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border: 1px solid #c4c5c5;
  border-radius: 5px;
  cursor: pointer;
}

.term input[type="checkbox"]:checked + label {
  background-color: #fff;
  border-color: #007bff;
}

.term label::after {
  content: "";
  /* display: inline-block; */
  /* width: 10px;
  height: 10px; */
  background-color: transparent;
  /* border-radius: 2px; */
  /* margin: 3px; */
  transition: background-color 0.2s, transform 0.2s;
}

.term input[type="checkbox"]:checked + label::after {
  content: "\2713";
  position: absolute;
  width: 22px;
  height: 22px;
  inset: 1px;
  /* display: block; */
  text-align: center;
  /* line-height: 8px; */
  color: #000;
  font-size: 21px;
}

.term__check {
  position: relative;
  top: 15px;
}

/* ::-webkit-calendar-picker-indicator {
  background: url("../img/calendar-icon.svg") no-repeat;
  width: 24px;
  height: 24px;
} */

@media (max-height: 840px) {
  .modal__inner {
    overflow: auto;
    max-height: 510px;
  }
}

@media (min-height: 841px) {
  .modal__inner {
    overflow: auto;
    max-height: 690px;
  }
}

@media (min-width: 540px) {
  .modal-about {
    max-width: 360px;
    top: 50%;
    left: 50%;
    bottom: unset;
    transform: translate(-50%, -50%);
    border-radius: 32px 32px 32px 32px;
    padding-bottom: 30px;
    padding: 24px 11px 30px 11px;
  }
  .modal__inner {
    max-height: 448px;
    padding: 0px 5px 10px 5px;
  }
  .about-content ul li,
  .shareholders-content ul li,
  .shareholders-content ol li {
    padding: 0px 0 0px 25px;
  }
}

@media (min-width: 1024px) {
  main::before {
    background: url("../img/stars1.svg") no-repeat;
    content: "";
    position: absolute;
    top: -368px;
    left: -563px;
    width: 100%;
    height: 125%;
    z-index: 0;
  }
  main::after {
    background: url(../img/stars2.svg) no-repeat;
    content: "";
    position: absolute;
    bottom: -216px;
    right: -214px;
    width: 719px;
    height: 967px;
    z-index: 0;
  }
}