/* ============================================================
   TANDA – IT Solutions | Main Stylesheet
   ============================================================
   Table of Contents:
   1.  CSS Custom Properties (Variables)
   2.  Reset & Base
   3.  Top Bar
   4.  Top Bar Socials
   5.  Navbar
   6.  Logo
   7.  Nav Links
   8.  Nav CTA
   9.  Banner / Slider Wrapper
   10. Slide Base
   11. Panel Left
   12. Panel Right
   13. Slide Typography
   14. Slide Buttons
   15. Slide 1 – Icon Circle & Badges
   16. Slide 2 – Service Grid Cards
   17. Slide 3 – Stats Panel
   18. Slide 4 – Process Card
   19. Slick Carousel Overrides
   20. Keyframe Animations
   21. Responsive – Tablet (≤ 900 px)
   22. Responsive – Mobile  (≤ 680 px)
   23. Responsive – Small   (≤ 420 px)
   ============================================================ */


/* ============================================================
   1. CSS Custom Properties
   ============================================================ */
:root {
  /* Brand colours */
  --color-navy: #0e2d66;
  --color-indigo: #5b5ee8;
  --color-teal: #1aabba;
  --color-teal-dark: #0e8a97;
  --color-teal-light: #2dcad9;
  --color-white: #ffffff;
  --color-off-white: #f4fafc;
  --color-text-dark: #1a1d2e;
  --color-text-mid: #374151;
  --color-text-muted: #6b7280;
  --color-border: #eaecf0;

  /* Typography */
  --font-head: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Layout */
  --topbar-px: 60px;
  /* horizontal padding – top bar & navbar */
  --diag: 0px;
  /* diagonal clip offset (hero panels) */

  /* Transitions */
  --tr-fast: 0.18s ease;
  --tr-base: 0.30s ease;
  --tr-slow: 0.55s ease;

  /* Shadows */
  --shadow-sm: 0 3px 12px rgba(14, 45, 102, 0.08);
  --shadow-md: 0 8px 25px rgba(14, 45, 102, 0.12);
  --shadow-lg: 0 18px 45px rgba(14, 45, 102, 0.18);
}


/* ============================================================
   2. Reset & Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}


/* ============================================================
   3. Top Bar
   ============================================================ */
.top-bar {
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: 13px;
  padding: 7px var(--topbar-px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.top-bar-item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e8edf7;
  font-size: 15px;
  line-height: 20px;
}

.top-bar-item svg {
  opacity: 0.85;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.25);
}


/* ============================================================
   4. Top Bar Socials
   ============================================================ */
.top-bar-socials {
  display: flex;
  gap: 10px;
}

.top-bar-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    0 10px 25px rgba(99, 102, 241, 0.25),
    0 4px 10px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #4f46e5;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

.top-bar-socials svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.top-bar-socials a:hover {
  transform: translateY(-5px) scale(1.08);
  box-shadow:
    0 20px 40px rgba(99, 102, 241, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.08);
  color: var(--color-white);
  background: linear-gradient(135deg, #6366f1, #3b82f6);
}

.top-bar-socials a:hover svg {
  transform: scale(1.2) rotate(5deg);
}

/* Shine sweep */
.top-bar-socials a::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  top: 0;
  left: -120%;
  transition: all 0.6s ease;
}

.top-bar-socials a:hover::before {
  left: 120%;
}


/* ============================================================
   5. Navbar
   ============================================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-white);
    padding: 0 var(--topbar-px);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
   /* position: relative;
    z-index: 100;*/
    gap: 16px;
}


/* ============================================================
   6. Logo
   ============================================================ */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo img{
  width: 100%;
  height: 75px;
}
/* .logo-icon {
  width: 44px;
  height: 44px;
} */

.logo-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-dark);
  letter-spacing: -0.3px;
  font-family: var(--font-head);
}


/* ============================================================
   7. Nav Links
   ============================================================ */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-mid);
  text-decoration: none;
  border-radius: 7px;
  transition: background var(--tr-fast), color var(--tr-fast);
  cursor: pointer;
  white-space: nowrap;
}

.nav-link:hover {
  background: #f3f4f8;
  color: #3b3ef0;
}

.nav-link svg {
  opacity: 0.55;
}

.nav-contact {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-mid);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 7px;
  transition: background var(--tr-fast), color var(--tr-fast);
  white-space: nowrap;
}

.nav-contact:hover {
  background: #f3f4f8;
  color: #3b3ef0;
}


/* ============================================================
   8. Nav CTA
   ============================================================ */
.nav-cta-info {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.cta-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-text small {
  display: block;
  font-size: 13.5px;
  color: var(--color-text-muted);
  font-weight: 400;
}

.cta-text .mail_cta-text {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-dark);
  text-decoration: none;
}




/* nav toggle */
/* =========================
   HAMBURGER
   ========================= */

.sidebarlink {
    display: none;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

    .menu-toggle span {
        width: 24px;
        height: 3px;
        background: #333;
        border-radius: 3px;
        transition: 0.3s;
    }

/* =========================
   SIDEBAR DEFAULT
   ========================= */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 998;
}

    .overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* /nav toggle */
/* Footer */
/* ─────────────────────────────────────────
   FOOTER WRAPPER
───────────────────────────────────────── */
.site-footer {
  position: relative;
  background: var(--color-navy);
  overflow: hidden;
  color: var(--color-white);
}

/* ── Decorative mesh blobs ── */
.footer-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.blob-1 {
  width: 500px;
  height: 500px;
  background: var(--color-indigo);
  opacity: 0.18;
  top: -160px;
  left: -120px;
}

.blob-2 {
  width: 380px;
  height: 380px;
  background: var(--color-teal);
  opacity: 0.14;
  bottom: -80px;
  right: -60px;
}

.blob-3 {
  width: 260px;
  height: 260px;
  background: var(--color-indigo);
  opacity: 0.1;
  bottom: 60px;
  left: 38%;
}

/* ── Grid dot texture ── */
.footer-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 0;
  pointer-events: none;
}

