.btn-outline-info {
    color: rgb(72, 70, 240) !important;
    border: 2px solid rgb(72, 70, 240) !important;
    background-color: transparent !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: rgb(72, 70, 240) !important;
    border: 2px solid rgb(72, 70, 240) !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 0.2rem rgba(72, 70, 240, 0.25); /* optional glow */
}


.btn-info {
    background-color: rgb(72, 70, 240) !important;
    border-color: rgb(72, 70, 240) !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: rgb(58, 56, 192) !important; /* slightly darker for hover */
    border-color: rgb(58, 56, 192) !important;
    color: #fff !important;
}



/* Initially hidden and shifted down */
.pop-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* When visible */
.pop-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Interactive hover effect */
.card.pop-on-scroll:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


  .banner-bg {
    background: url("{% static 'images/bg-oc.png' %}") center center / cover no-repeat;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
  }

  .banner-content {
    background: rgba(0, 0, 0, 0.15); /* Very light overlay only behind text */
    padding: 2rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(2px); /* Optional: subtle blur behind text */
  }

  .btn-shadowless {
    box-shadow: none !important;
  }

  @media (max-width: 767.98px) {
    .banner-content {
      text-align: center;
    }
  }