/* =========================================================
   SHIVA TOURS & TRAVELS
   CONTACT PAGE
   PREMIUM DESIGN
========================================================= */

.shiva-contact-page {
	--green: #10251e;
	--deep-green: #091711;
	--cream: #f4f0e7;
	--paper: #faf8f3;
	--gold: #b79a61;
	--gold-light: #d1b87d;
	--text: #18251f;
	--muted: #737b75;
	--line: rgba(16, 37, 30, 0.13);

	background: var(--paper);
	color: var(--text);
	overflow: hidden;
}

.contact-wrap {
	width: min(1180px, calc(100% - 80px));
	margin: 0 auto;
}


/* =========================================================
   HERO — EXACTLY 620PX
========================================================= */

.contact-hero {
	position: relative;
	height: 620px;
	min-height: 620px;
	overflow: hidden;
	display: flex;
	align-items: center;
	color: #fff;
	background: var(--deep-green);
}

.contact-hero-image {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.contact-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transform: scale(1.02);
	animation: heroImageIn 1.6s ease forwards;
}

.contact-hero-shade {
	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(
			90deg,
			rgba(4, 17, 12, 0.88) 0%,
			rgba(4, 17, 12, 0.62) 38%,
			rgba(4, 17, 12, 0.20) 75%,
			rgba(4, 17, 12, 0.12) 100%
		),
		linear-gradient(
			0deg,
			rgba(4, 17, 12, 0.48),
			transparent 60%
		);
}

.contact-hero-line {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: calc(50% + 280px);
	width: 1px;
	background: rgba(255, 255, 255, 0.12);
}

.contact-hero-content {
	position: relative;
	z-index: 3;
	width: min(1180px, calc(100% - 80px));
	margin: 0 auto;
	padding-top: 25px;
}

.contact-kicker {
	display: flex;
	align-items: center;
	gap: 14px;

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.75);

	opacity: 0;
	animation: contactReveal 0.8s 0.15s ease forwards;
}

.contact-kicker span {
	width: 38px;
	height: 1px;
	background: var(--gold-light);
}

.contact-hero h1 {
	max-width: 760px;
	margin: 24px 0 24px;

	font-size: clamp(60px, 7vw, 98px);
	line-height: 0.91;
	font-weight: 300;
	letter-spacing: -0.065em;

	opacity: 0;
	animation: contactReveal 0.9s 0.3s ease forwards;
}

.contact-hero h1 em {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	color: var(--gold-light);
}

.contact-hero-content > p {
	max-width: 490px;
	margin: 0;

	font-size: 16px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.76);

	opacity: 0;
	animation: contactReveal 0.9s 0.48s ease forwards;
}

.contact-hero-bottom {
	position: absolute;
	z-index: 4;
	bottom: 34px;
	left: 50%;
	transform: translateX(-50%);

	width: min(1180px, calc(100% - 80px));

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

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;

	opacity: 0;
	animation: contactReveal 0.8s 0.7s ease forwards;
}

.contact-scroll-circle {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 39px;
	height: 39px;

	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;

	font-size: 15px;

	transition:
		background 0.35s ease,
		border-color 0.35s ease,
		transform 0.35s ease;
}

.contact-hero-bottom:hover .contact-scroll-circle {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--green);
	transform: translateY(4px);
}


/* =========================================================
   INTRO
========================================================= */

.contact-intro {
	padding: 120px 0 125px;
	background: var(--paper);
}

.contact-label {
	display: flex;
	align-items: center;
	gap: 12px;

	margin-bottom: 44px;

	color: var(--gold);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.contact-label::before {
	content: "";
	width: 31px;
	height: 1px;
	background: var(--gold);
}

.contact-intro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
}

.contact-intro-title h2 {
	margin: 0;

	font-size: clamp(44px, 4.7vw, 68px);
	line-height: 1.01;
	font-weight: 300;
	letter-spacing: -0.055em;
}

.contact-intro-title h2 strong {
	display: block;
	font-weight: 650;
}

.contact-intro-copy {
	max-width: 510px;
	padding-top: 5px;
}

.contact-intro-copy p {
	margin: 0 0 20px;

	color: #626b64;
	font-size: 15px;
	line-height: 1.9;
}

.contact-intro-copy .contact-intro-lead {
	color: var(--text);
	font-size: 20px;
	line-height: 1.65;
	font-weight: 500;
}


/* =========================================================
   MAIN CONTACT
========================================================= */

.contact-main {
	position: relative;
	padding: 120px 0;

	background: var(--green);
	color: #fff;
}

.contact-main::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -160px;

	width: 440px;
	height: 440px;

	border: 1px solid rgba(183, 154, 97, 0.15);
	border-radius: 50%;
}

.contact-main::after {
	content: "";
	position: absolute;
	top: -110px;
	right: -90px;

	width: 300px;
	height: 300px;

	border: 1px solid rgba(183, 154, 97, 0.09);
	border-radius: 50%;
}

.contact-main-grid {
	position: relative;
	z-index: 2;

	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: 95px;
	align-items: start;
}


/* =========================================================
   INFORMATION
========================================================= */