/* ─────────────────────────────────────────
   CTA BAND (top of footer)
───────────────────────────────────────── */
.footer-cta {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px var(--topbar-px) 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-left {
  max-width: 520px;
}

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-teal-light);
  background: rgba(26, 171, 186, 0.12);
  border: 1px solid rgba(26, 171, 186, 0.25);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 18px;
}

.cta-eyebrow-dot {
  width: 5px;
  height: 5px;
  background: var(--color-teal-light);
  border-radius: 50%;
  display: inline-block;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.cta-headline {
  font-family: var(--font-head);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: 14px;
}

.cta-headline em {
  font-style: normal;
  background: linear-gradient(90deg, var(--color-teal-light), var(--color-indigo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
}

.cta-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  min-width: 280px;
}

/* Email subscribe form */
.subscribe-form {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  transition: border-color var(--tr-base), box-shadow var(--tr-base);
}

.subscribe-form:focus-within {
  border-color: rgba(91, 94, 232, 0.6);
  box-shadow: 0 0 0 3px rgba(91, 94, 232, 0.15);
}

.subscribe-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-white);
  min-width: 0;
}

.subscribe-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.subscribe-btn {
  background: linear-gradient(135deg, var(--color-indigo), var(--color-teal-dark));
  border: none;
  color: var(--color-white);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  padding: 13px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--tr-fast);
  letter-spacing: 0.02em;
}

.subscribe-btn:hover {
  opacity: 0.88;
}

.subscribe-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  gap: 5px;
}

.subscribe-note svg {
  flex-shrink: 0;
}

/* CTA buttons row */
.cta-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--color-indigo) 0%, var(--color-teal-dark) 100%);
  color: var(--color-white);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(91, 94, 232, 0.35);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(91, 94, 232, 0.45);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background var(--tr-fast), border-color var(--tr-fast);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ─────────────────────────────────────────
   MAIN FOOTER GRID
───────────────────────────────────────── */
.footer-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  padding: 56px var(--topbar-px) 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Brand column ── */
.footer-brand {}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  text-decoration: none;
}

.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-indigo), var(--color-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(91, 94, 232, 0.4);
  flex-shrink: 0;
}

.logo-mark svg {
  width: 20px;
  height: 20px;
}

.logo-name {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -0.02em;
}

.logo-name span {
  background: linear-gradient(90deg, var(--color-teal-light), var(--color-indigo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.72;
  margin-bottom: 24px;
  max-width: 280px;
}

/* Trust badges */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 5px 10px;
}

.trust-badge svg {
  flex-shrink: 0;
  opacity: 0.75;
}

/* Socials */
.social-row {
  display: flex;
  gap: 8px;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.social-link svg {
  width: 15px;
  height: 15px;
}

/* ── Nav columns ── */
.footer-col {}

.col-title {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 18px;
}

.col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.col-links li a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--tr-fast), gap var(--tr-fast);
}

.col-links li a:hover {
  color: var(--color-white);
  gap: 9px;
}

.col-links li a .link-arrow {
  font-size: 10px;
  opacity: 0;
  transition: opacity var(--tr-fast);
}

.col-links li a:hover .link-arrow {
  opacity: 1;
}

/* Badge on link */
.link-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--color-indigo), var(--color-teal));
  color: white;
  margin-left: 2px;
}

/* ─────────────────────────────────────────
   STATS STRIP
───────────────────────────────────────── */
.footer-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-stat {
  padding: 28px var(--topbar-px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
}

.footer-stat:last-child {
  border-right: none;
}

.footer-stat:first-child {
  padding-left: var(--topbar-px);
}

.fs-number {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--color-white) 30%, var(--color-teal-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.fs-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 500;
}

/* ─────────────────────────────────────────
   BOTTOM BAR
───────────────────────────────────────── */
.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 20px var(--topbar-px);
}

.footer-bottom-left {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.footer-bottom-left a {
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color var(--tr-fast);
}

.footer-bottom-left a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.dot-sep {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: inline-block;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.made-with {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.heart {
  color: #f56565;
  display: inline-block;
  animation: heartbeat 1.8s ease-in-out infinite;
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.25);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }
}

/* Back to top */
.back-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
}

.back-top:hover {
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.85);
}

.address-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--color-off-white);
  line-height: 1.6;
}

.addr-icon {
  font-size: 14px;
  margin-top: 2px;
}

/* Footer */

/* ============================================================
   SCROLL BAR STYLING
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-off-white);
}

::-webkit-scrollbar-thumb {
  background: var(--color-teal);
  border-radius: 3px;
}


/* ============================================================
   9. Banner / Slider Wrapper
   ============================================================ */
.banner-outer {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  padding: 10px;
}

/* Slick margin reset */
.slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}


/* ============================================================
   10. Slide Base
   ============================================================ */
.slide {
  min-height: clamp(340px, 52vw, 560px);
  display: flex !important;
  align-items: stretch;
  position: relative;
}


/* ============================================================
   11. Panel Left
   ============================================================ */
.panel-left {
  position: relative;
  z-index: 2;
  width: 60%;
  background: linear-gradient(135deg, var(--color-navy) 0%, #1a3c8f 40%, var(--color-indigo) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 60px) clamp(50px, 8vw, 80px);
  padding-right: calc(var(--diag) + 40px);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--diag)) 100%, 0 100%);
  overflow: hidden;
}

/* Glow overlay */
.panel-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(93, 233, 255, 0.25), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(91, 94, 232, 0.25), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
}

/* Shimmer sweep */
.panel-left::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: shimmer 5s infinite;
  pointer-events: none;
}


/* ============================================================
   12. Panel Right
   ============================================================ */
.panel-right {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 60px) clamp(20px, 4vw, 52px);
  padding-left: calc(var(--diag) + 10px);
  clip-path: polygon(var(--diag) 0, 100% 0, 100% 100%, 0 100%);
  background: var(--color-off-white);
  margin-left: -1px;
  /* close diagonal gap */
}

/* Depth glow */
.panel-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(26, 171, 186, 0.18), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(91, 94, 232, 0.18), transparent 60%);
  filter: blur(12px);
  pointer-events: none;
}

