/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Target the parent container to enable stacking (via flex-direction: column) 
   and center the group of buttons horizontally (via align-items: center). */
.linktree-btn {
  display: flex; /* Enable flexbox */
  flex-direction: column; /* Stack children (buttons) vertically */
  align-items: center; /* Center the buttons horizontally within .linktree-btn */
  /* Add some gap between the stacked buttons (optional but recommended) */
  gap: 15px; 
}

/* Ensure the wrapper also allows for centering if it's the immediate parent */
.linktree-btn .btn-wrapper {
  /* You may need to set width: 100% here if .btn-wrapper has a fixed size */
  width: 100%; 
  text-align: center; /* Fallback for centering block-level elements/text inside */
}

/* Modify the button itself */
.linktree-btn .btn-wrapper .cta-button {
  /* Remove the fixed width so the button can be full width of its container,
     which helps with vertical stacking and visual consistency. */
  width: 100%; 
  max-width: 250px; /* Optional: Set a maximum width for better appearance on large screens */
  text-align: center; /* Ensure the text *inside* the button is centered */
}

/*  Daisy attemp 1 .Link 3 button */
.cta-group .btn-wrapper {
  width: 260px;
  max-width: 100%;
  margin: 0 auto;
}

.cta-group .cta-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  min-height: 48px;
}

@media (max-width: 767px) {
  .cta-group .btn-wrapper {
    width: 100%;
  }
}.cta-group .btn-wrapper {
  width: 260px;
  max-width: 100%;
  margin: 0 auto;
}

.cta-group .cta-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  min-height: 48px;
}

@media (max-width: 767px) {
  .cta-group .btn-wrapper {
    width: 100%;
  }
}

/* Daisy attemp 2.  Link 3 button  */
<style>
  .cta-group .btn-wrapper {
    width: 260px;
    max-width: 100%;
    margin: 0 auto;
  }

  .cta-group .cta-button {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
  }

  @media (max-width: 767px) {
    .cta-group .btn-wrapper {
      width: 100%;
    }
  }
</style>


/* Daisy attemp 1.  Awards & Recognition  */
<style>
  .responsive-image {
    overflow: hidden;
    border-radius: 8px; /* optional */
  }

  .responsive-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
  }

  .responsive-image img:hover {
    transform: scale(1.1);
  }
</style>


/* Daisy attemp 2.  Awards & Recognition  */
<style>
  .responsive-image {
    overflow: hidden;
    border-radius: 10px;
  }

  .responsive-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease-in-out;
  }

  .responsive-image:hover img {
    transform: scale(1.35);
  }
</style>


/* Daisy attemp 3.  Awards & Recognition  */

<style>
  .responsive-image {
    position: relative;
    overflow: visible;
  }

  .responsive-image img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease, z-index 0.4s ease;
  }

  .responsive-image:hover img {
    transform: scale(1.3);
    z-index: 999;
  }
</style>

/* Daisy attemp 1.  Awards & Recognition_center Text */

<style>
  .sr-col {
    text-align: center;
  }

  .heading {
    text-align: center;
    margin-top: 15px;
  }

  .col-content {
    text-align: center;
  }

  .col-content p {
    text-align: center;
    margin: 0 auto;
  }
</style>