.contact-label-light {
	color: var(--gold-light);
}

.contact-information h2 {
	margin: 0 0 25px;

	font-size: clamp(48px, 5vw, 72px);
	line-height: 0.96;
	font-weight: 300;
	letter-spacing: -0.055em;
}

.contact-information h2 em {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	color: var(--gold-light);
}

.contact-info-intro {
	max-width: 410px;
	margin: 0 0 45px;

	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
	line-height: 1.85;
}

.contact-info-list {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-info-item {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 12px;

	padding: 21px 0;

	border-bottom: 1px solid rgba(255, 255, 255, 0.12);

	transition: padding-left 0.3s ease;
}

.contact-info-item:hover {
	padding-left: 7px;
}

.contact-info-index {
	color: var(--gold);
	font-size: 9px;
	font-weight: 700;
	padding-top: 3px;
}

.contact-info-label {
	display: block;
	margin-bottom: 7px;

	color: rgba(255, 255, 255, 0.38);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.contact-info-item strong,
.contact-info-item a {
	display: block;

	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.65;
	text-decoration: none;
}

.contact-info-item a {
	transition: color 0.3s ease;
}

.contact-info-item a:hover {
	color: var(--gold-light);
}

.contact-address {
	font-weight: 400 !important;
}


/* =========================================================
   WHATSAPP
========================================================= */

.contact-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	width: 230px;
	margin-top: 38px;
	padding: 17px 20px;
	box-sizing: border-box;

	border: 1px solid rgba(183, 154, 97, 0.55);

	color: #fff;
	text-decoration: none;

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.17em;

	transition:
		background 0.35s ease,
		color 0.35s ease,
		transform 0.35s ease;
}

.contact-whatsapp b {
	font-size: 17px;
	font-weight: 400;

	transition: transform 0.35s ease;
}

.contact-whatsapp:hover {
	background: var(--gold);
	color: var(--green);
	transform: translateY(-3px);
}

.contact-whatsapp:hover b {
	transform: translate(4px, -4px);
}


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

.contact-form-card {
	padding: 48px 48px 45px;

	background: #f8f5ed;
	color: var(--text);

	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.22);
}

.contact-form-top {
	margin-bottom: 35px;
}

.contact-form-top > span {
	display: block;
	margin-bottom: 12px;

	color: var(--gold);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.contact-form-top h3 {
	margin: 0;

	font-size: clamp(38px, 4vw, 55px);
	line-height: 0.98;
	font-weight: 300;
	letter-spacing: -0.05em;
}

.contact-form-top h3 em {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
}


/* =========================================================
   FIELDS
========================================================= */

.contact-fields-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.contact-field {
	margin-bottom: 20px;
}

.contact-field label {
	display: block;
	margin-bottom: 8px;

	color: #727972;

	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.17em;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
	display: block;

	width: 100%;
	box-sizing: border-box;

	border: 1px solid rgba(16, 37, 30, 0.15);
	border-radius: 0;

	background: transparent;
	color: var(--text);

	padding: 14px 14px;

	font-family: inherit;
	font-size: 13px;

	outline: none;

	transition:
		border-color 0.3s ease,
		background 0.3s ease,
		box-shadow 0.3s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
	color: #a1a49f;
}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
	border-color: rgba(16, 37, 30, 0.32);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
	border-color: var(--gold);
	background: #fff;
	box-shadow: 0 8px 25px rgba(16, 37, 30, 0.06);
}

.contact-field select {
	cursor: pointer;
}

.contact-field textarea {
	min-height: 125px;
	resize: vertical;
	line-height: 1.65;
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit-row {
	display: flex;
	align-items: center;
	gap: 20px;

	margin-top: 7px;
}

.contact-submit {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	width: 220px;
	padding: 17px 19px;

	border: 1px solid var(--green);
	background: var(--green);
	color: #fff;

	cursor: pointer;

	font-family: inherit;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.17em;

	overflow: hidden;

	transition:
		color 0.35s ease,
		transform 0.35s ease;
}

.contact-submit::before {
	content: "";

	position: absolute;
	inset: 0;

	background: var(--gold);

	transform: translateX(-102%);

	transition:
		transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}

.contact-submit span,
.contact-submit b {
	position: relative;
	z-index: 2;
}

.contact-submit b {
	font-size: 17px;
	font-weight: 400;

	transition: transform 0.35s ease;
}

.contact-submit:hover::before {
	transform: translateX(0);
}

.contact-submit:hover {
	color: var(--green);
	transform: translateY(-3px);
}

.contact-submit:hover b {
	transform: translateX(5px);
}

.contact-submit-row small {
	max-width: 170px;

	color: #898e88;
	font-size: 10px;
	line-height: 1.6;
}


/* =========================================================
   FINAL CTA
========================================================= */

.contact-final {
	position: relative;

	padding: 125px 30px 135px;

	background:
		linear-gradient(
			135deg,
			#e8e2d5 0%,
			#f7f4ec 50%,
			#ded6c7 100%
		);

	text-align: center;

	overflow: hidden;
}

.contact-final-decoration {
	position: absolute;
	top: 50%;
	left: 50%;

	width: 650px;
	height: 650px;

	border: 1px solid rgba(16, 37, 30, 0.07);
	border-radius: 50%;

	transform: translate(-50%, -50%);
}

.contact-final-decoration::after {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 450px;
	height: 450px;

	border: 1px solid rgba(16, 37, 30, 0.06);
	border-radius: 50%;

	transform: translate(-50%, -50%);
}

.contact-final-content {
	position: relative;
	z-index: 2;

	max-width: 780px;
	margin: 0 auto;
}

.contact-final .contact-label {
	justify-content: center;
	margin-bottom: 30px;
}

.contact-final h2 {
	margin: 0 auto 24px;

	font-size: clamp(47px, 6vw, 78px);
	line-height: 0.96;
	font-weight: 300;
	letter-spacing: -0.06em;
}

.contact-final h2 em {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
}

.contact-final p {
	max-width: 520px;
	margin: 0 auto 35px;

	color: #6c746e;

	font-size: 14px;
	line-height: 1.8;
}

.contact-final-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

.contact-final-phone,
.contact-final-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 210px;
	padding: 17px 20px;

	box-sizing: border-box;

	text-decoration: none;

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;

	transition:
		transform 0.35s ease,
		background 0.35s ease,
		color 0.35s ease;
}

