document.addEventListener('DOMContentLoaded', function() {
  const cardWrapper = document.querySelector('.card-wrapper');
  const btnScrollUp = document.getElementById('btn-scroll-up');
  const btnScrollDown = document.getElementById('btn-scroll-down');

  let scrollAmount = window.innerWidth < 768 ? 50 : 100; // Adjust scroll amount based on screen size

  function scrollVertically(direction) {
    // Scroll up
    if (direction === 1) {
      cardWrapper.scrollBy({
        top: -scrollAmount,
        behavior: 'smooth'
      });
    }
    // Scroll down
    else {
      cardWrapper.scrollBy({
        top: scrollAmount,
        behavior: 'smooth'
      });
    }

    // Update button visibility after scrolling
    setTimeout(updateScrollButtons, 300); // Delay to allow for smooth scrolling
  }

  function updateScrollButtons() {
    const currentScrollPosition = cardWrapper.scrollTop;
    const maxScrollHeight = cardWrapper.scrollHeight - cardWrapper.clientHeight;

    // Hide or show the up button
    btnScrollUp.style.display = currentScrollPosition <= 0 ? 'none' : 'flex';

    // Hide or show the down button
    btnScrollDown.style.display = currentScrollPosition >= maxScrollHeight ? 'none' : 'flex';
  }

  // Initialize scroll button visibility
  updateScrollButtons();

  // Create a wrapper function for scrolling up
  function scrollUp() {
    scrollVertically(1);
  }

  // Create a wrapper function for scrolling down
  function scrollDown() {
    scrollVertically(-1);
  }

  // Add event listeners for buttons
  btnScrollUp.addEventListener('click', scrollUp);
  btnScrollUp.addEventListener('touchstart', scrollUp);
  btnScrollDown.addEventListener('click', scrollDown);
  btnScrollDown.addEventListener('touchstart', scrollDown);

  // Add scroll event listener to update button visibility when scrolling manually
  cardWrapper.addEventListener('scroll', updateScrollButtons);

  // Add event listeners for "View More" buttons
  const viewMoreButtons = document.querySelectorAll('.view-more-btn');
  viewMoreButtons.forEach(button => {
    button.addEventListener('click', function() {
      const cardDetails = this.parentElement.querySelector('.card-text');
      cardDetails.classList.toggle('expanded'); // Toggle the expanded class

      // Scroll to the bottom of the card wrapper if expanding the last card
      if (this.closest('.card') === cardWrapper.lastElementChild) {
        cardWrapper.scrollTo({
          top: cardWrapper.scrollHeight, // Scroll to the bottom of the card wrapper
          behavior: 'smooth' // Smooth scroll
        });
      }

      this.textContent = cardDetails.classList.contains('expanded') ? 'View Less' : 'View More'; // Change button text

      // Update scroll button visibility
      updateScrollButtons();
    });
  });

  // Add touch and click event listeners to the window for scrolling
  ['touchstart', 'click'].forEach(function(e) {
    window.addEventListener(e, function(event) {
      if (event.target === btnScrollUp) {
        scrollUp();
      } else if (event.target === btnScrollDown) {
        scrollDown();
      }
    });
  });
});

