/*
Theme Name: Al Huda Official Institute
Theme URI: https://alhudaofficialinstitute.com/
Author: Oktopus-Tech
Description: Custom WordPress theme for Al Huda Official Institute. A faithful, self-contained reproduction of the original Elementor design with the frequently-edited content (logo, contact details, social links, hero text, footer) exposed in the Customizer for smooth, plugin-free editing.
Version: 1.1.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: e-quran-tutors
*/

/* The visual design lives in the bundled Elementor/Hello stylesheets loaded from
   header.php (assets/). This file only carries the theme header + small helpers. */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
	background-color: #eee;
	clip: auto;
	clip-path: none;
	color: #044f3a;
	display: block;
	left: 6px;
	top: 7px;
	padding: 15px 23px 14px;
	z-index: 100000;
}

/* Footer bottom bar: this row was three equal columns (icons | copyright |
   credit); the credit column was removed but the copyright column kept its
   original width, so it still only centers itself inside the third of the row
   left over after the icons — landing right of true center on desktop. Take it
   out of that split entirely: pin the icons to the row's left edge and let the
   copyright span (and center within) the row's full width. */
@media (min-width: 768px) {
	.elementor-77 .elementor-element.elementor-element-14e2d0d > .e-con-inner {
		position: relative;
	}

	.elementor-77 .elementor-element.elementor-element-0a580c3 {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		--width: auto;
		width: auto;
	}

	.elementor-77 .elementor-element.elementor-element-bd3efb4 {
		--width: 100%;
		width: 100%;
		margin: 0;
		text-align: center;
	}
}

.elementor-77 .elementor-element.elementor-element-bd3efb4 .elementor-heading-title {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

/* Keep the copyright text centered even when Elementor's generated column
   widths or alignment defaults are changed. */
.elementor-77 .elementor-element.elementor-element-bd3efb4 {
	display: flex !important;
	justify-content: center !important;
	align-items: center;
	text-align: center !important;
}

/* Fee plans (payment-options). Real cards -- these replaced three JPEG
   screenshots that rendered at mismatched heights and could not be restyled. */
.eqt-fee-plan-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
	width: 100%;
	margin: 8px 0 12px;
}

.eqt-fee-plan-card {
	display: flex !important;
	flex-direction: column;
	width: 100%;
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(2, 61, 36, 0.12);
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.eqt-fee-plan-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(2, 61, 36, 0.18);
}

