/* =============================================================
   ejari-cloud.css — Ejari Cloud product landing page
   All rem values based on global.css base (19px)

   REUSE MAP — intentionally NOT redefined here, reused as-is:
     .container                                          -> global.css
     .cta-section / .cta-inner / .cta-content /
       .cta-heading / .cta-btn                            -> global.css
       (bound automatically; "Ready to Transform Your Portfolio?"
       reuses the global CTA band, glow colour overridden below)
     .accordion / .accordion-item / .accordion-header /
       .accordion-title / .accordion-content               -> global.css
       (bound by initAccordion() / initHoverAccordion() in main.js)
     .ind-revolutionize-section / -header / -title /
       .ind-accordion / .ind-accordion-body /
       .ind-accordion-img-wrap / .ind-accordion-desc        -> industries.css
       ("Why Choose Ejari Cloud" reuses the hover-accordion
       pattern; colour accents overridden below)
     .ob-faq-section / -header / -title / -subtitle /
       .ob-faq-tabs / .ob-faq-tab / .ob-faq-panel /
       .ob-faq-accordion                                    -> office-buddy.css
       (bound by initOfficeBuddyFaq(); colour accents overridden below)
     .ob-video-card / -title / -desc / -points / -point* /
       .ob-video-watch-btn / .ob-video-player*              -> office-buddy.css
       (bound by initOfficeBuddyVideo(); colour accents overridden below)
     .ob-redirect-card / -title / -desc / -btns / -btn*      -> office-buddy.css
       (colour accents overridden below)
     .testimonials-header / .testimonials-title /
       .testimonials-slider-wrapper / .testimonial-card /
       .testimonials-track / .slider-arrow-btn / .view-all-link
                                                             -> global.css
       (bound by initTestimonialSlider())
     .sd-accent                                            -> service-detail.css
     .btn-secondary                                        -> global.css

   Everything below is unique to the Ejari Cloud page, or is a
   colour/theme override layered on top of a reused component:
     1. Hero
     2. Feature grid ("Everything You Need to Manage Properties")
     3. Sales Pitch (dark section with phone mockup)
     4. Why Choose Ejari Cloud (accordion colour overrides)
     5. Comparison (Traditional vs EjariCloud)
     6. Built for Every Property Type
     7. Website redirection card colour overrides
     8. Video section colour overrides
     9. SaaS platform / cloud features + app download
     10. Reviews section spacing
     11. FAQ colour overrides
     12. CTA colour overrides
     13. Sticky "Download Brochure" tab (reused from office-buddy.css)
   ============================================================= */

.sd-accent { color: #128807; }

/* ---------------------------------------------------------------
   Fix: give the "Why Choose Ejari Cloud" accordion room to show
   taller content when a panel is open (same fix as office-buddy.css)
--------------------------------------------------------------- */


/* ---------------------------------------------------------------
   1. HERO
--------------------------------------------------------------- */
.ejc-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12.5rem 0 0;
}

.ejc-hero-glow {
  position: absolute;
  bottom: -1rem;
  left: 25%;
  transform: translateY(-35%);
  width: 43.6875rem;
  height: 32.5rem;
  border-radius: 43.6875rem;
  background: linear-gradient(180deg, #0FC073 0%, var(--Blue-Dark-mode, #008DFF) 100%);
  filter: blur(269.5px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.ejc-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  text-align: center;
  max-width: 64rem;
  margin: 0 auto;
}

.ejc-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 100rem;
  background: #f0fdf4;
  border: 0.053rem solid #bbf0c7;
  color: #15803d;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.ejc-hero-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 3.75rem; /* 60px */
  line-height: 4.64025rem;
  max-width: 58rem;
  background-image: linear-gradient(100deg, #0b8100 10%, #043500 67%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.dark-theme .ejc-hero-title {
  background-image: linear-gradient(100deg, #0b8100 10%, #fff 67%);
}

.ejc-hero-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem; /* 20px */
  line-height: 1.632rem;
  color: var(--text-sub);
  max-width: 62rem;
}

.ejc-hero-btns {
  display: flex;
  gap: 0.632rem;
  align-items: center;
  margin-top: 0.6rem;
}

.ejc-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.632rem; /* 50px */
  padding: 0 1.9rem;
  border-radius: 1.579rem;
  font-family: var(--font-primary);
  font-size: 0.842rem;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: pointer;
}

.ejc-hero-btn--outline {
  background: transparent;
  color: var(--base-dark);
  border: 0.042rem solid #00662e;
}

.ejc-hero-btn--outline:hover {
  transform: translateY(-2px);
}

.ejc-hero-btn--solid {
  background-image: linear-gradient(163deg, #00c950 0%, #00a63e 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 166, 62, 0.3);
}

.ejc-hero-btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 166, 62, 0.4);
}

