/* Banner Section */
.banner-section {
	position: relative;
	background-color: var(--color-1);
	color: var(--color-6);
	min-height: 65vh;
}
.banner-section .bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
	background-color: #000;
	opacity: 0.25;
}
.banner-section .carousel .acf-media {
	height: 100%;
	position: relative;
	z-index: -1;
}
.banner-section .carousel .acf-media.media__image .inner {
	height: 100%;
}
.banner-section .carousel .acf-media video,
.banner-section .carousel .acf-media img {
	width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	height: 100%;
}
.banner-section .carousel .image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	background-color: #000;
    opacity: .7;
}
.banner-section .carousel .image video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}
.banner-section .carousel .content-wrap {
	position: relative;
	z-index: 5;
	padding: 40px 0;
	display: flex;
	align-items: center;
	font-size: 20px;
	min-height: 65vh;
}
.banner-section .carousel .content-wrap .btn {
	text-shadow: none;
}
.banner-section .carousel .content-wrap p:last-child {
	margin-bottom: 0;
}
.banner-section .carousel .content-wrap .content{
	color: #fff;
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translate(0, -50%);
	max-width: 800px;
    z-index: 10;
}
.banner-section .carousel .content-wrap .content h1{
	color: #fff;
	font-weight: 800;
	font-size: 48px;
}
.banner-section .carousel .banner-nav {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	z-index: 4;
	justify-content: center;
	color: #fff;
}
.banner-section .carousel .carousel-indicators {
	position: static;
	margin: 0;
	width: 100%;
	left: 0;
	bottom: 0;
	text-align: left;
	display: flex;
	column-gap: 10px;
	justify-content: center;
}
.banner-section .carousel .carousel-indicators li {
	border: none;
	background-color: var(--text_color_alt);
	margin: 0;
	opacity: 0.5;
}
.banner-section .carousel .carousel-indicators .active {
	width: 10px;
	height: 10px;
	border: none;
	margin: 0;
	opacity: 1;
}
.banner-section .carousel-control {
	width: 50px;
}
.banner-section .container {
	max-width: calc(100% - 100px);
	margin: 0 auto;
}
.banner-section .mobile {
	display: none;
}
.banner-section .image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.honeycomb-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    filter: drop-shadow(0 0 20px rgba(0, 150, 255, 0.2));
}
.honeycomb {
    /* Hexagon Geometry Variables */
    --hex-w: 32%; /* Width of a single hexagon */
    --hex-h: calc(var(--hex-w) * 0.95); /* Flat-topped Height = Width * sqrt(3)/2 */
    --gap: 1%; /* Gap between hexes */

    /* Mathematical Step Sizes for Interlocking */
    --h-step: calc(var(--hex-w) * 0.75 + var(--gap));
    --v-step: calc(var(--hex-h) + var(--gap));

    position: relative;
    width: 100%;
    max-width: 565px;
    /* Aspect ratio ensures the container maintains height for the absolute elements */
    aspect-ratio: 1 / 1.05; 
    margin: 0 auto;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);
	z-index: 11;
}
.hex {
    position: absolute;
    width: var(--hex-w);
    height: var(--hex-h);
    /* Fallback for older browsers that don't support shape() yet */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    clip-path: shape(from 87.5% 28.35%,curve to 87.5% 71.65% with 100% 50%,line to 87.5% 71.65%,curve to 50% 93.3% with 75% 93.3%,line to 50% 93.3%,curve to 12.5% 71.65% with 25% 93.3%,line to 12.5% 71.65%,curve to 12.5% 28.35% with 0% 50%,line to 12.5% 28.35%,curve to 50% 6.7% with 25% 6.7%,line to 50% 6.7%,curve to 87.5% 28.35% with 75% 6.7%);
    background: rgba(146, 146, 146, 0.7);
    transition: transform 0.3s ease, background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.hex::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: radial-gradient(circle at center, rgba(35, 53, 77, 0.7) 0%, rgba(5, 8, 12, 0.8) 75%);
	/* Fallback for older browsers that don't support shape() yet */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    clip-path: shape(from 87.5% 28.35%,curve to 87.5% 71.65% with 100% 50%,line to 87.5% 71.65%,curve to 50% 93.3% with 75% 93.3%,line to 50% 93.3%,curve to 12.5% 71.65% with 25% 93.3%,line to 12.5% 71.65%,curve to 12.5% 28.35% with 0% 50%,line to 12.5% 28.35%,curve to 50% 6.7% with 25% 6.7%,line to 50% 6.7%,curve to 87.5% 28.35% with 75% 6.7%);
    z-index: 0;
	transition: all 0.3s ease;
}
.hex:hover::before {
    background: radial-gradient(circle at center, rgba(45, 63, 87, 0.8) 0%, rgba(10, 15, 20, 0.9) 75%);
}
.hex.center-logo {
    z-index: 5;
}
.hex.center-logo::before {
    display: block; 
    background: radial-gradient(circle at center, rgba(35, 53, 77, 0.7) 0%, rgba(5, 8, 12, 0.8) 75%);
}
.hex:hover {
    transform: scale(1.05);
    z-index: 10;
}
.hex span {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    position: relative;
}
.hex span a {
    color: var(--color-6);
    font-weight: 500;
    font-size: 22px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px; 
	text-align: center;
}
.hex.center-logo img{
	max-width: 70%;
	position: relative;
    z-index: 2;
    height: auto;
    display: block;
    margin: 0 auto;
}
.hex.center-logo:hover {
    transform: none;
}
/* =========================================
   EXPLICIT POSITIONING MAP
   ========================================= */
