.cards{display:flex;gap:5%;justify-content:center}.card-a{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;text-align:left;height:auto;width:360px;min-height:120px;border-radius:12px;color:#fff;cursor:pointer;transition:all 0.5s ease-in-out;position:relative;overflow:hidden;padding:15px;gap:12px;flex-wrap:wrap;background:rgb(30 27 75 / .4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 10px rgb(157 78 221 / .2),inset 0 0 20px rgb(255 255 255 / .05);background-image:radial-gradient(circle at 25% 25%,rgb(168 85 247 / .15),transparent 60%),radial-gradient(circle at 75% 75%,rgb(233 213 255 / .1),transparent 70%);background-blend-mode:overlay;border:1px solid rgb(168 85 247 / .2)}.card-a:first-child p.second-text{white-space:normal;word-break:normal;max-width:100%;line-height:1.5}@keyframes waterRipple{0%,100%{background-position:25% 25%,75% 75%}50%{background-position:30% 30%,70% 70%}}.card-a{animation:waterRipple 8s infinite ease-in-out}.card-a svg{width:36px;height:36px;fill:#fff;flex-shrink:0;filter:drop-shadow(0 0 5px rgb(168 85 247 / .5));transition:all 0.3s ease}.card-a p.tip{font-size:1.1em;font-weight:700;margin:0;white-space:nowrap;text-shadow:0 0 10px rgb(168 85 247 / .4)}.card-a p.second-text{font-size:.8em;max-width:220px;line-height:1.4;flex:1 1 auto;color:#e9d5ff}.card-a:hover{box-shadow:0 0 20px rgb(157 78 221 / .6),0 0 40px rgb(157 78 221 / .3),inset 0 0 30px rgb(255 255 255 / .1);transform:scale(1.05);background-color:rgb(46 43 95 / .5)}.card-a:hover svg{transform:scale(1.1);filter:drop-shadow(0 0 10px rgb(168 85 247 / .8))}.cards:hover>.card-a:not(:hover){filter:blur(4px) brightness(.8);transform:scale(.95);opacity:.9}.card-a::after{content:'';position:absolute;width:100px;height:100px;background:radial-gradient(circle,rgb(168 85 247 / .2),transparent 70%);top:-30px;left:-30px;z-index:-1;transition:all 0.7s ease}.card-a:hover::after{transform:scale(1.5) translate(20px,20px);opacity:.5}@media (hover:none),(pointer:coarse){.card-a{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(180deg,rgb(30 27 75 / .48),rgb(30 27 75 / .36));box-shadow:0 0 6px rgb(157 78 221 / .16),inset 0 0 10px rgb(255 255 255 / .04);transition:transform 0.25s ease,box-shadow 0.25s ease,background-color 0.25s ease;animation:waterRipple 16s infinite ease-in-out}.card-a:hover,.cards:hover>.card-a:not(:hover),.card-a:hover::after{transform:none!important;box-shadow:none!important;filter:none!important;opacity:1!important}.cards:hover>.card-a:not(:hover){filter:none!important}.card-a::after{transition:opacity 0.3s ease,transform 0.3s ease;opacity:.35}.card-a svg{filter:none}}@media (min-width:768px) and (max-width:1024px){.cards{flex-wrap:wrap;gap:20px;justify-content:center}.card-a{width:45%;min-width:280px;max-width:360px;margin-top:15px;backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(180deg,rgb(30 27 75 / .48),rgb(30 27 75 / .36));box-shadow:0 0 8px rgb(157 78 221 / .18),inset 0 0 12px rgb(255 255 255 / .04);animation:waterRipple 14s infinite ease-in-out}.cards:hover>.card-a:not(:hover){filter:none;transform:none;opacity:1}}@media (max-width:768px){.cards{flex-direction:column;align-items:center;gap:18px}.card-a{width:90%;padding:14px;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(180deg,rgb(30 27 75 / .56),rgb(30 27 75 / .42));box-shadow:0 0 6px rgb(157 78 221 / .14),inset 0 0 8px rgb(255 255 255 / .03);animation:waterRipple 18s infinite ease-in-out}.card-a p.tip{font-size:1em;text-align:center;white-space:normal}.card-a p.second-text{max-width:100%;text-align:center}.card-a:hover,.card-a:hover svg,.card-a:hover::after,.cards:hover>.card-a:not(:hover){transform:none!important;box-shadow:0 0 6px rgb(157 78 221 / .14)!important;filter:none!important;opacity:1!important}}@media (max-width:480px){.card-a{flex-direction:row;align-items:center;min-height:100px;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.card-a svg{width:32px;height:32px}.card-a p.tip{font-size:.95em}.card-a p.second-text{font-size:.75em}}@media (min-width:1024px) and (max-width:1280px){.cards{gap:3%;flex-wrap:wrap}.card-a{width:280px;min-height:110px;margin-top:15px}.card-a p.tip{font-size:1em;white-space:normal}}@media (min-width:1280px) and (max-width:1440px){.cards{gap:4%;flex-wrap:wrap}.card-a{margin-top:15px;width:320px;backdrop-filter:blur(6px);animation:waterRipple 15s infinite ease-in-out}.card-a p.tip{font-size:1.05em;white-space:normal}}