@import url(../fonts/stylesheet.css);

/* RESET CSS */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
a {
   text-decoration: none;
   color: inherit;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
   display: block;
}
section:not(.hero) {
   margin-bottom: 150px;
}
textarea:focus {
   outline: none;
}
textarea {
   resize: none;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
   display: none;
}

/* Reset box-model */
html {
   box-sizing: border-box;
}
*,
*:before,
*:after {
   box-sizing: inherit;
}
body,
html {
   overflow-x: hidden;
}
body {
   line-height: normal;
}
body.no-scroll {
   overflow: hidden;
}
ol,
ul {
   list-style: none;
   list-style-type: none;
}

blockquote,
q {
   quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
   content: "";
   content: none;
}

abbr[title],
dfn[title] {
   border-bottom: 1px dotted;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

img,
video {
   max-width: 100%;
   /* width: 100%; */
}

img {
   border-style: none;
}

button,
input,
optgroup,
select,
textarea {
   margin: 0;
   padding: 0;
   border: 0;
   vertical-align: middle;
   color: inherit;
   font: inherit;
   background: transparent;
   text-align: inherit;
   text-transform: inherit;
}
button:disabled {
   opacity: 0.5;
   pointer-events: none;
}
button {
   cursor: pointer;
}
input:focus {
   outline: none;
}
:root {
   --primary-color: #d91920;
   --secondary-color: #bababa;
   --transition: 0.35s;
   --default-radius: 30px;
}
body {
   text-transform: uppercase;
   font-family: "Snowstorm";
   overflow-x: hidden;
}
.container {
   max-width: 1400px;
   margin: 0 auto;
}

/* MODAL */
.modal {
   position: fixed;
   padding: 20px 10px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(145, 112, 109, 0.5);
   opacity: 0;
   backdrop-filter: blur(5px);
   visibility: hidden;
   transform: scale(1.1);
   overflow: auto;
   scrollbar-width: thin;
   transition:
      visibility 0s linear var(--transition),
      opacity var(--transition) 0s,
      transform var(--transition);
   z-index: 1;
}

.modal__content {
   position: static;
   margin: 0 auto;
   background-color: white;
   padding: 50px 150px;
   width: 1050px;
   border-radius: var(--default-radius);
}
.modal__content ul {
   list-style-type: disc;
   text-transform: none;
   font-size: 18px;
   font-family: "Stem";
   padding-left: 20px;
}
.modal__content ul:not(:last-child) {
   margin-bottom: 20px;
}
.modal__text-title {
   font-size: 20px;
   font-family: "Stem";
   text-align: center;
   margin-bottom: 20px;
   font-weight: 500;
   text-transform: none;
}
.modal__text-title--large {
   font-size: 22px;
   margin-top: 10px;
}
.close-button {
   cursor: pointer;
   position: absolute;
   right: 20px;
   top: 20px;
}
.modal.show {
   opacity: 1;
   z-index: 9999;
   visibility: visible;
   transform: scale(1);
   transition:
      visibility 0s linear 0s,
      opacity var(--transition) 0s,
      transform var(--transition);
}

/* font-family: "Snowstorm";
font-family: "Jikharev"; */

.wrapper {
}
.container {
}
.header {
   padding-top: 65px;
   margin-bottom: 65px;
   transition: var(--transition);
   position: fixed;
   top: 0 !important;
   left: 0;
   z-index: 1;
   width: 100%;
}
.header.scrolled {
   margin-bottom: 0;
   top: 0;
   padding: 25px 0 20px;
   background-color: #f4f4f4;
   transition: var(--transition);
}
.header.scrolled .header__logo {
   transition: var(--transition);
   width: 80px;
}
main {
   transition: var(--transition);
   padding-top: 220px;
}
.header.scrolled + main {
   transition: var(--transition);
}
.header__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.header__logo {
   transition: var(--transition);
   width: 115px;
}
.header__burger {
   cursor: pointer;
   position: relative;
   z-index: 1;
}
.hero {
   position: relative;
   margin-bottom: 50px;
}
/* .hero::before {
   content: "";
   position: absolute;
   z-index: -1;
   background-color: #f4f4f4;
   transform: rotate(var(--hero-angle));
   width: var(--hero-width);
   height: var(--hero-height);
   left: var(--hero-left);
   top: var(--hero-top);
} */

.hero::before {
   content: "";
   width: 200%;
   left: -400px;
   transform: rotate(158.8deg);
   z-index: -1;
   height: 827px;
   background-color: #f4f4f4;
   position: absolute;
   top: -524px;
   top: var(--hero-top);
}

.hero__inner {
   /* display: flex; */
}
.hero__row {
   display: flex;
   justify-content: space-between;
   position: relative;
}
.hero__text {
   width: 50%;
}
.hero__title span {
   font-weight: 300;
}

.hero__title {
   font-size: 50px;
   font-weight: 500;
   margin-bottom: 80px;
}
.hero__benefits {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 90px;
   gap: 10px 30px;
}
.hero__benefits-item {
   font-size: 40px;
   font-weight: 300;
   color: var(--secondary-color);
   display: flex;
   align-items: center;
   column-gap: 10px;
}
.hero__benefits-item span:last-child {
   color: var(--primary-color);
   font-weight: 500;
   text-transform: none;
   position: relative;
}
.regular-button {
   font-size: 30px;
   display: block;
   box-sizing: border-box;
   border-radius: 10px;
   transition: var(--transition);
   border: 2px solid var(--primary-color);
   padding: 25px 30px;
   width: max-content;
   color: #fff;
   background: var(--primary-color);
}
.regular-button:hover {
   background-color: transparent;
   color: var(--primary-color);
}
.hero__img {
   position: absolute;
   top: -90px;
   right: 0;
}
.benefits {
   position: relative;
}
.benefits__row {
   display: flex;
   justify-content: end; /* position: relative; */
}
.benewits__img {
   position: absolute;
   left: 0;
   bottom: -50px;
}
.benefits__text {
}
.benefits__accent-title {
   text-align: end !important;
   position: relative;
}
.benefits__accent-title::before {
   content: "";
   position: absolute;
   top: 0%;
   left: 85px;
   width: 130px;
   height: 180px;
   background: url(../img/icons/crooked_arrow.svg) center no-repeat;
   background-size: contain;
}
.accent-title {
   font-family: "Jikharev";
   font-size: 120px;
   color: var(--primary-color);
   font-weight: 500;
   text-transform: none;
   line-height: 75px;
   /* width: max-content; */
   margin-bottom: 65px;
   text-align: center;
}
.sc-title {
   font-size: 70px;
   font-weight: 500;
   margin-bottom: 30px;
}
.benefits__title {
}
.benefits__list {
}
.regular-list {
   display: flex;
   flex-direction: column;
   row-gap: 35px;
}
.regular-list__item {
   padding-left: 65px;
   width: max-content;
   position: relative;
}
.regular-list__item::before {
   content: "";
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 0;
   width: 45px;
   height: 60px;
   background: url(../img/icons/arr_top.svg) center no-repeat;
   background-size: 100%;
}
.regular-list__item-title {
   font-size: 40px;
   font-weight: 300;
}
.regular-list__item-descr {
   font-family: "Stem";
   text-transform: none;
   color: #9b9b9b;
   font-weight: 400;
   font-size: 20px;
}

.infoblock__box {
   padding: 50px;
   border: 20px double var(--secondary-color);
   /* outline: 10px solid var(--secondary-color); */
}
.sc-title--colored {
   color: var(--primary-color);
}
.infoblock__title {
   text-align: center;
}
.infoblock__list {
}
.regular-list--grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px 15px;
}
.employees-benefits {
   position: relative;
}
.employees-benefits__row {
   display: flex;
}
.employees-benefits__text {
}
.employees-benefits__title {
}
.employees-benefits__list {
}
.employees-benefits__img {
   position: absolute;
   right: 50px;
   top: 50px;
}
.regular-list--colored .regular-list__item::before {
   background: url(../img/icons/arr_top_green.svg) center no-repeat;
   background-size: 100%;
}

