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;
    width: 100%;
    margin: 0 auto;
}

.hexagon-item {
    width: 200px;
    height: 173.2px; /* Pontos arány a 200px szélességhez */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: rotate(30deg);
}

.hex-item {
    position: absolute;
    top: 0;
    left: 25%; /* Pontos középre helyezés a forgatáshoz */
    width: 50%;
    height: 100%;
    transform: rotate(30deg);
    transform-origin: center center;
}

.hex-item:first-child { z-index: 0; transform: scale(0.95) 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: 100%;
    height: 100%;
    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: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Kitölti a hexagon-item szélességét */
    height: 100%; /* Kitölti a hexagon-item magasságát */
    position: absolute; 
    top: 0;
    left: 0;
    text-align: center; 
    transform: rotate(-30deg); 
    z-index: 2;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-size: cover;
    background-position: center;
}

.hex-content .hex-content-inner { position: relative; z-index: 3; padding: 10px; }

.hex-content .title { 
    display: block; 
    font-family: "Montserrat", sans-serif; 
    font-size: 14px; 
    letter-spacing: 1px; 
    line-height: 1.2; 
    text-transform: uppercase; 
    transition: color 0.3s ease; 
    text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
}

.hexagon-item:hover { z-index: 5; }
.hexagon-item:hover .hex-item:first-child { transform: scale(1.1) rotate(30deg); }
.hexagon-item:hover .hex-item:last-child { transform: scale(1.2) 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; }
}

/* Méretek skálázással a stabilitásért */
.hex-small { transform: scale(0.7) rotate(30deg); }
.hex-medium { transform: scale(1) rotate(30deg); }
.hex-large { transform: scale(1.3) rotate(30deg); }