/******************************************/
/******************HERO SECTION******************/
/******************************************/

.hero{
    display: flex; 
}

.banner1, .banner2, .banner3, .banner4{
    height: 100vh;
    width: 100%;
    position: absolute; 
    left: 0;
    top:0;
}


.img-hero{
    background-size: cover;
    object-fit: cover;
    width: 100%;  
    height: 100vh;
    position: absolute;
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); /*translate(-50%, -50%)*/
    animation: zoom-out 3s linear infinite;  /* Animation of banner Background*/
} 

@keyframes zoom-out{
    100%{
        width: 100%;
    }
}

/*Estilos Text Hero */

.text-box{
    width: 600px;
    position: absolute;
    top: 200px;
    left: 100px;
    color:#FFF;
    animation: textup 12s linear infinite; /* Animation of Text*/
    transform: translateY(100px);
}

.text-box h1{
    margin-bottom: 40px;
    text-shadow: 2px 2px 2px black;
}

.text-box p{
    font-size: 14px;
    line-height: 18px;
    margin-top: 80px;
    text-shadow: 2px 2px 2px rgb(24, 22, 22);
}

.text-box span{
    background: red;
    height: 1px;
    width: 100px;
    position: absolute;
    left: 0;
}

/*Animation Slides Hero*/
.banner1{
    animation: slide1 12s linear infinite;
}

.banner2{
    animation: slide2 12s linear infinite;
}

.banner3{
    animation: slide3 12s linear infinite;
}

.banner4{
    animation: slide4 12s linear infinite;
}

@keyframes slide1{
    0%{
        visibility: visible;
    }
    25%{
        visibility: hidden;
    }
    50%{
        visibility: hidden;
    }
    75%{
        visibility: hidden;
    }
    100%{
        visibility: visible;
    }
}

@keyframes slide2{
    0%{
        visibility: hidden;
    }
    25%{
        visibility: hidden;
    }
    50%{
        visibility: visible;
    }
    75%{
        visibility: hidden;
    }
    100%{
        visibility: hidden;
    }
}

@keyframes slide3{
    0%{
        visibility: hidden;
    }
    25%{
        visibility: hidden;
    }
    50%{
        visibility: hidden;
    }
    75%{
        visibility: visible;
    }
    100%{
        visibility: hidden;
    }
}

@keyframes slide4{
    0%{
        visibility: hidden;
    }
    25%{
        visibility: hidden;
    }
    50%{
        visibility: hidden;
    }
    75%{
        visibility: hidden;
    }
    100%{
        visibility: visible;
    }
}

/*Estilos Text Box Hero*/

@keyframes textup{
    10%{
        transform:  translateY(0px);
    }
    100%{
        transform:  translateY(0px);
    }
}

.text-box1{
    animation-delay: 0s;
}
.text-box2{
    animation-delay: 3s;
}
.text-box3{
    animation-delay: 6s;
}
.text-box4{
    animation-delay: 9s;
}