/* Shimmer sweep */
.panel-right::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: shimmer 6s infinite;
  pointer-events: none;
}


/* ============================================================
   13. Slide Typography
   ============================================================ */
.slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 30px;
  width: fit-content;
  margin-bottom: 16px;
  font-family: var(--font-body);
}

.tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7fffd4;
  animation: pulse 1.8s infinite;
  flex-shrink: 0;
}

.slide-headline {
  font-family: var(--font-head);
  font-size: clamp(20px, 3.4vw, 62px);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}

.slide-headline span {
  background: linear-gradient(120deg, #ffffff 0%, #7dd7ff 60%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.slide-sub-bold {
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 7px;
  font-family: var(--font-body);
}

.slide-sub {
  font-size: clamp(11px, 1.1vw, 13.5px);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  margin-bottom: clamp(18px, 3vw, 30px);
  max-width: 450px;
  font-family: var(--font-body);
}

.slide-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px;
}


/* ============================================================
   14. Slide Buttons
   ============================================================ */
.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: var(--color-white);
  cursor: pointer;
  transition: all var(--tr-base);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.25);
}

/* Shine sweep on hover */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.35);
}

.btn-primary:hover::before {
  transform: translateX(100%);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 5px 14px rgba(79, 70, 229, 0.25);
}




.talent-visual {
  position: relative;
  width: 440px;
}

/* ── GLOW ── */
.tv-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.g1 {
  width: 260px;
  height: 260px;
  background: var(--color-indigo);
  opacity: 0.18;
  top: -60px;
  left: -60px;
}

.g2 {
  width: 220px;
  height: 220px;
  background: var(--color-teal);
  opacity: 0.18;
  bottom: -50px;
  right: -40px;
}

/* ── MAIN CARD ── */
.talent-card {
  position: relative;
  z-index: 2;
  border-radius: 24px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(91, 94, 232, 0.06);
}

/* ── MAC-STYLE HEADER ── */
.tc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(14, 45, 102, 0.07);
}

.tc-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tc-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.tc-dots span:nth-child(1) {
  background: #ff5f56;
}

.tc-dots span:nth-child(2) {
  background: #ffbd2e;
}

.tc-dots span:nth-child(3) {
  background: #27c93f;
}

.tc-header-center {
  flex: 1;
  text-align: center;
}

.tc-title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-mid);
  letter-spacing: 0.01em;
}

.tc-header-action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-indigo);
  background: rgba(91, 94, 232, 0.08);
  padding: 4px 10px;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid rgba(91, 94, 232, 0.15);
  white-space: nowrap;
}

/* ── STATS ROW ── */
.tc-stats {
  display: flex;
  gap: 9px;
  margin-bottom: 16px;
}

.stat-box {
  flex: 1;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(14, 45, 102, 0.04);
  text-align: center;
  border: 1px solid rgba(14, 45, 102, 0.06);
  transition: transform 0.2s ease;
}

.stat-box:hover {
  transform: translateY(-2px);
}

.stat-box h4 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-box p {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.stat-box.highlight {
  background: linear-gradient(135deg, var(--color-indigo) 0%, var(--color-teal) 100%);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(91, 94, 232, 0.3);
}

.stat-box.highlight h4,
.stat-box.highlight p {
  color: #fff;
}

/* ── PROGRESS BAR ── */
.tc-progress-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(14, 45, 102, 0.03);
  border-radius: 14px;
  border: 1px solid rgba(14, 45, 102, 0.06);
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-mid);
  width: 68px;
  flex-shrink: 0;
}

.progress-track {
  flex: 1;
  height: 6px;
  background: rgba(14, 45, 102, 0.08);
  border-radius: 100px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--color-indigo), var(--color-teal));
}

.progress-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-indigo);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── CANDIDATE LIST ── */
.tc-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tc-list-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tc-list-count {
  font-size: 10px;
  color: var(--color-text-muted);
  background: rgba(14, 45, 102, 0.06);
  padding: 2px 8px;
  border-radius: 100px;
}

.tc-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.candidate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(14, 45, 102, 0.07);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.candidate:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-sm);
}

/* ── AVATAR (pure CSS photo-like) ── */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(14, 45, 102, 0.15);
}

/* Person silhouette using CSS shapes */
.avatar::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.avatar::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 18px;
  border-radius: 50% 50% 0 0;
  background: rgba(255, 255, 255, 0.75);
}

/* Unique gradient backgrounds per candidate */
.avatar.av1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.avatar.av2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.avatar.av3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.avatar.av4 {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* Initials on avatar */
.avatar-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  z-index: 1;
  letter-spacing: 0.02em;
}

/* ── CANDIDATE INFO ── */
.info {
  flex: 1;
  min-width: 0;
}

