@media screen and (max-width: 768px) {
	.hero-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 50px;
	}
	.title-arc {
		font-size: 3rem;
	}

	.logo {
		width: 150px;
		height: 150px;
	}

	.highlight-text {
		font-size: 1rem;
		padding: 0px 10px;
	}

	.rules-title {
		text-align: center;
		font-size: 1.8rem;
		padding: 0px 10px;
		font-weight: bold;
		margin-bottom: 60px;
		color: var(--color-primary);
		animation: fadeDown 1.5s ease-in-out;
	}

	.message-container {
		position: fixed;
		top: 0px;
		right: 0px;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		padding: 10px;
	}

	.message {
		background-color: var(--color-primary);
		color: var(--color-secondary);
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
		font-weight: 500;
		padding: 10px 20px;
		text-align: center;
	}
}