/* =========================================================
   Tilawa Academy — Hero Reference Layout
   ========================================================= */

.tilawa-homepage {
    --tilawa-hero-primary: #00a9b8;
    --tilawa-hero-blue: #158bce;
    --tilawa-hero-gold: #f5a800;
    --tilawa-hero-cream: #fbf8f2;
    --tilawa-hero-white: #ffffff;
    --tilawa-hero-dark: #244b60;
    --tilawa-hero-border: rgba(0, 169, 184, 0.22);

    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--tilawa-hero-cream);
    font-family:
        "Source Sans 3",
        "Segoe UI",
        "Tajawal",
        "Noto Sans Arabic",
        Arial,
        sans-serif;
}

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

.tilawa-homepage .tilawa-reference-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: calc(100vh - 85px);
    padding:
        clamp(28px, 4vw, 52px)
        16px
        clamp(105px, 14vw, 170px);

    background-color: var(--tilawa-hero-cream);
    background-image:
        linear-gradient(
            rgba(251, 248, 242, 0.35),
            rgba(251, 248, 242, 0.35)
        ),
        url("https://tilawaacademy.net/wp-content/uploads/2026/08/tilawa-academy-islamic-geometric-pattern.webp");

    background-repeat: repeat;
    background-position: center top;
    background-size: 520px auto;
}

/*
 * طبقة فاتحة تجعل الزخرفة هادئة ولا تنافس الصورة.
 */
.tilawa-homepage .tilawa-reference-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(251, 248, 242, 0.92) 0%,
            rgba(251, 248, 242, 0.43) 34%,
            rgba(251, 248, 242, 0.18) 70%,
            rgba(251, 248, 242, 0.54) 100%
        );
    content: "";
    pointer-events: none;
}

.tilawa-homepage .tilawa-reference-hero-container {
    position: relative;
    width: min(100%, 1240px);
    margin-inline: auto;
}

/*
 * نسبة الغلاف قريبة جدًا من الصورة المرجعية:
 * عرض كبير وارتفاع قصير متوازن.
 */
.tilawa-homepage .tilawa-reference-hero-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 2.72 / 1;
    min-height: 300px;
    max-height: 470px;
    overflow: hidden;

    border: 1px solid rgba(0, 169, 184, 0.12);
    border-radius: 46px 46px 14px 14px;
    background:
        linear-gradient(
            135deg,
            #f3eee6,
            #ffffff
        );

    box-shadow:
        0 11px 32px rgba(38, 78, 99, 0.08);
}

/*
 * صورة الغلاف التي سننشئها لاحقًا.
 */
.tilawa-homepage .tilawa-reference-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}

/*
 * تدرج خفيف فقط للحفاظ على وضوح الصورة.
 */
.tilawa-homepage .tilawa-reference-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03),
            transparent 45%,
            rgba(255, 255, 255, 0.02)
        );
    pointer-events: none;
}

/*
 * الشارة في منتصف أسفل الغلاف.
 * تقريبًا نصفها داخل الغلاف ونصفها خارجه.
 */
.tilawa-homepage .tilawa-reference-hero-badge {
    position: absolute;
    z-index: 5;
    right: 50%;
    bottom: 0;

    display: grid;
    width: clamp(118px, 12vw, 164px);
    height: clamp(118px, 12vw, 164px);
    place-items: center;
    overflow: hidden;

    border: 4px solid var(--tilawa-hero-primary);
    border-radius: 50%;
    background: var(--tilawa-hero-white);

    box-shadow:
        0 9px 24px rgba(34, 76, 98, 0.11);

    transform: translate(50%, 52%);
}

.tilawa-homepage .tilawa-reference-hero-badge::before {
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(0, 169, 184, 0.18);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.tilawa-homepage .tilawa-reference-hero-badge-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 88%;
    height: 88%;
    max-width: 88%;
    object-fit: contain;
}

/*
 * المساحة التي ستحتوي النص لاحقًا.
 * نتركها الآن فارغة لأننا نعمل على الغلاف فقط.
 */
