/* ===================
    Slider Social Icon Style 
=======================*/

.slider-social {
  position: absolute;
  display: flex;
  gap: 10px;
  z-index: 99;
}

.slider-social.bottom-left {
  bottom: 30px;
  left: 30px;
  transform: translateY(0);
}

.slider-social.bottom-right {
  bottom: 30px;
  right: 30px;
  transform: translateY(0);
}

.slider-social.vertical-left {
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  flex-direction: column;
}

.slider-social.vertical-right {
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  flex-direction: column;
}

.slider-social a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: var(--color-primary);
  background-color: var(--color-primary);
  transition: 0.5s ease;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.slider-social a::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.slider-social a:hover::before {
  height: 0%;
}

.slider-social a::before {
  background-color: var(--color-white);
  transition: 0.3s ease-out;
}
.slider-social a:hover {
  color: var(--color-white);
  transition: 0.2s 0.1s;
}

/* .hero-slider .slider-social a{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color:var(--color-primary);
  background-color: var(--color-black);
  transition: 0.5s ease;
}

.hero-slider .slider-social a:hover{
  font-size: 18px;
  box-shadow: 0 0 40px var(--color-white);
} */

/* ===================
    Slider Social Icon Style End
=======================*/