@media (min-width: 1281px) {
	.mobile-menu {
		display: none;
	}
	.burger {
		display: none;
	}

	.hero-subtitle br {
		display: none;
	}
	.meme-card h3 br {
		display: none;
	}

	.minigame-image {
		display: block;
	}

	.minigame-btn {
		display: inline-block;
	}

	.mobile-flex {
		display: flex;
		position: normal;
		width: auto;
		justify-content: space-between;
	}
	.mobile-two-jpjob-image {
		display: none;
	}
}
@media (min-width: 769px) {
	.mobile-hero-buttons {
		display: none;
	}
	.mobile-sticker-note {
		display: none;
	}
	.meme-title-mobile {
		display: none;
	}
	.mobile-minigame-image {
		display: none;
	}

	.mobile-minigame-btn {
		display: none;
	}
	.mobile-jpjob-image {
		display: none;
	}
}
@media (max-width: 1280px) {
	.container {
		max-width: 768px;
	}
}
@media (max-width: 768px) {
	.container {
		max-width: 390px;
	}
}
/* ===== MOBILE BURGER MENU ===== */
@media (max-width: 1280px) {
	.nav,
	.header-right {
		display: none;
	}

	.mobile-flex {
		display: flex;
		position: relative;
		width: 100%;
		justify-content: center;
	}

	.header {
		display: flex;
		justify-content: center;
	}

	.burger {
		cursor: pointer;
		position: absolute;
		left: 91.5%;
		background: rgba(255, 255, 255, 0.2);
		border: none;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mobile-menu {
		position: fixed;
		inset: 0;
		background: #ff4e9b;
		z-index: 2000;
		display: flex;
		flex-direction: column;
		padding: 30px 24px;
		transform: translateX(100%);
		transition: transform 0.35s ease;
	}

	.mobile-menu.active {
		transform: translateX(0);
	}

	.mobile-close {
		font-size: 28px;
		background: rgba(255, 255, 255, 0.2);
		border: none;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		color: #fff;
		cursor: pointer;
		flex-direction: column;
		gap: 6px;
		cursor: pointer;
		position: absolute;
		left: 85%;
		margin: 0;
	}

	.mobile-nav {
		margin-top: 40px;
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	.mobile-nav a {
		color: #fff;
		font-size: 24px;
		text-decoration: none;
		font-family: Hezaedrus-Medium, sans-serif;
	}

	.mobile-links {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-top: 55px;
	}

	.mobile-links a {
		text-decoration: underline;
		color: #fff;
		font-size: 20px;
		font-family: Hezaedrus-Medium, sans-serif;
	}

	.mobile-footer {
		margin-top: auto;
		display: flex;
		gap: 14px;
		align-items: center;
	}

	.mobile-footer a,
	.mobile-footer img {
		width: 44px;
		height: 44px;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mobile-footer img {
		padding: 8px;
	}
	.mobile-menu-header {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
@media (max-width: 768px) {
	.burger {
		left: 85%;
	}
}
@media (max-width: 1280px) {
	.hero {
		padding: 20px 0;
	}
	.hero-inner {
		grid-template-columns: 1.2fr 0.8fr;
	}

	.hero-content {
		width: 100%;
		padding: 8px;
		gap: 13px;
		max-height: 636px;
	}

	.hero-text {
		width: auto;
	}

	.hero-note {
		width: 100%;
		text-align: center;
	}

	.hero-buttons {
		flex-direction: column;
	}

	.hero-video {
		height: 636px;
	}

	.hero-title {
		padding-left: 115px;
	}

	.hero-title h1 {
		font-size: 64px;
	}

	.hero-title::before {
		width: 300px;
		filter: blur(35px);
		left: 0px;
	}

	.hero-coin {
		left: 0px;
		top: 0px;
	}

	.hero-subtitle {
		white-space: normal;
		display: inline-block;
	}

	.hero-subtitle br {
		display: inline;
	}

	.btn {
		justify-content: center;
	}

	.meme-inner {
		display: flex;
		flex-direction: column;
	}
	.slider-btn.right {
		right: 100px;
	}
	.slider-btn.left {
		left: 100px;
	}
	.meme-slider {
		margin-top: -30px;
		gap: 15px;
	}
	.meme-note {
		right: 0px;
	}
	/* ===== JP.JOB SECTION ===== */
	.jpjob-image {
		display: none;
	}
	.jpjob-container {
		display: flex;
	}
	.minigame-container {
		display: flex;
		flex-direction: column-reverse;
	}
	.minigame-card {
		width: 100%;
	}
	.minigame-card-image {
		width: 405px;
	}

	.mobile-two-jpjob-image {
		display: flex;
		justify-content: center;
	}

	.slide {
		align-items: center;
	}
}
@media (max-width: 768px) {
	.hero {
		padding: 20px 0;
	}
	.hero-inner {
		display: flex;
		flex-direction: column-reverse;
		gap: 32px;
	}

	.hero-content {
		width: 100%;
	}

	.hero-text {
		width: auto;
	}

	.hero-note {
		width: 100%;
		text-align: center;
		margin-top: 0px;
	}

	.hero-buttons {
		flex-direction: column;
	}

	.hero-video {
		height: 636px;
	}

	.hero-title {
		padding-left: 110px;
	}

	.hero-title h1 {
		font-size: 64px;
	}

	.hero-title::before {
		width: 300px;
		filter: blur(35px);
		left: 0px;
	}

	.hero-coin {
		left: 0px;
		top: 0px;
	}

	.hero-content {
		padding: 8px;
	}

	.hero-subtitle {
		white-space: normal;
		display: inline-block;
	}

	.hero-subtitle br {
		display: inline;
	}

	.btn {
		justify-content: center;
		width: 100%;
	}

	.hero-content .hero-note {
		display: none;
	}

	.hero-buttons {
		display: none;
	}

	.roadmap {
		padding: 20px 0;
	}

	.slider-btn.right {
		right: 0px;
	}
	.slider-btn.left {
		left: 0px;
	}

	.mobile-hero-buttons {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.roadmap-list {
		gap: 0px;
	}

	.meme {
		padding: 20px 0;
	}

	.meme-inner {
		gap: 20px;
	}

	.meme-note {
		display: none;
		right: -50px;
	}

	.meme-title {
		display: none;
	}

	.meme-title-mobile {
		position: relative;
		display: flex;
		align-items: center;
	}

	.meme-title-mobile::before {
		content: '';
		position: absolute;
		left: 215px;
		top: 75%;
		transform: translateY(-50%);
		width: 110px;
		height: 45px;
		background: rgba(255, 78, 155, 0.45);
		filter: blur(15px);
		border-radius: 100px;
		z-index: 0;
	}

	.meme-title-mobile h1 {
		font-family: 'gogono-cocoa';
		font-size: 64px;
		color: #ff4e9b;
		position: relative;
		z-index: 1;
	}

	.mobile-coin {
		position: absolute;
		left: 205px;
		top: 0px;
		z-index: 2;
	}

	.meme-card {
		padding: 25px 8px;
	}
	.meme-card br {
		display: inline;
	}
	.meme-card p {
		width: auto;
	}
	.meme-card h3 {
		margin-top: 16px;
	}
	.meme-slider {
		margin-top: 0px;
		gap: 0px;
	}
	.meme-btn {
		margin-top: 0px;
		margin-bottom: 10px;
	}
	.mobile-sticker-note {
		display: block;
	}

	/* ===== JP.JOB SECTION ===== */
	.jpjob {
		padding: 20px 0;
	}
	.jpjob-logo {
		width: 200px;
	}
	.mobile-jpjob-image {
		display: block;
	}
	.mobile-jpjob-image img {
		width: 355px;
	}
	.jbjob-container-link {
		flex-direction: column;
		align-items: center;
	}
	.jpjob-link {
		flex-direction: row;
	}
	.mobile-two-jpjob-image {
		display: none;
	}
	/* ===== MINI GAME ===== */
	.minigame {
		padding: 20px 0px 20px 0px;
	}
	.minigame-container {
		display: flex;
		flex-direction: column;
	}
	.minigame-image img {
		margin-bottom: 0px;
	}
	.minigame-image {
		display: none;
	}
	.mobile-minigame-image {
		position: relative;
		width: 100%;
		height: 828px;
		overflow: hidden;
	}

	.mobile-minigame-image img {
		display: block;
		width: auto;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.minigame-title h1 {
		font-size: 64px;
	}
	.minigame-card-image {
		position: initial;
		margin-bottom: -55px;
		width: auto;
	}
	.mobile-minigame-btn {
		display: inline-flex;
		width: 100%;
	}
	.minigame-btn {
		display: none;
	}
	.minigame-card {
		margin-bottom: 20px;
		padding: 15px;
	}
	.minigame-lead img {
		display: none;
	}
}
@media (max-width: 1280px) {
	/* ===== FOOTER ===== */
	.footer {
		height: 700px;
	}
	.footer-nav {
		display: none;
	}
	.footer-socials {
		display: none;
	}
	.footer-logo {
		width: 175px;
		text-align: center;
	}
	.footer-left {
		align-items: center;
		justify-content: center;
	}
}
