@font-face {font-family: "Onest"; font-style: normal; font-weight: 700; src: url("../fonts/Onest-Bold.woff2") format("woff2"); src: url("../fonts/Onest-Bold.woff") format("woff"); font-display: swap;}
@font-face {font-family: "Onest"; font-style: normal; font-weight: 400; src: url("../fonts/Onest-Regular.woff2") format("woff2"); src: url("../fonts/Onest-Regular.woff") format("woff"); font-display: swap;}
html {height: 100%; font-family: "Onest", sans-serif;}
body {margin: 0 auto; display: flex; flex-direction: column; min-height: 100%; max-width: 1600px; font-size: 14px; line-height: 18px; color: #222222; background-color: #ffffff; font-weight: 400;}
@media (width >= 768px) {
  body {font-size: 16px; line-height: 20px;} 
}
ul {padding: 0;}
li {list-style: none;}
p {margin: 0;}
.visually-hidden {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden;}
.link-a {text-decoration: none; color: #222222;}
.link-a:hover {color: #495AB6}
/* Font */
h1 {margin: 0; padding: 0; font-size: 22px; line-height: 28px; font-weight: 700; color: #495AB6;}
@media (width >= 980px) {
  h1 {font-size: 60px; line-height: 78px;}
}
@media (width >= 1600px) {
  h1 {font-size: 80px; line-height: 102px;}
}
h2 {margin: 0; padding: 0; font-size: 22px; line-height: 30px; font-weight: 700;}
@media (width >= 980px) {
  h2 {font-size: 46px; line-height: 60px; margin: 0;}
}
@media (width >= 1600px) {
  h2 {font-size: 60px; line-height: 78px; margin: 0;}
}
h3 {font-size: 16px; line-height: 20px; font-weight: 700; margin: 0;}
@media (width >= 980px) {
  h3 {font-size: 22px; line-height: 28px;}
}
@media (width >= 1600px) {
  h3 {font-size: 24px; line-height: 30px;}
}
.fs-20,
.fs-20 li {font-size: 16px; line-height: 24px;}
@media (width >= 980px) {
  .fs-20,
  .fs-20 li {font-size: 18px; line-height: 24px;}
}
@media (width >= 1600px) {
  .fs-20,
  .fs-20 li {font-size: 20px; line-height: 26px;}
}
.fs-22 {font-size: 14px; line-height: 18px;}
@media (width >= 980px) {
  .fs-22 {font-size: 20px; line-height: 26px;}
}
@media (width >= 1600px) {
  .fs-22 {font-size: 22px; line-height: 28px;}
}
.fs-22-s {font-size: 16px; line-height: 24px;}
@media (width >= 980px) {
  .fs-22-s {font-size: 22px; line-height: 28px;}
}
.fs-24 {font-size: 18px; line-height: 24px; font-weight: 700; color: #495AB6;}
@media (width >= 980px) {
  .fs-24 {font-size: 24px; line-height: 32px;}
}
.fs-24-m {font-size: 16px; line-height: 24px; font-weight: 700; margin-top: 20px;}
@media (width >= 1600px) {
  .fs-24-m {font-size: 24px; line-height: 32px; margin-top: 40px;}
}
.fs-24-l {font-size: 16px; line-height: 20px; font-weight: 700; margin-top: 0;}
@media (width >= 980px) {
  .fs-24-l {font-size: 22px; line-height: 28px; font-weight: 700; margin-top: 0;}
}
@media (width >= 1600px) {
  .fs-24-l {font-size: 24px; line-height: 30px; font-weight: 700; margin-top: 0;}
}
@media (width >= 980px) {
  .fs-26 {font-size: 24px; line-height: 30px;}
}
@media (width >= 1600px) {
  .fs-26 {font-size: 26px; line-height: 34px;}
}
.fs-30 {font-size: 18px; line-height: 26px; font-weight: 700}
@media (width >= 980px) {
  .fs-30 {font-size: 26px; line-height: 34px;}
}
@media (width >= 1600px) {
  .fs-30 {font-size: 30px; line-height: 38px;}
}
.fs-30-m {font-size: 18px; line-height: 26px; font-weight: 700}
@media (width >= 980px) {
  .fs-30-m {font-size: 26px; line-height: 34px;}
}
@media (width >= 1600px) {
  .fs-30-m {font-size: 30px; line-height: 38px;}
}
.fs-30-l {font-size: 20px; line-height: 26px; font-weight: 700}
@media (width >= 980px) {
  .fs-30-l {font-size: 26px; line-height: 34px;}
}
@media (width >= 1600px) {
  .fs-30-l {font-size: 30px; line-height: 38px;}
}
.fs-37 {font-size: 22px; line-height: 28px; font-weight: 700; color: #495AB6;}
@media (width >= 980px) {
  .fs-37 {font-size: 32px; line-height: 42px;}
}
@media (width >= 1600px) {
  .fs-37 {font-size: 37px; line-height: 44px;}
}
.bold {font-weight: 700;}
.text-left[class] {text-align: left;}
.text-center[class] {text-align: center;}
.link {text-decoration: underline; color: #495AB6; font-weight: 700;}

/* Footer */
.footer-bg {background-color: rgba(73,90,182,0.15); background-image: url("../img/footer.svg"); background-size: cover; position: relative; padding: 40px 20px; margin-top: 30px;}
@media (width >= 980px) {
  .footer-bg {padding: 70px 40px; margin-top: 60px;}
}
@media (width >= 1600px) {
  .footer-bg {margin-top: 120px;}
}
.gap-footer {gap: 14px;}
@media (width >= 980px) {
  .gap-footer {gap: 20px;}
}
/* Button */
.btn {padding: 20px 32px; font-family: inherit; font-size: 16px; line-height: 20px; font-weight: 700; text-align: center; color: #ffffff; background-color: #495AB6; text-decoration: none; border-radius: 36px; mix-blend-mode: normal; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.btn-a[class]{padding: 20px 0px;}
.btn:hover, .btn:active {background-color: #394588}
.btn:disabled[class] {background-color: #c5c5c5;}
.btn-second[class] {color: #495AB6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}
.btn-second:hover, .btn-second:active {color: #ffffff; background-color: #495AB6;}
.btn-third[class] {color: #ffffff; background-color: #3AB969;}
.btn-third:hover, .btn-third:active {color: #ffffff; background-color: #308D52;}
.btn-fourth {width: 100%; color: #495AB6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}
@media (width >= 980px) {
  .btn-fourth {width: 400px;}
}
.btn-fourth:hover[class], .btn-fourth:active[class] {color: #495AB6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.6);}
.btn-230 {width: 230px;}
.btn-450[class] {width: 100%; margin-top: 30px;}
@media (width >= 980px) {
  .btn-450[class] {width: 450px;}
}
@media (width >= 980px) and (width < 1600px) {
  .btn-318[class] {width: 318px; margin-left: auto; margin-right: auto;}
}

/* Hide */
@media (width >= 1600px) {
  .hide-d[class] {display:none;}
}
@media (width < 1600px) {
  .hide-m[class] {display:none;}
}
@media (width >= 980px) {
  .hide-dt[class] {display:none;}
}
@media (width < 980px) {
  .hide-mt[class] {display:none;}
}
@media (width < 1200px) {
  .hide-menu-desktop[class] {display: none;}
}
@media (width >= 1200px) {
  .hide-menu-mobile[class] {display: none; }
}

@media (width < 980px) {
  .hidden-m {overflow: hidden;}
} 
.hidden {overflow: hidden;}

/* Quiz */
.btn-quiz[class] {width: 100%; display: flex; justify-content: flex-start; padding: 20px 52px;}
@media (width >= 980px) {
  .btn-quiz[class] {width: 260px; padding: 22px 88px;}
}
@media (width < 980px) {
  .btn-quiz[class] {flex-direction: column;}
} 
.btn-quiz2[class] {width: 100%; height: 50px; background-color: rgba(58,185,105,0.1); width: 100%; background-image: url("../img/arrow-left.svg"); background-size: 24px 24px; background-repeat: no-repeat; background-position: center center; padding: 32px;}
@media (width >= 980px) {
  .btn-quiz2[class] {width: 64px; height: 64px; border-radius: 50%;}
}
.btn-quiz2:hover[class] {background-color: #3AB969; background-image: url("../img/arrow-left-w.svg");}

@media (width < 980px) {
  .btn-wrp {width: 100%; display: flex; align-items: flex-start;}
}

.hide {
  display: none;
}

.quiz-mar {display: flex; gap: 30px; flex-direction: column;}
@media (width >= 1600px) {
  .quiz-mar {gap: 50px;}
}
.quiz-card {display: flex; flex-direction: column; gap: 140px; padding: 40px 20px;}
@media (width >= 1600px) {
  .quiz-card {padding: 60px;}
}
.quiz-img {position: absolute; left: 67%; top: 50%; transform: translate(-50%, -50%);}
@media (width < 980px) {
  .quiz-img {display: none;}
} 
/* Circle */
.circle-platex {place-items: center; display: grid;}
@media (width >= 980px) {
  .circle-platex {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
}
@media (width < 670px) {
  .hide-circle[class] {display: none;}
}

/* Spacing */
.gap-10 {gap: 10px;}
.gap-16 {gap: 16px;}
.gap-20 {gap: 20px;}
.gap-30 {gap: 30px;}
.gap-60 {gap: 60px;}
.gap-70[class] {gap: 14px;}
.gap-70-m[class] {gap: 70px}
@media (width >= 980px) {
  .gap-70-m {gap: 70px;}
}
.mar-0 {margin:0;}
.ml-25 {margin-left: 25px;}
.ml-30[class] {margin-left: 30px;}
.ml-40[class] {margin-left: 40px;}
.mt-0 {margin-top: 0;}
.mt-10 {margin-top: 10px;}
.mt-16 {margin-top: 16px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-60 {margin-top: 60px;}
.mb-10 {margin-bottom: 10px;}
.mb-16 {margin-bottom: 16px;}
.mb-20 {margin-bottom: 20px;}
.mb-50 {margin-bottom: 50px;}
.mb-60 {margin-bottom: 60px;}
.mb-240 {margin-bottom: 240px;}
.auto {margin-left: auto; margin-right: auto;}
.ml-auto {margin-left: auto;}
.mr-auto {margin-right: auto;}
@media (width >= 980px) and (width < 1600px){
  .ml-auto {margin-left: auto;}
  .mr-auto {margin-right: auto;}
}
.mt-60-30 {margin-top: 30px;}
@media (width >= 1280px) {
  .mt-60-30 {margin-top: 60px;}
}
.pad-30 {padding: 30px;}
.pad-60 {padding: 30px 20px;}
@media (width >= 1280px) {
  .pad-60 {padding: 60px;}
}
.mar-40 {margin-top: 30px;}
@media (width >= 980px) {
  .mar-40 {margin-top: 40px;;}
}
.mar-60 {margin: 0 60px;}
.mar-0-60[class] {margin: 0 20px;}
@media (width >= 1280px) {
  .mar-0-60[class] {margin: 0 60px;}
}
.mar-main {margin: 30px 20px 0;}
@media (width >= 980px) {
  .mar-main  {margin: 60px 20px 30px;}
}
@media (width >= 1600px) {
  .mar-main  {margin: 120px 60px 45px;}
}
.pad-main {padding: 120px 60px 0;}
.pad-prog {padding: 40px 20px;}
.pad-input {padding: 18px 12px;}
.pad-all {padding: 40px 20px 30px;}
@media (width >= 1280px) {
  .pad-all {padding: 75px 60px 60px;}
}

.price-card {background-color: #ffffff; border-radius: 36px; padding: 30px 20px; gap: 25px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12); display: flex; flex-direction: column; justify-content: space-between; text-align: left; z-index: 11;}
@media (width >= 980px) {
  .price-card {gap: 30px;}
}
@media (width >= 1600px) {
  .price-card {gap: 45px;}
}

/* Rhomb */
.rhomb li::before, .rhomb-nth li:not(:nth-child(2),:nth-child(6))::before {content: ''; position: relative; display: inline-block; width: 10px; height: 10px; background-color: #3AB969; margin-right: 10px; transform: translate(0, 0) scaleY(1) rotate(45deg); border-radius: 2px;}
.rhomb-gap {gap: 14px;}
@media (width >= 980px) {
  .rhomb-gap {gap: 20px;}
}
.rhomb-icon::before {width: 36px; height: 36px; border-radius: 10px; transform: translate(0, 0) scaleY(1) rotate(45deg); background-color: #495AB6; position: relative; top: 0; content: ''; display: inline-block; background-repeat: no-repeat; background-size: 26px 26px; background-position: center center;}
@media (width >= 980px) {
  .rhomb-icon::before {width: 60px; height: 60px; background-size: 46px 46px;}
}
.rhomb-icon-1::before {background-image: url("../img/star.svg");}
.rhomb-icon-2::before {background-image: url("../img/ranking.svg");}
.rhomb-icon-3::before {background-image: url("../img/magic-star.svg");}
.rhomb-icon-4::before {background-image: url("../img/3d-rotate.svg");}
.rhomb-icon-5::before {background-image: url("../img/profile-2user.svg");}
.rhomb-icon-6::before {background-image: url("../img/ranking-2.svg");}
.rhomb-purple[class] li::before {background-color: #495AB6;}
.z-index,
.z-index li {z-index: 11;}

/* Icon */
.icon-white-bg li {border-radius: 20px; padding: 20px; background-color: white; display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}
@media (width >= 1600px) {
  .icon-white-bg li  {padding: 30px;}
}
.icon-white-bg-abs li[class] {padding: 37px 30px 30px;}
.number-white-bg {border-radius: 20px; padding: 20px; background-color: white; display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}
@media (width >= 1600px) {
  .number-white-bg  {padding: 30px;}
}
.icon li::before {width: 40px; height: 40px; border-radius: 10px; background-color: rgba(58,185,105,0.1); position: relative; top: 0; content: ''; display: inline-block; background-repeat: no-repeat; background-size: 24px 24px; background-position: center center;}
.icon-abs::before {width: 40px; height: 40px; border-radius: 10px; background-color: rgba(58,185,105,0.1); position: absolute; top: 30px; right: 30px; content: ''; display: inline-block; background-repeat: no-repeat; background-size: 24px 24px; background-position: center center;}
.icon-1::before {background-image: url("../img/driver.svg");}
.icon-2::before {background-image: url("../img/teacher.svg");}
.icon-3::before {background-image: url("../img/home-hashtag.svg");}
.icon-4::before {background-image: url("../img/frame.svg");}
.icon-5::before {background-image: url("../img/convert-3d-cube.svg");}
.icon-6::before {background-image: url("../img/lamp-charge.svg");}
.icon-7::before {background-image: url("../img/receipt-item.svg");}
.icon-8::before {background-image: url("../img/book.svg");}
.icon-9::before {background-image: url("../img/setting-2.svg");}
.icon-10::before {background-image: url("../img/cpu-setting.svg");}
.icon-11::before {background-image: url("../img/share.svg");}
.icon-12::before {background-image: url("../img/people.svg");}
.icon-13::before {background-image: url("../img/convert-card.svg");}
.icon-14::before {background-image: url("../img/document-text.svg");}
.icon-15::before {background-image: url("../img/keyboard-open.svg");}
.icon-16::before {background-image: url("../img/moneys.svg");}
.icon-17::before {background-image: url("../img/discount-shape.svg");}
.icon-18::before {background-image: url("../img/wallet-money.svg");}
.icon-19::before {background-image: url("../img/data.svg");}
.icon-20::before {background-image: url("../img/setting-2.svg");}
.icon-21::before {background-image: url("../img/cpu-setting.svg");}
@media (width >= 1600px) {
  .icon-9 {grid-column-start: 2; grid-column-end: 2;}
  .icon-10 {grid-column-start: 3; grid-column-end: 3;}
}
.image {border: 2px solid #C8CDE9; border-radius: 20px; z-index: 11; position: sticky;}
.image-pict {width: 100%; height: 100%;}
@media (width >= 980px) {
  .image-pict {width: 730px; height: 247px;}
}
.image-2 {border-radius: 20px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}

/* Position */
.relative[class] {position: relative;}
.absolute[class] {position: absolute;}

/* Grid items */
.flex {display: flex;}
@media (width < 1600px) {
  .flex-col{flex-direction: column;}
}
@media (width < 980px) {
  .flex-col-mob{flex-direction: column; align-items: center;}
}
@media (width < 1600px) {
  .flex-col-row{gap: 100px;}
}
@media (width >= 1600px) {
  .flex-col-row{gap: 75px;}
}
.grid {display: grid; gap: 16px;}
.grid-flex {display: flex; flex-direction: column; gap: 10px;}
@media (width >= 980px) {
  .grid-flex {display: grid; gap: 16px;}
}
.grid-2 {grid-template-columns: repeat(2, 1fr);}
.grid-3 {grid-template-columns: repeat(3, 1fr);}
@media (width >= 980px) and (width < 1340px){
  .grid-1 {grid-column-start: 1; grid-column-end: 4; margin-top: -15px;}
}
@media (width >= 980px) {
  .grid-2-1 {grid-template-columns: repeat(2, 1fr);}
}
@media (width >= 1040px) {
  .grid-2-1-m {grid-template-columns: repeat(2, 1fr);}
}
@media (width < 980px) {
  .grid-2-1-m {grid-template-columns: repeat(3, 1fr);}
}
@media (width < 900px) {
  .grid-2-1-m {grid-template-columns: repeat(2, 1fr);}
}
@media (width < 600px) {
  .grid-2-1-m {grid-template-columns: repeat(1, 1fr);}
}
@media (width >= 980px) {
  .grid-3-2 {grid-template-columns: repeat(2, 1fr);}
}
@media (width >= 1280px) {
  .grid-3-2 {grid-template-columns: repeat(3, 1fr);}
}
.grid-4 {grid-template-columns: repeat(4, 1fr);}

@media (width >= 980px) {
  .grid-4r {grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;}
}
@media (width >= 1340px) {
  .grid-4r {grid-template-columns: 0.5fr 1.4fr 1fr 1fr; gap: 60px;}
}
@media (width < 980px) {
  .grid-4-2 {display: flex; flex-direction: column;}
}
@media (width >= 980px) {
  .grid-4-2 {grid-template-columns: repeat(2, 1fr);}
}
@media (width >= 1600px) {
  .grid-4-2 {grid-template-columns: repeat(4, 1fr);}
}
@media (width < 980px) {
  .grid-4-3 {display: flex; flex-direction: column;}
}
@media (width >= 980px) {
  .grid-4-3 {grid-template-columns: repeat(2, 1fr);}
}
@media (width >= 1280px) {
  .grid-4-3 {grid-template-columns: repeat(3, 1fr);}
}
@media (width >= 1600px) {
  .grid-4-3 {grid-template-columns: repeat(4, 1fr);}
}
@media (width >= 450px) {
  .grid-4-3-s {grid-template-columns: repeat(2, 1fr);}
}
@media (width >= 700px) {
  .grid-4-3-s {grid-template-columns: repeat(3, 1fr);}
}
@media (width >= 1600px) {
  .grid-4-3-s {grid-template-columns: repeat(4, 1fr);}
}
@media (width < 980px) {
  .grid-5 {grid-template-columns: repeat(6, 1fr);}
}
@media (width < 900px) {
  .grid-5 {grid-template-columns: repeat(5, 1fr);}
}
@media (width < 780px) {
  .grid-5 {grid-template-columns: repeat(4, 1fr);}
}
@media (width < 625px) {
  .grid-5 {grid-template-columns: repeat(3, 1fr);}
}
@media (width < 470px) {
  .grid-5 {grid-template-columns: repeat(2, 1fr);}
}

/* Align */
.jf-sp-bw {justify-content: space-between;}
.jf-sp-ar {justify-content: space-around;}
.al-center {align-items: center;}
.al-left[class] {align-items: flex-start;}
.al-end {align-items: flex-end;}
.col {flex-direction: column;}
.row[class] {flex-direction: row;}
.jf-end {justify-items: end;}
@media (width < 980px) {
  .col-rev[class] {flex-direction: column-reverse; align-items: center; gap: 20px;}
  }

/* Color */
.purple {background-color: #495AB6; background-image: url("../img/purple.svg"); background-size: cover; position: relative; padding: 40px 20px; flex-direction: column; text-align: center;}
@media (width >= 1280px) {
  .purple {padding: 40px 60px; flex-direction: row; text-align: left;}
}
.green {background-color: #3AB969; background-image: url("../img/green.svg"); background-size: cover; position: relative; padding: 40px 20px; border-radius: 20px;}
@media (width >= 1280px) {
  .green {padding: 40px 60px; flex-direction: row; text-align: left;}
}
.purple-img-2 {background-color: #495AB6; background-image: url("../img/purple-qwiz.svg"); background-size: cover; position: relative; padding: 40px;}
.white-p[class] {color: #ffffff;}
.white-bg {background-color: #ffffff;}
.purple-bg[class] {background-color: #495AB6;}
.purple-light-bg[class] {background-color:  rgba(73,90,182,0.05)}
.green-bg[class] {background-color: #3AB969;}
.color-p {color: #495AB6;}
.color-p-trans {color: rgba(73,90,182,0.7);}

/* Textarea Details */
.select {position: relative;}
.select:first-child {margin-top: 30px;}
@media (width >= 1280px) {
  .select:first-child {margin-top: 60px;}
}
.select details {border-radius: 20px; padding: 20px; background-color: rgba(58, 185, 105, 0.05); display: flex; justify-content: space-between;}
@media (width >= 1280px) {
  .select details {padding: 30px}
}
.select details::after {width: 24px; height: 24px; position: absolute; right: 20px; content: ''; display: inline-block; background-repeat: no-repeat; background-size: 24px 24px; background-position: center center; background-image: url("../img/cross.svg");}
@media (width >= 1280px) {
  .select details::after {right: 30px;}
}
details > summary-grid {list-style: none;}
.summary-grid {margin-top: 20px;}
@media (width >= 1280px) {
  .summary-grid {margin-top: 30px;}
}
details {display: block; width: 100%;}

select:first-child details > summary-grid {
  /* Установите нужные стили для раскрытия, например */
  cursor: pointer;
  display: block; /* Или flex, grid */
}


/* Card */
.client-card[class] {border-radius: 20px; width: 132px; height: 74px; background-color: white; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12); background-repeat: no-repeat; background-position: center center;}
@media (width >= 980px) {
  .client-card[class] {width: 180px; height: 100px;}
}
@media (width >= 1600px) {
  .client-card[class] {width: 232px; height: 130px;}
}
.client-card-2 li[class] {border-radius: 20px; width: 132px; height: 74px; background-color: white; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12); background-repeat: no-repeat; background-position: center center;}
@media (width >= 980px) {
  .client-card-2 li[class] {width: 180px; height: 100px;}
}
@media (width >= 1600px) {
  .client-card-2 li[class] {width: 232px; height: 130px;}
}
.client-img-1 {background-image: url("../img/clients/smolny.png"); background-size: 94px 31px;}
@media (width >= 980px) {
  .client-img-1 {background-size: 129px 43px;}
}
@media (width >= 1600px) {
  .client-img-1 {background-size: 166px 55px;}
}
.client-img-2 {background-image: url("../img/clients/gsgroup.png"); background-size: 94px 21px;}
@media (width >= 980px) {
  .client-img-2 {background-size: 129px 29px;}
}
@media (width >= 1600px) {
  .client-img-2 {background-size: 166px 37px;}
}
.client-img-3 {background-image: url("../img/clients/tgk.png"); background-size: 74px 52px;}
@media (width >= 980px) {
  .client-img-3 {background-size: 101px 72px;}
}
@media (width >= 1600px) {
  .client-img-3 {background-size: 130px 93px;}
}
.client-img-5 {background-image: url("../img/clients/telefort.png"); background-size: 94px 43px;}
@media (width >= 980px) {
  .client-img-5 {background-size: 129px 59px;}
}
@media (width >= 1600px) {
  .client-img-5 {background-size: 166px 76px;}
}
.client-img-6 {background-image: url("../img/clients/nienshants.png"); background-size: 94px 34px;}
@media (width >= 980px) {
  .client-img-6 {background-size: 129px 47px;}
}
@media (width >= 1600px) {
  .client-img-6 {background-size: 166px 61px;}
}
.client-img-7 {background-image: url("../img/clients/eurasia.png"); background-size: 94px 31px;}
@media (width >= 980px) {
  .client-img-7 {background-size: 129px 43px;}
}
@media (width >= 1600px) {
  .client-img-7 {background-size: 166px 55px;}
}
.client-img-8 {background-image: url("../img/clients/gazprom.png"); background-size: 104px 25px;}
@media (width >= 980px) {
  .client-img-8 {background-size: 143px 34px;}
}
@media (width >= 1600px) {
  .client-img-8 {background-size: 183px 44px;}
}
.client-img-9 {background-image: url("../img/clients/konvey.png"); background-size: 94px 34px;}
@media (width >= 980px) {
  .client-img-9 {background-size: 129px 47px;}
}
@media (width >= 1600px) {
  .client-img-9 {background-size: 166px 60px;}
}
.client-img-10 {background-image: url("../img/clients/citycentre.png"); background-size: 96px 24px;}
@media (width >= 980px) {
  .client-img-10 {background-size: 132px 33px;}
}
@media (width >= 1600px) {
  .client-img-10 {background-size: 170px 43px;}
}
.client-img-11 {background-image: url("../img/clients/imaqliq.png"); background-size: 99px 24px;}
@media (width >= 980px) {
  .client-img-11 {background-size: 136px 33px;}
}
@media (width >= 1600px) {
  .client-img-11 {background-size: 174px 43px;}
}
.client-img-12 {background-image: url("../img/clients/seaport.png"); background-size: 94px 25px;}
@media (width >= 980px) {
  .client-img-12 {background-size: 129px 34px;}
}
@media (width >= 1600px) {
  .client-img-12 {background-size: 166px 44px;}
}
.client-img-13 {background-image: url("../img/clients/tsifra.png"); background-size: 94px 26px;}
@media (width >= 980px) {
  .client-img-13 {background-size: 129px 35px;}
}
@media (width >= 1600px) {
  .client-img-13 {background-size: 166px 45px;}
}
.client-img-14 {background-image: url("../img/clients/leivo.png"); background-size: 94px 46px;}
@media (width >= 980px) {
  .client-img-14 {background-size: 129px 63px;}
}
@media (width >= 1600px) {
  .client-img-14 {background-size: 166px 81px;}
}
.client-img-15 {background-image: url("../img/clients/fortline.png"); background-size: 94px 42px;}
@media (width >= 980px) {
  .client-img-15 {background-size: 129px 57px;}
}
@media (width >= 1600px) {
  .client-img-15 {background-size: 166px 74px;}
}
.client-img-16 {background-image: url("../img/clients/westcom.png"); background-size: 74px 45px;}
@media (width >= 980px) {
  .client-img-16 {background-size: 100px 61px;}
}
@media (width >= 1600px) {
  .client-img-16 {background-size: 130px 79px;}
}
.client-img-17 {background-image: url("../img/clients/pintelecom.png"); background-size: 74px 49px;}
@media (width >= 980px) {
  .client-img-17 {background-size: 101px 67px;}
}
@media (width >= 1600px) {
  .client-img-17 {background-size: 130px 86px;}
}
.client-img-18 {background-image: url("../img/clients/luga.png"); background-size: 94px 25px;}
@media (width >= 980px) {
  .client-img-18 {background-size: 129px 35px;}
}
@media (width >= 1600px) {
  .client-img-18 {background-size: 166px 45px;}
}
.client-img-19 {background-image: url("../img/clients/telros.png"); background-size: 94px 22px;}
@media (width >= 980px) {
  .client-img-19 {background-size: 129px 31px;}
}
@media (width >= 1600px) {
  .client-img-19 {background-size: 166px 40px;}
}
.client-img-20 {background-image: url("../img/clients/metrocom.png"); background-size: 94px 18px;}
@media (width >= 980px) {
  .client-img-20 {background-size: 128px 24px;}
}
@media (width >= 1600px) {
  .client-img-20 {background-size: 166px 31px;}
}
.client-img-21 {background-image: url("../img/clients/monitoring.png"); background-size: 45px 53px;}
@media (width >= 980px) {
  .client-img-21 {background-size: 62px 73px;}
}
@media (width >= 1600px) {
  .client-img-21 {background-size: 80px 94px;}
}
.client-img-22 {background-image: url("../img/clients/petrosvyaz.png"); background-size: 94px 49px;}
@media (width >= 980px) {
  .client-img-22 {background-size: 129px 67px;}
}
@media (width >= 1600px) {
  .client-img-22 {background-size: 166px 86px;}
}
.client-img-23 {background-image: url("../img/clients/senator.png"); background-size: 40px 52px;}
@media (width >= 980px) {
  .client-img-23 {background-size: 54px 71px;}
}
@media (width >= 1600px) {
  .client-img-23 {background-size: 70px 92px;}
}
.client-img-24 {background-image: url("../img/clients/avelacom.png"); background-size: 94px 26px;}
@media (width >= 980px) {
  .client-img-24 {background-size: 128px 36px;}
}
@media (width >= 1600px) {
  .client-img-24 {background-size: 166px 46px;}
}
.client-img-25 {background-image: url("../img/clients/mysputnik.png"); background-size: 95px 20px;}
@media (width >= 980px) {
  .client-img-25 {background-size: 130px 28px;}
}
@media (width >= 1600px) {
  .client-img-25 {background-size: 166px 36px;}
}
.client-img-26 {background-image: url("../img/clients/altegro.png"); background-size: 75px 46px;}
@media (width >= 980px) {
  .client-img-26 {background-size: 103px 64px;}
}
@media (width >= 1600px) {
  .client-img-26 {background-size: 133px 82px;}
}
.client-img-27 {background-image: url("../img/clients/mosinfocom.png"); background-size: 94px 37px;}
@media (width >= 980px) {
  .client-img-27 {background-size: 129px 51px;}
}
@media (width >= 1600px) {
  .client-img-27 {background-size: 166px 66px;}
}
.client-img-28 {background-image: url("../img/clients/rscc.png"); background-size: 100px 12px;}
@media (width >= 980px) {
  .client-img-28 {background-size: 136px 17px;}
}
@media (width >= 1600px) {
  .client-img-28 {background-size: 174px 22px;}
}
.client-img-29 {background-image: url("../img/clients/parohodstvo.png"); background-size: 94px 50px;}
@media (width >= 980px) {
  .client-img-29 {background-size: 129px 68px;}
}
@media (width >= 1600px) {
  .client-img-29 {background-size: 166px 88px;}
}
.client-img-30 {background-image: url("../img/clients/ostankino.png"); background-size: 94px 47px;}
@media (width >= 980px) {
  .client-img-30 {background-size: 129px 64px;}
}
@media (width >= 1600px) {@font-face {font-family: "Onest"; font-style: normal; font-weight: 700; src: url("../fonts/Onest-Bold.woff2") format("woff2"); src: url("../fonts/Onest-Bold.woff") format("woff"); font-display: swap;}
  @font-face {font-family: "Onest"; font-style: normal; font-weight: 400; src: url("../fonts/Onest-Regular.woff2") format("woff2"); src: url("../fonts/Onest-Regular.woff") format("woff"); font-display: swap;}
  html {height: 100%; font-family: "Onest", sans-serif;}
  body {margin: 0 auto; display: flex; flex-direction: column; min-height: 100%; max-width: 1600px; font-size: 14px; line-height: 18px; color: #222222; background-color: #ffffff; font-weight: 400;}
  @media (width >= 768px) {
    body {font-size: 16px; line-height: 20px;}
  }
  ul {padding: 0;}
  li {list-style: none;}
  p {margin: 0;}
  .visually-hidden {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden;}
  .link-a {text-decoration: none; color: #222222;}
  .link-a:hover {color: #495AB6}
  /* Font */
  h1 {margin: 0; padding: 0; font-size: 22px; line-height: 28px; font-weight: 700; color: #495AB6;}
  @media (width >= 980px) {
    h1 {font-size: 60px; line-height: 78px;}
  }
  @media (width >= 1600px) {
    h1 {font-size: 80px; line-height: 102px;}
  }
  h2 {margin: 0; padding: 0; font-size: 22px; line-height: 30px; font-weight: 700;}
  @media (width >= 980px) {
    h2 {font-size: 46px; line-height: 60px; margin: 0;}
  }
  @media (width >= 1600px) {
    h2 {font-size: 60px; line-height: 78px; margin: 0;}
  }
  h3 {font-size: 16px; line-height: 20px; font-weight: 700; margin: 0;}
  @media (width >= 980px) {
    h3 {font-size: 22px; line-height: 28px;}
  }
  @media (width >= 1600px) {
    h3 {font-size: 24px; line-height: 30px;}
  }
  .fs-20,
  .fs-20 li {font-size: 16px; line-height: 24px;}
  @media (width >= 980px) {
    .fs-20,
    .fs-20 li {font-size: 18px; line-height: 24px;}
  }
  @media (width >= 1600px) {
    .fs-20,
    .fs-20 li {font-size: 20px; line-height: 26px;}
  }
  .fs-22 {font-size: 14px; line-height: 18px;}
  @media (width >= 980px) {
    .fs-22 {font-size: 20px; line-height: 26px;}
  }
  @media (width >= 1600px) {
    .fs-22 {font-size: 22px; line-height: 28px;}
  }
  .fs-22-s {font-size: 16px; line-height: 24px;}
  @media (width >= 980px) {
    .fs-22-s {font-size: 22px; line-height: 28px;}
  }
  .fs-24 {font-size: 18px; line-height: 24px; font-weight: 700; color: #495AB6;}
  @media (width >= 980px) {
    .fs-24 {font-size: 24px; line-height: 32px;}
  }
  .fs-24-m {font-size: 16px; line-height: 24px; font-weight: 700; margin-top: 20px;}
  @media (width >= 1600px) {
    .fs-24-m {font-size: 24px; line-height: 32px; margin-top: 40px;}
  }
  .fs-24-l {font-size: 16px; line-height: 20px; font-weight: 700; margin-top: 0;}
  @media (width >= 980px) {
    .fs-24-l {font-size: 22px; line-height: 28px; font-weight: 700; margin-top: 0;}
  }
  @media (width >= 1600px) {
    .fs-24-l {font-size: 24px; line-height: 30px; font-weight: 700; margin-top: 0;}
  }
  @media (width >= 980px) {
    .fs-26 {font-size: 24px; line-height: 30px;}
  }
  @media (width >= 1600px) {
    .fs-26 {font-size: 26px; line-height: 34px;}
  }
  .fs-30 {font-size: 18px; line-height: 26px; font-weight: 700}
  @media (width >= 980px) {
    .fs-30 {font-size: 26px; line-height: 34px;}
  }
  @media (width >= 1600px) {
    .fs-30 {font-size: 30px; line-height: 38px;}
  }
  .fs-30-m {font-size: 18px; line-height: 26px; font-weight: 700}
  @media (width >= 980px) {
    .fs-30-m {font-size: 26px; line-height: 34px;}
  }
  @media (width >= 1600px) {
    .fs-30-m {font-size: 30px; line-height: 38px;}
  }
  .fs-30-l {font-size: 20px; line-height: 26px; font-weight: 700}
  @media (width >= 980px) {
    .fs-30-l {font-size: 26px; line-height: 34px;}
  }
  @media (width >= 1600px) {
    .fs-30-l {font-size: 30px; line-height: 38px;}
  }
  .fs-37 {font-size: 22px; line-height: 28px; font-weight: 700; color: #495AB6;}
  @media (width >= 980px) {
    .fs-37 {font-size: 32px; line-height: 42px;}
  }
  @media (width >= 1600px) {
    .fs-37 {font-size: 37px; line-height: 44px;}
  }
  .bold {font-weight: 700;}
  .text-left[class] {text-align: left;}
  .text-center[class] {text-align: center;}
  .link {text-decoration: underline; color: #495AB6; font-weight: 700;}

  /* Footer */
  .footer-bg {background-color: rgba(73,90,182,0.15); background-image: url("../img/footer.svg"); background-size: cover; position: relative; padding: 40px 20px; margin-top: 30px;}
  @media (width >= 980px) {
    .footer-bg {padding: 70px 40px; margin-top: 60px;}
  }
  @media (width >= 1600px) {
    .footer-bg {margin-top: 120px;}
  }
  .gap-footer {gap: 14px;}
  @media (width >= 980px) {
    .gap-footer {gap: 20px;}
  }
  /* Button */
  .btn {padding: 20px 32px; font-family: inherit; font-size: 16px; line-height: 20px; font-weight: 700; text-align: center; color: #ffffff; background-color: #495AB6; text-decoration: none; border-radius: 36px; mix-blend-mode: normal; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;}
  .btn-a[class]{padding: 20px 0px;}
  .btn:hover, .btn:active {background-color: #394588}
  .btn:disabled[class] {background-color: #c5c5c5;}
  .btn-second[class] {color: #495AB6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}
  .btn-second:hover, .btn-second:active {color: #ffffff; background-color: #495AB6;}
  .btn-third[class] {color: #ffffff; background-color: #3AB969;}
  .btn-third:hover, .btn-third:active {color: #ffffff; background-color: #308D52;}
  .btn-fourth {width: 100%; color: #495AB6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}
  @media (width >= 980px) {
    .btn-fourth {width: 400px;}
  }
  .btn-fourth:hover[class], .btn-fourth:active[class] {color: #495AB6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.6);}
  .btn-230 {width: 230px;}
  .btn-450[class] {width: 100%; margin-top: 30px;}
  @media (width >= 980px) {
    .btn-450[class] {width: 450px;}
  }
  @media (width >= 980px) and (width < 1600px) {
    .btn-318[class] {width: 318px; margin-left: auto; margin-right: auto;}
  }

  /* Hide */
  @media (width >= 1600px) {
    .hide-d[class] {display:none;}
  }
  @media (width < 1600px) {
    .hide-m[class] {display:none;}
  }
  @media (width >= 980px) {
    .hide-dt[class] {display:none;}
  }
  @media (width < 980px) {
    .hide-mt[class] {display:none;}
  }
  @media (width < 1200px) {
    .hide-menu-desktop[class] {display: none;}
  }
  @media (width >= 1200px) {
    .hide-menu-mobile[class] {display: none; }
  }

  @media (width < 980px) {
    .hidden-m {overflow: hidden;}
  }
  .hidden {overflow: hidden;}

  /* Quiz */
  .btn-quiz[class] {width: 100%; display: flex; justify-content: flex-start; padding: 20px 52px;}
  @media (width >= 980px) {
    .btn-quiz[class] {width: 260px; padding: 22px 88px;}
  }
  @media (width < 980px) {
    .btn-quiz[class] {flex-direction: column;}
  }
  .btn-quiz2[class] {width: 100%; height: 50px; background-color: rgba(58,185,105,0.1); width: 100%; background-image: url("../img/arrow-left.svg"); background-size: 24px 24px; background-repeat: no-repeat; background-position: center center; padding: 32px;}
  @media (width >= 980px) {
    .btn-quiz2[class] {width: 64px; height: 64px; border-radius: 50%;}
  }
  .btn-quiz2:hover[class] {background-color: #3AB969; background-image: url("../img/arrow-left-w.svg");}

  @media (width < 980px) {
    .btn-wrp {width: 100%; display: flex; align-items: flex-start;}
  }

  .hide {
    display: none;
  }

  .quiz-mar {display: flex; gap: 30px; flex-direction: column;}
  @media (width >= 1600px) {
    .quiz-mar {gap: 50px;}
  }
  .quiz-card {display: flex; flex-direction: column; gap: 140px; padding: 40px 20px;}
  @media (width >= 1600px) {
    .quiz-card {padding: 60px;}
  }
  .quiz-img {position: absolute; left: 67%; top: 50%; transform: translate(-50%, -50%);}
  @media (width < 980px) {
    .quiz-img {display: none;}
  }
  /* Circle */
  .circle-platex {place-items: center; display: grid;}
  @media (width >= 980px) {
    .circle-platex {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  }
  @media (width < 670px) {
    .hide-circle[class] {display: none;}
  }

  /* Spacing */
  .gap-10 {gap: 10px;}
  .gap-16 {gap: 16px;}
  .gap-20 {gap: 20px;}
  .gap-30 {gap: 30px;}
  .gap-60 {gap: 60px;}
  .gap-70[class] {gap: 14px;}
  .gap-70-m[class] {gap: 70px}
  @media (width >= 980px) {
    .gap-70-m {gap: 70px;}
  }
  .mar-0 {margin:0;}
  .ml-25 {margin-left: 25px;}
  .ml-30[class] {margin-left: 30px;}
  .ml-40[class] {margin-left: 40px;}
  .mt-0 {margin-top: 0;}
  .mt-10 {margin-top: 10px;}
  .mt-16 {margin-top: 16px;}
  .mt-30 {margin-top: 30px;}
  .mt-40 {margin-top: 40px;}
  .mt-60 {margin-top: 60px;}
  .mb-10 {margin-bottom: 10px;}
  .mb-16 {margin-bottom: 16px;}
  .mb-20 {margin-bottom: 20px;}
  .mb-50 {margin-bottom: 50px;}
  .mb-60 {margin-bottom: 60px;}
  .mb-240 {margin-bottom: 240px;}
  .auto {margin-left: auto; margin-right: auto;}
  .ml-auto {margin-left: auto;}
  .mr-auto {margin-right: auto;}
  @media (width >= 980px) and (width < 1600px){
    .ml-auto {margin-left: auto;}
    .mr-auto {margin-right: auto;}
  }
  .mt-60-30 {margin-top: 30px;}
  @media (width >= 1280px) {
    .mt-60-30 {margin-top: 60px;}
  }
  .pad-30 {padding: 30px;}
  .pad-60 {padding: 30px 20px;}
  @media (width >= 1280px) {
    .pad-60 {padding: 60px;}
  }
  .mar-40 {margin-top: 30px;}
  @media (width >= 980px) {
    .mar-40 {margin-top: 40px;;}
  }
  .mar-60 {margin: 0 60px;}
  .mar-0-60[class] {margin: 0 20px;}
  @media (width >= 1280px) {
    .mar-0-60[class] {margin: 0 60px;}
  }
  .mar-main {margin: 30px 20px 0;}
  @media (width >= 980px) {
    .mar-main  {margin: 60px 20px 30px;}
  }
  @media (width >= 1600px) {
    .mar-main  {margin: 120px 60px 45px;}
  }
  .pad-main {padding: 120px 60px 0;}
  .pad-prog {padding: 40px 20px;}
  .pad-input {padding: 18px 12px;}
  .pad-all {padding: 40px 20px 30px;}
  @media (width >= 1280px) {
    .pad-all {padding: 75px 60px 60px;}
  }

  .price-card {background-color: #ffffff; border-radius: 36px; padding: 30px 20px; gap: 25px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12); display: flex; flex-direction: column; justify-content: space-between; text-align: left; z-index: 11;}
  @media (width >= 980px) {
    .price-card {gap: 30px;}
  }
  @media (width >= 1600px) {
    .price-card {gap: 45px;}
  }

  /* Rhomb */
  .rhomb li::before, .rhomb-nth li:not(:nth-child(2),:nth-child(6))::before {content: ''; position: relative; display: inline-block; width: 10px; height: 10px; background-color: #3AB969; margin-right: 10px; transform: translate(0, 0) scaleY(1) rotate(45deg); border-radius: 2px;}
  .rhomb-gap {gap: 14px;}
  @media (width >= 980px) {
    .rhomb-gap {gap: 20px;}
  }
  .rhomb-icon::before {width: 36px; height: 36px; border-radius: 10px; transform: translate(0, 0) scaleY(1) rotate(45deg); background-color: #495AB6; position: relative; top: 0; content: ''; display: inline-block; background-repeat: no-repeat; background-size: 26px 26px; background-position: center center;}
  @media (width >= 980px) {
    .rhomb-icon::before {width: 60px; height: 60px; background-size: 46px 46px;}
  }
  .rhomb-icon-1::before {background-image: url("../img/star.svg");}
  .rhomb-icon-2::before {background-image: url("../img/ranking.svg");}
  .rhomb-icon-3::before {background-image: url("../img/magic-star.svg");}
  .rhomb-icon-4::before {background-image: url("../img/3d-rotate.svg");}
  .rhomb-icon-5::before {background-image: url("../img/profile-2user.svg");}
  .rhomb-icon-6::before {background-image: url("../img/ranking-2.svg");}
  .rhomb-purple[class] li::before {background-color: #495AB6;}
  .z-index,
  .z-index li {z-index: 11;}

  /* Icon */
  .icon-white-bg li {border-radius: 20px; padding: 20px; background-color: white; display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}
  @media (width >= 1600px) {
    .icon-white-bg li  {padding: 30px;}
  }
  .icon-white-bg-abs li[class] {padding: 37px 30px 30px;}
  .number-white-bg {border-radius: 20px; padding: 20px; background-color: white; display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}
  @media (width >= 1600px) {
    .number-white-bg  {padding: 30px;}
  }
  .icon li::before {width: 40px; height: 40px; border-radius: 10px; background-color: rgba(58,185,105,0.1); position: relative; top: 0; content: ''; display: inline-block; background-repeat: no-repeat; background-size: 24px 24px; background-position: center center;}
  .icon-abs::before {width: 40px; height: 40px; border-radius: 10px; background-color: rgba(58,185,105,0.1); position: absolute; top: 30px; right: 30px; content: ''; display: inline-block; background-repeat: no-repeat; background-size: 24px 24px; background-position: center center;}
  .icon-1::before {background-image: url("../img/driver.svg");}
  .icon-2::before {background-image: url("../img/teacher.svg");}
  .icon-3::before {background-image: url("../img/home-hashtag.svg");}
  .icon-4::before {background-image: url("../img/frame.svg");}
  .icon-5::before {background-image: url("../img/convert-3d-cube.svg");}
  .icon-6::before {background-image: url("../img/lamp-charge.svg");}
  .icon-7::before {background-image: url("../img/receipt-item.svg");}
  .icon-8::before {background-image: url("../img/book.svg");}
  .icon-9::before {background-image: url("../img/setting-2.svg");}
  .icon-10::before {background-image: url("../img/cpu-setting.svg");}
  .icon-11::before {background-image: url("../img/share.svg");}
  .icon-12::before {background-image: url("../img/people.svg");}
  .icon-13::before {background-image: url("../img/convert-card.svg");}
  .icon-14::before {background-image: url("../img/document-text.svg");}
  .icon-15::before {background-image: url("../img/keyboard-open.svg");}
  .icon-16::before {background-image: url("../img/moneys.svg");}
  .icon-17::before {background-image: url("../img/discount-shape.svg");}
  .icon-18::before {background-image: url("../img/wallet-money.svg");}
  .icon-19::before {background-image: url("../img/data.svg");}
  .icon-20::before {background-image: url("../img/setting-2.svg");}
  .icon-21::before {background-image: url("../img/cpu-setting.svg");}
  @media (width >= 1600px) {
    .icon-9 {grid-column-start: 2; grid-column-end: 2;}
    .icon-10 {grid-column-start: 3; grid-column-end: 3;}
  }
  .image {border: 2px solid #C8CDE9; border-radius: 20px; z-index: 11; position: sticky;}
  .image-pict {width: 100%; height: 100%;}
  @media (width >= 980px) {
    .image-pict {width: 730px; height: 247px;}
  }
  .image-2 {border-radius: 20px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}

  /* Position */
  .relative[class] {position: relative;}
  .absolute[class] {position: absolute;}

  /* Grid items */
  .flex {display: flex;}
  @media (width < 1600px) {
    .flex-col{flex-direction: column;}
  }
  @media (width < 980px) {
    .flex-col-mob{flex-direction: column; align-items: center;}
  }
  @media (width < 1600px) {
    .flex-col-row{gap: 100px;}
  }
  @media (width >= 1600px) {
    .flex-col-row{gap: 75px;}
  }
  .grid {display: grid; gap: 16px;}
  .grid-flex {display: flex; flex-direction: column; gap: 10px;}
  @media (width >= 980px) {
    .grid-flex {display: grid; gap: 16px;}
  }
  .grid-2 {grid-template-columns: repeat(2, 1fr);}
  .grid-3 {grid-template-columns: repeat(3, 1fr);}
  @media (width >= 980px) and (width < 1340px){
    .grid-1 {grid-column-start: 1; grid-column-end: 4; margin-top: -15px;}
  }
  @media (width >= 980px) {
    .grid-2-1 {grid-template-columns: repeat(2, 1fr);}
  }
  @media (width >= 1040px) {
    .grid-2-1-m {grid-template-columns: repeat(2, 1fr);}
  }
  @media (width < 980px) {
    .grid-2-1-m {grid-template-columns: repeat(3, 1fr);}
  }
  @media (width < 900px) {
    .grid-2-1-m {grid-template-columns: repeat(2, 1fr);}
  }
  @media (width < 600px) {
    .grid-2-1-m {grid-template-columns: repeat(1, 1fr);}
  }
  @media (width >= 980px) {
    .grid-3-2 {grid-template-columns: repeat(2, 1fr);}
  }
  @media (width >= 1280px) {
    .grid-3-2 {grid-template-columns: repeat(3, 1fr);}
  }
  .grid-4 {grid-template-columns: repeat(4, 1fr);}

  @media (width >= 980px) {
    .grid-4r {grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;}
  }
  @media (width >= 1340px) {
    .grid-4r {grid-template-columns: 0.5fr 1.4fr 1fr 1fr; gap: 60px;}
  }
  @media (width < 980px) {
    .grid-4-2 {display: flex; flex-direction: column;}
  }
  @media (width >= 980px) {
    .grid-4-2 {grid-template-columns: repeat(2, 1fr);}
  }
  @media (width >= 1600px) {
    .grid-4-2 {grid-template-columns: repeat(4, 1fr);}
  }
  @media (width < 980px) {
    .grid-4-3 {display: flex; flex-direction: column;}
  }
  @media (width >= 980px) {
    .grid-4-3 {grid-template-columns: repeat(2, 1fr);}
  }
  @media (width >= 1280px) {
    .grid-4-3 {grid-template-columns: repeat(3, 1fr);}
  }
  @media (width >= 1600px) {
    .grid-4-3 {grid-template-columns: repeat(4, 1fr);}
  }
  @media (width >= 450px) {
    .grid-4-3-s {grid-template-columns: repeat(2, 1fr);}
  }
  @media (width >= 700px) {
    .grid-4-3-s {grid-template-columns: repeat(3, 1fr);}
  }
  @media (width >= 1600px) {
    .grid-4-3-s {grid-template-columns: repeat(4, 1fr);}
  }
  @media (width < 980px) {
    .grid-5 {grid-template-columns: repeat(6, 1fr);}
  }
  @media (width < 900px) {
    .grid-5 {grid-template-columns: repeat(5, 1fr);}
  }
  @media (width < 780px) {
    .grid-5 {grid-template-columns: repeat(4, 1fr);}
  }
  @media (width < 625px) {
    .grid-5 {grid-template-columns: repeat(3, 1fr);}
  }
  @media (width < 470px) {
    .grid-5 {grid-template-columns: repeat(2, 1fr);}
  }

  /* Align */
  .jf-sp-bw {justify-content: space-between;}
  .jf-sp-ar {justify-content: space-around;}
  .al-center {align-items: center;}
  .al-left[class] {align-items: flex-start;}
  .al-end {align-items: flex-end;}
  .col {flex-direction: column;}
  .row[class] {flex-direction: row;}
  .jf-end {justify-items: end;}
  @media (width < 980px) {
    .col-rev[class] {flex-direction: column-reverse; align-items: center; gap: 20px;}
  }

  /* Color */
  .purple {background-color: #495AB6; background-image: url("../img/purple.svg"); background-size: cover; position: relative; padding: 40px 20px; flex-direction: column; text-align: center;}
  @media (width >= 1280px) {
    .purple {padding: 40px 60px; flex-direction: row; text-align: left;}
  }
  .green {background-color: #3AB969; background-image: url("../img/green.svg"); background-size: cover; position: relative; padding: 40px 20px; border-radius: 20px;}
  @media (width >= 1280px) {
    .green {padding: 40px 60px; flex-direction: row; text-align: left;}
  }
  .purple-img-2 {background-color: #495AB6; background-image: url("../img/purple-qwiz.svg"); background-size: cover; position: relative; padding: 40px;}
  .white-p[class] {color: #ffffff;}
  .white-bg {background-color: #ffffff;}
  .purple-bg[class] {background-color: #495AB6;}
  .purple-light-bg[class] {background-color:  rgba(73,90,182,0.05)}
  .green-bg[class] {background-color: #3AB969;}
  .color-p {color: #495AB6;}
  .color-p-trans {color: rgba(73,90,182,0.7);}

  /* Textarea Details */
  .select {position: relative;}
  .select:first-child {margin-top: 30px;}
  @media (width >= 1280px) {
    .select:first-child {margin-top: 60px;}
  }
  .select details {border-radius: 20px; padding: 20px; background-color: rgba(58, 185, 105, 0.05); display: flex; justify-content: space-between;}
  @media (width >= 1280px) {
    .select details {padding: 30px}
  }
  .select details::after {width: 24px; height: 24px; position: absolute; right: 20px; content: ''; display: inline-block; background-repeat: no-repeat; background-size: 24px 24px; background-position: center center; background-image: url("../img/cross.svg");}
  @media (width >= 1280px) {
    .select details::after {right: 30px;}
  }
  details > summary-grid {list-style: none;}
  .summary-grid {margin-top: 20px;}
  @media (width >= 1280px) {
    .summary-grid {margin-top: 30px;}
  }
  details {display: block; width: 100%;}

  select:first-child details > summary-grid {
    /* Установите нужные стили для раскрытия, например */
    cursor: pointer;
    display: block; /* Или flex, grid */
  }


  /* Card */
  .client-card[class] {border-radius: 20px; width: 132px; height: 74px; background-color: white; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12); background-repeat: no-repeat; background-position: center center;}
  @media (width >= 980px) {
    .client-card[class] {width: 180px; height: 100px;}
  }
  @media (width >= 1600px) {
    .client-card[class] {width: 232px; height: 130px;}
  }
  .client-card-2 li[class] {border-radius: 20px; width: 132px; height: 74px; background-color: white; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12); background-repeat: no-repeat; background-position: center center;}
  @media (width >= 980px) {
    .client-card-2 li[class] {width: 180px; height: 100px;}
  }
  @media (width >= 1600px) {
    .client-card-2 li[class] {width: 232px; height: 130px;}
  }
  .client-img-1 {background-image: url("../img/clients/smolny.png"); background-size: 94px 31px;}
  @media (width >= 980px) {
    .client-img-1 {background-size: 129px 43px;}
  }
  @media (width >= 1600px) {
    .client-img-1 {background-size: 166px 55px;}
  }
  .client-img-2 {background-image: url("../img/clients/gsgroup.png"); background-size: 94px 21px;}
  @media (width >= 980px) {
    .client-img-2 {background-size: 129px 29px;}
  }
  @media (width >= 1600px) {
    .client-img-2 {background-size: 166px 37px;}
  }
  .client-img-3 {background-image: url("../img/clients/tgk.png"); background-size: 74px 52px;}
  @media (width >= 980px) {
    .client-img-3 {background-size: 101px 72px;}
  }
  @media (width >= 1600px) {
    .client-img-3 {background-size: 130px 93px;}
  }
  .client-img-5 {background-image: url("../img/clients/telefort.png"); background-size: 94px 43px;}
  @media (width >= 980px) {
    .client-img-5 {background-size: 129px 59px;}
  }
  @media (width >= 1600px) {
    .client-img-5 {background-size: 166px 76px;}
  }
  .client-img-6 {background-image: url("../img/clients/nienshants.png"); background-size: 94px 34px;}
  @media (width >= 980px) {
    .client-img-6 {background-size: 129px 47px;}
  }
  @media (width >= 1600px) {
    .client-img-6 {background-size: 166px 61px;}
  }
  .client-img-7 {background-image: url("../img/clients/eurasia.png"); background-size: 94px 31px;}
  @media (width >= 980px) {
    .client-img-7 {background-size: 129px 43px;}
  }
  @media (width >= 1600px) {
    .client-img-7 {background-size: 166px 55px;}
  }
  .client-img-8 {background-image: url("../img/clients/gazprom.png"); background-size: 104px 25px;}
  @media (width >= 980px) {
    .client-img-8 {background-size: 143px 34px;}
  }
  @media (width >= 1600px) {
    .client-img-8 {background-size: 183px 44px;}
  }
  .client-img-9 {background-image: url("../img/clients/konvey.png"); background-size: 94px 34px;}
  @media (width >= 980px) {
    .client-img-9 {background-size: 129px 47px;}
  }
  @media (width >= 1600px) {
    .client-img-9 {background-size: 166px 60px;}
  }
  .client-img-10 {background-image: url("../img/clients/citycentre.png"); background-size: 96px 24px;}
  @media (width >= 980px) {
    .client-img-10 {background-size: 132px 33px;}
  }
  @media (width >= 1600px) {
    .client-img-10 {background-size: 170px 43px;}
  }
  .client-img-11 {background-image: url("../img/clients/imaqliq.png"); background-size: 99px 24px;}
  @media (width >= 980px) {
    .client-img-11 {background-size: 136px 33px;}
  }
  @media (width >= 1600px) {
    .client-img-11 {background-size: 174px 43px;}
  }
  .client-img-12 {background-image: url("../img/clients/seaport.png"); background-size: 94px 25px;}
  @media (width >= 980px) {
    .client-img-12 {background-size: 129px 34px;}
  }
  @media (width >= 1600px) {
    .client-img-12 {background-size: 166px 44px;}
  }
  .client-img-13 {background-image: url("../img/clients/tsifra.png"); background-size: 94px 26px;}
  @media (width >= 980px) {
    .client-img-13 {background-size: 129px 35px;}
  }
  @media (width >= 1600px) {
    .client-img-13 {background-size: 166px 45px;}
  }
  .client-img-14 {background-image: url("../img/clients/leivo.png"); background-size: 94px 46px;}
  @media (width >= 980px) {
    .client-img-14 {background-size: 129px 63px;}
  }
  @media (width >= 1600px) {
    .client-img-14 {background-size: 166px 81px;}
  }
  .client-img-15 {background-image: url("../img/clients/fortline.png"); background-size: 94px 42px;}
  @media (width >= 980px) {
    .client-img-15 {background-size: 129px 57px;}
  }
  @media (width >= 1600px) {
    .client-img-15 {background-size: 166px 74px;}
  }
  .client-img-16 {background-image: url("../img/clients/westcom.png"); background-size: 74px 45px;}
  @media (width >= 980px) {
    .client-img-16 {background-size: 100px 61px;}
  }
  @media (width >= 1600px) {
    .client-img-16 {background-size: 130px 79px;}
  }
  .client-img-17 {background-image: url("../img/clients/pintelecom.png"); background-size: 74px 49px;}
  @media (width >= 980px) {
    .client-img-17 {background-size: 101px 67px;}
  }
  @media (width >= 1600px) {
    .client-img-17 {background-size: 130px 86px;}
  }
  .client-img-18 {background-image: url("../img/clients/luga.png"); background-size: 94px 25px;}
  @media (width >= 980px) {
    .client-img-18 {background-size: 129px 35px;}
  }
  @media (width >= 1600px) {
    .client-img-18 {background-size: 166px 45px;}
  }
  .client-img-19 {background-image: url("../img/clients/telros.png"); background-size: 94px 22px;}
  @media (width >= 980px) {
    .client-img-19 {background-size: 129px 31px;}
  }
  @media (width >= 1600px) {
    .client-img-19 {background-size: 166px 40px;}
  }
  .client-img-20 {background-image: url("../img/clients/metrocom.png"); background-size: 94px 18px;}
  @media (width >= 980px) {
    .client-img-20 {background-size: 128px 24px;}
  }
  @media (width >= 1600px) {
    .client-img-20 {background-size: 166px 31px;}
  }
  .client-img-21 {background-image: url("../img/clients/monitoring.png"); background-size: 45px 53px;}
  @media (width >= 980px) {
    .client-img-21 {background-size: 62px 73px;}
  }
  @media (width >= 1600px) {
    .client-img-21 {background-size: 80px 94px;}
  }
  .client-img-22 {background-image: url("../img/clients/petrosvyaz.png"); background-size: 94px 49px;}
  @media (width >= 980px) {
    .client-img-22 {background-size: 129px 67px;}
  }
  @media (width >= 1600px) {
    .client-img-22 {background-size: 166px 86px;}
  }
  .client-img-23 {background-image: url("../img/clients/senator.png"); background-size: 40px 52px;}
  @media (width >= 980px) {
    .client-img-23 {background-size: 54px 71px;}
  }
  @media (width >= 1600px) {
    .client-img-23 {background-size: 70px 92px;}
  }
  .client-img-24 {background-image: url("../img/clients/avelacom.png"); background-size: 94px 26px;}
  @media (width >= 980px) {
    .client-img-24 {background-size: 128px 36px;}
  }
  @media (width >= 1600px) {
    .client-img-24 {background-size: 166px 46px;}
  }
  .client-img-25 {background-image: url("../img/clients/mysputnik.png"); background-size: 95px 20px;}
  @media (width >= 980px) {
    .client-img-25 {background-size: 130px 28px;}
  }
  @media (width >= 1600px) {
    .client-img-25 {background-size: 166px 36px;}
  }
  .client-img-26 {background-image: url("../img/clients/altegro.png"); background-size: 75px 46px;}
  @media (width >= 980px) {
    .client-img-26 {background-size: 103px 64px;}
  }
  @media (width >= 1600px) {
    .client-img-26 {background-size: 133px 82px;}
  }
  .client-img-27 {background-image: url("../img/clients/mosinfocom.png"); background-size: 94px 37px;}
  @media (width >= 980px) {
    .client-img-27 {background-size: 129px 51px;}
  }
  @media (width >= 1600px) {
    .client-img-27 {background-size: 166px 66px;}
  }
  .client-img-28 {background-image: url("../img/clients/rscc.png"); background-size: 100px 12px;}
  @media (width >= 980px) {
    .client-img-28 {background-size: 136px 17px;}
  }
  @media (width >= 1600px) {
    .client-img-28 {background-size: 174px 22px;}
  }
  .client-img-29 {background-image: url("../img/clients/parohodstvo.png"); background-size: 94px 50px;}
  @media (width >= 980px) {
    .client-img-29 {background-size: 129px 68px;}
  }
  @media (width >= 1600px) {
    .client-img-29 {background-size: 166px 88px;}
  }
  .client-img-30 {background-image: url("../img/clients/ostankino.png"); background-size: 94px 47px;}
  @media (width >= 980px) {
    .client-img-30 {background-size: 129px 64px;}
  }
  @media (width >= 1600px) {
    .client-img-30 {background-size: 166px 83px;}
  }
  .client-img-31 {background-image: url("../img/clients/cittel.png"); background-size: 94px 32px;}
  @media (width >= 980px) {
    .client-img-31 {background-size: 128px 44px;}
  }
  @media (width >= 1600px) {
    .client-img-31 {background-size: 166px 56px;}
  }
  .client-img-32 {background-image: url("../img/clients/intinform.png"); background-size: 94px 70px;}
  @media (width >= 980px) {
    .client-img-32 {background-size: 129px 96px;}
  }
  @media (width >= 1600px) {
    .client-img-32 {background-size: 166px 124px;}
  }
  .client-img-33 {background-image: url("../img/clients/obitelecom.png"); background-size: 94px 28px;}
  @media (width >= 980px) {
    .client-img-33 {background-size: 129px 39px;}
  }
  @media (width >= 1600px) {
    .client-img-33 {background-size: 166px 50px;}
  }
  .client-img-34 {background-image: url("../img/clients/alfaschool.png"); background-size: 58px 46px;}
  @media (width >= 980px) {
    .client-img-34 {background-size: 80px 63px;}
  }
  @media (width >= 1600px) {
    .client-img-34 {background-size: 103px 82px;}
  }
  .client-img-35 {background-image: url("../img/clients/svyazservis.png"); background-size: 94px 23px;}
  @media (width >= 980px) {
    .client-img-35 {background-size: 128px 31px;}
  }
  @media (width >= 1600px) {
    .client-img-35 {background-size: 166px 40px;}
  }
  .client-img-36 {background-image: url("../img/clients/auchan.png"); background-size: 94px 22px;}
  @media (width >= 980px) {
    .client-img-36 {background-size: 130px 30px;}
  }
  @media (width >= 1600px) {
    .client-img-36 {background-size: 166px 40px;}
  }
  .client-img-37 {background-image: url("../img/clients/fryazino.png"); background-size: 79px 63px;}
  @media (width >= 980px) {
    .client-img-37 {background-size: 108px 86px;}
  }
  @media (width >= 1600px) {
    .client-img-37 {background-size: 140px 111px;}
  }
  .client-img-38 {background-image: url("../img/clients/odk.png"); background-size: 94px 28px;}
  @media (width >= 980px) {
    .client-img-38 {background-size: 128px 38px;}
  }
  @media (width >= 1600px) {
    .client-img-38 {background-size: 166px 49px;}
  }
  .client-img-39 {background-image: url("../img/clients/2day.png"); background-size: 94px 44px;}
  @media (width >= 980px) {
    .client-img-39 {background-size: 128px 60px;}
  }
  @media (width >= 1600px) {
    .client-img-39 {background-size: 166px 77px;}
  }
  .client-img-40 {background-image: url("../img/clients/innopolis.png"); background-size: 108px 29px;}
  @media (width >= 980px) {
    .client-img-40 {background-size: 149px 39px;}
  }
  @media (width >= 1600px) {
    .client-img-40 {background-size: 166px 44px;}
  }
  .client-img-41 {background-image: url("../img/clients/roilcom.png"); background-size: 94px 24px;}
  @media (width >= 980px) {
    .client-img-41 {background-size: 129px 32px;}
  }
  @media (width >= 1600px) {
    .client-img-41 {background-size: 166px 42px;}
  }
  .client-img-42 {background-image: url("../img/clients/cubio.png"); background-size: 53px 53px;}
  @media (width >= 980px) {
    .client-img-42 {background-size: 72px 72px;}
  }
  @media (width >= 1600px) {
    .client-img-42 {background-size: 93px 93px;}
  }
  .client-img-43 {background-image: url("../img/clients/mrsk.png"); background-size: 94px 40px;}
  @media (width >= 980px) {
    .client-img-43 {background-size: 129px 55px;}
  }
  @media (width >= 1600px) {
    .client-img-43 {background-size: 166px 71px;}
  }
  .client-img-44 {background-image: url("../img/clients/seversvyaz.png"); background-size: 94px 20px;}
  @media (width >= 980px) {
    .client-img-44 {background-size: 129px 27px;}
  }
  @media (width >= 1600px) {
    .client-img-44 {background-size: 166px 35px;}
  }
  .client-img-45 {background-image: url("../img/clients/rostelecom.png"); background-size: 94px 35px;}
  @media (width >= 980px) {
    .client-img-45 {background-size: 129px 47px;}
  }
  @media (width >= 1600px) {
    .client-img-45 {background-size: 166px 61px;}
  }
  .client-img-46 {background-image: url("../img/clients/onet.png"); background-size: 69px 49px;}
  @media (width >= 980px) {
    .client-img-46 {background-size: 95px 67px;}
  }
  @media (width >= 1600px) {
    .client-img-46 {background-size: 122px 86px;}
  }
  .client-img-47 {background-image: url("../img/clients/satelcom.png"); background-size: 94px 26px;}
  @media (width >= 980px) {
    .client-img-47 {background-size: 129px 35px;}
  }
  @media (width >= 1600px) {
    .client-img-47 {background-size: 166px 46px;}
  }
  .client-img-48 {background-image: url("../img/clients/dalsatcom.png"); background-size: 72px 55px;}
  @media (width >= 980px) {
    .client-img-48 {background-size: 98px 76px;}
  }
  @media (width >= 1600px) {
    .client-img-48 {background-size: 126px 98px;}
  }
  .client-img-49 {background-image: url("../img/clients/rokotel.png"); background-size: 94px 24px;}
  @media (width >= 980px) {
    .client-img-49 {background-size: 129px 32px;}
  }
  @media (width >= 1600px) {
    .client-img-49 {background-size: 166px 41px;}
  }
  .client-img-50 {background-image: url("../img/clients/tst.png"); background-size: 94px 30px;}
  @media (width >= 980px) {
    .client-img-50 {background-size: 129px 41px;}
  }
  @media (width >= 1600px) {
    .client-img-50 {background-size: 166px 53px;}
  }
  .client-img-51 {background-image: url("../img/clients/tsdk.png"); background-size: 94px 26px;}
  @media (width >= 980px) {
    .client-img-51 {background-size: 129px 36px;}
  }
  @media (width >= 1600px) {
    .client-img-51 {background-size: 166px 46px;}
  }
  .client-img-52 {background-image: url("../img/clients/dataru.png"); background-size: 91px 43px;}
  @media (width >= 980px) {
    .client-img-52 {background-size: 117px 55px;}
  }
  @media (width >= 1600px) {
    .client-img-52 {background-size: 152px 72px;}
  }

  /* Width/Height */
  .wide {width: 100%;}
  @media (width < 980px) {
    .wide2 {width: 100%;}
  }
  .w-298[class] {width: 298px;}
  .w-424[class] {width: 424px;}
  .mw-415[class] {max-width: 415px;}

  /* Input */
  .input {background-color: rgba(73,90,182,0.05); border-radius: 8px;}

  /* Border */
  .stroke {border-top: 2px solid rgba(73,90,182,0.3); border-bottom: 2px solid rgba(73,90,182,0.3); padding: 30px 20px; margin-top: 30px; overflow: hidden; white-space: nowrap;}
  @media (width >= 1600px) {
    .stroke {margin-top: 40px; padding: 35px 60px;}
  }
  .stroke li::before {content: ''; position: relative; display: inline-block; width: 8px; height: 8px; background-color: #495AB6; list-style: circle; border-radius: 50%;}
  .border li {border: 2px solid rgba(73,90,182,0.3); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 16px; justify-content: flex-start;}
  .border-20 {border-radius: 20px;}
  .border-36 {border-radius: 36px;}

  /* Toggle */
  .view-tab {margin: 60px 0 36px; }
  .view-tab button {padding: 20px; border: none; background-color:#ffffff; color: #3AB969; font-size: 14px; line-height: 18px; min-width: 150px; border-radius: 36px;}
  @media (width >= 980px) {
    .view-tab button {width: 228px;}
  }
  .view-tab button.active {background-color: #3AB969; color:#ffffff; border: thin transparent; border-radius: 36px;}
  .view-tab button:hover:not(button.active) {background-color:#3AB969; border: thin solid #3AB969; color:#ffffff; border-radius: 36px;}
  .toggle {display: flex; flex-direction: row; align-items: center; gap: 16px;}
  .tab-links {border: thin solid #3AB969; display: flex; border-radius: 36px; padding: 5px; justify-content: space-between; overflow: scroll; white-space: nowrap;}
  .tab-links li {padding: 10px 15px; cursor: pointer; background-color: #f2f2f2;}
  .tab-links li.active {background-color: #eee; border: 1px solid #ddd; border-bottom: none;}
  .tab-links button {cursor: pointer;}
  .tab-content {padding: 40px 0 0;}
  .tab-pane {display: none;}
  .tab-pane.active {display: block;}

  /* Shadow */
  .shadow {box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);}
  .ellipse {background-image: url("../img/ellipce-blur.svg");}
  .ellipse-2 {background-image: url("../img/ellipce-blur2.svg");}
  .shadow-card {box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}

  /* Background */
  @media (width < 600px) {
    .circles {display: none;}
  }
  .circles li{position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(73, 90, 182, 0.2); animation: animate 25s linear infinite; bottom: -150px;}
  .circles li:nth-child(1){left: 25%; width: 80px; height: 80px; animation-delay: 0s;}
  .circles li:nth-child(2){left: 10%; width: 20px; height: 20px; animation-delay: 0s; animation-duration: 12s;}
  .circles li:nth-child(3){left: 40%; width: 20px; height: 20px; animation-delay: 0s;}
  .circles li:nth-child(4){left: 60%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s;}
  .circles li:nth-child(5){left: 65%; width: 20px; height: 20px; animation-delay: 0s;}
  .circles li:nth-child(6){left: 75%; width: 110px; height: 110px; animation-delay: 0s;}
  .circles li:nth-child(7){left: 35%; width: 150px; height: 150px; animation-delay: 0s;}
  .circles li:nth-child(8){left: 50%; width: 25px; height: 25px; animation-delay: 0s; animation-duration: 45s;}
  .circles li:nth-child(9){left: 20%; width: 15px; height: 15px; animation-delay: 0s; animation-duration: 35s;}
  .circles li:nth-child(10){left: 70%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s;}
  @keyframes animate {
    0%{transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0;}
    100%{transform: translateY(-1000px) rotate(720deg);opacity: 0; border-radius: 50%;}
  }

  /* Number */
  .number {width: 50px; height: 50px; background-color: #E8EAF5; border-radius: 50%; color: #495AB6; font-size: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
  .line {position: relative;}
  .line li {z-index: 10;}
  @media (width >= 980px) {
    .line li:not(:last-child)::after {content: ""; display: block; width: 2px; height: 25%; position: absolute; left: 50%; background-color: #C2C8E6;}
  }

  /* Radio, Checkbox, Switch */
  :is([type="checkbox"], [type="radio"]) {appearance:none; display:inline-block; height: 20px; width:20px; border-radius:50%; vertical-align:-15%; position:relative; transition:background-color .2s ;line-height:1.2; margin:0; border:thin solid transparent;}
  .radio-w[class] {width: 22px;}
  :is([type="checkbox"], [type="radio"]):not(:checked) {border: 1px solid rgba(73,90,182,0.3);}
  :is([type="checkbox"], [type="radio"]):checked {border: 1px solid #495AB6;}
  :is([type="checkbox"], [type="radio"]):before {position:absolute;inset:0;content:"";clip-path:circle(23%);}
  [type="radio"]:checked:before {background-color:#495AB6}
  /* box */
  [type="checkbox"]:not(.switch) {border-radius:.25em;}
  [type="checkbox"]:not(.switch):checked:before {clip-path:polygon(10% 50%,40% 80%,90% 30%,80% 20%,40% 60%,20% 40%); width: 100%; height: 100%; background-color: #ffffff;}
  /* switch */
  [type="checkbox"].switch {width:2.2em;}
  [type="checkbox"].switch:not(:checked) {border: 1px solid #495AB6;}
  [type="checkbox"].switch:before {--pos:27%;clip-path:circle(28% at var(--pos) 50%);transition:clip-path .2s;}
  [type="checkbox"].switch:checked:before {--pos:73%;}

  /* checkbox */
  [type="checkbox"]:checked[class] {border: 1px solid #495AB6; background-color: #495AB6;}
  /* [type="checkbox"]:checked:before[class] {clip-path:polygon(10% 50%,40% 80%,90% 30%,80% 20%,40% 60%,20% 40%); width: 100%; height: 100%; background-color: green;} */


  /* :is([type="checkbox"], [type="radio"]) {--input-color:var(--bg);appearance:none;display:inline-block;height:1.2em;width:1.2em;background-color:var(--input-color);border-radius:1em;vertical-align:-15%;position:relative;transition:background-color .2s;line-height:1.2;margin:0 .2em;border:5px solid transparent; margin: 0;}
  :is([type="checkbox"], [type="radio"]):not(:checked) {border-color:var(--input-frame);}
  :is([type="checkbox"], [type="radio"]):before {position:absolute;inset:0;content:"";background-color:var(--bg);clip-path:circle(32%);}

  [type="checkbox"]:checked {--input-color:var(--input-green);}

  [type="radio"] {border-radius:50%; background-color: var(--bg); border:thin solid var(--input-frame); padding: .563em; margin: 0;}
  [type="radio"]:hover {border-color: var(--bg-light-light-blue);}

  [type="radio"]:checked {border-color: var(--bg-blue);}
  [type="radio"]:checked:disabled {border-color: var(--bg-lines-grey);}

  [type="radio"]:before {border-color: var(--bg-blue) ;}
  [type="radio"]:disabled::before {border-color: var(--bg-lines-grey);}

  [type="radio"]:checked:before {background-color: var(--bg-blue);}
  [type="radio"]:checked:disabled::before {background-color: var(--bg-lines-grey);}
   */{background-image: url("../img/ellipce-blur.svg");}

  .checkbox-input::after,
  .radio-input::after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    font-size: 30px;
    background-image: url("images/check.svg");
    background-repeat: no-repeat;
    transition: 500ms;
  }

  .radio-input::after {
    background-image: url("images/radio.svg");
  }





  /* :root {
    scroll-behavior: smooth;
  }

  /* Burger-menu */
  @media (width < 1200px) {
    .burger-toggle {display: block; width: 50px; height: 50px; background-image: url("../img/burger.svg"); background-repeat: no-repeat; background-color: #394588; background-size: 22px 12px; border-radius: 50%; background-position: center; position: absolute; z-index: 99999; right: 20px; top: -50px;}
  }
  .main-nav {z-index: 99999;}
  @media (width >= 1200px) {
    .main-nav {display: flex;}
  }
  @media (width < 1200px) {
    .main-nav-toggle[aria-expanded="true"] + .main-nav-list {translate: 0% 100%}
    .main-nav-toggle[aria-expanded="true"] .burger-toggle {background-image: url("../img/icon-cross.svg"); background-color: transparent; background-size: 16px 16px;}
    .main-nav-enabled {position: relative; display: grid;}
    .main-nav-enabled .main-nav-list {position: absolute; display: flex; flex-direction: column; z-index: 10; padding: 50px 20px; margin: 0; width: calc(100% - 40px); top: -624px; gap: 100px;}
  }
  .main-nav-list {display: flex; flex-direction: column; padding: 0; margin: 0; background-color: #EDEEF8;; list-style: none; width: 100%; text-align: left;}
  @media (width >= 1200px) {
    .main-nav-list {flex-direction: row; background-color: #ffffff; text-transform: none; align-items: center; font-size: 16px; line-height: 28px; gap: 30px;}
  }
  @media (width >= 1600px) {
    .main-nav-list {gap: 53px;}
  }
  .main-nav-toggle {position: absolute; border: none; justify-self: end; cursor: pointer; z-index: 999999; padding: 6px 20px; background-color: transparent;}
  .main-nav-link {display: flex; color: #222222;; text-decoration: none; font-size: 14px; line-height: 18px; font-family: inherit; font-weight: 400;}
  @media (width >= 1200px) {
    .main-nav-link {color: #003865;}
  }
  @media (width >= 1600px) {
    .main-nav-link {font-size: 16px;}
  }
  .main-nav-link-cur[class] {color: #495AB6; font-weight: 700;}
  @media (width >= 1200px) {
    .main-nav-item {box-shadow: none;}
  }
  .main-nav-item::before {content: none;}

  /* Header */
  @media (width >= 1200px) {
    .page-header {margin: 30px 60px 0;}
  }
  @media (width >= 1600px) {
    .page-header {margin: 76px 60px 0;}
  }
  @media (width >= 1200px) {
    .page-header-wrapper {background-color: #ffffff; box-shadow: 0 4px 20px 0 rgba(73, 90, 182, 0.1); display: flex; justify-content: space-between; border-radius: 36px; gap: 20px; width: 667px; padding: 12.5px 30px}
  }
  @media (width >= 1600px) {
    .page-header-wrapper {width: 830px;}
  }
  @media (width >= 1200px) {
    .header-menu {align-items: center; justify-items: end;}
  }
  .logo {background-color: #ffffff; border-radius: 36px; box-shadow: 0 4px 20px 0 rgba(73, 90, 182, 0.1); padding: 6px 18px;}
  @media (width < 1200px) {
    .logo {margin: 20px 0 0 20px; width: 140px; display: flex; align-items: center; justify-content: space-around;}
  }

  /* Hero */
  .hero {text-align: left; padding: 0; background-image: url("../img/hero.svg"); background-repeat: no-repeat; position: relative;}
  .hero-main {padding: 40px 20px 30px; display: flex; justify-content: space-between; gap: 20px;}
  @media (width < 980px) {
    .hero-main {flex-direction: column;}
  }
  @media (width >= 1280px) {
    .hero-main {padding: 70px 60px; align-items: center; gap: 30px;}
  }
  @media (width >= 1600px) {
    .hero-main {padding: 70px 60px 60px; gap: 60px;}
  }
  .hero-all {padding: 40px 20px 0;}
  @media (width >= 1280px) {
    .hero-all {padding: 95px 60px 0;}
  }
  @media (width >= 1600px) {
    .hero-all {padding: 130px 60px 0;}
  }
  .hero-text {font-size: 18px; line-height: 24px; margin-top: 0;}
  @media (width >= 980px) {
    .hero-text {font-size: 26px; line-height: 34px;}
  }
  @media (width >= 1600px) {
    .hero-text {font-size: 40px; line-height: 52px;}
  }

  /* Slider */
  .slider {margin-bottom: 0;}
  .slider-card {border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #ffffff; box-shadow: 0 4px 20px 0 rgba(73, 90, 182, 0.1); padding: 60px 30px 30px; display: flex; flex-direction: column; justify-content: center;}
  @media (width >= 980px) {
    .slider-card {width: 320px; height: 322px; padding: 30px 50px 30px 30px;}
  }
  @media (width >= 1600px) {
    .slider-card {width: 383px; padding: 30px 60px 30px 30px;}
  }
  .slider-footer {background-color: #495AB6; color: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 18px 25px; text-align: center;}
  @media (width >= 980px) {
    .slider-footer {width: 350px;}
  }
  @media (width >= 1600px) {
    .slider-footer {width: 423px;}
  }
  .slider, .slider2 {position: relative;}
  .slider-container, .slider-container2 {overflow: hidden;}
  .slide, .slide2 {display: none; width: 100%; position: relative; z-index: 11;}
  .slider-dots {text-align: center; position: absolute; display: flex; flex-direction: row; gap: 6px; z-index: 11;}
  @media (width >= 980px) {
    .slider-dots {right: 15px; top: 32%; flex-direction:column;}
  }
  @media (width < 980px) {
    .slider-dots {left: 50%; top: 50px; transform: translate(-50%, -50%);}
  }

  .slider-dots2 {text-align: center; position: absolute; display: flex; right: 15px; top: -8%; right: 50%; flex-direction: column-reverse; rotate: 90deg; gap: 6px;}
  .dot, .dot2 {display: inline-block; width: 10px; height: 10px; background-color: rgba(73, 90, 182, 0.1); border-radius: 50%; margin: 0 8px; cursor: pointer;}
  .dot.active, .dot2.active  {background-color: #495AB6;}
  .slider-dots .dot, .slider-dots2 .dot2 {margin: 0;}

  /* Bubble */
  .bubble {position: relative; background-color: #495AB6; padding: 15px 30px; border-radius: 36px; color: #ffffff; display: flex; align-items: center;}
  .bubble-right, .bubble-left {background-color: #3AB969;}
  @media (width >= 1100px) {
    .bubble-right[class] {width: 500px;}
  }
  @media (width >= 1100px) {
    .bubble-right[class]::before {left: 20px}
  }
  @media (width >= 1600px) {
    .bubble-right[class] {width: 560px;}
  }
  @media (width >= 1100px) {
    .bubble-left[class] {width: 360px;}
  }
  .bubble::before {content: ''; position: absolute; clip-path: polygon(0 24%, 48% 100%, 100% 100%); background-color: #495AB6; height: 31px; width: 58px; bottom: 99%;}
  .bubble-left::before {background-color: #3AB969;}
  .bubble-right::before {top: 96%; rotate: 180deg; background-color: #3AB969;}
  @media (width < 980px) {
    .bubble-right[class]::before {right: 20px;}
  }
  .bubble p {font-weight: 400;}

  /* Бегущая строка/бегущая строка мобилка */
  .wrap {display: flex; gap: 18px; margin-top: -130px; height: 750px;}
  .items-wrap {position: relative; overflow: hidden; user-select: none;}
  .items {flex-shrink: 0; display: flex; gap: 20px; counter-reset: item; justify-content: space-around;}
  .item {flex: 0 0 auto; display: flex; color: #fff; margin: 10px 0; transition: all 0.1s ease-in-out;}
  .marquee {animation: marquee 70s linear infinite;}
  .reverce {animation-direction: reverse;}
  .items-wrap:hover .marquee {animation-play-state: paused;}

  @keyframes marquee {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(-50%); /* Перемещаем на половину ширины, чтобы "склеить" концы */
    }
  }

  .marquee-3 {animation: marquee-3 34s linear infinite;}

  @keyframes marquee-3 {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-50%); /* Перемещаем на половину ширины, чтобы "склеить" концы */
    }
  }

  /* Бегущая строка с иконками */
  .items-wrap-2 {position: relative; display: flex; overflow: hidden; user-select: none; gap: 20px;}
  .items-wrap-2:before,
  .items-wrap:after {content: ""; height: 100%; top: 0; width: 10%; position: absolute; z-index: 1; pointer-events: none; left: calc(100% + 10px); animation: marquee-2 20s linear infinite; transform: translateX(0); display: inline-block;}
  .items-2 {flex-shrink: 0; display: flex; gap: 20px; counter-reset: item; justify-content: space-around; min-width: 100%; margin: 0;}
  .item-2 {flex: 0 0 auto; border-radius: 6px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #222222; margin: 0; transition: all 0.1s ease-in-out; gap: 20px;}
  .item-2:hover {transform: scale(1.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
  .item-2:before {content: counter(item);}
  .marquee-2 {animation: marquee-2 20s linear infinite;}
  .items-wrap:hover .marquee-2 {animation-play-state: paused;}

  @keyframes marquee-2 {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  /* Вращение круга */
  @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }

  .circle-rotation {animation: spin 5s linear 0s infinite;}

  /* Popup */
  .modal-container {display: flex; position: fixed; align-items: center; z-index: 999999; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.50);}
  .modal-container-close {display: none;}
  .modal-container-appeal-close {display: none;}
  .modal-search {box-sizing: border-box; border-radius: 8px;}
  .modal {margin: auto; position: relative; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); padding: 20px; background-color: #ffffff; width: 100%;}
  @media (width >= 768px) {
    .modal {padding: 40px 64px; width: 830px; }
  }
  .btn-close {border: none; background-color: #ffffff;}

  /* .btn-close:hover {
    cursor: pointer;
    opacity: 0.8;
  } */
  .popup-title {margin: 0; margin-bottom: 20px; font-family: inherit; font-style: normal; font-weight: 700; font-size: 22px; line-height: 28px; text-align: center;}
  @media (width >= 980px) {
    .popup-title {font-size: 30px; line-height: 38px;}
  }
  .terms-of-use-popup {font-weight: 300; font-size: 12px; line-height: 18px; text-align: center; color: #AFAFAF; margin: 20px 0 0;}
  .input-popup {font-size: 14px; padding: 14px 18px;}
  .modal-close-button {display: flex; position: absolute; padding: 0; right: 20px; top: 20px; border-radius: 50%; border: none; background-image: url("../img/cross.svg"); background-repeat: no-repeat; background-position: center;}
  @media (width >= 768px) {
    .modal-close-button {right: 40px; top: 40px;}
  }
  .modal-close-button svg {margin: auto;}
  .icon-cross-path {fill: #000000;}
  .icon-cross-path:active {fill: #000000; opacity: 0.3;}
  .modal-close-button:hover {background-color: #E6E6E6; cursor: pointer;}
  .modal-close-button:focus-visible {background-color: #E6E6E6; border: 3px solid #83B3D3; outline: none;}
  .modal-close-button:active {background-color: #E6E6E6; border: none;}
  .modal-close-button:active path {fill: #000000; opacity: 0.3;}
  .modal-content {margin-top: 50px;}
  .modal-content-appeal {margin-top: 50px;}
  .text-field {display: flex; flex-direction: column; gap: 10px;}

  /* стили для input */
  .text-field-input {padding: 18px 12px; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 20px; color: #222222; background-color: rgba(73, 90, 182, 0.05); background-clip: padding-box; border-radius: 8px; border: none; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin: 0;}

  @media (width < 768px) {
    .text-field-input {font-size: 14px; line-height: 17px;}
  }

  .text-field-input::placeholder {color: #212529; opacity: 0.4;}

  .text-field-input:focus {color: #212529; border: none; outline: 1px solid #495AB6;}

  .text-field-input-green[class] {background-color: rgba(58,185,105,0.1);}

  /* input:valid {
    border-color: #c2c2c2;;
    color: #c2c2c2;
    box-shadow: none;
  }

  input:invalid {
    border-color:#ff0d0d;
    color: #ff0d0d;
    box-shadow: none;
  } */

  input::placeholder {
    color: transparent; /* Или opacity: 0; */
    -webkit-appearance: none; /* Сброс стилей браузера */
    border: none;
  }


<picture>
<source type="image/webp" media="(min-width: 1280px)" srcset="
img/three-circles-1-desktop.webp    1x,
img/three-circles-1-desktop@2x.webp 2x
" width="386" height="386" />
<source type="image/webp" media="(min-width: 768px)" srcset="
img/three-circles-1-tablet.webp    1x,
img/three-circles-1-tablet@2x.webp 2x
" width="222" height="222" />
<source type="image/webp" srcset="
img/three-circles-1-mobile.webp    1x,
img/three-circles-1-mobile@2x.webp 2x
" width="160" height="160" />
<source media="(min-width: 1280px)" srcset="
img/three-circles-1-desktop.png     1x,
img/three-circles-1-desktop@2x.png 2x
" width="386" height="386" />
<source media="(min-width: 768px)" srcset="
img/three-circles-1-tablet.jpg     1x,
img/hthree-circles-1-tablet@2x.jpg 2x
" width="222" height="222" />
<img class="main-circles-image" src="img/three-circles-1-mobile.png"
srcset="img/three-circles-1-mobile@2x.png 2x" width="160" height="160" alt="Каркасный дом."
loading="lazy" />
</picture>
  .client-img-30 {background-size: 166px 83px;}
}
.client-img-31 {background-image: url("../img/clients/cittel.png"); background-size: 94px 32px;}
@media (width >= 980px) {
  .client-img-31 {background-size: 128px 44px;}
}
@media (width >= 1600px) {
  .client-img-31 {background-size: 166px 56px;}
}
.client-img-32 {background-image: url("../img/clients/intinform.png"); background-size: 94px 70px;}
@media (width >= 980px) {
  .client-img-32 {background-size: 129px 96px;}
}
@media (width >= 1600px) {
  .client-img-32 {background-size: 166px 124px;}
}
.client-img-33 {background-image: url("../img/clients/obitelecom.png"); background-size: 94px 28px;}
@media (width >= 980px) {
  .client-img-33 {background-size: 129px 39px;}
}
@media (width >= 1600px) {
  .client-img-33 {background-size: 166px 50px;}
}
.client-img-34 {background-image: url("../img/clients/alfaschool.png"); background-size: 58px 46px;}
@media (width >= 980px) {
  .client-img-34 {background-size: 80px 63px;}
}
@media (width >= 1600px) {
  .client-img-34 {background-size: 103px 82px;}
}
.client-img-35 {background-image: url("../img/clients/svyazservis.png"); background-size: 94px 23px;}
@media (width >= 980px) {
  .client-img-35 {background-size: 128px 31px;}
}
@media (width >= 1600px) {
  .client-img-35 {background-size: 166px 40px;}
}
.client-img-36 {background-image: url("../img/clients/auchan.png"); background-size: 94px 22px;}
@media (width >= 980px) {
  .client-img-36 {background-size: 130px 30px;}
}
@media (width >= 1600px) {
  .client-img-36 {background-size: 166px 40px;}
}
.client-img-37 {background-image: url("../img/clients/fryazino.png"); background-size: 79px 63px;}
@media (width >= 980px) {
  .client-img-37 {background-size: 108px 86px;}
}
@media (width >= 1600px) {
  .client-img-37 {background-size: 140px 111px;}
}
.client-img-38 {background-image: url("../img/clients/odk.png"); background-size: 94px 28px;}
@media (width >= 980px) {
  .client-img-38 {background-size: 128px 38px;}
}
@media (width >= 1600px) {
  .client-img-38 {background-size: 166px 49px;}
}
.client-img-39 {background-image: url("../img/clients/2day.png"); background-size: 94px 44px;}
@media (width >= 980px) {
  .client-img-39 {background-size: 128px 60px;}
}
@media (width >= 1600px) {
  .client-img-39 {background-size: 166px 77px;}
}
.client-img-40 {background-image: url("../img/clients/innopolis.png"); background-size: 108px 29px;}
@media (width >= 980px) {
  .client-img-40 {background-size: 149px 39px;}
}
@media (width >= 1600px) {
  .client-img-40 {background-size: 166px 44px;}
}
.client-img-41 {background-image: url("../img/clients/roilcom.png"); background-size: 94px 24px;}
@media (width >= 980px) {
  .client-img-41 {background-size: 129px 32px;}
}
@media (width >= 1600px) {
  .client-img-41 {background-size: 166px 42px;}
}
.client-img-42 {background-image: url("../img/clients/cubio.png"); background-size: 53px 53px;}
@media (width >= 980px) {
  .client-img-42 {background-size: 72px 72px;}
}
@media (width >= 1600px) {
  .client-img-42 {background-size: 93px 93px;}
}
.client-img-43 {background-image: url("../img/clients/mrsk.png"); background-size: 94px 40px;}
@media (width >= 980px) {
  .client-img-43 {background-size: 129px 55px;}
}
@media (width >= 1600px) {
  .client-img-43 {background-size: 166px 71px;}
}
.client-img-44 {background-image: url("../img/clients/seversvyaz.png"); background-size: 94px 20px;}
@media (width >= 980px) {
  .client-img-44 {background-size: 129px 27px;}
}
@media (width >= 1600px) {
  .client-img-44 {background-size: 166px 35px;}
}
.client-img-45 {background-image: url("../img/clients/rostelecom.png"); background-size: 94px 35px;}
@media (width >= 980px) {
  .client-img-45 {background-size: 129px 47px;}
}
@media (width >= 1600px) {
  .client-img-45 {background-size: 166px 61px;}
}
.client-img-46 {background-image: url("../img/clients/onet.png"); background-size: 69px 49px;}
@media (width >= 980px) {
  .client-img-46 {background-size: 95px 67px;}
}
@media (width >= 1600px) {
  .client-img-46 {background-size: 122px 86px;}
}
.client-img-47 {background-image: url("../img/clients/satelcom.png"); background-size: 94px 26px;}
@media (width >= 980px) {
  .client-img-47 {background-size: 129px 35px;}
}
@media (width >= 1600px) {
  .client-img-47 {background-size: 166px 46px;}
}
.client-img-48 {background-image: url("../img/clients/dalsatcom.png"); background-size: 72px 55px;}
@media (width >= 980px) {
  .client-img-48 {background-size: 98px 76px;}
}
@media (width >= 1600px) {
  .client-img-48 {background-size: 126px 98px;}
}
.client-img-49 {background-image: url("../img/clients/rokotel.png"); background-size: 94px 24px;}
@media (width >= 980px) {
  .client-img-49 {background-size: 129px 32px;}
}
@media (width >= 1600px) {
  .client-img-49 {background-size: 166px 41px;}
}
.client-img-50 {background-image: url("../img/clients/tst.png"); background-size: 94px 30px;}
@media (width >= 980px) {
  .client-img-50 {background-size: 129px 41px;}
}
@media (width >= 1600px) {
  .client-img-50 {background-size: 166px 53px;}
}
.client-img-51 {background-image: url("../img/clients/tsdk.png"); background-size: 94px 26px;}
@media (width >= 980px) {
  .client-img-51 {background-size: 129px 36px;}
}
@media (width >= 1600px) {
  .client-img-51 {background-size: 166px 46px;}
}
.client-img-52 {background-image: url("../img/clients/dataru.png"); background-size: 91px 43px;}
@media (width >= 980px) {
  .client-img-52 {background-size: 117px 55px;}
}
@media (width >= 1600px) {
  .client-img-52 {background-size: 152px 72px;}
}

/* Width/Height */
.wide {width: 100%;}
@media (width < 980px) {
  .wide2 {width: 100%;}
}
.w-298[class] {width: 298px;}
.w-424[class] {width: 424px;}
.mw-415[class] {max-width: 415px;}

/* Input */
.input {background-color: rgba(73,90,182,0.05); border-radius: 8px;}

/* Border */
.stroke {border-top: 2px solid rgba(73,90,182,0.3); border-bottom: 2px solid rgba(73,90,182,0.3); padding: 30px 20px; margin-top: 30px; overflow: hidden; white-space: nowrap;}
@media (width >= 1600px) {
  .stroke {margin-top: 40px; padding: 35px 60px;}
}
.stroke li::before {content: ''; position: relative; display: inline-block; width: 8px; height: 8px; background-color: #495AB6; list-style: circle; border-radius: 50%;}
.border li {border: 2px solid rgba(73,90,182,0.3); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 16px; justify-content: flex-start;}
.border-20 {border-radius: 20px;}
.border-36 {border-radius: 36px;}

/* Toggle */
.view-tab {margin: 60px 0 36px; }
.view-tab button {padding: 20px; border: none; background-color:#ffffff; color: #3AB969; font-size: 14px; line-height: 18px; min-width: 150px; border-radius: 36px;}
@media (width >= 980px) {
  .view-tab button {width: 228px;}
}
.view-tab button.active {background-color: #3AB969; color:#ffffff; border: thin transparent; border-radius: 36px;}
.view-tab button:hover:not(button.active) {background-color:#3AB969; border: thin solid #3AB969; color:#ffffff; border-radius: 36px;}
.toggle {display: flex; flex-direction: row; align-items: center; gap: 16px;}
.tab-links {border: thin solid #3AB969; display: flex; border-radius: 36px; padding: 5px; justify-content: space-between; overflow: scroll; white-space: nowrap;}
.tab-links li {padding: 10px 15px; cursor: pointer; background-color: #f2f2f2;}
.tab-links li.active {background-color: #eee; border: 1px solid #ddd; border-bottom: none;}
.tab-links button {cursor: pointer;}
.tab-content {padding: 40px 0 0;}
.tab-pane {display: none;}
.tab-pane.active {display: block;}

/* Shadow */
.shadow {box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);}
.ellipse {background-image: url("../img/ellipce-blur.svg");} 
.ellipse-2 {background-image: url("../img/ellipce-blur2.svg");} 
.shadow-card {box-shadow: 0 4px 20px rgba(73, 90, 182, 0.12);}

/* Background */
@media (width < 600px) {
  .circles {display: none;}
}
.circles li{position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(73, 90, 182, 0.2); animation: animate 25s linear infinite; bottom: -150px;}
.circles li:nth-child(1){left: 25%; width: 80px; height: 80px; animation-delay: 0s;}
.circles li:nth-child(2){left: 10%; width: 20px; height: 20px; animation-delay: 0s; animation-duration: 12s;}
.circles li:nth-child(3){left: 40%; width: 20px; height: 20px; animation-delay: 0s;}
.circles li:nth-child(4){left: 60%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s;}
.circles li:nth-child(5){left: 65%; width: 20px; height: 20px; animation-delay: 0s;}
.circles li:nth-child(6){left: 75%; width: 110px; height: 110px; animation-delay: 0s;}
.circles li:nth-child(7){left: 35%; width: 150px; height: 150px; animation-delay: 0s;}
.circles li:nth-child(8){left: 50%; width: 25px; height: 25px; animation-delay: 0s; animation-duration: 45s;}
.circles li:nth-child(9){left: 20%; width: 15px; height: 15px; animation-delay: 0s; animation-duration: 35s;}
.circles li:nth-child(10){left: 70%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s;}
@keyframes animate {
  0%{transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0;}
  100%{transform: translateY(-1000px) rotate(720deg);opacity: 0; border-radius: 50%;}
}

/* Number */
.number {width: 50px; height: 50px; background-color: #E8EAF5; border-radius: 50%; color: #495AB6; font-size: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.line {position: relative;}
.line li {z-index: 10;}
@media (width >= 980px) {
  .line li:not(:last-child)::after {content: ""; display: block; width: 2px; height: 25%; position: absolute; left: 50%; background-color: #C2C8E6;}
}

/* Radio, Checkbox, Switch */
:is([type="checkbox"], [type="radio"]) {appearance:none; display:inline-block; height: 20px; width:20px; border-radius:50%; vertical-align:-15%; position:relative; transition:background-color .2s ;line-height:1.2; margin:0; border:thin solid transparent;}
.radio-w[class] {width: 22px;}
:is([type="checkbox"], [type="radio"]):not(:checked) {border: 1px solid rgba(73,90,182,0.3);}
:is([type="checkbox"], [type="radio"]):checked {border: 1px solid #495AB6;}
:is([type="checkbox"], [type="radio"]):before {position:absolute;inset:0;content:"";clip-path:circle(23%);}
[type="radio"]:checked:before {background-color:#495AB6}
/* box */
[type="checkbox"]:not(.switch) {border-radius:.25em;}
[type="checkbox"]:not(.switch):checked:before {clip-path:polygon(10% 50%,40% 80%,90% 30%,80% 20%,40% 60%,20% 40%); width: 100%; height: 100%; background-color: #ffffff;}
/* switch */
[type="checkbox"].switch {width:2.2em;}
[type="checkbox"].switch:not(:checked) {border: 1px solid #495AB6;}
[type="checkbox"].switch:before {--pos:27%;clip-path:circle(28% at var(--pos) 50%);transition:clip-path .2s;}
[type="checkbox"].switch:checked:before {--pos:73%;}

/* checkbox */
[type="checkbox"]:checked[class] {border: 1px solid #495AB6; background-color: #495AB6;}
/* [type="checkbox"]:checked:before[class] {clip-path:polygon(10% 50%,40% 80%,90% 30%,80% 20%,40% 60%,20% 40%); width: 100%; height: 100%; background-color: green;} */


/* :is([type="checkbox"], [type="radio"]) {--input-color:var(--bg);appearance:none;display:inline-block;height:1.2em;width:1.2em;background-color:var(--input-color);border-radius:1em;vertical-align:-15%;position:relative;transition:background-color .2s;line-height:1.2;margin:0 .2em;border:5px solid transparent; margin: 0;}
:is([type="checkbox"], [type="radio"]):not(:checked) {border-color:var(--input-frame);}
:is([type="checkbox"], [type="radio"]):before {position:absolute;inset:0;content:"";background-color:var(--bg);clip-path:circle(32%);}

[type="checkbox"]:checked {--input-color:var(--input-green);}

[type="radio"] {border-radius:50%; background-color: var(--bg); border:thin solid var(--input-frame); padding: .563em; margin: 0;}
[type="radio"]:hover {border-color: var(--bg-light-light-blue);}

[type="radio"]:checked {border-color: var(--bg-blue);}
[type="radio"]:checked:disabled {border-color: var(--bg-lines-grey);}

[type="radio"]:before {border-color: var(--bg-blue) ;}
[type="radio"]:disabled::before {border-color: var(--bg-lines-grey);}

[type="radio"]:checked:before {background-color: var(--bg-blue);}
[type="radio"]:checked:disabled::before {background-color: var(--bg-lines-grey);}
 */{background-image: url("../img/ellipce-blur.svg");} 

 .checkbox-input::after,
 .radio-input::after {
   content: "";
   position: absolute;
   width: 0px;
   height: 0px;
   font-size: 30px;
   background-image: url("images/check.svg");
   background-repeat: no-repeat;
   transition: 500ms;
 }
 
 .radio-input::after {
   background-image: url("images/radio.svg");
 }





/* :root {
  scroll-behavior: smooth;
}

/* Burger-menu */
@media (width < 1200px) {
.burger-toggle {display: block; width: 50px; height: 50px; background-image: url("../img/burger.svg"); background-repeat: no-repeat; background-color: #394588; background-size: 22px 12px; border-radius: 50%; background-position: center; position: absolute; z-index: 99999; right: 20px; top: -50px;}
}
.main-nav {z-index: 99999;}
@media (width >= 1200px) {
  .main-nav {display: flex;}
}
@media (width < 1200px) {
  .main-nav-toggle[aria-expanded="true"] + .main-nav-list {translate: 0% 100%}
  .main-nav-toggle[aria-expanded="true"] .burger-toggle {background-image: url("../img/icon-cross.svg"); background-color: transparent; background-size: 16px 16px;}
  .main-nav-enabled {position: relative; display: grid;}
  .main-nav-enabled .main-nav-list {position: absolute; display: flex; flex-direction: column; z-index: 10; padding: 50px 20px; margin: 0; width: calc(100% - 40px); top: -624px; gap: 100px;}
}
.main-nav-list {display: flex; flex-direction: column; padding: 0; margin: 0; background-color: #EDEEF8;; list-style: none; width: 100%; text-align: left;}
@media (width >= 1200px) {
  .main-nav-list {flex-direction: row; background-color: #ffffff; text-transform: none; align-items: center; font-size: 16px; line-height: 28px; gap: 30px;}
}
@media (width >= 1600px) {
  .main-nav-list {gap: 53px;}
}
.main-nav-toggle {position: absolute; border: none; justify-self: end; cursor: pointer; z-index: 999999; padding: 6px 20px; background-color: transparent;}
.main-nav-link {display: flex; color: #222222;; text-decoration: none; font-size: 14px; line-height: 18px; font-family: inherit; font-weight: 400;}
@media (width >= 1200px) {
  .main-nav-link {color: #003865;}
}
@media (width >= 1600px) {
  .main-nav-link {font-size: 16px;}
}
.main-nav-link-cur[class] {color: #495AB6; font-weight: 700;}
@media (width >= 1200px) {
  .main-nav-item {box-shadow: none;}
}
.main-nav-item::before {content: none;}

/* Header */
@media (width >= 1200px) {
  .page-header {margin: 30px 60px 0;}
}
@media (width >= 1600px) {
  .page-header {margin: 76px 60px 0;}
}
@media (width >= 1200px) {
  .page-header-wrapper {background-color: #ffffff; box-shadow: 0 4px 20px 0 rgba(73, 90, 182, 0.1); display: flex; justify-content: space-between; border-radius: 36px; gap: 20px; width: 667px; padding: 12.5px 30px}
}
@media (width >= 1600px) {
  .page-header-wrapper {width: 830px;}
}
@media (width >= 1200px) {
  .header-menu {align-items: center; justify-items: end;}
}
.logo {background-color: #ffffff; border-radius: 36px; box-shadow: 0 4px 20px 0 rgba(73, 90, 182, 0.1); padding: 6px 18px;}
@media (width < 1200px) {
  .logo {margin: 20px 0 0 20px; width: 140px; display: flex; align-items: center; justify-content: space-around;}
}

/* Hero */
.hero {text-align: left; padding: 0; background-image: url("../img/hero.svg"); background-repeat: no-repeat; position: relative;}
.hero-main {padding: 40px 20px 30px; display: flex; justify-content: space-between; gap: 20px;}
@media (width < 980px) {
  .hero-main {flex-direction: column;}
}
@media (width >= 1280px) {
  .hero-main {padding: 70px 60px; align-items: center; gap: 30px;}
}
@media (width >= 1600px) {
  .hero-main {padding: 70px 60px 60px; gap: 60px;}
}
.hero-all {padding: 40px 20px 0;}
@media (width >= 1280px) {
  .hero-all {padding: 95px 60px 0;}
}
@media (width >= 1600px) {
  .hero-all {padding: 130px 60px 0;}
}
.hero-text {font-size: 18px; line-height: 24px; margin-top: 0;}
@media (width >= 980px) {
  .hero-text {font-size: 26px; line-height: 34px;}
}
@media (width >= 1600px) {
  .hero-text {font-size: 40px; line-height: 52px;}
}

/* Slider */
.slider {margin-bottom: 0;}
.slider-card {border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #ffffff; box-shadow: 0 4px 20px 0 rgba(73, 90, 182, 0.1); padding: 60px 30px 30px; display: flex; flex-direction: column; justify-content: center;}
@media (width >= 980px) {
  .slider-card {width: 320px; height: 322px; padding: 30px 50px 30px 30px;}
}
@media (width >= 1600px) {
  .slider-card {width: 383px; padding: 30px 60px 30px 30px;}
}
.slider-footer {background-color: #495AB6; color: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 18px 25px; text-align: center;}
@media (width >= 980px) {
  .slider-footer {width: 350px;}
}
@media (width >= 1600px) {
  .slider-footer {width: 423px;}
}
.slider, .slider2 {position: relative;}
.slider-container, .slider-container2 {overflow: hidden;}
.slide, .slide2 {display: none; width: 100%; position: relative; z-index: 11;}
.slider-dots {text-align: center; position: absolute; display: flex; flex-direction: row; gap: 6px; z-index: 11;}
@media (width >= 980px) {
  .slider-dots {right: 15px; top: 32%; flex-direction:column;}
}
@media (width < 980px) {
  .slider-dots {left: 50%; top: 50px; transform: translate(-50%, -50%);}
}

.slider-dots2 {text-align: center; position: absolute; display: flex; right: 15px; top: -8%; right: 50%; flex-direction: column-reverse; rotate: 90deg; gap: 6px;}
.dot, .dot2 {display: inline-block; width: 10px; height: 10px; background-color: rgba(73, 90, 182, 0.1); border-radius: 50%; margin: 0 8px; cursor: pointer;}
.dot.active, .dot2.active  {background-color: #495AB6;}
.slider-dots .dot, .slider-dots2 .dot2 {margin: 0;}

/* Bubble */
.bubble {position: relative; background-color: #495AB6; padding: 15px 30px; border-radius: 36px; color: #ffffff; display: flex; align-items: center;}
.bubble-right, .bubble-left {background-color: #3AB969;}
@media (width >= 1100px) {
  .bubble-right[class] {width: 500px;}
}
@media (width >= 1100px) {
  .bubble-right[class]::before {left: 20px}
}
@media (width >= 1600px) {
  .bubble-right[class] {width: 560px;}
}
@media (width >= 1100px) {
  .bubble-left[class] {width: 360px;}
}
.bubble::before {content: ''; position: absolute; clip-path: polygon(0 24%, 48% 100%, 100% 100%); background-color: #495AB6; height: 31px; width: 58px; bottom: 99%;}
.bubble-left::before {background-color: #3AB969;}
.bubble-right::before {top: 96%; rotate: 180deg; background-color: #3AB969;}
@media (width < 980px) {
  .bubble-right[class]::before {right: 20px;}
}
.bubble p {font-weight: 400;}

/* Бегущая строка/бегущая строка мобилка */
.wrap {display: flex; gap: 18px; margin-top: -130px; height: 750px;}
.items-wrap {position: relative; overflow: hidden; user-select: none;}
.items {flex-shrink: 0; display: flex; gap: 20px; counter-reset: item; justify-content: space-around;}
.item {flex: 0 0 auto; display: flex; color: #fff; margin: 10px 0; transition: all 0.1s ease-in-out;}
.marquee {animation: marquee 70s linear infinite;}
.reverce {animation-direction: reverse;}
.items-wrap:hover .marquee {animation-play-state: paused;}

@keyframes marquee {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-50%); /* Перемещаем на половину ширины, чтобы "склеить" концы */
  }
}

.marquee-3 {animation: marquee-3 34s linear infinite;}

@keyframes marquee-3 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%); /* Перемещаем на половину ширины, чтобы "склеить" концы */
  }
}

/* Бегущая строка с иконками */
.items-wrap-2 {position: relative; display: flex; overflow: hidden; user-select: none; gap: 20px;}
.items-wrap-2:before,
.items-wrap:after {content: ""; height: 100%; top: 0; width: 10%; position: absolute; z-index: 1; pointer-events: none; left: calc(100% + 10px); animation: marquee-2 20s linear infinite; transform: translateX(0); display: inline-block;}
.items-2 {flex-shrink: 0; display: flex; gap: 20px; counter-reset: item; justify-content: space-around; min-width: 100%; margin: 0;}
.item-2 {flex: 0 0 auto; border-radius: 6px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #222222; margin: 0; transition: all 0.1s ease-in-out; gap: 20px;}
.item-2:hover {transform: scale(1.00); box-shadow: 0 0 0px rgba(0, 0, 0, 0);}
.item-2:before {content: counter(item);}
.marquee-2 {animation: marquee-2 20s linear infinite;}
.items-wrap:hover .marquee-2 {animation-play-state: paused;}

@keyframes marquee-2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Вращение круга */
@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

.circle-rotation {animation: spin 5s linear 0s infinite;}

/* Popup */
.modal-container {display: flex; position: fixed; align-items: center; z-index: 999999; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.50);}
.modal-container-close {display: none;} 
.modal-container-appeal-close {display: none;} 
.modal-search {box-sizing: border-box; border-radius: 8px;}
.modal {margin: auto; position: relative; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); padding: 20px; background-color: #ffffff; width: 100%;}
@media (width >= 768px) {
  .modal {padding: 40px 64px; width: 830px; }
}
.btn-close {border: none; background-color: #ffffff;}

/* .btn-close:hover {
  cursor: pointer;
  opacity: 0.8;
} */
.popup-title {margin: 0; margin-bottom: 20px; font-family: inherit; font-style: normal; font-weight: 700; font-size: 22px; line-height: 28px; text-align: center;}
@media (width >= 980px) {
  .popup-title {font-size: 30px; line-height: 38px;}
}
.terms-of-use-popup {font-weight: 300; font-size: 12px; line-height: 18px; text-align: center; color: #AFAFAF; margin: 20px 0 0;}
.input-popup {font-size: 14px; padding: 14px 18px;}
.modal-close-button {display: flex; position: absolute; padding: 0; right: 20px; top: 20px; border-radius: 50%; border: none; background-image: url("../img/cross.svg"); background-repeat: no-repeat; background-position: center;}
@media (width >= 768px) {
  .modal-close-button {right: 40px; top: 40px;}
}
.modal-close-button svg {margin: auto;}
.icon-cross-path {fill: #000000;}
.icon-cross-path:active {fill: #000000; opacity: 0.3;}
.modal-close-button:hover {background-color: #E6E6E6; cursor: pointer;}
.modal-close-button:focus-visible {background-color: #E6E6E6; border: 3px solid #83B3D3; outline: none;}
.modal-close-button:active {background-color: #E6E6E6; border: none;}
.modal-close-button:active path {fill: #000000; opacity: 0.3;}
.modal-content {margin-top: 50px;}
.modal-content-appeal {margin-top: 50px;}
.text-field {display: flex; flex-direction: column; gap: 10px;}

/* стили для input */
.text-field-input {padding: 18px 12px; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 20px; color: #222222; background-color: rgba(73, 90, 182, 0.05); background-clip: padding-box; border-radius: 8px; border: none; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin: 0;}

@media (width < 768px) {
  .text-field-input {font-size: 14px; line-height: 17px;}
}

.text-field-input::placeholder {color: #212529; opacity: 0.4;}

.text-field-input:focus {color: #212529; border: none; outline: 1px solid #495AB6;}

.text-field-input-green[class] {background-color: rgba(58,185,105,0.1);}

/* input:valid {
  border-color: #c2c2c2;;
  color: #c2c2c2;
  box-shadow: none;
}

input:invalid {
  border-color:#ff0d0d;
  color: #ff0d0d;
  box-shadow: none;
} */

input::placeholder {
  color: transparent; /* Или opacity: 0; */
  -webkit-appearance: none; /* Сброс стилей браузера */
  border: none;
}

.select details::after {
  pointer-events: none;
}
/*
<picture>
  <source type="image/webp" media="(min-width: 1280px)" srcset="
        img/three-circles-1-desktop.webp    1x,
        img/three-circles-1-desktop@2x.webp 2x
      " width="386" height="386" />
  <source type="image/webp" media="(min-width: 768px)" srcset="
        img/three-circles-1-tablet.webp    1x,
        img/three-circles-1-tablet@2x.webp 2x
      " width="222" height="222" />
  <source type="image/webp" srcset="
        img/three-circles-1-mobile.webp    1x,
        img/three-circles-1-mobile@2x.webp 2x
      " width="160" height="160" />
  <source media="(min-width: 1280px)" srcset="
        img/three-circles-1-desktop.png     1x,
        img/three-circles-1-desktop@2x.png 2x
      " width="386" height="386" />
  <source media="(min-width: 768px)" srcset="
        img/three-circles-1-tablet.jpg     1x,
        img/hthree-circles-1-tablet@2x.jpg 2x
      " width="222" height="222" />
  <img class="main-circles-image" src="img/three-circles-1-mobile.png"
    srcset="img/three-circles-1-mobile@2x.png 2x" width="160" height="160" alt="Каркасный дом."
    loading="lazy" />
</picture>

 */