/* ==========================================================================
   QLessons — Premium Home Page Theme (Arabic / RTL)
   Layered on top of the existing wm-* template; does not replace it.
   All rules are scoped to ql-* wrapper classes added around existing markup.
   ========================================================================== */

:root {
    --ql-primary: #7a1f3d;
    --ql-primary-dark: #5c1730;
    --ql-secondary: #c98fa0;
    --ql-bg: #faf3e9;
    --ql-surface: #ffffff;
    --ql-text: #2b232a;
    --ql-text-muted: #6f6570;
    --ql-border: rgba(122, 31, 61, 0.12);
    --ql-shadow-sm: 0 4px 16px rgba(43, 35, 42, 0.08);
    --ql-shadow-md: 0 12px 32px rgba(43, 35, 42, 0.12);
    --ql-radius: 18px;
    --ql-radius-sm: 12px;
    --ql-font-display: "El Messiri", "Cairo", sans-serif;
    --ql-font-body: "Cairo", "El Messiri", sans-serif;
    --ql-h1: clamp(2rem, 4vw + 1rem, 3.4rem);
    --ql-h2: clamp(1.5rem, 2vw + 1rem, 2.2rem);
    --ql-body: 1rem;
    --ql-transition: 220ms ease;
}

/* ---------------- Cross-browser normalization ---------------- */
/* Applied site-wide (this file loads on every page via the shared
   MasterPage) so Chrome/Firefox/Edge compute the same box model, list
   spacing, form-control rendering, and text rendering everywhere the
   ql-* components below are used - not scoped to a class, since an
   unscoped reset needs to cover every element for width/padding math to
   agree between browsers. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Chrome and Firefox ship different default margin/padding and marker
   layout for lists; the theme relies on bare <ul><li> in several places
   (nav, mega-menu, footer icons, account links) without its own reset. */
.wm-strip-options,
.wm-megalist,
.wm-footer-icons,
.navbar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Native <input>/<button> elements (the newsletter subscribe form) inherit
   the browser's own form-control chrome by default - font, height, border
   radius, and appearance all differ between Chrome and Firefox unless
   explicitly reset here. */
input,
button,
input[type="submit"],
input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-family: inherit;
    line-height: normal;
    border-radius: 0;
}

/* Firefox and Chrome apply slightly different subpixel text rendering by
   default, which reads as a small font-weight difference at small sizes. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ---------------- Site-wide educational watermark ---------------- */
/* Loaded from the shared MasterPage, so this applies identically to every
   page (not just the home page). Sits fixed behind the whole page - it does
   not scroll with the content. Sections that used to paint an opaque
   --ql-bg over their full area (hero, subjects, teachers/students) are made
   transparent below so the same watermark shows through continuously from
   top to bottom instead of being hidden section by section. Card surfaces
   and the dark footer keep their own opaque backgrounds for legibility. */

.wm-main-wrapper {
    background: var(--ql-bg);
}

/* Same technique as the reference photo: one soft corner bleed, heavily
   faded into the plain cream color - not a full-bleed or blurred photo.
   Scoped to .wm-main-content (subjects through students, i.e. everything
   below the hero slider up to the footer) - the hero has its own slides and
   the footer has its own dark background, so neither should show this. */
.wm-main-content {
    position: relative;
    background-color: var(--ql-bg) !important;
    background-image:
        linear-gradient(rgba(250, 243, 233, 0.9), rgba(250, 243, 233, 0.9)),
        url("../images/site-bg-education.jpg") !important;
    background-position: top right !important;
    background-size: 640px auto !important;
}

/* .wm-main-content and the section wrappers inside it are float: left with
   no clearfix in the base theme (.wm-main-section, .wm-main-content {
   float: left }). An unclosed float container can render with collapsed
   height inconsistently between browser engines - this forces it to always
   contain its floated children the same way everywhere. */
.wm-main-content::after,
.ql-subjects::after,
.ql-people-section::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 767px) {
    .wm-main-content {
        background-size: 380px auto !important;
    }
}

/* ---------------- Header ---------------- */

