/* ═══════════════════════════════════════════════════════════════
   TechshilaMind Training — Premium Gateway Theme Enhancement v2
   Top SEO + Professional enhancements for training.techshilamind.com
   Does NOT change existing layout or functionality
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Root Variables (Gateway Palette) ── */
:root {
  --tsm-teal:   #00c8b8;
  --tsm-teal-l: #22d3ee;
  --tsm-teal-d: #0891b2;
  --tsm-blue:   #3b82f6;
  --tsm-blue-d: #1e3a8a;
  --tsm-gold:   #f59e0b;
  --tsm-gold-l: #fbbf24;
  --tsm-navy:   #040810;
  --tsm-slate:  #0a0f1e;
  --tsm-border: rgba(255,255,255,.07);
  --tsm-grad:   linear-gradient(135deg, #0891b2, #1e3a8a);
  --tsm-grad-g: linear-gradient(90deg, #22d3ee, #3b82f6, #f59e0b);
}

/* ════════════════════════════════════════
   SCROLL PROGRESS BAR
════════════════════════════════════════ */
#tsm-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  z-index: 99999; pointer-events: none;
  background: var(--tsm-grad-g);
  transition: width .08s linear;
  box-shadow: 0 0 8px rgba(34,211,238,.5);
}

/* ════════════════════════════════════════
   TOPBAR — Dark premium
════════════════════════════════════════ */
.topbar {
  background: var(--tsm-slate) !important;
  border-bottom: 1px solid var(--tsm-border) !important;
}
.topbar a, .topbar span {
  color: rgba(255,255,255,.55) !important;
  font-size: 12.5px !important;
  font-family: 'Sora', sans-serif !important;
  transition: color .2s !important;
}
.topbar a:hover { color: rgba(255,255,255,.9) !important; }
.topbar .text-primary { color: var(--tsm-teal-l) !important; }

/* ════════════════════════════════════════
   NAVBAR — Dark glass premium
════════════════════════════════════════ */
.nav-bar, .container-fluid.nav-bar {
  background: rgba(4,8,16,.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid var(--tsm-border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9990 !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.3) !important;
}
.nav-bar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.2) 30%, rgba(245,158,11,.15) 70%, transparent);
  pointer-events: none;
}
.navbar { background: transparent !important; }

/* Brand */
.navbar-brand h1 {
  font-family: 'Sora', sans-serif !important;
  font-size: 19px !important; font-weight: 800 !important;
  color: #fff !important; letter-spacing: -.3px !important; margin: 0 !important;
}
.navbar-brand h1 b {
  background: var(--tsm-grad-g);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.navbar-brand img { height: 40px !important; filter: brightness(1.08); }

/* Nav links */
.navbar-nav .nav-link, .navbar-nav .nav-item.nav-link {
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important; font-weight: 500 !important;
  color: rgba(255,255,255,.5) !important;
  padding: 8px 16px !important; border-radius: 7px !important;
  transition: color .2s, background .2s !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.nav-link:hover {
  color: #fff !important; background: rgba(255,255,255,.07) !important;
}

/* Dropdown */
.navbar-nav .dropdown-menu {
  background: rgba(8,15,28,.98) !important;
  border: 1px solid var(--tsm-border) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
}
.navbar-nav .dropdown-item {
  color: rgba(255,255,255,.55) !important;
  font-size: 13px !important; font-family: 'Sora', sans-serif !important;
  border-radius: 8px !important; margin: 2px 6px !important;
  transition: color .15s, background .15s !important;
}
.navbar-nav .dropdown-item:hover {
  color: #fff !important; background: rgba(34,211,238,.09) !important;
}

/* Toggler */
.navbar-toggler {
  border: 1px solid rgba(255,255,255,.18) !important;
  padding: 6px 10px !important; border-radius: 8px !important;
}
.navbar-toggler .fa-bars { color: rgba(255,255,255,.7) !important; }

/* Phone CTA in navbar */
.nav-bar .btn-light, .nav-bar .btn-light:hover,
.navbar .btn-light, .navbar .btn-light:hover {
  background: var(--tsm-grad) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important; border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(8,145,178,.3) !important;
  transition: opacity .2s, transform .15s !important;
}
.nav-bar .btn-light:hover, .navbar .btn-light:hover {
  opacity: .85 !important; transform: translateY(-1px) !important;
}
.nav-bar .text-dark, .navbar .text-dark { color: rgba(255,255,255,.8) !important; }
.nav-bar span, .navbar .d-flex span { color: rgba(255,255,255,.45) !important; font-size: 12px !important; }

/* ════════════════════════════════════════
   PRIMARY COLOR — Teal throughout
════════════════════════════════════════ */
.btn-primary, .bg-primary {
  background: var(--tsm-grad) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(8,145,178,.25) !important;
}
.btn-primary:hover { opacity: .88 !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(8,145,178,.35) !important; }
.text-primary { color: var(--tsm-teal-d) !important; }
.border-primary { border-color: var(--tsm-teal-d) !important; }

/* ════════════════════════════════════════
   HERO CAROUSEL
════════════════════════════════════════ */
.header-carousel-item.bg-primary,
.carousel-item.bg-primary {
  background: linear-gradient(135deg, var(--tsm-navy) 0%, #0c1a3d 50%, #0e2a4a 100%) !important;
  position: relative;
}
.header-carousel-item.bg-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(8,145,178,.18) 0%, transparent 65%),
              radial-gradient(ellipse at 75% 30%, rgba(59,130,246,.12) 0%, transparent 60%);
  pointer-events: none;
}
/* Hero heading gradient */
.header-carousel-item h2.display-3,
.carousel-item h2.display-3 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  background: var(--tsm-grad-g);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Sub heading */
.header-carousel-item h4,
.carousel-item h4 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important; letter-spacing: 3px !important;
  color: var(--tsm-teal-l) !important; opacity: .9 !important;
}

