body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#131313}.container{position:relative;margin:10px}.container .card{position:relative;width:320px;height:450px;background:#232323;border-radius:20px;overflow:hidden}.container .card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#9bdc28;-webkit-clip-path:circle(150px at 80% 20%);clip-path:circle(150px at 80% 20%);transition:.5s ease-in-out}.container .card:hover:before{-webkit-clip-path:circle(300px at 80% -20%);clip-path:circle(300px at 80% -20%)}.container .card:after{content:"Pass";position:absolute;top:30%;left:-7%;font-size:9em;font-weight:800;font-style:italic;color:rgba(255,255,25,.05)}.container .card .imgBx{position:absolute;top:50%;transform:translateY(-50%);z-index:10000;width:100%;height:220px;transition:.5s}.container .card:hover .imgBx{top:0;transform:translateY(0) rotate(-25deg)}.container .card .imgBx img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(25deg);width:270px}.container .card .contentBx{position:absolute;bottom:0;width:100%;height:100px;text-align:center;transition:1s;z-index:10}.container .card:hover .contentBx{height:210px}.container .card .contentBx h2{position:relative;font-weight:600;letter-spacing:1px;color:#fff;margin:0}.container .card .contentBx .color,.container .card .contentBx .size{display:flex;justify-content:center;align-items:center;transition:.5s;opacity:0;visibility:hidden;padding:0 20px}.container .card:hover .contentBx .size{opacity:1;visibility:visible;transition-delay:.5s}.container .card:hover .contentBx .color{opacity:1;visibility:visible;transition-delay:.6s}.container .card .contentBx .color h3,.container .card .contentBx .size h3{color:#fff;font-weight:300;font-size:14px;text-transform:uppercase;letter-spacing:2px;margin-right:10px}.container .card .contentBx .size span{width:56px;height:26px;text-align:center;line-height:26px;font-size:14px;display:inline-block;background:#fff;margin:0 5px;transition:.5s;color:#111;border-radius:4px;cursor:pointer}.container .card .contentBx .size span:hover{background:#9bdc28}.container .card .contentBx .color span{width:20px;height:20px;background:#ff0;border-radius:50%;margin:0 5px;cursor:pointer}.container .card .contentBx .color span:nth-child(2){background:#9bdc28}.container .card .contentBx .color span:nth-child(3){background:#03a9f4}.container .card .contentBx .color span:nth-child(4){background:#e91e63}.container .card .contentBx a{display:inline-block;padding:10px 20px;background:#fff;border-radius:4px;text-decoration:none;font-weight:600;color:#111;opacity:0;transform:translateY(50px);transition:.5s;margin-top:0}.container .card:hover .contentBx a{opacity:1;transform:translateY(0);transition-delay:.75s}@font-face{font-family:Poppins;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/poppins-devanagari-400-normal.87c72f23.woff2) format("woff2"),url(/_next/static/media/poppins-all-400-normal.268c923b.woff) format("woff");unicode-range:U+0900-097f,U+1cd0-1cf6,U+1cf8-1cf9,U+200c-200d,U+20a8,U+20b9,U+25cc,U+a830-a839,U+a8e0-a8fb}@font-face{font-family:Poppins;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/poppins-latin-ext-400-normal.591327bf.woff2) format("woff2"),url(/_next/static/media/poppins-all-400-normal.268c923b.woff) format("woff");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Poppins;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/poppins-latin-400-normal.916d3686.woff2) format("woff2"),url(/_next/static/media/poppins-all-400-normal.268c923b.woff) format("woff");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:DM Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/dm-sans-latin-ext-400-normal.a4a278e0.woff2) format("woff2"),url(/_next/static/media/dm-sans-all-400-normal.964a7d3c.woff) format("woff");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:DM Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/dm-sans-latin-400-normal.cefcfa53.woff2) format("woff2"),url(/_next/static/media/dm-sans-all-400-normal.964a7d3c.woff) format("woff");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}