/* --- General Body Reset --- */
#global-preloader {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}




/* --- Global Preloader --- */
#global-preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #223A54, #000000);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
pointer-events: all;
transition: opacity 0.5s ease;
}

#global-preloader.hide {
opacity: 0;
pointer-events: none;
}

/* --- Loader Structure --- */
.loadwrapper {
position: relative;
width: 200px;
height: 200px;
box-sizing: border-box;
}

.image-container {
position: absolute;
top: 28% !important;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}

.image-container img {
max-width: 240%;
height: auto;
}

/* --- Custom Loader Wrapper --- */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

.custom-loader-wrapper * {
padding: 0;
margin: 0;
box-sizing: border-box;
}

.custom-loader-wrapper {
font-family: 'Raleway', serif;
display: flex;
justify-content: center;
align-items: center;
/* min-height: 100vh; */
}

.custom-loader-wrapper .container {
margin: auto;
position: fixed;
top: 20%;
left: 0;
right: 0;
bottom: 0;
width: 400px;
height: 100px;
max-width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

/* --- Loading Text & Dots --- */
.custom-loader-wrapper .all-loader {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
z-index: 10;
}

.custom-loader-wrapper .loading-text {
color: #ffffff;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}

.custom-loader-wrapper .loading-dots {
display: flex;
align-items: center;
margin-bottom: -4px;
margin-left: 8px;
}

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

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

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

/* --- Progress Bar (Optional) --- */
.custom-loader-wrapper .load {
max-width: 500px;
margin: 2em auto;
/* height: 50px; */
height: 30px;
position: relative;
width: 80%;
}

.custom-loader-wrapper .load p {
display: block;
height: 100%;
width: 100%;
font-size: 0;
border-radius: 50px;
background: linear-gradient(to right, #1FAA20 100%);
position: relative;
overflow: hidden;
}

.custom-loader-wrapper .load p:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(-45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent);
background-size: 50px 50px;
animation: move 2s linear infinite;
z-index: 1;
}


/* --- Animations --- */
@keyframes move {
0% {
background-position: 0 0;
}

100% {
background-position: 50px 50px;
}
}

@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);
}
}


@media (max-width: 480px) {
.image-container {
 top: 20% !important;
}
}