/* GRADIENT CSS */
/* Welcome Text in Hero */
body {
  background: #040a45;
}

.welcome-text {
  font-weight: 250;
  font-size: 5rem;
  color: #fff !important;
  font-family: "Praise", sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .welcome-text {
    font-size: 1.3rem;
  }
}

@media (max-width: 425px) {
  .welcome-text {
    font-size: 1.1rem;
    color: #ffffff !important;
  }
}

@media (min-width: 992px) {
  #cineTrackAccordion {
    width: 75%;
  }
}

@media (max-width: 768px) {
  .hero-header {
    min-height: 80vh;
    padding-top: 3rem;
  }
}

.fade-section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-header {
  background-color: #213555;
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4rem;
}

/* multiple background layers for fading effect */
.hero-header::before,
.hero-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1s ease-in-out;
  animation: bgFade 20s infinite;
  z-index: 0;

  /* 🔥 Gradient overlay to #040a45 at bottom */
  background-image: linear-gradient(
      to bottom,
      rgba(8, 80, 109, 0.461) 50%,
      rgba(4, 10, 69, 1) 100%
    ),
    var(--bg-image);
}
.hero-header::before {
  --bg-image: url("img/movie9.png");
  animation-delay: 0s;
}

.hero-header::after {
  --bg-image: url("img/movie1.jpg");
  animation-delay: 10s;
}

/* fade animation */
@keyframes bgFade {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* overlay gradient above both images */
.hero-header::after,
.hero-header::before {
  background-blend-mode: darken;
}

.hero-header .overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 15, 15, 0.765) 0%,
    rgba(15, 15, 15, 0.823) 90%,
    rgb(15, 15, 15) 100%
  );
  z-index: 1;
}

.hero-header > .container {
  position: relative;
  z-index: 2;
}

.hero-header img {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
  max-height: 500px;
}

header.fade-section {
  opacity: 1;
  transform: none;
}

.features .card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.features .card.visible {
  opacity: 1;
  transform: translateY(0);
}
.features {
  background: #040a45;
  color: #fff; /* make text white for contrast */
  padding: 4rem 0; /* keep breathing space top & bottom */
  border-radius: 0; /* optional: make sure it spans full width */
}

/* Make sure the container spans full width */
.features.container {
  max-width: 100%;
}

/* Optional: card styling on dark background */
.features .card {
  background-color: #25147d; /* blue-gray from palette */
  border: none;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.features .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(129, 0, 95, 0.5);
}

.features .card img {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* FAQ title */
section.fade-section h2 {
  color: #fff !important;
}

/* Accordion dark theme */
.accordion-item {
  background-color: #1c96bb;
  border: 1px solid #001b5b;
  color: #fff;
}

/* Button (header) */
.accordion-button {
  background-color: #023d8b !important;
  color: #fff !important; /* ✅ force white text */
  border: none !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Remove Bootstrap's default background icon colors */
.accordion-button::after {
  filter: invert(1); /* ✅ make the arrow icon white */
}

/* When opened */
.accordion-button:not(.collapsed) {
  background-color: #023d8b !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Hover effect */
.accordion-button:hover {
  background-color: #022958 !important;
  color: #fff !important;
}

/* Accordion body */
.accordion-body {
  background-color: #052159;
  color: #ddd;
  border-top: 1px solid #00275b;
}

/* Optional: remove default blue focus outline */
.accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Optional hover for accordion items */
.accordion-item:hover {
  background-color: #1a005b;
  transition: background-color 0.3s ease;
}