.tilawa-homepage .tilawa-reference-hero-content-space {
    min-height: clamp(300px, 43vw, 570px);
}

/* الوضع الليلي بلون الهوية المطلوب */
html.dark-mode .tilawa-homepage,
html.dark-mode .tilawa-homepage .tilawa-reference-hero {
    background-color: #00a9b8;
}

html.dark-mode
.tilawa-homepage
.tilawa-reference-hero {
    background-image:
        linear-gradient(
            rgba(0, 169, 184, 0.4),
            rgba(0, 169, 184, 0.4)
        ),
        url("https://tilawaacademy.net/wp-content/uploads/2026/08/tilawa-academy-islamic-geometric-pattern.webp");
}

html.dark-mode
.tilawa-homepage
.tilawa-reference-hero::before {
    background: rgba(0, 169, 184, 0.36);
}

html.dark-mode
.tilawa-homepage
.tilawa-reference-hero-frame {
    border-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 900px) {
    .tilawa-homepage .tilawa-reference-hero {
        padding:
            24px
            12px
            105px;
    }

    .tilawa-homepage .tilawa-reference-hero-frame {
        aspect-ratio: 2.15 / 1;
        min-height: 270px;
        border-radius: 34px 34px 12px 12px;
    }

    .tilawa-homepage .tilawa-reference-hero-image {
        object-position: center;
    }

    .tilawa-homepage .tilawa-reference-hero-content-space {
        min-height: 330px;
    }
}

@media (max-width: 600px) {
    .tilawa-homepage .tilawa-reference-hero {
        padding:
            16px
            9px
            88px;

        background-size: 340px auto;
    }

    .tilawa-homepage .tilawa-reference-hero-container {
        width: 100%;
    }

    .tilawa-homepage .tilawa-reference-hero-frame {
        aspect-ratio: 1.55 / 1;
        min-height: 260px;
        max-height: 390px;
        border-radius: 25px 25px 9px 9px;
    }

    .tilawa-homepage .tilawa-reference-hero-image {
        object-position: 56% center;
    }

    .tilawa-homepage .tilawa-reference-hero-badge {
        width: 112px;
        height: 112px;
        border-width: 3px;
    }

    .tilawa-homepage .tilawa-reference-hero-content-space {
        min-height: 290px;
    }
}

