/* ── home.css · جزء 1 من 9: أساس الرئيسية وشريط أرقام السوق (المصدر: resources/css/shary/home/01-base-ticker.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* شاري — الصفحة الرئيسية. الملف متولّد (build_home_view.py) من ملف العميل shary-home.css بنفس معالجة المعاينة المعتمدة + كلاسات Tailwind المستخدمة في الهوم (جوه .shary-home-root). عدّلوا المصدر مش الملف ده. */
.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}
.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:ease;box-sizing:content-box;transform:translate3d(0,0,0)}
.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}
.swiper-horizontal{touch-action:pan-y}
.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}
.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:8px;left:0;width:100%}
.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2;margin:0 4px;cursor:pointer}
.swiper-pagination-bullet-active{opacity:1;background:#1e4166}
.swiper-pagination-lock{display:none}









:root {
  --color-navy: #063454;
  --color-navy-2: #0d4569;
  --color-teal: #35b6a7;
  --color-gold: #d9a021;
  --color-page: #f4f6fa;
  --color-white: #ffffff;
  --color-text: #12344a;
  --color-heading: #173d56;
  --color-muted: #64748b;
  --color-input: #173f5f;
  --color-border: #dbe4ec;
  --color-border-soft: #d7dee5;
  --color-blue: #0873b7;
  --color-navy-light: #0d4266;
  --color-navy-text: #173b55;
  --gradient-promo-navy: linear-gradient(
    135deg,
    #24668d 0%,
    #175679 32%,
    #104b70 65%,
    #083c5d 100%
  );
  --gradient-promo-teal-button: linear-gradient(
    180deg,
    #40c6b5 0%,
    #2eb5a5 45%,
    #209e91 100%
  );
  --gradient-promo-blue-button: linear-gradient(
    180deg,
    #23678e 0%,
    #155679 45%,
    #073d61 100%
  );
  --shadow-promo-card:
    0 3px 8px rgba(6, 52, 84, 0.12), 0 1px 2px rgba(6, 52, 84, 0.08);
  --shadow-promo-hover:
    0 8px 18px rgba(6, 52, 84, 0.16), 0 2px 5px rgba(6, 52, 84, 0.1);
    --shary-site-font: "Tajawal", sans-serif;
}
.shary-home-root {
  scroll-behavior: smooth;
  font-family:'Almarai';
  font-size:16px;
  font-weight: normal;
}

.container-x {
  /* width: min(1180px, calc(100% - 32px));
  margin-inline: auto; */
  width: min(95% - 32px, 1180px);
  margin-inline: auto;
  max-width: 1240px;
}

/* .container-x {
  width: 100%;
  max-width: 1344px;
  margin-inline: auto;
  padding-inline: 16px;
} */
@media screen and (min-width: 1300px) {
  .container-x {
      width: 95%;
      max-width: 1240;
      margin: auto;
  }
}
/* @media (min-width: 1024px) {
    body {
        zoom: 1.1;
    }
} */

.hero-bg {
  /* background:
    linear-gradient(180deg, rgba(35, 126, 164, 0.18), rgba(4, 51, 79, 0.94)),
    radial-gradient(
      circle at 30% 15%,
      rgba(255, 255, 255, 0.25),
      transparent 28%
    ),
    linear-gradient(145deg, #8bc6e1 0%, #3e8faf 46%, #0b3c5b 100%); */
}

.wave {
  clip-path: ellipse(78% 58% at 50% 100%);
}

.glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  scrollbar-width: none;
}

/* =========================================================
   SHARY MARKET TICKER
   COMPLETE CSS
   Movement is handled by JavaScript
========================================================= */


/* =========================================================
   MAIN TICKER
========================================================= */

.market-ticker {
    position: relative;

    width: 100%;
    height: 75px;

    display: flex;
    align-items: center;

    font-family: 'Almarai', sans-serif;
    font-weight: normal;

    /*
     * We control RTL/LTR manually below.
     * Do not let inherited page direction affect
     * the physical ticker structure.
     */
    direction: ltr;
}


/* =========================================================
   SHARY INDEX BADGE
========================================================= */

.market-ticker-badge {
    position: relative;

    /* z-index: 20; */

    flex: 0 0 105px;

    width: 105px;
    min-width: 105px;
    height: 100%;

    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-navy-text);

    background: #082f4c;

    border: none;
    border-radius: 30px;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08);

    font-weight: 800;

    overflow: visible;
}

[dir="ltr"] .market-ticker-badge {
    font-size: 12px;
}

[dir="rtl"] .market-ticker-badge {
    font-size: 10px;
}


/* =========================================================
   BADGE INNER
========================================================= */

.market-ticker-badge-inner {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 4px;

    padding: 0 5px;

    box-sizing: border-box;

    border-radius: 999px;

    background: linear-gradient(
        180deg,
        #f8fafb 0%,
        #e9eef1 45%,
        #d8e0e5 100%
    );

    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.95),
        inset 0 -2px 3px rgba(120, 140, 150, 0.22),
        inset 1px 0 2px rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(0, 0, 0, 0.18);

    overflow: hidden;
}


/* badge light reflection */
.market-ticker-badge-inner::before {
    content: "";

    position: absolute;

    top: 2px;
    left: 7px;
    right: 7px;

    height: 45%;

    border-radius: 999px;

    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.75),
        rgba(255, 255, 255, 0)
    );

    pointer-events: none;

    z-index: 0;
}


/*
 * Make actual badge content appear above reflection.
 */
.market-ticker-badge-inner > * {
    position: relative;
    /* z-index: 1; */
}


/* =========================================================
   LIVE DOT
========================================================= */

.market-ticker-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--color-teal);

    box-shadow:
        0 0 0 3px rgba(53, 182, 167, 0.13);

    animation: tickerPulse 1.8s ease-in-out infinite;
}


/* =========================================================
   BADGE ARROW
========================================================= */

.market-ticker-arrow {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--color-navy-text);

    font-size: 17px;
    font-weight: 900;
    line-height: 1;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #f4f6f7 0%,
        #d8dee2 100%
    );

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   VIEWPORT
========================================================= */

.market-ticker-viewport {
    position: relative;

    min-width: 0;
    height: 100%;

    flex: 1 1 auto;

    overflow: hidden;
}


/* =========================================================
   LEFT / RIGHT GRADIENT FADES
========================================================= */

.market-ticker-viewport::before,
.market-ticker-viewport::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 42px;

    z-index: 6;

    pointer-events: none;
}


.market-ticker-viewport::before {
    left: 0;

    /* background: linear-gradient(
        90deg,
        var(--color-navy) 0%,
        rgba(6, 52, 84, 0) 100%
    ); */
}


.market-ticker-viewport::after {
    right: 0;
/* 
    background: linear-gradient(
        270deg,
        var(--color-navy) 0%,
        rgba(6, 52, 84, 0) 100%
    ); */
}


/* =========================================================
   FIXED LABELS
========================================================= */

/* .market-ticker-labels {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 145px;

    z-index: 10;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    padding: 0 10px;

    box-sizing: border-box;

    white-space: nowrap;

    background: var(--color-navy);

    color: rgba(255, 255, 255, 0.75);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.3;

    pointer-events: none;
}


.market-ticker-labels span {
    display: block;

    width: 100%;

    text-align: center;
} */

.market-ticker-labels {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 90px;

    z-index: 2;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;

    gap: 1px;

    padding: 0 10px;

    box-sizing: border-box;

    white-space: nowrap;

    background: var(--color-navy);

    color: rgba(255, 255, 255, 0.75);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;

    pointer-events: none;
}


/* Average on the left */
.market-ticker-average {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
}


/* Two texts beside Average */
.market-ticker-labels-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}


.market-ticker-labels-text span {
    display: block;
    text-align: start;
}

/* =========================================================
   ANIMATED TRACK
   IMPORTANT: JavaScript handles transform
========================================================= */

.market-ticker-track {
    position: relative;

    width: max-content;
    min-width: max-content;
    height: 100%;

    display: flex;
    align-items: center;

    flex-wrap: nowrap;

    gap: 0;

    margin: 0;
    padding: 0;

    /*
     * Keep duplicated groups in predictable physical order.
     */
    direction: ltr !important;

    /*
     * JS updates this transform every frame.
     */
    transform: translate3d(0, 0, 0);

    will-change: transform;

    /*
     * VERY IMPORTANT:
     * Stop any previous CSS ticker animation.
     */
    animation: none !important;
    transition: none !important;
}


/* =========================================================
   EACH DUPLICATED GROUP
========================================================= */

.market-ticker-group {
    position: relative;

    height: 100%;

    display: flex;
    align-items: center;

    flex: 0 0 auto;
    flex-shrink: 0;

    flex-wrap: nowrap;

    gap: 0;

    margin: 0;
    padding: 0;

    /*
     * Physical ordering must remain LTR even on Arabic pages.
     */
    direction: ltr;
}


/* =========================================================
   MARKET ITEM
========================================================= */

.market-item {
    position: relative;

    /* width: 152px;
    min-width: 152px; */
    height: 32px;

    /* flex: 0 0 152px; */

    padding: 0 22px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr 1fr;

    align-items: center;

    column-gap: 12px;

    color: var(--color-white);

    white-space: nowrap;

    overflow: hidden;
}


/* =========================================================
   PRICE
========================================================= */

.market-value {
    grid-column: 2;
    grid-row: 1;

    align-self: end;

    font-size: 13px;
    font-weight: 900;
    line-height: 1;

    color: var(--color-white);

    white-space: nowrap;
}


/* =========================================================
   CITY NAME
========================================================= */

.market-name {
    grid-column: 1;
    grid-row: 1 / span 2;

    align-self: center;

    min-width: 0;
    /* width:70px;
    max-width: 100px; */

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;

    color: rgba(255, 255, 255, 0.88);
}


/* =========================================================
   CHANGE VALUE
========================================================= */

.market-change {
    grid-column: 2;
    grid-row: 2;

    align-self: start;

    font-size: 13px;
    font-weight: 900;
    line-height: 1;

    white-space: nowrap;
}


.market-change.up {
    color: #35d2bd;
}


.market-change.down {
    color: #ff9b9b;
}


/* =========================================================
   ENGLISH / LTR
========================================================= */

.market-ticker-section[dir="ltr"] .market-ticker {
    flex-direction: row;

    direction: ltr;
}


/*
 * BADGE LEFT
 *
 * [ SHARY INDEX ][ LABEL ][ MOVING DATA... ]
 */
.market-ticker-section[dir="ltr"] .market-ticker-badge {
    order: 1;
}


.market-ticker-section[dir="ltr"] .market-ticker-viewport {
    order: 2;

    margin-left: 8px;
    margin-right: 0;
}


/* fixed labels on LEFT */
.market-ticker-section[dir="ltr"] .market-ticker-labels {
    left: 0;
    right: auto;

    direction: ltr;

    border-right:
        1px solid rgba(255, 255, 255, 0.15);

    border-left: none;
}


/* LTR market item */
.market-ticker-section[dir="ltr"] .market-item {
    direction: ltr;

    border-right:
        1px solid rgba(255, 255, 255, 0.15);

    border-left: none;
}


/* LTR name */
.market-ticker-section[dir="ltr"] .market-name {
    text-align: left;
}


/* LTR numbers */
.market-ticker-section[dir="ltr"] .market-value,
.market-ticker-section[dir="ltr"] .market-change {
    text-align: left;
}


/* LTR badge */
.market-ticker-section[dir="ltr"]
.market-ticker-badge-inner {
    direction: ltr;
}


/* =========================================================
   ARABIC / RTL
========================================================= */

.market-ticker-section[dir="rtl"] .market-ticker {
    /*
     * row-reverse physically puts badge on RIGHT.
     */
    flex-direction: row-reverse;

    /*
     * Keep parent physical calculations predictable.
     */
    direction: ltr;
}


/*
 * VIEWPORT --------------------- BADGE
 */
.market-ticker-section[dir="rtl"] .market-ticker-badge {
    order: 1;
}


.market-ticker-section[dir="rtl"] .market-ticker-viewport {
    order: 2;

    margin-right: 8px;
    margin-left: 0;
}


/* fixed labels on RIGHT */
.market-ticker-section[dir="rtl"] .market-ticker-labels {
    right: 0;
    left: auto;

    direction: rtl;

    border-left:
        1px solid rgba(255, 255, 255, 0.15);

    border-right: none;
}


/* RTL market item */
.market-ticker-section[dir="rtl"] .market-item {
    direction: rtl;

    border-left:
        1px solid rgba(255, 255, 255, 0.15);

    border-right: none;
}


/* RTL city */
.market-ticker-section[dir="rtl"] .market-name {
    text-align: right;
}


/* RTL numbers */
.market-ticker-section[dir="rtl"] .market-value,
.market-ticker-section[dir="rtl"] .market-change {
    text-align: right;
}


/* RTL badge content */
.market-ticker-section[dir="rtl"]
.market-ticker-badge-inner {
    direction: rtl;
}


/* =========================================================
   DOT PULSE ANIMATION
   This animation stays CSS because it is only the green dot.
========================================================= */

@keyframes tickerPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.72);
        opacity: 0.55;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .market-ticker-labels {
        width: 85px;

        /* padding-left: 3px; */

        font-size: 12px;
    }

    [dir="rtl"] .market-ticker-labels {
        padding-right: 3px;
         padding-left: 3px;

    }
        [dir="ltr"] .market-ticker-labels {
        padding-right: 0px;
         padding-left: 3px;

    }

    .market-item {
        /* width: 140px;
        min-width: 140px;

        flex-basis: 140px; */

        padding-left: 10px;
        padding-right: 10px;

        column-gap: 5px;
    }


    .market-name {
        /* max-width: 88px; */
    }
}


/* ── home.css · جزء 2 من 9: أقسام الرئيسية على الموبايل والكاروسيل والكروت (المصدر: resources/css/shary/home/02-mobile-sections.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    /* =====================================================
       MAIN
    ===================================================== */

    .market-ticker {
        height: 52px;
    }


    /* =====================================================
       BADGE
    ===================================================== */

    .market-ticker-badge {
        width: 80px;
        min-width: 80px;

        flex-basis: 80px;

        height: 36px;

        font-size: 9px;
    }

    [dir="ltr"] .market-ticker-badge {
      padding-left: 5px;
      padding-right: 0;
    }

    [dir="rtl"] .market-ticker-badge {
      padding-right: 5px;
      padding-left: 0;
    }


    .market-ticker-badge-inner {
        gap: 3px;
        padding-left: 5px;
        padding-right: 5px;
    }


    /* =====================================================
       BADGE DOT
    ===================================================== */

    .market-ticker-dot {
        width: 6px;
        height: 6px;

        flex-basis: 6px;

        box-shadow:
            0 0 0 2px rgba(53, 182, 167, 0.13);
    }


    /* =====================================================
       BADGE ARROW
    ===================================================== */

    .market-ticker-arrow {
        width: 17px;
        height: 17px;

        flex-basis: 20px;

        font-size: 20px;
    }


    /* =====================================================
       FIXED LABELS
    ===================================================== */

    .market-ticker-labels {
        width: 90px;

        gap: 2px;

        /* padding-left: 3px;
        padding-right: 3px; */

        font-size: 12px;

        line-height: 1.25;
    }


    /* =====================================================
       MARKET ITEMS
    ===================================================== */

    .market-item {
        /* width: 130px;
        min-width: 130px;

        flex-basis: 130px; */

        height: 32px;

        padding-left: 15px;
        padding-right: 15px;

        column-gap: 8px;
    }


    .market-value {
        font-size: 13px;
    }


    .market-name {
        /* max-width: 76px; */

        font-size: 12px;
    }


    .market-change {
        font-size: 12px;
    }


    /* =====================================================
       EDGE FADES
    ===================================================== */

    .market-ticker-viewport::before,
    .market-ticker-viewport::after {
        width: 25px;
    }


    /* =====================================================
       LTR SPACING
    ===================================================== */

    .market-ticker-section[dir="ltr"]
    .market-ticker-viewport {
        margin-left: 5px;
        margin-right: 0;
    }


    /* =====================================================
       RTL SPACING
    ===================================================== */

    .market-ticker-section[dir="rtl"]
    .market-ticker-viewport {
        margin-right: 5px;
        margin-left: 0;
    }
}

.investment-section {
  padding: 20px 0;
}

.investment-section-inner {
  width: 100%;
  box-sizing: border-box;
}

.investment-heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.investment-heading a {
  color: var(--color-muted);
  text-decoration: none;
}

.investment-shortcuts {
  width: 100%;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 18px;
  padding-bottom: 4px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.investment-shortcuts::-webkit-scrollbar {
  display: none;
}

.investment-shortcut {
  display: flex;
  flex-direction: column;
  flex: 0 0 141px;
  width: 141px;
  min-width: 141px;
  text-decoration: none;
  text-align: center;
  justify-content: center;
  color: rgb(26, 32, 40);    
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  box-shadow: 0 2px 6px #0634540d;
  background: var(--color-white);
  height: 105px;
}

.investment-shortcut-icon {
  width: 100%;
  /* height: 62px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.investment-shortcut-icon img {
  width: 50px;
  height: 50px;
  color: #99BDD6;
}

.investment-shortcut span {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  font-family: 'Almarai';
  font-weight: 600;
  white-space: nowrap;
  /* margin-bottom: 7px; */
}

.investment-promo-grid {
  width: max-content;
  display: flex;
  gap: 10px;
  /* direction: rtl; */
}

.investment-promo-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.investment-promo-carousel::-webkit-scrollbar {
  display: none;
}

.investment-promo-card {
  position: relative;
  isolation: isolate;
  width: 300px;
  flex: 0 0 300px;
  min-width: 0;
  padding: 10px 12px 9px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  /* box-shadow:
    0 3px 8px rgba(6, 52, 84, 0.12),
    0 1px 2px rgba(6, 52, 84, 0.08); */
  align-items: center;
}

.investment-promo-card::before {
  content: "";
  position: absolute;
  top: -70%;
  left: -25%;
  width: 85%;
  height: 190%;
  /* background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.12) 22%,
    rgba(255, 255, 255, 0.04) 42%,
    transparent 65%
  ); */
  transform: rotate(12deg);
  pointer-events: none;
  z-index: 0;
}

.investment-promo-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  width: 84%;
  height: 1px;
  /* background: rgba(255, 255, 255, 0.28); */
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

.investment-promo-card > * {
  position: relative;
  z-index: 3;
}

.investment-promo-card {
  /* box-shadow:
    0 8px 18px rgba(6, 52, 84, 0.16),
    0 2px 5px rgba(6, 52, 84, 0.1); */
  filter: brightness(1.03);
}

.promo-map {
  background-image: url('/assets/ui/images/egypt-map-bg.png');
  background-size: cover;
  color: var(--color-white);
  background-repeat: no-repeat;
}

.eg-promo-button {
  background-color: #08A69B;
}

.promo-card-shary,
.promo-navy {
  color: var(--color-white);
}

.promo-card-shary{
  /* background-image: url('/assets/ui/images/shary-card-bg.png'); */
  /* background-size: cover;
  background-repeat: no-repeat; */
  background: linear-gradient(
    to right,
    #141F33 0%,
    #172B47 40%,
    #1E3F66 100%
  );
}

.promo-white {
  background: linear-gradient(
    135deg,
    var(--color-white) 0%,
    var(--color-white) 42%,
    #f7fafc 72%,
    #edf3f6 100%
  );
  color: var(--color-heading);
  border: 1px solid #d7e0e6;
  box-shadow:
    0 3px 8px rgba(6, 52, 84, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.promo-card-content {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* direction: ltr; */
  margin: auto;
  font-family: 'Almarai';
  font-weight: normal;
}

.promo-title {
  min-width: 0;
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.promo-title h3 {
  margin: 0 10;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 900;
  white-space: nowrap;
  padding: 0 10px;
}

.promo-trending-card .promo-title h3 {
  color: #1D4265;
}

.promo-sales-card .promo-title h3 {
  color: var(--color-white);
}

.promo-sales-button {
  background-color: #08A69B;
  color: var(--color-white);
}

.promo-sahel-map {
  background-image: url('/assets/ui/images/new-sahel-map.svg');
  background-size: cover;
  background-repeat: no-repeat;
}

.promo-icon {
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}

.shary-promo-icon {
  flex: 0 0 90px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}

  .shary-promo-icon img{
    width: 120px;
  }

.promo-icon img:not(.map-img) {
  width: 78px;
  height: 77px;
  display: block;
}

.promo-button {
  position: relative;
  width: 67%;
  height: 25px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease;
}

.promo-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 48%;
  background:rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  pointer-events: none;
}

.promo-button > * {
  position: relative;
  z-index: 1;
}

.promo-button span {
  font-size: 12px;
  line-height: 1;
}

.promo-map .promo-button {
  color: var(--color-white);
}

.shary-promo-button {
  background: linear-gradient(
    to right,
    #3AAFA0 0%,
    #2A8E93 45%,
    #1E4F6F 100%
  );
}

.promo-trending-card {
  background-image: url('/assets/ui/images/trending-card-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.promo-trending-button {
  background-color: #1D4265;
  color: var(--color-white);
}

.promo-white .promo-button {
  background: var(--gradient-promo-blue-button);
  color: var(--color-white);
}

.promo-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.promo-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.promo-sales-card {
  background-image: url('/assets/ui/images/offers-card-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 900px) {
  /* .investment-section-inner {
    padding: 0 16px;
  } */
  .investment-shortcuts {
    gap: 10px;
  }
  .investment-shortcut-icon {
    height: 68px;
  }
  .investment-shortcut-icon img {
    width: 45px;
    height: 45px;
  }
  .investment-shortcut span {
    font-size: 13px;
  }
  .investment-promo-grid {
    gap: 10px;
  }
  .investment-promo-card {
    height: 102px;
  }
}

@media (max-width: 600px) {
  /* .investment-section-inner {
    padding: 0 12px;
  } */
  .investment-heading {
    margin-bottom: 14px;
  }

  .investment-shortcuts {
    gap: 8px;
    margin-bottom: 12px;
  }
  .investment-shortcut {
    align-items: center;
    min-height: 62px;
    padding: 0px;
    background: var(--color-white);
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    /* text-align: right; */
    gap: 9px;
    box-sizing: border-box;
    text-align: center;
    justify-items: center;
  }
  .investment-shortcut-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 43px;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    background: #f5f9fc;
  }
  .investment-shortcut-icon img {
    width: 45px;
    height: 45px;
  }
  .investment-shortcut span {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    font-weight: 600;
  }
  .investment-promo-grid {
    gap: 8px;
  }
  .investment-promo-card {
    min-height: 145px;
    padding: 12px;
    border-radius: 13px;
  }
  .promo-card-content {
    gap: 8px;
  }
  .promo-title {
    padding-top: 2px;
  }
  .promo-icon{
    width: 53px;
    height: 80px;
    flex-basis: 80px;
  }
  .promo-icon{
    width: 78px;
    height: 80px;
  }
  .promo-card-content h3 {
    font-size: 20px;
  }
  .promo-card-content p {
    font-size: 8px;
  }
  .investment-promo-card button {
    height: 20px;
    font-size: 9px;
  }
  .promo-button span {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  /* .investment-section-inner {
    padding: 0 8px;
  } */
  .investment-shortcuts {
    gap: 6px;
  }
  .investment-shortcut {
    min-height: 56px;
    padding: 6px 7px;
    gap: 6px;
  }
  .investment-shortcut-icon {
    width: 40px;
    height: 40px;
    flex-basis: 50px;
  }
  .investment-shortcut-icon img {
    width: 44px;
    height: 44px;
  }
  .investment-shortcut span {
    font-size: 14px;
  }
  .investment-promo-card {
    min-height: 98px;
    padding: 10px;
  }
  .promo-card-content h3 {
    font-size: 20px;
  }
  .promo-card-content p {
    font-size: 7px;
  }
  .investment-promo-card button {
    height: 20px;
    font-size: 8px;
  }

}

@media (max-width: 360px) {
  .promo-button {
    gap: 4px;
  }
  .promo-button span {
    font-size: 12px;
  }
}

.project-card {
  position: relative;
}

.best-projects-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.best-projects-carousel::-webkit-scrollbar {
  display: none;
}

.best-projects-track {
  width: max-content;
  display: flex;
  gap: 16px;
}

.project-favourite {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.5rem;
  background: var(--color-white);
  color: #000;
  font-family: Arial, sans-serif;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.project-favourite:hover {
  background: rgba(255, 255, 255, 0.28);

  border-color: rgba(255, 255, 255, 0.65);

  transform: scale(1.08);
}

.project-favourite.active {
  background: rgba(255, 255, 255, 0.95);

  color: #e53935;

  border-color: var(--color-white);
}

@media (max-width: 640px) {
  .project-favourite {
    top: 8px;
    left: 8px;

    width: 29px;
    height: 29px;

    font-size: 19px;
  }
}

.new-projects-section {
  overflow: hidden;
  background: var(--color-white);
}

.new-projects-header {
  width: 100%;
  /* padding: 0 1%; */
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /* direction: rtl; */
}

.new-project-card, .project-card {
  font-family: 'Almarai';
  font-weight: normal;
}

.new-projects-view-all {
  text-decoration: none;
  cursor: pointer;
}

/* CAROUSEL */
.new-projects-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}

.new-projects-carousel::-webkit-scrollbar {
  display: none;
}

.new-projects-track {
  width: max-content;
  min-width: 100%;
  display: flex;
  gap: 10px;
  /* direction: ltr; */
  box-sizing: border-box;
}

.new-projects-carousel.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.new-projects-carousel.dragging .new-project-card {
  cursor: grabbing;
}

.new-project-card {
  flex: 0 0 auto;
}

/* CARDS */
.new-project-card {
  position: relative;
  flex: 0 0 460px;
  width: 460px;
  height: 200px;
  min-width: 0;
  border-radius: 11px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  scroll-snap-align: center;
  /* box-shadow: 0 3px 8px rgba(6, 52, 84, 0.12); */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

/* Active card */
.new-project-card.active {
  transform: translateY(-2px);
  /* box-shadow: 0 8px 20px rgba(6, 52, 84, 0.22); */
  filter: brightness(1.05);
}

.new-project-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 7px 16px rgba(6, 52, 84, 0.18);
  cursor: pointer;
}

.new-project-card::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -20%;
  width: 75%;
  height: 280%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.09) 30%,
    transparent 65%
  );
  transform: rotate(12deg);
  pointer-events: none;
  z-index: 0;
}

.new-project-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  width: 84%;
  height: 1px;
  /* background: rgba(255, 255, 255, 0.25); */
  pointer-events: none;
  z-index: 2;
}

/* PAGINATION */
.new-projects-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 12px;
  /* direction: ltr; */
}

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

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


.new-projects-pagination span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #cbd8df;
  cursor: pointer;
  transition:
    width 0.2s ease,
    background 0.2s ease;
}

.new-projects-pagination span.active {
  width: 15px;
  background: var(--color-navy);
}

@media (max-width: 640px) {

  /* .new-projects-carousel {
    padding: 0 4%;
  } */

  .new-projects-track {
    gap: 8px;
  }

  .new-project-card {
    flex-basis: calc(64vw / var(--z, 1));
    width: calc(64vw / var(--z, 1));
    height: 110px;
  }

  .new-projects-pagination {
    margin-top: 10px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .new-project-card {
    flex-basis: 300px;
    width: 300px;
  }
}

.new-project-content {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: start;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0)
  ); 
  pointer-events: none;
  right: 10px;
  margin-top: auto;
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease;
}

.new-project-content:hover {
    background-color: rgba(41, 68, 94, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.new-project-content h3 {
  margin: 0px 10px;
  color: var(--color-white);
  font-size: 17px;
  line-height: 1.1;
  font-weight: 900;
}

.new-project-content p {
  margin: 5px 10px;
  /* color: rgba(255, 255, 255, 0.75); */
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

.new-project-badge {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 5;
  height: 14px;
  min-width: 42px;
  padding: 0 7px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
}

.new-projects-pagination {
  width: 100%;
  height: 14px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* direction: ltr; */
}

.new-projects-pagination span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5df;
}

.new-projects-pagination span.active {
  width: 15px;
  border-radius: 999px;
  background: #124d73;
}

@media (max-width: 900px) {
  /* .new-projects-header {
    padding: 0 3%;
  } */
/* 
  .new-projects-carousel {
    padding: 0 1.5%;
  } */

  .new-project-card {
    height: 145px;
  }
}

@media (max-width: 400px) {
  /* .new-projects-header {
    padding: 0 12px;
  } */

  /* .new-projects-carousel {
    padding: 0 7px;
  } */

  .new-project-card {
    /* height: 120px; */
    border-radius: 9px;
  }

  .new-project-content h3 {
    font-size: 10px;
  }

  .new-project-content p {
    font-size: 8px;
  }
  
}

.compounds-content {
  font-weight: 900;
  /* background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0)
  ); */
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease;
}

/* ── home.css · جزء 3 من 9: الصفوف الأفقية والمناطق والمقترح لك وكود الدولة (المصدر: resources/css/shary/home/03-rows-areas-recommended.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* Shared Horizontal Scroll */
.horizontal-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.horizontal-scroll > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.areas-container {
  /* max-width: 1180px; */
  margin: 0 auto;
  box-sizing: border-box;
}

.promo-banners-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  box-sizing: border-box;
}

.promo-banners-carousel::-webkit-scrollbar {
  display: none;
}

.promo-banners-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  width: max-content;
}

