@charset "UTF-8";
* {
   padding: 0;
   margin: 0;
   border: 0;
}

*,
*:before,
*:after {
   box-sizing: border-box;
}

:focus,
:active {
   outline: none;
}

a:focus,
a:active {
   outline: none;
}

nav,
footer,
header,
aside {
   display: block;
}

html,
body {
   height: 100%;
   width: 100%;
   font-size: 100%;
   line-height: 1;
   font-size: 14px;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
   font-family: inherit;
}

input::-ms-clear {
   display: none;
}

button {
   cursor: pointer;
}

button::-moz-focus-inner {
   padding: 0;
   border: 0;
}

a,
a:visited {
   text-decoration: none;
}

a:hover {
   text-decoration: none;
}

ul li {
   list-style: none;
}

img {
   vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-size: inherit;
   font-weight: inherit;
}

html.lock,
body.lock {
   overflow-y: hidden;
}
html,
body {
   scroll-behavior: smooth;
}

.wrapper {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   position: relative;
}

.page-wrapper {
   overflow-x: hidden;
   transition: none;
   width: 100%;
}
.page-wrapper img,
.page-wrapper svg {
   display: block;
   position: relative;
   left: 0;
}

main {
   flex: 1 1 auto;
   overflow: hidden;
}

.container {
   max-width: 1280px;
   margin: 0 auto;
}

:root {
   --red-main: #2c1be5;
   --dark: #1b1e2e;
   --white: #fff;
   --font-family: "Ubuntu", sans-serif;
   --second-family: "Lato", sans-serif;
   --third-family: "Comfortaa", sans-serif;
}

.header {
   padding: 0.25rem 0 2rem;
   background: var(--white);
   position: sticky;
   left: 0;
   top: 0;
   height: 100px;
   width: 100%;
   border-bottom: 2px solid var(--dark);
}

.header__body {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.header__navigation {
   display: flex;
   gap: 3rem;
   align-items: center;
}
.header__navigation ul {
   display: flex;
   gap: 1rem;
   align-items: center;
}

.header__logo {
   display: block;
}
.header__logo img {
   width: 90px;
   -o-object-fit: contain;
   object-fit: contain;
}

.header__link {
   font-family: var(--second-family);
   font-weight: 400;
   font-size: 20px;
   color: var(--dark);
}

.header__social {
   display: flex;
   align-items: center;
   gap: 0.25rem;
}

.header__btnblock {
   position: relative;
}
.header__btnblock span {
   display: flex;
   gap: 5px;
   align-items: center;
   right: 0;
   height: -moz-max-content;
   height: max-content;
   position: absolute;
   bottom: -2rem;
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 1rem;
   text-align: center;
   color: var(--red-main);
}
.header__btnblock span:before {
   content: "";
   display: block;
   border-radius: 50%;
   width: 8px;
   height: 8px;
   background: var(--red-main);
   transition: all 0.3s ease;
   animation: glow infinite 1.5s ease;
}

@keyframes glow {
   0% {
      box-shadow: 0 0 0px 0 var(--red-main);
   }
   50% {
      box-shadow: 0 0 10px 0 var(--red-main);
   }
   100% {
      box-shadow: 0 0 0px 0 var(--red-main);
   }
}
.btn {
   transition: all 0.3s ease 0s;
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: -moz-max-content;
   width: max-content;
   padding: 1.25rem 1.5rem;
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 21px;
   text-transform: uppercase;
   text-align: center;
   color: var(--white);
   background: var(--red-main);
   border-radius: 66px;
}

.header__btn {
   padding: 0.7rem 1.5rem;
}

#main {
   position: relative;
   padding: 13rem 0 8rem;
   background: var(--white);
}

.main__clouds {
   width: 100%;
   top: 4rem;
   position: absolute;
}
.main__clouds svg {
   -o-object-fit: contain;
   object-fit: contain;
   display: block;
   position: absolute;
}
.main__clouds svg:nth-child(1) {
   top: 5%;
   left: 10%;
}
.main__clouds svg:nth-child(2) {
   top: 0%;
   left: 30%;
}
.main__clouds svg:nth-child(3) {
   top: 3%;
   left: 50%;
}
.main__clouds svg:nth-child(4) {
   top: 2%;
   left: 70%;
}

.main__body {
   display: flex;
   justify-content: space-between;
   align-items: start;
}

