/*!
Theme Name: skvostok
Theme URI: http://underscores.me/
Author: xside
Author URI: http://xside
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: skvostok
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

skvostok is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
    --bg-light: #F7F8FA;

    --color-accent: #384450;
    --color-text: #1D2021;
    --color-blue: #5B7FA6;

    --color-error: #C0392B;
    --color-success: #4CAF50;
    --color-neutral: #81848B;
}


* {
    box-sizing: border-box;
    position: relative;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #1D2021;
    background-color: var(--bg-light);
}

.container{
    width: 100%;
    max-width: 1718px;
    margin: 0 auto;
    padding: 0 20px;
}

.wrapper{
    width: 100%;
    display: flex;
    gap: 20px
}


@media (max-width: 1400px) {
    .wrapper{
        gap: 6px
    }}

.wrapper.wrapper-col{
    flex-direction: column;
}

section {
    margin: 100px 0;
}

.section-heading{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 50px;
    border-left: 5px solid var(--color-accent);
    margin-bottom: 45px;
}

.section-heading .subtitle{
    font-size: 28px;
    font-weight: 600;
}

.custom-scrollbar{
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.custom-scrollbar::-webkit-scrollbar{
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track{
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb{
    background-color: var(--color-accent);
    border-radius: 4px;
}

@supports (-moz-appearance: none) {
    .custom-scrollbar{
        scrollbar-width: thin;
        scrollbar-color: var(--color-accent) transparent;
    }
}


h1 {
    font-size: 62px;
    font-weight: 700;
    margin: 0;
}

h2 {
    font-size: 42px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

h3{
    font-size: 28px;
    font-weight: 600;
    margin: 0;
}


a{
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover{
    opacity: 0.9;
}

p{
    margin: 0;
}

ul{
    padding: 0;
    padding-left: 20px;
    margin: 0;
}

img{
    display: block;
    max-width: 100%;
}

.btn{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background-color: var(--color-accent);
    padding: 10px 16px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    justify-content: center;
    cursor: pointer;
}

.btn img{
    width: 25px;
    height: 25px;
    min-width: 25px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.btn:hover img{
    transform: rotate(45deg);
}

.btn.btn-white{
    color: var(--color-accent);
    background-color: #fff;
}

.btn.btn-outline {
    color: var(--color-accent);
    background-color: transparent;
    height: auto;

    border: 1px solid;
    font-size: 18px !important;
    text-decoration: none;
}


.filters .btn.btn-outline {
    font-size: 12px !important;
    height: auto;
    border: none;
    text-decoration: underline;
}



.btn.btn-outline-white{
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
}

.btn-group{
    display: flex;
    gap: 20px;
}

form{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

form .form-group{
    width: 100%;
}

form input{
    font-family: inherit;
    width: 100%;
    padding: 15px 25px;
    background-color: #F6F6F6;
    border: none;
    border-radius: 20px;
    font-weight: 500;
    color: var(--color-text);
}

form .accept-group{
    display: flex;
    gap: 10px;
}

form .accept-group input{
    width: 25px;
    min-width: 25px;
    height: 25px;
    margin: 0;
}

form .accept-group label{
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text);
    display: flex;
    gap: 10px;
}

form .wpcf7-list-item{
    margin: 0;
}

form .wpcf7-checkbox{
    display: flex;
    gap: 10px;
}

form .wpcf7-checkbox .wpcf7-list-item label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

form .wpcf7-checkbox .wpcf7-list-item input{
    width: 14px;
    min-width: 14px;
    height: 14px;
}

form .wpcf7-spinner{
    position: absolute;
    right: -50px;
    top: 12px;
}

form .checkbox-item{
    display: flex;
    align-items: center;
    gap: 10px;
}

form .checkbox-item input{
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
}

form .checkbox-item label{
    font-size: 14px;
}

form .wpcf7-not-valid-tip{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    max-width: 100px;
}

form .wpcf7-response-output{
    padding: 0!important;
    margin: 0!important;
    border: none!important;
    font-size: 10px;
    line-height: 10px;
    color: #dc3232;
    position: absolute;
    bottom: -20px;
    max-width: 230px;
}

button{
    border: inherit;
    font-family: inherit;
    cursor: pointer;
}

iframe{
    border: none;
    border-radius: 20px;
    height: 100%;
}

.map > div{
    height: 100%;
}



.header{
    position: sticky;
    top: 0;
    z-index: 200;
    background-color: var(--color-accent);
    color: #fff;
}

.header .wrapper,
.header .header-main,
.header .main-nav{
    overflow: visible;
}

.header .wrapper{
    align-items: center;
}

.header .burger-menu{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    border: none;
    background: transparent;
    appearance: none;
}

.header .burger-menu.is-active{
    position: relative;
    gap: 0;
}

.header .burger-menu.is-active span{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    min-width: 25px;
    margin-top: -0.5px;
    margin-left: -12.5px;
}

.header .burger-menu.is-active span:nth-child(1){
    transform: rotate(45deg);
}

.header .burger-menu.is-active span:nth-child(2){
    transform: rotate(-45deg);
}

.header .burger-menu span{
    width: 25px;
    min-width: 25px;
    height: 1px;
    background-color: #fff;
    transition: transform 0.3s ease;
    display: block;
}

.header .header-main {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    border-left: 1px solid #ffffff80;
    border-right: 1px solid #ffffff80;
    padding: 10px 0;
    margin-left: 30px;
    padding-left: 30px;
    flex: 1;
    padding-right: 20px;
    margin-right: 20px;
}


@media (max-width:1400px) {
.header .header-main {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 10px;

    }}

.header .header-main ul{
    display: flex;
    list-style: none;
    gap: 20px;
}

@media (max-width:1500px) {
.header .header-main ul{
    gap: 15px;

    }}

.header .header-main ul li{
    padding: 7px 10px;
    font-weight: 500;
}


@media (max-width:1500px) {
.header .header-main ul li{
    padding: 6px 0px;

    }}


.header .main-nav nav > ul > li.menu-item-projects{
    position: static;
}

.header .menu-item-projects > a{
    display: inline-block;
    transition: box-shadow 0.2s ease;
}

.header .menu-item-projects:hover > a,
.header .menu-item-projects:focus-within > a,
.header .menu-item-projects.current-menu-item > a{
    box-shadow: inset 0 -2px 0 var(--color-blue);
}

.projects-mega-menu{
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 50;
}

.menu-item-projects:hover .projects-mega-menu,
.menu-item-projects:focus-within .projects-mega-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.projects-mega-menu__panel{
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(56, 68, 80, 0.18);
    min-width: 560px;
    max-width: min(1200px, calc(100vw - 40px));
    overflow-x: auto;
    scrollbar-width: thin;
}

.projects-mega-menu__grid{
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    min-width: min-content;
}

.projects-mega-menu__card{
    position: relative;
    flex: 1 0 220px;
    min-width: 220px;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 24px;
    color: #fff;
    text-decoration: none;
    background-color: var(--color-accent);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.projects-mega-menu__card:not([style*="background-image"]){
    background: linear-gradient(145deg, var(--color-accent) 0%, #4E6173 100%);
}

.projects-mega-menu__card:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(360deg, #4E6173 0%, rgba(78, 97, 115, 0.86) 63.93%, rgba(78, 97, 115, 0.23) 95.02%, rgba(78, 97, 115, 0.1) 100%);
    border-radius: 0 0 20px 20px;
    z-index: 1;
    pointer-events: none;
}

.projects-mega-menu__title{
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    max-width: calc(100% - 41px);
}

.projects-mega-menu__arrow{
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    width: 25px;
    height: 25px;
    padding: 0;
    display: block;
    line-height: 0;
    border-radius: 50%;
}

.projects-mega-menu__arrow img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.projects-mega-menu__card:hover .projects-mega-menu__arrow img{
    transform: rotate(45deg);
}

.mobile-menu{
    position: fixed;
    inset: 0;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu__backdrop{
    position: absolute;
    inset: 0;
    background-color: rgba(29, 32, 33, 0.72);
}

body.mobile-menu-open .header{
    z-index: 301;
}

.mobile-menu__container{
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 80px;
    padding-bottom: 40px;
    overflow-y: auto;
}

.mobile-menu__panel{
    width: 100%;
    max-width: 850px;
    margin: 0;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.15fr) minmax(240px, 0.95fr);
    gap: 20px;
    box-shadow: 0 16px 48px rgba(56, 68, 80, 0.2);
}

.mobile-menu__col{
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.mobile-menu__col-nav{
    justify-content: space-between;
    gap: 20px;
}

.mobile-menu__nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mobile-menu__nav a{
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-menu__nav a:hover,
.mobile-menu__nav .current-menu-item > a,
.mobile-menu__nav .current_page_item > a{
    color: var(--color-blue);
}

.mobile-menu__docs{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 280px;
    min-height: 48px;
    padding: 10px 16px 10px 20px;
    border: 1px solid var(--color-blue);
    border-radius: 30px;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.mobile-menu__docs:hover{
    color: var(--color-blue);
}

.mobile-menu__docs-icon{
    width: 25px;
    height: 25px;
    min-width: 25px;
    line-height: 0;
}

.mobile-menu__docs-icon img,
.mobile-menu__complex-arrow img{
    width: 25px;
    height: 25px;
    display: block;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.mobile-menu__docs:hover .mobile-menu__docs-icon img,
.mobile-menu__complex-card:hover .mobile-menu__complex-arrow img{
    transform: rotate(45deg);
}

.mobile-menu__complex-card{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    height: 100%;
    padding: 24px;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background-color: var(--color-accent);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mobile-menu__complex-card:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 170px;
    background: linear-gradient(360deg, #4E6173 0%, rgba(78, 97, 115, 0.86) 63.93%, rgba(78, 97, 115, 0.23) 95.02%, rgba(78, 97, 115, 0.1) 100%);
    border-radius: 0 0 20px 20px;
    z-index: 1;
    pointer-events: none;
}

.mobile-menu__complex-title{
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    max-width: calc(100% - 40px);
}

.mobile-menu__complex-arrow{
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    width: 25px;
    height: 25px;
    line-height: 0;
}

.mobile-menu__contact-card{
    height: 100%;
    border: 1px solid var(--color-blue);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.mobile-menu__contact-image img{
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.mobile-menu__contact-body{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.mobile-menu__contact-title{
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.mobile-menu__contact-address{
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.35;
}

.mobile-menu__contact-phone{
    margin-top: auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-blue);
    text-decoration: none;
}

.mobile-menu__contact-phone:hover{
    opacity: 0.85;
}

@media (max-width: 1100px){
    .mobile-menu__panel{
        grid-template-columns: 1fr 1fr;
    }

    .mobile-menu__col-contact{
        grid-column: 1 / -1;
    }

    .mobile-menu__contact-card{
        flex-direction: row;
        max-height: none;
    }

    .mobile-menu__contact-image{
        width: 200px;
        flex-shrink: 0;
    }

    .mobile-menu__contact-image img{
        height: 100%;
        min-height: 180px;
    }
}

@media (max-width: 767px){
    .mobile-menu__container{
        padding-top: 76px;
        padding-bottom: 24px;
    }

    .mobile-menu__panel{
        max-width: 100%;
        grid-template-columns: 1fr;
        padding: 24px 20px;
        gap: 24px;
    }

    .mobile-menu__complex-card{
        min-height: 280px;
    }

    .mobile-menu__contact-card{
        flex-direction: column;
    }

    .mobile-menu__contact-image{
        width: 100%;
    }

    .mobile-menu__contact-image img{
        min-height: 0;
        height: 140px;
    }
}



.header .right-col{
    display: flex;
    gap: 20px;
    align-items: center;
}

.header .right-col .phone{
    display: flex;
    align-items: center;
    gap: 5px;
}




.section-hero{
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.section-hero__footer{
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.section-hero__footer .hero-cta{
    pointer-events: auto;
}

.section-hero .hero-slider{
    position: relative;
    width: 100%;
}

.section-hero .hero-swiper{
    width: 100%;
    overflow: hidden;
}

.section-hero .hero-swiper:not(.swiper-initialized) .swiper-wrapper{
    display: grid;
    grid-template-areas: "hero-slide-stack";
}

.section-hero .hero-swiper:not(.swiper-initialized) .swiper-slide{
    grid-area: hero-slide-stack;
    visibility: hidden;
    height: auto;
    align-self: stretch;
    pointer-events: none;
}

.section-hero .hero-swiper:not(.swiper-initialized) .swiper-slide:first-child{
    visibility: visible;
    pointer-events: auto;
}

.section-hero .hero-swiper.swiper-initialized .swiper-slide{
    height: 100% !important;
}

.section-hero .hero-swiper .swiper-slide{
    overflow: hidden;
}

.section-hero.section-hero--wheel .hero-swiper,
.section-hero.section-hero--wheel .hero-swiper .swiper-wrapper{
    touch-action: none;
}

.section-hero.section-hero--touch .hero-slider,
.section-hero.section-hero--touch .hero-swiper,
.section-hero.section-hero--touch .hero-swiper .swiper-wrapper,
.section-hero.section-hero--touch .hero-slide{
    touch-action: pan-y;
}

.section-hero .hero-swiper:not(.swiper-initialized) .hero-slide{
    height: 100%;
    min-height: 100%;
}

.section-hero .hero-slide{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: 100%;
    padding: 60px 0;
    box-sizing: border-box;
}

.section-hero .hero-slide .container{
    position: relative;
    z-index: 1;
    width: 100%;
}

.section-hero .hero-slide__bg{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.section-hero .hero-swiper-pagination{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 4;
    pointer-events: auto;
}

.section-hero .hero-swiper-pagination .swiper-pagination-bullet{
    width: 4px;
    height: 15px;
    border-radius: 1px;
}

.section-hero .hero-swiper-pagination .swiper-pagination-bullet-active{
    height: 24px;
}

.section-hero .hero-slide h1{
    color: var(--hero-title-color, var(--color-accent));
    line-height: 1em;
    max-width: 1000px;
}

.section-hero .hero-slide{
    color: var(--hero-text-color, inherit);
}

.section-hero .hero-slide .hero-slide__excerpt,
.section-hero .hero-slide .subtitle,
.section-hero .hero-slide p,
.section-hero .hero-slide .nums span{
    color: var(--hero-text-color, inherit);
}

.section-hero .hero-slide .nums .num{
    color: var(--hero-text-color, var(--color-accent));
}

.section-hero .hero-slide .btn-group > .btn:not(.btn-outline){
    background-color: var(--hero-btn-color, var(--color-accent));
}

.section-hero .hero-slide .btn-outline{
    color: var(--hero-text-color, var(--color-accent));
    border-color: var(--hero-text-color, var(--color-accent));
}

.section-hero .subtitle{
    font-size: 36px;
    font-weight: 500;
    max-width: 790px;
    margin-bottom: 10px;
}

.section-hero .hero-slide__excerpt{
    font-size: 28px;
    font-weight: 800;
}

.section-hero .hero-slide__excerpt,
.section-hero p{
    max-width: 625px;
}

.section-hero .nums{
    display: flex;
    gap: 45px;
    margin: 20px 0 50px 0;
}

.section-hero .nums .num {
    font-size: 56px;
    font-weight: 700;
    color: var(--color-accent);
}

.section-hero .nums span{
    display: inline-block;
    max-width: 180px;
}

.section-hero .hero-cta {
    position: absolute;
    bottom: 100px;
    right: 0;
    display: flex;
    align-items: center;
    width: 350px;
    height: 100px;
    border-radius: 20px;
}

.section-hero .hero-cta > img {
    width: 130px;
    min-width: 130px;
    z-index: 1;
    border-radius: 18px;
    filter: brightness(0.7);
    height: 100px;
    object-fit: cover;
}

.section-hero .hero-cta .content{
    background-color: #00000078;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0 20px 20px 0;
    margin-left: -20px;
    padding: 20px 20px 20px 40px;
}

.section-hero .hero-cta .content .title{
    color: #fff;
    font-weight: 500;
}

.section-hero .hero-cta .content .arrow-btn{
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.section-hero .hero-cta .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
}

.section-hero .hero-cta.is-hidden{
    display: none;
}

.hero-advantages{
    margin: 0;
}

.hero-advantages .wrapper {
    align-items: center;
    background-color: #fff;
    padding: 30px;
    padding-right: 0;
    border-radius: 30px;
    box-shadow: 0px 4px 4px 0px #0000000A;
    overflow: hidden;
}

.section-hero + .hero-advantages .wrapper {
    border-radius: 30px;
    margin-top: 30px;
}

.hero-advantages h2{
    max-width: 400px;
}

.hero-advantages .left-col{
    flex-shrink: 0;
    max-width: 440px;
}

.hero-advantages .left-col .subtitle {
    font-size: 24px;
    font-weight: 600;
    margin-top: 10px;
}

.hero-advantages .right-col{
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.hero-advantages-slider,
.hero-advantages-swiper{
    width: 100%;
    overflow: hidden;
}

.hero-advantages-swiper .swiper-slide{
    width: calc((100% - 20px * 2.5) / 3.5);
    height: auto;
}

@media(max-width: 1024px){
    .hero-advantages-swiper .swiper-slide{
        width: calc((100% - 20px * 1.5) / 2.5);
    }
}

@media(max-width: 767px){
    .hero-advantages-swiper .swiper-slide{
        width: calc((100% - 20px * 0.2) / 1.2);
    }
}

.hero-advantages-swiper .item{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-advantages-swiper .item img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
}

.hero-advantages-swiper .item span{
    font-weight: 600;
}



.flat-list .filters {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #0000000A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7px;
    overflow: visible;
    position: relative;
}

.flat-list .filters > *{
    max-width: 30%; 
}

.flat-list .filters > .custom-select:not(.custom-select-sm){
    flex: 0 0 160px;
    width: 160px;
    max-width: 160px;
    min-width: 160px;
}

.flat-list .filters > .custom-select.custom-select-sm{
    flex: 0 0 110px;
    width: 110px;
    max-width: 110px;
    min-width: 110px;
}

.flat-list .filters > .custom-select .custom-select-wrap{
    width: 100%;
}

.flat-list .filters > .custom-select:not(.custom-select-sm) .custom-select-trigger{
    min-width: 0;
    width: 100%;
}

.flat-list .filters > .custom-select.custom-select-sm .custom-select-trigger{
    min-width: 0;
    width: 100%;
    padding-right: 36px;
}

.flat-list .filters .custom-select-trigger, .flat-list .filters .custom-slider .range-number, .flat-list .filters .custom-checkbox .checkbox-item label {
    font-size: 14px;
    height: auto;
    padding: 10px;
}

.filter-label{
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    white-space: nowrap;
}

.custom-select{
    position: relative;
}

.custom-select-wrap{
    position: relative;
}

.custom-select-native{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.custom-select-trigger{
    appearance: none;
    width: 100%;
    min-width: 150px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--color-accent);
    border-radius: 30px;
    background-color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.custom-select-value{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-chevron{
    width: 12px;
    height: 8px;
    min-width: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23384450' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.custom-select-trigger.is-disabled,
.custom-select-trigger:disabled{
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.custom-select-trigger:hover{
    border-color: var(--color-blue);
}

.custom-select-trigger.is-open,
.custom-select-trigger:focus-visible{
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(91, 127, 166, 0.25);
}

.custom-select-trigger.is-open .custom-select-chevron{
    transform: rotate(180deg);
}

.custom-select-dropdown{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 4px;
    list-style: none;
    background-color: #fff;
    border: 1px solid var(--color-accent);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(56, 68, 80, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.custom-select-dropdown.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select-option{
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.custom-select-option:hover,
.custom-select-option.is-focused{
    background-color: var(--bg-light);
}

.custom-select-option.is-selected{
    background-color: var(--color-accent);
    color: #fff;
}

.custom-select-option.is-selected:hover,
.custom-select-option.is-selected.is-focused{
    background-color: var(--color-accent);
    opacity: 0.92;
}

.custom-select-sm .custom-select-trigger{
    min-width: 72px;
    width: 72px;
    padding: 0 28px 0 14px;
    justify-content: center;
}

.custom-select-sm .custom-select-value{
    text-align: center;
}

.custom-select-sm .custom-select-chevron{
    position: absolute;
    right: 14px;
}

.custom-select-sm .custom-select-dropdown{
    min-width: 72px;
}

.custom-slider{
    min-width: 130px;
}

.custom-slider .range-fields{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0px;
}

.custom-slider .range-number{
    width: 54px;
    height: 27px;
    padding: 0;
    border: 1px solid var(--color-accent);
    border-radius: 30px;
    background-color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: var(--color-text);
    -moz-appearance: textfield;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-slider .range-number::-webkit-outer-spin-button,
.custom-slider .range-number::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

.custom-slider .range-number:hover{
    border-color: var(--color-blue);
}

.custom-slider .range-number:focus-visible{
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(91, 127, 166, 0.25);
}

.custom-slider .range-slider{
    height: 20px;
    margin-bottom: -4px;
}

.custom-slider .range-slider-line{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
}

.custom-slider .range-slider-fill{
    position: absolute;
    top: 0;
    height: 100%;
    background-color: var(--color-accent);
    border-radius: 2px;
}

.custom-slider .range-slider input[type="range"]{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.custom-slider .range-slider input[type="range"]::-webkit-slider-runnable-track{
    background: transparent;
    border: none;
}

.custom-slider .range-slider input[type="range"]::-moz-range-track{
    background: transparent;
    border: none;
}

.custom-slider .range-slider input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-accent);
    cursor: pointer;
    pointer-events: all;
    margin-top: 0px;
    transition: transform 0.15s ease;
}

.custom-slider .range-slider input[type="range"]::-moz-range-thumb{
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-accent);
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.15s ease;
}

.custom-slider .range-slider input[type="range"]::-webkit-slider-thumb:hover,
.custom-slider .range-slider input[type="range"]::-moz-range-thumb:hover{
    transform: scale(1.1);
}

.custom-slider .range-slider input[type="range"]::-webkit-slider-thumb:active,
.custom-slider .range-slider input[type="range"]::-moz-range-thumb:active{
    transform: scale(1.15);
}

.custom-slider .range-input-max{
    z-index: 1;
}

.custom-radio .radio-group,
.custom-checkbox .checkbox-group{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.custom-radio .radio-item input,
.custom-checkbox .checkbox-item input{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.custom-radio .radio-item label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--color-accent);
    border-radius: 30px;
    background-color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

.custom-radio .radio-item input:checked + label{
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.custom-radio .radio-item input:focus-visible + label,
.custom-checkbox .checkbox-item input:focus-visible + label{
    box-shadow: 0 0 0 2px rgba(91, 127, 166, 0.25);
}

.custom-radio .radio-item label:hover{
    border-color: var(--color-blue);
}

.custom-checkbox .checkbox-item label{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--color-accent);
    border-radius: 30px;
    background-color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

.custom-checkbox .checkbox-item label::before{
    content: '';
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1px solid var(--color-accent);
    border-radius: 3px;
    background-color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.custom-checkbox .checkbox-item input:checked + label{
    border-color: var(--color-accent);
}

.custom-checkbox .checkbox-item input:checked + label::before{
    background-color: var(--color-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    border-color: var(--color-accent);
}

.custom-checkbox .checkbox-item label:hover{
    border-color: var(--color-blue);
}

.flat-list .filters .filters-actions {
    display: flex;
    gap: 12px;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
}

.flat-list .wrapper{
    margin-top: 20px;
}

.flat-list .flat-table {
    --flat-table-cols: minmax(120px, 1fr) 1fr 0.8fr 0.9fr 0.6fr 0.9fr;
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 1220px;
    height: 550px;
    overflow: hidden;
    box-shadow: 0px 4px 4px 0px #0000000A;
    display: flex;
    flex-direction: column;
}

.flat-list .flat-table .flat-table-content{
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.flat-list .flat-table .flat-table-more{
    display: none;
    width: 100%;
    margin: 16px 0;
    justify-content: center;
}

.flat-list .flat-table .flat-table-loader{
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    align-items: center;
    justify-content: center;
    background-color: rgb(255 255 255 / 72%);
}

.flat-list .flat-table.is-loading .flat-table-loader{
    display: flex;
}

.flat-list .flat-table-loader-spinner{
    width: 44px;
    height: 44px;
    border: 3px solid #E4E7EB;
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: flat-table-spin 0.8s linear infinite;
}

@keyframes flat-table-spin{
    to{
        transform: rotate(360deg);
    }
}

.flat-list .flat-table .flat-table-empty{
    display: none;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
}

.flat-list .flat-table.is-empty .flat-table-header{
    display: none;
}

.flat-list .flat-table.is-empty .flat-table-body{
    display: none;
}

.flat-list .flat-table.is-empty .flat-table-empty{
    display: flex;
}

.flat-list .flat-table.is-loading .flat-table-body{
    opacity: 0.35;
    pointer-events: none;
}

.flat-list .flat-table .flat-table-header,
.flat-list .flat-table .flat-table-body .row{
    display: grid;
    grid-template-columns: var(--flat-table-cols);
    align-items: center;
    column-gap: 16px;
}

.flat-list .flat-table .flat-table-header{
    padding: 28px 36px 18px;
}

.flat-list .flat-table .flat-table-header .cell{
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

.flat-list .flat-table .flat-table-body {
    max-height: 500px;
    padding: 0 12px;
}

.flat-list .flat-table .flat-table-body .row{
    padding: 12px 16px;
    border-bottom: 1px solid #E4E7EB;
    transition: all 0.2s ease;
    border-radius: 0px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.flat-list .flat-table .flat-table-body .row:last-child{
    border-bottom: none;
}

.flat-list .flat-table .flat-table-body .row:hover{
    background-color: var(--color-blue);
    border-bottom-color: transparent;
    color: #fff;
    border-radius: 10px;
}

.flat-list .flat-table .flat-table-body .row .cell{
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    text-align: center;
}

.flat-list .flat-table .flat-table-body .row .cell--title{
    position: relative;
}

.kvartira-reserved-status {
    left: -3px;
    position: absolute;
    z-index: 1;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: -3px;
}

@media (max-width:1100px) {
.kvartira-reserved-status {
    left: -7px;

}}


.kvartira-reserved-status::before{
    content: '';
    position: absolute;
    inset: 0;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d62828' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3M8 10h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Zm4 4v3'/%3E%3C/svg%3E");
}

.kvartira-reserved-status::after{
    content: 'Забронирована';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    padding: 7px 10px;
    border-radius: 6px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.kvartira-reserved-status:hover::after{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.flat-list .flat-table .flat-table-body .row .cell:last-child{
    text-align: right;
}

.flat-list .flat-table .flat-table-body .row .row-link{
    color: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.flat-table-banner {
    padding: 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
}

.flat-table-banner:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #4E6173 0%, rgba(78, 97, 115, 0.879595) 32.21%, rgba(78, 97, 115, 0.72) 58.86%, rgba(78, 97, 115, 0.7138) 79.81%, rgba(210, 210, 210, 0.65) 100%);
    border-radius: 20px;
}

.flat-table-banner .content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    z-index: 1;
    position: relative;
    color: #fff;
}

.flat-table-banner .content .btn{
    margin-top: 40px;
}

.tabs-nav{
    display: flex;
    gap: 15px;  
}

.tabs-nav .tab-item{
    font-size: 18px;
    font-weight: 700;
    background-color: transparent;
    color: var(--color-accent);
    padding: 14px 25px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--color-accent);
}

.tabs-nav .tab-item.active{
    background-color: var(--color-blue);
    color: #fff;
    border-color: var(--color-blue);
}

.tabs-nav .tab-item:hover{
    opacity: 0.8;
}

.tabs-content{
    margin-top: 30px;
    display: grid;
    align-items: start;
    max-width: 100%;
    overflow: hidden;
}

.tabs-content > .tab-content{
    grid-area: 1 / 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.tabs-content > .tab-content.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .tabs-content > .tab-content{
        transition: none;
    }

    .tab-content .left-col > .card-content{
        transition: none;
    }
}

.tab-content .left-col > .card-content{
    grid-row: 2;
    grid-column: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.tab-content .left-col > .card-content.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}



.tab-content .left-col {
    width: 100%;
    max-width: 1000px;
    height: 750px;
    display: grid;
    grid-template-rows: auto 1fr;
}


.tab-content .left-col .card-nav{
    background-color: #fff;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 50px;
    border-radius: 20px 20px 0 0;
}

.tab-content .left-col .card-nav .title{
    font-size: 32px;
    font-weight: 500;
}

.tab-content .left-col .card-nav .nums{
    display: flex;
    gap: 10px;
}

.tab-content .left-col .card-nav .nums .num{
    font-size: 32px;
    height: 58px;
    width: 58px;
    min-width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-content .left-col .card-nav .nums .num.active{
    background-color: var(--color-blue);
    color: #fff;
    border-color: var(--color-blue);
}

.tab-content .left-col .card-content{
    position: relative;
    min-height: 0;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    color: #fff;
    background-size: cover;
}

.tab-content .left-col .card-content p{
    font-weight: 700;
}

.tab-content .left-col .card-content:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 275px;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(71, 73, 76, 0.7) 43.75%, rgba(71, 73, 76, 0.89) 66.35%, rgba(71, 73, 76, 0.91) 75.48%, #47494C 100%);
    border-radius: 20px;
}

.tab-content .left-col .card-content .links{
    display: flex;
    gap: 10px;
}

.tab-content .left-col .card-content .links a{
    padding: 10px 32px;
    border-radius: 30px;
    border: 1px solid #fff;
}

.tab-content .right-col{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 685px;
}

.tab-content .right-col .progress-banner{
    position: relative;
    height: calc(50% - 10px);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border-radius: 20px;
}

.tab-content .right-col .progress-banner:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3A3A3A78;
    border-radius: 20px;
}

.tab-content .right-col .progress-banner .title{
    font-size: 24px;
    color: #fff;
}

.tab-content .right-col .map-banner{
    height: calc(50% - 10px);
    display: flex;
    flex-direction: column;
}

.tab-content .right-col .map-banner .map{
    flex: 1;
}

.tab-content .right-col .map-banner .map img,
.tab-content .right-col .map-banner .map iframe{
    height: 100%;
    width: 100%;
    border: 0;
    display: block;
}

.tab-content .right-col .map-banner .map img{
    object-fit: cover;
}

.tab-content .right-col .map-banner .info{
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px #0000000A;
    border-radius: 0 0 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
}

.tab-content .right-col .map-banner .info .title {
    font-size: 24px;
    font-weight: 600;
    max-width: 300px;
}

.cta-1 .wrapper{
    padding: 60px;
    border-radius: 20px;
    color: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.cta-1 .subtitle{
    font-size: 28px;
    font-weight: 600;
}

.cta-1 .btn {
    margin-top: 30px;
}

.cta-1 .info{
    position: absolute;
    right: 60px;
    bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.cta-1 .info .title{
    font-size: 117px;
    font-weight: 600;
    text-align: right;
}

.cta-1 .info .text{
    font-size: 40px;
    text-align: right;
}

.advantages .wrapper{
    margin-top: 45px;
}

.advantages .col{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 33.33%;
}



.advantages .col .item {
    height: 325px;
    background-size: cover;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
}

.advantages .col .item.big{
    height: 100%;
}

.advantages .col .item .title{
    padding: 10px 25px;
    font-weight: 500;
    background-color: #fff;
    border-radius: 24px;
}

.advantages .col .item p{
    color: #fff;
    font-weight: 500;
}

.advantages .col .item:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 170px;
    background: linear-gradient(360deg, #4E6173 0%, rgba(78, 97, 115, 0.86) 63.93%, rgba(78, 97, 115, 0.23) 95.02%, rgba(78, 97, 115, 0.1) 100%);
    border-radius: 0 0 20px 20px;
}

.sale-cta .wrapper{
    gap: 0;
}

.sale-cta .col-left, .sale-cta .col-right{
    width: 50%;
}

.sale-cta .col-left{
    background-color: var(--color-accent);
    padding: 40px;
}

.sale-cta .col-left h2{
    color: #fff;
    font-weight: 600;
}

.sale-cta .col-left .tabs-nav{
    background-color: #212931;
    gap: 0;
    border-radius: 10px 10px 0 0;
    border: 1px solid #F3F3F3;
    border-bottom: none;
    margin-top: 40px;
}

.sale-cta .col-left .tabs-nav .tab-item {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    flex: 1;
    border-radius: 12px 12px 0 0;
    text-align: center;
    border: 1px solid #212931;
    padding: 20px;
    padding-bottom: 20px;
}

.sale-cta .col-left .tabs-nav .tab-item.active{
    background-color: #F3F3F3;
    color: var(--color-text);
    border-radius: 7px 7px 0 0;
    border-color: #F3F3F3;
    opacity: 1;
}


.sale-cta .col-left .tabs-content{
    background-color: #F3F3F3;
    margin-top: 0;
    padding: 20px;
    border-radius: 20px;
    margin-top: -20px;
}

.sale-cta .col-left .tabs-content > .tab-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.sale-cta .col-left .tab-content .icons-list{
    list-style: none;
    padding-left: 0;
}

.sale-cta .col-left .tab-content .icons-list li{
    font-weight: 700;
    line-height: 1.2;
}

.sale-cta .col-left .tab-content .icons-list li:before{
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('assets/img/check.svg');
    background-size: contain;
    vertical-align: top;
    margin-right: 10px;
}

.sale-cta .col-left .tab-content .icons-list li + li{
    margin-top: 10px;
}

.sale-cta .col-left .tab-content .tab-footer{
    display: flex;
    gap: 20px;
    align-items: center;
}

.sale-cta .col-left .tab-content .tab-footer a:not(.btn){
    font-size: 18px;
    font-weight: 600;
}

.sale-cta .col-right{
    background-size: cover;
}

.sale-cta .col-right .badge{
    position: absolute;
    font-size: 24px;
    font-weight: 700;
    padding: 24px;
    color: #fff;
    background-color: var(--color-blue);
    border-radius: 10px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.news-slider,
.news-swiper{
    width: 100%;
}

.news-slider .item{
    padding: 60px 70px;
    border-radius: 20px;
    background-size: cover;
}

.news-slider .item .content{
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-height: 330px;
}

.news-slider .item .content p{
    flex: 1;
}


.swiper-pagination{
    position: static;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.swiper-pagination-bullet{
    width: 15px;
    height: 4px;
    margin: 0 !important;
    background-color: #fff;
    opacity: 1;
    transition: all 0.3s ease;
    border-radius: 1px;
}

.swiper-pagination-bullet-active{
    background-color: var(--color-accent);
}

.catalog-slider,
.catalog-grid,
.catalog-swiper{
    width: 100%;
}

.catalog-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.catalog-grid .item{
    position: relative;
    width: calc(33.333% - 13.333px);
}

.catalog-grid a.item,
.catalog-slider a.item{
    display: block;
    color: inherit;
    text-decoration: none;
}

.catalog-slider .item img,
.catalog-grid .item img{
    height: 375px;
    object-fit: cover;
    border-radius: 20px;
    width: 100%;
}

.catalog-slider .item .title,
.catalog-grid .item .title{
    position: absolute;
    bottom: 30px;
    left: 30px;
    padding: 10px 45px;
    background-color: #fff;
    border-radius: 24px;
    font-weight: 600;
    z-index: 1;
}

.catalog-slider .item .badge,
.catalog-grid .item .badge{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 12px 45px;
    background-color: var(--color-blue);
    border-radius: 0px 20px 0 20px;
    font-weight: 600;
    z-index: 1;
    color: #fff;
}

.section-gallery{
    background-color: #fff;
    padding: 80px 0;
}

.section-gallery .wrapper{
    flex-wrap: wrap;
}

.section-gallery .item {
    width: calc(24% - 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-gallery .item h2{
    padding: 20px 0;
    padding-left: 0px;
    border-left: 5px solid var(--color-accent);
    width: 100%;
    text-align: center;
}

.section-gallery .item a{
    display: block;
    width: 100%;
    cursor: zoom-in;
}

.section-gallery .item img{
    width: 100%;
    border-radius: 20px;
    height: 310px;
    object-fit: cover;
}

.section-gallery .gallery-more{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    float: right;
    margin-top: 20px;
    clear: both;
}

.section-gallery__slider .item-title{
    width: 100%;
    margin-bottom: 20px;
}

.section-gallery__slider .section-gallery-swiper{
    width: 100%;
    overflow: hidden;
}

.section-gallery__slider .swiper-slide a{
    display: block;
    width: 100%;
    cursor: zoom-in;
}

.section-gallery__slider .swiper-slide img{
    width: 100%;
    border-radius: 20px;
    height: 310px;
    object-fit: cover;
    display: block;
}

.section-gallery__slider .swiper-pagination{
    position: static;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.section-gallery__slider .swiper-pagination-bullet{
    background-color: #C5D4E3;
    opacity: 1;
}

.section-gallery__slider .swiper-pagination-bullet-active{
    background-color: var(--color-accent);
}

.section-bottom .col-left{
    width: 70%;
    min-width: 70%;
    background-color: var(--color-accent);
    padding: 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.section-bottom .col-left .contacts{
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.section-bottom .col-left .contacts .contact-item{
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
}

.section-bottom .col-left .contacts .contact-item .icon img{
    width: 45px;
    height: 45px;
    min-width: 45px;
}

.section-bottom .col-left .contacts .contact-item .content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 500;
    line-height: 1.4;
}

.section-bottom .col-left .contacts .contact-item .content .title{
    font-weight: 800;
    font-size: 20px;
}

.section-bottom .col-left .map > img,
.section-bottom .col-left .map iframe{
    width: 660px;
    max-width: 100%;
    height: 330px;
    border: 0;
    border-radius: 20px;
    display: block;
}

.section-bottom .col-left .map > img{
    object-fit: cover;
}

.section-bottom .col-left .map .btn{
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.section-bottom .col-right{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #0000000A;
}

.section-bottom .col-right form .form-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    gap: 8px;
}

.section-bottom .col-right form .checkbox-group{
    display: flex;
    gap: 20px;
    align-items: center;
}

.quote-popup{
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.quote-popup.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.quote-popup__backdrop{
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.quote-popup__dialog{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
}

.quote-popup__dialog h2{
    margin: 0 0 20px;
    padding-right: 40px;
    font-size: 40px;
}

.quote-popup__body{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quote-popup__body form .form-footer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}

.quote-popup__body form .checkbox-group{
    display: flex;
    gap: 20px;
    align-items: center;
}

.quote-popup__close{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.quote-popup__close::before,
.quote-popup__close::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background-color: var(--color-accent);
    transform-origin: center;
}

.quote-popup__close::before{
    transform: translate(-50%, -50%) rotate(45deg);
}

.quote-popup__close::after{
    transform: translate(-50%, -50%) rotate(-45deg);
}

.seo-content .wrapper{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq .faq-list{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq .faq-item{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px 50px 20px 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #0000000A;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.faq .faq-item.is-open{
    box-shadow: 0px 6px 12px 0px #0000000F;
}

.faq .faq-item:before{
    content: '';
    position: absolute;
    top: 26px;
    right: 20px;
    width: 14px;
    height: 8px;
    background-image: url('assets/img/arrow-down.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.faq .faq-item.is-open:before{
    transform: rotate(180deg);
}

.faq .faq-item .question{
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    padding-right: 20px;
    cursor: pointer;
    user-select: none;
}

.faq .faq-item .question:before{
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background-image: url('assets/img/faq-icon.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-right: 10px;
}

.faq .faq-item .answer{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-left: 34px;
    padding-right: 10px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text);
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.faq .faq-item.is-open .answer{
    max-height: 400px;
    opacity: 1;
    margin-top: 12px;
}

.breadcrumbs{
    margin: 0;
    padding: 20px 0;
}

.breadcrumbs .wrapper{
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-gutter: stable;
    padding-bottom: 8px;
}

.breadcrumbs .wrapper a,
.breadcrumbs .wrapper span{
    flex-shrink: 0;
    white-space: nowrap;
}

.breadcrumbs .wrapper::-webkit-scrollbar{
    height: 4px;
}

.breadcrumbs .wrapper::-webkit-scrollbar-track{
    background: transparent;
}

.breadcrumbs .wrapper::-webkit-scrollbar-thumb{
    background-color: var(--color-accent);
    border-radius: 4px;
}

@supports (-moz-appearance: none) {
    .breadcrumbs .wrapper{
        scrollbar-width: thin;
        scrollbar-color: var(--color-accent) transparent;
    }
}

.breadcrumbs .wrapper a{
    color: var(--color-text);
    font-size: 16px;
    font-weight: 600;
}

.breadcrumbs .wrapper a + a:before,
.breadcrumbs .wrapper a + span:before,
.breadcrumbs .wrapper span + span:before{
    content: '»';
    display: inline-block;
    margin-right: 10px;
}

.breadcrumbs + section{
    margin-top: 0;
}

.complex-hero{
    margin-bottom: 0;
}

.complex-hero + section{
    margin-top: 20px;
}

.complex-hero .wrapper{
    background-size: cover;
    background-position: center;
    height: 430px;
    padding: 30px 50px;
    border-radius: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    color: #fff;
}

.complex-hero .wrapper::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 170px;
    background: linear-gradient(360deg, #4E6173 0%, rgba(78, 97, 115, 0.86) 63.93%, rgba(78, 97, 115, 0.23) 95.02%, rgba(78, 97, 115, 0.1) 100%);
    z-index: 0;
    border-radius: 0 0 20px 20px;
}

.complex-hero .wrapper h1{
    font-size: 50px;
    position: relative;
}

.flat-hero{
    margin-bottom: 20px;
}

.flat-hero .wrapper{
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #0000000A;
}

.flat-hero .col-left {
    width: 45%;
}

.flat-hero .col-left .plan-img-link{
    display: block;
    width: 100%;
    cursor: zoom-in;
}

.flat-hero .col-left .plan-img{
    width: 100%;
    height: auto;
    display: block;
}

.flat-hero .col-right{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 50%;
    align-items: flex-start;
}

.flat-hero .col-right .badges{
    display: flex;
    gap: 10px;
}

.flat-hero .col-right .badges span{
    padding: 10px 23px;
    background-color: #FAF8F9;
    border-radius: 24px;
    font-weight: 600;
}

.flat-hero .col-right h1{
    font-size: 50px;
}

.flat-hero .col-right .prices{
    display: flex;
    gap: 30px;
    align-items: center;
}

.flat-hero .col-right .price{
    font-size: 28px;
    font-weight: 800;
    display: flex;
    gap: 10px;
    align-items: center;
}

.flat-hero .col-right .price img{
    width: 20px;
    height: 22px;
    min-width: 20px;
    margin-top: -2px;
}

.flat-hero .col-right .price-m{
    padding: 8px 14px;
    background-color: var(--color-blue);
    color: #fff;
    font-weight: 600;
    border-radius: 30px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.flat-hero .col-right .price-m img{
    width: 12px;
    height: 16px;
    min-width: 12px;
    margin-top: -2px;
    filter: brightness(0) invert(1);
}

.flat-hero .col-right .desc ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flat-hero .col-right .desc ul li{
    display: flex;
    align-items: center;
    gap: 10px;
}

.flat-hero .col-right .desc ul li:before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 3px;
    min-width: 16px;
    background-color: var(--color-blue);
    border-radius: 5px;
}

.flat-hero .col-right .btn{
    margin-top: 24px;
}

.flat-hero .col-right .extra-desc{
    width: 100%;
}

.flat-hero .tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 20px;
    color: #fff;
    font-weight: 600;
    border-radius: 0;
    z-index: 2;
    animation: tagBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.flat-hero .tag--available{
    background-color: #2e9b59;
}

.flat-hero .tag--reserved{
    background-color: #d62828;
}

.flat-hero .tag--sold{
    background-color: #808080;
}

@keyframes tagBounce {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.gallery-slider{
    margin-top: 20px;
}



.gallery-slider .wrapper{
    flex-direction: column;
    width: 100%;
}

.gallery-slider .gallery-swiper{
    width: 100%;
    overflow: hidden;
    padding: 30px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px #0000000A;
}

.gallery-slider .swiper-pagination{
    position: static;
    margin-top: 24px;
    width: 100%;
}

.gallery-slider .swiper-pagination-bullet{
    background-color: #C5D4E3;
    opacity: 1;
}

.gallery-slider .swiper-pagination-bullet-active{
    background-color: var(--color-accent);
}

.gallery-slider .swiper-slide a{
    display: block;
    cursor: zoom-in;
}

.gallery-slider .swiper-slide img,
.gallery-swiper .swiper-slide img{
    width: 100%;
    height: 234px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.glightbox-container .ginner-container{
    position: relative;
}

.glightbox-container .gslide-description.description-bottom{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
}

.glightbox-container .gslide-description.description-bottom .gdesc-inner{
    display: flex;
    justify-content: center;
}

.glightbox-container .gslide-description.description-bottom .gslide-desc{
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    border-radius: 24px;
}

.section-terms .wrapper{
    gap: 30px;
    flex-wrap: wrap;
    padding: 40px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #0000000A;
}

.section-terms .item{
    width: calc(25% - 22.5px);
    background-color: #F5F5F5;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.section-terms .item .title{
    font-size: 24px;
    font-weight: 600;
    max-width: 200px;
}

.section-terms .item .desc{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-terms .item .badge{
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 16px;
    background-color: var(--color-blue);
    color: #fff;
    font-weight: 600;
    border-radius: 0 10px 0 10px;
}

.section-blog .wrapper,
.section-news--grid .wrapper{
    gap: 20px;
    flex-wrap: wrap;
}

.section-blog .item, .section-news--grid .item {
    position: relative;
    width: calc(24% - 13.33px);
}

.section-blog .item:before,
.section-news--grid .item:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 170px;
    background: linear-gradient(360deg, #4E6173 0%, rgba(78, 97, 115, 0.86) 63.93%, rgba(78, 97, 115, 0.23) 95.02%, rgba(78, 97, 115, 0.1) 100%);
    z-index: 1;
    border-radius: 0 0 20px 20px;
}

.section-blog .item img, .section-news--grid .item img {
    width: 100%;
    height: 370px;
    object-fit: cover;
    border-radius: 20px;
}

.section-blog .item .content,
.section-news--grid .item .content{
    position: absolute;
    bottom: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    z-index: 2;
}

.section-blog .item .content .title, .section-news--grid .item .content .title {
    font-size: 20px;
}

section.pagination{
    
}

section.pagination .wrapper{
    align-items: center;
    justify-content: center;
    gap: 24px 32px;
    flex-wrap: wrap;
}

section.pagination .btn img{
    transition: transform 0.3s ease;
}

section.pagination .wrapper > .btn:first-child img{
    transform: rotate(0deg);
}

section.pagination .pages{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

section.pagination .pages a{
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-accent);
    font-size: 16px;
    font-weight: 700;
    background-color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

section.pagination .pages a:hover{
    background-color: var(--color-accent);
    color: #fff;
}

section.pagination .pages a.active{
    background-color: var(--color-accent);
    color: #fff;
}

.single-post-hero{
    margin-bottom: 60px;
}

.single-post-hero .post-image img {
    height: 420px;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.post-content{
    margin-top: 60px;
}

.post-content .container{
    max-width: 1100px;
}

.post-content .content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.related-news .wrapper{
    flex-direction: column;
    width: 100%;
}

.related-news-slider,
.related-news-swiper{
    width: 100%;
}

.related-news-swiper{
    overflow: hidden;
}

.related-news .swiper-pagination{
    position: static;
    margin-top: 24px;
}

.related-news .swiper-pagination-bullet{
    background-color: #C5D4E3;
    opacity: 1;
}

.related-news .swiper-pagination-bullet-active{
    background-color: var(--color-accent);
}

.related-news .item:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 170px;
    background: linear-gradient(360deg, #4E6173 0%, rgba(78, 97, 115, 0.86) 63.93%, rgba(78, 97, 115, 0.23) 95.02%, rgba(78, 97, 115, 0.1) 100%);
    z-index: 1;
    border-radius: 0 0 20px 20px;
}

.related-news .item img{
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 20px;
}

.related-news .item .content{
    position: absolute;
    bottom: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    z-index: 2;
}

.related-news .item .content .title{
    font-size: 24px;
    font-weight: 600;
}

.section-steps .section-heading{
    margin-bottom: 30px;
}

.section-steps .wrapper{
    flex-wrap: wrap;    
    gap: 20px;
    margin-top: 40px;
}

.section-steps .info{
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    font-size: 28px;
    font-weight: 600;
}

.section-steps .item{
    width: calc(33.33% - 13.33px);
}

.section-steps .item img{
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 20px;
}


.section-steps .item .content{
    position: absolute;
    bottom: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    z-index: 2;
}


.section-steps .item .content .date{
    font-size: 14px;
    color: #fff;
}

.section-steps .item .content .title{
    font-size: 24px;
    font-weight: 600;
}

.section-steps .item:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 170px;
    background: linear-gradient(360deg, #4E6173 0%, rgba(78, 97, 115, 0.86) 63.93%, rgba(78, 97, 115, 0.23) 95.02%, rgba(78, 97, 115, 0.1) 100%);
    z-index: 1; 
    border-radius: 0 0 20px 20px;
}

.section-steps .item .content{
    position: absolute;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    z-index: 2;
}

.section-404{
    background-image: url('assets/img/404.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 60px 0;
}

.section-404 .wrapper{
    max-width: 810px;
    justify-self: end;
    flex-direction: column;
    color: #fff;
}

.section-404 .code{
    --code-size: clamp(120px, 18vw, 250px);

    display: inline-grid;
    align-self: flex-start;
    width: fit-content;
    font-size: var(--code-size);
    line-height: 0.85;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.section-404 .code > span{
    grid-area: 1 / 1;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.section-404 .code__blur{
    background-image: url('assets/img/404.png');
    background-repeat: no-repeat;
    filter: blur(12px) saturate(125%) brightness(1.05);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.section-404 .code__frost{
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.15) 42%,
        rgba(255, 255, 255, 0.35) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    mix-blend-mode: soft-light;
}

.section-404 .code__stroke{
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.82);
    paint-order: stroke fill;
    filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.2));
    pointer-events: none;
}

.section-404 h1{
    font-size: 50px;
}

.section-404 .sub{
    font-size: 24px;
    font-weight: 600;
}

.section-parking .wrapper{
    gap: 0;
    background-color: #fff;
    border-radius: 30px;
}

.section-parking .col-left{
    padding: 60px;
    border-radius: 30px 0 0 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 680px;
    min-width: 680px;
}

.section-parking .col-left .heading{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-parking .col-left .heading .title{
    font-size: 50px;
    font-weight: 700;
}

.section-parking .col-left .heading .sub{
    font-size: 28px;
    font-weight: 600;
}

.section-parking .col-left .icon-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    margin-top: 10px;
    margin-bottom: 20px;
}

.section-parking .col-left .icon-list .item{
    display: flex;
    gap: 10px;
    align-items: center;
}

.section-parking .col-left .icon-list .item .title{
    font-size: 20px;
    font-weight: 600;
}

.section-parking .col-right{
    display: flex;
}

.section-parking .col-right img{
    height: 100%;
    object-fit: cover;
}





.footer{
    background-color: var(--color-accent);
    padding: 40px 0;
    color: #fff;
}

.footer .footer-top .wrapper{
    justify-content: space-between;
}

.footer .footer-top .col-left{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer .footer-top p + p{
    margin-top: 8px;
}

.footer .footer-top .col{
    max-width: 250px;
}

.footer .footer-top ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .footer-top ul li + li{
    margin-top: 8px;
}

.footer .footer-top .contacts{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer .footer-top .contacts a{
    font-weight: 800;
}

.footer .footer-top .col-right{
    display: flex;
    gap: 10px;
}

.footer .footer-top .col-right .btn{
    font-size: 16px;
}

.footer .footer-bottom{
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
}

.footer .footer-bottom .col{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 50%;
}

.footer .footer-bottom .col a,
.footer .footer-bottom .col p{
    color: var(--color-neutral);
}

.footer .footer-bottom .footer-extra-menu{
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}




@media(max-width: 1024px){

    .container{
        padding: 0 40px;
    }

    section{
        margin: 80px 0;
    }

    .section-heading{
        padding-left: 20px;
    }

    .catalog-grid .item{
        width: 100%;
    }


    .header{
        padding: 5px 0; 
    }

    .header .header-main{
        margin-left: 15px;
        margin-right: 15px;
        padding-right: 20px;
    }

    .header .main-nav{
        display: none;
    }

    .header .logo img{
        width: 140px;
        min-width: 140px;
    }



    .section-hero .hero-slide{
        padding: 80px 0;
    }

    .section-hero:has(.hero-cta:not(.is-hidden)) .hero-slide{
        padding-bottom: 210px;
    }

    .section-hero .hero-cta .content{
        width: calc(100% + 20px);
    }

    .section-hero .hero-cta{
        left: 40px;
        right: 40px;
        width: auto;
        bottom: 60px;
    }

    .section-hero .hero-cta .content{
        justify-content: flex-start;
    }

    .hero-advantages .wrapper{
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .hero-advantages .right-col{
        width: 100%;
    }

    .hero-advantages .left-col{
        max-width: 100%;
    }

    .flat-list .filters{
        flex-wrap: wrap;
        padding: 20px;
        justify-content: flex-start;
    }

    .filters > *{
        width: calc(50% - 10px);
    }

    .flat-list .filters > .custom-select:not(.custom-select-sm){
        flex: 1 1 calc(50% - 10px);
        width: calc(50% - 10px);
        max-width: none;
        min-width: 0;
    }

    .flat-list .filters > .custom-select.custom-select-sm{
        flex: 0 0 110px;
        width: 110px;
        max-width: 110px;
        min-width: 110px;
    }

    .flat-list .filters .filters-actions{
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
    }

    .flat-list .wrapper{
        flex-direction: column;
    }

    .flat-list .flat-table{
        height: 470px;
    }

    .flat-list .flat-table .flat-table-body{
        max-height: 400px;
        padding: 0;
    }

    .flat-list .flat-table .flat-table-header{
        padding: 20px;
    }

    .flat-list .flat-table{
        --flat-table-cols: minmax(160px, 1.4fr) 0.6fr 1fr 0.9fr 0.6fr 0.9fr;
    }

    .tabs-nav{
        flex-wrap: wrap;
    }

    .tab-content .wrapper{
        flex-direction: column;
        min-width: 0;
        max-width: 100%;
    }

    .tab-content .left-col,
    .tab-content .right-col{
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .tab-content .left-col{
        height: auto;
    }

    .tab-content .left-col .card-nav{
        padding: 20px;
        flex-wrap: wrap;
        gap: 16px;
    }

    .tab-content .left-col .card-content{
        min-height: 360px;
    }

    .tab-content .left-col .card-content .links{
        flex-wrap: wrap;
    }

    .tab-content .right-col .progress-banner{
        height: 450px;
    }

    .tab-content .right-col .map-banner{
        height: auto;
    }

    .tab-content .right-col .map-banner .info{
        flex-wrap: wrap;
        gap: 16px;
        padding: 20px;
    }

    .cta-1 .info .title{
        font-size: 64px;
    }

    .cta-1 .info .text{
        font-size: 32px;
    }

    .advantages .wrapper{
        flex-wrap: wrap;
    }

    .advantages .col{
        width: calc(50% - 10px);
    }

    .advantages .col:last-child{
        width: 100%;
        flex-direction: row;
    }

    .advantages .col:last-child .item{
        width: calc(50% - 10px);
    }

    .sale-cta .wrapper{
        flex-direction: column;
    }

    .sale-cta .col-left{
        width: 100%;
        border-radius: 20px 20px 0 0;
    }

    .sale-cta .col-right{
        width: 100%;
        border-radius: 0 0 20px 20px;
        height: 500px;
    }

    .sale-cta .col-left .tabs-nav .tab-item{
        font-size: 20px;
    }
    
    .section-gallery .item h2{
        text-align-last: left;
        padding-left: 20px;
    }

    .section-bottom .wrapper{
        flex-direction: column;
    }

    .section-bottom .col-left{
        width: 100%;
    }

    .section-bottom .col-left .map > img{
        width: 420px;
    }

    .footer .footer-top .wrapper{
        flex-wrap: wrap;
    }

    .footer .footer-top .col-left{
        width: calc(33.33% - 20px);
    }

    .footer .footer-top .col{
        width: calc(33.33% - 20px);
    }

    .footer .footer-top .col-right{
        width: 100%;
        justify-content: flex-end;
        margin-top: -60px;
    }

    .faq .faq-item .question{
        font-size: 16px;
    }

    .flat-hero .wrapper{
        padding: 40px 20px;
    }

    .flat-hero .col-left img{
        min-height: 430px;
        object-fit: contain;
    }

    .flat-hero .col-left{
        width: 40%;
    }

    .flat-hero .col-right{
        width: 60%;
    }

    .flat-hero .col-right .btn{
        margin-top: 0;
    }

    .section-terms .wrapper{
        padding: 20px;
        gap: 20px;
    }

    .section-terms .item{
        width: calc(50% - 10px);
    }

    .section-blog .item,
    .section-news--grid .item{
        width: calc(50% - 10px);
        height: 330px;
    }

    .section-blog .item img,
    .section-news--grid .item img{
        height: 100%;
    }

    .single-post-hero .post-image img{
        height: 340px;
    }

    .section-steps .item{
        width: calc(50% - 10px);
    }

    .section-404 .code{
        align-self: center;
        font-size: 250px;
        text-align: center;
    }

    .section-404 .wrapper{
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .section-404 .btn-group{
        flex-direction: row;
        justify-content: center;
    }

    .section-parking .wrapper{
        flex-direction: column;
    }

    .section-parking .col-left{
        padding: 30px;
    }

    .section-parking .col-right img{
        border-radius: 30px;
    }
}

@media(max-width: 768px){

    h1{
        font-size: 40px;
    }

    h2{
        font-size: 32px;
    }

    .container{
        padding: 0 20px;
    }

    .btn-group{
        flex-direction: column;
        gap: 10px;
    }

    .header .right-col .phone a{
        font-size: 0px;
    }

    .header .right-col .btn{
        display: none;
    }

    .header .header-main{
        padding-left: 10px;
    }

    .section-hero .hero-slide{
        padding: 40px 0;
    }

    .section-hero:has(.hero-cta:not(.is-hidden)) .hero-slide{
        padding-bottom: 190px;
    }

    .section-hero .subtitle{
        font-size: 28px;
    }

    .section-hero .nums{
        flex-direction: column;
        gap: 30px;
        margin-bottom: 20px;
    }

    .section-hero .hero-cta{
        left: 20px;
        right: 20px;
        width: auto;
        bottom: 40px;
    }

    .hero-advantages .wrapper{
        gap: 20px;
    }

    .hero-advantages .left-col .subtitle{
        font-size: 22px;
    }

    .section-heading .subtitle{
        font-size: 22px;
    }

    .filters > *{
        width: 100%;
    }

    .flat-list .filters > .custom-select:not(.custom-select-sm){
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .flat-list .filters > .custom-select.custom-select-sm{
        flex: 0 0 110px;
        width: 110px;
        max-width: 110px;
        min-width: 110px;
    }

    .flat-list .filters .filters-actions{
        flex-direction: column;
    }

    .flat-list .flat-table{
        height: auto;
        background-color: transparent;
        box-shadow: none;
    }

    .flat-list .flat-table .flat-table-header{
        display: none;
    }

    .flat-list .flat-table .flat-table-body{
        max-height: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;

    }

    .flat-list .flat-table .flat-table-more:not([hidden]){
        display: inline-flex;
    }

    .flat-list .flat-table .flat-table-body .row{
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        border: none;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0px 4px 4px 0px #0000000A;
        gap: 0;
    }

    .flat-list .flat-table .flat-table-body .row.is-hidden{
        display: none;
    }

    .flat-list .flat-table .flat-table-body .row .cell{
        width: 25%;
        border-right: 1px solid #E4E7EB;
        text-align: left;
        padding: 0 5px;
        font-size: 14px;
    }

    .flat-list .flat-table .flat-table-body .row .cell:first-child{
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        border-right: none;
    }

    .flat-list .flat-table .flat-table-body .row .cell:last-child{
        margin-top: 20px;
        padding-top: 10px;
        width: 100%;
        border-top: 1px solid #E4E7EB;
        text-align: left;
        border-right: none;
        display: none;
    }

    .flat-list .flat-table .flat-table-body .row .cell:nth-child(2):before{
        content: '№';
        display: block;
        font-size: 12px;
        color: #5D5D5D;
    }

    .flat-list .flat-table .flat-table-body .row .cell:nth-child(3):before{
        content: 'Площадь';
        display: block;
        font-size: 12px;
        color: #5D5D5D;
    }

    .flat-list .flat-table .flat-table-body .row .cell:nth-child(4):before{
        content: 'Год сдачи';
        display: block;
        font-size: 12px;
        color: #5D5D5D;
    }

    .flat-list .flat-table .flat-table-body .row .cell:nth-child(5){
        border-right: none;
    }

    .flat-list .flat-table .flat-table-body .row .cell:nth-child(5):before{
        content: 'Этаж';
        display: block;
        font-size: 12px;
        color: #5D5D5D;
    }

    .flat-table-banner{
        padding: 30px;
    }

    .tabs-nav .tab-item{
        width: 100%;
        text-align: center;
    }

    .tab-content .left-col .card-nav .title{
        font-size: 22px;
    }

    .tab-content .left-col .card-nav .nums .num{
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 20px;
    }

    .tab-content .left-col .card-content{
        padding: 24px 20px;
        min-height: 600px;
    }

    .tab-content .left-col .card-content p{
        max-width: 100%;
    }

    .tab-content .left-col .card-content .links a{
        padding: 10px 20px;
    }

    .tab-content .right-col .map-banner .info{
        flex-direction: column;
        align-items: flex-start;
    }

    .tab-content .right-col .map-banner .map img,
    .tab-content .right-col .map-banner .map iframe{
        min-height: 320px;
        border-radius: 20px;
    }

    .tab-content .left-col .card-content .links a{
        padding: 8px 12px;
    }

    .cta-1 .wrapper{
        padding: 20px;
        height: 450px;
        background-size: cover;
        justify-content: space-between;
    }

    .cta-1 .subtitle{
        font-size: 22px;
        flex: 1;
    }

    .cta-1 .info .title{
        font-size: 58px;
    }

    .cta-1 .info .text{
        font-size: 24px;
    }

    .cta-1 .info{
        right: 20px;
        bottom: 100px;
    }

    .advantages .col{
        width: 100%;
    }

    .advantages .col:last-child{
        flex-direction: column;
    }

    .advantages .col:last-child .item{
        width: 100%;
    }

    .advantages .col .item.big{
        height: 375px;
    }

    .sale-cta .col-left{
        padding: 20px;
    }

    .sale-cta .col-left .tabs-nav .tab-item{
        padding: 10px;
        padding-bottom: 25px;
        font-size: 16px;
    }


    .sale-cta .col-left .tabs-content{
        padding: 10px;
    }

    .sale-cta .col-left .tab-content .tab-footer{
        flex-direction: column;
        gap: 10px;
    }

    .sale-cta .col-right{
        height: 450px;
    }

    .sale-cta .col-right .badge{
        right: 20px;
        font-size: 16px;
        
    }

    .news-slider .item{
        padding: 20px;
    }

    .section-bottom .col-left{
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .section-bottom .col-left .map > img{
        height: 230px;
    }

    .catalog-slider .item img, .catalog-grid .item img{
        height: 270px;
    }

    .catalog-slider .item .title, .catalog-grid .item .title{
        left: 20px;
        bottom: 20px;
    }

    .complex-hero .wrapper{
        padding: 20px;
    }

    .complex-hero .wrapper h1{
        font-size: 40px;
    }
    
    .complex-hero .wrapper h3{
        font-size: 22px;
    }

    .section-bottom .col-right form .form-footer{
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }

    .flat-hero .wrapper{
        padding: 10px;
        flex-direction: column;
    }

    .flat-hero .col-left{
        width: 100%;
    }

    .flat-hero .col-right{
        width: 100%;
    }

    .flat-hero .col-right .badges{
        flex-wrap: wrap;
    }

    .flat-hero .col-right .badges span{
        padding: 8px 12px;
    }

    .flat-hero .col-right h1{
        font-size: 40px;
    }

    .gallery-slider .gallery-swiper{
        padding: 20px;
    }

    .gallery-slider .swiper-slide img, .gallery-swiper .swiper-slide img{
        height: 150px;
        border-radius: 10px;
    }

    .section-terms .item{
        width: 100%;
    }

    .section-blog .item,
    .section-news--grid .item{
        width: 100%;
    }

    .section-blog .item .content .title,
    .section-news--grid .item .content .title{
        font-size: 20px;
    }

    section.pagination .pages a{
        width: 30px;
        min-width: 30px;
        height: 30px;
        font-size: 16px;
        line-height: 1em;
    }

    .related-news .item img{
        height: 300px;
    }

    .related-news .item .content .title{
        font-size: 20px;
    }

    .glightbox-container .ginner-container{
        padding: 0 20px;
    }

    .glightbox-mobile .goverlay{
        background: #000000e6;
    }

    .section-steps .info{
        font-size: 20px;
    }

    .section-steps .item{
        width: 100%;
    }

    .section-steps .item img{
        height: 350px;
    }





    .footer .footer-top .wrapper{
        gap: 30px;
    }

    .footer .footer-top .col-left{
        width: 100%;
    }

    .footer .footer-top .col{
        width: 100%;
        max-width: 100%;
    }

    .footer .footer-top .col-right{
        margin-top: 0;
        justify-content: flex-start;
    }

    .footer .footer-bottom{
        flex-direction: column;
        gap: 30px;
    }

    .footer .footer-bottom .col{
        width: 100%;
    }

    .section-404 .code{
        font-size: 170px;
    }

    .section-404 h1{
        font-size: 40px;
    }

    .section-404 .sub{
        font-size: 20px;
    }

    .section-404 .btn-group{
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .quote-popup__dialog{
        padding: 30px 20px;
    }

    .quote-popup__dialog h2{
        font-size: 26px;
        line-height: 1em;
    }

    form .accept-group input{
        width: 20px;
        min-width: 20px;
        height: 20px;
    }

    form .wpcf7-checkbox{
        flex-wrap: wrap;
    }
    
    .section-hero .hero-slide h1{
        font-size: 36px;
    }

    .section-hero .subtitle{
        font-size: 24px;
    }

    .section-hero .hero-slide__excerpt{
        font-size: 20px;
    }

    .section-parking .col-left{
        padding: 30px 15px;
        min-width: 0;
        width: 100%;
    }

    .section-parking .col-left .heading .title{
        font-size: 32px;
        line-height: 1em;
    }

    .section-parking .col-left .heading .sub{
        font-size: 22px;
        line-height: 1em;
    }

    .section-parking .col-left .btn{
        font-size: 14px;
    }

    .section-parking .col-left .icon-list .item .title{
        font-size: 18px;
    }
}



/* Базовая анимация привлечения внимания */
.hero-cta {
    animation: gentlePulse 3s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Остановка анимации при наведении, чтобы не мешать взаимодействию */
.hero-cta:hover {
    animation-play-state: paused;
    transform: scale(1.02); /* Лёгкое увеличение при наведении для обратной связи */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Определение ключевых кадров анимации */
@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    50% {
        transform: scale(1.02); /* Едва заметное увеличение */
        box-shadow: 0 8px 25px rgba(0,0,0,0.12); /* Более заметная тень */
    }
}


.logo a img {
       width: 260px;
}


.logo {
    width: 260px;
}


@media (max-width: 991px) {
.logo {
    width: 100%;
    }}

html {
  scroll-behavior: smooth;
}


.single-post-hero h1 {
 font-size: 50px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}


.single-post-hero
.section-heading .subtitle {
    font-size: 22px;
    font-weight: 600;
}


.title-main-page {
    font-size: 62px;
    font-weight: 700;
    margin: 0;
    color: var(--hero-title-color, var(--color-accent));
    line-height: 1em;
    max-width: 1000px;
}

@media (max-width: 991px) {
.title-main-page {
          font-size: 34px;
    }}



.seo-content .container .wrapper h1 {
    font-size: 46px;
}


@media (max-width: 991px) {
.seo-content .container .wrapper h1 {
          font-size: 30px;  
    }}


    @media (max-width: 400px) {
.seo-content .container .wrapper h1 {
          font-size: 26px;  
    }}

.entry-content {
    padding: 40px 12px;
    max-width: 1000px;
    margin: 0 auto;
}

.footer-info {
    margin: 10px 0 0;
    color: #cccccc;
}

.wpcf7 .wpcf7-submit:disabled{
    opacity: 0.5;
}

form .wpcf7-response-output {
    padding: 0!important;
    margin: 0!important;
    border: none!important;
    font-size: 10px;
    line-height: 10px;
    color: #61785e;
    position: absolute;
    bottom: -20px;
    max-width: 100%;
}