@import url('https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.css');

/* FOLLOW-US FLOATING CAROUSEL WIDGET */
.floating-carousel-widget {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
}

.floating-carousel-widget .social-swiper-container {
  pointer-events: auto;
}

.social-swiper-container {
  position: relative;
  width: 90vw;
  max-width: 700px;
  height: auto;
  margin: 0 auto;
}

.social-swiper-container .swiper-wrapper {
  align-items: center;
}

.social-swiper-container .swiper-slide {
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(252, 238, 238, 0.1);
  border-radius: 50%;
  overflow: hidden;
  cursor: grab;
  transform-origin: center center;
  transition:
    transform 148ms ease,
    box-shadow 300ms ease,
    opacity 300ms ease;
}

.social-swiper-container .swiper-slide:active {
  cursor: grabbing;
}

.social-swiper-container .swiper-slide.swiper-slide-active {
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
}

.social-swiper-container .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.social-swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-swiper-container .swiper-slide-active img {
  animation: social-icon-pulse 1.8s ease-in-out infinite;
}

@keyframes social-icon-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15);
  }
}