CSS File

1@font-face {

2 font-family: Onest;

3 src: url(../fonts/Onest-Bold.woff2) format("woff2");

4 font-weight: 700;

5 font-style: normal;

6 font-display: swap;

7}

8@font-face {

9 font-family: Onest;

10 src: url(../fonts/Onest-Medium.woff2) format("woff2");

11 font-weight: 500;

12 font-style: normal;

13 font-display: swap;

14}

15@font-face {

16 font-family: Onest;

17 src: url(../fonts/Onest-Light.woff2) format("woff2");

18 font-weight: 300;

19 font-style: normal;

20 font-display: swap;

21}

22@font-face {

23 font-family: Onest;

24 src: url(../fonts/Onest-Regular.woff2) format("woff2");

25 font-weight: 400;

26 font-style: normal;

27 font-display: swap;

28}

29@font-face {

30 font-family: Inter;

31 src: url(../fonts/Inter-Regular.woff2) format("woff2");

32 font-weight: 400;

33 font-style: normal;

34 font-display: swap;

35}

36@font-face {

37 font-family: Onest;

38 src: url(../fonts/Onest-SemiBold.woff2) format("woff2");

39 font-weight: 600;

40 font-style: normal;

41 font-display: swap;

42}

43*,

44*:before,

45*:after {

46 margin: 0;

47 padding: 0;

48 box-sizing: border-box;

49}

50.wrapper {

51 width: 100%;

52 height: 100%;

53 overflow: hidden;

54 min-width: 320px;

55}

56.container {

57 width: 100%;

58 max-width: 1452px;

59 padding: 0 26px;

60 margin: 0 auto;

61}

62.list-reset {

63 list-style: none;

64}

65a {

66 text-decoration: none;

67 cursor: pointer;

68}

69button{

70 cursor: pointer;

71}

72body {

73 background-color: var(--page-bg);

74}

75.extra-page .big-lines {

76 opacity: 0.2;

77}

78body.stop-scroll {

79 overflow: hidden;

80}

81input {

82 outline: none;

83 color: var(--text-color) !important;

84}

85html {

86 font-family: Onest;

87 font-size: 18px;

88 line-height: 120%;

89

-webkit-tap-highlight-color: transparent;

90}

91html.lenis {

92 height: auto;

93}

94.lenis.lenis-smooth {

95 scroll-behavior: auto;

96}

97.lenis.lenis-smooth [data-lenis-prevent] {

98 overscroll-behavior: contain;

99}

100.lenis.lenis-stopped {

101 overflow: hidden;

102}

103.lenis.lenis-scrolling iframe {

104 pointer-events: none;

105}

106.cities {

107 position: fixed;

108 left: 0;

109 top: 0;

110 width: 100%;

111 height: 100vh;

112 display: grid;

113 place-items: center;

114 background: #00000080;

115 z-index: 200;

116 padding: 20px;

117 overflow-y: auto;

118 opacity: 0;

119 visibility: hidden;

120 pointer-events: none;

121}

122.cities.active {

123 opacity: 1;

124 visibility: visible;

125 pointer-events: all;

126 transition: all 0.3s;

127}

128.cities__modal {

129 width: 100%;

130 max-width: 1000px;

131 background: var(--page-bg);

132 border-radius: 20px;

133 padding: 27px 30px 40px;

134 position: relative;

135}

136.cities__close {

137 position: absolute;

138 right: 25px;

139 top: 25px;

140 width: 25px;

141 height: 25px;

142 border: none;

143 background: transparent;

144 cursor: pointer;

145}

146.cities__close svg {

147 width: 100%;

148 height: 100%;

149}

150.cities__head h3 {

151 font-size: 28px;

152 font-style: normal;

153 font-weight: 600;

154 line-height: 95%;

155 letter-spacing: -1.35px;

156 color: var(--primary-color);

157}

158.cities__inner {

159 margin-top: 20px;

160}

161.cities__list {

162 display: grid;

163 grid-template-columns: repeat(4, 1fr);

164 gap: 20px;

165 row-gap: 5px;

166}

167.cities__list li a {

168

font-size: 14px;

169 font-style: normal;

170 font-weight: 400;

171 line-height: 150%;

172 letter-spacing: -0.28px;

173 color: var(--text-color2);

174 transition: 0.2s;

175}

176.cities__list li a:hover {

177 color: var(--accent-color);

178}

179@media (max-width: 650px) {

180 .cities__head h3 {

181 font-size: 24px;

182 }

183 .cities__list {

184 grid-template-columns: repeat(3, 1fr);

185 }

186}

187@media (max-width: 400px) {

188 .cities__head h3 {

189 font-size: 20px;

190 }

191}

192@media (max-width: 500px) {

193 .cities__list {

194 grid-template-columns: repeat(2, 1fr);

195 }

196}

197.form {

198 position: fixed;

199 left: 0;

200 top: 0;

201 width: 100%;

202 height: 100vh;

203 background: #080a1d40;

204 z-index: 200;

205 display: grid;

206 place-items: center;

207 opacity: 0;

208 visibility: hidden;

209 padding: 20px;

210}

211.form.is-open {

212 opacity: 1;

213 visibility: visible;

214 transition: all 0.4s;

215}

216.form__modal {

217 width: 100%;

218 max-width: 500px;

219 background-color: var(--page-bg);

220 padding: 40px 60px 40px;

221 border-radius: 20px;

222 position: relative;

223 overflow-y: auto;

224}

225.form__modal-close {

226 position: absolute;

227 right: 53px;

228 top: 39px;

229 background: none;

230 border: none;

231 cursor: pointer;

232}

233.form__modal.hidden {

234 display: none;

235}

236.form__modal-head-title {

237 font-size: 35px;

238 font-style: normal;

239 font-weight: 600;

240 line-height: 95%;

241 letter-spacing: -1.35px;

242 color: var(--primary-color);

243 max-width: 331px;

244}

245.form__modal-head p {

246 font-size: 20px;

247 font-style: normal;

248 font-weight: 500;

249 line-height: 110%;

250 letter-spacing: -0.4px;

251 color: var(--text-color2);

252 margin-top: 28px;

253}

254.form__modal-inner {

255 margin-top: 30px;

256 display: flex;

257 flex-direction: column;

258}

259.form__group {

260 display: flex;

261 flex-direction: column;

262}

263.form__group input {

264 width: 100%;

265 display: block;

266 font-size: 20px;

267 font-style: normal;

268 font-weight: 600;

269 line-height: 120%;

270 letter-spacing: -0.4px;

271 color: var(--primary-color);

272 padding: 23px 33px;

273 background-color: var(--input-bg);

274 border: 1px solid var(--secondary2);

275}

276.form__group-note {

277

font-size: 12px;

278 font-style: normal;

279 font-weight: 500;

280 line-height: 110%;

281 letter-spacing: -0.24px;

282 color: var(--secondary1);

283 margin-top: 7px;

284}

285.form__modal-btn {

286 font-size: 20px;

287 font-style: normal;

288 font-weight: 700;

289 line-height: 120%;

290 letter-spacing: -0.4px;

291 padding: 20px;

292 width: 100%;

293 border: none;

294 border-radius: 4px;

295 background-color: var(--accent-color);

296 margin-top: 28px;

297 color: var(--secondary-color);

298 transition: all 0.2s;

299 cursor: pointer;

300}

301.form__modal-btn:hover {

302 box-shadow: 0 0 10px var(--accent-color);

303}

304.form__agreement {

305

font-size: 14px;

306 font-style: normal;

307 font-weight: 500;

308 line-height: 110%;

309 letter-spacing: -0.28px;

310 color: var(--secondary1);

311 text-align: center;

312 max-width: 333px;

313 margin: 11px auto 0;

314}

315.form__thank {

316 width: 100%;

317 max-width: 681px;

318 background-color: var(--page-bg);

319 border-radius: 20px;

320 min-height: 390px;

321 padding-left: 118px;

322 display: flex;

323 align-items: flex-end;

324 padding-bottom: 108px;

325 position: relative;

326}

327.form__thank.hidden {

328 display: none;

329}

330.form__thank .blue__img {

331 top: 33px;

332 left: 400px;

333}

334.form__thank-plane--1 {

335 position: absolute;

336 left: 150px;

337 top: 122px;

338 fill: var(--accent-color);

339}

340.form__thank-plane--2 {

341 position: absolute;

342 left: 210px;

343 top: 55px;

344 fill: var(--accent-color);

345}

346.form__thank-plane--3 {

347 position: absolute;

348 left: 320px;

349 top: 10px;

350 fill: var(--accent-color);

351}

352.form__thank-head {

353 max-width: 260px;

354}

