* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
img {max-width: 100%;}
textarea {
  resize: vertical;
}
a {text-decoration: none; color: inherit;}
.hidden,
[hidden] {
  display: none !important;
}
.invisible {
  visibility: hidden;
}
input, button, .input {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
    border: none;
}
button {cursor: pointer;}
:root {
    --main: #292D32;
    --main-hover: #3F454E;
	--primary: #FFC32A;
    --bg: #F5F3F3;
}
.container {max-width: 1520px; margin: 0 auto; position: relative;}
.row {
  margin: 0 -15px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
[class^="col-"] {min-height: 1px; padding: 0 15px; box-sizing: border-box;}
.col-1 {width: calc(100% / 6);}
.col-2 {width: calc(100% / 3);}
.col-3 {width: calc(100% / 2);}
.col-4 {width: calc(100% / 3 * 2);}
html {scroll-behavior: smooth;}
body {
	font-family: 'Roboto';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
	color: var(--main);
}
h1,h2,h3,h4,h5,.logo {
    font-family: 'Soyuz Grotesk', sans-serif;
    font-weight: 700;
}
h1 {
    font-size: 96px;
    line-height: 92px;
}
h2 {
    font-size: 60px;
    line-height: 58px;
}
h3 {
    font-size: 38px;
}
h4 {
    font-size: 24px;
}
.body_m {line-height: 1.4;}
.body_m_md, .body_s_md {font-weight: 500;}
.body_m_sb, .body_s_sb {font-weight: 600;}
.body_l_b {font-weight: 700;}
.body_l, .body_l_b {font-size: 18px; line-height: 22px;}
.body_s, .body_s_md, .body_s_sb {font-size: 14px;}
.body_xs {font-size: 12px;}
/* COMPONENTS */
input, textarea {
    outline: none;
    border: none;
    padding: 20px 30px;
    border-radius: 10px;
    background: white;
    color: var(--main);
    font-family: 'Roboto';
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
    width: 100%;
}
.btn {
    background: var(--main);
    color: white;
    font-family: 'Roboto';
    font-size: 18px;
    line-height: 21px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 20px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn:hover {background-color: var(--main-hover);}
.btn svg {margin-right: 5px;}
.btn.btn_outline {
    outline: 1px solid var(--main);
    outline-offset: -2px;
    background: transparent;
    color: var(--main);
}
.btn.btn_outline:hover {background-color: var(--main); color: white;}
.btn.btn_outline.primary {outline-color: var(--primary); color: var(--primary);}
.btn.btn_outline.primary:hover {background-color: var(--primary); color: var(--main);}
.btn.accent {background-color: var(--primary); color: var(--main);}
.btn.accent:hover {background-color: var(--main); color: white;}
.btn, .about-info__social {
    transition: transform .1s ease-out,color .15s linear,background-color .15s linear;
}
.btn:active, .about-info__social:active {transform: scale(.96);}

/* HEADER */
header, #main, #steps, #plans {background: var(--bg);}
header {
    position: sticky;
    top: 0;
    z-index: 11;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}
.logo {
    font-size: 24px;
    display: flex;
    align-items: center;
    line-height: 23px;
}
.logo span {
    margin-left: 6px;
    padding: 10px;
    border-radius: 10px;
    background: var(--primary);
}
nav {
    font-size: 18px;
    line-height: 21px;
    display: flex;
    margin: 0 -25px;
}
nav a {margin: 0 25px;}
nav a:hover, nav a:focus {
    color: #777778;
}
.phone {
    display: flex;
    align-items: center;
    border: 1px solid var(--main);
    border-radius: 10px;
    padding: 18px 25px;
    font-size: 18px;
    line-height: 21px;
    font-weight: 500;
    transition: color 0.15s linear 0s, background-color 0.15s linear 0s;
}
.phone svg {
    margin-right: 10px;
    transition: fill 0.15s linear 0s;
}
.phone:hover, .phone:focus {
    background: var(--main);
    color: white;
}
.phone:hover svg, .phone:focus svg {
    fill: white;
}
.main__block {padding-top: 200px;}
.main__block h1 > span {
    color: var(--primary);
}
.main__text {
    margin: 38px 0;
    font-size: 24px;
    line-height: 28px;
}
.main__gallery {
    padding-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    margin-bottom: -207px;
}
.main__gallery img {border-radius: 20px; width: 100%;}
.main__gallery img:nth-child(even) {margin-top: 30px;}
#about {
    padding: 150px 0;
    background: white;
    position: relative;
}
.about {
    background-color: var(--primary);
    border-radius: 30px;
}
.about-hero {
    padding-top: 64px;
    padding-left: 107px;
    position: relative;
}
.about-hero__block {
    position: absolute;
    right: 48px;
    bottom: 85px;
    background: white;
    border-radius: 10px;
    padding: 20px 30px;
    box-shadow: 3px 20px 40px 0px #00000026;
    font-size: 20px;
    line-height: 28px;
    max-width: 461px;
}
.about-hero__block span {
    font-size: 16px;
    line-height: 19px;
}
.b {
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 5px;
    display: block;
}
.about-info {
    padding-bottom: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    max-width: 643px;
}
.about-info__text {
    font-size: 20px;
    line-height: 30px;
    margin-top: 30px;
}
.about-info__socials-wrapper {
    margin-top: 40px;
}
.about-info__socials-wrapper label {
    font-family: 'Soyuz Grotesk', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 23px;
    display: block;
}
.about-info__socials {
    margin-top: 20px;
    display: flex;
}
.about-info__social {
    margin-right: 10px;
    padding: 20px 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    background: hsl(200, 77%, 52%);
    color: white;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 21px;
    font-weight: 500;
}
.about-info__social:nth-child(1):hover {background: hsl(200, 77%, 57%);}
.about-info__social:nth-child(2) {background: hsl(142, 70%, 49%);}
.about-info__social:nth-child(2):hover {background: hsl(142, 70%, 54%);}
.about-info__social:nth-child(3) {background: hsl(248, 85%, 66%);}
.about-info__social:nth-child(3):hover {background: hsl(248, 85%, 71%);}
.about-info__social svg {margin-right: 10px;}
.about-info__social span {
    display: block;
    margin-top: 1px;
}

/* STEPS */
#steps {
    padding: 150px 0;
}
.steps-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.steps-header__left {
    max-width: 733px;
}
.steps-header__title {
}
.steps-header__desc {
    margin-top: 30px;
}
.steps-header__right {
    max-width: 457px;
}
.steps-header__text {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 30px;
}
.steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 60px;
}
.steps-block {
    padding: 30px;
    background: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 290px;
}
.steps-block__header {
    display: flex;
    justify-content: space-between;
}
.steps-block__number {
    padding: 10px;
    opacity: 0.6;
    font-size: 20px;
    line-height: 23px;
}
.steps-block__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    position: relative;
    margin: 3px;
}
.steps-block__icon:after {
    content: "";
    position: absolute;
    inset: -13px;
    border-radius: 50%;
    background: rgba(255, 195, 42, 0.3);
}
.steps-block__body {margin-top: 20px;}
.steps-block__text {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-top: 16px;
}

