.swiper {
          width: 100%;
          overflow: hidden;
      }

      .swiper-wrapper {
          position: relative;
      }

      .swiper-slide {
          position: relative;
          width: 100%;
          height: 100vh;
          overflow: hidden;
      }

      .liquid-container {
          position: absolute;
          width: 100%;
          height: 100%;
          display: grid;
          grid-template-columns: repeat(20, 1fr);
          grid-template-rows: repeat(20, 1fr);
          gap: 0 !important;
      }

      .liquid-particle {
          width: 100%;
          height: 100%;
          opacity: 0;
          background-size: 2000% 2000%;
          background-repeat: no-repeat;
          box-sizing: border-box;
          margin: 0 !important;
          transform-origin: center center;
          filter: brightness(1.2);
      }

      .swiper-button-next,
      .swiper-button-prev {
          color: #fff;
          background: rgba(0, 0, 0, 0.5);
          width: 50px;
          height: 50px;
          border-radius: 50%;
          transition: all 0.3s ease;
      }

      .swiper-button-next:hover,
      .swiper-button-prev:hover {
          background: rgba(0, 0, 0, 0.8);
          transform: scale(1.1);
      }

      .swiper-button-next:after,
      .swiper-button-prev:after {
          font-size: 20px;
      }

      .swiper-pagination {
          bottom: 30px !important;
      }

      .swiper-pagination-bullet {
          width: 12px;
          height: 12px;
          background: rgba(255, 255, 255, 0.5);
          border: 2px solid rgba(255, 255, 255, 0.8);
          opacity: 1;
          margin: 0 8px !important;
          position: relative;
          transition: all 0.3s ease;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }

      .swiper-pagination-bullet::before {
          content: "";
          position: absolute;
          top: -4px;
          left: -4px;
          right: -4px;
          bottom: -4px;
          border: 2px solid transparent;
          border-radius: 50%;
          transition: all 0.3s ease;
      }

      .swiper-pagination-bullet-active {
          background: #fff;
          transform: scale(1.2);
          box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
      }

      .swiper-pagination-bullet-active::before {
          border-color: rgba(255, 255, 255, 0.5);
      }

      .swiper-pagination-bullet::after {
          content: "";
          position: absolute;
          bottom: 100%;
          left: 50%;
          transform: translateX(-50%) translateY(-10px);
          width: 100px;
          height: 60px;
          background-image: var(--thumb-url);
          background-size: cover;
          background-position: center;
          border-radius: 4px;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          margin-bottom: 10px;
      }