/* Daisy attemp 1.  Awards & Recognition_center Text */
<style>
  .sr-col {
    text-align: center;
  }

  .sr-col .responsive-image {
    text-align: center;
    margin-bottom: 15px;
  }

  .sr-col .responsive-image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }

  .sr-col .heading {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .sr-col .col-content,
  .sr-col .col-content p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .sr-col .cta-group {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }
</style>

<div class="row row-gap sr-valign-bottom">
					
  <div class="col-md-4 sr-col text-center sr-repeater-1" style="">
    <div class="content-wrapper">
      <div class="responsive-image mb-4">
        <img src="https://47308883.fs1.hubspotusercontent-na2.net/hub/47308883/hubfs/for%20website.jpg?height=2000&amp;name=for%20website.jpg" alt="for website" loading="lazy" height="2000" style="max-width: 100%; height: auto;">
      </div>

      <h3 class="heading">
        Mixue Ice Cream &amp; Tea
      </h3>

      <div class="col-content">
        <p>Franchise Asia 2026 best booth</p>
      </div>

      <div class="cta-group sr-spacer-top-25">
        <div class="btn-wrapper btn-primary-wrapper btn-wrapper-md">
          <a class="cta-button" href="#" role="link" target="_self">View</a>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4 sr-col text-center sr-repeater-2" style="">
    <div class="content-wrapper">
      <div class="responsive-image mb-4">
        <img src="https://47308883.fs1.hubspotusercontent-na2.net/hub/47308883/hubfs/20260424_080635.jpg?width=2000&amp;height=1500&amp;name=20260424_080635.jpg" alt="20260424_080635" loading="lazy" width="2000" height="1500" style="max-width: 100%; height: auto;">
      </div>

      <h3 class="heading">
        TIANLALA Ice Cream &amp; Tea
      </h3>

      <div class="col-content">
        <p>Franchise Asia 2024 Best Booth</p>
      </div>

      <div class="cta-group sr-spacer-top-25">
        <div class="btn-wrapper btn-primary-wrapper btn-wrapper-md">
          <a class="cta-button" href="#" role="link" target="_self">View</a>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4 sr-col text-center sr-repeater-3" style="">
    <div class="content-wrapper">
      <div class="responsive-image mb-4">
        <img src="https://47308883.fs1.hubspotusercontent-na2.net/hub/47308883/hubfs/20240412_113855.jpg?width=2000&amp;name=20240412_113855.jpg" alt="20240412_113855" loading="lazy" width="2000" style="max-width: 100%; height: auto;">
      </div>

      <h3 class="heading">
        BBQ Chicken
      </h3>

      <div class="col-content">
        <p>Franchise Asia 2024 Best Booth</p>
      </div>

      <div class="cta-group sr-spacer-top-25">
        <div class="btn-wrapper btn-primary-wrapper btn-wrapper-md">
          <a class="cta-button" href="#" role="link" target="_self">View</a>
        </div>
      </div>
    </div>
  </div>

</div>

/* Daisy attemp 1.  Awards & Recognition_picture slide */
<style>
  .custom-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .custom-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .custom-slide {
    min-width: 33.3333%;
    box-sizing: border-box;
    padding: 15px;
    text-align: center;
  }

  .custom-slide img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px;
  }

  .custom-slide h3,
  .custom-slide p {
    text-align: center;
  }

  .slider-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 2;
    font-size: 20px;
  }

  .slider-btn.prev {
    left: 10px;
  }

  .slider-btn.next {
    right: 10px;
  }

  @media (max-width: 991px) {
    .custom-slide {
      min-width: 50%;
    }
  }

  @media (max-width: 767px) {
    .custom-slide {
      min-width: 100%;
    }
  }
</style>

<div class="custom-slider">
  <button class="slider-btn prev" onclick="moveSlide(-1)">&#10094;</button>
  <div class="custom-slider-track" id="sliderTrack">

    <div class="custom-slide">
      <img src="https://47308883.fs1.hubspotusercontent-na2.net/hub/47308883/hubfs/for%20website.jpg?height=2000&amp;name=for%20website.jpg" alt="for website">
      <h3>Mixue Ice Cream &amp; Tea</h3>
      <p>Franchise Asia 2026 best booth</p>
    </div>

    <div class="custom-slide">
      <img src="https://47308883.fs1.hubspotusercontent-na2.net/hub/47308883/hubfs/20260424_080635.jpg?width=2000&amp;height=1500&amp;name=20260424_080635.jpg" alt="20260424_080635">
      <h3>TIANLALA Ice Cream &amp; Tea</h3>
      <p>Franchise Asia 2024 Best Booth</p>
    </div>

    <div class="custom-slide">
      <img src="https://47308883.fs1.hubspotusercontent-na2.net/hub/47308883/hubfs/20240412_113855.jpg?width=2000&amp;name=20240412_113855.jpg" alt="20240412_113855">
      <h3>BBQ Chicken</h3>
      <p>Franchise Asia 2024 Best Booth</p>
    </div>

    <!-- Add more slides here -->
    <!-- Example
    <div class="custom-slide">
      <img src="YOUR-IMAGE.jpg" alt="New image">
      <h3>New Title</h3>
      <p>New description</p>
    </div>
    -->

  </div>
  <button class="slider-btn next" onclick="moveSlide(1)">&#10095;</button>
</div>

<script>
  let currentIndex = 0;

  function getVisibleSlides() {
    if (window.innerWidth <= 767) return 1;
    if (window.innerWidth <= 991) return 2;
    return 3;
  }

  function moveSlide(direction) {
    const track = document.getElementById('sliderTrack');
    const slides = document.querySelectorAll('.custom-slide');
    const visibleSlides = getVisibleSlides();
    const maxIndex = slides.length - visibleSlides;

    currentIndex += direction;

    if (currentIndex < 0) currentIndex = 0;
    if (currentIndex > maxIndex) currentIndex = maxIndex;

    const slideWidth = slides[0].offsetWidth;
    track.style.transform = 'translateX(-' + (currentIndex * slideWidth) + 'px)';
  }

  window.addEventListener('resize', function() {
    moveSlide(0);
  });
</script>