/* =========================================================
   TECHHUB SOLUTIONS
   ABOUT PAGE RESPONSIVE CSS
   FINAL VERSION
========================================================= */


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

@media (max-width: 1024px) {

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

	.th-about-content {
		padding: 80px 0;
		overflow: hidden;
	}

	.th-about-content .container {
		width: 100%;
		max-width: 100%;
		padding-left: 25px;
		padding-right: 25px;
		box-sizing: border-box;
	}

	.th-about-wrapper {
		display: flex;
		align-items: center;
		gap: 40px;
	}

	.th-about-image {
		flex: 0 0 45%;
		min-width: 0;
	}

	.th-about-text {
		flex: 1 1 55%;
		min-width: 0;
	}

	.th-about-title {
		font-size: 36px;
		line-height: 1.25;
	}

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


	/* ---------- WHY CHOOSE US ---------- */

	.th-about-why {
		padding: 80px 0;
		overflow: hidden;
	}

	.th-about-why .container {
		width: 100%;
		max-width: 100%;
		padding-left: 25px;
		padding-right: 25px;
		box-sizing: border-box;
	}

	.th-about-heading {
		max-width: 650px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 45px;
	}

	.th-about-section-title {
		font-size: 36px;
		line-height: 1.25;
	}

	.th-about-why-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 25px;
	}

	.th-about-card {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		padding: 35px 25px;
	}

}


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

@media (max-width: 767px) {

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


	/* =====================================================
	   ABOUT CONTENT
	===================================================== */

	.th-about-content {
		width: 100%;
		padding: 55px 0 60px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.th-about-content .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-about-wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}


	/* ---------- IMAGE ---------- */

	.th-about-image {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.th-about-img {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto;
		margin: 0 auto;
		border-radius: 16px;
		box-sizing: border-box;
	}


	/* ---------- TEXT ---------- */

	.th-about-text {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		min-width: 0 !important;
		margin: 0 auto;
		text-align: center;
		box-sizing: border-box;
	}


	/* ---------- SUBTITLE ---------- */

	.th-about-subtitle {
		display: block;
		width: 100%;
		margin: 0 auto 14px;
		font-size: 13px;
		line-height: 1.5;
		letter-spacing: 1.5px;
		text-align: center;
		box-sizing: border-box;
	}


	/* ---------- TITLE ---------- */

	.th-about-title {
		display: block;
		width: 100%;
		max-width: 600px;
		margin: 0 auto 20px;

		font-size: 32px;
		line-height: 1.25;

		text-align: center;

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

		box-sizing: border-box;
	}


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

	.th-about-description {
		display: block;
		width: 100%;
		max-width: 650px;
		margin: 0 auto 18px;

		font-size: 15px;
		line-height: 1.8;

		text-align: center;

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

		box-sizing: border-box;
	}


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

	.th-about-btn {
		display: inline-flex;
		width: auto;
		max-width: 100%;
		margin-top: 10px;
		padding: 13px 28px;
		font-size: 15px;
		box-sizing: border-box;
	}


	/* =====================================================
	   WHY CHOOSE US
	===================================================== */

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

	.th-about-why .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;
	}


	/* ---------- HEADING ---------- */

	.th-about-heading {
		width: 100%;
		max-width: 100%;
		margin: 0 auto 40px;
		text-align: center;
		box-sizing: border-box;
	}

	.th-about-heading .th-about-subtitle {
		display: block;
		width: 100%;
		margin: 0 auto 14px;
		text-align: center;
	}


	/* ---------- SECTION TITLE ---------- */

	.th-about-section-title {
		display: block;
		width: 100%;
		max-width: 600px;

		margin: 0 auto;

		font-size: 32px;
		line-height: 1.25;

		text-align: center;

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

		box-sizing: border-box;
	}


	/* ---------- CARDS GRID ---------- */

	.th-about-why-grid {
		width: 100%;
		display: grid;

		grid-template-columns: minmax(0, 1fr);

		gap: 20px;

		margin: 0;
		padding: 0;

		box-sizing: border-box;
	}


	/* ---------- CARD ---------- */

	.th-about-card {
		width: 100%;
		max-width: 100%;
		min-width: 0;

		padding: 30px 22px;

		margin: 0;

		text-align: center;

		box-sizing: border-box;
	}


	/* ---------- CARD ICON ---------- */

	.th-about-card-icon {
		width: 70px;
		height: 70px;

		margin: 0 auto 20px;

		font-size: 28px;
	}


	/* ---------- CARD TITLE ---------- */

	.th-about-card h3 {
		font-size: 20px;
		line-height: 1.3;

		margin: 0 0 12px;

		text-align: center;
	}


	/* ---------- CARD TEXT ---------- */

	.th-about-card p {
		font-size: 15px;
		line-height: 1.75;

		margin: 0;

		text-align: center;

		overflow-wrap: break-word;
	}

}


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

@media (max-width: 480px) {

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

	.th-about-content {
		padding: 45px 0 50px;
	}

	.th-about-content .container {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.th-about-wrapper {
		gap: 32px;
	}


	/* ---------- IMAGE ---------- */

	.th-about-img {
		border-radius: 14px;
	}


	/* ---------- TEXT ---------- */

	.th-about-title {
		max-width: 340px;

		font-size: 29px;
		line-height: 1.2;

		margin-left: auto;
		margin-right: auto;
	}

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

	.th-about-btn {
		padding: 12px 25px;
		font-size: 14px;
	}


	/* ---------- WHY CHOOSE ---------- */

	.th-about-why {
		padding: 50px 0;
	}

	.th-about-why .container {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.th-about-heading {
		margin-bottom: 32px;
	}

	.th-about-section-title {
		max-width: 340px;
		font-size: 29px;
		line-height: 1.2;
		margin-left: auto;
		margin-right: auto;
	}

	.th-about-why-grid {
		gap: 18px;
	}

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

	.th-about-card-icon {
		width: 65px;
		height: 65px;
		font-size: 26px;
	}

	.th-about-card h3 {
		font-size: 19px;
	}

	.th-about-card p {
		font-size: 14px;
		line-height: 1.7;
	}

}


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

@media (max-width: 375px) {

	.th-about-content .container,
	.th-about-why .container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}


	.th-about-title {
		max-width: 320px;
		font-size: 27px;
	}


	.th-about-description {
		font-size: 14px;
		line-height: 1.7;
	}


	.th-about-section-title {
		max-width: 320px;
		font-size: 27px;
	}


	.th-about-card {
		padding: 25px 18px;
	}

}