/* Make Swiper pagination dots visible on dark backgrounds */
  .swiper-pagination-bullet {
    background: white;
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }

  .swiper-pagination-bullet-active {
    opacity: 1;
  }

  /* Optional: Hide scrollbars */
  /* .swiper-wrapper {
    overflow: hidden;
  } */

  /* Smooth transition and scale on hover */
  .swiper-slide {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .swiper-slide:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  /* Adjust spacing */
  .swiper {
    padding-bottom: 40px; /* Make space for pagination */
  }

  /* Optional: Rounded edges for pagination dots */
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
/*  */

 #popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    #popup-content {
      background: white;
      padding: 2rem;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    #close-btn {
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      background: #333;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #close-btn:hover {
      background: #555;
    }
/*  */