.hexagon {
    cursor: default;
    position: relative;
    width: 300px;
    height: 173.20508075688775px;
    background-color: #00458f;
    margin: 86.60254037844388px auto 0 auto;
    box-shadow: 0 0 50px rgba(0, 255, 255, 0);
    border-left: solid 1px #3c3434;
    border-right: solid 1px #3c3434;
    display: grid;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    border-radius: 20px;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 212.13203435596424px;
    height: 212.13203435596424px;
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    left: 42.93398282201788px;
    box-shadow: 0 0 50px rgba(0, 255, 255, 0);
    transition: 0s;
}

.hexagon:before {
    top: -100.066017px;
    border-top: solid 1.4142135623730951px #3c3434;
    border-right: solid 1.4142135623730951px #3c3434;
    border-radius: 20px;
}

.hexagon:after {
    bottom: -100.066017px;
    border-bottom: solid 1.4142135623730951px #3c3434;
    border-left: solid 1.4142135623730951px #3c3434;
    border-radius: 20px;
}

.hexagon span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 25px;
    color: #f47721;
    top: 0.5773502691896257px;
    left: 0;
    width: 298px;
    height: 172.0504px;
    z-index: 2;
    background: inherit;
    transition: 1s;
}

.hexagon:hover {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    width: 300px;
    height: 173.20508075688775px;
    background-color: #00458f;
    margin: 86.60254037844388px auto 0 auto;
    // box-shadow: 0 0 50px rgba(0, 255, 255, 1);
    // border-left: solid 10px #f47721;
    // border-right: solid 10px #f47721;
}

.hexagon:hover:before,
.hexagon:hover:after {
    width: 212.13203435596424px;
    height: 212.13203435596424px;
    transform: scaleY(0.5774) rotate(-45deg);
    // left: 33.93398282201788px;
    // box-shadow: 0 0 50px rgba(0, 255, 255, 1);
}

.hexagon:hover:before {
    top: -100.066017px;
    // border-top: solid 14.142135623730951px #f47721;
    // border-right: solid 14.142135623730951px #f47721;
}

.hexagon:hover:after {
    bottom: -100.066017px;
    // border-bottom: solid 14.142135623730951px #f47721;
    // border-left: solid 14.142135623730951px #f47721;
}

.hexagon:hover span {
    font-size: 25px;
    color: #f47721;
    top: 5.773502691896257px;
    width: 280px;
    height: 161.6581px;
}