.hero-academia{

    position:relative;

    min-height:700px;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:80px 60px;

    /*background-image:url("https://felinosxalapafc.com/wp-content/uploads/2026/05/IMG-20260523-WA0015.jpg");*/

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;
    
    justify-content:flex-start;
}

.hero-academia::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,8,20,.96) 0%,
        rgba(0,8,20,.88) 35%,
        rgba(0,8,20,.45) 65%,
        rgba(0,8,20,.20) 100%
    );

    z-index:1;
}

.hero-academia__content{

    position:relative;

    z-index:20;

    max-width:620px;

    display:flex;

    flex-direction:column;

    gap:40px;
}

.hero-academia__content h1{

    font-size:clamp(4rem,7vw,6rem);

    line-height:.95;

    font-weight:800;

    text-transform:uppercase;
}

.hero-academia__content p{

    max-width:550px;

    font-size:1.3rem;

    line-height:1.6;

    color:rgba(255,255,255,.95);
}

.hero-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:1;

    z-index:0;

    animation-duration:18s;

    animation-iteration-count:infinite;

    animation-timing-function:ease-in-out;
}

.slide-1{ z-index:0; }
.slide-2{ z-index:0; }
.slide-3{ z-index:0; }

.slide-1{

    background-image:url("https://felinosxalapafc.com/wp-content/uploads/2026/06/DSC_0589.JPG-scaled.jpeg");

    animation-name:slide1;
}

.slide-2{

    background-image:url("https://felinosxalapafc.com/wp-content/uploads/2026/06/DSC_2031.JPG-scaled.jpeg");

    animation-name:slide2;
}

.slide-3{

    background-image:url("https://felinosxalapafc.com/wp-content/uploads/2026/06/DSC_0713.JPG-scaled.jpeg");

    animation-name:slide3;
}

@keyframes slide1{

    0%,30%{
        opacity:1;
    }

    33%,100%{
        opacity:0;
    }
}

@keyframes slide2{

    0%,30%{
        opacity:0;
    }

    33%,63%{
        opacity:1;
    }

    66%,100%{
        opacity:0;
    }
}

@keyframes slide3{

    0%,63%{
        opacity:0;
    }

    66%,100%{
        opacity:1;
    }
}