@media (max-width: 380px) {
    .tilawa-homepage .tilawa-reference-hero-frame {
        min-height: 240px;
    }

    .tilawa-homepage .tilawa-reference-hero-badge {
        width: 102px;
        height: 102px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tilawa-homepage *,
    .tilawa-homepage *::before,
    .tilawa-homepage *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Tilawa Academy — Hero badge real logo */
.tilawa-homepage .tilawa-reference-hero-badge-image {
    width: 90% !important;
    height: 90% !important;
    max-width: 90% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 50% !important;
}

/* =========================================================
   Tilawa Academy — Badge attached directly to hero frame
   ========================================================= */

/*
 * وضع الغلاف والشارة في نفس مساحة Grid
 * حتى ترتبط الشارة بأسفل الغلاف، وليس بأسفل الصفحة.
 */
.tilawa-homepage .tilawa-reference-hero-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    position: relative !important;
}

.tilawa-homepage .tilawa-reference-hero-frame {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/*
 * الشارة في منتصف الحافة السفلية للغلاف مباشرة.
 */
.tilawa-homepage .tilawa-reference-hero-badge {
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;

    align-self: end !important;
    justify-self: center !important;

    width: 154px !important;
    height: 154px !important;
    margin: 0 !important;

    border: 4px solid #00a9b8 !important;
    border-radius: 50% !important;
    background: #ffffff !important;

    box-shadow:
        0 10px 25px rgba(36, 75, 96, 0.13) !important;

    transform: translateY(50%) !important;
    z-index: 10 !important;
}

/*
 * تكبير اللوجو حتى يملأ الشارة بصورة متوازنة.
 */
.tilawa-homepage .tilawa-reference-hero-badge-image {
    display: block !important;
    width: 96% !important;
    height: 96% !important;
    max-width: none !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 50% !important;
    transform: scale(1.08) !important;
}

/*
 * إزالة المساحة الضخمة القديمة أسفل الغلاف،
 * وترك مساحة تكفي الجزء الخارجي من الشارة فقط.
 */
.tilawa-homepage .tilawa-reference-hero-content-space {
    grid-column: 1 !important;
    grid-row: 2 !important;

    min-height: 105px !important;
    height: 105px !important;
}

/*
 * منع قسم الغلاف من إضافة فراغ زائد.
 */
.tilawa-homepage .tilawa-reference-hero {
    min-height: auto !important;
    padding-bottom: 28px !important;
}

@media (max-width: 900px) {
    .tilawa-homepage .tilawa-reference-hero-badge {
        width: 132px !important;
        height: 132px !important;
        border-width: 4px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-content-space {
        min-height: 91px !important;
        height: 91px !important;
    }
}

@media (max-width: 600px) {
    .tilawa-homepage .tilawa-reference-hero-badge {
        width: 112px !important;
        height: 112px !important;
        border-width: 3px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-badge-image {
        width: 97% !important;
        height: 97% !important;
        transform: scale(1.09) !important;
    }

    .tilawa-homepage .tilawa-reference-hero-content-space {
        min-height: 78px !important;
        height: 78px !important;
    }
}

/* =========================================================
   Tilawa Academy — Remove outer logo frame and enlarge logo
   ========================================================= */

/* إزالة الفريم الخارجي المضاف حول اللوجو */
.tilawa-homepage .tilawa-reference-hero-badge {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 154px !important;
    height: 154px !important;
    padding: 0 !important;
}

/* إزالة الفريم الداخلي الإضافي */
.tilawa-homepage .tilawa-reference-hero-badge::before {
    display: none !important;
    content: none !important;
}

/* تكبير اللوجو نفسه */
.tilawa-homepage .tilawa-reference-hero-badge-image {
    width: 112% !important;
    height: 112% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: scale(1.12) !important;
    border-radius: 0 !important;
}

/* موبايل */
@media (max-width: 900px) {
    .tilawa-homepage .tilawa-reference-hero-badge {
        width: 132px !important;
        height: 132px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-badge-image {
        transform: scale(1.10) !important;
    }
}

@media (max-width: 600px) {
    .tilawa-homepage .tilawa-reference-hero-badge {
        width: 112px !important;
        height: 112px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-badge-image {
        width: 114% !important;
        height: 114% !important;
        transform: scale(1.08) !important;
    }
}

/* =========================================================
   Tilawa Academy — Three-word text over the hero
   ========================================================= */

.tilawa-homepage .tilawa-reference-hero-frame {
    position: relative !important;
}

.tilawa-homepage .tilawa-reference-hero-short-title {
    position: absolute;
    z-index: 5;

    top: 53%;
    right: 5.5%;

    width: 34%;
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family:
        "Source Sans 3",
        "Segoe UI",
        "Tajawal",
        "Noto Sans Arabic",
        Arial,
        sans-serif;

    font-size: clamp(26px, 3vw, 50px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-align: center;
    text-wrap: balance;

    text-shadow:
        0 2px 3px rgba(13, 48, 68, 0.72),
        0 7px 20px rgba(13, 48, 68, 0.36);

    transform: translateY(-50%);
    pointer-events: none;
}

.tilawa-homepage
.tilawa-reference-hero-short-title[dir="rtl"] {
    letter-spacing: 0;
    line-height: 1.35;
}

/* الحفاظ على نفس موضع الفكرة على الموبايل */
@media (max-width: 900px) {
    .tilawa-homepage .tilawa-reference-hero-short-title {
        top: 54%;
        right: 4%;
        width: 39%;
        font-size: clamp(22px, 4.5vw, 37px);
    }
}

@media (max-width: 600px) {
    .tilawa-homepage .tilawa-reference-hero-short-title {
        top: 53%;
        right: 3%;
        width: 43%;
        font-size: clamp(18px, 5.5vw, 28px);
        line-height: 1.16;
    }

    .tilawa-homepage
    .tilawa-reference-hero-short-title[dir="rtl"] {
        line-height: 1.3;
    }
}

@media (max-width: 380px) {
    .tilawa-homepage .tilawa-reference-hero-short-title {
        right: 2%;
        width: 46%;
        font-size: 18px;
    }
}

/* =========================================================
   Tilawa Academy — Seven-word visible H1
   النص موجود فعليًا داخل HTML ليظهر لمحركات البحث
   ========================================================= */

.tilawa-homepage .tilawa-reference-hero-short-title {
    position: absolute !important;
    z-index: 7 !important;

    top: 53% !important;
    right: 3.5% !important;
    left: auto !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 40% !important;
    max-width: 560px !important;
    margin: 0 !important;
    padding: 10px 14px !important;

    color: #ffffff !important;
    font-family:
        "Source Sans 3",
        "Segoe UI",
        "Tajawal",
        "Noto Sans Arabic",
        Arial,
        sans-serif !important;

    font-size: clamp(25px, 2.7vw, 45px) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;

    /* المحاذاة في الوسط في اللغات الثلاث */
    text-align: center !important;
    text-wrap: balance;

    text-shadow:
        0 2px 4px rgba(15, 47, 65, 0.85),
        0 8px 24px rgba(15, 47, 65, 0.45) !important;

    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

/* العربية */
.tilawa-homepage
.tilawa-reference-hero-short-title[dir="rtl"] {
    right: 3.5% !important;
    left: auto !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    line-height: 1.38 !important;
}

/* التابلت */
@media (max-width: 900px) {
    .tilawa-homepage .tilawa-reference-hero-short-title {
        top: 53% !important;
        right: 3% !important;
        width: 43% !important;
        padding: 8px !important;
        font-size: clamp(21px, 4vw, 34px) !important;
        text-align: center !important;
    }

    .tilawa-homepage
    .tilawa-reference-hero-short-title[dir="rtl"] {
        right: 3% !important;
        text-align: center !important;
    }
}

/* الموبايل: نفس موضع وتكوين الكمبيوتر */
@media (max-width: 600px) {
    .tilawa-homepage .tilawa-reference-hero-short-title {
        top: 52% !important;
        right: 2% !important;
        width: 46% !important;
        max-width: none !important;
        padding: 5px !important;
        font-size: clamp(16px, 5vw, 24px) !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .tilawa-homepage
    .tilawa-reference-hero-short-title[dir="rtl"] {
        right: 2% !important;
        left: auto !important;
        line-height: 1.34 !important;
        text-align: center !important;
    }
}

@media (max-width: 380px) {
    .tilawa-homepage .tilawa-reference-hero-short-title {
        right: 1% !important;
        width: 48% !important;
        font-size: 16px !important;
    }

    .tilawa-homepage
    .tilawa-reference-hero-short-title[dir="rtl"] {
        right: 1% !important;
    }
}

/* =========================================================
   Tilawa Academy — Put H1 at the exact centre of the hero
   ========================================================= */

.tilawa-homepage .tilawa-reference-hero-short-title {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;

    width: min(82%, 820px) !important;
    max-width: 820px !important;

    margin: 0 !important;
    padding: 12px 18px !important;

    text-align: center !important;

    transform: translate(-50%, -50%) !important;
}

/* تثبيت نفس المركز في العربية */
.tilawa-homepage
.tilawa-reference-hero-short-title[dir="rtl"] {
    top: 50% !important;
    right: auto !important;
    left: 50% !important;
    width: min(82%, 820px) !important;
    text-align: center !important;
    transform: translate(-50%, -50%) !important;
}

/* التابلت */
@media (max-width: 900px) {
    .tilawa-homepage .tilawa-reference-hero-short-title,
    .tilawa-homepage
    .tilawa-reference-hero-short-title[dir="rtl"] {
        top: 50% !important;
        right: auto !important;
        left: 50% !important;
        width: 84% !important;
        max-width: 720px !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
    }
}

/* الموبايل — نفس منتصف الغلاف تمامًا */
@media (max-width: 600px) {
    .tilawa-homepage .tilawa-reference-hero-short-title,
    .tilawa-homepage
    .tilawa-reference-hero-short-title[dir="rtl"] {
        top: 50% !important;
        right: auto !important;
        left: 50% !important;
        width: 88% !important;
        max-width: none !important;
        padding: 8px 10px !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
    }
}

@media (max-width: 380px) {
    .tilawa-homepage .tilawa-reference-hero-short-title,
    .tilawa-homepage
    .tilawa-reference-hero-short-title[dir="rtl"] {
        width: 90% !important;
    }
}

/* =========================================================
   Tilawa Academy — Better hero title style + soft dark effect
   ========================================================= */

/* تأكيد أن الغلاف يسمح بوضع طبقات فوق الصورة */
.tilawa-homepage .tilawa-reference-hero-frame {
    position: relative !important;
    overflow: hidden !important;
}

/* طبقة خفيفة جدًا فوق الصورة لتحسين ظهور النص */
.tilawa-homepage .tilawa-reference-hero-frame::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.10) 40%,
            rgba(0, 0, 0, 0.16) 100%
        ) !important;
}

/* النص نفسه */
.tilawa-homepage .tilawa-reference-hero-short-title {
    position: absolute !important;
    z-index: 7 !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(76%, 860px) !important;
    max-width: 860px !important;
    margin: 0 !important;
    padding: 18px 22px !important;

    color: #ffffff !important;
    font-family:
        "Segoe UI",
        "Tajawal",
        "Noto Sans Arabic",
        Arial,
        sans-serif !important;

    font-size: clamp(26px, 3.1vw, 46px) !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-wrap: balance !important;

    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.18) !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45) !important;

    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}

/* العربية */
.tilawa-homepage .tilawa-reference-hero-short-title[dir="rtl"] {
    left: 50% !important;
    right: auto !important;
    text-align: center !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    transform: translate(-50%, -50%) !important;
}

/* تابلت */
@media (max-width: 900px) {
    .tilawa-homepage .tilawa-reference-hero-short-title,
    .tilawa-homepage .tilawa-reference-hero-short-title[dir="rtl"] {
        width: 82% !important;
        max-width: 720px !important;
        padding: 14px 18px !important;
        font-size: clamp(22px, 4vw, 34px) !important;
    }
}

/* موبايل */
@media (max-width: 600px) {
    .tilawa-homepage .tilawa-reference-hero-short-title,
    .tilawa-homepage .tilawa-reference-hero-short-title[dir="rtl"] {
        width: 88% !important;
        max-width: none !important;
        padding: 10px 12px !important;
        font-size: clamp(18px, 5vw, 26px) !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 380px) {
    .tilawa-homepage .tilawa-reference-hero-short-title,
    .tilawa-homepage .tilawa-reference-hero-short-title[dir="rtl"] {
        width: 90% !important;
        font-size: 17px !important;
    }
}

/* TILAWA_PROFESSIONAL_HERO_TEXT_START */

/*
 * النص موجود فعليًا داخل HTML ويمكن لمحركات البحث قراءته.
 * الطبقة السوداء شفافة وخفيفة لتحسين الوضوح فقط.
 */

.tilawa-homepage .tilawa-reference-hero-frame {
    position: relative !important;
    isolation: isolate !important;
}

.tilawa-homepage .tilawa-reference-hero-image {
    position: relative !important;
    z-index: 1 !important;
}

.tilawa-homepage .tilawa-reference-hero-overlay {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.17) 50%,
            rgba(0, 0, 0, 0.08) 100%
        ) !important;

    pointer-events: none !important;
}

.tilawa-homepage .tilawa-reference-hero-text {
    position: absolute !important;
    z-index: 6 !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(86%, 930px) !important;
    margin: 0 !important;
    padding: 22px 28px !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;

    background: rgba(0, 0, 0, 0.30) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13) !important;

    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;

    text-align: center !important;
    transform: translate(-50%, -50%) !important;
}

.tilawa-homepage .tilawa-reference-hero-short-title {
    position: static !important;
    display: block !important;

    width: 100% !important;
    max-width: 880px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        "Tajawal",
        "Noto Sans Arabic",
        Arial,
        sans-serif !important;

    font-size: clamp(30px, 3.55vw, 54px) !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;

    text-align: center !important;
    text-wrap: balance !important;

    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important;

    transform: none !important;
}

.tilawa-homepage
.tilawa-reference-hero-text[dir="rtl"]
.tilawa-reference-hero-short-title {
    font-family:
        "Tajawal",
        "Noto Sans Arabic",
        "Segoe UI",
        Arial,
        sans-serif !important;

    line-height: 1.38 !important;
    letter-spacing: 0 !important;
}

.tilawa-homepage .tilawa-reference-hero-short-description {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    max-width: 760px !important;

    margin: 14px auto 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.94) !important;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        "Tajawal",
        "Noto Sans Arabic",
        Arial,
        sans-serif !important;

    font-size: clamp(15px, 1.45vw, 20px) !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;

    text-align: center !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35) !important;
}

