/* Mobile Responsiveness Overrides */
@media (max-width: 768px) {

  /* Header */
  .bg-top {
    display: block !important;
    padding: 5px 0 !important;
    font-size: 0.8rem;
  }

  .bg-top .container {
    padding: 0 10px;
  }

  .bg-top .row {
    gap: 5px;
  }

  .topper {
    justify-content: center !important;
    text-align: center !important;
    padding: 5px 0 !important;
    margin-bottom: 0 !important;
  }

  /* Icons smaller */
  .topper .icon {
    width: 30px;
    height: 30px;
  }

  .topper .icon span {
    font-size: 14px;
  }

  .topper .text span {
    display: block;
    font-size: 11px;
  }

  .ftco-navbar-light {
    top: 0 !important;
    margin-top: 0 !important;
    background: #000 !important;
    /* Dark bg for contrast */
    padding: 10px 0 !important;
  }

  .navbar-brand {
    font-size: 1.5rem !important;
    color: #fff !important;
  }

  .navbar-toggler {
    border-color: #fff !important;
    color: #fff !important;
  }

  /* Reduce container padding */
  .ftco-section {
    padding: 3em 0 !important;
  }

  /* Heading Typography */
  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.8rem !important;
  }

  /* Course Cards */
  .course-wrap {
    margin-bottom: 30px !important;
    /* Reduce shadow/border scale for small screens */
    box-shadow: 4px 4px 0px #000 !important;
    border-width: 2px !important;
  }

  /* Buttons */
  .btn {
    width: 100%;
    margin-bottom: 10px;
  }

  /* Staff/Founder Section */
  .staff,
  .text-left {
    text-align: center !important;
  }

  .staff .img {
    margin: 0 auto 20px auto;
  }

  /* General Padding */
  .px-md-5 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Testimonial Neobrutalism Design */
.testimony-wrap {
  background: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: 6px 6px 0px #000 !important;
  padding: 20px !important;
  margin: 10px;
  border-radius: 0 !important;
}

.testimony-wrap .quote i {
  color: #000 !important;
}

.testimony-wrap .name {
  font-weight: 800 !important;
  color: #000 !important;
}

.testimony-wrap .position {
  color: #555 !important;
  font-weight: 600;
}

/* Neobrutalism Overrides */
:root {
  --neo-black: #000000;
  --neo-white: #ffffff;
  /* Blue Theme */
  --neo-primary: #007bff;
  /* Cyan Accent for secondary elements */
  --neo-secondary: #0dcaf0;
  /* Light Blue Background */
  --neo-bg: #e6f2ff;
  --neo-border: 6px solid var(--neo-black);
  --neo-shadow: 10px 10px 0px 0px var(--neo-black);
}

body {
  font-family: 'Poppins', 'Courier New', monospace !important;
  background-color: var(--neo-white) !important;
  color: var(--neo-black) !important;
  overflow-x: hidden;
}


/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--neo-black) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -1px;
}

/* Buttons */
.btn {
  border: var(--neo-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--neo-shadow) !important;
  background-color: var(--neo-white) !important;
  color: var(--neo-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out !important;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px 0px var(--neo-black) !important;
  background-color: var(--neo-primary) !important;
  color: var(--neo-white) !important;
}

.btn-primary {
  background-color: var(--neo-primary) !important;
  color: var(--neo-white) !important;
}

.btn-primary:hover {
  background-color: var(--neo-black) !important;
  color: var(--neo-white) !important;
}

/* Navbar */
.navbar-brand {
  font-weight: 900;
  color: var(--neo-black) !important;
  background: var(--neo-primary);
  padding: 5px 10px;
  border: 4px solid var(--neo-black);
  box-shadow: 6px 6px 0px 0px var(--neo-black);
}

.navbar-brand span {
  color: var(--neo-white) !important;
}

.ftco-navbar-light {
  background: var(--neo-black) !important;
  border-bottom: 6px solid var(--neo-black);
}

.nav-item .nav-link {
  color: var(--neo-white) !important;
  font-weight: 700;
  text-transform: uppercase;
}

.nav-item.active .nav-link {
  color: var(--neo-primary) !important;
  text-decoration: underline;
}

/* Cards & Sections */
.course,
.staff,
.services-2,
.testimony-wrap,
.bg-light.box {
  background: var(--neo-white) !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
  margin-bottom: 30px;
  padding: 20px;
  transition: transform 0.2s;
}

.course:hover,
.staff:hover {
  transform: translate(-4px, -4px);
  box-shadow: 14px 14px 0px 0px var(--neo-black) !important;
}

@media (max-width: 768px) {
  :root {
    --neo-border: 4px solid var(--neo-black);
    --neo-shadow: 6px 6px 0px 0px var(--neo-black);
  }

  .course,
  .staff,
  .services-2,
  .testimony-wrap,
  .bg-light.box {
    margin-bottom: 20px;
    padding: 15px;
  }
}

/* Images */
.img {
  border: 4px solid var(--neo-black);
  /* Filter: Convert Images to Grayscale + High Contrast to remove orange tint */
  filter: grayscale(100%) contrast(120%);
  max-width: 100%;
  height: auto;
}

.img:hover {
  filter: none;
}

/* Forms */
.form-control {
  border: 4px solid var(--neo-black) !important;
  border-radius: 0 !important;
  background: var(--neo-white) !important;
  color: var(--neo-black) !important;
  box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.1);
}