355.form__thank-head-title {

356 font-size: 45px;

357 font-style: normal;

358 font-weight: 600;

359 line-height: 95%;

360 letter-spacing: -1.35px;

361 color: var(--primary-color);

362}

363.form__thank-head p {

364 font-size: 20px;

365 font-style: normal;

366 font-weight: 500;

367 line-height: 110%;

368 letter-spacing: -0.4px;

369 color: var(--text-color2);

370 margin-top: 21px;

371}

372@media (max-width: 992px) {

373 .form__thank .blue__img {

374 display: block;

375 }

376}

377@media (max-width: 767.98px) {

378 .form__thank {

379 padding-left: 50px;

380 }

381 .form__thank .blue__img {

382 left: 320px;

383 }

384 .form__thank-plane--1 {

385 left: 80px;

386 }

387 .form__thank-plane--2 {

388 left: 134px;

389 }

390 .form__thank-plane--3 {

391 left: 240px;

392 }

393}

394@media (max-width: 650px) {

395 .form__modal {

396 padding-left: 40px;

397 padding-right: 40px;

398 }

399 .form__thank {

400 text-align: center;

401 min-height: auto;

402 padding: 60px;

403 justify-content: center;

404 }

405 .form__thank .blue__img,

406 .form__thank-plane--1,

407 .form__thank-plane--2,

408 .form__thank-plane--3 {

409 display: none;

410 }

411}

412@media (max-width: 500px) {

413 .form__modal-close {

414 right: 20px;

415 top: 20px;

416 width: 25px;

417 height: 25px;

418 }

419 .form__modal-close svg {

420 width: 100%;

421 height: 100%;

422 }

423 .form__modal-head h3 {

424 font-size: 28px;

425 }

426 .form__modal-head p {

427

font-size: 15px;

428 margin-top: 10px;

429 }

430 .form__modal-inner {

431 margin-top: 17px;

432 }

433 .form__modal {

434 padding: 40px 20px;

435 }

436 .form__group input {

437 font-size: 16px;

438 padding: 15px 20px;

439 }

440 .form__modal-btn {

441 font-size: 16px;

442 }

443 .form__thank-head h3 {

444 font-size: 28px;

445 }

446 .form__thank-head p {

447 font-size: 16px;

448 }

449}

450.menu {

451 position: absolute;

452 left: 0;

453 top: -100%;

454 width: 100%;

455 height: 100%;

456 background-color: var(--page-bg);

457 z-index: 25;

458 padding: 70px 27px 27px;

459 overflow-y: auto;

460 transition: all 0.3s;

461 will-change: transform;

462 overflow-x: hidden;

463 overflow-y: hidden;

464 display: flex;

465 flex-direction: column;

466}

467.menu.active {

468 top: 0;

469 transition: all 0.3s;

470}

471.menu__nav {

472 padding-top: 22px;

473 border-top: 1px solid var(--secondary2);

474}

475.menu__list {

476 display: flex;

477 flex-direction: column;

478 gap: 30px;

479}

480.menu__nav-link {

481 font-size: 24px;

482 font-style: normal;

483 font-weight: 600;

484 line-height: 120%;

485 letter-spacing: -0.48px;

486 color: var(--primary-color);

487}

488.menu__nav-link svg {

489 stroke: var(--primary-color);

490}

491.menu__nav-link--repair,

492.menu__nav-link--service {

493 display: flex;

494 align-items: center;

495 gap: 10px;

496}

497.menu__bottom {

498 margin-top: auto;

499 padding-top: 20px;

500}

501.menu__btn {

502 padding: 10px;

503 font-size: 16px;

504 font-style: normal;

505 font-weight: 600;

506 line-height: 120%;

507 letter-spacing: -0.16px;

508 color: var(--primary-color);

509 border-radius: 4px;

510 border: 1px solid var(--primary-color);

511 background: none;

512 width: 100%;

513 margin-top: 33px;

514 max-width: 320px;

515}

516.menu__copy {

517 max-width: 330px;

518

font-size: 13px;

519 font-style: normal;

520 font-weight: 500;

521 line-height: 110%;

522 letter-spacing: -0.26px;

523 color: var(--secondary1);

524 margin-top: 37px;

525}

526.menu .header__location {

527 display: flex;

528 gap: 8px;

529 display: none;

530}

531.menu .header__cta {

532 display: block;

533}

534.menu__rep {

535 position: absolute;

536 right: -150%;

537 top: 90px;

538 width: 100%;

539 height: 90dvh;

540 background-color: var(--page-bg);

541 z-index: 3;

542 transition: all 0.2s;

543 padding: 0 27px;

544}

545.menu__rep .repair__list li a {

546 display: inline-flex;

547}

548.menu__rep.active {

549 right: 0;

550 transition: all 0.2s;

551}

552.menu__rep-back {

553 display: flex;

554 align-items: center;

555 gap: 15px;

556 font-size: 24px;

557 font-style: normal;

558 font-weight: 600;

559 line-height: 120%;

560 letter-spacing: -0.48px;

561 color: var(--primary-color);

562 background: none;

563 margin-bottom: 22px;

564 border: none;

565}

566.menu__rep-back svg {

567 stroke: var(--primary-color);

568}

569.menu__serv {

570 position: absolute;

571 right: -150%;

572 top: 0;

573 width: 100%;

574 height: auto;

575 background-color: var(--page-bg);

576 z-index: 3;

577 overflow-y: auto;

578 transition: all 0.2s;

579 padding: 0 27px 27px;

580 margin-top: 85px;

581 min-height: 300px;

582}

583.menu__serv ul {

584 grid-template-columns: 1fr;

585 gap: 30px;

586 border-top: none;

587}

588.menu__serv ul li {

589 display: inline-flex;

590}

591.menu__serv.active {

592 right: 0;

593 transition: all 0.2s;

594}

595.menu__serv-back {

596 display: flex;

597 align-items: center;

598 gap: 15px;

599 font-size: 24px;

600 font-style: normal;

601 font-weight: 600;

602 line-height: 120%;

603 letter-spacing: -0.48px;

604 color: var(--primary-color);

605 background: none;

606 margin-bottom: 22px;

607 border: none;

608}

609.menu__serv-back svg {

610 stroke: var(--primary-color);

611}

612.service__menu-list--item svg {

613 fill: var(--primary-color);

614}

615.menu .menu__rep-inner {

616 display: flex;

617 flex-direction: column;

618 gap: 20px;

619 margin-top: 29px;

620 padding-bottom: 30px;

621 height: 80vh;

622 overflow-y: auto;

623}

624.menu .repair__list-item span {

625 line-height: 120%;

626}

627.menu .repair__list li a {

628 display: grid;

629 align-items: center;

630 gap: 13px;

631 height: 48px;

632 margin-bottom: 10px;

633}

634

635@media (max-width: 550px) {

636 .menu {

637 position: fixed;

638 }

639}

640@media (max-width: 480px) {

641 .menu .header__location span:before {

642 bottom: -3px !important;

643 }

644}

645.repair {

646 position: absolute;

647 left: 0;

648 top: 100%;

649 width: 100%;

650 z-index: 1;

651 background-color: var(--page-bg);

652 padding-bottom: 40px;

653 will-change: transform;

654 box-shadow: 0 29px 23px -7px #0000004d;

655 opacity: 0;

656 visibility: hidden;

657 transition: all 0.5s;

658}

659.repair .container {

660 padding-top: 40px;

661 border-top: 1px solid var(--secondary2);

662 max-width: 1400px;

663}

664@media (min-width: 1410px) {

665 .repair .container {

666 padding-left: 0;

667 padding-right: 0;

668 }

669}

670.repair ul li a {

671 padding-top: 0;

672 padding-bottom: 0;

673}

674.repair .service__cta {

675 margin-top: 60px;

676}

677.menu__rep-inner .repair__list li{

678 line-height: 50px;

679}

680.menu__rep-inner .repair__list li a{

681

682}

683.repair__menu .repair__list {

684 display: grid;

685 grid-template-columns: repeat(3, auto);

686}

687.repair__list-item {

688 display: grid;

689 grid-template-columns: 43px 1fr;

690 gap: 22px;

691 align-items: center;

692}

693.repair__list-item::before {

694 display: flex;

695 align-items: center;

696 content: " ";

697 width:43px;

698 height: 100%;

699 background-repeat: no-repeat;

700 background-position: center center;

701}

702.repair__list-item:hover span {

703 color: var(--accent-color);

704}

705.repair__list-item span {

706 font-size: 20px;

707 font-style: normal;

708 font-weight: 500;

709 line-height: 330%;

710 letter-spacing: -0.4px;

711 color: var(--primary-color);

712 transition: color 0.2s;

713}

