@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;
}

:root {
   --white: #f4f4f4;
   --grey: #bbb;
   --black: #2b2323;
   --blackrgba: #3f3f3f;
   --blackrgbatrans: #3f3f3f00;
   --accent: #e93c3c;
   --accent-hover: #ffa5a5;
}

:root {
   --font-family: "Manrope", sans-serif;
   --second-family: "Onest", sans-serif;
}

img {
   pointer-events: none;
}

html {
   font-size: 16px;
   background: var(--white);
}

.container {
   margin-left: auto;
   margin-right: auto;
   max-width: 1440px;
   padding-left: 20px;
   padding-right: 20px;
}

section {
   padding-top: 100px;
   padding-bottom: 100px;
}

.hero {
   padding-top: 200px;
   padding-bottom: 100px;
   min-height: 100vh;
   position: relative;
}
.hero .container {
   position: relative;
   z-index: 10;
}

.header .burger {
   display: none;
}

.hero__bg:before {
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
   background: white;
   mix-blend-mode: hue;
   opacity: 1;
   position: absolute;
}
.hero__bg:after {
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
   background: rgba(48, 48, 48, 0.89);
   opacity: 0.65;
   position: absolute;
}
.hero__bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.hero__bg img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   display: block;
   -o-object-position: right center;
   object-position: right center;
}

.hero__title {
   max-width: 850px;
   font-family: var(--second-family);
   font-weight: 700;
   font-size: 3.5rem;
   line-height: 110%;
   color: var(--white);
}
.hero__title strong {
   color: var(--accent);
}

.hero__desc {
   font-family: var(--font-family);
   font-weight: 300;
   font-size: 1.5rem;
   line-height: 110%;
   color: var(--white);
   margin-top: 52px;
   max-width: 900px;
}

.btn {
   width: -moz-max-content;
   width: max-content;
   min-width: 450px;
   display: flex;
   justify-content: center;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
   color: var(--white);
   border: 1px solid var(--white);
   font-family: var(--second-family);
   font-weight: 400;
   font-size: 1.5rem;
   line-height: 100%;
   color: var(--white);
}

.hero__wrapper-btn {
   max-width: 600px;
   margin-top: 100px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
}

.hero__btn {
   min-width: 0;
   width: 100%;
}
.hero__btn.active {
   background: var(--white);
   color: var(--black);
}

@keyframes rotate45 {
   0% {
      transform: rotate(45deg);
   }
   100% {
      transform: rotate(405deg);
   }
}
@keyframes rotate0 {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
@keyframes float {
   0% {
      margin-bottom: 0;
   }
   50% {
      margin-bottom: 20px;
   }
   100% {
      margin-bottom: 0;
   }
}
.rect-icon {
   display: block;
   transform: rotate(45deg);
}
.rect-icon.i-1 {
   animation: rotate45 ease 2.5s 0s infinite;
   width: 64%;
   height: 64%;
}
.rect-icon.i-2 {
   animation: rotate45 ease 2.5s 0.1s infinite;
   width: 40%;
   height: 40%;
}
.rect-icon.i-3 {
   animation: rotate45 ease 2.5s 0.3s infinite;
   width: 20%;
   height: 20%;
}

.rect-wrap {
   animation: float ease 2.5s 0s infinite;
   position: relative;
   width: 200px;
   height: 200px;
   position: absolute;
   bottom: 0;
   right: 5%;
   z-index: 15;
   bottom: -50px;
}

.hero .rect-icon {
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   position: absolute;
   border: 1px solid var(--white);
}
.hero .rect-icon .rect-icon {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   transform: none;
}
.pros__wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
   justify-content: end;
}

