.hero{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100%;
    width:100%;
    color:white;
    font-family:Figtree;
    margin-top:7rem;
}

.hero-container{
  background-color: rgba(19, 100, 159, .4);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding: 3rem;
  width: 70%;
  gap: 2px;
  border-radius: 25px;
  backdrop-filter: blur(10px);
}

.hero-left-section{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:flex-start;
    margin:15px;
    gap:10px;
    width:50%;
}

.hero-content{
    padding:15px;
    display: flex;
    flex-direction:column;
    justify-content: center;
    gap:2rem;
}

.hero-content p{
    text-align:justify;
    font-size:24px;
}

.hero-spring-titlu{
    font-family:Poppins;
    font-weight:700;
    padding:0 0 0 15px;
    margin:5px;
}
.hero-spring-titlu p{
    font-size:48px;
}

.hero-login-container{
    display:flex;
    justify-content: center;
    align-self:center;
    margin:0;
    position:relative;
    height: 70px;
    width:200px;
    background: linear-gradient(to left,#63b1dd, #e065a4);
    box-shadow: 0 2px 5px rgba(84, 84, 84, 0.5);
    border-radius:60px;
    cursor:pointer;
    overflow:hidden;
    transition: all 0.5s ease;
}

@property --aa{
    syntax:"<angle>";
    inherits:false;
    initial-value: 0deg;
}

@keyframes animate1{
    0%{
        --aa: 0deg;
    }
    100%{
        --aa: 360deg;
    }
}

.hero-login-container:hover{
    transform:scale(1.15);
}

.hero-login-container:hover::before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
     background: repeating-conic-gradient(
        from var(--aa), white 0%, rgb(147, 202, 213) 5%, 
        transparent 5%, transparent 40%, rgb(147, 202, 213) 50%
    );
    animation: animate1 3s linear infinite;
    animation-delay:-0.5s;
    border-radius:60px;
}

#hero-login-btn{
    display:flex;
    justify-content: center;
    align-items:center;
    position:absolute;
    color:white;
    text-decoration: none;
    inset:3px;
    background: linear-gradient(to left,#63b1dd, #e065a4);
    border-radius:60px;
    letter-spacing: 3px;
    font-size:22px;
    transition: all .5s ease;
}

#hero-login-btn:hover{
    letter-spacing: 5px;
    font-size:24px;
} 

.hero-right-section{
    width:50%;
    box-sizing: border-box;
    display:flex;
    justify-content: center;
    align-items: center;
}

.hero-imagine{
    width:80%;
    height:auto;
    border-radius:20px;
}

/* Responsiveness */

@media screen and (max-width: 500px) {
    .hero-right-section{
        display:none;
    }

    .hero-container{
        flex-direction: column;
        /* padding:30px; */
        width:90%;
        padding:1rem;
    }

    .hero-left-section{
        width:100%;
    }
}