/* ============================================================================
   proserv-eg.com — targeted UI fixes
   Loaded AFTER style.css. Kept as a separate file on purpose: style.css is
   served from S3 with Cache-Control max-age=604800, so editing it in place can
   strand a bad push with returning visitors for a week. This file is additive
   and can be reverted by removing one <link>.
   ============================================================================ */

/* --- 1. "Why choose us" badges -------------------------------------------
   All five cards previously used the same why.svg, which bakes its own
   burgundy circle. The badge is now drawn in CSS so each card can carry a
   distinct icon. Gradient copied from why.svg (#CE493E -> #68251F, vertical). */
.feature-card .feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -55px 0 15px;
  background: linear-gradient(180deg, #CE493E 0%, #68251F 100%);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

/* --- 2. RTL: submenu chevrons must point the other way -------------------- */
[dir="rtl"] .arrow .fa-chevron-right {
  transform: scaleX(-1);
}

/* --- 3. Client logo strip -------------------------------------------------
   height:90px applied uniformly made logos with tight artwork (DOF) read huge
   and logos with built-in padding (Nielsen) read tiny. Cap both axes and even
   out the two outliers optically. */
.trusted-companies .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
}

.trusted-companies .swiper-slide img {
  height: auto;
  max-height: 62px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
}

.trusted-companies .swiper-slide img[src*="DOF"] {
  max-height: 46px;
}

.trusted-companies .swiper-slide img[src*="NILSEN"],
.trusted-companies .swiper-slide img[src*="ELSWEDY"] {
  max-height: 72px;
}

/* --- 4. Dead vertical space under the logo strip --------------------------
   The wave panel is 570px tall but its content only fills the top half,
   leaving ~300px of empty ground before the next section. */
.trusted-companies .trusted-wave,
.services.trusted-companies .trusted-wave {
  height: 440px;
}

.services.trusted-companies .trusted-wave {
  margin-bottom: 20px;
}

.trusted-companies .trust-wrap {
  padding-top: 12%;
}

.trusted-companies .swiper {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .trusted-companies .trusted-wave,
  .services.trusted-companies .trusted-wave {
    height: 300px;
  }
  .trusted-companies .trust-wrap {
    padding-top: 16%;
  }
  .trusted-companies .swiper {
    margin-top: 28px;
  }
  .trusted-companies .swiper-slide img {
    max-height: 46px;
    max-width: 110px;
  }
}

/* --- PLEX TYPOGRAPHY --- */

/* ============================================================================
   Typography — IBM Plex Sans (Latin) + IBM Plex Sans Arabic
   Replaces Poppins/Tajawal. One family drawn for both scripts, so the English
   and Arabic pages share proportion and rhythm. Self-hosted, which also drops
   two render-blocking requests to fonts.googleapis.com / fonts.gstatic.com.
   ============================================================================ */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('../fonts/plex/plex-sans-latin-var.woff2') format('woff2-variations'),url('../fonts/plex/plex-sans-latin-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plex/plex-arabic-arabic-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plex/plex-arabic-arabic-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plex/plex-arabic-arabic-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plex/plex-arabic-arabic-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plex/plex-arabic-latin-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plex/plex-arabic-latin-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plex/plex-arabic-latin-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plex/plex-arabic-latin-700.woff2') format('woff2')}

