<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="mystyle.css">
<section class="container">
  <div class="row my-3">
    <div class="col-md-4 mt-5">
      <div class="sticky-top">
        <div class="w-100  ">
          <div class="tab-content" id="nav-imageContent">
            <img class="p-2 w-100 tab-pane fade" src="https://www.clker.com/cliparts/1/9/e/4/13140637591549686593blue%20square-hi.png" id="nav-f01img" role="tabpanel" aria-labelledby="nav-f01img-tab">
            <img class="p-2 w-100 tab-pane fade show active" src="https://www.clker.com/cliparts/l/c/A/L/R/d/blue-square-smily-hi.png" id="nav-f02img" role="tabpanel" aria-labelledby="nav-f02img-tab">
            <img class="p-2 w-100 tab-pane fade" src="https://www.clker.com/cliparts/l/c/A/L/R/d/blue-square-smily-hi.png" id="nav-f03img" role="tabpanel" aria-labelledby="nav-f03img-tab">
          </div>
          <div style="height:100px;flex-wrap:nowrap; overflow-x:scroll; overflow-y:hidden" class=" d-flex nav nav-tabs" id="nav-image" role="tablist">
            <img href="#nav-f01img" data-toggle="tab" id="nav-fa01img-tab" role="tab" aria-controls="nav-f01img" aria-selected="true" class="p-2 h-100" src="https://www.clker.com/cliparts/1/9/e/4/13140637591549686593blue%20square-hi.png">
            <img href="#nav-f02img" data-toggle="tab" id="nav-fa02img-tab" role="tab" aria-controls="nav-f02img" aria-selected="false" class="p-2 h-100" src="https://www.clker.com/cliparts/l/c/A/L/R/d/blue-square-smily-hi.png" />
            <img href="#nav-f03img" data-toggle="tab" id="nav-fa02img-tab" role="tab" aria-controls="nav-f03img" aria-selected="false" class="p-2 h-100" src="https://www.clker.com/cliparts/l/c/A/L/R/d/blue-square-smily-hi.png" />

          </div>
          <div>
            <button data-toggle="modal" data-target="#ordernow" type="button" class="btn btn-block mt-4 bg-warning">
              Buy Now
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-8 text-justify">
      <h1 class="text-center my-4">Product Name</h1>
      <nav>
        <div class="nav nav-tabs border-warning nav-pills nav-fill" id="nav-tab" role="tablist">
          <a class="nav-link active" id="nav-power-tab" data-toggle="tab" href="#nav-powder" role="tab" aria-controls="nav-powder" aria-selected="true">Powder</a>
          <a class="nav-link" id="nav-capsule-tab" data-toggle="tab" href="#nav-capsule" role="tab" aria-controls="nav-capsule" aria-selected="false">Capsule</a>
        </div>
      </nav>
      <div class="tab-content mt-2 px-3" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-powder" role="tabpanel" aria-labelledby="nav-home-tab">
          <div class="form-check custom-control custom-radio mt-2">
            <input type="radio" class="custom-control-input" name="exampleRadios" id="exampleRadios1" value="d">
            <label class="form-check-label custom-control-label" for="exampleRadios1">
              <strong> For ₹999 </strong> only plan first Powder
            </label>
          </div>
          <div class="form-check custom-control custom-radio mt-2">
            <input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios2" value="d">
            <label class="form-check-label custom-control-label" for="exampleRadios2">
              <strong> For ₹999 </strong> only plan first Powder
            </label>
          </div>
          <div class="form-check custom-control custom-radio mt-2">
            <input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios3" value="d">
            <label class="form-check-label custom-control-label" for="exampleRadios3">
              <strong> For ₹999 </strong> only plan first Powder
            </label>
          </div>
        </div>
        <div class="tab-pane fade" id="nav-capsule" role="tabpanel" aria-labelledby="nav-profile-tab">
          <div class="form-check custom-control custom-radio mt-2">
            <input type="radio" class="custom-control-input" name="exampleRadios1" id="exampleRadios11" value="d">
            <label class="form-check-label custom-control-label" for="exampleRadios11">
              <strong> For ₹999 </strong> only plan first
            </label>
          </div>
          <div class="form-check custom-control custom-radio mt-2">
            <input class="custom-control-input" type="radio" name="exampleRadios1" id="exampleRadios12" value="d">
            <label class="form-check-label custom-control-label" for="exampleRadios12">
              <strong> For ₹999 </strong> only plan first
            </label>
          </div>
          <div class="form-check custom-control custom-radio mt-2">
            <input class="custom-control-input" type="radio" name="exampleRadios1" id="exampleRadios13" value="d">
            <label class="form-check-label custom-control-label" for="exampleRadios13">
              <strong> For ₹999 </strong> only plan first Capsule
            </label>
          </div>
        </div>
      </div>
      <div class="p-4">
        <h3 class="mt-3" class="mt-2">
          Heighlight
        </h3>
        <div>How to gain weight fast for men &amp; girls?

          Suraj Herbals manufacture HealthOsur weight gain capsule which increase appetite enhancer / stimulant with natural herbs to gain weight fast for men &amp; girls.

          This weight gainer supplements is 100% safe &amp; effective, without any side effects. Try Weight Gainer pills now to gain weight easily.</div>
      </div>
      <div sytle="overflow-x:scroll; overflow-y:hidden;">
        <div style="flex-wrap:nowrap; overflow-x:scroll; overflow-y:hidden;  -ms-overflow-style: none; scrollbar-width: none;" class=" d-flex nav nav-tabs mt-5" id="nav-dbda" role="tablist">
          <a class="nav-link active" id="nav-power-tab " style="flex-shrink: 0!important;" data-toggle="tab" href="#nav-description" role="tab" aria-controls="nav-description" aria-selected="true">
            <div class="">Description</div>
          </a>
          <a class="nav-link" id="nav-capsule-tab " style="flex-shrink: 0!important;" data-toggle="tab" href="#nav-benefituse" role="tab" aria-controls="nav-benefituse" aria-selected="false">
            <div> BENEFITS & USES </div>
          </a>
          <a class="nav-link" id="nav-capsule-tab  " style="flex-shrink: 0!important;" data-toggle="tab" href="#nav-dosage" role="tab" aria-controls="nav-dosage" aria-selected="false">
            <div> Dosage </div>
          </a>
          <a class="nav-link" id="nav-capsule-tab  " style="flex-shrink: 0!important;" data-toggle="tab" href="#nav-adverteffect" role="tab" aria-controls="nav-adverteffect" aria-selected="false">
            <div> Advert Effect </div>
          </a>
        </div>
      </div>
      <div style="min-height:200px;" class="tab-content mt-2" id="nav-dbdaContent">
        <div class="tab-pane fade show active" id="nav-description" role="tabpanel" aria-labelledby="nav-description-tab">
          <div class="w-full text-base font-normal">Being underweight is like a infection for many individual’s. Have you ever been criticized for being underweight? Due to a thin frame, many individual’s faces a lot inappropriate comments. Have you
            become a laughing material among your friends, family and society? It bothers and kills you?

            This is a modern world! Here, looks and physical appearance are taken very seriously. It has become an important criteria to judge your personality when you go out. No matter how good you are, what work you do and what potential you carry -
            looks matter! Often, underweight and thin people are referred to as incompetent, weak and incapable in the society. Oppositions and disagreements are often faced by such people in ranging from their schools to their workplaces.

            It is often seen that a thin / underweight individual tries everything to gain weight and their knowledge in order to do so. Various trials of steroids, supplements and medicines are given a chance. It is noticed that most of these
            individuals do not even care about the adverse results of trying these medications.</div>
        </div>
        <div class="tab-pane fade show " id="nav-benefituse" role="tabpanel" aria-labelledby="nav-benefituse-tab">
          <div class="w-full text-base font-normal">
            <ul class="list-disc">
              <li class="">Proven as the best appetite stimulator.</li>
              <li class="">Improves the digestion of the body.</li>
              <li class="">Enhances the immunity power.</li>
              <li class="">Absorbs nutrients in the food.</li>
              <li class="">Fights weakness.</li>
              <li class="">A medicine with no side effects.</li>
              <li class="">100% natural and herbal.</li>
              <li class="">A natural cure to gain weight permanently.</li>
              <li class="">Helps in gaining around 3 to 4 kgs weight in a month.</li>
              <li class="">Equally effective both for men and women.</li>
            </ul>
          </div>
        </div>
        <div class="tab-pane fade show " id="nav-dosage" role="tabpanel" aria-labelledby="nav-dosage-tab">
          <div class="w-full text-base font-normal">1 capsule twice daily, 30 minutes after breakfast and dinner, with water.</div>
        </div>
        <div class="tab-pane fade show " id="nav-adverteffect" role="tabpanel" aria-labelledby="nav-adverteffect-tab">
          <div class="w-full text-base font-normal">
            Not found in a clinical trial. May safely be continued for a longer period. Our Herbal medicines are 100 % safe as they do not contain any chemicals, steroids.
          </div>
        </div>
      </div>
      <a data-toggle="modal" data-target="#enquiry" class="btn btn-block mt-4 mb-2 bg-warning">
        Inquiry Now
      </a>
      <div class="border border-warning mt-5">
        <div class="m-2">
          <h4 class="font-weight-bold  text-center">
            Add Your Review
          </h4>
          <div class="starrating risingstar d-flex flex-row-reverse justify-content-center">
            <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="5 star"></label>
            <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="4 star"></label>
            <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="3 star"></label>
            <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="2 star"></label>
            <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="1 star"></label>
          </div>
          <div class="d-flex flex-wrap">
            <input class="form-control my-2" type="text" Placeholder="Full Name">
            <textarea class="form-control my-2" Placeholder="Description"></textarea>
          </div>
          <div class="d-flex flex-wrap justify-content-around justify-content-center my-auto pt-5">
            <div class="card bg-light mb-3" style="width:clamp(20rem, 22rem, 100%);">
              <div class="card-header">Mr. Dev</div>
              <div class="card-body">
                <h5 class="card-title">5 Star</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
            <div class="card bg-light mb-3" style="width:clamp(20rem, 22rem, 100%);">
              <div class="card-header">Mr. Dev</div>
              <div class="card-body">
                <h5 class="card-title">5 Star</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
            <div class="card bg-light mb-3" style="width:clamp(20rem, 22rem, 100%);">
              <div class="card-header">Mr. Dev</div>
              <div class="card-body">
                <h5 class="card-title">5 Star</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
            <div class="card bg-light mb-3" style="width:clamp(20rem, 22rem, 100%);">
              <div class="card-header">Mr. Dev</div>
              <div class="card-body">
                <h5 class="card-title">5 Star</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
            <div class="card bg-light mb-3" style="width:clamp(20rem, 22rem, 100%);">
              <div class="card-header">Mr. Dev</div>
              <div class="card-body">
                <h5 class="card-title">5 Star</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>
