/* =================================================================
   Site-Wide Soft Blurred Gradients — AI Security
   Modern SaaS depth: layered radial blurs + subtle linear shifts
   Link this AFTER style.css on every page.
   ================================================================= */

/* ─── Gradient Tokens ───────────────────────────────────────────── */
:root {
  /* Light surface tints (barely perceptible) */
  --sg-tint-lavender: rgba(139, 92, 246, .04);
  --sg-tint-blue: rgba(59, 130, 246, .035);
  --sg-tint-rose: rgba(244, 114, 182, .025);
  --sg-tint-cyan: rgba(34, 211, 238, .025);

  /* Dark surface tints */
  --sg-dark-base: #0c0a1a;
  --sg-dark-mid: #12102a;
  --sg-dark-blue: rgba(59, 130, 246, .08);
  --sg-dark-purple: rgba(139, 92, 246, .1);
  --sg-dark-teal: rgba(20, 184, 166, .06);

  /* Orb colors (for blurred pseudo-elements) */
  --sg-orb-violet: rgba(139, 92, 246, .06);
  --sg-orb-blue: rgba(59, 130, 246, .05);
  --sg-orb-rose: rgba(244, 114, 182, .04);
  --sg-orb-cyan: rgba(34, 211, 238, .04);

  /* Dark orb colors */
  --sg-orb-dark-violet: rgba(139, 92, 246, .12);
  --sg-orb-dark-blue: rgba(59, 130, 246, .1);
  --sg-orb-dark-rose: rgba(190, 60, 120, .06);
}