h1 {
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 61px;
   line-height: 110%;
   color: var(--red-main);
}
h1 .text_accent {
   position: relative;
   display: inline-block;
}
h1 .text_accent:before {
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 100%;
   background: var(--red-main);
   opacity: 0.42;
   top: 2px;
   transform: rotate(-7deg);
}
h1 .text_color {
   position: relative;
   display: inline-block;
   z-index: 10;
}

h1 .text_color .before {
   position: absolute;
   top: 1px;
   left: 1px;
   width: max-content;
   width: 100%;
   height: 100%;
   position: absolute;
   color: #921514;
   top: 0px;
   left: 4px;
   z-index: -1;

   color: #2417a9;
}
h1 .text_color:before {
   content: "7 000 ₽ ";
   width: 100%;
   height: 100%;
   position: absolute;
   color: #921514;
   top: 0px;
   left: 4px;
   z-index: -1;
   display: none;
}

#main p {
   margin-top: 2rem;
   font-family: var(--font-family);
   font-weight: 300;
   font-size: 24px;
   line-height: 125%;
   color: #1b1e2e;
}

#quest p {
   line-height: 125%;
}

#pros {
   position: relative;
   padding: 2.5rem 0 7.25rem;
   background: var(--red-main);
}
#pros .container {
   position: relative;
   z-index: 5;
}

.section-cloud {
   width: 100%;
   position: absolute;
   top: -83px;
   display: block;
}
.section-cloud img {
   left: -32px;
   height: 83px;
   -o-object-fit: contain;
   object-fit: contain;
}
.section-cloud {
   z-index: 0;
}

.pros__bg {
   position: absolute;
   z-index: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.pros__bg img {
   position: absolute;
   display: block;
}
.pros__bg .cloud:nth-child(1) {
   top: 4rem;
   left: 5%;
}
.pros__bg .cloud:nth-child(2) {
   left: 50%;
   top: 10rem;
}
.pros__bg .cloud:nth-child(3) {
   right: 10%;
   top: 3rem;
}
.pros__bg .guy:nth-child(4) {
   left: 0%;
   bottom: -40%;
}
.pros__bg .guy:nth-child(5) {
   left: 0%;
   bottom: -10%;
}
.pros__bg .guy:nth-child(6) {
   right: 2%;
   bottom: -5rem;
}
.pros__bg .guy:nth-child(7) {
   right: 0%;
   bottom: 0rem;
}

.title {
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 61px;
   line-height: 110%;
   color: var(--white);
}

#pros h2 .text_accent {
   position: relative;
   display: inline-block;
   z-index: 10;
}
#pros h2 .text_accent:before {
   width: 110%;
   height: 100%;
   top: 2%;
   left: -5%;
   right: 0;
   bottom: 0;
   margin: auto;
   content: "";
   display: block;
   position: absolute;
   background: #1b1e2e;
   border-radius: 100%;
   opacity: 0.28;
   background: var(--dark);
   z-index: 0;
   transform: rotate(-2deg);
}
#pros h2 .text_accent:after {
   width: 100%;
   height: 100%;
   content: "курьером";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 5;
}

.pros__body {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin-top: 3rem;
   gap: 1.25rem;
   row-gap: 2.5rem;
}

.pros__item {
   padding: 2rem 1.25rem;
   background: var(--white);
   border-radius: 24px;
   z-index: 15;
   position: relative;
}
.pros__item > * {
   position: relative;
   z-index: 10;
}
.pros__item:before {
   content: "";
   top: 7px;
   left: 7px;
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 31px;
   background: var(--dark);
   z-index: -1;
}
.pros__item:after {
   content: "";
   top: 0;
   left: 0;
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 24px;
   background: var(--white);
   z-index: 5;
}
.pros__item {
   display: flex;
   gap: 22px;
   align-items: start;
}

.pros__item-image {
   display: block;
   -o-object-fit: contain;
   object-fit: contain;
   height: 4rem;
}

.pros__item-text {
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 1.5rem;
   line-height: 110%;
   color: var(--dark);
}
.pros__item-text span {
   font-weight: 400;
   font-size: 1.2rem;
}

.pros__btn {
   margin-top: 4rem;
   background: var(--white);
   color: var(--dark);
   padding-left: 4rem;
   padding-right: 4rem;
}

#start {
   position: relative;
   background: var(--white);
   padding: 6.25rem 0;
}

.window-wrap {
   position: absolute;
   z-index: 5;
}