.cand-name {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-dark);
  display: block;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cand-role {
  font-size: 10.5px;
  color: var(--color-text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── STATUS BADGES ── */
.status {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.status.hired {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.status.pending {
  background: rgba(251, 191, 36, 0.12);
  color: #b45309;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.status.interview {
  background: rgba(91, 94, 232, 0.1);
  color: var(--color-indigo);
  border: 1px solid rgba(91, 94, 232, 0.2);
}

/* ── FOOTER ── */
.tc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(14, 45, 102, 0.07);
}

.tc-footer-text {
  font-size: 10.5px;
  color: var(--color-text-muted);
}

.tc-footer-text strong {
  color: var(--color-indigo);
  font-weight: 700;
}

.tc-footer-avatars {
  display: flex;
  align-items: center;
}

.footer-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  margin-left: -6px;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-head);
}

.footer-av:first-child {
  margin-left: 0;
}

.footer-av.fa1 {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.footer-av.fa2 {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.footer-av.fa3 {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.footer-av.fa4 {
  background: rgba(14, 45, 102, 0.08);
  color: var(--color-text-muted);
  font-size: 9px;
  border: 2px solid var(--color-border);
}

/* ── FLOATING BADGE ── */
.floating-badge {
  position: absolute;
  top: -18px;
  right: -12px;
  z-index: 10;
  background: var(--color-white);
  border-radius: 14px;
  padding: 9px 13px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 150px;
  animation: float-badge 3s ease-in-out infinite;
}

@keyframes float-badge {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.fb-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-indigo), var(--color-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fb-icon svg {
  width: 15px;
  height: 15px;
}

.fb-text strong {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.2;
}

.fb-text span {
  font-size: 10px;
  color: var(--color-text-muted);
}

/* ── BOTTOM FLOATING PILL ── */
.floating-pill {
  position: absolute;
  bottom: -16px;
  left: -12px;
  z-index: 10;
  background: linear-gradient(135deg, var(--color-navy), var(--color-indigo));
  border-radius: 100px;
  padding: 8px 14px;
  box-shadow: 0 8px 24px rgba(14, 45, 102, 0.3);
  display: flex;
  align-items: center;
  gap: 7px;
  animation: float-pill 3.5s ease-in-out infinite;
  animation-delay: 0.8s;
}

@keyframes float-pill {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.fp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #27c93f;
  box-shadow: 0 0 0 3px rgba(39, 201, 63, 0.25);
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.fp-text {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}


/* ============================================================
   15. Slide 1 – Icon Circle & Badges
   ============================================================ */
.icon-circle {
  width: clamp(180px, 22vw, 280px);
  height: clamp(180px, 22vw, 280px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e6fbff, #b8e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: visible;
  box-shadow:
    0 20px 60px rgba(26, 171, 186, 0.25),
    inset 0 0 30px rgba(255, 255, 255, 0.4);
  transition: all var(--tr-slow);
}

.icon-circle:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow:
    0 30px 80px rgba(26, 171, 186, 0.35),
    0 0 40px rgba(26, 171, 186, 0.4),
    inset 0 0 40px rgba(255, 255, 255, 0.6);
}

/* Orbits */
.orbit {
  position: absolute;
  border-radius: 50%;
  animation: spin linear infinite;
}

.orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(120deg, #1aabba, #7fffd4, #0e2d66) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  filter: blur(0.5px);
}

.orbit-1 {
  width: 115%;
  height: 115%;
  animation-duration: 18s;
}

.orbit-2 {
  width: 140%;
  height: 140%;
  animation-duration: 28s;
  animation-direction: reverse;
}

/* Floating badges */
.o-badge {
  position: absolute;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  animation: float 4s ease-in-out infinite;
  transition: var(--tr-base);
}

.o-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(26, 171, 186, 0.4);
}

/* Badge positions */
.b1 {
  top: -5%;
  right: 5%;
}

.b2 {
  bottom: 5%;
  left: -10%;
}

.b3 {
  top: 45%;
  right: -18%;
}

.b4 {
  top: -8%;
  left: 10%;
}

.b5 {
  bottom: -8%;
  right: 10%;
}

.b6 {
  top: 55%;
  left: -24%;
}

.b7 {
  top: 20%;
  left: -20%;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1aabba, #7fffd4);
  flex-shrink: 0;
}

.circle-inner {
  width: 66%;
  height: 66%;
  position: relative;
  z-index: 2;
  transition: var(--tr-slow);
}

.icon-circle:hover .circle-inner {
  transform: scale(1.05) rotate(-2deg);
}


/* ============================================================
   16. Slide 2 – Service Grid Cards
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 520px;
  width: 100%;
}

.svc-card {
  position: relative;
  padding: 20px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 8px 25px rgba(14, 45, 102, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.35s ease;
  overflow: hidden;
}

/* Glow border on hover */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(91, 94, 232, 0.25), transparent);
  opacity: 0;
  transition: 0.4s;
}

.svc-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(91, 94, 232, 0.1);
}

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

/* Shine sweep */
.svc-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: 0.6s;
}

.svc-card:hover::after {
  left: 120%;
}

.svc-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: all 0.35s ease;
}

.svc-card:hover .svc-icon {
  transform: rotate(8deg) scale(1.15);
}

.svc-icon--blue {
  background: #e8f0fc;
}

.svc-icon--teal {
  background: #e4f9fb;
}

.svc-icon--orange {
  background: #fef3e8;
}

.svc-icon--purple {
  background: #f3e8ff;
}

.svc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.svc-sub {
  font-size: 12px;
  color: #6b8cbf;
  line-height: 1.5;
}

.svc-card--full {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.svc-card--full .svc-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}


/* ============================================================
   17. Slide 3 – Stats Panel
   ============================================================ */
.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  max-width: 420px;
}

.stat-row {
  background: var(--color-white);
  border-radius: 14px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(14, 45, 102, 0.06);
}

.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-num {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1;
}

.stat-lbl {
  font-size: 11px;
  color: #6b8cbf;
  margin-top: 3px;
  font-family: var(--font-body);
}

.stat-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: #e0f8e0;
  color: #0a8a2e;
  font-family: var(--font-body);
  white-space: nowrap;
}

.prog-row {
  background: var(--color-white);
  border-radius: 14px;
  padding: 15px 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(14, 45, 102, 0.06);
}

.prog-label {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 9px;
  font-family: var(--font-body);
}

.prog-bg {
  background: #e4eaf5;
  border-radius: 6px;
  height: 7px;
  overflow: hidden;
}

.prog-fill {
  height: 7px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1aabba, var(--color-navy));
  width: 0;
  transition: width 1.3s ease;
}


/* ============================================================
   18. Slide 4 – Process Card
   ============================================================ */
.process-card {
  position: relative;
  padding: 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 10px 30px rgba(14, 45, 102, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: all 0.35s ease;
  width: 100%;
  max-width: 420px;
}

.process-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: 0.7s;
}

.process-card:hover::after {
  left: 120%;
}

.proc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 22px;
}

.proc-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #1aabba, var(--color-navy));
  color: var(--color-white);
  flex-shrink: 0;
}

.proc-icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-white);
}

.proc-item {
  position: relative;
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  transition: all var(--tr-base);
}

.proc-item:last-child {
  margin-bottom: 0;
}