.ejc-hero-image-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 63.4rem;
  margin: 2.5rem auto 0;
  border-radius: 0.632rem;
  overflow: hidden;
}

.ejc-hero-image-wrap img {
  width: 100%;
  display: block;
}

@media (max-width: 1024px) {
  .ejc-hero { padding: 9rem 0 2rem; }
  .ejc-hero-title { font-size: 3rem; line-height: 1.25; }
}

@media (max-width: 600px) {
  .ejc-hero-title { font-size: 1.9rem; }
}

/* ---------------------------------------------------------------
   2. FEATURE GRID ("Everything You Need to Manage Properties")
--------------------------------------------------------------- */
.ejc-features-section {
  border-top: 0.053rem solid var(--border-gray);
  border-bottom: 0.053rem solid var(--border-gray);
  padding: 5.789rem 0;
}

.ejc-features-header {
  max-width: 64rem;
  margin-bottom: 2.7rem;
}

.ejc-features-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 2.5rem; /* 43px */
  line-height: 1.2;
  color: var(--base-dark);
  margin-bottom: 0.6rem;
  width: 90%;
}

.ejc-features-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.27938rem;
  color: var(--text-sub);
  max-width: 55rem;
}

.ejc-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}

.ejc-feature-card {
  background-color: var(--bg-white);
  border: 0.053rem solid var(--border-gray);
  border-radius: 0.316rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  padding: 1.13rem;
}

.ejc-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 136, 7, 0.1);
  /* border-color: #128807; */
}

.ejc-feature-icon {
  width: 5.947rem; /* 113px */
  height: 5.947rem;
  margin: 1.526rem 0 0 1.368rem;
}

.ejc-feature-icon img {
  width: 100%;
  height: 100%;
}

.ejc-feature-icon-custom {
  position: relative;
  width: 5.947rem;
  height: 5.947rem;
  margin: 1.526rem 0 0 1.368rem;
}

.ejc-feature-icon-custom img.ejc-icon-base { width: 100%; height: 100%; display: block; }

.ejc-feature-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.125rem; /* 20px */
  line-height: 1.474rem;
  color: var(--base-dark);
  margin: 1.05rem 1.368rem 0;
}

.ejc-feature-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.474rem;
  color: var(--text-sub);
  margin: 0.6rem 1.368rem 1.5rem;
}

@media (max-width: 1200px) {
  .ejc-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ejc-features-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   3. SALES PITCH (dark section, phone mockup)
--------------------------------------------------------------- */
.ejc-pitch-section {
  position: relative;
  overflow: hidden;
  background-color: #001f08;
  padding: 6rem 0;
}

.ejc-pitch-glow {
  position: absolute;
  top: -15rem;
  left: 8%;
  width: 43.7rem;
  height: 32.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 95, 0.14) 0%, rgba(0, 255, 95, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.ejc-pitch-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}

.ejc-pitch-heading {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 2.5rem; /* 55px */
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 1rem;
}

.ejc-pitch-heading span { color: #00ff5f; }

.ejc-pitch-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.474rem;
  color: #ffffff;
  max-width: 28rem;
  margin-bottom: 1.6rem;
}

.ejc-applist {
  display: flex;
  flex-direction: column;
  gap: 0.526rem;
}

.ejc-al {
  display: flex;
  gap: 0.632rem;
  align-items: flex-start;
  background-color: #f8fafc;
  border: 0.053rem solid #ebedf2;
  border-radius: 0.632rem;
  padding: 0.737rem 0.842rem;
}

.ejc-al-icon {
  flex-shrink: 0;
  width: 1.947rem;
  height: 1.947rem;
  border-radius: 0.526rem;
  background-color: #d2ffdd;
  border: 0.053rem solid #93d7a5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ejc-al-icon img { width: 1.05rem; height: 1.05rem; }

.ejc-al-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.125rem;
  color: #0b1220;
}

.ejc-al-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.05rem;
  color: #363434;
}

.ejc-pitch-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ejc-pitch-rings {
  position: relative;
  width: 100%;
  max-width: 32rem;
  aspect-ratio: 1 / 1;
}

.ejc-pitch-rings img.ejc-rings-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ejc-pitch-rings img.ejc-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  border-radius: 1rem;
}

@media (max-width: 1024px) {
  .ejc-pitch-inner { grid-template-columns: 1fr; }
  .ejc-pitch-visual { margin-top: 2rem; }
}

