/* ===========================================================
   QURAN FEHAM ACADEMY THEME — main.css
   Developed by W-TECH | www.wtech.com.pk
=========================================================== */

:root{
	--quf-primary: #1a5632;
	--quf-dark: #0f3d23;
	--quf-gold: #d4a017;
	--quf-navy: #0e2a3f;
	--quf-text: #1f2d24;
	--quf-muted: #6b7a70;
	--quf-bg-light: #f6f9f6;
	--quf-border: #e6ece7;
	--radius: 14px;
	--shadow: 0 10px 30px rgba(15,61,35,.08);
}

.quf-container{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---------- Buttons ---------- */
.quf-btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:13px 26px; border-radius:8px; font-weight:600; font-size:15px;
	border:2px solid transparent; transition:.25s ease; white-space:nowrap;
}
.quf-btn-primary{ background:var(--quf-primary); color:#fff; }
.quf-btn-primary:hover{ background:var(--quf-dark); transform:translateY(-2px); }
.quf-btn-outline{ background:#fff; color:var(--quf-primary); border-color:var(--quf-border); }
.quf-btn-outline:hover{ border-color:var(--quf-primary); }
.quf-btn-text{ color:var(--quf-primary); padding:13px 10px; }
.quf-btn-gold{ background:var(--quf-gold); color:#2b2205; }
.quf-btn-gold:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.quf-btn-sm{ padding:9px 16px; font-size:13.5px; }
.quf-btn-block{ width:100%; justify-content:center; }

/* ---------- Header ---------- */
.quf-header{ position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05); }
.quf-header-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px; }
.quf-logo, .quf-logo-fallback{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--quf-dark); font-size:18px; }
.quf-logo-fallback i{ font-size:30px; color:var(--quf-gold); }
.quf-logo-fallback span{ display:flex; flex-direction:column; line-height:1.1; letter-spacing:.5px; }
.quf-logo-fallback small{ font-size:10px; font-weight:600; color:var(--quf-primary); letter-spacing:2px; }
.quf-logo-img{ display:flex; align-items:center; }
.quf-logo-image{ display:block; max-width:100%; height:auto; }
.quf-logo-mobile-only{ display:none; }
@media (max-width:767px){
	/* Only swap to a dedicated mobile logo if the site owner actually
	   uploaded one (Customizer → mobile logo) — .quf-has-mobile-logo is
	   added to <body> in that case. Otherwise keep showing the regular
	   logo rather than hiding it with nothing to replace it, and size it
	   up a bit so it still reads clearly in the smaller mobile header. */
	body.quf-has-mobile-logo .quf-logo-desktop{ display:none; }
	body.quf-has-mobile-logo .quf-logo-mobile-only{ display:flex; }
	.quf-logo-desktop .quf-logo-image{ max-height:52px !important; width:auto; }
	.quf-logo-fallback{ font-size:15px; }
	.quf-logo-fallback i{ font-size:34px; }
}

.quf-menu{ display:flex; gap:28px; }
.quf-menu a{ font-weight:500; font-size:15px; color:var(--quf-text); transition:.2s; }
.quf-menu a:hover{ color:var(--quf-primary); }

.quf-header-actions{ display:flex; align-items:center; gap:16px; }
.quf-lang-switch{ font-size:14px; color:var(--quf-muted); display:flex; align-items:center; gap:6px; cursor:pointer; }
.quf-login-link{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px; border:1px solid var(--quf-border); padding:9px 16px; border-radius:8px; }
.quf-menu-toggle{ display:none; background:none; border:none; font-size:22px; color:var(--quf-dark); }