/* CONTROL */
#control {background: var(--main); padding: 150px 0 104px; overflow: hidden;}
.control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
}
.control-header__title {
    color: white;
    max-width: 500px;
}
.cian {
    border-radius: 10px;
    background: #CDE1FF;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.cian__body {
    margin-top: -15px;
}
.cian__text {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    max-width: 240px;
}
.cian__btn {background: hsl(216, 100%, 51%);}
.cian__btn:hover {background: hsl(216, 100%, 46%);}
.control-slider__wrapper {
    position: relative;
}
.control-slider {
    z-index: 0;
}
.control-slider__items {
}
.object {
    border-radius: 20px;
    overflow: hidden;
    height: auto;
    display: flex;
    flex-direction: column;
}
.object__img {
    height: 245px;
    width: 100%;
    border-radius: 20px 20px 0px 0px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s;
}
.object:hover .object__img {
    transform: scale(1.05);
}
.object__body {
    background: white;
    padding: 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.object__about {
    flex: 1;
    margin: 15px 0 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}
.object__about-item {
    display: grid;
    grid-template-columns: 24px auto;
    gap: 10px;
    line-height: 28px;
    align-items: center;
    font-size: 18px;
}
.object__btn {
    padding: 20px 30px;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: none;
}
.arrow-left, .arrow-rght {
    box-shadow: 0px 6px 10px 0px #00000026;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arrow-left {left: -90px;}
.arrow-rght {right: -90px;}
.arrow-left svg {transform: translateX(-2px);}
.arrow-rght svg {transform: translateX(2px);}

/* arguments */
#arguments {padding: 150px 0;}
.arguments__title {
    width: 50%;
    float: left;
    margin-bottom: 57px;
}
.arguments {
    width: 50%;
    float: right;
    display: grid;
    gap: 15px;
}
.argument {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 50px;
    background: var(--bg);
    border-radius: 20px;
}
.argument__title {
    max-width: 450px;
    line-height: 37px;
}
.argument img {height: 150px;}
.arguments__block {
    display: flex;
    margin-top: 71px;
    justify-content: space-between;
    max-width: 646px;
    align-items: flex-start;
}
.arguments__text {
    font-size: 20px;
    line-height: 28px;
    max-width: 368px;
}
.arguments__link {
    width: 228px;
}
.contract_img-wrapper {
    width: 50%;
    display: flex;
    position: relative;
}
.contract_img-wrapper:after {
    content: "Договор";
    font-family: 'Soyuz Grotesk', sans-serif;
    font-weight: 700;
    position: absolute;
    top: 68px;
    left: 160px;
    transform: rotate(-5deg);
    color: #DAD9D9;
    font-size: 38px;
    line-height: 38px;
}
/* PLANS */
#plans {
    padding: 150px 0 116px;
}
.plans-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.plans-header__title {
    line-height: 58px;
    max-width: 644px;
}
.plans-header__text {
    max-width: 444px;
    line-height: 28px;
}
.plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: center;
    margin-top: 52px;
}
.plan {
    padding: 50px 64px 50px 50px;
    border-radius: 20px;
    background: white;
}
h3.plan__title {
    line-height: 37px;
    display: flex;
    align-items: flex-end;
}
.plan__title span {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    margin-left: 14px;
    padding: 0 10px;
    border: 1px solid var(--main);
    border-radius: 47px;
}
.plan__price {
    font-size: 64px;
    line-height: 75px;
    margin-top: 22px;
    display: flex;
    align-items: flex-end;
}
.plan__price span {
    font-size: 24px;
    line-height: 28px;  
    margin-bottom: 10px;
    margin-left: 15px;
}
.plan__items {
    margin-top: 20px;
    display: grid;
    gap: 10px;
}
.plan__item {
    font-size: 18px;
    line-height: 32px;
    padding-left: 42px;
    background: url('/src/plan.svg') no-repeat;
}
.plan__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}
.plan__btn {
    padding: 20px 35px;
}
.plan__btn2 {
    background: transparent;
    color: var(--main);
    padding: 0;
}
.plan__btn2:hover {
    background: transparent;
}
.plan.popular {
    padding-block: 64px;
    background: var(--primary);
}

