:root{--color-c1:#AB9ACA;--color-oc1:rgba('171', '154', '202', .2);--color-c2:#F37253;--color-oc1:rgba('243', '117', '83', .2);--color-c3:#8DA9D8;--color-oc3:rgba('141', '169', '216', .2);--color-c4:#FECA80;--color-oc4:rgba('254', '202', '128', .2);--color-c5:#9CD194;--color-oc5:rgba('156', '209', '148', .2);--color-c6:#BBBDBF;--color-oc6:rgba('187', '189', '191', .2);--color-c7:#F59EBC;--color-oc7:rgba('245', '158', '188', .2);--color-c8:#80CAD7;--color-oc8:rgba('128', '202', '215', .2)}.geniusx{position:relative;display:flex;-webkit-box-reflect:below 1px linear-gradient(transparent,transparent,transparent,#0004)}.geniusx .box{position:relative;width:320px;height:400px;margin:0 20px;border-radius:20px;background:linear-gradient(45deg,#2da2ff 25%,#444 25%,#444 50%,#2da2ff 50%,#2da2ff 50%,#2da2ff 75%,#444 75%,#444 100%);background-size:40px 40px;filter:grayscale(1);animation:animateBg 1s linear infinite;animation-play-state:paused;transition:filter 1s;display:flex;justify-content:center;clip-path:polygon(0 25%,50% 0,100% 25%,100% 75%,50% 100%,0 75%)}.geniusx .box:hover{animation-play-state:running;filter:grayscale(0)}@keyframes animateBg{0%{background-position:0 0}100%{background-position:40px}}.geniusx .box img{position:absolute;bottom:0;width:auto;height:90%;transition:height .5s;object-fit:cover}.geniusx .box:hover img{width:auto;height:100%}.geniusx2{position:relative;display:flex;justify-content:center;align-items:center}.geniusx2 .hexagon{position:relative;width:100%;margin:50px 20px 40px;padding-top:100%}.geniusx2 .hexagon::before{content:'';position:absolute;bottom:-60px;width:100%;height:60px;background:radial-gradient(rgba(0,0,0,.2),transparent,transparent);border-radius:50%;transition:.5s}.geniusx2 .hexagon:hover::before{opacity:.8;transform:scale(.8)}.geniusx2 .hexagon .shape{position:absolute;top:0;left:0;width:100%;height:100%;clip-path:polygon(0 25%,50% 0,100% 25%,100% 75%,50% 100%,0 75%);transition:.5s;filter:grayscale(0)}.geniusx2 .hexagon .shape.c1{background:var(--color-c1)}.geniusx2 .hexagon .shape.c2{background:var(--color-c2)}.geniusx2 .hexagon .shape.c3{background:var(--color-c3)}.geniusx2 .hexagon .shape.c4{background:var(--color-c4)}.geniusx2 .hexagon .shape.c5{background:var(--color-c5)}.geniusx2 .hexagon .shape.c6{background:var(--color-c6)}.geniusx2 .hexagon .shape.c7{background:var(--color-c7)}.geniusx2 .hexagon .shape.c8{background:var(--color-c8)}.geniusx2 .hexagon:hover .shape{transform:translateY(-30px)}.geniusx2 .hexagon .shape img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:auto;height:90%;transition:height .5s;filter:grayscale(1)}.geniusx2 .hexagon:hover .shape img{filter:grayscale(0)}.geniusx2 .hexagon:hover .shape img{height:100%}.geniusx2 .hexagon .shape .content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:20px;text-align:center;color:#fff;opacity:0;transition:.5s}.geniusx2 .hexagon .shape .content h3{color:#fff}.geniusx2 .hexagon .shape.c1 .content{background:linear-gradient(45deg,var(--color-c1),var(--color-c1))}.geniusx2 .hexagon .shape.c2 .content{background:linear-gradient(45deg,var(--color-c2),var(--color-c2))}.geniusx2 .hexagon .shape.c3 .content{background:linear-gradient(45deg,var(--color-c3),var(--color-c3))}.geniusx2 .hexagon .shape.c4 .content{background:linear-gradient(45deg,var(--color-c4),var(--color-c4))}.geniusx2 .hexagon .shape.c5 .content{background:linear-gradient(45deg,var(--color-c5),var(--color-c5))}.geniusx2 .hexagon .shape.c6 .content{background:linear-gradient(45deg,var(--color-c6),var(--color-c6))}.geniusx2 .hexagon .shape.c7 .content{background:linear-gradient(45deg,var(--color-c7),var(--color-c7))}.geniusx2 .hexagon .shape.c8 .content{background:linear-gradient(45deg,var(--color-c8),var(--color-c8))}.geniusx2 .hexagon:hover .shape .content{opacity:1}.blob{background:#000;border-radius:50%;box-shadow:0 0 0 0 #000;margin-right:10px;height:16px;width:16px;transform:scale(1);animation:pulse-black 2s infinite;display:inline-flex}@keyframes pulse-black{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(0,0,0,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px transparent}100%{transform:scale(.95);box-shadow:0 0 0 0 transparent}}.blob.white{background:#fff;box-shadow:0 0 0 0 #fff;animation:pulse-white 2s infinite}@keyframes pulse-white{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,255,255,0)}}.blob.red{background:#ff5252;box-shadow:0 0 0 0 #ff5252;animation:pulse-red 2s infinite}@keyframes pulse-red{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,82,82,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(255,82,82,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,82,82,0)}}.blob.orange{background:#ff793f;box-shadow:0 0 0 0 #ff793f;animation:pulse-orange 2s infinite}@keyframes pulse-orange{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,121,63,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(255,121,63,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,121,63,0)}}.blob.yellow{background:#ffb142;box-shadow:0 0 0 0 #ffb142;animation:pulse-yellow 2s infinite}@keyframes pulse-yellow{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,177,66,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(255,177,66,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,177,66,0)}}.blob.blue{background:#34ace0;box-shadow:0 0 0 0 #34ace0;animation:pulse-blue 2s infinite}@keyframes pulse-blue{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(52,172,224,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(52,172,224,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(52,172,224,0)}}.blob.green{background:#33d9b2;box-shadow:0 0 0 0 #33d9b2;animation:pulse-green 2s infinite}@keyframes pulse-green{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(51,217,178,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(51,217,178,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(51,217,178,0)}}.blob.purple{background:#8e44ad;box-shadow:0 0 0 0 #8e44ad;animation:pulse-purple 2s infinite}@keyframes pulse-purple{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(142,68,173,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(142,68,173,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(142,68,173,0)}}