/* ==========================================================================
   Delton Facility Management - Main Stylesheet
   Brand Colors: Gold (#E4B15B) & Deep Navy (#0E0C10)
   Dual-Direction: RTL (Cairo) & LTR (Poppins)
   ========================================================================== */

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

:root {
  --gold-primary: #E4B15B;
  --gold-hover: #B8862E;
  --gold-soft: #F3DDAE;
  --gold-light: #F6E6C2;
  --gold-glow: rgba(228, 177, 91, 0.3);
  --ember-core: #C23B2E;
  --ember-core-deep: #8A1F22;
  --ash-silver: #9C99A6;
  --navy-dark: #0E0C10;
  --navy-deep: #100D12;
  --navy-card: #18141A;
  --navy-surface: #211C22;
  --navy-border: #2E262C;
  --navy-darker: #0A080C;
  --text-light: #F5EFE6;
  --text-muted: #A39FA6;
  --radius-card: 18px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base direction & fonts */
html {
  scroll-behavior: smooth;
}

/* Ash & Ember surface treatment: a warm ember glow low in one corner plus a
   fine neutral grain, layered as background-image only so it composites over
   whatever Tailwind bg-[#...] color class is already set on the element. */
.ash-ember-surface {
  background-image:
    radial-gradient(ellipse 55% 60% at 6% 100%, rgba(194, 59, 46, 0.16), transparent 55%),
    radial-gradient(ellipse 45% 55% at 3% 100%, rgba(228, 177, 91, 0.11), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, overlay;
}

body {
  color: var(--text-light);
  overflow-x: hidden;
  max-width: 100%;
  font-family: 'Cairo', sans-serif;
  line-height: 1.65;
}

html {
  overflow-x: hidden;
  max-width: 100%;
}

[dir="ltr"] body {
  font-family: 'Poppins', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--navy-darker);
}

::-webkit-scrollbar-thumb {
  background: #3A323A;
  border-radius: 5px;
  border: 2px solid var(--navy-darker);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-primary);
}

/* Gold Gradient Utilities */
.text-gold {
  color: var(--gold-primary);
}

.bg-gold {
  background-color: var(--gold-primary);
}

.border-gold {
  border-color: var(--gold-primary);
}

.text-gradient-gold {
  background: linear-gradient(135deg, #F0CB86 0%, #E4B15B 50%, #8A6720 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-gold {
  background: linear-gradient(135deg, #F0CB86 0%, #E4B15B 60%, #B8862E 100%);
}

.border-gold-glow {
  border: 1px solid rgba(228, 177, 91, 0.4);
  box-shadow: 0 0 15px rgba(228, 177, 91, 0.15);
}

.border-gold-glow:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 0 25px rgba(228, 177, 91, 0.35);
}

/* Navbar Blur & Scrolled State */
.navbar-fixed {
  transition: var(--transition-smooth);
  border-bottom: 1px solid rgba(140, 130, 136, 0.1);
}

.navbar-scrolled {
  background: rgba(14, 12, 16, 0.88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36);
  border-bottom: 1px solid rgba(228, 177, 91, 0.24);
}

#mainNavbar .container {
  min-height: 72px;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

@media (max-width: 1024px) {
  #mainNavbar {
    min-height: 68px;
  }

  #mainNavbar .container {
    min-height: 68px;
  }
}

@media (max-width: 640px) {
  #mainNavbar .container {
    height: 60px;
    min-height: 60px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Hero Section & Swiper Slider */
.hero-slider {
  width: 100%;
  height: clamp(540px, 74vh, 820px);
  min-height: 540px;
  max-height: 820px;
  background: var(--navy-dark);
  position: relative;
  margin-bottom: 0;
}

.swiper-slide {
  position: relative;
  overflow: hidden;
  min-height: 540px;
}

.hero-pagination {
  bottom: 24px !important;
  z-index: 25;
  left: 50% !important;
  transform: translateX(-50%);
  width: auto !important;
}

.stats-strip {
  position: relative;
  z-index: 30;
  margin-top: 0;
}

@media (min-width: 640px) {
  .stats-strip {
    padding-top: 5.5%;
  }
}

@media (min-width: 768px) {
  .stats-strip {
    padding-top: 5.5%;
  }
}

@media (min-width: 1024px) {
  .stats-strip {
    padding-top: 7.5%;
  }
}

@media (min-width: 1280px) {
  .stats-strip {
    padding-top: 4%;
  }
}

.mobile-header-logo {
  display: block;
  max-width: 124px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(228, 177, 91, 0.18));
}

/* Hero slide heading. Line-height/weight/tracking are set here as plain CSS
   (not as Tailwind utility classes) and forced with !important so they are
   guaranteed to apply no matter which Tailwind pipeline serves the page
   (CDN JIT or a locally-built stylesheet) and cannot lose to a Tailwind
   font-size utility that bundles its own tight default line-height (e.g.
   text-5xl ships with line-height: 1). Applies at every breakpoint. */