/* reviews */
#reviews {padding: 150px 0;}
.reviews-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 63px;
}
.reviews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.review {
    background: var(--bg);
    padding: 36px;
    border-radius: 20px;
}
.review__header {
    display: grid;
    align-items: center;
    grid-template-columns: 70px auto;
    gap: 18px;
}
.review__photo {
    border-radius: 50%;
}
.review__body {
}
.review__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}
.review__tg {
    font-size: 16px;
    line-height: 21px;
}
.review__audio {
    margin-top: 20px;
    border-radius: 24px;
    background: white;
    padding: 8px;
    padding-right: 12px;
    display: grid;
    gap: 12px;
    align-items: center;
    grid-template-columns: 40px 1fr 28px 24px;
}
.review__play, .review__volume {cursor: pointer;}
.review__play rect, .review__play.play path {display: none;}
.volume_off, .review__volume.off .volume_on {display: none;}
.review__volume.off .volume_off, .review__play.play rect {display: inline;}
.audio__wrapper {
    height: 32px;
    cursor: pointer;
    position: relative;
}
.audio__wrapper:before, .audio__wrapper span {
    content: "";
    background: url('/src/waveform.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
}
.audio__wrapper:before {
    opacity: 0.3;
}
.audio__wrapper span {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.review__time {
    font-size: 14px;
    line-height: 16px;
}
.tg-block {
    background: #26A4E3;
    color: white;
    border-radius: 10px;
    padding: 50px 40px 40px;
    text-align: center;
    align-self: start;
}
.tg-block__icon {
    margin-bottom: 27px;
}
.tg-block__btn {
    margin-top: 57px;
    color: #26A4E3;
    background: white;
}
.tg-block__btn:hover {color: white;}

/* QA */
#qa {padding-bottom: 100px;}
.qa {
    border-radius: 20px;
    background-image: url('/src/qa.jpg');
    background-repeat: no-repeat;
    background-position: 22.5% center;
    display: flex;
    padding: 60px;
    justify-content: space-between;
}
.qa__left {
    max-width: 550px;
}
.qa__text {
    line-height: 28px;
    margin-top: 24px;
}
.qa__right {
    max-width: 427px;
}
.qa__right input {margin-bottom: 20px;}
.qa__right label, #popup label {
    display: flex;
    position: relative;
    align-items: flex-start;
}
input[type="checkbox"] {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
}
.checkbox {
    width: 24px;
    height: 24px;
    display: block;
    border-radius: 5px;
    flex: 0 0 24px;
    margin-right: 10px;
    display: flex;
    background: white;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: 1px solid var(--main);
    outline-offset: -1px;
}
input[type="checkbox"]:checked + .checkbox {
    background: var(--main);
}
input[type="checkbox"]:not(:checked) + .checkbox > svg {display: none;}
.checkbox + span {
    font-size: 16px;
    line-height: 19px;
}
.checkbox + span > a {text-decoration: underline;}
.qa__right .btn {
    margin-top: 30px;
    width: 100%;
}

/* SEO */
#seo {margin-bottom: 90px; position: relative;}
.seo {
    column-count: 2;
    column-gap: 30px;
    position: relative;
}
#seo:not(.show) {
    height: 393px;
    overflow: hidden;
}
#seo:not(.show) .seo:after {
    content: "";
    position: absolute;
    left: 0;
    top: 237px;
    width: 100%;
    height: 246px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) -38.87%, #FFFFFF 32.11%);
}
.seo h3 {
    line-height: 37px;
}
.seo p {
    margin-top: 20px;
    line-height: 28px;
}
#seo .btn {
    position: absolute;
    left: 50%;
    top: 332px;
    translate: -50% 0;
}
#seo.show .btn {display: none;}

