* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

body {
    /* background: black; */
    background: hsla(205, 46%, 10%, 1);

background: linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0E1C26", endColorstr="#2A454B", GradientType=1 );
    padding-inline: 9rem;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Card-container {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.card {
    width: 10rem;
    height: 100%;
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
    -webkit-box-reflect: below 1rem
  linear-gradient(to bottom , transparent,rgba(0, 0, 0, 0.253));
    transition: 0.5s ease-in-out;
  
}

.card img {
    width: 25rem;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-30%, -50%);
    transition: 0.7s ease-in-out;
 
}

.card:hover {
    width: 30rem;
}

.card:hover img {
    left: 50%;
    transform: translate(-50%, -50%) rotate(20deg);

}
.card:nth-child(1){
background:#B6F33A ;
}
.card:nth-child(2){
 background:#5674B6 ;   
}
.card:nth-child(3){
    background: #E43D77;
}
.card:nth-child(4){
   background: #66CADD; 
}
.card:nth-child(5){
   background: #F4C742; 
}