* {
	transition:  all ease 0.3s;
	box-sizing: border-box;
}
html {
	height: 100%;
}
body {
	padding: 0;
	margin: 0;
	font-family: "Poppins", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100%;
}
button {
	font-family: inherit;
	cursor: pointer;
}

.coming {
	background: url(../img/bg-mesh.png) no-repeat!important;
	background-size: cover!important;
	background-position: center center!important;
	background-attachment: fixed!important;
	height: 100%;
}

	.page-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 72px;
		flex-direction: column;
	}
		.page-header {
			margin-top: 64px;
		}
			.page-header img {
				width: 200px;
			}
		.page-body {
			display: flex;
			gap: 32px;
			flex-direction: column;
			align-items: center;
			position: relative;
		}
			.page-body h2 {
				font-size: 80px;
				color: #151C24;
				font-weight: 700;
				margin: 0;
				padding: 0;
				text-align: center;
			}
				.page-body h2 span {
					background: linear-gradient(90deg, #D81860 0%, #3EA3E4 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			.page-body h4 {
				font-size: 24px;
				color: #64748B;
				margin: 0;
				padding: 0;
				text-align: center;
				font-weight: 600;
			}
			.page-body button,
			.page-body .cta-button {
				background: linear-gradient(90deg, #D81860 0%, #3EA3E4 100%);
				color: #fff;
				font-size: 20px;
				font-weight: 600;
				text-decoration: none;
				display: flex;
				align-items: center;
				gap: 8px;
				border: none;
				padding: 17px 72px;
				border-radius: 64px;
				filter: drop-shadow(0 20px 20px rgba(216, 24, 96, 0.30));
				transition: all ease 0.3s;
			}
				.page-body button:hover,
				.page-body .cta-button:hover {
					background: linear-gradient(90deg, #C0154F 0%, #2E8FD0 100%);
					transition: all ease 0.3s;
					filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.30));
				}
				.page-body .cta-button img {
					width: 20px;
				}

.inquiry-fix {
	width: 768px;
	margin: 0 auto;
}
.tag {
	position: absolute;
	width: 72px;
	left: -120px;
	bottom: -100px;
}
.star {
	position: absolute;
	width: 64px;
	right: -150px;
	bottom: 24px;
}

.header-img {

}
	.header-img img {
		width: 688px;
		display: block;
	}
.bg-content {
	background: url(../img/okito_background.png) no-repeat!important;
	background-size: cover!important;
	background-position: center center!important;
	width: 100%;
	margin-top: -72px;
	padding: 88px 80px;
	display: flex;
	gap: 28px;
	flex-direction: column;
	align-items: center;
}
	.bg-content h3 {
		font-size: 54px;
		color: #fff;
		font-weight: 800;
		margin: 0;
		padding: 0;
		text-align: center;
	}
		.bg-content h3 span {
			background: linear-gradient(90deg, #FF4FA0 0%, #D81860 100%);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	.social-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		width: 100%;
		max-width: 880px;
	}
		.social-card {
			background: rgba(21, 28, 36, 0.35);
			border: 1px solid rgba(255, 255, 255, 0.12);
			display: flex;
			align-items: center;
			gap: 16px;
			padding: 20px 24px;
			border-radius: 16px;
			text-decoration: none;
		}
			.social-card:hover {
				background: rgba(21, 28, 36, 0.55);
				text-decoration: none;
			}
			.card-icon {
				width: 48px;
				height: 48px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12px;
				flex-shrink: 0;
			}
				.card-icon img {
					width: 24px;
				}
				.fb-icon {
					background: #1877F2;
				}
				.ig-icon {
					background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
				}
				.group-icon {
					background: rgba(255, 255, 255, 0.15);
				}
			.card-info {
				display: flex;
				gap: 2px;
				flex-direction: column;
				flex: 1;
			}
				.card-info strong {
					font-size: 16px;
					color: #fff;
					font-weight: 600;
				}
				.card-info small {
					font-size: 13px;
					color: rgba(255, 255, 255, 0.65);
				}
			.card-arrow {
				width: 20px;
				opacity: 0.6;
			}
				.social-card:hover .card-arrow {
					opacity: 1;
				}

.page-footer {
	background: #292929;
	width: 100%;
	display: flex;
	gap: 24px;
	flex-direction: column;
	align-items: center;
	padding: 48px 80px;
	margin-top: -72px;
}
	.footer-logo {
		width: 100px;
	}
	.page-footer p {
		font-size: 13px;
		color: rgba(255, 255, 255, 0.45);
		margin: 0;
		padding: 0;
		text-align: center;
	}



@media screen and (max-width: 768px) {
	.inquiry-fix {
		width: 100%;
	}
	.page-body h2 {
		font-size: 72px;
	}
	.page-body h4 {
		font-size: 24px;
	}
	.tag, .star {
		display: none;
	}
	.scroll {
		overflow: scroll;
	}
	.header-img {
		width: 100%;
		padding: 0 32px;
	}
		.header-img img {
			width: 100%;
		}
	.bg-content {
		padding: 64px 32px;
	}
	.bg-content h3 {
		font-size: 40px;
	}
	.social-cards {
		grid-template-columns: 1fr;
	}
	.page-footer {
		padding: 48px 32px;
	}
}

@media screen and (max-width: 540px) {
	.page-body {
		gap: 24px;
	}
	.page-body h2 {
		font-size: 48px;
	}
	.page-body h4 {
		font-size: 18px;
	}
	.bg-content h3 {
		font-size: 32px;
	}
	.social-card {
		padding: 16px 20px;
	}
	.page-footer {
		width: 100%;
		overflow: hidden;
	}
	.phone {
		display: flex;
		justify-content: center;
	}
}