/* =========================================================
   TECHHUB SOLUTIONS
   CONTACT PAGE RESPONSIVE CSS
   FINAL CLEAN VERSION
========================================================= */


/* =========================================================
   TABLET
   1024px AND BELOW
========================================================= */

@media (max-width: 1024px) {

	/* ---------- CONTACT HEADER ---------- */

	.th-contact-header {
		width: 100%;
		padding: 80px 0 60px;
		box-sizing: border-box;
	}

	.th-contact-header .container {
		width: 100%;
		max-width: 100%;
		padding-left: 25px;
		padding-right: 25px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.th-contact-header-content {
		width: 100%;
		max-width: 720px;
		margin: 0 auto;
		text-align: center;
		box-sizing: border-box;
	}

	.th-contact-header-title {
		font-size: 42px;
		line-height: 1.2;
	}

	.th-contact-header-description {
		font-size: 16px;
		line-height: 1.8;
	}


	/* ---------- CONTACT INFO ---------- */

	.th-contact-info {
		width: 100%;
		padding-bottom: 70px;
		box-sizing: border-box;
	}

	.th-contact-info .container {
		width: 100%;
		max-width: 100%;
		padding-left: 25px;
		padding-right: 25px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.th-contact-info-wrapper {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 25px;
		box-sizing: border-box;
	}

	.th-contact-card {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}


	/* ---------- CONTACT FORM ---------- */

	.th-contact-form {
		width: 100%;
		padding-bottom: 80px;
		box-sizing: border-box;
	}

	.th-contact-form .container {
		width: 100%;
		max-width: 100%;
		padding-left: 25px;
		padding-right: 25px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.th-contact-form-wrapper {
		width: 100%;
		max-width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 35px;
		box-sizing: border-box;
	}

	.th-contact-form-content {
		width: 100%;
		max-width: 500px;
		min-width: 0;
		box-sizing: border-box;
	}

	.th-contact-form-title {
		font-size: 38px;
		line-height: 1.2;
	}

	.th-contact-form-description {
		font-size: 16px;
		line-height: 1.8;
	}

	.th-contact-form-box {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding: 35px;
		box-sizing: border-box;
	}


	/* ---------- MAP ---------- */

	.th-contact-map {
		width: 100%;
		padding-bottom: 80px;
		box-sizing: border-box;
	}

	.th-contact-map .container {
		width: 100%;
		max-width: 100%;
		padding-left: 25px;
		padding-right: 25px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.th-contact-map-wrapper {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.th-contact-map-wrapper iframe {
		width: 100%;
		height: 450px;
		display: block;
		border: 0;
		box-sizing: border-box;
	}

}


/* =========================================================
   MOBILE
   767px AND BELOW
========================================================= */

@media (max-width: 767px) {

	/* ---------- GLOBAL ---------- */

	html,
	body {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden !important;
	}


	/* ---------- CONTACT HEADER ---------- */

	.th-contact-header {
		width: 100%;
		padding: 55px 0 45px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.th-contact-header .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.th-contact-header-content {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	.th-contact-header-tag {
		display: block;
		width: 100%;
		margin: 0 0 14px;
		font-size: 13px;
		letter-spacing: 1.8px;
		text-align: center !important;
		box-sizing: border-box;
	}

	.th-contact-header-title {
		display: block;
		width: 100%;
		max-width: 340px;
		margin: 0 auto 20px;
		font-size: 34px;
		line-height: 1.2;
		text-align: center !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
		box-sizing: border-box;
	}

	.th-contact-header-description {
		display: block;
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		font-size: 16px;
		line-height: 1.8;
		text-align: center !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
		box-sizing: border-box;
	}


	/* =====================================================
	   CONTACT INFO
	===================================================== */

	.th-contact-info {
		width: 100%;
		padding-bottom: 60px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.th-contact-info .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.th-contact-info-wrapper {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.th-contact-card {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		padding: 30px 25px;
		box-sizing: border-box;
	}

	.th-contact-card-icon {
		width: 65px;
		height: 65px;
		font-size: 25px;
	}

	.th-contact-card-title {
		font-size: 21px;
		line-height: 1.3;
	}

	.th-contact-card-text {
		font-size: 15px;
		line-height: 1.7;
		word-break: normal;
		overflow-wrap: break-word;
	}


	/* =====================================================
	   CONTACT FORM
	===================================================== */

	.th-contact-form {
		width: 100%;
		padding: 0 0 60px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.th-contact-form .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.th-contact-form-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 35px !important;
		margin: 0 auto !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}


	/* =====================================================
	   FORM LEFT CONTENT
	===================================================== */

	.th-contact-form-content {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 auto !important;
		padding: 0 !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}


	/* ---------- RED SMALL HEADING ---------- */

	.th-contact-form-tag {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto 14px !important;
		font-size: 13px;
		line-height: 1.5;
		letter-spacing: 1.8px;
		text-align: center !important;
		white-space: normal !important;
		box-sizing: border-box !important;
	}


	/* =====================================================
	   MAIN FORM HEADING
	   FORCE TWO LINES
	===================================================== */

	.th-contact-form-title {
		display: block !important;

		width: 100% !important;

		/*
		 * Width deliberately limited so the heading
		 * breaks into two clean lines on mobile.
		 */
		max-width: 290px !important;

		margin: 0 auto 20px !important;

		font-size: 32px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;

		text-align: center !important;

		/* IMPORTANT */
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: normal !important;

		overflow: visible !important;

		box-sizing: border-box !important;
	}


	/* ---------- FORM DESCRIPTION ---------- */

	.th-contact-form-description {
		display: block !important;

		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto !important;

		font-size: 16px !important;
		line-height: 1.75 !important;

		text-align: center !important;

		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;

		box-sizing: border-box !important;
	}


	/* =====================================================
	   FORM BOX
	===================================================== */

	.th-contact-form-box {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 auto 35px !important;

		padding: 30px 25px !important;

		border-radius: 18px;

		box-sizing: border-box !important;
	}

	.th-contact-form-box form {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.th-contact-form-box form p {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	.th-contact-form-box form label {
		display: block;
		width: 100%;
		max-width: 100%;
		font-size: 14px;
		box-sizing: border-box;
	}

	.th-contact-form-box .wpcf7-form-control-wrap {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}


	/* ---------- FORM INPUTS ---------- */

	.th-contact-form-box form input[type="text"],
	.th-contact-form-box form input[type="email"],
	.th-contact-form-box form input[type="tel"],
	.th-contact-form-box form input[type="number"],
	.th-contact-form-box form select,
	.th-contact-form-box form textarea {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		padding: 14px 15px !important;

		font-size: 15px !important;

		box-sizing: border-box !important;
	}


	/* ---------- SUBMIT BUTTON ---------- */

	.th-contact-form-box form input[type="submit"],
	.th-contact-form-box form button[type="submit"] {
		display: block;
		width: 100%;
		max-width: 100%;
		min-width: 0;

		padding: 13px 25px;

		box-sizing: border-box;
	}


	/* =====================================================
	   MAP
	===================================================== */

	.th-contact-map {
		width: 100%;
		padding-bottom: 60px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.th-contact-map .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.th-contact-map-wrapper {
		width: 100%;
		max-width: 100%;
		margin: 0;
		border-radius: 15px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.th-contact-map-wrapper iframe {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: 350px;
		border: 0;
		box-sizing: border-box;
	}

}


/* =========================================================
   SMALL MOBILE
   480px AND BELOW
========================================================= */

@media (max-width: 480px) {

	/* ---------- GLOBAL ---------- */

	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden !important;
	}


	/* ---------- HEADER ---------- */

	.th-contact-header {
		padding: 50px 0 45px;
	}

	.th-contact-header .container {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.th-contact-header-title {
		max-width: 330px;
		font-size: 31px;
	}

	.th-contact-header-description {
		font-size: 15px;
		line-height: 1.75;
	}


	/* ---------- CONTACT INFO ---------- */

	.th-contact-info .container {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.th-contact-info-wrapper {
		gap: 18px;
	}

	.th-contact-card {
		padding: 28px 20px;
	}

	.th-contact-card-title {
		font-size: 20px;
	}

	.th-contact-card-text {
		font-size: 15px;
	}


	/* =====================================================
	   CONTACT FORM
	===================================================== */

	.th-contact-form .container {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.th-contact-form-wrapper {
		gap: 30px !important;
	}


	/* ---------- CONTENT ---------- */

	.th-contact-form-content {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		text-align: center !important;
	}


	/* ---------- TAG ---------- */

	.th-contact-form-tag {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}


	/* =====================================================
	   HEADING
	   TWO LINES + CENTER
	===================================================== */

	.th-contact-form-title {
		display: block !important;

		width: 100% !important;

		max-width: 285px !important;

		margin: 0 auto 20px !important;

		font-size: 30px !important;
		line-height: 1.2 !important;

		text-align: center !important;

		/* REMOVE ANY THEME CONFLICT */
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: normal !important;

		overflow: visible !important;

		box-sizing: border-box !important;
	}


	/* ---------- DESCRIPTION ---------- */

	.th-contact-form-description {
		display: block !important;

		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto !important;

		font-size: 15px !important;
		line-height: 1.75 !important;

		text-align: center !important;

		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;

		box-sizing: border-box !important;
	}


	/* ---------- FORM BOX ---------- */

	.th-contact-form-box {
		width: 100% !important;
		max-width: 100% !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding: 25px 20px !important;

		border-radius: 16px;
		box-sizing: border-box !important;
	}

	.th-contact-form-box form input[type="text"],
	.th-contact-form-box form input[type="email"],
	.th-contact-form-box form input[type="tel"],
	.th-contact-form-box form input[type="number"],
	.th-contact-form-box form select,
	.th-contact-form-box form textarea {
		width: 100% !important;
		max-width: 100% !important;
		padding: 13px 14px !important;
		box-sizing: border-box !important;
	}

	.th-contact-form-box form input[type="submit"],
	.th-contact-form-box form button[type="submit"] {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}


	/* ---------- MAP ---------- */

	.th-contact-map .container {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.th-contact-map-wrapper {
		border-radius: 12px;
	}

	.th-contact-map-wrapper iframe {
		width: 100% !important;
		max-width: 100% !important;
		height: 320px;
	}

}


/* =========================================================
   VERY SMALL MOBILE
   375px AND BELOW
========================================================= */

@media (max-width: 375px) {

	/* ---------- HEADER ---------- */

	.th-contact-header-title {
		max-width: 300px;
		font-size: 29px;
	}


	/* ---------- CONTACT FORM ---------- */

	.th-contact-form .container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.th-contact-form-title {
		width: 100% !important;
		max-width: 275px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		font-size: 28px !important;
		line-height: 1.2 !important;

		text-align: center !important;

		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		overflow: visible !important;
	}

	.th-contact-form-description {
		width: 100% !important;
		max-width: 100% !important;

		font-size: 15px !important;
		line-height: 1.7 !important;

		text-align: center !important;
	}

	.th-contact-form-box {
		padding: 22px 17px !important;
	}


	/* ---------- INFO ---------- */

	.th-contact-info .container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}


	/* ---------- MAP ---------- */

	.th-contact-map .container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.th-contact-map-wrapper iframe {
		height: 300px;
	}

}