:root {
  --font-latin: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

/* style.css sets `body{font-family:"Poppins",sans-serif!important}` on line 5,
   and pins buttons to "poppins"!important. Matching !important is the only way
   to override those without editing the cached stylesheet. */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th, div, label, blockquote, figcaption,
button, input, select, textarea,
.primary-btn, .primary-outline-btn, .footer-btn, .btn {
  font-family: var(--font-latin) !important;
}

/* Arabic pages: the same family's Arabic companion, so both scripts share
   proportion and rhythm. Note style.css had its Tajawal rule commented out,
   which left Arabic body text falling back to whatever the device provided. */
[dir="rtl"], [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] a, [dir="rtl"] li,
[dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] div, [dir="rtl"] label,
[dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] .primary-btn, [dir="rtl"] .primary-outline-btn,
[dir="rtl"] .footer-btn, [dir="rtl"] .btn {
  font-family: var(--font-arabic) !important;
}

/* Font Awesome must keep its own family or the glyphs turn into boxes. */
.fa, .fas, .far, .fab, .fal, .fad,
i[class*="fa-"], span[class*="fa-"],
.swiper-button-next, .swiper-button-prev {
  font-family: inherit;
}
i[class*="fa-"]::before, .fa::before, .fas::before, .far::before, .fab::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* Plex has a larger x-height and tighter fit than Poppins: weight 300 read
   washed out on white, and large headings sat loose. */
body, p, li, td, .feature-card p, .service-card p {
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.011em;
}

.left-content h2, .plg-banner .left-content h2 {
  letter-spacing: -0.02em;
}

/* --- MODERNISATION --- */
/* ============================================================================
   MODERNISATION PASS
   Header height, dropdowns, hero, logo strip, stats. Additive overrides —
   style.css is untouched, so removing this block reverts everything.
   Palette stays the brand's own: #9A1A3F burgundy, #E7603E coral.
   ============================================================================ */

:root {
  --brand: #9A1A3F;
  --brand-2: #E7603E;
  --brand-grad: linear-gradient(135deg, #9A1A3F 0%, #C13B45 55%, #E7603E 100%);
  --ink-900: #17101300;
  --surface: #fff;
  --hairline: rgba(23, 16, 19, .08);
  --ring: rgba(154, 26, 63, .32);

  --sh-1: 0 1px 2px rgba(23,16,19,.05), 0 2px 6px rgba(23,16,19,.05);
  --sh-2: 0 2px 6px rgba(23,16,19,.05), 0 12px 28px -8px rgba(23,16,19,.14);
  --sh-3: 0 4px 10px rgba(23,16,19,.06), 0 24px 48px -12px rgba(23,16,19,.20);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- HEADER --
   Was 120px navbar + a 44px contact bar. Slimmed to ~74px + 34px, and the
   navbar sticks with a translucent blur so the page reads taller. */

.top-bar {
  padding: 6px 0 !important;
  background: linear-gradient(180deg, #FFE9E3 0%, #FFDCD4 100%);
  border-bottom: 1px solid rgba(154, 26, 63, .07);
}

.top-bar .left span {
  font-size: 12.5px;
  margin-right: 22px;
  opacity: .9;
}

.top-bar .left span img {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.navbar {
  height: 74px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--hairline), 0 6px 24px -12px rgba(23,16,19,.18);
  transition: box-shadow .3s var(--ease), height .3s var(--ease);
}

@media (min-width: 992px) {
  .navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

.navbar .logo img,
.navbar picture.logo img {
  max-height: 42px;
  width: auto;
}

.nav-links {
  gap: 34px;
}

.nav-links li a {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color .22s var(--ease);
}

.nav-links li a:hover {
  color: var(--brand);
}

/* the active underline: was a hard bar, now a soft gradient rule */
.nav-links li a.active::after {
  height: 2.5px !important;
  border-radius: 3px;
  background: var(--brand-grad) !important;
}

/* ------------------------------------------------------------ DROPDOWNS --
   Were flat white boxes with a 1px #ccc border and no motion. Now floating
   cards that fade and lift in. display:none can't animate, so visibility and
   opacity carry the transition instead. */

.nav-links .dropdown,
.sub-dropdown {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.985);
  transform-origin: top center;

  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.97) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-3) !important;
  padding: 8px !important;
  min-width: 232px;
  transition: opacity .2s var(--ease), transform .24s var(--ease), visibility .24s;
}

.nav-links .serv.dropdown { min-width: 300px; }

.nav-links .has-dropdown:hover > .dropdown,
.has-sub-dropdown:hover > .sub-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.nav-links .dropdown { top: calc(100% + 6px); }
.sub-dropdown { top: -8px; left: calc(100% + 6px); }
[dir="rtl"] .sub-dropdown { left: auto; right: calc(100% + 6px); }

.dropdown li {
  padding: 0 !important;
  border-radius: 10px;
  transition: background .18s var(--ease);
}

.dropdown li:hover { background: rgba(154, 26, 63, .06); }

.dropdown li a {
  display: block;
  width: 100%;
  padding: 9px 12px !important;
  font-size: 14.5px !important;
  font-weight: 450 !important;
  border-radius: 10px;
  transition: color .18s var(--ease);
}

.dropdown li:hover > a { color: var(--brand); }

.dropdown-title {
  padding: 10px 12px 4px !important;
  font-size: 11px !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9C8E92 !important;
}

/* chevrons: settle direction and animate on open */
.arrow {
  font-size: 10px;
  opacity: .55;
  transition: transform .24s var(--ease), opacity .24s var(--ease);
  display: inline-block;
}

.has-dropdown:hover > .arrow { transform: rotate(180deg); opacity: 1; }
.has-sub-dropdown:hover > .arrow { opacity: 1; }

/* ------------------------------------------------------------------ HERO --
   "Too weak": the headline was 42px/600. Now a proper display size with tight
   tracking, a gradient rule, and CTAs that read as controls. */

.left-content { padding-top: 8px; max-width: 92%; }

.left-content h2,
.left-content h1,
.plg-banner .left-content h2 {
  font-size: clamp(2.6rem, 4.6vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin-bottom: 26px !important;
  text-wrap: balance;
}

h2 .title::after,
h1 .title::after,
.plg-banner h2 .title::after {
  height: 6px !important;
  bottom: -8px !important;
  border-radius: 99px !important;
  background: var(--brand-grad) !important;
}

.left-content p {
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  line-height: 1.65;
  max-width: 54ch;
  color: #4A4045;
}

.left-content p span.colored {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.buttons { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ambient glow behind the hero image */
.main-img { position: relative; }

.main-img::before {
  content: "";
  position: absolute;
  inset: -12% -8% -8% -12%;
  background:
    radial-gradient(42% 42% at 30% 28%, rgba(231, 96, 62, .20), transparent 70%),
    radial-gradient(46% 46% at 74% 70%, rgba(154, 26, 63, .16), transparent 72%);
  filter: blur(18px);
  z-index: -1;
  animation: proserv-drift 14s var(--ease) infinite alternate;
}

@keyframes proserv-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(1.5%, -2%, 0) scale(1.05); }
}

/* --------------------------------------------------------------- BUTTONS --
   Pill shape kept, but smaller, heavier and with real depth. */

.primary-btn,
.primary-outline-btn,
a.primary-btn,
a.primary-outline-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 13px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 99px !important;
  letter-spacing: -0.005em;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), color .22s var(--ease);
  will-change: transform;
}

.primary-btn, a.primary-btn {
  background: var(--brand-grad) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(154,26,63,.24), 0 10px 24px -8px rgba(154,26,63,.42);
}

.primary-btn:hover, a.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(154,26,63,.28), 0 18px 34px -10px rgba(154,26,63,.5);
}

