/* ================================================================
   EverExpanse — Modern CSS Enhancements  (ee-modern.css)
   Layered over Bootstrap + custome.min.css + everexpanse-v2.css
   Do not edit the base files; override here.
   ================================================================ */

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --ee2-accent:  #2B7FF0;
  --ee2-cyan:    #00C9E4;
  --ee2-blue:    #0B2559;
  --ee2-border:  #E2E8F2;
  --ee2-surf:    #F4F7FF;
  --ee2-text:    #374151;
  --ee2-grad:    linear-gradient(135deg, #2B7FF0 0%, #00C9E4 100%);
  --ee2-sh-md:   0 6px 24px rgba(11,37,89,.11);
  --ee2-sh-lg:   0 14px 44px rgba(11,37,89,.16);
  --ee2-t:       .22s;
  --ee2-ease:    cubic-bezier(.4,0,.2,1);
}

/* ── Base typography ─────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.hero-title,.title,.medium-title,.ft-18-title,.ft-22-title,.card-t {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  text-wrap: balance;
  letter-spacing: -.025em;
}

/* ── Navigation ──────────────────────────────────────────────── */
.header {
  position: relative;
  box-shadow: 0 1px 0 var(--ee2-border), 0 2px 10px rgba(11,37,89,.07) !important;
}
/* 3-px gradient top stripe */
.header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--ee2-grad);
  z-index: 10; pointer-events: none;
}
/* Nav links — animated underline */
.navbar-light .navbar-nav .nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ee2-text);
  border-radius: 7px;
  padding: 8px 13px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
  transition: color var(--ee2-t) var(--ee2-ease),
              background var(--ee2-t) var(--ee2-ease),
              text-decoration-color var(--ee2-t) var(--ee2-ease);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.show {
  color: var(--ee2-accent);
  background: rgba(43,127,240,.05);
  text-decoration-color: var(--ee2-accent);
}
/* Dropdown panel */
.dropdown-menu {
  border: 1px solid var(--ee2-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 56px rgba(11,37,89,.18) !important;
  padding: 6px !important;
  margin-top: 6px !important;
  animation: ee2-dd .16s var(--ee2-ease) both;
}
@keyframes ee2-dd {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ee2-text);
  border-radius: 8px;
  padding: 9px 14px;
  transition: all var(--ee2-t) var(--ee2-ease);
}
.dropdown-item:hover {
  background: var(--ee2-surf) !important;
  color: var(--ee2-accent) !important;
}

/* ── Buttons — pill shape + lift ─────────────────────────────── */
.btn.theme-btn, .btn.white-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border-radius: 9999px;
  padding: 11px 24px;
  letter-spacing: .01em;
  transition: transform var(--ee2-t) var(--ee2-ease),
              box-shadow var(--ee2-t) var(--ee2-ease),
              background var(--ee2-t) var(--ee2-ease),
              color var(--ee2-t) var(--ee2-ease);
}
.btn.theme-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(5,80,159,.32); }
.btn.white-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,255,255,.15); }

/* ── Hero sections ───────────────────────────────────────────── */
.hero-title {
  font-size: clamp(26px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
}
/* Richer overlay gradient */
.hero-sec::before {
  background: linear-gradient(
    270deg,
    transparent 5%,
    rgba(4,12,36,.54) 44%,
    rgba(4,12,36,.9) 78%
  ) !important;
}
/* Modern pill/capsule carousel indicators */
.carousel-indicators [data-bs-target] {
  width: 8px; height: 8px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,.38);
  transition: all .3s var(--ee2-ease);
  margin: 0 4px;
}
.carousel-indicators .active {
  width: 26px; border-radius: 4px; background: #fff;
}
/* Slide content entry animations */
@keyframes ee2-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.carousel-item.active .title-line  { animation: ee2-up .5s var(--ee2-ease) .08s both; }
.carousel-item.active .hero-title  { animation: ee2-up .6s var(--ee2-ease) .22s both; }
.carousel-item.active .d-flex.mt-3 { animation: ee2-up .6s var(--ee2-ease) .38s both; }

/* Inner-page hero: breadcrumb + title fade in */
.inner-hero-sec .hero-title,
.inner-hero-sec .title-line,
.inner-hero-sec nav[aria-label="breadcrumb"] {
  animation: ee2-up .55s var(--ee2-ease) .1s both;
}

