/*==========================
        HERO
===========================*/

.hero{
    position:relative;
    width:100%;
    height:100vh;
    min-height:650px;
    overflow:hidden;
}

/* Swiper */
.heroSwiper{
    width:100%;
    height:100%;
}

.heroSwiper .swiper-slide{
    width:100%;
    height:100%;
    overflow:hidden;
    transition: background-color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
        transform: scale(1.15); 

}

.heroSwiper img{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:zoomHero 12s linear infinite alternate;
}

.heroSwiper video{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Overlay */
.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:5;
}

/* Contenido */
.hero-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    width:90%;
    max-width:1000px;
    text-align:center;
}

/* Título */
.hero-content h1{
    color:#fff;
    font-size:68px;
    font-weight:800;
    line-height:1.1;
    text-transform:uppercase;
    text-shadow:0 10px 30px rgba(0,0,0,.45);
}

/* Subtitulo */
.hero-content p{
    display:inline-block;
    margin-top:25px;
    padding:14px 28px;
    border-radius:50px;
    background:#C40000;
    color:#fff;
    font-size:20px;
    font-weight:500;
}

/* Botón */
.hero-btn{
    display:inline-block;
    margin-top:40px;
    padding:16px 38px;
    background:#0A2A52;
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.hero-btn:hover{
    background:#C40000;
    transform:translateY(-4px);
}

/* Paginación */

.swiper-pagination-bullet{

    background:#fff;
    opacity:.5;
    
}

.swiper-pagination-bullet-active{

    background:#C40000;
    opacity:1;
}

/* Zoom */

@keyframes zoomHero{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

/* Responsive */

@media(max-width:991px){

.hero{

    height:85vh;

}

.hero-content h1{

    font-size:48px;

}

.hero-content p{

    font-size:18px;

}

}

@media(max-width:768px){

.hero-content h1{

    font-size:36px;

}

.hero-content p{

    font-size:16px;

}

.hero-btn{

    padding:14px 30px;

}

}