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


/* =========================================================
   LARGE TABLET
   1199px AND BELOW
========================================================= */

@media (max-width: 1199px) {

	.th-faq-header-title {
		font-size: 42px;
	}

	.th-faq-wrapper {
		max-width: 850px;
	}

}


/* =========================================================
   TABLET
   991px AND BELOW
========================================================= */

@media (max-width: 991px) {

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

	.th-faq-header {
		padding: 80px 0 60px;
	}

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

	.th-faq-header-content {
		width: 100%;
		max-width: 750px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.th-faq-header-title {
		font-size: 36px;
		line-height: 1.3;
	}

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


	/* ---------- FAQ SECTION ---------- */

	.th-faq-section {
		padding: 0 0 80px;
	}

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

	.th-faq-wrapper {
		width: 100%;
		max-width: 850px;
		margin: 0 auto;
		box-sizing: border-box;
	}


	/* ---------- FAQ ITEM ---------- */

	.th-faq-item {
		width: 100%;
		box-sizing: border-box;
	}

	.th-faq-question {
		padding: 22px 24px;
		font-size: 17px;
	}

	.th-faq-answer {
		padding-left: 24px;
		padding-right: 24px;
	}

	.th-faq-item.active .th-faq-answer {
		padding-left: 24px;
		padding-right: 24px;
		padding-bottom: 24px;
	}

}


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

@media (max-width: 767px) {

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

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


	/* =====================================================
	   FAQ HEADER
	===================================================== */

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

	.th-faq-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-faq-header-content {
		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto !important;

		text-align: center !important;

		box-sizing: border-box !important;
	}


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

	.th-faq-header-tag {
		display: block;

		width: 100%;

		margin: 0 auto 14px;

		font-size: 13px;
		line-height: 1.5;
		letter-spacing: 1.8px;

		text-align: center;

		box-sizing: border-box;
	}


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

	.th-faq-header-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-faq-header-description {
		display: block;

		width: 100%;

		max-width: 650px;

		margin: 0 auto;

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

		text-align: center;

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

		box-sizing: border-box;
	}


	/* =====================================================
	   FAQ SECTION
	===================================================== */

	.th-faq-section {
		width: 100%;

		padding: 0 0 60px;

		overflow: hidden;

		box-sizing: border-box;
	}

	.th-faq-section .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-faq-wrapper {
		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto !important;

		box-sizing: border-box !important;
	}


	/* =====================================================
	   FAQ ITEM
	===================================================== */

	.th-faq-item {
		width: 100% !important;
		max-width: 100% !important;

		margin-bottom: 16px;

		border-radius: 14px;

		box-sizing: border-box;
	}


	/* =====================================================
	   QUESTION
	===================================================== */

	.th-faq-question {
		width: 100% !important;
		max-width: 100% !important;

		padding: 18px 18px;

		display: flex;

		align-items: center;

		justify-content: space-between;

		gap: 12px;

		font-size: 16px;

		line-height: 1.5;

		text-align: left;

		box-sizing: border-box !important;
	}


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

	.th-faq-question span:first-child {
		display: block;

		flex: 1 1 auto;

		min-width: 0;

		padding-right: 5px;

		white-space: normal;

		word-break: normal;

		overflow-wrap: break-word;

		box-sizing: border-box;
	}


	/* =====================================================
	   PLUS ICON
	===================================================== */

	.th-faq-icon {
		flex: 0 0 auto;

		width: 36px;
		height: 36px;

		font-size: 20px;

		box-sizing: border-box;
	}


	/* =====================================================
	   ANSWER
	===================================================== */

	.th-faq-answer {
		width: 100%;

		padding-left: 18px;
		padding-right: 18px;

		box-sizing: border-box;
	}

	.th-faq-item.active .th-faq-answer {
		padding-left: 18px;
		padding-right: 18px;
		padding-bottom: 20px;
	}


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

	.th-faq-answer p {
		width: 100%;

		margin: 0;

		font-size: 15px;

		line-height: 1.75;

		text-align: left;

		word-break: normal;

		overflow-wrap: break-word;

		box-sizing: border-box;
	}

}


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

@media (max-width: 480px) {

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

	.th-faq-header {
		padding: 50px 0 40px;
	}

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

	.th-faq-header-tag {
		font-size: 12px;
		letter-spacing: 1.5px;
	}

	.th-faq-header-title {
		max-width: 340px;

		font-size: 28px;
		line-height: 1.25;
	}

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


	/* ---------- FAQ SECTION ---------- */

	.th-faq-section .container {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.th-faq-item {
		margin-bottom: 14px;
		border-radius: 13px;
	}


	/* ---------- QUESTION ---------- */

	.th-faq-question {
		padding: 16px 15px;

		font-size: 15px;

		line-height: 1.5;

		gap: 10px;
	}


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

	.th-faq-icon {
		width: 34px;
		height: 34px;

		font-size: 19px;

		flex: 0 0 34px;
	}


	/* ---------- ANSWER ---------- */

	.th-faq-answer {
		padding-left: 15px;
		padding-right: 15px;
	}

	.th-faq-item.active .th-faq-answer {
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 18px;
	}

	.th-faq-answer p {
		font-size: 14px;
		line-height: 1.7;
	}

}


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

@media (max-width: 375px) {

	.th-faq-header .container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.th-faq-header-title {
		max-width: 320px;

		font-size: 26px;
		line-height: 1.25;
	}

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


	.th-faq-section .container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}


	.th-faq-question {
		padding: 15px 13px;

		font-size: 14px;

		line-height: 1.5;
	}


	.th-faq-icon {
		width: 32px;
		height: 32px;

		flex-basis: 32px;

		font-size: 18px;
	}


	.th-faq-answer {
		padding-left: 13px;
		padding-right: 13px;
	}

	.th-faq-item.active .th-faq-answer {
		padding-left: 13px;
		padding-right: 13px;
		padding-bottom: 16px;
	}

	.th-faq-answer p {
		font-size: 14px;
		line-height: 1.65;
	}

}