@import '../tiny-slider.css';
.tns-controls { text-align: center; margin-bottom: 10px; }
.tns-controls [aria-controls] {
  font-size: 15px;
  margin: 0 5px;
  padding: 0 1em;
  height: 2.5em;
  color: #000;
  background: #66CCFF;
  border-radius: 3px;
  border: 0;
}
.lt-ie9 .tns-controls > [aria-controls] {
  line-height: 2.5em;
}
[data-action] {
  display: block;
  margin: 10px auto;
  font-size: 17px;
  min-width: 3em;
  text-align: center;
  background: transparent;
  border: 0;
}
.tns-controls [disabled] { 
  color: #999999;
  background: #B3B3B3; 
  cursor: not-allowed !important;
}
.tns-nav {
  text-align: center;
  margin: 10px 0;
}
.tns-nav > [aria-controls] {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0 5px;
  border-radius: 50%;
  background: #ddd;
  border: 0;
}
.tns-nav > .tns-nav-active { background: #999; }
/* Client Testimonials Carousel */
.MultiCarousel { float: left; overflow: hidden; padding: 15px 15px 15px 0px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; align-items: center;display: flex;}
.MultiCarousel .MultiCarousel-inner .item { float: left; text-align: center; padding:0px 30px;}
.MultiCarousel #leftLst, .MultiCarousel #rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); cursor: pointer;}
.MultiCarousel #leftLst { left:0; }
.MultiCarousel #rightLst { right:0; }

.bg-fitness247_logo {width: 152px; height: 36px;background: url('../../img/client-logos.webp') -334px -167px; display:inline-block}
.bg-life-soul_gym_logo {width: 174px; height: 40px; background:  url('../../img/client-logos.webp') -334px -10px;  display:inline-block}
.bg-profit_logo {width: 125px; height: 65px;background: url('../../img/client-logos.webp') -140px -195px;  display:inline-block}
.bg-viva_fitness_logo {width: 149px; height: 68px;background: url('../../img/client-logos.webp') -10px -107px;  display:inline-block}
.bg-logo_YMCA { width: 55px; height: 77px; background: url('../../img/client-logos.webp') -443px -70px;  display:inline-block }
.bg-logo_ufc {width: 117px; height: 77px;background: url('../../img/client-logos.webp') -197px -10px;  display:inline-block }
.bg-logo_golds_gym { width: 89px; height: 77px; background: url('../../img/client-logos.webp') -334px -70px;  display:inline-block }
.bg-logo_12th_round { width: 110px; height: 77px; background: url('../../img/client-logos.webp') -10px -195px; display:inline-block }
.bg-logo_i_feel_good { width: 167px; height: 77px; background: url('../../img/client-logos.webp') -10px -10px; display:inline-block}

.customer-reviews .slide{
    background: #305987;
    color: #fff !important;
    padding: 30px 60px;
    border-radius: 10px;
}
.animated-pic{
  max-width:1500px;
  margin:auto;
}
#s-pic-1 {display: block;
  width: 215px;
  height: 350px;
  float: left;
  overflow: hidden !important;
  background-image: url("../../img/home_banner_left.webp");
  background-position: right;
  background-size: cover;
  max-width: 100%;}
#s-pic-2 {margin-top: 35px;
  display: block;
  width: 777px;
  height: 509px;
  float: left;
  overflow: hidden !important;
  background-image: url("../../img/home_banner_center.webp");
  background-position: right;
  background-size: cover;
  max-width: 100%;
  margin-left: 100px;}
#s-pic-3 {margin-top: 98px;
  display: block;
  width: 272px;
  height: 74px; float:left; overflow:hidden !important; background-image: url("../../img/home_banner_right_top.webp"); background-position: right; background-size: cover; max-width:100%;}
#s-pic-4 {margin-top: 234px;
  display: block;
  width: 345px;
  height: 305px;
  float: left;
  overflow: hidden !important;
  background-image: url("../../img/home_banner-right.webp");
  background-position: right;
  background-size: cover;
  max-width: 100%;
  margin-left: -230px;}

  @media only screen and (max-width: 1800px){
    #s-pic-2{ display:none}
    #s-pic-3{ display:none}
    #s-pic-4{ margin-left:50px; margin-top: 30px}
    .animated-pic {
      max-width: 700px;
      margin: auto;
  }
  }
/* button with arrow animation */
.btn-with-arrow i {
  display: inline-block; /* Make sure it's inline for proper movement */
  margin-left: 5px; /* Space between text and arrow */
  animation: slideArrow 2s infinite alternate; /* Apply the animation */
}

/* Define the keyframes for the sliding arrow */
@keyframes slideArrow {
  0% {
    transform: translateX(0); /* Start at original position */
  }
  50% {
    transform: translateX(10px); /* Slide to the right */
  }
  100% {
    transform: translateX(0); /* Slide back to the left */
  }
}
/* animation end*/
/* Other Element animations effects with lenis js like fadein,fadeout etc. */

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Initial invisible state */
/* Initial state of all elements with data-animate */
[data-animate] {
  opacity: 0;
  transform: translateY(20px); /* Start with elements slightly translated */
  transition: opacity 1s ease, transform 1s ease;
}
/* Zoom In Effect */
[data-animate="zoomIn"] {
  transform: scale(0.8); /* Start with smaller scale */
}
[data-animate="zoomIn"].visible {
  opacity: 1;
  transform: scale(1); /* Zoom to original size */
}
 /* Zoom Out Effect */
 [data-animate="zoomOut"] {
  transform: scale(1.2); /* Start with larger scale */
}
[data-animate="zoomOut"].visible {
  opacity: 1;
  transform: scale(1); /* Zoom to original size */
}   
/* Fade In Effect */
[data-animate="fadeIn"].visible {
  opacity: 1;
  transform: translateY(0); /* Reset translation */
}  
/* Initial state for fade-up effect */
[data-animate="fadeUp"] {
  opacity: 0;
  transform: translateY(20px);
}

/* Fade-up visible state */
[data-animate="fadeUp"].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Initial state for fade-down effect */
[data-animate="fadeDown"] {
  opacity: 0;
  transform: translateY(-20px);
}

/* Fade-down visible state */
[data-animate="fadeDown"].visible {
  opacity: 1;
  transform: translateY(0);
}
/* Slide In Left Effect */
[data-animate="slideInLeft"] {
  transform: translateX(-100%); /* Start off-screen */
}

[data-animate="slideInLeft"].visible {
  opacity: 1;
  transform: translateX(0); /* Slide to original position */
}