body {
    font-family: "Montserrat", sans-serif;
}

.clear:before, .clear:after { content: " "; display: table; }
.clear:after { clear: both; }

.hexagon-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: nowrap;
}

.hexagon-item {
    width: 200px;
    height: 173.20508px;
    position: relative;
    cursor: pointer;
    z-index: 0;
    transition: all 0.3s ease;
    transform: rotate(30deg);
}

.hex-item {
    position: absolute;
    top: 0;
    left: 50px;
    width: 100px;
    height: 173.20508px;
    transform: rotate(30deg);
    transform-origin: center center;
}

.hex-item:first-child { z-index: 0; transform: scale(0.9) rotate(30deg); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hex-item:last-child { z-index: 1; transform: rotate(30deg); transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); }

.hex-item div {
    position: absolute;
    top: 0;
    width: 100px;
    height: 173.20508px;
    transform-origin: center center;
}

.hex-item div::before, .hex-item div::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    transition: background-color 0.3s ease;
}

.hex-item div:before { top: 0; }
.hex-item div:after { bottom: 0; }

.hex-item div:nth-child(1) { transform: rotate(0deg); }
.hex-item div:nth-child(2) { transform: rotate(60deg); }
.hex-item div:nth-child(3) { transform: rotate(120deg); }

.hex-content { display: block; width: 156px; height: 180px; margin: 0 auto; position: relative; text-align: center; transform: rotate(-30deg); }

.hex-content .hex-content-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.hex-content .title { display: block; font-family: "Montserrat", sans-serif; font-size: 14px; letter-spacing: 1px; line-height: 24px; text-transform: uppercase; transition: color 0.3s ease; }

.hex-content svg { position: absolute; top: -13px; left: -7px; z-index: -1; transform: scale(0.87) rotate(30deg); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hexagon-item:hover { z-index: 1; }
.hexagon-item:hover .hex-item:first-child { transform: scale(1.2) rotate(30deg); opacity: 1; }
.hexagon-item:hover .hex-item:last-child { transform: scale(1.3) rotate(30deg); opacity: 1; }
.hexagon-item:hover .hex-content { transform: rotate(-30deg); }
.hexagon-item:hover .hex-content .title { animation: focus-in-contract 0.5s cubic-bezier(0.25,0.46,0.45,0.94) both; }

@keyframes focus-in-contract { 0%{letter-spacing:1em;filter:blur(12px);opacity:0;} 100%{filter:blur(0);opacity:1;} }

@media only screen and (max-width:767px){
    .hexagon-menu { flex-wrap: wrap; gap: 30px; justify-content: center; }
    .hexagon-item { margin: 0 auto 50px; transform: rotate(30deg); }
}

/* Méret választó */
.hex-small .hex-content { width: 120px; height: 130px; }
.hex-medium .hex-content { width: 156px; height: 180px; }
.hex-large .hex-content { width: 200px; height: 230px; }

.hex-small .hex-content .title { font-size: 12px; }
.hex-medium .hex-content .title { font-size: 14px; }
.hex-large .hex-content .title { font-size: 18px; }