.shary-promo-banner {
  position: relative;
  flex: 0 0 500px;
  width: 500px;
  height: 160px;
  overflow: hidden;
  border-radius: 8px;
  /* background: linear-gradient(
    105deg,
    #35b7aa 0%,
    #3dbbb0 35%,
    #8bd8d0 75%,
    #d8f3ef 100%
  ); */
  box-shadow: 0 2px 8px rgba(0, 60, 80, 0.06);
  isolation: isolate;
}

@media (max-width: 640px) {
  .shary-promo-banner {
    flex-basis: 260px;
    width: 260px;
    height: 85px; 
  }
}

.promo-brand {
  position: absolute;
  top: 7px;
  left: 13px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--color-white);
  font-size: 5px;
  font-weight: 700;
  direction: ltr;
  z-index: 5;
}

.promo-brand-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-white);
}

.promo-phone-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  z-index: 4;
}

.promo-phone {
  position: relative;
  width: 29px;
  height: 58px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 5px;
  background: #152d35;
  border: 1px solid #183840;
  box-shadow: 0 3px 7px rgba(0, 50, 60, 0.25);
}

.promo-phone::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: #243d42;
}

.phone-screen {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(180deg, #f8fbfb, #dcefee);
}

.phone-line {
  position: absolute;
  top: 10px;
  left: 4px;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: #7da4a5;
}

.phone-line.short {
  top: 15px;
  width: 8px;
  opacity: 0.7;
}

.phone-message {
  position: absolute;
  top: 20px;
  left: 7px;
  width: 16px;
  height: 11px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 2px;
  background: var(--color-white);
  color: #24515b;
  font-size: 2.5px;
  line-height: 1.1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.phone-message b {
  display: block;
  font-size: 2.4px;
}

.phone-button {
  position: absolute;
  left: 4px;
  bottom: 8px;
  width: 19px;
  height: 8px;
  border-radius: 2px;
  background: #2db3a4;
}

.promo-curve {
  position: absolute;
  right: 14%;
  top: -50px;
  width: 170px;
  height: 190px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: rotate(-18deg);
  z-index: 1;
}

.promo-bottom-info {
  position: absolute;
  left: 12px;
  bottom: 7px;
  color: var(--color-white);
  z-index: 5;
}

.promo-small-title {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 4px;
}

.promo-small-title span:first-child {
  font-size: 4px;
}

.promo-socials {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  font-size: 5px;
  opacity: 0.9;
}

.promo-download {
  position: absolute;
  right: 11px;
  bottom: 7px;
  z-index: 5;
  color: #15424d;
  text-align: right;
}

.promo-download-title {
  display: flex;
  flex-direction: column;
  font-size: 4px;
  line-height: 1.3;
}

.promo-download-title strong {
  font-size: 5px;
}

.promo-store-buttons {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}

.promo-store-buttons span {
  padding: 2px 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 3.5px;
  white-space: nowrap;
}

.areas-section {
  padding-top: 18px;
  padding-bottom: 28px;
}

.areas-header {
  width: 100%;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* .areas-header a {
  text-decoration: none;
} */

.areas-grid {
  width: max-content;
  display: flex;
  gap: 25px;
}

.areas-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.areas-carousel::-webkit-scrollbar {
  display: none;
}

.home-area-card {
  position: relative;
  flex: 0 0 275px;
  width: 275px;
  height: 200px;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-heading);
  background: var(--color-white);
  border: 1px solid #dce2e6;
  border-radius: 11px;
  box-shadow: 0 2px 5px rgba(0, 50, 70, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  margin-top: 4px;
}

.home-area-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 50, 70, 0.12);
}

.area-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.home-area-card h3 {
  margin: 0;
  color: var(--color-heading);
  font-family: 'Almarai';
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  margin-bottom: 5px;
}

.area-subtitle {
  margin: 2px 0 0;
  color: #a1aab2;
  font-size: 10px;
  line-height: 1;
}

.area-divider {
  width: 85%;
  height: 1px;
  /* margin-top: 7px; */
  margin-bottom: 5px;
  background: #e5e9ec;
}

.area-stats {
  width: 85%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.area-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.area-stats > div + div {
  border-inline-start: 1px solid #e3e8eb;
}

.area-stats strong {
  color: var(--color-heading);
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
}

.area-stats span {
  margin-top: 2px;
  /* color: #8e999f; */
  font-size: 14px;
  line-height: 1;
}

.properties-headline-3 {
  font-family: 'Almarai';
  font-weight: 600;
  font-size: 24px;
}

.properties-headline-6 {
  font-size: 16px;
}

@media (max-width: 800px) {
  /* .areas-container {
    padding-left: 12px;
    padding-right: 12px;
  } */

  .shary-promo-banner {
    height: 100px;
  }

  .areas-grid {
    gap: 6px;
  }

  .home-area-card {
    height: 180px;
  }

  .area-subtitle, .area-stats span {
    font-size: 13px !important;
  }

  [dir="rtl"] .headline-2 {
    font-size: 16px !important;
  }

  [dir="ltr"] .headline-2 {
    font-size: 20px !important;
  }

  .show-all-btn {
    font-size: 15px !important;
  }

  .properties-headline-6 {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .shary-promo-banner {
    height: 100px;
    border-radius: 7px;
  }

  .promo-phone {
    transform: scale(0.9);
  }

  .areas-section {
    padding-top: 7px;
  }

  .areas-grid {
    gap: 6px;
  }

  .home-area-card {
    height: 160px;
    flex: 0 0 165px;    
    width: 165px;
    padding: 9px 4px 6px;
    border-radius: 9px;
  }

  .area-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 4px;
  }

  .area-icon svg {
    width: 15px;
    height: 15px;
  }

  .home-area-card h3 {
    font-size: 15px;
  }

  .area-divider {
    width: 88%;
    margin-top: 6px;
    margin-bottom: 10px;
  }

  .area-stats {
    width: 90%;
  }

  .area-stats strong {
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .shary-promo-banner {
    height: 90px;
  }

  .home-area-card {
    height: 165px;
    padding-top: 7px;
  }

  .area-icon {
    width: 72px;
    height: 72px;
  }

  .home-area-card h3 {
    font-size: 15px;
  }
}

/* .recommended-section {
  background: #f5f7f8;
} */

.recommended-container {
  width: 100%;
  /* max-width: 1180px; */
  margin: 0 auto;
  box-sizing: border-box;
}

.recommended-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* direction: rtl; */
  margin-bottom: 9px;
}

/* .recommended-header a {
  text-decoration: none;
} */

.recommended-grid {
  width: max-content;
  display: flex;
  gap: 15px;
  /* direction: rtl; */
}

.recommended-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.recommended-carousel::-webkit-scrollbar {
  display: none;
}

.property-card {
  flex: 0 0 330px;
  width: 330px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid #d8e0e5;
  border-radius: 13px;
  box-shadow: 0 2px 5px rgba(8, 50, 70, 0.1);
  /* direction: rtl; */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.property-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(8, 50, 70, 0.15);
}

.property-image {
  position: relative;
  height: 160px;
  overflow: hidden;
  /* border-bottom: 3px solid rgba(20, 62, 82, 0.55); */
}

.property-badge {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 5;
  min-width: 52px;
  height: 16px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 999px;
  background: #238e81;
  color: var(--color-white);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.property-actions, .compounds-actions {
  position: absolute;
  top: 7px;
  left: 8px;
  z-index: 6;
  display: flex;
  gap: 3px;
  direction: ltr;
}

.property-actions button {
  width: 19px;
  height: 19px;
  padding: 3px;
  /* border: 1px solid #d5dfe4; */
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  color: #174761;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.property-actions button:hover {
  transform: scale(1.08);
  background: var(--color-white);
}

.property-actions svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.property-actions button:first-child svg {
  fill: currentColor;
  stroke: none;
}

.property-year {
  position: absolute;
  inset-inline-start: 9px;
  top: 3px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--color-white);
  line-height: 1;
}

.property-location-city {
  position: absolute;
  inset-inline-start: 9px;
  bottom: 3px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--color-white);
  line-height: 1;

}

.property-year span {
  font-size: 10px;
  opacity: 0.95;
}

.property-year strong {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
}

.property-content {
  padding: 8px 8px 7px;
  box-sizing: border-box;
}

.property-main {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* direction: ltr; */
}

.developer-logo {
  width: 55px;
  height: 55px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e7ea;
  border-radius: 50%;
  background: var(--color-white);
  color: #667b86;
  font-size: 4px;
  font-weight: 800;
  direction: ltr;
}

.developers-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.developers-carousel::-webkit-scrollbar {
  display: none;
}

.developers-track {
  width: max-content;
  display: flex;
  gap: 12px;
}

.developer-card {
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #64748b;
}

.property-info {
  flex: 1;
  min-width: 0;
  text-align: start;
}

.property-location {
  margin: 0;
  color: #7d8b93;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-info h3 {
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-divider {
  width: 100%;
  height: 1px;
  margin: 5px 0;
  background: #e4e9ec;
}

.property-divider-without-bg {
  width: 100%;
  height: 1px;
  margin: 5px 0;
}

.property-details {
  width: 100%;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  /* direction: rtl; */
  white-space: nowrap;
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.property-details span {
  display: flex;
  align-items: center;
  gap: 2px;
}

.property-payment {
  display: flex;
  align-items: center;
  /* justify-content: flex-start; */
  white-space: nowrap;
  /* direction: rtl; */
}

.property-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* direction: ltr; */
  margin-top: 0px;
}

.property-contact-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  /* direction: ltr; */
}

.property-contact-buttons a {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.property-contact-buttons a:hover {
  transform: scale(1.08);
}

.property-contact-buttons img:hover {
  transform: scale(1.08);
}

.property-contact-buttons svg {
  width: 17px;
  height: 17px;
  fill: var(--color-white);
}

.property-contact-buttons .phone-symbol {
  fill: #20ca6a;
}

.property-price {
  color: #1b2831;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.property-price small {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .recommended-grid {
    gap: 8px;
  }

  .property-image {
    height: 150px;
  }
}

@media (max-width: 600px) {
  .recommended-section {
    padding-top: 5px;
  }

  .recommended-container {
    padding-left: 8px;
    padding-right: 8px;
  }

  .recommended-header {
    margin-bottom: 4px;
  }

  .recommended-header a {
    font-size: 8px;
  }

  .recommended-grid {
    gap: 6px;
  }

  .property-image {
    height: 145px;
  }

  .property-content {
    padding: 7px 6px 6px;
  }

  .property-main {
    min-height: 34px;
    gap: 5px;
  }

  .developer-logo {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    font-size: 3.5px;
  }

  .contact-buttons a {
    width: 23px;
    height: 23px;
  }

  .contact-buttons svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 380px) {
  .recommended-grid {
    gap: 5px;
  }

  .property-image {
    height: 145px;
  }

  .property-content {
    padding: 6px 5px;
  }

  .property-badge {
    min-width: 45px;
    height: 14px;
    font-size: 8px;
  }

  .property-actions {
    left: 5px;
    top: 6px;
    gap: 2px;
  }

  .property-actions button {
    width: 17px;
    height: 17px;
  }

  .property-year strong {
    font-size: 10px;
  }

  .property-price {
    font-size: 16px;
  }

  .contact-buttons a {
    width: 21px;
    height: 21px;
  }
}

.contact-section {
  width: 100%;
  padding: 50px 20px;
  /* background: #f4f7fa; */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  /* direction: rtl; */
}

.contact-card {
  width: 100%;
  max-width: 450px;
  padding: 24px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #eef5fb 0%, #e5edf6 100%);
  border: 1px solid #cbdceb;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 60, 90, 0.08);
  /* direction: rtl; */
}

.contact-label {
  margin: 0;
  color: #07947f;
  font-size: 16px;
  font-weight: 800;
}

.contact-header h2 {
  margin: 4px 0;
  color: #073b59;
  line-height: 1.4;
}

.contact-description {
  margin: 0 0 18px;
  color: #71818c;
  font-size: 12px;
  line-height: 1.6;
}

.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-field label {
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

.contact-field label span {
  color: #d35454;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: none;
  background: var(--color-white);
  color: #50636d;
  border-radius: 5px;
  font-family: inherit;
  font-size: 14px;
  text-align: start;
}

.contact-field input {
  height: 34px;
  padding: 0 10px;
}

.contact-field select {
  height: 34px;
  padding: 0 10px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.contact-field textarea {
  height: 70px;
  padding: 10px;
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #a5afb5;
}

.egypt-flag {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
}

.select-wrapper {
  position: relative;
  width: 100%;
}

.select-wrapper select {
  padding-left: 30px;
}

.select-arrow {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #496b7c;
  font-size: 14px;
  pointer-events: none;
}

.contact-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 5px;
}

.contact-buttons button {
  width: 100%;
  height: 36px;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 3px 7px rgba(10, 50, 80, 0.25);
  transition: 0.15s ease;
}

.contact-buttons button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.contact-submit,
.contact-call {
  background: linear-gradient(
    to bottom,
    #39749e 0%,
    #245a80 25%,
    #12466d 55%,
    #0b3b60 100%
  );
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 20, 40, 0.35),
    0 4px 6px rgba(5, 42, 70, 0.28);

  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.contact-call::before,
.contact-submit::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0%;
  right: 0%;
  height: 7px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* Needed because of ::before */
.contact-submit,
.contact-call {
  position: relative;
  overflow: hidden;
}

.contact-submit:hover,
.contact-call:hover {
  transform: translateY(-1px);

  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 20, 40, 0.35),
    0 5px 8px rgba(5, 42, 70, 0.32);
}

/* click */
.contact-submit:active,
.contact-call:active {
  transform: translateY(1px);

  box-shadow:
    inset 0 2px 3px rgba(0, 20, 40, 0.3),
    0 2px 3px rgba(5, 42, 70, 0.25);
}

.contact-call span {
  font-size: 20px;
}

@media (max-width: 600px) {
  .contact-section {
    padding: 30px 16px;
  }

  .contact-card {
    max-width: 100%;
    padding: 20px;
  }

  .contact-header h2 {
    font-size: 18px;
  }
}

/* .iti__search-input {
  width: calc(100% - 16px) !important;
  height: 32px !important;

  margin: 8px !important;
  padding: 0 8px !important;

  box-sizing: border-box !important;

  border: 1px solid #d9e1e6 !important;
  border-radius: 5px !important;

  outline: none !important;

  font-family: inherit !important;
  font-size: 11px !important;
}

.iti__country-list {
  width: 100% !important;

  max-height: 220px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.iti__country {
  width: 100% !important;
  box-sizing: border-box !important;

  padding: 8px 10px !important;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  font-size: 11px !important;
}

.iti__country:hover {
  background: #f1f6f9 !important;
} */

/* :root {
  --iti-flag-width: 16px;
} */

.hero-bg.hero-section,
.hero-section {
  position: relative;
  min-height: 386px;
  height: 386px;
  overflow: visible;
  color: var(--color-white);
}

.hero-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 425px;
  padding: 0;
  z-index: 10;
}

.hero-image-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  z-index: 2;
}

.hero-image-inner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: relative;
  overflow: hidden;
}

.hero-slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-slide-image.active {
  opacity: 1;
}

.hero-counter {
  position: absolute;
  top: 20px;
  right: 2%;
  width: 50px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  z-index: 5;
}

.hero-project-info {
  position: absolute;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 5;
}

.hero-project-info h1 {
  margin: 0;
  color: var(--color-white);
  font-family: inherit;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 900;
}

.hero-project-info p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 600;
}

.hero-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

.hero-dots .hero-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
}

.hero-dots .hero-dot.active {
  width: 15px !important;
  border-radius: 999px;
  background: var(--color-white);
}

.hero-image-placeholder {
  touch-action: pan-y;      /* allow vertical scroll, we handle horizontal */
  user-select: none;
  -webkit-user-select: none;
}

.hero-slide-image {
  -webkit-user-drag: none;  /* stop image ghost-dragging on desktop */
  user-drag: none;
}

.property-search-box {
  position: absolute;
  left: 50%;
  bottom: -100px;
  transform: translateX(-50%);
  width:  86%;
  /* max-width: calc(100% - 30px); */
  /* max-width: min(100% - 32px, 1380px); */
  height: 200px;
  padding: 18px;
  margin: 0;
  background: var(--color-white);
  border: 1px solid #d8e2eb;
  border-radius: 16px;
  box-shadow:
    0 7px 18px rgba(15, 54, 82, 0.14),
    0 2px 5px rgba(15, 54, 82, 0.08);
  z-index: 20;
  box-sizing: border-box;
  font-family: 'Almarai';
  font-weight: normal;
}

.property-search-tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  height: 29px;
  margin: 0 0 7px;
}

.search-tab {
  height: 29px;
  min-width: 60px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-input);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.search-tab.active {
  background: var(--color-navy-light);
  color: var(--color-white);
  border-color: var(--color-navy-light);
  box-shadow: 0 3px 7px rgba(13, 66, 102, 0.2);
}

.search-tab-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.search-tab-icon svg {
  width: 20px;
  height: 20px;
}

.search-input-icon {
  font-size: 16px;
  color: #71879a;
}

.property-search-filters {
  display: grid;
  grid-template-columns: 86px 82px 1fr 1fr 1fr;
  gap: 5px;
  width: 100%;
  height: 31px;
}

.property-filter {
  position: relative;
  height: 31px;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  overflow: hidden;
}

.property-filter select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  padding: 0 22px 0 8px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #71879a;
  font-family: inherit;
  font-size: 7px;
  text-align: start;
  cursor: pointer;
}

.filter-arrow {
  position: absolute;
  /* left: 9px; */
  top: 30%;
  inset-inline-end: 12px;
  padding: 0;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  pointer-events: none;
}

.filter-arrow img {
  width: 7px;
  height: 7px;
}

.advanced-search-btn {
  height: 31px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-input);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  /* justify-content: space-between; */
}

.property-search-btn {
  height: 31px;
  border: 0;
  border-radius: 999px;
  background: var(--color-navy-light);
  color: var(--color-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 8px rgba(13, 66, 102, 0.25);
  cursor: pointer;
}

.hero-bg.hero-section::after,
.hero-section::after {
  content: "";
  position: absolute;
  left: -30px;
  right: -5%;
  bottom: -1px;
  height: 105px;
  background: #164967;
  border-radius: 50% 50% 0 0 / 35% 35% 0 0;
  z-index: 1;
  pointer-events: none;
}

.hero-content,
.hero-image-placeholder,
.hero-counter,
.hero-project-info {
  z-index: 10;
}

.headline-2 {
  font-family: 'Almarai';
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: var(--color-navy);
}

.show-all-btn {
  font-family: 'Almarai';
  font-weight: 600;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    font-family:'Almarai';
    font-weight: normal;
    font-size:16px;
  }

  .hero-section,
  .hero-bg.hero-section {
    position: relative !important;
    width: 100% !important;
    min-height: 500px !important;
    height: 500px !important;
    overflow: visible !important;
  }

  .hero-content {
    width: 100% !important;
    height: 375px !important;
    min-height: 300px !important;
    padding: 0 !important;
  }

  .hero-counter {
    top: 14px !important;
    right: 9px !important;
    width: 42px !important;
    height: 18px !important;
    font-size: 10px !important;
  }

  .hero-project-info {
    left: 50% !important;
    width: calc(100% - 30px) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  .hero-project-info h1 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .hero-project-info p {
    margin-top: 4px !important;
    font-size: 14px !important;
  }

  .property-search-box {
    position: absolute !important;
    left: 50% !important;
    bottom: 20px !important; /* used*/ 
    transform: translateX(-50%) !important;
    width: calc(100% - 20px) !important;
    max-width: 600px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 25px !important;
    box-sizing: border-box !important;
    z-index: 50 !important;
  }

  .property-search-tabs {
    width: 100% !important;
    height: 28px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    overflow: hidden !important;
    /* direction: rtl !important; */
  }

  .search-tab {
    flex: 0 0 auto !important;
    height: 27px !important;
    min-width: auto !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 3px !important;
  }

  .search-tab-icon {
    width: 10px !important;
    height: 10px !important;
  }

  .search-tab-icon svg {
    width: 11px !important;
    height: 11px !important;
  }

  .property-search-input {
    height: 40px !important;
    margin-bottom: 0px !important;
    padding: 0 8px !important;
  }

  .search-input-icon {
    font-size: 15px !important;
  }

  .property-search-filters {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    height: auto !important;
    /* direction: rtl !important; */
    align-items: center !important;
  }

  .property-filter,
  .advanced-search-btn,
  .property-search-btn {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
  }

  .property-filter select {
    height: 28px !important;
    padding: 0 20px 0 7px !important;
    font-size: 7px !important;
  }

  .filter-arrow {
    inset-inline-end: 8px !important;
  }

  .advanced-search-btn {
    font-size: 12px !important;
    padding: 0 7px !important;
  }

  .advanced-icon {
    font-size: 10px !important;
  }

  .property-search-btn {
    font-size: 12px !important;
    padding: 0 8px !important;
  }

  .property-filter:nth-child(1) {
    order: 1 !important;
  }

  .property-filter:nth-child(2) {
    order: 2 !important;
  }

  .property-filter:nth-child(3) {
    order: 3 !important;
  }

  .advanced-search-btn {
    order: 4 !important;
  }

  .property-search-btn {
    order: 5 !important;
    grid-column: 1 / -1 !important;
  }

  .hero-bg.hero-section::after,
  .hero-section::after {
    bottom: 0 !important;
    height: 95px !important;
    left: -20% !important;
    right: -20% !important;
    border-radius: 50% 50% 0 0 / 35% 35% 0 0 !important;
  }

  .hero-content {
    width: 99%;
    margin: auto;
  }

  .contact-buttons buttons {
    width: 90%;
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .hero-section,
  .hero-bg.hero-section {
    min-height: 400px !important;
    height: 400px !important;
  }

  .hero-content {
    height: 401px !important;
    min-height: 350px !important;
  }

  .hero-counter {
    right: 15px !important;
    top: 27px !important;
    width: 39px !important;
    height: 17px !important;
    font-size: 6px !important;
  }

  .hero-project-info h1 {
    font-size: 18px !important;
  }

  .property-search-box {
    width: calc(100% - 16px) !important;
    bottom: 15px !important;
    padding: 7px !important;
    border-radius: 14px !important;
  }

  .search-tab {
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .property-search-input {
    height: 40px !important;
  }

  .property-search-filters {
    gap: 4px !important;
  }

  .property-filter,
  .advanced-search-btn,
  .property-search-btn {
    height: 27px !important;
    min-height: 27px !important;
  }

  .property-filter select {
    height: 27px !important;
    font-size: 6.5px !important;
  }

  .advanced-search-btn,
  .property-search-btn {
    font-size: 12px !important;
  }

  .contact-buttons {
    align-items: center;
  }

  .contact-buttons buttons {
    width: 90%;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .property-search-input {
    height: 40px;
  }

  .property-search-input input {
    padding: 0 10px 0 30px;
    font-size: 12px;
  }

  .search-input-icon {
    width: 27px;
    height: 27px;
    font-size: 20px;
  }
/* 
  .iti__country-list {
    max-height: 210px !important;
  } */
}

.sell-rent-cards {
  background-color: #DDF5F3;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  height: 130px;

}

.sell-rent-cards h3 {
  color: #285A7C;
}

.sell-rent-cards h6{
  color: #416B83;
}

/* ── home.css · جزء 4 من 9: بحث الرئيسية (موبايل / ديسكتوب) ونوافذ الفلاتر والكاروسيل (المصدر: resources/css/shary/home/04-search-filters.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* MOBILE SEARCH */
.property-search-mobile {
  display: none;
}

.mobile-filter-btn {
  display: none;
}

/* MOBILE FILTER POPUP */
.mobile-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(3, 29, 45, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
}

.mobile-filter-overlay.active {
  display: flex;
}

.mobile-filter-modal {
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: mobileFilterUp 0.25s ease-out;
}

@keyframes mobileFilterUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* Header */
.mobile-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #edf0f2;
}

.mobile-filter-header h3 {
  margin: 0;
  color: var(--color-navy-text);
  font-size: 16px;
  font-weight: 800;
}

.mobile-filter-close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #f1f3f5;
  color: var(--color-navy-text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}


/* Body */
.mobile-filter-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
}

.mobile-filter-body .property-filter {
  width: 100%;
  height: 48px;
}


/* Footer */
.mobile-filter-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px 20px;
  border-top: 1px solid #edf0f2;
}

.mobile-filter-reset,
.mobile-filter-apply {
  height: 44px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mobile-filter-reset {
  flex: 0 0 110px;
  border: 1px solid #dce3e8;
  background: #fff;
  color: var(--color-navy-text);
}

.mobile-filter-apply {
  flex: 1;
  border: 0;
  background: var(--color-navy-text);
  color: #fff;
}

/* SEARCH INPUT */
.property-search-input {
  position: relative;
  flex: 1;
  width: auto;
  height: 40px;
  margin: 0 0 0px;
  padding: 0 10px;
  /* direction: rtl; */
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 30px;
  border: 1px solid #d7e0e7;
  overflow: hidden;
  box-sizing: border-box;
}

.property-search-input input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0 55px 0 55px;
  text-align: start;
  font-size: 14px;
  color: #173c55;
}

.property-search-input input::placeholder {
  color: #8a98a3;
}

/* Search icon */
.search-input-icon {
  position: absolute;
  /* right: 12px; */
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0a466b;
  color: #fff;
  font-size: 16px;
  z-index: 2;
  padding: 10px 10px;
}

/* DESKTOP FILTERS */
.desktop-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.property-filter {
  position: relative;
  height: 44px;
}

.property-filter select {
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #d8e1e8;
  border-radius: 22px;
  background: #fff;
  color: #173c55;
  padding: 0 14px;
  padding-left: 34px;
  outline: none;
  font-size: 11px;
  text-align: start;
}

.filter-arrow {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  width: 10px;
  pointer-events: none;
}

.filter-arrow img {
  width: 10px;
  height: 10px;
}

/* Search button */
.property-search-btn {
  height: 44px;
  border: 0;
  border-radius: 22px;
  /* background: #0a466b; */
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
    background: linear-gradient(
        180deg,
        #063455 0%,
        #063455 100%
    );

    box-shadow:
        0 5px 12px rgba(13, 66, 102, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    position: relative;
    overflow: hidden;
}


.property-search-btn::before {
    content: "";

    position: absolute;

    top: 0px;
    /* left: 10%; */

    width: 100%;
    height: 17px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.2);

    filter: blur(1.5px);

    pointer-events: none;
}

/* Advanced button */
.advanced-search-btn {
  height: 44px;
  border: 1px solid #d8e1e8;
  border-radius: 22px;
  background: #fff;
  color: #173c55;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* MOBILE FILTER BUTTON */
.mobile-filter-trigger {
  display: none;
  position: absolute;
  /* left: 8px; */
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #0a466b;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.mobile-filter-trigger svg {
  width: 22px;
  height: 22px;
}

/* MOBILE FILTER POPUP */
.mobile-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  width: calc(100vw / var(--z, 1));
  height: calc(100vh / var(--z, 1));
  background: rgba(5, 28, 42, 0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Popup opened */
.mobile-filter-overlay.active {
  display: flex;
}

/* FILTER MODAL */
.mobile-filter-modal {
  width: min(100%, 420px);
  max-height: calc(calc(100vh / var(--z, 1)) - 32px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.mobile-filter-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px 100px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Header */
.mobile-filter-header {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid #e5eaee;
}

.mobile-filter-header h3 {
  margin: 0;
  color: #0a466b;
  font-size: 16px;
  font-weight: 800;
}

.mobile-filter-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #edf2f5;
  color: #173c55;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

/* Content */
.mobile-filter-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-filter-content .property-filter {
  height: 48px;
}

/* Footer */
.mobile-filter-footer {
  padding: 14px 18px;
  border-top: 1px solid #e5eaee;
  background: #fff;
}

.mobile-filter-apply {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 24px;
  background: #0a466b;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 767px) {
  .mobile-full {
    width: 100%;
  }

  /* Keep the search bar visible */
  .property-search-input {
    display: flex !important;
  }

  /* Make room for the filter button */
  .property-search-input input {
    padding-right: 55px;
    padding-left: 55px;
  }

  /* Show filter icon */
  .mobile-filter-trigger {
    display: flex;
  }

  .property-search-tabs{
    display: none !important;
  }

  /* Hide desktop filters */
  .desktop-filters {
    display: none !important;
  }

  /* Smaller tabs */
  .property-search-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .search-tab {
    height: 36px;
    padding: 0 13px;
    border-radius: 20px;
  }

  /* Make popup truly fullscreen */
  .mobile-filter-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .mobile-filter-modal {
    width: calc(100vw / var(--z, 1));
    height: calc(100vh / var(--z, 1));
    max-height: none;
    border-radius: 0;
    display: flex;
  }

  .mobile-filter-header {
    min-height: 64px;
  }

  .mobile-filter-content {
    padding: 20px;
  }

  .mobile-filter-footer {
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  }

  .hero-project-info {
    bottom: 55px;
  }

  .hero-project-info .hero-dots {
    position: fixed;
    left: 50%;
    bottom: -75px;
    transform: translateX(-50%);
    margin: 0;
    z-index: 50;
  }
}

/* Horizontal Carousel Navigation */
.horizontal-carousel-wrapper {
  position: relative;
  width: 100%;
}

.horizontal-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  width: 34px;
  height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.horizontal-carousel-btn:hover {
  background: rgba(0, 0, 0, 0.68);
}

.horizontal-carousel-btn.prev {
  inset-inline-end: 8px;
}

.horizontal-carousel-btn.next {
  inset-inline-start: 8px;
}

.horizontal-carousel-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.horizontal-carousel-btn.disabled {
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 640px) {
  .horizontal-carousel-btn {
    width: 30px;
    height: 30px;
  }

  .horizontal-carousel-btn svg {
    width: 16px;
    height: 16px;
  }

  .horizontal-carousel-btn.prev {
    inset-inline-end: 5px;
  }

  .horizontal-carousel-btn.next {
    inset-inline-start: 5px;
  }
}

.horizontal-carousel-btn.prev {
  inset-inline-start: 8px;
  inset-inline-end: auto;
}

.horizontal-carousel-btn.next {
  inset-inline-end: 8px;
  inset-inline-start: auto;
}

[dir="ltr"] .horizontal-carousel-btn.prev svg {
  transform: scaleX(-1);
}

[dir="ltr"] .horizontal-carousel-btn.next svg {
  transform: scaleX(-1);
}

.property-contact-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.property-contact-buttons a {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.property-contact-buttons svg {
  width: 21px;
  height: 21px;
  fill: white;
}

.call-button {
  background: #173F62;
}

.whatsapp-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #20C86B;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
}

@media (max-width: 640px) {
  .investment-shortcuts {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .investment-shortcuts::-webkit-scrollbar {
    display: none;
  }

  .investment-shortcut {
    flex: 0 0 120px;
    width: 120px;
    min-width: 120px;
  }
}

/* Mobile dots for investment promo carousel */
.investment-promo-dots {
  display: none;
}

@media (max-width: 767px) {
  .investment-section{
     padding: 25px 0px;
  }
  .investment-promo-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    /* direction: rtl; */
  }

  .investment-promo-dot {
    width: 4px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .investment-promo-dot.active {
    width: 15px;
    border-radius: 999px;
    background: #124d73;
  }
}

@media (max-width: 767px) {
  #properties .sell-rent-cards {
    position: relative;
    height: 160px !important;
    min-height: 160px;
    padding: 16px;
    display: block !important;
  }

  /* ICON */
  #properties .sell-rent-cards > div:last-child {
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  #properties .sell-rent-cards > div:last-child img {
    display: block !important;
    width: 75px !important;
    height: 75px !important;
    object-fit: contain;
    margin: 0 auto !important;
  }

  /* TEXT */
  #properties .sell-rent-cards > div:first-child {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
  }

  #properties .properties-headline-3 {
    margin: 0 !important;
    font-size: 20px;
    line-height: 1.2;
  }

  /* Arrow */
  #properties .sell-rent-cards::after {
    content: "‹";
    position: absolute;
    inset-inline-end: 14px;
    bottom: 16px;
    font-weight: bold;
    font-size: 28px;
    line-height: 1;
    color: #285a7c;
    transform: scaleX(-1);
  }

  #properties .sell-rent-cards {
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 767px) {

    #properties .sell-rent-cards {
        position: relative;
        height: 165px !important;
        min-height: 165px;
        padding: 16px;
        display: block !important;
    }

    /* ICON */
    #properties .sell-rent-cards > div:last-child {
        position: absolute;
        top: 14px;
        left: 0;
        width: 100%;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    #properties .sell-rent-cards > div:last-child img {
        display: block !important;
        width: 75px !important;
        height: 75px !important;
        object-fit: contain;
        margin: 0 auto !important;
    }

    /* TEXT */
    #properties .sell-rent-cards > div:first-child {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
    }

    #properties .properties-headline-3 {
        margin: 0 !important;
        font-size: 20px;
        line-height: 1.2;
    }

    /* CLICKABLE ARROW */
    #properties .sell-rent-cards::after {
        content: "‹";
        position: absolute;
        inset-inline-end: 6px;
        bottom: 16px;

        font-weight: bold;
        font-size: 28px;
        line-height: 1;

        color: #285a7c;

        transform: scaleX(-1);

        pointer-events: none;
    }
}
}

