.parent{perspective:1000px}.parent-left{width:362px;height:282px;min-width:362px;min-height:282px}.parent-top{width:462px;height:388px;min-width:462px;min-height:388px}.parent-right{width:362px;height:282px;min-width:362px;min-height:282px}.parent:hover .card{box-shadow:12px 24px 26px 4px #c9d0d499}.parent-left:hover .card{transform:rotate3d(.3,-.5,0,10deg)}.parent-top:hover .card{transform:rotate3d(.4,0,0,10deg)}.parent-right:hover .card{transform:rotate3d(.3,.5,0,10deg)}.card{height:100%;border-radius:50px;transition:all .5s ease-in-out;background:linear-gradient(180deg,#f9fbfc,#fbfdfd 45.51%,#f5f7f8);border:1px solid #cadce6;box-shadow:12px 24px 26px 4px #dfe9ef99;transform-style:preserve-3d}.bottom{width:fit-content;background-color:transparent;transform:translateZ(26px)}.social-button{aspect-ratio:1;cursor:pointer;transition:transform .2s ease-in-out .1s;z-index:1}.parent:hover .social-button{transform:translateZ(40px)}.image{aspect-ratio:1;cursor:pointer;transition:transform .2s ease-in-out .1s;z-index:2}.parent:hover .image{transform:translateZ(50px);box-shadow:12px 24px 26px 4px #dfe9ef99}.parent-top:hover .image{clip-path:polygon(0 0,100% 0,100% 85%,85% 100%,0 100%)}.texts{aspect-ratio:1;cursor:pointer;transition:transform .2s ease-in-out .1s;z-index:3}.parent:hover .texts{transform:translateZ(70px)}.loader{height:320px;aspect-ratio:1;position:relative}.loader .box{position:absolute;background:hsla(0,0%,100%,.2);border:1px solid red;border-radius:50%;animation-name:ripple;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:1}.loader .box:first-child{inset:20%;border-color:#dfe9ef;box-shadow:0 0 40px 3px #4e4e4e05;background-color:#fff;z-index:99;display:flex;justify-content:center;align-items:center;& img{width:88px;height:101px;margin-right:8px}}.loader .box:nth-child(2){inset:10%;z-index:98;border-color:#dfe9ef;box-shadow:0 0 40px 3px #4e4e4e0d;background-color:#fff;opacity:40%;animation-delay:.2s}.loader .box:nth-child(3){inset:0;z-index:97;border-color:#cadce6;box-shadow:0 0 40px 3px #4e4e4e1a;background-color:#fff;opacity:20%;animation-delay:.4s}.loader .logo{position:absolute;inset:0;display:grid;place-content:center;padding:30%}.loader .logo svg{fill:red;width:100%;animation-name:color-change;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:1}@keyframes ripple{0%{transform:scale(1);box-shadow:0 10px 10px 0 rgba(0,0,0,.3)}50%{transform:scale(1.3);box-shadow:0 30px 20px 0 rgba(0,0,0,.3)}to{transform:scale(1);box-shadow:0 10px 10px 0 rgba(0,0,0,.3)}}@keyframes color-change{0%{fill:red}50%{fill:#fff}to{fill:red}}