* {
	padding: 0;
	margin: 0;
	border: 0;
}
*,
:after,
:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@font-face {
	font-family: Georgia;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/be-online-offers-fonts/be-online-offers-Georgia.woff2) format('woff2');
}
@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(/be-online-offers-fonts/be-online-offers-Montserrat-Black.woff2) format('woff2');
}
@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/be-online-offers-fonts/be-online-offers-Montserrat-Bold.woff2) format('woff2');
}
@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(/be-online-offers-fonts/be-online-offers-Montserrat-SemiBold.woff2) format('woff2');
}
:root {
	--font-title: Montserrat, serif;
	--font-text: Georgia, serif;
	--container-width: 1170px;
	--container-step: 20px;
	--container-step-tablet: 15px;
	--container-step-mobile: 10px;
	--container: calc(var(--container-width) + (var(--container-step) * 2));
	--black: #000000;
	--white: #ffffff;
}

:active,
:focus {
	outline: 0;
}
a:active,
a:focus {
	outline: 0;
}
footer,
header,
nav {
	display: block;
}
body,
html {
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	color: var(--white);
}
button,
input,
textarea {
	font-family: Montserrat, sans-serif;
}

button {
	cursor: pointer;
	background-color: transparent;
}
button::-moz-focus-inner {
	padding: 0;
	border: 0;
}
a {
	display: inline-block;
	color: inherit;
}
a,
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
ul li {
	list-style: none;
}
img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
	-o-object-position: center;
	object-position: center;
}
svg {
	display: block;
	width: 100%;
	height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Montserrat, sans-serif;
	font-size: inherit;
	font-weight: inherit;
	line-height: 100%;
}

p,
span {
	font-family: Georgia, sans-serif;
	font-size: inherit;
	font-weight: inherit;
	line-height: 100%;
}

.fs12 {
	font-size: 12px;
}

.fs15 {
	font-size: 15px;
}

.fs16 {
	font-size: 16px;
	line-height: 150%;
}

.fs16-12 {
	font-size: 16px;
	line-height: 150%;
}

.text-uppercase {
	text-transform: uppercase;
}

@media (max-width: 991px) {
	.fs16-12 {
		font-size: 12px;
		line-height: 150%;
	}
}

.fs20 {
	font-size: 20px;
	line-height: 100%;
}

.fw400 {
	font-weight: 400;
}

.fw700 {
	font-weight: 700;
}

.d-flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.gap10 {
	gap: 10px;
}

.gap13 {
	gap: 10px;
}

.gap15 {
	gap: 15px;
}

.gap15-10 {
	gap: 15px;
}

@media (max-width: 991px) {
	.gap15-10 {
		gap: 10px;
	}
}

.gap20 {
	gap: 20px;
}

.gap20-10 {
	gap: 20px;
}

@media (max-width: 991px) {
	.gap20-10 {
		gap: 10px;
	}
}

.align-center {
	align-items: center;
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--container-step);
}

.font-Montserrat {
	font-family: Montserrat, sans-serif;
}

@media (max-width: 991px) {
	.container {
		padding: 0 var(--container-step-tablet);
	}
}
@media (max-width: 600px) {
	.container {
		padding: 0 var(--container-step-mobile);
	}
}

.header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.56);
}

.header__wrapper {
	padding: 10px 0;
	gap: 5px;
	align-items: center;
	justify-content: center;
}

.header__wrapper img:first-child {
	max-width: 32px;
	max-height: 32px;
}

.header__wrapper img:last-child {
	max-width: 90px;
	max-height: 30px;
}

.page {
	position: relative;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 100%),
		url('/be-online-offers-imgs/be-online-offers-hero-back.webp') lightgray -608px 0px / 142.222% 133.16%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero {
	padding: 36px 0 113px 0;
}
.hero__wrapper {
	gap: 50px;
}
.hero__top {
	justify-content: space-between;
}

