@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

*, *::before, *::after {
    box-sizing: border-box;
}

.honeycomb-cell {
    cursor: pointer;
    flex: 0 1 200px;
    max-width: 200px;
    height: 110px;
    margin: 50px 12px 20px;
    position: relative;
    padding: 0.5em;
    text-align: center;
    z-index: 1;
    animation: pulsateWithPause 10s infinite ease-in-out;
    animation-delay: calc(var(--cell-index) * 0.3s);
    transform-style: preserve-3d;
    perspective: 600px;
}

    /* Main 3D Effect */
    .honeycomb-cell::before {
        content: '';
        background: linear-gradient(to bottom, #fdd040, #d89020); /* Gradient for depth */
        transform: scale(2.55) translateZ(20px); /* Slight lift */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6), inset 3px 3px 5px rgba(255, 255, 255, 0.4);
    }

    /* Adding a 3D Edge */
    .honeycomb-cell::after {
        content: '';
        background: rgba(0, 0, 0, 0.2);
        opacity: 0.5;
        transform: translateZ(-5px); /* Simulate shadow depth */
        transition: opacity 350ms, transform 0.3s;
    }

    /* Enhancing the Hover Effect */
    .honeycomb-cell:hover {
        transform: perspective(500px) translateY(-5px);
    }

        .honeycomb-cell:hover::before {
            background: linear-gradient(to bottom, rgb(18, 170, 74), rgb(10, 120, 50));
            box-shadow: 7px 7px 14px rgba(0, 0, 0, 0.7), inset 4px 4px 6px rgba(255, 255, 255, 0.5);
        }

        .honeycomb-cell:hover::after {
            opacity: 0;
        }

.honeycomb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    margin-top: 0px;
    transform: translateY(50px);
}

.honeycomb-cell {
    flex: 0 1 170px; /* Increased size */
    max-width: 200px;
    height: 90px; /* Adjusted proportionally */
    margin: 35px 12px 20px;
    position: relative;
    padding: 0.5em;
    text-align: center;
    z-index: 1;
    animation: pulsateWithPause 10s infinite ease-in-out;
    animation-delay: calc(var(--cell-index) * 0.3s); /* Staggered effect */
}

.honeycomb-cell__title {
    font-family: 'Montserrat', sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    hyphens: auto;
    word-break: break-word;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.2em; /* Increased for better readability */
    transition: opacity 350ms;
}

    .honeycomb-cell__title > small {
        font-family: 'Montserrat', sans-serif;
        font-weight: 250;
        margin-top: 0.2em;
    }

.honeycomb-cell__image {
    object-fit: cover;
    object-position: center;
}

.honeycomb-cell::before,
.honeycomb-cell::after,
.honeycomb-cell__image {
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    display: block;
    position: absolute;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}

.honeycomb-cell::before {
    content: '';
    background: #fdd040;
    transform: scale(1.055);
}

.honeycomb-cell::after {
    content: '';
    background: #fdd040;
    opacity: 0.5;
    transition: opacity 350ms;
}

.honeycomb-cell:hover .honeycomb-cell__title {
    opacity: 1;
    color: white;
}

.honeycomb-cell:hover::before {
    background: rgb(18, 170, 74);
}

.honeycomb-cell:hover::after {
    opacity: 0;
}

.honeycomb__placeholder {
    display: none;
    opacity: 0;
    width: 200px; /* Adjusted for increased hexagon size */
    margin: 0 12px;
}

/* Pulsating animation with pause */
@keyframes pulsateWithPause {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.1);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

/* Add delay to each cell */
.honeycomb-cell:nth-child(1) {
    --cell-index: 0;
}

.honeycomb-cell:nth-child(2) {
    --cell-index: 1;
}

.honeycomb-cell:nth-child(3) {
    --cell-index: 2;
}

.honeycomb-cell:nth-child(4) {
    --cell-index: 3;
}

.honeycomb-cell:nth-child(5) {
    --cell-index: 4;
}

.honeycomb-cell:nth-child(6) {
    --cell-index: 5;
}

@media (max-width: 350px) {
    .honeycomb-cell {
        margin: 40px 15px;
    }
}

@media (min-width: 350px) and (max-width: 525px) {
    .honeycomb-cell:nth-child(3n) {
        margin-right: calc(50% - 100px);
        margin-left: calc(50% - 100px);
    }

    .honeycomb__placeholder:nth-child(3n + 5) {
        display: block;
    }
}

@media (min-width: 525px) and (max-width: 700px) {
    .honeycomb-cell:nth-child(5n + 4) {
        margin-left: calc(50% - 200px);
    }

    .honeycomb-cell:nth-child(5n + 5) {
        margin-right: calc(50% - 200px);
    }

    .honeycomb__placeholder:nth-child(5n),
    .honeycomb__placeholder:nth-child(5n + 3) {
        display: block;
    }
}

@media (min-width: 700px) {
    .honeycomb-cell:nth-child(7n + 5) {
        margin-left: calc(50% - 350px);
    }

        .honeycomb-cell:nth-child(7n + 7),
        .honeycomb-cell:nth-child(7n + 5):nth-last-child(2) {
            margin-right: calc(50% - 350px);
        }

    .honeycomb__placeholder:nth-child(7n + 7),
    .honeycomb__placeholder:nth-child(7n + 9),
    .honeycomb__placeholder:nth-child(7n + 11) {
        display: block;
    }
}

.acronym-container {
    margin-top: 110px;
    font-family: Helvetica;
    cursor: pointer;
}

.acronym {
    -ms-scrollbar-darkshadow-color: yellow;
    color: white;
    font-size: 9rem;
    font-weight: bold;
}

.full-name {
    color: yellow;
    margin-top: -45px;
    margin-left: 13.8px;
    font-size: 1.68rem;
    display: block;
    font-weight: bold;
}