/* TechZilla Dark Override
   Brand colors: #00FF88 (start), #0066FF (end), #0A1A2F (bg), #F4F4F4 (mid text), #FFFFFF (high text) */
:root {
  --tz-bg: #0A1A2F;
  --tz-surface: #0E1E33;
  --tz-border: #173456;
  --tz-brand-start: #00FF88;
  --tz-brand-end: #0066FF;
  --tz-text-hi: #FFFFFF;
  --tz-text-mid: #F4F4F4;
  --tz-text-lo: #B6C4D6;
}

html,
body {
  background: var(--tz-bg) !important;
  color: var(--tz-text-mid);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: white;
}

a {
  color: #8AB6FF;
}

a:hover {
  color: #BFE0FF;
}

.text-muted {
  color: var(--tz-text-mid) !important;
}

/* Header / Navbar */
.navbar {
  backdrop-filter: saturate(160%) blur(8px);
  background: rgba(10, 26, 47, .65) !important;
  border-bottom: 1px solid var(--tz-border);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--tz-text-mid) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: #FFFFFF !important;
}

/* Topbar strip */
.container-fluid.bg-primary {
  background: rgba(0, 102, 255, .12) !important;
  border-bottom: 1px solid var(--tz-border);
}

.container-fluid.bg-primary a {
  color: var(--tz-text-mid) !important;
}

/* Gradient CTA */
.btn-primary,
.btn-gradient {
  background: linear-gradient(135deg, #00FF88, #0066FF) !important;
  color: #0A1A2F !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(0, 102, 255, .28);
}

.gradient-text {
  background: linear-gradient(135deg, #00FF88, #0066FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* for modern browsers */
  color: transparent;
}

.text-black {
  color: black !important;
}

/* Small square buttons (search, back-to-top) */
.btn-md-square,
.btn-lg-square {
  background: linear-gradient(135deg, #00FF88, #0066FF) !important;
  color: #0A1A2F !important;
  border-radius: 12px !important;
  border: none !important;
}

/* Carousel Gradient Controls with visible white icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #00FF88, #0066FF) !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4);
  background-size: cover;
  position: relative;
}

/* Add white arrow via pseudo-element */
.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
}

/* Prev arrow SVG (left pointing) */
.carousel-control-prev-icon::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 8 8'%3E%3Cpath d='M5 0L0 4l5 4V5h3V3H5V0z'/%3E%3C/svg%3E");
}

/* Next arrow SVG (right pointing) */
.carousel-control-next-icon::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 8 8'%3E%3Cpath d='M3 0v3H0v2h3v3l5-4-5-4z'/%3E%3C/svg%3E");
}


.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.5);
}

.carousel-indicators [data-bs-target] {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #00FF88, #0066FF) !important;
  margin: 0 6px;
  transition: all 0.3s ease;
}

.carousel-header .carousel .carousel-indicators li.active {
  background: linear-gradient(135deg, #00FF88, #0066FF) !important;
  box-shadow: 0 0 10px rgba(0, 102, 255, 0.5);
}

.footer {
  background: linear-gradient(180deg, #0E1E33, #0A1A2F);
  border-top: 1px solid var(--tz-border);
}

.footer a {
  color: var(--tz-text-mid);
}

.footer a:hover {
  color: #FFFFFF;
}

/* --- Sticky header + dropdown above carousel --- */

/* Sticky header stays above page content */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 3000;
  /* higher than carousel, captions, indicators */
}

/* Navbar & dropdown stacking */
.navbar {
  z-index: 3001;
}

.dropdown-menu {
  z-index: 3050;
}

/* Keep carousel underneath header */
.carousel-header,
.carousel,
.carousel-inner,
.carousel-item,
.carousel-caption,
.carousel-indicators {
  z-index: 1;
}

/* Avoid clipping dropdowns near the carousel */
.carousel-header {
  overflow: visible;
}

/* Optional: caption shouldn't block opening menus */
.carousel-caption {
  pointer-events: none;
}

.carousel-caption>* {
  pointer-events: auto;
}

/* (Optional) subtle backdrop for sticky header when scrolling */
.header-opaque .navbar {
  /* looks good with your dark theme */
  background: rgba(10, 26, 47, 0.85) !important;
  border-bottom: 1px solid #173456;
  backdrop-filter: saturate(160%) blur(8px);
}