714.category-item-id-15::before {

715 background-image: url('../images/category-item-15.webp');

716 background-size: 38px 34px;

717}

718.category-item-id-16::before {

719 background-image: url('../images/category-item-16.webp');

720 background-size: 37px 37px;

721}

722.category-item-id-10::before {

723 background-image: url('../images/category-item-10.webp');

724 background-size: 33px 29px;

725}

726.category-item-id-14::before {

727 background-image: url('../images/category-item-14.webp');

728 background-size: 29px 37px;

729}

730.category-item-id-11::before {

731 background-image: url('../images/category-item-11.webp');

732 background-size: 41px 27px;

733}

734.category-item-id-9::before {

735 background-image: url('../images/category-item-9.webp');

736 background-size: 35px 32px;

737}

738.category-item-id-6::before {

739 background-image: url('../images/category-item-6.webp');

740 background-size: 31px 31px;

741}

742.category-item-id-12::before {

743 background-image: url('../images/category-item-12.webp');

744 background-size: 38px 23px;

745}

746.category-item-id-1::before {

747 background-image: url('../images/category-item-1.webp');

748 background-size: 33px 33px;

749}

750.category-item-id-13::before {

751 background-image: url('../images/category-item-13.webp');

752 background-size: 38px 39px;

753}

754.category-item-id-4::before {

755 background-image: url('../images/category-item-4.webp');

756 background-size: 31px 29px;

757}

758.category-item-id-17::before {

759 background-image: url('../images/category-item-17.webp');

760 background-size: 43px 43px;

761}

762.category-item-id-3::before {

763 background-image: url('../images/category-item-3.webp');

764 background-size: 37px 41px;

765}

766.category-item-id-8::before {

767 background-image: url('../images/category-item-8.webp');

768 background-size: 43px 20px;

769}

770.category-item-id-7::before {

771 background-image: url('../images/category-item-7.webp');

772 background-size: 27px 27px;

773}

774.category-item-id-2::before {

775 background-image: url('../images/category-item-2.webp');

776 background-size: 26px 48px;

777}

778.category-item-id-18::before {

779 background-image: url('../images/service-item-id-18.svg');

780 background-size: 27px 27px;

781}

782.repair__menu {

783 pointer-events: none;

784}

785.repair__menu.active {

786 opacity: 1;

787 visibility: visible;

788 pointer-events: all;

789}

790.service__menu {

791 position: fixed;

792 left: 0;

793 top: 100%;

794 width: 100%;

795 background-color: var(--page-bg);

796 transition: all 0.3s;

797 padding-bottom: 40px;

798 opacity: 0;

799 visibility: hidden;

800 pointer-events: none;

801 box-shadow: 0 29px 35px -7px #0000004d;

802}

803.service__menu-list {

804 display: grid;

805 grid-template-columns: repeat(4, 1fr);

806 padding-top: 40px;

807 border-top: 1px solid var(--secondary2);

808}

809.service__menu-list--item {

810 display: flex;

811 align-items: center;

812 gap: 10px;

813}

814.service__menu-list--item:hover span {

815 color: var(--accent-color);

816}

817.service__menu-list--item span {

818 font-size: 20px;

819 font-style: normal;

820 font-weight: 500;

821 line-height: 110%;

822 letter-spacing: -0.4px;

823 color: var(--primary-color);

824 transition: color 0.2s;

825}

826.service__menu.active {

827 opacity: 1;

828 visibility: visible;

829 pointer-events: all;

830}

831.header {

832 position: absolute;

833 left: 0;

834 top: 0;

835 width: 100%;

836 z-index: 100;

837 padding: 21px 0px;

838 will-change: transform;

839 transform: translateY(-100%);

840 transition: all 0.3s;

841}

842.header.is-visible {

843 transform: translateY(0);

844 transition: all 0.3s;

845}

846.header.active {

847 background-color: var(--page-bg);

848 transition: all 0.3s;

849}

850.header.is-active,

851.header.is-white {

852 background-color: var(--page-bg);

853}

854.header__inner {

855 display: flex;

856 align-items: center;

857 justify-content: space-between;

858 border-bottom: 1px solid var(--line-color);

859 padding-bottom: 22px;

860 position: relative;

861}

862.header__left {

863 display: flex;

864 align-items: center;

865 gap: 77px;

866}

867.header__burger {

868 display: none;

869 width: 32px;

870 height: 22px;

871 flex-direction: column;

872 justify-content: space-between;

873 background: transparent;

874 border: none;

875}

876.header__burger span {

877 background-color: var(--primary-color);

878 height: 3px;

879 border-radius: 5px;

880}

881.header__burger span:nth-child(1) {

882 width: 24px;

883}

884.header__burger span:nth-child(2) {

885 width: 100%;

886}

887.header__burger span:nth-child(3) {

888 width: 18px;

889}

890.header__logo {

891 display: flex;

892 align-items: center;

893 max-width: 368px;

894 gap: 34px;

895}

896.header__logo img {

897 max-width: 214px;

898 max-height: 60px;

899 width: 100%;

900 height: 100%;

901}

902.header__logo span {

903

font-size: 14px;

904 font-style: normal;

905 font-weight: 400;

906 line-height: 120%;

907 color: var(--primary-color);

908}

909.header__location {

910 background: none;

911 border: none;

912 cursor: pointer;

913}

914.header__location:hover svg {

915 fill: var(--accent-color);

916}

917.header__location:hover span {

918 color: var(--accent-color);

919}

920.header__location:hover span:before {

921 background-color: var(--accent-color);

922}

923.header__location svg {

924 fill: var(--primary-color);

925 transition: all 0.2s;

926}

927.header__location span {

928

font-size: 15px;

929 font-style: normal;

930 font-weight: 500;

931 line-height: 120%;

932 letter-spacing: -0.15px;

933 color: var(--primary-color);

934 position: relative;

935 transition: all 0.2s;

936}

937.header__location span:before {

938 content: "";

939 width: 100%;

940 height: 1px;

941 background-color: var(--secondary1);

942 position: absolute;

943 left: 0;

944 bottom: 0;

945 z-index: 2;

946 will-change: transform;

947}

948.header__right {

949 display: flex;

950 align-items: center;

951 gap: 69px;

952}

953.header__btn {

954 font-size: 16px;

955 font-style: normal;

956 font-weight: 600;

957 line-height: 120%;

958 letter-spacing: -0.16px;

959 color: var(--primary-color);

960 padding: 10px 15px;

961 border: 1px solid var(--primary-color);

962 border-radius: 4px;

963 cursor: pointer;

964 transition: 0.2s;

965 background: none;

966}

967.header__btn:hover {

968 color: var(--secondary-color);

969 background-color: var(--accent-color);

970 border-color: var(--accent-color);

971}

972.header__cta a {

973 font-size: 24px;

974 font-style: normal;

975 font-weight: 600;

976 line-height: 120%;

977 letter-spacing: -0.24px;

978 color: var(--primary-color);

979 transition: 0.2s;

980}

981.header__cta a:hover {

982 color: var(--accent-color);

983}

984.header__cta div {

985 display: flex;

986 align-items: center;

987 gap: 7px;

988}

989.header__cta div span {

990

font-size: 14px;

991 font-style: normal;

992 font-weight: 400;

993 line-height: 120%;

994 color: var(--primary-color);

995}

996.header__cta div svg {

997 fill: var(--accent-color);

998}

999.header__bottom {

1000 position: relative;

1001}

1002.header__bottom li a, .header__bottom li>div.header__nav-link {

1003 padding-bottom: 20px;

1004 padding-top: 20px;

1005}

1006.header__bottom li a svg, .header__bottom li>div.header__nav-link svg {

1007 stroke: var(--primary-color);

1008}

1009.header__nav-list {

1010 display: flex;

1011 align-items: center;

1012 gap: 30px;

1013}

1014.header__nav-link {

1015 font-size: 24px;

1016 font-style: normal;

1017 font-weight: 600;

1018 line-height: 120%;

1019 letter-spacing: -0.48px;

1020 color: var(--primary-color);

1021 transition: 0.2s;

1022}

1023.header__nav-link:hover {

1024 color: var(--accent-color);

1025}

1026.header__nav-link--repair,

1027.header__nav-link--service {

1028 display: flex;

1029 align-items: center;

1030 gap: 10px;

1031}

1032.header__cta-mob {

1033 display: none;

1034 align-items: center;

1035 gap: 28px;

1036}

1037.header__cta-mob button svg,

1038.header__cta-mob a svg {

1039 fill: var(--primary-color);

1040}

1041.header__mob-link {

1042 display: flex;

1043}

1044.location-btn {

1045 border: none;

1046 background: none;

1047 display: flex;

1048 gap: 5px;

1049 align-items: center;

1050}

