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

:root {
  --theme-bg: #f5f9ff;
  --theme-surface: #ffffff;
  --theme-surface-soft: #eef5ff;
  --theme-border: rgba(13, 110, 253, 0.16);
  --theme-shadow: 0 24px 70px rgba(13, 110, 253, 0.10);
  --theme-text: #102747;
  --theme-muted: #5f708e;
  --theme-secondary: #3d72ff;
  --theme-accent: #0d6efd;
  --theme-accent-dark: #0b55d4;
  --theme-radius: 24px;
  --theme-radius-sm: 16px;
  --theme-icon-bg: #eef5ff;
  --theme-input-bg: #f7fbff;
  --theme-card-bg: #ffffff;
}

html {
  scroll-behavior: smooth;
  font-family: 'Jost', sans-serif !important;
}

body,
button,
input,
textarea,
select,
a {
  font-family: 'Jost', sans-serif !important;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
  color: var(--theme-text) !important;
}

/*h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.section-header h2,
.form-header h2,
.card-title,
.blog-card-title,
.service-card__title,
.job-card__title,
.benefits__card-title,
.trust-title {
  color: var(--theme-text) !important;
  font-family: 'Jost', sans-serif !important;
}*/

/*p,
span,
label,
a,
button,
input,
textarea,
select {
  color: var(--primary-color ) !important;
}*/

/* a {
  color: var(--theme-accent) !important;
} */

a:hover,
.btn-primary:hover {
  color: var(--theme-accent-dark) !important;
}

.btn-primary,
.btn.btn-primary,
button.btn-primary {
  background: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: #ffffff !important;
}

/*.btn-secondary,
.btn.btn-secondary,
button.btn-secondary {
  border-color: var(--theme-accent) !important;
  color: var(--theme-accent) !important;
  background: rgba(13, 110, 253, 0.06) !important;
}*/

header.header,
.header,
.header .branding {
background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #e5e5e5;
}

.header .topbar {
  background: linear-gradient(90deg, #0a6df0 0%, #2f8ef1 100%) !important;
}

.header .topbar .contact-info i,
.header .topbar .contact-info i a,
.header .topbar .contact-info i span,
.header .topbar .social-links a {
  color: #ffffff !important;
}

.navmenu a,
.navmenu a:focus,
.navmenu a:hover {
  color: var(--theme-text) !important;
}

.navmenu a.active,
.navmenu a:hover {
  /* background: rgba(13, 110, 253, 0.08) !important; */
  border-radius: 12px !important;
  color: #0a6df0 !important;
}

/* Universal card style */
.card,
.info-card,
.feature-card,
.service-card,
.blog-card,
.job-card,
.benefit-card,
.purpose-card,
.value-card,
.testi-card,
.attendance-card,
.stats-card,
.quote-card,
.map-card,
.type-card,
.core-card,
.tech-card,
.journey-card,
.trust-card,
.standout-item,
.benefits__card,
.primary-card {
  background: var(--theme-card-bg) !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: var(--theme-shadow) !important;
  border-radius: var(--theme-radius) !important;
}

.card,
.info-card,
.feature-card,
.service-card,
.blog-card,
.job-card,
.benefit-card,
.purpose-card,
.value-card,
.testi-card,
.attendance-card,
.stats-card,
.quote-card,
.map-card,
.type-card,
.core-card,
.tech-card,
.journey-card,
.trust-card,
.standout-item,
.benefits__card {
  overflow: hidden !important;
}

.card-icon,
.journey-icon,
.service-card__icon,
.feature-card-icon,
.trust-icon,
.benefits__card-icon,
.form-badge,
.mission-icon,
.cta-text i {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 22px;
  background: var(--theme-icon-bg) !important;
  border: 1px solid rgba(13, 110, 253, 0.12) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
}*/

.card-icon img,
.journey-icon img,
.service-card__icon img,
.feature-card-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.card-icon i,
.journey-icon svg,
.service-card__icon svg,
.feature-card-icon svg {
  opacity: 0 !important;
}

.info-card .card-decoration,
.blog-card::before,
.blog-card::after,
.card::before,
.card::after,
.feature-card::before,
.trust-card::before,
.attendance-card::before,
.benefits__card-glow,
.standout-blob,
.benefits__blob,
.benefits__noise,
.services__orb,
.hero-background,
.journey-card .left-blob,
.hero .gradient-orb {
  opacity: 0.85 !important;
}

.map-card {
  border-radius: var(--theme-radius) !important;
}

.map-card iframe {
  border-radius: 20px !important;
}

/* .section-label,
.badge1,
.form-badge,
.journey-stat-chip__badge,
.benefits__tag,
.badges,
.hero-badge {
  background: rgba(13, 110, 253, 0.08) !important;
  color: var(--theme-accent-dark) !important;
  border-radius: 999px !important;
} */

/* .section-title,
.hero-title,
.benefits__title,
.trust-title,
.journey-heading,
.hero-subtitle,
.services__title,
.standout-title,
.benefits__card-title {
  color: var(--theme-text) !important;
} */

section,
.container,
.contact-container,
.services__container,
.benefits__container,
.trust,
.standout,
.journey,
.hero,
.hero-section,
.contact-grid,
.info-section,
.form-section {
  background: transparent !important;
}

.btn,
.btn-primary,
.btn-secondary {
  background: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .card-icon,
  .journey-icon,
  .service-card__icon,
  .feature-card-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
  }
}

