:root {
    --bg-dark: #2c3131;
    --chevron-beige: #e9e2c9;
    --hex-white: #ffffff;
}

.hero-graphic-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    overflow: hidden;
    position: relative;
}

/* The hexagon pipe */
.hexagon-pipe {
    position: relative;
    background-color: var(--chevron-beige);
    width: 50px;
    height: 300px;
    margin-right: 40px;
}

/* The flanking chevron shapes */
.chevron {
    position: absolute;
    background-color: var(--chevron-beige);
    width: 150px;
    height: 300px;
}
.chevron-1 {
    position: relative;
    background-color: var(--chevron-beige);
    width: 100%;
    height: 100%;
}

.chevron-left {
    left: 0;
    clip-path: polygon(100% 0%, 40% 50%, 100% 100%, 60% 100%, 0% 50%, 60% 0%);
}

.chevron-right {
    right: 0;
    clip-path: polygon(0% 0%, 60% 50%, 0% 100%, 40% 100%, 100% 50%, 40% 0%);
}

/* The hexagonal portrait frame */
.hexagon-outer {
    background-color: var(--hex-white);
    width: 270px;
    height: 240px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hexagon-inner {
    width: 270px;
    height: 240px;
}

.hex-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 200px;
}
.hex-container i {
    font-size: 10rem;
    color: var(--brand-green);
}
.hexagon-outer-1 {
    background-color: var(--hex-white);
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hexagon-inner-1 {
    width: 100%;
    height: 70%;
    background-color: var(--bg-dark);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chevron { width: 60px; height: 150px; }
    .hexagon-outer { width: 180px; height: 210px; }
    .hexagon-inner { width: 170px; height: 195px; }
    .hero-graphic-container { padding: 20px; min-height: 300px; }
}