/**
 * Homepage hero, base variant (video background, no promo running).
 *
 * Loaded on the homepage only while no November phase is running (ic-nov-hero-banner.php).
 * Every rule is scoped to the base root, .ic-nov-hero--base, so it never touches the promo hero.
 * Stacking: the video and the dark overlay (::after) both sit at z-index -1 inside the root;
 * ::after comes later in the tree, so it paints over the video and the content paints over both.
 */

.ic-nov-hero--base {
	display: flex;
	position: relative;
	z-index: 1;
	justify-content: center;
	overflow: hidden;
	padding: 107px 0;
}

.ic-nov-hero--base::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--nd-theme-black);
	opacity: 0.5;
}

.ic-nov-hero--base .bg-video {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ic-nov-hero--base .actual_content,
.ic-nov-hero--base .reviews_container,
.ic-nov-hero--base .banner_images {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ic-nov-hero--base .actual_content {
	flex-direction: column;
	max-width: 1240px;
}

.ic-nov-hero--base .reviews_container {
	gap: 10px;
	margin-bottom: 12px;
	padding: 4px 16px;
	border: 1px solid var(--nd-theme-white);
	border-radius: 100px;
	color: var(--nd-theme-white);
	font-size: 13px;
	backdrop-filter: blur(4.5px);
}

.ic-nov-hero--base h1 {
	margin-bottom: 8px;
	color: var(--nd-theme-white);
}

.ic-nov-hero--base p {
	max-width: 406px;
	margin-bottom: 32px;
	color: var(--nd-theme-white);
	font-size: 16px;
	text-align: center;
}

.ic-nov-hero--base a {
	margin-bottom: 40px;
	font-size: 16px;
}

.ic-nov-hero--base .banner_images {
	gap: 18px;
}

.ic-nov-hero--base .banner_images img {
	border-radius: 100px;
	backdrop-filter: blur(4.5px);
}


@media (max-width: 992px) {
	.ic-nov-hero--base {
		padding: 32px 0;
	}
}

@media (max-width: 576px) {
	.ic-nov-hero--base {
		padding: 105px 24px;
	}

	.ic-nov-hero--base h1 {
		text-align: center;
	}
}

@media (max-width: 370px) {
	.ic-nov-hero--base {
		padding: 44px 24px;
	}

	.ic-nov-hero--base .reviews_container {
		flex-direction: column;
		gap: 0;
		min-width: 272px;
	}
}