/* ---------------------------------------------------------------
   4. WHY CHOOSE EJARI CLOUD (accordion colour overrides)
--------------------------------------------------------------- */
#ejari-why-accordion .accordion-item.active .accordion-title {
  color: #128807;
}

/* ---------------------------------------------------------------
   5. COMPARISON (Traditional vs EjariCloud)
--------------------------------------------------------------- */
.ejc-comparison-section {
  padding: 0 0 6rem 0;
}

.ejc-comparison-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  margin-bottom: 3rem;
}

.ejc-comparison-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.2;
  color: var(--base-dark);
  max-width: 44rem;
}

.ejc-comparison-subtitle {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: var(--text-sub);
  max-width: 34rem;
}

.ejc-vs-row {
  display: flex;
  gap: 1.263rem;
  align-items: center;
  justify-content: center;
}

.ejc-vs-card {
  background-color: var(--bg-white);
  border-radius: 0.947rem;
  padding: 1.368rem 1.474rem;
  display: flex;
  flex-direction: column;
  gap: 0.737rem;
  width: 29.5rem;
  flex-shrink: 0;
}

.ejc-vs-card--traditional { border: 0.079rem solid #fcd9d9; }
.ejc-vs-card--ejari { border: 0.079rem solid #9ee5e0; }

body.dark-theme .ejc-vs-card--traditional,
body.dark-theme .ejc-vs-card--ejari {
  border: 0.079rem solid var(--border-gray)
}

.ejc-vs-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.25rem;
  text-transform: capitalize;
}

.ejc-vs-card--traditional .ejc-vs-title { color: #cd0000; }
.ejc-vs-card--ejari .ejc-vs-title { color: #128807; }

.ejc-vs-list {
  display: flex;
  flex-direction: column;
  gap: 0.526rem;
}

.ejc-vs-item {
  display: flex;
  gap: 0.526rem;
  align-items: flex-start;
}

.ejc-vs-mark {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.737rem;
  line-height: 1.5;
  flex-shrink: 0;
}

.ejc-vs-card--traditional .ejc-vs-mark { color: #f04545; }
.ejc-vs-card--ejari .ejc-vs-mark { color: #0ea5a4; }

.ejc-vs-text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.368rem;
  color: var(--text-sub);
}

.ejc-vs-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.526rem 0.737rem;
  border-radius: 999px;
  background-color: var(--primary-blue);
  color: #ffffff;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1.053rem;
}

@media (max-width: 1024px) {
  .ejc-vs-row { flex-direction: column; }
  .ejc-vs-card { width: 100%; }
}

/* ---------------------------------------------------------------
   6. BUILT FOR EVERY PROPERTY TYPE
--------------------------------------------------------------- */
.ejc-property-section {
  padding: 6rem 0;
}

.ejc-property-header {
  text-align: center;
  margin-bottom: 3.4rem;
}

.ejc-property-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 2.5rem;
  color: var(--base-dark);
  margin-bottom: 0.842rem;
}

.ejc-property-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.474rem;
  color: var(--text-sub);
  max-width: 35.4rem;
  margin: 0 auto;
}

.ejc-property-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.ejc-property-card {
  background-color: var(--bg-white);
  border: 0.053rem solid #f1f5f9;
  border-radius: 1.263rem;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-theme .ejc-property-card {
  border-color: var(--border-gray);
}

.ejc-property-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.14);
}

.ejc-property-image {
  position: relative;
  height: 9.263rem;
  background-color: #f1f5f9;
}

.ejc-property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ejc-property-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 43, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
}

.ejc-property-units {
  position: absolute;
  left: 0.632rem;
  bottom: 0.526rem;
  z-index: 2;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.632rem;
  color: rgba(255, 255, 255, 0.9);
}

.ejc-property-body {
  padding: 0.842rem;
}

.ejc-property-icon-wrap {
  width: 1.684rem;
  height: 1.684rem;
  border-radius: 1.05rem;
  background-color: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.632rem;
}

.ejc-property-icon-wrap img { width: 1.842rem; height: 1.842rem; }

.ejc-property-card-title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1rem;
  color: var(--base-dark);
  margin-bottom: 0.263rem;
}

.ejc-property-card-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.05rem;
  color: #707070;
}