.pros__item {
   min-height: 277px;
   padding: 24px;
   flex: 0 0 calc(33.333% - 1.5rem);
}
.pros__item:nth-child(3) {
   flex: 0 0 calc(25% - 1rem);
   margin-right: calc(8.333% - 0.5rem);
}
.pros__item:nth-child(4) {
   flex: 0 0 40%;
}
.pros__item {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background: #e0e0e0;
   position: relative;
}
.pros__item:nth-child(1):before {
   content: "";
   display: block;
   position: absolute;
   width: 200px;
   height: 200px;
   bottom: -100px;
   right: -100px;
   border: 1px solid var(--black);
   transform: rotate(45deg);
   animation: float ease 2.5s 0.1s infinite;
   z-index: -1;
}
.pros__item:nth-child(1):after {
   content: "";
   display: block;
   position: absolute;
   width: 100px;
   height: 100px;
   bottom: -50px;
   right: -50px;
   border: 1px solid var(--black);
   transform: rotate(45deg);
   animation: float ease 2.5s 0.2s infinite;
   z-index: -1;
}
.pros__item:nth-child(3) {
   position: relative;
   z-index: 10;
}
.pros__item:nth-child(3):after {
   background: #e0e0e0;
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   animation: float ease 2.5s 0.3s infinite;
   z-index: 0;
}
.pros__item:nth-child(3) * {
   position: relative;
   z-index: 5;
}
.pros__item:nth-child(3):before {
   content: "";
   display: block;
   position: absolute;
   width: 90px;
   height: 90px;
   bottom: -45px;
   right: -45px;
   border: 1px solid var(--black);
   transform: rotate(45deg);
   animation: float ease 2.5s 0.4s infinite;
   z-index: -1;
}
.pros__item:nth-child(5):before {
   content: "";
   width: 40px;
   height: 40px;
   bottom: -20px;
   left: -20px;
   border: 1px solid var(--black);
   position: absolute;
   display: block;
   animation: float ease 2.5s 0.5s infinite;
   transform: rotate(45deg);
}

.pros:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
   bottom: -50px;
   transform: rotate(45deg);
   border: 1px solid var(--black);
   position: absolute;
   bottom: -50px;
   left: 0;
   right: 0;
   margin: auto;
   animation: float ease 2.5s 0.6s infinite;
}

.pros__wrapper-item {
   display: flex;
   justify-content: space-between;
   align-items: start;
   gap: 1rem;
}

.pros__title {
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 110%;
   color: var(--black);
}
.pros__title strong {
   display: block;
   color: var(--accent);
}

.pros__icon {
   display: block;
   flex: 0 0 3rem;
}

.pros__desc {
   max-width: 280px;
   margin-left: auto;
   margin-right: 0;
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 1rem;
   line-height: 110%;
   text-align: right;
   color: var(--black);
}

.pros {
   position: relative;
   z-index: 10;
}
.pros .container {
   position: relative;
   z-index: 5;
}

.lines-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.lines-bg img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: bottom;
   object-position: bottom;
}

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

.titlelbock {
   position: relative;
}

.faq__titleblock span,
.catalog__titleblock span,
.contacts__titleblock span {
   display: block;
   width: 110px;
   word-break: break-all;
   overflow-wrap: break-all;
}
.faq__titleblock,
.catalog__titleblock,
.contacts__titleblock {
   font-family: var(--second-family);
   font-weight: 900;
   font-size: 2.88rem;
   line-height: 100%;
   text-transform: uppercase;
   color: var(--accent);
}
.faq__titleblock span:last-child,
.catalog__titleblock span:last-child,
.contacts__titleblock span:last-child {
   position: absolute;
   top: 20px;
   left: 80px;
   color: var(--black);
}
.faq__titleblock span:first-child,
.catalog__titleblock span:first-child,
.contacts__titleblock span:first-child {
   position: static;
}

.catalog__titleblock span {
   width: 130px;
   color: var(--accent) !important;
}

.faq__title {
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 100%;
   text-transform: uppercase;
   color: #000;
   text-align: right;
   max-width: 250px;
}

.faq__item {
   z-index: 15;
   transition: all 0.3s ease;
   cursor: pointer;
   position: relative;
   padding: 24px 2rem;
   background: var(--black);
   color: var(--white);
   border: 1px solid var(--black);
}
.faq__item.active {
   background: var(--white);
}
.faq__item.active .faq__quest {
   color: var(--black);
}
.faq__item.active .faq__quest .exit:before,
.faq__item.active .faq__quest .exit::after {
   transition: all 0.6s ease;
   border: 1px solid var(--accent);
}
.faq__item.active .faq__quest .exit:before {
   transform: rotate(405deg);
}
.faq__item.active .faq__quest .exit:after {
   transform: rotate(-405deg);
}
.faq__item.active .faq__answer {
   padding-top: 12px;
   color: var(--black);
}

.faq__wrapper-body {
   margin-top: 4rem;
}

.faq__quest {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1.5rem;
   font-family: var(--second-family);
   font-weight: 400;
   font-size: 1.63rem;
   color: #fff;
   transition: all 0.3s ease;
}
.faq__quest .exit {
   width: 54px;
   height: 54px;
   flex: 0 0 54px;
   position: relative;
}
.faq__quest .exit:before {
   transform: rotate(45deg);
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   border: 1px solid var(--white);
   width: 70%;
   height: 70%;
   transition: all 0.3s ease;
}
.faq__quest .exit:after {
   transform: rotate(45deg);
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   border: 1px solid var(--white);
   width: 35%;
   height: 35%;
   transition: all 0.3s ease;
}

