<div class="icon-container">
  <!-- Map Icon -->
  <a href="https://maps.app.goo.gl/xcj8mdKiZSV1MeQG6" target="_blank" class="icon-item">
    <span class="icon"><i class="fas fa-map-marker-alt"></i></span>
    <span class="info">location</span>
  </a>

  <!-- Building Icon (Hotel) -->
  <a href="tel:+96311" class="icon-item">
    <span class="icon"><i class="fas fa-building"></i></span>
    <span class="info">num</span>
  </a>

  <!-- Phone and WhatsApp Icons -->
  <div class="icon-item phone-whatsapp">
    <a href="tel:+num" class="icon">
      <i class="fas fa-phone"></i>
    </a>
    <a href="https://wa.me/num" target="_blank" class="icon whatsapp-icon">
      <i class="fab fa-whatsapp"></i>
    </a>
    <span class="info">num</span>
  </div>

  <!-- Email -->
  <a href="mailto:[email protected]" class="icon-item">
    <span class="icon"><i class="fas fa-envelope"></i></span>
    <span class="info">mail</span>
  </a>
</div>

<style>
  /* Import Font Awesome */
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

  /* Container for all icons */
  .icon-container {
    display: flex;
    align-items: center;
    gap: 15px; /* 15px gap between icons */
    font-family: Arial, sans-serif;
  }

  /* Each icon item */
  .icon-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #443922;
    overflow: hidden;
    position: relative;
    text-decoration: none; /* Remove underline from links */
    transition: all 0.3s ease; /* Smooth hover effect */
  }

  /* Icon styling */
  .icon {
    font-size: 24px;
    color: #443922;
    transition: transform 0.3s ease, color 0.3s ease; /* Add color transition */
  }

  /* Info text styling */
  .info {
    white-space: nowrap;
    opacity: 0;
    width: 0; /* Hide text by default */
    margin-left: 0; /* No margin by default */
    transition: opacity 0.3s ease, width 0.3s ease, margin-left 0.3s ease, color 0.3s ease; /* Add color transition */
    color: #443922;
  }

  /* Hover effect for all icons and text */
  .icon-item:hover .icon,
  .icon-item:hover .info {
    color: #d4af37; /* Change icon and text color on hover (gold) */
  }

  .icon-item:hover .icon {
    transform: translateX(5px); /* Slight icon movement */
  }

  .icon-item:hover .info {
    opacity: 1;
    width: auto; /* Show text */
    margin-left: 10px; /* Add space between icon and text */
  }

  /* Phone and WhatsApp container */
  .phone-whatsapp {
    display: flex;
    align-items: center;
    position: relative;
  }

  /* WhatsApp icon (hidden by default) */
  .whatsapp-icon {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-left: 0; /* No margin by default */
  }

  /* Show WhatsApp icon on hover */
  .phone-whatsapp:hover .whatsapp-icon {
    opacity: 1;
    transform: translateX(0);
    margin-left: 10px; /* Add space between phone and WhatsApp icons */
  }
</style>