/* =====================================================
      EPS CONTACT SECTION - FINAL CENTERED MODERN VERSION
      ===================================================== */

	.eps-contact-section {
		position: relative;
		overflow: hidden;
		padding: 96px 0;

		background:
			radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.09), transparent 28%),
			radial-gradient(circle at 88% 20%, rgba(32, 201, 151, 0.08), transparent 26%),
			linear-gradient(180deg, #edf6ff 0%, #f8fbff 48%, #eef5fb 100%);
	}

	.eps-contact-section::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;

		background-image:
			linear-gradient(rgba(13, 110, 253, 0.045) 1px, transparent 1px),
			linear-gradient(90deg, rgba(13, 110, 253, 0.045) 1px, transparent 1px);
		background-size: 58px 58px;

		mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%);
	}

	.eps-contact-wrapper {
		position: relative;
		z-index: 2;
		max-width: 1180px;
		margin-left: auto;
		margin-right: auto;
	}

	.eps-contact-heading {
		max-width: 780px;
		margin: 0 auto 46px;
		text-align: center;
	}

	.eps-contact-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 9px;

		margin-bottom: 14px;
		padding: 8px 14px;

		font-size: 13px;
		font-weight: 800;
		color: #0d6efd;

		background: rgba(13, 110, 253, 0.08);
		border: 1px solid rgba(13, 110, 253, 0.13);
		border-radius: 999px;
	}

	.eps-contact-eyebrow span {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: #20c997;
		box-shadow: 0 0 0 6px rgba(32, 201, 151, 0.14);
	}

	.eps-contact-title {
		position: relative;
		margin: 0 0 18px;

		color: #0f172a;
		font-size: 42px;
		font-weight: 900;
		line-height: 1.2;
		letter-spacing: 0;
	}

	.eps-contact-title::after {
		content: "";
		display: block;
		width: 76px;
		height: 4px;
		margin: 18px auto 0;

		border-radius: 999px;
		background: linear-gradient(90deg, #0d6efd, #38bdf8, #20c997);
	}

	.eps-contact-subtitle {
		max-width: 720px;
		margin: 0 auto;

		color: #17191d;
		font-size: 16px;
		line-height: 1.8;
	}

	/* =====================================================
      FORM CARD
      ===================================================== */

	.eps-contact-card {
		position: relative;
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;
		padding: 38px 42px;

		background: rgba(255, 255, 255, 0.96);
		border: 0;
		border-radius: 18px;
		box-shadow: 0 18px 54px rgba(15, 23, 42, 0.10);

		overflow: hidden;
	}

	.eps-contact-card::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 5px;

		background: linear-gradient(90deg, #0d6efd, #38bdf8, #20c997);
	}

	.eps-contact-card::after {
		content: "";
		position: absolute;
		width: 280px;
		height: 280px;
		right: -130px;
		top: -130px;

		border-radius: 50%;
		background: radial-gradient(circle, rgba(13, 110, 253, 0.12), transparent 65%);
		pointer-events: none;
	}

	.eps-contact-card-inner {
		position: relative;
		z-index: 2;

		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}

	.eps-contact-form-title {
		margin: 0 0 8px;

		color: #0f172a;
		font-size: 25px;
		font-weight: 900;
		line-height: 1.3;
		text-align: center;
		letter-spacing: 0;
	}

	.eps-contact-form-desc {
		max-width: 650px;
		margin: 0 auto 30px;

		color: #17191d;
		font-size: 14px;
		line-height: 1.75;
		text-align: center;
	}

	.eps-contact-alert {
		display: none;

		margin-bottom: 18px;
		padding: 13px 15px;

		border-radius: 14px;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.55;
	}

	.eps-contact-alert.error {
		display: block;
		color: #b91c1c;
		background: rgba(239, 68, 68, 0.08);
		border: 1px solid rgba(239, 68, 68, 0.16);
	}

	.eps-contact-alert.success {
		display: block;
		color: #047857;
		background: rgba(32, 201, 151, 0.10);
		border: 1px solid rgba(32, 201, 151, 0.18);
	}

	.eps-contact-grid {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;

		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.eps-contact-group {
		position: relative;
	}

	.eps-contact-group.full {
		grid-column: 1 / -1;
	}

	.eps-contact-label {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;

		margin-bottom: 8px;

		color: #24364b;
		font-size: 13px;
		font-weight: 800;
	}

	.eps-contact-required {
		color: #0d6efd;
		font-size: 12px;
		font-weight: 900;
	}

	.eps-contact-input,
	.eps-contact-select {
		width: 100% !important;
		height: 52px !important;
		padding: 0 15px !important;

		color: #0f172a !important;
		font-size: 14px !important;
		font-weight: 500 !important;

		background: #ffffff !important;
		border: 0 !important;
		border-radius: 12px !important;
		box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035) !important;

		outline: none !important;
		opacity: 1 !important;
		filter: none !important;

		transition:
			border-color 0.24s ease,
			box-shadow 0.24s ease,
			transform 0.24s ease,
			background 0.24s ease !important;
	}

	.eps-contact-input::placeholder {
		color: #94a3b8 !important;
	}

	.eps-contact-input:focus,
	.eps-contact-select:focus {
		background: #ffffff !important;
		border-color: rgba(13, 110, 253, 0.58) !important;
		box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.10) !important;
		transform: translateY(-1px);
	}

	.eps-contact-group.has-error .eps-contact-input,
	.eps-contact-group.has-error .eps-contact-select {
		border-color: rgba(239, 68, 68, 0.65) !important;
		box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08) !important;
	}

	.eps-contact-error {
		display: none;
		margin-top: 7px;

		color: #ef4444;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.45;
	}

	.eps-contact-group.has-error .eps-contact-error {
		display: block;
	}

	.eps-contact-other {
		margin-top: 12px;
	}

	.eps-contact-other.eps-is-hidden {
		display: none;
	}

	.eps-contact-note {
		max-width: 760px;
		margin: 24px auto 0;

		display: flex;
		align-items: flex-start;
		gap: 12px;

		padding: 14px 15px;

		border-radius: 16px;
		background: rgba(13, 110, 253, 0.055);
		border: 1px solid rgba(13, 110, 253, 0.10);
	}

	.eps-contact-note-icon {
		width: 26px;
		height: 26px;
		min-width: 26px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		background: linear-gradient(135deg, #0d6efd, #38bdf8);
		border-radius: 50%;
		font-size: 13px;
		font-weight: 900;
	}

	.eps-contact-note p {
		margin: 0;
		color: #17191d;
		font-size: 12px;
		line-height: 1.65;
	}

	.eps-contact-submit-row {
		max-width: 760px;
		margin: 28px auto 0;

		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		flex-wrap: wrap;

		text-align: center;
	}

	.eps-contact-submit {
		position: relative;
		overflow: hidden;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;

		min-height: 50px;
		padding: 0 28px;

		color: #ffffff;
		background: linear-gradient(135deg, #0d6efd, #0062e6);
		border: 0;
		border-radius: 14px;

		font-size: 14px;
		font-weight: 900;
		line-height: 1;
		cursor: pointer;

		box-shadow: 0 14px 28px rgba(13, 110, 253, 0.28);

		transition:
			transform 0.28s ease,
			box-shadow 0.28s ease,
			background 0.28s ease;
	}

	.eps-contact-submit::before {
		content: "";
		position: absolute;
		top: 0;
		left: -75%;
		width: 50%;
		height: 100%;

		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
		transform: skewX(-20deg);
		transition: left 0.58s ease;
	}

	.eps-contact-submit::after {
		content: "\2192";
		position: relative;
		z-index: 2;
		transition: transform 0.28s ease;
	}

	.eps-contact-submit:hover {
		background: linear-gradient(135deg, #006be8, #004fbf);
		transform: translateY(-2px);
		box-shadow: 0 20px 40px rgba(13, 110, 253, 0.36);
	}

	.eps-contact-submit:hover::before {
		left: 130%;
	}

	.eps-contact-submit:hover::after {
		transform: translateX(4px);
	}

	.eps-contact-submit-note {
		max-width: 380px;
		color: #17191d;
		font-size: 12px;
		line-height: 1.55;
	}

	/* =====================================================
      ANIMATION
      ===================================================== */

	@keyframes epsContactFadeUp {
		from {
			opacity: 0;
			transform: translateY(28px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.eps-contact-animate {
		opacity: 0;
		animation: epsContactFadeUp 0.75s ease forwards;
	}

	.eps-contact-heading {
		animation-delay: 0.05s;
	}

	.eps-contact-card {
		animation-delay: 0.14s;
	}

	/* =====================================================
      RESPONSIVE
      ===================================================== */

	@media (max-width: 991px) {
		.eps-contact-section {
			padding: 76px 0;
		}

		.eps-contact-card {
			max-width: 100%;
			padding: 32px 28px;
			border-radius: 26px;
		}

		.eps-contact-title {
			font-size: 34px;
		}
	}

	@media (max-width: 767px) {
		.eps-contact-grid {
			max-width: 100%;
			grid-template-columns: 1fr;
		}

		.eps-contact-card {
			padding: 28px 22px;
			border-radius: 22px;
		}

		.eps-contact-card-inner,
		.eps-contact-note,
		.eps-contact-submit-row {
			max-width: 100%;
		}

		.eps-contact-form-title,
		.eps-contact-form-desc {
			text-align: left;
		}

		.eps-contact-submit-row {
			flex-direction: column;
			align-items: stretch;
			text-align: left;
		}

		.eps-contact-submit {
			width: 100%;
		}

		.eps-contact-submit-note {
			max-width: 100%;
		}
	}

	@media (max-width: 480px) {
		.eps-contact-title {
			font-size: 30px;
		}

		.eps-contact-subtitle {
			font-size: 15px;
		}
	}

	/* =====================================================
   HARD FIX CONTACT CENTER ALIGNMENT
   ===================================================== */

	/* pastikan wrapper contact tidak ikut style container lama */
	.eps-contact-section .container.eps-contact-wrapper {
		width: min(1120px, calc(100% - 48px)) !important;
		max-width: 1120px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* heading benar-benar center */
	.eps-contact-heading {
		width: 100% !important;
		max-width: 780px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	/* card form benar-benar center */
	.eps-contact-card {
		width: min(860px, 100%) !important;
		max-width: 860px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* isi form juga center */
	.eps-contact-card-inner {
		width: 100% !important;
		max-width: 760px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.eps-contact-grid,
	.eps-contact-note,
	.eps-contact-submit-row {
		width: 100% !important;
		max-width: 760px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* hilangkan efek offset dari row/col lama kalau masih kebawa */
	.eps-contact-section .row,
	.eps-contact-section [class*="col-"] {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* mobile */
	@media (max-width: 767px) {
		.eps-contact-section .container.eps-contact-wrapper {
			width: calc(100% - 28px) !important;
		}

		.eps-contact-card {
			width: 100% !important;
			max-width: 100% !important;
		}

		.eps-contact-card-inner,
		.eps-contact-grid,
		.eps-contact-note,
		.eps-contact-submit-row {
			max-width: 100% !important;
		}
	}