.proc-item:hover {
  transform: translateX(6px);
}

.proc-line {
  position: absolute;
  left: 14px;
  top: 34px;
  width: 2px;
  height: calc(100%);
  background: linear-gradient(to bottom, rgba(26, 171, 186, 0.6), rgba(14, 45, 102, 0.1));
  border-radius: 2px;
}

.proc-num {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: all var(--tr-base);
}

.proc-num--active {
  background: linear-gradient(135deg, #1aabba, #0a9a6e);
  box-shadow: 0 0 0 6px rgba(26, 171, 186, 0.15);
}

.proc-item:hover .proc-num {
  transform: scale(1.15);
}

.proc-content {
  flex: 1;
}

.proc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
}

.proc-sub {
  font-size: 12px;
  color: #6b8cbf;
  margin-top: 3px;
  line-height: 1.5;
}


/* ============================================================
   19. Slick Carousel Overrides
   ============================================================ */
#hero-slider {
  border-radius: 16px;
  overflow: hidden;
}

.slick-track {
  display: flex !important;
}

.slick-slide {
  height: inherit !important;
}

.slick-slide>div {
  height: 100%;
}

/* Navigation arrows */
.slick-prev,
.slick-next {
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white) !important;
  border: 1px solid rgba(14, 45, 102, 0.12) !important;
  box-shadow: 0 4px 16px rgba(14, 45, 102, 0.12);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
}

.slick-prev:hover,
.slick-next:hover {
  background: var(--color-navy) !important;
  box-shadow: 0 8px 24px rgba(14, 45, 102, 0.18);
  transform: translateY(-50%) scale(1.08);
}

.slick-prev {
  left: 14px;
}

.slick-next {
  right: 14px;
}

/* Hide default slick arrow text */
.slick-prev::before,
.slick-next::before {
  display: none;
}

.slick-prev .arr-icon,
.slick-next .arr-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slick-prev .arr-icon svg,
.slick-next .arr-icon svg {
  stroke: var(--color-navy);
  transition: stroke 0.2s;
}

.slick-prev:hover .arr-icon svg,
.slick-next:hover .arr-icon svg {
  stroke: var(--color-white);
}


/* ============================================================
   20. Keyframe Animations
   ============================================================ */
@keyframes shimmer {
  0% {
    left: -70%;
  }

  100% {
    left: 140%;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.45;
    transform: scale(0.7);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}


/*============================================================ 
ABOUT SECTION 
   ============================================================   */
.ab-wrap {
  background: linear-gradient(135deg, #f4fafc 0%, #e8f4f8 50%, #eaf0fb 100%);

  padding: 80px 60px;
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
}

/* ── BACKGROUND ORBS ── */
.ab-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  z-index: 0;
  animation: floatOrb 12s infinite ease-in-out alternate;
}

.orb1 {
  width: 260px;
  height: 260px;
  background: var(--color-indigo);
  top: -60px;
  left: -80px;
}

.orb2 {
  width: 220px;
  height: 220px;
  background: var(--color-teal);
  bottom: -60px;
  right: -60px;
  animation-delay: 2s;
}

.orb3 {
  width: 180px;
  height: 180px;
  background: var(--color-teal-light);
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 4s;
}

@keyframes floatOrb {
  0% {
    transform: translateY(0px) scale(1);
  }

  100% {
    transform: translateY(-40px) scale(1.1);
  }
}




/* ── INNER CONTAINER ── */
.ab-inner {
  position: relative;
  z-index: 2;
  max-width: 90%;
  margin: 0 auto;
}

/* ════════════════════════════════
       HEADING BLOCK
    ════════════════════════════════ */
.ab-heading-block {
  text-align: center;
  margin-bottom: 68px;
}

.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(91, 94, 232, 0.08);
  border: 1.5px solid rgba(91, 94, 232, 0.22);
  color: var(--color-indigo);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 24px;
  animation: fadeDown 0.7s ease both;
}

.ab-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-indigo);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.5);
  }
}

.ab-main-title {
  font-family: var(--font-head);
  font-size: 60px;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -2px;
  color: var(--color-navy);
  margin-bottom: 10px;
  animation: fadeDown 0.8s 0.1s ease both;
}