.features__row {
   display: flex;
   justify-content: space-between;
   position: relative;
}
.features__row::before {
   content: "";
   width: 10px;
   height: 100%;
   top: 0;
   position: absolute;
   background: var(--secondary-color);
   left: 50%;
   transform: translateX(-50%);
}

.features__title {
   width: min-content;
}
.steps {
}
.steps__inner {
}
.steps__title {
   margin-bottom: 80px;
}
.steps__list {
   display: flex;
   justify-content: space-between;
   align-items: start;
}
.steps__list-item {
   max-width: 220px;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.steps__list-item-number {
   /* padding: 25px; */
   font-size: 150px;
   width: 210px;
   align-items: center;
   display: flex;
   justify-content: center; /* aspect-ratio: 1/1; */
   margin-bottom: 40px;
   border-radius: 30px;
   color: var(--primary-color);
   text-align: center;
   border: 10px solid #d4d4d4;
}
.steps__list-item-title {
   font-size: 30px;
   font-weight: 300;
   text-align: center;
}
.infoblock__text {
   font-size: 35px;
   font-weight: 300;
   text-align: center;
}
.docs {
}
.docs__inner {
}
.docs__title {
   text-align: center;
   margin-bottom: 60px;
}
.docs__list {
   display: flex;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   margin-bottom: 60px;
}
.docs__list-item {
   font-size: 30px;
   text-align: center;
   height: max-content;
   font-weight: 300;
   position: relative;
   display: block;
   transition: var(--transition);
}

.docs__list-item::before {
   width: 100%;
   height: 135px;
   background: url(../img/icons/doc.svg) center no-repeat;
   background-size: contain;
   content: "";
   position: relative;
   display: block;
   margin-bottom: 35px;
}
.docs__bottom {
   font-size: 30px;
   font-weight: 300;
   text-align: center;
   padding-top: 30px;
   border-top: 10px solid var(--secondary-color);
   width: max-content;
   margin: 0 auto;
}
.cases {
}
.cases__inner {
}
.cases__list {
   display: flex;
   margin-bottom: 80px;
   gap: 100px;
   align-items: center;
   justify-content: space-between;
}
.cases__list-item {
   border-radius: 30px;
   flex: 1;
   display: flex;
   padding: 40px;
   border: 10px solid var(--secondary-color);
   flex-direction: column;
   row-gap: 50px;
}
.cases__list-title {
   font-size: 40px;
}
.cases__list-contentbox {
   display: flex;
   row-gap: 15px;
   flex-direction: column;
}
.cases__list-contentbox-title {
   font-size: 20px;
   font-weight: 400;
   font-family: "Stem";
   text-transform: none;
}
.cases__list-contentbox-text {
   font-weight: 300;
   font-size: 40px;
}
.cases__list-button {
   font-size: 30px;
   text-align: center;
   padding: 25px 10px;
   border-radius: 10px;
   color: #ffffff;
   transition: var(--transition);
   width: 100%;
   background: var(--secondary-color);
   border: 2px solid var(--secondary-color);
}
.cases__list-button:hover {
   color: #000000;
   background-color: transparent;
}

.cases__button {
   margin: 0 auto;
}
.quiz {
}
.quiz__inner {
}
.quiz__content {
}
.quiz__steps {
   font-size: 30px;
   font-weight: 300;
   margin-bottom: 40px;
   text-align: center;
}
.current-quiz-step {
}
.total-quiz-steps {
}
.quiz__questions {
   position: relative;
}
.quiz__question {
   transition: var(--transition);
}
.quiz__form {
}
.quiz__question:not(.current) {
   opacity: 0;
   visibility: hidden;
   transform: translateX(200px);
   position: absolute;
}
.current {
}
.quiz__question-title {
   font-size: 40px;
   text-align: center;
   margin-bottom: 70px;
}
.quiz__question-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 36px;
   justify-content: center;
}
.quiz__question-actions button {
   cursor: pointer;
}
.quiz__agreement {
   font-family: "Stem";
   margin-top: 20px;
   font-size: 16px;
   width: 80%;
   margin: 0 auto;
   margin-top: 20px;
   text-transform: none;
   text-align: center;
}
.custom-select {
   padding: 25px 30px;
   border: 3px solid var(--secondary-color);
   font-size: 30px;
   border-radius: 10px;
   user-select: none;
   min-width: 200px;
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
   outline: none;
   -moz-appearance: none;
   position: relative;
   z-index: 1;
}
.select-wrapper {
   position: relative;
}
.select-wrapper::after {
   width: 30px;
   height: 20px;
   content: "";
   background: url(../img/icons/dropdown_arrow.svg) center no-repeat;
   background-size: contain;
   position: absolute;
   top: 50%;
   right: 30px;
   transform: translateY(-50%);
}
.custom-inputpox {
}
.custom-input {
   padding: 25px 30px;
   border: 2px solid var(--secondary-color);
   border-radius: 10px;
   font-size: 30px;
}
.quiz__question button {
   margin: 0;
}
.footer {
   padding-bottom: 60px;
}
.footer__inner {
   padding-top: 50px;
   border-top: 10px solid var(--secondary-color);
}
.footer__row {
   font-size: 30px;
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
}
.footer__company-info {
   color: var(--secondary-color);
   font-weight: 300;
}
.footer__company-info span {
   color: #000000;
   font-weight: 500;
}
.footer__contacts {
   display: flex;
   text-align: end;
   flex-direction: column;
}
.footer__contacts-tel {
   display: block;
   transition: var(--transition);
   margin-bottom: 10px;
}
.footer__contacts-tel:hover {
   opacity: 0.6;
}
.footer__contacts-address {
   color: #d4d4d4;
}
.footer__bottom {
   display: flex;
   align-items: center;
   gap: 30px; /* justify-content: space-between; */
}
.socials {
   display: flex;
   column-gap: 15px;
}
.socials__item {
   width: 45px;
   padding: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1.5px solid var(--secondary-color);
   height: 45px;
   border-radius: 50px;
   transition: var(--transition);
}
.socials__item:hover {
   opacity: 0.6;
}
/* .socials__item svg > path,
.socials__item .st2 {
   transition: var(--transition);
}
.socials__item:hover,
.socials__item:hover svg > path,
.socials__item:hover svg > g,
.socials__item:hover .st2 {
   border-color: #000000 !important;
   stroke: #000000 !important;
   fill: #000000 !important;
} */
.footer__links {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   justify-content: space-between;
}
.footer__links-item {
   text-transform: none;
   color: var(--secondary-color);
   font-size: 20px;
   font-weight: 400;
   font-family: "Stem";
   text-decoration: underline;
}
.footer__links-item:hover {
   text-decoration: none;
}
/* MENU MODAL */
.menu-wrapper {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(145, 112, 109, 0.5);
   opacity: 0;
   backdrop-filter: blur(5px);
   visibility: hidden;
   transition: var(--transition);
   z-index: 0;
}
.menu-wrapper.show {
   opacity: 1;
   z-index: 9999;
   visibility: visible;
   transition: var(--transition);
}
.menu-modal {
   padding: 50px 60px 0;
   position: absolute;
   top: 0;
   background: #ffffff;
   height: 100%;
   right: 0;
   transition: var(--transition);
}
.menu-modal__top {
   margin-bottom: 40px;
   display: flex;
}
.menu-modal__nav {
   display: flex;
   flex-direction: column;
   margin-bottom: 30px;
   row-gap: 5px;
}
.menu-modal__nav {
   font-family: "Stem";
   text-transform: none;
   font-size: 20px;
}
.menu-modal__nav li > a {
   text-align: center;
   display: block;
}
.menu-modal__nav li > a:hover {
   text-decoration: underline;
}
.menu-modal__links {
   display: flex;
   flex-direction: column;
   row-gap: 5px;
}
.menu-modal__links li > a {
   font-size: 26px;
   font-weight: 700;
   color: var(--secondary-color);
   font-family: Stem;
   position: relative;
   text-transform: uppercase;
}
.menu-modal__links li > a:hover {
   text-decoration: underline;
}
.menu-logo {
   width: 100px;
}
.menu-modal__tel {
   font-size: 30px;
   margin-bottom: 20px;
   display: block;
}
.menu-modal__platforms {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.modal__video {
   overflow: hidden;
   border-radius: 25px;
   display: flex;
}
h2.modal__title {
   font-size: 40px;
   font-weight: 400;
   text-align: center;
   margin-bottom: 30px;
}

.modal__descr {
   font-size: 20px;
   font-weight: 300;
   text-align: center;
   text-transform: none;
   margin-bottom: 30px;
   font-family: "Stem";
}
.modal__descr:last-child {
   margin-bottom: 0;
}
.modal__form {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 20px;
}

.modal__form-inputbox {
   margin-bottom: 35px;
}

.modal__agreement {
   font-size: 16px;
   font-family: "Stem";
   text-transform: none;
   text-align: center;
}
.modal__agreement a,
.quiz__agreement a {
   text-decoration: underline;
}
.modal__agreement a:hover,
.quiz__agreement a:hover {
   text-decoration: none;
}
.content-modal * {
   text-align: start !important;
}

/* BANNER */
.banner {
   background: var(--primary-color);
   color: #fff;
   padding: 20px 0;
   display: none;
}
.banner__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
}
.banner__text {
}
.banner__title {
   font-size: 24px;
   margin-bottom: 5px;
}
.banner__subtitle {
   font-size: 16px;
}
.banner__button {
}
.regular-button--white {
   background: #fff;
   color: #000;
   font-size: 18px !important;
   border-color: #fff;
   padding: 15px 20px !important;
}
.regular-button--white:hover {
   color: #fff;
}
/* MEDIA */

