:root {
  --deep-navy: #0f2854; /* Background / Primary */
  --ocean-blue: #1c4d8d; /* Secondary / Nav */
  --steel-blue: #4988c4; /* Accents / Buttons */
  --sky-blue: #bde8f5; /* Highlights / Text */
}

body {
  background-color: #f8f9fa;
  color: var(--deep-navy);
}

/* Home Section */
#home {
  position: relative;
  overflow: hidden;
  background-color: var(--deep-navy);
  color: var(--sky-blue);
}

#home .container {
  position: relative;
  z-index: 1;
}

#background-video {
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
}

.navbar {
  background-color: var(--ocean-blue) !important;
  gap: 50px;
}

.navbar .nav-link {
  color: var(--sky-blue) !important;
}
.navbar .nav-link.active {
  border-bottom: 2px solid var(--steel-blue);
}

section {
  padding: 100px 0;
}

/* Themed Components */
.btn-primary {
  background-color: var(--steel-blue);
  border-color: var(--steel-blue);
  color: var(--deep-navy);
  font-weight: bold;
}

.btn-primary:hover {
  background-color: var(--sky-blue);
  color: var(--deep-navy);
}

.card {
  border: 1px solid var(--steel-blue);
  background-color: white;
}

.badge-tech {
  background-color: var(--sky-blue);
  color: var(--deep-navy);
  margin-right: 5px;
}

.section-title {
  color: var(--ocean-blue);
  border-left: 5px solid var(--steel-blue);
  padding-left: 15px;
  margin-bottom: 30px;
}
/* Full-screen Loader */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--deep-navy);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Stay on top */
  transition:
    opacity 0.5s ease,
    visibility 0.5s;
}

/* Spinner and text positioning */
.spinner-container {
  text-align: center;
}

/* Content Fade-In Effect */
#content {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#content.visible {
  opacity: 1;
}

/* Loader Hidden State */
#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

#contact-link {
  background-color: var(--steel-blue);
  border-radius: 25px;
  color: var(--ocean-blue) !important;
}

#contact-link:hover {
  background-color: var(--sky-blue);
  color: var(--ocean-blue) !important;
}

/* Ensure the cards have a consistent height and subtle hover */
.project-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  background: #ffffff;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(15, 40, 84, 0.1) !important;
}

/* Forces buttons to the bottom if one card has more text than the other */
.card-body {
  display: flex;
  flex-direction: column;
}

.flex-grow-1 {
  flex-grow: 1;
}

footer .fa-brands,
footer .fa-solid {
  font-size: 1.6rem;
}