.faq__answer {
   overflow: hidden;
   transition: all 0.3s ease;
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 1rem;
   line-height: 130%;
   color: var(--white);
   padding-top: 0;
   height: auto;
}

.faq__wrapper-body {
   display: flex;
   align-items: stretch;
}

.faq__body {
   flex: 0 0 70%;
}

.faq__item {
   margin-top: 24px;
}
.faq__item:first-child {
   margin-top: 0;
}

.faq__icons {
   position: relative;
   flex: 0 0 33%;
}

.faq {
   overflow: hidden;
}

.faq__icon {
   display: block;
   width: 200px;
   height: 200px;
   position: absolute;
   margin: auto;
   border: 1px solid var(--black);
   transform: rotate(45deg);
}

.faq-i-1 {
   top: 0;
   right: -100px;
}

.faq-i-2 {
   bottom: 0;
   right: -100px;
}

.faq-i-3 {
   bottom: 0;
   top: 0;
   margin: auto;
   right: -60px;
   width: 120px;
   height: 120px;
}

.faq-i-4 {
   right: 30%;
   top: 5%;
   width: 150px;
   height: 150px;
}

.faq-i-5 {
   top: 10%;
   width: 50px;
   height: 50px;
   left: 20%;
}

.faq-i-6 {
   left: -75px;
   bottom: 0;
   top: 0;
   margin: auto;
}

.formblock__wrapper {
   display: grid;
   grid-template-columns: 2fr 1fr;
   align-items: center;
   gap: 2rem;
}

.formblock__images {
   position: relative;
   min-height: 700px;
}
.formblock__images .formblock__image {
   position: absolute;
   width: 50%;
   height: 50%;
   min-height: 320px;
}
.formblock__images .formblock__image.active:before {
   opacity: 0;
}
.formblock__images .formblock__image img {
   width: 100%;
   height: 100%;
   display: block;
   -o-object-fit: cover;
   object-fit: cover;
}
.formblock__images .formblock__image:before {
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   background: var(--white);
   mix-blend-mode: hue;
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.3s ease;
}
.formblock__images .formblock__image:nth-child(1) {
   top: 0;
   left: 0;
   z-index: 10;
   width: 40%;
   z-index: 1;
   transform: translate(0, 0);
}
.formblock__images .formblock__image:nth-child(2) {
   top: 0;
   left: 0;
   bottom: 0;
   margin: auto;
   width: 90%;
   height: 60%;
   z-index: 0;
   transform: translate(25%, 25%);
}
.formblock__images .formblock__image:nth-child(3) {
   top: 0;
   left: 0;
   width: 30%;
   z-index: 2;
   transform: translate(240%, 0%);
}
.formblock__images .formblock__image:nth-child(4) {
   top: 0;
   left: 0;
   width: 20%;
   height: 20%;
   z-index: 3;
   transform: translate(0%, 100%);
}
.formblock__images .formblock__cursor {
   position: absolute;
   margin: auto;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: var(--accent);
   top: 0;
   mix-blend-mode: multiply;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 20;
   transition:
      width 0.3s ease,
      height 0.3s ease;
   cursor: pointer;
}
.formblock__images .formblock__cursor.active {
   width: 75px;
   height: 75px;
   cursor: grab;
}

.formblock__container {
   display: flex;
   justify-content: end;
}

.formblock__title {
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.69rem;
   color: var(--black);
}

.formblock__input:first-of-type {
   margin-top: 2rem;
}
.formblock__input {
   margin-top: 24px;
}
.formblock__input input,
.formblock__input textarea {
   background: transparent;
   resize: vertical;
   margin-top: 10px;
   display: block;
   width: 100%;
   padding: 1rem;
   border: 1px solid var(--black);
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 1.13rem;
   color: var(--black);
}

.formblock__label {
   display: flex;
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.25rem;
   color: var(--black);
}

.req {
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.25rem;
   color: var(--accent);
}

.formblock__agreement {
   margin-top: 1.5rem;
   display: flex;
   align-items: start;
   gap: 10px;
}
.formblock__agreement .check {
   cursor: pointer;
   width: 24px;
   height: 24px;
   flex: 0 0 24px;
   transition: all 0.3s ease;
   border: 1px solid var(--black);
}
.formblock__agreement p {
   font-family: var(--font-family);
   font-weight: 300;
   font-size: 0.75rem;
   color: var(--black);
   opacity: 0.6;
}