.ql-header-wrap {
    background: var(--ql-surface);
    box-shadow: var(--ql-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow var(--ql-transition), background var(--ql-transition);
}

.ql-header-wrap.ql-scrolled {
    box-shadow: var(--ql-shadow-md);
}

.ql-topstrip {
    background: linear-gradient(90deg, var(--ql-primary), var(--ql-primary-dark)) !important;
    padding: 6px 0;
    font-family: var(--ql-font-body);
}

.ql-topstrip .wm-strip-options li a,
.ql-topstrip .wm-strip-options li {
    font-size: 0.85rem;
}

/* Student/teacher login links - bigger, pill-style buttons instead of
   plain inline text, for a more professional look in the top strip. */
.ql-topstrip .wm-strip-options li a.fa-user-plus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem !important;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 7px 18px;
    transition: background var(--ql-transition), border-color var(--ql-transition);
}

.ql-topstrip .wm-strip-options li a.fa-user-plus:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    text-decoration: none;
}

.ql-language a {
    color: #fff;
    opacity: 0.9;
    transition: opacity var(--ql-transition);
}

.ql-language a:hover {
    opacity: 1;
}

.ql-navrow {
    padding: 10px 0;
}

.ql-navrow .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.ql-logo img {
    max-height: 56px;
    width: auto;
    transition: transform var(--ql-transition);
}

.ql-navrow .navbar {
    margin-bottom: 0;
    border: none;
    background: transparent;
}

.ql-navrow .navbar-nav > li > a {
    font-family: var(--ql-font-body);
    font-weight: 600;
    color: var(--ql-text);
    padding: 10px 16px;
    border-radius: var(--ql-radius-sm);
    transition: background var(--ql-transition), color var(--ql-transition);
}

.ql-navrow .navbar-nav > li.active > a,
.ql-navrow .navbar-nav > li > a:hover {
    color: var(--ql-primary);
    background: rgba(122, 31, 61, 0.06);
}

/* ---------------- Header: tablet + mobile nav ----------------
   responsive.css (the legacy theme) drives the toggle/collapse behavior
   below 992px, but its off-canvas hack - a bare `.navbar-collapse{
   position:absolute; left:-100%; margin:10px 0 0 -60px }` - was written
   for a different header layout and was never given a `.wm-header-four`
   override (that selector exists in responsive.css only as an empty
   `{}`). On this header .navbar is an inline-block centered by
   `text-align:center`, so the panel lands at an arbitrary offset instead
   of under the toggle button, and can extend past the viewport edge.
   Reanchored here as a full-width panel docked to the header instead -
   more specific than responsive.css's bare selector, so it wins without
   needing !important. */
