.banner {
	height: 950px;
	position: relative;
	overflow: hidden;

	.container {
		margin-top: 70px;

		@media(max-width: 768px) {
			margin-top: 0;
		}
	}

	@media(max-width: 1024px) {
		height: auto;
		padding: 140px 0 80px;
	}

	&__description {
		margin-bottom: 42px;
		font-size: 18px;
		line-height: 30px;
		color: rgba(255, 255, 255, 0.7);

		@media(max-width: 1200px) {
			br {
				display: none;
			}
		}
	}

	&__subtitle {
		font-size: 14px;
		font-weight: 500;
		color: #fff;
		text-transform: uppercase;
		letter-spacing: .3em;
		margin-bottom: 13px;
	}

	&__title {
		font-size: 46px;
		font-weight: 700;
		color: #fff;
		margin-bottom: 14px;
		letter-spacing: -2px;
		line-height: 1.2;

		@media(max-width: 1200px) {
			font-size: 50px;
		}

		@media(max-width: 991px) {
			font-size: 40px;

			br {
				display: none;
			}
		}

		@media(max-width: 767px) {
			font-size: 34px;
		}
	}

	&__brand-logo-wrapper {
		margin-top: 55px;
	}

	&__brand-title {
		font-size: 16px;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.7);
		margin-bottom: 20px;
	}

	&__brand-logos {
		padding: 0;
		list-style: none;
		display: flex;
		margin: 0 0 0 -20px;
		flex-wrap: wrap;

		@media(max-width: 767px) {
			margin: 0 auto;
		}

		li {
			width: 25%;
			padding: 0 10px;

			@media(max-width: 767px) {
				width: 33.33%;
			}
		}
	}

	&--one {
		background-image: linear-gradient(90deg, #021048, #1e38a3);

		.banner__feature-image {

		}

		.banner__content {
			padding-right: 100px;

			@media(max-width: 767px) {
				text-align: center;
				padding-right: 0;
			}
		}

		@media(max-width: 1024px) {
			.container {
				margin-top: 0;
			}

			.banner__feature-image {
				max-width: 600px;
				margin: 0 auto;
			}
		}
	}

	&__btns {
		.banner-btn {
			padding: 10px 34px;

			&:hover {
				color: #fff;
				border-color: rgba(255, 255, 255, 0.5);
			}
		}

		.play-button {
			margin-left: 15px;

			@media(max-width: 420px) {
				display: block;
				margin-left: 0;
				margin-top: 15px;
			}
		}
	}

	&__content,
	&__feature-image {
		position: relative;
		z-index: 3;
	}

	&__feature-image {
		position: relative;
		z-index: 3;

		@media(max-width: 1024px) {
			margin-bottom: 50px;
		}
	}

	&__feature-multiimage {
		position: relative;

		@media(max-width: 991px) {
			min-height: 490px;
		}

		@media(max-width: 768px) {
			min-height: 250px;
			margin: 0 auto 40px;
			max-width: 310px;
		}
	}

	&__image-lists {
		margin: 0;
		padding: 0;
		list-style: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		li {
			position: absolute;
			height: 100%;
			width: 100%;

			img {
				//width: -webkit-fill-available;
				box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
				border-radius: 20px;
			}

			.inner {
				position: absolute;
			}

			&:nth-child(1) {
				.inner {
					top: 22%;
					left: -90px;

					@media(max-width: 1023px) {
						left: -40px;
						max-width: 180px;
					}

					@media(max-width: 620px) {
						left: 0;
					}

					@media(max-width: 576px) {
						max-width: 120px;
					}
				}
			}

			&:nth-child(2) {
				.inner {
					top: 40%;
					right: -100px;

					@media(max-width: 1023px) {
						right: -40px;
						max-width: 200px;
					}

					@media(max-width: 620px) {
						right: 0;
					}

					@media(max-width: 576px) {
						max-width: 150px;
					}
				}
			}
		}
	}

	&.banner--two {
		height: 950px;
		padding: 136px 0 150px;
		overflow: visible;

		@media(max-width: 768px) {
			padding: 100px 0;
		}

		@media(max-width: 767px) {
			height: auto;
		}

		.banner__feature-image {
			position: relative;
		}

		.banner__content {
			position: relative;
			z-index: 2;
			margin-bottom: 60px;

			@media(max-width: 767px) {
				text-align: center;
				max-width: 500px;
				margin: 0 auto;
			}

			.banner__subtitle {
				color: #fff;
			}

			.banner__title {
				color: $color__heading;
				font-size: 45px;
				margin-bottom: 36px;
				font-weight: 800;

				@media(max-width: 1200px) {
					font-size: 40px;
				}

				@media(max-width: 992px) {
					font-size: 32px;
				}
			}

			.banner__description {
				font-size: 1.25rem;
				margin: 0 auto 40px;
				color: $color__body;
			}
		}

		.banner__btns {
			.banner-btn {
				color: #fff;
				border-color: rgba(225, 227, 235, 0.161);
				margin: 0 8px;

				@media(max-width: 576px) {
					margin: 0 8px 15px;
				}

				&:hover {
					color: $color__theme;
					border-color: $color__theme;
				}

				&.btn-outline {
					color: $color__theme;
					border-color: $color__theme;
					margin: 0 10px;

					&:hover {
						color: #fff;
						background-color: $color__theme;
					}
				}
			}
		}
	}

	&__newsletter-form {
		max-width: 420px;

		@media(max-width: 991px) {
			margin: 0 auto;
		}

		.newsletter-inner {
			display: flex;
			overflow: hidden;

			input[type=email] {
				background-color: transparent;
				flex: 1;
				margin-bottom: 0 !important;
				height: 50px;
				border-radius: 6px !important;
				border: 2px solid #e4e4e4;
				margin-right: 10px;

				&::placeholder {
					font-size: 14px;
					color: #7e8086;
				}
			}
		}

		.form-result {
			margin-bottom: 0;
			margin-top: 20px;
		}

		.newsletter-submit {
			border-radius: 6px;
			outline: 0;
			background-color: $color__theme;
			border: 0;
			box-shadow: 0 11px 18px -8px rgba(23, 92, 255, 0.60);

			i {
				display: none;
			}

			&.clicked {
				i {
					display: block;
				}

				span {
					display: none;
				}
			}

			&:hover {
				color: #fff;
				box-shadow: none;
			}
		}
	}

	&__feature {
		margin: 17px 0 0;
		padding: 0;
		list-style: none;

		@media(max-width: 991px) {
			text-align: center;
		}

		li {
			display: inline-block;
			font-size: 14px;
			color: #4f5158;

			&:not(:last-child) {
				margin-right: 30px;
			}

			i {
				display: inline-block;
				text-align: center;
				font-size: 14px;
				height: 20px;
				width: 20px;
				line-height: 20px;
				border-radius: 50%;
				background-color: rgba(42, 92, 255, 0.102);
				margin-right: 10px;
				color: $color__theme;
			}
		}
	}

	&.banner--three {
		height: auto;
		padding: 140px 0 100px;

		.banner__content {
			@media(max-width: 991px) {
				text-align: center;
			}
		}

		.banner__title {
			color: $color__heading;
		}

		.banner__description {
			color: $color__body;
			max-width: 85%;
		}

		.banner_secondary_image {
			position: absolute;
			left: 0;
			bottom: 0;
			max-width: 200px;

			@media(max-width: 767px) {
				max-width: 120px;
			}

			@media(max-width: 480px) {
				max-width: 80px;
			}
		}

		.banner__brand-logos {
			display: grid;
			grid-auto-columns: 1fr;
			grid-row-gap: 16px;
			margin-right: auto;
			margin-left: auto;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: auto;

			@media(min-width: 1200px) {
				grid-column-gap: 40px;
			}

			@media(max-width: 991px) {
				grid-template-columns: 1fr 1fr 1fr;
				grid-column-gap: 30px;
			}

			@media(max-width: 767px) {
				grid-template-columns: 1fr 1fr 1fr;
				grid-column-gap: 0;
			}

			@media(max-width: 420px) {
				grid-template-columns: 1fr 1fr;
			}

			li {
				padding: 10px 30px;
				width: 100%;
				opacity: 0.5;
				transition: all 0.3s ease-in-out;

				&:hover {
					opacity: 1;
				}
			}
		}
	}

	&--four {
		background-color: #0b163f;

		.banner__feature {
			li {
				color: #d6d5e1;

				i {
					background-color: rgba(255, 255, 255, 0.3);
					color: #fff;
				}
			}
		}

		.banner__animate-element {
			li {
				z-index: 1;

				.inner {
					opacity: 1;
				}

				&:nth-child(1) {
					.inner {
						bottom: 0;
						left: auto;
						right: 0;
						width: max-content;

						@media(max-width: 991px) {
							max-width: 530px;
						}
					}
				}

				&:nth-child(3) {
					.inner {
						top: auto;
						left: -50px;
						bottom: 100px;
						width: max-content;
					}
				}

				&:nth-child(4) {
					.inner {
						left: auto;
						top: auto;
						right: 0;
						bottom: -60px;
						width: max-content;

						@media(max-width: 767px) {
							bottom: -30px;
						}
					}
				}
			}
		}

		.btn-outline {
			color: #fff;
			border-color: rgba(255, 255, 255, 0.5);
			margin-left: 15px;

			&:hover {
				background-color: #fff;
				color: $color__theme;
			}
		}

		.banner__feature-image {
			margin-right: 0;
		}

		@media(max-width: 991px) {

			.container {
				margin-top: 0;
			}

			.banner__content {
				text-align: center;
			}

			.banner__brand-logos {
				max-width: 330px;
				margin: 0 auto;

				li {
					width: 50%;
				}
			}
		}

		@media(max-width: 420px) {
			.banner__btns {
				.btn-outline {
					margin-left: 0;
					margin-top: 15px;
				}
			}
		}
	}

	&--five {
		background-color: $color__theme;
	}

	&__circle-shape {
		position: absolute;
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
		border-radius: 50%;
		background-color: #f6c37b;
		width: 500px;
		height: 500px;
		z-index: -1;
	}

	&--six {
		background-color: rgba($color__theme, 0.1);

		@media(max-width: 1024px) {
			padding: 100px 0 80px;
		}

		.container {
			margin-top: 0;
		}

		.banner__title {
			font-size: 50px;
			color: $color__heading;

			@media(max-width: 767px) {
				font-size: 34px;
			}
		}

		.banner__description {
			color: $color__body;
		}

		.banner__feature-image {
			margin-right: -150px;

			@media(max-width: 991px) {
				max-width: 625px;
				margin: 0 auto 40px;
			}
		}

		.banner-btn {
			&:hover {
				background-color: transparent;
				color: $color__theme;
				border-color: $color__theme;
			}
		}

		.banner__btns {
			.play-button {
				color: $color__theme;

				i {
					border-color: $color__theme;
					color: $color__theme;
				}

				&:hover {
					i {
						background-color: $color__theme;
						color: #fff;
					}
				}
			}
		}
	}

	.box-shape {
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			position: absolute;
			height: 400px;
			width: 400px;
			background-color: rgba($color__theme, 0.07);
			border-radius: 70px;
			transform: rotate(45deg);

			@media(max-width: 767px) {
				height: 300px;
				width: 300px;
			}

			&:nth-child(1) {
				left: -12%;
				top: 50%;
				transform: translateY(-50%) rotate(45deg);

				@media(max-width: 1440px) {
					left: -20%;
				}

				@media(max-width: 440px) {
					left: -50%;
				}
			}

			&:nth-child(2) {
				left: 44%;
				top: -30%;
			}

			&:nth-child(3) {
				right: -13%;
				bottom: -13%;

				@media(max-width: 1440px) {
					right: -20%;
				}
			}
		}
	}

	.image-bubble {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			position: absolute;
			border-radius: 50%;

			@media(max-width: 440px) {
				display: none;
			}

			&.bubble-one {
				height: 160px;
				width: 160px;
				background-color: $color__theme;
				left: 0;
				bottom: 10%;

				@media(max-width: 767px) {
					width: 100px;
					height: 100px;
					left: 40px;
					bottom: 10%;
				}
			}

			&.bubble-two {
				height: 85px;
				width: 85px;
				background-color: #fff;
				right: 0;
				top: 30%;
				box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);

				@media(max-width: 767px) {
					width: 60px;
					height: 60px;
				}


			}

			&.banner-dot-one {
				bottom: 20px;
				left: 65px;
				z-index: -1;
			}

			&.banner-dot-two {
				top: 115px;
				right: 25px;
				z-index: -1;
			}
		}
	}

	&--seven {
		background-color: #000;

		.banner__feature-image {
			margin: 160px -200px 0px 0px;

			@media(max-width: 1600px) {
				margin: 160px -100px 0px 0px;
			}

			.banner-main-image-seven {
				position: relative;
				z-index: -1;
			}
		}

		.banner__title {
			font-size: 72px;
			font-weight: 600;

			@media(max-width: 1400px) {
				font-size: 60px;
			}

			@media(max-width: 1400px) {
				font-size: 60px;
			}

			@media(max-width: 1200px) {
				font-size: 50px;
			}

			@media(max-width: 991px) {
				font-size: 40px;
			}


			span {
				position: relative;
				display: inline-block;
				z-index: 1;

				&:before {
					position: absolute;
					content: '';
					background: linear-gradient(96.49deg, #0082F8 0%, #3C10F2 101.82%);
					height: 12px;
					width: 105%;
					left: 0;
					bottom: 15px;
					z-index: -1;

					@media(max-width: 997px) {
						height: 8px;
						bottom: 10px;
					}
				}
			}
		}

		.banner-btn {
			border-radius: 30px;
		}

		.banner__currency-logos {
			margin: 0;
			padding: 0;
			list-style: none;
			z-index: 1;

			@media(max-width: 576px) {
				display: none;
			}

			li {
				position: absolute;
				border-radius: 50%;
				overflow: hidden;
				background-color: #282828;
				padding: 10px;
				display: flex;
				justify-content: center;
				align-items: center;


				&:nth-child(1) {
					height: 114px;
					width: 114px;
					top: 34%;
					animation: zoomIn 0.5s both 1s;
				}

				&:nth-child(2) {
					height: 84px;
					width: 84px;
					left: 17%;
					top: 44px;
					animation: zoomIn 0.5s both 1.2s;
				}

				&:nth-child(3) {
					height: 110px;
					width: 110px;
					right: 17%;
					animation: zoomIn 0.5s both 1.4s;
				}

				&:nth-child(4) {
					height: 78px;
					width: 78px;
					right: 0;
					top: 29%;
					animation: zoomIn 0.5s both 1.6s;
				}

				&:nth-child(5) {
					height: 78px;
					width: 78px;
					right: 0;
					top: 40%;
					animation: zoomIn 0.5s both 1.8s;
				}
			}
		}

		.banner__content {
			@media(max-width: 991px) {
				margin-top: 40px;
			}
		}
	}
}

