*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins', sans-serif}body{display:flex;justify-content:center;align-items:center;background:#0d1113;color:white;min-height:100vh}a{color:white}.container{width:1100px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:30px}.container .card{position:relative;width:300px;height:400px;background:linear-gradient(to right, #2C5364, #203A43, #0F2027);display:flex;justify-content:center;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,0.2);overflow:hidden;opacity:.7;transition:0.5s}.container .card:hover{opacity:1}.container .card:hover .content h2{opacity:1;transform:translateY(-75px)}.container .card:hover .content h3{opacity:1}.container .card:hover span:nth-child(1),.container .card:hover span:nth-child(2),.container .card:hover span:nth-child(3),.container .card:hover span:nth-child(4){opacity:1}.container .card:before{content:'';position:absolute;top:2px;left:-50px;bottom:2px;width:60%;background:rgba(255,255,255,0.05);pointer-events:none;transform:skew(10deg)}.container .card span:nth-child(1){position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(to right, transparent, #1779ff);animation:animate1 2s linear infinite;opacity:0}.container .card span:nth-child(2){position:absolute;top:0;right:0;width:3px;height:100%;background:linear-gradient(to bottom, transparent, #1779ff);animation:animate2 2s linear infinite;animation-delay:1s;opacity:0}.container .card span:nth-child(3){position:absolute;bottom:0;left:0;height:3px;width:100%;background:linear-gradient(to left, transparent, #1779ff);animation:animate3 2s linear infinite;opacity:0}.container .card span:nth-child(4){position:absolute;bottom:0;left:0;width:3px;height:100%;background:linear-gradient(to top, transparent, #1779ff);animation:animate4 2s linear infinite;opacity:0;animation-delay:1s}@keyframes animate1{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes animate2{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}@keyframes animate3{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}@keyframes animate4{0%{transform:translateY(100%)}100%{transform:translateY(-100%)}}.container .card .content{padding:30px;text-align:center}.container .card .content h2{position:absolute;right:30px;font-size:4rem;font-weight:800;color:white;z-index:1;opacity:0.1;transition:0.5s}.container .card .content h3{position:relative;font-size:1.8rem;color:white;z-index:2;opacity:.5;transition:0.5s;letter-spacing:0px;margin-bottom:10px}.container .card .content p{position:relative;font-weight:300}.container .card .content a{background:#0d1113;text-decoration:none;padding:10px 20px;font-weight:300;border-radius:5px;font-size:1rem;transition:0.5s;cursor:pointer;position:relative;display:inline-block;margin-top:20px}.container .card .content a:hover{background:#1779ff}@media (max-width: 768px){.card{margin:20px 0}}
/*# sourceMappingURL=style.css.map */