@media (max-width:1899px){
    .dropdown-menu[data-bs-popper] {
        left: 40px;
    }

    .navbar-expand-lg .navbar-nav {
        margin-right: 30px;
    }
}

@media (max-width:1699px) {

    /* real-estate css */
    .real-estate-img {
        width: 100%;
        max-width: 80%;
        height: 100%;
    }

    .real-estate-img::before {
        width: 942px;
        height: 942px;
    }

    .real-estate-content {
        width: 50%;
        max-width: 584px;
        margin-right: 140px;
    }

    /* ---------- reference-detail css ---------- */

    /* reforma-info */
    .reforma-info-right:before {
        width: 836px;
        height: 836px;
    }
}

@media (max-width:1599px) {
    :root {
        --fs-30: 28px;
        --fs-28: 26px;
    }

    /* header css */
    .navbar-nav .nav-item .nav-link {
        margin: 0 60px 0 0;
    }

    .navbar-nav .nav-item:last-child .nav-link {
        padding: 0 0 0 60px;
    }

    .dropdown-menu[data-bs-popper]{
        left: 10px;
    }

    /* banner css */
    .home-banner-wrp .banner-slide-item .slide-content {
        max-width: 1270px;
    }

    .home-banner-wrp .slide-content .main-title *,
    .home-banner-wrp .slide-content .sub-title *{
        line-height: normal;
    }

    /* real-estate css */
    .real-estate-content {
        max-width: 615px;
    }

    .real-estate-img::before {
        width: 902px;
        height: 902px;
    }

    /* ---------- reference-detail css ---------- */

    /* reforma-info */
    .reforma-info-right:before {
        width: 846px;
        height: 846px;
    }

    .reforma-info-right .details {
        width: 100%;
        max-width: 570px;
    }

    /* ---------- reference-detail css ---------- */

    .horizontal-card .horizontal-card-container .content{
        padding: 0 0 0 20px;
    }

    .horizontal-card .horizontal-card-container.flex-row-reverse .content{
        padding: 0 20px 0 0;
    }
}

@media (max-width:1499px) {

    /* real-estate css */
    .real-estate-img::before {
        width: 852px;
        height: 852px;
    }

    /* ---------- reference-detail css ---------- */

    /* reference-banner */
    .reference-banner-wrp .swiper-slide::after {
        height: 200px;
    }

    /* reference-banner */

    /* reforma-info */
    .reforma-info .reforma-info-left {
        width: 35%;
    }

    .reforma-info-right:before {
        width: 816px;
        height: 816px;
        top: -295px;
    }

    .reforma-info-right .details {
        width: 100%;
        max-width: 530px;
    }

    /* ---------- reference-detail css ---------- */

    /* error css  */

    .section-404 {
        padding: 220px 0;
    }

    .detail-404 h2 {
        font-size: 60px;
        margin-bottom: 50px;
    }
    /* error css  */

    /* typography css  */

    .typography-content h1 { font-size: 50px; line-height: 60px; }
    .typography-content h2 { font-size: 40px; line-height: 50px; }
    .typography-content h3 { font-size: 35px; line-height: 42px; }
    .typography-content h4 { font-size: 30px; line-height: 38px; }
    .typography-content h5 { font-size: 25px; line-height: 33px; }
    .typography-content h6 { font-size: 22px; line-height: 30px; }

    /* typography css  */
}

@media (max-width:1399px) {

    /* banner css */
    .home-banner-wrp .banner-slide-item .slide-content {
        max-width: 1170px;
    }

    .home-banner-wrp .banner-slide-item .slide-content .main-title * {
        line-height: 52px;
    }

    /* real-estate css */
    .real-estate-content {
        max-width: 555px;
    }

    .real-estate-img::before {
        width: 802px;
        height: 802px;
    }

    /* ---------- reference-detail css ---------- */

    /* reforma-info */
    .reforma-info-right:before {
        width: 786px;
        height: 786px;
        top: -295px;
    }

    /* ---------- reference-detail css ---------- */

    .references.services,
    .references.references-page {
        padding: 200px 0 86px;
    }

    
}