.hero__title {
	background: linear-gradient(148deg, #e19fb3 10%, #6882df 20%, #e996af 40%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	font-size: 36px;
	line-height: 120%;
	text-transform: uppercase;
}

.hero__logotype {
	max-height: 219px;
}

.hero__cards-list {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}

.hero__cards-item {
	border-radius: 10px;
	border: 1px solid #2a59ff;
	background: linear-gradient(270deg, rgba(42, 89, 255, 0.8) 0%, rgba(223, 73, 119, 0.8) 100%);
	box-shadow: 0px 4px 13px 2px #2a59ff;
	padding: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}

.hero__cards-col {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 40px;
	align-items: center;
}

.hero__card-descr {
	width: 300px;
}
.hero__card-descr span {
	font-family: Montserrat;
}

.hero__card-block span {
	display: none;
}

.hero__card-img {
	height: 150px;
	margin-left: 30px;
	width: 200px;
	object-fit: cover;
}
.hero__card-descr p {
	font-size: 20px;
}

.hero__card-raiting {
	flex-direction: column;
	gap: 10px;
	align-items: center;
	margin-left: 20px;
}

.hero__card-raiting span {
	font-family: Montserrat;
	font-size: 50px;
	font-weight: 600;
}

.hero__card-stars {
	gap: 4px;
}

.hero__card-stars img {
	max-width: 22px;
	aspect-ratio: 1/1;
}

.hero__card-btn {
	display: block;
	position: relative;
	background: #df4977;
	color: #ffffff;
	border: none;
	border-radius: 30px;
	padding: 12px 40px;
	text-transform: uppercase;
	font-family: Montserrat;
	font-size: 16px;
	font-weight: 700;
	line-height: 120%;
	overflow: hidden;
	z-index: 1;
	cursor: pointer;
	transition: all 0.3s ease;
}

@media (max-width: 1100px) {
	.hero__card-btn {
		font-size: 12px;
		padding: 12px 20px;
	}
}

.hero__card-btn::after {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(90deg, #df4977, #2a59ff);
	border-radius: 32px;
	z-index: -2;
}

.hero__card-btn::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	background: #df4977;
	border-radius: 28px;
	z-index: -1;
	animation: mix 5s linear infinite;
}
@keyframes mix {
	30% {
		box-shadow: 0 -1em 2em 3em rgba(223, 73, 119, 0.5), 4em -1em 2em 3em rgba(255, 49, 111, 0.8),
			-4em 2em 3em 2em rgba(255, 255, 254, 0.5), -4em -2em 2em 2em rgba(216, 60, 107, 0.6), 0 3em 2em 2em rgba(255, 255, 254, 0.5),
			2em 1em 2em 2em rgba(50, 10, 250, 0.5);
	}

	60% {
		box-shadow: 2em 1em 2em 3em rgba(42, 89, 255, 0.5), 3em 1em 2em 3em rgba(255, 255, 254, 0.6),
			3em -2em 3em 3em rgba(255, 255, 254, 0.5), -4em 2em 2em 3em rgba(223, 73, 119, 0.6), 0 -3em 2em 3em rgba(255, 255, 250, 0.5),
			-2em 1em 2em 3em rgba(50, 210, 250, 0.6);
	}
}

.hero__card-paylist {
	flex-direction: row;
	gap: 8px;
	display: flex;
}
.hero__card-payitem {
	width: 34px;
	height: 24px;
	border-radius: 6px;
	border: 1px solid var(--white);
	background: #2a59ff;
	padding: 4px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: flex;
}

.hero__card-descr--mobile {
	display: none;
}

.hero__card-block {
	width: 240px;
}

@media (max-width: 991px) {
	.hero__cards-list {
		grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
	}

	.page {
		background-position: center;

		background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%),
			url('/be-online-offers-imgs/be-online-offers-hero-back.webp') lightgray -670px 0px / 302.222% 100% no-repeat;
	}

	.hero__title {
		font-size: 26px;
	}
	.hero {
		padding: 20px 0 0 0;
	}
	.header__wrapper {
		gap: 20px;
	}
	.hero__logotype,
	.hero__card-descr {
		display: none;
	}

	.hero__card-block {
		width: auto;
		text-align: center;
	}

	.hero__card-block span {
		display: block;
		font-size: 8px;
		font-weight: 700;
		line-height: 150%;
		text-transform: uppercase;
		margin-top: 4px;
	}

	.hero__card-stars img {
		max-width: 13px;
	}

	.hero__card-raiting span {
		font-size: 18px;
	}

	.hero__card-raiting {
		flex-direction: row;
		gap: 5px;
		margin-left: 0;
	}

	.hero__card-img {
		margin-left: 0;
		height: 76px;
		width: 135px;
		object-fit: cover;
	}

	.hero__card-paylist {
		gap: 2px;
	}

	.hero__card-payitem {
		width: 25px;
		height: 18px;
		padding: 4px;
	}

	.hero__card-descr--mobile {
		font-family: Montserrat;
		font-size: 12px;
		font-weight: 600;
		display: block;
		text-align: center;
	}

	.hero__cards-item {
		justify-content: center;
		gap: 8px;
		padding: 15px 10px;
	}

	.hero__cards-col {
		flex-direction: column;
		justify-content: center;
		flex: 1;
	}

	.hero__cards-col:first-child {
		gap: 4px;
	}
	.hero__cards-col:last-child {
		gap: 10px;
	}

	.hero__card-btn {
		padding: 12px 10px;
		font-size: 12px;
		font-weight: 600;
	}
}

