body.no-scroll {
    overflow: hidden; /* Prevent scrolling while loader is active */
}

.loading-arrows {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #302F32; /* Gradient background */
    background-size: 400% 400%;
    animation: gradientShift 6s infinite ease-in-out; /* Smooth background animation */
    z-index: 99999; /* Keep it on top of everything */
    opacity: 1; /* Fully visible initially */
    visibility: visible; /* Ensure visibility */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth fade-out */
}

body.loaded .loading-arrows {
    opacity: 0; /* Fade out */
    visibility: hidden; /* Make it invisible */
    display: none; /* Remove it completely */
}

.title {
    font-size: 2.4rem;
	font-weight: 600;
	text-transform: Uppercase;
	font-family: "Poppins", sans-serif;
    color: #fff;
    animation: titlePulse 2s infinite ease-in-out; /* Subtle scaling effect */
}



.arrows {
    display: flex;
    margin-top: 25px;
    gap: 10px;
}

.arrow {
    font-size: 2rem;
	font-weight: 600px;
    color: #5F6060;
    opacity: 0;
    transform: translateX(-24px) scale(0.8);
    animation: arrowSequence 4s infinite ease-in-out, arrowGlow 2s infinite alternate;
}

.arrow:nth-child(1) {
    animation-delay: 0s;
}

.arrow:nth-child(2) {
    animation-delay: 0.4s;
}

.arrow:nth-child(3) {
    animation-delay: 0.7s;
}

.arrow:nth-child(4) {
    animation-delay: 0.9s;
}

/* Keyframes for Arrow Sequence */
@keyframes arrowSequence {
    0% {
        opacity: 0;
        transform: translateX(-24px) scale(0.6);
    }
    25% {
        opacity: 1;
        transform: translateX(0) scale(1.2);
    }
    50% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    75% {
        opacity: 0;
        transform: translateX(0) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

/* Keyframes for Arrow Glow */
@keyframes arrowGlow {
    from {
        text-shadow: 0 0 5px #c3c3c34d;
    }
    to {
        text-shadow: 0 0 15px #c3c3c3b3;
    }
}

/* Keyframes for Title Pulse */
@keyframes titlePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Keyframes for Gradient Shift */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}