/* ============================================================
   ريع — site-wide brand skin for the marketing front (all pages).
   Loaded after the template's style.css to re-skin it to the ريع
   identity: Tajawal type, teal/gold palette, new header & footer.
   ============================================================ */

:root{
  --ray-brand:#A95740; --ray-brand-2:#BE6A50; --ray-brand-ink:#8A4433;
  --ray-gold:#E7D5BE; --ray-ink:#352B27; --ray-slate:#4C4039; --ray-muted:#8C7C6E;
  --ray-line:#ECE1D0; --ray-bg:#FCFAF6; --ray-bg-soft:#F3E9DA;
}

/* ---- typography ---- */
body, .btn, input, textarea, select, button, h1,h2,h3,h4,h5,h6, p, a, span, li, label {
  font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
body{ color:#352B27; }

/* ---- recolour the template accents from orange → ريع teal ---- */
a{ color:var(--ray-brand); }
a:hover{ color:var(--ray-brand-ink); }
.btn.primary-btn, .primary-btn{ background:var(--ray-brand) !important; border-color:var(--ray-brand) !important; color:#fff !important; border-radius:100px !important; font-weight:700; }
.btn.primary-btn:hover, .primary-btn:hover{ background:var(--ray-brand-ink) !important; border-color:var(--ray-brand-ink) !important; }
.btn.secondary-btn, .secondary-btn{ border-radius:100px !important; font-weight:700; border:1.6px solid var(--ray-brand) !important; color:var(--ray-brand) !important; background:transparent !important; }
.btn.secondary-btn:hover, .secondary-btn:hover{ background:var(--ray-brand) !important; color:#fff !important; }
.section-title .subtitle, .subtitle{ color:var(--ray-brand) !important; font-weight:700 !important; }
.section-title .title b, .section-title .title span{ color:var(--ray-brand) !important; }
.text-primary, .color-primary{ color:var(--ray-brand) !important; }
.bg-primary{ background:var(--ray-brand) !important; }

/* breadcrumb hero: teal wash over the photo */
.page-title-area{ position:relative; }
.page-title-area::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(122,59,44,.86), rgba(169,87,64,.72)); z-index:0; }
.page-title-area .container{ position:relative; z-index:1; }
.page-title-area h1{ font-weight:800 !important; }
.page-title-area .list-unstyled li a{ color:#F0DDD2 !important; }
.page-title-area .list-unstyled li.active{ color:var(--ray-gold) !important; }

/* cards / inputs polish */
.card{ border-radius:16px; }
.contact-area .card .icon, .card .card-icon, .store-single-item .card-icon{ color:var(--ray-brand) !important; }
.form-control{ border-radius:12px !important; border:1.6px solid var(--ray-line) !important; }
.form-control:focus{ border-color:var(--ray-brand) !important; box-shadow:0 0 0 3px rgba(169,87,64,.12) !important; }

/* pricing: active plan teal */
.pricing-area .card.active, .pricing-area .card:hover{ border-color:var(--ray-brand) !important; }
.pricing-area .nav-tabs .nav-link.active{ background:var(--ray-brand) !important; color:#fff !important; }
.pricing-area .icon.blue{ color:var(--ray-brand) !important; }

/* ============================================================
   Header (rayx-)
   ============================================================ */
.header-area{ background:transparent; }
.rayx-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s; }
.rayx-header.is-stuck{ border-color:var(--ray-line); box-shadow:0 10px 30px -22px rgba(90,58,42,.5); }
.rayx-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 22px; }
.rayx-nav{ display:flex; align-items:center; gap:24px; height:74px; }
.rayx-brand{ display:flex; align-items:center; gap:11px; }
.rayx-brand .mark{ width:42px; height:42px; }
.rayx-brand .word{ display:flex; flex-direction:column; line-height:1; }
.rayx-brand .word b{ font-size:23px; font-weight:800; color:var(--ray-ink); }
.rayx-brand .word span{ font-size:10px; font-weight:700; letter-spacing:3px; color:var(--ray-muted); }
.rayx-menu{ display:flex; align-items:center; gap:2px; margin-inline-start:auto; list-style:none; margin-bottom:0; padding:0; }
.rayx-menu > li{ position:relative; }
.rayx-menu a{ display:block; font-size:15px; font-weight:600; color:var(--ray-slate) !important; padding:9px 14px; border-radius:10px; }
.rayx-menu a:hover{ color:var(--ray-brand) !important; background:var(--ray-bg-soft); }
.rayx-menu .menu-dropdown{ position:absolute; top:100%; inset-inline-start:0; min-width:190px; background:#fff; border:1px solid var(--ray-line); border-radius:12px; box-shadow:0 20px 50px -24px rgba(90,58,42,.4); padding:8px; display:none; list-style:none; z-index:20; }
.rayx-menu li:hover > .menu-dropdown{ display:block; }
.rayx-actions{ display:flex; align-items:center; gap:10px; }
.rayx-actions select{ font-size:14px; font-weight:600; color:var(--ray-slate); border:1.4px solid var(--ray-line); background:#fff; border-radius:100px; padding:8px 12px; cursor:pointer; }
.rayx-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; padding:11px 22px; border-radius:100px; border:1.6px solid transparent; transition:transform .18s, background .18s, color .18s; white-space:nowrap; }
.rayx-btn.ghost{ border-color:var(--ray-line); color:var(--ray-ink) !important; background:#fff; }
.rayx-btn.ghost:hover{ border-color:var(--ray-brand); color:var(--ray-brand) !important; transform:translateY(-2px); }
.rayx-btn.solid{ background:var(--ray-brand); color:#fff !important; box-shadow:0 12px 26px -12px rgba(169,87,64,.7); }
.rayx-btn.solid:hover{ background:var(--ray-brand-ink); color:#fff !important; transform:translateY(-2px); }
.rayx-burger{ display:none; width:44px; height:44px; border-radius:12px; border:1.4px solid var(--ray-line); background:#fff; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.rayx-burger span{ width:20px; height:2px; background:var(--ray-ink); border-radius:2px; }
.rayx-mobile{ position:fixed; inset:0; z-index:90; background:rgba(8,24,20,.5); opacity:0; pointer-events:none; transition:opacity .25s; }
.rayx-mobile.open{ opacity:1; pointer-events:auto; }
.rayx-mobile-panel{ position:absolute; inset-inline-end:0; top:0; height:100%; width:min(84%,330px); background:#fff; padding:22px; display:flex; flex-direction:column; gap:4px; transform:translateX(-100%); transition:transform .3s; }
[dir="rtl"] .rayx-mobile-panel{ transform:translateX(100%); }
.rayx-mobile.open .rayx-mobile-panel{ transform:none; }
.rayx-mobile-panel a{ font-size:16px; font-weight:700; color:var(--ray-ink) !important; padding:12px 10px; border-radius:10px; }
.rayx-mobile-panel a:hover{ background:var(--ray-bg-soft); color:var(--ray-brand) !important; }
.rayx-mobile-close{ align-self:flex-end; width:42px; height:42px; border-radius:12px; border:1px solid var(--ray-line); background:#fff; font-size:22px; cursor:pointer; margin-bottom:6px; }
@media (max-width:991px){ .rayx-menu, .rayx-actions .d-desk{ display:none; } .rayx-burger{ display:flex; } }

/* ============================================================
   Footer (rayx-)
   ============================================================ */
.footer-area{ background:var(--ray-ink); color:#CBBDB2; }
.rayx-foot{ padding:70px 0 0; }
.rayx-foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px; }
.rayx-foot .rayx-brand .word b{ color:#fff; }
.rayx-foot .rayx-brand .word span{ color:#9C8B7E; }
.rayx-foot .about{ margin-top:16px; max-width:320px; font-size:14.5px; color:#A8988B; }
.rayx-foot h4{ color:#fff; font-size:16px; font-weight:800; margin-bottom:16px; }
.rayx-foot-links{ list-style:none; padding:0; display:grid; gap:10px; }
.rayx-foot-links a{ font-size:14.5px; color:#BEAEA1 !important; }
.rayx-foot-links a:hover{ color:var(--ray-gold) !important; }
.rayx-foot .contact li{ display:flex; gap:10px; font-size:14.5px; color:#BEAEA1; margin-bottom:12px; align-items:flex-start; list-style:none; }
.rayx-foot .contact svg{ width:18px; height:18px; color:var(--ray-brand-2); flex:0 0 auto; margin-top:3px; }
.rayx-foot .news input{ width:100%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; border-radius:100px; padding:11px 16px; margin-bottom:10px; }
.rayx-foot .news input::placeholder{ color:#9C8B7E; }
.rayx-foot .news button{ width:100%; background:var(--ray-brand); color:#fff; border:none; border-radius:100px; padding:11px 16px; font-weight:700; cursor:pointer; }
.rayx-foot .news button:hover{ background:var(--ray-brand-2); }
.rayx-social{ display:flex; gap:10px; margin-top:18px; }
.rayx-social a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#CBBDB2 !important; }
.rayx-social a:hover{ background:var(--ray-brand); color:#fff !important; transform:translateY(-2px); }
.rayx-copy{ margin-top:50px; border-top:1px solid rgba(255,255,255,.08); padding:22px 0; text-align:center; font-size:13.5px; color:#8299949; }
.rayx-copy, .rayx-copy *{ color:#9C8B7E !important; }
@media (max-width:991px){ .rayx-foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:575px){ .rayx-foot-grid{ grid-template-columns:1fr; } .rayx-nav{ gap:12px; } }

/* ============================================================
   premium breadcrumb (all inner pages) — clean gradient, no photo
   ============================================================ */
.page-title-area{ background:#F6EEE2 !important; background-image:none !important; padding:92px 0 !important; position:relative; overflow:hidden; border-bottom:1px solid #ECE1D0; }
.page-title-area::before{ content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(640px 320px at 86% -12%, rgba(169,87,64,.14), transparent 60%),
    radial-gradient(520px 300px at 2% 115%, rgba(231,213,190,.55), transparent 60%) !important; }
.page-title-area::after{ content:""; position:absolute; inset:0; z-index:0; opacity:.55;
  background-image:radial-gradient(rgba(138,68,51,.07) 1px, transparent 1px); background-size:24px 24px; }
.page-title-area .container{ position:relative; z-index:2; }
.page-title-area h1{ color:#352B27 !important; font-family:"Cairo","Tajawal",sans-serif !important; font-weight:800 !important; font-size:clamp(34px,4.2vw,52px) !important; letter-spacing:-.5px; }
.page-title-area .list-unstyled{ margin-top:10px; }
.page-title-area .list-unstyled li,.page-title-area .list-unstyled li a{ color:#8C7C6E !important; }
.page-title-area .list-unstyled li.active{ color:#A95740 !important; font-weight:700; }

/* ============================================================
   Contact page — premium split (brand panel + form card)
   ============================================================ */
.ray-cwrap{ max-width:1120px; margin:0 auto; padding:0 22px; }
.ray-contact-sec{ padding:90px 0; }
.ray-contact-grid{ display:grid; grid-template-columns:.82fr 1.18fr; border-radius:24px; overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(90,58,42,.5); border:1px solid var(--ray-line); background:#fff; }
.ray-contact-info{ position:relative; overflow:hidden; padding:48px 40px; color:#F7ECE3;
  background:radial-gradient(500px 300px at 90% 0%, rgba(231,213,190,.28), transparent 60%), linear-gradient(150deg,#A95740,#7A3B2C); }
.ray-contact-info::after{ content:""; position:absolute; inset:0; opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:20px 20px; }
.ray-contact-info>*{ position:relative; z-index:2; }
.ray-chip{ display:inline-block; font-size:13px; font-weight:700; color:#F7ECE3; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); padding:6px 14px; border-radius:100px; }
.ray-contact-info h2{ color:#fff; font-size:28px; font-weight:800; margin:18px 0 12px; line-height:1.3; }
.ray-contact-info p{ color:#F0DDD2; font-size:15.5px; }
.ray-contact-points{ list-style:none; padding:0; margin:30px 0 0; display:grid; gap:20px; }
.ray-contact-points li{ display:flex; gap:14px; align-items:flex-start; }
.ray-contact-points .ic{ width:42px; height:42px; border-radius:12px; background:rgba(231,213,190,.18); color:var(--ray-gold);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ray-contact-points .ic svg{ width:20px; height:20px; }
.ray-contact-points b{ display:block; color:#fff; font-size:15px; font-weight:700; }
.ray-contact-points span{ color:#EBD3C7; font-size:13.5px; }
.ray-contact-card{ padding:48px 44px; }
.ray-contact-card h3{ font-size:24px; font-weight:800; color:var(--ray-ink); }
.ray-contact-card .sub{ color:var(--ray-muted); margin:4px 0 24px; font-size:14.5px; }
.ray-field{ margin-bottom:18px; }
.ray-field label{ display:block; font-size:13.5px; font-weight:700; color:#4C4039; margin-bottom:6px; }
.ray-field .form-control{ width:100%; border:1.6px solid var(--ray-line); border-radius:12px; padding:12px 15px; font-size:15px; background:#fff; }
.ray-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ray-err{ color:#dc2626; font-size:12.5px; margin-top:4px; display:block; }
.ray-contact-btn{ margin-top:8px; display:inline-flex; align-items:center; gap:9px; padding:13px 28px !important; border-radius:100px !important; }
@media (max-width:860px){ .ray-contact-grid{ grid-template-columns:1fr; } .ray-field-row{ grid-template-columns:1fr; }
  .ray-contact-info{ padding:36px 26px; } .ray-contact-card{ padding:34px 24px; } }


/* mobile performance: drop GPU-heavy backdrop blur for smoother scrolling */
@media (max-width:760px){
  .rayx-header,.ray-contact-info,.ray-wl-card,.ray-eyebrow,.rayx-actions select{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .rayx-header{ background:rgba(252,250,246,.96) !important; }
}

/* ============================================================
   WARM IDENTITY — inner marketing pages (2026-10-22)
   clay #A95740 · sand #E7D5BE · cream #FCFAF6 · charcoal #352B27
   Light & airy to match the landing; only on the platform front.
   ============================================================ */
body{ background:#FCFAF6 !important; color:#352B27; }
h1,h2,h3,h4,h5,.section-title .title,.card-title,.main-form .title h3{ font-family:"Cairo","Tajawal",sans-serif !important; color:#352B27; }
.section-title .subtitle,.subtitle{ color:#A95740 !important; }
.text-muted{ color:#8C7C6E !important; }

/* cool template tints (about page stat tiles etc.) → warm sand */
[style*="#F1F7FF"],[style*="#F4F1FF"],[style*="#ECFFFF"],[style*="#f1f7ff"],[style*="#f4f1ff"],[style*="#ecffff"]{ background:#F6EEE2 !important; }

/* cards */
.card,.store-single-item,.achievement-item-style-1,.blog-card,.choose-item{
  background:#fff !important; border:1px solid #ECE1D0 !important; border-radius:18px !important;
  box-shadow:0 2px 10px rgba(53,43,39,.05) !important; }
.card:hover,.store-single-item:hover,.blog-card:hover{ box-shadow:0 26px 56px -32px rgba(90,58,42,.4) !important; border-color:#EAD0C4 !important; }
.card .icon,.icon.blue{ color:#A95740 !important; }
/* glyphs sit on a filled primary tile in the template → keep them white */
.card-icon i{ color:#fff !important; }

/* forms */
.form-control,.nice-select,select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]){
  background:#fff !important; border:1.5px solid #E2D4BF !important; color:#352B27 !important; border-radius:12px !important; }
.form-control::placeholder,input::placeholder,textarea::placeholder{ color:#A8988B !important; }
.form-control:focus,input:focus,textarea:focus{ border-color:#A95740 !important; box-shadow:0 0 0 3px rgba(169,87,64,.14) !important; }
.main-form{ background:#fff !important; border:1px solid #ECE1D0 !important; border-radius:22px !important; box-shadow:0 40px 90px -50px rgba(90,58,42,.45) !important; }
.main-form .link a,.go-signup a{ color:#A95740 !important; font-weight:700; }

/* buttons */
.btn.primary-btn,.primary-btn,.cmn-btn,.btn-primary{ background:#A95740 !important; border-color:#A95740 !important; color:#fff !important; border-radius:100px !important; }
.btn.primary-btn:hover,.primary-btn:hover,.btn-primary:hover{ background:#8A4433 !important; border-color:#8A4433 !important; }
.btn.secondary-btn,.secondary-btn{ background:#fff !important; border:1.5px solid #E2D4BF !important; color:#352B27 !important; }
.btn.secondary-btn:hover,.secondary-btn:hover{ border-color:#A95740 !important; color:#8A4433 !important; background:#fff !important; }

/* pricing */
.pricing-area .card.active{ border-color:#A95740 !important; background:linear-gradient(180deg,#F3E4DC,#fff) !important; }
.pricing-area .nav-tabs .nav-link.active,.nav-pills .nav-link.active{ background:#A95740 !important; color:#fff !important; border-radius:100px; }
.pricing-area .price{ color:#352B27 !important; font-family:"Cairo","Tajawal",sans-serif; }

/* header + footer */
.rayx-header{ background:rgba(252,250,246,.9) !important; }
.rayx-brand .word b{ font-family:"Cairo","Tajawal",sans-serif; }
.rayx-btn.solid{ background:#A95740 !important; box-shadow:0 12px 26px -12px rgba(169,87,64,.6) !important; }
.rayx-btn.solid:hover{ background:#8A4433 !important; }
.footer-area{ background:#2E2521 !important; }
.go-top{ background:#A95740 !important; color:#fff !important; }
.cursor{ display:none !important; }
/* our logo uses class="mark", which collides with Bootstrap's .mark highlight utility (pale bg + padding) */
.rayx-brand .mark,.rayx-foot .mark{ background:none !important; padding:0 !important; }
.main-form .title h3{ font-weight:800 !important; }

/* bilingual lockup (same spec as the landing): [mark] ريع │ RAY/ESTATES — horizontal so the «ع» descender never meets the Latin */
.rayx-brand .word{ display:flex !important; flex-direction:row !important; align-items:center; gap:11px; line-height:1; }
.rayx-brand .word b{ font-family:"Cairo","Tajawal",sans-serif !important; font-size:29px !important; font-weight:800; line-height:1 !important; letter-spacing:0 !important; position:relative; top:-2px; color:#352B27; }
.rayx-brand .word .sep{ width:1px; height:24px; background:#E2D4BF; flex:none; }
.rayx-brand .word .latin{ font-family:"Inter",sans-serif !important; font-size:8.5px !important; font-weight:600; line-height:1.35 !important; letter-spacing:1.6px !important; text-transform:uppercase; color:#8C7C6E !important; text-align:left; }
.rayx-foot .rayx-brand .word b{ color:#fff !important; }
.rayx-foot .rayx-brand .word .latin{ color:#A8988B !important; }
.rayx-foot .rayx-brand .word .sep{ background:rgba(255,255,255,.2); }