@media screen and (min-width:200px) and (max-width:683px) {
    body {
        font-size: 80%;
    }

    .contact-btn a {
        display: none;
    }

    .menu-toggle {
        position: absolute;
        right: 37px;
        bottom: 9px;
    }
    .flex {
        flex-wrap: wrap;
    }
    .left {
        width: 100%;
    }
    .banner {
        padding: 50px 0;
        margin: 100px 0 0 0;
    }
ul.menu {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 5px 0 5px 0;
}
    .menu li a {
        color: #fff;
        font-size: 2.5em;
    }

    .menu-toggle.active span {
        background-color: #fff;
    }

    .menu li {
        text-align: center;
    }

    .menu-toggle span {
        z-index: 99;
        background-color: #000;
    }

    .menu {
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        background-color: #000;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        transition: left 0.3s ease;
        padding-top: 0;
        justify-content: center;
    }

    h2 {
        font-size: 2.3em;
    }

    h3 {
        font-size: 4.5em;
    }

    p {
        font-size: 1.2em;
    }

    h1 {
        font-size: 2.5em;
    }
    ul.green-area {
        width: 100%;
    }
    .contact-info ul {
        gap: 20px;
    }
    
    .navbar .logo {
        transform: translateY(0);
        width: 30%;
    }
    .right {
        width: 100%;
    }
    .dashboard {
        padding: 0;
    }
    .gap-50 {
        gap: 30px;
    }
    .features {
        flex-direction: row;
        gap: 20px;
}
    .feature {
        width: 29%;
    }
    .feature strong {
        font-size: 1.1em;
    }
    .features::before {
        content: '';
    border-top: 2px dashed #82C13F45;
    height: 100%;
    width: 100%;
    top: -50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    position: absolute;
    width: 69%;
    right: 0;
    margin: 0 auto;
    }
    .about-us {
       padding: 50px 0;
    }
    .manage-properties {
        padding: 50px 0;
    }
        .image-container img {
    width: 100%;
    height: 200px !important;
    border-radius: 10px;
    margin: 20px 0 0;
}
    .card {
   
    padding: 20px;
    width: 49%;
   
}
    .client .container {
        width: 100%;
    }
    .client .right {
    width: 100%;
}
    .contact-info-ft a {
        font-size: 14px;
    }
    .contact-info-ft .flex {
        flex-wrap: nowrap;
    }
    .why-choose {
        padding: 50px 0 0 0;
    }
    .cta  {
        padding: 20px;
    }
    .client {
    width: 100%;
    padding: 0 0 100px 0;
}
    .blog .carousel-cell {
    width: auto;
}
    .client .flickity-button.previous {
        left: 0;
    bottom: -80px;
    top: inherit;
    right: 0;
    margin: 0 auto;
    }
    .client .flickity-button.next {
    right: 0;
    left: 73px;
    bottom: -81px;
    top: inherit;
    margin: 0 auto;
}
    .client .left {
    width: 100%;
}
    .client .flex {
    gap: 30px;
}
    .client .right .carousel-cell {
        width: 80%;
    }
    .footer-container {
        flex-wrap: wrap;
        width: 90%;
    }
    .footer-left {
    width: 100%;
    border-right: 0;
    margin: 0 0 0 0;
}
    .footer {
        padding: 50px 0;
    }
    .footer-right {
    width: 100%;
}
    .detail-about {
        padding: 50px 0;
    }
    .content-block h2 {
    padding: 0 0 20px 0;
}
    .detail-about .right {
    width: 100%;
    margin: 20px 0 0 0;
}
    .sectors-sec .left img {
        height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    }
    .key-feature .manage-properties {
        padding: 50px 0;
    }
    .reverse .right {
        margin: 0 0 0 0;
    }
    .accordion-content {
        padding: 25px 0 25px 20px;
    }
    .blog-sec {
        width: 100%;
    }
    .content-block {
    width: 90%;
}
    .accordion-header h3 {
        padding: 0 23px 0 0;
    }
    .blog .flickity-button.previous {
        right: 13%;
    }
    .contact-detail-block .left {
        width: 100%;
        padding: 30px;
        
    }
    .contact-detail-block {
        padding: 50px 0;
    }
    .contact-detail-block .right {
    width: 100%;
}
    .logo img {
        max-width: 100px;
    }
    .icon img {
        width: 50px;
        height: 50px;
    }
    .position-one {
    position: absolute;
    transform: translate(-30px, -101px);
}
    .position-two {
    position: absolute;
    transform: translate(-3px, -209px);
}
    .position-three {
    position: absolute;
    transform: translate(200px, -214px);
}
    .position-four {
    transform: translate(292px, -213px);
    position: absolute;
}
    .position-six {
    position: absolute;
    transform: translate(288px, -31px);
}
    .position-seven {
    transform: translate(295px, -92px);
    position: absolute;
}
       .dashboard .icon {
        display: none;
    }
    .why-choose-sec 
    {
        gap: 1px;
        justify-content: center;
    }
   
}