#start > img {
   position: absolute;
   display: block;
}
#start .window-wrap:nth-child(1) {
   top: 10%;
   left: 5%;
}
#start .window-wrap:nth-child(2) {
   top: 60%;
   right: 5%;
}

.start__body {
   display: flex;
   gap: 1.25rem;
   align-items: start;
}

.start__title {
   color: var(--dark);
}

#start ul li {
   margin-top: 2rem;
   position: relative;
   z-index: 5;
}
#start ul li:first-child {
   margin-top: 0;
}
#start ul li {
   display: flex;
   gap: 20px;
}
#start ul {
   margin-top: 3.5rem;
   position: relative;
}
#start ul:before {
   content: "";
   width: 2px;
   height: 80%;
   position: absolute;
   display: block;
   left: 43px;
   border-left: 2px dashed var(--dark);
   z-index: 0;
}

.start__item-number {
   width: 88px;
   flex: 0 0 88px;
   height: 88px;
   padding-top: 12px;
   border-radius: 20px;
   background: var(--dark);
   text-align: center;
   font-family: var(--second-family);
   font-weight: 700;
   font-size: 58px;
   line-height: 100%;
   color: #fff;
   background: var(--dark);
}

.start__item-instructblock:hover {
   background: rgba(51, 27, 229, 0.502);
}
.start__item-instructblock {
   cursor: pointer;
   width: 100%;
   padding: 17px 60px 17px 17px;
   background: rgba(47, 27, 229, 0.376);
   transition: all 0.3s ease 0s;
   border-radius: 1.25rem;
   overflow: hidden;
}
.start__item-instructblock.active {
   background: #541be5;
}
.start__item-instructblock.active .start__item-name svg {
   transform: rotate(180deg);
}

.start__item-name {
   position: relative;
}
.start__item-name svg {
   transition: all 0.3s ease 0s;
   width: -moz-max-content;
   width: max-content;
   height: -moz-max-content;
   height: max-content;
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
   right: -27px;
}
.start__item-name {
   font-family: var(--second-family);
   font-weight: 700;
   font-size: 1.5rem;
   color: #fff;
}

.start__item-desc {
   margin-top: 1.25rem;
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 18px;
   color: #fff;
}

.range-container {
   background: var(--red-main);
   position: relative;
   width: 100%;
   height: 32px;
   margin-top: 30px;
}

input[type="range"] {
   transition: all 0.3s ease 0s;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 100%;
   outline: none;
   position: absolute;
   margin: auto;
   top: 0;
   bottom: 0;
   background-color: transparent;
   pointer-events: none;
}

.slider-track {
   width: 100%;
   height: 5px;
   position: absolute;
   margin: auto;
   top: 0;
   bottom: 0;
   border-radius: 5px;
   background: var(--dark);
}

input[type="range"]::-webkit-slider-runnable-track {
   -webkit-appearance: none;
   height: 5px;
   -webkit-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}

input[type="range"]::-moz-range-track {
   -moz-appearance: none;
   height: 5px;
   -moz-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}

input[type="range"]::-ms-track {
   appearance: none;
   height: 5px;
   -ms-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}

input[type="range"]::-webkit-slider-thumb {
   content: var(--hours-val);
   -webkit-appearance: none;
   height: 1.7em;
   width: 1.7em;
   background-color: var(--white);
   cursor: pointer;
   margin-top: -9px;
   pointer-events: auto;
   border-radius: 50%;
   -webkit-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}

input[type="range"]::-moz-range-thumb {
   -webkit-appearance: none;
   height: 1.7em;
   width: 1.7em;
   cursor: pointer;
   border-radius: 50%;
   background-color: var(--red-main);
   pointer-events: auto;
   -moz-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}

input[type="range"]::-ms-thumb {
   appearance: none;
   height: 1.7em;
   width: 1.7em;
   cursor: pointer;
   border-radius: 50%;
   background-color: var(--red-main);
   pointer-events: auto;
   -ms-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}

input[type="range"]:active::-webkit-slider-thumb {
   background-color: var(--red-main);
   border: 3px solid var(--white);
   -webkit-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}

.values {
   background-color: var(--red-main);
   width: 30px;
   position: relative;
   top: 30px;
   padding: 10px 0;
   border-radius: 5px;
   text-align: center;
   font-weight: 500;
   font-size: 25px;
   color: #ffffff;
   margin-left: -3px;
   z-index: 2;
   transition: all 0.3s ease 0s;
   font-family: var(--third-family);
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 100%;
   letter-spacing: 0.02em;
   color: #fff;
}

