body {
  background-color: #f8f9fa; /* soft light grey */
  font-family: 'Inter', sans-serif;
}

h1, h2, h3 {
  color: #343a40; /* dark grey text */
}

.card {
  border-radius: 1rem;
}

.btn-primary {
  background-color: #007bff; /* bootstrap blue */
  border: none;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.shadow-contact {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.4);
}

.table th {
  background-color: #212529 !important;
  color: #fff;
}

.container {
  max-width: 1100px;
}

#contact {
  background-color: #ffffff;
}

/* this is for floating button */
@keyframes softPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5);
  }
  99% {
    box-shadow: 0 0 15px 10px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

/* this is for floating button */
.shadow-contact {
  animation: softPulse 1s ease-out infinite;
}

/* this is for the banner */
.hero-header {
  background: url('/images/vhsDigitising/vhs.png') center/cover no-repeat;
  color: black;
  padding: 120px 0;
  text-shadow:
    0 0 5px white,
    0 0 10px white,
    0 0 10px white,
    0 0 10px white,
    0 0 10px white,
    0 0 10px white,
    0 0 10px white,
    0 0 10px white,
    0 0 10px white,
    0 0 10px white,
    0 0 30px white;
}



/* this is for floating button */
#messengerButton {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    background-color: #0084ff;
    border: none;
    color: white;
    border-radius: 999px; /* more round than 50px */
    padding: 0.5rem 1rem; /* a bit more balance */
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
  }

  #messengerButton:hover {
    background-color: #006aff;
    transform: scale(1.05);
    box-shadow: 0 0.6rem 1rem rgba(0, 0, 0, 0.3);
    text-decoration: none;
  }

/* Optional: smaller on mobile */
@media (max-width: 576px) {
    #messengerButton {
        bottom: 15px;
        right: 15px;
        padding: 0.35rem 0.7rem;
        font-size: 0.85rem;
    }
}