@import url('https://fonts.googleapis.com/css2?family=Niramit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Quicksand:wght@300..700&display=swap');

:root {
  --primary-font: "Quicksand", sans-serif;
  --secondary-font: "Niramit", sans-serif;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  font-family: var(--secondary-font);
  overflow-x: hidden !important;
}
html {
  scroll-behavior: smooth;
}
html, body {
  scroll-snap-type: y mandatory;
}
button{
  font-family: var(--primary-font) !important;
}


.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.service-icon-box {

  box-shadow: 0px 27px 18px rgba(253, 145, 109, 0.35);
}

.counter-box {

  box-shadow: 0px 22px 30px 5px rgba(250, 165, 165, 0.35);

}
.primary-shadow {

  box-shadow: 0px 22px 30px 5px rgba(250, 165, 165, 0.35);

}

.btn-swiper-model-1 {
  clip-path: polygon(43% 0,
      /* 100 - 57 */
      42% 19%,
      /* 100 - 58 */
      0 38%,
      /* 100 - 100 */
      0 100%,
      100% 100%,
      100% 60%,
      100% 0);
}

.btn-swiper-model-2 {
  clip-path: polygon(57% 0, 58% 19%, 100% 38%, 100% 100%, 0 100%, 0% 60%, 0 0);
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-600 {
  animation-delay: 0.6s;
}

.counters>.counter-item:nth-child(odd) .circle {
  transform: translateY(18px);
}

.counters>.counter-item:nth-child(even) .circle {
  transform: translateY(-18px);
}

/* transition to neutral when section gets .in-view */
#kpi-section.in-view .counters>.counter-item .circle {
  transform: translateY(0);
  transition: transform 600ms cubic-bezier(.2, .9, .2, 1);
}

/* smooth pop on enter for numbers (optional) */
.count {
  transition: transform 450ms ease;
}

#kpi-section.in-view .count {
  transform: scale(1.02);
}

.testimonial-image-circle {
  width: 100%;
  height: 100%;
  animation: rotateCircle 25s linear infinite;
  transform-origin: center center;
  will-change: transform; /* hint browser to isolate the animation */
}

@keyframes rotateCircle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.client-avatar.active {
  border-color: var(--color-primary); /* your primary color */
  box-shadow: 0 0 12px var(--color-primary);
}

 .marquee {
    animation: marquee 18s linear infinite;
  }

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-60%);
    }
  }

.mv-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-primary) 0%, transparent 100%);
  opacity: 0.75; /* adjust overlay visibility */
  z-index: 20;
  border-radius: inherit;
}
.left-reveal,.right-reveal,.bottom-reveal{
 visibility: hidden;
}
.circle-shape{
    animation: floatAir 8s ease-in-out infinite;
}

@keyframes floatAir {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(10px, -10px);
  }
  50% {
    transform: translate(15px, 5px);
  }
  75% {
    transform: translate(-10px, 10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.float-left {
  animation: floatLeft 6s ease-in-out infinite;
}
@keyframes floatLeft {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-10px); }
  50%  { transform: translateX(-20px); }
  75%  { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

/* Float RIGHT */
.float-right {
  animation: floatRight 6s ease-in-out infinite;
}
@keyframes floatRight {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(10px); }
  50%  { transform: translateX(20px); }
  75%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* Float TOP */
.float-top {
  animation: floatTop 6s ease-in-out infinite;
}
@keyframes floatTop {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-10px); }
  50%  { transform: translateY(-20px); }
  75%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Float BOTTOM */
.float-bottom {
  animation: floatBottom 6s ease-in-out infinite;
}
@keyframes floatBottom {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(10px); }
  50%  { transform: translateY(20px); }
  75%  { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
.rotate-slow {
  animation: rotateSlow 12s linear infinite;
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

.leaf-shake {
  animation: leafShake 3s ease-in-out infinite;
  transform-origin: center top;
}

@keyframes leafShake {
  0%   { transform: rotate(0deg) translateX(0); }
  20%  { transform: rotate(5deg) translateX(2px); }
  40%  { transform: rotate(-4deg) translateX(-3px); }
  60%  { transform: rotate(3deg) translateX(2px); }
  80%  { transform: rotate(-2deg) translateX(-1px); }
  100% { transform: rotate(0deg) translateX(0); }
}