@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins',sans-serif;
   user-select: none;
}
body
{
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background-color: #151515;
}
.card
{
   position: relative;
   width: 350px;
   height: 350px;
   display: flex;
   align-items:center;
   justify-content: center;
   transition: 0.5s;
   border-radius: 20px;
}
.card:hover
{
   width: 600px;
   transition-delay: 0.5s;
}
.card .circle
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.card .circle::before
{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 350px;
   height: 350px;
   border: 8px solid var(--clr);
   background-color: #191919;
   border-radius: 50%;
   filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));
   transition: 0.5s;
   transition-delay: 0.2s;
}
.card:hover .circle::before
{
   transition-delay: 0.5s;
   width: 100%;
   height: 100%;
   border-radius: 35px;
   background-color: var(--clr);
}
.card .circle .logo
{
   position: absolute;
   width: 250px;
   transition: 0.5s;
   transition-delay: 0.5s;
}
.card:hover .circle .logo
{
   transform: scale(0);
   transition-delay: 0s;
}
.card .product_img
{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%) scale(0) rotate(315deg);
   height: 300px;
   transition: 0.5s ease-in-out;
}
.card:hover .product_img
{
   transition-delay: 0.75s;
   top: 25%;
   left: 82%;
   height: 500px;
   transform: translate(-50%,-50%) scale(1) rotate(15deg);
}
.card .content
{
   color: white;
   position: absolute;
   width: 60%;
   left: 20%;
   padding: 20px 20px 20px 40px;
   opacity: 0;
   transition: 0.3s;
   visibility: hidden;
}
.card:hover .content
{
   transition-delay: 1s;
   opacity: 1;
   visibility: visible;
   left: 10px;
}
.card .content h2
{
   text-transform: uppercase;
   font-size: 2.5em;
   line-height: 1em;
}
.card .content a
{
   position: relative;
   color: #111;
   background-color: white;
   padding: 10px 20px;
   border-radius: 10px;
   display: inline-block;
   text-decoration: none;
   font-weight: 600;
   margin-top: 10px;
}