.formblock__btn {
   background: var(--black);
   color: var(--white);
   width: 100%;
   margin-top: 3.5rem;
}

.formblock__form {
   height: -moz-max-content;
   height: max-content;
   padding: 2rem;
   border: 1px solid var(--black);
}

.header {
   top: 0;
   left: 0;
   width: 100%;
   padding-top: 1rem;
   padding-bottom: 1rem;
   z-index: 100;
   position: sticky;
   background: var(--white);
   transition: all 0.3s ease;
}
.header .burger:after,
.header .burger:before,
.header .burger span {
   background: var(--black);
}
.header.is-fixed {
   position: fixed;
   background: transparent;
}
.header.is-fixed .burger:after,
.header.is-fixed .burger:before,
.header.is-fixed .burger span {
   background: var(--white);
}
.header.is-fixed .header__link {
   color: var(--white);
}
.header.is-fixed .header__phone {
   color: var(--white);
}
.header.is-fixed .header__btn {
   color: var(--white);
   border-color: var(--white);
}
.header.is-scrolled {
   background: var(--white);
}
.header.is-scrolled .header__link {
   color: var(--black);
}
.header.is-scrolled .header__phone {
   color: var(--black);
}
.header.is-scrolled .header__btn {
   color: var(--black);
   border-color: var(--black);
}
.header.is-scrolled .burger:after,
.header.is-scrolled .burger:before,
.header.is-scrolled .burger span {
   background: var(--black);
}

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

.header-left {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   justify-content: space-between;
}

.header__logo {
   display: block;
}
.header__logo img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: contain;
   object-fit: contain;
}
.header__logo {
   height: 4rem;
}

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

.header__link {
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 1rem;
   color: var(--black);
}

.header-right {
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.header__btn {
   width: -moz-max-content;
   width: max-content;
   padding: 10px 20px;
   min-width: 0;
   font-size: 1rem;
   transition: all 0.3s ease;
}

.header__phone {
   transition: all 0.3s ease;
   color: var(--white);
   font-family: var(--font-family);
   font-size: 12px;
}

.footer {
   overflow: hidden;
   background: var(--black);
   position: relative;
   padding-top: 3rem;
   padding-bottom: 4rem;
   color: var(--white);
}

.footer__bg {
   pointer-events: none;
   position: absolute;
   width: 75%;
   height: 100%;
   right: 0;
   top: 0;
}
.footer__bg img {
   -o-object-fit: cover;
   object-fit: cover;
   width: 100%;
   height: 100%;
   display: block;
   -o-object-position: left;
   object-position: left;
}

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

.footer__left {
   align-items: start;
}

.footer__logo {
   display: block;
   height: 3rem;
   width: -moz-max-content;
   width: max-content;
}
.footer__logo img {
   -o-object-fit: contain;
   object-fit: contain;
   display: block;
   width: 100%;
   height: 100%;
}

.footer__link {
   display: block;
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.13rem;
   letter-spacing: 0.02em;
   color: #fff;
   margin-top: 1rem;
}
.footer__link:first-of-type {
   margin-top: 0;
}

.footer__icons {
   position: relative;
   width: 200px;
   margin-top: 1.5rem;
   height: 150px;
}

.footer-icon {
   position: absolute;
   width: 100px;
   height: 100px;
   display: block;
   border: 1px solid var(--white);
   transform: rotate(45deg);
   margin: auto;
}

.footer-i-1 {
   top: 14%;
   left: 7%;
}

.footer-i-2 {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 50px;
   height: 50px;
   transform: rotate(0);
}

.footer-i-3 {
   top: 14%;
   right: 7%;
}

.footer__right {
   display: flex;
   gap: 2rem;
}

.footer__title {
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.25rem;
   color: #fff;
}

.footer__menu ul,
.footer__cats ul {
   margin-top: 1.5rem;
}
.footer__menu ul li,
.footer__cats ul li {
   margin-top: 1rem;
}
.footer__menu ul li:first-child,
.footer__cats ul li:first-child {
   margin-top: 0;
}
.footer__menu ul li .footer__link,
.footer__cats ul li .footer__link {
   font-family: var(--second-family);
   font-weight: 400;
   font-size: 1.13rem;
   color: #fff;
   opacity: 0.75;
}

.footer__down {
   margin-top: 4rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

.footer__item-down {
   font-family: var(--second-family);
   font-weight: 400;
   font-size: 12px;
   color: #fff;
   opacity: 0.6;
}

.porthero {
   padding-bottom: 40px;
   position: relative;
   min-height: 100vh;
}
.porthero:after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--black);
   opacity: 0.5;
   z-index: 5;
   pointer-events: none;
}
.porthero .container {
   position: relative;
   z-index: 10;
   height: calc(100vh - 140px);
}

