/* ── Design tokens ── */
:root {
    --base-bg:  linear-gradient(90deg, #0d1b2a, #1b263b);
    --base-fg:  rgba(var(--bs-info-rgb), var(--bs-text-opacity));
    --base-shadow:     5px 5px 5px 0px rgba(0, 0, 0, 0.6);
    --base-radius:     14px;
    --bs-text-opacity: 1;
}

@keyframes scale_up {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

@keyframes scale_down {
  0% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.nav-link:hover {
    text-shadow: 2px 2px 10px white;
}
.homepage-img-sizer {
    margin-bottom: 20px;
}
.homepage-img-sizer .row .col .card {
    max-width: 900px !important;
    margin: auto !important;
    box-shadow: var(--base-shadow);
    transition: scale_down 1s;
}

.homepage-img-sizer .row .col .card img {
    max-width: 200px !important;
    box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.6);
    margin: 5px;
    border-radius: 15px;
    border: solid 1px black;
    padding: 15px;
}

.homepage-img-sizer .row .col .card:hover {
    animation: scale_up 1s;
    animation-fill-mode: forwards;
}
.homepage-img-sizer .row .col .card:not(hover) {
    animation: scale_down 1s;
    animation-fill-mode: forwards;
}

.content-container {
    max-width: 900px !important;
    margin: 20px auto 0px auto !important;
}

/* About Us Page Design */

.about-header {
  background: var(--base-bg);
  color: var(--base-fg);
  padding: 20px;
  /* width: 80%; */
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

.about-header:hover {
  transform: scale(1.05);
}

.about-heading {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
}

.about-body {
  font-size: 18px;
  text-align: center;
}