.form-control:focus {
  box-shadow: 6px 6px 0px 0px var(--neo-black) !important;
  background: #e6f2ff !important;
}

/* Footer */
.ftco-footer {
  background: var(--neo-black) !important;
  color: var(--neo-white) !important;
  border-top: 10px solid var(--neo-primary);
}

.ftco-footer h2 {
  color: var(--neo-primary) !important;
}

.ftco-footer-widget ul li a {
  color: var(--neo-white) !important;
}

/* Misc */
.block-18 .icon,
.services-2 .icon {
  background: var(--neo-primary) !important;
  border: 3px solid var(--neo-black);
  box-shadow: 4px 4px 0px 0px var(--neo-black);
  color: var(--neo-black) !important;
}

.ftco-section {
  padding: 4em 0;
}

.bg-light {
  background: var(--neo-bg) !important;
}

/* FORCE OVERRIDES FOR ANY REMAINING ORANGE */
.bg-primary,
.btn-primary,
.ftco-animate.bg-primary {
  background-color: var(--neo-primary) !important;
}

a {
  color: var(--neo-primary);
}

a:hover {
  color: #0056b3;
}

/* Overlay fixes for Heroes to kill Orange Tint */
.overlay {
  background: rgba(0, 123, 255, 0.3) !important;
  /* Force Blue Overlay */
}

/* Enforce Heavy Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800 !important;
}

/* Fix "Request Quote" Section - Solid Background Overhaul */
.ftco-consult {
  background-image: none !important;
  background-color: var(--neo-bg) !important;
  /* Solid Light Blue */
  padding: 60px 0;
}

.ftco-consult .overlay {
  display: none !important;
}

.ftco-consult::before {
  display: none !important;
}

.ftco-consult .heading-section-white h2 {
  color: var(--neo-black) !important;
}

.ftco-consult .heading-section-white p {
  color: var(--neo-black) !important;
}

/* Make the form popped out */
.ftco-consult form {
  background: var(--neo-white);
  padding: 30px;
  border: var(--neo-border);
  box-shadow: var(--neo-shadow);
}

.ftco-consult .btn {
  width: 100%;
  margin-top: 10px;
}


.img-video {
  position: relative;
}

/* Only apply overlay to video section now */
.img-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 123, 255, 0.4) !important;
  /* Lightened from 0.6 as requested */
  z-index: 0;
}

.ftco-consult .container,
.img-video .video {
  position: relative;
  z-index: 1;
}

/* Loader Fix */
#ftco-loader .path {
  stroke: var(--neo-primary) !important;
}

/* Fix contrast in dark sections (Modules, Study Materials) */
.bg-darken h3,
.bg-darken p,
.bg-darken .icon span {
  color: #ffffff !important;
}

/* Ensure Breadcrumb/Hero areas have the heavy blue overlay for text readability */
/* Reduced opacity as requested "too much blue" */
.hero-wrap .overlay {
  background: rgba(0, 123, 255, 0.5) !important;
  opacity: 1 !important;
}

/* Kill Orange Hover on Video Icon in Foundation Section */
.img-video .icon-video span {
  color: var(--neo-primary) !important;
}

.img-video .icon-video:hover span {
  color: #fff !important;
}