/* ======================================================
   BLUE & WHITE CARD SYSTEM — Image Icon Cards
   Matches the card style shown in the reference image:
   colored background, real photo as icon, bold title
   ====================================================== */

/* Service cards with colored backgrounds */
.service-card,
.core-card,
.tech-card,
.type-card,
.feature-card {
  background: var(--theme-card-bg) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(13,110,253,0.10) !important;
  box-shadow: 0 8px 32px rgba(13,110,253,0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.service-card:hover,
.core-card:hover,
.tech-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(13,110,253,0.15) !important;
}

/* Alternating blue-tint card backgrounds */
.service-card:nth-child(3n+1),
.core-card:nth-child(3n+1),
.tech-card:nth-child(3n+1) {
  background: #f7f8f9 !important;
}

.service-card:nth-child(3n+2),
.core-card:nth-child(3n+2),
.tech-card:nth-child(3n+2) {
  background: #f7f8f9 !important;
}

.service-card:nth-child(3n),
.core-card:nth-child(3n),
.tech-card:nth-child(3n) {
  background: #f7f8f9 !important;
}

/* Image icon wrapper in cards */
.service-card__icon,
.core-card-img-wrap,
.tech-card .tech-icon,
.feature-card-icon {
  width: 100% !important;
  height: 160px !important;
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
  background: rgba(13,110,253,0.08) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}

.service-card__icon img,
.core-card-img-wrap img,
.tech-card .tech-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Card body padding */
.service-card__title,
.service-card__desc,
.core-card-body,
.tech-card h3,
.tech-card p {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.service-card__title,
.core-card-title {
  font-family: 'Jost', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: #1e3a8a !important;
  padding-top: 16px !important;
  margin-bottom: 8px !important;
}

/* .service-card__desc,
.core-card-desc {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9rem !important;
  color: #3b6fa0 !important;
  line-height: 1.6 !important;
  padding-bottom: 16px !important;
} */

/* Trust cards - blue tint backgrounds */
.trust-card:nth-child(4n+1) { background: #dbeafe !important; }
.trust-card:nth-child(4n+2) { background: #e0f2fe !important; }
.trust-card:nth-child(4n+3) { background: #eff6ff !important; }
.trust-card:nth-child(4n)   { background: #f0f9ff !important; }

.trust-icon {
  background: rgba(13,110,253,0.12) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1d4ed8 !important;
  border: none !important;
}

.trust-icon svg,
.trust-icon i { color: #1d4ed8 !important; stroke: #1d4ed8 !important; }

/* Journey/stat cards blue styling */
.journey-card--left  { background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%) !important; }
.journey-card--right { background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important; }

/* Standout items blue styling */
.standout-item--purple {
  background: #dbeafe !important;
  color: #1e3a8a !important;
}
.standout-item--light  { background: #eff6ff !important; }

/* Benefits cards */
.benefits__card {
  background: #ffffff !important;
  border: 1px solid rgba(13,110,253,0.12) !important;
}

/* Hero gradient orbs — blue */
.gradient-orb.orb-1 { background: radial-gradient(circle, rgba(59,130,246,0.25) 0%, transparent 70%) !important; }
.gradient-orb.orb-2 { background: radial-gradient(circle, rgba(96,165,250,0.20) 0%, transparent 70%) !important; }
.gradient-orb.orb-3 { background: radial-gradient(circle, rgba(147,197,253,0.15) 0%, transparent 70%) !important; }

/* Hero section background */
.hero, .hero-section {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 40%, #f0f9ff 100%) !important;
}

/* Hero title gradient text */
/* .gradient-text {
  background: linear-gradient(135deg, #156bed, #1564db) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
} */

/* CTA section */
.cta {
  background: linear-gradient(135deg, var(--white), var(--white)) !important;
}
/* 
.cta .cta-title,
.cta .cta-description { color: #4f41e2 !important; } */




/* Navigation active state */
.navmenu a.active { color: #1d4ed8 !important; }

/* Buttons global */
/* .btn-primary,
.btn.btn-primary,
button.btn-primary,
.cta .btn-secondary,
.btn-main,
.core-card-link {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6) !important;
  color: #ffffff !important;
  border: none !important;
} */

/* Topbar strong blue */
.header .topbar,
.topbar {
  background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%) !important;
}

/* Section labels */
/* .section-label,
.services__label,
.section-eyebrow,
.benefits__tag {
  background: rgba(6, 64, 225, 0.08) !important;
  color: #1d4ed8 !important;
  border-radius: 999px !important;
  padding: 4px 16px !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
} */

/* Attendance management color override (purple→blue) */
.attendance-card {
  background: #dbeafe !important;
  border-color: rgba(29,78,216,0.15) !important;
}

/* Blog cards */
.blog-card { background: #f0f9ff !important; }

/* Form inputs */
input:focus, textarea:focus, select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}

/* Career page hero */
.career-hero, .hero-section {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 40%, #f0f9ff 100%) !important;
}

/* Core card tag dot */
.core-card-tag-dot { background: #3b82f6 !important; }

/* Progress bar blue */
.progress-bar {
  background: linear-gradient(90deg, #1d4ed8, #60a5fa) !important;
}

/* ======================================================
   GLOBAL SMOOTH SCROLLING
   ====================================================== */
html {
  scroll-behavior: smooth !important;
}

/* ======================================================
   BADGE / CHIP — all page variants
   ====================================================== */
/* .badge,
.hero-badge,
.page-badge,
.section-badge,
.chip,
.pill,
.tag-label {
  background: rgba(29, 78, 216, 0.08) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(29, 78, 216, 0.15) !important;
  backdrop-filter: none !important;
} */

/* Dot inside badges */
.dot,
.badge-dot,
.pulse-dot {
  background: #3b82f6 !important;
}

/* ======================================================
   GHOST / OUTLINE BUTTONS
   ====================================================== */
.btn-ghost,
.btn-outline,
.btn-outline-white,
.btn.btn-outline-primary {
  background: rgba(29, 78, 216, 0.06) !important;
  border: 1.5px solid rgba(29, 78, 216, 0.3) !important;
  color: #1d4ed8 !important;
}

.btn-ghost:hover,
.btn-outline:hover {
  background: rgba(29, 78, 216, 0.12) !important;
  color: #1d4ed8 !important;
}

/* ======================================================
   HERO TEXT COLORS (pages that had white text on dark bg)
   ====================================================== */
/* .hero-h1,
.hero-h2,
.hero-p,
.hero-description,
.hero-text,
.hero-text h1,
.hero-text h2,
.hero-text p,
.hero-text span,
.hero-content h1,
.hero-content h2,
.hero-content p,
.hero-content span {
  color: var(--theme-text) !important;
} */

/* ======================================================
   GRADIENT ORBS & BLOBS — blue only
   ====================================================== */
.orb-1,
.orb-2,
.orb-3,
.orb-4,
.orb-5,
.gradient-orb {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%) !important;
}

.blob,
.blob1,
.blob2,
.blob3 {
  background: #bfdbfe !important;
  opacity: 0.15 !important;
}

/* ======================================================
   SECTION / PAGE BACKGROUNDS — remove non-blue gradients
   ====================================================== */
.hero-background {
  background: linear-gradient(
    135deg,
    #0f1f8f 0%,
    #1f3db5 50%,
    #4a2fa8 100%
) !important;
}

.features-section,
.pricing-section,
.stats-section,
.process-section,
.why-choose-section {
  background: transparent !important;
}

/* ======================================================
   STEP / PROCESS / FEATURE ICONS
   ====================================================== */
.step-icon,
.feature-icon-wrapper,
.process-icon,
.icon-box,
.step-number,
.process-number {
  background: rgba(29, 78, 216, 0.08) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(29, 78, 216, 0.12) !important;
}

/* ======================================================
   STAT / COUNTER NUMBERS
   ====================================================== */
.stat-value,
.stat-number,
.counter-number,
.count-up,
.metric-value {
  color: #1d4ed8 !important;
}

/* ======================================================
   STATUS INDICATORS
   ====================================================== */
.status-active,
.status-success,
.status-indicator,
.status-online {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* ======================================================
   PRICING PLAN BADGES
   ====================================================== */
.plan-badge,
.tier-badge,
.pricing-badge,
.popular-badge {
  background: rgba(29, 78, 216, 0.08) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(29, 78, 216, 0.15) !important;
}

/* ======================================================
   TELEGRAM — override orange accent with blue
   ====================================================== */
.gradient-accent,
.accent-gradient {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
}

/* ======================================================
   WHATSAPP — override green elements with blue
   ====================================================== */
.wa-hero,
.whatsapp-hero {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

/* ======================================================
   ATTENDANCE MANAGEMENT — remove orange from gradient
   ====================================================== */
.attendance-hero {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

/* ======================================================
   SHADOW GLOW — blue only (no purple)
   ====================================================== */
.shadow-glow,
.glow,
.card-glow {
  box-shadow: 0 0 40px rgba(29, 78, 216, 0.18) !important;
}

/* ======================================================
   LINK COLORS — ensure all links are blue
   ====================================================== */
.text-success { color: #2563eb !important; }
.text-info    { color: #3b82f6 !important; }
.text-warning { color: #1d4ed8 !important; }
.text-danger  { color: #2563eb !important; }

/* ======================================================
   SCROLL SMOOTHNESS — momentum scrolling on mobile
   ====================================================== */
* {
  -webkit-overflow-scrolling: touch;
}

body {
  scroll-behavior: smooth;
}