<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"
      rel="stylesheet"
    />

<section>
   <ul class="contacts">
    <li class="contacts__item">
      <a href="https://t.me/divside" class="contacts__link" target="_blank">
        <div class="contacts__img">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2467 16.5121C11.5811 17.1661 10.9213 17.8092 10.2676 18.4574C10.0391 18.6845 9.78213 18.81 9.45413 18.7926C9.23022 18.7805 9.10502 18.6814 9.03627 18.4671C8.53545 16.8991 8.02733 15.335 7.52919 13.7655C7.4808 13.6132 7.40936 13.5392 7.25651 13.4915C6.07665 13.1281 4.89911 12.7562 3.72348 12.3792C3.54258 12.3211 3.36015 12.2451 3.20384 12.1378C2.96226 11.9728 2.92692 11.7035 3.14354 11.5098C3.34364 11.3312 3.58253 11.1754 3.83063 11.0762C5.2728 10.4997 6.72265 9.94178 8.1702 9.37882C11.8438 7.94799 15.5174 6.51832 19.1914 5.08749C19.89 4.81511 20.4269 5.19868 20.3543 5.96079C20.3079 6.44819 20.1826 6.92785 20.0816 7.40905C19.2839 11.2087 18.4855 15.0088 17.6835 18.8077C17.493 19.7096 16.8651 19.9452 16.1292 19.3977C14.8967 18.4814 13.6654 17.562 12.4337 16.6442C12.375 16.6012 12.3139 16.5597 12.2467 16.5121ZM9.48025 17.6659C9.49408 17.662 9.50791 17.6581 9.52173 17.6546C9.52941 17.619 9.54055 17.5841 9.54362 17.5489C9.62274 16.6876 9.70647 15.8267 9.77522 14.9638C9.79058 14.7717 9.85587 14.6353 9.99913 14.5059C11.1352 13.4811 12.2643 12.4497 13.3958 11.4207C14.6483 10.2812 15.9011 9.14287 17.1489 7.99874C17.2261 7.92823 17.2584 7.80812 17.3114 7.71048C17.1938 7.6977 17.0679 7.65004 16.9611 7.67794C16.8155 7.71591 16.6777 7.80115 16.5478 7.88367C13.7837 9.63996 11.0219 11.3993 8.25585 13.1521C8.09953 13.2513 8.07034 13.3354 8.12987 13.5086C8.33381 14.0994 8.51932 14.6957 8.71173 15.2908C8.96791 16.0828 9.22408 16.8743 9.48025 17.6659Z" fill="#5B8CDE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2467 16.5121C11.5811 17.1661 10.9213 17.8092 10.2676 18.4574C10.0391 18.6845 9.78213 18.81 9.45413 18.7926C9.23022 18.7805 9.10502 18.6814 9.03627 18.4671C8.53545 16.8991 8.02733 15.335 7.52919 13.7655C7.4808 13.6132 7.40936 13.5392 7.25651 13.4915C6.07665 13.1281 4.89911 12.7562 3.72348 12.3792C3.54258 12.3211 3.36015 12.2451 3.20384 12.1378C2.96226 11.9728 2.92692 11.7035 3.14354 11.5098C3.34364 11.3312 3.58253 11.1754 3.83063 11.0762C5.2728 10.4997 6.72265 9.94178 8.1702 9.37882C11.8438 7.94799 15.5174 6.51832 19.1914 5.08749C19.89 4.81511 20.4269 5.19868 20.3543 5.96079C20.3079 6.44819 20.1826 6.92785 20.0816 7.40905C19.2839 11.2087 18.4855 15.0088 17.6835 18.8077C17.493 19.7096 16.8651 19.9452 16.1292 19.3977C14.8967 18.4814 13.6654 17.562 12.4337 16.6442C12.375 16.6012 12.3139 16.5597 12.2467 16.5121ZM9.48025 17.6659C9.49408 17.662 9.50791 17.6581 9.52173 17.6546C9.52941 17.619 9.54055 17.5841 9.54362 17.5489C9.62274 16.6876 9.70647 15.8267 9.77522 14.9638C9.79058 14.7717 9.85587 14.6353 9.99913 14.5059C11.1352 13.4811 12.2643 12.4497 13.3958 11.4207C14.6483 10.2812 15.9011 9.14287 17.1489 7.99874C17.2261 7.92823 17.2584 7.80812 17.3114 7.71048C17.1938 7.6977 17.0679 7.65004 16.9611 7.67794C16.8155 7.71591 16.6777 7.80115 16.5478 7.88367C13.7837 9.63996 11.0219 11.3993 8.25585 13.1521C8.09953 13.2513 8.07034 13.3354 8.12987 13.5086C8.33381 14.0994 8.51932 14.6957 8.71173 15.2908C8.96791 16.0828 9.22408 16.8743 9.48025 17.6659Z" fill="#5B8CDE"/>