/* FOOTER */
footer {padding: 100px 0 30px; background: var(--main); color: white;}
footer .logo span {color: var(--main);}
.footer__address {
    margin-top: 30px;
    font-size: 18px;
    line-height: 21px;
}
.footer__worktime {
    margin-top: 8px;
    font-size: 18px;
    line-height: 21px;
    opacity: 0.4;
}
.footer__phone {
    display: block;
    font-size: 32px;
    line-height: 38px;
}
.footer__phone + .footer__phone {margin-top: 5px;}
.footer__email {
    display: block;
    margin-top: 20px;
    font-size: 18px;
    line-height: 21px;
}
footer .btn.btn_outline {margin-top: 50px;}
.footer__link {
    margin-bottom: 20px;
    display: block;
    font-size: 18px;
    line-height: 21px;
}
.footer__socials {
    display: flex;
    justify-content: flex-end;
}
.footer__social + .footer__social {margin-left: 24px;}
.footer__social {
    background: var(--primary);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.footer__social:after {
    content: "";
    border-radius: 50%;
    transition: .1s;
    background: var(--primary);
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.footer__social:hover:after {inset: -5px;}
.footer__bottom {
    margin-top: 80px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    line-height: 19px;
    color: white;
}
.footer__copyright {
    opacity: 0.5;
}
.footer__bottom-links {
    display: flex;
    justify-content: space-between;
}
.footer__bottom-link {
    opacity: 0.5;
    text-decoration: underline;
}
.footer__bottom-link:hover {
    text-decoration: none;
    opacity: 1;
}

/* MODAL */
.modal {
    position: fixed;
    z-index: 21;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
}
body.modal_show[data-modal="extra"] #extra.modal {display: flex;}
body.modal_show[data-modal="extra2"] #extra2.modal {display: flex;}
body.modal_show[data-modal="extra3"] #extra3.modal {display: flex;}
body.modal_show[data-modal="popup"] #popup.modal {display: flex;}
body.modal_show[data-modal="policy"] #policy.modal {display: flex;}
body.modal_show[data-modal="personal"] #personal.modal {display: flex;}
@keyframes modalShow {
    from {opacity: 0.8; transform: translateY(40px);}
}
.modal__container {
    background: white;
    position: relative;
    padding: 40px;
    animation: modalShow 0.4s;
    max-height: 90%;
    overflow: auto;
}
.modal_fullwidth .modal__container {
    padding: 100px 0;
    width: 100%;
}
.modal__close {
    position: absolute;
    top: 40px;
    right: 40px;
    cursor: pointer;
    z-index: 1;
}
.plan_grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
}
.plan_grid .plan__price {margin-top: 50px;}
.plan_grid .plan__actions {margin-top: 40px;}
.plan_col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.plan_extra h4 {
    line-height: 23px;
    border-radius: 5px;
    background: var(--primary);
    padding: 10px;
}
.plan_extra-text {
    margin-top: 15px;
    line-height: 23px;
}
.plan_extra-text p + p {
    margin-top: 8px;
}
#popup form {
    display: grid;
    gap: 20px;
    margin-top: 30px;
}
#popup h3 {line-height: 1; padding-right: 50px;}
#popup input, textarea {
    outline: 1px solid black;
    outline-offset: -2px;
}
#popup label {
    max-width: 460px;
}
.modal__content {margin-top: 30px;}
.modal__content > * {
    margin-top: 8px;
    line-height: 28px;
}

