@charset “utf-8”;

/* CSS Document */

body{

margin:0px;

padding: 0px;

background-color:#eef8ff;

}

a{

text-decoration:none;

}

.box1{

width:300px;

box-shadow: 2px 2px 30px rgba(0,0,0,0.2);

border-radius: 10px;

overflow: hidden;

margin: 25px;

}

.slide-img{

height: 450px;

position:relative;

}

.slide-img img{

width:100%;

height: 100%;

object-fit: cover;

box-sizing: border-box;

}

.detail-box{

width: 100%;

display: flex;

justify-content: space-between;

align-items: center;

padding: 10px 20px;

box-sizing: border-box;

font-family: calibri;

}

.type{

display: flex;

flex-direction: column;

}

.type a{

color:#222222;

margin: 5px 0px;

font-weight: 700;

letter-spacing: 0.5px;

padding-right: 8px;

}

.type span{

color:rgba(26,26,26,0.5);

}

.price{

color: #333333;

font-weight: 600;

font-size: 1.1rem;

font-family: poppins;

letter-spacing: 0.5px;

}

.overlay{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

width:100%;

height: 100%;

background-color: rgba(92,95,236,0.6);

display: flex;

justify-content: center;

align-items: center;

}

.buy-btn{

width:160px;

height: 40px;

display: flex;

justify-content: center;

align-items: center;

background-color: #FFFFFF;

color:#252525;

font-weight: 700;

letter-spacing: 1px;

font-family: calibri;

border-radius: 20px;

box-shadow: 2px 2px 30px rgba(0,0,0,0.2);

}

.buy-btn:hover{

color:#FFFFFF;

background-color: #f15fa3;

transition: all ease 0.3s;

}

.overlay{

visibility: hidden;

}

.slide-img:hover .overlay{

visibility: visible;

animation:fade 0.5s;

}

@keyframes fade{

0%{

opacity: 0;

}

100%{

opacity: 1;

}

}

.slider{

width:100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}