/* ════════════════════════════════════════
   STATS ROW
════════════════════════════════════════ */
.stat-row .card {
  border: 1px solid rgba(8,145,178,.1) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.98) !important;
  transition: transform .25s, box-shadow .25s !important;
  overflow: hidden !important;
}
.stat-row .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(8,145,178,.15) !important;
}
.stat-row .card h3 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important; font-size: 28px !important;
  background: var(--tsm-grad-g);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-row .card h5 { font-family: 'Sora', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; color: #6b7280 !important; }
.stat-row .icon-box { border-radius: 10px !important; }

/* ════════════════════════════════════════
   SECTION TITLES
════════════════════════════════════════ */
.section-title h4, h4.text-primary {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important; letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--tsm-teal-d) !important;
}
h1, h2, h3, h4, h5, .display-3, .display-4, .display-5 {
  font-family: 'Sora', sans-serif !important;
}
.display-4.mb-4, h2.display-4 {
  font-weight: 800 !important; letter-spacing: -.4px !important;
}

/* ════════════════════════════════════════
   SERVICE CARDS
════════════════════════════════════════ */
.service-item {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(8,145,178,.08) !important;
  transition: transform .28s, box-shadow .28s !important;
}
.service-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(8,145,178,.18) !important;
}
.service-icon {
  background: var(--tsm-grad) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(8,145,178,.3) !important;
  color: #fff !important;
}
.service-content h4 {
  font-weight: 700 !important; color: #111827 !important;
}

/* ════════════════════════════════════════
   COURSE CARDS + OEM CARDS
════════════════════════════════════════ */
.course-item, .courses-item {
  border: 1px solid rgba(8,145,178,.08) !important;
  border-radius: 14px !important; overflow: hidden !important;
  transition: transform .25s, box-shadow .25s !important;
}
.course-item:hover, .courses-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 45px rgba(8,145,178,.18) !important;
}
.course-img { transition: transform .4s !important; }
.course-item:hover .course-img { transform: scale(1.04) !important; }
.course-item .bg-primary { border-radius: 6px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; letter-spacing: 1px !important; }

/* OEM cards */
.cat-item, #oemCards .col-md-3 > div, #oemCards .col-6 > div {
  border-radius: 14px !important;
  border: 1px solid rgba(8,145,178,.08) !important;
  transition: transform .22s, box-shadow .22s !important;
  overflow: hidden !important;
}
.cat-item:hover, #oemCards .col-md-3 > div:hover, #oemCards .col-6 > div:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 35px rgba(8,145,178,.15) !important;
}

/* ════════════════════════════════════════
   POPULAR COURSES TITLE
════════════════════════════════════════ */
.popular-courses-title {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important; letter-spacing: -.3px !important;
  background: var(--tsm-grad-g);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  display: inline-block;
}

/* ════════════════════════════════════════
   ABOUT SECTION
════════════════════════════════════════ */
.about-item-content {
  border: 1px solid rgba(8,145,178,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.06) !important;
}
.about-item-content h2.display-5 {
  font-weight: 800 !important; letter-spacing: -.3px !important;
}
.about-item-content h2.h4 { color: var(--tsm-teal-d) !important; }