@media (max-width: 655px) {
	.hero__cards-list {
		grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
	}

	.hero__card-img {
		width: 200px;
	}
}

@media (max-width: 420px) {
	.hero__card-img {
		width: 135px;
	}
}

.pubs {
	padding: 50px 0;
	border: 1px solid #070707;
	background: linear-gradient(107deg, rgba(42, 89, 255, 0.35) 45.94%, rgba(223, 73, 119, 0.35) 94.41%),
		linear-gradient(0deg, #070707 0%, #070707 100%), #fff;
}

.pubs__wrapper {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.pubs__title {
	font-size: 30px;
	font-weight: 900;
	text-transform: uppercase;
}

.pubs__text {
	font-size: 15px;
}

.pubs__cards-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.pubs__cards-item {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: center;
}

.pubs__cards-item:nth-child(even) {
	flex-direction: row-reverse;
}
.image-wrapper {
	height: 100%;
}

.image-wrapper img {
	object-fit: cover;
	width: 236px;
	height: 175px;
}

@media (max-width: 700px) {
	.pubs {
		padding: 30px 0;
	}

	.pubs__wrapper {
		gap: 30px;
	}

	.pubs__title {
		font-size: 20px;
	}

	.pubs__text {
		font-size: 12px;
	}

	.pubs__cards-list {
		gap: 30px;
	}
	.pubs__cards-item {
		flex-direction: column-reverse;
		align-items: normal;
	}
	.pubs__cards-item:nth-child(even) {
		flex-direction: column-reverse;
	}
	.image-wrapper {
		height: 100%;
	}

	.image-wrapper img {
		max-width: 100%;
		width: 100%;
		max-height: 255px;
		object-fit: cover;
	}
}

.footer {
	padding: 50px 0;
	background: linear-gradient(154deg, rgba(223, 73, 119, 0.35) 1.94%, rgba(42, 89, 255, 0.35) 35.41%),
		linear-gradient(0deg, #070707 0%, #070707 100%), #fff;
}
.footer__wrapper {
}
.footer__disclaimer {
	border-radius: 15px;
	border: 1px solid #2a59ff;
	padding: 20px;
}

.footer__text {
}

.footer__icons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.footer__social-list {
	display: flex;
	flex-direction: row;
	gap: 16px;
}
.footer__bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.footer__copyright {
}
.footer__nav-list {
	display: flex;
	flex-direction: row;
	gap: 40px;
}
.footer__nav-item {
}
.footer__nav-link {
	font-family: Georgia, serif;
	font-size: 14px;
}

.footer__pay-list {
	display: flex;
	flex-direction: row;
	gap: 40px;
}

.footer__pay-item div {
	max-height: 35px;
	background-size: auto 35px;
	background-position: center;
	background-repeat: no-repeat;
}

.footer__social-item {
	border-radius: 100%;
	border: 0.584px solid rgba(223, 73, 119, 0.51);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2a59ff;
	width: 80px;
	height: 80px;
}

.footer__social-item div {
	width: 36px;
	height: 36px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.footer__block {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
}

.age {
	width: 60px;
	height: 60px;
	border: 2px solid #ffffff;
	border-radius: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	font-size: 20px;
}

.age span {
	font-family: Montserrat;
}

@media (max-width: 991px) {
	.footer__pay-item:not(:nth-child(2)) div {
		max-height: 30px;
		background-size: auto 30px;
	}

	.footer__pay-item:nth-child(odd) div {
		width: 90px !important;
	}

	.footer__pay-item:nth-child(even) div {
		width: 49px !important;
	}

	.footer__icons,
	.footer__nav-list,
	.footer__bottom {
		flex-direction: column;
		gap: 20px;
	}

	.footer__bottom {
		align-items: flex-start;
	}

	.footer__block {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer__pay-list {
		gap: 10px;
	}

	.footer__social-item {
		width: 50px;
		height: 50px;
	}

	.footer__social-item div {
		width: 22px;
		height: 22px;
	}
}

.terms {
	padding: 40px 0;
}

.terms__wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.terms h1 {
	font-family: Montserrat, serif;
	font-size: 60px;
	font-weight: 800;
	padding-bottom: 10px;
}

.terms h2 {
	font-family: Montserrat, serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 120%;
}

.terms p,
li {
	font-family: Georgia, serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 120%;
}

@media (max-width: 991px) {
	.terms {
		padding: 20px 0;
	}

	.terms__wrapper {
		gap: 10px;
	}

	.terms h1 {
		font-size: 30px;
	}

	.terms h2 {
		font-size: 14px;
	}

	.terms p,
	li {
		font-size: 14px;
	}
}

.form__wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 40px 0;
}

.form {
	position: relative;
	border-radius: 10px;
	border: 1px solid #2a59ff;
	background: linear-gradient(270deg, rgba(42, 89, 255, 0.8) 0%, rgba(223, 73, 119, 0.8) 100%);
	box-shadow: 0px 4px 13px 2px #2a59ff;
	padding: 20px 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
	max-width: 300px;
	width: 100%;

	input {
		border-radius: 10px;
		padding: 10px;
		width: 100%;
	}

	button {
		position: relative;
		background: #df4977;
		color: #ffffff;
		border: none;
		border-radius: 30px;
		padding: 12px 40px;
		text-transform: uppercase;
		font-family: Montserrat;
		font-size: 16px;
		font-weight: 700;
		line-height: 120%;
		overflow: hidden;
		z-index: 1;
		cursor: pointer;
		transition: all 0.3s ease;

		&::after {
			content: '';
			position: absolute;
			top: -2px;
			left: -2px;
			right: -2px;
			bottom: -2px;
			background: linear-gradient(90deg, #df4977, #2a59ff);
			border-radius: 32px;
			z-index: -2;
		}

		&::before {
			content: '';
			position: absolute;
			top: 2px;
			left: 2px;
			right: 2px;
			bottom: 2px;
			background: #df4977;
			border-radius: 28px;
			z-index: -1;
			animation: mix 5s linear infinite;
		}
	}
}

.form__notification {
	font-family: Montserrat, sans-serif;
	font-size: 18px;
	color: #fff;
	text-align: center;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
}