/* MEDIA */
@media (max-width: 1699px) {
    .arrow-left {left: -70px;}
    .arrow-rght {right: -70px;}
}
@media (max-width: 1539px) {
    .container {max-width: 1140px;}
    .arrow-left {left: -90px;}
    .arrow-rght {right: -90px;}
    .main__gallery {margin-bottom: -150px;}
    .main__block {padding-top: 130px;}
    h1 {font-size: 78px; line-height: 80px;}
    h2 {font-size: 48px; line-height: 48px;}
    h3 {font-size: 33px;}
    .about-info__social {padding: 20px 28px;}
    .about-info {padding-right: 20px;}
    .about-hero {padding-left: 32px;}
    .about-hero__block {right: 10px;}
    .steps-header__left {max-width: 600px;}
    .cian {padding: 30px;}
    .arguments {padding-left: 15px;}
    .arguments__block {max-width: 550px;}
    .arguments__text {
        font-size: 18px;
        line-height: 24px;
        max-width: 350px;
    }
    .contract_img-wrapper {width: 500px;}
    .contract_img-wrapper:after {
        top: 64px;
        left: 150px;
    }
    .plans-header__title {max-width: 500px;}
    h3.plan__title {
        flex-direction: column;
        align-items: flex-start;
    }
    .plan__title span {
        margin-left: 0;
        margin-top: 10px;
    }
    .plan__item {
        line-height: 23px;
        background-size: 23px;
        padding-left: 34px;
    }
    .plan__actions {flex-direction: column;}
    .plan__btn2 {margin-top: 20px;}
    .plan_grid .plan__actions {align-items: flex-start;}
    .footer__bottom {font-size: 14px;}
}
@media (max-width: 1319px) {
    .arrow-left {left: -70px;}
    .arrow-rght {right: -70px;}
}
@media (min-width: 1200px) {
    .mobile {display: none;}
}
@media (max-width: 1199px) {
    .container {max-width: 740px;}
    .desktop {display: none;}
    h1 {
        font-size: 50px;
        line-height: 48px;
    }
    h2 {
        font-size: 40px;
        line-height: 39px;
    }
    h4 {
        font-size: 20px;
        line-height: 1;
    }
    .btn {
        font-size: 14px;
        line-height: 16px;
        padding: 13px 40px;
    }
    .header {padding: 10px 0;}
    .header_buttons {
        display: grid;
        align-items: center;
        height: 40px;
        grid-template-columns: auto auto;
        gap: 23px;
    }
    .header_buttons a {display: flex;}
    .menu_mobile {
        width: 24px;
        height: 11px;
        position: relative;
    }
    .menu_mobile:before, .menu_mobile:after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--main);
        transition: .2s;
    }
    .menu_mobile:before {top: 0;}
    .menu_mobile:after {bottom: 0;}
    header.menu_opened .menu_mobile:before {
        transform: translateY(4.5px) rotate(45deg);
    }
    header.menu_opened .menu_mobile:after {
        transform: translateY(-4.5px) rotate(-45deg);
    }
    .header__mobile {
        padding: 30px 0;
        position: absolute;
        width: 100%;
        top: 100%;
        height: calc(100vh - 63px);
        overflow: auto;
        background: var(--bg);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .3s;
        transition-delay: .3s;
    }
    .header__mobile > .container {
        transition: .3s;
        transition-delay: 0s;
        opacity: 0;
        transform: translateY(-20px);
    }
    header.menu_opened .header__mobile {transform: scaleY(1); transition-delay: 0s;}
    header.menu_opened .header__mobile > .container {opacity: 1; transform: translateX(0px); transition-delay: .3s;}
    .mobile_nav {
        display: grid;
        gap: 25px;
    }
    .footer__socials {
        flex-direction: row;
        height: unset;
        justify-content: flex-start;
    }
    #main .col-4, #main .col-2 {width: 100%;}
    .main__block {padding-top: 30px;}
    .main__block h1 {max-width: 500px;}
    .main__text {
        margin: 30px 0 20px;
        font-size: 18px;
        line-height: 21px;
        max-width: 256px;
    }
    #main {padding-bottom: 60px;}
    .main__gallery {
        padding-top: 0px;
        margin-top: 50px;
        margin-bottom: 0;
        gap: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 360px;
        justify-content: space-between;
        align-items: flex-start;
        width: fit-content;
    }
    .main__gallery img:nth-child(even) {margin-top: 0; margin-left: 10px;}
    .main__gallery img {
        border-radius: 13px;
        width: 175px;
        height: 175px;
    }
    #about {padding: 60px 0;}
    #about .col-3 {width: 100%;}
    #about .col-3:nth-child(1) {order: 2;}
    .about-info {
        padding: 60px 20px 18px;
        max-width: unset;
    }
    .about {position: relative;}
    .about-info__socials-wrapper {
        position: absolute;
        bottom: 60px;
    }
    .about-hero {
        padding: 0 15px 264px;
        text-align: center;
    }
    .about-hero__block {
        bottom: 180px;
        left: 50%;
        right: unset;
        transform: translateX(-50%);
        text-align: left;
        font-size: 16px;
        line-height: 24px;
    }
    .about-hero__block span {
        font-size: 14px;
        line-height: 16px;
    }
    .about-hero__img {
        max-height: 450px;
    }
    #steps {padding: 60px 0 200px;}
    #steps .container {position: relative;}
    .steps-header__right {
        position: absolute;
        top: 100%;
        margin-top: 30px;
        max-width: 330px;
    }
    .steps-header__text {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 20px;
    }
    .steps-header__desc {margin-top: 15px;}
    .steps {
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
        margin-top: 30px;
    }
    .steps-block {min-height: unset; padding: 20px;}
    .steps-block__body {margin-top: 30px;}
    .steps-block__icon {
        width: 50px;
        height: 50px;
        margin: 10px;
    }
    .steps-block__icon:after {inset: -10px;}
    .steps-block__text {
        font-size: 16px;
        line-height: 24px;
        margin-top: 10px;
    }
    #control {padding: 60px 0;}
    .control-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 40px;
    }
    .cian {
        margin-top: 30px;
        flex-direction: column;
    }
    .cian__body {margin-top: 0;}
    .cian__text {
        max-width: 190px;
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 24px;
    }
    #arguments, #plans, #reviews {padding: 60px 0;}
    #arguments .container > * {
        float: unset;
        width: auto;
    }
    .arguments__title {
        margin-bottom: 20px;
        max-width: 500px;
    }
    .arguments {
        padding-left: 0;
        gap: 10px;
    }
    .contract_img-wrapper {margin-top: 20px;}
    .arguments__block {
        margin-top: 40px;
    }
    .plans-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .plans-header__title {
        max-width: 370px;
        line-height: 39px;
    }
    .plans-header__text {margin-top: 10px;}
    .plans {
        margin-top: 38px;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .plan__actions {
        flex-direction: row;
        max-width: 400px;
    }
    .plan__btn2 {margin-top: 0;}
    .plan_col2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .reviews-wrapper {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 30px;
    }
    .reviews {
        gap: 10px;
    }
    .qa {
        flex-direction: column;
        background: var(--primary);
        background-image: url('/src/qa_mobile.png');
        background-repeat: no-repeat;
        background-position: 92.5% 10px;
    }
    .qa__text {
        font-size: 16px;
        line-height: 24px;
    }
    .qa__right {
        max-width: unset;
        margin-top: 48px;
    }
    .qa__right .btn {margin-top: 20px; padding-block: 20px;}
    .checkbox + span {
        font-size: 14px;
        line-height: 16px;
    }
    #qa {padding-bottom: 60px;}
    .seo {column-count: 1;}
    .seo h3 {
        line-height: 24px;
        font-size: 25px;
    }
    .seo p {
        margin-top: 10px;
        line-height: 24px;
        font-size: 16px;
    }
    #seo {margin-bottom: 60px;}
    #seo:not(.show) {height: 423px;}
    footer {padding-top: 60px;}
    .footer__top > .row > [class^="col-"] {width: 50%;}
    .footer__top > .row > [class^="col-"]:nth-child(n+3) {margin-top: 40px;}
    footer .btn.btn_outline {margin-top: 30px;}
    .footer__link {
        display: inline-block;
        width: 49%;
        margin-bottom: 12px;
        font-size: 16px;
        line-height: 24px;
    }
    .footer__link:nth-child(n+3) {margin-bottom: 0;}
    .footer__bottom [class^="col-"] {width: 50%;}
    .footer__bottom-link:not(:first-child) {margin-top: 10px;}
    .mobile_nav h3 {
        font-size: 25px;
        line-height: 24px;
    }
    .mobile_work .footer__address {margin-top: 50px;}
    .mobile_phones {margin-top: 30px;}
    .mobile_phones .footer__phone {
        font-size: 28px;
        line-height: 32px;
    }
    .mobile_phones .footer__email {
        margin-top: 15px;
        font-size: 16px;
        line-height: 24px;
    }
    .header__mobile .footer__socials {margin-top: 30px;}
    .footer__bottom-links {flex-direction: column;}
    .footer__bottom {margin-top: 40px;}
    .modal__content > * {
        line-height: 24px;
        font-size: 16px;
    }
}
@media (max-width: 767px) {
    .container {max-width: calc(100% - 30px);}
    #main {overflow: hidden;}
    .main__gallery img:nth-child(even) {transform: translateX(70px);}
    .main__gallery {transform: translateX(-91px);}
    .about-info__text {
        font-size: 16px;
        line-height: 24px;
        margin-top: 15px;
    }
    .about-hero {text-align: left;}
    .about-hero__block {
        left: calc(50% - 315px / 2);
        width: 315px;
        transform: unset;
    }
    .about-info__social span {display: none;}
    .about-info__social svg {margin-right: 0;}
    .about-info__socials-wrapper {width: calc(100% - 30px);}
    .about-info__social {
        flex: 1;
        justify-content: center;
    }
    .reviews {grid-template-columns: 1fr;}
    .footer__top > .row > [class^="col-"] {width: 100%;}
    .plan, .plan.popular {padding: 30px 20px;}
    .argument {padding: 10px 10px 10px 20px;}
    h3.argument__title {
        line-height: 24px;
        font-size: 25px;
    }
    h3.plan__title {
        font-size: 25px;
        line-height: 24px;
        flex-direction: row;
        align-items: center;
    }
    .plan__title span {
        margin-left: 10px;
        margin-top: 0px;
        font-size: 12px;
    }
    .plan__price {
        font-size: 40px;
        line-height: 47px;
        margin-top: 15px;
    }
    .plan__item {
        font-size: 16px;
        line-height: 24px;
        background-size: 24px;
    }
    .plan__actions {margin-top: 30px;}
    .plan__btn {padding: 13px 24px;}
    .plan__btn2 {padding: 13px 18px;}
    .modal__container {padding: 40px 0;}
    .modal_fullwidth .modal__container {padding: 40px 0;}
    .modal__close {
        right: 15px;
        width: 28px;
        height: 28px;
    }
    .plan_grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    h2.plan__title {
        font-size: 25px;
        line-height: 24px;
    }
    .plan_grid .plan__price {margin-top: 15px;}
    .plan_grid .plan__actions {margin-top: 30px;}
    .plan_col2 {gap: 25px;}
    .plan_extra h4 {line-height: 19px;}
    .plan_extra-text {
        margin-top: 10px;
        line-height: 24px;
        font-size: 16px;
    }
    #popup h3 {font-size: 25px; padding-right: 30px;}
    .argument:nth-child(4) img {height: 138px;}
    .argument:nth-child(5) img {margin-left: -20px;}
    .argument:nth-child(4) h3.argument__title {
        max-width: 138px;
        line-break: anywhere;
    }
    .contract_img-wrapper:after {
        top: calc(min(100%,618px) / 404 * 44);
        left: calc((min(100%,527px) - 98px) * 0.4);
        font-size: 25px;
        line-height: 24px;
    }
    .steps {grid-template-columns: 1fr;}
    .cian {width: 100%;}
    .footer__bottom [class^="col-"] {width: 100%;}
    .arrow-rght, .arrow-left {display: none;}
    .control-slider__wrapper {
        margin-left: -15px;
        padding-left: 15px;
        margin-right: -15px;
        padding-right: 15px;
        overflow: hidden;
    }
    .control-slider {overflow: visible;}
    .object__img {height: 212px;}
    .object__body {padding: 20px;}
    .object__about-item {font-size: 16px;}
    .arguments__block {flex-direction: column;}
    .arguments__link {
        width: unset;
        margin-top: 20px;
    }
    #popup .btn {padding: 20px 40px;}
    #popup form {gap: 16px;}
    #popup input, #popup textarea {
        padding: 16px 24px;
    }
    .review {padding: 30px;}
    .review__title {font-size: 16px;}
    .audio__wrapper:before, .audio__wrapper span {
        background-image: url('/src/waveform2.svg');
    }
    .tg-block__icon {margin-bottom: 20px;}
    .tg-block__btn {margin-top: 30px;}
    .tg-block h3 {
        font-size: 25px;
        line-height: 24px;
    }
    .qa {
        padding: 60px 20px;
        background-position: 5px 88px;
    }
    .qa__right .btn {padding: 20px 20px;}
    .footer__top > .row > [class^="col-"]:nth-child(2) {margin-top: 40px;}
    .footer__phone {
        font-size: 28px;
        line-height: 32px;
    }
    .footer__email {
        margin-top: 15px;
        font-size: 16px;
        line-height: 24px;
    }
    .footer__link {width: 146px;}
    .footer__bottom-link, .footer__bottom-link:not(:first-child) {margin-top: 14px;}
    .footer__bottom-link, .footer__copyright {font-size: 15px;}
    .footer__social + .footer__social {margin-left: 20px;}
}