.elementor-200 .elementor-element.elementor-element-5b4fa58{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.6;--padding-top:35px;--padding-bottom:25px;--padding-left:50px;--padding-right:50px;}.elementor-200 .elementor-element.elementor-element-5b4fa58:not(.elementor-motion-effects-element-type-background), .elementor-200 .elementor-element.elementor-element-5b4fa58 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1a1917;}.elementor-200 .elementor-element.elementor-element-5b4fa58::before, .elementor-200 .elementor-element.elementor-element-5b4fa58 > .elementor-background-video-container::before, .elementor-200 .elementor-element.elementor-element-5b4fa58 > .e-con-inner > .elementor-background-video-container::before, .elementor-200 .elementor-element.elementor-element-5b4fa58 > .elementor-background-slideshow::before, .elementor-200 .elementor-element.elementor-element-5b4fa58 > .e-con-inner > .elementor-background-slideshow::before, .elementor-200 .elementor-element.elementor-element-5b4fa58 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://rootscorner.com/wp-content/uploads/2026/09/flower_upscaled.webp");--background-overlay:'';background-repeat:no-repeat;background-size:contain;}.elementor-200 .elementor-element.elementor-element-15b17de{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-200 .elementor-element.elementor-element-22aa21c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-200 .elementor-element.elementor-element-5c25e34{text-align:start;}.elementor-200 .elementor-element.elementor-element-5c25e34 img{width:170px;}.elementor-200 .elementor-element.elementor-element-06a9eec{--display:flex;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-200 .elementor-element.elementor-element-a73d279 .elementor-nav-menu .elementor-item{font-family:"Font", Sans-serif;font-weight:400;}.elementor-200 .elementor-element.elementor-element-a73d279 .elementor-nav-menu--main .elementor-item{color:#D9C1A5;fill:#D9C1A5;}.elementor-200 .elementor-element.elementor-element-a73d279 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-200 .elementor-element.elementor-element-a73d279 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-200 .elementor-element.elementor-element-a73d279 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-200 .elementor-element.elementor-element-a73d279 .elementor-nav-menu--main .elementor-item:focus{color:#ffffff;fill:#ffffff;}.elementor-200 .elementor-element.elementor-element-fbb7cdd{--display:flex;}.elementor-200 .elementor-element.elementor-element-8a9493c{--grid-template-columns:repeat(0, auto);text-align:center;--icon-size:16px;--grid-column-gap:12px;--grid-row-gap:0px;}.elementor-200 .elementor-element.elementor-element-8a9493c .elementor-social-icon{background-color:#1A1917;--icon-padding:6px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#D9C1A5;}.elementor-200 .elementor-element.elementor-element-8a9493c .elementor-social-icon i{color:#D1C7B7;}.elementor-200 .elementor-element.elementor-element-8a9493c .elementor-social-icon svg{fill:#D1C7B7;}.elementor-200 .elementor-element.elementor-element-6846620{--display:flex;--margin-top:25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-200 .elementor-element.elementor-element-f993c90{text-align:center;}.elementor-200 .elementor-element.elementor-element-f993c90 .elementor-heading-title{font-family:"Font", Sans-serif;font-size:15px;font-weight:400;color:#C4BAAC;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-200 .elementor-element.elementor-element-22aa21c{--width:30%;}.elementor-200 .elementor-element.elementor-element-06a9eec{--width:100%;}.elementor-200 .elementor-element.elementor-element-fbb7cdd{--width:30%;}}@media(max-width:1024px){.elementor-200 .elementor-element.elementor-element-5b4fa58{--padding-top:30px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-200 .elementor-element.elementor-element-15b17de{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-200 .elementor-element.elementor-element-5c25e34{text-align:center;}.elementor-200 .elementor-element.elementor-element-8a9493c{text-align:center;}}@media(max-width:767px){.elementor-200 .elementor-element.elementor-element-5b4fa58{--overlay-opacity:0.16;}.elementor-200 .elementor-element.elementor-element-15b17de{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-200 .elementor-element.elementor-element-8a9493c{text-align:center;}}/* Start custom CSS *//* ============================================================
   ROOTS CORNER · Elegant Storytelling Animation
   Pure CSS · Non-intrusive · Respects reduced-motion
   ============================================================ */

/* ---------- 1) Motion Tokens (نظام الحركة الموحد) ---------- */
:root {
  --rc-ease:        cubic-bezier(0.22, 1, 0.36, 1);      /* ناعم فخم */
  --rc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);       /* خروج حريري */
  --rc-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --rc-dur-slow:    1.2s;
  --rc-dur:         0.9s;
  --rc-dur-fast:    0.45s;
  --rc-gold:        #8C7A6B;
  --rc-dark:        #2C2A29;
  --rc-cream:       #F4EFEA;
}

/* ---------- 2) احترام تفضيلات المستخدم ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3) Keyframes (الحركات الأساسية) ---------- */
@keyframes rcRevealUp {
  from { opacity: 0; transform: translate3d(0, 36px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);   filter: blur(0); }
}

