@use "../global" as *;
.banner-1 {
	background-image: url(../img/shapes/banner-grid-shape.png);
	background-color: var(--bs-body-bg);
	overflow: hidden;
	&__content {
		padding-block-start: clamp(6rem, 9vw + 1rem, 11.875rem);
		padding-block-end: clamp(4.5rem, 6.5vw + 1rem, 8rem);
		position: relative;
		z-index: 1;
		&::before {
			content: "";
			width: rem(300);
			height: rem(300);
			position: absolute;
			top: 0;
			right: 10%;
			transform: translateY(-25%);
			background: rgba(var(--bs-white-rgb), 0.1);
			border: 1px solid rgba(var(--bs-white-rgb), 0.1);
			border-radius: 50%;
			backdrop-filter: blur(10px);
			z-index: -1;
			@include screen(xl) {
				right: 19%;
			}
		}
		&::after {
			content: "";
			position: absolute;
			top: 35%;
			right: 32%;
			width: rem(90);
			height: rem(90);
			border-radius: 50%;
			background-color: rgba(var(--bs-primary-rgb), 0.1);
			z-index: -2;
			@include screen(xl) {
				right: 35%;
			}
		}
	}

	&__froster-svg {
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		z-index: -2;
		&-path {
			animation: animateFill 20s infinite linear alternate;
		}
	}
}
.banner-2 {
	background-image: url(../img/shapes/banner-grid-shape-2.png);
	background-color: var(--bs-dark);
	overflow: hidden;
	&__content {
		padding-block-start: clamp(6rem, 9vw + 1rem, 11.875rem);
		padding-block-end: clamp(4.5rem, 6.5vw + 1rem, 8rem);
		position: relative;
		z-index: 1;
		&::before {
			content: "";
			width: rem(300);
			height: rem(300);
			position: absolute;
			top: 0;
			right: 10%;
			transform: translateY(-25%);
			background: rgba(var(--bs-white-rgb), 0.1);
			border: 1px solid rgba(var(--bs-white-rgb), 0.1);
			border-radius: 50%;
			backdrop-filter: blur(10px);
			z-index: -1;
			@include screen(xl) {
				right: 19%;
			}
		}
		&::after {
			content: "";
			position: absolute;
			top: 35%;
			right: 32%;
			width: rem(90);
			height: rem(90);
			border-radius: 50%;
			background-color: rgba(var(--bs-primary-rgb), 0.3);
			z-index: -1;
			@include screen(xl) {
				right: 35%;
			}
		}
	}

	&__froster-svg {
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		z-index: -2;
		&-path {
			animation: animateFill 20s infinite linear alternate;
		}
	}
}
.banner-3 {
	padding-block-start: clamp(6rem, 9vw + 1rem, 11.875rem);
	padding-block-end: clamp(4.5rem, 6.5vw + 1rem, 8rem);
	position: relative;
	background-image: url(../img/banner-img-1.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgba(var(--bs-dark-rgb), 0.8);
	}
}
.banner-4 {
	padding-block-start: clamp(6rem, 9vw + 1rem, 11.875rem);
	padding-block-end: clamp(4.5rem, 6.5vw + 1rem, 8rem);
	&::before {
		content: "";
		width: rem(300);
		height: rem(300);
		position: absolute;
		top: 0;
		right: 0;
		transform: translateY(-25%);
		background: rgba(var(--bs-white-rgb), 0.5);
		border: 1px solid rgba(var(--bs-white-rgb), 0.1);
		border-radius: 50%;
		backdrop-filter: blur(10px);
		z-index: -1;
	}
	&::after {
		content: "";
		position: absolute;
		top: 10%;
		right: 15%;
		width: rem(90);
		height: rem(90);
		border-radius: 50%;
		background-color: rgba(var(--bs-primary-rgb), 0.1);
		z-index: -2;
	}
}
.banner-5 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(6.5rem, 7.8vw + 1rem, 9.375rem);
	background-image: linear-gradient(
		180deg,
		var(--bs-primary) -23.87%,
		var(--bs-primary-text-emphasis) 89.73%
	);
	&::before {
		content: url(../img/shapes/banner-shape-1.png);
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
		opacity: 0.5;
		z-index: -1;
	}
	&::after {
		content: url(../img/shapes/banner-shape-2.png);
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		pointer-events: none;
		z-index: -1;
	}
}