#price {
   position: relative;
   padding: 6.25rem 0 8rem;
   background: var(--dark);
   transition: all 0.3s ease 0s;
}

.range-container {
   position: relative;
}
.range-container .slider-track:before {
   border-radius: 50%;
   content: "";
   position: absolute;
   display: block;
   height: 22px;
   aspect-ratio: 1/1;
   top: 0;
   bottom: 0;
   margin: auto 0;
   background: var(--dark);
}
.range-container .slider-track:after {
   border-radius: 50%;
   content: "";
   position: absolute;
   display: block;
   height: 22px;
   aspect-ratio: 1/1;
   z-index: 0;
   top: 0;
   bottom: 0;
   margin: auto 0;
   right: 0;
   background: var(--dark);
}

.range-max,
.range-min {
   position: absolute;
   width: 12px;
   top: -20px;
   font-family: var(--third-family);
   font-weight: 700;
   font-size: 1rem;
   line-height: 100%;
   letter-spacing: 0.02em;
   color: #fff;
   z-index: 1;
}

.range-max {
   right: 7px;
}

.range-min {
   left: 7px;
}

.price__item-name {
   font-family: var(--second-family);
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 110%;
   letter-spacing: 0.02em;
   color: #fff;
}

.form-hidden {
   margin-top: 0;
   transition: all 0.3s ease 0s;
   opacity: 0;
   position: relative;
   z-index: -1;
}
.form-hidden.active {
   margin-top: 3rem;
   opacity: 1;
   z-index: 1;
}

.form__item-title {
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 2rem;
   line-height: 110%;
   letter-spacing: 0.02em;
   text-align: center;
   color: #fff;
}

.price__item:first-child {
   margin-top: 2rem;
}

.input-item {
   margin-top: 2rem;
   font-family: var(--third-family);
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 100%;
   letter-spacing: 0.02em;
   color: #fff;
   padding: 14px 10px;
   background: rgba(55, 71, 79, 0.68);
   width: 100%;
   display: block;
   border-radius: 0.62rem;
   margin-top: 1rem;
}

.price-form {
   border-radius: 1.88rem;
   padding: 2rem 1.5rem 3rem;
   background: var(--red-main);
   max-width: 34.5rem;
   height: -moz-max-content;
   height: max-content;
}

.price__title {
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 2.81rem;
   line-height: 110%;
   letter-spacing: 0.02em;
   text-align: center;
   color: #fff;
}

.input {
   margin-top: -30px;
}

.price__item {
   margin-top: 32px;
}

.price-form p {
   margin-top: 1rem;
   font-family: var(--third-family);
   font-weight: 700;
   font-size: 0.88rem;
   line-height: 120%;
   letter-spacing: 0.02em;
   color: #fff;
}
.price-form p a {
   text-decoration: underline;
   -webkit-text-decoration-skip-ink: none;
   text-decoration-skip-ink: none;
   color: #fff;
   transition: all 0.3s ease;
}
.price-form p a:hover {
   color: var(--dark);
}

.price-btn {
   margin-top: 2rem;
   background: var(--white);
   color: var(--dark);
   padding-left: 2rem;
   padding-right: 2rem;
}

#price .container {
   height: 100%;
   position: relative;
   z-index: 5;
}
#price .container > * {
   position: relative;
   z-index: 10;
}
#price .container .bg {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
}
#price .container .price-bg {
   position: absolute;
   display: block;
   bottom: -8rem;
   right: 0;
}
#price .container .price-guy {
   position: absolute;
   display: block;
   bottom: -22rem;
   left: 0;
}

#quest {
   position: relative;
   background: var(--white);
   z-index: 20;
   padding: 6.25rem 0 0;
}
#quest .container {
   position: relative;
   z-index: 5;
}
#quest .container > * {
   position: relative;
   z-index: 10;
}
#quest .container .bg {
   position: absolute;
   width: 100%;
   height: 100%;
}
#quest .container .bg img {
   display: block;
   position: absolute;
   right: -5%;
   top: 10%;
   max-height: 100%;
   -o-object-fit: contain;
   object-fit: contain;
   width: -moz-max-content;
   width: max-content;
}

#quest p {
   margin-top: 1rem;
   font-family: var(--font-family);
   font-weight: 300;
   font-size: 2.38rem;
   color: #1b1e2e;
}

