@media screen and (max-width: 1200px) {
    #about .about-info {
        flex-direction: column;
    }

    #about .about-info .about-content {
        width: 90%;
        margin: 0 0 0 auto;
        margin-top: -100px;
        margin-bottom: 20px;
        min-height: 280px;
    }

    #about .about-info picture {
        width: 100%;
    }

    #about .owl-theme .owl-nav {
        justify-content: flex-end;
        width: 100%;
        position: relative;
    }

    #about-complex .owl-stage-outer::before {
        right: 15%;
        width: 360px;

        height: 100px;

        top: -70px;
        bottom: 0;
    }
}

@media screen and (max-width: 1024px) {
    .view360 {
        display: none;
    }

    #planning-solutions .owl-nav {

        display: flex;
    }
}

@media screen and (max-width: 992px) {.owl-stage{padding-left:0px !important;}
    #hero {
        background-image: url(../assets/hero-banner-m.jpg);
        height: 700px;
    }

    section, footer {
    padding: 108px 0;
    margin-bottom: -1px;
}

    #about-complex .owl-nav {
        position: relative;
        width: 100%;
    }

    #about-complex .owl-nav::after {
        width: calc(100% - 160px);
    }

    #about-complex .owl-stage-outer::before {
        right: -5%;
        width: 300px;
        height: 100px;
        top: 0;
        bottom: unset;
    }

    .tab-list-container {

        display: block;
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    #about .about-info p.large {
        font-size: 13px;
        height: auto;
        overflow: hidden;
    }

    #about .about-info .about-content {
        min-height: auto;
    }

    #complex_360 .box_360 .title {
        position: absolute;
        bottom: 45px;
        left: 25px;
        font-size:20px;
    }

    h1 {
        font-size: 28px;
    }

    #complex-hotspots .wrapper {
        width: 150%;
        max-width: 150%;
        transform: translate(-15%, 0px);
    }


    #comfortable-life .content {
        width: 65%;
        float: right;
        background: #fff;
        position: relative;
        margin-top: -220px;
        border-radius: 40px 0 0 0;
        padding: 30px 30px 100px;
        left: 0;
    }
}

@media screen and (max-width: 560px) {
    #highlight .highlight-item {
        flex-direction: column;
        gap: 8px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    section,
    footer {
        padding: 60px 0;
    }

    #highlight .highlight-item span {
        font-size: 16px;
    }

    #hero {
        height: 500px;
        background-size: 120%;
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #302428;
    }

    h1 {
        font-size: 24px;
        line-height: 34px;
    }

    .navbar-brand img {
        width: 100px;
    }

    .preloader .logo {
        width: 90px;
    }

    .loading-bar-container {
        width: 60%;
    }

    section#map {
        padding-bottom: 0;
    }



    #advantages-apartments .steps span.step-2 {

        top: -40px;
        left: 0;
    }

    #advantages-apartments .steps {
        padding-right: 20px;
    }

    #advantages-apartments .steps span.step-3 {

        right: 20px;
        top: -40px;
    }

    #advantages-apartments .steps span.step-1 {

        right: 20px;
        top: -30px;
    }

    .btn {
        padding: 12px 45px;

    }

    #city-center .btn-nav .icon {
    width: 42px;
    height: 42px;
}
#city-center a.btn-nav.btnNext {
    right: 0%;
}
}

@media screen and (max-width: 480px) {
    h3 {
        font-size: 18px;
    }

    .amenities h3 {
        font-size: 20px;
    }

    p.large {
        font-size: 16px;
    }

    .scale_img {
        transform: scale(1.08);
    }

    #comfortable-life .content {
        width: 90%;
        float: left;
        background: #fff;
        position: relative;
        margin-top: -75px;
        border-radius: 0 40px 0 0;
        padding: 30px 30px 64px 15px;
        padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 64px;
        padding-left: 15px;
        left: -12px;
        margin-bottom: -160px;
    }

    #comfortable-life img {
        width: 100%;
    }

    #about-complex .owl-stage-outer::before {
        right: 0;
        width: 190px;
        height: 100px;
        top: 10px;
    }

    #complex_360 .box_360 .title {
    
    bottom: 55px;
   
}#complex_360 .box_360 .icon {
   
    
    top: -40px;
   
    width: 70px;
    height: 70px;
 
}
}
@media (min-width: 320px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x);
    }
    .navbar-expand-lg .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        transform: none !important;
        transition: none;
    }
    .navbar-expand-lg .offcanvas .offcanvas-header {
        display: none;
    }
    .navbar-expand-lg .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
    }
}