*, *:before, *:after {
	box-sizing: border-box;
  }
  
  body {
	background: #2b344442;
  }
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
    z-index: 1000; /* Make sure the overlay is on top of other elements */
}
  .loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	perspective: 2000px;
	transform: rotateX(-30deg) rotateY(-45deg);
	background-color: #c47f10;
  }
  .loader-text {
	position:relative;
	color: #fff;
	top: 65%;
	text-align: center;
	font-size: 18px;
  }
  .loader-holder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	transform: translate3d(0em, 3em, 1.5em);
  }
  .loader-holder:last-child {
	transform: rotateY(-90deg) rotateX(90deg) translate3d(0, 3em, 1.5em);
  }
  .loader-holder:first-child {
	transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, 3em, 1.5em);
  }
  .loader-holder:nth-child(1) .loader-box {
	background-color: #18957c;
  }
  .loader-holder:nth-child(1) .loader-box:before {
	background-color: #1ABB9C;
  }
  .loader-holder:nth-child(1) .loader-box:after {
	background-color: #1cd0ac;
  }
  .loader-holder:nth-child(2) .loader-box {
	background-color: #c47f10;
  }
  .loader-holder:nth-child(2) .loader-box:before {
	background-color: #F39C12;
  }
  .loader-holder:nth-child(2) .loader-box:after {
	background-color: #ffb53f;
  }
  .loader-holder:nth-child(3) .loader-box {
	background-color: #E74C3C;
  }
  .loader-holder:nth-child(3) .loader-box:before {
	background-color: #E74C3C;
  }
  .loader-holder:nth-child(3) .loader-box:after {
	background-color: #bb3627;
  }
  
  .loader-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	-webkit-animation: ani-box 6s infinite;
			animation: ani-box 6s infinite;
	width: 3em;
	height: 3em;
  }
  .loader-box:before, .loader-box:after {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
  }
  .loader-box:before {
	left: 100%;
	bottom: 0;
	transform: rotateY(90deg);
	transform-origin: 0 50%;
  }
  .loader-box:after {
	left: 0;
	bottom: 100%;
	transform: rotateX(90deg);
	transform-origin: 0 100%;
  }
  
  @-webkit-keyframes ani-box {
	8.33% {
	  transform: translate3d(-50%, -50%, 0) scaleZ(2);
	}
	16.7% {
	  transform: translate3d(-50%, -50%, -3em) scaleZ(1);
	}
	25% {
	  transform: translate3d(-50%, -100%, -3em) scaleY(2);
	}
	33.3% {
	  transform: translate3d(-50%, -150%, -3em) scaleY(1);
	}
	41.7% {
	  transform: translate3d(-100%, -150%, -3em) scaleX(2);
	}
	50% {
	  transform: translate3d(-150%, -150%, -3em) scaleX(1);
	}
	58.3% {
	  transform: translate3d(-150%, -150%, 0) scaleZ(2);
	}
	66.7% {
	  transform: translate3d(-150%, -150%, 0) scaleZ(1);
	}
	75% {
	  transform: translate3d(-150%, -100%, 0) scaleY(2);
	}
	83.3% {
	  transform: translate3d(-150%, -50%, 0) scaleY(1);
	}
	91.7% {
	  transform: translate3d(-100%, -50%, 0) scaleX(2);
	}
	100% {
	  transform: translate3d(-50%, -50%, 0) scaleX(1);
	}
  }
  
  @keyframes ani-box {
	8.33% {
	  transform: translate3d(-50%, -50%, 0) scaleZ(2);
	}
	16.7% {
	  transform: translate3d(-50%, -50%, -3em) scaleZ(1);
	}
	25% {
	  transform: translate3d(-50%, -100%, -3em) scaleY(2);
	}
	33.3% {
	  transform: translate3d(-50%, -150%, -3em) scaleY(1);
	}
	41.7% {
	  transform: translate3d(-100%, -150%, -3em) scaleX(2);
	}
	50% {
	  transform: translate3d(-150%, -150%, -3em) scaleX(1);
	}
	58.3% {
	  transform: translate3d(-150%, -150%, 0) scaleZ(2);
	}
	66.7% {
	  transform: translate3d(-150%, -150%, 0) scaleZ(1);
	}
	75% {
	  transform: translate3d(-150%, -100%, 0) scaleY(2);
	}
	83.3% {
	  transform: translate3d(-150%, -50%, 0) scaleY(1);
	}
	91.7% {
	  transform: translate3d(-100%, -50%, 0) scaleX(2);
	}
	100% {
	  transform: translate3d(-50%, -50%, 0) scaleX(1);
	}
  }