Ingredients and Benefits

<style>
  #shopify-section-product_ingredients {
    position: relative;
  }

  .shopify-section--bordered+.shopify-section--bordered {
    border-top: none;
  }

  /* #shopify-section-product_ingredients:before {
    background-image: url(https://cdn.shopify.com/s/files/1/0922/0430/2651/files/shape_3_1.webp?v=1744345146);
    right: 0;
    position: absolute;
    content: "";
    width: 570px;
    height: 1100px;
    top: -100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    z-index: -1;
  } */

  .shopify-section--bordered>.Section--spacingNormal {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  #shopify-section-product_ingredients .Container {
    position: relative;
  }

  .Container {
    max-width: 1370px;
    margin: auto;
    padding: 0 15px;
  }

  .SectionHeader:not(:only-child) {
    margin-bottom: 40px !important;
  }

  .SectionHeader--center {
    text-align: center;
  }

  #shopify-section-product_ingredients .FeaturedProduct {
    display: flex;
    justify-content: space-between;
  }

  .FeaturedProduct {
    max-width: 100%;
  }

  #shopify-section-product_ingredients .FeaturedProduct__Gallery {
    margin: 0;
    width: calc(50% - 20px);
    border-radius: 12px;
    background: #f8f8f8;
    padding: 35px 30px;
    flex: none;
    position: relative;
    border: 0px;
  }

  .single-product-ingredient .FeaturedProduct__Gallery {
    padding-bottom: 0 !important;
  }

  .FeaturedProduct__Gallery {
    display: block;
  }

  h2.SectionHeader__Heading.Heading.u-h1,
  h2 {
    letter-spacing: 0;
  }

  .SectionHeader__Heading.SectionHeader__Heading {
    margin-top: 0;
  }

  .FeaturedProduct__Gallery h2,
  .FeaturedProduct__Info h2 {
    font-size: 32px !important;
    font-weight: 400 !important;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }

  h2.SectionHeader__Heading {
    color: #101828 !important;
    font-family: "Inria Serif", serif !important;
    line-height: 1.2 !important;
  }

  #shopify-section-product_ingredients .FeaturedProduct__Gallery .acordian-otr {
    width: calc(100% + 60px);
    left: -30px;
    position: relative;
    border-radius: 12px;
  }

  .acordian-otr {
    border-bottom: 1px solid #a4a4a4;
  }

  .ingrdit-otr .panel {
    overflow: hidden;
    transition: max-height .2s ease-out;
    padding: 0;
    border: none;
  }

  .product_ingrdeinets_new_for_kit {
    padding: 0 30px;
  }

  .product_ingrdeinets_new {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
  }

  .product_ingrdeinets_new>div {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
    width: 50%;
  }

  .product_ingrdeinet_item img {
    border-radius: 16px;
  }

  img {
    max-width: 100%;
    height: auto;
    border-style: none;
    vertical-align: top;
  }

  .product_ingrdeinets_new .ing_title {
    font-size: 16px;
    margin-top: 7px;
  }

  .ing_title {
    text-align: center;
    font-weight: 400;
    color: #000;
  }

  .product_ingrdeinet_item p {
    text-align: center;
    letter-spacing: 0px;
  }

  p {
    font-weight: 300;
    color: #000;
  }

  #shopify-section-product_ingredients .FeaturedProduct__Gallery .acordian-otr .ingrdient-link {
    width: 100%;
  }

  #shopify-section-product_ingredients .FeaturedProduct__Gallery .ingrdient-link {
    margin: 20px 0 0;
  }

  .ingrdient-link {
    display: inline-block;
    position: inherit !important;
    text-decoration: underline;
    border-radius: 0 0 12px 12px;
    background: #fff9ee;
    padding: 15px;
    color: #8d1c1c;
    font-size: 14px;
  }

  .ingrdient-link:hover {
    display: inline-block;
    position: inherit !important;
    text-decoration: underline;
    border-radius: 0 0 12px 12px;
    background: #fff9ee;
    padding: 15px;
    color: #8d1c1c;
    font-size: 14px;
  }

  button {
    transition: all .2s ease;
  }

  #shopify-section-product_ingredients .FeaturedProduct__Info {
    margin: 0;
    width: calc(50% - 20px);
    border-radius: 12px;
    background: #f8f8f8;
    padding: 35px 30px;
    flex: none;
    position: relative;
    border: 0px;
  }

  .FeaturedProduct__Info h2 {
    font-size: 32px !important;
    font-weight: 400 !important;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    text-align: center;
  }

  .ingrdit-otr .FeaturedProduct__Info .meta-ingredients {
    padding: 10px 0;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
  }

  .meta-ingredients li {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 30px;
    display: inline-block;
    padding-left: 50px;
    width: 100%;
    color: #000;
    position: relative;
    text-align: left;
  }

  .meta-ingredients li:before {
    background-image: url(https://cdn.shopify.com/s/files/1/0922/0430/2651/files/checked_1.png?v=1744347970);
    background-repeat: no-repeat;
    width: 21px;
    height: 21px;
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    background-size: contain;
  }

  h2.SectionHeader__Heading.Heading.u-h1 {
    text-transform: capitalize;
  }

  button.viewpopTest.ingrdient-link {
    text-transform: capitalize;
  }

  @media screen and (min-width: 1008px) {
    .Section--spacingNormal {
      margin: 80px 0;
    }
  }

  @media screen and (max-width: 991px) {
    .SectionHeader:not(:only-child) {
      margin-bottom: 25px !important;
    }

    #shopify-section-product_ingredients .FeaturedProduct {
      display: block;
    }

    #shopify-section-product_ingredients .FeaturedProduct__Gallery {
      margin-bottom: 15px;
      width: 100%;
    }

    #shopify-section-product_ingredients .FeaturedProduct__Gallery h2 {
      font-size: 22px !important;
      line-height: 36px !important;
    }

    #shopify-section-product_ingredients .FeaturedProduct__Info {
      width: 100%;
    }

    #shopify-section-product_ingredients .FeaturedProduct__Info h2 {
      font-size: 22px !important;
      line-height: 36px !important;
    }
  }

  @media (min-width: 768px) {
    .shopify-section--bordered {
      margin-bottom: 70px;
      margin-top: 70px;
    }

    .ing_title {
      line-height: 19px;
    }

    p {
      font-size: 14px;
      line-height: 19px;
    }
  }

  @media (max-width: 767px) {
    #shopify-section-product_ingredients:before {
      width: 250px;
      height: 550px;
      top: inherit;
      bottom: -20%;
    }

    #shopify-section-product_ingredients .FeaturedProduct__Gallery {
      padding: 20px 15px;
      position: relative;
      border-radius: 6px;
      text-align: center;
      overflow: hidden;
    }

    .product_ingrdeinets_new_for_kit {
      padding: 0 15px;
    }

    .product_ingrdeinets_new {
      margin-left: -5px;
      margin-right: -5px;
    }

    .product_ingrdeinets_new>div {
      padding-left: 5px;
      padding-right: 5px;
      margin-bottom: 15px;
      width: 50%;
    }

    .product_ingrdeinets_new .ing_title {
      font-size: 14px;
      margin-top: 5px;
    }

    p {
      font-size: 12px;
      line-height: 16px;
    }

    #shopify-section-product_ingredients .FeaturedProduct__Gallery .ingrdient-link {
      margin: 20px 0 0;
    }

    .ingrdient-link {
      font-size: 12px;
    }

    .ingrdit-otr .meta-ingredients li {
      font-size: 12px;
    }

    .meta-ingredients li {
      padding-left: 30px;
    }

    .meta-ingredients li:before {
      top: 5px;
      width: 15px;
      height: 15px;
    }
  }

  @media screen and (min-width: 641px) {
    .FeaturedProduct {
      align-items: flex-start;
      margin: 0 auto;
    }
  }

  @media screen and (max-width: 640px) {
    #shopify-section-product-template+.shopify-section--bordered {
      border-top: 0;
    }

    #shopify-section-product-template+.shopify-section--bordered>.Section {
      padding-top: 0;
    }
  }
