/*
Theme Name: Twenty Twenty-Five Child
Theme URI:
Description: Child theme of Twenty Twenty-Five
Author: Shivah Web Tech
Template: twentytwentyfive
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/

/* Add your custom CSS below */
/* ==================================================
   CONTACT SECTION
================================================== */

.contact-section {
	position: relative;
	overflow: hidden;
	padding-top: 120px;
	padding-bottom: 120px;
}

.contact-section::before {
	content: "";
	position: absolute;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(117, 76, 255, 0.12) 0%,
		rgba(117, 76, 255, 0) 70%
	);
	top: -200px;
	left: -250px;
	pointer-events: none;
}

.contact-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
	gap: 90px;
	align-items: center;
}


/* LEFT CONTENT */

.contact-content h2 {
	margin: 18px 0 24px;
}

.contact-intro {
	max-width: 590px;
	margin: 0 0 40px;
	font-size: 17px;
	line-height: 1.75;
	opacity: 0.8;
}


/* CONTACT DETAILS */

.contact-details {
	display: flex;
	flex-direction: column;
	max-width: 560px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-detail {
	display: grid;
	grid-template-columns: 52px 1fr 30px;
	gap: 18px;
	align-items: center;
	padding: 20px 0;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
}

.contact-detail:hover {
	padding-left: 8px;
}

.contact-icon {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
}

.contact-detail:hover .contact-icon {
	background: rgba(116, 82, 255, 0.12);
	border-color: rgba(116, 82, 255, 0.4);
}

.contact-icon svg {
	width: 22px;
	height: 22px;
}

.contact-detail-content {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.contact-detail-content small {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.6px;
	opacity: 0.55;
}

.contact-detail-content strong {
	font-size: 16px;
	font-weight: 600;
}

.contact-arrow {
	font-size: 20px;
	opacity: 0.5;
	transition: all 0.3s ease;
}

.contact-detail:hover .contact-arrow {
	opacity: 1;
	transform: translate(3px, -3px);
}


/* CONTACT NOTE */

.contact-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	font-size: 13px;
	opacity: 0.65;
}

.contact-status {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: #55e68a;
	box-shadow: 0 0 12px rgba(85, 230, 138, 0.65);
}


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

.contact-form-card {
	position: relative;
	padding: 46px;
	border-radius: 26px;
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.075),
			rgba(255, 255, 255, 0.025)
		);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.contact-form-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		rgba(125, 91, 255, 0.28),
		transparent 40%,
		rgba(35, 205, 255, 0.12)
	);
	opacity: 0.55;
}

.contact-form-heading {
	margin-bottom: 30px;
}

.form-label {
	display: block;
	margin-bottom: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	opacity: 0.6;
}

.contact-form-heading h3 {
	margin: 0 0 10px;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.2;
}

.contact-form-heading p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	opacity: 0.65;
}


/* Prevent CRM form from overflowing card */

.contact-form,
.contact-form > * {
	max-width: 100%;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
	max-width: 100%;
}


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

@media (max-width: 1100px) {

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

	.contact-form-card {
		padding: 36px;
	}

}


@media (max-width: 900px) {

	.contact-section {
		padding-top: 90px;
		padding-bottom: 90px;
	}

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

	.contact-content {
		max-width: 700px;
	}

	.contact-details {
		max-width: 100%;
	}

	.contact-form-card {
		max-width: 700px;
		width: 100%;
	}

}


@media (max-width: 600px) {

	.contact-section {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.contact-intro {
		font-size: 15px;
	}

	.contact-detail {
		grid-template-columns: 46px 1fr 22px;
		gap: 13px;
		padding: 17px 0;
	}

	.contact-icon {
		width: 46px;
		height: 46px;
		border-radius: 12px;
	}

	.contact-detail-content strong {
		font-size: 14px;
		word-break: break-word;
	}

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

	.contact-form-heading {
		margin-bottom: 24px;
	}

}