@media (max-width:1299px) {
    :root {
        --fs-50: 46px;
        --fs-46: 38px;
        --fs-40: 38px;
    }

    /* banner css */
    .banner-slide-item .slide-content {
        max-width: 1020px;
    }

    /* real-estate css */
    .real-estate-img {
        max-width: 504px;
    }

    .real-estate-img::before {
        width: 762px;
        height: 762px;
    }

    /* ---------- reference-detail css ---------- */

    /* reforma-info */
    .reforma-info-right:before {
        width: 726px;
        height: 726px;
        top: -205px;
    }

    .reforma-info-right .details {
        width: 100%;
        max-width: 450px;
    }

    /* ---------- reference-detail css ---------- */

    /* ---------- reference css ---------- */

    .references.services, .references.references-page {
        padding: 165px 0 86px;
    }

    /* ---------- reference css ---------- */



    /* typography css  */
    .typography-content h1 { font-size: 50px; line-height: 60px; }
    .typography-content h2 { font-size: 40px; line-height: 50px; }
    .typography-content h3 { font-size: 35px; line-height: 42px; }
    .typography-content h4 { font-size: 30px; line-height: 38px; }
    .typography-content h5 { font-size: 25px; line-height: 33px; }
    .typography-content h6 { font-size: 22px; line-height: 30px; }
    /* typography css  */
}

@media (max-width: 1199px) {
    :root {
        --fs-50: 42px;
        --fs-48: 40px;
        --fs-46: 36px;
        --fs-40: 34px;
        --fs-38: 32px;
        --fs-30: 26px;
        --fs-28: 24px;
        --fs-24: 22px;
        --fs-22: 20px;
    }

    .scroll-down {
        width: 100%;
        max-width: 30px;
        left: 35px;
        bottom: 30px;
    }


    /* header css */
    .navbar .navbar-brand {
        max-width: 192px;
    }

    .navbar-nav .nav-item .nav-link {
        margin: 0 40px 0 0;
    }

    .navbar-nav .nav-item:last-child .nav-link {
        padding: 0 0 0 40px;
    }

    .dropdown-menu[data-bs-popper] {
        left: -30px;
    }

    /* banner css */
    .home-banner-wrp .banner-slide-item .slide-content {
        max-width: 910px;
    }

    .swiper-pagination {
        bottom: 20px !important;
    }

    .swiper-pagination-bullet {
        width: 55px;
        height: 15px;
    }

    /* real-estate  */
    .real-estate-img {
        max-width: 354px;
    }

    .real-estate-img::before {
        width: 602px;
        height: 602px;
        border: 70px solid var(--secondary);
    }

    .real-estate-content {
        margin-right: 110px;
    }

    .real-estate-content .section-title * {
        line-height: normal;
    }

    .real-estate-content .section-title {
    margin-bottom: 30px;
    }

    .references .references-card .card .card-content .disc * {
        word-break: break-word;
    }

    /* ---------- reference-detail css ---------- */

    /* reference-banner */
    .reference-banner-wrp .swiper-slide::after {
        height: 170px;
    }

    .reference-banner-wrp .reference-slide-item .slide-content {
        padding-top: 45px;
        padding-bottom: 75px;
    }

    .reforma-info-left .action-link {
        margin-top: 70px;
        margin-right: 70px;
    }

    .references .references-card {
        gap: 60px ;
    }

    /* reference-banner */

    /* reforma-info css */
    .reforma-info-right {
        width: 40%;
    }

    .reforma-info-right:before {
        width: 666px;
        height: 666px;
        top: -165px;
        border: 70px solid;
    }

    .reforma-info-right .details {
        width: 100%;
        max-width: 385px;
    }

    .reforma-info-left table td.heading {
        margin-right: 55px;
    }

    .reforma-info .reforma-info-left {
        margin: 0 auto 0 0;
    }

    /* ---------- reference-detail css ---------- */

    /* typography css  */

    .typography-content h1 { font-size: 45px; line-height: 55px; margin-bottom: 30px; }
    .typography-content h2 { font-size: 40px; line-height: 50px; margin-bottom: 30px; }
    .typography-content h3 { font-size: 35px; line-height: 42px; margin-bottom: 30px; }
    .typography-content h4 { font-size: 30px; line-height: 38px; }
    .typography-content h5 { font-size: 25px; line-height: 33px; }
    .typography-content h6 { font-size: 22px; line-height: 30px; }

    /* typography css  */
}

