.card3 {
    width: 340px;
    height: 350px;
    border-radius: 20px;
    margin: 20px auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
    transition: 0.5s;
}

.card3>img {
    width: 340px;
    z-index: 2;
    transition: 0.5s;
    border-radius: 20px;

}

.card-image1 {
    height: 350px;
}

.card-image1 img {
    object-fit: cover;
}

.card3:hover .card-image1 {
    opacity: 0.8;
    transition: 0.8s;
    transition-delay: 0.4s;
    transform: rotateY(180deg);
}

.details1 {
    width: 100%;
    height: 120px;
    position: absolute;
    bottom: -120px;
    left: 0;
    opacity: 0;
    z-index: 3;
    padding: 10px;
    color: white;
    background-image: linear-gradient(to right, #7920ca, #0f0ad4);
    transition: 0.4s;
}

.details1 h2 {
    color: white;
}

.card3:hover .details1 {
    bottom: 0;
    left: 0;
    transition-delay: 0.9s;
    opacity: 1;
}

.details1>ul {
    margin-top: 0.8vmax;
    display: flex;
    justify-content: space-evenly;
}

.details1>ul li {
    list-style: none;
}