.tilawa-homepage
.tilawa-reference-hero-text[dir="rtl"]
.tilawa-reference-hero-short-description {
    font-family:
        "Tajawal",
        "Noto Sans Arabic",
        "Segoe UI",
        Arial,
        sans-serif !important;

    line-height: 1.8 !important;
}

/* التابلت */
@media (max-width: 900px) {
    .tilawa-homepage .tilawa-reference-hero-text {
        width: 88% !important;
        padding: 18px 20px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-title {
        font-size: clamp(25px, 4.5vw, 40px) !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-description {
        margin-top: 11px !important;
        font-size: clamp(14px, 2vw, 18px) !important;
    }
}

/* الموبايل: نفس تكوين الكمبيوتر */
@media (max-width: 600px) {
    .tilawa-homepage .tilawa-reference-hero-text {
        top: 50% !important;
        left: 50% !important;

        width: 91% !important;
        padding: 14px 13px !important;

        border-radius: 10px !important;
        background: rgba(0, 0, 0, 0.34) !important;

        transform: translate(-50%, -50%) !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-title {
        font-size: clamp(21px, 6vw, 30px) !important;
        line-height: 1.22 !important;
    }

    .tilawa-homepage
    .tilawa-reference-hero-text[dir="rtl"]
    .tilawa-reference-hero-short-title {
        line-height: 1.42 !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-description {
        max-width: 100% !important;
        margin-top: 9px !important;

        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .tilawa-homepage
    .tilawa-reference-hero-text[dir="rtl"]
    .tilawa-reference-hero-short-description {
        line-height: 1.7 !important;
    }
}

@media (max-width: 380px) {
    .tilawa-homepage .tilawa-reference-hero-text {
        width: 93% !important;
        padding: 12px 10px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-title {
        font-size: 20px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-description {
        font-size: 13px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tilawa-homepage .tilawa-reference-hero-text,
    .tilawa-homepage .tilawa-reference-hero-short-title {
        transition: none !important;
    }
}

/* TILAWA_PROFESSIONAL_HERO_TEXT_END */

/* TILAWA_HERO_TEXT_REFINED_START */

/* =========================================================
   Tilawa Academy — Elegant hero text styling
   يحافظ على النص داخل HTML ويجعل العرض أنظف بكثير
   ========================================================= */

.tilawa-homepage .tilawa-reference-hero-frame {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* طبقة خفيفة جدًا على الصورة كلها لتحسين القراءة */
.tilawa-homepage .tilawa-reference-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.08) 45%,
            rgba(0, 0, 0, 0.10) 100%
        ) !important;
}

/* صندوق النص نفسه بدون الخلفية السوداء القبيحة */
.tilawa-homepage .tilawa-reference-hero-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 7 !important;

    width: min(84%, 900px) !important;
    max-width: 900px !important;
    margin: 0 !important;
    padding: 14px 18px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    text-align: center !important;
    transform: translate(-50%, -50%) !important;
}

/* إفكت خفيف فقط تحت النص */
.tilawa-homepage .tilawa-reference-hero-text::before {
    content: "" !important;
    position: absolute !important;
    inset: -8px -14px !important;
    z-index: -1 !important;

    border-radius: 24px !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.24) 0%,
            rgba(0, 0, 0, 0.16) 45%,
            rgba(0, 0, 0, 0.07) 72%,
            rgba(0, 0, 0, 0.00) 100%
        ) !important;

    filter: blur(10px) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* العنوان */
.tilawa-homepage .tilawa-reference-hero-short-title {
    position: static !important;
    display: block !important;

    width: 100% !important;
    max-width: 820px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #ffffff !important;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        "Tajawal",
        "Noto Sans Arabic",
        Arial,
        sans-serif !important;

    font-size: clamp(30px, 3.4vw, 50px) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    text-wrap: balance !important;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.30),
        0 1px 2px rgba(0, 0, 0, 0.35) !important;

    transform: none !important;
}

/* العربية */
.tilawa-homepage
.tilawa-reference-hero-text[dir="rtl"]
.tilawa-reference-hero-short-title {
    font-family:
        "Tajawal",
        "Noto Sans Arabic",
        "Segoe UI",
        Arial,
        sans-serif !important;

    line-height: 1.34 !important;
    letter-spacing: 0 !important;
}

/* الوصف */
.tilawa-homepage .tilawa-reference-hero-short-description {
    display: block !important;
    max-width: 720px !important;

    margin: 14px auto 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.95) !important;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        "Tajawal",
        "Noto Sans Arabic",
        Arial,
        sans-serif !important;

    font-size: clamp(15px, 1.28vw, 19px) !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
    text-align: center !important;

    text-shadow:
        0 1px 6px rgba(0, 0, 0, 0.28) !important;
}

/* العربية للوصف */
.tilawa-homepage
.tilawa-reference-hero-text[dir="rtl"]
.tilawa-reference-hero-short-description {
    font-family:
        "Tajawal",
        "Noto Sans Arabic",
        "Segoe UI",
        Arial,
        sans-serif !important;

    line-height: 1.78 !important;
}

/* Tablet */
@media (max-width: 900px) {
    .tilawa-homepage .tilawa-reference-hero-text {
        width: 88% !important;
        padding: 12px 14px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-text::before {
        inset: -8px -10px !important;
        filter: blur(9px) !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-title {
        font-size: clamp(24px, 4.2vw, 38px) !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-description {
        margin-top: 10px !important;
        font-size: clamp(14px, 1.9vw, 17px) !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .tilawa-homepage .tilawa-reference-hero-text {
        width: 91% !important;
        padding: 10px 10px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-text::before {
        inset: -6px -8px !important;
        border-radius: 18px !important;
        filter: blur(8px) !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-title {
        font-size: clamp(21px, 5.7vw, 29px) !important;
        line-height: 1.22 !important;
    }

    .tilawa-homepage
    .tilawa-reference-hero-text[dir="rtl"]
    .tilawa-reference-hero-short-title {
        line-height: 1.38 !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-description {
        max-width: 100% !important;
        margin-top: 8px !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    .tilawa-homepage
    .tilawa-reference-hero-text[dir="rtl"]
    .tilawa-reference-hero-short-description {
        line-height: 1.7 !important;
    }
}

@media (max-width: 380px) {
    .tilawa-homepage .tilawa-reference-hero-short-title {
        font-size: 20px !important;
    }

    .tilawa-homepage .tilawa-reference-hero-short-description {
        font-size: 13px !important;
    }
}

/* TILAWA_HERO_TEXT_REFINED_END */