1051.burger span {

1052 transition: all 0.2s;

1053 position: relative;

1054}

1055.burger span:nth-child(1) {

1056 top: 0;

1057}

1058.burger span:nth-child(3) {

1059 bottom: 0;

1060}

1061.burger.active span:nth-child(1) {

1062 width: 100%;

1063 transform: rotate(45deg);

1064 top: 9px;

1065}

1066.burger.active span:nth-child(2) {

1067 opacity: 0;

1068}

1069.burger.active span:nth-child(3) {

1070 width: 100%;

1071 transform: rotate(-45deg);

1072 bottom: 9px;

1073}

1074@media (max-width: 1100px) {

1075 .header__left {

1076 gap: 30px;

1077 }

1078 .header__logo span {

1079 max-width: 120px;

1080 }

1081 .header__btn {

1082 display: none;

1083 }

1084}

1085@media (max-width: 992px) {

1086 .header__bottom {

1087 display: none;

1088 }

1089 .header__inner {

1090 border-bottom: none;

1091 padding: 0;

1092 }

1093 .header__logo img {

1094 max-width: 123px;

1095 }

1096 .header__burger {

1097 display: flex;

1098 }

1099 .header__cta-mob {

1100 gap: 26px;

1101 padding-right: 3px;

1102 }

1103}

1104@media (max-width: 767.98px) {

1105 .header__logo span {

1106 display: none;

1107 }

1108}

1109@media (max-width: 650px) {

1110 .header__location {

1111 margin-left: auto;

1112 }

1113 .header__location span {

1114 display: none;

1115 }

1116 .header__location svg {

1117 width: 23px;

1118 height: auto;

1119 }

1120 .header__inner {

1121 gap: 20px;

1122 }

1123 .header__left {

1124 width: 100%;

1125 }

1126 .header__right {

1127 flex-shrink: 0;

1128 }

1129}

1130@media (max-width: 550px) {

1131 .header__cta {

1132 display: none;

1133 }

1134 .header__cta-mob {

1135 display: flex;

1136 }

1137 .header__location {

1138 display: none;

1139 }

1140 .header {

1141 position: fixed;

1142 }

1143}

1144@media (max-width: 480px) {

1145 .header {

1146 padding: 18px 0;

1147 }

1148 .header__left {

1149 gap: 30px;

1150 }

1151}

1152.hero {

1153 background: var(--hero-gradient);

1154 border-radius: 0 0 80px 80px;

1155 padding-top: 190px;

1156 padding-bottom: 46px;

1157 overflow: hidden;

1158 position: relative;

1159 margin-bottom: 80px;

1160}

1161.hero__bg-line {

1162 position: absolute;

1163 top: 0;

1164 width: 100%;

1165 height: 100%;

1166 z-index: 0;

1167 pointer-events: none;

1168 background-size: cover;

1169}

1170.hero__container {

1171 max-width: 1461px;

1172 position: relative;

1173 z-index: 2;

1174}

1175.hero__inner {

1176 position: relative;

1177 padding-bottom: 40px;

1178}

1179.hero__info {

1180 max-width: 811px;

1181}

1182.hero__info h1 {

1183 font-size: 80px;

1184 font-style: normal;

1185 font-weight: 700;

1186 line-height: 95%;

1187 letter-spacing: -2.7px;

1188 color: var(--primary-color);

1189 margin-top: 10px;

1190}

1191.hero__info h1 span.h1_brand {

1192 color: var(--accent-color);

1193}

1194.hero__info h1 span.h1_geo {

1195 display: block;

1196 font-size: 50px;

1197 font-style: normal;

1198 font-weight: 600;

1199 line-height: 110%;

1200 letter-spacing: -1.5px;

1201 color: var(--primary-color);

1202}

1203.hero__info p {

1204 font-size: 50px;

1205 font-style: normal;

1206 font-weight: 600;

1207 line-height: 110%;

1208 letter-spacing: -1.5px;

1209 color: var(--primary-color);

1210 margin-top: 12px;

1211}

1212.hero__cta {

1213 max-width: 560px;

1214 margin-top: 60px;

1215 margin-left: 5px;

1216}

1217.hero__cta-title {

1218 font-size: 25px;

1219 font-style: normal;

1220 font-weight: 500;

1221 line-height: 120%;

1222 letter-spacing: -0.25px;

1223 color: var(--primary-color);

1224}

1225.hero__cta-title span {

1226 font-weight: 700;

1227}

1228.hero__form {

1229 display: flex;

1230 gap: 11px;

1231 margin-top: 21px;

1232}

1233.hero__form input {

1234 width: 100%;

1235 font-size: 20px;

1236 font-style: normal;

1237 font-weight: 600;

1238 line-height: 120%;

1239 letter-spacing: -0.4px;

1240 padding: 18px 40px 18px 20px;

1241 color: var(--text-color-main);

1242 border-radius: 4px;

1243 border: 1px solid var(--input-bg);

1244 outline: none;

1245 background-color: var(--input-bg);

1246 color: var(--text-color);

1247 border: 1px solid #bcc5d0;

1248}

1249.hero__form input::placeholder {

1250 color: var(--text-color);

1251}

1252.hero__form button {

1253 font-size: 20px;

1254 font-style: normal;

1255 font-weight: 700;

1256 line-height: 120%;

1257 letter-spacing: -0.4px;

1258 color: var(--secondary-color);

1259 padding: 18px 33.5px;

1260 background-color: var(--accent-color);

1261 border: none;

1262 border-radius: 4px;

1263 flex-shrink: 0;

1264 cursor: pointer;

1265 transition: 0.2s;

1266}

1267.hero__form button:hover {

1268 box-shadow: 0 0 10px var(--accent-color);

1269}

1270.hero__cta-text {

1271

font-size: 14px;

1272 font-style: normal;

1273 font-weight: 500;

1274 line-height: 110%;

1275 letter-spacing: -0.28px;

1276 color: var(--text-color2);

1277 max-width: 333px;

1278 margin-top: 16px;

1279 margin-left: 3px;

1280}

1281.top_category__img{

1282 max-width: 797px;

1283 position: absolute;

1284 bottom: 25px;

1285 left: 900px;

1286 will-change: transform;

1287}

1288.hero__img {

1289 max-width: 797px;

1290 position: absolute;

1291 bottom: 25px;

1292 left: 686px;

1293 will-change: transform;

1294}

1295.hero__bottom {

1296 padding-right: 5px;

1297 padding-top: 40px;

1298 border-top: 1px solid var(--line-color);

1299}

1300.hero__list {

1301 display: flex;

1302 align-items: center;

1303 justify-content: space-between;

1304 gap: 20px;

1305}

1306.hero__list-item {

1307 display: flex;

1308 align-items: center;

1309 gap: 12px;

1310 font-size: 22px;

1311 font-style: normal;

1312 font-weight: 400;

1313 line-height: 110%;

1314 letter-spacing: -0.22px;

1315 color: var(--primary-color);

1316}

1317.hero__list-item span {

1318 font-weight: 600;

1319}

1320.hero__list-item svg {

1321 flex-shrink: 0;

1322 fill: var(--primary-color);

1323}

1324@media (min-width: 1300px) {

1325 .hero__bg-line {

1326 background: url(../images/hero-bg-line.webp) no-repeat;

1327 }

1328}

1329@media (max-width: 1300px) {

1330 .hero__list-item {

1331 align-items: flex-start;

1332 }

1333}

1334@media (max-width: 992px) {

1335 .hero {

1336 padding-top: 90px;

1337 }

1338 .hero__list {

1339 display: grid;

1340 grid-template-columns: 1fr 1fr;

1341 gap: 16px;

1342 }

1343 .hero__cta-title {

1344 font-size: 20px;

1345 }

1346 .hero__info {

1347 max-width: 570px;

1348 }

1349 .hero__info h1 {

1350 font-size: 65px;

1351 }

1352 .hero__info h1 span.h1_geo {

1353 font-size: 35px;

1354 }

1355 .hero__info p {

1356 font-size: 35px;

1357 }

1358 .hero__bg-line {

1359 background: url(../images/hero-bg-line-992.webp) no-repeat;

1360 }

1361}

1362@media (max-width: 650px) {

1363 .hero {

1364 border-radius: 0 0 20px 20px;

1365 }

1366 .hero__img {

1367 display: none;

1368 }

1369 .hero__info {

1370 max-width: 420px;

1371 }

1372 .hero__info h1 {

1373 font-size: 50px;

1374 }

1375 .hero__info h1 span.h1_geo {

1376 font-size: 28px;

1377 }

1378 .hero__info p {

1379 font-size: 28px;

1380 }

1381 .hero__bg-line {

1382 background: url(../images/hero-bg-line-650.webp) no-repeat;

1383 }

1384}