@media (max-width: 1600px) {
   .benewits__img {
      width: 700px;
   }
}

@media (max-width: 1430px) {
   .container {
      padding: 0 20px;
   }
   .benewits__img {
      width: 600px;
   }
   .employees-benefits__img {
      width: 500px;
   }
}
@media (max-width: 1299px) {
   .regular-list__item-title {
      font-size: 30px;
   }
   /* .hero::before {
      height: 728px;
   } */
   .regular-list__item-descr {
      font-size: 18px;
   }
   .benewits__img {
      position: relative;
   }
   .benefits__row {
      align-items: end;
      gap: 50px;
   }
   .sc-title {
      font-size: 50px;
   }
   .accent-title {
      font-size: 100px;
   }
   .benefits__accent-title::before {
      width: 100px;
   }
   .infoblock__box {
      padding: 30px;
   }
   .steps__list-item-number {
      font-size: 120px;
   }
   .quiz__question-title,
   .hero__benefits-item {
      font-size: 30px;
   }
   .quiz__steps,
   .footer__row,
   .regular-button {
      font-size: 25px;
   }
   .footer__links-item {
      font-size: 18px;
   }
   .hero__img {
      width: 550px;
   }
   .hero__title {
      font-size: 40px;
   }
   .custom-select,
   .custom-input {
      font-size: 25px;
   }
}
@media (max-width: 1199px) {
   .cases__list {
      gap: 50px;
   }
   .cases__list-item {
      flex: auto;
   }
}