.banner__animate-element {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	margin: 0;
	padding: 0;
	list-style: none;

	@media(max-width: 420px) {
		display: none;
	}

	li {
		position: absolute;
		width: 100%;
		height: 100%;

		.inner {
			position: absolute;
			opacity: 0.6;
		}

		&:nth-child(1) {
			.inner {
				width: 340px;
				left: 0;
				bottom: -50px;

				@media(max-width: 576px) {
					width: 200px;
					left: 50px;
				}
			}
		}

		&:nth-child(2) {
			.inner {
				width: 180px;
				top: 0;
				right: 0;

				@media(max-width: 576px) {
					width: 140px;
					top: -30px;
					right: 0;
				}
			}
		}

		&:nth-child(3) {
			.inner {
				left: 115px;
				top: 25px;
				width: 36px;
			}
		}

		&:nth-child(4) {
			.inner {
				left: 140px;
				top: 50px;
				width: 80px;

				@media(max-width: 576px) {
					width: 60px;
				}
			}
		}

		&:nth-child(5) {
			.inner {
				right: 55px;
				bottom: -45px;
				width: 100px;

				@media(max-width: 576px) {
					width: 60px;
					bottom: -10px;
				}
			}
		}

		&:nth-child(6) {
			.inner {
				right: 20px;
				bottom: -90px;
				width: 50px;

				@media(max-width: 576px) {
					width: 36px;
					bottom: -40px;
					right: 30px;
				}
			}
		}
	}
}