@media (max-width: 991px) {
    .ql-navrow .row {
        position: relative;
    }

    .wm-header-four .wm-right-section {
        display: block;
        width: 100%;
        text-align: right;
    }

    .wm-header-four .navbar {
        display: block;
        float: none;
        margin: 6px 0;
        text-align: right;
    }

    .wm-header-four .navbar-header {
        float: none;
        display: inline-block;
    }

    .wm-header-four .navbar-toggle {
        margin: 0;
        padding: 15px 16px;
    }

    .wm-header-four .navbar-toggle .icon-bar {
        width: 24px;
    }

    .wm-header-four .navbar-collapse {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        max-width: 100%;
        margin: 0;
        text-align: left;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    /* Touch-friendly tap targets for every link inside the open menu,
       including the "Subjects" mega-menu list (already flattened inline
       by responsive.css at this width). */
    .navbar-collapse .navbar-nav > li > a,
    .navbar-collapse .wm-megalist > li > a {
        min-height: 44px;
        padding: 12px 20px;
        display: flex;
        align-items: center;
    }

    /* Notification/bell dropdown in the top strip: default theme pushes it
       to `right:-40%` for this header variant, which can carry it past the
       right edge of narrow viewports. Docked to the strip's own edge and
       capped so it can never force page-wide horizontal scroll. */
    .wm-header-four .wm-cart-box {
        right: 0;
        max-width: calc(100vw - 32px);
    }
}

/* ---------------- Hero ---------------- */

.ql-hero {
    /* Transparent - the shared site-wide watermark on .wm-main-wrapper
       shows through here instead of a section-local background. */
    background: transparent;
    padding: 32px 0 16px;
    overflow: hidden;
    position: relative;
}

.ql-hero .container-fluid,
.ql-hero .wm-slider-nav {
    padding-inline: 40px !important;
}

@media (max-width: 767px) {
    .ql-hero .container-fluid,
    .ql-hero .wm-slider-nav {
        padding-inline: 16px !important;
    }
}

.ql-hero .wm-thumb-slider {
    border-radius: var(--ql-radius);
    overflow: hidden;
    box-shadow: var(--ql-shadow-md);
}

.ql-hero .wm-slider-for .for-slider-layer img {
    border-radius: var(--ql-radius);
    height: 500px !important;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .ql-hero .wm-slider-for .for-slider-layer img {
        height: 320px !important;
    }
}

/* A bottom-anchored full-width scrim grew taller than the slide whenever
   the caption text wrapped to multiple lines, colliding with the thumbnail
   row below. A floating glass card, vertically centered and width-capped,
   can never do that regardless of text length - the theme's own
   "top:50%; margin:-80px 0 0 -260px" fixed-pixel centering hack is reset
   below so this design fully replaces it. */
.ql-hero .for-slider-caption {
    position: absolute;
    top: 50% !important;
    inset-inline-start: 28px;
    inset-inline-end: auto !important;
    left: auto !important;
    right: auto !important;
    transform: translateY(-50%);
    margin: 0 !important;
    max-width: min(420px, 46%);
    text-align: start !important;
    background: rgba(43, 35, 42, 0.6) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 28px 30px !important;
    border-radius: var(--ql-radius) !important;
    box-shadow: var(--ql-shadow-md);
}

.ql-hero .for-slider-caption h2 {
    color: #fff !important;
    font-family: var(--ql-font-display) !important;
    font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    max-width: 100%;
}

.ql-hero .for-slider-caption h2::after {
    content: "";
    display: block;
    margin-top: 14px;
    width: 48px;
    height: 3px;
    border-radius: 3px;
    background: var(--ql-secondary);
}

@media (max-width: 767px) {
    .ql-hero .for-slider-caption {
        max-width: calc(100% - 32px);
        inset-inline-start: 16px;
        padding: 20px 22px !important;
    }
}

.ql-hero .wm-slider-nav .wm-thumb-image img {
    border-radius: 0;
    transition: transform var(--ql-transition), box-shadow var(--ql-transition);
}

.ql-hero .wm-slider-nav .for-slider-layer:hover img {
    transform: translateY(-4px);
    box-shadow: var(--ql-shadow-sm);
}

/* Empty ad-placeholder container (uc1:HomePage + the Readv repeater) between
   the hero and subjects sections - renders no content when no ads are
   configured, but Bootstrap's row/column padding still took up space. */
.ql-hero + .container {
    padding: 0;
    margin: 0;
}

.ql-hero + .container .row {
    margin: 0;
    min-height: 0;
}

.ql-hero + .container .col-md-12 {
    padding: 0;
    min-height: 0;
}

/* ---------------- Section heading ---------------- */
/* Flanking gradient lines with a small diamond accent instead of a plain
   text + underline treatment - shared by subjects/teachers/students so all
   three sections get the same more distinctive header design. */

.ql-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.ql-section-heading::before,
.ql-section-heading::after {
    content: "";
    flex: 1 1 0;
    max-width: 90px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ql-secondary));
}

.ql-section-heading::after {
    background: linear-gradient(to left, transparent, var(--ql-secondary));
}

.ql-subjects .wm-members-slider {
    padding: 0 35px !important;
}

.ql-section-heading h2 {
    font-family: var(--ql-font-display);
    font-size: var(--ql-h2);
    color: var(--ql-primary);
    position: relative;
    margin: 0;
    padding: 0 20px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ql-section-heading h2::before,
.ql-section-heading h2::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: var(--ql-secondary);
    transform: rotate(45deg);
}

/* ---------------- Subjects / bento grid ---------------- */

/* Same merge technique as teachers/students: the theme's own background
   photo blended with a matching semi-transparent overlay. */
.ql-subjects {
    background-color: rgba(242, 242, 242, .9);
    background-image:
        linear-gradient(rgba(242, 242, 242, .9), rgba(242, 242, 242, .9)),
        url("../extra-images/blog-grid-fullbg.jpg");
    background-size: cover;
    background-position: center;
    padding: 48px 0;
}

