/* Croosswood Corporate Banner */

.ccb-banner {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.ccb-banner__inner {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: inherit;
	padding: 60px 60px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Background image — right side, fading into the gradient on the left */
.ccb-banner__image-wrap {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 55%;
	z-index: 1;
	overflow: hidden;
	background-color: #0d1b2a; /* fallback while video is buffering, so the section background never shows through */
}

.ccb-banner__image-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgba(234,243,251,1) 0%, rgba(234,243,251,0.55) 18%, rgba(234,243,251,0) 42% );
	z-index: 2;
	pointer-events: none;
}

/* Optional user-set overlay tint (Style > Layout > Background Image Overlay), off by default */
.ccb-banner__image-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: transparent;
	z-index: 3;
	pointer-events: none;
}

.ccb-banner__image-wrap img,
.ccb-banner__image-wrap video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Content column */
.ccb-banner__content {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Eyebrow */
.ccb-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ccb-eyebrow__text {
	display: inline-block;
	white-space: nowrap;
}

.ccb-eyebrow__dash {
	display: inline-block;
	width: 34px;
	height: 2px;
}

/* Heading */
.ccb-heading {
	margin: 0;
	display: block;
}

.ccb-heading__line {
	display: block;
}

/* Description */
.ccb-description {
	margin: 0;
}

/* Features row */
.ccb-features {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ccb-feat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.ccb-feat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ccb-feat__icon svg {
	fill: currentColor;
}

.ccb-feat__title {
	display: block;
	white-space: nowrap;
}

.ccb-feat__divider {
	width: 1px;
	align-self: stretch;
	min-height: 34px;
	flex-shrink: 0;
}

/* Button */
.ccb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
	white-space: nowrap;
}

.ccb-button__icon {
	display: inline-flex;
	align-items: center;
}

.ccb-button__icon svg {
	fill: currentColor;
}

/* Side stacked words */
.ccb-side-words {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ccb-side-word {
	display: block;
}

.ccb-side-words__underline {
	height: 2px;
	margin-top: 10px;
}

/* =========================================
   RESPONSIVE
   ========================================= */

/* Tablet */
@media ( max-width: 1024px ) {
	.ccb-banner__inner {
		padding: 50px 40px;
	}

	.ccb-side-words {
		display: none;
	}

	.ccb-banner__image-wrap {
		width: 48%;
	}
}

/* Mobile */
@media ( max-width: 767px ) {
	.ccb-banner__inner {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: 40px 24px;
	}

	.ccb-banner__image-wrap {
		position: relative;
		width: 100% !important;
		height: 220px;
		order: -1;
		margin-bottom: 24px;
		border-radius: 12px;
	}

	.ccb-banner__image-wrap::before {
		background: linear-gradient( 180deg, rgba(234,243,251,0) 40%, rgba(234,243,251,1) 100% );
	}

	.ccb-banner__content {
		max-width: 100% !important;
	}

	.ccb-features {
		gap: 16px !important;
	}

	.ccb-feat__divider {
		display: none;
	}
}

/* Small mobile */
@media ( max-width: 480px ) {
	.ccb-banner__inner {
		padding: 28px 18px;
	}

	.ccb-eyebrow__text {
		white-space: normal;
	}

	.ccb-feat__title {
		white-space: normal;
	}
}

/* Utility classes toggled via Elementor switcher controls */
.ccb-feat-hide-mobile .ccb-features {
	display: none;
}

.ccb-img-hide-mobile .ccb-banner__image-wrap {
	display: none;
}