<div class="modal fade" id="enquiry" tabindex="-1" role="dialog" aria-labelledby="enquiryLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <h5 class="modal-title" id="enquiryLabel">Raise Inquiry</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group row">
              <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
              <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3">
              </div>
            </div>
            <div class="form-group row">
              <label for="phone" class="col-sm-2 col-form-label">Phone</label>
              <div class="col-sm-10">
                <input type="type" class="form-control" id="inputPhone3" pattern="[0-9]{10}">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" type="button" class="btn btn-primary bg-warning">Submit Inquiry</button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade bd-example-modal-lg" id="ordernow" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog  modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myLargeModalLabel">Order Now</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body ">
        <div class="row">
          <div class="col-sm m-3">
            <div>
              <div class="form-group row">
                <label for="inputName3" class="col-sm-2 col-form-label">Name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputName3" placeholder="Name">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputPhone3" class="col-sm-2 col-form-label">Phone No</label>
                <div class="col-sm-10">
                  <input type="tel" class="form-control" id="inputPhone3" placeholder="Phone No.">
                </div>
              </div>
            </div>
            <div class="">
              <h5>
                Address
              </h5>
              <div class="btn-group btn-group-toggle d-flex flex-column text-white bold" data-toggle="buttons">
                <div class="btn  active my-2 border">
                  <input type="radio" name="addrress" id="hatchback" autocomplete="off" checked> Address 1 Example to long address where it can be big as possible so ther is no issue of spacing , 111001 India
                </div>
                <label class="btn my-2 border">
                  <input type="radio" name="addrress" id="sedan" autocomplete="off"> Address 1 Example to long address where it can be big as possible so ther is no issue of spacing , 111001 India
                </label>
                <label class="btn  my-2 border">
                  <input type="radio" name="addrress" id="suv" autocomplete="off"> Address 1 Example to long address where it can be big as possible so ther is no issue of spacing , 111001 India
                </label>
              </div>
              <div class="flex flex-column w-100">
                <h4 class="btn border text-center mx-auto w-100">
                  +
                </h4>
              </div>
            </div>
          </div>
          <div class="col-sm h-100 align-items-stretch m-3">
            <p>
              Payment
            </p>
            <div class="btn-group btn-group-toggle d-flex flex-column text-white bold" data-toggle="buttons">
              <label class="btn  active my-2 border">
                <input type="radio" name="pay" id="hatchback" autocomplete="off" value="0"> Prepaid
              </label>
              <label class="btn my-2 border ">
                <input type="radio" name="pay" id="sedan" autocomplete="off" value="1"> Cash on Delivery
              </label>
            </div>
            <div class="btn-group btn-group-toggle d-flex flex-column text-white bold" data-toggle="buttons">
              <div class="prepaid d-none">
                <label class="btn my-2 border mr-2">
                  <input type="radio" name="prepay" id="netbank" class="invisible" autocomplete="off" value="0" checked> Netbanking
                </label>
                <label class="btn   my-2 border mr-2">
                  <input type="radio" name="prepay" id="upibank" class="invisible" autocomplete="off" value="1"> UPI
                </label>
                <label class="btn   my-2 border mr-2">
                  <input type="radio" name="prepay" id="wallet" class="invisible" autocomplete="off" value="2"> Wallet
                </label>
                <label class="btn   my-2 border mr-2">
                  <input type="radio" name="prepay" id="card" class="invisible" autocomplete="off" value="3"> Card
                </label>
              </div>
            </div>
            <div class="btn-group w-100 mt-5 ">
              <button type="button" class="card-title btn active border display-4 w-100 font-weight-bold text-white">
                Order Now
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>