</style>

<div id="shopify-section-product_ingredients" class="shopify-section shopify-section--bordered">
  <section class="Section Section--spacingNormal">
    <div class="Container">
      <header class="SectionHeader SectionHeader--center darkheader"></header>
      <div class="FeaturedProduct single-product-ingredient ingrdit-otr">
        <div class="FeaturedProduct__Gallery">
          <h2 class="SectionHeader__Heading Heading u-h1" style="text-align:center">Homegrown Ingredients</h2>
          <div class="main product_ingrdeinets">

            <div class="acordian-otr">
              <!-- Accordion button -->

              <!-- Panel that shows/hides on accordion toggle -->
              <div class="panel show" style="display:block">
                <div class="meta-ingredients">
                  <div class="product_ingrdeinets_new_for_kit">
                    <div class="product_ingrdeinets_new">

                      <!-- Loop through ingredients inside each box -->

                      <div class="product_ingrdeinet_item">
                        <img
                          src="https://cdn.shopify.com/s/files/1/0284/5599/3449/files/Black_sesame_seeds.webp?v=1724433621"
                          alt="Black Sesame Seeds">
                        <div class="ing_title">Black Sesame Seeds</div>
                        <p>Nourishes and strengthens roots</p>
                      </div>

                      <div class="product_ingrdeinet_item">
                        <img src="https://cdn.shopify.com/s/files/1/0284/5599/3449/files/bringraj.webp?v=1724433621"
                          alt="Bhringraj">
                        <div class="ing_title">Bhringraj</div>
                        <p>Enhances scalp circulation</p>
                      </div>

                      <div class="product_ingrdeinet_item">
                        <img
                          src="https://cdn.shopify.com/s/files/1/0284/5599/3449/files/Hibiscus_Medium_1.webp?v=1728387404"
                          alt="Hibiscus">
                        <div class="ing_title">Hibiscus</div>
                        <p>Boosts growth, prevents greying</p>
                      </div>

                      <div class="product_ingrdeinet_item">
                        <img
                          src="https://cdn.shopify.com/s/files/1/0284/5599/3449/files/Amla_Medium_38a36545-d323-4471-a25b-c57ca889593b.webp?v=1724433621"
                          alt="Amla">
                        <div class="ing_title">Amla</div>
                        <p>Promotes healthy scalp</p>
                      </div>


                    </div>
                  </div>

                  <!-- Full ingredient list button and content --><button data-fancybox="" data-src="#fullingredient1"
                    href="javascript:;" class="viewpopTest ingrdient-link">Full Ingredient List</button>
                  <div id="fullingredient1" style="display: none;" class="">
                    Sesame Oil, Bhringraj, Dried Hibiscus, Tunga Musta, Kachuralu, Bavanchalu, Fenugreek, Vetiver,
                    Indian Gooseberries & Nothing Else…
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="FeaturedProduct__Info ">
          <h2 class="SectionHeader__Heading Heading u-h1">Benefits</h2>
          <div class="meta-ingredients">
            <ul>
              <li>Nourishes chemically treated hair</li>
              <li>Deeply conditions hair</li>
              <li>Prevents hair loss</li>
              <li>Boosts volume and improves hair texture</li>
              <li>Coats hair with an even layer of protein</li>
              <li>Naturally restores hair colour</li>
              <li>Prevents hair breakage</li>
              <li>Eliminates flaking</li>
            </ul>
          </div>

        </div>
      </div>

      <div id="fullingredient" style="display:none;">
        Sesame Oil, Bhringraj, Dried Hibiscus, Tunga Musta, Kachuralu, Bavanchalu, Fenugreek, Vetiver, Indian
        Gooseberries & Nothing Else…
      </div>
    </div>
  </section>

  <section class="Section Section--spacingNormal">
    <div class="Container">
      <header class="SectionHeader SectionHeader--center darkheader"></header>

    </div>
  </section>
  <script>
    //appends an "active" class to .popup and .popup-content when the "Open" button is clicked

  </script>
</div>