/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.bannerContent {
	text-align: center;
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 64px;
	.imgBg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		object-fit: cover;
	}
	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image {
		height: 100%;
		flex-grow: 1;
		order: 2;
		margin: 0;
	}
	.title {
		flex: 1;
		font-weight: bold;
		background: -webkit-linear-gradient(
			120deg,
			hsl(0 100% 60%),
			hsl(15 100% 60%) 35%,
			hsl(23 96% 62%) 45%,
			hsl(0 100% 60%) 65%,
			hsl(358 58% 47%)
		);
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 106px;
		line-height: 86px;
		margin: initial;
	}
	.title3 {
		line-height: 42px;
		font-size: 36px;
		font-weight: 500;
		white-space: pre-wrap;
		color: rgba(53, 53, 187, 0.756);
		flex: 1;
		font-weight: bold;
		margin-bottom: 30px;
	}
	.title2 {
		color: rgba(53, 75, 187, 0.853);
		flex: 1;
		font-size: 86px;
		line-height: 96px;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.title2Mobile {
		line-height: 64px;
		margin-bottom: 0px;
		letter-spacing: -0.4px;
		line-height: 40px;
		font-size: 32px;
		font-weight: 700;
		white-space: pre-wrap;
		margin-top: 20px;
		margin-bottom: 18px;
	}

	.btn {
		text-decoration: none !important;
		border-radius: 20px;
		padding: 0 20px;
		line-height: 38px;
		font-size: 14px;
		border-color: "#4c67c6";
		color: white;
		background-color: #4c67c6;
		min-width: 120px;
		text-align: center;
		font-weight: 700;
		white-space: nowrap;
		display: flex;
		justify-content: center;
		transition:
			color 0.25s,
			border-color 0.25s,
			background-color 0.25s;
		&:hover {
			background: rgb(92, 115, 231);
			color: white;
		}
	}
	.btn2 {
		text-decoration: none;
		background: rgb(235, 235, 239);
		color: rgb(60, 60, 67);
		&:hover {
			background: rgb(228, 228, 233);
			color: black;
		}
	}

	@media screen and (min-width: 1248px) {
		.logo {
			position: absolute;
			width: 280px;
			height: 280px;
		}
		.btnPart {
			display: flex;
		}

		.header {
			display: flex;
			width: 100%;
			height: 100%;
			z-index: 10;
			overflow: hidden;
		}
		.infoPart {
			display: flex;
			flex-direction: column;
			padding: 66px;
			text-align: left;
			flex: 1;
			height: 100%;
			z-index: 2;
		}

		.logoPart {
			flex: 0.6;
			height: 100%;
		}
		.imageContainer {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			position: relative;
			margin: 0 auto;
			transform: translate(0px, -66px);
		}
		.imageBg {
			width: 320px;
			height: 320px;
			position: absolute;
			border-radius: 50%;
			background-image: linear-gradient(-45deg, #cf5256 50%, #15a5de 50%);
			filter: blur(68px);
		}
		.logoImg {
			position: absolute;
		}
	}

	@media screen and (max-width: 1248px) {
		.header {
			display: flex;
			flex-direction: column-reverse;
		}
		.infoPart {
			text-align: center;
		}

		.logoPart {
			position: initial;
		}

		.imageContainer {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 230px;
			position: relative;
			margin: 0 auto;
		}
		.logo {
			z-index: 1;
			width: 160px;
			height: 160px;
		}
		.logoImg {
			width: 266px;
			position: absolute;
		}
		.imageBg {
			width: 220px;
			height: 220px;
			position: absolute;
			border-radius: 50%;
			background-image: linear-gradient(
				-45deg,
				#e51017cc 50%,
				#15a5de 50%
			);
			filter: blur(68px);
		}
		.title {
			background: linear-gradient(
				-45deg,
				hsl(0 100% 60% / 80%),
				hsl(15 100% 60% / 80%) 40%,
				hsl(23 96% 62% / 80%) 45%,
				hsl(0 100% 60% / 80%) 60%,
				hsl(358 58% 47% / 80%)
			);
			background-clip: text;
			-webkit-text-fill-color: transparent;
			line-height: 84px;
			letter-spacing: -0.4px;
			font-size: 52px;
			font-weight: 700;
			white-space: pre-wrap;
		}
		.title3 {
			line-height: 36px;
			font-size: 24px;
			font-weight: 500;
			white-space: pre-wrap;
			color: rgb(45 45 141 / 76%);
			flex: 1;
			font-weight: bold;
		}
		.btnPart {
			display: flex;
			justify-content: space-around;
		}
	}
}
