:root {
    --grey: 0px 0px 32px 8px rgba(102, 102, 102, 0.08);
    --colors-primary-600: rgba(55, 42, 88, 1);
    --colors-primary-500: rgba(106, 93, 139, 1);
    --colors-primary-400: rgba(136, 125, 162, 1);
    --colors-primary-300: rgba(166, 158, 185, 1);
    --colors-primary-200: rgba(195, 190, 209, 1);
    --colors-primary-100: rgba(225, 223, 232, 1);
    --colors-primary-50: rgba(243, 242, 246, 1);
    --colors-additional-success: rgba(73, 160, 120, 1);
    --colors-additional-failure: rgba(219, 58, 52, 1);
    --khames-design-system-colors-gray-white: rgba(255, 255, 255, 1);
    --khames-design-system-colors-gray-dark: rgba(102, 102, 102, 1);
    --khames-design-system-colors-gray-darkest: rgba(17, 17, 17, 1);
    --khames-design-system-colors-gray-lighter: rgba(230, 230, 230, 1);
}

.projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--khames-design-system-colors-gray-white);
}

    .projects .web-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
        padding: 24px 156px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        z-index: 2;
        background-color: var(--khames-design-system-colors-gray-white);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-color: var(--khames-design-system-colors-gray-lighter);
    }

    .projects .div {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        position: relative;
        flex: 0 0 auto;
    }

    .projects .contact-us {
        display: inline-flex;
        height: 48px;
        align-items: center;
        justify-content: center;
        padding: 0px 16px;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-50);
        border-radius: 12px;
        border: 1px solid;
        border-color: var(--colors-primary-500);
    }

    .projects .text-wrapper {
        width: fit-content;
        font-weight: 700;
        color: var(--colors-primary-500);
        font-size: 16px;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .div-wrapper {
        display: inline-flex;
        height: 48px;
        align-items: center;
        justify-content: center;
        padding: 0px 16px;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-500);
        border-radius: 12px;
    }

    .projects .text-wrapper-2 {
        position: relative;
        width: fit-content;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        letter-spacing: 0;
        line-height: normal;
        white-space: nowrap;
        direction: ltr;
    }

    .projects .profile {
        display: flex;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: var(--colors-primary-500);
        border-radius: 12px;
    }

    .projects .img {
        position: relative;
        width: 24px;
        height: 24px;
    }

    .projects .navbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 32px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .projects .text-wrapper-3 {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 16px;
        letter-spacing: 0;
        line-height: normal;
        white-space: nowrap;
        direction: ltr;
    }

    .projects .text-wrapper-4 {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 16px;
        letter-spacing: 0;
        line-height: normal;
        white-space: nowrap;
        direction: ltr;
    }

    .projects .image {
        width: 69px;
        aspect-ratio: 1.44;
        position: relative;
        height: 48px;
    }

    .projects .frame {
        flex-direction: column;
        justify-content: center;
        gap: 24px;
        padding: 24px 156px;
        z-index: 1;
        display: flex;
        align-items: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .search {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 16px;
    }

    .projects .list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .search-wrapper {
        display: flex;
        width: 64px;
        height: 64px;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: var(--colors-primary-500);
        border-radius: 16px;
    }

    .projects .img-2 {
        position: relative;
        width: 24px;
        height: 24px;
        aspect-ratio: 1;
    }

    .projects .field {
        display: flex;
        height: 64px;
        flex: 1;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0px 16px;
        position: relative;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 16px;
        border: 1px solid;
        border-color: var(--khames-design-system-colors-gray-lighter);
    }

    .projects .text-wrapper-5 {
        flex: 1;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 16px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .text-wrapper-6 {
        flex: 1;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 16px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .div-2 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .field-2 {
        display: inline-flex;
        height: 72px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0px 16px;
        position: relative;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 16px;
        border: 1px solid;
        border-color: var(--khames-design-system-colors-gray-lighter);
    }

    .projects .text-wrapper-7 {
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .text-wrapper-8 {
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .text-wrapper-9 {
        flex: 1;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 32px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .property {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 24px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--grey);
    }

    .projects .projectsContainer {
        width: 100% !important;
    }

    .projects .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 16px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .projects .badge {
        padding: 12px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-50);
        border-radius: 12px;
    }

    .projects .text-wrapper-10 {
        width: fit-content;
        margin-top: -1.00px;
        font-weight: 500;
        color: var(--colors-primary-500);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .text-wrapper-11 {
        align-self: stretch;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 20px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .amenities {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        flex: 0 0 auto;
        margin-left: -160.00px;
    }

    .projects .badge-2 {
        padding: 9.5px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-50);
        border-radius: 12px;
    }

    .projects .text-wrapper-12 {
        width: fit-content;
        font-weight: 500;
        color: var(--colors-primary-500);
        font-size: 16px;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .pool {
        margin-top: -409.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .badge-3 {
        gap: 8px;
        padding: 9.5px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-50);
        border-radius: 12px;
    }

    .projects .img-3 {
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .location {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        flex: 0 0 auto;
    }

    .projects .p {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        font-weight: 400;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 20px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .span {
        font-weight: 500;
    }

    .projects .text-wrapper-13 {
        font-weight: 700;
        font-size: 28px;
    }

    .projects .text-wrapper-14 {
        font-family: "saudi_riyal-Regular", Helvetica;
        font-size: 28px;
    }

    .projects .rectangle {
        position: relative;
        width: 254px;
        height: 254px;
        aspect-ratio: 1;
    }

    .projects .pool-2 {
        margin-top: -409.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-3 {
        margin-top: -735.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .frame-wrapper {
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 24px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--grey);
    }

    .projects .frame-2 {
        gap: 16px;
        display: flex;
        align-items: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .pool-4 {
        margin-top: -735.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-5 {
        margin-top: -1061.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-6 {
        margin-top: -1061.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-7 {
        margin-top: -1387.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-8 {
        margin-top: -1387.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-9 {
        margin-top: -1713.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-10 {
        margin-top: -1713.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-11 {
        margin-top: -2039.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-12 {
        margin-top: -2039.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-13 {
        margin-top: -2365.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-14 {
        margin-top: -2365.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-15 {
        margin-top: -2691.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-16 {
        margin-top: -2691.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-17 {
        margin-top: -3017.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-18 {
        margin-top: -3017.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-19 {
        margin-top: -3343.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-20 {
        margin-top: -3343.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pagination-ltr {
        display: flex;
        height: 56px;
        gap: 24px;
        padding: 0px 24px;
        align-self: stretch;
        width: 100%;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 12px;
        box-shadow: var(--grey);
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .projects .pagination {
        display: inline-flex;
        height: 28px;
        gap: 8px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .projects .img-4 {
        position: relative;
        width: 20px;
        height: 20px;
        aspect-ratio: 1;
    }

    .projects .item {
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .projects .text-wrapper-15 {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .text-wrapper-16 {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 14px;
        text-align: center;
        letter-spacing: 2.00px;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .item-2 {
        background-color: var(--colors-primary-500);
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .projects .text-wrapper-17 {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: fit-content;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .element-of-items-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .projects .element-of-items {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex: 1;
        margin-top: -1.00px;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 400;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 16px;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .footer {
        z-index: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .footer-2 {
        gap: 32px;
        padding: 64px 156px;
        background-color: var(--colors-primary-500);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .info-2 {
        display: flex;
        width: 1128px;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
        flex: 0 0 auto;
    }

    .projects .div-3 {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        position: relative;
        flex: 0 0 auto;
    }

    .projects .text-wrapper-18 {
        align-self: stretch;
        margin-top: -1.00px;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 24px;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .text-wrapper-19 {
        align-self: stretch;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .text-wrapper-20 {
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .info-3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .div-4 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .text-wrapper-21 {
        position: relative;
        flex: 1;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        text-align: right;
        letter-spacing: 0;
        line-height: normal;
    }

    .projects .text-wrapper-22 {
        flex: 1;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .logo {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 24px;
        position: relative;
        flex: 0 0 auto;
    }

    .projects .rectangle-2 {
        position: absolute;
        top: 61px;
        left: calc(50.00% - 42px);
        width: 55px;
        height: 41px;
        background-color: var(--khames-design-system-colors-gray-white);
    }

    .projects .image-2 {
        width: 70px;
        aspect-ratio: 1.45;
        position: relative;
        height: 48px;
    }

    .projects .div-5 {
        width: fit-content;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 24px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .text-wrapper-23 {
        color: #ffffff;
    }

    .projects .text-wrapper-24 {
        color: #6a5d8b;
    }

    .projects .licenses {
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .copy-rights {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 156px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: var(--colors-primary-500);
        border-top-width: 1px;
        border-top-style: solid;
        border-color: var(--colors-primary-400);
    }

    .projects .text-wrapper-25 {
        width: fit-content;
        margin-top: -1.00px;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

.projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--khames-design-system-colors-gray-white);
}

    .projects .web-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
        padding: 24px 156px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        z-index: 2;
        background-color: var(--khames-design-system-colors-gray-white);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-color: var(--khames-design-system-colors-gray-lighter);
    }

    .projects .header-actions {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        position: relative;
        flex: 0 0 auto;
    }

    .projects .contact-us {
        display: inline-flex;
        height: 48px;
        align-items: center;
        justify-content: center;
        padding: 0px 16px;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-50);
        border-radius: 12px;
        border: 1px solid;
        border-color: var(--colors-primary-500);
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .projects .contact-us:hover {
            background-color: var(--colors-primary-100);
        }

        .projects .contact-us:focus {
            outline: 2px solid var(--colors-primary-500);
            outline-offset: 2px;
        }

    .projects .text-wrapper {
        width: fit-content;
        font-weight: 700;
        color: var(--colors-primary-500);
        font-size: 16px;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .request-property {
        display: inline-flex;
        height: 48px;
        align-items: center;
        justify-content: center;
        padding: 0px 16px;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-500);
        border-radius: 12px;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .projects .request-property:hover {
            background-color: var(--colors-primary-600);
        }

        .projects .request-property:focus {
            outline: 2px solid var(--colors-primary-500);
            outline-offset: 2px;
        }

    .projects .text-wrapper-2 {
        position: relative;
        width: fit-content;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        letter-spacing: 0;
        line-height: normal;
        white-space: nowrap;
        direction: ltr;
    }

    .projects .profile {
        display: flex;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: var(--colors-primary-500);
        border-radius: 12px;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .projects .profile:hover {
            background-color: var(--colors-primary-600);
        }

        .projects .profile:focus {
            outline: 2px solid var(--colors-primary-500);
            outline-offset: 2px;
        }

    .projects .img {
        position: relative;
        width: 24px;
        height: 24px;
    }

    .projects .navbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 32px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

        .projects .navbar a {
            text-decoration: none;
            transition: color 0.3s ease;
        }

            .projects .navbar a:hover {
                color: var(--colors-primary-500);
            }

            .projects .navbar a:focus {
                outline: 2px solid var(--colors-primary-500);
                outline-offset: 2px;
                border-radius: 4px;
            }

    .projects .text-wrapper-3 {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 16px;
        letter-spacing: 0;
        line-height: normal;
        white-space: nowrap;
        direction: ltr;
    }

    .projects .text-wrapper-4 {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 16px;
        letter-spacing: 0;
        line-height: normal;
        white-space: nowrap;
        direction: ltr;
    }

    .projects .logo-link {
        display: block;
        transition: opacity 0.3s ease;
    }

        .projects .logo-link:hover {
            opacity: 0.8;
        }

        .projects .logo-link:focus {
            outline: 2px solid var(--colors-primary-500);
            outline-offset: 2px;
            border-radius: 4px;
        }

    .projects .image {
        width: 69px;
        aspect-ratio: 1.44;
        position: relative;
        height: 48px;
    }

    .projects .frame {
        flex-direction: column;
        justify-content: center;
        gap: 24px;
        padding: 24px 156px;
        z-index: 1;
        display: flex;
        align-items: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .search {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 16px;
    }

    .projects .list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .search-wrapper {
        display: flex;
        width: 64px;
        height: 64px;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: var(--colors-primary-500);
        border-radius: 16px;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .projects .search-wrapper:hover {
            background-color: var(--colors-primary-600);
        }

        .projects .search-wrapper:focus {
            outline: 2px solid var(--colors-primary-500);
            outline-offset: 2px;
        }

    .projects .img-2 {
        position: relative;
        width: 24px;
        height: 24px;
        aspect-ratio: 1;
    }

    .projects .field {
        display: flex;
        height: 64px;
        flex: 1;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0px 16px;
        position: relative;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 16px;
        border: 1px solid;
        border-color: var(--khames-design-system-colors-gray-lighter);
    }

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

    .projects .select-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        border: none;
        background: transparent;
    }

    .projects .text-wrapper-5 {
        flex: 1;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 16px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
        pointer-events: none;
    }

    .projects .text-wrapper-6 {
        flex: 1;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 16px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
        pointer-events: none;
    }

    .projects .filter-section {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .field-2 {
        display: inline-flex;
        height: 72px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0px 16px;
        position: relative;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 16px;
        border: 1px solid;
        border-color: var(--khames-design-system-colors-gray-lighter);
        cursor: pointer;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

        .projects .field-2:hover {
            background-color: var(--colors-primary-50);
            border-color: var(--colors-primary-500);
        }

        .projects .field-2:focus {
            outline: 2px solid var(--colors-primary-500);
            outline-offset: 2px;
        }

    .projects .text-wrapper-7 {
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .text-wrapper-8 {
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .text-wrapper-9 {
        flex: 1;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 32px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .properties-grid {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: 24px;
    }

    .projects .property {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 24px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--grey);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .projects .property:hover {
            transform: translateY(-4px);
            box-shadow: 0px 4px 40px 12px rgba(102, 102, 102, 0.12);
        }

    .projects .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 16px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .projects .badge {
        padding: 12px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-50);
        border-radius: 12px;
    }

    .projects .text-wrapper-10 {
        width: fit-content;
        margin-top: -1.00px;
        font-weight: 500;
        color: var(--colors-primary-500);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .text-wrapper-11 {
        align-self: stretch;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 20px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .amenities {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        flex: 0 0 auto;
        margin-left: -160.00px;
    }

    .projects .badge-2 {
        padding: 9.5px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-50);
        border-radius: 12px;
    }

    .projects .text-wrapper-12 {
        width: fit-content;
        font-weight: 500;
        color: var(--colors-primary-500);
        font-size: 16px;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .pool {
        margin-top: -409.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .badge-3 {
        gap: 8px;
        padding: 9.5px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--colors-primary-50);
        border-radius: 12px;
    }

    .projects .img-3 {
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .location {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        flex: 0 0 auto;
    }

    .projects .p {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        font-weight: 400;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 20px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .span {
        font-weight: 500;
    }

    .projects .text-wrapper-13 {
        font-weight: 700;
        font-size: 28px;
    }

    .projects .text-wrapper-14 {
        font-family: "saudi_riyal-Regular", Helvetica;
        font-size: 28px;
    }

    .projects .rectangle {
        position: relative;
        width: 254px;
        height: 254px;
        aspect-ratio: 1;
        border-radius: 16px;
        object-fit: cover;
    }

    .projects .pool-2 {
        margin-top: -409.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-3 {
        margin-top: -735.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .frame-wrapper {
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 24px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--grey);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .projects .frame-wrapper:hover {
            transform: translateY(-4px);
            box-shadow: 0px 4px 40px 12px rgba(102, 102, 102, 0.12);
        }

    .projects .frame-2 {
        gap: 16px;
        display: flex;
        align-items: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .pool-4 {
        margin-top: -735.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-5 {
        margin-top: -1061.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-6 {
        margin-top: -1061.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-7 {
        margin-top: -1387.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-8 {
        margin-top: -1387.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-9 {
        margin-top: -1713.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-10 {
        margin-top: -1713.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-11 {
        margin-top: -2039.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-12 {
        margin-top: -2039.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-13 {
        margin-top: -2365.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-14 {
        margin-top: -2365.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-15 {
        margin-top: -2691.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-16 {
        margin-top: -2691.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-17 {
        margin-top: -3017.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-18 {
        margin-top: -3017.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-19 {
        margin-top: -3343.00px;
        margin-left: -15691.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pool-20 {
        margin-top: -3343.00px;
        margin-left: -16267.00px;
        position: relative;
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
    }

    .projects .pagination-ltr {
        display: flex;
        height: 56px;
        gap: 24px;
        padding: 0px 24px;
        align-self: stretch;
        width: 100%;
        background-color: var(--khames-design-system-colors-gray-white);
        border-radius: 12px;
        box-shadow: var(--grey);
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .projects .pagination {
        display: inline-flex;
        height: 28px;
        gap: 8px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        position: relative;
    }

        .projects .pagination button {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            transition: opacity 0.3s ease;
        }

            .projects .pagination button:hover {
                opacity: 0.7;
            }

            .projects .pagination button:focus {
                outline: 2px solid var(--colors-primary-500);
                outline-offset: 2px;
                border-radius: 4px;
            }

            .projects .pagination button:disabled {
                cursor: not-allowed;
                opacity: 0.5;
            }

    .projects .img-4 {
        position: relative;
        width: 20px;
        height: 20px;
        aspect-ratio: 1;
    }

    .projects .item {
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .projects .text-wrapper-15 {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .text-wrapper-16 {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-dark);
        font-size: 14px;
        text-align: center;
        letter-spacing: 2.00px;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .item-2 {
        background-color: var(--colors-primary-500);
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .projects .text-wrapper-17 {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: fit-content;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .element-of-items-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .projects .element-of-items {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex: 1;
        margin-top: -1.00px;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 400;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 16px;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .footer {
        z-index: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .footer-2 {
        gap: 32px;
        padding: 64px 156px;
        background-color: var(--colors-primary-500);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .info-2 {
        display: flex;
        width: 1128px;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
        flex: 0 0 auto;
    }

    .projects .div-3 {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        position: relative;
        flex: 0 0 auto;
    }

        .projects .div-3 a {
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

            .projects .div-3 a:hover {
                opacity: 0.8;
            }

            .projects .div-3 a:focus {
                outline: 2px solid var(--khames-design-system-colors-gray-white);
                outline-offset: 2px;
                border-radius: 4px;
            }

    .projects .text-wrapper-18 {
        align-self: stretch;
        margin-top: -1.00px;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 24px;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .text-wrapper-19 {
        align-self: stretch;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .text-wrapper-20 {
        width: fit-content;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .info-3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .div-4 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

        .projects .div-4 a {
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

            .projects .div-4 a:hover {
                opacity: 0.8;
            }

            .projects .div-4 a:focus {
                outline: 2px solid var(--khames-design-system-colors-gray-white);
                outline-offset: 2px;
                border-radius: 4px;
            }

    .projects .text-wrapper-21 {
        position: relative;
        flex: 1;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        text-align: right;
        letter-spacing: 0;
        line-height: normal;
    }

    .projects .text-wrapper-22 {
        flex: 1;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        letter-spacing: 0;
        line-height: normal;
        direction: ltr;
    }

    .projects .logo {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 24px;
        position: relative;
        flex: 0 0 auto;
    }

    .projects .rectangle-2 {
        position: absolute;
        top: 61px;
        left: calc(50.00% - 42px);
        width: 55px;
        height: 41px;
        background-color: var(--khames-design-system-colors-gray-white);
    }

    .projects .image-2 {
        width: 70px;
        aspect-ratio: 1.45;
        position: relative;
        height: 48px;
    }

    .projects .div-5 {
        width: fit-content;
        font-weight: 700;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 24px;
        letter-spacing: 0;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

    .projects .text-wrapper-23 {
        color: #ffffff;
    }

    .projects .text-wrapper-24 {
        color: #6a5d8b;
    }

    .projects .licenses {
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .projects .copy-rights {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 156px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: var(--colors-primary-500);
        border-top-width: 1px;
        border-top-style: solid;
        border-color: var(--colors-primary-400);
    }

    .projects .text-wrapper-25 {
        width: fit-content;
        margin-top: -1.00px;
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-white);
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
        direction: ltr;
        position: relative;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
    }

/* RTL/LTR Support for Project Index Page */
.projects {
    direction: inherit;
}

[dir="rtl"] .projects {
    direction: rtl;
}

[dir="ltr"] .projects {
    direction: ltr;
}

/* Search Form RTL Support */
[dir="rtl"] .search {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .search {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .list {
    flex-direction: row-reverse;
}

[dir="ltr"] .list {
    flex-direction: row;
}

/* Field Labels and Inputs */
[dir="rtl"] .field {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .field {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .field label {
    text-align: right;
}

[dir="ltr"] .field label {
    text-align: left;
}

[dir="rtl"] .select-input {
    text-align: right;
    direction: rtl;
}

[dir="ltr"] .select-input {
    text-align: left;
    direction: ltr;
}

/* Enhanced Dropdown Styling to Match Figma Design */
.projects .field {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .projects .field:hover {
        border-color: var(--colors-primary-400);
        background-color: var(--colors-primary-50);
    }

    .projects .field:focus-within {
        border-color: var(--colors-primary-500);
        outline: 2px solid var(--colors-primary-500);
        outline-offset: -2px;
    }

/* Select input styling - make it visible and properly styled */
.projects .select-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Display label as visible text (not hidden) - override external CSS */
.projects .field label.text-wrapper-5,
.projects .field label.text-wrapper-6,
.projects .field .field-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border-width: 0 !important;
    flex: 1;
    font-weight: 500;
    color: var(--khames-design-system-colors-gray-dark);
    font-size: 16px;
    font-family: "IBM Plex Sans Arabic", Helvetica;
    line-height: normal;
    letter-spacing: 0;
    pointer-events: none;
}

/* Icon positioning in field */
.projects .field .img-2 {
    flex-shrink: 0;
    pointer-events: none;
}

/* Field icon (building/location) */
.projects .field .field-icon {
    width: 24px;
    height: 24px;
}

/* Field arrow (dropdown indicator) */
.projects .field .field-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.projects .field:focus-within .field-arrow {
    transform: rotate(180deg);
}

/* Field label styling */
.projects .field .field-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* RTL/LTR layout for dropdown fields */
[dir="rtl"] .projects .field {
    flex-direction: row;
    gap: 8px;
}

[dir="ltr"] .projects .field {
    flex-direction: row;
    gap: 8px;
}

/* Element order: Icon, Label, Arrow */
[dir="rtl"] .projects .field .field-icon {
    order: 1;
}

[dir="ltr"] .projects .field .field-icon {
    order: 1;
}

[dir="rtl"] .projects .field .field-label {
    order: 2;
    text-align: right;
}

[dir="ltr"] .projects .field .field-label {
    order: 2;
    text-align: left;
}

[dir="rtl"] .projects .field .field-arrow {
    order: 3;
}

[dir="ltr"] .projects .field .field-arrow {
    order: 3;
}

/* Filter buttons styling - Enhanced to match Figma design */
.projects .field-2.filter-button {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--khames-design-system-colors-gray-lighter);
    background-color: var(--khames-design-system-colors-gray-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0px 16px;
    height: 72px;
    border-radius: 16px;
}

    .projects .field-2.filter-button:hover {
        background-color: var(--colors-primary-50);
        border-color: var(--colors-primary-500);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(106, 93, 139, 0.1);
    }

    .projects .field-2.filter-button:active {
        transform: translateY(0);
    }

    .projects .field-2.filter-button:focus {
        outline: 2px solid var(--colors-primary-500);
        outline-offset: 2px;
    }

    /* Filter button icon styling */
    .projects .field-2.filter-button .filter-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    /* Filter button arrow styling */
    .projects .field-2.filter-button .filter-arrow {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .projects .field-2.filter-button:hover .filter-arrow,
    .projects .field-2.filter-button:focus .filter-arrow {
        transform: rotate(180deg);
    }

    /* Filter button text styling */
    .projects .field-2.filter-button .filter-text,
    .projects .text-wrapper-7,
    .projects .text-wrapper-8 {
        font-weight: 500;
        color: var(--khames-design-system-colors-gray-darkest);
        font-size: 16px;
        font-family: "IBM Plex Sans Arabic", Helvetica;
        line-height: normal;
        letter-spacing: 0;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

/* RTL/LTR layout for filter buttons - Order: Arrow, Text, Icon (matching Figma) */
[dir="rtl"] .projects .field-2.filter-button {
    flex-direction: row;
    gap: 8px;
}

[dir="ltr"] .projects .field-2.filter-button {
    flex-direction: row;
    gap: 8px;
}

/* Element order for filter buttons - Icon first (left), then Text, then Arrow (right) - matching Figma */
/* For RTL: Icon appears on visual left, Arrow on visual right */
[dir="rtl"] .projects .field-2.filter-button .filter-icon {
    order: 1;
}

[dir="ltr"] .projects .field-2.filter-button .filter-icon {
    order: 1;
}

[dir="rtl"] .projects .field-2.filter-button .filter-text {
    order: 2;
    text-align: right;
}

[dir="ltr"] .projects .field-2.filter-button .filter-text {
    order: 2;
    text-align: left;
}

[dir="rtl"] .projects .field-2.filter-button .filter-arrow {
    order: 3;
}

[dir="ltr"] .projects .field-2.filter-button .filter-arrow {
    order: 3;
}

/* Filter Section - Enhanced layout to match Figma */
.projects .filter-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Filter buttons group */
.projects .filter-buttons-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Filter Section RTL/LTR */
[dir="rtl"] .filter-section {
    direction: rtl;
    text-align: right;
    flex-direction: row;
}

[dir="ltr"] .filter-section {
    direction: ltr;
    text-align: left;
    flex-direction: row;
}

/* Title positioning - on left for RTL, on left for LTR */
[dir="rtl"] .filter-section h1.text-wrapper-9 {
    order: 1;
    text-align: right;
    flex: 1;
    margin: 0;
    direction: rtl !important;
}

[dir="ltr"] .filter-section h1.text-wrapper-9 {
    order: 1;
    text-align: left;
    flex: 1;
    margin: 0;
    direction: ltr !important;
}

/* Filter buttons group positioning - on right for RTL, on right for LTR */
[dir="rtl"] .filter-section .filter-buttons-group {
    order: 2;
    flex-direction: row;
}

[dir="ltr"] .filter-section .filter-buttons-group {
    order: 2;
    flex-direction: row;
}

[dir="rtl"] .field-2 {
    flex-direction: row-reverse;
}

[dir="ltr"] .field-2 {
    flex-direction: row;
}

/* Properties Grid */
[dir="rtl"] .properties-grid {
    direction: rtl;
}

[dir="ltr"] .properties-grid {
    direction: ltr;
}

/* Property Card */
[dir="rtl"] .property {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .property {
    direction: ltr;
    text-align: left;
}

/* Clickable card hover effect */
.projects .property,
.projects .frame-wrapper {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .projects .property:hover,
    .projects .frame-wrapper:hover {
        transform: translateY(-2px);
        box-shadow: 0px 4px 16px 4px rgba(102, 102, 102, 0.12);
    }

[dir="rtl"] .property .info {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .property .info {
    direction: ltr;
    text-align: left;
}

/* Property Title */
[dir="rtl"] .text-wrapper-11 {
    text-align: right;
}

[dir="ltr"] .text-wrapper-11 {
    text-align: left;
}

/* Amenities Section */
/* Amenities section - display badges in rows of 2 */
/* Override external CSS that has negative margin causing overlap */
.projects .amenities {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: center !important;
    position: relative !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

    /* Each badge should take approximately 50% width (minus gap) to create rows of 2 */
    .projects .amenities .badge,
    .projects .amenities .badge-2,
    .projects .amenities .badge-3 {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        max-width: calc(50% - 4px) !important;
        box-sizing: border-box !important;
        position: relative !important;
        /* Ensure badges don't overflow or overlap */
        overflow: visible !important;
    }

/* Ensure info section contains amenities properly */
.projects .info {
    position: relative;
    overflow: visible;
    width: 100%;
}

/* Ensure property card contains everything properly */
.projects .property,
.projects .frame-wrapper {
    position: relative;
    overflow: hidden;
}

/* Reduce padding and gaps to make cards more compact and aligned - matching Figma design */
.projects .property {
    padding: 16px !important; /* Reduced from 24px */
    gap: 12px !important; /* Reduced from 16px */
    align-items: stretch !important; /* Better alignment with image */
}

.projects .frame-wrapper {
    padding: 16px !important; /* Match property padding */
}

.projects .info {
    gap: 12px !important; /* Reduced from 16px */
    padding: 0 !important;
    align-self: stretch !important; /* Stretch to match image height */
}

.projects .frame-wrapper .frame-2 {
    gap: 12px !important; /* Reduced from 16px */
    align-items: stretch !important; /* Better alignment */
}

/* Image alignment - ensure it aligns with info section */
.projects .property .rectangle,
.projects .frame-wrapper .rectangle {
    object-fit: cover;
    height: 100%;
    align-self: stretch;
    flex-shrink: 0;
}

/* Reduce spacing in location and units sections */
.projects .location {
    gap: 8px !important;
    margin: 0 !important;
}

/* Reduce badge padding for more compact look */
.projects .badge,
.projects .badge-2,
.projects .badge-3 {
    padding: 8px 12px !important; /* Reduced from 12px 16px / 9.5px 16px */
}

/* Reduce title margin for tighter spacing */
.projects .text-wrapper-11 {
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Ensure amenities section has proper spacing */
.projects .amenities {
    margin: 0 !important;
}

[dir="rtl"] .amenities {
    flex-direction: row;
    justify-content: flex-start;
}

[dir="ltr"] .amenities {
    flex-direction: row;
    justify-content: flex-start;
}

[dir="rtl"] .badge,
[dir="rtl"] .badge-2,
[dir="rtl"] .badge-3 {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .badge,
[dir="ltr"] .badge-2,
[dir="ltr"] .badge-3 {
    direction: ltr;
    text-align: left;
}

/* Location Section */
[dir="rtl"] .location {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="ltr"] .location {
    flex-direction: row;
    text-align: left;
}

[dir="rtl"] .location p,
[dir="rtl"] .location span {
    text-align: right;
}

[dir="ltr"] .location p,
[dir="ltr"] .location span {
    text-align: left;
}

/* Price Section */
/* Price paragraph styling - override external CSS */
[dir="rtl"] .projects .p {
    direction: rtl !important;
    text-align: right !important;
    justify-content: flex-start !important;
}

[dir="ltr"] .projects .p {
    direction: ltr !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

[dir="rtl"] .projects .p .span {
    text-align: right !important;
}

[dir="ltr"] .projects .p .span {
    text-align: left !important;
}

[dir="rtl"] .projects .p .text-wrapper-13 {
    text-align: right !important;
    direction: rtl !important;
}

[dir="ltr"] .projects .p .text-wrapper-13 {
    text-align: left !important;
    direction: ltr !important;
}

[dir="rtl"] .projects .p .text-wrapper-14 {
    text-align: right !important;
    direction: rtl !important;
}

[dir="ltr"] .projects .p .text-wrapper-14 {
    text-align: left !important;
    direction: ltr !important;
}

/* Image Positioning for .property cards
       HTML order can be: <img> first, then <div class="info"> OR <div class="info"> first, then <img>
       LTR (English): Image on LEFT, Info on RIGHT
       RTL (Arabic): Image on RIGHT, Info on LEFT */

/* Default: Assume image is first (most common case) - use .projects prefix for specificity */
[dir="ltr"] .projects .property {
    flex-direction: row !important; /* Image left, Info right */
}

[dir="rtl"] .projects .property {
    flex-direction: row !important; /* In RTL: first child (img) on right, second (info) on left */
}

/* For .property cards with info first in HTML, we need to reverse */
/* We'll add a class in JavaScript to identify these */
[dir="ltr"] .projects .property.info-first {
    flex-direction: row-reverse !important; /* Reverse to: Image left, Info right */
}

[dir="rtl"] .projects .property.info-first {
    flex-direction: row-reverse !important; /* Reverse to: Image right, Info left */
}

/* Frame Wrapper (Office Properties) Image Positioning */
/* Note: For frame-wrapper, HTML order is: <div class="info"> first, then <img>
       LTR (English): Image on LEFT, Info on RIGHT
       RTL (Arabic): Image on RIGHT, Info on LEFT */
[dir="ltr"] .projects .frame-wrapper .frame-2 {
    flex-direction: row-reverse !important; /* Info first in HTML, reverse to: Image left, Info right */
}

[dir="rtl"] .projects .frame-wrapper .frame-2 {
    flex-direction: row-reverse !important; /* Info first in HTML, reverse to: Image right, Info left */
}

/* Fix: Prevent single card from expanding to full width */
.properties-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

    .properties-grid .property,
    .properties-grid .frame-wrapper {
        flex: 1 1 calc(50% - 12px);
        min-width: 0;
        max-width: calc(50% - 12px);
        box-sizing: border-box;
    }

/* Frame Wrapper (Office Properties) */
[dir="rtl"] .frame-wrapper {
    direction: rtl;
}

[dir="ltr"] .frame-wrapper {
    direction: ltr;
}

[dir="rtl"] .frame-2 {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .frame-2 {
    direction: ltr;
    text-align: left;
}

/* Pagination RTL Support */
[dir="rtl"] .pagination-RTL {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .pagination-RTL {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

[dir="ltr"] .pagination {
    flex-direction: row;
}

[dir="rtl"] .element-of-items {
    text-align: right;
}

[dir="ltr"] .element-of-items {
    text-align: left;
}

/* Icon and Image Positioning */
[dir="rtl"] .img-2,
[dir="rtl"] .img-3,
[dir="rtl"] .img-4 {
    transform: scaleX(-1);
}

[dir="ltr"] .img-2,
[dir="ltr"] .img-3,
[dir="ltr"] .img-4 {
    transform: scaleX(1);
}

/* Text Wrappers */
[dir="rtl"] .text-wrapper-5,
[dir="rtl"] .text-wrapper-6,
[dir="rtl"] .text-wrapper-7,
[dir="rtl"] .text-wrapper-8,
[dir="rtl"] .text-wrapper-9,
[dir="rtl"] .text-wrapper-10,
[dir="rtl"] .text-wrapper-12,
[dir="rtl"] .text-wrapper-13,
[dir="rtl"] .text-wrapper-14,
[dir="rtl"] .text-wrapper-15,
[dir="rtl"] .text-wrapper-16,
[dir="rtl"] .text-wrapper-17 {
    text-align: right;
    direction: rtl;
}

[dir="ltr"] .text-wrapper-5,
[dir="ltr"] .text-wrapper-6,
[dir="ltr"] .text-wrapper-7,
[dir="ltr"] .text-wrapper-8,
[dir="ltr"] .text-wrapper-9,
[dir="ltr"] .text-wrapper-10,
[dir="ltr"] .text-wrapper-12,
[dir="ltr"] .text-wrapper-13,
[dir="ltr"] .text-wrapper-14,
[dir="ltr"] .text-wrapper-15,
[dir="ltr"] .text-wrapper-16,
[dir="ltr"] .text-wrapper-17 {
    text-align: left;
    direction: ltr;
}

/* Search Button */
[dir="rtl"] .search-wrapper {
    order: -1;
}

[dir="ltr"] .search-wrapper {
    order: 1;
}

/* Override hardcoded direction: ltr from projectListStyle.css */
[dir="rtl"] .text-wrapper,
[dir="rtl"] .text-wrapper-2,
[dir="rtl"] .text-wrapper-3,
[dir="rtl"] .text-wrapper-4 {
    direction: rtl !important;
    text-align: right !important;
}

[dir="ltr"] .text-wrapper,
[dir="ltr"] .text-wrapper-2,
[dir="ltr"] .text-wrapper-3,
[dir="ltr"] .text-wrapper-4 {
    direction: ltr !important;
    text-align: left !important;
}

/* Frame Section RTL */
[dir="rtl"] .frame {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .frame {
    direction: ltr;
    text-align: left;
}

/* Responsive adjustments for RTL */
@@media (max-width: 768px) {
    [dir="rtl"] .list {
        flex-direction: column;
    }

    [dir="ltr"] .list {
        flex-direction: column;
    }

    [dir="rtl"] .properties-grid {
        flex-direction: column;
    }

    [dir="ltr"] .properties-grid {
        flex-direction: column;
    }
    /* On mobile, cards should take full width */
    .properties-grid .property,
    .properties-grid .frame-wrapper {
        flex: 1 1 100%;
        max-width: 100%;
    }
    /* On mobile, badges can take full width or stay in rows of 2 based on design preference */
    .projects .amenities .badge,
    .projects .amenities .badge-2,
    .projects .amenities .badge-3 {
        flex: 1 1 calc(50% - 4px);
        max-width: calc(50% - 4px);
    }
}