@media (max-width: 2600px) and (min-width: 767px) {
        #development, .panorama-light, #citypark, .cols-2, #place, #thesquare, #thesquare img, 
    #offices, #offices img, #residential, #showroom, #parking-gym, #hover-img {  /*#theproject, #parking-gym-spa*/ 
        height: calc(100vh - 93px);
    }
}

@media (max-width: 1600px) {
    .mt-60 {
        margin-top: 60px;
        width: 90%;
        }
    .lg-center .hover-list {
        margin-top: 0;
    }
    #hover-img p {
        width: 70%;
    }
    .hover-list li {
        font-size: 22px;
        padding: 12px 0 6px;
    }
    .hover-list li:hover {
        font-size: 26px;
    }
    .lg-center {
        justify-content: unset;
    }
    .fullscreen-menu .nav-section {
        margin-left: 5%;
    }
    .nav-section img {
        width: 150px;
    }
    .fullscreen-search h2 {
        font-size: 40px;
    }
    .fullscreen-search p {
        font-size: 16px;
    }
    
    .fullscreen-search .input-title {
        font-size: 16px;
    }
    
    .search-form select {
        font-size: 14px;
    }
    .search-form .search-btn {
        font-size: 14px;
    }
    .container-flex svg {
        width: 250px;
    }
    #theproject h2 {
        font-size: 40px !important;
        margin-bottom: 20px !important;
    }
    #theproject p {
        font-size: 16px !important;
        line-height: 26px !important;
    }
    #development p {
        font-size: 28px !important;
        line-height: 35px !important;
        width: 85%;
    }
    #development p.development-description {
        font-size: 16px !important;
        line-height: 24px !important;
        margin-top: 50px;
    }
    #development p.fs-33 {
        font-size: 24px !important;
        margin: 8px;
    }
    #theproject .bg-img {
        background-position: 0px -50px;
    }
    h1 {
        font-size: 50px !important;
    }
    .panorama-light h2, .cols-2 h2 {
        font-size: 30px !important;
    }
    .cols-2 p {
        font-size: 16px;
        margin: 0;
    }
    #plus-of-the-project h1, #offices h2, #parking-spa h2, #gym h2 {
        font-size: 35px !important;
    }
    .search-form-container h2 {
        font-size: 35px !important;
    }
    .grigio-text {
        margin-bottom: 10px;
        line-height: 21px;
    }
    .multi-range-slider {
        height: 20px;
        margin-bottom: 15px;
    }
    .fullscreen-search .input-title {
        font-size: 14px !important;
    }
    .search-form select {
        height: 33px;
        padding: 0 30px;
        margin: 0 0 12px;
    }
    .dual-range-wrapper {
        margin-bottom: 10px;
    }
    .search-btn {
        margin-top: 5px;
        height: 35px;
    }
    .search-tabs {
        margin-bottom: 15px;
    }
    .tab-content > .input-title:first-child {
        margin-bottom: 25px;
    }
    #residential .bg-white.d-flex { 
        justify-content: start !important;
    }
}

@media (max-width: 1600px) and (min-width: 767px) {
    .cols-2 {
        width: 60% !important;
    }
    .panorama-light .container {
        width: 50%;
        margin: 0 auto;
    }
    #citypark img {
        height: calc(100vh - 93px);
        object-fit: cover;
    }
    #selectTower {
        height: calc(100vh - 93px) !important;
    }
    #selectTower img {
        height: 114%;
    }
    .rows-3 .col-md-6 {
        width: 44.5%;
    }
    .map-img {
        width: 81%;
        float: right;
    }
    #plus-of-the-project {
        min-height: unset;
        height: calc(100vh - 93px);
    }
    #towerViews {
        height: calc(100vh - 93px);
        object-fit: cover;
    }
    .bg-white {
        padding: 2rem;
    }
    #showroom img {
        height: calc(100vh - 93px);
        width: auto;
    }
    .img10 img {
        position: relative;
        bottom: 50px;
        z-index: -20;
    }

    /* Stabilize section-2 columns to 50/50 to avoid width reflow while sticky */
    #theproject .img1,
    #static-text-placeholder {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 1400px) {
    .mob-68 {
        width: 40%;
    }
    .mob-126 {
        width: 60%;
    }
}

@media (max-width: 1200px) {
    h1 {
        font-size: 40px !important;
    }
    h2 {
        font-size: 30px !important;
    }
    .tower-info {
        padding: 40px 20px;
    }
    #development, #residential { 
        height: auto;
    }
}

