/* =========================================================
   FOOTER
   Professional Navy / Blue Theme
   Original layout preserved
   ========================================================= */

:root {
  --footer-bg: #0f172a;
  --footer-bg-deep: #0b1328;
  --footer-card: rgba(255, 255, 255, 0.035);

  --footer-text: #e5e7eb;
  --footer-heading: #ffffff;

  --footer-link: #93c5fd;
  --footer-link-hover: #bfdbfe;

  --footer-accent: #818cf8;
  --footer-accent-light: #a5b4fc;

  --footer-border: rgba(148, 163, 184, 0.20);

  --footer-container-width: 1200px;
}


/* =========================================================
   MAIN FOOTER
   ========================================================= */

.footer {
  background:
    linear-gradient(
      135deg,
      #0b1328 0%,
      #101a33 50%,
      #121f3d 100%
    ) !important;

  color: var(--footer-text) !important;

  padding: 28px 0 18px !important;

  display: block !important;

  border-top: 1px solid var(--footer-border) !important;

  box-shadow:
    0 -8px 25px rgba(15, 23, 42, 0.12) !important;
}


/* =========================================================
   IMPORTANT:
   ORIGINAL THREE-COLUMN LAYOUT
   ========================================================= */

.footer-container {
  width: 100% !important;

  max-width: var(--footer-container-width) !important;

  margin: 0 auto !important;

  padding: 0 20px !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns: 1.2fr 1fr 1fr !important;

  gap: 24px !important;

  align-items: stretch !important;
}


/* =========================================================
   FOOTER COLUMNS / CARDS
   ========================================================= */

.footer-col {
  background:
    rgba(255, 255, 255, 0.035) !important;

  border: 1px solid var(--footer-border) !important;

  border-radius: 10px !important;

  padding: 12px !important;

  box-sizing: border-box !important;

  color: var(--footer-text) !important;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.16) !important;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}


.footer-col:hover {
  background:
    rgba(255, 255, 255, 0.055) !important;

  border-color:
    rgba(129, 140, 248, 0.35) !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.20) !important;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.footer-col h4 {
  margin: 0 0 12px !important;

  padding-bottom: 6px !important;

  color: var(--footer-heading) !important;

  font-size: 17px !important;

  font-weight: 700 !important;

  line-height: 1.25 !important;

  letter-spacing: 0.1px !important;

  text-align: left !important;

  position: relative !important;
}


/* Accent line */

.footer-col h4::after {
  content: "" !important;

  position: absolute !important;

  left: 0 !important;

  bottom: 0 !important;

  width: 48px !important;

  height: 3px !important;

  border-radius: 3px !important;

  background:
    linear-gradient(
      90deg,
      var(--footer-accent),
      var(--footer-accent-light)
    ) !important;

  opacity: 0.95 !important;
}


/* =========================================================
   DEPARTMENT INFORMATION
   ========================================================= */

.footer-about p {
  margin: 6px 0 !important;

  color: var(--footer-text) !important;

  font-size: 15px !important;

  font-weight: 500 !important;

  line-height: 1.5 !important;

  text-align: left !important;
}


/* =========================================================
   EMAIL / FOOTER LINKS
   ========================================================= */

.footer-about a {
  color: var(--footer-link) !important;

  font-weight: 600 !important;

  text-decoration: none !important;

  transition:
    color 0.2s ease,
    text-shadow 0.2s ease !important;
}


.footer-about a:hover {
  color: var(--footer-link-hover) !important;

  text-shadow:
    0 0 8px rgba(147, 197, 253, 0.35) !important;
}


/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.footer-social a {
  margin-right: 10px !important;

  font-size: 18px !important;

  color: var(--footer-accent) !important;

  opacity: 1 !important;

  transition:
    color 0.2s ease,
    transform 0.2s ease,
    filter 0.2s ease !important;
}


.footer-social a:hover {
  color: var(--footer-accent-light) !important;

  transform: translateY(-2px) !important;

  filter:
    drop-shadow(
      0 0 5px rgba(129, 140, 248, 0.45)
    ) !important;
}


/* =========================================================
   QUICK LINKS
   ========================================================= */

.footer-links ul {
  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;
}


.footer-links li {
  margin: 8px 0 !important;

  break-inside: avoid !important;
}


.footer-links a {
  position: relative !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 0.5rem !important;

  color: var(--footer-text) !important;

  font-size: 15px !important;

  font-weight: 600 !important;

  letter-spacing: 0.2px !important;

  text-decoration: none !important;

  opacity: 0.95 !important;

  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease !important;
}


.footer-links a:hover {
  color: var(--footer-link-hover) !important;

  opacity: 1 !important;
}


/* Arrow */

.footer-links a::after {
  content: "›" !important;

  font-size: 14px !important;

  line-height: 1 !important;

  transform: translateX(-4px) !important;

  opacity: 0.6 !important;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease !important;
}


.footer-links a:hover::after {
  transform: translateX(0) !important;

  opacity: 1 !important;
}


/* =========================================================
   LARGE SCREEN — TWO COLUMNS FOR QUICK LINKS
   ========================================================= */

@media (min-width: 900px) {

  .footer-links ul {
    columns: 2 !important;

    column-gap: 24px !important;
  }

  .footer-links li {
    break-inside: avoid !important;
  }
}


/* =========================================================
   MAP
   ========================================================= */

.footer-map .map-wrap {
  border-radius: 8px !important;

  overflow: hidden !important;

  background:
    rgba(255, 255, 255, 0.02) !important;

  border:
    1px solid rgba(255, 255, 255, 0.10) !important;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.20) !important;
}


.footer-map iframe {
  display: block !important;

  width: 100% !important;

  height: 160px !important;

  border: 0 !important;
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
  border-top:
    1px solid rgba(148, 163, 184, 0.20) !important;

  margin-top: 20px !important;

  padding-top: 12px !important;

  text-align: center !important;

  font-size: 14px !important;

  color: #dbe3f0 !important;

  background:
    rgba(3, 7, 18, 0.20) !important;
}


.footer-bottom p {
  color: #dbe3f0 !important;

  margin: 6px 0 !important;
}


.footer-bottom a {
  color: var(--footer-link) !important;

  font-weight: 600 !important;

  text-decoration: underline !important;

  text-decoration-color:
    rgba(147, 197, 253, 0.55) !important;

  text-underline-offset: 2px !important;
}


.footer-bottom a:hover {
  color: var(--footer-link-hover) !important;
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

.footer a:focus-visible {
  outline:
    2px solid var(--footer-accent-light) !important;

  outline-offset: 3px !important;

  border-radius: 6px !important;
}


/* =========================================================
   RESPONSIVE FOOTER
   Original behavior preserved
   ========================================================= */

@media (max-width: 900px) {

  .footer-container {
    grid-template-columns: 1fr !important;
  }

  .footer-map iframe {
    height: 200px !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .footer {
    padding: 24px 0 16px !important;
  }

  .footer-container {
    padding-left: 15px !important;

    padding-right: 15px !important;

    gap: 18px !important;
  }

  .footer-col h4 {
    font-size: 17px !important;
  }

  .footer-about p,
  .footer-links a {
    font-size: 15px !important;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .footer-container {
    padding-left: 10px !important;

    padding-right: 10px !important;
  }

  .footer-col {
    padding: 12px !important;
  }

  .footer-col h4 {
    font-size: 16px !important;
  }

  .footer-about p,
  .footer-links a {
    font-size: 14px !important;
  }

  .footer-bottom {
    font-size: 12px !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .footer * {
    transition: none !important;
  }
}