.banner__animate-element-two {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		position: absolute;
		width: 100%;
		height: 100%;

		.inner {
			position: absolute;
		}

		&:nth-child(1) {
			.inner {
				left: 25%;
				top: -80px;
				opacity: 1;
			}
		}

		&:nth-child(2) {
			.inner {
				top: 50%;
				left: -100px;
				transform: translateY(-50%);
			}
		}

		&:nth-child(3) {
			.inner {
				left: 50%;
				transform: translateX(-50%);
				bottom: -50px;
			}
		}
	}
}



.event-hero {
	padding: 150px 0;
	.text-pink {
		color: #fd035a;
	}
	.display-5 {
		font-size: 48px;
		color: #0b163f;
		span {
			font-size: 72px;
			@media #{$mobile} {
				font-size: 40px;
			}
		}
	}
	.banner__description {
		color: #575757;
	}
	.action-btns {
		.btn {
			font-weight: 500;
			padding: 13px 28px;
			font-size: 15px;
			font-family: $font__heading;
		}
		.bg-pink {
			color: #ffffff;
			background-color: #fd035a;
			border: 1px solid transparent;
			&:hover {
				background-color: transparent;
				border: 1px solid #fd035a;
				color: #fd035a;
			}
		}
		.border-pink {
			border: 1px solid #fd035a;
			color: #fd035a
		}
	}
	.event-hero-img {
		position: relative;
		z-index: 5;
		.popup-youtube {
			position: absolute;
			width: 100px;
			height: 100px;
			left: 20%;
			bottom: -5%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #fd035a;
			color: #fff;
			border: 10px solid #fff;
			box-shadow: 0 50px 50px -25px rgb(43 9 150 / 25%);
		}
	}
	.ev-hero-shape {
		li {
			position: absolute;
			&:nth-child(1) {
				bottom: 8%;
				left: 45%;
			}
			&:nth-child(2) {
				width: 160px;
				height: 160px;
				border-radius: 50%;
				left: 35%;
				top: 25%;
				background-image: linear-gradient(231.28deg, #ff0766 -30.62%, rgba(255, 255, 255, 0) 93.05%);
			}
			&:nth-child(3) {
				width: 158px;
				height: 47px;
				right: 10%;
				top: 20%;
				background: linear-gradient(286.4deg, rgba(255, 7, 102, 0.61) -14.68%, rgba(43, 9, 150, 0) 99.55%);
				border-radius: 50px;
				transform: rotate(-38.54deg);
			}
			&:nth-child(4) {
				width: 110px;
				height: 110px;
				border-radius: 50%;
				right: 20%;
				bottom: 2%;
				z-index: 2;
				background: linear-gradient(286.4deg, #ff0766 -14.68%, rgba(43, 9, 150, 0) 99.55%);
			}
			&:nth-child(5) {
				left: 5%;
				bottom: 45%;
			}
		}
	}
}