@media (max-width: 1080px) {
    .btn.light-btn-short {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    #top {
        bottom: 20px;
        left: 20px;
        width: 60px;
        height: 60px;
    }
    
    #top svg {
        width: 60px;
        height: 60px;
    }
    .overlay {
        padding: 15px;
    }
    
    .overlay #closeOverlay, .overlay #closeOverlayContact {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }

    #overlay-request {
        overflow-y: auto;
    }
    
    #overlay-request .fs-30 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    #overlay-request .max-1000 {
        font-size: 16px;
        line-height: 20px;
    }
    
    .overlay-logo {
        max-width: 200px;
        margin-bottom: 20px;
    }
    
    .overlay > div:last-child {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .back-button:not(.header .back-button) {
        position: fixed !important;
        top: 75px !important;
        left: 15px !important;
        z-index: 5000 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background-color: #867D5C !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    .back-button:not(.header .back-button) svg {
        stroke: #ffffff !important;
        width: 16px !important;
        height: 16px !important;
    }
    
    .header .back-button {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-right: 14px !important;
    }
    }

@media (max-width: 767px) {
    .call-buttons {
        margin-top: 30px;
        width: 100%;
    }
    .call-buttons a {
        display: block;
        width: 100%;
        margin: 10px 0;
    }
    .unit-page .unit-container {
        flex-direction: column-reverse !important;
        justify-content: space-around !important;
    }
    .lg-center {
        width: 100%;
    }
    .lg-center .hover-list {
        margin-top: 50px;
    }
    header .logo, .fullscreen-menu .logo {
        width: 150px !important;
    }
    .mob-reverse {
        flex-direction: column;
    }
    .mob-rev {
        flex-direction: column-reverse;
    }
    #development .lightColor-bg {
        padding: 32px;
    }
    .mob-left {
        text-align: left !important;
    }
    .mob-hide {
        display: none !important;
    }
    .contactus a {
        font-size: 1rem !important;
    }
    .mob-wrap {
        flex-wrap: wrap !important;
    }
    .mob-120 {
        width: 120px;
    }
    .mob-mt-40 {
        margin-top: 40px;
    }
    .mob-mt-40 h1 {
        font-size: 30px !important;
    }
    #place .text-end, #place .text-center {
        text-align: left !important;
    }
    .mob-68 {
        width: 68px;
        margin: 20px 0;
    }
    .mob-126 {
        width: 126px;
        margin: 20px 0;
    }
    #place .pr-30 {
        padding: 30px;
    }
    .contactus a {
        font-size: 20px;
        text-align: center;
    }
    .lightColor-bg .mob-left {
        padding-right: 0;
    }
    .bg-white, .mainColor-bg {
        padding: 2rem;
    }
    .fs-33 {
        margin: 1rem 0;
    }
    .footer {
        text-align: center;
        padding: 20px;
    }
    .footer p, .footer h5, .footer a {
        padding-right: 0;
    }
    .footer .d-flex {
        gap: 20px;
    }
    .footer img {
        width: 180px;
    }
    .fullscreen-menu .nav-section {
        padding-top: 0;
        /* justify-content: center; */
        justify-content: space-around;
    }
    .menu-item {
        margin: 5px 0;
    }

    #plus-of-the-project {
        flex-direction: row !important;
        flex-wrap: nowrap;
    }
    #plus-of-the-project .flex-box {
        flex: 1 1 33.333% !important;
        width: auto !important;
        padding: 0.5rem !important;
    }
    #plus-of-the-project .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #plus-of-the-project svg {
        width: 60px !important;
    }
    #plus-of-the-project .item-info-div {
        margin-left: 0 !important;
    }
    #plus-of-the-project .border-top-bottom,
    #plus-of-the-project .border-top-bottom-dark {
        width: 100%; 
    }
    #plus-of-the-project .border-top-bottom h1,
    #plus-of-the-project .border-top-bottom-dark h1 {
        font-size: 1.2rem !important;
    }
    #plus-of-the-project p {
        font-size: 0.9rem !important;
        line-height: 1.2;
    }

    .header-items {
        flex-direction: row-reverse;
    }

    .desktop-hide  {
        display: block;
    }

    .logo-link {
        /* margin-right: 0 !important; */
        margin-right: 110px !important;
    }

    .overlay .btn.light-btn-short {
        width: 100%;
        margin-top: 0;
        display: block;

    }
    .header-btn.desktop-hide {
        display: inline;
    }
    .nav-section {
        text-align: center;
    }
    .fullscreen-menu .nav-section-bottom a {
        font-size: 30px;
    }
    .flex-box {
        align-items: start;
    } 
    .flex-box .container {
        margin-top: 30px;
    }
    #towerViews {
        height: unset;
    }
    #theproject {
        /* flex-direction: column-reverse; */
    }
    #theproject p {
        padding-left: unset;
    }
    #theproject .brochure-btn {
        margin-left: 0;
    }
    #theproject, #development {
        height: unset;
    }
    .slick-slide {
        height: unset !important;
    }
    .carousel-item {
        width: 35% !important;
    }
    .carousel-block .slick-slide {
        margin: 0 auto !important;
        display: block;
        padding: 0 55px !important;
    }
    .carousel-item h3 {
        font-size: 18px !important;
        text-align: left;
    }
    .mt-80 {
        margin-top: 0;
    }
    .img_slider {
        margin-top: 0 !important;
        padding: 50px 0;
    }
    .carousel-block {
        min-height: unset !important;
    }
    .leed-certification .container {
        gap: 40px;
    }
    .leed-certification .container .text-center {
        text-align: left !important;
    }
    .leed-certification {
        padding: 60px 0;
    }
    .leed-certification h1 {
        font-size: 30px !important;
    }
    .leed-certification p {
        font-size: 16px;
        line-height: 30px;
    }
    .hint-tower, .tower-info-panel {
        display: none !important;
    }
    .contactus a {
        display: block;
        width: 80%;
        margin: 10px auto;
    }
    .contactus p {
        font-size: 25px !important;
    }
    .contactus {
        padding: 45px 0;
    }
    #towers-section {
        padding: 0;
    }
    #towers-section .d-flex {
        flex-wrap: wrap;
    }
    .mt-minus {
        margin-top: 0;
        flex-direction: column-reverse;
    }
    #towers-section .d-flex .col-12 {
        width: 100%;
    }
    .info-towers {
        padding: 30px;
    }
    .info-towers h4 {
        font-size: 30px;
    }
    .fs-30 {
        font-size: 20px;
    }
    .section10-image-container, .section10-label-2 h2 {
        display: none !important;
    }
    .section10-label-2 {
        position: relative !important;
    }
    .section10-label-1, .section10-label-2 {
        width: 100% !important;
    }
    #residential h2 {
        font-size: 32px !important;
    }
    .section10-text-container.label-1 {
        margin-top: 50px;
    }
    .display-none-img {
        display: block;
    }
    .display-none-img img {
        width: 100%;
    }

    #plus-of-the-project {
    flex-direction: column !important; 
    height: 100vh;                     
    overflow: hidden;                  
  }

  #plus-of-the-project .flex-box {
    width: 100% !important;            
    flex: none !important;             
    padding: 0.5rem !important;

    height: 11vh;                      
    overflow: hidden;
    cursor: pointer;
    transition: height 0.5s ease;
  }

  #plus-of-the-project .flex-box.active {
    height: 60vh;                    
    overflow: auto;       
    transition: 1s ease;            
  }
  
  #plus-of-the-project .flex-box:hover ~ .flex-box,
  #plus-of-the-project:hover .flex-box:not(:hover) {
    width: 100% !important;
  }

  .inactive {
    transition: 1s ease !important;      
  }
  .tower-select-mobile {
    display: block;
    color: #867D5C;
    padding: 0 15px;
  }

  #hover-img .col-6 {
    width: 100% !important;
  }

  .hover-arrow {
    display: none;
  }

  .hover-list li {
    border: none;
    background-color: #EAE6E2;
    padding: 10px 32px;
    border-top-right-radius: 100px;
    width: 70%;
    margin-top: -53px;
    position: relative;
  }
  .hover-list {
    padding: 0;
    margin-top: 100px;
  }

  .hover-img-wrap {
    overflow: hidden;
    max-height: 90px; 
    transition: max-height 0.4s ease;
  }

  .hover-list li.active + .hover-img-wrap {
    max-height: 500px; 
  }

  .hover-list li.active, .hover-list li:hover {
    /* font-weight: normal; */
    /* font-size: 22px; */
  }

  #parking-gym-spa {
    display: none;
  }

}


