.hero {
    padding: 2rem;
    text-align: center;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    font-family: 'poppins', sans-serif;
    overflow: hidden;
}

.hero h1{
    font-size: 3rem;
    font-weight: bold;
    background: linear-gradient(45deg, var(--white) 50%, var(--cadet-gray));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-clip: text;
    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5);
    animation: hero-reveal 1s ease forwards, shine 3s ease infinite;
    background-size: 200% auto;
}
.hero button{
    padding: .8rem 2.2rem;
    font-size: 1.2rem;
    border: none;
    border-radius: 5px;
    background-color: var(--indigo-dye);
    color: var(--white);
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'poppins', sans-serif;
    box-shadow: 2px 2px 10px rgba(30, 79, 111, 0.5);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.hero-btn-container{
    animation: hero-btn-reveal 1s ease both;
    animation-delay: .5s;
}

.hero button:hover{
    transform: scale(1.15);
    box-shadow: 4px 4px 15px rgba(30,79,111,.7);
}

.hero button:active {
    transform: scale(1.07);
    box-shadow: 2px 2px 10px rgba(30,79,111,.5);
    transition: none;
}

.hero p{
    font-size: 1.3rem;
    margin: 1.4rem 0;
    color: var(--cadet-gray);
    animation: hero-reveal 1s ease forwards;
}

.animating-circles{
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, #1E4F6F5E 0%, transparent 20%),
              radial-gradient(circle at 70% 60%, #1E4F6F5E 0%, transparent 20%);
    background-size: 200vw 200vh;
    animation: moveBg 6s ease-in-out infinite alternate;
}

/*shine text animation*/
@keyframes shine{
  0%{opacity: .8;}
  50%{opacity: 1;}
  100%{opacity: .8;}
}

@keyframes hero-reveal{
    0%{
        opacity: 0;
        transform: translateY(-100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-btn-reveal{
    from{
        opacity: 0;
        transform: translateX(170px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveBg {
  from { background-position: 0% 0%;}
  to { background-position: 100% 100%, 70% 70%;}
}

@media screen and (max-width: 768px) {
    .hero { flex-direction: column; padding: 1rem; text-align: center; }
    .animating-circles { background-size: 300vw 300vh; }
}