.containerr{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    overflow: hidden;
}
.banner1, .banner2, .banner3, .banner4{
    height: 80vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.homeslide{
    width: 100%;
    height: 80vh;
    position: absolute;
   /* left: 50%;
    top: 50%;*/
    transform: translate(-50,-50);
    animation: zoom-out 3s linear infinite;
}
@keyframes zoom-out{
    100%{
        width: 100%;
    }

}

.tttext-box{
    width: 600px;
    position: absolute;
    top: 200px;
    left: 100px;
    color: #fff;
    animation: textup 12s linear infinite ;
    transform: translateY(100px);
}

.tttext-box h1{
    margin-bottom: 40px;
}

.tttext-box p{
    font-size: 18px;
    line-height: 18px;
    margin-top: 80px;
}

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

.banner1{
    animation: slide1 30s linear infinite;
}
.banner2{
    animation: slide2 30s linear infinite;
}
.banner3{
    animation: slide3 30s linear infinite;
}
.banner4{
    animation: slide4 30s linear infinite;
}

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

@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;
    }
}
@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;
}


@media (max-width:768){
    .tttext-box{
        width: 200px;
        position: absolute;
        top: 200px;
    }
    .tttext-box p{
        font-size: 9px;
    }
}


@media (max-width:700px){
    .tttext-box{
        width: 200px;
        position: absolute;
        top: 200px;
    }
    .tttext-box p{
        font-size: 9px;
    }

}