/* 4. Center Logo (Inserted automatically by your PHP) */
.hex:nth-child(4) {
    left: calc(50% - (var(--hex-w) / 2));
    top: calc(48% - (var(--hex-h) / 2));
}
/* 2. Top Center */
.hex:nth-child(2) {
    left: calc(50% - (var(--hex-w) / 2));
    top: calc(52% - (var(--hex-h) / 2) - var(--v-step));
}
/* 6. Bottom Center */
.hex:nth-child(6) {
    left: calc(50% - (var(--hex-w) / 2));
    top: calc(44% - (var(--hex-h) / 2) + var(--v-step));
}
/* 1. Top Left */
.hex:nth-child(1) {
    left: calc(50% - (var(--hex-w) / 2) - var(--h-step));
    top: calc(50% - (var(--hex-h) / 2) - (var(--v-step) / 2));
}
/* 5. Bottom Left */
.hex:nth-child(5) {
    left: calc(50% - (var(--hex-w) / 2) - var(--h-step));
    top: calc(46% - (var(--hex-h) / 2) + (var(--v-step) / 2));
}
/* 3. Top Right */
.hex:nth-child(3) {
    left: calc(50% - (var(--hex-w) / 2) + var(--h-step));
    top: calc(50% - (var(--hex-h) / 2) - (var(--v-step) / 2));
}
/* 7. Bottom Right */
.hex:nth-child(7) {
    left: calc(50% - (var(--hex-w) / 2) + var(--h-step));
    top: calc(46% - (var(--hex-h) / 2) + (var(--v-step) / 2));
}
@media screen and (max-width: 767px) {
	.banner-section .carousel-control {
		display: none;
	}
	.banner-section .container {
		max-width: 100%;
	}
	.banner-section .carousel .content-wrap {
		padding-top: 100px;
	}
	.banner-section .carousel .banner-nav {
		bottom: 95px;
	}
	.banner-section .mobile {
		display: none;
	}
	.banner-section .desktop {
		display: block;
	}
	.banner-section .carousel .content-wrap {
		padding: 100px 0 175px;
	}
	.banner-section .video {
		margin-top: 50px;
	}
	.hex span a {
		font-size: 14px;
	}
}
@media screen and (max-width: 450px) {
	.banner-section,
	.banner-section .carousel .content-wrap {
		min-height: 60vh;
	}
}