@media screen and (min-width:684px) and (max-width:1024px) {
    body {
        font-size: 80%;
    }

    .contact-btn a {
        display: none;
    }

    .menu-toggle {
        position: absolute;
        right: 28px;
    }

    .menu li a {
        color: #fff;
        font-size: 2.5em;
    }

    .menu-toggle.active span {
        background-color: #fff;
    }

    .menu li {
        text-align: center;
    }

    .menu-toggle span {
        z-index: 99;
        background-color: #000;
    }

    .menu {
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        background-color: #000;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        transition: left 0.3s ease;
        padding-top: 0;
        justify-content: center;
    }

    h2 {
        font-size: 2.1em;
    }

.contact-info-ft {
    padding: 30px 10px 0 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

    h5 {
        font-size: 2em;
    }

    ul.green-area {
        width: 80%;
    }
    .banner {
        margin: 105px 0 0 0;
        padding: 50px 0;
    }
       .footer-left {
        margin: 0 50px 0 0;
    }
    .contact-info-ft a {
        font-size: 13px;
    }
    .features {
        flex-direction: row;
    }
    .features::before {
        top: -60%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .card {
        width: 48%;
    }
    .client .flickity-button.previous {
        left: -80%;
    }
    .client .flickity-button.next {
        left: -70%;
    }
    .client {
        padding: 0 0 100px 0;
    }
    .menu {
        width: 100%;
    }
    ul.menu {
        justify-content: center;
         width: 100%;
    }
    .box {
        padding: 30px;
    }
    .manage-properties.key-feature-sec .flex {
        flex-wrap: wrap;
        gap: 20px;
    }
    .manage-properties.key-feature-sec .left {
        width: 100%;
    }
    .manage-properties.key-feature-sec .right {
        width: 100%;
    }
    .manage-properties.key-feature-sec .right img {
        height: 350px;
    }
       .blog .flickity-button.previous {
        right: 13%;
    }
    .manage-properties.key-feature-sec .reverse .right {
    margin: 0 0 0 0;
}
    .contact-detail-block .left {
        width: 40%;
    }
        .icon img {
        width: 50px;
        height: 50px;
    }
    .position-one {
    position: absolute;
    transform: translate(-30px, -101px);
}
    .position-two {
    position: absolute;
    transform: translate(-3px, -209px);
}
    .position-three {
    position: absolute;
    transform: translate(200px, -214px);
}
    .position-four {
    transform: translate(292px, -213px);
    position: absolute;
}
    .position-six {
    position: absolute;
    transform: translate(288px, -31px);
}
    .position-seven {
    transform: translate(295px, -92px);
    position: absolute;
}
    .dashboard .icon {
        display: none;
    }
}

@media screen and (min-width:1024px) and (max-width:1550px) {


    body {
        font-size: 80%;
    }
}