*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Inter', sans-serif;
	font-optical-sizing: auto;
}

.logo {
	width: 16.75rem;
	height: 6.34706rem;
	aspect-ratio: 268/101.55;
	margin-block-end: 1.5rem;
	animation: danceupandown 2s ease-in-out infinite;
}

.hero {
	background: rgba(0, 0, 0, 0.9) url('./assets/hero_watermark.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-inline: 1rem;
	padding-block: 1rem;
	margin-block-end: 4.38rem;
}

.preTitle {
	color: yellow;
	text-align: center;
	font-family: Inter;
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	margin-block-end: 0.75rem;
}

.title {
	color: var(--Base-White, #fff);
	text-align: center;
	font-size: clamp(1.8rem, 5vw, 4.5rem);
	font-weight: 600;
	max-width: 20ch;
	margin-block-end: 1.5rem;
}

.subTitle {
	color: var(--Gray-200, #eaecf0);
	text-align: center;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.875rem; /* 150% */
	margin-block-end: 3rem;
}

.btnContainer {
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
	align-items: center;
}

.maxBetBtn {
	color: var(--Gray-700, #344054);
	font-size: 1.125rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-inline: 1.75rem;
	padding-block: 0.75rem;
	cursor: pointer;
	border-radius: 0.5rem;
	border: 1px solid var(--Success-700, #027a48);
	background: var(--Base-White, #fff);
	box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
	outline: none;
	justify-content: center;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.maxBetBtn:hover {
	background: var(--Success-700, #027a48);
	color: var(--Base-White, #fff);
}

.maxBetBtn svg {
	animation: forwardandback 2s ease-in-out infinite;
}

.maxBetBtn svg path {
	transition: all 0.3s ease-in-out;
}

.maxBetBtn:hover svg path {
	stroke: var(--Base-White, #fff);
}

.maxLotBtn {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-inline: 1.75rem;
	padding-block: 0.75rem;
	cursor: pointer;
	border-radius: 0.5rem;
	border: 1px solid var(--Error-700, #b42318);
	background: var(--Error-700, #b42318);
	box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
	color: var(--Base-White, #fff);
	font-size: 1.125rem;
	font-weight: 500;
	justify-content: center;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.maxLotBtn:hover {
	color: var(--Error-700, #b42318);
	background: var(--Base-White, #fff);
}

.maxLotBtn svg {
	animation: forwardandback 2s ease-in-out infinite;
}

.maxLotBtn svg path {
	transition: all 0.3s ease-in-out;
}

.maxLotBtn:hover svg path {
	stroke: var(--Base-White, #b42318);
}

@media (max-width: 414px) {
	.maxBetBtn,
	.maxLotBtn {
		width: 100%;
		justify-content: center;
	}
}

.smartTitle {
	color: var(--Gray-blue-800, #293056);
	text-align: center;
	text-align: center;
	font-size: clamp(1.8rem, 5vw, 3.75rem);
	font-weight: 600;
	padding-inline: 1rem;
	margin-block-end: 1rem;
}

.smartSubTitle {
	display: flex;
	padding: 0.25rem 0.625rem 0.25rem 0.25rem;
	align-items: center;
	gap: 0.75rem;
	border-radius: 1rem;
	background: var(--Gray-blue-200, #d5d9eb);
	mix-blend-mode: multiply;
	max-width: 22rem;
	margin-inline: auto;
	color: var(--Success-700, #027a48);
	font-size: 0.875rem;
	font-weight: 500;
	margin-block-end: 4.38rem;
	animation: danceupandown 2s ease-in-out infinite;
}

.smartSubTitle span {
	color: #027a48;
	background: var(--Base-White, #fff);
	border-radius: 1rem;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 500;
	padding-inline: 0.5rem;
	padding-block: 0.5rem;
}

.smart {
	margin-block-end: 5rem;
}

@media (min-width: 1045px) {
	.smart {
		margin-block-end: 11.25rem;
	}
}

.smartContainer {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		'playMore playMore'
		'smilingGuy smilingGuy'
		'maxBet maxBet'
		'partyGuys partyGuys';
	gap: 2rem;
}

@media (min-width: 1045px) {
	.smartContainer {
		grid-template-areas:
			'playMore smilingGuy'
			'partyGuys maxBet';
		gap: 0;
	}
}

.article {
	padding-inline: 2rem;
	padding-block: 1rem;
}

@media (min-width: 768px) {
	.article {
		padding-inline: 7rem 4rem;
		padding-block: 6rem;
	}
}

.articleTitle {
	color: var(--Gray-900, #101828);
	font-size: 1.6rem;

	font-weight: 600;
	margin-block-end: 1rem;
	text-align: center;
}

@media (min-width: 768px) {
	.articleTitle {
		font-size: 2.25rem;
	}
}

@media (min-width: 1045px) {
	.articleTitle {
		text-align: left;
		max-width: 26ch;
	}
}

.articleText {
	color: var(--Gray-500, #667085);
	font-size: 1.125rem;
	font-weight: 400;
	margin-block-end: 2rem;
	text-align: center;
}

@media (min-width: 1045px) {
	.articleText {
		text-align: left;
		max-width: 57ch;
	}
}

.articleMaxLottoBtn {
	border-radius: 0.5rem;
	border: 1px solid var(--Error-700, #b42318);
	background: var(--Error-700, #b42318);
	display: flex;
	padding: 0.75rem 1.25rem;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
	color: var(--Base-White, #fff);
	font-size: 1rem;
	font-weight: 500;
	margin-inline: auto;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.articleMaxLottoBtn:hover {
	color: var(--Error-700, #b42318);
	background: var(--Base-White, #fff);
}

.articleMaxLottoBtn svg {
	animation: forwardandback 2s ease-in-out infinite;
}

.articleMaxLottoBtn svg path {
	transition: all 0.3s ease-in-out;
}

.articleMaxLottoBtn:hover svg path {
	stroke: var(--Base-White, #b42318);
}

.articleMaxBetBtn {
	border-radius: 0.5rem;
	border: 1px solid var(--Success-600, #039855);
	background: var(--Success-600, #039855);
	box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
	display: flex;
	padding: 0.75rem 1.25rem;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	color: var(--Base-White, #fff);
	font-size: 1rem;
	font-weight: 500;
	margin-inline: auto;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.articleMaxBetBtn:hover {
	color: var(--Success-600, #039855);
	background: var(--Base-White, #fff);
}

.articleMaxBetBtn svg {
	animation: forwardandback 2s ease-in-out infinite;
}

.articleMaxBetBtn svg path {
	transition: all 0.3s ease-in-out;
}

.articleMaxBetBtn:hover svg path {
	stroke: var(--Base-White, #039855);
}

@media (min-width: 1045px) {
	.articleMaxLottoBtn,
	.articleMaxBetBtn {
		margin-inline: revert;
		max-width: 25ch;
	}
}

.playMore {
	grid-area: playMore;
}

.maxBet {
	grid-area: maxBet;
}

.smiling_guy {
	background: url('./assets/smiling_guy.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	grid-area: smilingGuy;
	min-height: 32.125rem;
}

.partyGuys {
	background: url('./assets/party_guys.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	grid-area: partyGuys;
	min-height: 32.125rem;
}

.customer {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		'rating rating'
		'customer_care customer_care';
	gap: 2rem;
	margin-block-end: 11.25rem;
	padding-inline: 1rem;
}

@media (min-width: 1045px) {
	.customer {
		grid-template-areas: 'rating customer_care';
		gap: 4;
		padding-inline: 5rem;
	}
}

.customer_care {
	background: url('./assets/customer_care_guys.webp');
	background-position: center;
	background-repeat: no-repeat;
	min-height: 31rem;
	grid-area: customer_care;
}

.ratingWrapper {
	grid-area: rating;
}

.rating {
	display: block;
	margin-block-end: 3rem;
	margin-inline: auto;
}

@media (min-width: 1045px) {
	.rating {
		margin-inline: revert;
	}
}

.ratingTitle {
	color: var(--Gray-900, #101828);
	font-size: 2rem;
	font-weight: 500;
	margin-block-end: 3rem;
	text-align: center;
}

@media (min-width: 1045px) {
	.ratingTitle {
		font-size: 3rem;
		text-align: left;
		max-width: 27ch;
	}
}

.ratingBtn {
	display: flex;
	width: 8.625rem;
	height: 3rem;
	padding: 0.625rem 1.125rem;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--Success-800, #05603a);
	background: var(--Success-25, #f6fef9);
	color: var(--Success-800, #05603a);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	outline: none;
	margin-inline: auto;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	animation: danceupandown 2s ease-in-out infinite;
}

.ratingBtn:hover {
	background: var(--Success-800, #05603a);
	color: var(--Base-White, #fff);
}

.ratingBtn:hover svg path {
	stroke: var(--Base-White, #fff);
}

@media (min-width: 1045px) {
	.ratingBtn {
		margin-inline: revert;
	}
}

.footer {
	padding-block: 4rem;
	padding-inline: 1rem;
	background: var(--Gray-blue-900, #101323);
	position: relative;
}

@media (min-width: 1045px) {
	.footer {
		padding-inline: 5rem;
	}
}

.footer::before {
	content: '';
	width: 100%;
	height: 2px;
	background: var(--Gray-blue-800, #293056);
	position: relative;
	height: 0.0625rem;
}

.footerWrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

@media (min-width: 563px) {
	.footerWrapper {
		justify-content: space-between;
	}
}

.copyright {
	color: var(--Gray-400, #98a2b3);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
}

.footerLink {
	color: var(--Gray-400, #98a2b3);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
	transition: all 0.5s ease-in-out;
}

.footerLink:hover {
	text-decoration: underline;
}

.linkWrapper {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-flow: row wrap;
}

@keyframes danceupandown {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-0.5rem);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes forwardandback {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(0.4rem);
	}
	100% {
		transform: translateX(0);
	}
}