.porthero__bg:before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--black);
   z-index: 10;
   opacity: 0.25;
}
.porthero__bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.porthero__bg > img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}

.porthero__swiper {
   height: 100%;
}

.swiper-slide img {
   pointer-events: auto;
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}

.porthero__wrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding-top: 2rem;
   padding-bottom: 2rem;
}

.porthero__wrapper-title {
   display: flex;
   justify-content: space-between;
   align-items: start;
   gap: 1rem;
}

.porthero__title {
   flex: 0 0 750px;
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 3.38rem;
   line-height: 140%;
   max-width: 750px;
   color: var(--white);
}

.porthero__cats {
   margin-top: 20px;
   display: flex;
   gap: 10px;
}

.porthero__term {
   flex: 0 0 auto;
   border: 1px solid var(--white);
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 12px;
   padding: 10px;
   color: #fff;
}

.porthero__desc-wrapper {
   margin-top: 52px;
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 2rem;
}

.porther__desc-block {
   display: flex;
   justify-content: space-between;
   align-items: end;
}

.porthero__desc {
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 1.13rem;
   line-height: 120%;
   letter-spacing: 0.02em;
   text-align: left;
   color: var(--white);
   flex: 0 0 400px;
}

.porthero__swiper-navigation {
   position: relative;
   display: flex;
   align-items: center;
   gap: 1.5rem;
}
.porthero__swiper-navigation .swiper-button-next,
.porthero__swiper-navigation .swiper-button-prev {
   width: 3rem;
   height: 3rem;
   flex: 0 0 3rem;
   transform: rotate(45deg);
   border: 1px solid var(--white);
   position: static;
   left: 0;
   right: auto;
   margin: 0;
}
.porthero__swiper-navigation .swiper-button-next:after,
.porthero__swiper-navigation .swiper-button-prev:after {
   display: none;
}
.porthero__swiper-navigation .swiper-button-next svg,
.porthero__swiper-navigation .swiper-button-prev svg {
   transform: rotate(-45deg);
   width: 24px;
   -o-object-fit: contain;
   object-fit: contain;
}
.porthero__swiper-navigation .swiper-button-next svg {
   transform: rotate(135deg);
   width: 24px;
   -o-object-fit: contain;
   object-fit: contain;
}
.porthero__swiper-navigation .swiper-pagination {
   position: static;
   margin: 0;
   display: flex;
   align-items: center;
   gap: 10px;
}
.porthero__swiper-navigation .swiper-pagination .swiper-pagination-bullet {
   margin: 0 !important;
   width: 10px;
   height: 10px;
   background: var(--white);
   flex: 0 0 10px;
   border-radius: 0;
   opacity: 1;
   transition: all 0.3s ease;
   position: relative;
}
.porthero__swiper-navigation .swiper-pagination .swiper-pagination-bullet:before {
   content: "";
   width: 0;
   height: 100%;
   background: var(--accent);
   position: absolute;
   top: 0;
   left: 0;
   display: block;
}
.porthero__swiper-navigation .swiper-pagination .swiper-pagination-bullet-active {
   height: 10px;
   flex: 0 0 2rem;
   width: 2rem;
}
.porthero__swiper-navigation .swiper-pagination .swiper-pagination-bullet-active:before {
   width: 100%;
   transition: all 5s linear;
}

.article__wrapper {
   display: flex;
   justify-content: space-between;
   align-items: start;
   gap: 2rem;
}

.article__info {
   height: -moz-max-content;
   height: max-content;
   flex: 0 0 25%;
   width: 100%;
   position: sticky;
   top: 0;
   left: 0;
}

.article__item-info {
   margin-top: 1.5rem;
}
.article__item-info:first-child {
   margin-top: 0;
}
.article__item-info .key {
   font-family: var(--font-family);
   font-weight: 500;
   font-size: 12px;
   color: var(--grey);
}
.article__item-info .value {
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 1rem;
   color: var(--black);
   margin-top: 10px;
}