</svg>
        </div>
        <div class="contacts__text">
          Telegram
        </div>
      </a>
    </li>
    <li class="contacts__item">
      <a href="https://wa.me/79647133553" class="contacts__link" target="_blank">
        <div class="contacts__img">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3039 5.61581C16.6199 3.92985 14.3804 3.00098 11.9944 3C7.07808 3 3.07672 7.00103 3.0748 11.9188C3.07411 13.4909 3.48484 15.0254 4.26541 16.378L3 21L7.72838 19.7597C9.03116 20.4703 10.498 20.8448 11.9908 20.8453H11.9944C11.9941 20.8453 11.9947 20.8453 11.9944 20.8453C16.9102 20.8453 20.9119 16.8439 20.914 11.926C20.9148 9.54265 19.9879 7.30169 18.3039 5.61581ZM11.9944 19.339H11.9914C10.6612 19.3384 9.3564 18.981 8.21814 18.3056L7.94746 18.1449L5.14157 18.8809L5.89054 16.1453L5.71425 15.8647C4.97216 14.6844 4.58023 13.3201 4.58081 11.9194C4.5824 7.83186 7.90818 4.50644 11.9974 4.50644C13.9775 4.50706 15.8389 5.27923 17.2387 6.68053C18.6383 8.08183 19.4087 9.94447 19.4079 11.9254C19.4063 16.0132 16.0806 19.339 11.9944 19.339Z" fill="#141C25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3039 5.61581C16.6199 3.92985 14.3804 3.00098 11.9944 3C7.07808 3 3.07672 7.00103 3.0748 11.9188C3.07411 13.4909 3.48484 15.0254 4.26541 16.378L3 21L7.72838 19.7597C9.03116 20.4703 10.498 20.8448 11.9908 20.8453H11.9944C11.9941 20.8453 11.9947 20.8453 11.9944 20.8453C16.9102 20.8453 20.9119 16.8439 20.914 11.926C20.9148 9.54265 19.9879 7.30169 18.3039 5.61581ZM11.9944 19.339H11.9914C10.6612 19.3384 9.3564 18.981 8.21814 18.3056L7.94746 18.1449L5.14157 18.8809L5.89054 16.1453L5.71425 15.8647C4.97216 14.6844 4.58023 13.3201 4.58081 11.9194C4.5824 7.83186 7.90818 4.50644 11.9974 4.50644C13.9775 4.50706 15.8389 5.27923 17.2387 6.68053C18.6383 8.08183 19.4087 9.94447 19.4079 11.9254C19.4063 16.0132 16.0806 19.339 11.9944 19.339Z" fill="#14BA56"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0609 13.7866C15.838 13.675 14.7423 13.136 14.538 13.0615C14.3337 12.9872 14.1851 12.95 14.0366 13.1731C13.888 13.3961 13.4609 13.8982 13.3309 14.047C13.2009 14.1956 13.0709 14.2143 12.848 14.1027C12.6252 13.9911 11.9071 13.7558 11.0558 12.9965C10.3932 12.4055 9.94599 11.6758 9.81593 11.4526C9.68595 11.2295 9.8021 11.1089 9.91369 10.9978C10.0139 10.8979 10.1366 10.7375 10.248 10.6073C10.3594 10.4772 10.3966 10.3842 10.4709 10.2355C10.5452 10.0868 10.5081 9.9566 10.4523 9.84508C10.3966 9.73353 9.95087 8.63655 9.76517 8.19023C9.58421 7.75572 9.4005 7.81459 9.26368 7.80767C9.13388 7.80119 8.9851 7.79985 8.83655 7.79985C8.68799 7.79985 8.4465 7.85565 8.24226 8.07871C8.03798 8.30186 7.46219 8.84108 7.46219 9.93795C7.46219 11.035 8.26079 12.0947 8.37224 12.2434C8.48364 12.3922 9.94378 14.6433 12.1795 15.6086C12.7112 15.8383 13.1263 15.9754 13.45 16.0781C13.9839 16.2478 14.4697 16.2238 14.8537 16.1664C15.2819 16.1024 16.1723 15.6273 16.358 15.1068C16.5438 14.5861 16.5438 14.1398 16.488 14.0469C16.4323 13.954 16.2837 13.8982 16.0609 13.7866Z" fill="#141C25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0609 13.7866C15.838 13.675 14.7423 13.136 14.538 13.0615C14.3337 12.9872 14.1851 12.95 14.0366 13.1731C13.888 13.3961 13.4609 13.8982 13.3309 14.047C13.2009 14.1956 13.0709 14.2143 12.848 14.1027C12.6252 13.9911 11.9071 13.7558 11.0558 12.9965C10.3932 12.4055 9.94599 11.6758 9.81593 11.4526C9.68595 11.2295 9.8021 11.1089 9.91369 10.9978C10.0139 10.8979 10.1366 10.7375 10.248 10.6073C10.3594 10.4772 10.3966 10.3842 10.4709 10.2355C10.5452 10.0868 10.5081 9.9566 10.4523 9.84508C10.3966 9.73353 9.95087 8.63655 9.76517 8.19023C9.58421 7.75572 9.4005 7.81459 9.26368 7.80767C9.13388 7.80119 8.9851 7.79985 8.83655 7.79985C8.68799 7.79985 8.4465 7.85565 8.24226 8.07871C8.03798 8.30186 7.46219 8.84108 7.46219 9.93795C7.46219 11.035 8.26079 12.0947 8.37224 12.2434C8.48364 12.3922 9.94378 14.6433 12.1795 15.6086C12.7112 15.8383 13.1263 15.9754 13.45 16.0781C13.9839 16.2478 14.4697 16.2238 14.8537 16.1664C15.2819 16.1024 16.1723 15.6273 16.358 15.1068C16.5438 14.5861 16.5438 14.1398 16.488 14.0469C16.4323 13.954 16.2837 13.8982 16.0609 13.7866Z" fill="#14BA56"/>
