.main_head_logo {
    margin: 5%;
    position: relative; /* For the pseudo-element background */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 90%; /* Responsive width */
    height: 300px; /* Fixed height for the box */
    border-radius: 20px; /* Rounded corners for modern look */
    overflow: hidden; /* Ensure content and background don't spill */
    /* Box shadow using the hover-bg color for a blue glow, slightly reduced intensity */
    box-shadow: 0 0 30px rgba(0, 123, 255, 0.3), 0 0 60px rgba(0, 123, 255, 0.15);
    border: 2px solid rgba(0, 123, 255, 0.2); /* Subtle border using hover-bg */
    /* Background matching the provided image, now on the container */
    background: linear-gradient(135deg, #100F2A, #0A0A1F); /* Darker, more purple/blue gradient */
}

/* Animated Background Effect for the container */
.main_head_logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Adjusted radial gradients for a more subtle effect, similar to the image */
    background: radial-gradient(circle at 20% 80%, rgba(60, 0, 120, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(0, 60, 120, 0.2) 0%, transparent 50%);
    animation: backgroundShift 15s ease-in-out infinite alternate;
    z-index: -1; /* Keep it behind the content */
}
@keyframes backgroundShift {
    0% {
        background-position: 0% 0%, 100% 100%;
    }
    100% {
        background-position: 100% 100%, 0% 0%;
    }
}
/* Main Logo Container (inside the new main_head_logo) */
.main_head_logo {
    text-align: center;
    perspective: 1000px;
    /* Stronger initial glow on the text container using hover-bg, slightly reduced intensity */
    filter: drop-shadow(0 0 20px rgba(0, 123, 255, 0.5));
}
/* Heading Styling */
.main_head_logo h1 {
    font-size: clamp(2.5em, 8vw, 6em); /* Responsive font size */
    font-weight: 900; /* Extra bold */
    letter-spacing: 0.05em; /* Slightly increased letter spacing */
    margin: 0;
    padding: 0;
    /* Base color for the text - bright by default, using text-color variable */
    color: var(--text-color);
    /* Strong initial text shadow using hover-bg, slightly reduced intensity */
    text-shadow:
        0 0 10px rgba(0, 123, 255, 0.6),
        0 0 20px rgba(0, 123, 255, 0.4);
    
    /* Apply animations directly to h1 */
    opacity: 1; /* Start fully visible */
    transform: translateY(0) scale(1) rotateX(0deg); /* Start at final position */
    transform-origin: center bottom;
    animation: charFlyIn 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards, /* Bouncy entry */
               neonPulse 2.5s ease-in-out infinite alternate 0.5s; /* Continuous glow, starts sooner */
}

@media (max-width: 500px) {
    .main_head_logo h1 {
        font-size: 11vw
    }
    .main_head_logo p{
    padding: 20px;
    font-size: 4vw;
}
}

/* Keyframes for the text "fly in" animation (now for the whole h1) */
@keyframes charFlyIn {
    0% {
        opacity: 0; /* Start invisible for the animation effect */
        transform: translateY(-50px) scale(0.6) rotateX(120deg) blur(10px); /* Start from above, smaller, rotated, blurred */
    }
    50% {
        opacity: 0.8;
        transform: translateY(15px) scale(1.15) rotateX(0deg) blur(2px); /* Overshoot slightly below, unblur */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg) blur(0px); /* End at final position */
    }
}
/* Keyframes for the continuous neon glow pulse, less intense with grey/black blend */
@keyframes neonPulse {
    0% {
        text-shadow:
            0 0 8px rgba(var(--text-color-rgb), 0.9), /* White glow, slightly less intense */
            0 0 15px rgba(var(--text-color-rgb), 0.6),
            0 0 20px rgba(var(--text-color-rgb), 0.4),
            0 0 25px rgba(var(--grey-rgb), 0.1), /* Very subtle grey hint */
            0 0 30px rgba(var(--bg-rgb), 0.05); /* Very subtle black hint */
        color: var(--text-color); /* White text */
    }
    50% {
        text-shadow:
            0 0 10px rgba(var(--hover-bg-rgb), 0.8), /* Blue glow, slightly less intense */
            0 0 20px rgba(var(--hover-bg-rgb), 0.5),
            0 0 30px rgba(var(--hover-bg-rgb), 0.3);
        color: var(--hover-bg); /* Blue text */
    }
    100% {
        text-shadow:
            0 0 8px rgba(var(--grey-rgb), 0.9), /* Grey glow, slightly less intense */
            0 0 15px rgba(var(--grey-rgb), 0.6),
            0 0 20px rgba(var(--grey-rgb), 0.4),
            0 0 25px rgba(var(--bg-rgb), 0.1), /* Subtle black hint */
            0 0 30px rgba(var(--text-color-rgb), 0.05); /* Very subtle white hint */
        color: var(--grey); /* Grey text */
    }
}