* {
    margin: 0;
    padding: 0;
}


/* .items2 .container1 {
    position: absolute;
} */

.items2 .container2 {
    height: 50px;
    width: 100px;
}

.items2 .container2 .banner1,
.items2 .container2 .banner2,
.items2 .container2 .banner3,
.items2 .container2 .banner4 {
    overflow: hidden;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: absolute;
}

.items2 .container2 img {
    width: 120%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: zoom-out 9s linear infinite;
    /* border: 20px solid black; */
}

.items2 .container2 .banner1 img {
    width: 140%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: zoom-out 9s linear infinite;
}

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

.items2 .container2 .text-class {
    width: 600px;
    position: absolute;
    top: 200px;
    left: 100px;
    color: white;
    animation: textup 12s linear infinite;
    transform: translateY(100px);
}

.items2 .container2 .text-class2 {
    width: 600px;
    position: absolute;
    top: 200px;
    left: 100px;
    color: white;
    animation: textup 12s linear infinite;
    transform: translateX(100px);
}

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

.items2 .container2 .text-class h1 {
    margin-bottom: 20px;
}

.items2 .container2 .text-class p {
    font-size: 14px;
    line-height: 18px;
    margin-top: 50px;
}

.items2 .container2 .text-class span {
    background: rgb(221, 77, 77);
    height: 2px;
    width: 100px;
    position: absolute;
    left: 0;
}

.items2 .container2 .banner1 {
    animation: slide1 12s linear infinite;
}

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

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

.items2 .container2 .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;
    }
}

.items2 .container2 .text-class1 {
    animation-delay: 0s;
}

.items2 .container2 .text-class2 {
    animation-delay: 3s;
    color: black;
}

.text-class h1 {
    color: rgb(42, 42, 173);
}

.items2 .container2 .text-class3 {
    animation-delay: 6s;
}

.items2 .container2 .text-class4 {
    animation-delay: 9s;
}

.items2 .container2 .hh {
    overflow: hidden;
}

.items2 .container2 .hh h1 {
    color: rgb(59, 59, 216);
    height: 200px;
    width: 99%;
    border: 2px solid black;
    margin-top: 650px;
    overflow: hidden;
}

.text-class4 {
    color: rgb(54, 54, 209);
}

.items2 .container2 {
    position: relative;
    width: 100%;
    height: 500px;
    overflow-y: hidden;
    margin-bottom: 30px;
}