@keyframes rcRevealIn {
  from { opacity: 0; filter: blur(8px); letter-spacing: 0.06em; }
  to   { opacity: 1; filter: blur(0);   letter-spacing: inherit; }
}

@keyframes rcRevealZoom {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rcLineGrow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

@keyframes rcFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes rcPulse {
  0%   { box-shadow: 0 0 0 0 rgba(140,122,107,0.35); }
  70%  { box-shadow: 0 0 0 16px rgba(140,122,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(140,122,107,0); }
}

@keyframes rcShimmer {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%)  skewX(-20deg); }
}

@keyframes rcBreath {
  0%, 100% { transform: scale(1);    opacity: 0.92; }
  50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes rcScrollHint {
  0%, 100% { transform: translateY(0);    opacity: 0.4; }
  50%      { transform: translateY(10px); opacity: 1; }
}

/* ============================================================
   4) SCROLL-DRIVEN STORYTELLING
   يعمل تلقائياً في المتصفحات الحديثة (Chrome/Edge/Safari).
   في المتصفحات القديمة: العناصر تظهر بشكل طبيعي (أمان كامل).
   ============================================================ */
@supports (animation-timeline: view()) {

  /* --- 4a) العناوين: تكشف حريري مع ضبط المسافات --- */
  .elementor-page .e-con.e-parent .elementor-widget-heading {
    animation: rcRevealIn var(--rc-dur-slow) var(--rc-ease-out) both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }

  /* --- 4b) النصوص: صعود ناعم مع blur --- */
  .elementor-page .e-con.e-parent .elementor-widget-text-editor,
  .elementor-page .e-con.e-parent .elementor-widget-icon-box {
    animation: rcRevealUp var(--rc-dur) var(--rc-ease) both;
    animation-timeline: view();
    animation-range: entry 8% cover 32%;
  }

  /* --- 4c) الصور: تكبير طفيف للداخل (زوم سينمائي) --- */
  .elementor-page .e-con.e-parent .elementor-widget-image {
    animation: rcRevealZoom var(--rc-dur-slow) var(--rc-ease-out) both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  /* --- 4d) الأزرار: تظهر بعد النص بلمسة هادئة --- */
  .elementor-page .e-con.e-parent .elementor-widget-button {
    animation: rcRevealUp var(--rc-dur) var(--rc-ease) both;
    animation-timeline: view();
    animation-range: entry 15% cover 35%;
  }

  /* --- 4e) الأيقونات: نبضة دخول لطيفة --- */
  .elementor-page .e-con.e-parent .elementor-widget-icon {
    animation: rcRevealUp var(--rc-dur) var(--rc-ease) both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }

  /* --- 4f) الإحصائيات: تعمل بنبضة --- */
  .elementor-page .e-con.e-parent .elementor-widget-counter {
    animation: rcRevealUp var(--rc-dur) var(--rc-ease) both;
    animation-timeline: view();
    animation-range: entry 8% cover 30%;
  }

  /* --- 4g) النموذج: يظهر كقطعة واحدة --- */
  .elementor-page .e-con.e-parent .elementor-widget-form {
    animation: rcRevealUp var(--rc-dur-slow) var(--rc-ease) both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
}

/* ============================================================
   5) HERO SECTION — تتابع سردي عند التحميل (Staggered Story)
   ============================================================ */
.elementor-element-46be017 .elementor-widget-heading:nth-of-type(1) {
  animation: rcRevealIn 1s var(--rc-ease-out) 0.1s both;
}
.elementor-element-46be017 .elementor-widget-heading h1 {
  animation: rcRevealIn 1.1s var(--rc-ease-out) 0.25s both;
}
.elementor-element-46be017 .elementor-widget-text-editor {
  animation: rcRevealUp 1s var(--rc-ease) 0.5s both;
}
.elementor-element-46be017 .elementor-widget-button {
  animation: rcRevealUp 1s var(--rc-ease) 0.7s both;
}
.elementor-element-46be017 .elementor-widget-image {
  animation: rcRevealZoom 1.4s var(--rc-ease-out) 0.15s both;
}

/* ============================================================
   6) HEADER — ظهور راقٍ عند التحميل
   ============================================================ */
.elementor-108 .elementor-widget-theme-site-logo {
  animation: rcRevealIn 0.9s var(--rc-ease-out) 0.1s both;
}
.elementor-108 .elementor-widget-nav-menu {
  animation: rcRevealUp 0.9s var(--rc-ease) 0.25s both;
}
.elementor-108 .elementor-widget-button {
  animation: rcRevealUp 0.9s var(--rc-ease) 0.4s both;
}

/* ============================================================
   7) كروت الخدمات — تفاعل راقٍ عند الهوفر
   ============================================================ */
.elementor-element-6d0aa9d1 .e-con-boxed {
  transition:
    transform var(--rc-dur-fast) var(--rc-ease),
    box-shadow var(--rc-dur-fast) var(--rc-ease),
    background-color var(--rc-dur-fast) var(--rc-ease);
}

.elementor-element-6d0aa9d1 .e-con-boxed:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(90, 70, 56, 0.28);
}

/* أيقونة الخدمة تنبض بلطف عند الهوفر */
.elementor-element-6d0aa9d1 .e-con-boxed:hover .elementor-widget-icon .elementor-icon svg {
  animation: rcPulse 1.8s var(--rc-ease-soft) infinite;
  border-radius: 50%;
  transition: transform 0.5s var(--rc-ease);
  transform: scale(1.06);
}

/* ============================================================
   8) الأزرار — Shimmer فخم عند الهوفر (بدون مبالغة)
   ============================================================ */
.elementor-button {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--rc-dur-fast) var(--rc-ease),
    box-shadow var(--rc-dur-fast) var(--rc-ease),
    background-color var(--rc-dur-fast) var(--rc-ease),
    color var(--rc-dur-fast) var(--rc-ease);
  will-change: transform;
}

.elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.28) 50%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