@media (max-width: 1200px) {
  .ejc-property-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .ejc-property-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------
   7. WEBSITE REDIRECTION — colour override (green theme)
--------------------------------------------------------------- */
.ejc-redirect-section .ob-redirect-card {
  background-color: #f3f9f6;
  overflow: hidden;
}

body.dark-theme .ejc-redirect-section .ob-redirect-card {
  background-color: var(--bg-white);
}

/* .ejc-redirect-card-glow{
    width: 22.375rem;
    height: 16.5rem;
    top: 2rem;
    right: 0rem;
} */

.ejc-redirect-section .ob-redirect-btn--solid {
  background-image: linear-gradient(168deg, #00c950 0%, #00a63e 100%);
  border: none;
}

.ejc-redirect-section .ob-redirect-btn--solid:hover {
  box-shadow: 0 8px 20px rgba(0, 166, 62, 0.3);
}

.ob-redirect-btn--outline {
  border-color: #00c950;
}

/* ---------------------------------------------------------------
   8. VIDEO — colour override (green theme)
--------------------------------------------------------------- */
.ejc-video-section { padding: 2rem 0 6rem; }

.ejc-video-section .ob-video-title span {
  background-image: linear-gradient(172deg, #00c950 0%, #00a63e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ejc-video-section .ob-video-point-icon {
  background: #ccffdf;
  color: #00a63e;
}

.ejc-video-section .ob-video-watch-btn {
  background-image: linear-gradient(168deg, #00c950 0%, #00a63e 100%);
}

.ejc-video-section .ob-video-watch-btn:hover {
  box-shadow: 0 8px 20px rgba(0, 166, 62, 0.3);
}

.ejc-video-section .ob-video-thumb-play {
  background: #00a63e;
}

/* ---------------------------------------------------------------
   9. SAAS PLATFORM / CLOUD FEATURES + APP DOWNLOAD
--------------------------------------------------------------- */
.ejc-cloud-section {
  padding: 5.5rem 0;
}

.ejc-cloud-card {
  background-color: var(--bg-white);
  border-radius: 1.684rem;
  padding: 3.5rem 5.4rem;
}

.ejc-cloud-header {
  text-align: center;
  max-width: 45.5rem;
  margin: 0 auto 3rem;
}

.ejc-cloud-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 2.5rem;
  text-transform: capitalize;
  color: var(--base-dark);
  margin-bottom: 0.6rem;
}

.ejc-cloud-title span { color: #128807; }

.ejc-cloud-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.632rem;
  color: var(--text-sub);
}

.ejc-cloud-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.421rem;
  margin-bottom: 3rem;
}

.ejc-cloud-item {
  background-color: var(--body-bg-white);
  border: 0.053rem solid #acc0d0;
  border-radius: 1.737rem;
  padding: 2.4rem 1.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.474rem;
}

body.dark-theme .ejc-cloud-item{
  border-color: var(--border-gray);
}

.ejc-cloud-item-icon {
  width: 4.895rem;
  height: 4.895rem;
  border-radius: 100rem;
  background-color: #eaf6ef;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dark-theme .ejc-cloud-item-icon{
  background-color: var(--bg-white);
}

.ejc-cloud-item-icon img { width: 2.632rem; height: 2.632rem; }

.ejc-cloud-item-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--base-dark);
}

.ejc-cloud-item-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.474rem;
  color: var(--text-sub);
}

.ejc-app-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.36rem;
}

.ejc-app-download-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.25rem;
  text-transform: capitalize;
  color: var(--base-dark);
}

.ejc-store-btns { display: flex; gap: 0.6rem; }
.ejc-store-btns img { height: 2.9rem; }

@media (max-width: 1200px) {
  .ejc-cloud-card { padding: 3rem 1.8rem; }
  .ejc-cloud-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ejc-cloud-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   10. REVIEWS SECTION spacing
--------------------------------------------------------------- */
.ejc-reviews-section { padding: 6rem 0; }

/* ---------------------------------------------------------------
   11. FAQ — colour override (green theme)
--------------------------------------------------------------- */
.ejc-faq-section .ob-faq-tab.active {
  background: linear-gradient(155deg, #00c950 0%, #00a63e 100%);
}

.ejc-faq-section .ob-faq-accordion .accordion-item.active .accordion-title {
  color: #128807;
}

/* ---------------------------------------------------------------
   12. CTA — colour override (green glow)
--------------------------------------------------------------- */
.ejc-cta-section .bg-cta-glow,
.ejc-cta-section .cta-glow {
  background: radial-gradient(ellipse at center, rgba(0, 136, 7, 0.55) 0%, transparent 70%);
}

.ejc-cta-section {
  background-color: #061a0b;
}

.ejc-cta-section .cta-btn {
  background-image: linear-gradient(168deg, #00c950 0%, #00a63e 100%);
  color: #ffffff;
}

/* ---------------------------------------------------------------
   13. Sticky "Download Brochure" tab — reused from office-buddy.css
--------------------------------------------------------------- */