@media (max-width: 1099px) {
   .cases__list {
      flex-direction: column;
   }
   .modal__content .close-button {
      top: 45px;
      right: 45px;
   }
   .cases__list-item {
      width: 100%;
      row-gap: 35px;
   }
   section:not(.hero) {
      margin-bottom: 120px;
   }
   .hero__img {
      width: 500px;
   }
   .modal__content {
      width: 96%;
   }
   .regular-list--grid {
      grid-template-columns: 1fr;
   }
   .cases__list-button {
      font-size: 25px;
   }
   .cases__list-title {
      font-size: 30px;
   }
   .docs__list-item {
      font-size: 25px;
   }
}
@media (max-width: 991px) {
   .menu-modal__tel {
      font-size: 25px;
   }
   .banner__title {
      font-size: 22px;
   }
   .regular-button--white {
      font-size: 16px !important;
   }
   .cases__list {
      flex-direction: column;
   }
   .cases__list-item {
      width: 100%;
      row-gap: 35px;
   }
   section:not(.hero) {
      margin-bottom: 120px;
   }
   .hero__img {
      width: 500px;
      position: relative;
      top: auto;
   }
   .modal__content {
      padding: 50px 100px;
   }
   .header {
      padding-top: 50px;
   }
   .benefits__row {
      flex-direction: column-reverse;
      align-items: start;
   }
   .employees-benefits__img {
      position: relative;

      right: auto;
   }
   .employees-benefits__row {
      flex-direction: column;
   }
   .features__row::before,
   .hero::before {
      display: none;
   }
   .features__row {
      flex-direction: column;
   }
   .features__title {
      width: auto;
   }
   .features__row {
      row-gap: 50px;
   }
   .hero__title {
      margin-bottom: 50px;
   }
   .hero__benefits {
      margin-bottom: 60px;
   }
   .hero__row {
      gap: 20px;
      align-items: end;
   }
   .steps__list-item-title,
   .docs__bottom {
      font-size: 25px;
   }
   .docs__list {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 40px 20px;
   }
   .cases__list-contentbox-text {
      font-size: 30px;
   }
   .cases__list-contentbox-title {
      font-size: 18px;
   }
   .cases__list-contentbox {
      row-gap: 10px;
   }
   .accent-title {
      font-size: 90px;
   }
   .infoblock__text {
      font-size: 25px;
   }
   .sc-title {
      font-size: 40px;
   }
   .steps__list-item-number {
      font-size: 100px;
   }
   .regular-list__item-title {
      font-size: 25px;
   }
   .regular-list__item-descr {
      font-size: 16px;
   }
}
@media (max-width: 767px) {
   .regular-list__item::before {
      width: 35px;
      height: 50px;
   }
   .banner__title {
      font-size: 20px;
   }
   .banner__subtitle {
      font-size: 14px;
   }

   .modal__descr .regular-list__item {
      padding-left: 50px;
   }
   .modal__content ul,
   .modal__text-title,
   .menu-modal__nav {
      font-size: 18px !important;
   }
   section:not(.hero) {
      margin-bottom: 90px;
   }
   .steps__list {
      flex-direction: column;
      row-gap: 30px;
      align-items: center;
   }
   .steps__list-item-number {
      margin-bottom: 25px;
   }
   .steps__list-item {
      max-width: none;
   }
   .quiz__steps,
   .footer__row,
   .regular-button {
      font-size: 20px;
   }
   .footer__bottom,
   .footer__links {
      flex-direction: column;
   }
   .footer {
      padding-bottom: 40px;
   }
   .cases__list-contentbox-text {
      font-size: 25px;
   }
   .cases__list {
      margin-bottom: 60px;
   }
   .docs__list-item::before {
      margin-bottom: 20px;
   }
   .docs__list-item::before {
      height: 110px;
   }
   .accent-title {
      font-size: 65px;
      line-height: 50px;
      margin-bottom: 50px;
   }
   .benefits__accent-title::before {
      width: 70px;
      left: 120px;
   }
   .modal__content {
      padding: 50px 40px;
   }
   .steps__list-item-number {
      font-size: 80px;
      width: auto;
      padding: 10px;
      aspect-ratio: 1/1;
   }
   .hero__text {
      width: 100%;
   }
   .hero__row {
      flex-direction: column;
      align-items: center;
      row-gap: 50px;
   }
   .quiz__question-title,
   .hero__benefits-item {
      font-size: 25px;
   }
   .benewits__img {
      width: 500px;
   }
   .employees-benefits__img {
      margin: 0 auto;
   }
   .sc-title {
      font-size: 30px;
   }
   .docs__list-item,
   .steps__list-item-title,
   .docs__bottom,
   .cases__list-button {
      font-size: 22px;
   }
   .regular-button,
   .custom-input,
   .custom-select {
      padding: 22px 30px;
   }
   h2.modal__title {
      font-size: 30px;
      margin-bottom: 25px;
   }
   p.modal__descr {
      font-size: 18px;
   }
   .quiz__question-actions {
      flex-wrap: wrap;
   }

   .custom-input,
   .custom-select {
      width: 100%;
      font-size: 20px;
      text-align: start;
   }
   .quiz__question-actions button {
      order: 1;
      flex: 1;
      text-align: center;
   }
   .modal__submit,
   .modal__form-inputbox,
   .custom-inputpox,
   .select-wrapper {
      width: 100%;
      text-align: center;
   }
   .modal__form-inputbox {
      margin-bottom: 25px;
   }
   .cases__list-button {
      padding: 22px 10px;
   }
   .benefits__text {
      width: 100%;
   }
   .footer__links-item {
      font-size: 16px;
   }
}
@media (max-width: 560px) {
   .benewits__img,
   .employees-benefits__img {
      width: 100%;
      top: auto;
   }
   .banner__inner {
      flex-direction: column;
      align-items: start;
   }
   .banner {
      padding: 15px 0;
   }
   .banner__button {
      width: 100%;
   }
   .header {
      top: 150px;
   }
   main {
      padding-top: 170px;
   }

   .header.scrolled {
      padding: 20px 0 15px;
   }
   .header.scrolled .header__logo {
      width: 60px;
   }
   .footer__company-info br {
      display: none;
   }
   .regular-list__item {
      width: auto;
   }
   .infoblock__text {
      font-size: 20px;
   }
   .docs__list-item::before {
      height: 80px;
   }
   .docs__list-item,
   .steps__list-item-title,
   .docs__bottom,
   .cases__list-button {
      font-size: 20px;
   }
   .cases__list {
      gap: 30px;
   }
   .quiz__question-title {
      margin-bottom: 40px;
   }
   .footer__contacts {
      align-items: center;
   }
   .footer__contacts-address {
      text-align: center;
   }
   .footer__row {
      flex-direction: column;
      row-gap: 20px;
   }
   .footer__company-info {
      text-align: center;
   }
   .cases__list-item,
   .regular-list {
      row-gap: 25px;
   }
   .hero__title {
      font-size: 30px;
   }
   .quiz__question-title,
   .hero__benefits-item,
   .regular-list__item-title {
      font-size: 22px;
   }
   .regular-button {
      width: 100%;
      text-align: center;
   }
   .cases__list-item {
      padding: 30px;
   }
   .cases__list {
      margin-bottom: 40px;
   }
   section:not(.hero) {
      margin-bottom: 80px;
   }
   .cases__list-item,
   .steps__list-item-number,
   .docs__bottom,
   .footer__inner {
      border-width: 8px;
   }
   .footer__inner {
      padding-top: 30px;
   }
   .infoblock__box {
      border-width: 16px;
      padding: 30px 20px;
   }
   .employees-benefits__row {
      row-gap: 50px;
   }
   .hero__img {
      width: 100%;
   }
   .steps__list-item-number {
      font-size: 60px;
      border-radius: 20px;
   }

   .accent-title {
      font-size: 50px;
      line-height: 40px;
   }
   .header__logo,
   .menu-logo {
      width: 80px;
      display: flex;
   }
}
@media (max-width: 499px) {
   .menu-modal {
      width: 100%;
      padding: 50px 20px 20px;
   }
   .banner__inner {
      row-gap: 10px;
   }
   .modal__content {
      padding: 40px 20px;
      border-radius: 20px;
   }
   .benefits__accent-title::before {
      height: 100px;
      width: 60px;
   }
   .cases__list-contentbox-title {
      font-size: 16px;
   }
   .quiz__question-title {
      margin-bottom: 20px;
   }
   .quiz__steps {
      margin-bottom: 25px;
   }
   .quiz__question-actions {
      gap: 26px;
   }
   .quiz__agreement {
      width: 100%;
   }
   .header {
      padding-top: 35px;
   }
   .container {
      padding: 0 10px;
   }
   .footer__contacts-tel {
      font-size: 25px;
   }
   .regular-button,
   .custom-input,
   .custom-select {
      padding: 20px 25px;
   }
   .docs__bottom {
      width: 100%;
   }
}
@media (max-width: 430px) {
   .benefits__accent-title::before {
      left: 50px;
   }
   .modal__agreement {
      font-size: 14px;
   }
}
@media (max-width: 399px) {
   .sc-title {
      font-size: 26px;
   }
}
.form-message {
   margin-top: 20px;
   text-align: center;
   font-size: 20px;
   width: 100%;
   color: #000000;
   display: block;
   text-transform: none;
   font-weight: 400;
   font-family: "Stem";
}
.form-message.success {
   color: green;
}
.form-message.error {
   color: red;
}