
<style type="text/css">
	
	.swiper-pagination-bullet-active{
		background-color: #ff4d4d;
	}

	.loader {
	  border: 4px solid #f3f3f3; /* Warna latar belakang */
	  border-top: 4px solid #c40c0c; /* Warna animasi */
	  border-radius: 50%; /* Membuatnya menjadi lingkaran */
	  width: 80px;
	  height: 80px;
	  animation: spin 1s linear infinite;
	}

	@keyframes spin {
		  0% { transform: rotate(0deg); }
		  100% { transform: rotate(360deg); }
		}

	.loading-dots {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    gap: 5px;
	}

	.loading-dots span {
	    width: 10px;
	    height: 10px;
	    background-color: #c40c0c;
	    border-radius: 50%;
	    animation: loading-dots 1.4s infinite ease-in-out;
	}

	.loading-dots span:nth-child(1) {
	    animation-delay: -0.32s;
	}

	.loading-dots span:nth-child(2) {
	    animation-delay: -0.16s;
	}

	.loading-dots span:nth-child(3) {
	    animation-delay: 0;
	}

	@keyframes loading-dots {
	    0%, 80%, 100% {
	        transform: scale(0);
	    }
	    40% {
	        transform: scale(1);
	    }
	}

</style>