.ql-subjects .ql-people-grid .slick-arrow.slick-arrow-right, .ql-bento-grid .slick-arrow.slick-arrow-right{
    top: 40% !important;
}
.ql-subjects .ql-bento-grid .slick-arrow.slick-arrow-right::before , .ql-bento-grid .slick-arrow.slick-arrow-left::before{
    position: absolute !important;
    top: 15px !important;
}

/* The theme's own .wm-members-slider carries a fixed 84px/66px padding that
   left a large empty gap above the cards and threw off the arrow buttons'
   vertical centering - removed here so the slider hugs the cards directly. */
.ql-subjects .wm-members-slider {
    padding: 0;
}

/* Layout is owned by Slick (slidesToShow:4, see functions.js) — only the
   card contents are restyled here, never the slide/track/list display mode,
   or Slick's own inline sizing breaks. */
.ql-bento-grid .wm-members-slide-layer {
    padding: 0 10px;
}

/* Subject cards: a self-contained design (own class namespace, not the
   theme's figure/figcaption/.wm-members-caption trio) so nothing here can
   collide with the theme's own absolute-positioned caption/opacity rules.
   Title + price sit in an always-visible bottom bar rather than a
   vertically-centered hover overlay, so there's no way for the text block
   to overflow past the card's top/bottom edges. */
.ql-subject-card {
    position: relative;
    display: block;
    background: var(--ql-surface);
    border-radius: var(--ql-radius);
    overflow: hidden;
    box-shadow: var(--ql-shadow-sm);
    border: 2px solid transparent;
    transition: transform var(--ql-transition), box-shadow var(--ql-transition), border-color var(--ql-transition);
}

.ql-subject-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(92, 23, 48, 0.35);
    border-color: var(--ql-primary);
}

.ql-subject-card-link {
    display: block;
    position: relative;
}

/* Dims + tints the photo on hover so the white bar text and the ring border
   read as one cohesive "activated" state, rather than the image just
   sitting there unreactive while only the bottom bar changes. */
.ql-subject-card-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(122, 31, 61, 0.15);
    opacity: 0;
    transition: opacity var(--ql-transition);
}

.ql-subject-card:hover .ql-subject-card-link::before {
    opacity: 1;
}

.ql-subject-card-img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ql-subject-card:hover .ql-subject-card-img {
    transform: scale(1.12) rotate(-1deg);
}

.ql-subject-card-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 34px 16px 14px;
    text-align: center;
    background: linear-gradient(to top, rgba(92, 23, 48, 0.95) 0%, rgba(122, 31, 61, 0.75) 55%, rgba(122, 31, 61, 0) 100%);
    transition: padding-top var(--ql-transition), background var(--ql-transition);
}

.ql-subject-card:hover .ql-subject-card-bar {
    padding-top: 60px;
    background: linear-gradient(to top, rgba(92, 23, 48, 0.98) 0%, rgba(122, 31, 61, 0.9) 65%, rgba(122, 31, 61, 0) 100%);
}

.ql-subject-card-title {
    display: block;
    margin: 0 0 8px;
    font-family: var(--ql-font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: transform var(--ql-transition);
}

.ql-subject-card:hover .ql-subject-card-title {
    transform: translateY(-4px);
}

.ql-subject-card-price {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-family: var(--ql-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    transform: scale(1);
    transition: transform var(--ql-transition), background var(--ql-transition);
}

.ql-subject-card:hover .ql-subject-card-price {
    transform: scale(1.12);
    background: #fff;
    color: var(--ql-primary-dark);
}

/* ---------------- Teachers / Students cards ---------------- */

/* Restored to the theme's original technique: .wm-bloggrid-full's own
   background-image (blog-grid-fullbg.jpg) merged with .wm-whitelayer's
   semi-transparent rgba(242,242,242,.9) overlay - no override here. */

.ql-people-section {
    padding: 56px 0 84px;
}

/* Extra breathing room between slides on top of the theme's own 12px gutter
   (.wm-blog-grid-slider .wm-blog-grid-wrap { padding: 0 12px }), and room
   below the row for the new arrow buttons. */
.ql-people-grid.slick-slider {
    position: relative;
    padding-bottom: 8px;
}

/* The theme's own .wm-blog-grid-slider .wm-blog-grid-wrap rule adds
   padding: 0 12px directly on this card element, which insets the photo
   12px from the card edges on each side instead of letting it sit flush -
   overridden to 0 here so the image is truly full-width within the card.
   Card-to-card spacing still comes from the margin below, unaffected. */
.ql-people-grid .wm-blog-grid-wrap {
    background: var(--ql-surface);
    border-radius: var(--ql-radius);
    box-shadow: var(--ql-shadow-sm);
    overflow: hidden;
    transition: transform var(--ql-transition), box-shadow var(--ql-transition);
    position: relative;
    margin: 0 8px;
    padding: 0 !important;
    width: auto;
}

.ql-people-grid .wm-blog-grid-wrap:hover {
    transform: translateY(-6px);
    box-shadow: var(--ql-shadow-md);
}

/* Fixed, identical size for every card's photo regardless of the source
   image's own dimensions/orientation. */
.ql-people-grid figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    height: 260px;
}

.ql-people-grid figure > a {
    display: block;
    width: 100%;
    height: 100%;
}

.ql-people-grid figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-radius: 0;
    transition: transform var(--ql-transition);
}

