/* start index.html */
.carousel-item img{
    object-fit: cover;
     height: 77vh;
 }
 .carousel-inner .carousel-item > img {
     -webkit-animation: thing 20s;
     -o-animation: thing 20s;
     animation: thing 20s;
 }
 @keyframes thing {
     from {
         transform: scale(1.3,1.3);
     }
     to {
         transform: scale(1.5, 1.5);
     }
 }
     /* add overlay on carousel class */
 .overlay-csoul {
     position: relative;
     background:linear-gradient(-128deg, transparent 10%, rgba(0, 0, 0, 0.993));
     width: 100%;
     height: 77vh;
 
 }
 .overlay-csoul img.overlay-img {
     mix-blend-mode: overlay;
 }
 .overlay-csoul>.text {
     color: white;
     position: absolute;
 }
     /* add overlay on carousel class */
 
 .carousel-item .text {
     position: absolute;
     top: 34%;
     left: 7%;
 }
 .carousel-item .text h1 {
     color:  #fff;
     font-size: 70px;
     font-weight: 700;
 }
 .carousel-item .text p {
     color: #fff;
     font-weight: 400;
 }
 .carousel-item .btn-carousel {
     padding: 9px 45px;
     background: transparent;
     border: 2px solid #fff;
     font-size: 21px;
     border-radius: 2px;
     text-decoration: none;
     color: #fff;
     transition: 0.5s;
 }
 .carousel-item .btn-carousel:hover {
     background-color: red;
     border: none;
 }
 @media (max-width:768px) and (min-width:426px) {
     .carousel-item .text h1 {
         font-size:34px;
     }
     .carousel-item .text .btn-carousel {
         font-size:16px;
         padding: 7px 34px;
     }
     .overlay-csoul, .carousel-item img {
         height: 63vh;
     }
 }
 @media (max-width:425px) and (min-width:300px) {
     .carousel-item .text h1 {
         font-size:18px;
     }
     .carousel-item .text p {
         font-size: 12px;
     }
     .carousel-item .text .btn-carousel {
         font-size:12px;
         padding: 5px 21px;
     }
     .overlay-csoul, .carousel-item img {
         height: 45vh;
     }
 }