.slider{
    position: relative;
    width: 100%;
   
    
}

.slides{
    height: 655px;
    overflow: hidden;
    display: none;
    min-width: 300px;

}

.prev, .next{
    position: absolute;
    top: 50%;
    transform: translate(-50%);
    font-size: 52px;
    padding: 5px;
    cursor: pointer;
    color: #fff;
    transition: 0.1s;
    user-select: none;
    
}
.prev:hover, .next:hover{
    color: gray;
}
.next{
    right: 0;
}
.prev{
    left: 10px;
}

.dot-container{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 20px;
    cursor: pointer;

}

.dot{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    margin: 0 3px;

}

.dot:hover, .dot:active{
    background-color: blue;
}
.active{
    display: block;
}

.fade{
    transform: scale(1.5,1.5);
    animation: fade 1.5s ease,
               zoomin 40s ease-in 
               ;
    
}

@keyframes fade {

    0%{
        opacity: 0.4;
    }
    /* 50%{
        opacity: 0.1;
        transform: scale(1,1);
    }
    
    100%{
        transform: scale(1.5,1.5);
    } */
    from {
        opacity: 0.4;
    }
    to{
        opacity: 1;
    }
}

 
.info{
    position: absolute;
    top: -10%;
    left: 5px;
    margin: 10px 15px;
    color: white;
    -webkit-animation-name: posi;
    -webkit-animation-duration:2s ;
    animation-name: posi;
    animation-duration: 2s;
    z-index: 1;
}


@-webkit-keyframes posi{
    from { left: 25%;}
    to{left: 15%;}
}

@keyframes posi{
    /* from { left: 25%;}
    to{left: 0;} */

    0% {top:-10%}
    50% {top: 15%}
    100% {top:-10%}
}

.zoomin-out{
    transform: scale(1.5,1.5);
    -webkit-animation-name: zoomin ;
    -webkit-animation-duration: 5s;
    animation-name: zoomin ;
    animation-duration: 5s;
} 



@-webkit-keyframes zoomin{
    from { transform: scale(1,1);}
    to{transform: scale(1.5,1.5);}
}

@keyframes zoomin{
    from { transform: scale(1,1);}
    to{transform: scale(1.5,1.5);}
}

.cover-image{
    /* opacity: 1;
    transition:  opacity 0.5s 2s; */
    object-fit: cover;
    object-position: center;
}




@-webkit-keyframes zoomin{
    from { transform: scale(1,1);}
    to{transform: scale(1.5,1.5);}
}

@keyframes zoomin{
    from { transform: scale(1,1);}
    to{transform: scale(1.5,1.5);}
}


.loader-container{
    display: flex;
    position: absolute;
    width: 100%;
    justify-content: center;
    /* background-color: black; */
    top: 50%;
}