.ql-people-grid .wm-blog-grid-wrap:hover figure img {
    transform: scale(1.06);
}

/* The template's hover-reveal "read more" caption was designed for a
   different interaction; it visually clashed with the new layout, so it is
   dropped in favor of the static caption card below the photo. */
.ql-people-grid figure figcaption {
    display: none;
}

/* Caption sits below the photo (not overlaid on it), with a circular icon
   badge straddling the photo/caption border - same spirit as the reference
   design (per-subject icons there aren't feasible from dynamic data, so one
   consistent badge is used instead of guessing an icon per subject). */
.ql-people-grid .wm-blog-grid-text {
    position: relative;
    padding: 34px 16px 20px;
    text-align: center;
}

.ql-people-grid .wm-blog-grid-text::before {
    content: "\f19d";
    font-family: FontAwesome;
    position: absolute;
    top: -20px;
    inset-inline: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ql-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: var(--ql-shadow-sm);
}

.ql-people-grid .wm-blog-grid-text h5 {
    margin: 0 0 4px;
}

.ql-people-grid .wm-blog-grid-text h5 a {
    font-family: var(--ql-font-body);
    color: var(--ql-text);
}

.ql-people-grid .wm-blog-grid-text h5:last-child a {
    color: var(--ql-primary) !important;
    font-size: 0.9rem !important;
    font-weight: 700;
}

/* Modern floating circular arrow buttons, replacing the theme's plain
   colored-icon arrows. Shared by teachers/students and subjects sliders so
   both use the same button design. */
.ql-people-grid .slick-arrow,
.ql-bento-grid .slick-arrow {
    top: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateY(-50%);
    width: 46px !important;
    height: 46px !important;
    border-radius: 50%;
    background: var(--ql-surface) !important;
    box-shadow: var(--ql-shadow-md);
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    color: var(--ql-primary) !important;
    z-index: 5;
    transition: background var(--ql-transition), color var(--ql-transition);
}

.ql-people-grid .slick-arrow:hover,
.ql-bento-grid .slick-arrow:hover {
    background: var(--ql-primary) !important;
    color: #fff !important;
}

/* The theme's flaticon glyph (plus its baked-in transform: scale(-1) flip
   for the left arrow) isn't visually centered within its own box. Hide it
   and draw a plain, perfectly centered chevron instead. */
.ql-people-grid .slick-arrow i,
.ql-bento-grid .slick-arrow i {
    display: none !important;
}

.ql-people-grid .slick-arrow::before,
.ql-bento-grid .slick-arrow::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
}

.ql-people-grid .slick-arrow.slick-arrow-left::before {
    transform: rotate(-135deg);
    margin-inline-start: 4px;
}

.ql-people-grid .slick-arrow.slick-arrow-right::before {
    transform: rotate(45deg);
    margin-inline-end: 4px;
}

/* Subjects section only: a rotated-border corner isn't geometrically
   symmetric in its own box, which kept reading as slightly off-center no
   matter how it was nudged. A mask-based SVG chevron has a true bounding
   box, so flex centering on the button holds it dead-center at any size. */