1385@media (max-width: 550px) {

1386 .hero {

1387 padding-top: 60px;

1388 padding-bottom: 38px;

1389 }

1390 .hero__bg-line {

1391 background-position: 30%;

1392 }

1393 .hero__form {

1394 flex-direction: column;

1395 }

1396 .hero__container {

1397 padding: 0 22px;

1398 }

1399 .hero__info h1 {

1400 font-size: 36px;

1401 letter-spacing: -1.2px;

1402 }

1403 .hero__info p {

1404 letter-spacing: -0.9px;

1405 margin-top: 14px;

1406 }

1407 .hero__cta {

1408 margin-top: 30px;

1409 margin-left: 0px;

1410 }

1411 .hero__cta-title {

1412 font-size: 16px;

1413 }

1414 .hero__form {

1415 margin-right: 6px;

1416 margin-top: 11px;

1417 gap: 9px;

1418 }

1419 .hero__form input {

1420 font-size: 18px;

1421 padding: 14px 40px 14px 20px;

1422 }

1423 .hero__form button {

1424 font-size: 18px;

1425 padding: 14px;

1426 text-align: center;

1427 }

1428 .hero__cta-text {

1429

font-size: 11px;

1430 letter-spacing: -0.22px;

1431 text-align: center;

1432 margin-top: 11px;

1433 margin-left: -8px;

1434 }

1435 .hero__inner {

1436 padding-bottom: 30px;

1437 }

1438 .hero__bottom {

1439 padding-top: 20px;

1440 }

1441 .hero__list-item {

1442 align-items: center;

1443

font-size: 15px;

1444 gap: 9px;

1445 }

1446 .hero__list-item:nth-child(3) svg {

1447 width: 30px;

1448 height: 30px;

1449 }

1450 .hero__bg-line {

1451 background: url(../images/hero-bg-line-550.webp) no-repeat;

1452 }

1453}

1454@media (max-width: 450px) {

1455 .hero__bg-line {

1456 background: url(../images/hero-bg-line-450.webp) no-repeat;

1457 }

1458}

1459@media (max-width: 400px) {

1460 .hero__bg-line {

1461 background: url(../images/hero-bg-line-400.webp) no-repeat;

1462 }

1463}

1464@media (max-width: 360px) {

1465 .hero__bg-line {

1466 background: url(../images/hero-bg-line-360.webp) no-repeat;

1467 }

1468}

1469.breadcrumbs {

1470 padding: 5px 0 0px 3px;

1471}

1472

1473.breadcrumbs ol {

1474 display: flex;

1475 list-style: none;

1476 margin: 0;

1477 overflow: auto;

1478 overflow-y: hidden;

1479 white-space: nowrap;

1480 scrollbar-width: none;

1481

-ms-overflow-style: none;

1482}

1483

1484.breadcrumbs ol li {

1485 display: flex;

1486 line-height: 30px;

1487

font-size: 10px

1488}

1489

1490.breadcrumbs ol li span {

1491

font-size: 12px;

1492 position: relative

1493}

1494

1495.breadcrumbs a {

1496 color: var(--primary-color);

1497 position: relative

1498}

1499

1500.breadcrumbs a:hover {

1501 color: var(--accent-color)

1502}

1503.breadcrumbs li.link:after {

1504 content: ' ';

1505 margin: 11px 7px 0px 5px;

1506 width: 8px;

1507 height: 8px;

1508 display: block;

1509 border-right: 1px solid var(--secondary1);

1510 border-top: 1px solid var(--secondary1);

1511 transform: rotate(45deg);

1512}

1513

1514.breadcrumbs li.current span {

1515 color: var(--secondary1)

1516}

1517

1518.breadcrumbs li a span:after,.breadcrumbs li a span:before {

1519 content: "";

1520 position: absolute;

1521 bottom: 0;

1522 left: 0;

1523 width: 100%;

1524 transition: width .3s linear

1525}

1526

1527.breadcrumbs li a span:after {

1528 border-bottom: 1px solid var(--primary-color)

1529}

1530

1531.breadcrumbs li a span:before {

1532 border-bottom: 1px solid var(--accent-color)

1533}

1534

1535.breadcrumbs li a:hover span:after {

1536 right: 0;

1537 left: auto;

1538 width: 0

1539}

1540

1541.service {

1542

1543}

1544.service__head h2 {

1545 font-size: 55px;

1546 font-style: normal;

1547 font-weight: 600;

1548 line-height: 95%;

1549 letter-spacing: -1.65px;

1550 color: var(--primary-color);

1551}

1552.service__head h2 span {

1553 color: var(--accent-color);

1554}

1555.service__row {

1556 display: grid;

1557 grid-template-columns: repeat(4, 1fr);

1558 gap: 10px;

1559 margin-top: 45px;

1560}

1561.service__item {

1562 min-height: 254px;

1563 padding: 26px 30px 37px;

1564 display: flex;

1565 flex-direction: column;

1566 justify-content: space-between;

1567 position: relative;

1568 background-color: var(--service-card-bg);

1569 border-radius: 15px;

1570 overflow: hidden;

1571 transition: 0.4s;

1572 will-change: transform, opacity;

1573}

1574.service__item::after {

1575 content: " ";

1576 top: 0;

1577 left: 0;

1578 width: 100%;

1579 height: 100%;

1580 position: absolute;

1581 will-change: transform;

1582 transition: transform 0.2s;

1583 background-repeat: no-repeat;

1584 background-position: bottom right;

1585}

1586.service__item-img {

1587 position: absolute;

1588 will-change: transform;

1589 transition: transform .2s;

1590}

1591.service-item-id-1::after{

1592 background-image: url(../images/service-item-id-1.webp);

1593}

1594.service-item-id-2::after{

1595 background-image: url(../images/service-item-id-2.webp);

1596}

1597.service-item-id-3::after{

1598 background-image: url(../images/service-item-id-3.webp);

1599}

1600.service-item-id-4::after{

1601 background-image: url(../images/service-item-id-4.webp);

1602}

1603.service-item-id-6::after{

1604 background-image: url(../images/service-item-id-6.webp);

1605}

1606.service-item-id-7::after{

1607 background-image: url(../images/service-item-id-7.webp);

1608}

1609.service-item-id-8::after{

1610 background-image: url(../images/service-item-id-8.webp);

1611}

1612.service-item-id-9::after{

1613 background-image: url(../images/service-item-id-9.webp);

1614}

1615.service-item-id-10::after{

1616 background-image: url(../images/service-item-id-10.webp);

1617}

1618.service-item-id-11::after{

1619 background-image: url(../images/service-item-id-11.webp);

1620}

1621.service-item-id-12::after{

1622 background-image: url(../images/service-item-id-12.webp);

1623}

1624.service-item-id-13::after{

1625 background-image: url(../images/service-item-id-13.webp);

1626}

1627.service-item-id-14::after{

1628 background-image: url(../images/service-item-id-14.webp);

1629}

1630.service-item-id-15::after{

1631 background-image: url(../images/service-item-id-15.webp);

1632}

1633.service-item-id-16::after{

1634 background-image: url(../images/service-item-id-16.webp);

1635}

1636.service-item-id-17::after{

1637 background-image: url(../images/service-item-id-17.webp);

1638}

1639.service__item:hover {

1640 background-color: var(--service-card-bg-hover);

1641 transition: 0.4s;

1642}

1643.service__item:hover>span,

1644.service__item:hover p {

1645 color: var(--secondary-text);

1646}

1647.service__item:hover::after {

1648 transform: scale(1.1);

1649}

1650.service__item:hover .service__item-img {

1651 transform: scale(1.1);

1652}

1653.service__item>span {

1654 font-size: 20px;

1655 font-style: normal;

1656 font-weight: 500;

1657 line-height: 110%;

1658 letter-spacing: -0.4px;

1659 color: var(--primary-color);

1660 transition: 0.2s;

1661 position: relative;

1662 z-index: 3;

1663}

1664.service__item p {

1665 font-size: 20px;

1666 font-style: normal;

1667 font-weight: 400;

1668 line-height: 100%;

1669 letter-spacing: -0.4px;

1670 color: var(--primary-color);

1671 transition: 0.2s;

1672 position: relative;

1673 z-index: 3;

1674}

1675

1676.service__cta {

1677 background-color: var(--extra);

1678 margin-top: 30px;

1679 padding: 25px 80px;

1680 display: flex;

1681 align-items: center;

1682 justify-content: space-between;

1683 gap: 20px;

1684 overflow: hidden;

1685 position: relative;

1686}

