/* Shared redesign styles (home, about, courses, contact, projects). All classes are prefixed "qh-" so other pages are unaffected. */
:root {
    --qh-blue: #004AAD;
    --qh-navy: #012a63;
    --qh-deep: #01214d;
    --qh-gold: #c8a24a;
    --qh-cream: #faf7f0;
    --qh-soft: #f3f6fb;
    --qh-text: #4a5568;
    --qh-radius: 18px;
    --qh-shadow: 0 10px 30px rgba(1, 42, 99, .08);
    --qh-shadow-lg: 0 18px 45px rgba(1, 42, 99, .16);
}

html { scroll-behavior: smooth; }
.qh-home h1, .qh-home h2, .qh-home h3 { color: var(--qh-navy); letter-spacing: -.01em; }
.qh-home p { color: var(--qh-text); line-height: 1.75; }

/* ---------- Section headings ---------- */
.qh-section { padding: 90px 0; }
.qh-section--soft { background: var(--qh-soft); }
.qh-section--cream { background: var(--qh-cream); }
.qh-eyebrow {
    display: inline-block;
    font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--qh-blue);
    background: rgba(0, 74, 173, .08);
    padding: 6px 14px; border-radius: 50px; margin-bottom: 14px;
}
.qh-eyebrow--gold { color: #8a6d1f; background: rgba(200, 162, 74, .16); }
.qh-heading { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; margin-bottom: 12px; }
.qh-heading + p { max-width: 620px; margin-left: auto; margin-right: auto; }
.qh-divider { width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--qh-blue), var(--qh-gold)); margin: 16px auto 18px; }

/* ---------- Hero ---------- */
.qh-hero {
    position: relative; overflow: hidden; color: #fff;
    min-height: 640px; display: flex; align-items: center;
    padding: 110px 0 150px;
    background: var(--qh-deep);
}
.qh-hero__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.04);
}
.qh-hero__overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(1, 33, 77, .94) 0%, rgba(1, 42, 99, .82) 45%, rgba(1, 42, 99, .35) 100%);
}
.qh-hero__pattern {
    position: absolute; inset: 0; opacity: .07; pointer-events: none;
    background-image:
        radial-gradient(circle at 25% 25%, #fff 2px, transparent 2.5px),
        radial-gradient(circle at 75% 75%, #fff 2px, transparent 2.5px);
    background-size: 44px 44px;
}
.qh-hero .container { position: relative; z-index: 2; }
.qh-bismillah {
    font-family: 'Amiri', 'Traditional Arabic', serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--qh-gold) !important; margin-bottom: 14px; line-height: 1.5;
}
.qh-hero h1 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 3.9rem); font-weight: 700; line-height: 1.12; margin-bottom: 22px; }
.qh-hero h1 span { color: var(--qh-gold); }
.qh-hero__lead { color: rgba(255, 255, 255, .88) !important; font-size: 1.2rem; max-width: 560px; margin-bottom: 32px; }
.qh-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px; border-radius: 50px; font-weight: 600; text-decoration: none;
    transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}