.ab-title-gradient {
  background: linear-gradient(100deg, var(--color-indigo) 0%, var(--color-teal) 60%, var(--color-teal-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.ab-title-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.ab-title-underline {
  height: 3px;
  width: 72px;
  border-radius: 999px;
  animation: expandLine 1s 0.5s ease both;
  transform-origin: left;
}

.ab-title-underline.right {
  transform-origin: right;
}

@keyframes expandLine {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes fadeDown {
  from {
    transform: translateY(-18px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    transform: translateY(28px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ════════════════════════════════
       MAIN GRID
    ════════════════════════════════ */
.ab-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ════════════════════════════════
       LEFT CONTENT
    ════════════════════════════════ */
.ab-left {
  animation: fadeUp 0.8s 0.2s ease both;
}

.ab-svg-visual {
  width: 100%;
  margin-bottom: 28px;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(91, 94, 232, 0.15);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

.ab-svg-visual svg {
  display: block;
}

.ab-desc {
  color: var(--color-text-mid);
  font-size: 15px;
  line-height: 1.78;
  margin-bottom: 14px;
}

/* Features */
.ab-features {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

}

.ab-feature-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: 5px;
}

.ab-feature {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 9px;
  padding: 12px 12px;
  border-radius: 12px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-dark);
  font-size: 12px;
  font-weight: 400;
  box-shadow: var(--shadow-sm);
  transition: all var(--tr-base);
  cursor: default;
}

.ab-feature span {
  color: var(--color-indigo);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.ab-feature:hover {
  background: rgba(91, 94, 232, 0.04);
  border-color: rgba(91, 94, 232, 0.30);
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
}

.ab-feature-icon {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}

.ab-feature-icon svg {
  display: block;
  width: 10px;
  height: 10px;
}

/* ════════════════════════════════
       RIGHT STATS
    ════════════════════════════════ */
.ab-right {
  animation: fadeUp 0.8s 0.35s ease both;
  position: relative;
}

/* Floating rings */
.ab-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(91, 94, 232, 0.10);
  pointer-events: none;
  animation: ringExpand 6s ease-in-out infinite;
}

.ab-ring-1 {
  width: 180px;
  height: 180px;
  top: -40px;
  right: -40px;
  animation-delay: 0s;
}

.ab-ring-2 {
  width: 110px;
  height: 110px;
  top: 10px;
  right: 10px;
  animation-delay: 1.2s;
}

@keyframes ringExpand {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Stats grid */
.ab-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ab-stat-card {
  padding: 15px 15px;
  border-radius: 18px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: default;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
  flex-direction: column;
}

/* Top color bar */
.ab-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent);
  opacity: 0;
  transition: opacity 0.35s;
}

.ab-stat-card:hover::before {
  opacity: 1;
}

.ab-stat-card:hover {
  border-color: rgba(91, 94, 232, 0.25);
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* Accent colours per card */
.ab-stat-card:nth-child(1) {
  --card-accent: linear-gradient(90deg, #5b5ee8, #7b7ef0);
}

.ab-stat-card:nth-child(2) {
  --card-accent: linear-gradient(90deg, #1aabba, #2dcad9);
}

.ab-stat-card:nth-child(3) {
  --card-accent: linear-gradient(90deg, #0e8a97, #1aabba);
}

.ab-stat-card:nth-child(4) {
  --card-accent: linear-gradient(90deg, #0e2d66, #5b5ee8);
}

.ab-stat-card:nth-child(5) {
  --card-accent: linear-gradient(90deg, #5b5ee8, #1aabba, #2dcad9);
  grid-column: span 2;
}

/* Icon ring */
.ab-stat-icon-ring {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91, 94, 232, 0.08), rgba(26, 171, 186, 0.08));
  border: 1.5px solid rgba(91, 94, 232, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin: 0 auto 12px; */
  animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(91, 94, 232, 0.15);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(91, 94, 232, 0);
  }
}

.ab-stat-num {
  font-family: var(--font-head);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--color-navy);
  line-height: 1;
}

.ab-stat-num .accent {
  color: var(--color-indigo);
  margin-left: 2px;
}

.ab-stat-label {
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-weight: 500;
  line-height: 1.45;
  padding-top: 10px;

}

/* Wide stat (5th card) inner layout */
.ab-stat-wide-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.ab-stat-wide-inner .ab-stat-icon-ring {
  margin: 0;
  animation: none;
}

.ab-stat-wide-inner .ab-stat-num {
  text-align: left;
}

.ab-stat-wide-inner .ab-stat-label {
  text-align: left;
}

/* Trust badge */
.ab-trust-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--color-white);
  border: 1.5px solid rgba(91, 94, 232, 0.18);
  box-shadow: var(--shadow-sm);
}

.ab-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91, 94, 232, 0.12), rgba(26, 171, 186, 0.12));
  border: 1.5px solid rgba(91, 94, 232, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ab-trust-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--color-navy);
}

.ab-trust-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-top: 3px;
}

.ab-extra-cards {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ab-extra-card {
    padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: var(--tr-base);
  position: relative;
  overflow: hidden;
}


.ab-extra-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(91, 94, 232, 0.08), transparent);
  opacity: 0;
  transition: var(--tr-base);
}

.ab-extra-card:hover::before {
  opacity: 1;
}

.ab-extra-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.ab-extra-card h4 {
  font-family: var(--font-head);
  color: var(--color-navy);
  font-size: 17px;
  margin-bottom: 7px;
}

.ab-extra-card p {
  font-size: 14px;
  color: var(--color-text-mid);
  line-height: 1.6;

}

/*** ABOUT SECTION   ***/


/*============================================================ 
SERVICE SECTION 
   ============================================================   */

.section-desc {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.75;
  width: 100%;
  max-width: 50%;
  margin: auto;
}

.service-wrap {
  background: linear-gradient(135deg, #f4fafc 0%, #e8f4f8 50%, #eaf0fb 100%);

  padding: 80px 60px;
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
}

.service-grid_main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* GRID BACKGROUND */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(14, 45, 102, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 45, 102, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* INNER */
.service-inner {
  position: relative;
  z-index: 2;
  max-width: 90%;
  margin: 0 auto;
}

/* =====================================================
       SERVICE CARD — BASE
  ===================================================== */
.service-card_main {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 34px 22px 30px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
  grid-column: span 4 / span 4;
}

/* Top accent line */
.service-card_main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 2.5px;
  background: linear-gradient(90deg, var(--color-indigo), var(--color-teal));
  border-radius: 0 0 6px 6px;
  opacity: 0;
  transform: scaleX(0.5);
  transform-origin: center;
  transition: opacity var(--tr-base), transform var(--tr-base);
}

/* Hover bg tint */
.service-card_main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(91, 94, 232, 0.03) 0%,
      rgba(26, 171, 186, 0.03) 100%);
  opacity: 0;
  transition: opacity var(--tr-base);
  border-radius: inherit;
  pointer-events: none;
}

.service-card_main:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(91, 94, 232, 0.2);
}

.service-card_main:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.service-card_main:hover::after {
  opacity: 1;
}

/* =====================================================
       CARD ICON
    ===================================================== */
.card-icon-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg,
      rgba(91, 94, 232, 0.1) 0%,
      rgba(26, 171, 186, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
  transition: background var(--tr-base);
}

.service-card_main:hover .card-icon-wrap {
  background: linear-gradient(135deg,
      rgba(91, 94, 232, 0.15) 0%,
      rgba(26, 171, 186, 0.15) 100%);
}

.card-icon-wrap svg {
  width: 24px;
  height: 24px;
}
.card-title-ul{
  list-style: none;
}
.card-title-li{
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color var(--tr-fast), gap var(--tr-fast);
  margin-bottom: 5px;
  padding: 2px 0;
    padding-left: 24px;
  position: relative;
}
.card-title-li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-teal);
    font-weight: bold;
    font-size: 16px;
}
.service-card_main:nth-child(odd)  .card-title-li{
      color: var(--color-text-muted);
}
/* Number badge */
.card-number {
  position: absolute;
  top: -7px;
  right: -7px;
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-indigo), var(--color-teal));
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(91, 94, 232, 0.4);
}

