/*
 * Hexagon Animation Styles
 * Custom hexagon effects for visual appeal
 */

.hexagon-container {
    position: relative;
    width: 100%;
    padding: 50px 0;
}

.hexagon {
    position: relative;
    width: 100px;
    height: 57.74px;
    background-color: #d32f2f;
    margin: 28.87px 0;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 28.87px solid #d32f2f;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 28.87px solid #d32f2f;
}

/* Hexagon Animation */
@keyframes hexFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.hexagon-animate {
    animation: hexFloat 3s ease-in-out infinite;
}

/* Placeholder styles - to be enhanced with actual hexagon patterns */