/* ValTechEdu Dark Elegant Theme Override */

:root {
  --vt-bg: #0b1220;
  --vt-bg-2: #111a2f;
  --vt-surface: #121c31;
  --vt-surface-2: #17233b;
  --vt-border: rgba(255, 255, 255, 0.08);
  --vt-text: #eef2ff;
  --vt-muted: #a6b3d1;
  --vt-primary: #7c9cff;
  --vt-primary-2: #4f7cff;
  --vt-accent: #9b7bff;
  --vt-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --vt-radius: 18px;
}

html {
  scroll-behavior: smooth !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: radial-gradient(circle at top, #17233b 0%, #0b1220 45%, #070b14 100%) !important;
  color: var(--vt-text) !important;
  line-height: 1.7 !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
}

body, p, li, span, a, div {
  color: var(--vt-surface-2) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, serif !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
}

p, li, small, .text-muted, .muted, .lead {
  color: var(--vt-muted) !important;
}

a {
  color: #c9d6ff !important;
  text-decoration: none !important;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease !important;
}

a:hover, a:focus {
  color: #ffffff !important;
  opacity: 1 !important;
}

img {
  max-width: 100% !important;
  height: auto !important;
}

::selection {
  background: rgba(124, 156, 255, 0.35) !important;
  color: var(--vt-surface) !important;
}

/* Containers and sections */

.container, .container-fluid, .section, section {
  position: relative !important;
}

section, .section {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

.hero, .hero-section, .banner, .page-header, .home-hero {
  background: linear-gradient(135deg, rgba(17, 26, 47, 0.88), rgba(11, 18, 32, 0.92)) !important;
  color: #ffffff !important;
  min-height: 78vh !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--vt-border) !important;
}

.hero *, .hero-section *, .banner *, .page-header *, .home-hero * {
  color: inherit !important;
}

/* Surfaces */

.card, .project-card, .service-card, .feature-card, .article-card, .testimonial-card, .pricing-card, .info-card, .panel, .box, .widget, .content-box, .bg-white, .white-box {
  background: linear-gradient(180deg, rgba(18, 28, 49, 0.98), rgba(15, 23, 42, 0.98)) !important;
  color: var(--vt-text) !important;
  border: 1px solid var(--vt-border) !important;
  border-radius: var(--vt-radius) !important;
  box-shadow: var(--vt-shadow) !important;
  overflow: hidden !important;
}

.card:hover, .project-card:hover, .service-card:hover, .feature-card:hover, .article-card:hover, .testimonial-card:hover, .pricing-card:hover, .info-card:hover, .panel:hover, .box:hover, .widget:hover, .content-box:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(124, 156, 255, 0.35) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
}

.card-title, .card-header, .card-body, .card-footer {
  color: inherit !important;
  background: transparent !important;
  border-color: var(--vt-border) !important;
}

/* Navbar */