</svg>
        </div>
        <div class="contacts__text">
          WhatsApp
        </div>
      </a>
    </li>
    <li class="contacts__item" onclick="AlertCopy()">
      <div class="contacts__link">
        <div class="contacts__img">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12V13.45C22 14.4333 21.6625 15.2708 20.9875 15.9625C20.3125 16.6542 19.4833 17 18.5 17C17.9167 17 17.3667 16.875 16.85 16.625C16.3333 16.375 15.9 16.0167 15.55 15.55C15.0667 16.0333 14.5208 16.3958 13.9125 16.6375C13.3042 16.8792 12.6667 17 12 17C10.6167 17 9.4375 16.5125 8.4625 15.5375C7.4875 14.5625 7 13.3833 7 12C7 10.6167 7.4875 9.4375 8.4625 8.4625C9.4375 7.4875 10.6167 7 12 7C13.3833 7 14.5625 7.4875 15.5375 8.4625C16.5125 9.4375 17 10.6167 17 12V13.45C17 13.8833 17.1417 14.25 17.425 14.55C17.7083 14.85 18.0667 15 18.5 15C18.9333 15 19.2917 14.85 19.575 14.55C19.8583 14.25 20 13.8833 20 13.45V12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20H17V22H12ZM12 15C12.8333 15 13.5417 14.7083 14.125 14.125C14.7083 13.5417 15 12.8333 15 12C15 11.1667 14.7083 10.4583 14.125 9.875C13.5417 9.29167 12.8333 9 12 9C11.1667 9 10.4583 9.29167 9.875 9.875C9.29167 10.4583 9 11.1667 9 12C9 12.8333 9.29167 13.5417 9.875 14.125C10.4583 14.7083 11.1667 15 12 15Z" fill=""/>
</svg>

        </div>
        <div class="contacts__text">
          info@divside.ru
        </div>
        <div style="display: none;" id="mailcopy">info@divside.ru</div>
      </div>
    </li>
  </ul>
  
</section>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-appearance: none;
  outline: none;

  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  color: inherit;

/*   transition: 0.2s; */
}

section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #171717;
  overflow: hidden;
}

.logo {
  width: 200px;
  z-index: 9999;
}



.contacts {
  display: flex;
  min-width: 100%;
  min-height: 100%;
  padding: 16px;
  z-index: 1;
  gap: 16px;
}

.contacts__item {
  display: flex;
  width: calc(100% / 3 - 10px);
  cursor: pointer;
}

.contacts__link {
  display: flex;
  min-width: 100%;
  min-height: 100%;
  border-radius: 8px;
  padding: 16px;
  background-color: rgba(255,255,255, 0.05);
  border: 1px solid rgba(255,255,255, 0.5);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
}

.contacts__link:hover {
  background-color: rgba(255,255,255, 0.09);
 border: 1px solid rgba(255,255,255, 1);
}

.contacts__link:hover .contacts__img {
  transform: scale(1.1);
}

.contacts__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.contacts__img svg {
  width: 100% !important;
  height: 100% !important;
  fill: #EF720C;
}

@media (max-width: 768px) {
  .contacts {
    height: 100%;
   flex-direction: column;
  }
  
  .contacts__item {
    width: 100%;
    height: calc(100% / 3 - 10px);
  }  
  
  .contacts__link {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 8px;
  }
  
  .contacts__img {
    width: 24px;
    height: 24px;
  }
}

function AlertCopy() {
  str = document.getElementById('mailcopy').innerHTML;
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  alert('Email info@divside.ru был скопирован в буфер обмена');
};