/* ── Section titles ──────────────────────────────────────────── */
.title        { font-size: clamp(24px,3.2vw,42px);  font-weight: 800; line-height: 1.16; letter-spacing: -.03em; }
.medium-title { font-size: clamp(18px,2.4vw,28px);  font-weight: 700; letter-spacing: -.02em; }
.ft-18-title  { font-size: 17px; font-weight: 700;  letter-spacing: -.02em; }
.ft-22-title  { font-size: clamp(18px,2vw,22px); font-weight: 700; letter-spacing: -.02em; }

/* ── Cards — image zoom + depth ─────────────────────────────── */
.img-card-box { overflow: hidden; }
.product-img-div { transition: transform .5s var(--ee2-ease); }
.img-card-box:hover .product-img-div { transform: scale(1.05); }

/* ── Service icon scale on card hover ───────────────────────── */
.service-icon-div {
  transition: transform var(--ee2-t) var(--ee2-ease),
              box-shadow var(--ee2-t) var(--ee2-ease);
}
.white-rounded-box:hover .service-icon-div.theme-bg {
  transform: scale(1.1) !important;
  box-shadow: 0 10px 28px rgba(5,80,159,.28) !important;
}

/* ── Stat counters — subtle pop ─────────────────────────────── */
.count-number,
.count-txt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -.03em;
}

/* ── Tab / filter pills ──────────────────────────────────────── */
.nav-pills .nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  border-radius: 9999px;
  transition: background var(--ee2-t) var(--ee2-ease),
              color var(--ee2-t) var(--ee2-ease),
              box-shadow var(--ee2-t) var(--ee2-ease);
}
.nav-pills .nav-link.active {
  box-shadow: 0 4px 14px rgba(5,80,159,.28);
}

/* ── Accordion ───────────────────────────────────────────────── */
.accordion-button {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  color: var(--ee2-accent);
}

/* ── Client carousel — fade edges ───────────────────────────── */
.owl-slider {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb-item,
.breadcrumb-item a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
}

/* ── Scroll reveal (JS applies these classes) ───────────────── */
.ee2-reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(2px);
  transition: opacity .6s var(--ee2-ease),
              transform .6s var(--ee2-ease),
              filter .6s var(--ee2-ease);
}
.ee2-reveal.ee2-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.ee2-d1 { transition-delay: .1s; }
.ee2-d2 { transition-delay: .2s; }
.ee2-d3 { transition-delay: .3s; }

/* ── Enterprise Platform Suite Card ─────────────────────────── */
.eps-card {
  background: linear-gradient(145deg, #0d1e3f 0%, #0b2559 60%, #0e2d6e 100%);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(5,37,89,.38), 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.eps-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(43,127,240,.22) 0%, transparent 70%);
  pointer-events: none;
}
.eps-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.eps-header-left { display: flex; align-items: center; gap: 12px; }
.eps-icon-wrap {
  width: 40px; height: 40px;
  background: rgba(43,127,240,.28);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.eps-suite-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.eps-badge { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 9px; letter-spacing: .04em; white-space: nowrap; }
.eps-badge-green  { background: rgba(34,197,94,.18);  color: #4ade80; }
.eps-badge-blue   { background: rgba(59,130,246,.2);  color: #93c5fd; }
.eps-badge-cyan   { background: rgba(0,201,228,.16);  color: #67e8f9; }
.eps-badge-orange { background: rgba(251,146,60,.18); color: #fbbf24; }
.eps-badge-purple { background: rgba(168,85,247,.18); color: #c4b5fd; }
.eps-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.eps-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  padding: 11px 14px;
  transition: background .2s ease;
}
.eps-row:hover { background: rgba(255,255,255,.09); }
.eps-row-icon { width: 32px; height: 32px; background: rgba(255,255,255,.07); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eps-row-text { flex: 1; min-width: 0; }
.eps-row-title { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.eps-row-sub { display: block; font-size: 11.5px; color: rgba(255,255,255,.45); margin-top: 1px; }
.eps-footer { border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; }
.eps-trusted-label { font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.35); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; margin-bottom: 12px; }
.eps-logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.eps-logo { height: 20px; width: auto; max-width: 70px; object-fit: contain; filter: brightness(0) invert(1); opacity: .45; }
.eps-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.eps-pill { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 4px 12px; letter-spacing: .03em; }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .eps-card { margin-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