1687.service__cta-line {

1688 position: absolute;

1689 left: 0;

1690 top: 0;

1691 width: 100%;

1692 height: 100%;

1693 z-index: 1;

1694 background: url(../images/service-cta-line.webp) no-repeat;

1695 background-size: cover;

1696 opacity: 0.5;

1697 will-change: transform;

1698}

1699.service__cta-left {

1700 display: flex;

1701 align-items: center;

1702 gap: 15px;

1703 position: relative;

1704 z-index: 2;

1705}

1706.service__cta-left p {

1707 font-size: 22px;

1708 font-style: normal;

1709 font-weight: 600;

1710 line-height: 110%;

1711 letter-spacing: -0.44px;

1712 color: var(--secondary-color);

1713}

1714.service__cta-right {

1715 display: flex;

1716 align-items: center;

1717 gap: 47px;

1718 position: relative;

1719 z-index: 2;

1720}

1721.service__cta-right a {

1722 font-size: 24px;

1723 font-style: normal;

1724 font-weight: 600;

1725 line-height: 120%;

1726 letter-spacing: -0.24px;

1727 color: var(--secondary-color);

1728 flex-shrink: 0;

1729}

1730.service__cta-btn {

1731 font-size: 16px;

1732 font-style: normal;

1733 font-weight: 600;

1734 line-height: 120%;

1735 letter-spacing: -0.16px;

1736 color: var(--secondary-color);

1737 padding: 10px 13px;

1738 background: none;

1739 border-radius: 4px;

1740 border: 1px solid var(--secondary-color);

1741 cursor: pointer;

1742 transition: 0.2s;

1743}

1744.service__cta-btn:hover {

1745 background-color: var(--secondary-color);

1746 color: var(--extra);

1747}

1748.service__cta-btn span:nth-child(2) {

1749 display: none;

1750}

1751.service .service__row-2 {

1752 margin-top: 30px;

1753}

1754

1755.service .service__item svg {

1756 max-width: 71px;

1757 left: 66%;

1758 bottom: 57px;

1759 fill: var(--accent-color);

1760}

1761.service__adv {

1762 display: grid;

1763 grid-template-columns: repeat(4, 1fr);

1764 gap: 10px;

1765 margin-top: 30px;

1766}

1767.service__adv-item {

1768 display: flex;

1769 align-items: center;

1770 justify-content: space-between;

1771 padding-left: 25px;

1772 padding-right: 30px;

1773 height: 100px;

1774 border-radius: 15px;

1775 border: 2px solid var(--secondary2);

1776}

1777.service__adv-item-left {

1778 display: flex;

1779 align-items: center;

1780 gap: 11px;

1781 font-size: 20px;

1782 font-style: normal;

1783 font-weight: 500;

1784 line-height: 110%;

1785 letter-spacing: -0.4px;

1786 color: var(--primary-color);

1787}

1788.service__adv-item-left svg {

1789 fill: var(--primary-color);

1790}

1791.service__adv-item-right {

1792 color: var(--secondary1);

1793 font-size: 20px;

1794 font-style: normal;

1795 font-weight: 400;

1796 line-height: 100%;

1797 letter-spacing: -0.4px;

1798}

1799.trouble__item a{

1800 min-height: 190px;

1801}

1802.trouble__item span.service__item-title{

1803 font-size:18px;

1804}

1805@media (max-width: 1330px) {

1806 .service__cta {

1807 flex-direction: column;

1808 }

1809 .service__adv {

1810 grid-template-columns: 1fr 1fr;

1811 }

1812}

1813@media (max-width: 992px) {

1814 .service__row {

1815 grid-template-columns: repeat(2, 1fr);

1816 }

1817 .service__cta {

1818 padding-left: 20px;

1819 padding-right: 20px;

1820 }

1821 .service__cta-left p {

1822 max-width: 320px;

1823 }

1824 .service__head h2 {

1825 font-size: 45px;

1826 }

1827}

1828@media (max-width: 767.98px) {

1829 .service__adv {

1830 grid-template-columns: 1fr;

1831 margin-top: 10px;

1832 gap: 8px;

1833 }

1834 .service__adv-item {

1835 height: 50px;

1836 }

1837 .service__adv-item-left {

1838 font-size: 16px;

1839 font-style: normal;

1840 font-weight: 500;

1841 line-height: 110%;

1842 letter-spacing: -0.32px;

1843 }

1844 .service__adv-item-left svg {

1845 width: 18px;

1846 height: 18px;

1847 }

1848 .service__adv-item-right {

1849 font-size: 16px;

1850 font-style: normal;

1851 font-weight: 400;

1852 line-height: 100%;

1853 letter-spacing: -0.32px;

1854 }

1855}

1856@media (max-width: 600px) {

1857 .trouble__item a{

1858 min-height: 150px;

1859 }

1860 .trouble__item span.service__item-title{

1861

font-size:15px;

1862 }

1863 .service__item>span{

1864

font-size:15px;

1865 }

1866 .service__row {

1867 gap: 6px;

1868 row-gap: 10px;

1869 }

1870 .service__cta-left p {

1871 font-size: 16px;

1872 max-width: 223px;

1873 }

1874 .service__cta-right {

1875 gap: 14px;

1876 }

1877 .service__cta-right a {

1878 font-size: 16px;

1879 }

1880 .service__cta-btn {

1881

font-size: 13px;

1882 padding: 7px 16px;

1883 }

1884 .service__cta-btn span:nth-child(1) {

1885 display: none;

1886 }

1887 .service__cta-btn span:nth-child(2) {

1888 display: block;

1889 }

1890}

1891@media (max-width: 1280px) {

1892 .service__item::after {

1893 background-size: 150px;

1894 }

1895}

1896@media (max-width: 576px) {

1897 .hero {

1898 margin-bottom: 30px;

1899 }

1900 .service__item {

1901 min-height: 135px;

1902 padding: 16px 3px 24px 16px;

1903 }

1904 .service__item h3 {

1905 font-size: 16px;

1906 letter-spacing: -0.32px;

1907 }

1908 .service__item p {

1909

font-size: 14px;

1910 letter-spacing: -0.28px;

1911 margin-left: 2px;

1912 }

1913 .service__head h2 {

1914 font-size: 28px;

1915 letter-spacing: -0.9px;

1916 }

1917 .service__row-1 {

1918 margin-top: 20px;

1919 }

1920 .service__item::after {

1921 background-size: 90px;

1922 }

1923 .service__cta {

1924 margin-top: 9px;

1925 padding-top: 18px;

1926 padding-bottom: 21px;

1927 gap: 15px;

1928 }

1929 .service .service__row-2 {

1930 margin-top: 10px;

1931 }

1932 .service .service__item svg {

1933 max-width: 38px;

1934 height: auto;

1935 left: 62%;

1936 bottom: 20px;

1937 }

1938}

1939@media (max-width: 450px) {

1940 .service__cta-left {

1941 justify-content: space-between;

1942 width: 100%;

1943 padding: 4px;

1944 }

1945 .service__cta-left p {

1946 font-weight: 500;

1947 letter-spacing: -0.32px;

1948 }

1949 .service__cta-left p span {

1950 font-weight: 600px;

1951 }

1952 .service__adv-item {

1953 padding: 16px 21px 16px 24px;

1954 }

1955}

1956@media (max-width: 400px){

1957 .service__item p {

1958

font-size: 12px;

1959 }

1960}

1961@media (max-width: 360px) {

1962 .trouble__item a{

1963 min-height: 135px;

1964 }

1965 .trouble__item span.service__item-title{

1966

font-size:14px;

1967 }

1968 .service__item>span{

1969

font-size:14px;

1970 }

1971}

1972@media (max-width: 320px) {

1973 .trouble__item a{

1974 min-height: 120px;

1975 }

1976 .trouble__item span.service__item-title{

1977

font-size:13px;

1978 }

1979 .service__item>span{

1980

font-size:13px;

1981 }

1982}

1983.steps {

1984 padding-top: 100px;

1985}

1986.steps__container {

1987 max-width: 1444px;

1988}

1989.steps__head {

1990 max-width: 921px;

1991}

1992.steps__head h3 {

1993 font-size: 55px;

1994 font-style: normal;

1995 font-weight: 600;

1996 line-height: 110%;

1997 letter-spacing: -1.65px;

1998 color: var(--primary-color);

1999}

2000.steps__head h3 span {

2001 color: var(--accent-color);

2002}

2003.steps__head p {

2004 font-size: 20px;

2005 font-style: normal;

2006 font-weight: 500;

2007 line-height: 120%;

2008 letter-spacing: -0.2px;

2009 color: var(--primary-color);

2010 margin-top: 32px;

2011}

2012.steps__inner {

2013 margin-top: 24px;

2014 display: grid;

2015 position: relative;

2016}