:root {
    --primary-color: #00605f;
        --secondary-color: #017479;
        --text-dark: #0f172a;
    --white: #ffffff;
    }
    .testimonial-container-right {
      grid-area: testimonial-container-right;
      display: flex;
      flex-direction: column;
    }

    .vertical-scroll {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      /* Change to relative for positioning */
    }

    .btn-scroll {
      font-size: 2rem;
      outline: none;
      border: none;
      color: var(--white);
      cursor: pointer;
      background: var(--primary-color);
      transition: .3s all ease;
    }

    #btn-scroll-up,
    #btn-scroll-down {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      /* Ensure it's displayed as a flex container */
      z-index: 1;
      padding: .5rem 1rem;
    }

    #btn-scroll-up {
      border-radius: 0 0 1rem 1rem;
      top: 0;
    }

    #btn-scroll-down {
      border-radius: 1rem 1rem 0 0;
      bottom: 0;
    }

    .btn-scroll:hover,
    .btn-scroll:focus {
      background-color: var(--secondary-color);
    }

    .card-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 1rem;
      height: 650px;
      overflow-y: hidden;
      position: relative;
    }

    .card {
      padding: 2rem;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 1rem;
      background-color: var(--white);
      border-radius: 1rem;
      cursor: pointer;
      max-height: auto;
      border: 1px solid var(--secondary-color);
      -webkit-user-select: none;
      /* Safari */
      -ms-user-select: none;
      /* IE 10 and IE 11 */
      user-select: none;
      /* Standard syntax */
      max-width: 650px;
      /*word-break: break-all;*/
    }

    .testi-image {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card img {
      width: 75px;
      /* Set a max width for the preview */
      height: 75px;
      /* Set a max height for the preview */
      border-radius: 50%;
      border: 1px solid #eee;
      float: none;
      pointer-events: none;
    }

    .card__content {
      display: flex;
      gap: 1rem;
      flex: 1;
      max-width: 100%;
    }

    .card__content span i {
      font-size: 2rem;
      color: var(--primary-color);
    }

    .card__details {
      flex-grow: 1;
      /* Allow it to grow */
      flex-shrink: 1;
      /* Allow it to shrink */
      min-width: 0;
      /* Avoid forcing unnecessary width */
      max-width: 100%;
      /* Prevent overflow beyond container */
      overflow: hidden;
    }

    .card__details p {
      max-width: 100%;
      font-size: 1rem;
      font-style: italic;
      font-weight: 400;
      color: var(--text-dark);
      margin-right: 1rem;
      margin-bottom: 1rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      /* Limit to 3 lines */
      -webkit-box-orient: vertical;
      transition: max-height 0.3s ease;
      max-height: 4.5em;
      /* Adjust based on line height */

    }

    .card__details p.expanded {
      -webkit-line-clamp: unset;
      /* Remove line limit */
      max-height: none;
      /* Allow full height */
    }

    .card__details h4 {
      text-align: right;
      color: var(--primary-color);
      font-size: 1rem;
      font-weight: 500;
    }

    .card__details h5 {
      text-align: right;
      color: var(--primary-color);
      font-size: .8rem;
      font-weight: 400;
      margin-bottom: .1rem;
    }

    .card__details h6 {
      text-align: right;
      color: var(--text-light);
      font-size: .7rem;
      font-weight: 400;
      display: flex;
      /* Use flexbox for better alignment */
      align-items: center;
      /* Center align items vertically */
      justify-content: flex-end;
      /* Align content to the right */
      margin-top: 0;
      margin-bottom: 0;
    }

    .rating-stars_in_card {
      height: 30px;
      position: absolute;
      vertical-align: baseline;
      color: #b9b9b9;
      line-height: 10px;
      float: left;
      margin: 1rem 0;
    }

    .card__details button {
      padding: .5rem 1rem;
      outline: none;
      border: none;
      border-radius: 5px;
      background: linear-gradient(to right, #ff226f,
          #fe6769);
      color: var(--white);
      font-size: .8rem;
      cursor: pointer;
    }

    @media(max-width:768px){
    .testimonial-container-right{
            margin: 1rem 0 1rem 0;
        }
        .card-wrapper{
            height: 500px;
        }
        .btn-scroll{
            font-size: 1rem;
        }
        #btn-scroll-up,
        #btn-scroll-down {
            padding: .25rem .5rem;
        }
        .card{
            display:flex;
            flex-direction: column; /* Stack elements vertically */
            align-items: center; /* Center items horizontally */
            gap:0;
            width: 300px;
        }
        .card img{
            width: 60px;
            height: 60px;
            margin-bottom: 1rem; /* Add some space below the image */
            order: -1; /* Ensure the image appears first */
        }
        .rating-stars_in_card {
            margin-top: 0.5rem; /* Add some spacing below the image */
        }
        .card__content{
            display: flex;
            gap:1rem;
        }
        .card__content span i{
            font-size: 1.5rem;
        }
        .card__details p{
            font-size: .8rem;
            margin-bottom: 0.5rem;
        }
        .card__details h4{
            font-size: .8rem;
            margin-top: 1.5rem;
        }
        .card__details h5{
            font-size: .7rem;
            margin-bottom: .1rem;
        }
        .card__details h6{
            font-size: .6rem;
        }
        .card__details button{
            padding: .25rem .5rem;
            font-size: .6rem;
        }
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <div class="testimonial-container-right">
          <div class="vertical-scroll">
            <button class="btn-scroll" id="btn-scroll-up">
                <i class="fas fa-chevron-up"></i>
            </button>
          </div>
          <div class="card-wrapper">
            <div class="card">
              <div class="testi-image">
                <img src="https://cdn-icons-png.flaticon.com/512/219/219969.png" alt="client-photo">
              </div>
              <div class="card__content">
                <span><i class="fas fa-quote-left"></i></span>
                <div class="card__details">
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia nisl, ac dapibus magna. Morbi malesuada orci vitae turpis egestas, sit amet pellentesque massa auctor. Etiam id bibendum tellus. Duis accumsan in metus a rutrum. Nam ac rutrum sem, non aliquet neque. Aliquam vulputate interdum finibus. Vestibulum eu efficitur ligula. Nunc felis turpis, tincidunt gravida commodo a, maximus et dui. In fringilla ante vitae tortor venenatis, ac luctus urna faucibus. </p>
                  <button class="view-more-btn">View More</button><br>
                  <div class="rating-stars_in_card">
                    <div class="grey-stars"></div>
                    <div class="filled-stars" style="width:60%"></div>
                  </div>
                  <h4>~ techieafrohead</h4>
                  <h5>India(Amity)</h5>
                  <h6>Service</h6>
                </div>
              </div>
            </div> 
            <div class="card">
              <div class="testi-image">
                <img src="https://cdn-icons-png.flaticon.com/512/219/219969.png" alt="client-photo">
              </div>
              <div class="card__content">
                <span><i class="fas fa-quote-left"></i></span>
                <div class="card__details">
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia nisl, ac dapibus magna. Morbi malesuada orci vitae turpis egestas, sit amet pellentesque massa auctor. Etiam id bibendum tellus. Duis accumsan in metus a rutrum. Nam ac rutrum sem, non aliquet neque. Aliquam vulputate interdum finibus. Vestibulum eu efficitur ligula. Nunc felis turpis, tincidunt gravida commodo a, maximus et dui. In fringilla ante vitae tortor venenatis, ac luctus urna faucibus. </p>
                  <button class="view-more-btn">View More</button><br>
                  <div class="rating-stars_in_card">
                    <div class="grey-stars"></div>
                    <div class="filled-stars" style="width:60%"></div>
                  </div>
                  <h4>~ techieafrohead</h4>
                  <h5>India(Amity)</h5>
                  <h6>Service</h6>
                </div>
              </div>
            </div> 
            <div class="card">
              <div class="testi-image">
                <img src="https://cdn-icons-png.flaticon.com/512/219/219969.png" alt="client-photo">
              </div>
              <div class="card__content">
                <span><i class="fas fa-quote-left"></i></span>
                <div class="card__details">
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia nisl, ac dapibus magna. Morbi malesuada orci vitae turpis egestas, sit amet pellentesque massa auctor. Etiam id bibendum tellus. Duis accumsan in metus a rutrum. Nam ac rutrum sem, non aliquet neque. Aliquam vulputate interdum finibus. Vestibulum eu efficitur ligula. Nunc felis turpis, tincidunt gravida commodo a, maximus et dui. In fringilla ante vitae tortor venenatis, ac luctus urna faucibus. </p>
                  <button class="view-more-btn">View More</button><br>
                  <div class="rating-stars_in_card">
                    <div class="grey-stars"></div>
                    <div class="filled-stars" style="width:60%"></div>
                  </div>
                  <h4>~ techieafrohead</h4>
                  <h5>India(Amity)</h5>
                  <h6>Service</h6>
                </div>
              </div>
            </div> 
            <div class="card">
              <div class="testi-image">
                <img src="https://cdn-icons-png.flaticon.com/512/219/219969.png" alt="client-photo">
              </div>
              <div class="card__content">
                <span><i class="fas fa-quote-left"></i></span>
                <div class="card__details">
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia nisl, ac dapibus magna. Morbi malesuada orci vitae turpis egestas, sit amet pellentesque massa auctor. Etiam id bibendum tellus. Duis accumsan in metus a rutrum. Nam ac rutrum sem, non aliquet neque. Aliquam vulputate interdum finibus. Vestibulum eu efficitur ligula. Nunc felis turpis, tincidunt gravida commodo a, maximus et dui. In fringilla ante vitae tortor venenatis, ac luctus urna faucibus. </p>
                  <button class="view-more-btn">View More</button><br>
                  <div class="rating-stars_in_card">
                    <div class="grey-stars"></div>
                    <div class="filled-stars" style="width:60%"></div>
                  </div>
                  <h4>~ techieafrohead</h4>
                  <h5>India(Amity)</h5>
                  <h6>Service</h6>
                </div>
              </div>
            </div> 
          </div><!--card-wrapper-->
          <div class="vertical-scroll">
            <button class="btn-scroll" id="btn-scroll-down">
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>
        </div><!--testimonial-container-right-->