.navbar, header, .site-header, .topbar, .main-header {
  background: rgba(7, 11, 20, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.navbar-brand, .logo, .site-logo, .brand, .navbar-brand a {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.navbar-nav .nav-link, .nav-link, .menu a, .main-menu a, .nav-item a {
  color: #d7e1ff !important;
  font-weight: 600 !important;
  padding: 0.7rem 1rem !important;
  border-radius: 12px !important;
}

.navbar-nav .nav-link:hover, .nav-link:hover, .menu a:hover, .main-menu a:hover, .nav-item a:hover, .navbar-nav .nav-link:focus {
  color: #ffffff !important;
  background: rgba(124, 156, 255, 0.12) !important;
}

.navbar-toggler, .menu-toggle, .navbar-toggler-icon {
  border-color: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}

/* Buttons */

.btn, button, input[type="submit"], input[type="button"], input[type="reset"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid transparent !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease !important;
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
  transform: translateY(-2px) !important;
}

.btn-primary, .btn.btn-primary, .btn-primary:visited {
  background: linear-gradient(135deg, var(--vt-primary), var(--vt-primary-2)) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.28) !important;
}

.btn-primary:hover, .btn.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #90a9ff, #5b85ff) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 36px rgba(79, 124, 255, 0.38) !important;
}

.btn-outline-primary, .btn.btn-outline-primary {
  background: transparent !important;
  color: #dbe6ff !important;
  border: 1px solid rgba(124, 156, 255, 0.65) !important;
}

.btn-outline-primary:hover, .btn.btn-outline-primary:hover {
  background: rgba(124, 156, 255, 0.14) !important;
  color: #ffffff !important;
  border-color: rgba(124, 156, 255, 0.95) !important;
}

.btn-light, .btn.btn-light {
  background: #f3f6ff !important;
  color: #0b1220 !important;
  border-color: #f3f6ff !important;
}

.btn-light:hover, .btn.btn-light:hover {
  background: #ffffff !important;
  color: #0b1220 !important;
}

/* Forms */

input, select, textarea, .form-control, .form-select {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

input::placeholder, textarea::placeholder, .form-control::placeholder {
  color: rgba(215, 225, 255, 0.55) !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border-color: rgba(124, 156, 255, 0.85) !important;
  box-shadow: 0 0 0 0.2rem rgba(124, 156, 255, 0.18) !important;
  outline: none !important;
}

label {
  color: #e7ecff !important;
  font-weight: 600 !important;
}

/* Tables */

table, .table {
  color: var(--bs-primary-text-emphasis) !important;
  background: rgba(18, 28, 49, 0.94) !important;
  border-color: var(--vt-border) !important;
}

thead, .table thead {
  background: rgba(124, 156, 255, 0.12) !important;
  color: var(--vt-bg-2) !important;
}

th, td, .table th, .table td {
  border-color: var(--vt-border) !important;
  color: inherit !important;
}

/* Text utilities */

.text-dark, .text-body, .text-black, .text-primary, .text-secondary, .text-white {
  color: inherit !important;
}

/* Hero and headings emphasis */

.hero h1, .hero h2, .hero h3, .hero .display-1, .hero .display-2, .hero .display-3, .hero .lead, .hero p {
  color: #ffffff !important;
}

/* Images and logos */

.logo-strip img, .project-logo, .project-logo-header, .navbar-brand img, .brand img, .site-logo img {
  filter: brightness(1.08) contrast(1.05) saturate(0.9) !important;
}

img {
  border-radius: 12px !important;
}

/* Badges and pills */

.badge, .tag, .pill, .chip {
  background: rgba(124, 156, 255, 0.16) !important;
  color: #e9efff !important;
  border: 1px solid rgba(124, 156, 255, 0.18) !important;
}

/* Lists and separators */

hr, .divider, .separator {
  border-color: rgba(255, 255, 255, 0.10) !important;
  opacity: 1 !important;
}

/* Footer */

footer, .site-footer, .footer {
  background: linear-gradient(180deg, rgba(7, 11, 20, 0.96), rgba(11, 18, 32, 0.98)) !important;
  color: #dbe6ff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

footer a, .site-footer a, .footer a {
  color: #d7e1ff !important;
}

footer a:hover, .site-footer a:hover, .footer a:hover {
  color: #ffffff !important;
}

/* Reveal / animation helpers */

.reveal {
  /*opacity: 0 !important;*/
  transform: translateY(24px) !important;
  transition: opacity 0.7s ease, transform 0.7s ease !important;
}

.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Common utility overrides */

.bg-light, .bg-white, .bg-body, .bg-body-tertiary, .bg-secondary, .bg-muted {
  background-color: transparent !important;
}

.shadow, .shadow-sm, .shadow-lg {
  box-shadow: var(--vt-shadow) !important;
}

.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5 {
  border-radius: var(--vt-radius) !important;
}

.border, .border-top, .border-end, .border-bottom, .border-start {
  border-color: var(--vt-border) !important;
}

/* Responsive spacing */

@media (max-width: 991px) {
  section, .section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
}

@media (max-width: 991px) {
  .hero, .hero-section, .banner, .page-header, .home-hero {
    min-height: auto !important;
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }
}

@media (max-width: 575px) {
  body {
    font-size: 15px !important;
  }
}

@media (max-width: 575px) {
  .btn, button, input[type="submit"], input[type="button"], input[type="reset"] {
    width: 100% !important;
  }
}