.ql-bento-grid .slick-arrow::before {
    width: 16px;
    height: 16px;
    border: none;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.ql-bento-grid .slick-arrow.slick-arrow-left::before {
    transform: none;
}

.ql-bento-grid .slick-arrow.slick-arrow-right::before {
    transform: scaleX(-1);
}

.ql-people-grid .slick-arrow.slick-arrow-left,
.ql-bento-grid .slick-arrow.slick-arrow-left {
    left: -14px !important;
    right: auto !important;
}

.ql-people-grid .slick-arrow.slick-arrow-right,
.ql-bento-grid .slick-arrow.slick-arrow-right {
    right: -14px !important;
    left: auto !important;
}

@media (max-width: 991px) {
    .ql-people-grid .slick-arrow.slick-arrow-left,
    .ql-bento-grid .slick-arrow.slick-arrow-left {
        left: 2px !important;
    }

    .ql-people-grid .slick-arrow.slick-arrow-right,
    .ql-bento-grid .slick-arrow.slick-arrow-right {
        right: 2px !important;
    }
}

/* ---------------- Footer ---------------- */

.ql-footer {
    background: linear-gradient(160deg, #23181c, #35222a);
    color: #e9e0e3;
    /* The theme's .footer-four sets padding: 70px 0 0, leaving a large
       empty gap above the nav links row for what is just single-line text. */
    padding-top: 28px !important;
}

/* Force the same edge alignment as the link lists below it (e.g. "الشروط
   والأحكام") - float/flex differences between the newsletter-form column
   and the plain-links column left the two titles visually offset from
   their own column's content. */
.ql-footer .wm-footer-widget-title {
    text-align: start !important;
}

.ql-footer .wm-footer-widget-title h2 {
    margin: 0 0 6px;
    font-family: var(--ql-font-display);
    color: #fff;
    font-size: 1.1rem;
    text-align: start !important;
}

.ql-footer a {
    color: #cbb9c0;
    transition: color var(--ql-transition);
}

.ql-footer a:hover {
    color: #fff;
}

.ql-footer input[type="text"] {
    border-radius: var(--ql-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding: 10px 14px;
    width: 100%;
    margin-bottom: 10px;
}

.ql-footer input[type="submit"] {
    background: var(--ql-primary);
    color: #fff;
    border: none;
    border-radius: var(--ql-radius-sm);
    padding: 10px 20px;
    transition: background var(--ql-transition);
}

.ql-footer input[type="submit"]:hover {
    background: var(--ql-primary-dark);
}

/* Newsletter + account + social columns - clean list styling (the theme's
   bare <ul><li> was rendering default browser bullets), an inline
   pill-shaped subscribe form, and a subtle divider between columns. */
.ql-footer .wm-newslatter-section {
    padding-inline-end: 24px;
}

.ql-footer .wm-newslatter-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Belt-and-suspenders: guarantee no marker renders in any browser/list
   nesting in the footer, regardless of list-style inheritance edge cases. */
.ql-footer ul,
.ql-footer ul li {
    list-style: none !important;
    list-style-type: none !important;
}

.ql-footer ul li::marker {
    content: none !important;
}

.ql-footer .wm-newslatter-section ul li {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ql-footer .wm-newslatter-section ul li:last-child {
    border-bottom: none;
}

.ql-footer .wm-newslatter-section ul li a {
    font-size: 0.88rem;
    line-height: 1.5;
}

/* The newsletter inputs sit directly in .wm-newslatter-section (no <form>
   wrapper) - :has() targets just that variant so the title heading stays on
   its own line while the input+button flow together in a row below it. */
.ql-footer .wm-newslatter-section:has(input[type="text"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ql-footer .wm-newslatter-section:has(input[type="text"]) .wm-footer-widget-title {
    flex: 0 0 100%;
}

.ql-footer .wm-newslatter-section input[type="text"] {
    margin-bottom: 0;
    flex: 9 0 0;
    min-width: 0;
    width: auto;
    height: 48px;
    box-sizing: border-box;
}

.ql-footer .wm-newslatter-section input[type="submit"] {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    height: 48px;
    box-sizing: border-box;
    padding-inline: 14px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .col-md-3 > .wm-newslatter-section,
    .col-md-5 > .wm-newslatter-section {
        border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Uniform, modern social link tiles (Facebook/Twitter/Spotify/QLessonBeat) -
   replacing the theme's plain bordered boxes (fixed padding only, so a
   longer label like "QLESSONBEAT" wrapped and grew taller than the rest). */
.ql-footer .wm-footer-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* The QLessonbeat <li> carries an inline style="width: 50%" in the markup,
   which beats a plain stylesheet rule and breaks the grid's equal sizing -
   !important is needed here to override it. */
.ql-footer .wm-footer-icons li {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}

.ql-footer .wm-footer-icons li a {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ql-radius-sm);
    background: rgba(255, 255, 255, 0.05);
    color: #e9e0e3;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--ql-transition), border-color var(--ql-transition), color var(--ql-transition);
}

.ql-footer .wm-footer-icons li a i {
    margin-inline-end: 8px;
    font-size: 15px;
    flex-shrink: 0;
}

.ql-footer .wm-footer-icons li:hover a {
    background: var(--ql-primary);
    border-color: var(--ql-primary);
    color: #fff;
}

/* Browser default focus outlines render outside the box, making whichever
   tile has keyboard/click focus look bigger than the rest. Keep a visible
   focus indicator but draw it inset so every tile stays the same size. */
.ql-footer .wm-footer-icons li a:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ql-secondary);
}

.ql-footer .socsoc .fa {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: background var(--ql-transition), transform var(--ql-transition);
}

.ql-footer .socsoc .fa:hover {
    background: var(--ql-primary);
    transform: translateY(-3px);
}

@media (max-width: 767px) {
    .ql-footer .row > div {
        margin-bottom: 24px;
    }
}

/* ---------------- Preloader (opening book) ---------------- */
/* Replaces the theme's generic pulsing-bars loader with an animation that
   matches the app - two pages swinging open/closed around a center spine.
   The outer .muscibeat-loading-section container (full-screen overlay,
   fade-out timing) is untouched since functions.js targets it directly. */

.muscibeat-loading-section {
    background-color: var(--ql-bg) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wraps the book + everything else so the brand word and the glow ring can
   be stacked under/around it without disturbing the book's own centering. */
.ql-loader-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.ql-loader-ring {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 150px;
    height: 150px;
    margin-left: -75px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--ql-primary);
    border-right-color: var(--ql-primary);
    opacity: 0.55;
    animation: ql-loader-spin 1.8s linear infinite;
}

.ql-loader-ring::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 2px dashed var(--ql-primary);
    opacity: 0.35;
    animation: ql-loader-spin 3.2s linear infinite reverse;
}

.ql-book-loader {
    position: relative;
    width: 96px;
    height: 64px;
    perspective: 400px;
}

.ql-book-loader-spine {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: var(--ql-primary-dark);
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 0 10px 1px rgba(122, 31, 61, 0.5);
}

.ql-book-loader-page {
    position: absolute;
    top: 0;
    width: 48px;
    height: 64px;
    background: var(--ql-surface);
    border: 2px solid var(--ql-primary);
    box-shadow: var(--ql-shadow-sm);
}

.ql-book-loader-page-1 {
    right: 50%;
    border-radius: 6px 0 0 6px;
    transform-origin: right center;
    animation: ql-book-page-left 1.6s ease-in-out infinite;
}

.ql-book-loader-page-2 {
    left: 50%;
    border-radius: 0 6px 6px 0;
    transform-origin: left center;
    animation: ql-book-page-right 1.6s ease-in-out infinite;
}

@keyframes ql-book-page-left {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(-35deg); }
}

@keyframes ql-book-page-right {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(35deg); }
}

@keyframes ql-loader-spin {
    to { transform: rotate(360deg); }
}

/* Three-dot "typing" pulse under the book, staggered so they bounce in
   sequence rather than all together - reads as active progress rather
   than a static logo. */
.ql-loader-dots {
    display: flex;
    gap: 8px;
}

.ql-loader-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ql-primary);
    animation: ql-loader-dot 1.2s ease-in-out infinite both;
}

.ql-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.ql-loader-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ql-loader-dot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ql-loader-ring,
    .ql-loader-ring::before,
    .ql-book-loader-page-1,
    .ql-book-loader-page-2,
    .ql-loader-dots span {
        animation: none !important;
    }
}