/* Preloader Wrapper */
#global-preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
transition: opacity 0.5s ease;
pointer-events: all;
position: fixed;
overflow: hidden;
background-color: white;
}

/* Pseudo-element with low-opacity background image */
#global-preloader::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/images/banner/preloader/preloader-bg-5.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* opacity: 0.4;  */
z-index: -1;
/* Places background behind loader content */
}

#global-preloader.hide {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}

#global-preloader.hide {
display: none !important;
}

/* Centering container - adding padding to compensate for animation movement */
.Image {
position: relative;
width: 100%;
height: 100vh;
}

.Image img {
position: absolute;
top: 27%;
/* 20% to 27% */
left: 50%;
width: 17%;
height: auto;
transform: translate(-50%, -50%);
}

/* Tablet view (screens up to 1024px wide) */
@media (max-width: 1024px) {
.Image img {
width: 30%;
}
}

/* Mobile view (screens up to 768px wide) */
@media (max-width: 768px) {
.Image img {
width: 50%;
}
}

/* Preloader Animation */

/*preloader*/
#preloader-wrapper {
/* background-color: #fdfaf8; */
z-index: 10000;
position: fixed;
width: 100%;
height: 100%;
}

.preloader-container {
width: 200px;
height: 200px;
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
margin: auto;
filter: url("#goo");
animation: rotate-move 3s ease-in-out infinite;

.dot {
width: 80px;
/*changes here */
height: 80px;
/*changes here */
border-radius: 50%;
background-color: #000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

.dot-3 {
background-color: #162176;
animation: dot-3-move 3s ease infinite, index 9s ease infinite;
}

.dot-2 {
background-color: #144592;
animation: dot-2-move 3s ease infinite, index 9s -6s ease infinite;
}

.dot-1 {
background-color: #7FBCDF;
animation: dot-1-move 3s ease infinite, index 9s -3s ease infinite;
}
}

/* red */
@keyframes dot-3-move {
20% {
transform: scale(1);
}

45% {
transform: translateY(-18px) scale(0.45);
}

60% {
transform: translateY(-60px) scale(0.45);
}

80% {
transform: translateY(-60px) scale(0.45);
}

100% {
transform: translateY(0px) scale(1);
}
}

/* yellow */
@keyframes dot-2-move {
20% {
transform: scale(1);
}

45% {
transform: translate(-16px, 12px) scale(0.45);
}

60% {
transform: translate(-50px, 30px) scale(0.45);
}

80% {
transform: translate(-50px, 30px) scale(0.45);
}

100% {
transform: translateY(0px) scale(1);
}
}


/* green ball */
@keyframes dot-1-move {
20% {
transform: scale(1);
}

45% {
transform: translate(16px, 12px) scale(0.45);
}

60% {
transform: translate(50px, 30px) scale(0.45);
}

80% {
transform: translate(50px, 30px) scale(0.45);
}

100% {
transform: translateY(0px) scale(1);
}
}

@keyframes rotate-move {
55% {
transform: translate(-50%, -50%) rotate(0deg);
}

80% {
transform: translate(-50%, -50%) rotate(360deg);
}

100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}

@keyframes index {

0%,
100% {
z-index: 3;
}

33.3% {
z-index: 2;
}

66.6% {
z-index: 1;
}
}



/* Loading Dot */

.all-loader {
position: fixed;
/* or use absolute if it's inside a relatively positioned parent */
top: 68%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
}

.loading-text {
color: #727377;
font-family: Poppins, sans-serif;
font-size: 24px;
font-weight: 400;
letter-spacing: 1px;
text-transform: capitalize;
}

.loading-dots {
display: flex;
align-items: center;
margin-bottom: -8px;
}

.loading-dots--dot {
animation: dot-keyframes 1.5s infinite ease-in-out;
background-color: #727377;
border-radius: 50%;
display: inline-block;
height: 7px;
width: 7px;
margin: 0 4px;
}

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

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

@keyframes dot-keyframes {
0% {
opacity: 0.4;
transform: scale(1, 1);
}

50% {
opacity: 1;
transform: scale(1.2, 1.2);
}

100% {
opacity: 0.4;
transform: scale(1, 1);
}
}