.property-card {
  font-family: var(--shary-site-font) !important;
  /* box-shadow: 0px 4px 4px 0px #00000040; */
}

@media (max-width: 770px) and (min-width: 767px) {
  /* Remove the desktop search-box container styling on mobile */
  .property-search-box {
    top: 70%;
    height: 195px !important;
  }
}

@media (max-width: 767px) {
    /* Remove the desktop search-box container styling on mobile */
    .property-search-box {
      position: absolute;
      left: 0;
      bottom: -69px;

      width: 100%;
      max-width: none;
      height: auto;

      padding: 0;
      margin: 0;

      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;

      z-index: 20;
    }

    /* Search input becomes the main mobile pill */
    .property-search-input {
      width: calc(100% - 10px);
      height: 40px;

      margin: 0 auto;
      padding: 0 8px;

      border: 0;
      border-radius: 999px;

      background: var(--color-white);
      box-shadow: none;

      /* direction: rtl; */
    }

    .property-search-input input {
      height: 100%;
      padding: 0 40px;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 14px;
    }

    /* Search icon */
    .search-input-icon {
      width: 29px;
      height: 29px;

      flex-shrink: 0;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 50%;

      background: var(--color-navy-light);
      color: var(--color-white);

      font-size: 20px;
    }

    /* Filter button */
    .mobile-filter-trigger {
      width: 29px;
      height: 29px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d8e2eb;
      border-radius: 50%;
      background: var(--color-white);
    }

    .mobile-filter-trigger svg {
      width: 20px;
      height: 20px;
    }

    /* Hide tabs */
    .property-search-tabs {
      display: none !important;
    }

    /* Hide desktop filters */
    .desktop-filters {
      display: none !important;
    }
}

.property-search-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  /* direction: rtl; */
}

.property-status-filter {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 3px;
  background: var(--color-white);
  border: 1px solid #d8e2eb;
  border-radius: 32px;
  box-sizing: border-box;
  /* direction: rtl; */
  z-index: 10;
}

.property-status {
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #285a7c;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.property-status.active {
  background: #E8F1F7;
  color: #285A7C;
}

@media (max-width: 767px) {
  .property-status-filter {
    display: none;
  }
}

/* ── home.css · جزء 5 من 9: قسم تطبيق شاري (QR / التليفون / المتاجر) (المصدر: resources/css/shary/home/05-app-section.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* SHARY APP */
.shary-app {
  position: relative;
  width: 100%;
  aspect-ratio: 4.48 / 1;
  background-image: url('/assets/ui/images/ad-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
}


/* QR */
.shary-qr {
  position: absolute;
  /* left: 6.5%; */
  /* bottom: 11%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}

.shary-qr img {
  width: clamp(45px, calc(7vw / var(--z, 1)), 105px);
  height: auto;
  display: block;
}

.shary-qr span {
  margin-top: 5px;
  text-align: center;
  font-size: clamp(6px, calc(0.7vw / var(--z, 1)), 10px);
  line-height: 1.3;
  color: #000;
}


/* PHONE */
.shary-app-ad {
  position: absolute;
  left: 23%;
  bottom: -10%;
  /* width: 42%;       */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.shary-app-ad img {
  width: 100%;
  height: auto;
  display: block;
}

/* TEXT CONTENT - DESKTOP */
.shary-app-content {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  width: 45%;
  color: #29445e;
  z-index: 5;
    /* direction: rtl; */
  text-align: right;
}

.shary-app-title {
  margin: 0 0 5px;
  font-size: clamp(22px, calc(3vw / var(--z, 1)), 40px);
  font-weight: 800;
  line-height: 1.1;
  color: #304b66;
}

.shary-app-subtitle {
  margin: 0 0 12px;
  font-size: clamp(10px, calc(1.15vw / var(--z, 1)), 16px);
  font-weight: 600;
  line-height: 1.4;
  color: #304b66;
}

.shary-app-description {
  margin: 0;
  font-size: clamp(7px, calc(2vw / var(--z, 1)), 16px);
  line-height: 1.35;
  color: #08a69b;
}

.shary-app-buttons {
  /* display: flex; */
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  text-align: right;
}

.shary-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: clamp(6px, calc(0.62vw / var(--z, 1)), 12px);
  font-weight: 700;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

.shary-installment {
  background: #254862;
}

.shary-purchase {
  background: #3a9f9c;
}

.shary-realestate {
  background: #e8a22d;
}

/* APP STORE BUTTONS Hidden on desktop */
.shary-store-buttons {
  display: none;
}

@media (max-width: 767px) {

  /* QR */
  .shary-qr {
    display: none;
  }

  .shary-app {
    width: 100%;
    /* aspect-ratio: 690 / 606; */
     height: calc(50dvh / var(--z, 1));
    min-height: 400px;

        aspect-ratio: unset;

    background-size: cover;
    background-position: center;
    overflow: visible;
  }


  /* PHONE */
  .shary-app-ad {
    position: absolute;
    top: -20%;       
    left: unset;
    bottom: auto;
    transform: translateX(-9%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
  }

  .shary-app-ad img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* CONTENT */
  .shary-app-content {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 13%;
    transform: translateX(-50%);
    width: 86%;
    text-align: center;
    color: #29445e;
    z-index: 5;
  }


  .shary-app-title {
    margin: 0 0 5px;
    font-size: clamp(26px, calc(8vw / var(--z, 1)), 34px);
    font-weight: 800;
    line-height: 1.1;
    color: #304b66;
  }


  .shary-app-subtitle {
    margin: 0 0 9px;
    font-size: clamp(9px, calc(2.7vw / var(--z, 1)), 12px);
    font-weight: 600;
    line-height: 1.4;
    color: #304b66;
  }


  .shary-app-description {
    margin: 0 auto;
    max-width: 290px;
    font-size: clamp(7px, calc(3vw / var(--z, 1)), 14px);
    line-height: 1.4;
    color: #08a69b;
  }

  /* BUTTONS */
  .shary-app-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .shary-download-btn {
    min-width: 0;
    height: 20px;
    padding: 0 9px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
  }

  .shary-store-buttons {
      position: static;

      transform: none;

      width: 100%;

      display: flex;

      align-items: center;
      justify-content: center;

      gap: 7px;

      margin-top: 7px;

      direction: ltr;
  }

  .shary-store-link {
      width: 125px;
      height: 40px;

      padding: 3px 6px;

      box-sizing: border-box;

      display: flex;

      align-items: center;
      justify-content: flex-start;

      gap: 4px;

      background: transparent;

      border: 1px solid #1D4265;

      border-radius: 5px;

      color: #1D4265;

      text-decoration: none;

      box-shadow:
          0 1px 2px rgba(0, 0, 0, 0.08);
  }

  .shary-store-icon {
      width: 19px;
      height: 21px;

      flex: 0 0 21px;

      display: block;
  }

  .shary-apple-icon {
      fill: #1D4265;
  }

  .shary-store-text {
      min-width: 0;

      display: flex;
      flex-direction: column;

      align-items: flex-start;
      justify-content: center;

      text-align: left;

      line-height: 1;
  }

  .shary-store-small {
      display: block;

      margin-bottom: 1px;

      font-size:12.5px;
      font-weight: 500;

      line-height: 1;

      color: #1D4265;

      white-space: nowrap;
  }

  .shary-store-title {
      display: block;

      font-size: 11.5px;
      font-weight: 700;

      line-height: 1;

      color: #1D4265;

      white-space: nowrap;
  }
}

@media (max-width: 380px) {

  .shary-app-content {
    width: 86%;
    bottom: 5%;
  }

  .shary-app-title {
    font-size: 25px;
  }

  .shary-app-subtitle {
    font-size: 10px;
  }

  .shary-app-description {
    font-size: 14px;
  }

  .shary-app-buttons {
    gap: 4px;
    margin-top: 8px;
  }

  .shary-download-btn {
    height: 18px;
    padding: 0 7px;
    font-size: 12px;
  }

  .shary-store-buttons {
    gap: 5px;
    margin-top: 6px;
  }
  .shary-store-link {
    width: 74px;
    height: 24px;
    padding: 3px 5px;
  }
  .shary-store-icon {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }

  .shary-store-small {
    font-size: 6px;
  }

  .shary-store-title {
    font-size: 8px;
  }
}

.horizontal-scroll {
  max-width: 100% !important;
  overflow-x: auto;
  overflow-y: hidden;
}

html, body {
  overflow-x: clip !important;
  max-width: 100% !important;
}

#search_advanced {
  top: calc(100% + 12px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(860px, calc(calc(100vw / var(--z, 1)) - 48px)) !important;
  padding: 0 !important;
}

@media (max-width: 1023px) {
  #search_advanced {
    display: none !important;
  }
}

/* ── home.css · جزء 6 من 9: قوايم الهيرو المنسدلة والاختيارات والسعر والمساحة (المصدر: resources/css/shary/home/06-hero-dropdowns.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* =========================================================
   HERO CUSTOM DROPDOWNS
========================================================= */

.custom-dropdown {
    position: relative;
}


.property-filter-button {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: inherit;
  text-align: start;
}


.hero-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    width: 100%;
    min-width: 190px;
    background: #fff;
    color: #161E2D;
    border-radius: 14px;
    padding: 8px 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: .2s ease;
    z-index: 100;
}


.hero-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.hero-dropdown-option {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 12px 16px;
    text-align: start;
    color: #161E2D;
    cursor: pointer;
    font-size: 14px;
}


.hero-dropdown-option:hover {
    color: #1563DF;
    background: #f6f8fa;
}

.hero-dropdown-option.is-selected {
    color: #1563DF;
    background: #f3f7ff;
    font-weight: 700;
}


/* =========================================================
   PRICE DROPDOWN
========================================================= */

.hero-price-dropdown {
    min-width: 280px;
    padding: 18px;
}


.hero-price-content {
    width: 100%;
}


.hero-dropdown-title {
    margin: 0 0 10px;
    color: #161E2D;
    font-size: 14px;
    font-weight: 700;
}


.hero-price-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #064E3B;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 15px;
}



/* =========================================================
   ADVANCED SEARCH
========================================================= */

.hero-advanced-search {
    position: absolute;
    top: calc(100% + 15px);
    inset-inline: 0;
    z-index: 200;

    background: #fff;
    color: #161E2D;

    border-radius: 22px;

    padding: 24px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .20);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

    max-height: calc(80vh / var(--z, 1));
    overflow-y: auto;
}


.hero-advanced-search.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.hero-advanced-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}


.hero-advanced-header h3 {
    margin: 0;
    color: #161E2D;
    font-size: 20px;
    font-weight: 700;
}


.hero-advanced-header button {
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 50%;
    background: #f2f4f5;
    color: #161E2D;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}



/* =========================================================
   ADVANCED SECTIONS
========================================================= */

.hero-advanced-section {
    margin-bottom: 24px;
}


.hero-advanced-section > p {
    margin: 0 0 12px;
    color: #161E2D;
    font-size: 15px;
    font-weight: 700;
}


.hero-payment-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}


.hero-payment-fields input {
    height: 44px;
    width: 100%;
    border: 1px solid #E4E4E4;
    border-radius: 12px;
    outline: none;
    padding: 0 14px;
    color: #161E2D;
}


.hero-payment-fields input:focus {
    border-color: #1563DF;
}



/* =========================================================
   ADVANCED RANGE
========================================================= */

.hero-range-label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    color: #064E3B;
    font-size: 14px;
    font-weight: 700;
}


.hero-advanced-search .range-slider {
    width: 100%;
}



/* NEW */

/* =========================================================
   FILTER BUTTON
========================================================= */

.property-filter-button {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    color: inherit;
    text-align: start;
}

.property-filter-button:hover {
    border-color: #8da0b4;
}

.custom-dropdown:has(.hero-dropdown.show) .property-filter-button {
    border-color: #075f98;
}

/* =========================================================
   MAIN DROPDOWN
========================================================= */

.hero-dropdown {
    position: absolute;

    top: calc(100% + 5px);
    inset-inline-start: 0;

    width: 100%;
    min-width: 100%;

    background: #fff;

    color: #161e2d;

    border: 1px solid #d4dce5;

    border-radius: 10px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .08),
        0 10px 25px rgba(0, 0, 0, .06);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;

    z-index: 1000;

    overflow: hidden;
}

.hero-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================================
   PROPERTY TYPES
========================================================= */

.hero-property-type-dropdown {
    max-height: 300px;
    overflow-y: auto;

    padding: 0;
}


.hero-checkbox-option {
    position: relative;

    width: 100%;

    min-height: 49px;

    padding: 0 16px;

    display: flex;
    align-items: center;

    gap: 10px;

    cursor: pointer;

    border-bottom: 1px solid #e0e5eb;

    font-size: 14px;
    font-weight: 600;

    color: #252525;

    transition: background .15s ease;
}

.hero-checkbox-option:last-child {
    border-bottom: 0;
}

.hero-checkbox-option:hover {
    background: #f8fafc;
}


/* Hide native checkbox */
.hero-checkbox-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* Custom checkbox */
.hero-custom-checkbox {
    width: 20px;
    height: 20px;

    border: 1px solid #c9d2dd;

    border-radius: 5px;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    transition: .15s ease;
}


/* Checked */
.hero-checkbox-option input:checked + .hero-custom-checkbox {
    background: #0768a5;
    border-color: #0768a5;
}

.hero-checkbox-option input:checked + .hero-custom-checkbox::after {
    content: "";

    width: 6px;
    height: 10px;

    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;

    transform: rotate(45deg) translate(-1px, -1px);
}

.hero-checkbox-label {
    line-height: 1;
}


/* =========================================================
   BEDS + BATHS
========================================================= */

.hero-beds-dropdown {
    width: 356px;
    min-width: 356px;

    padding: 20px 16px;
}


.hero-beds-section {
    width: 100%;
}


.hero-beds-title {
    font-size: 16px;
    font-weight: 700;

    color: #111827;

    margin-bottom: 10px;
}


.hero-number-options {
    display: flex;
    align-items: center;
        flex-wrap: wrap;
    gap: 8px;
}


.hero-number-option {
    width: 31px;
    height: 31px;

    border-radius: 50%;

    border: 1px solid #d3dce7;

    background: #fff;

    color: #1d2939;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.hero-number-option:hover {
    border-color: #0768a5;
    color: #0768a5;
}


/* Selected */
.hero-number-option.is-selected {
    background: #0768a5;
    border-color: #0768a5;

    color: #fff;

    font-weight: 700;
}


.hero-beds-divider {
    width: 100%;

    height: 1px;

    background: #e1e6ec;

    margin: 16px 0;
}


/* =========================================================
   PRICE DROPDOWN
========================================================= */

.hero-price-dropdown {
    width: 355px;
    min-width: 355px;

    padding: 18px 24px 22px;
}


.hero-price-content {
    width: 100%;
}


.hero-dropdown-title {
    margin: 0 0 14px;

    color: #111827;

    font-size: 16px;

    font-weight: 700;
}


/* =========================================================
   PRICE INPUTS
========================================================= */

.hero-price-inputs {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;
}


.hero-price-input {
    width: 50%;

    height: 38px;

    border: 1px solid #cbd5e1;

    border-radius: 10px;

    background: #fff;

    padding: 0 12px;

    text-align: center;

    color: #526173;

    font-size: 14px;

    outline: none;
}

.hero-price-input:focus {
    border-color: #0768a5;

    box-shadow: 0 0 0 2px rgba(7, 104, 165, .08);
}


/* =========================================================
   PRICE RANGE
========================================================= */

.hero-range-slider {
    position: relative;

    width: 100%;

    height: 30px;

    margin-bottom: 12px;
}


.hero-range-track,
.hero-range-progress {
    position: absolute;

    top: 50%;

    left: 0;
    right: 0;

    height: 8px;

    transform: translateY(-50%);

    border-radius: 10px;
}


.hero-range-track {
    background: #e7f1f9;
}


.hero-range-progress {
    background: #0768a5;

    left: 0;
    right: 0;

    width: 100%;
}


/* Range inputs */
.hero-range-input {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 30px;

    margin: 0;

    background: none;

    pointer-events: none;

    appearance: none;

    -webkit-appearance: none;
}


/* Chrome / Edge / Safari */
.hero-range-input::-webkit-slider-runnable-track {
    height: 8px;

    background: transparent;

    border: 0;
}

.hero-range-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 20px;
    height: 20px;

    margin-top: -6px;

    border-radius: 50%;

    border: 4px solid #0768a5;

    background: #fff;

    cursor: pointer;

    pointer-events: auto;

    box-shadow: none;
}


/* Firefox */
.hero-range-input::-moz-range-track {
    height: 8px;

    background: transparent;

    border: 0;
}

.hero-range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;

    border-radius: 50%;

    border: 4px solid #0768a5;

    background: #fff;

    cursor: pointer;

    pointer-events: auto;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.hero-price-apply {
    width: 100%;

    height: 41px;

    border: 0;

    border-radius: 8px;

    background: #0768a5;

    color: #fff;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition: background .2s ease;
}

.hero-price-apply:hover {
    background: #055887;
}


/* =========================================================
   SCROLLBAR - PROPERTY TYPE
========================================================= */

.hero-property-type-dropdown::-webkit-scrollbar {
    width: 5px;
}

.hero-property-type-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.hero-property-type-dropdown::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}




/* =========================================================
   ADVANCED GRID
========================================================= */

.hero-advanced-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}


.hero-advanced-dropdown label {
    display: block;
    margin-bottom: 7px;
    color: #161E2D;
    font-size: 14px;
    font-weight: 600;
}


.hero-advanced-dropdown select {
    width: 100%;
    height: 45px;
    border: 1px solid #E4E4E4;
    border-radius: 12px;
    background: #fff;
    color: #161E2D;
    padding: 0 12px;
    outline: none;
    cursor: pointer;
}


.hero-advanced-dropdown select:focus {
    border-color: #1563DF;
}



/* =========================================================
   AMENITIES
========================================================= */

.hero-amenities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}


.hero-amenity {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #161E2D;
    font-size: 13px;
    cursor: pointer;
}


.hero-amenity input {
    width: 16px;
    height: 16px;
    accent-color: #1563DF;
}



/* =========================================================
   ADVANCED FOOTER
========================================================= */

.hero-advanced-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 5px;
}


.hero-advanced-footer .property-search-btn {
    min-width: 150px;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .hero-advanced-search {
        position: fixed;
        top: 50%;
        left: 16px;
        right: 16px;
        inset-inline: 16px;

        max-height: calc(85vh / var(--z, 1));

        transform: translateY(-45%);

        border-radius: 20px;

        padding: 18px;
    }


    .hero-advanced-search.show {
        transform: translateY(-50%);
    }


    .hero-payment-fields {
        grid-template-columns: 1fr;
    }


    .hero-advanced-grid {
        grid-template-columns: 1fr;
    }


    .hero-amenities {
        grid-template-columns: repeat(2, 1fr);
    }


    .hero-price-dropdown {
        min-width: 240px;
    }

}

.search-autocomplete-wrapper {
    position: relative !important;
}

#heroSearchResults {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 99999;
    width: 100%;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
    border: 1px solid #eeeeee;
    /* direction: rtl; */
    /* text-align: start; */
}

#heroSearchResults.show {
    display: block;
}


/* =========================================================
   RESULT ITEM
   ========================================================= */

.hero-search-result {
    width: 100%;

    min-height: 65px;

    padding: 12px 16px;

    display: flex;

    align-items: center;

    gap: 12px;

    border: 0;

    border-bottom: 1px solid #eeeeee;

    background: #ffffff;

    cursor: pointer;

    /* direction: rtl; */

    text-align: start;

    transition: background 0.15s ease;
}

.hero-search-result:last-child {
    border-bottom: 0;
}

.hero-search-result:hover {
    background: #f6f8f8;
}


/* =========================================================
   ICON
   ========================================================= */

.hero-search-result-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef8f6;
    color: #159f92;
    font-size: 15px;
}


/* =========================================================
   TEXT
   ========================================================= */

.hero-search-result-content {
    flex: 1;
    min-width: 0;
}

.hero-search-result-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #222;
}

.hero-search-result-location {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: #888;
}


/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.hero-search-loading,
.hero-search-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: #777;
    background: #ffffff;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

#heroSearchResults::-webkit-scrollbar {
    width: 5px;
}

#heroSearchResults::-webkit-scrollbar-track {
    background: transparent;
}

#heroSearchResults::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 10px;
}

.search-autocomplete-wrapper {
    position: relative !important;
}

#heroSearchResults {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
    border: 1px solid #eeeeee;
    /* direction: rtl; */
    /* text-align: start; */
    box-sizing: border-box;
}

#heroSearchResults.show {
    display: block !important;
}

#heroPrice.show {
    display: block !important;
}

.hero-bg {
    overflow: visible !important;
}

.hero-bg,
.hero-content,
.property-search-box,
.property-search-row,
.property-search-input,
.property-search-filters,
.property-filter,
#contactForm,
#contact {
    overflow: visible !important;
}


@media (max-width: 767px) {
    #heroAdvancedSearch {
        position: fixed !important;

        top: var(--mobile-navbar-height, 64px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;


        width: calc(100vw / var(--z, 1)) !important;
        height: calc(100vh / var(--z, 1)) !important;
        height: calc(100dvh / var(--z, 1)) !important;

        margin: 0 !important;

        z-index: 999999 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background: #ffffff;

        border-radius: 0 !important;
    }
}

@media (max-width: 767px) {

    #heroAdvancedSearch .hero-advanced-header {
        position: sticky;

        top: 0;

        z-index: 10;

        background: #ffffff;
    }

}

@media (max-width: 767px) {

    #heroAdvancedSearch .hero-advanced-footer {
        position: sticky;

        bottom: 0;

        z-index: 10;

        background: #ffffff;

        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

}



/* البحث المتقدم القديم (ديسك توب بس) — على الموبايل الفلتر هو نافذة الفلتر الجديدة (partials/filter-window) */

#heroAdvancedSearch {
    display: block;
}

@media (max-width: 767px) {
    #heroAdvancedSearch {
        display: none !important;
    }
}

@media (min-width: 768px) {
    #heroAdvancedSearch {
        display: block !important;
    }
}

.sell-rent-icon {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
}

.property-filter-button > span:not(.filter-arrow) {
  color: #000;
  font-size: 14px;
  padding: 0px 12px;;
}

.hero-dropdown {
  max-height: 200px;
  overflow-y: scroll;
}

/* ── home.css · جزء 7 من 9: كروت المشاريع والحركات وكروت «ما يميزنا» (المصدر: resources/css/shary/home/07-project-cards.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* ==============================
   PROJECT CARD
================================ */

.project-card {
    transition: transform 0.3s ease;
}


/* Text animation */
.project-card .compounds-content {
    transition:
        padding-bottom 0.35s ease,
        padding-top 0.35s ease;
}


/* ======================================
   HOVER ONLY WHEN MOUSE IS OVER THE TEXT
====================================== */

.project-card .compounds-content:hover + .card-overlay {
    background: linear-gradient(
        to top,
        rgba(4, 31, 56, 1) 0%,
        rgba(4, 31, 56, 0.98) 25%,
        rgba(4, 31, 56, 0.90) 45%,
        rgba(4, 31, 56, 0.55) 65%,
        rgba(4, 31, 56, 0.15) 82%,
        rgba(4, 31, 56, 0) 100%
    ) !important;
}


/* Move text slightly up on hover */
.project-card .compounds-content:hover {
    padding-bottom: 20px !important;
    padding-top: 60px !important;
}

.new-project-card .new-project-content:hover + .card-overlay {
    background: linear-gradient(
        to top,
        rgba(4, 31, 56, 1) 0%,
        rgba(4, 31, 56, 0.98) 25%,
        rgba(4, 31, 56, 0.90) 45%,
        rgba(4, 31, 56, 0.55) 65%,
        rgba(4, 31, 56, 0.15) 82%,
        rgba(4, 31, 56, 0) 100%
    ) !important;
}


/* Move text slightly up on hover */
.new-project-card .new-project-content:hover {
    padding-bottom: 20px !important;
     padding-top: 60px !important;
}

.investment-promo-card {
    height: 160px !important;
  }


@media (max-width: 900px) {
      .shary-app-ad {
        left: 0%;
    }
}

@media (max-width: 760px) {
      .shary-app-ad {
        top: -10%;
        left: unset;
        bottom: auto;
        transform: translateX(-25%);
    }
    .shary-app {
     height: calc(122dvh / var(--z, 1));
    }
    .property-search-input {
    height: 50px !important;
}
}

