.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    background: radial-gradient(circle, #2b2b2b 1%, #161616 40%);
    animation: hero-glow 4s ease-out;
    transition: all 0.5s ease;
}

.hero svg {
    width: 100vh;
    height: auto;
    filter: drop-shadow( 0 0 3vh #ffffe341);
}

.hero svg path {
    fill: var(--font-color);
    stroke: var(--font-color);
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: logoAnimation 4s ease-in-out 1;
}

.hero h2 {
    font-family: "Nunito", sans-serif;
    font-size: 1.5vw;
    opacity: 1;
    animation: hock-animation 4s ease-in-out;
}

@keyframes logoAnimation {
    0% {
        fill: transparent;
        stroke-dashoffset: 700;
    }

    80% {
        stroke: var(--font-color);
        stroke-dashoffset: 0;
        fill: transparent;
    }

    100% {
        stroke: #ffffff00;
        stroke-dashoffset: 0;
        fill: var(--font-color);
    }
}

@keyframes hock-animation {
    0% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hero-glow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@media (max-width: 768px) {
    .hero svg {
        width: 85vw;
        height: auto;
    }

    .hero h2 {
        font-size: 3vw; /* Slightly bigger on smaller screens */
    }
}