/* Styling for the pagination dots */
    .swiper-pagination-bullet {
        background: white !important;
        opacity: 0.6;
    }
    .swiper-pagination-bullet-active {
        background: #1e40af !important; /* School Blue */
        opacity: 1;
        width: 10px;
        height: 10px;
    }
.road-map{
    width:100%;
    margin:auto;
    padding-top:30px;
}
.route iframe{
width: 100%;
}
 /* Standard CSS to prevent VS Code errors */
  .club-card-base {
    position: relative;
    flex-shrink: 0;
    width: 280px;
    height: 400px;
    border-radius: 2rem;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.2);
    cursor: pointer;
    transition: all 0.5s ease;
  }

  @media (min-width: 1024px) {
    .club-card-base { width: 380px; height: 500px; }
  }

  .club-card-base:hover { border-color: #60a5fa; }

  .card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }
  .club-card-base:hover .card-img { transform: scale(1.05); }

  .card-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient(to top, #0f172a 0%, rgba(30, 58, 138, 0.2) 50%, transparent 100%);
  }

  .card-content { position: absolute; bottom: 2rem; left: 2rem; z-index: 20; }
  .card-content span { display: block; color: #93c5fd; font-weight: bold; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 0.25rem; }
  .card-content h4 { color: white; font-weight: 900; font-size: 1.5rem; text-transform: uppercase; line-height: 1.2; white-space: normal; }

  @media (min-width: 1024px) {
    .card-content h4 { font-size: 2.25rem; }
  }

  /* Marquee Logic */
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
  }
  
  .animate-marquee {
    animation: marquee 40s linear infinite;
  }

  /* Pause when user interacts */
  .group:hover .animate-marquee,
  .group:active .animate-marquee {
    animation-play-state: paused;
  }