@media (max-width: 480px) {
    .fullscreen-menu .nav-section a {
        font-size: 28px;
    }
    #top {
        bottom: 15px;
        left: 15px;
        width: 50px;
        height: 50px;
    }
    
    #top svg {
        width: 50px;
        height: 50px;
    }
    .overlay .fs-30 {
        font-size: 20px;
        margin-bottom: 25px;
    }
    
    .overlay-logo {
        max-width: 160px !important;
    }
    
    .overlay #closeOverlay {
        top: 30px;
        right: 30px;
        width: 35px;
        height: 35px;
    }
    .back-button {
        width: 34px !important;
        height: 34px !important;
        top: 70px !important;
        left: 15px !important;
    }
    .back-button svg {
        width: 14px !important;
        height: 14px !important;
    }
    .floor-plan-container .header {
        gap: 4px !important;
    }
}

@media (max-width: 400px) {
    #overlay-request.overlay.justify-content-center {
        justify-content: unset !important;
    }
}

@media (min-width: 769px) {
  #parking-gym-spa {
    position: relative;
    overflow: hidden;
  }
  #parking-gym-spa .change-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  #parking-gym-spa .section12-div-1 {
    z-index: 2;
    height: 100vh; /* animated via JS */
    overflow: hidden;
  }
  #parking-gym-spa .section12-div-2 {
    z-index: 1;
    height: 100vh;
  }
}