.article__body {
   flex: 1 1 75%;
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 1rem;
   line-height: 130%;
   text-align: justify;
   color: #000;
}
.article__body > * {
   margin-top: 1rem;
}
.article__body > *:first-child {
   margin-top: 0;
}
.article__body ul li {
   position: relative;
   opacity: 0.5;
}
.article__body ul li:first-child {
   margin-top: 0;
}
.article__body ul li {
   margin-top: 1rem;
   padding-left: 10px;
}
.article__body ul li:before {
   content: "";
   display: block;
   position: absolute;
   top: 10px;
   left: 0;
   background: var(--black);
   width: 4px;
   height: 4px;
   border-radius: 50%;
}
.article__body p {
   opacity: 0.5;
}
.article__body p:has(img) {
   opacity: 1;
}
.article__body p:has(img) img {
   margin: 0;
}
.article__body p:has(img) {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}
.article__body p:has(img) img {
   flex: 1 1 calc(33.333% - 1rem);
}
.article__body img {
   display: block;
   width: 100%;
   -o-object-fit: contain;
   object-fit: contain;
   height: auto;
   max-height: 75vh;
}

.more {
   padding-top: 10px;
}

.more__title {
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 2.5rem;
   line-height: 110%;
   color: var(--black);
}

.more__wrapper {
   margin-top: 52px;
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
}

.portfolio__body {
   margin-top: 52px;
}

.catalog__body,
.portfolio__body {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   align-items: stretch;
}

.portfolio-item {
   height: auto;
   position: relative;
   flex: 0 0 calc(25% - 0.75rem);
}
.portfolio-item:hover .portfolio-wrap:hover:before {
   opacity: 0.25;
}
.portfolio-item:hover .portfolio-wrap:hover .portfolio-cats span {
   background: var(--white);
   color: var(--black);
}

.portfolio-wrap {
   height: 100%;
   padding: 20px;
}
.portfolio-wrap:before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--black);
   opacity: 0.5;
   z-index: 1;
   transition: all 0.3s ease;
}
.portfolio-wrap {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
}
.portfolio-wrap img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
}

.portfolio-name {
   position: relative;
   z-index: 5;
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.25rem;
   line-height: 120%;
   color: var(--white);
}

.portfolio-cats {
   margin-top: 1rem;
   position: relative;
   z-index: 5;
   font-family: var(--font-family);
   font-weight: 500;
   font-size: 12px;
   color: var(--white);
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}
.portfolio-cats span {
   transition: all 0.3s ease;
   display: block;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 15px;
   padding-right: 15px;
   border: 1px solid var(--white);
   width: -moz-max-content;
   width: max-content;
}

.header__link {
   color: var(--black);
}

.header__phone {
   color: var(--black);
}

.header__btn {
   color: var(--black);
   border-color: var(--black);
}

.catalog__body {
   margin-top: 2rem;
}

