Text displayed by a span tag followed by font awesome i tag is all displayed in UPPERCASE where as I need them in lowercase. How to fix this?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  width: 100%;
  padding: 0 20px;
  background-color: #cda349;
  position: relative;
  position: sticky;
}

.left-content {
  display: flex;
  align-items: center;
  /* gap: 10px; */
  flex-shrink: 0;
}

.contact-info {
  display: flex;
}

.contact-info span {
  margin-right: 10px;
  font-size: 12px;
  color: maroon;
  padding-left: 5px;
  text-transform: none;
}

.contact-info i {
  color: maroon;
  text-transform: none;
}

div.contact-info span {
  text-transform: none;
}

div.contact-info i {
  text-transform: none;
}

.fa-solid fa-envelope {
  text-transform: none;
}

<!-- Additional style sheet loaded for font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">

<div class="header-container">
  <div class="left-content">
    <div class="contact-info">
      <i class="fa-solid fa-envelope"><a href=""><span>contact@flowershop.ma</span></a></i>
      <i class="fa-solid fa-phone" style="color: maroon;"><span>+212 615 562 100</span></i>
    </div>

    <div class="sm-icons">
      <a href="#"><i class="fa-brands fa-facebook"></i></a>
      <a href="#"><i class="fa-brands fa-instagram"></i></a>
      <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
    </div>
  </div>

  <img src="Logo TP BG.png" alt="" class="logo">

  <nav class="right-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>

  </nav>
</div>