@media (max-width: 991px) {
    :root {
        --fs-50: 40px;
        --fs-48: 38px;
        --fs-46: 32px;
        --fs-40: 30px;
        --fs-38: 32px;
        --fs-30: 22px;
        --fs-28: 20px;
    }

    .scroll-down {
        width: 100%;
        max-width: 30px;
        left: 30px;
    }

    /* header css */
    .navbar .navbar-brand {
        max-width: 182px;
    }
    
    .header .navbar-toggler {
        position: relative;
        z-index: 9;
        box-shadow: none;
        border: none;
        padding: 0;
        z-index: 9999;
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    }
    
    .header .navbar-toggler.open span:first-child {
        top: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }
    
    .header .navbar-toggler.open span:nth-child(2) {
        display: none;
    }
    
    .header .navbar-toggler.open span:last-child {
        top: -2px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
    }
    
    .header .navbar-toggler span {
        background-color: var(--primary);
        position: relative;
        width: 18px;
        height: 2px;
        display: block;
        margin-bottom: 3px;
        transition:all 0.5s ease-in-out;
        -webkit-transition:all 0.5s ease-in-out;
        -moz-transition:all 0.5s ease-in-out;
        -ms-transition:all 0.5s ease-in-out;
        -o-transition:all 0.5s ease-in-out;
    }

    .header .navbar-toggler span:last-child {
        margin-bottom: 0;
    }
    
    .header .navbar-collapse {
        position: fixed;
        right: -100%;
        background-color: var(--white);
        top: 0;
        bottom: 0;
        max-width: 100%;
        width: 100%;
        height: 100%;
        padding: 122px 24px;
        overflow: auto;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        z-index: 999;
    }

    .navbar-expand-lg .navbar-nav{
        margin-right: 0px;
    }
    
    .header .navbar-collapse.show {
        right: 0;
        height: auto;
    }
    
    .header .navbar-collapse::after {
        content: "";
        position: fixed;
        top: 0;
        right: -100%;
        height: 72px;
        background-color: #FFF;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    .header .navbar-collapse.show::after {
        right: 0;
        left: 0;
    }

    .navbar .navbar-nav .nav-item {
        margin: 0;
        margin-bottom: 28px;
    }

    .navbar .navbar-brand {
        position: relative;
        z-index: 9999;
    }

    .navbar-nav .nav-item .nav-link {
        padding: 0 !important;
    }

    .navbar-nav .nav-item:last-child .nav-link::before {
        display: none;
    }

    .navbar-nav .dropdown-toggle::after {
        right: 0;
    }

    .navbar .navbar-nav .dropdown-menu .nav-item {
        margin-bottom: 0px;
    }

    /* banner css  */
    .home-banner-wrp .banner-slide-item .slide-content {
        max-width: 710px;
    }

    .home-banner-wrp .slide-content .main-title * {
        line-height: 40px;
    }

    .home-banner-wrp.slide-content .sub-title * {
        line-height: 30px;
    }

    .home-banner-wrp .swiper-pagination-bullet {
        width: 45px;
        height: 10px;
    }

    /* .banner-slide-item .slide-img {
        height: 650px;
    } */

    /* real-estate  */
    .real-estate-right {
        width: 100%;
        max-width: 100%;
    }

    .real-estate-main {
        flex-direction: column-reverse;
    }

    .real-estate-right {
        margin: 0 auto;
    }

    .real-estate-img {
        max-width: 364px;
        margin-bottom: 40px;
    }

    .real-estate-img::before {
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        top: -110px;
    }

    .real-estate-content {
        width: 100%;
        max-width: 100%;
        margin: 70px 0 0;
    }

    .real-estate-content .section-title {
        margin-bottom: 30px;
    }

    .rea-estate-btn {
        text-align: left;
        margin: 30px 0 0 0;
    }

    /* ---------- reference-detail css ---------- */

    /* reference-banner */
    .reference-banner-wrp .slide-content .main-title * {
        line-height: 56px;
    }

    .reference-banner-wrp .slide-content {
        padding-top: 35px;
    }

    /* reference-banner */

    /* reforma-info css */
    .reforma-info-wrp {
        flex-direction: column;
        padding: 66px 0;
    }

    .reforma-info .reforma-info-left {
        width: 100%;
    }

    .reforma-info-right {
        width: 100%;
        max-width: 100%;
        margin-top: 40px;
    }

    .reforma-info-left .action-link {
        margin-top: 30px;
    }

    .reforma-info-right:before {
        top: 0;
        left: 50%;
    }

    .reforma-info-right .details {
        max-width: 100%;
    }

    .reforma-info-right:before {
        width: 726px;
        height: 706px;
        top: -30px;
        left: 50%;
    }

    .reforma-info-right .details {
        max-width: 537px;
        padding: 100px;
    }

    /* ---------- reference-detail css ---------- */

    /* .contact-us {
        padding: 80px 20px 80px;
    } */

    .references {
        padding: 80px 0;
    }

    .references.services,
    .references.references-page {
        padding: 130px 0 60px;
    }

    .references .references-card {
        gap: 40px;
    }

    .references .references-card .card {
        flex: 0 0 calc(33% - 25px);
    }

    .references .action-link {
        margin-top: 40px;
    }

    /* horizontal-card Start */
    .horizontal-card .horizontal-card-container {
        flex-direction: column-reverse;
        padding: 60px 20px;
    }

    .horizontal-card .horizontal-card-container .image {
        width: 100%;
        height: 388px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .horizontal-card .horizontal-card-container .content {
        width: 100%;
    }

    .horizontal-card .content .content-details {
        max-width: 100%;
        width: 100%;
        margin-right: 0;
    }

    .horizontal-card .content .content-details .title * {
        line-height: normal;
        margin-bottom: 16px;
    }

    .horizontal-card .horizontal-card-container.flex-row-reverse {
        flex-direction: column-reverse !important;
    }

    .horizontal-card .horizontal-card-container.flex-row-reverse .content .content-details {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
    }

    .horizontal-card .horizontal-card-container .content {
        padding: 0;
    }

    /* horizontal-card End */


    /* contact */
    .contact {
        padding: 140px 0 80px 0;
    }

    .contact .contact-container .contact-card {
        max-width: 262px;
        flex: auto;
    }

    .contact .contact-container .contact-card-group {
        text-align: center;
        justify-content: center;
        gap: 50px 20px;
    }

    .contact .contact-card .social {
        justify-content: center;
    }

    .contact .contact-container .heading .disc {
        margin-bottom: 40px;
    }

    .contact .contact-container .heading .title * {
        line-height: 38px;
        margin-bottom: 16px;
    }

    .contact-container .heading{
        text-align: center;
    }
    /* contact */

    /* typography css  */

    .typography-content h1 { font-size: 42px; line-height: 50px; margin-bottom: 30px; }
    .typography-content h2 { font-size: 35px; line-height: 42px; margin-bottom: 30px; }
    .typography-content h3 { font-size: 33px; line-height: 40px; margin-bottom: 30px; }
    .typography-content h4 { font-size: 28px; line-height: 35px; }
    .typography-content h5 { font-size: 25px; line-height: 33px; }
    .typography-content h6 { font-size: 22px; line-height: 30px; }
    /* typography css  */
}

@media (max-width: 767px) {
    :root {
        --fs-50: 36px;
        --fs-48: 34px;
        --fs-46: 30px;
        --fs-40: 28px;
        --fs-38: 24px;
        --fs-30: 22px;
        --fs-22: 16px;
        --fs-28: 20px;
        --fs-24: 18px;
        --fs-18: 16px;
    }

    /* header css */
    .navbar .navbar-brand {
        max-width: 192px;
    }

    .header .navbar-collapse {
        padding: 112px 24px
    }

    /* banner css */
    .home-banner-wrp .slide-content .main-title * {
        line-height: 34px;
    }

    .home-banner-wrp .slide-content {
        max-width: calc(100% + 40px);
        padding: 0 20px;
    }

    .home-banner-wrp .slide-content .main-title {
        margin-bottom: 10px;
    }

    .scroll-down {
        bottom: 65px;
        left: 25px;
    }

    /* real-estate */
    .real-estate-img {
        max-width: 375px;
    }

    .real-estate-img::before {
        width: 592px;
        height: 592px;
        top: -90px;
    }

    /* reforma-info css */
    .reforma-info-right:before {
        width: 706px;
        height: 686px;
        top: -60px;
        left: 50%;
    }

    .reforma-info-right {
        margin-top: 70px;
    }

    .reforma-info-right .details {
        padding: 90px;
    }

    /* ---------- reference-detail css ---------- */

    /* .contact-us {
        padding: 60px 20px 60px;
    } */

    .references {
        padding: 60px 0;
    }

    .references .references-card {
        gap: 20px;
    }

    .references .references-card .card {
        flex: 0 0 calc(50% - 12px);
        /* flex: 0 0 calc(33% - 12px); */
    }

    .references .references-card .card .card-image {
        height: 206px;
    }

    .references.services .references-card .card .card-content .disc * {
        line-height: 24px;
    }

    .footer .footer-container {
        flex-direction: column;
        gap: 20px;
    }

    .footer .footer-container .copy * {
        text-align: center;
    }


    /* horizontal-card Start */
    .horizontal-card .horizontal-card-container .image {
        height: 300px;
    }

    .horizontal-card .content .content-details .disc * {
        line-height: normal;
    }

    /* horizontal-card End */

    /* Contact Start */
    .contact {
        padding: 120px 0 60px 0;
    }

    .contact .contact-card .social {
        margin-top: 10px;
    }

    .contact .contact-container .contact-card-group {
        gap: 40px 20px;
    }

    
    /* Contact End */

    /* typography css  */

    .typography-content h1 { font-size: 35px; line-height: 42px; margin-bottom: 30px; }
    .typography-content h2 { font-size: 30px; line-height: 40px; margin-bottom: 30px; }
    .typography-content h3 { font-size: 28px; line-height: 35px; margin-bottom: 30px; }
    .typography-content h4 { font-size: 25px; line-height: 33px; margin-bottom: 20px; }
    .typography-content h5 { font-size: 22px; line-height: 30px; }
    .typography-content h6 { font-size: 20px; line-height: 28px; }

    /* typography css  */
}

@media(max-width: 575px) {
    :root {
        --fs-50: 28px;
        --fs-48: 26px;
        --fs-40: 24px;
    }

    .btn {
        padding: 12px 20px;
    }

    .scroll-down {
        width: 100%;
        max-width: 20px;
    }

    /* banner css  */
    .home-banner-wrp .slide-content .main-title ,
    .home-banner-wrp .slide-content .sub-title {
        text-align: center !important;
    }

    .home-banner-wrp .slide-content .main-title *,
    .home-banner-wrp .slide-content .sub-title *{
        word-break: break-word;
        line-height: normal;
    }

    .scroll-down {
        bottom: 15px;
        left: 15px;
    }

    /* real-estate  */
    .real-estate-img {
        max-width: 245px;
    }

    .real-estate-img::before {
        width: 412px;
        height: 412px;
        top: -80px;
        border: 40px solid;
    }

    .real-estate-content {
        margin: 40px 0 0;
    }

    .real-estate-content .section-title {
        margin-bottom: 20px;
    }

    .real-estate-content .section-title * {
        line-height: 26px;
    }

    .real-estate-content .details * {
        line-height: 24px;
    }

    
    /* ---------- reference-detail css ----------- */
    
    /* reference-banner css */
    .reference-banner-wrp .reference-slide-item .slide-content {
        padding-top: 25px;
        padding-bottom: 65px;
    }
    
    .reference-banner-wrp .slide-content {
        padding-bottom: 75px;
    }
    
    /* reference-info css  */
    .reference-banner-wrp .slide-content .main-title * {
        line-height: 36px;
    }
    
    .reforma-info-right .details {
        padding: 0;
    }
    
    .reforma-info-left .action-link {
        margin-right: 0;
    }
    
    .reforma-info-right .details {
        margin-top: 50px;
    }
    
    .reforma-info-right {
        max-width: 276px;
    }

    .reforma-info-right:before {
        width: 706px;
        height: 596px;
    }
    
    /* ---------- reference-detail css ----------- */
    
    .contact-us {
        padding: 40px 20px 40px;
    }
    
    .references {
        padding: 100px 0 40px 0;
    }
    
    .references .references-card .card {
        flex: 0 0 calc(50% - 10px);
    }
    
    .references .references-card .card .card-content {
        padding: 14px;
    }
    
    /* Contact */
    .contact {
        padding: 130px 0 40px 0;
    }

    .contact .contact-container .heading .title * {
        line-height: 34px;
    }
    /* Contact */

}

@media (max-width: 425px) {

    .btn {
        padding: 12px 20px;
    }

    /* header css */
    .navbar .navbar-brand {
        max-width: 152px;
    }

    .home-banner-wrp .slide-content .main-title * {
        word-break: break-all;
    }

    .references .references-card .card {
        flex: 0 0 100%;
    }

    .references .references-card .card .card-image {
        height: 268px;
    }

    .horizontal-card .horizontal-card-container .image {
        height: 240px;
    }

    /* error css  */

    .section-404 {
        padding: 190px 0;
    }

    .detail-404 h2 {
        font-size: 50px;
        margin-bottom: 50px;
    }
    /* error css  */
}