.catalog__cats {
   margin-top: 52px;
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.catalog__cat {
   padding: 1rem 20px;
   border: 1px solid var(--black);
   color: var(--black);
   font-family: var(--font-family);
   transition: all 0.3s ease;
}
.catalog__cat.active {
   background: var(--black);
   color: var(--white);
}

.catalog__title {
   font-family: var(--second-family);
   font-weight: 700;
   font-size: 1.5rem;
   line-height: 100%;
   letter-spacing: 0.03em;
   text-transform: uppercase;
   color: var(--grey);
}

.catalog__subtitle {
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 100%;
   letter-spacing: 0.03em;
   text-transform: uppercase;
   color: #000;
   max-width: 320px;
   flex: 0 0 320px;
   text-align: right;
   align-items: end;
   justify-content: end;
}

.catalog__wrapper {
   display: flex;
   justify-content: space-between;
   align-items: start;
}
.catalog__wrapper div {
   display: flex;
   align-items: start;
   gap: 2rem;
}

section.catalog,
section.contacts {
   padding-top: 3rem;
}

.contacts__wrapper {
   display: flex;
   gap: 2rem;
   justify-content: space-between;
   align-items: start;
}
.contacts__wrapper div {
   display: flex;
   gap: 2rem;
}

.contacts__titleblock span {
   width: 110px;
   flex: 0 0 110px;
   color: var(--accent) !important;
}

.contacts__title {
   font-family: var(--second-family);
   font-weight: 700;
   font-size: 1.5rem;
   line-height: 100%;
   letter-spacing: 0.03em;
   text-transform: uppercase;
   color: var(--grey);
}

.contacts__subtitle {
   font-family: var(--second-family);
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 100%;
   letter-spacing: 0.03em;
   text-transform: uppercase;
   color: #000;
   text-align: right;
   max-width: 210px;
}

.contacts__body {
   margin-top: 52px;
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 2rem;
}

.contacts__info {
   display: flex;
   flex-direction: column;
   height: 100%;
}
.contacts__info > div {
   flex: 0 0 auto;
}

.contacts__item {
   margin-top: 20px;
}
.contacts__item:first-child {
   margin-top: 0;
}
.contacts__item {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.contacts__icon {
   width: 24px;
   flex: 0 0 24px;
   height: 24px;
   opacity: 0.75;
}
.contacts__icon svg {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: contain;
   object-fit: contain;
}

.contacts__link {
   font-family: var(--font-family);
   font-weight: 500;
   font-size: 1.25rem;
   line-height: 130%;
   color: var(--black);
   opacity: 0.6;
   transition: all 0.3s ease;
}
.contacts__link:hover {
   opacity: 1;
}

.--addres {
   align-items: start;
}

.contacts__map {
   flex: 1 1 auto !important;
   margin-top: 2rem;
   position: relative;
   height: auto;
   min-height: 400px;
}
.contacts__map iframe {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
}

.article__documents {
   margin-top: 52px;
   padding: 3rem 2rem;
   background: #fff;
}

.article__title {
   font-family: var(--second-family);
   font-size: 1.5rem;
   font-weight: 600;
   line-height: 120%;
}

.article__docs {
   margin-top: 2rem;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
}

.article__doc {
   padding: 1.25rem 1rem;
   display: flex;
   align-items: center;
   gap: 10px;
   border: 1px solid var(--black);
   align-items: center;
   justify-content: center;
   text-align: left;
}
.article__doc img {
   display: block;
   width: 1.5rem;
   height: 1.5rem;
   flex: 0 0 1.5rem;
   -o-object-fit: contain;
   object-fit: contain;
}
.article__doc span {
   font-size: 1.2rem;
   line-height: 120%;
   font-family: var(--font-family);
   color: var(--black);
}

.header__mobile {
   position: fixed;
   top: -100%;
   left: 0;
   width: 100%;
   height: 100%;
   transition: all 0.3s ease;
   z-index: 80;
   background: var(--white);
}
.header__mobile .header__phone {
   margin-top: 2rem;
   display: block;
   font-size: 1.5rem;
   font-weight: 600;
   font-family: var(--font-family);
}
.header__mobile .header__link {
   font-size: 20px;
}
.header__mobile .header__btn {
   margin-top: 20px;
   width: 100%;
   max-width: 100%;
   font-size: 20px;
}
.header__mobile .header__menu ul {
   display: block;
}
.header__mobile .header__menu ul li {
   margin-top: 1.25rem;
}
.header__mobile .header__menu ul li:first-child {
   margin-top: 0;
}
.header__mobile.active {
   top: 0;
}

.header .burger:after,
.header .burger:before,
.header .burger span {
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
}

.header.active .header__link,
.header.active .header__phone {
   color: var(--black);
}
.header.active .header__btn {
   border-color: var(--black);
   color: var(--black);
}
.header.active .burger.active:after,
.header.active .burger.active:before {
   background: var(--black);
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
}
.header.active .burger.active:after {
   transform: rotate(45deg);
   top: 11px;
}
.header.active .burger.active:before {
   top: 11px;
   transform: rotate(-45deg);
}
.header.active .burger.active span {
   width: 0;
   background: var(--black);
}

.mobile-view {
   display: none;
}

.catalog__cats {
   width: -moz-max-content;
   width: max-content;
   flex-wrap: nowrap;
   max-width: 100%;
   overflow-x: scroll;
   padding-bottom: 10px;
   /* Ширина всей полосы */
}
.catalog__cats::-webkit-scrollbar {
   width: 4px;
   height: 4px;
   background-color: var(--white);
}
.catalog__cats {
   /* Стили для дорожки */
}
.catalog__cats::-webkit-scrollbar-track {
   background-color: var(--white);
   border-radius: 0;
}
.catalog__cats {
   /* Стили для ползунка */
}
.catalog__cats::-webkit-scrollbar-thumb {
   background-color: var(--black);
   border-radius: 0;
}

.partners {
   background: #fff;
}

section.partners {
   padding-top: 2rem;
   padding-bottom: 2rem;
}

.partners__wrapper {
   display: flex;
   gap: 3rem;
   flex-wrap: wrap;
}

.parnters__item {
   flex: 0 1 calc(33.333% - 2rem);
   position: relative;
}
.parnters__item:after {
   content: "";
   transition: all 0.3s ease;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #000;
   mix-blend-mode: hue;
   opacity: 1;
}
.parnters__item:hover:after {
   opacity: 0;
}
.parnters__item {
   height: 200px;
   padding: 20px;
}
.parnters__item img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: contain;
   object-fit: contain;
}

.formblock__images {
   position: relative;
   overflow: hidden;
   /* чтобы курсор не вылезал за границы */
}

.formblock__cursor {
   position: absolute;
   /* центр курсора должен совпадать с точкой координат */
   transform-origin: center center;
   /* если у курсора есть размер, например 20px, то он будет центрирован */
}

.formblock__image {
   position: absolute; /* или relative, но тогда transform будет работать иначе */
   /* важно: если изначально нет transform, задай явно */
   transform: translate(0, 0);
}

.agreement .check.active {
   background: var(--black);
}

.formblock__thanks {
   min-height: 300px;
}

.formblock__desc {
   margin-top: 24px;
   font-size: 1rem;
   font-family: var(--font-family);
   line-height: 120%;
}

.popup {
   max-width: 500px;
   width: 100%;
}
.popup .btn {
   width: 100%;
   min-width: 0;
}

.portfolio__btn {
   margin-top: 52px;
   border: 1px solid var(--black);
   width: -moz-max-content;
   width: max-content;
   padding-left: 2rem;
   padding-right: 2rem;
   margin-left: auto;
   margin-right: auto;
   color: var(--black);
}

.btn {
   transition: all 0.3s ease;
}
.btn:hover {
   background: var(--accent);
   color: var(--white);
   border-color: var(--accent) !important;
}

@keyframes footer1 {
   0% {
      transform: rotate(45deg) translateX(0);
   }
   50% {
      transform: rotate(45deg) translateX(50%);
   }
   100% {
      transform: rotate(45deg) translateX(0);
   }
}
@keyframes footer2 {
   0% {
      transform: rotate(45deg) translateX(0);
   }
   50% {
      transform: rotate(45deg) translateX(-50%);
   }
   100% {
      transform: rotate(45deg) translateX(0);
   }
}
.footer__icons {
   margin-top: 52px;
   position: relative;
}

.footer-i-1 {
   animation: infinite 2s ease 0s footer1;
}

.footer-i-3 {
   animation: infinite 2s ease 0s footer2;
}

.catalog__titleblock span:first-child {
   width: -moz-max-content !important;
   width: max-content !important;
}

.faq__titleblock span {
   position: static !important;
   width: -moz-max-content !important;
   width: max-content !important;
}

.faq__titleblock {
   display: flex;
   gap: 20px;
   row-gap: 2px;
   width: -moz-max-content;
   width: max-content;
   flex-wrap: wrap;
}

.faq__title {
   margin-top: 0 !important;
}

@media (max-width: 400px) {
   .faq__title {
      margin-top: 1rem !important;
   }
}
.contacts__titleblock {
   flex: 0 0 auto;
}
.contacts__titleblock span {
   position: static;
   width: -moz-max-content !important;
   width: max-content !important;
   white-space: wrap;
   flex: 0 0 auto !important;
} /*# sourceMappingURL=style.css.map */

.policy {
   font-family: var(--font-family);
}

.policy .container * {
   margin-top: 1rem;
   font-size: 14px;
   line-height: 140%;
}

.policy .container *:first-child {
   margin-top: 0;
}

.content {
   text-align: justify;
   font-size: 14px;
   font-family: car(--text-family);
   line-height: 140%;
}
.content h3,
.content h4,
.content h5,
.content h6 {
   font-size: 20px;
   font-weight: 500;
   font-family: var(--font-family);
   margin-top: 24px;
}
.content strong {
   font-weight: 500;
}
.content > * {
   margin-top: 10px;
}
.content ul li {
   position: relative;
   padding-left: 10px;
}
.content ul li:before {
   content: "";
   display: block;
   position: absolute;
   top: 7px;
   left: 0;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--black);
}
.content ol {
   list-style-position: inside;
   counter-reset: step;
}
.content ol li,
.content ul li {
   margin-top: 8px;
}
.content ol li:first-child,
.content ul li:first-child {
   margin-top: 0;
}

form a {
   color: var(--accent);
}