.elementor-button:hover::before {
  animation: rcShimmer 0.9s var(--rc-ease-soft) forwards;
  opacity: 1;
}

.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(90, 70, 56, 0.35);
}

/* ============================================================
   9) الصور — زوم ناعم + ظل عند الهوفر (تأثير معرض فني)
   ============================================================ */
.elementor-widget-image img {
  transition:
    transform 1.1s var(--rc-ease-out),
    filter 0.6s var(--rc-ease-soft);
  will-change: transform;
}

.elementor-widget-image:hover img {
  transform: scale(1.025);
  filter: brightness(1.03);
}

/* ============================================================
   10) كاروسيل المشاريع — رفع راقٍ لكل بطاقة
   ============================================================ */
.elementor-loop-container .e-loop-item .e-con {
  transition:
    transform var(--rc-dur-fast) var(--rc-ease),
    box-shadow var(--rc-dur-fast) var(--rc-ease);
}

.elementor-loop-container .e-loop-item:hover .e-con {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -20px rgba(90, 70, 56, 0.25);
}

/* سهم "اكتشف" يدور بلطف عند الهوفر */
.elementor-loop-container .e-loop-item .elementor-icon svg {
  transition: transform 0.5s var(--rc-ease);
}
.elementor-loop-container .e-loop-item:hover .elementor-icon svg {
  transform: rotate(90deg);
}

/* ============================================================
   11) الأيقونات الدائرية — إحساس تفاعلي دقيق
   ============================================================ */
.elementor-icon {
  transition:
    transform var(--rc-dur-fast) var(--rc-ease),
    background-color var(--rc-dur-fast) var(--rc-ease),
    color var(--rc-dur-fast) var(--rc-ease),
    border-color var(--rc-dur-fast) var(--rc-ease);
}

.elementor-icon:hover {
  transform: translateY(-3px) scale(1.05);
}

/* ============================================================
   12) أزرار الكاروسيل — لمسة أنيقة
   ============================================================ */
.elementor-swiper-button {
  transition:
    transform var(--rc-dur-fast) var(--rc-ease),
    background-color var(--rc-dur-fast) var(--rc-ease),
    opacity var(--rc-dur-fast) var(--rc-ease);
}

.elementor-swiper-button:hover {
  transform: scale(1.08);
}

/* ============================================================
   13) عناصر زخرفية (الورود/النباتات) — تنفّس هادئ
   استخدمنا :has() لاستهداف الأيقونات ذات الحجم الكبير في الهيرو
   ============================================================ */
.elementor-element-46be017 .elementor-widget-image img {
  animation: rcBreath 7s var(--rc-ease-soft) infinite;
}

/* ============================================================
   14) حقول النموذج — حدود تتوهج بهدوء
   ============================================================ */
.elementor-field {
  transition:
    border-color var(--rc-dur-fast) var(--rc-ease-soft),
    box-shadow var(--rc-dur-fast) var(--rc-ease-soft),
    background-color var(--rc-dur-fast) var(--rc-ease-soft);
}

.elementor-field:focus {
  border-color: var(--rc-gold) !important;
  box-shadow: 0 0 0 4px rgba(140, 122, 107, 0.12) !important;
  outline: none;
}

/* ============================================================
   15) الفوتر — ظهور ناعم عند الوصول له
   ============================================================ */
@supports (animation-timeline: view()) {
  .elementor-200 .e-con.e-child {
    animation: rcRevealUp 1s var(--rc-ease) both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
}

/* ============================================================
   16) زر "العودة لأعلى" — نبضة هادئة
   ============================================================ */
#ast-scroll-top {
  transition:
    transform var(--rc-dur-fast) var(--rc-ease),
    background-color var(--rc-dur-fast) var(--rc-ease),
    opacity var(--rc-dur-fast) var(--rc-ease);
}

#ast-scroll-top:hover {
  transform: translateY(-4px) scale(1.05);
}

/* ============================================================
   17) تحسين نعومة التمرير العام
   ============================================================ */
html { scroll-behavior: smooth; }

/* ============================================================
   18) طباعة — إيقاف كل الحركات
   ============================================================ */
@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}/* End custom CSS */