/* Top moon: decorative only, attached to the house image and partially hidden behind it */
.hero-image-Circle {
    position: absolute;
    top: -8%;
    right: -22%;
    left: auto;
    width: clamp(140px, 48%, 260px);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 1; /* above hero background, below house image */
    opacity: 0.45;
}

.hero-CircleImage1 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Mirror position for LTR so it sits on the outer top corner as well */
[dir="ltr"] .hero-image-Circle {
    right: auto;
    left: -22%;
}

/* Bottom moon: decorative only, floats outside main content without covering UI */
.hero-image-Circle_2 {
    position: absolute;
    bottom: -6%;
    right: 12%;
    left: auto;
    width: clamp(120px, 36%, 220px);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 1;
    opacity: 0.35;
    transform: translateX(40%);
}

.hero-CircleImage2 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

[dir="ltr"] .hero-image-Circle_2 {
    right: auto;
    left: 12%;
    transform: translateX(-40%);
}

.hero-BlueSquare {
    width: 110px;
    height: 75px;
    right: 40%;
    top: -10%;
    position: absolute;
    background: var(--Primary-500, #6A5D8B);
    /* Center text inside box */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-BlueSquare-word {
    color: var(--Colors-Gray-White, #FFF);
    font-family: "SF Arabic";
    font-size: 48px; /* adjusted to fit box */
    font-style: normal;
    font-weight: 711;
    line-height: 160%;
}

.hero-container {
    padding-left: 156px;
    padding-right: 156px;
    position: relative;
    z-index: 0;
}

/* Desktop / large screens: keep image and content in sync so they grow/shrink together */
@@media (min-width: 1025px) {
    .hero-container {
        display: flex;
        align-items: stretch;
    }

    .hero-image-container,
    .hero-content {
        flex: 1 1 0;
        min-width: 0;
    }

    .hero-image-container {
        max-width: 50%;
    }

    .hero-content {
        max-width: 50%;
    }
}

.boxed {
    background-color: #756D96; /* Same purple color */
    color: #fff;
    padding: 6px 0px;
    border-radius: 3px;
}

.hero-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* Tablet */
@@media (max-width: 1024px) {
    .hero-image-Circle,
    .hero-image-Circle_2,
    .hero-image-container {
        display: none;
    }

    .hero-container {
        padding-left: 80px !important;
        padding-right: 80px !important;
        flex-direction: column-reverse !important;
        gap: 40px !important;
    }

    .hero-image-container {
        width: 100% !important;
        height: auto !important;
        max-width: 500px;
    }

    .hero-content {
        max-width: 100% !important;
        align-items: center !important;
    }

    .hero-BlueSquare {
        left: 50% !important;
        transform: translateX(-50%);
    }
}

/* Mobile */
@@media (max-width: 768px) {
    .hero-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        flex-direction: column-reverse !important;
        gap: 32px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .hero-image-container {
        width: 100% !important;
        height: 300px !important;
        max-width: none !important;
        min-width: auto !important;
        min-height: auto !important;
        flex-shrink: 0 !important;
    }

    .hero-main-image {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-width: auto !important;
        min-height: auto !important;
        object-fit: cover !important;
    }

    .hero-content {
        max-width: 100% !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

    .hero-image-Circle,
    .hero-image-Circle_2,
    .hero-image-container {
        display: none;
    }

    .hero-slogan {
        text-align: center !important;
        align-self: stretch !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .hero-search-box {
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

        .hero-search-box > div {
            flex-direction: column !important;
            gap: 8px !important;
            width: 100% !important;
        }

            .hero-search-box > div > div {
                width: 100% !important;
                box-sizing: border-box !important;
                text-align: center !important;
            }

    .hero-search-inputs {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

        .hero-search-inputs > div {
            width: 100% !important;
            box-sizing: border-box !important;
        }
}

/* Small Mobile */
@@media (max-width: 480px) {
    .hero-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 32px !important;
        padding-bottom: 32px !important;
        gap: 24px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .hero-image-container {
        height: 250px !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    .hero-main-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .hero-content {
        width: 100% !important;
        gap: 24px !important;
        flex-shrink: 0 !important;
    }

    .hero-search-box {
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

        .hero-search-box > div {
            width: 100% !important;
            box-sizing: border-box !important;
        }

            .hero-search-box > div > div {
                padding-top: 12px !important;
                padding-bottom: 12px !important;
                width: 100% !important;
                box-sizing: border-box !important;
                font-size: 14px !important;
            }

    .hero-search-inputs {
        width: 100% !important;
        box-sizing: border-box !important;
    }

        .hero-search-inputs > div {
            height: 56px !important;
            padding-left: 12px !important;
            padding-right: 12px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

    .hero-slogan {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .hero-BlueSquare {
        width: 90px !important;
        height: 60px !important;
    }

    .hero-BlueSquare-word {
        font-size: 36px !important;
    }

    .BlueTaiImage {
        width: 50px !important;
        height: 50px !important;
    }

    .hero-text {
        font-size: 14px !important;
    }
}

.BlueTaiImage {
    width: 69px;
    height: 69px;
}

.hero-text {
    color: var(--Colors-Gray-White, #FFF);
    text-align: right;
    leading-trim: both;
    text-edge: cap;
    font-family: "IBM Plex Sans Arabic";
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.hero-select {
    flex: 1 1 0;
    width: 100%;
    border: none;
    background-color: inherit;
    color: var(--Colors-Gray-Darkest, #111111);
    font-size: 16px;
    font-family: "IBM Plex Sans Arabic";
    font-weight: 500;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .hero-select:focus {
        outline: none;
        box-shadow: none;
    }

/* Ensure dropdowns match buttons on smaller screens */
@@media (max-width: 768px) {
    .hero-search-inputs > div {
        height: 56px !important;
    }

    .hero-select {
        height: 100%;
        display: flex;
        align-items: center;
    }
}