@media (min-width: 600px) and (max-width: 700px) {
  .shary-app-ad {
    transform: translateX(-22%);
  }
  .shary-app {
     height: calc(65dvh / var(--z, 1));
    }
}

@media (min-width: 490px) and (max-width: 660px) {
  .shary-app-ad {
    transform: translateX(-20%);
  }
}

@media (max-width: 540px) {
  .shary-app {
    height: calc(90dvh / var(--z, 1));
  }
  .shary-app-ad {
    transform: translateX(-10%);
  }
}

@media (max-width: 490px) {
  .shary-app-ad {
    transform: translateX(-11%);
    top: -20%;
  }
  .shary-app {
    height: calc(66dvh / var(--z, 1));
  }
}

@media (max-width: 430px) {
  .shary-app-ad {
    top: -7%;
  }
 }

@media (max-width: 390px) {
  .shary-app-ad {
    top: -11%;
  }
  .shary-app {
    height: calc(60dvh / var(--z, 1));
  }
}

@media (max-width: 365px) {
  /* .shary-app {
    height: calc(90dvh / var(--z, 1));
  } */
}


@media (max-width: 344px) {
   .shary-app {
    height: calc(55dvh / var(--z, 1));
  }
}

@media (max-width: 340px) {
  .shary-app-ad {
    top: -22%;
    transform: translateX(-11%);
  }
}

@media (max-width: 320px) {
  .shary-app-ad {
    top: -5%;
    transform: translateX(-11%);
  }

  .shary-app {
    height: calc(80dvh / var(--z, 1));
  }
}

.contact-buttons {
  align-items: center;
}
.contact-buttons button {
  width: 90%;
  font-size: 15px;
}

@media (max-width: 768px) {
  .contact-buttons {
    align-items: center;
  }
  .contact-buttons button {
    width: 90%;
    font-size: 13px;
  }

  .new-project-card {
    flex-basis: calc(64vw / var(--z, 1));
    width: calc(64vw / var(--z, 1));
  }

  
  [dir="ltr"] .market-ticker-badge {
      font-size: 10px;
  }


}

/* .shary-app-img {
  height: 450px !important;
} */

/* =========================================================
   SHARY APP — SHARED ONLY
   ========================================================= */

.shary-app {
    position: relative;
    width: 100%;

    background-color: #eef6fc;
    background-image: url('/assets/ui/images/ad-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 16px;
    overflow: visible;
}


/* FEATURE COLORS */

.shary-installment {
    background: #1D4265;
}

.shary-purchase {
    background: #18B6A4;
}

.shary-realestate {
    background: #FCB424;
}


/* Store buttons hidden by default */
.shary-store-buttons {
    display: none;
}


/* =========================================================
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 768px) {

    /* CARD */
    .shary-app {
        width: 100%;

        height: clamp(220px, calc(18vw / var(--z, 1)), 260px);

        aspect-ratio: unset;
    }


    /* =====================================================
       QR
       ===================================================== */

    .shary-qr {
        position: absolute;

        left: 11%;
        bottom: 9%;

        width: 8%;

        transform: translateX(-50%);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        z-index: 5;
    }

    .shary-qr img {
        display: block;

        width: 100%;
        max-width: 100px;

        height: auto;

        object-fit: contain;
    }

    .shary-qr span {
        margin-top: 5px;

        text-align: center;

        font-size: clamp(7px, calc(0.6vw / var(--z, 1)), 10px);
        font-weight: 600;

        line-height: 1.15;

        color: #111;

        white-space: nowrap;
    }


    /* =====================================================
       PHONE
       ===================================================== */

    .shary-app-ad {
        position: absolute;

        left: 33%;
        bottom: 33%;

        width: 17%;

        transform: translateX(-50%);

        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 4;

        pointer-events: none;
    }

    .shary-app-ad img {
        display: block;

        width: 100%;
        height: auto;

        transform: scale(2.05);
        transform-origin: center center;

        object-fit: contain;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .shary-app-content {
        position: absolute;

        /*
         * Starts around middle of banner and can use
         * ALL remaining space on the right.
         */
        left: 49%;
        right: 4%;

        top: 50%;

        width: auto;

        transform: translateY(-50%);

        z-index: 5;

        text-align: start;

        color: #1D4265;
    }


    /* TITLE */

    .shary-app-title {
        margin: 0 0 13px;

        font-size: clamp(34px, calc(3.2vw / var(--z, 1)), 50px);

        font-weight: 800;

        line-height: 1;

        letter-spacing: -0.03em;

        color: #1D4265;
    }


    /* SUBTITLE */

    .shary-app-subtitle {
        margin: 0 0 10px;

        font-size: clamp(13px, calc(2.2vw / var(--z, 1)), 22px);

        font-weight: 600;

        line-height: 1.25;

        color: #1D4265;
    }


    /* DESCRIPTION */

    .shary-app-description {
        margin: 0;

        width: 100%;
        max-width: none;

        font-size: clamp(10px, calc(1.1vw / var(--z, 1)), 19px);

        font-weight: 500;

        line-height: 1.3;

        color: #00A99D;
    }


    /* =====================================================
       PILLS
       ===================================================== */

    .shary-app-buttons {
        display: flex;

        align-items: center;
        justify-content: flex-start;

        flex-wrap: nowrap;

        gap: 8px;

        margin-top: 13px;
    }

    .shary-download-btn {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-width: 0;

        height: 22px;

        margin: 0;

        padding: 0 11px;

        border-radius: 999px;

        font-size: clamp(7px, calc(1.5vw / var(--z, 1)), 15px);

        font-weight: 700;

        line-height: 1;

        color: #fff;

        white-space: nowrap;
    }


    /* NOT IN DESKTOP FIGMA */
    .shary-store-buttons {
        display: none !important;
    }
}


/* =========================================================
   MOBILE ONLY
   Nothing from desktop controls this section
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       CARD
       Figma ≈ 343 × 556
       ===================================================== */

    .shary-app {
        width: 100%;

        height: auto;
        min-height: 0;

        aspect-ratio: 343 / 556;

        border-radius: 16px;

        background-size: cover;
        background-position: center;

        overflow: visible;
    }


    /* =====================================================
       QR
       ===================================================== */

    .shary-qr {
        display: none !important;
    }


    /* =====================================================
       PHONE
       ===================================================== */

    .shary-app-ad {
        position: absolute;

        left: 50%;

        /*
         * IMPORTANT:
         * Positive top because scale(2.85) itself makes
         * the visible SVG extend well above its wrapper.
         *
         * This recreates the small Figma overlap instead
         * of the huge overlap in your latest screenshot.
         */
        top: 9%;

        right: auto;
        bottom: auto;

        width: 38%;

        transform: translateX(-50%);

        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 4;

        pointer-events: none;
    }

    .shary-app-ad img {
        display: block;

        width: 100%;
        height: auto;

        transform: scale(2.85);
        transform-origin: center center;

        object-fit: contain;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .shary-app-content {
        position: absolute;

        left: 50%;
        right: auto;

        /*
         * Text begins immediately underneath phone,
         * like the Figma.
         */
        top: 55%;
        bottom: auto;

        width: 90%;

        transform: translateX(-50%);

        z-index: 5;

        text-align: center;

        color: #1D4265;
    }


    /* TITLE */

    .shary-app-title {
        margin: 0 0 12px;

        font-size: clamp(28px, calc(8.5vw / var(--z, 1)), 32px);

        font-weight: 800;

        line-height: 1;

        letter-spacing: -0.03em;

        color: #1D4265;
    }


    /* SUBTITLE */

    .shary-app-subtitle {
        width: 100%;
        max-width: 300px;

        margin: 0 auto 8px;

        font-size: clamp(9px, calc(3.20vw / var(--z, 1)), 15px);

        font-weight: 600;

        line-height: 1.3;

        color: #1D4265;
    }


    /* DESCRIPTION */

    .shary-app-description {
        width: 100%;
        max-width: 300px;

        margin: 0 auto;

        font-size: clamp(8px, calc(3.1vw / var(--z, 1)), 15px);

        font-weight: 500;

        line-height: 1.3;

        color: #00A99D;
    }


    /* =====================================================
       PILLS
       ===================================================== */

    .shary-app-buttons {
        display: flex;

        align-items: center;
        justify-content: center;

        flex-wrap: nowrap;

        gap: 5px;

        margin-top: 10px;
    }

    .shary-download-btn {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-width: 0;

        height: 20px;

        margin: 0;

        padding: 0 9px;

        border-radius: 999px;

        font-weight: 700;

        line-height: 1;

        color: #fff;

        white-space: nowrap;

        
    }

    [dir="rtl"] .shary-download-btn {
      font-size: clamp(7px, calc(4vw / var(--z, 1)), 13px);
    }

    [dir="ltr"] .shary-download-btn {
      font-size: clamp(7px, calc(4vw / var(--z, 1)), 12px);
    }

    /* =====================================================
       STORE BUTTONS
       ===================================================== */

    .shary-store-buttons {
        width: 100%;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 6px;

        margin-top: 18px;

        direction: ltr;
    }

    .shary-store-link {
        width: 135px;
        height: 36px;

        box-sizing: border-box;

        padding: 3px 7px;

        display: flex;

        align-items: center;
        justify-content: flex-start;

        gap: 5px;

        background: transparent;

        border: 1px solid #1D4265;

        border-radius: 5px;

        color: #1D4265;

        text-decoration: none;

        box-shadow: none;
    }

    .shary-store-icon {
        display: block;

        width: 18px;
        height: 26px;

        flex: 0 0 26px;

        fill: #1D4265;
    }

    .shary-store-icon path {
        fill: #1D4265;
    }

    .shary-apple-icon {
        fill: #1D4265;
    }

    .shary-store-text {
        min-width: 0;

        display: flex;
        flex-direction: column;

        align-items: flex-start;
        justify-content: center;

        text-align: left;

        line-height: 1;
    }

    .shary-store-small {
        display: block;

        margin-bottom: 2px;

        font-size: 11px;

        font-weight: 500;

        line-height: 1;

        color: #1D4265;

        white-space: nowrap;
    }

    .shary-store-title {
        display: block;

        font-size: 13px;

        font-weight: 700;

        line-height: 1;

        color: #1D4265;

        white-space: nowrap;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .shary-app-content {
        top: 55%;
        width: 91%;
    }

    .shary-app-title {
        font-size: 27px;
    }

    .shary-app-subtitle {
        max-width: 275px;
        font-size: 13px;
    }

    .shary-app-description {
        max-width: 275px;
        font-size: 11.5px;
    }

    .shary-app-buttons {
        gap: 4px;
        margin-top: 8px;
    }

    .shary-download-btn {
        height: 18px;

        padding-inline: 7px;

        font-size: 12.5px;
    }

    .shary-store-buttons {
        gap: 5px;
        margin-top: 16px;
    }

    .shary-store-link {
        width: 105px;
        height: 32px;

        padding: 3px 6px;
    }

    .shary-store-icon {
        width: 15px;
        height: 17px;

        flex-basis: 18px;
    }

    .shary-store-small {
        font-size: 9px;
    }

    .shary-store-title {
        font-size: 12px;
    }
}


.investment-promo-carousel {
  padding-bottom: 20px; /* enough for the 18px shadow spread */
}
.investment-promo-grid {
  padding-bottom: 0; /* avoid doubling up if you add it here too */
}

@media (max-width: 767px) {
  .investment-promo-carousel {
    padding-bottom: 0; /* avoid doubling up if you add it here too */
  }
  .investment-promo-card {
    width: 227px;
    flex: 0 0 227px;
    min-height: 123px !important;
    height: 123px !important;
  }
  .market-ticker-arrow{
    display: none;
    font-size: 0px;
  }
  .promo-icon {
    flex: 0 0 54px;
  }
  .shary-promo-icon {
    flex: 0 0 54px;
  }
  .shary-promo-icon img{
    width: 100px;
  }
  .promo-title h3 {
    font-size: 17px;
  }

  [dir="ltr"] .contact-field input, .contact-field select, .contact-field textarea {
    font-size: 16px;
  }

  [dir="ltr"] .contact-field label {
     font-size: 17px;
  }
  .home-area-card h3 {
    margin-bottom: 0px;  
  }
  .shary-realestate{
    display: none !important;
  }
}

@media (max-width: 400px) {
  .property-search-input input {
      font-size: 12px;
  }

  .shary-app-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .shary-download-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: fit-content;
      min-width: unset;
      height: auto;

      padding: 4px 10px;

      border-radius: 999px;

      font-size: 10px;
      line-height: 1.2;
      font-weight: 700;

      color: white;
      text-decoration: none;
      white-space: nowrap;

      flex: 0 0 auto;

      margin: 0;
  }

}

@media (max-width: 400px) {
  .property-card {
    flex: 0 0 310px;
    width: 310px;
  }
}

.detail-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    line-height: 1 !important;
}

.detail-item img {
    width: 20px;
    height: 20px;
    display: block !important;
    flex-shrink: 0;
}

.detail-item .detail-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;

    line-height: 1 !important;

    position: relative;
    top: 2px;
}

/* Hidden on desktop */
.mobile-promo-section {
  display: none;
}

@media (max-width: 767px) {
  /* Hide the original desktop section */
  .desktop-promo-section {
    display: none;
  }

  /* Show the mobile section */
  .mobile-promo-section {
    display: block;
    width: 100%;
    padding: 8px 0 12px;
    background: #fff;
  }

  .mobile-promo-carousel {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .mobile-promo-carousel::-webkit-scrollbar {
    display: none;
  }

  .mobile-promo-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 120px; /* Set this to your desktop card height */
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .mobile-promo-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}


@media (max-width: 767px) {
    .mobile-promo-carousel {
        width: 100%;
        overflow: hidden;
        touch-action: pan-y;
    }

    .mobile-promo-track {
        display: flex;
        width: 100%;
        will-change: transform;
    }

    .mobile-promo-slide {
        flex: 0 0 100%;
        width: 100%;
        height: 120px; /* Your desktop card height */
        overflow: hidden;
        border-radius: 10px;
    }

    .mobile-promo-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
    }
}


/* ── home.css · جزء 8 من 9: قسم «شاري معاك» التلاتي الأبعاد (المصدر: resources/css/shary/home/08-ma3ak-3d.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* ==========================================================
   Shary Ma3ak · 3D Hero (Mobile v3 · Angle 2)
   Matches the Figma prototype: same 3D phone, only the screen
   changes every 2.5s with a 0.7s ease-in-out cross-fade.
   Namespace: .sh-hero  (no global styles leak)
   ========================================================== */
.sh-hero{
  --navy:#123A5C; --ink:#0E2238; --teal:#3AAFA0; --teal-d:#1F7F72; --gold:#F5A623;
  --panel-a:#EEF3FA; --panel-b:#E4ECF6; --panel-line:rgba(18,58,92,.10);
  --phone-w:215px;              /* rendered phone width (ratio 749:1890) */
  --fade:.7s; --ease:cubic-bezier(.42,0,.58,1);
  position:relative; isolation:isolate; overflow:hidden; background:#fff; color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  padding:24px 16px 16px;
}
.sh-hero *{box-sizing:border-box}
.sh-hero__inner{position:relative; max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:center}
.sh-hero__panel{position:absolute; z-index:-1; left:0; right:0; bottom:0; top:calc(var(--phone-w)*.61);
  border-radius:32px; border:1px solid var(--panel-line); background:linear-gradient(165deg,var(--panel-a),var(--panel-b))}

/* ---------- phone (pre-rendered 3D frames from Figma) ---------- */
.sh-stage{position:relative; width:var(--phone-w); max-width:100%; aspect-ratio:1000/1890}
.sh-float{position:absolute; inset:0; animation:shFloat 6s ease-in-out infinite}
.sh-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity var(--fade) var(--ease); user-select:none; -webkit-user-drag:none}
.sh-stage img.is-on{opacity:1}
.sh-shadow{position:absolute; left:10%; right:4%; bottom:-10px; height:24px; z-index:-1;
  background:radial-gradient(closest-side,rgba(14,34,56,.28),rgba(14,34,56,0)); filter:blur(3px); animation:shShadow 6s ease-in-out infinite}

