toggle menu

<!-- Start: Hemieva Code Section with Accordion -->
<style>
  .accordion-wrapper {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 15px;
  }

  .accordion-section {
    font-family: sans-serif;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .accordion-box {
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 26px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    background-color: #fff;
  }

  .accordion-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
  }

  .accordion-icon.rotate {
    transform: rotate(180deg);
  }

  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    padding: 0 20px;
  }

  .accordion-content.open {
    max-height: 1000px;
    padding-bottom: 20px;
  }

  .hemieva-title {
    font-weight: 600;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 6px;
  }

  .hemieva-description {
    font-size: 14px;
    color: #333;
    margin-bottom: 20px;
    /* text-align: center; */
  }

  .hemieva-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 45px;
  }

  .hemieva-icon-item {
    width: 100px;
    text-align: center;
    flex-shrink: 0;
  }

  .hemieva-icon-item img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
  }

  .hemieva-icon-item p {
    font-size: 13px;
    margin: 0;
    font-weight: 600;
  }

  @media (max-width: 768px) {
    .accordion-header {
      padding: 14px 16px;
      font-size: 15px;
    }

    .hemieva-description {
      font-size: 13px;
      padding: 0 5px;
    }

    .hemieva-icons {
      overflow-x: auto;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 20px;
    }

    .hemieva-icon-item {
      width: 80px;
      flex: 0 0 auto;
    }

    .hemieva-icon-item img {
      width: 60px;
      height: 60px;
    }

    .accordion-content.open {
      padding-bottom: 15px;
    }
  }
</style>

<div class="accordion-wrapper">
  <div class="accordion-section">
    <!-- Hemieva Code Accordion -->
    <div class="accordion-box">
      <div class="accordion-header" onclick="toggleAccordion(this)">
        <span>The Hemieva Code</span>
        <span class="accordion-icon">−</span>
      </div>
      <div class="accordion-content open">
        <div class="hemieva-description">
          Hemieva is “Clean Compatible”. Not just free of harmful and toxic chemicals but uses only those ingredients
          that
          either enhance the health of our hair & skin or support the effectiveness of formulations.
        </div>
        <div class="hemieva-icons">
          <div class="hemieva-icon-item">
            <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/icon1.png" alt="Clinically Tested">
            <p>Clinically Tested</p>
          </div>
          <div class="hemieva-icon-item">
            <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/icon2.png" alt="pH Balanced">
            <p>pH Balanced & Gentle</p>
          </div>
          <div class="hemieva-icon-item">
            <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/icon3.png" alt="No Parabens">
            <p>No Parabens or Sulphates</p>
          </div>
          <div class="hemieva-icon-item">
            <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/icon4.png" alt="Cruelty-Free">
            <p>Cruelty-Free & Vegan</p>
          </div>
          <div class="hemieva-icon-item">
            <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/icon5.png" alt="Dermatologist Approved">
            <p>Dermatologist Approved</p>
          </div>
          <div class="hemieva-icon-item">
            <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/icon6.png" alt="Safe Daily Use">
            <p>Safe for Daily Use</p>
          </div>
          <div class="hemieva-icon-item">
            <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/icon7.png" alt="Pregnancy Free">
            <p>Pregnancy Free</p>
          </div>
          <div class="hemieva-icon-item">
            <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/icon8.png" alt="Made in India">
            <p>Made in India</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Additional Information Accordion -->
    <div class="accordion-box">
      <div class="accordion-header" onclick="toggleAccordion(this)">
        <span>Additional information</span>
        <span class="accordion-icon">+</span>
      </div>
      <div class="accordion-content">
        <p style="font-size:14px; padding-top:10px;">
          <!-- Replace this with actual additional content -->
          Here you can include more product details, usage tips, ingredient insights, or FAQs.
        </p>
      </div>
    </div>
  </div>
</div>

<script>
  function toggleAccordion(header) {
    const content = header.nextElementSibling;
    const icon = header.querySelector('.accordion-icon');
    const isOpen = content.classList.contains('open');

    if (isOpen) {
      content.classList.remove('open');
      icon.classList.remove('rotate');
      icon.textContent = '+';
    } else {
      content.classList.add('open');
      icon.classList.add('rotate');
      icon.textContent = '−';
    }
  }
</script>
<!-- End: Hemieva Code Section with Accordion -->