html {
  scroll-behavior: smooth;
}

.hero-bg {
  position: relative;
  background-color: #1e3a8a;
  height: 600px; /* or 100vh */
  background-image: url("images/proddy-transport.png"); /* ✅ Make sure this path is correct */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: fadeHeroBg 2.5s ease-in-out forwards; /* ✅ This must match the keyframe name */
}

.hero-content {
  position: relative;
  z-index: 2;
  margin-top: 8rem; /* or padding-top */
}

@keyframes fadeHeroBg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}



  /* Smooth transitions for cards */
  .service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }




  /* Button Hover States */
  .btn-primary {
    background-color: #1e3a8a;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }

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

  .btn-outline {
    border: 2px solid white;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-outline:hover {
    background-color: white;
    color: #1e3a8a;
  }

  


  /* Section Headings */
  .section-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 1rem;
  }

  

  /* Plan Card Highlight */
  .plan-card.popular {
    border: 2px solid #f59e0b;
    background-color: #fff7ed;
  }

  


  /* Responsive Text Fixes */
  @media (max-width: 768px) {
    .hero-bg {
    height: 850px;
  }
    .hero-title {
      font-size: 2rem;
    }

    .hero-subtitle {
      font-size: 1rem;
    }
  }




/* Add these fonts */
.font-inter {
  font-family: 'Inter', sans-serif;
}

.font-playfair {
  font-family: 'Playfair Display', serif;
}





/* Custom animations */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}



/* Utility animation classes */
.slide-in-left {
  animation: slideInLeft 1.2s ease-out forwards;
}

.slide-in-right {
  animation: slideInRight 1.2s ease-out forwards;
}

.delay-1s {
  animation-delay: 0.6s;
}



@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fade-in-down 1.2s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 1s ease-out forwards;
}




/* Custom Glow Hover Effect */
.plan-card:hover {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.6), 0 0 50px rgba(30, 58, 138, 0.2);
  transition: all 0.4s ease-in-out;
}




/* Slow fade-up animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 1s ease-out both;
}

.animate-fade-up.delay-100 {
  animation-delay: 0.1s;
}

.animate-fade-up.delay-200 {
  animation-delay: 0.2s;
}

.animate-fade-up.delay-300 {
  animation-delay: 0.3s;
}





 .transition-height {
    transition: max-height 0.6s ease-in-out, opacity 0.5s ease-in-out;
    overflow: hidden;
  }
  #planCardsWrapper {
    transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in-out;
  }




  /* Custom Light/Dark Mode Styles */
    .bg-day-mode { background-color: #f9fafb; }
    .text-day-mode { color: #4b5563 ; }
    .text-day-mode-h2 { color: #1e3a8a; }
    .card-bg-day { background-color: #ffffff; }
    .list-item-day { color: #374151; }

    .bg-night-mode { background-color: #111827; }
    .text-night-mode { color: white; }
    .text-night-mode-h2 { color: #93c5fd; }
    .card-bg-night { background-color: #1f2937; }
    .list-item-night { color: #e5e7eb; }

    .transition-colors {
      transition: background-color 0.5s ease, color 0.5s ease;
    }
.text-proddy-heading {
    color: #5B21B6 !important; /* A rich purple, or your brand color */
  }

  .text-proddy-paragraph {
    color: #4B5563 !important; /* Tailwind's gray-600 — nice for body text */
  }
  .text-fixed-gray {
    color: #4B5563 !important; /* Tailwind's gray-600 */
  }
    /* Smooth transition for all color changes */
    .transition-colors { transition: background-color 0.5s ease, color 0.5s ease; }





/* Zoom Background */
.bg-zoom {
  animation: zoomBg 20s ease-in-out infinite alternate;
}
@keyframes zoomBg {
  from { background-size: 100%; }
  to { background-size: 110%; }
}

/* Shared Input Style */
.input-style {
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.input-style::placeholder { color: white; }

/* Loader Spinner */
.loader {
  width: 20px;
  height: 20px;
  border: 3px solid white;
  border-top: 3px solid transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Checkmark */
.checkmark {
  font-size: 1.5rem;
  color: white;
  pos

  ition: absolute;
  left: 50%;
  transform: translateX(-50%);
}


/* Fade-in + slide-up animation for the booking section */
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animate the entire section container */
section.relative {
  animation: fadeSlideUp 1.2s ease-out forwards;
}

/* Delay forms slightly for a staggered effect */
section.relative form {
  opacity: 0;
  animation: fadeSlideUp 1s ease-out forwards;
}
ection.relative form:nth-child(1) {
  animation-delay: 0.3s;
}

section.relative form:nth-child(2) {
  animation-delay: 0.5s;
}

/* Make select dropdown truly transparent */
section.relative select {
  background-color: transparent !important;
  color: white;
}

section.relative select option {
  background-color: rgba(0,0,0,0.8);
  color: white;
}