.img-video .icon-video {
  background: #fff !important;
  animation: pulse 2s infinite;
}

.img-video .icon-video:hover {
  background: var(--neo-primary) !important;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }

  70% {
    box-shadow: 0 0 0 30px rgba(0, 123, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

/* Header Icon Fix */
.topper .icon {
  color: var(--neo-primary) !important;
}

/* Contact Map Border */
iframe {
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
}

/* Breadcrumb Links */
.breadcrumbs span a {
  color: #fff !important;
  text-decoration: underline;
}

/* --- CRITICAL UI/UX FIXES --- */

/* 1. Remove Catastrophic Blue Glow on Animations */
/* Only apply to elements that are NOT meant to have backgrounds */
.ftco-animate:not(.bg-primary):not(.bg-darken):not(.btn) {
  background-color: transparent !important;
}

/* Restore Backgrounds for Service Boxes */
.services.bg-primary {
  background-color: var(--neo-primary) !important;
}

.services.bg-darken {
  background-color: #000000 !important;
  /* Proper Darken */
}

/* Ensure Text is White in these boxes */
.services.bg-primary h3,
.services.bg-primary p,
.services.bg-primary .icon span,
.services.bg-darken h3,
.services.bg-darken p,
.services.bg-darken .icon span {
  color: #ffffff !important;
}

/* 2. Request a Quote Form Visibility */
.ftco-consult .form-control {
  border: 4px solid #000000 !important;
  color: #000000 !important;
  background: #ffffff !important;
}

.ftco-consult .form-control::placeholder {
  color: #555555 !important;
}

/* 3. Hero Text Contrast (BioPedia Foundation Section) */
/* Wrap the text in a white neobrutalist box */
.heading-section-white {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border: 4px solid #000;
  box-shadow: 10px 10px 0px 0px #000;
  color: #000 !important;
}

.heading-section-white h2,
.heading-section-white p {
  color: #000000 !important;
  text-shadow: none !important;
}

/* 4. Mentor/Staff Card Contrast */
.staff .text h3,
.staff .text h3 a,
.staff .text .position,
.staff .text .faded p {
  color: #000000 !important;
}

/* 5. Navbar Active Link Contrast */
/* Cyan pops better on Black than dark blue does */
.ftco-navbar-light .navbar-nav>.nav-item.active>a {
  color: var(--neo-secondary) !important;
  text-shadow: 2px 2px 0px #000;
  /* Tiny shadow for legibility if needed */
}

/* 6. Breadcrumb Visibility */
/* Ensure the area behind breadcrumbs is dark enough or the text is popped */
.breadcrumbs {
  background: rgba(0, 0, 0, 0.8);
  /* Black box behind breadcrumbs */
  padding: 10px 20px;
  border: 2px solid var(--neo-primary);
  box-shadow: 4px 4px 0px 0px var(--neo-primary);
  display: inline-block;
}

/* --- COMPACTING FIXES --- */
/* Compact the course/service boxes */
.course {
  padding: 15px !important;
  /* Reduced from 20px */
}

.course .text {
  padding-top: 10px !important;
  /* Override pt-4 */
}

.course h3 {
  font-size: 1.25rem !important;
  /* Slightly smaller header */
  margin-bottom: 10px !important;
}

.course p {
  margin-bottom: 10px !important;
}

.course ul {
  margin-bottom: 0 !important;
  padding-left: 1.2em;
}

.course ul li {
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
  font-size: 0.95rem;
}

/* Compact the Special Features list */
.services-2 {
  margin-bottom: 15px !important;
}

.services-2 .icon {
  width: 50px !important;
  height: 50px !important;
  font-size: 20px;
}

.services-2 .text h3 {
  font-size: 1.15rem !important;
  margin-bottom: 5px !important;
}

.services-2 .text p {
  margin-bottom: 0 !important;
  line-height: 1.3;
}

/* Counter Hover Blue */
.block-18:hover,
.block-18:hover .icon span,
.block-18:hover .text strong,
.block-18:hover .text span {
  color: #4facfe !important;
  transition: 0.3s;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CUSTOM SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f8fafc;
}

::-webkit-scrollbar-thumb {
  background: var(--neo-primary);
  border: 2px solid #f8fafc;
  border-radius: 50px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neo-black);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neo-primary) #f8fafc;
}