.hero-slide-title {
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

/* Arabic script needs much more vertical room (dots/diacritics sit close to
   the line above) and no negative tracking (it makes connected letterforms
   collide), plus a lighter weight than the Latin title — at this size,
   Cairo's extrabold strokes visually touch between wrapped lines. */
[dir="rtl"] .hero-slide-title {
  line-height: 1.9 !important;
  letter-spacing: normal !important;
  font-weight: 700 !important;
}

/* Section headings (About/Services/Why Us/Clients/Contact/Careers h2/h1).
   Same root cause and fix as .hero-slide-title above: these use Tailwind's
   text-3xl/4xl/5xl utilities, which bundle their own tight default
   line-height (text-5xl = line-height: 1) that can win over any Tailwind
   leading-* utility depending on which Tailwind pipeline builds the page.
   Set as plain CSS with !important so it is never at the mercy of that. */
.section-heading {
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

[dir="rtl"] .section-heading {
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  font-weight: 700 !important;
}

@media (max-width: 1024px) {
  .hero-slider,
  .swiper-slide {
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  .hero-slider {
    height: clamp(480px, 68vh, 620px);
    min-height: 480px;
  }

  .swiper-slide {
    min-height: 480px;
  }

  .hero-pagination {
    bottom: 14px !important;
  }
}

@media (max-width: 640px) {
  .hero-slider {
    height: 520px;
    min-height: 520px;
  }

  .swiper-slide {
    min-height: 520px;
  }

  .swiper-slide > .container {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }

  .swiper-slide .max-w-3xl {
    max-width: 100%;
    width: 100%;
    gap: 0.7rem !important;
  }

  .swiper-slide .inline-flex {
    font-size: 0.68rem !important;
    padding: 0.4rem 0.7rem !important;
    gap: 0.4rem !important;
  }

  .swiper-slide h1 {
    font-size: clamp(1.7rem, 6.2vw, 2.4rem) !important;
  }

  .swiper-slide p {
    font-size: 0.86rem !important;
    line-height: 1.7 !important;
    max-width: 96%;
  }

  .hero-pagination {
    bottom: 16px !important;
  }

  .hero-cta-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 0.6rem;
    padding-top: 0.25rem !important;
  }

  .hero-cta-primary,
  .hero-cta-secondary {
    width: 100%;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 48px;
    font-size: 0.96rem;
    border-radius: 0.9rem;
  }

  .stats-strip {
    margin-top: 18px;
  }

  .stats-strip .container {
    margin-top: 0;
  }

  .stat-card {
    min-height: 130px;
  }
}

.slide-bg {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 7s ease-out, width 7s ease-out, height 7s ease-out, top 7s ease-out, left 7s ease-out;
}

.swiper-slide-active .slide-bg {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 8, 12, 0.92) 0%,
    rgba(14, 12, 16, 0.85) 50%,
    rgba(24, 20, 26, 0.78) 100%
  );
}

/* Swiper Custom Navigation & Pagination */
.swiper-button-next,
.swiper-button-prev {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  background: rgba(24, 20, 26, 0.8);
  border: 1px solid rgba(228, 177, 91, 0.5);
  color: var(--gold-primary) !important;
  backdrop-filter: blur(6px);
  transition: var(--transition-smooth);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--gold-primary);
  color: var(--navy-dark) !important;
  box-shadow: 0 0 20px var(--gold-glow);
  transform: scale(1.08);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px !important;
  font-weight: bold;
}

.swiper-pagination {
  position: absolute;
  z-index: 25;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(140, 130, 136, 0.85) !important;
  opacity: 0.8;
  transition: var(--transition-smooth);
  margin: 0 5px !important;
}

.swiper-pagination-bullet-active {
  width: 30px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F3DDAE 0%, #E4B15B 100%) !important;
  opacity: 1;
  box-shadow: 0 0 14px rgba(228, 177, 91, 0.45);
}

/* Service Card Hover & Interactions */
.service-card {
  background: linear-gradient(180deg, rgba(24, 20, 26, 0.98), rgba(14, 12, 16, 0.96));
  border: 1px solid rgba(46, 38, 44, 0.9);
  border-radius: var(--radius-card);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(6, 5, 8, 0.30);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  opacity: 0;
  transition: var(--transition-smooth);
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(228, 177, 91, 0.6);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(228, 177, 91, 0.15);
}

.service-card:hover::before {
  opacity: 1;
}

/* Why Us cards are built with inline Tailwind utility classes (no dedicated
   rule of their own yet); give them a positioning context so the hover
   z-index below actually takes effect, matching the other card types. */
.whyus-card {
  position: relative;
}

/* Scale-up on hover for ALL card types across the site (services, clients,
   stats, why-us): desktop/tablet only, excluded on mobile screen sizes.
   !important is required here because the AOS scroll-animation library applies
   its own high-specificity "aos-animate" transform reset to the same element,
   which otherwise silently cancels this hover scale (only an inner image's
   own group-hover zoom would then be visible, not the card/text). Each
   selector keeps its own existing lift distance and just adds the zoom. */