/* ─── Light sections: bg-very-light-gray ────────────────────────── */
.bg-very-light-gray {
  background:
    radial-gradient(ellipse 50% 50% at 15% 20%, var(--sg-tint-lavender), transparent 60%),
    radial-gradient(ellipse 45% 45% at 80% 70%, var(--sg-tint-blue), transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 90%, var(--sg-tint-rose), transparent 50%),
    linear-gradient(168deg, #fafafe 0%, #f5f3fb 35%, #f2f6fd 65%, #f7f7f7 100%) !important;
  position: relative;
}

/* ─── White sections: bg-white overrides ────────────────────────── */
section.bg-white,
div.bg-white,
.section-white-gradient {
  background:
    radial-gradient(ellipse 55% 50% at 80% 15%, var(--sg-tint-blue), transparent 55%),
    radial-gradient(ellipse 45% 45% at 20% 80%, var(--sg-tint-lavender), transparent 50%),
    linear-gradient(172deg, #ffffff 0%, #fcfbff 40%, #fafbfe 70%, #ffffff 100%) !important;
}

/* ─── Bootstrap tertiary (hero panels, etc.) ────────────────────── */
.bg-body-tertiary {
  background:
    radial-gradient(ellipse 50% 50% at 75% 25%, var(--sg-tint-lavender), transparent 55%),
    radial-gradient(ellipse 45% 45% at 25% 75%, var(--sg-tint-cyan), transparent 50%),
    linear-gradient(165deg, #f8f9fa 0%, #f4f2fb 40%, #f0f5fa 100%) !important;
}

/* ─── Dark sections: bg-black ───────────────────────────────────── */
.bg-black,
section.bg-black {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, var(--sg-orb-dark-violet), transparent 55%),
    radial-gradient(ellipse 50% 50% at 75% 65%, var(--sg-orb-dark-blue), transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 90%, var(--sg-orb-dark-rose), transparent 45%),
    linear-gradient(160deg, #0a0818 0%, #0e0c22 25%, #100e28 50%, #0c0a1e 75%, #08060f 100%) !important;
}

/* ─── Footer: bg-black-pearl-blue-dark ──────────────────────────── */
.bg-black-pearl-blue-dark {
  background:
    radial-gradient(ellipse 55% 50% at 10% 30%, var(--sg-orb-dark-violet), transparent 55%),
    radial-gradient(ellipse 45% 45% at 85% 60%, var(--sg-orb-dark-blue), transparent 50%),
    linear-gradient(170deg, #141220 0%, #18162e 35%, #1a1830 60%, #14121e 100%) !important;
}

/* ─── Blurred orb overlays for key sections ─────────────────────── */
/* Light sections get soft floating orbs via ::before */
.bg-very-light-gray::before,
.our-mission::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50%;
  height: 70%;
  background: radial-gradient(circle, var(--sg-orb-violet), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.bg-very-light-gray::after,
.our-mission::after {
  content: "";
  position: absolute;
  bottom: -15%;
  left: -5%;
  width: 40%;
  height: 60%;
  background: radial-gradient(circle, var(--sg-orb-blue), transparent 60%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above the orbs */
.bg-very-light-gray > *,
.our-mission > * {
  position: relative;
  z-index: 1;
}

/* ─── About page hero text panel ────────────────────────────────── */
.service-hero-content {
  background:
    radial-gradient(ellipse 60% 55% at 30% 20%, rgba(120, 70, 210, .2), transparent 55%),
    radial-gradient(ellipse 50% 50% at 70% 70%, rgba(50, 120, 240, .15), transparent 50%),
    linear-gradient(155deg, #0f0a28 0%, #1a1050 25%, #251570 45%, #1e3580 70%, #0f1e3e 100%) !important;
  background-blend-mode: normal !important;
}

/* ─── About page slider section ─────────────────────────────────── */
.about-first-slider {
  position: relative;
}

.about-first-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 45% 45% at 80% 20%, var(--sg-tint-lavender), transparent 55%),
    radial-gradient(ellipse 40% 40% at 15% 80%, var(--sg-tint-blue), transparent 50%),
    linear-gradient(168deg, rgba(255,255,255,.92) 0%, rgba(248,246,255,.9) 40%, rgba(245,248,255,.92) 100%);
  pointer-events: none;
  z-index: 0;
}

.about-first-slider > * {
  position: relative;
  z-index: 1;
}

/* ─── "Come join us" CTA — modernized ───────────────────────────── */
.come-join-us section {
  border-radius: 20px;
  overflow: hidden;
}

.cta-join {
  position: relative;
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) 2rem;
  background:
    radial-gradient(ellipse 60% 55% at 75% 20%, rgba(60, 80, 220, .25), transparent 55%),
    radial-gradient(ellipse 50% 50% at 25% 70%, rgba(100, 60, 200, .18), transparent 50%),
    linear-gradient(155deg, #0a0620 0%, #0e082e 15%, #160e50 30%, #1a1060 50%, #221470 70%, #1e3090 100%);
  color: #fff;
  isolation: isolate;
}

.cta-join__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 70%;
  background: radial-gradient(ellipse, rgba(80, 70, 240, .12), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.cta-join__badge {
  display: inline-block;
  padding: .35rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

.cta-join__title {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  color: #fff;
}

.cta-join__desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .7);
  max-width: 36rem;
  margin: 0 auto 2.5rem;
}

.cta-join__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: opacity .2s ease;
}

.cta-join__link:hover {
  opacity: .8;
  color: #fff;
}

.cta-join__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .875rem;
}

.cta-join__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.75rem;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .25s cubic-bezier(.22, 1, .36, 1);
}

.cta-join__btn--primary {
  color: #0a0620;
  background: #fff;
  border-color: #fff;
}

.cta-join__btn--primary:hover {
  background: rgba(255, 255, 255, .88);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 255, 255, .15);
  color: #0a0620;
}

.cta-join__btn--ghost {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .25);
}

.cta-join__btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.cta-join__btn--ghost i {
  font-size: .75rem;
  transition: transform .25s ease;
}

.cta-join__btn--ghost:hover i {
  transform: translateX(3px);
}

/* (Services hero styles moved to inline <style> in services page) */

/* ─── Contact-us section ────────────────────────────────────────── */
.contact-us-sec.bg-very-light-gray {
  background:
    radial-gradient(ellipse 50% 50% at 85% 20%, rgba(139, 92, 246, .05), transparent 55%),
    radial-gradient(ellipse 45% 45% at 15% 75%, rgba(59, 130, 246, .04), transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 50%, var(--sg-tint-rose), transparent 45%),
    linear-gradient(168deg, #fafafe 0%, #f5f3fb 35%, #f2f6fd 65%, #f7f7f7 100%) !important;
}

/* ─── Blog section ──────────────────────────────────────────────── */
.blog-sec {
  position: relative;
  background:
    radial-gradient(ellipse 50% 45% at 80% 10%, var(--sg-tint-lavender), transparent 55%),
    radial-gradient(ellipse 45% 45% at 10% 90%, var(--sg-tint-blue), transparent 50%),
    linear-gradient(172deg, #ffffff 0%, #fcfbff 35%, #fafbfe 70%, #ffffff 100%) !important;
}

/* ─── Cards & panels: subtle glass depth ────────────────────────── */
.services-box-style-03 .bg-white,
.box-shadow-double-large.bg-white {
  background:
    linear-gradient(155deg, #ffffff 0%, #fdfcff 50%, #fafbfe 100%) !important;
  border: 1px solid rgba(139, 92, 246, .06);
}

/* ─── Shared: prevent overflow clipping on orbed sections ───────── */
.bg-very-light-gray,
.our-mission,
.about-first-slider,
.blog-sec {
  overflow: hidden;
}

/* ─── Reduced motion: simplify to flat gradients ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-very-light-gray::before,
  .bg-very-light-gray::after,
  .our-mission::before,
  .our-mission::after,
  .about-first-slider::before {
    display: none;
  }
}

/* =================================================================
   RESPONSIVE — Site-wide mobile-first fixes
   Consistent breakpoints: 575 / 767 / 991 / 1199 / 1440
   ================================================================= */

/* ─── Touch targets — accessibility minimum 44×44px (MOBILE ONLY) ─ */
@media (max-width: 991.98px) {
  .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: .5rem;
  }

  .social-link-icn a,
  .footer-dark .social-link-icn a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ─── Desktop header: hide hamburger toggler ────────────────────── */
@media (min-width: 992px) {
  .navbar-toggler,
  .navbar-toggler-clone {
    display: none !important;
  }
}

/* ─── Sticky header: ensure menu text stays visible ─────────────── */
header.sticky.sticky-active .navbar.header-dark[data-header-hover="light"] .navbar-nav .nav-link {
  color: #0f172a !important;
}
header.sticky.sticky-active .navbar.header-dark[data-header-hover="light"] .navbar-nav .nav-item:hover .nav-link,
header.sticky.sticky-active .navbar.header-dark[data-header-hover="light"] .navbar-nav .nav-item.active .nav-link {
  color: #0f172a !important;
}
header.sticky.sticky-active .navbar.header-dark[data-header-hover="light"] .navbar-toggler-line {
  background-color: #0f172a !important;
}

/* ─── Non-home footer icons: match index sizing ─────────────────── */
.footer-dark .social-link-icn a {
  min-width: unset;
  min-height: unset;
}
.footer-dark .social-link-icn img {
  width: 18px;
  height: 18px;
}

/* ─── About — "Our Mission" fluid heading ───────────────────────── */
.our-mission h6.fs-65,
.our-mission .fs-65 {
  font-size: clamp(1.75rem, 6vw, 4rem) !important;
  line-height: 1.1;
}

/* ─── About — Swiper overflow fix ───────────────────────────────── */
.about-first-slider .swiper-wrapper {
  max-width: 100%;
}

.about-first-slider .swiper-slide {
  width: 100% !important;
  max-width: 100%;
}

/* ─── CTA Join section — responsive ─────────────────────────────── */
@media (max-width: 575px) {
  .cta-join {
    padding: 3rem 1.25rem;
  }

  .cta-join__title {
    font-size: clamp(2rem, 8vw, 2.5rem) !important;
  }

  .cta-join__actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-join__btn {
    width: 100%;
    justify-content: center;
  }
}


/* ─── Blog page — fix excessive padding ─────────────────────────── */
@media (max-width: 991px) {
  .blog-sec {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (max-width: 575px) {
  .blog-sec {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ─── Contact page — fix negative margin overlap ────────────────── */
.contact-us-sec h4[style*="margin-top: -20%"],
.contact-us-sec h4[style*="margin-top:-20%"] {
  margin-top: clamp(-3rem, -5vw, 0px) !important;
}

/* ─── Footer — responsive for non-homepage footers ──────────────── */
@media (max-width: 767px) {
  .footer-dark .container-fluid > .row {
    gap: 1rem;
  }

  .footer-dark .legal-info-part {
    margin-bottom: 0 !important;
  }

  .social-link-icn {
    gap: .5rem;
  }
}

/* ─── About hero — responsive stacking ──────────────────────────── */
@media (max-width: 991px) {
  .about-hero .service-hero-content {
    padding: 2.5rem 1.5rem !important;
  }

  .about-hero-img {
    min-height: 280px !important;
  }
}

@media (max-width: 575px) {
  .about-hero .service-hero-content {
    padding: 2rem 1.25rem !important;
  }

  .about-hero .hero-content h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .about-hero-img {
    min-height: 200px !important;
  }
}

/* ─── Large screens (1440px+) — expand content widths ───────────── */
@media (min-width: 1440px) {
  .cta-join__title {
    font-size: 5rem;
  }

  .cta-join__desc {
    font-size: 16px;
    max-width: 40rem;
  }

  .our-mission .fs-65 {
    font-size: 4.5rem !important;
  }
}

/* ─── Images — ensure all responsive ────────────────────────────── */
.about-hero-img,
.cover-background {
  background-size: cover;
  background-position: center;
}

/* ─── Services-04 — responsive table ────────────────────────────── */

@media(max-width: 991px){
  header.sticky.sticky-active .navbar.header-dark[data-header-hover="light"] .navbar-nav .nav-link {
  color: #ffffff !important;
}
  header.sticky.sticky-active .navbar.header-dark[data-header-hover="light"] .navbar-nav .nav-item:hover .nav-link,
  header.sticky.sticky-active .navbar.header-dark[data-header-hover="light"] .navbar-nav .nav-item.active .nav-link {
    color: #ffffff !important;
  }
}

@media (max-width: 767px) {
  .responsive-table {
    font-size: 14px !important;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 8px 10px !important;
  }
}