.quest__title {
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 3.94rem;
   color: #1b1e2e;
}

.quest__body {
   margin-top: 4.5rem;
}

.quest__closer {
   cursor: pointer;
   background: rgba(27, 40, 229, 0.6);
}
.quest__closer:hover {
   background: var(--red-main);
}
.quest__closer {
   transition: all 0.3s ease 0s;
   border-radius: 50%;
   width: 44px;
   height: 44px;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
   right: 1rem;
}
.quest__closer:before,
.quest__closer:after {
   content: "";
   position: absolute;
   display: block;
   width: 70%;
   height: 2px;
   background: var(--white);
   margin: auto;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 2px;
}
.quest__closer:after {
   transform: rotate(90deg);
}

.quest__answer {
   margin-left: auto;
   transition: all 0.3s ease 0s;
   opacity: 0;
   margin-top: 0;
   padding: 1.5rem;
   max-width: 90%;
   border-radius: 1.25rem;
   background: var(--red-main);
   font-family: var(--font-family);
   font-weight: 400;
   line-height: 120%;
   font-size: 1.5rem;
   color: #fff;
}

.quest__question {
   max-width: 90%;
   border-radius: 1.25rem;
   padding: 1.5rem;
   padding-right: 70px;
   position: relative;
   background: var(--dark);
   font-family: var(--font-family);
   font-weight: 500;
   font-size: 1.5rem;
   color: #fff;
}

.quest__item {
   margin-top: 1.5rem;
   max-width: 40rem;
}
.quest__item:first-child {
   margin-top: 0;
}
.quest__item.active .quest__closer {
   transform: rotate(45deg);
}
.quest__item.active .quest__answer {
   opacity: 1;
   margin-top: 1rem;
}

#more {
   position: relative;
   background: var(--white);
   padding: 5rem 0 0;
}

textarea {
   resize: vertical;
}

.more__body {
   display: flex;
   align-items: start;
   gap: 20px;
}

.more__form {
   margin-top: 5rem;
}

#more {
   padding-bottom: 9rem;
}
#more p {
   margin-top: 1.25rem;
   font-family: var(--font-family);
   font-weight: 300;
   font-size: 1.5rem;
   color: #1b1e2e;
}

.more__title {
   font-family: var(--font-family);
   font-weight: 500;
   font-size: 3rem;
   color: #1b1e2e;
}

.more__item {
   margin-top: 1rem;
}
.more__item:first-child {
   margin-top: 2rem;
}

#more .policy {
   margin-top: 1.125rem;
   font-family: var(--third-family);
   font-weight: 700;
   font-size: 0.88rem;
   line-height: 100%;
   letter-spacing: 0.02em;
   color: var(--dark);
}
#more .policy a {
   color: var(--dark);
   text-decoration: underline;
   -webkit-text-decoration-skip-ink: none;
   text-decoration-skip-ink: none;
   transition: all 0.3s ease;
}
#more .policy a:hover {
   color: var(--red-main);
}

.more__item-name {
   font-family: var(--third-family);
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 100%;
   letter-spacing: 0.02em;
   color: var(--dark);
}

.more__btn {
   background: var(--red-main);
   color: var(--white);
   margin-top: 2rem;
   margin-left: 0;
   padding-right: 3.5rem;
   padding-left: 3.5rem;
}

#offer {
   position: relative;
   background: var(--red-main);
}
#offer .container {
   position: relative;
   z-index: 20;
}

.offer__body {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.offer__form {
   position: relative;
   z-index: 20;
   border-radius: 1.88rem;
   flex: 0 0 35rem;
   padding: 4.125rem 1.5rem 4.5rem;
   background: var(--white);
}
.offer__form p {
   margin-top: 1rem;
   font-family: var(--third-family);
   font-weight: 700;
   font-size: 0.88rem;
   line-height: 100%;
   letter-spacing: 0.02em;
   color: var(--dark);
}
.offer__form p a {
   color: var(--dark);
   transition: all 0.3s ease 0s;
   text-decoration: underline;
   -webkit-text-decoration-skip-ink: none;
   text-decoration-skip-ink: none;
}
.offer__form p a:hover {
   color: var(--red-main);
}

.offer__title {
   font-family: var(--second-family);
   font-weight: 700;
   font-size: 2rem;
   line-height: 110%;
   letter-spacing: 0.02em;
   color: var(--dark);
}

.offer__item {
   margin-top: 1.5rem;
}
.offer__item:first-child {
   margin-top: 2rem;
}

.offer__item-name {
   font-family: var(--third-family);
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 100%;
   letter-spacing: 0.02em;
   color: var(--dark);
}

#offer {
   padding: 6.25rem 0 2.5rem;
}

