/*==================================================
=                 HOME PAGE
==================================================*/
.hero-content{
    width:100%;
    max-width:700px;
    display:flex;
    flex-direction:column;
    gap:var(--space-lg);
    z-index:2;
    margin-top: var(--space-md);
    animation:
        heroFade 
        var(--motion-upperslow) 
        var(--ease-smooth);
}

.hero-badge{
    display:inline-block;
    width:max-content;
    padding:var(--space-sm) var(--space-md);
    border:2px solid var(--color-primary-hover);
    border-radius:var(--radius-md);
    color:var(--color-text-secondary);
    font-size:var(--text-small);
    letter-spacing:var(--tracking-ultra);
    text-shadow: 5px 5px 2px var(--color-background);
    font-weight:var(--weight-bold);
}

.hero-content h2{
    font-size:var(--text-clamp);
    line-height:var(--leading-tight);
    color:var(--color-text);
    font-weight:var(--weight-bold);
    text-transform:uppercase;
    text-shadow:
        0px 0px 25px var(--color-shadow-red);
}

.hero-content p{
    font-size:var(--text-large);
    line-height:var(--leading-body);
    color:var(--color-text-secondary);
    max-width:520px;
}

.hero-background{
    position:absolute;
    inset:0;
    background-image:url("../../IMG/homeimage2.png");
    opacity: 98%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:0;
}

.view{
    margin-top: var(--space-xl);
    margin-left: var(--space-xl);
}