.contact-final-phone {
	border: 1px solid var(--green);
	color: var(--green);
	background: transparent;
}

.contact-final-whatsapp {
	gap: 25px;
	background: var(--green);
	color: #fff;
}

.contact-final-whatsapp span {
	font-size: 16px;
}

.contact-final-phone:hover,
.contact-final-whatsapp:hover {
	transform: translateY(-4px);
}

.contact-final-phone:hover {
	background: var(--green);
	color: #fff;
}

.contact-final-whatsapp:hover {
	background: #19392e;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroImageIn {

	from {
		opacity: 0;
		transform: scale(1.08);
	}

	to {
		opacity: 1;
		transform: scale(1.02);
	}

}

@keyframes contactReveal {

	from {
		opacity: 0;
		transform: translateY(25px);
	}

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

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

	.contact-wrap,
	.contact-hero-content,
	.contact-hero-bottom {
		width: min(100% - 50px, 900px);
	}

	.contact-intro-grid {
		gap: 55px;
	}

	.contact-main-grid {
		grid-template-columns: 1fr;
		gap: 70px;
	}

	.contact-information {
		max-width: 650px;
	}

	.contact-form-card {
		max-width: 760px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.contact-wrap,
	.contact-hero-content,
	.contact-hero-bottom {
		width: calc(100% - 36px);
	}


	/* Hero remains exactly 620px */

	.contact-hero {
		height: 620px;
		min-height: 620px;
	}

	.contact-hero-shade {
		background:
			linear-gradient(
				90deg,
				rgba(4, 17, 12, 0.86),
				rgba(4, 17, 12, 0.45)
			),
			linear-gradient(
				0deg,
				rgba(4, 17, 12, 0.55),
				transparent 65%
			);
	}

	.contact-hero-content {
		padding-top: 20px;
	}

	.contact-hero h1 {
		font-size: clamp(52px, 15vw, 74px);
		line-height: 0.93;
	}

	.contact-hero-content > p {
		max-width: 370px;
		font-size: 14px;
	}

	.contact-hero-bottom {
		bottom: 25px;
	}


	/* Intro */

	.contact-intro {
		padding: 82px 0 85px;
	}

	.contact-intro-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.contact-intro-title h2 {
		font-size: 43px;
	}

	.contact-intro-copy .contact-intro-lead {
		font-size: 18px;
	}


	/* Main */

	.contact-main {
		padding: 85px 0;
	}

	.contact-main-grid {
		gap: 60px;
	}

	.contact-information h2 {
		font-size: 53px;
	}

	.contact-info-intro {
		font-size: 13px;
	}


	/* Form */

	.contact-form-card {
		padding: 34px 21px 30px;
	}

	.contact-form-top h3 {
		font-size: 41px;
	}

	.contact-fields-2 {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.contact-submit-row {
		display: block;
	}

	.contact-submit {
		width: 100%;
	}

	.contact-submit-row small {
		display: block;
		max-width: none;
		margin-top: 12px;
	}


	/* Final */

	.contact-final {
		padding: 90px 20px 100px;
	}

	.contact-final h2 {
		font-size: 49px;
	}

	.contact-final-actions {
		flex-direction: column;
	}

	.contact-final-phone,
	.contact-final-whatsapp {
		width: 100%;
		max-width: 310px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.contact-hero h1 {
		font-size: 49px;
	}

	.contact-intro-title h2 {
		font-size: 38px;
	}

	.contact-information h2 {
		font-size: 47px;
	}

	.contact-form-top h3 {
		font-size: 37px;
	}

	.contact-final h2 {
		font-size: 43px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.contact-hero-image img,
	.contact-kicker,
	.contact-hero h1,
	.contact-hero-content > p,
	.contact-hero-bottom {
		animation: none;
		opacity: 1;
		transform: none;
	}

	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}

}