/*===== All Preloader Style =====*/
:root {
	--effect: hover 1s linear infinite;
}

.preloader {
	/* Body Overlay */
	position: fixed;
	top: 0;
	left: 0;
	display: table;
	height: 100%;
	width: 100%;
	/* Change Background Color */
	background: #15475e;
	z-index: 99999;
}

.preloader .loader {
	--size: 35dvh;
	--duration: 2s;
	--logo-color: rgb(161, 157, 17);
	--background: linear-gradient(0deg, rgba(50, 50, 50, 0.2) 0%, rgba(100, 100, 100, 0.2) 100%);
	height: var(--size);
	aspect-ratio: 1;
	position: relative;
	top: 33dvh;
	left: 42dvw;
}

@media (max-width: 540px) {
	.preloader .loader {
		--size: 20dvh;
		top: 40dvh;
		left: 28dvw;
	}
}

.preloader .loader .box {
	position: absolute;
	background: rgba(100, 100, 100, 0.15);
	background: var(--background);
	border-radius: 50%;
	border-top: 3px solid rgba(100, 100, 100, 1);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
	backdrop-filter: blur(5px);
	animation: ripple var(--duration) infinite ease-in-out;
}

.preloader .loader .box:nth-child(1) {
	inset: 35%;
	z-index: 99;
}

.preloader .loader .box:nth-child(2) {
	inset: 25%;
	z-index: 98;
	border-color: rgba(100, 100, 100, 0.8);
	animation-delay: 0.2s;
}

.preloader .loader .box:nth-child(3) {
	inset: 15%;
	z-index: 97;
	border-color: rgba(100, 100, 100, 0.6);
	animation-delay: 0.4s;
}

.preloader .loader .box:nth-child(4) {
	inset: 5%;
	z-index: 96;
	border-color: rgba(100, 100, 100, 0.4);
	animation-delay: 0.6s;
}

.preloader .loader .box:nth-child(5) {
	inset: 0%;
	z-index: 95;
	border-color: rgba(100, 100, 100, 0.2);
	animation-delay: 0.8s;
}

.preloader .loader .logo {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	padding: 30%;
}

.preloader .loader .logo svg {
	fill: var(--logo-color);
	width: 100%;
	animation: color-change var(--duration) infinite ease-in-out;
}

@keyframes ripple {
	0% {
		transform: scale(1);
		box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
	}

	50% {
		transform: scale(1.3);
		box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 20px -0px;
	}

	100% {
		transform: scale(1);
		box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
	}
}

@keyframes color-change {
	0% {
		fill: var(--logo-color);
	}

	50% {
		fill: white;
	}

	100% {
		fill: var(--logo-color);
	}
}