/* ---------- copy ---------- */
.sh-copy{text-align:center; padding:0px 0 20px; max-width:560px; min-width:0}
.sh-eyebrow{display:none; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--teal-d); margin:0 0 12px}
.sh-eyebrow::before{content:""; width:18px; height:2px; border-radius:1px; background:currentColor}
.sh-title{font-size:44px; line-height:1.1; font-weight:700; letter-spacing:-.5px; margin:0 0 8px; color:var(--ink)}
.sh-sub{font-size:17px; line-height:1.35; font-weight:600; color:var(--navy); margin:0 auto 12px; max-width:300px}
.sh-body{font-size:14px; line-height:1.55; font-weight:500; color:var(--teal-d); margin-inline-start:0 auto 16px; max-width:330px}
.sh-pills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.sh-pill{height:40px; padding:0 16px; border-radius:20px; display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; white-space:nowrap}
.sh-pill--gold{background:var(--gold); color:var(--ink)}
.sh-pill--navy{background:var(--navy); color:#fff}
.sh-pill--teal{background:var(--teal); color:#fff; display:none}
.sh-stores{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.sh-store{display:inline-flex; align-items:center; gap:10px; height:49px; min-width:150px; padding:0 14px 0 12px; border-radius:12px;
  border:1.5px solid var(--navy); background:#fff; color:var(--navy); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease}
.sh-store:hover{transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(14,34,56,.5)}
.sh-store:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
.sh-store svg{width:24px; height:24px; flex:none}
.sh-store small{display:block; font-size:9px; font-weight:500; letter-spacing:.4px; text-transform:uppercase; line-height:1}
.sh-store b{display:block; font-size:18px; font-weight:600; line-height:1.15}

/* ---------- desktop (like "Desktop · Angle 2") ---------- */
@media (min-width:960px){
  .sh-hero{--phone-w:320px; padding:0 40px 40px;}
  .sh-hero__inner{flex-direction:row; align-items:flex-end; gap:64px; padding:0 64px}
  .sh-hero__panel{top:30%; border-radius:40px}
  .sh-stage{flex:none; margin-inline-end:80px;}
  .sh-copy{flex:1; text-align:left; padding:0 0 10px; max-width:none}
  .sh-eyebrow{display:inline-flex}
  .sh-title{font-size:72px}
  .sh-sub{font-size:22px; max-width:none; margin-left:0}
  .sh-body{font-size:16px; max-width:540px; margin-left:0}
  .sh-pills,.sh-stores{justify-content:flex-start}
  .sh-pill{height:35px; font-size:14px}
  .sh-pill--teal{display:inline-flex}
  .sh-stores {display: none;}

  [dir="ltr"] .sh-pills {
    margin-bottom: 0;
  }

  [dir="rtl"] .sh-pills {
    margin-bottom:18px
  }
  
  [dir="ltr"] .sh-pill {
    padding: 0 5px;
  }

  [dir="rtl"] .sh-pill {
    padding: 0 22px;
  }
}
[dir="rtl"] .sh-hero .sh-copy{text-align:right}

@keyframes shFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shShadow{0%,100%{opacity:1; transform:scaleX(1)}50%{opacity:.65; transform:scaleX(.92)}}
.sh-hero[data-float="false"] .sh-float,.sh-hero[data-float="false"] .sh-shadow{animation:none}
@media (prefers-reduced-motion:reduce){.sh-float,.sh-shadow{animation:none}.sh-stage img{transition:none}}

@media (max-width: 960px) {
  .sh-stores {
    display: flex;
  }
  .sh-qr {
    display: none;
  }
  .sh-pills {
    margin-bottom: 10px;
  }
}

.sh-qr {
    /* display: none; */
    width: 130px;
    padding: 8px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(6, 52, 84, .16);
    text-align: center;
    z-index: 2;
}

.sh-qr-img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 8px;
}

.sh-qr span {
    display: block;
    margin-top: 5px;
    color: #063454;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.25;
}

@media (min-width: 960px) {
    /* Arabic: text left, phone and QR right */
    [dir="rtl"] .sh-hero__inner {
        direction: ltr;
    }

    [dir="rtl"] .sh-hero .sh-copy {
        grid-column: 1;
        direction: rtl;
        text-align: right;
    }

    [dir="rtl"] .sh-hero .sh-stage {
        grid-column: 2;
        direction: rtl;
    }

    [dir="rtl"] .sh-hero .sh-qr {
        left: auto;
        right: 0;
    }

    [dir="rtl"] .sh-hero .sh-pills,
    [dir="rtl"] .sh-hero .sh-stores {
        justify-content: flex-start;
    }

    [dir="ltr"] .sh-hero__inner {
        direction: rtl;
    }

    [dir="ltr"] .sh-hero .sh-copy {
        grid-column: 1;
        direction: ltr;
        text-align: left;
    }

    [dir="ltr"] .sh-hero .sh-stage {
        grid-column: 2;
        direction: ltr;
    }

    [dir="ltr"] .sh-hero .sh-qr {
        left: auto;
        right: 0;
    }

    [dir="ltr"] .sh-hero .sh-pills,
    [dir="ltr"] .sh-hero .sh-stores {
        justify-content: flex-start;
    }
}

@media (max-width: 959px) {
  .sh-qr {
      display: none;
  }
  .sh-copy {
    margin-top: -50px;
  }

  .sh-hero .sh-copy{
    text-align:center !important;
  }
}

@media (min-width: 960px) {
  .sh-hero {
    --phone-w: 260px; /* about 400px tall */
    padding:0 40px 40px;
  }
}

@media (min-width: 960px) {
    .sh-hero .sh-qr {
        align-self: flex-end;
        margin-bottom: 105px; /* tweak until it lines up with the text's middle */
    }
}


/* ===== Tablet / small laptop / Nest Hub (960px - 1279px) ===== */
@media (min-width: 960px) and (max-width: 1279px) {
  .sh-hero {
    --phone-w: 230px;
    padding: 0 24px 28px;
  }

  .sh-hero__inner {
    padding: 0 24px;
    gap: 28px;
  }

  /* .sh-stage {
    margin-inline-end: 0;
  } */

  .sh-copy {
    min-width: 0;
    /* padding-bottom: 0; */
    padding-bottom: 24px;
  }

  .sh-title {
    font-size: 52px;
  }

  .sh-sub {
    font-size: 19px;
    margin-bottom: 10px;
  }

  .sh-body {
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
  }

  /* keep the pills on one row and let them wrap only if needed */
  .sh-pills {
    gap: 8px;
    flex-wrap: wrap;
  }

  [dir="ltr"] .sh-pill,
  [dir="rtl"] .sh-pill {
    height: 32px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  [dir="rtl"] .sh-pills {
    margin-bottom: 0;
  }

  .sh-qr {
    width: 110px;
    padding: 6px;
  }

  .sh-hero .sh-qr {
    margin-bottom: 70px;
  }
}

/* ===== Short screens (landscape tablets, Nest Hub: height <= 700px) ===== */
@media (min-width: 960px) and (max-height: 700px) {
  .sh-hero {
    --phone-w: 200px;   /* about 378px tall, fits under the header */
    padding-bottom: 20px;
  }

  .sh-title {
    font-size: 46px;
    margin-bottom: 6px;
  }

  .sh-sub {
    font-size: 17px;
    margin-bottom: 8px;
  }

  .sh-body {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .sh-pill {
    height: 30px !important;
    font-size: 12px !important;
  }

  .sh-qr {
    width: 96px;
  }

  .sh-hero .sh-qr {
    margin-bottom: 40px;
  }
}

/* .sh-stage{
  aspect-ratio: auto;
  height: calc(var(--phone-w) * 2.0);  
}

.sh-stage img{
  object-fit: fill;
} */

/* ---------- fluid sizing for the desktop layout ---------- */
/* @media (min-width:960px){
  .sh-title{ font-size:clamp(40px, calc(5.2vw / var(--z, 1)), 72px); }
  .sh-sub{ font-size:clamp(17px, calc(1.8vw / var(--z, 1)), 22px); }
  .sh-body{ font-size:clamp(13px, calc(1.3vw / var(--z, 1)), 16px); max-width:100%; }
  .sh-pill{ height:clamp(38px, calc(3.6vw / var(--z, 1)), 46px); padding:0 clamp(14px, calc(1.8vw / var(--z, 1)), 13px); font-size:clamp(12px, calc(1.1vw / var(--z, 1)), 14px); }
} */

/* ---------- small laptops / tablets landscape: 960px to 1199px ---------- */
/* @media (min-width:960px) and (max-width:1199px){
  .sh-hero{ padding:0 20px 32px; }
  .sh-hero__inner{ gap:24px; padding:0 24px; }
  .sh-stage{ margin-inline-end:0; }       
  .sh-copy{ padding-bottom:48px; min-width:0; }
  .sh-qr{ width:110px; margin-bottom:80px; }
} */

.promo-banners-track--fill {
    width: 100%;
}

.promo-banners-track--fill .shary-promo-banner {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.shary-promo-banner > img {
    display: block;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
       object-fit: fill;
}



/* =========================================================
   MOBILE MULTI SELECT - AREAS / DEVELOPERS
========================================================= */

.area-item,
.developer-item {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.area-item:hover,
.developer-item:hover {
    background: #f8fafc;
}

.area-item.selected,
.developer-item.selected {
    background: transparent;
}

.area-item.selected .area-name,
.developer-item.selected .developer-name {
    color: #246BCE;
}

.area-item.selected .area-check,
.developer-item.selected .developer-check {
    background: #246BCE;
    position: relative;
}

.area-item.selected .area-check::after,
.developer-item.selected .developer-check::after {
    content: "";
    width: 14px;
    height: 8px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    position: absolute;
    top: 13px;
    left: 12px;
}

.mobile-selection-button {
    min-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-selection-button.has-selection {
    background: #EAF4FC;
    border-color: #246BCE;
    color: #246BCE;
}
/* ---- أزرار المقارنة / المفضلة / المشاركة على كروت الهوم: نفس أزرار باقي الموقع (area-action) ---- */
.shary-home-root .property-actions, .shary-home-root .compounds-actions { top: 10px; left: 10px; gap: 6px; }
.shary-home-root .property-actions-row { display: flex; gap: 6px; direction: ltr; }
.shary-home-root .property-actions .area-action { width: 32px; height: 32px; padding: 0; border-radius: 9px; background: #fff; color: #123a5c; box-shadow: 0 2px 6px rgba(18, 58, 92, 0.16); }
.shary-home-root .property-actions .area-action:hover { transform: translateY(-1px); color: #1f63c6; }
.shary-home-root .property-actions .area-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.shary-home-root .property-actions .area-action[data-favorite-toggle] svg { stroke: none; }
.shary-home-root .property-actions .area-action[data-favorite-toggle][aria-pressed="true"] { color: #dc2626; }
.shary-home-root .property-actions .area-action[data-favorite-toggle][aria-pressed="true"] svg { fill: currentColor; }
.shary-home-root .property-actions .area-action[data-compare-toggle][aria-pressed="true"] { background: #1e4166; color: #fff; }
@media (max-width: 640px) {
  .shary-home-root .property-actions, .shary-home-root .compounds-actions { top: 8px; left: 8px; gap: 5px; }
  .shary-home-root .property-actions-row { gap: 5px; }
  .shary-home-root .property-actions .area-action { width: 28px; height: 28px; border-radius: 8px; }
  .shary-home-root .property-actions .area-action svg { width: 15px; height: 15px; }
  /* المطورين: 4 في عرض الشاشة على الموبايل */
  .shary-home-root .developers-track { gap: 10px; }
  .shary-home-root .developer-card { flex: 0 0 calc((calc(95vw / var(--z, 1)) - 62px) / 4); width: calc((calc(95vw / var(--z, 1)) - 62px) / 4); height: calc((calc(95vw / var(--z, 1)) - 62px) / 4); font-size: 19px; }
}
.shary-home-root .whatsapp-button { display: flex; align-items: center; justify-content: center; color: #fff; }
.shary-home-root .whatsapp-button i, .shary-home-root .whatsapp-button .svg-inline--fa { font-size: 18px; }
/* ---- المعاينة: لو صور shary.eg مش متاحة (الكلاس home-offline بيتحط من سكربت المعاينة) — خلفيات هادية بدل صور الخلفية ---- */
.home-offline .shary-home-root .promo-map, .home-offline .shary-home-root .promo-sahel-map { background-image: linear-gradient(135deg, #e3f3f1, #cfe9e6); }
.home-offline .shary-home-root .promo-trending-card { background-image: linear-gradient(135deg, #fff6e2, #ffe9bd); }
.home-offline .shary-home-root .promo-sales-card { background-image: linear-gradient(135deg, #e8f1fa, #d5e6f6); }
.home-offline .shary-home-root .shary-app { background-image: linear-gradient(135deg, #2fae9f, #8bd8d0); }
/* فلتر الموبايل: الاختيارات شكلها أقراص (الخانة نفسها مخفية — في الموقع الستايل ده جاي من CSS الـ layout) */
.shary-home-root .filter-input { position: relative; }
.shary-home-root .filter-input input[type="checkbox"], .shary-home-root .filter-input input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.shary-home-root .filter-input label { cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.shary-home-root .filter-input input:checked + label { background: #1D4265 !important; border-color: #1D4265 !important; color: #fff !important; }
/* لوجو المطور مالي الدايرة (والحروف البديلة بحجم واضح) */
@media (min-width: 641px) { .shary-home-root .developer-card { font-size: 26px; letter-spacing: .5px; } }
/* ---- قسم "شاري معاك": ظل للتليفون ، خلفية أهدى ، وأزرار المتاجر ظاهرة على الديسك توب كمان جنب كود QR ---- */
.shary-home-root .sh-stage img { filter: drop-shadow(0 24px 30px rgba(14, 34, 56, .26)); }
.shary-home-root .sh-title { letter-spacing: 0; }
.shary-home-root .sh-store { box-shadow: 0 8px 18px -12px rgba(14, 34, 56, .45); }
/* موبايل: أزرار App Store / Google Play أصغر وهادية مع خلفية القسم */
@media (max-width: 959px) {
  .shary-home-root .sh-stores { gap: 8px; }
  .shary-home-root .sh-store { height: 42px; min-width: 0; gap: 8px; padding: 0 13px 0 11px; border: 1px solid rgba(18, 58, 92, .2); border-radius: 11px; background: rgba(255, 255, 255, .7); box-shadow: none; }
  .shary-home-root .sh-store svg { width: 20px; height: 20px; }
  .shary-home-root .sh-store small { font-size: 7.5px; }
  .shary-home-root .sh-store b { font-size: 14.5px; }
}
@media (min-width: 960px) {
  .shary-home-root .sh-title { font-size: clamp(44px, calc(4.4vw / var(--z, 1)), 62px); }
  .shary-home-root .sh-stores { display: flex; margin-top: 18px; }
  [dir="rtl"] .shary-home-root .sh-stores { justify-content: flex-end; }
  .shary-home-root .sh-qr { width: 150px; padding: 10px; border-radius: 16px; }
  .shary-home-root .sh-qr span { margin-top: 7px; font-size: 11px; }
}
/* شريط مؤشر شاري بقى لينك لصفحة المؤشر */
.shary-home-root a.market-ticker-badge { cursor: pointer; }

/* ── home.css · جزء 9 من 9: التحديثات الأخيرة (كل تعديل بعد التصميم الأول — بالترتيب) (المصدر: resources/css/shary/home/09-updates.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* ---- تحديث: زرار "مؤشر شاري" في الشريط — صغير ومن غير السهم، ونبضة بتدعو للضغط. "سعر المتر / نسبة الزيادة" مش بتظهر على الموبايل ---- */
.shary-home-root .market-ticker-arrow { display: none !important; }
.shary-home-root .market-ticker-badge-inner { justify-content: center; gap: 5px; animation: sharyBadgeTap 3.2s ease-in-out 1.2s infinite; }
.shary-home-root .market-ticker-badge { position: relative; }
.shary-home-root .market-ticker-badge::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid rgba(53, 182, 167, 0.7); opacity: 0; pointer-events: none; animation: sharyBadgeRing 3.2s ease-out 1.2s infinite; }
@keyframes sharyBadgeTap { 0%, 62%, 100% { transform: scale(1); } 70% { transform: scale(0.93); } 80% { transform: scale(1.05); } 88% { transform: scale(1); } }
@keyframes sharyBadgeRing { 0%, 70% { opacity: 0; transform: scale(1); } 76% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.28, 1.6); } }
@media (max-width: 640px) {
  .shary-home-root .market-ticker-badge { width: 76px; min-width: 76px; flex-basis: 76px; height: 32px; font-size: 9.5px; }
  .shary-home-root .market-ticker-badge-inner, .shary-home-root .market-ticker-badge-inner span { white-space: nowrap; }
  /* موبايل: من غير "سعر المتر / نسبة الزيادة" — أرقام المؤشر بتملى مكانهم */
  .shary-home-root .market-ticker-labels { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .shary-home-root .market-ticker-badge-inner, .shary-home-root .market-ticker-badge::after { animation: none; } }

/* ---- تحديث: سلايدر الهيدر على الموبايل — أقصر ، والصورة مالية السلايدر كله وخانة البحث فوقها في آخر الصورة (من غير خلفية زيادة) ، والعنوان فوق الفلتر والنقط تحته ---- */
@media (max-width: 640px) {
  .shary-home-root .hero-bg { height: auto !important; min-height: 0 !important; }
  .shary-home-root .hero-content { height: calc(clamp(214px, calc(58vw / var(--z, 1)), 290px) + 96px) !important; min-height: 0 !important; }
  .shary-home-root .hero-bg .hero-image-inner .hero-slide-image { object-fit: cover !important; object-position: center !important; }
  /* الفلتر جوه السلايدر فوق الصورة ، العنوان فوقه بحاجة بسيطة ، والتلات شرط تحت الفلتر */
  .shary-home-root .property-search-box { bottom: 20px !important; }
  .shary-home-root .hero-project-info { bottom: 84px !important; margin-bottom: 0 !important; }
  .shary-home-root .hero-project-info .hero-dots { position: absolute !important; left: 0 !important; right: 0 !important; bottom: -74px !important; transform: none !important; display: flex !important; justify-content: center !important; margin: 0 !important; z-index: 50 !important; }
}
/* ---- كارت "شاري كارد" في الهوم (style = shary) — بسيط وهادي: خلفية بيضا بتدرّج لبني ، العنوان على سطرين والزرار في ناحية ، والكارد نفسه مرسوم كود (SVG — site/partials/shary-card-art) مايل بظل خفيف فوق دايرة هادية في الناحية التانية ---- */
.shary-home-root .investment-promo-card.promo-card-shary { display: grid; grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "title art" "cta cta"; align-items: center; column-gap: 8px; row-gap: 8px; overflow: hidden; padding: 10px 14px 11px; border: 1px solid #d3dfee; background: linear-gradient(to left, #fff 0%, #fff 30%, #dbe9f8 100%) !important; box-shadow: 0 10px 22px -18px rgba(18, 58, 92, .45); filter: none; }
[dir="ltr"] .shary-home-root .investment-promo-card.promo-card-shary { background: linear-gradient(to right, #fff 0%, #fff 30%, #dbe9f8 100%) !important; }
.shary-home-root .promo-card-shary .promo-card-content { display: contents; }
.shary-home-root .investment-promo-card.promo-card-shary .promo-title { grid-area: title; display: flex; flex-direction: column !important; align-items: flex-start !important; align-self: center; justify-content: flex-start; gap: 0 !important; height: auto; margin: 0; padding: 0; text-align: start; }
.shary-home-root .investment-promo-card.promo-card-shary .promo-title h3 { margin: 0; padding: 0; font-size: 19px; font-weight: 800; line-height: 1.25; white-space: normal; color: #123a5c; text-shadow: none; }
.shary-home-root .investment-promo-card.promo-card-shary .promo-title h3 + h3 { color: #1f9a8c; }
.shary-home-root .investment-promo-card.promo-card-shary .shary-promo-icon { position: relative; grid-area: art; display: flex; width: 104px; height: 66px; flex: none; align-items: center; align-self: center; justify-content: center; overflow: visible; }
.shary-home-root .investment-promo-card.promo-card-shary .shary-promo-icon::before { content: ""; position: absolute; top: 50%; left: 50%; height: 64px; width: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #dbe6f6); }
.shary-home-root .investment-promo-card.promo-card-shary .shary-promo-icon .shary-card-art, .shary-home-root .investment-promo-card.promo-card-shary .shary-promo-icon img { position: relative; display: block; width: 100% !important; max-width: none !important; height: auto; transform: rotate(-9deg); overflow: visible; filter: drop-shadow(0 8px 9px rgba(18, 58, 92, .28)); box-shadow: none; }
.shary-home-root .investment-promo-card.promo-card-shary .promo-button { grid-area: cta; align-self: end; justify-self: start; width: auto; max-width: 100%; height: 28px; gap: 4px; padding: 0 13px 0 8px; background: #1e4166 !important; font-size: 12px; font-weight: 800; color: #fff; box-shadow: none; white-space: nowrap; }
[dir="ltr"] .shary-home-root .investment-promo-card.promo-card-shary .promo-button { flex-direction: row-reverse; padding: 0 8px 0 13px; }
[dir="ltr"] .shary-home-root .promo-card-shary .promo-trend-arrow { transform: scaleX(-1); }
.shary-home-root .promo-card-shary .promo-button::before { display: none; }
/* الزرار فوق الكارد المايل (لو الكلمة طويلة في الإنجليزي) ، والكارد أصغر سنة عشان ما يتقصّش من طرف الكارت */
.shary-home-root .investment-promo-card.promo-card-shary .promo-button { position: relative; z-index: 4; }
.shary-home-root .investment-promo-card.promo-card-shary .shary-promo-icon .shary-card-art { width: 92% !important; }
.shary-home-root .promo-card-shary .promo-trend-arrow { flex: none; }
@media (min-width: 960px) {
  /* الكارد عريض: الزرار في سطر لوحده تحت (زي الموبايل) عشان كلمة الزرار الطويلة في الإنجليزي ما تدخلش في الكارد */
  .shary-home-root .investment-promo-card.promo-card-shary { grid-template-columns: minmax(0, 1fr) 150px; grid-template-areas: "title art" "cta cta"; column-gap: 10px; row-gap: 8px; padding: 14px 18px; }
  .shary-home-root .investment-promo-card.promo-card-shary .promo-title { align-self: center; }
  .shary-home-root .investment-promo-card.promo-card-shary .promo-title h3 { font-size: 23px; }
  .shary-home-root .investment-promo-card.promo-card-shary .shary-promo-icon { width: 150px; height: 88px; }
  .shary-home-root .investment-promo-card.promo-card-shary .shary-promo-icon::before { height: 86px; width: 86px; }
  .shary-home-root .investment-promo-card.promo-card-shary .shary-promo-icon .shary-card-art { filter: drop-shadow(0 12px 12px rgba(18, 58, 92, .28)); }
  .shary-home-root .investment-promo-card.promo-card-shary .promo-button { align-self: end; height: 34px; gap: 5px; padding: 0 15px 0 10px; font-size: 13.5px; }
  [dir="ltr"] .shary-home-root .investment-promo-card.promo-card-shary .promo-button { padding: 0 10px 0 15px; }
}
/* ---- كروت العروض الديناميك: كارت من غير شكل جاهز (style فاضي) — الألوان وصورة الخلفية جايين من لوحة التحكم (inline) ، ودي القيم الافتراضية ---- */
.shary-home-root .promo-custom { background-color: #1e4166; color: #fff; }
.shary-home-root .promo-custom .promo-title h3 { color: inherit; }
.shary-home-root .promo-custom-button { background: #08A69B; color: #fff; }
.shary-home-root .investment-promo-card .promo-icon img, .shary-home-root .investment-promo-card .shary-promo-icon img { object-fit: contain; }
/* ---- إعلانات الهوم على الموبايل: بوكس واحد بكيرف ثابت في مكانه ، والإعلانات بتتحرك جواه (مش بعرض الشاشة) ---- */
@media (max-width: 767px) {
  .shary-home-root .mobile-promo-carousel { border-radius: 16px !important; overflow: hidden !important; background: #eaf2fb; box-shadow: 0 6px 16px -10px rgba(18, 58, 92, .45); isolation: isolate; transform: translateZ(0); }
  .shary-home-root .mobile-promo-carousel .mobile-promo-slide { border-radius: 0 !important; }
}
/* ---- إعلانات الهوم على الموبايل والتابلت والموبايل المفتوح (Fold) لحد 1023px: إعلان واحد بعرض الشاشة (زي الموقع القديم)
   بدل صف الكروت اللي جنب بعض ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .shary-home-root .promo-banners-carousel { display: none !important; }
  .shary-home-root section:has(> .promo-banners-carousel) { display: none !important; }
  .shary-home-root section:has(> .mobile-promo-carousel) { display: block !important; }
  .shary-home-root .mobile-promo-carousel { width: 100%; overflow: hidden !important; touch-action: pan-y; border-radius: 16px !important; background: #eaf2fb; box-shadow: 0 6px 16px -10px rgba(18, 58, 92, .45); isolation: isolate; transform: translateZ(0); }
  .shary-home-root .mobile-promo-track { display: flex; width: 100%; will-change: transform; }
  .shary-home-root .mobile-promo-slide { flex: 0 0 100%; width: 100%; overflow: hidden; border-radius: 0 !important; }
}
/* بوكس الإعلان نفس مقاس الموقع القديم بالظبط: عرض الشاشة × ارتفاع ثابت 120px (الصورة بتملاه) —
   على الموبايل العادي والـ Fold مقفول ومفتوح والتابلت */
@media (max-width: 1023px) {
  .shary-home-root .mobile-promo-slide { height: 120px !important; aspect-ratio: auto; line-height: 0; }
  .shary-home-root .mobile-promo-slide img { display: block; width: 100% !important; height: 100% !important; object-fit: fill !important; pointer-events: none; user-select: none; -webkit-user-drag: none; }
}
/* ---- "أفضل المطورين" على الموبايل والـ Fold والتابلت: 4 لوجوهات في عرض الشاشة (والباقي بالسحب) ---- */
@media (max-width: 959px) {
  .shary-home-root .developers-carousel { container-type: inline-size; }
  .shary-home-root .developers-track { gap: 12px; }
  .shary-home-root .developer-card { flex: 0 0 calc((100cqi - 36px) / 4); width: calc((100cqi - 36px) / 4); height: calc((100cqi - 36px) / 4); }
}
/* ---- قسم "شاري معاك" على الموبايل: الخلفية أقل والتليفون نازل جواها (الجزء الطالع منه بره الخلفية أقل) ، التليفون بنسبته الطبيعية ، والكلام الأخضر سطر واحد أرفع ---- */
@media (max-width: 959px) {
  .shary-home-root .sh-hero { --phone-w: 212px; padding-top: 12px !important; }
  .shary-home-root .sh-hero__panel { top: calc(var(--phone-w) * .2) !important; border-radius: 28px; }
  .shary-home-root .sh-stage { width: var(--phone-w) !important; max-width: calc(62vw / var(--z, 1)); aspect-ratio: 1000 / 1890; margin-top: 0; }
  .shary-home-root .sh-stage img { object-fit: contain !important; }
  .shary-home-root .sh-copy { padding-bottom: 12px !important; }
  .shary-home-root .sh-title { font-size: 34px !important; margin-bottom: 4px !important; }
  .shary-home-root .sh-sub { font-size: 15px !important; margin-bottom: 6px !important; }
  .shary-home-root .sh-body { font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.6 !important; margin-bottom: 10px !important; opacity: .9; }
  .shary-home-root .sh-body__more { display: none; }
}
/* خانة البحث الرئيسية: من غير مربع التظليل وقت الضغط (التظليل ماشي مع كيرف الخانة) ، وقايمة الاقتراحات بكيرف والصف المختار جواها بكيرف */
.shary-home-root .property-search-box, .shary-home-root .property-search-box * { -webkit-tap-highlight-color: transparent; }
.shary-home-root .property-search-input input, .shary-home-root .property-search-input input:focus { outline: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; border-radius: 999px; background-color: transparent !important; }
.shary-home-root .property-search-input:focus-within { box-shadow: 0 0 0 2px rgba(30, 65, 102, 0.28); }
.shary-home-root #heroSearchResults { border-radius: 18px; padding: 6px; overflow-x: hidden; }
.shary-home-root .hero-search-result { border-bottom: 0; border-radius: 12px; min-height: 58px; padding: 9px 12px; }
.shary-home-root .hero-search-result:hover, .shary-home-root .hero-search-result:active, .shary-home-root .hero-search-result:focus-visible { background: #eef4fb; outline: none; }
.shary-home-root .hero-search-note { margin: 0; padding: 8px 12px 6px; font-size: 12.5px; font-weight: 700; line-height: 1.6; color: #5b7189; text-align: start; }
/* قسم "شاري معاك": خلفية لبني لون واحد ورا التليفون والكتابة */
.shary-home-root .sh-hero__panel { background: #eaf2fb !important; }
/* ---- "أفضل المطورين" على الديسك توب: 8 مطورين ونص في الصف — نص الكارت الأخير باين عشان يبان إن الصف بيتسحب (الموبايل زي ما هو) ---- */
@media (min-width: 960px) {
  .shary-home-root .developers-carousel { container-type: inline-size; }
  .shary-home-root .developers-track { gap: 16px; }
  .shary-home-root .developer-card { flex: 0 0 calc((100cqw - 128px) / 8.5); width: calc((100cqw - 128px) / 8.5); height: calc((100cqw - 128px) / 8.5); }
}
/* ---- فلتر البحث في الهوم (ديسك توب): الاختيارات اللي تحت "للبيع / للإيجار" (الكل / من المطور / إعادة بيع — الكل / مفروش / غير مفروش): المختار أزرق واضح ---- */
.shary-home-root .property-status { border-radius: 999px !important; transition: background-color .15s ease, color .15s ease; }
/* الاختيار (الكل / من المطور / إعادة بيع — الكل / مفروش / غير مفروش): كحلي شاري زي نفس الاختيار جوه صفحة البحث والإيجار */
.shary-home-root .property-status.active { background: #123a5c !important; color: #fff !important; box-shadow: 0 5px 12px -7px rgba(18, 58, 92, .8); }
.shary-home-root .property-status:not(.active):hover { background: #eaf0f6; color: #123a5c; }
/* ---- قسم "شاري معاك" على الديسك توب: التليفون أكبر ، العنوان والكلام جوه الخلفية (في نصها) ، ومن غير السطور الصغيرة — الموبايل زي ما هو ---- */
@media (min-width: 960px) {
  .shary-home-root .sh-hero { --phone-w: 280px !important; padding-bottom: 40px !important; }
  .shary-home-root .sh-hero__inner { align-items: stretch !important; }
  .shary-home-root .sh-hero__panel { top: calc(var(--phone-w) * 1.89 * .26) !important; }
  .shary-home-root .sh-body { display: none !important; }
  .shary-home-root .sh-stage { align-self: flex-end; }
  .shary-home-root .sh-hero .sh-copy { display: flex; flex-direction: column; justify-content: center; align-self: stretch; margin-top: 0 !important; padding: calc(var(--phone-w) * 1.89 * .26 + 14px) 0 14px !important; }
  .shary-home-root .sh-title { font-size: 64px !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
  .shary-home-root .sh-sub { font-size: 21px !important; margin-bottom: 16px !important; }
  .shary-home-root .sh-hero .sh-qr { align-self: center !important; margin-top: calc(var(--phone-w) * 1.89 * .26) !important; margin-bottom: 0 !important; width: 130px !important; }
}
@media (min-width: 1536px) {
  .shary-home-root .sh-hero { --phone-w: 320px !important; }
}

/* ---- تحديث: فورم الاستشارة في الهوم — نفس خانات فورم الاستشارة في باقي الموقع: خانة أعلى وخط أوضح ، إطار بيظهر عند الضغط (focus) ، وقايمة المنطقة بنفس حجم باقي الخانات وسهم واضح ---- */
.contact-form .contact-field input,
.contact-form .contact-field textarea,
.contact-form #contact_location_btn { border-radius: 6px !important; font-size: 16px; font-weight: 600; color: #123a5c; transition: box-shadow 0.15s; }
.contact-form .contact-field input,
.contact-form #contact_location_btn { height: 40px; padding: 0 12px !important; }
.contact-form .contact-field textarea { height: 70px; padding: 10px 12px; resize: none; }
.contact-form .contact-field input::placeholder,
.contact-form .contact-field textarea::placeholder { font-weight: 500; color: #8a99a8; }
.contact-form .contact-field input:focus,
.contact-form .contact-field textarea:focus,
.contact-form #contact_location_btn:focus,
.contact-form #contact_location_btn[aria-expanded="true"] { outline: none; box-shadow: 0 0 0 2px rgba(30, 65, 102, 0.35); }
.contact-form #contact_location_btn { border: 0 !important; background: #fff; }
.contact-form .contact-field > label { font-size: 14px !important; font-weight: 700 !important; line-height: 1.5; color: #0d2033 !important; }
.contact-form #contact_location_label { font-size: 16px !important; font-weight: 500; line-height: 1.4; color: #8a99a8; }
.contact-form #contact_location_label[class*="161E2D"] { font-weight: 600; color: #123a5c; }
.contact-form #contact_location_btn .contact-location-arrow { color: #123a5c; transition: transform 0.2s; }
.contact-form #contact_location_btn[aria-expanded="true"] .contact-location-arrow { transform: rotate(180deg); }
.contact-form #location { top: calc(100% + 6px) !important; border-radius: 12px !important; padding: 6px; font-size: 15px !important; box-shadow: 0 14px 30px -12px rgba(18, 58, 92, 0.4) !important; }
.contact-form #location .hero-dropdown-option { border-radius: 8px; padding: 10px 12px !important; font-size: 15px; font-weight: 600; line-height: 1.5; color: #123a5c; }
.contact-form #location .hero-dropdown-option:hover,
.contact-form #location .hero-dropdown-option[aria-selected="true"] { background-color: #e8f0fb; color: #1f63c6; }

/* ---- تحديث: كارت "الأكثر رواجًا" في الهوم (style = trending) — بسيط وهادي: خلفية بيضا بتدرّج دافي ، العنوان والزرار في ناحية ، وزرار التشغيل (SVG) في الناحية التانية. من غير صورة خلفية ---- */
.investment-promo-card.promo-trending-card { display: grid; grid-template-columns: minmax(0, 1fr) 66px; grid-template-areas: "title art" "cta cta"; align-items: center; column-gap: 8px; row-gap: 8px; padding: 10px 14px 11px; border: 1px solid #f3e3bd; background: linear-gradient(to left, #fff 0%, #fff 30%, #fff1cf 100%) !important; box-shadow: 0 10px 22px -18px rgba(18, 58, 92, .45); filter: none; }
[dir="ltr"] .investment-promo-card.promo-trending-card { background: linear-gradient(to right, #fff 0%, #fff 30%, #fff1cf 100%) !important; }
.promo-trending-card .promo-card-content { display: contents; }
.investment-promo-card.promo-trending-card .promo-title { grid-area: title; display: flex; flex-direction: column !important; align-items: flex-start !important; align-self: center; justify-content: flex-start; gap: 0 !important; height: auto; margin: 0; padding: 0; text-align: start; }
.investment-promo-card.promo-trending-card .promo-title h3 { margin: 0; padding: 0; font-size: 19px; font-weight: 800; line-height: 1.25; white-space: normal; color: #123a5c; }
.investment-promo-card.promo-trending-card .promo-title h3 + h3 { color: #1f9a8c; }
.investment-promo-card.promo-trending-card .promo-icon { grid-area: art; width: 66px; height: 66px; flex: none; align-self: center; }
.promo-trending-card .promo-trend-art { display: block; width: 100%; height: 100%; }
.investment-promo-card.promo-trending-card .promo-button { grid-area: cta; align-self: end; justify-self: start; width: auto; max-width: 100%; height: 28px; gap: 4px; padding: 0 13px 0 8px; background: #1e4166; font-size: 12px; font-weight: 800; color: #fff; box-shadow: none; white-space: nowrap; }
[dir="ltr"] .investment-promo-card.promo-trending-card .promo-button { flex-direction: row-reverse; padding: 0 8px 0 13px; }
[dir="ltr"] .promo-trending-card .promo-trend-arrow { transform: scaleX(-1); }
.promo-trending-card .promo-button::before { display: none; }
.promo-trending-card .promo-trend-arrow { flex: none; }
/* ديسك توب (الكارت أكبر): الزرار تحت العنوان والرسمة واخدة الارتفاع كله */
@media (min-width: 960px) {
  .investment-promo-card.promo-trending-card { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "title art" "cta art"; column-gap: 10px; row-gap: 12px; padding: 14px 18px; }
  .investment-promo-card.promo-trending-card .promo-title { align-self: end; }
  .investment-promo-card.promo-trending-card .promo-title h3 { font-size: 23px; }
  .investment-promo-card.promo-trending-card .promo-icon { width: 112px; height: 112px; }
  .investment-promo-card.promo-trending-card .promo-button { align-self: start; height: 34px; gap: 5px; padding: 0 15px 0 10px; font-size: 13.5px; }
  [dir="ltr"] .investment-promo-card.promo-trending-card .promo-button { padding: 0 10px 0 15px; }
}

/* ---- تحديث: كارت "خريطة الساحل" في الهوم (style = sahel) — بسيط وهادي: خلفية بيضا بتدرّج تركواز فاتح ، العنوان على سطرين والزرار في ناحية ، ودايرة فيها البحر والموج والشمس (SVG) في الناحية التانية. من غير صورة خلفية ---- */
.investment-promo-card.promo-sahel-map { display: grid; grid-template-columns: minmax(0, 1fr) 66px; grid-template-areas: "title art" "cta cta"; align-items: center; column-gap: 8px; row-gap: 8px; padding: 10px 14px 11px; border: 1px solid #c8e6e0; background: linear-gradient(to left, #fff 0%, #fff 30%, #d5f1ec 100%) !important; box-shadow: 0 10px 22px -18px rgba(18, 58, 92, .45); filter: none; }
[dir="ltr"] .investment-promo-card.promo-sahel-map { background: linear-gradient(to right, #fff 0%, #fff 30%, #d5f1ec 100%) !important; }
.promo-sahel-map .promo-card-content { display: contents; }
.investment-promo-card.promo-sahel-map .promo-title { grid-area: title; align-items: flex-start !important; align-self: center; justify-content: flex-start; gap: 0 !important; height: auto; margin: 0 !important; padding: 0; text-align: start; }
.investment-promo-card.promo-sahel-map .promo-title h3 { margin: 0; padding: 0; font-size: 19px; font-weight: 800; line-height: 1.25; white-space: normal; color: #123a5c; }
.investment-promo-card.promo-sahel-map .promo-icon { grid-area: art; width: 66px; height: 66px; flex: none; align-self: center; background: none; }
.promo-sahel-map .promo-sahel-art { display: block; width: 100%; height: 100%; }
.investment-promo-card.promo-sahel-map .promo-button { grid-area: cta; align-self: end; justify-self: start; width: auto; max-width: 100%; height: 28px; gap: 4px; padding: 0 13px 0 8px; background: #1e4166 !important; font-size: 12px; font-weight: 800; color: #fff; box-shadow: none; white-space: nowrap; }
[dir="ltr"] .investment-promo-card.promo-sahel-map .promo-button { flex-direction: row-reverse; padding: 0 8px 0 13px; }
[dir="ltr"] .promo-sahel-map .promo-trend-arrow { transform: scaleX(-1); }
.promo-sahel-map .promo-button::before { display: none; }
.promo-sahel-map .promo-trend-arrow { flex: none; }
@media (min-width: 960px) {
  .investment-promo-card.promo-sahel-map { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "title art" "cta art"; column-gap: 10px; row-gap: 12px; padding: 14px 18px; }
  .investment-promo-card.promo-sahel-map .promo-title { align-self: end; }
  .investment-promo-card.promo-sahel-map .promo-title h3 { font-size: 23px; }
  .investment-promo-card.promo-sahel-map .promo-icon { width: 112px; height: 112px; }
  .investment-promo-card.promo-sahel-map .promo-button { align-self: start; height: 34px; gap: 5px; padding: 0 15px 0 10px; font-size: 13.5px; }
  [dir="ltr"] .investment-promo-card.promo-sahel-map .promo-button { padding: 0 10px 0 15px; }
}

/* ---- تحديث: كارت "خريطة مصر" في الهوم (style = map) — بسيط وهادي: خلفية بيضا بتدرّج لبني ، العنوان على سطرين والزرار في ناحية ، وكرة أرضية عليها مصر (SVG) في الناحية التانية. من غير صورة خلفية ---- */
.investment-promo-card.promo-map { display: grid; grid-template-columns: minmax(0, 1fr) 66px; grid-template-areas: "title art" "cta cta"; align-items: center; column-gap: 8px; row-gap: 8px; padding: 10px 14px 11px; border: 1px solid #d3dfee; background: linear-gradient(to left, #fff 0%, #fff 30%, #dbe9f8 100%) !important; box-shadow: 0 10px 22px -18px rgba(18, 58, 92, .45); filter: none; color: #123a5c; }
[dir="ltr"] .investment-promo-card.promo-map { background: linear-gradient(to right, #fff 0%, #fff 30%, #dbe9f8 100%) !important; }
.promo-map .promo-card-content { display: contents; }
.investment-promo-card.promo-map .promo-title { grid-area: title; display: flex; flex-direction: column !important; align-items: flex-start !important; align-self: center; justify-content: flex-start; gap: 0 !important; height: auto; margin: 0; padding: 0; text-align: start; }
.investment-promo-card.promo-map .promo-title h3 { margin: 0; padding: 0; font-size: 19px; font-weight: 800; line-height: 1.25; white-space: normal; color: #123a5c; }
.investment-promo-card.promo-map .promo-title h3 + h3 { color: #1f9a8c; }
.investment-promo-card.promo-map .promo-icon { grid-area: art; width: 66px; height: 66px; flex: none; align-self: center; }
.promo-map .promo-map-art { display: block; width: 100%; height: 100%; }
.investment-promo-card.promo-map .promo-button { grid-area: cta; align-self: end; justify-self: start; width: auto; max-width: 100%; height: 28px; gap: 4px; padding: 0 13px 0 8px; background: #1e4166 !important; font-size: 12px; font-weight: 800; color: #fff; box-shadow: none; white-space: nowrap; }
[dir="ltr"] .investment-promo-card.promo-map .promo-button { flex-direction: row-reverse; padding: 0 8px 0 13px; }
[dir="ltr"] .promo-map .promo-trend-arrow { transform: scaleX(-1); }
.promo-map .promo-button::before { display: none; }
.promo-map .promo-trend-arrow { flex: none; }
@media (min-width: 960px) {
  .investment-promo-card.promo-map { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "title art" "cta art"; column-gap: 10px; row-gap: 12px; padding: 14px 18px; }
  .investment-promo-card.promo-map .promo-title { align-self: end; }
  .investment-promo-card.promo-map .promo-title h3 { font-size: 23px; }
  .investment-promo-card.promo-map .promo-icon { width: 112px; height: 112px; }
  .investment-promo-card.promo-map .promo-button { align-self: start; height: 34px; gap: 5px; padding: 0 15px 0 10px; font-size: 13.5px; }
  [dir="ltr"] .investment-promo-card.promo-map .promo-button { padding: 0 10px 0 15px; }
}

/* ---- تحديث: كارت "عروض حصرية" في الهوم (style = sales) — بسيط وهادي: خلفية بيضا بتدرّج دافي ، العنوان على سطرين والزرار في ناحية ، وختم ذهبي عليه علامة الخصم % (SVG) في الناحية التانية. من غير صورة خلفية ---- */
.investment-promo-card.promo-sales-card { display: grid; grid-template-columns: minmax(0, 1fr) 66px; grid-template-areas: "title art" "cta cta"; align-items: center; column-gap: 8px; row-gap: 8px; padding: 10px 14px 11px; border: 1px solid #f3e3bd; background: linear-gradient(to left, #fff 0%, #fff 30%, #fff1cf 100%) !important; box-shadow: 0 10px 22px -18px rgba(18, 58, 92, .45); filter: none; }
[dir="ltr"] .investment-promo-card.promo-sales-card { background: linear-gradient(to right, #fff 0%, #fff 30%, #fff1cf 100%) !important; }
.promo-sales-card .promo-card-content { display: contents; }
.investment-promo-card.promo-sales-card .promo-title { grid-area: title; align-items: flex-start !important; align-self: center; justify-content: flex-start; gap: 0 !important; height: auto; margin: 0 !important; padding: 0; text-align: start; }
.investment-promo-card.promo-sales-card .promo-title h3 { margin: 0; padding: 0; font-size: 19px; font-weight: 800; line-height: 1.25; white-space: normal; color: #123a5c; }
.investment-promo-card.promo-sales-card .promo-icon { grid-area: art; width: 66px; height: 66px; flex: none; align-self: center; background: none; }
.promo-sales-card .promo-sales-art { display: block; width: 100%; height: 100%; }
.investment-promo-card.promo-sales-card .promo-button { grid-area: cta; align-self: end; justify-self: start; width: auto; max-width: 100%; height: 28px; gap: 4px; padding: 0 13px 0 8px; background: #1e4166 !important; font-size: 12px; font-weight: 800; color: #fff; box-shadow: none; white-space: nowrap; }
[dir="ltr"] .investment-promo-card.promo-sales-card .promo-button { flex-direction: row-reverse; padding: 0 8px 0 13px; }
[dir="ltr"] .promo-sales-card .promo-trend-arrow { transform: scaleX(-1); }
.promo-sales-card .promo-button::before { display: none; }
.promo-sales-card .promo-trend-arrow { flex: none; }
@media (min-width: 960px) {
  .investment-promo-card.promo-sales-card { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "title art" "cta art"; column-gap: 10px; row-gap: 12px; padding: 14px 18px; }
  .investment-promo-card.promo-sales-card .promo-title { align-self: end; }
  .investment-promo-card.promo-sales-card .promo-title h3 { font-size: 23px; }
  .investment-promo-card.promo-sales-card .promo-icon { width: 112px; height: 112px; }
  .investment-promo-card.promo-sales-card .promo-button { align-self: start; height: 34px; gap: 5px; padding: 0 15px 0 10px; font-size: 13.5px; }
  [dir="ltr"] .investment-promo-card.promo-sales-card .promo-button { padding: 0 10px 0 15px; }
}

/* ---- تحديث: اسم الوحدة على كروت "وحدات مقترحة لك" في الهوم — بنفس حجم الاسم على الكارت في صفحة "عرض الكل" (17px موبايل / 18px ديسك توب ، بولد) ---- */
.recommended-section .property-info .property-location { font-size: 17px !important; font-weight: 700 !important; line-height: 1.35; }
@media (min-width: 768px) {
  .recommended-section .property-info .property-location { font-size: 18px !important; }
}

/* ---- تحديث: خط كارت الوحدة في الهوم. الكارت كان على خط "Tajawal" وهو مش محمّل في الصفحة فكان بيظهر بخط الجهاز (رفيع وصغير).
   دلوقتي: الكارت بخط الموقع (Almarai) ، واسم الوحدة بنفس خط ووزن الاسم على الكارت في صفحة "عرض الكل" (Cairo بولد).
   مهم للباك إند: صفحة الهوم لازم تحمّل خط Cairo (نفس لينك layouts/site): family=Cairo:wght@500;600;700;800 ---- */
.property-card { font-family: "Almarai", "Cairo", "Tajawal", sans-serif !important; }
.recommended-section .property-info .property-location {
  font-family: "Cairo", "Almarai", sans-serif !important;
  font-size: 17px !important; font-weight: 700 !important; line-height: 1.35;
}
@media (min-width: 768px) {
  .recommended-section .property-info .property-location { font-size: 18px !important; font-weight: 700 !important; }
}

/* ---- كلاسات Tailwind المستخدمة في الهوم (جوه .shary-home-root بس) ---- */
.shary-home-root .visible{visibility:visible}.shary-home-root .invisible{visibility:hidden}.shary-home-root .fixed{position:fixed}.shary-home-root .absolute{position:absolute}.shary-home-root .relative{position:relative}.shary-home-root .sticky{position:sticky}.shary-home-root .inset-0{inset:0}.shary-home-root .inset-x-0{left:0;right:0}.shary-home-root .bottom-0{bottom:0}.shary-home-root .bottom-2{bottom:.5rem}.shary-home-root .left-0{left:0}.shary-home-root .right-0{right:0}.shary-home-root .top-0{top:0}.shary-home-root .top-1\/2{top:50%}.shary-home-root .top-12{top:3rem}.shary-home-root .top-\[72px\]{top:72px}.shary-home-root .z-10{z-index:10}.shary-home-root .z-30{z-index:30}.shary-home-root .z-40{z-index:40}.shary-home-root .z-\[-1\]{z-index:-1}.shary-home-root .z-\[100\]{z-index:100}.shary-home-root .z-\[1\]{z-index:1}.shary-home-root .z-\[31\]{z-index:31}.shary-home-root .z-\[4\]{z-index:4}.shary-home-root .z-\[60\]{z-index:60}.shary-home-root .m-auto{margin:auto}.shary-home-root .mx-0{margin-left:0;margin-right:0}.shary-home-root .my-1{margin-bottom:.25rem;margin-top:.25rem}.shary-home-root .mb-0{margin-bottom:0}.shary-home-root .mb-1{margin-bottom:.25rem}.shary-home-root .mb-2{margin-bottom:.5rem}.shary-home-root .mb-3{margin-bottom:.75rem}.shary-home-root .mb-4{margin-bottom:1rem}.shary-home-root .mb-5{margin-bottom:1.25rem}.shary-home-root .mb-8{margin-bottom:2rem}.shary-home-root .mt-0{margin-top:0}.shary-home-root .mt-1{margin-top:.25rem}.shary-home-root .mt-1\.5{margin-top:.375rem}.shary-home-root .mt-3{margin-top:.75rem}.shary-home-root .mt-4{margin-top:1rem}.shary-home-root .mt-6{margin-top:1.5rem}.shary-home-root .mt-\[10px\]{margin-top:10px}.shary-home-root .mt-\[122px\]{margin-top:122px}.shary-home-root .mt-auto{margin-top:auto}.shary-home-root .line-clamp-2{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.shary-home-root .block{display:block}.shary-home-root .inline{display:inline}.shary-home-root .flex{display:flex}.shary-home-root .inline-flex{display:inline-flex}.shary-home-root .\!grid{display:grid!important}.shary-home-root .grid{display:grid}.shary-home-root .hidden{display:none}.shary-home-root .h-10{height:2.5rem}.shary-home-root .h-14{height:3.5rem}.shary-home-root .h-40{height:10rem}.shary-home-root .h-8{height:2rem}.shary-home-root .h-9{height:2.25rem}.shary-home-root .h-\[22px\]{height:22px}.shary-home-root .h-\[25px\]{height:25px}.shary-home-root .h-\[34px\]{height:34px}.shary-home-root .h-\[38px\]{height:38px}.shary-home-root .h-\[40px\]{height:40px}.shary-home-root .h-\[52px\]{height:52px}.shary-home-root .h-dvh{height:calc(100dvh / var(--z, 1))}.shary-home-root .h-full{height:100%}.shary-home-root .max-h-0{max-height:0}.shary-home-root .max-h-full{max-height:100%}.shary-home-root .w-10{width:2.5rem}.shary-home-root .w-14{width:3.5rem}.shary-home-root .w-8{width:2rem}.shary-home-root .w-9{width:2.25rem}.shary-home-root .w-\[140px\]{width:140px}.shary-home-root .w-\[25px\]{width:25px}.shary-home-root .w-\[280px\]{width:280px}.shary-home-root .w-\[38px\]{width:38px}.shary-home-root .w-\[540px\]{width:540px}.shary-home-root .w-\[60px\]{width:60px}.shary-home-root .w-\[72px\]{width:72px}.shary-home-root .w-\[82\%\]{width:82%}.shary-home-root .w-full{width:100%}.shary-home-root .max-w-full{max-width:100%}.shary-home-root .max-w-sm{max-width:24rem}.shary-home-root .flex-1{flex:1 1 0%}.shary-home-root .shrink-0{flex-shrink:0}.shary-home-root .-translate-y-1\/2{--tw-translate-y:-50%}.shary-home-root .-translate-y-1\/2,.shary-home-root .scale-\[1\.015\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.shary-home-root .scale-\[1\.015\]{--tw-scale-x:1.015;--tw-scale-y:1.015}.shary-home-root .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.shary-home-root .cursor-pointer{cursor:pointer}.shary-home-root .resize{resize:both}.shary-home-root .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.shary-home-root .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.shary-home-root .flex-col{flex-direction:column}.shary-home-root .flex-wrap{flex-wrap:wrap}.shary-home-root .items-center{align-items:center}.shary-home-root .justify-end{justify-content:flex-end}.shary-home-root .justify-center{justify-content:center}.shary-home-root .justify-between{justify-content:space-between}.shary-home-root .gap-1{gap:.25rem}.shary-home-root .gap-1\.5{gap:.375rem}.shary-home-root .gap-10{gap:2.5rem}.shary-home-root .gap-2{gap:.5rem}.shary-home-root .gap-3{gap:.75rem}.shary-home-root .gap-4{gap:1rem}.shary-home-root .gap-5{gap:1.25rem}.shary-home-root .gap-\[2px\]{gap:2px}.shary-home-root .gap-x-2\.5{-moz-column-gap:.625rem;column-gap:.625rem}.shary-home-root .gap-y-4{row-gap:1rem}.shary-home-root .gap-y-5{row-gap:1.25rem}.shary-home-root .overflow-auto{overflow:auto}.shary-home-root .overflow-hidden{overflow:hidden}.shary-home-root .overflow-y-auto{overflow-y:auto}.shary-home-root .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shary-home-root .whitespace-normal{white-space:normal}.shary-home-root .break-words{overflow-wrap:break-word}.shary-home-root .rounded-2xl{border-radius:1rem}.shary-home-root .rounded-3xl{border-radius:1.5rem}.shary-home-root .rounded-\[17px\]{border-radius:17px}.shary-home-root .rounded-\[30px\]{border-radius:30px}.shary-home-root .rounded-\[45px\]{border-radius:45px}.shary-home-root .rounded-\[47px\]{border-radius:47px}.shary-home-root .rounded-full{border-radius:9999px}.shary-home-root .rounded-lg{border-radius:.5rem}.shary-home-root .rounded-xl{border-radius:.75rem}.shary-home-root .rounded-t-\[35px\]{border-top-left-radius:35px;border-top-right-radius:35px}.shary-home-root .rounded-se-3xl{border-start-end-radius:1.5rem}.shary-home-root .rounded-ss-3xl{border-start-start-radius:1.5rem}.shary-home-root .border{border-width:1px}.shary-home-root .border-b{border-bottom-width:1px}.shary-home-root .border-t{border-top-width:1px}.shary-home-root .border-solid{border-style:solid}.shary-home-root .border-\[\#1D4265\]{--tw-border-opacity:1;border-color:rgb(29 66 101/var(--tw-border-opacity,1))}.shary-home-root .border-\[\#92929226\]{border-color:#92929226}.shary-home-root .border-\[\#99999933\]{border-color:#99999933}.shary-home-root .border-\[\#D9D9D9\]{--tw-border-opacity:1;border-color:rgb(217 217 217/var(--tw-border-opacity,1))}.shary-home-root .border-\[\#E4E4E4\]{--tw-border-opacity:1;border-color:rgb(228 228 228/var(--tw-border-opacity,1))}.shary-home-root .border-\[\#EEEEEE\]{--tw-border-opacity:1;border-color:rgb(238 238 238/var(--tw-border-opacity,1))}.shary-home-root .border-shary-line{--tw-border-opacity:1;border-color:rgb(228 233 239/var(--tw-border-opacity,1))}.shary-home-root .border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.shary-home-root .border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.shary-home-root .bg-\[\#00000040\]{background-color:#00000040}.shary-home-root .bg-\[\#08A69B\]{--tw-bg-opacity:1;background-color:rgb(8 166 155/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#0B5CAD\]{--tw-bg-opacity:1;background-color:rgb(11 92 173/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#123A4B\]{--tw-bg-opacity:1;background-color:rgb(18 58 75/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#1D4265\]{--tw-bg-opacity:1;background-color:rgb(29 66 101/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#2972FF1A\]{background-color:#2972ff1a}.shary-home-root .bg-\[\#378FE5\]{--tw-bg-opacity:1;background-color:rgb(55 143 229/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#D9D9D9\]{--tw-bg-opacity:1;background-color:rgb(217 217 217/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#EAF4FC\]{--tw-bg-opacity:1;background-color:rgb(234 244 252/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#F5F5F5\]{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#F5F9FD\]{--tw-bg-opacity:1;background-color:rgb(245 249 253/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#FAFAFA\]{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.shary-home-root .bg-\[\#FFFFFF8A\]{background-color:#ffffff8a}.shary-home-root .bg-black\/40{background-color:rgba(0,0,0,.4)}.shary-home-root .bg-navy{background-color:var(--color-navy)}.shary-home-root .bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.shary-home-root .bg-transparent{background-color:transparent}.shary-home-root .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.shary-home-root .object-contain{-o-object-fit:contain;object-fit:contain}.shary-home-root .object-cover{-o-object-fit:cover;object-fit:cover}.shary-home-root .object-fill{-o-object-fit:fill;object-fit:fill}.shary-home-root .p-0{padding:0}.shary-home-root .p-2{padding:.5rem}.shary-home-root .p-3{padding:.75rem}.shary-home-root .p-4{padding:1rem}.shary-home-root .p-5{padding:1.25rem}.shary-home-root .p-6{padding:1.5rem}.shary-home-root .px-0{padding-left:0;padding-right:0}.shary-home-root .px-2{padding-left:.5rem;padding-right:.5rem}.shary-home-root .px-2\.5{padding-left:.625rem;padding-right:.625rem}.shary-home-root .px-3{padding-left:.75rem;padding-right:.75rem}.shary-home-root .px-4{padding-left:1rem;padding-right:1rem}.shary-home-root .px-5{padding-left:1.25rem;padding-right:1.25rem}.shary-home-root .px-6{padding-left:1.5rem;padding-right:1.5rem}.shary-home-root .py-0{padding-bottom:0;padding-top:0}.shary-home-root .py-1{padding-bottom:.25rem;padding-top:.25rem}.shary-home-root .py-2{padding-bottom:.5rem;padding-top:.5rem}.shary-home-root .py-3{padding-bottom:.75rem;padding-top:.75rem}.shary-home-root .py-4{padding-bottom:1rem;padding-top:1rem}.shary-home-root .py-5{padding-bottom:1.25rem;padding-top:1.25rem}.shary-home-root .pb-10{padding-bottom:2.5rem}.shary-home-root .pb-3{padding-bottom:.75rem}.shary-home-root .pb-4{padding-bottom:1rem}.shary-home-root .pb-5{padding-bottom:1.25rem}.shary-home-root .pb-\[calc\(10px\+env\(safe-area-inset-bottom\2c 0px\)\)\]{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}.shary-home-root .pe-3{padding-inline-end:.75rem}.shary-home-root .pe-5{padding-inline-end:1.25rem}.shary-home-root .ps-10{padding-inline-start:2.5rem}.shary-home-root .ps-2{padding-inline-start:.5rem}.shary-home-root .ps-5{padding-inline-start:1.25rem}.shary-home-root .ps-7{padding-inline-start:1.75rem}.shary-home-root .pt-10{padding-top:2.5rem}.shary-home-root .pt-16{padding-top:4rem}.shary-home-root .pt-2{padding-top:.5rem}.shary-home-root .pt-3{padding-top:.75rem}.shary-home-root .pt-4{padding-top:1rem}.shary-home-root .pt-6{padding-top:1.5rem}.shary-home-root .pt-\[11px\]{padding-top:11px}.shary-home-root .text-left{text-align:left}.shary-home-root .text-center{text-align:center}.shary-home-root .text-2xl{font-size:1.5rem;line-height:2rem}.shary-home-root .text-3xl{font-size:1.875rem;line-height:2.25rem}.shary-home-root .text-\[10px\]{font-size:10px}.shary-home-root .text-\[11px\]{font-size:11px}.shary-home-root .text-\[12px\]{font-size:12px}.shary-home-root .text-\[13px\]{font-size:13px}.shary-home-root .text-\[15px\]{font-size:15px}.shary-home-root .text-\[16px\]{font-size:16px}.shary-home-root .text-\[9px\]{font-size:9px}.shary-home-root .text-base{font-size:1rem;line-height:1.5rem}.shary-home-root .text-lg{font-size:1.125rem;line-height:1.75rem}.shary-home-root .text-sm{font-size:.875rem;line-height:1.25rem}.shary-home-root .text-xl{font-size:1.25rem;line-height:1.75rem}.shary-home-root .text-xs{font-size:.75rem;line-height:1rem}.shary-home-root .font-black{font-weight:900}.shary-home-root .font-bold{font-weight:700}.shary-home-root .font-extrabold{font-weight:800}.shary-home-root .font-light{font-weight:300}.shary-home-root .font-medium{font-weight:500}.shary-home-root .font-normal{font-weight:400}.shary-home-root .font-semibold{font-weight:600}.shary-home-root .leading-4{line-height:1rem}.shary-home-root .leading-5{line-height:1.25rem}.shary-home-root .leading-7{line-height:1.75rem}.shary-home-root .leading-\[12px\]{line-height:12px}.shary-home-root .leading-\[22px\]{line-height:22px}.shary-home-root .leading-none{line-height:1}.shary-home-root .leading-tight{line-height:1.25}.shary-home-root .text-\[\#063454\]{--tw-text-opacity:1;color:rgb(6 52 84/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#0B3D91\]{--tw-text-opacity:1;color:rgb(11 61 145/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#0B5CAD\]{--tw-text-opacity:1;color:rgb(11 92 173/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#121212\]{--tw-text-opacity:1;color:rgb(18 18 18/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#1563DF\]{--tw-text-opacity:1;color:rgb(21 99 223/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#161E2D\]{--tw-text-opacity:1;color:rgb(22 30 45/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#1A2028\]{--tw-text-opacity:1;color:rgb(26 32 40/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#1D1D1D\]{--tw-text-opacity:1;color:rgb(29 29 29/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#1D4265\]{--tw-text-opacity:1;color:rgb(29 66 101/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#1E4164\]{--tw-text-opacity:1;color:rgb(30 65 100/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#285A7C\]{--tw-text-opacity:1;color:rgb(40 90 124/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#2C6386\]{--tw-text-opacity:1;color:rgb(44 99 134/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#333A40\]{--tw-text-opacity:1;color:rgb(51 58 64/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#3F474D\]{--tw-text-opacity:1;color:rgb(63 71 77/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#4A5560\]{--tw-text-opacity:1;color:rgb(74 85 96/var(--tw-text-opacity,1))}.shary-home-root .text-\[\#d9a021\]{--tw-text-opacity:1;color:rgb(217 160 33/var(--tw-text-opacity,1))}.shary-home-root .text-navy{color:var(--color-navy)}.shary-home-root .text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.shary-home-root .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shary-home-root .underline{text-decoration-line:underline}.shary-home-root .placeholder-\[\#667085\]::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(102 112 133/var(--tw-placeholder-opacity,1))}.shary-home-root .placeholder-\[\#667085\]::placeholder{--tw-placeholder-opacity:1;color:rgb(102 112 133/var(--tw-placeholder-opacity,1))}.shary-home-root .placeholder-white::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(255 255 255/var(--tw-placeholder-opacity,1))}.shary-home-root .placeholder-white::placeholder{--tw-placeholder-opacity:1;color:rgb(255 255 255/var(--tw-placeholder-opacity,1))}.shary-home-root .opacity-0{opacity:0}.shary-home-root .opacity-100{opacity:1}.shary-home-root .shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shary-home-root .shadow,.shary-home-root .shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shary-home-root .shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shary-home-root .shadow-\[0_-8px_22px_-16px_rgba\(18\2c 58\2c 92\2c 0\.4\)\]{--tw-shadow:0 -8px 22px -16px rgba(18,58,92,.4);--tw-shadow-colored:0 -8px 22px -16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shary-home-root .shadow-\[0_4px_4px_0_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{--tw-shadow:0 4px 4px 0 rgba(0,0,0,.2);--tw-shadow-colored:0 4px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shary-home-root .shadow-\[0px_-2px_4px_0px_\#00000040\]{--tw-shadow:0px -2px 4px 0px #00000040;--tw-shadow-colored:0px -2px 4px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shary-home-root .shadow-\[0px_4px_4px_0px_\#00000040\]{--tw-shadow:0px 4px 4px 0px #00000040;--tw-shadow-colored:0px 4px 4px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shary-home-root .shadow-\[6px_6px_76\.1px_0px_\#00000040\]{--tw-shadow:6px 6px 76.1px 0px #00000040;--tw-shadow-colored:6px 6px 76.1px 0px var(--tw-shadow-color)}.shary-home-root .shadow-\[6px_6px_76\.1px_0px_\#00000040\],.shary-home-root .shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shary-home-root .shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shary-home-root .shadow-soft{--tw-shadow:0 8px 24px rgba(7,48,76,.1);--tw-shadow-colored:0 8px 24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shary-home-root .outline-none{outline:2px solid transparent;outline-offset:2px}.shary-home-root .blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.shary-home-root .\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.shary-home-root .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.shary-home-root .backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.shary-home-root .transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.shary-home-root .transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.shary-home-root .duration-300{transition-duration:.3s}.shary-home-root .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shary-home-root :is(.group[aria-pressed=true] .group-aria-pressed\:fill-current){fill:currentColor}@media (min-width:640px){.shary-home-root .sm\:top-\[86px\]{top:86px}.shary-home-root .sm\:h-\[54px\]{height:54px}.shary-home-root .sm\:gap-5{gap:1.25rem}.shary-home-root .sm\:border-s{border-inline-start-width:1px}.shary-home-root .sm\:py-2{padding-bottom:.5rem;padding-top:.5rem}.shary-home-root .sm\:py-4{padding-bottom:1rem;padding-top:1rem}.shary-home-root .sm\:pe-5{padding-inline-end:1.25rem}.shary-home-root .sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.shary-home-root .md\:top-14{top:3.5rem}.shary-home-root .md\:mb-2{margin-bottom:.5rem}.shary-home-root .md\:mb-7{margin-bottom:1.75rem}.shary-home-root .md\:mt-20{margin-top:5rem}.shary-home-root .md\:mt-3{margin-top:.75rem}.shary-home-root .md\:mt-4{margin-top:1rem}.shary-home-root .md\:mt-8{margin-top:2rem}.shary-home-root .md\:mt-\[15px\]{margin-top:15px}.shary-home-root .md\:block{display:block}.shary-home-root .md\:inline{display:inline}.shary-home-root .md\:hidden{display:none}.shary-home-root .md\:h-\[54px\]{height:54px}.shary-home-root .md\:h-\[60px\]{height:60px}.shary-home-root .md\:w-\[102px\]{width:102px}.shary-home-root .md\:w-\[195px\]{width:195px}.shary-home-root .md\:w-\[42px\]{width:42px}.shary-home-root .md\:w-\[93px\]{width:93px}.shary-home-root .md\:gap-1\.5{gap:.375rem}.shary-home-root .md\:gap-4{gap:1rem}.shary-home-root .md\:p-2{padding:.5rem}.shary-home-root .md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.shary-home-root .md\:px-3{padding-left:.75rem;padding-right:.75rem}.shary-home-root .md\:py-0{padding-bottom:0;padding-top:0}.shary-home-root .md\:py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.shary-home-root .md\:py-7{padding-bottom:1.75rem;padding-top:1.75rem}.shary-home-root .md\:pb-5{padding-bottom:1.25rem}.shary-home-root .md\:pb-6{padding-bottom:1.5rem}.shary-home-root .md\:pt-1{padding-top:.25rem}.shary-home-root .md\:pt-10{padding-top:2.5rem}.shary-home-root .md\:pt-3{padding-top:.75rem}.shary-home-root .md\:text-2xl{font-size:1.5rem;line-height:2rem}.shary-home-root .md\:text-\[13px\]{font-size:13px}.shary-home-root .md\:text-base{font-size:1rem;line-height:1.5rem}.shary-home-root .md\:text-lg{font-size:1.125rem;line-height:1.75rem}.shary-home-root .md\:text-sm{font-size:.875rem;line-height:1.25rem}.shary-home-root .md\:text-xl{font-size:1.25rem;line-height:1.75rem}.shary-home-root .md\:font-semibold{font-weight:600}.shary-home-root .md\:leading-\[22px\]{line-height:22px}}@media (min-width:1024px){.shary-home-root .lg\:hidden{display:none}}.shary-home-root .ltr\:left-4:where([dir=ltr],[dir=ltr] *){left:1rem}.shary-home-root .ltr\:items-start:where([dir=ltr],[dir=ltr] *){align-items:flex-start}.shary-home-root .rtl\:right-4:where([dir=rtl],[dir=rtl] *){right:1rem}.shary-home-root .rtl\:flex-col-reverse:where([dir=rtl],[dir=rtl] *){flex-direction:column-reverse}.shary-home-root .rtl\:items-end:where([dir=rtl],[dir=rtl] *){align-items:flex-end}
/* ---- الهيدر من غير زوم: كادر الصورة بنسبة ثابتة = نسبة الصور اللي بتترفع من لوحة التحكم (صور هيدر الرئيسية) ----
   ديسك توب 2880×847 (3.4 : 1) — موبايل 1170×965 (1.21 : 1). الصورة اللي بالنسبة دي بتظهر كاملة من غير قص ولا تكبير. */
@media (min-width: 1024px) {
  .shary-home-root .hero-bg, .shary-home-root .hero-bg.hero-section, .shary-home-root .hero-section { height: clamp(375px, calc(29.5vw / var(--z, 1)), 566px) !important; min-height: 0 !important; }
  .shary-home-root .hero-content { height: clamp(375px, calc(29.5vw / var(--z, 1)), 566px) !important; min-height: 0 !important; }
}
@media (max-width: 640px) {
  .shary-home-root .hero-content { height: min(calc(82.5vw / var(--z, 1)), 440px) !important; min-height: 0 !important; }
}

/* ---- أفضل المشاريع على الديسك توب: 4 كروت كاملة + جزء واضح من الكارت الخامس (زي باقي السلايدرز في الصفحة) ---- */
@media (min-width: 1024px) {
  .shary-home-root .best-projects-carousel { container-type: inline-size; }
  .shary-home-root .best-projects-track .project-card { width: calc((100cqi - 48px) / 3.45) !important; }
}
@media (min-width: 1280px) {
  .shary-home-root .best-projects-track .project-card { width: calc((100cqi - 64px) / 4.45) !important; }
}

/* ---- ديسك توب: محتوى الهوم على نفس عرض باقي صفحات الموقع والهيدر والفوتر بالظبط (‎--shary-w من app.css) ----
   اللوجو يمين على بداية الكروت ، و"تسجيل الدخول" شمال على نهايتها — على أي مقاس شاشة وأي زوم. */
@media (min-width: 1024px) {
  .shary-home-root .container-x, .container-x { width: var(--shary-w, min(calc(95vw / var(--z, 1)) - 32px, 1180px)); max-width: none; margin-inline: auto; }
  /* أفضل المطورين: 9 لوجوهات في عرض الصف (والباقي بالسحب) */
  .shary-home-root .developers-carousel { container-type: inline-size; }
  .shary-home-root .developers-track { gap: 12px; }
  .shary-home-root .developer-card { flex: 0 0 calc((100cqi - 96px) / 9); width: calc((100cqi - 96px) / 9); height: calc((100cqi - 96px) / 9); }
}

/* ---- أفضل الكمبوندات: الاسم مكتوب على الصورة على طول (من غير خلفية ولا تظليلة على الصورة كلها) —
   ولما الماوس / صباع اليوزر ييجي على الكارت بيظهر ظل خفيف ورا الكلمة بس ---- */
.shary-home-root .best-projects-track .project-card .card-overlay { display: none !important; }
.shary-home-root .best-projects-track .project-card .compounds-content,
.shary-home-root .best-projects-track .project-card .compounds-content:hover {
  left: 0; right: 0; bottom: 0 !important; width: auto;
  padding: 10px 12px 11px !important;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
  color: #ffffff;
  gap: 1px;
  isolation: isolate;
  text-shadow: 0 1px 2px rgba(4, 31, 56, 0.85), 0 0 12px rgba(4, 31, 56, 0.6);
}
.shary-home-root .best-projects-track .project-card .compounds-content::before {
  content: ""; position: absolute; z-index: -1; inset: 2px 12% 4px;
  border-radius: 999px; background: rgba(4, 31, 56, 0.44); filter: blur(14px);
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.shary-home-root .best-projects-track a:hover .project-card .compounds-content::before,
.shary-home-root .best-projects-track a:active .project-card .compounds-content::before,
.shary-home-root .best-projects-track a:focus-visible .project-card .compounds-content::before,
.shary-home-root .best-projects-track .project-card:hover .compounds-content::before,
.shary-home-root .best-projects-track .project-card:active .compounds-content::before { opacity: 1; }
.shary-home-root .best-projects-track .project-card .compounds-content .compound-name:first-child { font-size: 15.5px; font-weight: 800; line-height: 21px; -webkit-line-clamp: 1; }
.shary-home-root .best-projects-track .project-card .compounds-content .compound-name:not(:first-child) { font-size: 12px; line-height: 17px; }
.shary-home-root .best-projects-track .project-card .compound-name { color: #ffffff; }
.shary-home-root .best-projects-track .project-card .compound-name + .compound-name,
.shary-home-root .best-projects-track .project-card .compounds-content > .compound-name:last-of-type { color: #ffffff; font-weight: 700; }
.shary-home-root .best-projects-track .project-card .compounds-content .material-symbols-rounded { color: #ffffff; }
.shary-home-root .best-projects-track .project-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.shary-home-root .best-projects-track a:hover .project-card { box-shadow: 0 10px 24px -12px rgba(18, 58, 92, 0.45); }

/* ---- ديسك توب: فورم الاستشارة في الهوم بمقاس مريح (كارت أعرض ، خانات 50px ، خط أكبر وبولد) — نفس مقاسات فورم باقي الصفحات ---- */
@media (min-width: 1024px) {
  .shary-home-root .contact-card { max-width: 560px; padding: 32px 32px 30px; border-radius: 16px; }
  .shary-home-root .contact-header h2, .shary-home-root .contact-label { font-size: 24px; font-weight: 800; }
  .shary-home-root .contact-header h4 { font-size: 19px; }
  .shary-home-root .contact-description { font-size: 15px; margin-bottom: 20px; }
  .shary-home-root .contact-form { gap: 14px; }
  .shary-home-root .contact-form .contact-field { gap: 6px; }
  .shary-home-root .contact-form .contact-field > label { font-size: 15.5px !important; }
  .shary-home-root .contact-form .contact-field input,
  .shary-home-root .contact-form #contact_location_btn { height: 50px; border-radius: 10px !important; font-size: 16.5px; }
  .shary-home-root .contact-form #contact_location_label { font-size: 16.5px !important; }
  .shary-home-root .contact-form .contact-field textarea { height: 96px; border-radius: 10px !important; font-size: 16.5px; }
  .shary-home-root .contact-form .contact-submit, .shary-home-root .contact-form .contact-call { height: 50px !important; min-height: 50px; font-size: 16.5px !important; }
  .shary-home-root .contact-form .contact-buttons { gap: 10px; margin-top: 4px; }
}

/* ---- ديسك توب: قسم "شاري معاك" — الجملة والكبسولات (متابعة الأقساط / بعد الشراء / المؤشر العقاري) بولد وبمقاس واضح متناسق مع العنوان ---- */
@media (min-width: 960px) {
  .shary-home-root .sh-title { font-weight: 800 !important; }
  .shary-home-root .sh-sub { font-size: 27px !important; font-weight: 800 !important; line-height: 1.45 !important; margin-bottom: 20px !important; }
  .shary-home-root .sh-hero .sh-pills { flex-wrap: nowrap; gap: 12px; }
  .shary-home-root .sh-hero .sh-pill { height: 50px; border-radius: 25px; font-size: 17.5px; font-weight: 800; padding: 0 24px !important; }
  .shary-home-root .sh-hero .sh-qr { width: 164px !important; padding: 12px !important; border-radius: 16px; }
  .shary-home-root .sh-hero .sh-qr span { margin-top: 8px; font-size: 14.5px; font-weight: 800; line-height: 1.5; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .shary-home-root .sh-sub { font-size: 23px !important; }
  .shary-home-root .sh-hero .sh-pill { height: 44px; font-size: 15px; padding: 0 16px !important; }
}

/* ---- قسم "شاري معاك" (ديسك توب): مساحة الكلام أوسع شوية (المسافات اللي حوالين التليفون أقل) عشان الكبسولات التلاتة تفضل صف واحد قبل التليفون.
   بالإنجليزي كلامها أطول فمقاسها أصغر — ولو المساحة ما كفتش على شاشة ضيقة بينزلوا سطر تاني بدل ما يدخلوا ورا التليفون (لأي لغة) ---- */
@media (min-width: 960px) {
  .shary-home-root .sh-hero__inner { gap: 36px !important; }
  .shary-home-root .sh-hero .sh-stage { margin-inline-end: 28px !important; }
  .shary-home-root .sh-hero .sh-copy { min-width: 0; }
  .shary-home-root .sh-hero .sh-pills { flex-wrap: wrap; max-width: 100%; }
  .shary-home-root .sh-hero .sh-pill { white-space: nowrap; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pills { gap: 9px; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { height: 46px; border-radius: 23px; font-size: 15.5px; padding: 0 16px !important; }
  html[lang="en"] .shary-home-root .sh-sub { font-size: 24px !important; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { height: 41px; font-size: 13.5px; padding: 0 12px !important; }
  html[lang="en"] .shary-home-root .sh-sub { font-size: 21px !important; }
}
@media (min-width: 1536px) {
  html[lang="en"] .shary-home-root .sh-hero .sh-pills { gap: 8px; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { font-size: 15px; padding: 0 15px !important; }
}

/* ---- دايرة البحث الكحلي في بحث الرئيسية: زرار — الماوس عليها إيد والضغط عليها بيبحث (js/shary/site-chrome.js) ---- */
.search-input-icon { cursor: pointer; pointer-events: auto; transition: background-color 0.15s, transform 0.15s; }
.search-input-icon:hover { background: #0d5a8a; }

/* ---- ديسك توب: بوكس البحث في الرئيسية — التبويبات (جميع العقارات / للبيع / للإيجار) واختيارات (الكل / من المطور / إعادة بيع / مفروش / غير مفروش)
   وعناوين الفلاتر وأزرار البحث: بولد وبمقاس واضح مريح للعين (عربي وإنجليزي) ---- */
@media (min-width: 1024px) {
  .shary-home-root .property-search-tabs { height: auto; gap: 8px; margin-bottom: 12px; }
  .shary-home-root .search-tab { height: 42px; padding: 0 18px; gap: 6px; font-size: 16.5px; font-weight: 800; }
  .shary-home-root .search-tab-icon { width: 24px; height: 24px; }
  .shary-home-root .search-tab-icon svg { width: 22px; height: 22px; }
  .shary-home-root .property-search-row { height: 48px; }
  .shary-home-root .property-status-filter { height: 48px; padding: 4px; }
  .shary-home-root .property-status { height: 40px; padding: 0 15px; font-size: 16px; font-weight: 800; }
  .shary-home-root .property-search-input, .shary-home-root .property-search-input input { height: 48px; }
  .shary-home-root .property-search-input input { font-size: 16px; font-weight: 700; }
  .shary-home-root .property-search-input input::placeholder { font-weight: 600; }
  .shary-home-root .desktop-filters { height: auto; }
  .shary-home-root .desktop-filters > * { height: 50px; }
  .shary-home-root .desktop-filters > * > button, .shary-home-root .desktop-filters > button { height: 50px; }
  .shary-home-root .desktop-filters > * > button span, .shary-home-root .desktop-filters > * > button { font-size: 16px; font-weight: 700; }
  .shary-home-root .advanced-search-btn, .shary-home-root .property-search-btn { height: 50px; font-size: 16.5px; font-weight: 800; }
  /* البوكس أطول بنفس الزيادة — وفاضل نصه نازل تحت صورة الهيرو زي ما هو */
  .shary-home-root .property-search-box { height: 222px !important; bottom: -111px !important; }
  .shary-home-root .market-ticker-section { margin-top: 92px !important; }
}

/* ---- قسم "شاري معاك": القسم كله بيفتح تحميل التطبيق — الماوس عليه (التليفون وأي مكان) إيد ---- */
.sh-hero[onclick], .sh-hero[onclick] * { cursor: pointer; }

/* ---- "شاري معاك" بالعربي على لابتوب 1200 – 1349 (الموقع مكبّر 110% فالمساحة أقل): الكبسولات درجة أصغر عشان التلاتة يفضلوا صف واحد قبل التليفون (ar-pills-mid) ---- */
@media (min-width: 1200px) and (max-width: 1349px) {
  html[lang="ar"] .shary-home-root .sh-hero .sh-pills { gap: 9px; }
  html[lang="ar"] .shary-home-root .sh-hero .sh-pill { height: 46px; font-size: 16px; padding: 0 17px !important; }
}

/* ---- "شاري معاك" (ديسك توب) — الكبسولات التلاتة أتخن (أطول لتحت) وبولد (pills-tall):
   عربي: أتخن وأعرض سِنّة. إنجليزي: الخط زي ما هو (عشان ما تدخلش ورا التليفون) بس الكبسولة نفسها أتخن وباينة ---- */
@media (min-width: 960px) {
  .shary-home-root .sh-hero .sh-pill { font-weight: 800 !important; }
  html[lang="ar"] .shary-home-root .sh-hero .sh-pills { gap: 11px; }
  html[lang="ar"] .shary-home-root .sh-hero .sh-pill { height: 58px; border-radius: 29px; font-size: 17.5px; padding: 0 23px !important; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pills { gap: 7px; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { height: 52px; border-radius: 26px; font-size: 14.5px; padding: 0 13px !important; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  html[lang="ar"] .shary-home-root .sh-hero .sh-pills { gap: 9px; }
  html[lang="ar"] .shary-home-root .sh-hero .sh-pill { height: 52px; border-radius: 26px; font-size: 16.5px; padding: 0 19px !important; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { height: 48px; border-radius: 24px; font-size: 13.5px; padding: 0 11px !important; }
}
@media (min-width: 1536px) {
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { font-size: 13.5px; padding: 0 11px !important; }
}

/* ---- بحث الرئيسية (ديسك توب): أسهم القوايم (نوع العقار / الغرف والحمامات / نطاق السعر) أكبر وأغمق وفي نص الخانة (filter-arrows-big) ---- */
@media (min-width: 1024px) {
  .property-search-box .filter-arrow { top: 50%; inset-inline-end: 14px; display: flex; height: 28px; width: 28px; align-items: center; justify-content: center; transform: translateY(-50%); }
  .property-search-box .filter-arrow svg { height: 28px; width: 28px; flex: none; }
  .property-search-box .filter-arrow svg path[fill="#777"] { fill: #123a5c; }
}

/* ---- كروت الرئيسية (عروض حصرية / خريطة مصر / خريطة الساحل / شاري كارد) على الديسك توب: الكارت أعرض سِنّة (promo-wide)
   عشان زرار «استكشف الخريطة» ياخد راحته وما يلمسش رسمة الخريطة — والزرار دايمًا سطر واحد وفوق الرسمة ---- */
@media (min-width: 960px) {
  .shary-home-root .investment-promo-card { width: 362px; flex: 0 0 362px; }
  .investment-promo-card.promo-map, .investment-promo-card.promo-sahel-map { grid-template-columns: minmax(0, 1fr) 104px; column-gap: 14px; }
  .investment-promo-card.promo-map .promo-icon, .investment-promo-card.promo-sahel-map .promo-icon { width: 104px; height: 104px; }
  .investment-promo-card .promo-button { position: relative; z-index: 3; white-space: nowrap; }
}

/* ---- زرار «بحث متقدم» في بحث الرئيسية: علامة التلات شُرط في نفس مكانها (يمين الكلمة) في اللغتين — تغيير اللغة بيغيّر الترجمة بس (adv-icon-same-side) ---- */
html[lang="en"] .advanced-search-btn { flex-direction: row-reverse; }

/* ---- فورم طلب المقابلة في الرئيسية: من غير تغميق ورا الفورم (no-form-dim) ---- */
.shary-home-root #zoomMeetingStatic, #zoomMeetingStatic { background-color: transparent !important; }
#zoomMeetingStatic > div { box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 10px 50px -10px rgba(18, 58, 92, 0.4) !important; }

/* ---- كروت «ما يميزنا» (متابعة الأقساط / العروض الحصرية / فرص إعادة البيع ...): الاسم على سطرين تحت بعض في نص الكارت (shortcut-two-lines) ---- */
/* الاسم: كلمتين جنب بعض في سطر واحد ، 3 كلمات = كلمتين فوق وكلمة تحت (التقسيم من الصفحة). لو السطر أعرض من الكارت بينزل لوحده — ما بيلمسش الأطراف */
.investment-shortcut .investment-shortcut-label { display: flex; min-height: 2.7em; align-items: center; justify-content: center; padding-inline: 10px; text-align: center; line-height: 1.35; white-space: normal; }
.investment-shortcut .investment-shortcut-label > span { display: block; max-width: 100%; min-height: 0; margin: 0; padding: 0; font: inherit; line-height: inherit; color: inherit; overflow-wrap: break-word; }

/* ---- آخر الرئيسية على الديسك توب من غير تكبير (home-bottom-unzoom): قسم «شاري معاك» (التليفون) وفورم التواصل اللي تحته بمقاسهم العادي 100% —
   التكبير 110% على الداتا والمحتوى اللي فوق بس (والفوتر كمان 100% — app.css). ‎--unz = 1 / ‎--z ، و‎--z: 1 جوه القسمين عشان مقاسات vw تتحسب صح ---- */
@media (min-width: 1024px) {
  .shary-home-root .sh-hero, .shary-home-root #contact.contact-section { zoom: var(--unz, 1); --z: 1; }
}

/* ---- ديسك توب: حركة خفيفة لما الماوس ييجي على الكروت (home-card-hover) — زي كروت المناطق:
   كروت «ما يميزنا» ، كروت العروض / خريطة مصر / خريطة الساحل / شاري كارد ، «بيع عقارك» و«أجّر عقارك» ، ولوجوهات المطورين.
   الكارت بيطلع لفوق سِنّة وظله بيكبر. الصفوف اللي بتتحرك أخدت مسافة فوق وتحت عشان الكارت ما يتقصّش وهو طالع ---- */
@media (hover: hover) and (min-width: 1024px) {
  .investment-shortcut, .investment-promo-card, .sell-rent-cards, .developer-card { transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease; will-change: transform; }
  .investment-shortcuts a:hover .investment-shortcut,
  .investment-promo-card:hover,
  .sell-rent-cards:hover { transform: translateY(-5px); box-shadow: 0 14px 26px -12px rgba(0, 50, 70, 0.32); }
  .developer-card:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 20px -8px rgba(0, 50, 70, 0.32); }
  .home-area-card:hover { transform: translateY(-5px); box-shadow: 0 12px 22px -10px rgba(0, 50, 70, 0.28); }
  .horizontal-scroll.investment-shortcuts,
  .horizontal-scroll.developers-carousel,
  .horizontal-scroll.areas-carousel { padding-top: 10px; margin-top: -10px; padding-bottom: 14px; margin-bottom: -14px; }
  .horizontal-scroll.investment-promo-carousel { padding-top: 10px; }
}

/* ---- كروت «ما يميزنا» على الديسك توب (tiles-desktop-slide): 8 كروت بعرض الصفحة بالظبط — ولو الكروت أكتر من 8 الصف بيتحرك لوحده يمين وشمال
   زي الموبايل (السكربت في home/index) وبيقف والماوس فوق الكروت ---- */
@media (min-width: 1024px) {
  .investment-shortcuts > a { flex: 0 0 calc((100% - 112px) / 8); min-width: 0; }
  .investment-shortcuts > a > .investment-shortcut { width: 100%; min-width: 0; flex: none; }
  .investment-shortcut .investment-shortcut-label { white-space: normal; padding-inline: 4px; }
}

/* ---- قسم «شاري معاك» وفورم «تحتاج استشارة عقارية؟» على شاشات اللابتوب القصيرة (home-bottom-fit): بمقاس أهدى عشان القسم يبان كله في الشاشة
   من غير ما يبقى كبير ومالي الشاشة. المقاس بيتحدد على ارتفاع الشاشة — الشاشات الطويلة زي ما هي ---- */
@media (min-width: 1024px) and (max-height: 780px) {
  .shary-home-root .sh-hero { zoom: 0.92; }
  .shary-home-root #contact.contact-section { zoom: 0.84; }
}
@media (min-width: 1024px) and (max-height: 680px) {
  .shary-home-root .sh-hero { zoom: 0.86; }
  .shary-home-root #contact.contact-section { zoom: 0.74; }
}
@media (min-width: 1024px) and (max-height: 590px) {
  .shary-home-root .sh-hero { zoom: 0.78; }
  .shary-home-root #contact.contact-section { zoom: 0.66; }
}

/* ---- «شاري معاك» — الكبسولات التلاتة (الصفرا / الكحلي / التركواز) أكبر وكلامها باين (pills-big). باقي القسم بمقاساته زي ما هو.
   عربي وإنجليزي بنفس الارتفاع ؛ خط الإنجليزي على قد ما التلاتة يفضلوا صف واحد قبل التليفون ---- */
@media (min-width: 960px) {
  html[lang="ar"] .shary-home-root .sh-hero .sh-pills { gap: 11px; }
  html[lang="ar"] .shary-home-root .sh-hero .sh-pill { height: 62px; border-radius: 31px; font-size: 21px; padding: 0 22px !important; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pills { gap: 8px; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { height: 62px; border-radius: 31px; font-size: 15px; padding: 0 11px !important; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  html[lang="ar"] .shary-home-root .sh-hero .sh-pill { height: 54px; border-radius: 27px; font-size: 18px; padding: 0 18px !important; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { height: 54px; border-radius: 27px; font-size: 13.5px; padding: 0 11px !important; }
}
@media (min-width: 1536px) {
  html[lang="ar"] .shary-home-root .sh-hero .sh-pill { font-size: 20px; padding: 0 19px !important; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { font-size: 13.8px; padding: 0 10px !important; }
}

/* ---- نفس الكبسولات على شاشات اللابتوب القصيرة (ارتفاع ≤ 700px) — (pills-big-short): القسم هناك مضغوط والكبسولات كانت 30px بخط 12px ،
   بقت أكبر وكلامها باين ، عربي وإنجليزي بنفس الارتفاع ---- */
@media (min-width: 960px) and (max-height: 700px) {
  html[lang="ar"] .shary-home-root .sh-hero .sh-pill { height: 48px !important; border-radius: 24px; font-size: 18px !important; padding: 0 20px !important; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { height: 48px !important; border-radius: 24px; font-size: 14.5px !important; padding: 0 11px !important; }
}
@media (min-width: 960px) and (max-width: 1199px) and (max-height: 700px) {
  html[lang="ar"] .shary-home-root .sh-hero .sh-pill { height: 44px !important; font-size: 16px !important; padding: 0 15px !important; }
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { height: 44px !important; font-size: 13px !important; padding: 0 10px !important; }
}
@media (min-width: 1536px) and (max-height: 700px) {
  html[lang="en"] .shary-home-root .sh-hero .sh-pill { font-size: 13.5px !important; padding: 0 10px !important; }
}

/* ---- كروت الرئيسية: الصور والألوان من لوحة التحكم (شاري ← كروت الصفحة الرئيسية) ----
   has-art   = «صورة الكارت» مرفوعة: بتتحط مكان الرسمة الجاهزة بنفس مكانها ومقاسها (img.promo-art-img)
   has-photo = «صورة خلفية للكارت كله»: الصورة ورا الكارت وفوقها تدرّج أبيض ناحية الكلام عشان يفضل مقروء (--promo-photo)
   promo-custom = الشكل «كارت بصورتي»: نفس تقسيمة باقي الكروت (عنوان + زرار في ناحية ، الصورة في الناحية التانية) ، لون الخلفية --promo-tint ولون الزرار --promo-btn
   كارت من غير صور ولا ألوان = زي ما هو بالظبط. */
.investment-promo-card .promo-icon img.promo-art-img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; border-radius: 22%; box-shadow: 0 8px 16px -11px rgba(18, 58, 92, .55); }
.shary-home-root .investment-promo-card.promo-card-shary .promo-icon { grid-area: art; width: 66px; height: 66px; flex: none; align-self: center; justify-self: end; }
.investment-promo-card.has-photo, .shary-home-root .investment-promo-card.has-photo { background-image: linear-gradient(to left, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 46%, rgba(255, 255, 255, .2) 78%, rgba(255, 255, 255, 0) 100%), var(--promo-photo) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
[dir="ltr"] .investment-promo-card.has-photo, [dir="ltr"] .shary-home-root .investment-promo-card.has-photo { background-image: linear-gradient(to right, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 46%, rgba(255, 255, 255, .2) 78%, rgba(255, 255, 255, 0) 100%), var(--promo-photo) !important; }

.investment-promo-card.promo-custom { display: grid; grid-template-columns: minmax(0, 1fr) 66px; grid-template-areas: "title art" "cta cta"; align-items: center; column-gap: 8px; row-gap: 8px; padding: 10px 14px 11px; border: 1px solid #d3dfee; background: linear-gradient(to left, #fff 0%, #fff 30%, var(--promo-tint, #dbe9f8) 100%); box-shadow: 0 10px 22px -18px rgba(18, 58, 92, .45); filter: none; color: #123a5c; }
[dir="ltr"] .investment-promo-card.promo-custom { background: linear-gradient(to right, #fff 0%, #fff 30%, var(--promo-tint, #dbe9f8) 100%); }
.promo-custom .promo-card-content { display: contents; }
.investment-promo-card.promo-custom .promo-title { grid-area: title; display: flex; flex-direction: column !important; align-items: flex-start !important; align-self: center; justify-content: flex-start; gap: 0 !important; height: auto; margin: 0; padding: 0; text-align: start; }
.investment-promo-card.promo-custom .promo-title h3 { margin: 0; padding: 0; font-size: 19px; font-weight: 800; line-height: 1.25; white-space: normal; color: inherit; }
.investment-promo-card.promo-custom .promo-title h3 + h3 { color: #1f9a8c; }
.investment-promo-card.promo-custom .promo-icon { grid-area: art; width: 66px; height: 66px; flex: none; align-self: center; }
.investment-promo-card.promo-custom .promo-button { grid-area: cta; align-self: end; justify-self: start; width: auto; max-width: 100%; height: 28px; gap: 4px; padding: 0 13px 0 8px; background: var(--promo-btn, #1e4166); font-size: 12px; font-weight: 800; color: #fff; box-shadow: none; white-space: nowrap; }
[dir="ltr"] .investment-promo-card.promo-custom .promo-button { flex-direction: row-reverse; padding: 0 8px 0 13px; }
[dir="ltr"] .promo-custom .promo-trend-arrow { transform: scaleX(-1); }
.promo-custom .promo-button::before { display: none; }
.promo-custom .promo-trend-arrow { flex: none; }
@media (min-width: 960px) {
  .investment-promo-card.promo-custom { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "title art" "cta art"; column-gap: 10px; row-gap: 12px; padding: 14px 18px; }
  .investment-promo-card.promo-custom .promo-title { align-self: end; }
  .investment-promo-card.promo-custom .promo-title h3 { font-size: 23px; }
  .investment-promo-card.promo-custom .promo-icon { width: 112px; height: 112px; }
  .investment-promo-card.promo-custom .promo-button { align-self: start; height: 34px; gap: 5px; padding: 0 15px 0 10px; font-size: 13.5px; }
  [dir="ltr"] .investment-promo-card.promo-custom .promo-button { padding: 0 10px 0 15px; }
  .shary-home-root .investment-promo-card.promo-card-shary.has-art { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "title art" "cta art"; column-gap: 10px; row-gap: 12px; padding: 14px 18px; }
  .shary-home-root .investment-promo-card.promo-card-shary.has-art .promo-title { align-self: end; }
  .shary-home-root .investment-promo-card.promo-card-shary.has-art .promo-button { align-self: start; }
  .shary-home-root .investment-promo-card.promo-card-shary .promo-icon { width: 112px; height: 112px; }
}
/* has-design = «تصميم الكارت كامل»: الصورة المرفوعة هي الكارت نفسه (من غير كلام فوقها) — الكارت كله بيفتح اللينك */
/* (.has-design مكررة و [dir] قدامها: عشان تكسب على قواعد خلفية كل شكل في النسخة الإنجليزي — [dir="ltr"] .shary-home-root .promo-card-shary …) */
.investment-promo-card.has-design, .shary-home-root .investment-promo-card.has-design, [dir] .investment-promo-card.has-design.has-design, [dir] .shary-home-root .investment-promo-card.has-design.has-design { border-color: transparent; background: var(--promo-photo) center / cover no-repeat !important; cursor: pointer; }
.investment-promo-card.has-design .promo-title, .investment-promo-card.has-design .promo-icon, .investment-promo-card.has-design .shary-promo-icon, .investment-promo-card.has-design .promo-button { opacity: 0 !important; }
/* صورة الموبايل (اختياري): الكارت على الموبايل أقل عرضًا — من غيرها نفس الصورة بتتقص من الجناب */
@media (max-width: 959px) {
  .investment-promo-card.has-design, .shary-home-root .investment-promo-card.has-design, [dir] .investment-promo-card.has-design.has-design, [dir] .shary-home-root .investment-promo-card.has-design.has-design { background-image: var(--promo-photo-m, var(--promo-photo)) !important; }
  .investment-promo-card.has-photo, .shary-home-root .investment-promo-card.has-photo { background-image: linear-gradient(to left, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 46%, rgba(255, 255, 255, .2) 78%, rgba(255, 255, 255, 0) 100%), var(--promo-photo-m, var(--promo-photo)) !important; }
  [dir="ltr"] .investment-promo-card.has-photo, [dir="ltr"] .shary-home-root .investment-promo-card.has-photo { background-image: linear-gradient(to right, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 46%, rgba(255, 255, 255, .2) 78%, rgba(255, 255, 255, 0) 100%), var(--promo-photo-m, var(--promo-photo)) !important; }
}

/* ---- أحدث المشاريع: "اسم المشروع – المطور" وتحته مكان المشروع على الصورة (تحت) — الاسم كامل من غير نقط ، بولد وواضح */
.new-project-card { align-items: flex-end; }
.new-project-caption {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 3; pointer-events: none;
  padding: 34px 14px 12px;
  background: linear-gradient(to top, rgba(8, 24, 42, .78) 0%, rgba(8, 24, 42, .42) 58%, rgba(8, 24, 42, 0) 100%);
  text-align: start; color: #fff;
}
.new-project-caption__name { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 800; color: #fff; white-space: normal; overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.new-project-caption__name span { font-weight: 700; color: rgba(255,255,255,.92); }
.new-project-caption__place { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 1.5; font-weight: 700; color: rgba(255,255,255,.95); white-space: normal; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.new-project-caption__place svg { flex: 0 0 auto; }
@media (max-width: 640px) {
  .new-project-caption { padding: 28px 11px 10px; }
  .new-project-caption__name { font-size: 15px; }
  .new-project-caption__place { font-size: 12.5px; }
}

/* ---- أحدث المشاريع: الصورة نضيفة من غير طبقة سودا على الكارت
   ديسكتوب: الاسم والمكان على الصورة بظل خفيف بس — الخلفية الغامقة بتظهر لما الماوس ييجي على الكارت ، ورا الكلام بس (مش على الكارت كله).
   موبايل / تابلت (مفيش ماوس): الاسم والمكان على الصورة برضه ، وظل ناعم ورا الكلمة بس. */
.new-projects-track .new-project-card .new-project-content { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.new-projects-track .new-project-card::before { display: none; }
.new-projects-track .new-project-card:hover { filter: none; }
.new-projects-track .new-project-caption { background: none; padding: 0; inset-inline: 10px; bottom: 10px; }
.new-projects-track .new-project-caption__name,
.new-projects-track .new-project-caption__place {
  width: fit-content; max-width: 100%; box-sizing: border-box;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .35);
}
.new-projects-track .new-project-caption__inner {
  position: relative; isolation: isolate; display: inline-block; max-width: 100%; padding: 6px 10px;
}
/* نفس كروت "أفضل الكمبوندات" وصفحة المشاريع: الكلام على الصورة بظل خفيف — ظل ناعم ورا الكلمة بس (مش على الكارت كله) */
.new-projects-track .new-project-caption__inner::before {
  content: ""; position: absolute; inset: 2px 0 4px; z-index: -1; border-radius: 999px;
  background-color: rgba(4, 31, 56, .44); filter: blur(14px); opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.new-projects-track .new-project-caption__name,
.new-projects-track .new-project-caption__place { text-shadow: 0 1px 2px rgba(4, 31, 56, .85), 0 0 12px rgba(4, 31, 56, .6); }
@media (hover: hover) and (min-width: 1024px) {
  .new-projects-track .new-project-card { flex-basis: 460px; width: 460px; height: 230px; background-size: cover !important; background-position: center !important; }
  .new-projects-track .new-project-card:hover .new-project-caption__inner::before { opacity: 1; }
}
@media (max-width: 1023px), (hover: none) {
  /* موبايل (مفيش ماوس): الظل الناعم ورا الكلمة ظاهر على طول — والصورة نفسها من غير تغميق */
  .new-projects-track .new-project-caption { inset-inline: 6px; bottom: 6px; }
  .new-projects-track .new-project-caption__inner::before { opacity: .85; }
}

/* ---- كروت المشاريع الجديدة (الرئيسية + "عرض الكل"): "اسم المشروع – المطور" سطر واحد دايمًا (الخط بيصغر لوحده لو الاسم طويل — من غير نقط) ، وتحته المكان */
.new-project-caption__name[data-fit-line] { white-space: nowrap !important; overflow-wrap: normal !important; max-width: 100%; }


/* ---- New Launches بمقاس كارت الصفحة القديمة: كارت عريض (668×448) — موبايل كارت واحد بعرض الصفحة ، تابلت وديسكتوب كارتين — وأسهم يمين وشمال ونقط تحت */
.np-stage { position: relative; }
.new-projects-carousel { container-type: inline-size; scroll-snap-type: x mandatory; }
.new-projects-track .new-project-card { flex: 0 0 100cqw !important; width: 100cqw !important; height: auto !important; aspect-ratio: 668 / 448; border-radius: 16px; scroll-snap-align: center; }
@media (min-width: 641px) { .new-projects-track .new-project-card { flex-basis: calc((100cqw - 10px) / 2) !important; width: calc((100cqw - 10px) / 2) !important; } }
.np-arrow { position: absolute; top: 50%; z-index: 5; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 50%; background: rgba(13, 30, 48, .45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.np-arrow:hover { background: rgba(13, 30, 48, .7); }
.np-arrow--right { right: 10px; }
.np-arrow--left { left: 10px; }
.new-projects-pagination span { width: 6px; height: 6px; }
.new-projects-pagination span.active { width: 18px; }

/* ---- كارت "عندك وحدة؟" (بيع / أجّر في كارت واحد) — كحلي شاري وتركواز اللوجو */
.own-unit-card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 22px; background: #1E4266; color: #fff; }
.own-unit-card__icon { flex: none; width: 60px; height: 60px; border-radius: 18px; background: #4CBFB2; color: #fff; display: flex; align-items: center; justify-content: center; }
.own-unit-card__body { min-width: 0; }
.own-unit-card__title { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 800; color: #fff; }
.own-unit-card__text { margin: 2px 0 12px; font-size: 13px; line-height: 1.6; font-weight: 700; color: #c3d3e6; }
.own-unit-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.own-unit-card__btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 800; color: #fff; border: 1px solid rgba(255, 255, 255, .45); text-decoration: none; white-space: nowrap; }
.own-unit-card__btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.own-unit-card__btn--main { background: #4CBFB2; border-color: #4CBFB2; }
.own-unit-card__btn--main:hover { background: #3faea2; }
@media (min-width: 1024px) {
  .own-unit-card { padding: 28px 36px; gap: 24px; }
  .own-unit-card__icon { width: 76px; height: 76px; border-radius: 22px; }
  .own-unit-card__icon svg { width: 34px; height: 34px; }
  .own-unit-card__title { font-size: 26px; }
  .own-unit-card__text { font-size: 15px; }
  .own-unit-card__btn { padding: 10px 26px; font-size: 16px; }
}
@media (min-width: 1024px) {
  .own-unit-card__body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .own-unit-card__text { margin-bottom: 0; }
  .own-unit-card__actions { flex: none; }
}

/* ---- "عندك وحدة؟" كارت مستطيل بسيط: الزرارين جنب بعض دايمًا (بيع تركواز ، أجّر أصفر اللوجو) */
.own-unit-card { padding: 14px 16px; gap: 12px; border-radius: 18px; }
.own-unit-card__icon { width: 46px; height: 46px; border-radius: 14px; }
.own-unit-card__icon svg { width: 22px; height: 22px; }
.own-unit-card__body { flex: 1; }
.own-unit-card__title { font-size: 17px; }
.own-unit-card__text { margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
.own-unit-card__actions { flex-wrap: nowrap; gap: 8px; }
.own-unit-card__btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 13.5px; border: 0; border-radius: 12px; transition: filter .2s ease, transform .2s ease; }
.own-unit-card__btn--main, .own-unit-card__btn--main:hover { background: #4CBFB2; color: #fff; }
.own-unit-card__btn--rent, .own-unit-card__btn--rent:hover { background: #FCB424; color: #1E4266; }
.own-unit-card__btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
@media (min-width: 1024px) {
  .own-unit-card { padding: 22px 32px; }
  .own-unit-card__icon { width: 64px; height: 64px; border-radius: 18px; }
  .own-unit-card__icon svg { width: 30px; height: 30px; }
  .own-unit-card__title { font-size: 24px; }
  .own-unit-card__text { margin: 2px 0 0; font-size: 15px; }
  .own-unit-card__actions { flex: 0 0 380px; }
  .own-unit-card__btn { padding: 11px 10px; font-size: 16px; }
}

/* ---- "عندك وحدة؟": نفس شكل الريفرنس (زراير بيضاوية جنب بعض) — بيع تركواز ، أجّر أصفر اللوجو ، ولما يضغط اللون بيتغير */
.own-unit-card { padding: 16px 18px; gap: 14px; border-radius: 22px; }
.own-unit-card__icon { width: 54px; height: 54px; border-radius: 16px; }
.own-unit-card__icon svg { width: 26px; height: 26px; }
.own-unit-card__btn { border-radius: 999px; padding: 8px 8px; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.own-unit-card__btn:hover { filter: none; transform: none; }
.own-unit-card__btn--main { background: #4CBFB2; color: #fff; }
.own-unit-card__btn--main:hover { background: #3faea2; color: #fff; }
.own-unit-card__btn--main:active { background: #2e8f84; color: #fff; transform: scale(.96); }
.own-unit-card__btn--rent { background: #FCB424; color: #1E4266; }
.own-unit-card__btn--rent:hover { background: #f0a512; color: #1E4266; }
.own-unit-card__btn--rent:active { background: #d98f00; color: #fff; transform: scale(.96); }
@media (min-width: 1024px) { .own-unit-card { padding: 22px 32px; } .own-unit-card__btn { padding: 11px 10px; } }

/* ---- زراير "عندك وحدة؟" متحركة عشان تشد للضغط: لمعة بتعدي عليهم + نبضة خفيفة (بالتناوب) — وبتقف لو الجهاز طالب حركة أقل */
.own-unit-card__btn { position: relative; overflow: hidden; isolation: isolate; animation: ownUnitPulse 2.6s ease-in-out infinite; }
.own-unit-card__btn--rent { animation-delay: 1.3s; }
.own-unit-card__btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%); transform: skewX(-20deg); animation: ownUnitShine 2.6s ease-in-out infinite; pointer-events: none; }
.own-unit-card__btn--rent::after { animation-delay: 1.3s; }
.own-unit-card__btn:active { animation: none; }
@keyframes ownUnitShine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
@keyframes ownUnitPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 20% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); } 40% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .own-unit-card__btn, .own-unit-card__btn::after { animation: none; } }

/* ---- New Launches: من غير النقط اللي تحت (الأسهم كفاية) ، والكارت أوطى شوية */
#newProjectsPagination { display: none !important; }
.new-projects-track .new-project-card { aspect-ratio: 16 / 9; }

/* ---- New Launches: الأسهم برّه الكارت على الجنبين (مش فوق الصورة) — سهم واحد في الاتجاه اللي فيه مشاريع (في الأول سهم "التالي" بس) ،
   والكارت مش متضلّم: ظل خفيف ورا الكلام بس */
.np-arrow { display: none !important; }
.np-stage .horizontal-carousel-wrapper { padding-inline: 34px; }
.np-stage .horizontal-carousel-btn { width: 28px; height: 28px; background: #fff; color: #1E4266; border: 1px solid #d9e2ec; box-shadow: 0 2px 6px rgba(18, 58, 92, .12); }
.np-stage .horizontal-carousel-btn:hover { background: #eef3f8; }
.np-stage .horizontal-carousel-btn svg { width: 16px; height: 16px; stroke-width: 2.6; }
.np-stage .horizontal-carousel-btn.prev { inset-inline-start: 0; inset-inline-end: auto; }
.np-stage .horizontal-carousel-btn.next { inset-inline-end: 0; inset-inline-start: auto; }
@media (min-width: 1024px) { .np-stage .horizontal-carousel-wrapper { padding-inline: 46px; } .np-stage .horizontal-carousel-btn { width: 38px; height: 38px; } }
.new-projects-track .new-project-card, .new-projects-track .new-project-card.active, .new-projects-track .new-project-card:hover { filter: none !important; }
.new-projects-track .new-project-caption__inner::before { background-color: rgba(4, 31, 56, .22) !important; filter: blur(10px) !important; opacity: 1 !important; inset: 6px 4px 8px !important; }
.new-projects-track .new-project-caption__name, .new-projects-track .new-project-caption__place { text-shadow: 0 1px 3px rgba(0, 0, 0, .5) !important; }
.own-unit-card { cursor: pointer; }

/* ---- New Launches (تاني): الكارت بعرض الشاشة زي الأول — والسهمين على الكارت نفسه يمين وشمال بشكل شيك (دايرة بيضا شفافة وسهم كحلي) ،
   سهم واحد في الاتجاه اللي فيه مشاريع */
.np-stage .horizontal-carousel-wrapper { padding-inline: 0 !important; }
.np-stage .horizontal-carousel-btn { width: 36px !important; height: 36px !important; border: 0 !important; background: rgba(255, 255, 255, .88) !important; color: #1E4266 !important; box-shadow: 0 4px 14px rgba(13, 30, 48, .25) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.np-stage .horizontal-carousel-btn:hover { background: #fff !important; }
.np-stage .horizontal-carousel-btn svg { width: 18px !important; height: 18px !important; stroke-width: 2.8 !important; }
.np-stage .horizontal-carousel-btn.prev { inset-inline-start: 10px !important; }
.np-stage .horizontal-carousel-btn.next { inset-inline-end: 10px !important; }
@media (min-width: 1024px) { .np-stage .horizontal-carousel-wrapper { padding-inline: 0 !important; } .np-stage .horizontal-carousel-btn { width: 44px !important; height: 44px !important; } .np-stage .horizontal-carousel-btn.prev { inset-inline-start: 14px !important; } .np-stage .horizontal-carousel-btn.next { inset-inline-end: 14px !important; } }

/* «مشروع جديد» على كارت المشاريع الجديدة في الرئيسية: نفس الشارة اللي جوه (لون الشارة الأخضر) بخط صغير */
.new-project-badge { height: auto; padding: 3px 9px; background: #4CBFB2; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.4; backdrop-filter: none; }

/* الوحدات المقترحة: نفس كارت الوحدة اللي جوه الموقع — عرض ثابت في الشريط */
.home-unit-slot { flex: 0 0 auto; width: min(340px, 86vw); display: flex; }
.home-unit-slot > article { width: 100%; }
@media (min-width: 1024px) { .home-unit-slot { width: 340px; } }

/* ===== مشاريع تستحق الاستكشاف (بدل «أفضل الكمبوندات») — زي الريفرنس: صورة فوق + الاسم و«استكشف المشاريع» تحت ===== */
.shary-home-root .home-explore__all { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: #1F7F72; text-decoration: none; }
.shary-home-root .home-explore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shary-home-root .home-explore__card { display: flex; flex-direction: column; border: 1.5px solid #D5EEEB; border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.shary-home-root .home-explore__card:hover { transform: translateY(-3px); border-color: #4CBFB2; box-shadow: 0 18px 34px -24px rgba(18, 58, 92, .55); }
.shary-home-root .home-explore__pic { position: relative; display: block; aspect-ratio: 16 / 10.5; background: linear-gradient(135deg, #EAF7F5, #D5EEEB); overflow: hidden; }
.shary-home-root .home-explore__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shary-home-root .home-explore__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; }
.shary-home-root .home-explore__body b { font-size: 20px; font-weight: 900; color: #1E4266; }
.shary-home-root .home-explore__go { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: #1F7F72; }
@media (max-width: 767px) {
  .shary-home-root .home-explore__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; }
  .shary-home-root .home-explore__card { flex: 0 0 78%; scroll-snap-align: start; }
  .shary-home-root .home-explore__body b { font-size: 18px; }
}
.shary-home-root .home-explore__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* «عرض الكل» جوه كروت «مشاريع تستحق الاستكشاف»: نفس شكل «عرض الكل» في باقي الأقسام (كحلي + خط تحت ، من غير سهم) */
.shary-home-root .home-explore__go { color: #2C6386; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* لوجو المطور في الهوم: دايرة واحدة + ظل خفيف — ولو له ستوري دايرة تركواز */
.developer-card{box-shadow:0 6px 14px -5px rgba(18,58,92,.30),0 1px 3px rgba(18,58,92,.10)}
.developer-card[data-story]{box-shadow:0 0 0 2px #fff,0 0 0 4.5px #17a398,0 8px 16px -6px rgba(18,58,92,.32)}

/* تحت كل كارت في «مشاريع تستحق الاستكشاف»: «استكشف المشاريع ←» أو «استكشف الوحدات ←» بالتركواز (زي الأول) — «عرض الكل» بتاع القسم فوق بس */
.shary-home-root .home-explore__go { color: #1F7F72; font-size: 15px; font-weight: 800; text-decoration: none; }

/* عناوين أقسام الهوم كلها (ما يميزنا · أحدث المشاريع · أفضل المطورين · مشاريع تستحق الاستكشاف · أفضل المناطق · وحدات مقترحة · شاري معاك): كحلي شاري بولد */
.shary-home-root .headline-2,.shary-home-root .sh-title{color:#1E4266!important;font-weight:800!important}


/* ===== سلايدر الرئيسية الجديد: جملة شاري الثابتة + كارت «مشاريع مميزة» على الشمال (من غير أسهم ومن غير عدّاد) ===== */
.shary-home-root .hero-counter { display: none !important; }
.shary-home-root .hero-image-placeholder::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to left, rgba(12, 34, 58, .38) 0%, rgba(12, 34, 58, .16) 34%, rgba(12, 34, 58, 0) 56%), linear-gradient(to top, rgba(12, 34, 58, .2), rgba(12, 34, 58, 0) 32%); }   /* خفيف: ألوان الصورة الحقيقية تفضل زي ما هي — والكلام مقروء بظله */
[dir="ltr"] .shary-home-root .hero-image-placeholder::after, .shary-home-root[dir="ltr"] .hero-image-placeholder::after { background: linear-gradient(to right, rgba(12, 34, 58, .38) 0%, rgba(12, 34, 58, .16) 34%, rgba(12, 34, 58, 0) 56%), linear-gradient(to top, rgba(12, 34, 58, .2), rgba(12, 34, 58, 0) 32%); }
.shary-home-root .hero-brand { text-align: start !important; pointer-events: none; }
.shary-home-root .hero-brand .hero-dots { pointer-events: auto; }
.shary-home-root .hero-brand__title { font-family: 'Cairo', 'Almarai', Tahoma, sans-serif !important; color: #fff !important; font-weight: 800 !important; letter-spacing: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35); margin: 0 !important; }
.shary-home-root .hero-brand__sub { font-family: 'Cairo', 'Almarai', Tahoma, sans-serif !important; color: rgba(255, 255, 255, .94) !important; font-weight: 700 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); }
.shary-home-root .hero-featured { font-family: 'Cairo', 'Almarai', Tahoma, sans-serif; position: absolute; z-index: 20; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; color: #fff;
  background: rgba(16, 38, 62, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45); transition: transform .2s ease, background .2s ease; }
.shary-home-root .hero-featured:hover { transform: translateY(-2px); background: rgba(16, 38, 62, .84); }
.shary-home-root .hero-featured__label { color: #4CBFB2; font-size: 12px; font-weight: 800; line-height: 1.3; }
.shary-home-root .hero-featured__name { color: #fff; font-size: 17px; font-weight: 900; line-height: 1.35; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .22s ease; }
.shary-home-root .hero-featured.is-swap .hero-featured__name { opacity: 0; }
.shary-home-root .hero-featured__btn:hover { background: #fff; color: #123A5C; }
.shary-home-root .hero-featured__btn { text-decoration: none !important; cursor: pointer; transition: background .2s, color .2s; display: inline-flex; align-items: center; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 999px; padding: 3px 14px; font-size: 13px; font-weight: 800; color: #fff; }

/* ديسك توب: الجملة على اليمين في نص الصورة تقريبًا ، والكارت تحت على الشمال خالص */
@media (min-width: 1024px) {
  /* أطول زي الريفرنس: الصورة واخدة مساحة أكبر فوق خانة البحث */
  .shary-home-root .hero-bg, .shary-home-root .hero-bg.hero-section, .shary-home-root .hero-section, .shary-home-root .hero-content { height: clamp(470px, calc(41vw / var(--z, 1)), 660px) !important; min-height: 0 !important; }
  .shary-home-root .hero-project-info.hero-brand { left: auto !important; right: max(5.5%, calc((100% - 1200px) / 2)) !important; transform: translateY(-50%) !important; width: min(640px, 50%) !important; top: calc((100% - var(--hero-over, 111px)) / 2) !important; bottom: auto !important; }
  [dir="ltr"] .shary-home-root .hero-project-info.hero-brand { right: auto !important; left: max(5.5%, calc((100% - 1200px) / 2)) !important; }
  .shary-home-root .hero-brand__title { font-size: clamp(30px, 2.7vw, 44px) !important; line-height: 1.25 !important; }
  .shary-home-root .hero-brand__sub { font-size: clamp(15px, 1.25vw, 20px) !important; line-height: 1.75 !important; margin-top: 12px !important; max-width: 16.5em; }
  .shary-home-root .hero-featured { left: 3%; bottom: calc(var(--hero-over, 111px) + 26px); padding: 14px 16px 14px; min-width: 150px; }
  [dir="ltr"] .shary-home-root .hero-featured { left: auto; right: 3%; align-items: flex-end; }
}
/* موبايل وتابلت: الجملة تحت على اليمين ، وتحتها شريط «مشاريع مميزة» صغير (سطر واحد) ، والنقط تحت خالص */
@media (max-width: 1023.98px) {
  .shary-home-root .hero-brand__title { font-size: clamp(20px, 5.6vw, 26px) !important; line-height: 1.3 !important; }
  .shary-home-root .hero-brand__sub { font-size: clamp(11.5px, 3.1vw, 14px) !important; line-height: 1.6 !important; margin-top: 4px !important; max-width: 100%; }
  .shary-home-root .hero-project-info.hero-brand { width: calc(100% - 32px) !important; top: auto !important; bottom: calc(var(--hero-over, 100px) + 52px) !important; }
  .shary-home-root .hero-featured { flex-direction: row; align-items: center; gap: 6px; right: 16px; left: auto; top: auto; bottom: calc(var(--hero-over, 100px) + 18px);
    padding: 5px 6px 5px 10px; border-radius: 999px; max-width: calc(100% - 32px); }
  [dir="ltr"] .shary-home-root .hero-featured { right: auto; left: 16px; padding: 5px 10px 5px 6px; }
  .shary-home-root .hero-featured__label { font-size: 11px; white-space: nowrap; }
  .shary-home-root .hero-featured__name { font-size: 12.5px; max-width: 46vw; }
  .shary-home-root .hero-featured__btn { font-size: 11px; padding: 2px 9px; white-space: nowrap; }
  .shary-home-root .hero-dots--free { bottom: calc(var(--hero-over, 100px) + 6px); }
}
.shary-home-root .hero-dots--free { position: absolute; left: 0; right: 0; z-index: 20; display: flex; justify-content: center; margin: 0 !important; pointer-events: auto; }
.shary-home-root .hero-dots--free { bottom: calc(var(--hero-over, 104px) + 12px); }

/* السرعة: الأقسام اللي تحت (برّه الشاشة) المتصفح ما يرسمهاش ولا يحسبها غير لما توصل لها — الشكل زي ما هو */
.shary-home-root .new-projects-section,
.shary-home-root .home-explore,
.shary-home-root .areas-section,
.shary-home-root .areas-container,
.shary-home-root .recommended-section,
.shary-home-root .sh-hero,
.shary-home-root .contact-section,
body:has(.shary-home-root) .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* مسافة فاضية (10px) كانت بتظهر بين الهيدر وصورة السلايدر: هامش عنصر جوه السلايدر كان بيطلع برّه (margin collapse) — السلايدر بيبدأ تحت الهيدر على طول */
.shary-home-root .hero-bg { display: flow-root; }
/* (كان في قوس «}» زيادة قبل قاعدة نقط السلايدر فالقاعدة كانت بتتشال — والنقط بتنزل جوه الصفحة وتعمل المسافة دي) — على الموبايل النقط مخفية زي ما كانت ظاهرة قبل كده (من غير ما تركب على «مشاريع مميزة») */
@media (max-width: 1023.98px) { .shary-home-root .hero-dots--free { display: none !important; } }
/* السرعة (نفس الشكل): لمعة أزرار «عندك وحدة؟» بـ transform بدل left */
@keyframes ownUnitShine { 0% { transform: translateX(0) skewX(-20deg); } 45%, 100% { transform: translateX(422%) skewX(-20deg); } }
/* السرعة: النوافذ المقفولة (ميتنج زووم ، قايمة المناطق) المتصفح ما بيحسبهاش ولا يرسمها لحد ما تتفتح — كانت بتتحسب مع كل فتحة للصفحة */
#zoomMeetingStatic.invisible, #location.invisible { content-visibility: hidden; }
/* صورة ثابتة / شريحة واحدة: مفيش نقط */
.shary-home-root .hero-dots--free[hidden] { display: none !important; }
/* السطر اللي تحت العنوان الكبير («اشتري، بيع، أجّر، شطّب، افرش مع شاري.») في سطر واحد على الكمبيوتر */
@media (min-width: 1024px) { .shary-home-root .hero-brand__sub { max-width: none !important; white-space: nowrap; } }

/* زرار البحث (الدايرة): أبيض من جوه بإطار وأيقونة كحلي */
.shary-home-root .search-input-icon { background: #fff !important; color: #0a466b !important; box-shadow: inset 0 0 0 2px #0a466b; }
.shary-home-root .search-input-icon:hover { background: #eaf2f8 !important; }

/* «مشاريع مميزة»: اسم المشروع بيتغيّر بحركة (يطلع لفوق ويدخل اللي بعده من تحت) */
.shary-home-root .hero-featured__name { transition: opacity .26s ease, transform .26s ease; }
.shary-home-root .hero-featured.is-swap .hero-featured__name { opacity: 0; transform: translateY(-8px); }
.shary-home-root .hero-featured.is-enter .hero-featured__name { opacity: 0; transform: translateY(8px); transition: none; }

/* «اكتشف المشروع»: نبضة خفيفة + لمعة بتعدّي (transform بس — خفيفة على الموبايل ، وبتبدأ بعد ما الصفحة تفتح) */
.shary-home-root .hero-featured__btn { position: relative; overflow: hidden; isolation: isolate; animation: hfPulse 2.8s ease-in-out infinite; }
.shary-home-root .hero-featured__btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .5) 50%, transparent 100%); transform: translateX(0) skewX(-20deg); animation: hfShine 2.8s ease-in-out infinite; }
@keyframes hfShine { 0%, 35% { transform: translateX(0) skewX(-20deg); } 75%, 100% { transform: translateX(422%) skewX(-20deg); } }
@keyframes hfPulse { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.07); } 26% { transform: scale(1); } }
html:not(.sx-ready) .shary-home-root .hero-featured__btn, html:not(.sx-ready) .shary-home-root .hero-featured__btn::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .shary-home-root .hero-featured__btn, .shary-home-root .hero-featured__btn::after { animation: none; } }

/* كارت «مشاريع مميزة»: زجاجي شفاف بدل الخلفية الكحلي (موبايل وكمبيوتر) */
.shary-home-root .hero-featured { background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .38) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .35) !important; }
.shary-home-root .hero-featured:hover { background: rgba(255, 255, 255, .22) !important; }
.shary-home-root .hero-featured__name, .shary-home-root .hero-featured__btn { text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.shary-home-root .hero-featured__label { text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }

/* نقط السلايدر: نفس الشكل (5px) بس مساحة اللمس أكبر على الموبايل */
.hero-dots .hero-dot { position: relative; }
.hero-dots .hero-dot::after { content: ""; position: absolute; inset: -10px -2px; }


/* ---- New Launches على الديسكتوب بس: الكارت أوطى (مستطيل عريض مش قريب من المربع) — الموبايل والتابلت زي ما هم */
@media (min-width: 1024px) { .new-projects-track .new-project-card { aspect-ratio: 21 / 9; } }

/* «مشاريع مميزة»: اسم المشروع الطويل بيتقصّ بـ … — وزرار «اكتشف المشروع» وكلمة «مشاريع مميزة» ما بيتقصّوش أبدًا */
.shary-home-root .hero-featured__btn, .shary-home-root .hero-featured__label { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1023.98px) {
  .shary-home-root .hero-featured { box-sizing: border-box; }
  .shary-home-root .hero-featured__name { min-width: 0; flex: 1 1 auto; max-width: none; }
}
/* ---- مسافات متساوية بين أقسام الهوم (من آخر محتوى القسم لأول محتوى اللي بعده):
   الموبايل والـ Fold ≈ 28px — الديسك توب ≈ 36px. (كروت الخريطة ← عندك وحدة؟ ← أحدث المشاريع ← المطورين ← الإعلان ← الاستكشاف ← المناطق) ---- */
@media (max-width: 767px) {
  .shary-home-root #properties { padding-top: 4px !important; padding-bottom: 28px !important; }
  .shary-home-root #developers { padding-top: 28px !important; }
  .shary-home-root section:has(> .mobile-promo-carousel) { padding-top: 4px !important; padding-bottom: 28px !important; }
  .shary-home-root .areas-section { padding-top: 2px !important; }
}
@media (min-width: 768px) {
  .shary-home-root #properties { padding-top: 0 !important; padding-bottom: 36px !important; margin-top: -4px; }
  .shary-home-root section:has(> .mobile-promo-carousel) { padding-top: 12px !important; }
  .shary-home-root #developers { padding-top: 36px !important; }
  .shary-home-root section:has(> .promo-banners-carousel), .shary-home-root section:has(> .mobile-promo-carousel) { padding-bottom: 36px !important; }
  .shary-home-root .areas-section { padding-top: 16px !important; }
}
/* نفس الإيقاع لآخر الصفحة: وحدات مقترحة ← «شاري معاك» ← «تحتاج استشارة؟» */
@media (max-width: 767px) {
  .shary-home-root .sh-hero { padding-top: 28px !important; }
  .shary-home-root #contact { padding-top: 12px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .shary-home-root .sh-hero { padding-top: 8px !important; }
  .shary-home-root #contact { padding-top: 20px !important; }
}
@media (min-width: 1024px) {
  .shary-home-root .sh-hero { padding-top: 8px !important; padding-bottom: 36px !important; }
  .shary-home-root #contact { padding-top: 0 !important; }
}
@media (min-width: 768px) {
  .shary-home-root .recommended-section { padding-top: 8px !important; }
}