2017.steps__inner:before {

2018 content: "";

2019 width: 100%;

2020 height: 2px;

2021 background-color: var(--line-color);

2022 position: absolute;

2023 left: 0;

2024 top: 20px;

2025 z-index: 0;

2026 will-change: transform;

2027}

2028.steps__inner .steps__container {

2029 display: flex;

2030 position: relative;

2031 z-index: 1;

2032}

2033.steps__item {

2034 flex-shrink: 0;

2035 will-change: transform, opacity;

2036}

2037.steps__item:nth-child(1) {

2038 margin-right: 46px;

2039}

2040.steps__item:nth-child(1) div.steps__item-title {

2041 max-width: 312px;

2042}

2043.steps__item:nth-child(2) {

2044 margin-right: 74px;

2045}

2046.steps__item:nth-child(2) div.steps__item-title {

2047 max-width: 285px;

2048}

2049.steps__item:nth-child(3) {

2050 margin-right: 85px;

2051}

2052.steps__item:nth-child(3) p {

2053 max-width: 285px;

2054}

2055.steps__item:nth-child(4) .steps__item-num {

2056 background-color: var(--accent-color);

2057 color: var(--secondary-color);

2058}

2059.steps__item:nth-child(4) p {

2060 max-width: 210px;

2061}

2062.steps__item-num {

2063 width: 40px;

2064 height: 40px;

2065 display: flex;

2066 align-items: center;

2067 justify-content: center;

2068 font-size: 20px;

2069 font-style: normal;

2070 font-weight: 500;

2071 line-height: 120%;

2072 letter-spacing: -0.2px;

2073 color: var(--accent-color);

2074 background-color: var(--page-bg);

2075 border: 2px solid var(--accent-color);

2076 border-radius: 50%;

2077}

2078.steps__item-title {

2079 font-size: 20px;

2080 font-style: normal;

2081 font-weight: 500;

2082 line-height: 110%;

2083 letter-spacing: -0.4px;

2084 color: var(--primary-color);

2085 margin-top: 15px;

2086}

2087.steps__item-text {

2088

font-size: 15px;

2089 font-style: normal;

2090 font-weight: 400;

2091 line-height: 130%;

2092 letter-spacing: -0.15px;

2093 margin-top: 10px;

2094 color: var(--primary-color);

2095}

2096.steps__slider .swiper-scrollbar {

2097 display: none;

2098}

2099.steps__slider .swiper-scrollbar .swiper-scrollbar-drag {

2100 background-color: var(--accent-color);

2101}

2102@media (max-width: 1330px) {

2103 .steps__slider .swiper-slide {

2104 width: auto;

2105 max-width: 100%;

2106 }

2107 .steps__slider {

2108 padding-bottom: 40px;

2109 }

2110 .steps__slider .swiper-scrollbar {

2111 display: block;

2112 left: 50% !important;

2113 transform: translate(-50%) !important;

2114 width: 95% !important;

2115 background: var(--secondary2);

2116 }

2117}

2118@media (max-width: 992px) {

2119 .steps {

2120 padding-top: 70px;

2121 padding-bottom: 70px;

2122 }

2123 .steps__head h3 {

2124 font-size: 45px;

2125 }

2126 .steps__inner .steps__container {

2127 padding-left: 0;

2128 padding-right: 0;

2129 }

2130 .steps__inner {

2131 padding-left: 26px;

2132 padding-right: 26px;

2133 }

2134}

2135@media (max-width: 767.98px) {

2136 .steps__head h3 {

2137 font-size: 35px;

2138 }

2139}

2140@media (max-width: 550px) {

2141 .steps {

2142 padding-top: 40px;

2143 padding-bottom: 40px;

2144 }

2145 .steps__head h3 {

2146 font-size: 28px;

2147 line-height: 100%;

2148 letter-spacing: -0.9px;

2149 }

2150 .steps__head p {

2151 font-size: 16px;

2152 letter-spacing: -0.16px;

2153 margin-top: 16px;

2154 }

2155 .steps__inner {

2156 margin-top: 18px;

2157 }

2158 .steps__inner .steps__container {

2159 padding-bottom: 22px;

2160 }

2161 .steps__item-title {

2162 font-size: 18px;

2163 }

2164 .steps__item p {

2165

font-size: 13px;

2166 line-height: 130%;

2167 letter-spacing: -0.13px;

2168 margin-top: 11px;

2169 }

2170 .steps__item:nth-child(1) {

2171 margin-right: 0;

2172 }

2173 .steps__item:nth-child(1) h3 {

2174 max-width: 227px;

2175 }

2176 .steps__item:nth-child(1) p {

2177 max-width: 180px;

2178 }

2179 .steps__item:nth-child(2) {

2180 margin-right: 0;

2181 }

2182 .steps__item:nth-child(2) h3 {

2183 max-width: 227px;

2184 }

2185 .steps__item:nth-child(2) p {

2186 max-width: 180px;

2187 }

2188 .steps__item:nth-child(3) {

2189 margin-right: 20px;

2190 }

2191 .steps__item:nth-child(3) h3 {

2192 max-width: 227px;

2193 }

2194 .steps__item:nth-child(3) p {

2195 max-width: 180px;

2196 }

2197 .steps__slider .swiper-scrollbar {

2198 width: 90% !important;

2199 }

2200}

2201.blue {

2202 padding-top: 41px;

2203 padding-bottom: 52px;

2204 background: var(--form-gradient);

2205 position: relative;

2206}

2207.blue__bg-lines {

2208 position: absolute;

2209 left: 0;

2210 top: 0;

2211 width: 100%;

2212 height: 100%;

2213 background: url(../images/blue-lines.webp);

2214 background-repeat: no-repeat;

2215 background-size: cover;

2216 z-index: 1;

2217 opacity: 0.5;

2218}

2219.blue__container {

2220 max-width: 1434px;

2221 position: relative;

2222 z-index: 3;

2223}

2224.blue__inner {

2225 position: relative;

2226}

2227.blue__head {

2228 display: flex;

2229 gap: 43px;

2230}

2231.blue__head-title {

2232 max-width: 248px;

2233 font-size: 45px;

2234 font-style: normal;

2235 font-weight: 600;

2236 line-height: 95%;

2237 letter-spacing: -1.35px;

2238 color: var(--secondary-color);

2239}

2240.blue__head p {

2241 font-size: 20px;

2242 font-style: normal;

2243 font-weight: 500;

2244 line-height: 110%;

2245 letter-spacing: -0.4px;

2246 color: var(--secondary-color);

2247 max-width: 500px;

2248}

2249.blue__cta {

2250 margin-top: 63px;

2251 width: 100%;

2252 max-width: 752px;

2253}

2254.blue__form {

2255 display: flex;

2256 gap: 10px;

2257}

2258.blue__form input {

2259 padding: 17px 36px 17px 20px;

2260 background-color: var(--input-bg);

2261 font-size: 20px;

2262 font-style: normal;

2263 font-weight: 600;

2264 line-height: 120%;

2265 letter-spacing: -0.4px;

2266 color: var(--primary-color);

2267 border-radius: 4px;

2268 width: 100%;

2269 max-width: 385px;

2270 border: none;

2271 outline: none;

2272}

2273.blue__form button {

2274 width: 100%;

2275 font-size: 20px;

2276 font-style: normal;

2277 font-weight: 700;

2278 line-height: 120%;

2279 letter-spacing: -0.4px;

2280 color: var(--secondary-color);

2281 border-radius: 4px;

2282 background-color: var(--accent-color);

2283 text-align: center;

2284 padding: 17px;

2285 border: none;

2286 justify-content: center;

2287 cursor: pointer;

2288 transition: 0.2s;

2289}

2290.blue__form button:hover {

2291 box-shadow: 0 0 10px var(--accent-color);

2292}

2293.blue__small-text {

2294

font-size: 14px;

2295 font-style: normal;

2296 font-weight: 500;

2297 line-height: 110%;

2298 letter-spacing: -0.28px;

2299 color: var(--secondary1);

2300 margin-top: 16px;

2301 max-width: 333px;

2302 margin-left: 3px;

2303}

2304.blue__img {

2305 width: 142px;

2306 height: 264px;

2307 background-color: #0b172c;

2308 border-radius: 10px;

2309 transform: rotate(-3.27deg);

2310 position: absolute;

2311 top: -58px;

2312 left: 980px;

2313}

2314.blue__phone {

2315 display: flex;

2316 flex-direction: column;

2317 align-items: center;

2318 text-align: center;

2319 height: 100%;

2320 padding-top: 35px;

2321}

