/* =========================================
   FLOATING SOCIAL SIDEBAR
========================================= */

.social-floating-right {
  position: fixed !important;
  top: 65% !important;
  right: 3px !important;

  transform: translateY(-50%) !important;

  z-index: 999999 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 10px !important;
}

/* MAIN ICON */

.icons {
  position: relative !important;

  width: 40px !important;
  height: 40px !important;

  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-decoration: none !important;

  transition: all 0.3s ease !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;

  overflow: visible !important;
}

/* HOVER */

.icons:hover {
  transform: translateX(-6px) !important;
}

/* TEXT */

.icons span {
  position: absolute !important;

  right: 60px !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  background: #f3ecec !important;

  color: #222 !important;

  padding: 9px 16px !important;

  border-radius: 10px !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  white-space: nowrap !important;

  opacity: 0 !important;
  visibility: hidden !important;

  transition: all 0.3s ease !important;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* SHOW TEXT */

.icons:hover span {
  opacity: 1 !important;
  visibility: visible !important;
}

/* FONT AWESOME ICON */

.icons i {
  color: #ffffff !important;

  font-size: 20px !important;

  line-height: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* COLORS */

.mail-icons {
  background: #ea4335 !important;
}

.whatsapp-icons {
  background: #49e670 !important;
}

.call-icons {
  background: #00d563 !important;
}

.instagram-icons {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7) !important;
}

.facebook-icons {
  background: #1877f2 !important;
}

.youtube-icons {
  background: #ff0000 !important;
}

.pinterest-icons {
  background: #e60023 !important;
}

.location-icons {
  background: #37aa66 !important;
}

/* MOBILE */

@media (max-width: 768px) {
  .social-floating-right {
    right: 10px !important;
  }

  .icons {
    width: 52px !important;
    height: 52px !important;
  }

  .icons i {
    font-size: 24px !important;
  }

  .icons span {
    right: 64px !important;

    padding: 8px 14px !important;

    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .icons {
    width: 48px !important;
    height: 48px !important;
  }

  .icons i {
    font-size: 22px !important;
  }

  .icons span {
    right: 58px !important;

    padding: 7px 12px !important;

    font-size: 12px !important;
  }
}