/* ==========================================================================
   ARABIC CONSULTANT - MASTER DARK DESIGN SYSTEM & PRODUCTION ENHANCEMENTS
   ========================================================================== */

/* ?? 1. Root Tokens & Typography ?? */
:root {
  --ac-bg-dark: #080c14;
  --ac-bg-card: #0d1322;
  --ac-bg-card-hover: #121a2e;
  --ac-primary: #0064ff;
  --ac-primary-glow: rgba(0, 100, 255, 0.35);
  --ac-cyan: #00d2ff;
  --ac-cyan-glow: rgba(0, 210, 255, 0.25);
  --ac-whatsapp: #25D366;
  --ac-whatsapp-glow: rgba(37, 211, 102, 0.45);
  --ac-text-primary: #ffffff;
  --ac-text-secondary: rgba(255, 255, 255, 0.85);
  --ac-text-muted: rgba(255, 255, 255, 0.6);
  --ac-border: rgba(255, 255, 255, 0.09);
  --ac-border-hover: rgba(0, 100, 255, 0.4);
  --ac-font: 'Tajawal', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
  --ac-radius-sm: 8px;
  --ac-radius-md: 14px;
  --ac-radius-lg: 22px;
  --ac-radius-full: 9999px;
  --ac-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ?? 2. Global Base & RTL ?? */
html {
  direction: rtl !important;
  text-align: right !important;
  scroll-behavior: smooth !important;
  background-color: var(--ac-bg-dark) !important;
  color: var(--ac-text-primary) !important;
}

body, .body-25 {
  font-family: var(--ac-font) !important;
  background-color: var(--ac-bg-dark) !important;
  color: var(--ac-text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip !important;
  overflow-y: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide Top-Bar "We Stand With" banner */
.brix---top-bar-wrapper-4 {
  display: none !important;
}

/* ?? 3. Sticky Luxury Glass Header ?? */
.navbar-16, header.navbar-16 {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background: rgba(8, 12, 20, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6) !important;
  transition: all var(--ac-transition) !important;
}

.navigation-12 {
  background: transparent !important;
  background-image: none !important;
}

.navigation-container-5 {
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  height: 74px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.navigation-links {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nav-link-13 {
  color: var(--ac-text-secondary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: var(--ac-radius-sm) !important;
  transition: all var(--ac-transition) !important;
  text-decoration: none !important;
}

.nav-link-13:hover,
.nav-link-13.w--current {
  color: #ffffff !important;
  background: rgba(0, 100, 255, 0.15) !important;
  box-shadow: 0 0 16px rgba(0, 100, 255, 0.2) !important;
}

.dropdown-toggle-3 {
  color: var(--ac-text-secondary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: var(--ac-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all var(--ac-transition) !important;
  cursor: pointer !important;
}

.dropdown-toggle-3:hover,
.dropdown-2.w--open .dropdown-toggle-3 {
  color: #ffffff !important;
  background: rgba(0, 100, 255, 0.15) !important;
}

/* ?? 4. Dropdown / Mega-Menu Luxury Dark Styling (100% FIXED) ?? */
.w-dropdown {
  position: relative !important;
}

.dropdown-list-2,
.w-dropdown-list,
.uui-navbar03_dropdown-list-2,
.uui-navbar03_dropdown-list-2-copy {
  background: transparent !important;
  background-color: transparent !important;
  padding-top: 12px !important;
  border: none !important;
  box-shadow: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  z-index: 100000 !important;
}

/* 4. Dropdown Mega-Menu Styling & Blue Icons */
.wrap-h-x-small {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

.ac-dropdown-item-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: rgba(0, 100, 255, 0.12) !important;
  color: #0064ff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  margin-right: 0 !important;
  border: 1px solid rgba(0, 100, 255, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

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

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

/* Communication badges under "هل لديك اسئلة او استفسارات؟" */
.integration-icon-wrap {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 0 !important;
  margin-left: 12px !important;
}

.ac-comm-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #0064ff 0%, #004ecc 100%) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 100, 255, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.integration-icon-wrap .ac-comm-icon + .ac-comm-icon {
  margin-right: -8px !important;
}

.ac-comm-icon:hover {
  transform: translateY(-2px) scale(1.18) !important;
  z-index: 5 !important;
  box-shadow: 0 4px 14px rgba(0, 100, 255, 0.55) !important;
}

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

/* ?? 5. Primary Buttons & CTAs ?? */
.start-now-button,
.container-168-copy,
.button-primary-large,
.button-primary-main {
  background: linear-gradient(135deg, #0064ff 0%, #004ecc 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--ac-radius-sm) !important;
  padding: 12px 26px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-family: var(--ac-font) !important;
  box-shadow: 0 4px 20px var(--ac-primary-glow) !important;
  cursor: pointer !important;
  transition: all var(--ac-transition) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.start-now-button:hover,
.container-168-copy:hover,
.button-primary-large:hover {
  background: linear-gradient(135deg, #1a75ff 0%, #0059e6 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0, 100, 255, 0.55) !important;
}

/* ?? 6. RTL Floating WhatsApp Button ?? */
.ms-iframe {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  left: auto !important;
  z-index: 99999 !important;
  margin: 0 !important;
}

.brix---header-logo-link-4-copy {
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #25D366 0%, #1ea952 100%) !important;
  color: #ffffff !important;
  border-radius: var(--ac-radius-full) !important;
  padding: 12px 22px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 30px var(--ac-whatsapp-glow), 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  transition: all var(--ac-transition) !important;
  gap: 10px !important;
}

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

.div-block-59, .div-block-60 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-direction: row-reverse !important;
}

.image-75-copy {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.text-block-50-copy {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  font-family: var(--ac-font) !important;
}

@media (max-width: 767px) {
  .ms-iframe {
    bottom: 20px !important;
    right: 20px !important;
  }
  .text-block-50-copy {
    display: none !important;
  }
  .brix---header-logo-link-4-copy {
    padding: 14px !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    justify-content: center !important;
  }
}

/* ?? 7. Single Unified Clean Footer ?? */
.uui-footer05_component {
  background: #060911 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--ac-text-secondary) !important;
  padding: 0 !important;
  position: relative !important;
}

.uui-container-large {
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
}

.uui-padding-vertical-xlarge {
  padding: 64px 0 36px !important;
}

.uui-footer05_top-wrapper {
  display: grid !important;
  grid-template-columns: 2fr 1.2fr 1.2fr 1fr 1.3fr !important;
  gap: 36px !important;
  align-items: flex-start !important;
  padding-bottom: 44px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 991px) {
  .uui-footer05_top-wrapper {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .uui-logo_component {
    grid-column: 1 / -1 !important;
  }
}

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

.uui-footer05_link-list-heading-copy-2 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
}

.underline-link-block-copy-copy-2,
.underline-link-block-copy-copy-copy-2,
.underline-link-block-copy-copy-2-copy,
.uui-footer05_link {
  color: var(--ac-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
  transition: color var(--ac-transition) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.underline-link-block-copy-copy-2:hover,
.underline-link-block-copy-copy-copy-2:hover,
.underline-link-block-copy-copy-2-copy:hover,
.uui-footer05_link:hover {
  color: var(--ac-cyan) !important;
  transform: translateX(-3px) !important;
}

.down-footer {
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 20px 28px !important;
  text-align: center !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.uui-text-size-small-5 {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
}

/* Hide duplicate bottom wrappers */
.uui-footer05_bottom-wrapper {
  display: none !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;
}