.offer__btn {
   margin-top: 2rem;
   padding-left: 3rem;
   padding-right: 3rem;
}

.location-icon {
   position: absolute;
   display: block;
}

.loc-1 {
   top: 40%;
   left: -15rem;
}

.offer__form {
   position: relative;
}
.offer__form * {
   position: relative;
   z-index: 5;
}
.offer__form .location-icon {
   position: absolute;
   display: block;
}
.offer__form:after {
   content: "";
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: 1.88rem;
   z-index: 1;
   background: var(--white);
}
.offer__form:before {
   content: "";
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 10px;
   left: 10px;
   background: var(--dark);
   border-radius: calc(1.88rem + 10px);
   z-index: 0;
}

.loc-2 {
   right: -10rem;
   top: -25%;
}

.loc-3 {
   right: -10rem;
   top: 80%;
}

.footer {
   padding: 2rem 0 6rem;
   background: var(--dark);
}

.footer__body {
   display: flex;
   justify-content: space-between;
}

.footer__block {
   display: flex;
   align-items: start;
   gap: 4rem;
}
.footer__block ul li {
   margin-top: 1rem;
}
.footer__block ul li:first-child {
   margin-top: 0;
}

.footer__link {
   font-family: var(--second-family);
   font-weight: 400;
   font-size: 1.25rem;
   color: var(--white);
}

.footer__infoblock {
   display: block;
}
.footer__infoblock .footer__link {
   margin-top: 1rem;
   display: block;
   margin-left: auto;
   width: -moz-max-content;
   width: max-content;
}

.comment {
   position: absolute;
   display: block;
}

.comment-1 {
   top: 10%;
   left: 2%;
}

.comment-2 {
   top: 50%;
   left: 1%;
   transform: scaleX(-1);
}

.comment-3 {
   top: 15%;
   right: 1%;
   transform: scaleX(-1);
}

.comment-4 {
   bottom: 10%;
   right: 3%;
   transform: scaleX(-1);
   z-index: 4;
}

.comment-5 {
   top: 5%;
   left: 3%;
   transform: scaleX(-1);
}

.comment-6 {
   top: 9%;
   right: 3%;
}

.comment-7 {
   bottom: 15%;
   left: 3%;
}

.comment-8 {
   bottom: 25%;
   right: 5%;
}

.header__btn:hover,
.more__btn:hover,
.offer__btn:hover {
   background: var(--dark);
   color: var(--white);
}

.pros__btn:hover,
.price-btn:hover {
   background: var(--dark);
   color: var(--white);
}

.wa path,
.tg path {
   transition: all 0.3s ease;
}
.wa svg:hover .red,
.tg svg:hover .red {
   fill: var(--dark);
}

.wa path,
.tg path {
   transition: all 0.3s ease;
}
.wa svg:hover .red,
.tg svg:hover .red {
   fill: var(--dark);
}

.footer .wa path,
.footer .tg path {
   transition: all 0.3s ease;
}
.footer .wa svg:hover path,
.footer .tg svg:hover path {
   fill: var(--dark);
}
.footer .wa svg:hover .red,
.footer .tg svg:hover .red {
   fill: var(--white);
}
.footer .header__btn:hover {
   background: var(--white);
   color: var(--dark);
}

.header {
   position: sticky;
   top: 0;
   z-index: 100;
   width: 100%;
}

.header__link,
.footer__link {
   transition: all 0.3s ease 0s;
}
.header__link:hover,
.footer__link:hover {
   color: var(--red-main);
}

.main__btn {
   margin-top: 2rem;
   margin-left: 0;
   background: var(--red-main);
   color: var(--white);
} /*# sourceMappingURL=style.css.map */

.footer__logo {
   flex: 0 0 100px;
   width: 100px;
   height: 100px;
}
.footer__logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}
.footer__text * {
   text-align: right;
}
.footer__text {
   display: block;
   font-family: var(--font-family);
   color: #fff;
   line-height: 120%;
   margin-top: 10px;
   text-align: right;
}

.footer__text:first-child {
   margin-top: 0;
}