/* GG Brand Banner --------------------------------------------------------- */
.gg-brand-banner {
	--gg-skew: 11%;
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	font-family: var(--gg-font-sans, 'Poppins', sans-serif);
}

.gg-brand-banner__left,
.gg-brand-banner__center,
.gg-brand-banner__right {
	position: relative;
	padding: 60px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.gg-brand-banner__left {
	flex-basis: 42%;
	color: #FBF3E7;
}

.gg-brand-banner__left h2 {
	margin: 0 0 14px;
	color: #FFFFFF;
	line-height: 1.05;
}

.gg-brand-banner__left p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	max-width: 340px;
	opacity: 0.9;
}

/* Center panel is rendered as a true parallelogram via clip-path, using a CSS custom
   property (--gg-skew) so the Elementor "Diagonal Slant" control can drive the exact
   same angle used on both its left and right edges — this is what makes the seams
   against the navy and teal panels match the reference design's slanted cut. */
.gg-brand-banner__center {
	flex-basis: 26%;
	align-items: center;
	text-align: center;
	-webkit-clip-path: polygon(var(--gg-skew) 0, 100% 0, calc(100% - var(--gg-skew)) 100%, 0 100%);
	clip-path: polygon(var(--gg-skew) 0, 100% 0, calc(100% - var(--gg-skew)) 100%, 0 100%);
	margin: 0 -60px;
	z-index: 1;
}

.gg-brand-banner__center p {
	position: relative;
	z-index: 2;
	margin: 0;
	color: #FFFFFF;
	max-width: 240px;
}

.gg-brand-banner__right {
	flex: 1 1 auto;
	color: #FFFFFF;
	gap: 16px;
}

.gg-brand-banner__value {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Icons are inline SVGs (stroke="currentColor") or Elementor icon-font glyphs — this
   rule forces both to inherit the same color so a swapped-in Font Awesome icon still
   matches the design instead of rendering in its default dark color. */
.gg-brand-banner__value-icon,
.gg-brand-banner__value-icon i,
.gg-brand-banner__value-icon svg {
	color: #FFFFFF;
}

.gg-brand-banner__value-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
}

.gg-brand-banner__value-icon .gg-icon-svg {
	width: 20px;
	height: 20px;
}

.gg-brand-banner__value-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	color: #FFFFFF;
}

.gg-brand-banner__value-title {
	display: block;
}

.gg-brand-banner__value-desc {
	display: block;
	font-size: 12px;
	opacity: 0.85;
}

/* Decoration wrappers now render inline SVG/<img> content (so they can be resized/recolored
   via Elementor controls) instead of a fixed CSS background-image — only positioning and
   pointer-events stay here. */
.gg-brand-banner__deco {
	position: absolute;
	display: inline-flex;
	pointer-events: none;
	color: #D9A441;
}

.gg-brand-banner__deco--sun {
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
}

.gg-brand-banner__deco--sun .gg-icon-svg,
.gg-brand-banner__deco--sun img {
	width: 130px;
	height: 130px;
}

.gg-brand-banner__deco--flamingo {
	bottom: -8px;
	right: 16px;
}

.gg-brand-banner__deco--flamingo .gg-icon-svg,
.gg-brand-banner__deco--flamingo img {
	width: 110px;
	height: 160px;
}

.gg-brand-banner__deco img {
	display: block;
	object-fit: contain;
}

/* Center panel bottom accent: swoosh underline + heart, sitting under the italic text. */
.gg-brand-banner__accent {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.gg-brand-banner__swoosh {
	display: inline-flex;
	color: #FFFFFF;
}

.gg-brand-banner__swoosh .gg-icon-svg {
	width: 60px;
	height: 16px;
}

.gg-brand-banner__heart {
	display: inline-flex;
	color: #FFFFFF;
}

.gg-brand-banner__heart .gg-icon-svg,
.gg-brand-banner__heart img {
	width: 22px;
	height: 22px;
}

.gg-brand-banner__heart img {
	object-fit: contain;
}

.gg-brand-banner__value-icon img {
	display: block;
	width: 24px;
	height: auto;
	object-fit: contain;
}

@media (max-width: 900px) {
	.gg-brand-banner { flex-direction: column; }
	.gg-brand-banner__left,
	.gg-brand-banner__center,
	.gg-brand-banner__right {
		flex-basis: auto !important;
	}
	.gg-brand-banner__center {
		clip-path: none;
		margin: 0;
	}
}