@media (min-width: 768px) {
  .service-card:hover {
    transform: translateY(-8px) scale(1.1) !important;
    z-index: 10;
  }

  .client-card:hover {
    transform: translateY(-5px) scale(1.1) !important;
    z-index: 10;
  }

  .stat-card:hover {
    transform: translateY(-6px) scale(1.1) !important;
    z-index: 10;
  }

  .whyus-card:hover {
    transform: translateY(-6px) scale(1.1) !important;
    z-index: 10;
  }
}

/* Client Logo Card */
.client-card {
  background: linear-gradient(180deg, rgba(24, 20, 26, 0.95), rgba(14, 12, 16, 0.94));
  border: 1px solid rgba(46, 38, 44, 0.9);
  border-radius: 14px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.client-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-primary);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35), 0 0 15px rgba(228, 177, 91, 0.15);
}

/* Modal Popup Styling */
.modal-backdrop {
  background: rgba(10, 8, 12, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-content {
  background: #18141A;
  border: 1px solid rgba(228, 177, 91, 0.35);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(228, 177, 91, 0.15);
  border-radius: 20px;
}

@media (max-width: 640px) {
  .service-card {
    padding: 1rem !important;
  }

  .service-card .w-14,
  .service-card .h-14 {
    width: 3rem;
    height: 3rem;
  }

  .service-card h3 {
    font-size: 1.05rem !important;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .service-card p,
  .service-card span,
  .service-card button {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .service-card button {
    min-height: 48px;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    font-size: 0.78rem !important;
    line-height: 1.4;
    white-space: normal;
  }

  .modal-backdrop {
    padding: 0.75rem;
  }

  .modal-content {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: 92vh;
    padding: 1rem !important;
    border-radius: 16px;
  }

  .modal-content *,
  .modal-content *::before,
  .modal-content *::after {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .modal-content .flex.items-start.justify-between {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .modal-content .grid {
    gap: 0.75rem;
  }

  .modal-content .flex.items-center.justify-between.gap-4 {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .modal-content .flex.items-center.justify-between.gap-4 > button {
    width: 100%;
    justify-content: center;
  }

  .modal-content h2 {
    font-size: 1.15rem !important;
    line-height: 1.4;
  }

  .modal-content h4 {
    font-size: 0.92rem !important;
    line-height: 1.4;
  }

  .modal-content p,
  .modal-content li,
  .modal-content span,
  .modal-content button {
    font-size: 0.82rem;
  }
}

/* Floating WhatsApp Button */
.btn-whatsapp-float {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 99;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #1DB954 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);
  transition: var(--transition-smooth);
}

[dir="ltr"] .btn-whatsapp-float {
  left: auto;
  right: 28px;
}

.btn-whatsapp-float:hover {
  transform: scale(1.1) rotate(8deg);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6);
  color: #FFFFFF;
}

/* Back To Top Button */
.btn-back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 98;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(24, 20, 26, 0.9);
  border: 1px solid rgba(228, 177, 91, 0.4);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: var(--transition-smooth);
  opacity: 0;
  visibility: hidden;
}

[dir="ltr"] .btn-back-to-top {
  right: auto;
  left: 28px;
}

.btn-back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.btn-back-to-top:hover {
  background: var(--gold-primary);
  color: var(--navy-dark);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px var(--gold-glow);
}

@media (max-width: 640px) {
  .btn-whatsapp-float {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
    font-size: 22px;
  }

  [dir="ltr"] .btn-whatsapp-float {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
  }

  .btn-back-to-top {
    right: max(12px, env(safe-area-inset-right));
    left: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  [dir="ltr"] .btn-back-to-top {
    right: auto;
    left: max(12px, env(safe-area-inset-left));
  }
}

/* Mobile Navigation Drawer */
.mobile-menu {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

[dir="rtl"] .mobile-menu {
  transform: translateX(100%);
}

[dir="rtl"] .mobile-menu.active {
  transform: translateX(0);
}

[dir="ltr"] .mobile-menu {
  transform: translateX(-100%);
}

[dir="ltr"] .mobile-menu.active {
  transform: translateX(0);
}

/* Stat Counter Card */
.stat-card {
  background: linear-gradient(145deg, rgba(24, 20, 26, 0.8), rgba(14, 12, 16, 0.95));
  border: 1px solid rgba(228, 177, 91, 0.25);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 50px rgba(14, 12, 16, 0.28);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(228, 177, 91, 0.6);
  box-shadow: 0 28px 60px rgba(14, 12, 16, 0.35), 0 0 28px rgba(228, 177, 91, 0.12);
}

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(228, 177, 91, 0.0); }
  50% { box-shadow: 0 0 20px rgba(228, 177, 91, 0.18); }
}

.service-card,
.client-card,
.stat-card,
.btn-whatsapp-float,
.btn-back-to-top {
  animation: goldPulse 6s ease-in-out infinite;
}

/* Animation helpers */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}