.primary-outline-btn, a.primary-outline-btn {
  background: transparent !important;
  color: var(--brand) !important;
  border: 1.5px solid rgba(154,26,63,.28) !important;
}

.primary-outline-btn:hover, a.primary-outline-btn:hover {
  border-color: var(--brand) !important;
  background: rgba(154,26,63,.05) !important;
  transform: translateY(-2px);
}

.primary-btn i, .primary-outline-btn i {
  transition: transform .22s var(--ease);
  font-size: .85em;
}

.primary-btn:hover i, .primary-outline-btn:hover i { transform: translateX(3px); }
[dir="rtl"] .primary-btn:hover i,
[dir="rtl"] .primary-outline-btn:hover i { transform: translateX(-3px); }

/* ---------------------------------------------------------- LOGO CAROUSEL --
   Mixed weights and colours read as clutter; neutralised until hover. */

.trusted-companies .swiper-slide img {
  filter: grayscale(1);
  opacity: .5;
  transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}

.trusted-companies .swiper-slide img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}

.trusted-companies h2 { font-size: 1.75rem; font-weight: 650; }

/* ------------------------------------------------------------------ STATS --
   Were solid gradient circles joined by a dashed connector image. Now cards
   with gradient numerals — the figures are the point, not the shape. */

.stats-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  width: 92% !important;
  margin: 0 auto 34px !important;
}

.stat-box {
  width: auto !important;
  height: auto !important;
  min-height: 132px;
  border-radius: 18px !important;
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(154,26,63,.12);
  box-shadow: var(--sh-1);
  padding: 22px 16px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}

.stat-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}

/* the dashed connector between circles */
.stat-box:not(:last-child)::after { display: none !important; }

.stat-box p {
  font-size: clamp(1.9rem, 2.4vw, 2.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

.stat-box span,
.stat-box.sec span,
.stat-box:first-child:not(.stat-box.sec) span {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #5C5054 !important;
}

.stats-section h2 { font-size: 1.9rem; font-weight: 650; margin-bottom: 40px; }

/* --------------------------------------------------------------- POLISH -- */

.feature-card,
.service-card {
  border-radius: 16px !important;
  box-shadow: var(--sh-1) !important;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}

.feature-card:hover,
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 6px;
}

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

@media (max-width: 768px) {
  .navbar { height: 64px; }
  .navbar .logo img, .navbar picture.logo img { max-height: 34px; }
  .left-content h2, .left-content h1 { font-size: clamp(2rem, 8vw, 2.5rem) !important; }
  .left-content p { font-size: 1rem !important; }
  .stats-container { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-box { min-height: 112px; padding: 16px 12px !important; }
}