.qh-btn:hover { transform: translateY(-2px); }
.qh-btn--gold { background: var(--qh-gold); color: #1d1600; box-shadow: 0 8px 22px rgba(200, 162, 74, .35); }
.qh-btn--gold:hover { background: #d8b45a; color: #1d1600; }
.qh-btn--ghost { border: 2px solid rgba(255, 255, 255, .7); color: #fff; }
.qh-btn--ghost:hover { background: #fff; color: var(--qh-navy); }
.qh-btn--blue { background: var(--qh-blue); color: #fff; box-shadow: 0 8px 22px rgba(0, 74, 173, .28); }
.qh-btn--blue:hover { background: #003781; color: #fff; }

/* ---------- Highlights strip (overlaps hero) ---------- */
.qh-strip { margin-top: -70px; position: relative; z-index: 5; }
.qh-strip__item {
    background: #fff; border-radius: var(--qh-radius); box-shadow: var(--qh-shadow-lg);
    padding: 24px 22px; height: 100%; display: flex; align-items: center; gap: 16px;
}
.qh-icon {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: var(--qh-blue); background: rgba(0, 74, 173, .09);
}
.qh-strip__item h3 { font-size: 1.02rem; margin: 0; font-weight: 600; }
.qh-strip__item p { margin: 2px 0 0; font-size: .86rem; line-height: 1.4; }

/* ---------- Courses ---------- */
.qh-course {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border-radius: var(--qh-radius); overflow: hidden;
    box-shadow: var(--qh-shadow); text-decoration: none; color: inherit;
    transition: transform .3s, box-shadow .3s;
}
.qh-course:hover { transform: translateY(-6px); box-shadow: var(--qh-shadow-lg); }
.qh-course__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--qh-soft); }
.qh-course__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.qh-course:hover .qh-course__img img { transform: scale(1.06); }
.qh-course__num {
    position: absolute; top: 14px; left: 14px;
    background: rgba(1, 42, 99, .85); color: #fff; font-size: .78rem; font-weight: 600;
    padding: 4px 12px; border-radius: 50px; backdrop-filter: blur(4px);
}
.qh-course__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.qh-course__body h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 10px; }
.qh-course__body p { font-size: .95rem; margin-bottom: 18px; flex: 1; }
.qh-more { color: var(--qh-blue); font-weight: 600; font-size: .92rem; }
.qh-more i { transition: transform .25s; margin-left: 6px; }
.qh-course:hover .qh-more i { transform: translateX(5px); }

/* ---------- About ---------- */
.qh-about__media { position: relative; padding: 0 0 70px 40px; }
.qh-about__main { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 28px; box-shadow: var(--qh-shadow-lg); }
.qh-about__sub {
    position: absolute; width: 46%; aspect-ratio: 1; object-fit: cover;
    border-radius: 22px; border: 6px solid #fff; box-shadow: var(--qh-shadow-lg);
}
.qh-about__sub--a { left: 0; bottom: 0; }
.qh-about__sub--b { right: -10px; bottom: 30px; width: 36%; }
.qh-about__ring {
    position: absolute; top: -18px; left: 14px; width: 120px; height: 120px; border-radius: 50%;
    border: 3px dashed var(--qh-gold); opacity: .7; z-index: -1;
}
.qh-checks { list-style: none; padding: 0; margin: 22px 0 28px; }
.qh-checks li { display: flex; gap: 12px; margin-bottom: 12px; color: var(--qh-text); }
.qh-checks i { color: var(--qh-blue); margin-top: 5px; }

/* ---------- Steps ---------- */
.qh-step { text-align: center; padding: 10px 24px; position: relative; }
.qh-step__num {
    width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--qh-blue); font-size: 1.6rem; font-weight: 700;
    border: 2px solid rgba(0, 74, 173, .15); box-shadow: var(--qh-shadow);
}
.qh-step h3 { font-size: 1.2rem; font-weight: 700; }
@media (min-width: 992px) {
    .qh-steps .col-lg-4:not(:last-child) .qh-step::after {
        content: ""; position: absolute; top: 36px; left: calc(50% + 56px); width: calc(100% - 112px);
        border-top: 2px dashed rgba(0, 74, 173, .25);
    }
}

/* ---------- Become a teacher ---------- */
.qh-cta {
    position: relative; overflow: hidden; border-radius: 28px; color: #fff;
    background: linear-gradient(120deg, var(--qh-deep), var(--qh-blue));
    box-shadow: var(--qh-shadow-lg);
}
.qh-cta__img { height: 100%; min-height: 320px; width: 100%; object-fit: cover; display: block; }
.qh-cta__body { padding: 56px 48px; }
.qh-cta h2 { color: #fff; }
.qh-cta p { color: rgba(255, 255, 255, .86) !important; }

/* ---------- Teachers ---------- */
.qh-teacher {
    display: block; height: 100%; text-decoration: none; background: #fff; border-radius: var(--qh-radius);
    overflow: hidden; box-shadow: var(--qh-shadow); transition: transform .3s, box-shadow .3s;
}
.qh-teacher:hover { transform: translateY(-6px); box-shadow: var(--qh-shadow-lg); }
.qh-teacher__photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--qh-soft); }
.qh-teacher__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .6s; }
.qh-teacher:hover .qh-teacher__photo img { transform: scale(1.05); }
.qh-teacher__body { padding: 22px 24px 26px; text-align: center; }
.qh-teacher__body h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.qh-teacher__body p {
    font-size: .92rem; margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Appointment ---------- */
.qh-form-card { background: #fff; border-radius: 28px; overflow: hidden; box-shadow: var(--qh-shadow-lg); }
.qh-form-card .form-control { background: var(--qh-soft); border: 1px solid transparent; border-radius: 12px; }
.qh-form-card .form-control:focus { background: #fff; border-color: var(--qh-blue); box-shadow: 0 0 0 .2rem rgba(0, 74, 173, .12); }
.qh-form-card__img { height: 100%; min-height: 360px; width: 100%; object-fit: cover; display: block; }

/* ---------- Testimonials ---------- */
.qh-quote {
    background: #fff; border-radius: var(--qh-radius); padding: 34px 32px 28px;
    box-shadow: var(--qh-shadow); height: 100%; position: relative;
}
.qh-quote::before {
    content: "\201C"; position: absolute; top: 4px; right: 24px;
    font-family: Georgia, serif; font-size: 6rem; line-height: 1; color: rgba(0, 74, 173, .1);
}
.qh-quote p { font-size: 1.02rem; position: relative; }
.qh-quote__who { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #eef1f6; }
.qh-quote__who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.qh-quote__who h3 { font-size: 1rem; margin: 0; font-weight: 700; }
.qh-quote__who span { font-size: .86rem; color: #7b8794; }
.qh-home .testimonial-carousel { padding-left: 0; padding-right: 0; position: relative; }
.qh-home .testimonial-carousel .owl-stage { display: flex; }
.qh-home .testimonial-carousel .owl-item { display: flex; padding: 8px 4px 24px; }
.qh-home .testimonial-carousel .owl-item > .qh-quote { width: 100%; }
.qh-home .testimonial-carousel .owl-item .qh-quote__who img { width: 56px; height: 56px; flex: 0 0 56px; display: block; border-radius: 50%; object-fit: cover; }
.qh-home .testimonial-carousel .owl-nav {
    position: static; transform: none; height: auto; width: auto;
    display: flex; justify-content: center; gap: 12px; margin-top: 8px;
}
.qh-home .testimonial-carousel .owl-nav .owl-prev,
.qh-home .testimonial-carousel .owl-nav .owl-next {
    width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--qh-blue);
    box-shadow: var(--qh-shadow); transition: .25s; font-size: 18px;
}
.qh-home .testimonial-carousel .owl-nav .owl-prev:hover,
.qh-home .testimonial-carousel .owl-nav .owl-next:hover { background: var(--qh-blue); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .qh-section { padding: 64px 0; }
    .qh-hero { min-height: 0; padding: 80px 0 120px; }
    .qh-hero__overlay { background: linear-gradient(180deg, rgba(1, 33, 77, .92), rgba(1, 42, 99, .85)); }
    .qh-about__media { padding-left: 0; margin-bottom: 20px; }
    .qh-cta__body { padding: 36px 26px; }
}
@media (max-width: 575.98px) {
    .qh-btn { width: 100%; justify-content: center; }
    .qh-strip { margin-top: -50px; }
    .qh-about__sub--b { display: none; }
    .qh-about__sub--a { width: 52%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .qh-course, .qh-teacher, .qh-btn, .qh-course__img img, .qh-teacher__photo img { transition: none; }
}

/* ---------- Inner pages ---------- */
.qh-pagehero {
    position: relative; overflow: hidden; text-align: center; color: #fff;
    padding: 76px 0 84px;
    background: linear-gradient(120deg, var(--qh-deep), var(--qh-blue));
}
.qh-pagehero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; margin: 10px 0 12px; }
.qh-pagehero p { color: rgba(255, 255, 255, .85) !important; max-width: 680px; margin: 0 auto; font-size: 1.08rem; }
.qh-crumbs { font-size: .88rem; color: rgba(255, 255, 255, .75); display: flex; justify-content: center; align-items: center; gap: 10px; }
.qh-crumbs a { color: var(--qh-gold); text-decoration: none; }

/* Restyle older markup used on about / course / projects pages */
.qh-inner .container-xxl { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.qh-inner .container-xxl.py-5 { padding-top: 64px !important; padding-bottom: 24px !important; }
.qh-inner p { color: var(--qh-text); line-height: 1.85; font-size: 1.02rem; }
.qh-inner .about-img img.rounded-circle,
.qh-inner img.rounded-circle.w-75 {
    width: 100% !important; border-radius: 24px !important; padding: 0 !important; background: none !important;
    aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--qh-shadow-lg);
}
.qh-inner .container > .bg-light.rounded, .qh-inner .container-xxl .bg-light.rounded:not(.pt-5) {
    background: var(--qh-cream) !important; border-radius: 28px !important; box-shadow: var(--qh-shadow); padding: 18px;
}
.qh-inner .bg-light.rounded.pt-5 { background: var(--qh-soft) !important; border-radius: 18px !important; padding-top: 32px !important; }
.qh-inner .bg-light.rounded.pt-5 h3 { color: var(--qh-navy); font-weight: 700; }
.qh-inner .btn-primary.rounded-pill { padding: 12px 28px !important; }
.qh-inner .img-container, .qh-inner .img-container-2 { border-radius: 16px; box-shadow: var(--qh-shadow); margin-bottom: 14px; }
.qh-inner .img-container { height: 210px; }
@media (max-width: 575.98px) { .qh-inner .container-xxl { padding-left: 16px; padding-right: 16px; } }
.qh-inner section.pb-5 { padding-top: 56px; }

/* Keep the shared footer readable (page-level "p" colour must not leak into it) */
.qh-home .footer p, .qh-inner .footer p { color: rgba(255, 255, 255, .86); font-size: 1rem; line-height: 1.6; }
.qh-home .footer h3 { color: #fff; }