/* =====================================================
       CARD TEXT
    ===================================================== */
.card-title {
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card-desc {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.2;
  flex: 1;
  margin-bottom: 10px;
}

/* =====================================================
       CARD ARROW LINK
    ===================================================== */
.card-arrow {
display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-indigo);

    justify-content: center;
}

.card-arrow svg {
  width: 13px;
  height: 13px;
  transition: transform var(--tr-fast);
}

/* .service-card_main:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.service-card_main:hover .card-arrow svg {
  transform: translateX(3px);
} */

/* =====================================================
       HIGHLIGHT CARD (span 2 cols)
    ===================================================== */
.service-card_main:nth-child(even) {

  background: linear-gradient(135deg,
      var(--color-navy) 0%,
      var(--color-indigo) 55%,
      var(--color-teal-dark) 100%);
  border: none;
  color: var(--color-white);
}

.service-card_main:nth-child(even)::before {
  display: none;
}

.service-card_main:nth-child(even)::after {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.02) 100%);
}

.service-card_main:nth-child(even):hover {
  border-color: transparent;
  box-shadow: 0 22px 55px rgba(14, 45, 102, 0.35);
}

.service-card_main:nth-child(even) .card-icon-wrap {
  background: rgba(255, 255, 255, 0.15);
}

.service-card_main:nth-child(even):hover .card-icon-wrap {
  background: rgba(255, 255, 255, 0.2);
}

.service-card_main:nth-child(even) .card-number {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.service-card_main:nth-child(even) .card-title {
  color: rgba(255, 255, 255, 0.96);
}

.service-card_main:nth-child(even) .card-desc {
  color: rgba(255, 255, 255, 0.68);
}

.service-card_main .card-arrow {
  color: var(--color-teal-light);
}

/* Highlight badge */
.service-card_main:nth-child(odd) .highlight-badge {
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-indigo) 55%, var(--color-teal-dark) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.service-card_main:nth-child(even) .highlight-badge {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.highlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 18px;
  align-self: flex-start;
}

.highlight-badge svg {
  width: 10px;
  height: 10px;
}

/* Decorative dot grid (highlight card) */
.dot-grid {
  position: absolute;
  right: 18px;
  bottom: 18px;
  opacity: 0.14;
  pointer-events: none;
}


/*** SERVICE SECTION   ***/


.cta-section {
    background: linear-gradient(135deg, var(--color-off-white) 0%, #e8f4f8 50%, #eaf0fb 100%);
    padding: 80px 60px;
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
}

.ab-inner {
    position: relative;
    z-index: 1;
}





.ctasection_bg {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-indigo) 55%, var(--color-teal-dark) 100%);
    border-radius: 32px;
    padding: 80px 60px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(14, 45, 102, 0.25);
    transition: all var(--tr-slow);
}

    .ctasection_bg:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 80px rgba(14, 45, 102, 0.35);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .ctasection_bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 50%, rgba(26, 171, 186, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(91, 94, 232, 0.1) 0%, transparent 50%);
        pointer-events: none;
    }

    .ctasection_bg::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
        border-radius: 50%;
        animation: float 8s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes float {

    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-30px, 30px);
    }
}

.cta-wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}