/* ════════════════════════════════════════
   ACCORDION (FAQ)
════════════════════════════════════════ */
.accordion-button:not(.collapsed) {
  background: rgba(8,145,178,.07) !important;
  color: var(--tsm-teal-d) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(8,145,178,.2) !important; }
.accordion-item {
  border-radius: 10px !important; margin-bottom: 8px !important;
  border: 1px solid rgba(8,145,178,.1) !important; overflow: hidden !important;
}

/* ════════════════════════════════════════
   TESTIMONIAL CARDS
════════════════════════════════════════ */
.testimonial-card {
  border-radius: 16px !important;
  border: 1px solid rgba(8,145,178,.1) !important;
  background: #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
  padding: 28px 24px !important;
  transition: transform .25s, box-shadow .25s !important;
}
.testimonial-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 35px rgba(8,145,178,.14) !important;
}
.testimonial-text { font-style: italic !important; color: #374151 !important; font-size: 14px !important; line-height: 1.7 !important; }
.student-name { font-family: 'Sora', sans-serif !important; font-weight: 700 !important; color: var(--tsm-teal-d) !important; }
.student-title { font-size: 12px !important; color: #9ca3af !important; }

/* ════════════════════════════════════════
   PARTNERS SLIDER
════════════════════════════════════════ */
.partner-circle {
  border-radius: 50% !important;
  border: 2px solid rgba(8,145,178,.12) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.partner-item:hover .partner-circle {
  border-color: rgba(8,145,178,.4) !important;
  box-shadow: 0 6px 20px rgba(8,145,178,.15) !important;
}

/* ════════════════════════════════════════
   SEARCH BAR
════════════════════════════════════════ */
#searchInput, #searchInput1 {
  border-radius: 50px !important;
  border: 1.5px solid rgba(8,145,178,.15) !important;
  transition: border-color .2s, box-shadow .2s !important;
  font-family: 'Sora', sans-serif !important;
}
#searchInput:focus, #searchInput1:focus {
  border-color: var(--tsm-teal-d) !important;
  box-shadow: 0 0 0 3px rgba(8,145,178,.18) !important;
  outline: none !important;
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer {
  background: var(--tsm-navy) !important;
  border-top: 1px solid var(--tsm-border) !important;
}
.footer h3, .footer h4, .footer h5 {
  font-family: 'Sora', sans-serif !important; font-weight: 700 !important; color: #fff !important;
}
.footer p, .footer a { font-family: 'Sora', sans-serif !important; font-size: 13px !important; }
.footer .btn-md-square {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--tsm-border) !important;
  color: rgba(255,255,255,.4) !important; border-radius: 8px !important;
  transition: all .2s !important;
}
.footer .btn-md-square:hover {
  background: rgba(34,211,238,.1) !important;
  border-color: rgba(34,211,238,.3) !important;
  color: var(--tsm-teal-l) !important;
}
.container-fluid.copyright {
  background: rgba(0,0,0,.3) !important;
  border-top: 1px solid var(--tsm-border) !important;
}

/* ════════════════════════════════════════
   BACK TO TOP
════════════════════════════════════════ */
.back-to-top {
  background: var(--tsm-grad) !important;
  border: none !important; border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(8,145,178,.4) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.back-to-top:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 28px rgba(8,145,178,.5) !important; }

/* ════════════════════════════════════════
   SPINNER
════════════════════════════════════════ */
.spinner-border.text-primary { color: var(--tsm-teal-d) !important; }

/* ════════════════════════════════════════
   CHATBOT BUTTON PULSE
════════════════════════════════════════ */
#chatbot-button {
  box-shadow: 0 0 0 0 rgba(8,145,178,.5);
  animation: tsm-pulse 2.5s infinite !important;
}
@keyframes tsm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(8,145,178,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(8,145,178,0); }
  100% { box-shadow: 0 0 0 0 rgba(8,145,178,0); }
}

/* ════════════════════════════════════════
   WHATSAPP BUTTON PULSE
════════════════════════════════════════ */
.whatsapp_float_btn {
  filter: drop-shadow(0 4px 12px rgba(37,211,102,.4)) !important;
  transition: transform .2s !important;
}
.icon-container a:hover .whatsapp_float_btn { transform: scale(1.1) !important; }

/* ════════════════════════════════════════
   BREADCRUMB
════════════════════════════════════════ */
.breadcrumb-item.active { color: var(--tsm-teal-l) !important; }
.breadcrumb-item a { color: rgba(255,255,255,.55) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.3) !important; }