/* ---------- Hero ---------- */
.quf-hero{ position:relative; padding:56px 0 40px; background:linear-gradient(180deg,#fbfdfb,#f2f7f3); overflow:hidden; }
.quf-hero-map-bg{
	position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.07;
	background-image: radial-gradient(var(--quf-primary) 1.5px, transparent 1.5px);
	background-size: 20px 20px;
}
.quf-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.quf-hero-copy h1{ font-size:44px; line-height:1.18; font-weight:800; color:var(--quf-dark); margin:0 0 18px; }
.quf-text-gold{ color:var(--quf-primary); }
.quf-hero-copy p{ color:var(--quf-muted); font-size:16px; line-height:1.7; max-width:520px; margin-bottom:26px; }

.quf-hero-features{ display:flex; gap:16px; margin-bottom:30px; flex-wrap:wrap; }
.quf-hero-feature-item{
	font-size:13.5px; font-weight:600; color:var(--quf-dark); cursor:default;
	padding:14px 18px 14px 16px; border-radius:14px; border:1px solid var(--quf-border);
	background:#fff; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.quf-hero-feature-item:hover{
	transform:translateY(-6px); box-shadow:0 14px 30px rgba(26,86,50,.14);
	border-color:var(--quf-primary); background:#F6FBF7;
}
.quf-hero-feature-icon{
	color:var(--quf-icon-color, var(--quf-primary)) !important; font-size:20px; display:flex; align-items:center; justify-content:center;
	width:38px; height:38px; margin-bottom:8px; border-radius:50%; background:var(--quf-icon-bg, #e7f1ea) !important;
	transition:transform .35s ease, background .25s ease, color .25s ease;
}
/* Default hover look, used when no animation is picked (or "Grow & Tilt" is picked) */
.quf-hero-feature-item:hover .quf-hero-feature-icon{
	background:var(--quf-icon-hover-bg, var(--quf-icon-color, var(--quf-primary))) !important;
	color:var(--quf-icon-hover-color, #fff) !important;
}
.quf-hero-features.quf-anim-grow .quf-hero-feature-item:hover .quf-hero-feature-icon,
.quf-hero-features:not([class*="quf-anim-"]) .quf-hero-feature-item:hover .quf-hero-feature-icon{ transform:rotate(-8deg) scale(1.15); }
.quf-hero-features.quf-anim-pulse .quf-hero-feature-item:hover .quf-hero-feature-icon{ animation:quf-icon-pulse .7s ease; }
.quf-hero-features.quf-anim-bounce .quf-hero-feature-item:hover .quf-hero-feature-icon{ animation:quf-icon-bounce .6s ease; }
.quf-hero-features.quf-anim-rotate .quf-hero-feature-item:hover .quf-hero-feature-icon{ animation:quf-icon-rotate .6s ease; }
.quf-hero-features.quf-anim-shake .quf-hero-feature-item:hover .quf-hero-feature-icon{ animation:quf-icon-shake .5s ease; }
.quf-hero-features.quf-anim-none .quf-hero-feature-item:hover .quf-hero-feature-icon{ transform:none; }
.quf-hero-features small{ font-weight:400; color:var(--quf-muted); }

.quf-hero-buttons{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.quf-hero-media{ position:relative; border-radius:20px; overflow:hidden; }
.quf-hero-media img{ width:100%; height:460px; object-fit:cover; object-position:center; display:block; border-radius:20px; }
.quf-hero-placeholder{ border-radius:20px; }
.quf-hero-placeholder{
	background:#eef4ef; border:2px dashed #c7dccb; min-height:380px;
	display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--quf-muted); padding:24px;
}
.quf-hero-placeholder i{ font-size:52px; color:var(--quf-gold); margin-bottom:14px; }

.quf-hero-swiper .swiper-pagination{ position:static; margin-top:30px; text-align:center; }
.swiper-pagination-bullet-active{ background:var(--quf-primary) !important; }

/* ---------- Countries ---------- */
.quf-countries{ padding:26px 0; background:#fff; border-bottom:1px solid var(--quf-border); }
.quf-countries-title{ text-align:center; color:var(--quf-muted); font-size:12.5px; letter-spacing:2px; font-weight:700; margin-bottom:18px; }
.quf-country-item{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--quf-dark); justify-content:center; font-size:14.5px; }
.quf-country-flag{ font-size:20px; }

/* ---------- Section Heading ---------- */
.quf-section-heading{ text-align:center; margin-bottom:40px; }
.quf-section-heading h2{ font-size:14px; letter-spacing:2px; font-weight:800; color:var(--quf-primary); margin:0; }
.quf-section-heading-row{ display:flex; align-items:center; justify-content:space-between; text-align:left; }
.quf-view-all{ font-size:14px; font-weight:600; color:var(--quf-primary); display:flex; align-items:center; gap:6px; }
.quf-section-subtitle{ font-size:12.5px; letter-spacing:2px; font-weight:700; text-transform:uppercase; color:var(--quf-gold); margin:0 0 8px; }
.quf-section-description{ font-size:14.5px; color:var(--quf-muted); max-width:640px; margin:10px auto 0; line-height:1.7; }
.quf-section-heading[style*="text-align: left"] .quf-section-description,
.quf-section-heading[style*="text-align: right"] .quf-section-description{ margin-left:0; margin-right:0; }

/* ---------- Why Choose ---------- */
.quf-why-choose{ padding:60px 0; background:var(--quf-bg-light); }
.quf-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.quf-why-item{
	background:#fff; border:1px solid var(--quf-border); border-radius:var(--radius); padding:26px 16px;
	text-align:center; transition:.25s;
}
.quf-why-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.quf-why-icon{
	width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
	background:var(--quf-icon-bg, #eaf3ec) !important; color:var(--quf-icon-color, var(--quf-primary)) !important;
	display:flex; align-items:center; justify-content:center;
	transition:transform .35s ease, background .25s ease, color .25s ease;
}
.quf-why-icon i{ font-size:22px; }
.quf-why-item:hover .quf-why-icon{
	background:var(--quf-icon-hover-bg, var(--quf-icon-color, var(--quf-primary))) !important;
	color:var(--quf-icon-hover-color, #fff) !important;
}
.quf-why-grid.quf-anim-grow .quf-why-item:hover .quf-why-icon,
.quf-why-grid:not([class*="quf-anim-"]) .quf-why-item:hover .quf-why-icon{ transform:scale(1.12); }
.quf-why-grid.quf-anim-pulse .quf-why-item:hover .quf-why-icon{ animation:quf-icon-pulse .7s ease; }
.quf-why-grid.quf-anim-bounce .quf-why-item:hover .quf-why-icon{ animation:quf-icon-bounce .6s ease; }
.quf-why-grid.quf-anim-rotate .quf-why-item:hover .quf-why-icon{ animation:quf-icon-rotate .6s ease; }
.quf-why-grid.quf-anim-shake .quf-why-item:hover .quf-why-icon{ animation:quf-icon-shake .5s ease; }
.quf-why-grid.quf-anim-none .quf-why-item:hover .quf-why-icon{ transform:none; }
.quf-why-item p, .quf-why-item-title{ font-size:13.5px; font-weight:600; color:var(--quf-dark); margin:0; }
.quf-why-item-desc{ font-size:12.5px; color:var(--quf-muted); margin:6px 0 0; line-height:1.6; }

/* ---------- Courses ---------- */
.quf-courses{ padding:60px 0; }
.quf-course-card{
	display:block; background:#fff; border:1px solid var(--quf-border); border-radius:var(--radius);
	padding:28px 20px; text-align:center; height:100%; transition:.25s;
}
.quf-el-swiper.quf-course-hover-lift .quf-course-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.quf-course-icon{
	width:64px; height:64px; margin:0 auto 16px; border-radius:16px; display:flex; align-items:center; justify-content:center;
	background:var(--quf-course-icon-bg, var(--quf-primary)); color:var(--quf-course-icon-color, #fff);
	transition:background .25s ease, color .25s ease, transform .25s ease;
}
.quf-course-card:hover .quf-course-icon{
	background:var(--quf-course-icon-hover-bg, var(--quf-course-icon-bg, var(--quf-primary)));
	color:var(--quf-course-icon-hover-color, var(--quf-course-icon-color, #fff));
}
.quf-el-swiper.quf-anim-grow .quf-course-card:hover .quf-course-icon,
.quf-el-swiper:not([class*="quf-anim-"]) .quf-course-card:hover .quf-course-icon{ transform:scale(1.1); }
.quf-el-swiper.quf-anim-pulse .quf-course-card:hover .quf-course-icon{ animation:quf-icon-pulse .7s ease; }
.quf-el-swiper.quf-anim-bounce .quf-course-card:hover .quf-course-icon{ animation:quf-icon-bounce .6s ease; }
.quf-el-swiper.quf-anim-rotate .quf-course-card:hover .quf-course-icon{ animation:quf-icon-rotate .6s ease; }
.quf-el-swiper.quf-anim-shake .quf-course-card:hover .quf-course-icon{ animation:quf-icon-shake .5s ease; }
.quf-el-swiper.quf-anim-none .quf-course-card:hover .quf-course-icon{ transform:none; }
.quf-course-icon-lg{ width:90px; height:90px; margin:0 auto 22px; }
.quf-course-icon-lg i{ font-size:38px; }
.quf-badge-green{ background:var(--quf-course-icon-bg, var(--quf-primary)); }
.quf-badge-navy{ background:var(--quf-course-icon-bg, var(--quf-navy)); }
.quf-badge-gold{ background:var(--quf-course-icon-bg, var(--quf-gold)); }
.quf-course-card h3{ font-size:16px; margin:0 0 6px; color:var(--quf-dark); }
.quf-course-card p{ font-size:13px; color:var(--quf-muted); margin:0; }
.quf-course-desc{ margin-top:4px !important; }

.quf-swiper-nav{ display:flex; justify-content:center; gap:12px; margin-top:28px; }
.quf-swiper-nav button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--quf-border); background:#fff; color:var(--quf-primary); }
.quf-swiper-nav button:hover{ background:var(--quf-primary); color:#fff; }

/* ---------- Teachers ---------- */
.quf-teachers{ padding:60px 0; background:var(--quf-bg-light); }
.quf-teacher-card{ background:#fff; border-radius:var(--radius); padding:24px; text-align:center; border:1px solid var(--quf-border); }
.quf-teacher-photo{
	width:88px; height:88px; margin:0 auto 14px; border-radius:50%; background:#eaf3ec;
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.quf-teacher-photo i{ font-size:34px; color:var(--quf-primary); }
.quf-teacher-photo img{ width:100%; height:100%; object-fit:cover; }
.quf-teacher-card h3{ font-size:16px; margin:0 0 4px; color:var(--quf-dark); }
.quf-teacher-desc{ font-size:12.5px; color:var(--quf-muted); margin:0 0 14px; line-height:1.6; }
.quf-teacher-role{ font-size:12.5px; color:var(--quf-muted); margin-bottom:6px; }
.quf-teacher-country{ font-size:12px; color:var(--quf-muted); margin-bottom:4px; }
.quf-teacher-rating{ font-size:13px; color:var(--quf-gold); margin-bottom:14px; }
.quf-teacher-rating i{ font-size:12px; }
.quf-teachers-grid-archive{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding:20px 0 60px; }

/* ---------- Process ---------- */
.quf-process{ padding:60px 0; }
.quf-process-track{ display:flex; justify-content:space-between; gap:16px; position:relative; }
.quf-process-track::before{
	content:''; position:absolute; top:34px; left:8%; right:8%; height:2px;
	background:repeating-linear-gradient(90deg,var(--quf-border) 0 8px,transparent 8px 16px);
	z-index:0;
}
.quf-process-track::after{
	content:''; position:absolute; top:34px; left:8%; height:2px; width:0; z-index:0;
	background:var(--quf-primary); transition:width 1.4s cubic-bezier(.22,1,.36,1);
}
.quf-process-track.quf-in-view::after{ width:84%; }
.quf-process-step{
	flex:1; text-align:center; position:relative; z-index:1;
	opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease;
	transition-delay:calc(var(--i, 0) * .12s);
}
.quf-process-track.quf-in-view .quf-process-step{ opacity:1; transform:translateY(0); }
.quf-process-circle{
	width:70px; height:70px; border-radius:50%; background:#fff; border:2px solid var(--quf-primary);
	display:flex; align-items:center; justify-content:center; margin:0 auto 10px; position:relative;
	box-shadow:0 0 0 0 rgba(26,86,50,.16); transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.quf-process-step:hover .quf-process-circle{
	background:var(--quf-primary); transform:translateY(-6px) scale(1.06);
	box-shadow:0 14px 26px rgba(26,86,50,.25);
}
.quf-process-circle i{ font-size:24px; color:var(--quf-primary); transition:color .3s ease; }
.quf-process-step:hover .quf-process-circle i{ color:#fff; }
.quf-process-number{
	display:inline-block; font-size:11.5px; font-weight:800; color:#fff; background:var(--quf-gold);
	padding:2px 10px; border-radius:12px; margin-bottom:10px; letter-spacing:.5px;
}
.quf-process-step p, .quf-process-step-title{ font-size:13.5px; font-weight:600; color:var(--quf-dark); max-width:120px; margin:0 auto; }
.quf-process-step-desc{ font-size:12px; color:var(--quf-muted); max-width:150px; margin:6px auto 0; line-height:1.6; }

/* ---------- Achievements ---------- */
.quf-achievements{ padding:50px 0 60px; }
.quf-achievements-section{ padding:50px 0 60px; background:var(--quf-bg-light); }
.quf-achievements-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.quf-achievement-item{
	background:#fff; border-radius:14px; padding:26px 18px; text-align:center; border:1px solid var(--quf-border);
	transition:transform .25s ease, box-shadow .25s ease;
}
.quf-ach-hover-lift .quf-achievement-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.quf-achievement-icon{
	width:56px; height:56px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	transition:background .25s ease, color .25s ease, transform .25s ease;
}
.quf-ach-icon-badge .quf-achievement-icon{ background:var(--quf-ach-icon-bg, var(--quf-primary)); color:var(--quf-ach-icon-color, #fff); }
.quf-ach-icon-plain .quf-achievement-icon{ width:auto; height:auto; margin-bottom:10px; color:var(--quf-ach-icon-color, var(--quf-gold)); }
.quf-achievement-item:hover .quf-achievement-icon{
	background:var(--quf-ach-icon-hover-bg, var(--quf-ach-icon-bg, var(--quf-primary)));
	color:var(--quf-ach-icon-hover-color, var(--quf-ach-icon-color, #fff));
}
.quf-achievements-grid.quf-anim-grow .quf-achievement-item:hover .quf-achievement-icon{ transform:scale(1.1); }
.quf-achievements-grid.quf-anim-pulse .quf-achievement-item:hover .quf-achievement-icon{ animation:quf-icon-pulse .7s ease; }
.quf-achievements-grid.quf-anim-bounce .quf-achievement-item:hover .quf-achievement-icon{ animation:quf-icon-bounce .6s ease; }
.quf-achievements-grid.quf-anim-rotate .quf-achievement-item:hover .quf-achievement-icon{ animation:quf-icon-rotate .6s ease; }
.quf-achievements-grid.quf-anim-shake .quf-achievement-item:hover .quf-achievement-icon{ animation:quf-icon-shake .5s ease; }
.quf-achievements-grid.quf-anim-none .quf-achievement-item:hover .quf-achievement-icon{ transform:none; }
.quf-ach-count-row{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; line-height:1; }
.quf-ach-number, .quf-ach-suffix{ font-size:clamp(22px, 5vw, 30px); font-weight:800; color:var(--quf-dark); white-space:nowrap; }
.quf-ach-label{ display:block; font-size:13px; color:var(--quf-muted); margin-top:6px; line-height:1.4; }

@media (max-width: 991px){
	.quf-achievements-grid{ gap:16px; }
}
@media (max-width: 480px){
	.quf-achievements-grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px; }
	.quf-achievement-item{ padding:18px 10px; }
	.quf-achievement-icon{ width:46px; height:46px; margin-bottom:10px; }
}

/* ---------- Reviews ---------- */
.quf-reviews{ padding:60px 0; }
.quf-review-card{ background:#fff; border:1px solid var(--quf-border); border-radius:var(--radius); padding:26px; height:100%; }
.quf-review-stars{ color:var(--quf-gold); margin-bottom:12px; font-size:14px; }
.quf-review-card p{ color:var(--quf-text); font-size:14.5px; line-height:1.7; margin-bottom:18px; }
.quf-review-author{ display:flex; align-items:center; gap:12px; }
.quf-review-avatar{ width:44px; height:44px; border-radius:50%; background:#eaf3ec; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.quf-review-avatar i{ color:var(--quf-primary); }
.quf-review-author small{ color:var(--quf-muted); }

.quf-review-form-wrap{ max-width:600px; margin:50px auto 0; background:var(--quf-bg-light); padding:30px; border-radius:var(--radius); }
.quf-review-form-wrap h3{ margin-top:0; color:var(--quf-dark); }

/* ---------- Forms (shared) ---------- */
.quf-form-row{ display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap; align-items:flex-end; }
.quf-form-row > *{ flex:1 1 160px; min-width:0; }
.quf-form input, .quf-form select, .quf-form textarea{
	width:100%; padding:12px 14px; border:1px solid var(--quf-border); border-radius:8px; font-family:inherit; font-size:14.5px;
}
.quf-form select{ background:#fff; cursor:pointer; }
.quf-form textarea{ margin-bottom:14px; resize:vertical; }
.quf-form-notice{ padding:14px 18px; border-radius:8px; margin-bottom:24px; font-size:14.5px; }
.quf-notice-success{ background:#e6f4ea; color:#1a5632; }
.quf-notice-error{ background:#fdecec; color:#b3261e; }
.quf-enrollment-form-widget .quf-form button[type="submit"]{ margin-top:4px; }

/* Visible label above a field (used for Date/Time/Country in the
   Enrollment Form, since native date/time inputs ignore placeholder text
   and would otherwise show no indication of what they're for). */
.quf-form-field-label{ display:flex; flex-direction:column; gap:6px; }
.quf-form-field-label > span{ font-size:12.5px; font-weight:600; color:var(--quf-muted); padding-left:2px; }

@media (max-width: 767px){
	.quf-form-row{ gap:10px; }
	.quf-form input, .quf-form select, .quf-form textarea{ padding:10px 12px; font-size:14px; }
}
@media (max-width: 480px){
	.quf-form-row{ flex-direction:column; align-items:stretch; }
	.quf-form-row > *{ flex-basis:auto; }
}

/* ---------- Pricing ---------- */
.quf-pricing{ padding:60px 0; background:var(--quf-bg-light); }
.quf-pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.quf-pricing-card{
	background:#fff; border:1px solid var(--quf-border); border-radius:var(--radius); padding:32px 26px;
	position:relative; text-align:center; transition:.25s;
}
.quf-pricing-featured{ border-color:var(--quf-gold); box-shadow:var(--shadow); transform:scale(1.03); }
.quf-pricing-badge{
	position:absolute; top:-14px; left:50%; transform:translateX(-50%);
	background:var(--quf-gold); color:#2b2205; font-size:12px; font-weight:700; padding:5px 16px; border-radius:20px;
}
.quf-pricing-card h3{ font-size:17px; color:var(--quf-dark); margin-bottom:10px; }
.quf-pricing-amount{ font-size:36px; font-weight:800; color:var(--quf-primary); margin-bottom:20px; }
.quf-pricing-amount span{ font-size:14px; font-weight:500; color:var(--quf-muted); }
.quf-pricing-features{ margin-bottom:24px; text-align:left; }
.quf-pricing-features li{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:14px; color:var(--quf-text); }
.quf-pricing-features i{ color:var(--quf-primary); }

/* ---------- Daily Dua Strip ---------- */
.quf-dua-strip{ padding:34px 0; background:#fff; }
.quf-daily-dua{ max-width:760px; margin:0 auto; text-align:center; background:var(--quf-bg-light); border:1px dashed #c7dccb; border-radius:var(--radius); padding:26px; }
.quf-dua-icon i{ font-size:24px; color:var(--quf-gold); margin-bottom:8px; }
.quf-dua-label{ display:block; font-size:12px; font-weight:800; letter-spacing:1.5px; color:var(--quf-primary); margin-bottom:12px; }
.quf-dua-arabic{ font-family:'Amiri', serif; font-size:26px; color:var(--quf-dark); margin-bottom:10px; line-height:1.9; }
.quf-dua-translation{ font-size:14px; color:var(--quf-muted); font-style:italic; }

/* ---------- CTA ---------- */
.quf-cta{ background:linear-gradient(120deg,var(--quf-dark),var(--quf-primary)); padding:44px 0; }
.quf-cta-inner{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:space-between; }
.quf-cta-icon{ font-size:40px; color:var(--quf-gold); }
.quf-cta-text h2{ color:#fff; font-size:24px; margin:0 0 6px; }
.quf-cta-text p{ color:#dcebdf; margin:0; max-width:480px; }

/* ---------- Footer ---------- */
.quf-footer{ background:var(--quf-navy); color:#c9d6dd; padding-top:56px; }
.quf-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:32px; padding-bottom:40px; }
.quf-footer h4, .footer-col-title{ color:#fff; font-size:15px; margin:0 0 16px; }
.quf-footer-col ul li{ margin-bottom:10px; }
.quf-footer-col ul a{ color:#a9bac3; font-size:14px; }
.quf-footer-col ul a:hover{ color:var(--quf-gold); }
.quf-footer-brand p{ font-size:13.5px; color:#a9bac3; margin:14px 0 18px; }
.quf-logo-light{ color:#fff; }
.quf-logo-light i{ color:var(--quf-gold); }
.quf-social-icons{ display:flex; gap:10px; }
.quf-social-icons a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; }
.quf-social-icons a:hover{ background:var(--quf-gold); color:#2b2205; }
.quf-footer-contact li{ display:flex; gap:10px; align-items:center; font-size:14px; color:#a9bac3; margin-bottom:12px; line-height:1.4; }
.quf-footer-contact i{ color:var(--quf-gold); flex-shrink:0; width:16px; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
.quf-footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:18px 0; }
.quf-footer-bottom-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:13px; color:#8ea0a9; }
.quf-footer-bottom a{ color:var(--quf-gold); }
.quf-heart{ color:#e0546a; }

/* ---------- Footer widget areas (Appearance → Widgets → Footer Column 1/2/3) ----------
   .quf-widget gets a light card background + padding everywhere it's used
   (e.g. the Blog Sidebar), which looks wrong sitting on the dark footer —
   these overrides strip that back out and restyle whatever gets dropped in
   (Navigation Menu block, classic Custom Menu widget, Text/HTML widgets,
   etc.) to match the rest of the footer instead. */
.quf-footer .quf-widget{
	background:none; border-radius:0; padding:0; margin-bottom:0; color:#a9bac3;
}
.quf-footer .quf-widget-title{ color:#fff; font-size:15px; margin:0 0 16px; }

/* Classic "Navigation Menu" / "Custom Menu" widget */
.quf-footer .quf-widget ul{ list-style:none; margin:0; padding:0; }
.quf-footer .quf-widget ul li{ margin-bottom:10px; }
.quf-footer .quf-widget ul a{ color:#a9bac3; font-size:14px; text-decoration:none; transition:color .2s ease; }
.quf-footer .quf-widget ul a:hover{ color:var(--quf-gold); }
.quf-footer .quf-widget ul ul{ margin:8px 0 0 16px; } /* sub-menu items */

/* Block-editor "Navigation" block widget */
.quf-footer .quf-widget .wp-block-navigation{ background:none !important; }
.quf-footer .quf-widget .wp-block-navigation .wp-block-navigation-item,
.quf-footer .quf-widget .wp-block-navigation__container{ background:none; }
.quf-footer .quf-widget .wp-block-navigation-item__content{
	color:#a9bac3 !important; font-size:14px !important; padding:0 !important; text-decoration:none !important;
}
.quf-footer .quf-widget .wp-block-navigation-item__content:hover{ color:var(--quf-gold) !important; }
.quf-footer .quf-widget .wp-block-navigation{ flex-direction:column !important; align-items:flex-start !important; gap:10px !important; }
.quf-footer .quf-widget .wp-block-navigation .wp-block-navigation-item{ width:100%; }

/* Text / Custom HTML / generic widgets */
.quf-footer .quf-widget p{ color:#a9bac3; font-size:14px; line-height:1.6; }
.quf-footer .quf-widget a{ color:#a9bac3; }
.quf-footer .quf-widget a:hover{ color:var(--quf-gold); }


/* ---------- Top scroll-progress bar ---------- */
.quf-scroll-progress{
	position:fixed; top:0; left:0; height:3px; width:0%;
	background:linear-gradient(90deg,var(--quf-gold),var(--quf-primary));
	z-index:1001; transition:width .1s ease-out;
}

/* ---------- Back to top button ---------- */
.quf-back-to-top{
	position:fixed; bottom:100px; right:26px; z-index:998;
	width:46px; height:46px; border-radius:50%; border:none;
	background:var(--quf-dark); color:#fff; font-size:17px;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 6px 16px rgba(0,0,0,.2);
	opacity:0; visibility:hidden; transform:translateY(12px);
	transition:.3s ease;
}
.quf-back-to-top.quf-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.quf-back-to-top:hover{ background:var(--quf-primary); }
@media (max-width:767px){
	.quf-back-to-top{ bottom:90px; right:18px; width:42px; height:42px; }
}

/* ---------- Scroll-reveal animation base (works with/without AOS) ---------- */
[data-aos]{ transition-property: opacity, transform; }

/* ---------- WhatsApp Floating Button ---------- */
.quf-whatsapp-float{
	position:fixed; bottom:26px; z-index:999; width:58px; height:58px; border-radius:50%;
	background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
	font-size:28px; box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.quf-wa-right{ right:26px; }
.quf-wa-left{ left:26px; }
.quf-wa-pulse{ position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:quf-pulse 2s infinite; }
@keyframes quf-pulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.6); opacity:0; } }

/* ---------- Blog / Page / Single ---------- */
.quf-page-header{ padding:44px 0 10px; }
.quf-page-header h1{ color:var(--quf-dark); font-size:32px; }
.quf-page-content{ padding:20px 0 60px; line-height:1.8; }
.quf-blog-layout{ display:grid; grid-template-columns:2.4fr 1fr; gap:36px; padding:20px 0 60px; }
.quf-blog-card{ margin-bottom:36px; border-bottom:1px solid var(--quf-border); padding-bottom:30px; }
.quf-blog-thumb img{ border-radius:var(--radius); margin-bottom:16px; }
.quf-blog-date{ font-size:12.5px; color:var(--quf-muted); }
.quf-blog-body h2{ font-size:22px; margin:8px 0; }
.quf-blog-body h2 a{ color:var(--quf-dark); }
.quf-read-more{ color:var(--quf-primary); font-weight:600; font-size:14px; }
.quf-single-post h1{ font-size:30px; color:var(--quf-dark); }
.quf-post-meta{ color:var(--quf-muted); font-size:13.5px; margin-bottom:20px; }
.quf-single-thumb img{ border-radius:var(--radius); margin-bottom:24px; }
.quf-post-content{ line-height:1.85; }
.quf-widget{ background:var(--quf-bg-light); border-radius:var(--radius); padding:20px; margin-bottom:24px; }
.quf-widget-title{ margin-top:0; color:var(--quf-dark); }

.quf-contact-layout{ display:grid; grid-template-columns:1fr 1.6fr; gap:40px; padding:20px 0 70px; }
.quf-contact-info p{ font-size:15px; margin-bottom:14px; }
.quf-contact-info i{ color:var(--quf-primary); margin-right:8px; }
.quf-contact-form-wrap{ background:var(--quf-bg-light); border-radius:var(--radius); padding:30px; }

.quf-404{ text-align:center; padding:90px 0; }
.quf-404 i{ font-size:50px; color:var(--quf-gold); margin-bottom:10px; }
.quf-404 h1{ font-size:60px; color:var(--quf-dark); margin:0; }

.quf-archive-grid{ padding:20px 0 60px; }
.quf-single-course{ text-align:center; padding:50px 0 70px; max-width:760px; margin:0 auto; }
.quf-single-course img{ border-radius:var(--radius); margin:20px auto; }
.quf-course-price{ font-size:20px; margin:20px 0; }

/* ---------- QF Hero Slider widget: creative style (floating shapes + Ken Burns zoom) ---------- */
.quf-hero-widget{ position:relative; }
.quf-hero-shape{ position:absolute; border-radius:50%; opacity:.12; pointer-events:none; z-index:0; }
.quf-hero-shape-1{ width:220px; height:220px; background:var(--quf-primary); top:-60px; right:8%; animation:quf-float 7s ease-in-out infinite; }
.quf-hero-shape-2{ width:140px; height:140px; background:var(--quf-gold); bottom:0; left:4%; animation:quf-float 9s ease-in-out infinite reverse; }
.quf-hero-shape-3{ width:90px; height:90px; background:var(--quf-navy, #16324a); top:40%; right:2%; animation:quf-float 6s ease-in-out infinite; }
@keyframes quf-float{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-18px) scale(1.05); } }
.quf-hero-creative .quf-hero-media{ overflow:hidden; border-radius:20px; }
.quf-hero-creative .quf-hero-media img{ animation:quf-kenburns 9s ease-in-out infinite alternate; }
@keyframes quf-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
.quf-hero-el-swiper .swiper-pagination{ position:static; margin-top:30px; text-align:center; }
.quf-hero-nav{ margin-top:16px; }
.quf-hero-el-swiper .swiper-slide{ position:relative; z-index:1; }

/* ---------- QF Hero Slider: background image mode ---------- */
.quf-hero-bg-slide{
	background-size:cover; background-position:center; background-repeat:no-repeat;
	border-radius:20px; display:flex; align-items:center; position:relative; overflow:hidden;
}
.quf-hero-slide-overlay{ position:absolute; inset:0; background:rgba(15,61,35,.55); z-index:0; }
.quf-hero-grid-bg{ position:relative; z-index:1; grid-template-columns:1fr; padding:48px; width:100%; }
.quf-hero-grid-bg .quf-hero-copy{ max-width:640px; }
.quf-hero-grid-bg .quf-hero-copy h1{ color:#fff; }
.quf-hero-grid-bg .quf-hero-copy p{ color:rgba(255,255,255,.88); }
.quf-hero-grid-bg .quf-hero-feature-item{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; }
.quf-hero-grid-bg .quf-hero-feature-item small{ color:rgba(255,255,255,.75); }
.quf-hero-grid-bg .quf-hero-feature-item:hover{ background:rgba(255,255,255,.2); }
.quf-hero-grid-bg .quf-hero-feature-icon{ background:rgba(255,255,255,.18); color:#fff; }
@media (max-width:767px){ .quf-hero-grid-bg{ padding:32px 20px; } }

/* ---------- QF Contact Info widget ---------- */
.quf-contact-info-card{ display:flex; flex-direction:column; gap:14px; }
.quf-contact-layout-row{ flex-direction:row; flex-wrap:wrap; gap:20px; }
.quf-contact-row{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.quf-contact-row-top{ align-items:flex-start; }
.quf-contact-row i{
	width:38px; height:38px; min-width:38px; border-radius:50%; background:#e7f1ea; color:var(--quf-primary);
	display:flex; align-items:center; justify-content:center; font-size:15px;
}
.quf-contact-row span{ font-size:14.5px; font-weight:600; color:var(--quf-dark); word-break:break-word; }
.quf-contact-hours{ list-style:none; margin:0; padding:0; }
.quf-contact-hours li{ font-size:13.5px; color:var(--quf-muted); line-height:1.8; }
.quf-contact-social{ display:flex; gap:10px; flex-wrap:wrap; }
.quf-contact-social a{
	width:38px; height:38px; border-radius:50%; border:1.5px solid var(--quf-primary); color:var(--quf-primary);
	display:flex; align-items:center; justify-content:center; text-decoration:none; transition:.2s;
}
.quf-contact-social a:hover{ background:var(--quf-primary); color:#fff; }
.quf-contact-map iframe{ width:100%; height:260px; display:block; border-radius:12px; }
.quf-contact-map-note{ font-size:13px; color:var(--quf-muted); font-style:italic; }

/* ---------- QF Hero Slider: staggered slide-in animation on the active slide ---------- */
.quf-hero-el-swiper .swiper-slide .quf-hero-copy > *{ opacity:0; transform:translateY(24px); }
.quf-hero-el-swiper .swiper-slide-active .quf-hero-copy > *{ animation:quf-hero-in .7s ease forwards; }
.quf-hero-el-swiper .swiper-slide-active .quf-hero-copy h1{ animation-delay:.05s; }
.quf-hero-el-swiper .swiper-slide-active .quf-hero-copy p{ animation-delay:.2s; }
.quf-hero-el-swiper .swiper-slide-active .quf-hero-copy .quf-hero-buttons{ animation-delay:.35s; }
.quf-hero-el-swiper .swiper-slide-active .quf-hero-media{ animation:quf-hero-in-media .8s ease forwards; }
@keyframes quf-hero-in{ to{ opacity:1; transform:translateY(0); } }
@keyframes quf-hero-in-media{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }

/* ---------- Daily Ayat & Hadith Corner (extra bits added on top of .quf-daily-dua) ---------- */
.quf-dua-reference{ font-size:12.5px; color:var(--quf-primary); font-weight:700; letter-spacing:.3px; margin-top:6px; }
.quf-daily-corner{ position:relative; }

/* ---------- Secondary slider pagination/nav (teachers & reviews) ---------- */
.quf-teachers-swiper .swiper-pagination,
.quf-reviews-swiper .swiper-pagination{ position:static; margin-top:22px; text-align:center; }
.quf-teachers-swiper .swiper-pagination-bullet,
.quf-reviews-swiper .swiper-pagination-bullet{ background:var(--quf-border); opacity:1; }
.quf-teachers-swiper .swiper-slide,
.quf-reviews-swiper .swiper-slide{ height:auto; }
.quf-teachers-swiper .quf-teacher-card,
.quf-reviews-swiper .quf-review-card{ height:100%; }

/* ---------- QF Animated Slider (Elementor widget) ---------- */
.quf-el-swiper{ padding-bottom:6px; }
.quf-el-swiper .swiper-slide{ height:auto; }
.quf-el-slide-card{
	background:#fff; border:1px solid var(--quf-border); border-radius:var(--radius);
	overflow:hidden; height:100%; display:flex; flex-direction:column; transition:.25s;
}
.quf-el-slide-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.quf-el-slide-media{ height:220px; background-size:cover; background-position:center; }
.quf-el-slide-body{ padding:22px; flex:1; display:flex; flex-direction:column; gap:8px; }
.quf-el-slide-body h3{ font-size:18px; color:var(--quf-dark); margin:0; }
.quf-el-slide-body p{ font-size:14px; color:var(--quf-muted); line-height:1.6; margin:0 0 6px; flex:1; }
.quf-el-swiper .swiper-pagination{ position:static; margin-top:20px; text-align:center; }
.quf-el-swiper .swiper-pagination-bullet{ background:var(--quf-border); opacity:1; }
.quf-el-swiper-nav{ margin-top:18px; }

/* ---------- Full-canvas Elementor template ---------- */
body.quf-canvas-template{ margin:0; }

/* ---------- Full-width (header/footer kept) Elementor template ---------- */
.quf-fullwidth-main{ overflow-x:hidden; }

/* ---------- Class Schedule & Timings widget ---------- */
.quf-schedule{ padding:64px 0; }
.quf-schedule-sub{ max-width:560px; margin:10px auto 0; color:var(--quf-muted); font-size:15px; line-height:1.7; }
.quf-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--quf-gold); margin-bottom:6px; }

/* Weekend offer banner */
.quf-weekend-offer{
	display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
	background:linear-gradient(120deg, var(--quf-dark), var(--quf-navy));
	border-radius:var(--radius); padding:28px 32px; margin-bottom:44px; color:#fff;
	box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.quf-weekend-offer::after{
	content:''; position:absolute; top:-40%; right:-6%; width:260px; height:260px; border-radius:50%;
	background:radial-gradient(circle, rgba(212,160,23,.25), transparent 70%); pointer-events:none;
}
.quf-weekend-offer-main{ position:relative; z-index:1; max-width:560px; }
.quf-weekend-offer-badge{
	display:inline-flex; align-items:center; gap:6px; background:rgba(212,160,23,.16); color:var(--quf-gold);
	font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:12px;
}
.quf-weekend-offer-main h3{ font-size:22px; margin:0 0 8px; color:#fff; }
.quf-weekend-offer-main p{ font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.78); margin:0; }
.quf-weekend-offer-cta{ position:relative; z-index:1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.quf-weekend-offer-discount{ font-size:26px; font-weight:800; color:var(--quf-gold); white-space:nowrap; }

/* Day tabs */
.quf-schedule-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:28px; }
.quf-day-tab{
	position:relative; min-width:64px; padding:12px 18px; border-radius:999px; border:2px solid var(--quf-border);
	background:#fff; color:var(--quf-text); font-weight:700; font-size:13.5px; letter-spacing:.5px;
	cursor:pointer; transition:.2s ease;
}
.quf-day-tab:hover:not(:disabled){ border-color:var(--quf-primary); color:var(--quf-primary); }
.quf-day-tab.quf-day-active{ background:var(--quf-primary); border-color:var(--quf-primary); color:#fff; box-shadow:var(--shadow); }
.quf-day-tab.quf-day-weekend:not(.quf-day-active){ border-color:var(--quf-gold); color:#8a6a0c; }
.quf-day-tab .quf-day-dot{ position:absolute; top:6px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--quf-gold); }
.quf-day-tab.quf-day-active .quf-day-dot{ background:#fff; }
.quf-day-tab:disabled{ opacity:.4; cursor:not-allowed; }

/* Day panels */
.quf-schedule-panel{ display:none; }
.quf-schedule-panel.quf-panel-active{ display:block; animation:quf-fade-slide-in .35s ease; }
@keyframes quf-fade-slide-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.quf-schedule-empty{ text-align:center; color:var(--quf-muted); padding:30px 0; }
.quf-schedule-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px; margin-bottom:8px; }
.quf-session-card{
	background:#fff; border:1px solid var(--quf-border); border-radius:var(--radius); padding:20px;
	transition:.25s ease; position:relative;
}
.quf-session-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--quf-primary); }
.quf-session-card.quf-session-weekend{ border-color:rgba(212,160,23,.5); background:linear-gradient(180deg, #fffaf0, #fff); }
.quf-session-time{ font-size:12.5px; font-weight:700; letter-spacing:.5px; color:var(--quf-muted); display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.quf-session-name{ font-size:16px; font-weight:700; color:var(--quf-dark); margin-bottom:6px; }
.quf-session-note{ display:inline-block; font-size:12px; color:var(--quf-gold); font-weight:600; margin-bottom:10px; }
.quf-session-book{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--quf-primary); margin-top:10px; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; }
.quf-session-book i{ font-size:11px; transition:transform .2s ease; }
.quf-session-card:hover .quf-session-book i{ transform:translateX(3px); }

/* Class styles carousel */
.quf-class-styles{ margin-top:52px; }
.quf-class-styles-heading{ text-align:center; font-size:20px; color:var(--quf-dark); margin-bottom:26px; }
.quf-class-styles-swiper{ padding-bottom:6px; }
.quf-class-styles-swiper .swiper-slide{ height:auto; }
.quf-class-styles-swiper .swiper-pagination{ position:static; margin-top:22px; text-align:center; }
.quf-class-styles-swiper .swiper-pagination-bullet{ background:var(--quf-border); opacity:1; }
.quf-class-style-card{
	height:100%; background:var(--quf-bg-light); border:1px solid var(--quf-border); border-radius:var(--radius);
	padding:24px 20px; text-align:center; transition:.25s ease;
}
.quf-class-style-card:hover{ background:#fff; box-shadow:var(--shadow); transform:translateY(-4px); }
.quf-class-style-icon{
	width:52px; height:52px; margin:0 auto 14px; border-radius:50%; background:#fff;
	display:flex; align-items:center; justify-content:center; color:var(--quf-primary); box-shadow:0 4px 12px rgba(15,61,35,.1);
}
.quf-class-style-card h4{ font-size:15.5px; color:var(--quf-dark); margin:0 0 8px; }
.quf-class-style-card p{ font-size:13px; color:var(--quf-muted); line-height:1.6; margin:0 0 12px; }
.quf-class-style-tag{
	display:inline-block; font-size:11.5px; font-weight:700; color:var(--quf-primary);
	background:rgba(26,86,50,.08); padding:5px 12px; border-radius:999px;
}

/* Booking popup */
.quf-booking-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.quf-booking-modal.quf-modal-open{ display:block; }
.quf-booking-backdrop{ position:absolute; inset:0; background:rgba(15,42,63,.55); backdrop-filter:blur(2px); animation:quf-fade-in .2s ease; }
.quf-booking-box{
	position:relative; z-index:1; max-width:460px; width:calc(100% - 32px); margin:6vh auto; background:#fff;
	border-radius:var(--radius); padding:30px 28px; box-shadow:0 25px 60px rgba(0,0,0,.25);
	max-height:88vh; overflow-y:auto; animation:quf-pop-in .25s ease;
}
@keyframes quf-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes quf-pop-in{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
.quf-booking-close{
	position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:none;
	background:var(--quf-bg-light); color:var(--quf-muted); cursor:pointer; transition:.2s ease;
}
.quf-booking-close:hover{ background:var(--quf-border); color:var(--quf-text); }
.quf-booking-box h3{ font-size:19px; color:var(--quf-dark); margin:0 0 6px; padding-right:30px; }
.quf-booking-slot-summary{ font-size:13.5px; font-weight:600; color:var(--quf-primary); background:rgba(26,86,50,.07); padding:8px 12px; border-radius:8px; margin-bottom:18px; }
.quf-booking-notice{ font-size:13.5px; padding:10px 14px; border-radius:8px; margin-bottom:16px; }
.quf-booking-notice.quf-notice-success{ background:rgba(26,86,50,.1); color:var(--quf-primary); }
.quf-booking-notice.quf-notice-error{ background:rgba(200,60,60,.1); color:#a23434; }
.quf-booking-form .quf-form-row{ display:flex; gap:10px; margin-bottom:10px; }
.quf-booking-form input, .quf-booking-form textarea{
	width:100%; padding:11px 14px; border:1px solid var(--quf-border); border-radius:8px; font-size:14px;
	font-family:inherit; color:var(--quf-text); margin-bottom:10px; transition:.2s ease;
}
.quf-booking-form textarea{ resize:vertical; min-height:70px; }
.quf-booking-form input:focus, .quf-booking-form textarea:focus{ outline:none; border-color:var(--quf-primary); }
.quf-booking-form button[disabled]{ opacity:.65; cursor:not-allowed; }
body.quf-booking-lock{ overflow:hidden; }

/* ============================================================
   Bulletproof Font Awesome icon SIZING + COLOR
   ------------------------------------------------------------
   Font Awesome's SVG+JS method nests (or replaces with) an
   <svg class="svg-inline--fa"> inside every icon, and can attach
   its own sizing directly to that generated element. That can
   win over a normal external stylesheet rule regardless of
   specificity, which is why some icons can end up oversized and
   black (the browser's default text color) instead of the
   theme's intended small colored icon — the fix below uses
   !important to reliably win in all cases.
   `color: inherit !important` is used rather than a hardcoded
   color: it forces the icon to actually respect whatever color
   its direct parent wrapper has (the default CSS below, or a
   widget's own Icon Color Style control) — so this guarantees
   the *inheritance itself* works reliably, without ever
   overriding what the person actually chose as the color.
   Each widget's own "Icon Size" Style control still overrides
   the size here too, since it targets the same elements with
   higher specificity via Elementor's per-widget wrapper class.
   ============================================================ */
.quf-hero-feature-icon i,    .quf-hero-feature-icon svg      { font-size:20px !important; width:20px !important; height:20px !important; color:inherit !important; }
.quf-why-icon i,              .quf-why-icon svg              { font-size:22px !important; width:22px !important; height:22px !important; color:inherit !important; }
.quf-course-icon i,           .quf-course-icon svg           { font-size:26px !important; width:26px !important; height:26px !important; color:inherit !important; }
.quf-course-icon-lg i,        .quf-course-icon-lg svg        { font-size:38px !important; width:38px !important; height:38px !important; }
.quf-process-circle i,        .quf-process-circle svg        { font-size:24px !important; width:24px !important; height:24px !important; color:inherit !important; }
.quf-dua-icon i,              .quf-dua-icon svg              { font-size:24px !important; width:24px !important; height:24px !important; color:inherit !important; }
.quf-cta-icon i,               .quf-cta-icon svg              { font-size:40px !important; width:40px !important; height:40px !important; color:inherit !important; }
.quf-contact-row i,           .quf-contact-row svg           { font-size:15px !important; width:15px !important; height:15px !important; color:inherit !important; }
.quf-el-slide-card i, .quf-el-slide-card svg { font-size:inherit !important; width:1em !important; height:1em !important; color:inherit !important; }
.quf-class-style-icon i,      .quf-class-style-icon svg      { font-size:22px !important; width:22px !important; height:22px !important; color:inherit !important; }
.quf-achievement-icon i,      .quf-achievement-icon svg      { font-size:24px !important; width:24px !important; height:24px !important; color:inherit !important; }

/* All icon glyphs above sit inside a flex-centered circle/badge, but a
   plain <i> or inline <svg> is treated as inline TEXT by the browser —
   which means it gets baseline alignment and half-leading whitespace from
   the surrounding line-height, not true geometric centering. That's what
   makes some icons (whichever glyph's SVG viewBox isn't perfectly square,
   e.g. globe/calendar/microphone-style icons) look a few pixels off-center
   vertically inside their circle even though the circle itself is centered
   correctly. Forcing block display + line-height:1 removes the text-line
   behavior entirely, so flex centering is the only thing positioning the
   icon and every glyph lands dead-center regardless of its native shape. */
.quf-hero-feature-icon i, .quf-hero-feature-icon svg,
.quf-why-icon i, .quf-why-icon svg,
.quf-course-icon i, .quf-course-icon svg,
.quf-course-icon-lg i, .quf-course-icon-lg svg,
.quf-process-circle i, .quf-process-circle svg,
.quf-dua-icon i, .quf-dua-icon svg,
.quf-cta-icon i, .quf-cta-icon svg,
.quf-class-style-icon i, .quf-class-style-icon svg,
.quf-achievement-icon i, .quf-achievement-icon svg{
	display:block !important; line-height:1 !important; vertical-align:middle !important; flex-shrink:0;
}
svg.svg-inline--fa{ vertical-align:middle; }

/* Force icons inside our color-controlled icon wrappers to always use the
   wrapper's text color, even if a specific icon variant (e.g. a duotone or
   two-tone style picked in the icon library) ships baked-in accent colors. */
.quf-hero-feature-icon, .quf-hero-feature-icon *,
.quf-why-icon, .quf-why-icon *,
.quf-cta-icon, .quf-cta-icon *,
.quf-course-icon, .quf-course-icon *,
.quf-process-circle, .quf-process-circle *,
.quf-dua-icon, .quf-dua-icon *,
.quf-contact-row, .quf-contact-row *,
.quf-class-style-icon, .quf-class-style-icon *,
.quf-achievement-icon, .quf-achievement-icon *{
	--fa-primary-color:currentColor !important; --fa-secondary-color:currentColor !important;
	--fa-primary-opacity:1 !important; --fa-secondary-opacity:1 !important;
	fill:currentColor !important;
}
/* ============================================================ */

/* ---------- Icon hover animations (used by Hero Slider & Why Choose widgets) ---------- */
@keyframes quf-icon-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }
@keyframes quf-icon-bounce{ 0%,100%{ transform:translateY(0); } 30%{ transform:translateY(-8px); } 60%{ transform:translateY(0); } 80%{ transform:translateY(-3px); } }
@keyframes quf-icon-rotate{ 0%{ transform:rotate(0); } 100%{ transform:rotate(360deg); } }
@keyframes quf-icon-shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-4px); } 40%{ transform:translateX(4px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }
@media (max-width: 991px){
	.quf-hero-grid{ grid-template-columns:1fr; }
	.quf-hero-copy h1{ font-size:34px; }
	.quf-hero-media img{ height:260px; }
	.quf-why-grid{ grid-template-columns:repeat(2,1fr); }
	.quf-pricing-grid{ grid-template-columns:1fr; }
	.quf-pricing-featured{ transform:none; }
	.quf-footer-grid{ grid-template-columns:1fr 1fr; }
	.quf-blog-layout, .quf-contact-layout{ grid-template-columns:1fr; }
	.quf-teachers-grid-archive{ grid-template-columns:repeat(2,1fr); }
	.quf-process-track{ flex-wrap:wrap; }
	.quf-process-track::before{ display:none; }
	.quf-process-track::after{ display:none; }
	.quf-process-step{ flex:0 0 45%; margin-bottom:24px; }
	.quf-weekend-offer{ padding:24px; }
}

@media (max-width: 767px){
	.quf-menu-toggle{ display:block; }
	.quf-primary-nav{
		position:fixed; top:78px; left:0; right:0; background:#fff; flex-direction:column;
		padding:20px; box-shadow:0 10px 20px rgba(0,0,0,.08); transform:translateY(-150%); transition:.3s; z-index:99;
	}
	.quf-primary-nav.quf-nav-open{ transform:translateY(0); }
	.quf-menu{ flex-direction:column; gap:14px; }
	.quf-lang-switch, .quf-login-link{ display:none; }
	.quf-why-grid{ grid-template-columns:1fr 1fr; }
	.quf-hero-features{ flex-wrap:wrap; gap:16px; }
	.quf-footer-grid{ grid-template-columns:1fr; }
	.quf-teachers-grid-archive{ grid-template-columns:1fr; }
	.quf-cta-inner{ flex-direction:column; text-align:center; }
	.quf-weekend-offer{ flex-direction:column; align-items:flex-start; text-align:left; }
	.quf-weekend-offer-cta{ width:100%; justify-content:space-between; }
	.quf-day-tab{ min-width:52px; padding:10px 14px; font-size:12.5px; }
	.quf-schedule-grid{ grid-template-columns:1fr; }

	/* Header: give the logo the room it needs by shrinking the Enroll Now
	   button to fit comfortably next to the hamburger menu instead of
	   crowding/wrapping the header on narrow screens. */
	.quf-header-actions{ gap:8px; }
	.quf-header-actions .quf-btn-sm{ padding:7px 10px; font-size:12px; }
	.quf-header-actions .quf-btn-sm i{ font-size:11px; }
}
@media (max-width: 400px){
	/* On very small phones, drop to icon-only so the button never pushes
	   the logo or menu button off-balance. */
	.quf-header-actions .quf-btn-sm{ padding:8px; }
	.quf-header-actions .quf-btn-sm span.quf-btn-label{ display:none; }
}

/* ---------- FAQs ---------- */
.quf-faq{ padding:60px 0; }
.quf-faq-list{ display:flex; flex-direction:column; gap:14px; }
.quf-faq-item{
	background:#fff; border:1px solid var(--quf-border); border-radius:var(--radius);
	overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease;
}
.quf-faq-item.quf-faq-open{ box-shadow:var(--shadow); }
.quf-faq-question{
	width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
	background:none; border:0; cursor:pointer; padding:18px 22px; text-align:left; font-family:inherit;
	color:var(--quf-dark); font-size:15px; font-weight:600;
}
.quf-faq-question-row{ display:flex; align-items:center; gap:12px; flex:1; }
.quf-faq-q-icon{ display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.quf-faq-question-text{ flex:1; }
.quf-faq-toggle{ position:relative; width:18px; height:18px; flex-shrink:0; }
.quf-faq-toggle::before, .quf-faq-toggle::after{
	content:''; position:absolute; top:50%; left:50%; background:currentColor;
	transform:translate(-50%,-50%); transition:transform .25s ease, opacity .25s ease;
}
.quf-faq-toggle::before{ width:14px; height:2px; }
.quf-faq-toggle::after{ width:2px; height:14px; }
.quf-faq-item.quf-faq-open .quf-faq-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.quf-faq-answer-wrap{ padding:0 22px 20px 22px; }
.quf-faq-answer{ font-size:14px; line-height:1.75; }
.quf-faq-answer p:first-child{ margin-top:0; }
.quf-faq-answer p:last-child{ margin-bottom:0; }