/* ==========================================================================
   ARABIC CONSULTANT - GLOBAL STYLING & MOBILE RESPONSIVE PRESERVATION
   ========================================================================== */

/* 1. Global Typography & Direction */
html, body {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip !important;
  max-width: 100vw;
  width: 100%;
}

/* 2. Sleek, Professional Sticky Header */
.brix---header-wrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: rgba(8, 12, 20, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.brix---header-container-4 {
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.brix---header-nav-link-4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  transition: color 0.2s ease !important;
  padding: 8px 14px !important;
}

.brix---header-nav-link-4:hover {
  color: #00d2ff !important;
}

.brix---btn-header-4 {
  background: linear-gradient(135deg, #0064ff 0%, #004ecc 100%) !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0, 100, 255, 0.35) !important;
  transition: all 0.2s ease !important;
}

.brix---btn-header-4:hover {
  background: linear-gradient(135deg, #1a75ff 0%, #0059e6 100%) !important;
  transform: translateY(-1px) !important;
}

/* 3. Floating WhatsApp Action Button */
a.brix---header-logo-link-4-copy,
.whatsapp-floating-action-btn {
  position: fixed !important;
  bottom: 28px !important;
  left: 28px !important;
  right: auto !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background-color: #25D366 !important;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45) !important;
  transition: all 0.25s ease !important;
}

a.brix---header-logo-link-4-copy:hover,
.whatsapp-floating-action-btn:hover {
  transform: scale(1.08) translateY(-2px) !important;
}

/* 4. Global Visibility Safeguard */
main, #main-content, .lt-container, .sp-light-container, .sp-light-card, .lt-grid-card {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Footer Grid Fix — keeps all 5 columns in one row on desktop,
   stacks gracefully on mobile. Preserves original Webflow design.
═══════════════════════════════════════════════════════════════════ */

/* Desktop: Force the grid to fit all 5 columns in one row (Only for desktop >= 992px) */
@media screen and (min-width: 992px) {
  .uui-footer05_top-wrapper {
    display: grid !important;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr 1.4fr !important;
    gap: 24px !important;
    align-items: start !important;
    width: 100% !important;
  }
}

/* Tablet/iPad — 3 columns (logo + 2 link lists per row) */
@media (max-width: 1100px) and (min-width: 768px) {
  .uui-footer05_top-wrapper {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 20px !important;
  }
}

/* Mobile — stack vertically */
@media (max-width: 767px) {
  .uui-footer05_top-wrapper {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .down-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .div-block-181 {
    width: auto !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
}

/* Prevent horizontal scroll on all screen sizes */
.uui-footer05_component {
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   Integrations Section (Identical to Homepage)
═══════════════════════════════════════════════════════════════════ */
.section_uui-layout40 {
  background-color: transparent;
  position: relative;
  padding: 60px 20px;
}

.uui-layout40_component {
  flex-direction: column;
  align-items: center;
  display: flex;
  text-align: center;
}

.uui-max-width-large-3 {
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.uui-heading-medium-2 {
  background-image: linear-gradient(135deg, #007bff, #5590eb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 12px;
  text-align: center;
}

.uui-text-size-large {
  font-size: 16px;
  line-height: 1.8;
  color: #64748b;
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
}

.uui-layout40_image-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-columns: 1fr;
  align-items: center;
  justify-items: center;
  display: grid;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 100%;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}

.uui-layout40_image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: transform 0.25s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.04));
}

.uui-layout40_image:hover {
  transform: translateY(-4px) scale(1.1);
}

@media screen and (max-width: 767px) {
  .uui-layout40_image-wrapper {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 20px;
  }
  .uui-layout40_image {
    width: 48px;
    height: 48px;
  }
}

@media screen and (max-width: 479px) {
  .uui-layout40_image-wrapper {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 12px;
    grid-row-gap: 16px;
  }
  .uui-layout40_image {
    width: 42px;
    height: 42px;
  }
}

/* Webflow .nav_icon electricity icon exact styling */
.nav_icon {
  width: 25px !important;
  height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  object-fit: contain !important;
  margin-right: 4px !important;
  display: inline-block !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Header Dropdowns — Smooth Open/Close Animation, Package Icons & Mobile
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

/* 1. Global Font Enforcement across all Dropdown Elements */
.dropdown-3,
.dropdown-3 *,
.dropdown-list-2,
.dropdown-list-2 *,
.dropdown-card-xl,
.dropdown-card-xl *,
.dropdown-card,
.dropdown-card *,
.dropdown-card-xl-copy,
.dropdown-card-xl-copy *,
.navigation-grid-wrap,
.navigation-grid-wrap *,
.navigation-grid-wrap-copy,
.navigation-grid-wrap-copy *,
.dropdown-block-link,
.dropdown-block-link *,
.dropdown-link-3,
.dropdown-link-3 *,
.dropdown-link-3-copy,
.dropdown-link-3-copy *,
.dropdown-integration-link,
.dropdown-integration-link *,
.dropdown-text-link,
.dropdown-text-link *,
.subheading-regular,
.overline-regular,
.paragraph-regular,
.paragraph-small-3,
.text-block-54,
.button-secondary-s {
  font-family: 'Tajawal', system-ui, -apple-system, sans-serif !important;
}

/* 2. Desktop Dropdown Popup & Smooth Opening AND Closing Transitions */
@media screen and (min-width: 992px) {
  .dropdown-3.w-dropdown {
    position: relative;
    cursor: pointer !important;
  }

  /* Disable click events on the toggle button so clicking doesn't lock open */
  .navigation-toggle.w-dropdown-toggle {
    pointer-events: none !important;
    cursor: default !important;
  }

  /* Base state: rendered but hidden with smooth closing transition */
  .dropdown-list-2.w-dropdown-list {
    background: transparent !important;
    padding-top: 14px !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    max-width: 92vw !important;
    z-index: 1000 !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(0.97) !important;
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Smooth Open Animation on Hover */
  .dropdown-3.w-dropdown:hover > .dropdown-list-2.w-dropdown-list {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  /* Smooth Chevron rotation for both open and close */
  .dropdown-3.w-dropdown .dropdown-icon svg {
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .dropdown-3.w-dropdown:hover .dropdown-icon svg {
    transform: rotate(180deg) !important;
  }
}

/* 3. Single Layer Luxury Design */
.dropdown-card-xl,
.dropdown-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 24px 54px -12px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
  padding: 22px !important;
  overflow: visible !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
}

/* Inner wrapper reset — NO double layer */
.dropdown-card-xl-copy {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Desktop widths */
@media screen and (min-width: 992px) {
  .dropdown-card-xl {
    width: 520px !important;
    max-width: 520px !important;
  }

  .dropdown-card {
    width: 680px !important;
    max-width: 680px !important;
  }
}

/* 4. Dropdown 1 (من نحن) Items & Layout */
.navigation-grid-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 12px !important;
}

.navigation-grid-a,
.navigation-grid-b {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.dropdown-block-link {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  min-height: 98px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.dropdown-block-link:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

.paragraph-regular {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  margin-bottom: 4px !important;
}

.paragraph-small-3.text-color-gray-500 {
  color: #64748b !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  text-align: right !important;
}

.dropdown-block-small {
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 6px !important;
}

.caption.text-color-gray-500 {
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.button-secondary-s {
  background: #0064ff !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.button-secondary-s:hover {
  background: #004ecc !important;
  transform: translateX(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 100, 255, 0.3) !important;
}

/* 5. Dropdown 2 (المزيد) — Symmetrical Grid & Modern Package Badges */
.navigation-grid-wrap-copy {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 20px !important;
  display: flex !important;
  align-items: stretch !important;
}

.dropdown-left-column {
  flex: 1.35 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.dropdown-right-column {
  flex: 1 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Hide weird background abstract lines */
.dropdown-background-lines {
  display: none !important;
}

.overline-regular {
  color: #0064ff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 14px !important;
}

/* Symmetrical Services Cards with EXACT Same Height and Width */
.dropdown-links {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

.dropdown-link-3,
.dropdown-link-3-copy {
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  height: 56px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: #0f172a !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dropdown-link-3:hover,
.dropdown-link-3-copy:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateX(-3px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

.dropdown-link-3 .subheading-regular,
.dropdown-link-3-copy .subheading-regular {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.dropdown-link-3 .icon-regular-5,
.dropdown-link-3-copy .icon-regular-5 {
  color: #0064ff !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.column-2x-small {
  display: flex !important;
  align-items: center !important;
}

/* Packages Column with Distinct Beautiful Icons */
.column-x-small {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.dropdown-integration-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.dropdown-integration-link:hover {
  background: #ffffff !important;
  color: #0064ff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transform: translateX(-3px) !important;
}

.row-small {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ac-pkg-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.dropdown-integration-link:hover .ac-pkg-icon {
  transform: scale(1.1) !important;
}

.ac-pkg-blue {
  background: rgba(0, 100, 255, 0.08) !important;
  color: #0064ff !important;
}

.ac-pkg-purple {
  background: rgba(147, 51, 234, 0.08) !important;
  color: #9333ea !important;
}

.ac-pkg-emerald {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
}

.dropdown-text-link {
  color: #0064ff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease !important;
}

.dropdown-text-link:hover {
  color: #004ecc !important;
  transform: translateX(-2px) !important;
}

/* 6. Mobile & Tablet Responsiveness (< 991px) */
@media screen and (max-width: 991px) {
  .dropdown-3.w-dropdown {
    display: block !important;
    width: 100% !important;
  }

  .navigation-toggle.w-dropdown-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 0 !important;
  }

  .dropdown-3.w-dropdown .dropdown-icon svg {
    transition: transform 0.26s ease !important;
  }

  .dropdown-3.w-dropdown.w--open .dropdown-icon svg {
    transform: rotate(180deg) !important;
  }

  .dropdown-list-2.w-dropdown-list {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 16px !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    transform: none !important;
    transition: opacity 0.25s ease !important;
  }

  .dropdown-list-2.w-dropdown-list.w--open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .dropdown-card-xl,
  .dropdown-card {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .dropdown-card-xl-copy {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .navigation-grid-a,
  .navigation-grid-b,
  .dropdown-links {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .dropdown-link-3,
  .dropdown-link-3-copy {
    height: auto !important;
    min-height: 48px !important;
    width: 100% !important;
  }

  .navigation-grid-wrap-copy {
    flex-direction: column !important;
    gap: 14px !important;
  }

  .dropdown-right-column {
    width: 100% !important;
    margin-top: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Pricing Page — Luxury Light Theme, RTL Realignment & Feature Popups
═══════════════════════════════════════════════════════════════════ */

/* 1. Header Button Fix (remove weird load bounce) */
.start-now-button,
.container-168-copy {
  animation: none !important;
  transform: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. Hero Section Refinement */
.ac-pricing-hero-wrapper {
  background: radial-gradient(circle at 50% 10%, rgba(0, 100, 255, 0.05) 0%, #ffffff 75%) !important;
  padding: 80px 24px 60px !important;
  border-bottom: 1px solid #edf2f7 !important;
  text-align: center !important;
}

.ac-pricing-hero-container {
  max-width: 900px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.ac-pricing-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f0f7ff !important;
  border: 1px solid #bfdbfe !important;
  color: #0064ff !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 100, 255, 0.08) !important;
}

.ac-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6) !important;
  animation: acPulseGreen 2s infinite !important;
}

@keyframes acPulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ac-pricing-hero-h1 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  margin-bottom: 18px !important;
  letter-spacing: -0.5px !important;
}

.ac-pricing-hero-sub {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: clamp(15px, 2vw, 17.5px) !important;
  color: #475569 !important;
  line-height: 1.75 !important;
  max-width: 780px !important;
  margin-bottom: 32px !important;
}

.ac-pricing-hero-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-bottom: 36px !important;
}

.ac-hero-cta-btn {
  background: #0064ff !important;
  color: #ffffff !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 20px -4px rgba(0, 100, 255, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ac-hero-cta-btn:hover {
  background: #004ecc !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -4px rgba(0, 100, 255, 0.45) !important;
}

.ac-hero-secondary-btn {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 24px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.ac-hero-secondary-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  transform: translateY(-2px) !important;
}

.ac-hero-trust-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  padding-top: 14px !important;
  border-top: 1px dashed #e2e8f0 !important;
  width: 100% !important;
}

.ac-trust-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

/* 3. 100% Uniform RTL Alignment for EVERY Feature Row */
.button-dialog {
  cursor: pointer !important;
  width: 100% !important;
  text-decoration: none !important;
}

.button-dialog .component-9 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  direction: rtl !important;
  width: 100% !important;
  text-align: right !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
  box-sizing: border-box !important;
}

.button-dialog:hover .component-9 {
  background-color: rgba(0, 100, 255, 0.05) !important;
  transform: translateX(-2px) !important;
}

/* Checkmark/Cross container ALWAYS comes FIRST (order: 1) on the FAR RIGHT in RTL */
.button-dialog .component-9 > .svgmargin,
.button-dialog .component-9 > .beforemargin,
.button-dialog .component-9 > .beforemargin-2 {
  order: 1 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.button-dialog .component-9 > .svgmargin img,
.button-dialog .component-9 > .beforemargin img,
.button-dialog .component-9 > .beforemargin-2 img {
  width: 16px !important;
  height: 16px !important;
}

/* All Text and Badge containers ALWAYS come SECOND (order: 2) to the LEFT of checkmark */
.button-dialog .component-9 > div:not(.svgmargin):not(.beforemargin):not(.beforemargin-2) {
  order: 2 !important;
  flex: 1 !important;
  text-align: right !important;
  direction: rtl !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.button-dialog .component-9 .text-284 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-align: right !important;
  direction: rtl !important;
  line-height: 1.5 !important;
  transition: color 0.15s ease !important;
}

.button-dialog:hover .component-9 .text-284 {
  color: #0064ff !important;
}

/* Badge (e.g. استضافة لمدة 12 شهر) */
.button-dialog .component-9 .overlay {
  margin-top: 4px !important;
}

.button-dialog .component-9 .text-285 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

/* 4. Feature Explanation Popup Styling (Centered modal dialog) */
.ac-feature-popup-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
  direction: rtl !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.ac-feature-popup-overlay.ac-popup-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.ac-feature-popup {
  background: #ffffff !important;
  border-radius: 22px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  max-width: 480px !important;
  padding: 26px !important;
  box-sizing: border-box !important;
  transform: scale(0.94) translateY(10px) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s !important;
  direction: rtl !important;
  text-align: right !important;
  position: relative !important;
  margin: auto !important;
  font-family: 'Tajawal', system-ui, -apple-system, sans-serif !important;
}

.ac-feature-popup-overlay.ac-popup-active .ac-feature-popup {
  transform: scale(1) translateY(0) !important;
}

.ac-popup-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.ac-popup-category {
  background: #eff6ff !important;
  color: #0064ff !important;
  border: 1px solid #bfdbfe !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.ac-popup-close-btn {
  background: #f1f5f9 !important;
  border: none !important;
  color: #64748b !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.ac-popup-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: scale(1.1) !important;
}

.ac-popup-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0064ff !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.4 !important;
}

.ac-popup-body {
  margin-bottom: 20px !important;
}

.ac-popup-desc {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #334155 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.ac-popup-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 14px !important;
  margin-top: 6px !important;
}

.ac-popup-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #059669 !important;
}

.ac-popup-ask-link {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #0064ff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.ac-popup-ask-link:hover {
  color: #004ecc !important;
  transform: translateX(-3px) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   Advantages & Value Proposition Section — Refined & Borderless
═══════════════════════════════════════════════════════════════════ */
.ac-advantages-section {
  padding: 75px 24px 60px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #edf2f7 !important;
  direction: rtl !important;
  text-align: center !important;
}

.ac-advantages-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.ac-advantages-header {
  max-width: 760px !important;
  margin: 0 auto 48px !important;
}

.ac-section-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #0064ff !important;
  padding: 5px 16px !important;
  border-radius: 999px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

.ac-advantages-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: clamp(24px, 3.2vw, 34px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.5px !important;
}

.ac-advantages-subtitle {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15.5px !important;
  color: #64748b !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Borderless Centered Grid with Generous Spacing */
.ac-advantages-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 40px 32px !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  direction: rtl !important;
}

/* Completely Borderless Card with Scroll Entrance (No hover jumps) */
.ac-adv-card {
  flex: 0 1 230px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  cursor: default !important;

  /* Scroll entrance animation */
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

/* Animated state triggered on scroll into view */
.ac-adv-card.ac-animated {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Clean Icon Wrapper — Zero border, zero background */
.ac-adv-icon-wrap {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
}

/* Sleeker, refined icon size: 50x50 (not oversized) */
.ac-adv-icon {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  transform: none !important;
  transition: none !important;
}

/* STRICTLY NO HOVER ANIMATIONS */
.ac-adv-card:hover,
.ac-adv-card:hover .ac-adv-icon,
.ac-adv-card:hover .ac-adv-icon-wrap,
.ac-adv-card:hover .ac-adv-title {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Refined, compact blue title — Proportional (17px, not huge) */
.ac-adv-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #2563eb !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Compact, clean description — proportional and elegant */
.ac-adv-desc {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: center !important;
  max-width: 220px !important;
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
  .ac-advantages-section {
    padding: 50px 16px 36px !important;
  }

  .ac-advantages-grid {
    gap: 32px 16px !important;
  }

  .ac-adv-card {
    flex: 0 1 100% !important;
    max-width: 300px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   Pricing Page — Natural Arabic Price Order & Refined Executive Typography
═══════════════════════════════════════════════════════════════════ */

/* 1. Natural Arabic Reading Order for Prices: (3200 on right, ريال in middle, / سعودي on left) */
.container-191 {
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
}

.container-191 > .container-192 {
  order: 1 !important;
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 5px !important;
}

/* Child 2 in container-192 is the number (e.g. 950, 1850, 3200) -> order: 1 (FAR RIGHT) */
.container-192 > div:nth-child(2) {
  order: 1 !important;
}

/* Child 1 in container-192 is 'ريال' -> order: 2 (LEFT of number) */
.container-192 > div:nth-child(1) {
  order: 2 !important;
}

/* In container-191, the suffix '/ سعودي' -> order: 2 (LEFT of container-192) */
.container-191 > .heading-6,
.container-191 > div:not(.container-192) {
  order: 2 !important;
}

/* 2. Perfectly Balanced "وسط" Card Typography (Neither oversized nor too small) */

/* Card Plan Titles (الأساسية، الاحترافية، للشركات، الاعمال) */
.text-272 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  text-align: center !important;
  margin-bottom: 2px !important;
}

.text-272 strong {
  font-weight: 800 !important;
}

/* Plan Subtitle / Description */
.untitled-6,
.text-273 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

/* Strikethrough Original Price (1250 ريال، 2100 ريال، 4000 ريال) */
.text-276 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ef4444 !important;
  text-decoration: line-through !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}

/* Main Price Number — Balanced medium 36px (prominent and clear) */
.text-279 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #0064ff !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
}

/* 'ريال' Currency */
.text-278 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1 !important;
}

/* '/ سعودي' Suffix */
.text-277 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1 !important;
}

/* Price Frequency Note (تدفع مرة واحدة) */
.text-274 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-align: center !important;
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}

/* Card 4 Custom Price (يحدد عند التواصل) */
.text-278-copy {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0064ff !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Most Popular Badge (الأكثر طلباً) */
.text-282 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Plan Card CTA Button */
.container-168-copy-copy-copy,
.component-34.w-button {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  text-align: center !important;
}

/* 3. Balanced Feature Table Typography */

/* Category Header Titles (الخدمات الاساسية، الخدمات المتقدمة...) */
.text-283 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  text-align: right !important;
}

/* Feature Item Row Text — 15.5px with clean weight 600 */
.button-dialog .component-9 .text-284 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-align: right !important;
  direction: rtl !important;
  line-height: 1.55 !important;
}

/* Feature Badges (استضافة لمدة 12 شهر، بريد إلكتروني واحد...) */
.button-dialog .component-9 .text-285 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #c2410c !important;
}

.button-dialog .component-9 .overlay {
  background: #ffedd5 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  margin-top: 4px !important;
}

/* Main Pricing Header */
.heading-203 .text-296 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.heading-216 .text-297 {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-align: center !important;
}

.heading-216 .untitled {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0064ff !important;
}

/* Hide the dark "الأسعار" badge */
.heading-2margin,
.heading-215,
.text-295 {
  display: none !important;
}

/* Staggered Scroll Animation for 4 Pricing Cards */
.list-12 .list > div.ac-pricing-card-init {
  opacity: 0;
  transform: translateY(38px) scale(0.97);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.list-12 .list > div.ac-pricing-card-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}



/* ═══════════════════════════════════════════════════════════════════
   Pricing Conversion Boosters (Delivery Pills, FAQ Accordion, WhatsApp Callout)
═══════════════════════════════════════════════════════════════════ */

/* 1. Delivery Time Pill */
.ac-delivery-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #f0f7ff !important;
  border: 1px solid #dbeafe !important;
  color: #1d4ed8 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin: 4px auto 14px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.ac-delivery-pill svg {
  flex-shrink: 0 !important;
}

/* 2. FAQ Accordion Section */
.ac-pricing-faq-section {
  padding: 85px 24px 70px !important;
  background: #ffffff !important;
  border-top: 1px solid #edf2f7 !important;
  direction: rtl !important;
  text-align: right !important;
}

.ac-faq-container {
  max-width: 860px !important;
  margin: 0 auto !important;
}

.ac-faq-header {
  text-align: center !important;
  margin-bottom: 48px !important;
}

.ac-faq-tag {
  display: inline-flex !important;
  align-items: center !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #0064ff !important;
  padding: 5px 16px !important;
  border-radius: 999px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

.ac-faq-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: clamp(26px, 3.5vw, 36px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
}

.ac-faq-subtitle {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15.5px !important;
  color: #64748b !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* FAQ Items */
.ac-faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.ac-faq-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
}

.ac-faq-item:hover {
  border-color: #cbd5e1 !important;
}

.ac-faq-item.ac-faq-active {
  border-color: #93c5fd !important;
  box-shadow: 0 4px 16px rgba(0, 100, 255, 0.05) !important;
}

.ac-faq-question {
  width: 100% !important;
  padding: 18px 22px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-align: right !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.ac-faq-item.ac-faq-active .ac-faq-question {
  color: #0064ff !important;
}

.ac-faq-chevron {
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease !important;
}

.ac-faq-item.ac-faq-active .ac-faq-chevron {
  transform: rotate(180deg) !important;
  color: #0064ff !important;
}

.ac-faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease !important;
  padding: 0 22px !important;
}

.ac-faq-item.ac-faq-active .ac-faq-answer {
  max-height: 250px !important;
  padding: 0 22px 20px !important;
}

.ac-faq-answer p {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* 3. Direct WhatsApp Consultation Callout Banner */
.ac-pricing-consultation-wrap {
  margin-top: 60px !important;
}

.ac-pricing-consultation-banner {
  background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 20px !important;
  padding: 36px 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  text-align: right !important;
  box-shadow: 0 10px 30px -5px rgba(0, 100, 255, 0.08) !important;
}

.ac-consult-content {
  flex: 1 !important;
}

.ac-consult-badge {
  display: inline-block !important;
  background: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  color: #0064ff !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.ac-consult-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.35 !important;
}

.ac-consult-desc {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.ac-consult-btn {
  background: #0064ff !important;
  color: #ffffff !important;
  padding: 13px 26px !important;
  border-radius: 12px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 20px -3px rgba(0, 100, 255, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.ac-consult-btn:hover {
  background: #004ecc !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -3px rgba(0, 100, 255, 0.45) !important;
}

/* Responsive consultation banner */
@media screen and (max-width: 900px) {
  .ac-pricing-consultation-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 28px 24px !important;
    gap: 22px !important;
  }

  .ac-consult-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   Fix Card Order, Card 2 Button Clipping, & Button Text Vertical Centering
═══════════════════════════════════════════════════════════════════ */

/* 1. Correct RTL Card Order (الأساسية on FAR RIGHT, الاعمال on FAR LEFT) */
.list-12 .list {
  direction: rtl !important;
}

/* Child 4 in HTML is الأساسية -> order 1 (Far Right in RTL) */
.list-12 .list > div:nth-child(4) {
  order: 1 !important;
}

/* Child 3 in HTML is الاحترافية -> order 2 (Second from Right) */
.list-12 .list > div:nth-child(3) {
  order: 2 !important;
}

/* Child 2 in HTML is للشركات -> order 3 (Third) */
.list-12 .list > div:nth-child(2) {
  order: 3 !important;
}

/* Child 1 in HTML is الاعمال -> order 4 (Far Left in RTL) */
.list-12 .list > div:nth-child(1) {
  order: 4 !important;
}

/* 2. Fix Card Heights & Overflow (Including Card 2 backgroundhorizontalbordershadow-2) */
.list-12 .backgroundhorizontalbordershadow,
.list-12 .backgroundhorizontalbordershadow-2 {
  height: auto !important;
  min-height: 395px !important;
  overflow: visible !important;
  padding: 24px 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.list-12 .backgroundshadow-5,
.list-12 .backgroundshadow-6 {
  height: auto !important;
  overflow: visible !important;
}

.list-12 .component-7,
.list-12 .component-7-copy {
  height: auto !important;
  overflow: visible !important;
}

.list-12 .container-179,
.list-12 .container-187,
.list-12 .container-188,
.list-12 .container-202 {
  height: auto !important;
  overflow: visible !important;
}

/* 3. Perfect Button Alignment & Centered Arabic Text */
.list-12 .container-168-copy-copy-copy,
.list-12 .component-34.w-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 20px !important;
  margin-top: 10px !important;
  margin-bottom: 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  position: relative !important;
  z-index: 10 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Delivery Pill margin adjustment */
.ac-delivery-pill {
  margin: 8px auto 4px !important;
}

/* Hide empty Webflow template artifacts in pricing list */
.list-12 .list > .itemmargin-2 {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   Header Navigation Active Page Styling (White Default + Classic Royal Blue #0064ff Active)
═══════════════════════════════════════════════════════════════════ */

/* Default navigation links: Pure White on dark background */
.navigation-menu .nav-link-13,
.navigation-menu a.w-nav-link,
.navigation-menu .navigation-toggle,
.navigation-menu .navigation-toggle .text-block-54,
.navigation-menu .dropdown-icon {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}

.navigation-menu .dropdown-icon svg path {
  stroke: #ffffff !important;
}

/* Hover state: Brand Royal Blue */
.navigation-menu .nav-link-13:hover,
.navigation-menu a.w-nav-link:hover,
.navigation-menu .navigation-toggle:hover .text-block-54 {
  color: #0064ff !important;
}

/* Active page link: Classic Solid Brand Royal Blue (#0064ff) + Bold */
.navigation-menu .nav-link-13.w--current,
.navigation-menu a.w-nav-link.w--current,
.navigation-menu .nav-link-13.ac-nav-active,
.navigation-menu a.w-nav-link.ac-nav-active {
  font-weight: 800 !important;
  color: #0064ff !important;
}

.dropdown-3.ac-nav-active .navigation-toggle .text-block-54 {
  font-weight: 800 !important;
  color: #0064ff !important;
}

.dropdown-3.ac-nav-active .dropdown-icon svg path {
  stroke: #0064ff !important;
}


/* ═══════════════════════════════════════════════════════════════════
   Advantages Page — Complete Redesign Styles (Comprehensive & Detailed)
═══════════════════════════════════════════════════════════════════ */

/* 1. Distinct Sleek Dark Hero */
.ac-adv-dark-hero {
  background: radial-gradient(circle at 50% 0%, #0c1a30 0%, #030816 100%) !important;
  padding: 100px 24px 90px !important;
  text-align: center !important;
  direction: rtl !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ac-adv-dark-hero-container {
  max-width: 860px !important;
  margin: 0 auto !important;
}

.ac-adv-dark-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: clamp(30px, 4.4vw, 48px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  margin: 0 0 20px 0 !important;
}

.ac-adv-accent-text {
  color: #0064ff !important;
}

.ac-adv-dark-subtitle {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #cbd5e1 !important;
  line-height: 1.8 !important;
  max-width: 760px !important;
  margin: 0 auto 36px !important;
}

.ac-adv-dark-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.ac-adv-btn-blue {
  background: #0064ff !important;
  color: #ffffff !important;
  padding: 13px 32px !important;
  border-radius: 10px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(0, 100, 255, 0.35) !important;
}

.ac-adv-btn-blue:hover {
  background: #004ecc !important;
  transform: translateY(-2px) !important;
}

.ac-adv-btn-outline {
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 13px 30px !important;
  border-radius: 10px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.ac-adv-btn-outline:hover {
  background: #f1f5f9 !important;
}

/* 2. Core Pillars Section */
.ac-adv-pillars-section {
  padding: 90px 24px !important;
  background: #f8fafc !important;
  direction: rtl !important;
}

.ac-adv-pillars-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.ac-adv-section-header {
  text-align: center !important;
  margin-bottom: 50px !important;
}

.ac-adv-badge {
  display: inline-block !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #0064ff !important;
  padding: 4px 16px !important;
  border-radius: 999px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

.ac-adv-section-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: clamp(28px, 3.8vw, 38px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin: 0 0 12px 0 !important;
}

.ac-adv-section-subtitle {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 16.5px !important;
  color: #64748b !important;
  line-height: 1.65 !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

.ac-adv-pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

.ac-pillar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 36px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: right !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s ease !important;
}

.ac-pillar-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(0, 100, 255, 0.08) !important;
  border-color: #bfdbfe !important;
}

.ac-pillar-icon-wrap {
  width: 58px !important;
  height: 58px !important;
  border-radius: 14px !important;
  background: #eff6ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 22px !important;
}

.ac-pillar-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.35 !important;
}

.ac-pillar-desc {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  margin: 0 0 20px 0 !important;
}

.ac-pillar-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  border-top: 1px dashed #e2e8f0 !important;
  padding-top: 18px !important;
}

.ac-pillar-checklist li {
  position: relative !important;
  padding-right: 20px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.5 !important;
}

.ac-pillar-checklist li::before {
  content: "•" !important;
  position: absolute !important;
  right: 0 !important;
  color: #0064ff !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

/* 3. Deep-Dive Detailed 6-Box Grid */
.ac-adv-deepdive-section {
  padding: 95px 24px !important;
  background: #ffffff !important;
  direction: rtl !important;
  border-top: 1px solid #edf2f7 !important;
}

.ac-adv-deepdive-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.ac-adv-grid-detailed {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

.ac-detailed-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: right !important;
  transition: all 0.25s ease !important;
}

.ac-detailed-box:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-3px) !important;
}

.ac-detailed-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.ac-detailed-num {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  letter-spacing: 1px !important;
}

.ac-detailed-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #eff6ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ac-detailed-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.4 !important;
}

.ac-detailed-text {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  margin: 0 0 20px 0 !important;
  flex: 1 !important;
}

.ac-detailed-footer-tag {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0064ff !important;
  background: #f0f7ff !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  text-align: center !important;
}

/* 4. Project Quality Lifecycle */
.ac-adv-process-section {
  padding: 90px 24px !important;
  background: #f8fafc !important;
  direction: rtl !important;
  border-top: 1px solid #edf2f7 !important;
}

.ac-adv-process-container {
  max-width: 1140px !important;
  margin: 0 auto !important;
}

.ac-process-timeline {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.ac-process-step {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  position: relative !important;
  text-align: right !important;
}

.ac-step-badge {
  width: 36px !important;
  height: 36px !important;
  background: #0064ff !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
}

.ac-step-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.35 !important;
}

.ac-step-desc {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* 5. Comparison Section */
.ac-adv-comparison-section {
  padding: 95px 24px !important;
  background: #ffffff !important;
  border-top: 1px solid #edf2f7 !important;
  direction: rtl !important;
}

.ac-adv-comparison-container {
  max-width: 1160px !important;
  margin: 0 auto !important;
}

.ac-adv-comparison-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
}

.ac-comp-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  position: relative !important;
  text-align: right !important;
}

.ac-comp-winner {
  border: 2px solid #0064ff !important;
  box-shadow: 0 10px 30px -5px rgba(0, 100, 255, 0.12) !important;
}

.ac-comp-other {
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

.ac-comp-badge {
  position: absolute !important;
  top: -14px !important;
  right: 32px !important;
  background: #0064ff !important;
  color: #ffffff !important;
  padding: 4px 16px !important;
  border-radius: 999px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

.ac-badge-gray {
  background: #64748b !important;
}

.ac-comp-header {
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.ac-comp-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.ac-comp-name {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.ac-comp-summary {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  color: #64748b !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.ac-comp-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.ac-comp-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.ac-comp-icon-box {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.ac-icon-check {
  background: #ecfdf5 !important;
}

.ac-icon-cross {
  background: #fef2f2 !important;
}

.ac-comp-item-content {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  color: #334155 !important;
  line-height: 1.6 !important;
}

.ac-comp-item-content strong {
  color: #0f172a !important;
}

/* 6. Advantages FAQ Section */
.ac-adv-faq-section {
  padding: 95px 24px !important;
  background: #f8fafc !important;
  border-top: 1px solid #edf2f7 !important;
  direction: rtl !important;
}

.ac-adv-faq-container {
  max-width: 900px !important;
  margin: 0 auto !important;
}

.ac-faq-accordion-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.ac-faq-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.ac-faq-item:hover {
  border-color: #cbd5e1 !important;
}

.ac-faq-question {
  width: 100% !important;
  background: none !important;
  border: none !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: right !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  cursor: pointer !important;
}

.ac-faq-icon {
  transition: transform 0.25s ease !important;
  color: #0064ff !important;
  flex-shrink: 0 !important;
}

.ac-faq-item.active .ac-faq-icon {
  transform: rotate(180deg) !important;
}

.ac-faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease !important;
  padding: 0 24px !important;
}

.ac-faq-item.active .ac-faq-answer {
  max-height: 300px !important;
  padding-bottom: 20px !important;
}

.ac-faq-answer p {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #475569 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* 7. Direct WhatsApp Callout Banner */
.ac-adv-cta-section {
  padding: 60px 24px 70px !important;
  background: #ffffff !important;
  direction: rtl !important;
  border-top: 1px solid #edf2f7 !important;
}

.ac-adv-cta-container {
  max-width: 1040px !important;
  margin: 0 auto !important;
}

.ac-adv-cta-banner {
  background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 22px !important;
  padding: 40px 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  text-align: right !important;
  box-shadow: 0 10px 30px -5px rgba(0, 100, 255, 0.08) !important;
}

.ac-adv-cta-content {
  flex: 1 !important;
}

.ac-adv-cta-badge {
  display: inline-block !important;
  background: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  color: #0064ff !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.ac-adv-cta-title {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.35 !important;
}

.ac-adv-cta-desc {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.ac-adv-cta-btn {
  background: #0064ff !important;
  color: #ffffff !important;
  padding: 14px 28px !important;
  border-radius: 12px !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 20px -3px rgba(0, 100, 255, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.ac-adv-cta-btn:hover {
  background: #004ecc !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -3px rgba(0, 100, 255, 0.45) !important;
}

/* Responsive adjustments */
@media screen and (max-width: 991px) {
  .ac-adv-pillars-grid,
  .ac-adv-grid-detailed,
  .ac-process-timeline,
  .ac-adv-comparison-grid {
    grid-template-columns: 1fr !important;
  }
  .ac-adv-cta-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 30px 24px !important;
  }
  .ac-adv-cta-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Hide floating whatsapp button */
a.link-block-35,
.whatsapp-floating-action-btn,
a.brix---header-logo-link-4-copy {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ── Enforce Strict RTL & Right Alignment on Dropdown Cards ── */
.dropdown-3,
.dropdown-list-2,
.dropdown-card-xl,
.navigation-grid-wrap,
.navigation-grid-a,
.navigation-grid-b,
.dropdown-block-link,
.dropdown-block-link * {
  direction: rtl !important;
  text-align: right !important;
}

.dropdown-list-2.w-dropdown-list {
  right: 0 !important;
  left: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Train Bridge Animation & Dark Footer Seamless Connection
   Eliminates all white gaps/lines under the train bridge
   ═══════════════════════════════════════════════════════════════════ */
.service-section {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.service-section .relative {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: #060911 !important;
  overflow: hidden !important;
}

.random-train-lottie {
  display: block !important;
  margin-top: 60px !important;
  margin-bottom: -15px !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
}

.random-train-lottie svg {
  display: block !important;
  vertical-align: bottom !important;
  margin-bottom: -12px !important;
  width: 100% !important;
}

.logout-interface {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.uui-footer05_component {
  margin-top: -15px !important;
  position: relative !important;
  z-index: 5 !important;
  background: #060911 !important;
}



/* ==========================================================================
   PRODUCTION PRECISION FIXES: 5-COL FOOTER, CLEAN WHATSAPP, NO WHITE GAP
   ========================================================================== */

/* 1. Eliminate White Gap above Footer */
.service-section,
.combine-section_contact4,
.combine-padding-global-4,
.combine-container-large-2,
.relative {
  background: transparent !important;
  background-color: transparent !important;
}

.gradient-div {
  display: none !important;
  background: transparent !important;
}

/* 2. Floating WhatsApp Icon (Bottom-Right, Compact Luxury Circular Icon) */
.ms-iframe,
#whatsapp-floating-btn {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  left: auto !important;
  z-index: 99999 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.brix---header-logo-link-4-copy,
.whatsapp-float-btn {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #25D366 0%, #1ea952 100%) !important;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.brix---header-logo-link-4-copy:hover,
.whatsapp-float-btn:hover {
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 12px 35px rgba(37, 211, 102, 0.65) !important;
}

.brix---header-logo-link-4-copy .text-block-50-copy,
.whatsapp-float-btn .text-block-50-copy {
  display: none !important;
}

.brix---header-logo-link-4-copy .image-75-copy,
.whatsapp-float-btn svg,
.whatsapp-float-btn img {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
}

/* 3. Perfect 5-Column Desktop Footer & Aligned Responsive Grid */
.uui-footer05_component {
  background: #060911 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
}

.uui-footer05_top-wrapper {
  display: grid !important;
  grid-template-columns: 2fr 1.1fr 1.1fr 1.1fr 1.4fr !important;
  gap: 32px !important;
  align-items: flex-start !important;
  padding-bottom: 44px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  direction: rtl !important;
  text-align: right !important;
}

@media (max-width: 1100px) and (min-width: 992px) {
  .uui-footer05_top-wrapper {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 991px) {
  .uui-footer05_top-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 28px !important;
  }
  .uui-logo_component {
    grid-column: 1 / -1 !important;
  }
  .uui-footer05_link-list,
  .uui-footer05_link-list-copy {
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
    text-align: right !important;
  }
}

@media (max-width: 540px) {
  .uui-footer05_top-wrapper {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}


/* ==========================================================================
   PRECISION FIXES: BLUE ICONS IN 'من نحن' & SEAMLESS LOTTIE ANIMATION
   ========================================================================== */

/* 1. Header Dropdown 'من نحن' - Vibrant Blue Icons */
.dropdown-card-xl .ac-dropdown-item-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
  background: rgba(0, 100, 255, 0.12) !important;
  border: 1px solid rgba(0, 100, 255, 0.28) !important;
  color: #0064ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: all 0.25s ease !important;
}

.dropdown-card-xl .ac-dropdown-item-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #0064ff !important;
  color: #0064ff !important;
  transition: all 0.25s ease !important;
}

.dropdown-card-xl .dropdown-block-link:hover .ac-dropdown-item-icon {
  background: #0064ff !important;
  border-color: #0064ff !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(0, 100, 255, 0.4) !important;
}

.dropdown-card-xl .dropdown-block-link:hover .ac-dropdown-item-icon svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Communication icons under 'هل لديك اسئلة او استفسارات؟' */
.dropdown-card-xl .ac-comm-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0064ff 0%, #00d2ff 100%) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 100, 255, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dropdown-card-xl .ac-comm-icon svg {
  width: 15px !important;
  height: 15px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.dropdown-card-xl .ac-comm-icon:hover {
  transform: translateY(-2px) scale(1.15) !important;
  box-shadow: 0 4px 14px rgba(0, 100, 255, 0.5) !important;
}

/* 2. Completely Eliminate Spaces Above & Below Lottie Train Animation */
.service-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: transparent !important;
}

.service-section .relative,
.service-section .combine-section_contact4,
.service-section .combine-padding-global-4,
.service-section .combine-container-large-2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden !important;
}

.random-train-lottie {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

.random-train-lottie svg {
  display: block !important;
  vertical-align: bottom !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
}

.gradient-div {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove border line above footer to prevent thin white strip */
.uui-footer05_component {
  margin-top: 0 !important;
  border-top: none !important;
}


/* ==========================================================================
   PERFECT SEAMLESS TRANSITION BETWEEN LOTTIE ANIMATION AND FOOTER (0px GAP)
   ========================================================================== */

.logout-interface {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-wrapper {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}

.service-section {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden !important;
}

.service-section .relative {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden !important;
}

.random-train-lottie {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

.random-train-lottie svg {
  display: block !important;
  vertical-align: bottom !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
}

.combine-section_contact4,
.combine-padding-global-4,
.combine-container-large-2 {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gradient-div {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.uui-footer05_component {
  margin-top: -1px !important;
  border-top: none !important;
  background: #060911 !important;
  box-shadow: none !important;
}


/* ==========================================================================
   SEAMLESS LOTTIE BRIDGE TO FOOTER TRANSITION (COVERS WHITE BASE BAND)
   ========================================================================== */

.uui-footer05_component {
  margin-top: -45px !important;
  position: relative !important;
  z-index: 10 !important;
  border-top: none !important;
  background: #060911 !important;
  box-shadow: none !important;
}

.random-train-lottie {
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
}

.random-train-lottie svg {
  display: block !important;
  vertical-align: bottom !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
}

.service-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

.service-section .relative {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

.gradient-div,
.combine-section_contact4,
.combine-padding-global-4,
.combine-container-large-2 {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
   'من نحن' DROPDOWN REFINEMENTS: PROPER SPACING & SOLID BLUE COMM ICONS
   ========================================================================== */

.dropdown-card-xl .wrap-h-x-small {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  direction: rtl !important;
}

.dropdown-card-xl .ac-dropdown-item-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
  background: rgba(0, 100, 255, 0.12) !important;
  border: 1px solid rgba(0, 100, 255, 0.28) !important;
  color: #0064ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 0 0 14px !important;
  transition: all 0.25s ease !important;
}

.dropdown-card-xl .ac-dropdown-item-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #0064ff !important;
  color: #0064ff !important;
  transition: all 0.25s ease !important;
}

.dropdown-card-xl .paragraph-regular {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-left: 12px !important;
}

.dropdown-card-xl .dropdown-block-link:hover .ac-dropdown-item-icon {
  background: #0064ff !important;
  border-color: #0064ff !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(0, 100, 255, 0.4) !important;
}

.dropdown-card-xl .dropdown-block-link:hover .ac-dropdown-item-icon svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* 3 Communication icons (bottom-left) - Solid Blue, Crisp White Icons, No Gradient */
.dropdown-card-xl .ac-comm-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: #0064ff !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 100, 255, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dropdown-card-xl .ac-comm-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  stroke-width: 2.3px !important;
  fill: none !important;
}

.dropdown-card-xl .ac-comm-icon:hover {
  background: #0052d4 !important;
  transform: translateY(-2px) scale(1.15) !important;
  box-shadow: 0 5px 16px rgba(0, 100, 255, 0.6) !important;
}