/* ════════════════════════════════════════
   MODAL REFINEMENTS
════════════════════════════════════════ */
.modal-content {
  border-radius: 16px !important;
  border: 1px solid rgba(8,145,178,.1) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.2) !important;
}
.modal-header {
  border-bottom: 1px solid rgba(8,145,178,.1) !important;
  font-family: 'Sora', sans-serif !important;
}

/* ════════════════════════════════════════
   LIST GROUP (OEM list in dropdown)
════════════════════════════════════════ */
.list-group-item.active {
  background: var(--tsm-grad) !important;
  border-color: transparent !important;
}
.list-group-item:hover {
  background: rgba(8,145,178,.07) !important;
  color: var(--tsm-teal-d) !important;
}

/* ════════════════════════════════════════
   SECTION HIGHLIGHT STRIP
   (Decorative teal line on section starts)
════════════════════════════════════════ */
.container-fluid.service,
.container-fluid.faq-section,
.testimonial-section {
  position: relative;
}
.container-fluid.service::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 3px; border-radius: 2px;
  background: var(--tsm-grad-g);
}

/* ════════════════════════════════════════
   SMOOTH HOVER ON ALL LINKS
════════════════════════════════════════ */
a { transition: color .18s, opacity .18s !important; }

/* ════════════════════════════════════════
   MOBILE RESPONSIVE TWEAKS
════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-bar { position: sticky !important; top: 0 !important; }
  .navbar-nav .nav-link { border-radius: 8px !important; }
  .stat-row .card h3 { font-size: 22px !important; }
}

/* ════════════════════════════════════════
   NAV VISIBILITY FIX — ensure all nav links show
════════════════════════════════════════ */
.navbar-collapse { flex-grow: 0 !important; }
.navbar { justify-content: space-between !important; }
.navbar-nav { display: flex !important; flex-direction: row !important; align-items: center !important; }
.navbar-nav .nav-item, .navbar-nav .nav-link, .navbar-nav .nav-item.nav-link {
  display: flex !important; align-items: center !important;
  visibility: visible !important; opacity: 1 !important;
}
/* Fix topbar search bar not overlapping navbar */
.topbar .search-container { max-width: 400px; }
#navbarCollapse { display: flex !important; }
@media (max-width: 991px) {
  #navbarCollapse { display: none !important; }
  #navbarCollapse.show { display: flex !important; flex-direction: column !important; }
}

/* ── Force nav links visible ── */
.navbar-nav .nav-link,
.navbar-nav .nav-item.nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}
.navbar-nav .nav-link:hover {
  color: #fff !important;
}
/* Remove white background from navbar collapse */
#navbarCollapse {
  background: transparent !important;
}
.navbar-collapse {
  background: transparent !important;
}

/* ── Remove white box from navbar, fix layout ── */
.navbar-collapse,
#navbarCollapse {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Remove white card effect */
.navbar-nav {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 4px !important;
}
/* Fix spacing — bring links closer to logo */
.navbar {
  gap: 0 !important;
}
.navbar-brand {
  margin-right: 0 !important;
}
.navbar-nav.ms-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Make nav links same style */
.navbar-nav .nav-link,
.navbar-nav .nav-item.nav-link {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 7px !important;
  text-shadow: none !important;
  background: transparent !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}

/* ── Premium Navbar Enhancement ── */
.nav-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.25) 30%, rgba(245,158,11,.18) 70%, transparent);
  pointer-events: none;
}
.navbar-nav .dropdown-toggle {
  background: linear-gradient(135deg, var(--tsm-teal-d), var(--tsm-blue-d)) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 7px 18px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 2px 12px rgba(8,145,178,.3) !important;
  transition: all .2s !important;
}
.navbar-nav .dropdown-toggle:hover {
  opacity: .88 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(8,145,178,.4) !important;
}
.nav-bar .btn-light {
  background: linear-gradient(135deg, var(--tsm-teal-d), var(--tsm-blue-d)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(8,145,178,.3) !important;
}
.navbar-brand h1 b {
  background: linear-gradient(90deg, var(--tsm-teal-l), var(--tsm-blue));
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.navbar-nav { gap: 2px !important; }

/* ── Fix logo to nav gap ── */
.navbar {
  justify-content: space-between !important;
}
.navbar-brand {
  flex-shrink: 0 !important;
}
.navbar-nav.ms-auto.me-0 {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Center nav links between logo and call button */
#navbarCollapse {
  justify-content: center !important;
  flex-grow: 1 !important;
}
.navbar-collapse .navbar-nav {
  justify-content: center !important;
}