/* Petit Formal Script */
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');
/* Lora */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
/* Rubik */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 /*  IM Fell French Canon */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+French+Canon:ital@0;1&display=swap');
 /*  Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.font-petit {
  font-family: "Petit Formal Script", cursive;
}

.font-lora {
  font-family: "Lora", serif;
}
.font-rubik {
  font-family: "Rubik", sans-serif;
}
.font-imfellfrench {
  font-family: "IM Fell French Canon", serif;
}
.font-inter {
  font-family: "Inter", sans-serif;
}

.loader {
	font-weight: bold;
	font-family: sans-serif;
	font-size: 20px;
	animation: l1 1s linear infinite alternate;
}

.loader:before {
	content: "Loading..."
}

@keyframes l1 {
	to {
		opacity: 0
	}
}

.splide__pagination {
	display: block !important;
	opacity: 1;
	pointer-events: auto;
	/* Ensure the arrows are clickable */
	margin: 0 auto;
	text-align: center;
	border-radius: 12px;
}

.counter {
	display: inline-block;
	position: relative;
	overflow: hidden;
	height: 1em;
	/* tinggi teks */
}

.counter span {
	display: block;
	transition: transform 0.5s ease, opacity 0.5s ease;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}

.counter .old {
	transform: translateY(0);
	opacity: 1;
}

.counter .old.up {
	transform: translateY(-100%);
	opacity: 0;
}

.counter .new {
	transform: translateY(100%);
	opacity: 0;
}

.counter .new.up {
	transform: translateY(0);
	opacity: 1;
}

/* Template Animation */
.animation-bottom-sway {
  animation: sway  3s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
.animation-bottom-sway-right {
  animation: sway-right  3s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
.animation-top-sway {
  animation: sway  3s ease-in-out infinite alternate;
  transform-origin: top center;
}
.animation-top-sway-right {
  animation: sway-right  3s ease-in-out infinite alternate;
  transform-origin: top center;
}

@keyframes sway  {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

@keyframes sway-right  {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

.animation-floating {
  animation: floating  3s ease-in-out infinite;
}
@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
.animation-rotate {
  animation: rotate  3s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animation-fadein {
  animation: fadeSlideIn 1.5s ease-out forwards;
}
@keyframes fadeSlideIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animation-zoom-in-out {
  animation: zoomInOut 3s ease-in-out infinite;
}
@keyframes zoomInOut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.animation-slide-up {
  animation: slideUp 1.5s ease-out forwards;
} 
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animation-slide-down {
  animation: slideDown 1.5s ease-out forwards;
}
@keyframes slideDown {
  0% { opacity: 0; transform: translateY(-50px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animation-pulse {
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}
.animation-sway-soft {
  animation: swaySoft 6s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
@keyframes swaySoft {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

.animation-sway-wide {
  animation: swayWide 8s ease-in-out infinite alternate;
  transform-origin: center top;
}
@keyframes swayWide {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

.animation-petal-fall {
  animation: petalFall 12s linear infinite;
}
@keyframes petalFall {
  0% { transform: translateY(-10%) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

.animation-float-soft {
  animation: floatSoft 5s ease-in-out infinite;
}
@keyframes floatSoft {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

/* Beranda Mitra Brand Logo Slider */
@keyframes scroll {
  0% { transform: translateX(0); }
  /* 7 =  Jumlah Mitra */
	100% { transform: translateX(calc(-260px * 13))}  
}

.slider {
	.slide-track {
		animation: scroll 40s linear infinite;
     /* 15 = 2x Jumlah Mitra */
		width: calc(260px * 26); 
	}
  
  .slide {
    margin-left: 4rem;
  }
	
}

@keyframes dots {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
}
.typing::after {
  content: "...";
  animation: dots 1s infinite steps(3);
}