.social-icon,
.hot-footer-social {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.social-icon a,
.hot-footer-social a {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-indent: -999px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16) !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}

.header-top .social-icon a {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: rgba(15, 13, 29, .08) !important;
  border-color: rgba(15, 13, 29, .12) !important;
  box-shadow: none !important;
}

.offcanvas__social .social-icon a {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  background: #101a29 !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

.hot-footer-social a {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  background: rgba(255, 255, 255, .1) !important;
}

.social-icon a:hover,
.hot-footer-social a:hover {
  transform: translateY(-2px) !important;
  background: #e20935 !important;
  border-color: #e20935 !important;
  box-shadow: 0 16px 34px rgba(226, 9, 53, .28) !important;
}

.social-icon a::before,
.hot-footer-social a::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  display: block !important;
  background: #fff !important;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.header-top .social-icon a::before {
  background: #101a29 !important;
  inset: 9px !important;
}

.header-top .social-icon a:hover::before {
  background: #fff !important;
}

.social-icon i,
.social-icon i::before,
.hot-footer-social a i,
.hot-footer-social a i::before {
  content: "" !important;
  display: none !important;
}

.social-icon a[aria-label^="Telegram"]::before,
.hot-footer-social a[aria-label^="Telegram"]::before {
  -webkit-mask-image: url("../icons/social-telegram.svg");
  mask-image: url("../icons/social-telegram.svg");
}

.social-icon a[aria-label="WhatsApp"]::before,
.hot-footer-social a[aria-label="WhatsApp"]::before {
  -webkit-mask-image: url("../icons/social-whatsapp.svg");
  mask-image: url("../icons/social-whatsapp.svg");
}

.social-icon a[aria-label="MAX"]::before,
.hot-footer-social a[aria-label="MAX"]::before {
  -webkit-mask-image: url("../icons/social-max.svg");
  mask-image: url("../icons/social-max.svg");
}

.social-icon a[aria-label="Instagram"]::before,
.hot-footer-social a[aria-label="Instagram"]::before {
  -webkit-mask-image: url("../icons/social-instagram.svg");
  mask-image: url("../icons/social-instagram.svg");
}

.social-icon a[aria-label="VK"]::before,
.hot-footer-social a[aria-label="VK"]::before {
  -webkit-mask-image: url("../icons/social-vk.svg");
  mask-image: url("../icons/social-vk.svg");
}

@media (max-width: 767px) {
  .header-top .social-icon {
    justify-content: flex-start !important;
  }

  .hot-footer-social a {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }
}
