* {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #1450F5;
}

body {
  position: relative;
  z-index: 1; /* Ensures container content is above the pseudo-element */
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/bg.jpg');
  background-size: 500px;
  opacity: 0.01; /* Opacity applied only to the background image layer */
  z-index: -1; /* Puts the background behind the main content */
}

h1, h2, h3, h4, h5, h6, .btn {
  font-family: "Paytone One", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #012178;
}

.btn-style {
    background-color: #FFB000;
}

.btn-style:hover {
    background-color: #DEC06F;
}

.smaller {
    font-size: 0.6em;
}

footer {
    background-color: #5274D1;
}

footer a {
    text-decoration: none;
    color: #fff;
}

.unit-display {
  background-color: #5274D1;
}

.unit-display button {
  width: 100%;
  color: #fff;
}

.unit-display .col-4 {
  height: 75px;
}

.unit-display .col-12 {
  height: 250px;
}

.unit-selected {
  animation: colorTransition 1.5s ease-in-out infinite;
}

.material-symbols-outlined {
  font-size: 6em !important;
}

.compliance-comparison {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}

.compliance-comparison thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.compliance-comparison th {
  padding: 1.25rem;
  text-align: left;
  font-weight: 600;
  font-size: 1.1rem;
}

.compliance-comparison td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.compliance-comparison tbody tr:hover {
  background-color: #f9fafb;
}

.compliance-comparison td:first-child {
  font-weight: 500;
  color: #374151;
}

.adventurecore {
  background-color: #ecfdf5;
  color: #065f46;
}

.competitors {
  background-color: #fef2f2;
  color: #991b1b;
}

.check {
  color: #059669;
  font-weight: 500;
}

.x {
  color: #dc2626;
  font-weight: 500;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .compliance-comparison {
    font-size: 0.9rem;
  }
  
  .compliance-comparison th,
  .compliance-comparison td {
    padding: 0.75rem;
  }
}

/* Define the animation */
@keyframes colorTransition {
  0% {
    background-color: #DEC06F; /* Starting color - indigo */
  }
  50% {
    background-color: #FFB000; /* Middle color - purple */
  }
  100% {
    background-color: #DEC06F; /* Back to starting color */
  }
}