/* The middle plan is the one we want chosen: lift it and ring it in gold. */
.eqt-fee-plan-card--popular {
	border-color: var(--e-global-color-accent, #FFAF00);
	box-shadow: 0 16px 38px rgba(2, 61, 36, 0.18);
}

.eqt-fee-plan-head {
	position: relative;
	padding: 22px 20px;
	text-align: center;
	background: var(--e-global-color-primary, #023D24);
}

.eqt-fee-plan-card--popular .eqt-fee-plan-head {
	background: linear-gradient(135deg, #023D24 0%, #04643b 100%);
}

.eqt-fee-plan-name {
	margin: 0;
	color: #fff;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* Corner ribbon, previously burned into the Standard screenshot. */
.eqt-fee-plan-badge {
	position: absolute;
	top: 14px;
	right: -34px;
	width: 132px;
	padding: 5px 0;
	transform: rotate(45deg);
	background: var(--e-global-color-accent, #FFAF00);
	color: #023D24;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.eqt-fee-plan-price {
	margin: 0;
	padding: 30px 20px 24px;
	text-align: center;
	border-bottom: 1px solid rgba(2, 61, 36, 0.1);
	color: var(--e-global-color-primary, #023D24);
	line-height: 1;
}

.eqt-fee-plan-currency {
	font-size: 26px;
	font-weight: 600;
	vertical-align: super;
}

.eqt-fee-plan-amount {
	font-size: 68px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.eqt-fee-plan-period {
	display: block;
	margin-top: 10px;
	font-size: 16px;
	font-weight: 500;
	opacity: 0.75;
}

.eqt-fee-plan-features {
	flex: 1 1 auto;
	margin: 0;
	padding: 8px 24px;
	list-style: none;
}

.eqt-fee-plan-features li {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 13px 0;
	font-size: 16px;
	color: #333;
	border-bottom: 1px dashed rgba(2, 61, 36, 0.18);
}

.eqt-fee-plan-features li:last-child {
	border-bottom: 0;
}

.eqt-fee-plan-tick {
	flex: 0 0 auto;
	color: var(--e-global-color-primary, #023D24);
}

.eqt-fee-plan-cta {
	display: block;
	margin: 8px 24px 26px;
	padding: 15px 20px;
	border-radius: 8px;
	background: var(--e-global-color-primary, #023D24);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.eqt-fee-plan-cta:hover,
.eqt-fee-plan-cta:focus {
	background: var(--e-global-color-accent, #FFAF00);
	color: #023D24;
}

.eqt-free-trial-fields .elementor-field-group {
	margin-bottom: 20px;
}

/* Free-trial form: mirror the focused, mobile-friendly booking form while
   keeping the same fields usable on desktop. */
.elementor-23 .elementor-element.elementor-element-87337b1 {
	background: #d39b2a !important;
	border-radius: 0;
}

.eqt-free-trial-heading {
	margin: 0 0 24px;
}

.eqt-free-trial-heading h2 {
	margin: 0;
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 700;
	line-height: 1.2;
}

.elementor-23 .eqt-free-trial-fields .elementor-field-group {
	margin-bottom: 28px;
	padding: 0;
}

.elementor-23 .eqt-free-trial-fields .elementor-field {
	min-height: 64px;
	padding: 16px 20px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #4b4b4b;
	font-size: 18px;
	line-height: 1.35;
}

.elementor-23 .eqt-free-trial-fields textarea.elementor-field {
	min-height: 210px;
	resize: vertical;
}

.elementor-23 .eqt-free-trial-fields .elementor-field::placeholder {
	color: #767676;
	opacity: 1;
}

.elementor-23 .eqt-free-trial-fields .elementor-button {
	min-height: 64px;
	border-radius: 0;
	background: #ffc447;
	color: #303030;
	font-size: 17px;
	font-weight: 600;
}

.elementor-23 .eqt-free-trial-fields .elementor-button:hover,
.elementor-23 .eqt-free-trial-fields .elementor-button:focus {
	background: #fff;
	color: #303030;
}

@media (max-width: 767px) {
	.elementor-23 .elementor-element.elementor-element-87337b1 {
		padding: 36px 30px;
	}

	.elementor-23 .eqt-free-trial-fields .elementor-field-group {
		margin-bottom: 28px;
	}
}

/* Footer now carries a fifth column (Our Locations). The row was a plain
   flex row, so let the columns wrap instead of crushing to five narrow
   strips on laptops and tablets. */
.elementor-77 .elementor-element-652bab4 {
	--flex-wrap: wrap;
	flex-wrap: wrap;
}

.elementor-77 .elementor-element-652bab4 > .e-con-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
}

.elementor-77 .elementor-element-652bab4 > .e-con-inner > .e-con {
	flex: 1 1 180px;
	min-width: 160px;
}

/* This column has no Elementor element-ID of its own (it was added after the
   original four), so its heading and list missed the per-column colour rules
   the other columns get and fell back to the sheet's defaults: a heading in
   the dark green body colour (invisible on this dark green background) and
   list text in the sidebar's yellow instead of the other columns' white. */
.eqt-footer-locations .elementor-heading-title {
	color: var(--e-global-color-secondary, #FFAF00);
	font-weight: 600;
}

.eqt-footer-locations .elementor-icon-list-text {
	display: block;
	padding: 6px 0;
	color: var(--e-global-color-aeb60dd, #fff);
}

@media (max-width: 880px) {
	.elementor-77 .elementor-element-652bab4 > .e-con-inner > .e-con {
		flex: 1 1 44%;
	}
}

@media (max-width: 540px) {
	.elementor-77 .elementor-element-652bab4 > .e-con-inner > .e-con {
		flex: 1 1 100%;
	}

	.elementor-77 .elementor-element-652bab4 > .e-con-inner {
		gap: 8px;
	}
}

/* General mobile pass: stop any wide element forcing a horizontal scroll,
   and keep tap targets comfortable. */
@media (max-width: 767px) {
	html,
	body {
		overflow-x: hidden;
	}

	img,
	iframe,
	video,
	table {
		max-width: 100%;
	}

	.elementor-button,
	.eqt-course-cta,
	.eqt-fee-plan-cta {
		min-height: 44px;
	}
}

/* Form submission feedback (see inc/forms.php). */
.eqt-form-notice {
	margin: 0 0 22px;
	padding: 16px 20px;
	border-radius: 8px;
	border-left: 4px solid;
	font-size: 16px;
	line-height: 1.6;
}

.eqt-form-notice--success {
	border-color: #023D24;
	background: #e8f3ed;
	color: #023D24;
}

.eqt-form-notice--error {
	border-color: #b3261e;
	background: #fdecea;
	color: #8c1d18;
}

/* Honeypot: must stay reachable to bots but invisible to people. */
.eqt-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.elementor-13 .elementor-element-7168801 {
	overflow: hidden;
	background: #f6f6f6;
}

.elementor-13 .elementor-element-3471314 {
	padding: 42px 0 46px;
}

.elementor-13 .elementor-element-3471314 .swiper-wrapper {
	align-items: stretch;
}

/* Swiper sizes each slide to its own content, so a one-line title made a
   shorter card than a two-line one and the row came out staggered. Stretch the
   whole chain so every card is the height of the tallest. */
.elementor-13 .elementor-element-3471314 .swiper-slide {
	display: flex !important;
	align-items: stretch;
	height: auto !important;
	padding-top: 58px;
}

.elementor-13 .elementor-element-3471314 .swiper-slide > .elementor-element,
.elementor-13 .elementor-element-3471314 .swiper-slide > .elementor-element > .e-con-inner,
.elementor-13 .elementor-element-3471314 .swiper-slide .elementor-element-b5d4894 {
	width: 100%;
	height: 100%;
}

.elementor-13 .elementor-element-3471314 .swiper-slide > .elementor-element,
.elementor-13 .elementor-element-3471314 .swiper-slide > .elementor-element > .e-con-inner {
	display: flex;
}

.elementor-13 .elementor-element-3471314 .swiper-slide > .elementor-element > .e-con-inner {
	padding: 0;
}

.elementor-13 .elementor-element-3471314 .swiper-slide .elementor-element-b5d4894 {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 220px;
	/* 28px of side padding left only 185px for a 22px title, so "Quran
	   Recitation" and "Quran Translation" wrapped and outgrew the two lines
	   reserved below. The reference runs its titles the full card width. */
	padding: 82px 12px 30px;
	align-items: center;
	justify-content: flex-start;
	border-radius: 8px;
	background-color: #023d24;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
	background-size: 10px 10px;
}

.elementor-13 .elementor-element-3471314 .elementor-widget-image {
	position: absolute;
	top: -60px;
	left: 50%;
	width: 112px;
	height: 112px;
	margin: 0;
	transform: translateX(-50%);
}

/* Several course photos are near-white (the mihrab and Tafseer shots average
   170-220 brightness) and disappeared against the light section background.
   The ring and shadow give every circle an edge regardless of its contents. */
.elementor-13 .elementor-element-3471314 .elementor-widget-image img {
	display: block;
	width: 112px;
	height: 112px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px rgba(2, 61, 36, 0.28);
	object-fit: cover;
	object-position: center;
}

/* Reserve two lines so "Short Islamic Stories / History" and "Basic Qaida"
   put their buttons on the same line. */
.elementor-13 .elementor-element-3471314 .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5em;
	margin: 0;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

/* margin-top:auto pins the button to the bottom of every card. */
.elementor-13 .elementor-element-3471314 .elementor-widget-button {
	width: 100%;
	margin-top: auto;
	padding-top: 26px;
	text-align: center;
}

.elementor-13 .elementor-element-3471314 .elementor-button {
	min-width: 185px;
	padding: 16px 26px;
	border-radius: 4px;
	background: #ffaf00;
	color: #000;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.elementor-13 .elementor-element-3471314 .elementor-button:hover,
.elementor-13 .elementor-element-3471314 .elementor-button:focus {
	background: #fff;
	color: #023d24;
}

/* Course tab panels: the clipart illustrations were replaced with photographs,
   which need a fixed aspect ratio so panels of differing image shapes (a
   portrait manuscript next to a landscape classroom) stay the same height. */
.elementor-13 .eqt-tab-photo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 380px;
	aspect-ratio: 3 / 2;
	border-radius: 14px;
	object-fit: cover;
	object-position: center;
	box-shadow: 0 12px 30px rgba(2, 61, 36, 0.18);
}

@media (max-width: 1024px) {
	.elementor-13 .eqt-tab-photo {
		max-height: 260px;
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 767px) {
	.elementor-13 .elementor-element-7168801 {
		padding-right: 0;
		padding-left: 0;
	}

	.elementor-13 .elementor-element-3471314 {
		--e-n-carousel-swiper-slides-to-display: 1 !important;
		/* The 16px side padding shrank slides to 200px against the
		   reference's 232px, which forced every title onto two lines. */
		padding: 28px 0 34px;
	}

	/* The widget carries an 80px inline offset on every breakpoint, so on a
	   360px screen Swiper measured a 180px track and left half a card showing
	   on each side. Zeroing the offset before Swiper initialises makes it
	   measure the full width and size one card per view. Specificity has to
	   match Elementor's own `.elementor-element.elementor-element-<id>` rule. */
	.elementor-13 .elementor-element.elementor-element-3471314 {
		--e-n-carousel-swiper-offset-size: 0px;
	}

	.elementor-13 .elementor-element-3471314 .e-n-carousel,
	.elementor-13 .elementor-element-3471314 .swiper {
		overflow: hidden;
	}

	/* Room under the cards for the arrows, which sit inside .swiper (this
	   markup nests them rather than making them siblings) and so would be
	   clipped by that overflow otherwise. */
	.elementor-13 .elementor-element-3471314 .e-n-carousel.swiper {
		padding-bottom: 72px;
	}

	/* Full-width cards leave the arrows nothing to hover over but the card
	   itself, so park them below it as a centred pair. */
	.elementor-13 .elementor-element-3471314 .swiper .elementor-swiper-button {
		top: auto;
		bottom: 8px;
		transform: none;
	}

	.elementor-13 .elementor-element-3471314 .swiper .elementor-swiper-button-prev {
		left: calc(50% - 56px);
	}

	.elementor-13 .elementor-element-3471314 .swiper .elementor-swiper-button-next {
		right: calc(50% - 56px);
	}

	.elementor-13 .elementor-element-3471314 .swiper-slide {
		box-sizing: border-box;
		padding: 54px 0 0;
	}

	.elementor-13 .elementor-element-3471314 .swiper-slide .elementor-element-b5d4894 {
		min-height: 210px;
		padding: 74px 12px 24px;
	}

	.elementor-13 .elementor-element-3471314 .elementor-widget-image {
		top: -54px;
		width: 104px;
		height: 104px;
	}

	.elementor-13 .elementor-element-3471314 .elementor-widget-image img {
		width: 104px;
		height: 104px;
	}

	.elementor-13 .elementor-element-3471314 .elementor-heading-title {
		font-size: 20px;
		line-height: 1.25;
	}

	.elementor-13 .elementor-element-3471314 .elementor-button {
		min-width: 168px;
		padding: 15px 20px;
	}

	.elementor-13 .eqt-tab-photo {
		max-height: 220px;
		border-radius: 10px;
	}

	/* Only the first course tab carries Elementor's centre alignment on its
	   ornament; in the other eight panels it sat hard left under a centred
	   heading. */
	.elementor-13 .e-n-tabs-content .elementor-widget-image {
		text-align: center;
	}
}

/* Course pages added after the original extraction (see course-page.php). */
.eqt-course-page .e-con-inner {
	display: block;
	width: 100%;
	max-width: 1140px;
	margin-inline: auto;
	padding-block: 28px;
	padding-inline: 20px;
	box-sizing: border-box;
}

.eqt-course-page--pattern {
	background: #fff;
}

.eqt-course-page--pattern > .elementor-element {
	overflow: hidden;
}

.eqt-course-page--pattern .elementor-widget-heading {
	width: 100%;
}

.eqt-course-page--pattern #breadcrumbs {
	margin: 0 0 8px;
	color: #444;
	font-size: 14px;
}

/* Elementor sets display:flex on .e-con-inner, so the grid needs to outrank it. */
.eqt-course-page .e-con-inner.eqt-course-intro {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 36px;
	align-items: center;
}

.eqt-course-page .elementor-heading-title {
	overflow-wrap: anywhere;
}

.eqt-course-intro-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.eqt-course-intro-copy h2 {
	margin: 0 0 14px;
	font-size: 32px;
	line-height: 1.25;
	color: var(--e-global-color-primary, #023D24);
}

.eqt-course-intro-copy p {
	margin: 0 0 22px;
	font-size: 17px;
	line-height: 1.75;
}

/* The bundled Elementor sheet colours bare <a>, so state the colour explicitly. */
.eqt-course-page a.eqt-course-cta {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 8px;
	background: var(--e-global-color-accent, #FFAF00);
	color: #023D24;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.eqt-course-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.eqt-course-page a.eqt-course-cta--secondary {
	background: var(--e-global-color-primary, #023D24);
	color: #fff;
}

.eqt-course-page a.eqt-course-cta:hover,
.eqt-course-page a.eqt-course-cta:focus {
	background: var(--e-global-color-primary, #023D24);
	color: #fff;
}

.eqt-course-page a.eqt-course-cta--secondary:hover,
.eqt-course-page a.eqt-course-cta--secondary:focus {
	background: var(--e-global-color-accent, #FFAF00);
	color: #023D24;
}

.eqt-course-why {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
	margin-block: 36px;
}

.eqt-course-why-copy {
	padding: 52px clamp(20px, 5vw, 80px);
	background: var(--e-global-color-primary, #023D24);
	color: #fff;
}

.eqt-course-why-copy .elementor-heading-title,
.eqt-course-why-copy p,
.eqt-course-why-copy li {
	color: #fff;
}

.eqt-course-why-copy h3 {
	margin: 0 0 16px;
	font-size: 30px;
	line-height: 1.25;
}

.eqt-course-why-copy h2 {
	margin: 24px 0 12px;
	font-size: 24px;
	line-height: 1.3;
}

.eqt-course-bullets {
	margin: 0 0 24px 18px;
	padding: 0;
	line-height: 1.8;
}

.eqt-course-why-media {
	min-height: 380px;
	background-image: url("assets/wp-content/uploads/2025/09/ezgif.com-webp-to-png-converter.png");
	background-position: center;
	background-size: cover;
}

.eqt-course-special-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: start;
	margin-bottom: 26px;
}

.eqt-course-special-heading h3 {
	margin: 0;
	font-size: 32px;
	line-height: 1.25;
	color: var(--e-global-color-primary, #023D24);
}

.eqt-course-points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
	margin-top: 8px;
}

.eqt-course-point {
	padding: 24px;
	border: 1px solid rgba(2, 61, 36, 0.12);
	border-top: 3px solid var(--e-global-color-accent, #FFAF00);
	border-radius: 10px;
	background: #fff;
}

.eqt-course-point img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	margin: -8px 0 18px;
	object-fit: cover;
	border-radius: 8px;
}

.eqt-course-point h3 {
	margin: 0 0 10px;
	font-size: 19px;
	color: var(--e-global-color-primary, #023D24);
}

.eqt-course-point p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: #444;
}

.eqt-course-faqs {
	width: 100%;
	max-width: 960px;
	margin-top: 8px;
}

.eqt-course-faq {
	border-bottom: 1px solid rgba(2, 61, 36, 0.15);
}

.eqt-course-faq .e-n-accordion-item-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--e-global-color-primary, #023D24);
	cursor: pointer;
	list-style: none;
}

.eqt-course-faq .e-n-accordion-item-title::-webkit-details-marker {
	display: none;
}

.eqt-course-faq .e-n-accordion-item-title-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.eqt-course-faq .e-n-accordion-item-title-icon svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.eqt-course-faq .e-opened,
.eqt-course-faq[open] .e-closed {
	display: none;
}

.eqt-course-faq[open] .e-opened {
	display: inline-flex;
}

.eqt-course-faq p {
	margin: 0;
	padding: 0 0 20px 0;
	font-size: 16px;
	line-height: 1.75;
	color: #444;
}

.eqt-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.eqt-related-card {
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.eqt-related-card__image {
	display: block;
	overflow: hidden;
}

.eqt-related-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

.eqt-related-card__body {
	padding: 20px;
}

.eqt-related-card h3 {
	margin: 0 0 10px;
	font-size: 19px;
	line-height: 1.35;
}

.eqt-related-card h3 a {
	color: #000;
	text-decoration: none;
}

.eqt-related-card p {
	margin: 0 0 14px;
	color: #444;
	font-size: 15px;
	line-height: 1.65;
}

.eqt-related-card__more {
	color: var(--e-global-color-primary, #023D24);
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 900px) {
	.eqt-course-intro {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.eqt-course-intro-copy h2 {
		font-size: 26px;
	}

	.eqt-course-page .e-con-inner {
		padding-block: 22px;
		padding-inline: 16px;
	}

	.eqt-course-points {
		grid-template-columns: 1fr;
	}

	.eqt-course-why,
	.eqt-course-special-heading,
	.eqt-related-grid {
		grid-template-columns: 1fr;
	}

	.eqt-course-why-media {
		min-height: 260px;
	}

	.eqt-course-special-heading .eqt-course-cta {
		justify-self: start;
	}

	.eqt-course-faq .e-n-accordion-item-title {
		align-items: flex-start;
		gap: 14px;
		font-size: 16px;
		line-height: 1.45;
	}
}

@media (max-width: 1024px) {
	.eqt-fee-plan-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-inline: auto;
	}

	/* Nothing to lift out of a single column. */
	.eqt-fee-plan-card:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eqt-fee-plan-card,
	.eqt-fee-plan-cta {
		transition: none;
	}

	.eqt-fee-plan-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   Header logo
   The logo source is square (801x801) where the reference's is a wide 3:1
   lockup, and nothing in the bundled Elementor CSS constrains it. Both sites
   render it 183px wide on desktop, but ours came out 183px tall against the
   reference's 77px, ballooning the header bar to 223px (reference: 117px).
   On mobile it filled its 50%-wide column and made a 216px bar.
   Cap the height and let the width follow, so a square mark sits in a bar of
   the reference's height rather than setting the height itself.
   ========================================================================== */
.elementor-location-header .eqt-site-logo {
	width: auto;
	max-width: 92px;
	max-height: 62px;
	object-fit: contain;
}

.elementor-38 .elementor-element-89b12f5 > .e-con-inner,
.elementor-38 .elementor-element-ad3fcec > .e-con-inner {
	max-width: 1200px;
	margin-inline: auto;
}

.elementor-38 .elementor-element-ad3fcec {
	min-height: 86px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.elementor-38 .elementor-element-ad3fcec > .e-con-inner {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) 183px;
	align-items: center;
	gap: 24px;
	padding: 12px 20px;
}

.elementor-38 .elementor-element-60966ec,
.elementor-38 .elementor-element-2ebb2dc,
.elementor-38 .elementor-element-b7892bf {
	width: 100%;
	min-width: 0;
}

.elementor-38 .elementor-element-c2e10b9 {
	text-align: left;
}

.elementor-38 .elementor-element-fd7fd3c .elementor-nav-menu {
	justify-content: center;
	gap: 0;
}

.elementor-38 .elementor-element-fd7fd3c .elementor-item {
	padding: 13px 14px;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}

.elementor-38 .elementor-element-52e7f0f .elementor-button {
	min-height: 50px;
	border-radius: 5px;
	background: #ffaf00;
	color: #000;
	font-weight: 700;
}

@media (max-width: 1180px) and (min-width: 768px) {
	.elementor-38 .elementor-element-ad3fcec > .e-con-inner {
		grid-template-columns: 96px minmax(0, 1fr) 150px;
		gap: 16px;
	}

	.elementor-38 .elementor-element-fd7fd3c .elementor-item {
		padding-inline: 9px;
		font-size: 13px;
	}

	.elementor-location-header .eqt-site-logo {
		max-width: 82px;
		max-height: 56px;
	}
}

@media (max-width: 767px) {
	.elementor-38 .elementor-element-5e84cd4 {
		min-height: 72px;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	}

	.elementor-38 .elementor-element-5e84cd4 > .e-con-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 8px 16px;
	}

	.elementor-location-header .eqt-site-logo {
		max-width: 76px;
		max-height: 54px;
	}

	/* The logo widget is centred in its half-width column, which left it
	   marooned mid-bar; the reference sits it at the column's left edge. */
	.elementor-38 .elementor-element-9f6ac4b {
		align-items: flex-start;
		width: auto;
	}

	.elementor-38 .elementor-element-01105b8 {
		text-align: left;
	}

	.elementor-38 .elementor-element-ccf36ca {
		width: auto;
		justify-self: end;
	}

	.elementor-38 .elementor-element-3fffcbe .elementor-menu-toggle {
		width: 44px;
		height: 44px;
		margin: 0;
		border-radius: 4px;
		background: #ffaf00;
		color: #023d24;
	}

	.elementor-38 .elementor-element-3fffcbe .elementor-menu-toggle svg {
		width: 22px;
		height: 22px;
	}

	/* The burger panel is positioned absolutely by Elementor's stretch script,
	   which resolves against the nearest positioned ancestor -- the 44px-wide
	   menu widget. Pinning it to that box pushed a full-width panel off the
	   right edge (where body{overflow-x:hidden} then clipped it). Taking the
	   widget and its column out of the positioning chain hands the panel to
	   the header row itself, so left/right:0 spans the real viewport width. */
	.elementor-38 .elementor-element-ccf36ca,
	.elementor-38 .elementor-element-3fffcbe {
		position: static;
	}

	.elementor-38 .elementor-element.elementor-element-3fffcbe .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: 100vw;
		margin-top: 0 !important;
	}
}

/* The heading widget shrink-wraps to its own max-content width, so the title
   had less room than the card actually offers and wrapped a line early. */
.elementor-13 .elementor-element-3471314 .elementor-widget-heading {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Courses index (/courses/). The page existed only as the hierarchy parent of
   the nine course pages, so it rendered empty; these styles dress the catalogue
   in template-parts/content/courses.php.
   --------------------------------------------------------------------------- */

.eqt-courses-body {
	width: 100%;
	max-width: min(100%, 1350px);
	margin-inline: auto;
	padding: 46px 20px 70px;
}

.eqt-courses-intro {
	max-width: 760px;
	margin: 0 auto 40px;
	color: #444;
	font-size: 18px;
	line-height: 1.7;
	text-align: center;
}

.eqt-courses-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	width: 100%;
}

.eqt-course-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(2, 61, 36, 0.1);
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.eqt-course-tile:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(2, 61, 36, 0.18);
}

.eqt-course-tile-media {
	display: block;
	overflow: hidden;
	line-height: 0;
}

/* The nine photographs are a mix of portrait and landscape crops, so pin the
   ratio or the tiles come out at nine different heights. */
.eqt-course-tile-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

.eqt-course-tile:hover .eqt-course-tile-media img {
	transform: scale(1.05);
}

.eqt-course-tile-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 24px 24px 26px;
}

.eqt-course-tile-title {
	margin: 0 0 12px;
	font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.eqt-course-tile-title a {
	color: var(--e-global-color-primary, #023D24);
	text-decoration: none;
}

.eqt-course-tile-title a:hover {
	color: #04643b;
}

.eqt-course-tile-text {
	flex: 1 1 auto;
	margin: 0 0 22px;
	color: #555;
	font-size: 16px;
	line-height: 1.7;
}

.eqt-course-tile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.eqt-courses-index a.eqt-course-tile-cta,
.eqt-courses-index a.eqt-course-tile-trial {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.eqt-courses-index a.eqt-course-tile-cta {
	background: var(--e-global-color-accent, #FFAF00);
	color: #023D24;
}

.eqt-courses-index a.eqt-course-tile-cta:hover,
.eqt-courses-index a.eqt-course-tile-cta:focus {
	background: var(--e-global-color-primary, #023D24);
	color: #fff;
}

.eqt-courses-index a.eqt-course-tile-trial {
	border: 2px solid var(--e-global-color-primary, #023D24);
	padding: 10px 20px;
	background: transparent;
	color: var(--e-global-color-primary, #023D24);
}

.eqt-courses-index a.eqt-course-tile-trial:hover,
.eqt-courses-index a.eqt-course-tile-trial:focus {
	background: var(--e-global-color-primary, #023D24);
	color: #fff;
}

.eqt-courses-footer {
	margin-top: 56px;
	padding: 40px 30px;
	border-radius: 14px;
	background: var(--e-global-color-primary, #023D24);
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
	background-size: 10px 10px;
	text-align: center;
}

.eqt-courses-footer a.eqt-course-tile-cta {
	font-size: 16px;
	padding: 14px 30px;
}

.eqt-courses-footer h2 {
	margin: 0 0 12px;
	color: #fff;
	font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
	font-size: 26px;
	font-weight: 700;
}

.eqt-courses-footer p {
	max-width: 640px;
	margin: 0 auto 24px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	line-height: 1.7;
}

@media (max-width: 1024px) {
	.eqt-courses-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.eqt-courses-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.eqt-courses-intro {
		font-size: 16px;
		margin-bottom: 28px;
	}

	.eqt-courses-footer {
		margin-top: 36px;
		padding: 30px 20px;
	}
}

/* ---------------------------------------------------------------------------
   Blog index, category/author/date archives and search results. These share
   template-parts/archive-loop.php, which renders Elementor's card markup from
   the live loop.
   --------------------------------------------------------------------------- */

.elementor-location-archive .elementor-post__card,
.eqt-courses-index .eqt-course-tile {
	height: 100%;
}

/* Elementor's card thumbnail is a fixed-ratio box that the plugin's JS normally
   finishes sizing; left alone the photo overflows the card on both sides. Fill
   the box instead, and outrank the plugin rules by matching four classes deep. */
.elementor-location-archive .elementor-posts-container .elementor-post__card .elementor-post__thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: none;
	object-fit: cover;
	object-position: center;
}

.elementor-location-archive .elementor-post__title {
	line-height: 1.35;
}

.eqt-archive-description {
	max-width: 760px;
	margin: 14px 0 0;
	color: #555;
	line-height: 1.7;
}

.eqt-no-posts {
	padding: 40px 0 60px;
	color: #555;
	font-size: 18px;
	text-align: center;
}

.elementor-location-archive .navigation.pagination,
.elementor-location-archive nav.pagination,
.eqt-pagination {
	margin-top: 44px;
	text-align: center;
}

.elementor-location-archive .page-numbers {
	display: inline-block;
	min-width: 42px;
	margin: 0 4px;
	padding: 10px 14px;
	border: 1px solid rgba(2, 61, 36, 0.15);
	border-radius: 6px;
	background: #fff;
	color: var(--e-global-color-primary, #023D24);
	font-weight: 600;
	text-decoration: none;
}

.elementor-location-archive .page-numbers:hover,
.elementor-location-archive .page-numbers.current {
	background: var(--e-global-color-primary, #023D24);
	border-color: var(--e-global-color-primary, #023D24);
	color: #fff;
}

.elementor-location-archive .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Library (/library/). The page shipped empty even though the header menu and
   the footer both link to it; it now lists the four Qaida PDFs.
   --------------------------------------------------------------------------- */

.eqt-library-body {
	width: 100%;
	max-width: min(100%, 1350px);
	margin-inline: auto;
	padding: 46px 20px 70px;
}

.eqt-library-intro {
	max-width: 760px;
	margin: 0 auto 40px;
	color: #444;
	font-size: 18px;
	line-height: 1.7;
	text-align: center;
}

.eqt-library-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
}

.eqt-library-card {
	display: flex;
	flex-direction: column;
	padding: 28px 24px 26px;
	background: #fff;
	border: 1px solid rgba(2, 61, 36, 0.1);
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.eqt-library-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(2, 61, 36, 0.18);
}

.eqt-library-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 18px;
	border-radius: 10px;
	background: rgba(255, 175, 0, 0.18);
	color: #023D24;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.eqt-library-title {
	margin: 0 0 10px;
	color: var(--e-global-color-primary, #023D24);
	font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.eqt-library-text {
	flex: 1 1 auto;
	margin: 0 0 20px;
	color: #555;
	font-size: 15px;
	line-height: 1.7;
}

.eqt-library a.eqt-library-cta {
	display: inline-block;
	align-self: flex-start;
	padding: 12px 22px;
	border-radius: 6px;
	background: var(--e-global-color-accent, #FFAF00);
	color: #023D24;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.eqt-library a.eqt-library-cta:hover,
.eqt-library a.eqt-library-cta:focus {
	background: var(--e-global-color-primary, #023D24);
	color: #fff;
}

.eqt-library-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 26px;
	margin-top: 46px;
	padding: 30px;
	border-radius: 14px;
	background: #f6f6f6;
	text-align: center;
}

.eqt-library-note p {
	margin: 0;
	color: #333;
	font-size: 17px;
}

@media (max-width: 1024px) {
	.eqt-library-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.eqt-library-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.eqt-library-intro {
		font-size: 16px;
		margin-bottom: 28px;
	}
}