.cta-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cta-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-teal-light);
    background: rgba(45, 202, 217, 0.15);
    padding: 8px 16px;
    border-radius: 20px;
    width: fit-content;
    animation: slideInLeft 0.8s var(--tr-slow) forwards;
    opacity: 0;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cta-title {
    font-family: var(--font-head);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
    animation: slideInLeft 0.8s var(--tr-slow) 0.1s forwards;
}

    .cta-title .highlight {
        background: linear-gradient(135deg, var(--color-teal-light) 0%, var(--color-teal) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.cta-description {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    max-width: 500px;
    animation: slideInLeft 0.8s var(--tr-slow) 0.2s forwards;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    animation: slideInLeft 0.8s var(--tr-slow) 0.3s forwards;
}



.cta-button {
    padding: 16px 32px;
    border-radius: 12px;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--tr-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
}

    .cta-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        transition: left var(--tr-base);
        z-index: -1;
    }

    /* Secondary Button */
    .cta-button.secondary {
        background: rgba(255, 255, 255, 0);
        color: var(--color-teal-light);
        border: 2px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
    }

        .cta-button.secondary::before {
            background: rgba(255, 255, 255, 0.25);
        }

        .cta-button.secondary:hover {
            background: rgba(255, 255, 255, 0.053);
            border-color: rgba(255, 255, 255, 0.4);
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(31, 38, 135, 0.3);
        }

            .cta-button.secondary:hover::before {
                left: 0;
            }

        .cta-button.secondary:active {
            transform: translateY(-2px);
        }

.button-icon {
    font-size: 18px;
    transition: transform var(--tr-base);
}

.cta-button:hover .button-icon {
    transform: translateX(4px);
}

/* Right Side - SVG Illustration */
.cta-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: slideInRight 0.8s var(--tr-slow) 0.2s forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cta-svg-container {
    width: 100%;
    max-width: 400px;
    height: 400px;
    position: relative;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

    .cta-svg-container svg {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 10px 20px rgba(14, 45, 102, 0.2));
    }


@media(max-width:1300px) {
  .panel-left {
    width: 54%;
  }
}

@media(max-width:1200px) {

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
    }

    .sidebarlink {
        flex-direction: column;
        gap: 10px;
        position: fixed;
        top: 0;
        left: -100%;
        width: 260px;
        height: 100vh;
        background: #fff;
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.75);
        box-shadow: var(--shadow-lg), 0 0 0 1px rgba(91, 94, 232, 0.06);
        transition: 0.4s ease;
        z-index: 999;
        display: flex;
    }

    .sidebarlinknav-link {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 14px;
        font-size: 14.5px;
        font-weight: 500;
        color: var(--color-white);
        text-decoration: none;
        border-radius: 7px;
        transition: background var(--tr-fast), color var(--tr-fast);
        cursor: pointer;
        background: var(--color-teal);
        white-space: nowrap;
    }

    .sidebarlinkul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 10px;
    }

    .sidebarlinkul {
        border-top: 1px solid var(--color-border);
        padding-top: 20px;
    }

    .sidebarlink.active {
        left: 0;
    }

    .nav-links a {
        font-size: 16px;
        padding: 10px 0;
    }

    /* Hide CTA */
    .nav-cta-info {
        display: none;
    }
    .logo img {
        width: 100%;
        height: 70px;
    }

    .logosidebar img {
        width: 100%;
        max-width: 120px;
        height: 50px;
    }

    .logo_cross_main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

    .close-btn {
        padding: 10px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(14px);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        transition: var(--tr-base);
        position: relative;
        overflow: hidden;
    }

    .cta-title {
        font-family: var(--font-head);
        font-size: 35px;
        line-height: 1.2;
    }

    .cta-description {
        font-size: 14px;
        max-width: 500px;
    }

    .ctasection_bg {
        padding: 50px 40px;
    }
    @media(max-width:1200px) {
        .panel-right {
            padding-left: calc(var(--diag) + 40px);
        }

        .icon-circle {
            width: clamp(180px, 30vw, 280px);
            height: clamp(180px, 30vw, 280px);
        }

        .service-card_main {
            grid-column: span 6 / span 4;
        }
    }

    /* ============================================================
   21. Responsive – Tablet (≤ 900 px)
   ============================================================ */


    @media (max-width: 900px) {
        :root {
            --topbar-px: 30px;
        }

        .divider {
            display: none;
        }

        .top-bar-item:not(:first-child) {
            display: none;
        }

        .navbar {
            padding: 0 30px;
        }

        .nav-cta-info {
            display: none;
        }

        .nav-links {
            gap: 0;
        }

        .nav-link,
        .nav-contact {
            padding: 8px 10px;
            font-size: 13.5px;
        }

        .panel-left {
            width: 55%;
            padding: clamp(24px, 4vw, 44px) clamp(24px, 5vw, 48px);
        }

        .service-grid {
            gap: 10px;
        }

        .stats-panel {
            max-width: 100%;
        }

        .process-card {
            max-width: 100%;
        }

        .slick-prev,
        .slick-next {
            width: 22px;
            height: 22px;
        }

        .ab-grid {
            grid-template-columns: 1fr;
        }

        .ab-main-title {
            font-size: 42px;
        }

        .ab-stat-card:nth-child(5) {
            grid-column: span 1;
        }

        .section-desc {
            width: 100%;
            max-width: 100%;
        }

        .slide {
            min-height: clamp(340px, 52vw, 560px);
            flex-direction: column !important;
            align-items: stretch;
            position: relative;
        }

        .panel-right {
            display: none;
        }

        .panel-left {
            width: 100%;
        }

        .ab-inner {
            max-width: 100%;
        }

        .service-inner {
            max-width: 100%;
        }


        .ab-heading-block {
            text-align: center;
            margin-bottom: 15px;
        }

        .cta-wrapper {
            grid-template-columns: 1fr;
        }

        .cta-visual {
            display: none;
        }
    }


    /* ============================================================
   22. Responsive – Mobile (≤ 680 px)
   ============================================================ */
    @media (max-width: 680px) {
        :root {
            --topbar-px: 18px;
        }

        /* Top bar */
        .top-bar {
            padding: 8px 18px;
        }

        .top-bar-left {
            gap: 12px;
        }

        .top-bar-right {
            gap: 10px;
        }

        .top-bar-item {
            font-size: 13px;
        }

        /* Navbar */
        .navbar {
            padding: 0 18px;
            height: auto;
            min-height: 60px;
            flex-wrap: wrap;
            padding-top: 10px;
            padding-bottom: 10px;
            gap: 10px;
        }

        .nav-links {
            order: 3;
            width: 100%;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .nav-link,
        .nav-contact {
            font-size: 13px;
            padding: 6px 10px;
        }

        /* Slides – stack vertically */
        .slide {
            flex-direction: column;
            min-height: auto;
        }

        .panel-left {
            width: 100%;
            clip-path: none;
            padding: 32px 22px 28px;
            border-radius: 0;
        }

        .panel-right {
            display: none;
        }

        /* hide visual panels on mobile */

        /* Banner */
        .banner-outer {
            padding: 6px;
            border-radius: 10px;
        }

        #hero-slider {
            border-radius: 10px;
        }

        /* Service grid – single column */
        .service-grid {
            grid-template-columns: 1fr;
            max-width: 100%;
        }

        .svc-card--full {
            grid-column: 1;
        }

        /* Stats */
        .stats-panel {
            max-width: 100%;
        }

        .ab-wrap {
            padding: 48px 20px;
        }

        .service-wrap {
            padding: 48px 20px;
        }

        .ab-main-title {
            font-size: 32px;
            letter-spacing: -1px;
        }

        .ab-stats-grid {
            grid-template-columns: 1fr;
        }

        .ab-stat-card:nth-child(5) {
            grid-column: span 1;
        }

        .service-card_main {
            grid-column: span 12 / span 4;
        }

        .footer-stat {
            padding: 15px var(--topbar-px);
        }

        .fs-number {
            font-family: var(--font-head);
            font-size: 15px;
        }

        .footer-stats {
            grid-template-columns: repeat(2, 1fr);
        }
    }


    /* ============================================================
   23. Responsive – Small (≤ 420 px)
   ============================================================ */
    @media (max-width: 420px) {
        .slide-headline {
            font-size: 22px;
        }

        .slide-actions {
            flex-direction: column;
            align-items: flex-start;
        }

        .btn-primary {
            width: 100%;
            justify-content: center;
        }

        .top-bar {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .top-bar-socials {
            gap: 8px;
        }

            .top-bar-socials a {
                width: 32px;
                height: 32px;
            }
    }