.hexagon-grid-container{width:100%;height:640px;overflow:hidden;position:relative}.hexagon-grid{position:absolute;left:calc(50% - 360px);top:50%;transform:rotateX(55deg) rotate(-45deg);transform-style:preserve-3d;backface-visibility:hidden}.hexagon{position:absolute;color:#1e1e22;overflow:visible;transform:translateZ(0);transform-style:preserve-3d;backface-visibility:hidden;transition:transform .7s cubic-bezier(.175,.885,.32,1.275);contain:layout style}.hexagon:after{content:"";position:absolute;inset:5%;border-radius:50%;box-shadow:0 20px 40px #000000e6;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:-1}.hexagon.active{transform:translateZ(8px)}.hexagon.active:after{opacity:1}.hexagon:hover{transform:translateZ(20px);transition:transform .5s cubic-bezier(.175,.885,.32,1.275)}.hexagon:hover:after{opacity:1;box-shadow:0 25px 50px #000}.hexagon .hex-bg{width:100%;height:100%;overflow:visible}.hexagon .hex-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);width:68px;height:68px;color:#1e1e22;transition:color .8s ease,filter .8s ease}.hexagon.active .hex-icon{color:#25392a;filter:drop-shadow(0 0 12px rgba(37,57,42,.7))}.hexagon:hover .hex-icon{color:#3a5c42;filter:drop-shadow(0 0 14px rgba(58,92,66,.8))}.hex-animated-stroke{stroke-dasharray:25 75;stroke-dashoffset:0;opacity:0;transition:opacity .3s ease}.hexagon.active .hex-animated-stroke{opacity:1;animation:dash .8s linear 4}.hexagon:hover .hex-animated-stroke{opacity:1;animation:dash .8s linear infinite}@keyframes dash{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}