2322.blue__phone-hand {

2323 max-width: 233px;

2324 height: auto;

2325 position: absolute;

2326 z-index: 5;

2327 right: -132px;

2328 bottom: -143px;

2329 transform: rotate(4deg);

2330}

2331.blue__avatar {

2332 width: 41px;

2333 height: 41px;

2334 border-radius: 50%;

2335 overflow: hidden;

2336}

2337.blue__phone-text {

2338

font-size: 11px;

2339 font-style: normal;

2340 font-weight: 600;

2341 line-height: 100%;

2342 letter-spacing: -0.11px;

2343 color: var(--secondary-color);

2344 max-width: 57px;

2345 margin: 11px auto 0;

2346}

2347.blue__phone-icon {

2348 margin-top: 30px;

2349}

2350.blue__phone-icon svg {

2351 fill: var(--secondary-phone);

2352}

2353@media (max-width: 992px) {

2354 .blue__img {

2355 display: none;

2356 }

2357 .blue__bg-lines {

2358 background-position: 60%;

2359 }

2360 .blue__head {

2361 flex-direction: column;

2362 gap: 10px;

2363 }

2364}

2365@media (max-width: 576px) {

2366 .blue {

2367 padding-top: 23px;

2368 padding-bottom: 28px;

2369 }

2370 .blue__inner form {

2371 flex-direction: column;

2372 gap: 7px;

2373 }

2374 .blue__inner form input {

2375 max-width: 100%;

2376 font-size: 18px;

2377 padding: 13px 25px;

2378 }

2379 .blue__inner form button {

2380 font-size: 18px;

2381 padding: 14px;

2382 }

2383 .blue__head {

2384 gap: 16px;

2385 }

2386 .blue__head-title {

2387 font-size: 28px;

2388 }

2389 .blue__head p {

2390

font-size: 15px;

2391 letter-spacing: -0.3px;

2392 }

2393 .blue__cta {

2394 margin-top: 14px;

2395 max-width: 324px;

2396 }

2397 .blue__container {

2398 padding-left: 29px;

2399 padding-right: 10px;

2400 }

2401 .blue__small-text {

2402

font-size: 12px;

2403 text-align: center;

2404 margin: 14px auto 0;

2405 }

2406}

2407.discount {

2408 padding-top: 32px;

2409 padding-bottom: 52px;

2410 margin-bottom: 80px;

2411 margin-top: 70px;

2412}

2413.discount .container {

2414 max-width: 1446px;

2415}

2416.discount .blue__head-title {

2417 font-size: 28px;

2418 line-height: 95%;

2419 letter-spacing: -0.9px;

2420}

2421.discount .blue__head p {

2422 max-width: 460px;

2423}

2424.discount .blue__cta {

2425 margin-top: 32px;

2426}

2427@media (max-width: 450px) {

2428 .blue__cta {

2429 max-width: 100%;

2430 padding-right: 15px;

2431 }

2432}

2433.price {

2434

2435}

2436.price__head h2 {

2437 font-size: 55px;

2438 font-style: normal;

2439 font-weight: 600;

2440 line-height: 110%;

2441 letter-spacing: -1.65px;

2442 color: var(--primary-color);

2443}

2444.price__head h2 span {

2445 color: var(--accent-color);

2446}

2447.price__top {

2448 margin-top: 30px;

2449 display: grid;

2450 grid-template-columns: 1fr 1fr;

2451 gap: 10px;

2452}

2453.price__top-item {

2454 border: 1px solid var(--secondary2);

2455 border-radius: 15px;

2456 padding: 30px 40px 30px 30px;

2457 display: flex;

2458 align-items: center;

2459 justify-content: space-between;

2460 gap: 20px;

2461}

2462.price__top-item div {

2463 display: flex;

2464 align-items: center;

2465 flex-wrap: wrap;

2466 gap: 15px;

2467}

2468.price__top-item div p {

2469 font-size: 20px;

2470 font-style: normal;

2471 font-weight: 500;

2472 line-height: 110%;

2473 letter-spacing: -0.4px;

2474 color: var(--primary-color);

2475}

2476.price__top-item div span {

2477 font-size: 20px;

2478 font-style: normal;

2479 font-weight: 400;

2480 line-height: 100%;

2481 letter-spacing: -0.4px;

2482 color: var(--secondary1);

2483}

2484.price__top-btn {

2485 font-size: 16px;

2486 font-style: normal;

2487 font-weight: 600;

2488 line-height: 120%;

2489 letter-spacing: -0.16px;

2490 color: var(--secondary-color);

2491 border: none;

2492 padding: 10px 15px;

2493 border-radius: 4px;

2494 background-color: var(--accent-color);

2495 cursor: pointer;

2496 transition: 0.2s;

2497 flex-shrink: 0;

2498}

2499.price__top-btn:hover {

2500 box-shadow: 0 0 10px var(--accent-color);

2501}

2502.price__subtitle {

2503 font-size: 20px;

2504 font-style: normal;

2505 font-weight: 500;

2506 line-height: 120%;

2507 letter-spacing: -0.2px;

2508 color: var(--primary-color);

2509 margin-top: 30px;

2510}

2511.price__inner {

2512 margin-top: 30px;

2513 position: relative;

2514 max-height: 400px;

2515 overflow: hidden;

2516}

2517.price__inner.open {

2518 max-height: fit-content;

2519}

2520.price__inner:before {

2521 content: "";

2522 width: 100%;

2523 height: 50%;

2524 background: linear-gradient(0deg, var(--secondary6) 12.8%, rgba(255, 255, 255, 0) 91.96%);

2525 position: absolute;

2526 left: 0;

2527 bottom: 0;

2528 z-index: 2;

2529}

2530.price__inner.open:before {

2531 display: none;

2532}

2533.price__row a{

2534 color: var(--primary-color);

2535 text-decoration: underline;

2536}

2537.price__row a:hover{

2538 text-decoration: none;

2539}

2540.price__row {

2541 display: grid;

2542 grid-template-columns: 1fr 1fr;

2543 border-bottom: 1px solid var(--line-color);

2544 color: var(--primary-color);

2545}

2546.price__row-full-text{

2547 font-size: 18px;

2548 font-style: normal;

2549 line-height: 110%;

2550 color: var(--primary-color);

2551 padding: 25px 55px;

2552 border-bottom: 1px solid var(--line-color);

2553}

2554.price__row-full{

2555 background-color: var(--secondary5);

2556}

2557.price__row-title>div{

2558 background-color: var(--secondary5);

2559 font-size: 22px;

2560 font-weight: bold;

2561}

2562.price__row-no-border{

2563 border-bottom: none;

2564}

2565.price__row .price__row-col--1 {

2566 border-right: 1px solid var(--line-color);

2567}

2568.price__row--main .price__row-col {

2569 padding: 20px 55px;

2570}

2571.price__row--main{

2572 font-size: 18px;

2573 font-style: normal;

2574 font-weight: 500;

2575 line-height: 110%;

2576 letter-spacing: -0.4px;

2577 color: var(--primary-color);

2578}

2579.price__row--main .price__row-col--1 {

2580 border-right: 1px solid var(--line-color);

2581}

2582.price__row--main .price__row-col--2 {

2583 padding-left: 38px;

2584}

2585.price__row-col {

2586 padding: 20px 55px;

2587}

2588.price__row-col--bold {

2589 font-weight: 600 !important;

2590}

2591.price__row-col--2 {

2592 padding-left: 36px;

2593}

2594.price__row-full {

2595 padding: 25px 55px;

2596 font-size: 20px;

2597 font-style: normal;

2598 font-weight: 600;

2599 line-height: 110%;

2600 letter-spacing: -0.48px;

2601 color: var(--primary-color);

2602}

2603.price__more-btn {

2604 font-size: 16px;

2605 font-style: normal;

2606 font-weight: 600;

2607 line-height: 120%;

2608 letter-spacing: -0.16px;

2609 color: var(--primary-color);

2610 border-radius: 4px;

2611 border: 1px solid var(--primary-color);

2612 width: 100%;

2613 background: none;

2614 max-width: 177px;

2615 margin: 26px auto 0;

2616 display: block;

2617 padding: 10px;

2618 cursor: pointer;

2619 transition: all 0.2s;

2620}

2621.price__more-btn:hover {

2622 border-color: var(--accent-color);

2623 background-color: var(--accent-color);

2624 color: var(--secondary-color);

2625}

2626@media (max-width: 992px) {

2627 .price__row-full-text {padding: 25px 0px;}

2628 .price__top {

2629 grid-template-columns: 1fr;

2630 }

2631 .price__head h2 {

2632 font-size: 45px;

2633 }

2634 .price__row-col,

2635 .price__row-full,

2636 .price__row--main .price__row-col {

2637 padding-left: 20px;