*{

  scroll-behavior: smooth;

}

body {

  font-family: "Kanit", sans-serif;

  background-color: #141410;

 

}









/* ------------------ Scrollbar */

::-webkit-scrollbar {

  width: 4px;

  height: 4px;

}

/* Track */

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px var(--theme-bg);

  border-radius: 5px;

}

/* Handle */

::-webkit-scrollbar-thumb {

  background: #e8fc77;

  border-radius: 10px;

}



/* ----------------- Common css */





.pt_120 {

  padding-top: 120px;

}

.pb_120 {

  padding-bottom: 120px;

}

@media (max-width: 1280px) {

  .pt_120 {

    padding-top: 100px;

  }

  .pb_120 {

    padding-bottom: 100px;

  }

}

@media (max-width: 1024px) {

  .pt_120 {

    padding-top: 80px;

  }

  .pb_120 {

    padding-bottom: 80px;

  }

}



/* ----------------- Clip pth  */

.clip_bg {

  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

/* -------------- Animation text */

.Perfection {

  -webkit-text-stroke-width: 1px;

  -webkit-text-stroke-color: rgb(255,252,225);

  color: transparent;

  transition: all 0.5s;

  position: relative;

}

.Perfection::before {

  content: attr(data-text);

  position: absolute;

  color: #e8fc77;

  width: 0px;

  overflow: hidden;

  animation: design 3s ease-in infinite;

  -webkit-text-stroke-width: 1px;

  -webkit-text-stroke-color: #e8fc77;

}

@keyframes design {

  50% {

    width: fit-content;

  }

}
/* -------------- Animation text spin */
.words{
	
	overflow: hidden;
	border: 0px solid #FFFFFF;
	line-height: 80px;
	height: 160px;
	text-transform: uppercase;
	font-size: 100px;
	
}

.ani1{
	
	position: relative;
	animation: ani1 10s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%) infinite;
}
@keyframes ani1{
	0%, 100%{
		top: 0;
	}
	15%{
		top: 0;
	}
	25%{
		top: -160px;
	}
	35%{
		top: -160px;
	}
	45%{
		top: -320px;
	}
	60%{
		top: -320px;
	}
	70%{
		top: -160px;
	}
	85%{
		top: -160px;
	}
	
	
	
}

	
@media screen and (max-width: 430px){
	.words{
		line-height: 45px;
		height:90px;
		font-size: 45px;
	}
	
	.ani1{
		position: relative;
		
	animation: ani2 10s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%) infinite;
	}
}
@keyframes ani2{
	0%, 100%{
		top: 0;
	}
	15%{
		top: 0;
	}
	25%{
		top: -90px;
	}
	35%{
		top: -90px;
	}
	45%{
		top: -180px;
	}
	60%{
		top: -180px;
	}
	70%{
		top: -90px;
	}
	85%{
		top: -90px;
	}
	
	
	
}


/* -------------------- slider dote */

.swiper-pagination3 {

  position: absolute;

  bottom: 0;

  left: 0;

  display: flex;

  align-items: center;

  gap: 18px;

  justify-content: flex-end;

  margin: 20px -20px;

}

.swiper-pagination3 .swiper-pagination-bullet {

  background: #ffffff;

  width: 8px;

  height: 8px;

  opacity: 1;

  position: relative;

}

.swiper-pagination3 .swiper-pagination-bullet-active {

  background: #c9f31d;

  padding: 2px;

  width: 8px;

  height: 8px;

  position: relative;

  opacity: 1;

}



.swiper-pagination-bullet-active::before {

  position: absolute;

  top: -6px;

  left: -6px;

  width: 20px;

  height: 20px;

  content: "";

  border: 1px solid #c9f31d !important;

  border-radius: 50%;

}



.swiper-pagination3 .swiper-pagination-bullet::before {

  position: absolute;

  top: -6px;

  left: -6px;

  width: 20px;

  height: 20px;

  content: "";

  border: 1px solid #ffffff;

  border-radius: 50%;

}





/* ------------ Logo slider */

.slide-track {

  width: calc(200px * 16);

  display: flex;

  align-items: center;

  animation: scroll 20s linear infinite;

  justify-content: space-between;

  height: 100%;

  gap: 50px;

}

.slide-track2{

  animation: scroll2 20s linear infinite;

}



@keyframes scroll {

  0% {

    transform: translateX(0px);

  }

  100% {

    transform: translateX(calc(-150px * 8));

  }

}

@keyframes scroll2 {

  0% {

    transform: translateX(calc(-150px * 8));

  }

  100% {

    transform: translateX(0px);

  }

}



/* -------------------- Heading animation */

h1{

	pointer-events: none;

	opacity: 1;

	animation: fade ease-in 3s;

	animation-iteration-count: 1;

}



@keyframes fade {

	0% {

		opacity: 0;

	}

	100% {

		opacity: 1;

	}

}