/*
	Theme Name: EQuran School
	Theme URI: https://facebook.com/mohsen.elgamasy/
	Description: Aishah Quran Academy design (v4 "Mihrab") - Built with ACF Pro & Bootstrap 5
	Author: Dr Mohsen
	Author URI: https://facebook.com/mohsen.elgamasy/
	Version: 4.0
	Text Domain: quran-school
*/
:root {
    --frame-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z' fill='%23000'/%3E%3C/svg%3E");
    --frame-sand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 104 124'%3E%3Cpath d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z' fill='none' stroke='%23d9ccb0' stroke-opacity='1' stroke-width='3'/%3E%3C/svg%3E");
    --frame-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 104 124'%3E%3Cpath d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z' fill='none' stroke='%23cc3a63' stroke-opacity='1' stroke-width='3'/%3E%3C/svg%3E");
    --frame-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 104 124'%3E%3Cpath d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z' fill='none' stroke='%23f9f0e0' stroke-opacity='0.9' stroke-width='3'/%3E%3C/svg%3E");
    --frame-olive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 104 124'%3E%3Cpath d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z' fill='none' stroke='%23a2ab73' stroke-opacity='1' stroke-width='3'/%3E%3C/svg%3E");
    --lattice-olive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='120' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23c9bf9a' stroke-opacity='0.3' stroke-width='3'%3E%3Cpath transform='translate%280 0%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%28-50 -60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%2850 -60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%28-50 60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%2850 60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3C/g%3E%3C/svg%3E");
    --lattice-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='120' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23f9f0e0' stroke-opacity='0.12' stroke-width='3'%3E%3Cpath transform='translate%280 0%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%28-50 -60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%2850 -60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%28-50 60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%2850 60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3C/g%3E%3C/svg%3E");
    --lattice-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='120' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='3'%3E%3Cpath transform='translate%280 0%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%28-50 -60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%2850 -60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%28-50 60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%2850 60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3C/g%3E%3C/svg%3E");
    --lattice-sand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='120' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23cc3a63' stroke-opacity='0.07' stroke-width='3'%3E%3Cpath transform='translate%280 0%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%28-50 -60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%2850 -60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%28-50 60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3Cpath transform='translate%2850 60%29 translate%2850 60%29 scale%280.78%29 translate%28-50 -60%29' d='M50 2C56 9 63 15 72 16Q80 17 80 25L80 36C90 37 98 46 98 60C98 74 90 83 80 84L80 95Q80 103 72 104C63 105 56 111 50 118C44 111 37 105 28 104Q20 103 20 95L20 84C10 83 2 74 2 60C2 46 10 37 20 36L20 25Q20 17 28 16C37 15 44 9 50 2Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   AISHAH QURAN ACADEMY — Theme v4 "Mihrab"
   Brand: #cc3a63 (rose) · #a2ab73 (olive) · #f9f0e0 (cream)
   Type:  Noto Kufi Arabic (headings) · Poppins (body)
   ========================================================================== */

:root {
    /* Rose */
    --rose: #cc3a63;
    --rose-600: #b8325a;
    --rose-700: #a92c50;
    --rose-800: #7e1f3b;
    --rose-50: #fcf0f3;
    --rose-100: #f7d9e1;
    --rose-300: #e2939f;
    --rose-rgb: 204, 58, 99;

    /* Olive */
    --olive: #a2ab73;
    --olive-600: #868c52;
    --olive-700: #656a3d;
    --olive-800: #4a4e2c;
    --olive-900: #34371f;
    --olive-50: #f3f4e8;
    --olive-100: #e6e9d2;
    --olive-200: #d0d5b0;
    --olive-rgb: 162, 171, 115;
    --on-olive: #2f3120;

    /* Cream / sand */
    --cream: #f9f0e0;
    --cream-2: #f3e7d1;
    --cream-3: #ecdcc0;
    --sand: #d9ccb0;
    --line: #eadfc8;
    --white: #ffffff;

    /* Text */
    --heading: #3f4128;
    --text: #5f614a;
    --muted: #7d7f66;
    --success: #4f8a3c;
    --whatsapp: #25d366;

    /* Type */
    --font-head: 'Noto Kufi Arabic', 'Poppins', system-ui, sans-serif;
    --font-body: 'Poppins', 'Noto Kufi Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Shape */
    --r-sm: 10px;
    --r: 18px;
    --r-lg: 26px;
    --pill: 999px;
    --arch: 999px 999px var(--r) var(--r) / 260px 260px var(--r) var(--r);

    /* Depth */
    --sh-sm: 0 2px 10px -4px rgba(63, 65, 40, .12);
    --sh: 0 18px 40px -22px rgba(63, 65, 40, .35);
    --sh-lg: 0 34px 70px -34px rgba(63, 65, 40, .45);
    --sh-rose: 0 14px 30px -14px rgba(var(--rose-rgb), .65);
    --ring: 0 0 0 4px rgba(var(--rose-rgb), .16);

    --ease: cubic-bezier(.22, .8, .24, 1);
    --t: .4s var(--ease);
    --t-fast: .2s var(--ease);

    --section-y: clamp(70px, 8.5vw, 120px);
    --header-h: 86px;

    /* Legacy aliases used by inline styles in older templates */
    --primary-color: var(--rose);
    --primary-dark: var(--heading);
    --secondary-color: var(--olive);
    --dark-text: var(--heading);
    --text-muted: var(--muted);
    --light-bg: var(--cream);
    --brand: var(--rose);
    --sage: var(--olive);

    --bs-primary: #cc3a63;
    --bs-primary-rgb: 204, 58, 99;
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text);
    --bs-link-color: var(--rose);
    --bs-border-color: var(--line);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    color: var(--text);
    background: var(--cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
html[lang^="ar"] body, html[dir="rtl"] body { font-family: var(--font-head); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--heading);
    line-height: 1.35;
    letter-spacing: 0;
}
a { color: var(--rose); text-decoration: none; transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast); }
a:hover { color: var(--rose-700); }
img { max-width: 100%; height: auto; }
::selection { background: var(--rose); color: var(--white); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
p { margin-bottom: 1rem; }
.lead { font-size: 1.1rem; color: var(--muted); font-weight: 400; }

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

.container { --bs-gutter-x: 2rem; }
@media (min-width: 1400px) { .container { max-width: 1220px; } }

.text-primary { color: var(--rose) !important; }
.text-muted { color: var(--muted) !important; }
.text-success { color: var(--success) !important; }
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }

/* Frame helpers ------------------------------------------------------------ */
.frame-mask { -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }

/* Lobed icon tile (matches the brand icon set) */
.icon-tile,
.feature-icon, .why-icon, .learn-card-icon, .value-icon, .mission-icon, .info-icon,
.area-icon, .highlight-icon, .contact-feature-icon, .category-icon-box, .pricing-icon {
    position: relative;
    width: 70px; height: 84px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--frame-sand) center / contain no-repeat;
    color: var(--rose);
    font-size: 1.55rem;
    transition: transform var(--t), color var(--t);
}
.icon-tile::before,
.feature-icon::before, .why-icon::before, .learn-card-icon::before, .value-icon::before, .mission-icon::before, .info-icon::before,
.area-icon::before, .highlight-icon::before, .contact-feature-icon::before, .category-icon-box::before, .pricing-icon::before {
    content: "";
    position: absolute;
    inset: 12% 14%;
    background: var(--cream);
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
    z-index: -1;
    transition: background-color var(--t);
}
.icon-tile, .feature-icon, .why-icon, .learn-card-icon, .value-icon, .mission-icon, .info-icon,
.area-icon, .highlight-icon, .contact-feature-icon, .category-icon-box, .pricing-icon { isolation: isolate; }
.icon-tile i, .feature-icon i, .why-icon i, .learn-card-icon i, .value-icon i, .mission-icon i, .info-icon i,
.area-icon i, .highlight-icon i, .contact-feature-icon i, .category-icon-box i, .pricing-icon i { position: relative; margin-top: 4px; }

.stars { color: var(--rose); font-size: .8rem; letter-spacing: 2px; display: inline-flex; gap: 2px; }

/* Section rhythm ------------------------------------------------------------ */
.about-section, .features-section, .courses-section, .tutors-section, .why-choose-section,
.video-reviews-section, .cta-section-main, .areas-section, .testimonials-section, .faqs-section,
.faq-section, .pricing-section, .course-overview, .outcomes-section, .learn-section,
.related-courses-section, .full-cta-3, .story-section, .mission-section, .values-section,
.timeline-section, .contact-info-section, .teacher-single-section, .related-categories-section,
.blog-archive-section, .article, .single-article-section, .default-page-section, .state-section {
    position: relative;
    padding: var(--section-y) 0 !important;
}
.cta-section.alternate { padding: 0 0 var(--section-y) !important; }

/* ==========================================================================
   BUTTONS — pill shaped
   ========================================================================== */
.btn { font-family: var(--font-body); }
.btn-primary-custom, .btn-outline-custom, .btn-outline-primary-custom, .btn-white-custom,
.btn-cta-primary, .btn-primary, .pricing-btn, .btn-whatsapp-outline, .header-cta, .mini-cta-btn, .btn-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 14px 30px;
    border: 2px solid transparent;
    border-radius: var(--pill) !important;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-primary-custom i, .btn-outline-custom i, .btn-outline-primary-custom i, .btn-white-custom i,
.btn-cta-primary i, .header-cta i { margin: 0 !important; transition: transform var(--t-fast); }
a:hover > i.bi-arrow-right, button:hover > i.bi-arrow-right { transform: translateX(4px); }

.btn-primary-custom, .btn-primary, .header-cta, .pricing-btn-primary, .mini-cta-btn {
    background: var(--rose);
    border-color: var(--rose);
    color: var(--white) !important;
    box-shadow: var(--sh-rose);
}
.btn-primary-custom:hover, .btn-primary:hover, .header-cta:hover, .pricing-btn-primary:hover, .mini-cta-btn:hover {
    background: var(--olive-700);
    border-color: var(--olive-700);
    color: var(--cream) !important;
    box-shadow: 0 14px 30px -14px rgba(63, 65, 40, .6);
    transform: translateY(-2px);
}
.btn-primary:focus, .btn-primary:active { background: var(--rose-700) !important; border-color: var(--rose-700) !important; box-shadow: var(--ring) !important; }

.btn-outline-custom, .btn-outline-primary-custom {
    background: transparent;
    border-color: var(--olive-600);
    color: var(--olive-800) !important;
}
.btn-outline-custom:hover, .btn-outline-primary-custom:hover { background: var(--olive-600); border-color: var(--olive-600); color: var(--cream) !important; transform: translateY(-2px); }

.btn-white-custom, .btn-cta-primary, .pricing-btn-white {
    background: var(--cream);
    border-color: var(--cream);
    color: var(--rose-700) !important;
}
.btn-white-custom:hover, .btn-cta-primary:hover, .pricing-btn-white:hover { background: transparent; border-color: var(--cream); color: var(--cream) !important; transform: translateY(-2px); }

.btn-lg, .btn-hero, .btn-hero-outline { padding: 16px 34px; font-size: 1rem; }

/* ==========================================================================
   SECTION HEADERS — ornament style (no pills)
   ========================================================================== */
.section-header, .text-center.mb-5 { max-width: 780px; margin-left: auto; margin-right: auto; }

.section-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: .9rem;
    color: var(--rose);
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1.4;
}
.section-subtitle::before, .section-subtitle::after {
    content: "";
    width: 14px; height: 17px;
    flex-shrink: 0;
    background: var(--olive);
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
}
.section-subtitle i { display: none; }
.section-subtitle.d-block, .section-subtitle.d-inline-block { display: inline-flex !important; }

.section-title {
    font-size: clamp(1.8rem, 3.1vw, 2.65rem);
    font-weight: 700;
    color: var(--heading);
    line-height: 1.3;
    margin-bottom: 1rem;
}
.section-title span, .section-title em, .section-title strong { color: var(--rose); font-style: normal; }
.section-title-sm { font-size: 1.45rem; }

.section-header .section-title::after,
.text-center.mb-5 > .section-title::after {
    content: "";
    display: block;
    width: 150px; height: 14px;
    margin: 16px auto 0;
    background:
        linear-gradient(var(--sand), var(--sand)) left center / 58px 2px no-repeat,
        linear-gradient(var(--sand), var(--sand)) right center / 58px 2px no-repeat,
        var(--frame-rose) center / 12px 14px no-repeat;
}

.section-desc, .section-lead,
.section-header .lead, .text-center.mb-5 > .lead, .text-center.mb-5 > p {
    font-size: 1.06rem;
    color: var(--muted);
    max-width: 640px;
    margin: 0 auto;
}

/* ==========================================================================
   TOP BAR & HEADER
   ========================================================================== */
.top-bar { background: var(--rose); color: rgba(255, 255, 255, .9); font-size: .82rem; position: relative; z-index: 1031; }
.top-bar .container { padding-top: 9px; padding-bottom: 9px; }
.top-bar-item, .top-bar-link { color: rgba(255, 255, 255, .92); }
.top-bar-link:hover { color: var(--white); text-decoration: underline; }
.top-bar-icon { color: var(--cream); opacity: .85; }
.top-bar-label { color: rgba(255, 255, 255, .75); }
.top-social-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--white); font-size: .78rem; }
.top-social-btn:hover { background: var(--cream); color: var(--rose); }

.header-main {
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    z-index: 1030;
    transition: box-shadow var(--t), background-color var(--t);
}
.header-main::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -7px;
    height: 7px;
    background: var(--lattice-sand) 0 -40px / 50px 60px repeat-x;
    opacity: .9;
    pointer-events: none;
}
.header-main.is-scrolled { box-shadow: 0 12px 30px -18px rgba(63, 65, 40, .35); }
.header-main .navbar { min-height: var(--header-h); }
.navbar-brand { padding: 0; margin-right: 2rem; }
.site-logo { max-height: 62px; width: auto; display: block; }

.header-main .navbar-nav { gap: 4px; }
.header-main .navbar-nav > .nav-item { position: relative; display: flex; align-items: center; flex-wrap: wrap; }
.header-main .navbar-nav .nav-link {
    position: relative;
    padding: 10px 14px !important;
    color: var(--heading);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.3;
}
.header-main .navbar-nav > .nav-item > .nav-link::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 10px; height: 12px;
    background: var(--rose);
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
    transform: translate(-50%, 6px) scale(0);
    transition: transform var(--t-fast);
}
.header-main .navbar-nav .nav-link:hover,
.header-main .navbar-nav .nav-item.show > .nav-link,
.header-main .navbar-nav .nav-item.active > .nav-link { color: var(--rose); }
.header-main .navbar-nav > .nav-item:hover > .nav-link::after,
.header-main .navbar-nav > .nav-item.active > .nav-link::after { transform: translate(-50%, 6px) scale(1); }
.header-main .navbar-nav .nav-item.dropdown > .nav-link { padding-right: 2px !important; }

.dropdown-toggle-split, .dropdown-toggle-split-nested {
    border: 0; background: transparent; color: var(--olive-700);
    width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: .7rem; cursor: pointer;
    transition: transform var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.dropdown-toggle-split:hover, .dropdown-toggle-split-nested:hover { background: var(--olive-100); color: var(--olive-800); }
.nav-item.show > .dropdown-toggle-split { transform: rotate(180deg); color: var(--rose); }

.header-main .dropdown-menu {
    display: none;
    background: var(--white);
    border: 0;
    border-top: 3px solid var(--rose);
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: var(--sh-lg);
    padding: 10px;
    min-width: 250px;
    margin: 0;
    list-style: none;
}
.header-main .dropdown-menu.show { display: block; }
.header-main .dropdown-menu .dropdown-submenu-item { position: relative; display: flex; align-items: center; flex-wrap: wrap; }
.header-main .dropdown-item {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    color: var(--heading);
    font-size: .92rem;
    font-weight: 500;
    white-space: normal;
}
.header-main .dropdown-item:hover, .header-main .dropdown-item:focus,
.header-main .dropdown-submenu-item.show > .dropdown-item { background: var(--olive-50); color: var(--olive-800); padding-left: 20px; }
.header-main .dropdown-submenu-item.active > .dropdown-item { color: var(--rose); }
.dropdown-arrow { color: var(--muted); margin-left: 8px; font-size: .8rem; }

.header-cta { padding: 12px 24px; font-size: .9rem; }

.navbar-toggler {
    width: 48px; height: 48px; padding: 0;
    border: 2px solid var(--olive-200) !important;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.navbar-toggler:focus { box-shadow: var(--ring); }
.navbar-toggler-icon { width: 1.25em; height: 1.25em; }

@media (min-width: 992px) {
    .header-main .navbar-nav > .nav-item > .dropdown-menu {
        position: absolute; top: calc(100% + 14px); left: 0;
        display: block; opacity: 0; visibility: hidden; transform: translateY(10px);
        transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    }
    .header-main .navbar-nav > .nav-item > .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
    .header-main .navbar-nav > .nav-item > .dropdown-menu.show { opacity: 1; visibility: visible; transform: none; }
    .header-main .dropdown-submenu-item > .dropdown-menu { position: absolute; top: -13px; left: calc(100% + 10px); border-radius: var(--r); border-top: 0; border-left: 3px solid var(--olive); }
    .header-main .dropdown-submenu-item > .dropdown-menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 14px; }
    .header-main .dropdown-submenu-item > .dropdown-menu.dropdown-menu-reverse { left: auto; right: calc(100% + 10px); }
    .dropdown-toggle-split-nested { display: none; }
}

/* ==========================================================================
   PAGE HERO (all inner pages) — olive with lattice
   ========================================================================== */
.breadcrumb-section, .contact-hero-section {
    position: relative;
    overflow: hidden;
    padding: clamp(70px, 8vw, 110px) 0 clamp(64px, 7vw, 96px);
    text-align: center;
    background: var(--lattice-olive) center 0 / 100px 120px, var(--olive-700);
    color: var(--cream);
}
.breadcrumb-section::after, .contact-hero-section::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42px;
    background: var(--cream);
    -webkit-mask: radial-gradient(60px 42px at 50% 100%, #000 98%, transparent 100%) 0 0 / 120px 42px repeat-x;
    mask: radial-gradient(60px 42px at 50% 100%, #000 98%, transparent 100%) 0 0 / 120px 42px repeat-x;
}
.breadcrumb-section .container, .contact-hero-section .container { position: relative; z-index: 1; }
.breadcrumb-section .page-title, .centered-page-title {
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    color: var(--cream);
    margin: 0 auto .75rem;
    max-width: 900px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .15);
}
.page-hero-eyebrow, .about-badge, .contact-badge, .teacher-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem !important;
    padding: 0;
    background: none;
    color: var(--rose-100);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.page-hero-eyebrow i, .about-badge i, .contact-badge i, .teacher-badge i { color: var(--cream); }
.page-hero-desc, .about-hero-description, .contact-hero-description, .centered-page-description, .taxonomy-description {
    color: rgba(249, 240, 224, .92);
    font-size: 1.1rem;
    max-width: 680px;
    margin: 0 auto 1rem;
}
.breadcrumbs, .rank-math-breadcrumb, .breadcrumb-section .breadcrumb { display: inline-flex; justify-content: center; margin-top: .75rem; }
.rank-math-breadcrumb p, .breadcrumb-section .breadcrumb {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
    margin: 0; padding: 8px 20px;
    border: 1px solid rgba(249, 240, 224, .35);
    border-radius: var(--pill);
    font-size: .85rem;
    color: rgba(249, 240, 224, .85);
}
.rank-math-breadcrumb a, .breadcrumb-section .breadcrumb a { color: var(--cream); font-weight: 500; }
.rank-math-breadcrumb a:hover, .breadcrumb-section .breadcrumb a:hover { color: var(--rose-100); }
.rank-math-breadcrumb .separator { color: rgba(249, 240, 224, .6); }
.rank-math-breadcrumb .last, .breadcrumb-section .breadcrumb-item.active { color: var(--rose-100); }
.breadcrumb-section .breadcrumb-item + .breadcrumb-item::before { color: rgba(249, 240, 224, .6); }

/* ==========================================================================
   HOME HERO — cream text side + olive lattice panel with framed image
   ========================================================================== */
.hero-section {
    position: relative;
    overflow: hidden;
    padding: clamp(60px, 7vw, 100px) 0 clamp(50px, 6vw, 80px);
    background: var(--cream);
}
.hero-section.has-media::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 44%;
    background: var(--lattice-olive) 0 0 / 100px 120px, var(--olive-600);
    border-bottom-left-radius: 220px;
}
.hero-section > .container { position: relative; z-index: 1; }
.hero-ambient-glow {
    position: absolute;
    left: -120px; top: -120px;
    width: 420px; height: 500px;
    background: var(--frame-rose) center / contain no-repeat;
    opacity: .12;
    pointer-events: none;
    display: none;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    color: var(--olive-800);
    font-size: .88rem;
    font-weight: 500;
}
.hero-pill-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px;
    border-radius: var(--pill);
    background: var(--rose);
    color: var(--white);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white); display: inline-block; margin-right: 4px; animation: pulseLight 2s infinite; }
@keyframes pulseLight { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

.hero-main-title {
    font-size: clamp(2.2rem, 4.6vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--heading);
    margin: 1.4rem 0 1.2rem;
}
.hero-main-title span, .hero-main-title em, .hero-main-title strong {
    font-style: normal;
    color: var(--rose);
}
.hero-subtitle { font-size: 1.12rem; color: var(--text); max-width: 540px; margin-bottom: 0; }
.hero-content.text-center:not(.text-lg-start) .hero-subtitle { margin: 0 auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }
.hero-content.text-center:not(.text-lg-start) .hero-actions { justify-content: center; }

.hero-media {
    position: relative;
    max-width: 440px;
    margin: 0 auto;
    padding: 18px;
    background: var(--frame-cream) center / 100% 100% no-repeat;
}
.hero-media-frame {
    position: relative;
    aspect-ratio: 100 / 120;
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
    background: var(--olive-700);
}
.hero-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-chip {
    position: absolute;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: var(--pill);
    background: var(--white);
    box-shadow: var(--sh);
    z-index: 2;
    animation: floatY 6s ease-in-out infinite;
}
.hero-chip strong { display: block; color: var(--heading); font-size: .88rem; font-weight: 600; line-height: 1.3; }
.hero-chip small { display: block; color: var(--muted); font-size: .76rem; line-height: 1.3; }
.hero-chip .icon-tile { width: 42px; height: 42px; background: var(--rose); border-radius: 50%; color: var(--white); font-size: 1.05rem; }
.hero-chip .icon-tile::before { display: none; }
.hero-chip .icon-tile i { margin: 0; }
.hero-chip-1 { left: -40px; bottom: 60px; }
.hero-chip-2 { right: -30px; top: 70px; animation-delay: -3s; }
.hero-chip-2 .icon-tile { background: var(--olive-700); }
.hero-chip .live-dot { background: var(--success); animation: none; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.hero-trust-strip {
    margin: clamp(50px, 6vw, 80px) 0 0 !important;
    --bs-gutter-x: 0; --bs-gutter-y: 0;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--sh);
    overflow: hidden;
}
.trust-item {
    height: 100%;
    display: flex; align-items: center; gap: 14px;
    padding: 20px 22px;
    position: relative;
}
.hero-trust-strip > [class*="col-"] + [class*="col-"] .trust-item { border-left: 1px dashed var(--sand); }
.trust-item .icon-tile { width: 46px; height: 55px; font-size: 1.1rem; }
.trust-item .icon-tile i { margin-top: 3px; }
.hero-trust-strip > [class*="col-"]:nth-child(even) .icon-tile { color: var(--olive-700); }
.trust-number { display: block; font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--heading); line-height: 1.3; }
.trust-label { display: block; font-size: .82rem; color: var(--muted); line-height: 1.35; }

/* ==========================================================================
   HOME ABOUT — framed image
   ========================================================================== */
.about-section { background: var(--white); }
.about-image-wrapper { position: relative; max-width: 470px; margin: 0 auto; padding: 22px; }
.about-image-wrapper::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--frame-rose) center / 100% 100% no-repeat;
    transform: translate(18px, 14px);
}
.about-image-card {
    position: relative;
    aspect-ratio: 100 / 120;
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
    background: var(--olive-100);
}
.about-main-img { width: 100%; height: 100%; object-fit: cover; }
.about-floating-badge {
    position: absolute;
    left: -10px; bottom: 70px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px 12px 12px;
    border-radius: var(--pill);
    background: var(--olive-700);
    color: var(--cream);
    box-shadow: var(--sh);
    animation: floatY 6s ease-in-out infinite;
}
.about-floating-badge .badge-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--rose); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.about-floating-badge strong { display: block; color: var(--cream); font-size: .9rem; line-height: 1.3; }
.about-floating-badge span { display: block; color: rgba(249, 240, 224, .8); font-size: .78rem; line-height: 1.3; }
.about-content-wrapper .section-title::after { display: none; }
.about-content-wrapper .lead-text {
    font-size: 1.15rem;
    color: var(--heading);
    font-weight: 500;
    padding-left: 18px;
    border-left: 3px solid var(--rose);
}
.about-body-text { color: var(--text); }
.about-body-text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   FEATURES / WHY / LEARN — arch-topped cards
   ========================================================================== */
.features-section { background: var(--cream); }
.feature-card, .why-card, .value-card, .mission-card {
    position: relative;
    height: 100%;
    padding: 44px 30px 34px;
    text-align: center;
    background: var(--white);
    border-radius: var(--arch);
    box-shadow: var(--sh-sm);
    transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
.feature-card:hover, .value-card:hover, .mission-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.feature-icon, .why-icon, .value-icon { margin: 0 auto 1.1rem; }
.feature-card:hover .feature-icon, .value-card:hover .value-icon { transform: translateY(-4px); }
.feature-card:hover .feature-icon::before, .value-card:hover .value-icon::before { background: var(--rose-50); }
.features-section .row > [class*="col-"]:nth-child(even) .feature-icon { color: var(--olive-700); }

.feature-title, .why-title, .why-card h4, .learn-card h4 { font-size: 1.12rem; font-weight: 700; color: var(--heading); margin-bottom: .6rem; }
.feature-desc, .why-desc, .why-card p, .learn-card p { color: var(--muted); font-size: .94rem; line-height: 1.75; margin: 0; }

/* Why choose — dark olive lattice section */
.why-choose-section {
    background: var(--lattice-olive) center / 100px 120px, var(--olive-700);
    color: rgba(249, 240, 224, .85);
}
.why-choose-section .section-subtitle { color: var(--rose-100); }
.why-choose-section .section-subtitle::before, .why-choose-section .section-subtitle::after { background: var(--rose-300); }
.why-choose-section .section-title { color: var(--cream); }
.why-choose-section .section-title::after { background: linear-gradient(rgba(249,240,224,.4), rgba(249,240,224,.4)) left center / 58px 2px no-repeat, linear-gradient(rgba(249,240,224,.4), rgba(249,240,224,.4)) right center / 58px 2px no-repeat, var(--frame-cream) center / 12px 14px no-repeat; }
.why-choose-section .section-desc, .why-choose-section .lead, .why-choose-section .text-center.mb-5 > p { color: rgba(249, 240, 224, .82); }
.why-choose-section .row { counter-reset: why; }
.why-card {
    counter-increment: why;
    background: var(--olive-800);
    border: 1px solid rgba(249, 240, 224, .18);
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5);
}
.why-card:hover { background: var(--cream); transform: translateY(-8px); }
.why-card::after {
    content: counter(why, decimal-leading-zero);
    position: absolute;
    top: 18px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 700;
    color: var(--rose-100);
    letter-spacing: .1em;
}
.why-card:hover::after { color: var(--rose); }
.why-icon { background-image: var(--frame-cream); color: var(--cream); margin-top: 10px; }
.why-icon::before { background: rgba(249, 240, 224, .12); }
.why-card:hover .why-icon { background-image: var(--frame-sand); color: var(--rose); }
.why-card:hover .why-icon::before { background: var(--rose-50); }
.why-card .why-title, .why-card h4 { color: var(--cream); }
.why-card .why-desc, .why-card p { color: rgba(249, 240, 224, .78); }
.why-card:hover .why-title, .why-card:hover h4 { color: var(--heading); }
.why-card:hover .why-desc, .why-card:hover p { color: var(--muted); }
.why-choose-section .btn-primary-custom:hover { background: var(--cream); border-color: var(--cream); color: var(--rose-700) !important; }

/* ==========================================================================
   CATEGORY FILTERS — underlined tabs
   ========================================================================== */
.category-filter-wrapper { display: flex; justify-content: center; }
.category-filters {
    display: inline-flex; flex-wrap: wrap; justify-content: center;
    gap: 6px 26px;
    padding: 0 6px;
    border-bottom: 1px solid var(--sand);
    max-width: 100%;
}
.category-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 2px 14px;
    border: 0; background: transparent;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: .93rem; font-weight: 500;
    white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: color var(--t-fast);
}
.category-btn i { font-size: .95rem; color: var(--olive); transition: color var(--t-fast); }
.category-btn::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 3px; border-radius: 3px;
    background: var(--rose);
    transform: scaleX(0);
    transition: transform var(--t-fast);
}
.category-btn:hover { color: var(--heading); }
.category-btn.active { color: var(--rose); font-weight: 600; }
.category-btn.active i { color: var(--rose); }
.category-btn.active::after, .category-btn:hover::after { transform: scaleX(1); }
.category-btn:hover::after { background: var(--olive); }
.category-btn.active:hover::after { background: var(--rose); }

.courses-grid-wrapper, .tutors-grid-wrapper { transition: opacity var(--t); min-height: 120px; }
.no-results, .no-results-tutors, .no-results-filter, .empty-state {
    padding: 56px 24px !important;
    text-align: center;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 2px dashed var(--sand);
    color: var(--muted);
}
.no-results i, .no-results-tutors i, .no-results-filter i, .empty-state i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 70px; height: 84px;
    background: var(--frame-rose) center / contain no-repeat;
    color: var(--rose) !important;
    font-size: 1.8rem !important;
    margin-bottom: 1rem !important;
}
.no-results h3, .no-results-tutors h3, .no-results-filter h3, .empty-state h3 { font-size: 1.25rem; color: var(--heading) !important; }

/* ==========================================================================
   COURSE CARDS — arched image, editorial body
   ========================================================================== */
.courses-section { background: var(--white); }
.related-courses-section { background: var(--cream); }
.course-card {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column;
    background: var(--cream);
    border-radius: var(--arch);
    transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
.course-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); background: var(--white); }
.course-thumb {
    position: relative;
    margin: 12px 12px 0;
    aspect-ratio: 4 / 3.3;
    overflow: hidden;
    border-radius: 999px 999px 14px 14px / 240px 240px 14px 14px;
    background: var(--olive-100);
}
.course-thumb > a { display: block; width: 100%; height: 100%; }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.course-card:hover .course-thumb img { transform: scale(1.07); }
.course-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(52, 55, 31, .55)); pointer-events: none; }
.course-badge, .course-cat-tag {
    position: absolute;
    bottom: 14px;
    padding: 5px 14px;
    border-radius: var(--pill);
    font-size: .74rem; font-weight: 600; line-height: 1.4;
    z-index: 1; pointer-events: none;
}
.course-badge { left: 14px; background: var(--cream); color: var(--olive-800); }
.course-cat-tag { right: 14px; background: var(--rose); color: var(--white); }
.course-content { flex: 1; display: flex; flex-direction: column; padding: 22px 26px 26px; text-align: center; }
.course-title { font-size: 1.12rem; font-weight: 700; line-height: 1.5; margin-bottom: .55rem; }
.course-title a { color: var(--heading); }
.course-title a:hover { color: var(--rose); }
.course-excerpt {
    color: var(--muted); font-size: .92rem; line-height: 1.7; margin-bottom: 1.25rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.course-card-footer { margin-top: auto; }
.btn-course-details {
    display: inline-flex !important;
    align-items: center; justify-content: center; gap: 10px;
    width: auto !important;
    padding: 0 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--rose-100) !important;
    border-radius: 0 !important;
    color: var(--rose) !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: border-color var(--t-fast), gap var(--t-fast);
}
.btn-course-details i { font-size: .95rem; }
.course-card:hover .btn-course-details, .btn-course-details:hover { border-bottom-color: var(--rose) !important; gap: 14px; }

/* ==========================================================================
   TUTOR CARDS — framed portrait
   ========================================================================== */
.tutors-section { background: var(--lattice-sand) center / 100px 120px, var(--cream); }
.tutor-card {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column;
    text-align: center;
    padding: 10px 10px 24px;
    background: transparent;
    border-radius: var(--r-lg);
    transition: background-color var(--t), box-shadow var(--t), transform var(--t);
}
.tutor-card:hover { background: var(--white); box-shadow: var(--sh-lg); transform: translateY(-6px); }
.tutor-image {
    position: relative;
    width: 82%;
    margin: 0 auto;
    aspect-ratio: 100 / 120;
    padding: 9px;
    background: var(--frame-rose) center / 100% 100% no-repeat;
}
.tutor-image > a {
    display: block; width: 100%; height: 100%;
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
    background: var(--olive-100);
}
.tutor-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .8s var(--ease); }
.tutor-card:hover .tutor-image img { transform: scale(1.06); }
.tutor-badge {
    position: absolute; left: 50%; bottom: 0;
    transform: translate(-50%, 30%);
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px;
    border-radius: var(--pill);
    background: var(--olive-700);
    color: var(--cream);
    font-size: .72rem; font-weight: 600; white-space: nowrap;
    pointer-events: none;
}
.tutor-badge i { color: var(--rose-100); }
.tutor-overlay { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 30%); padding: 4px 12px; border-radius: var(--pill); background: var(--white); box-shadow: var(--sh-sm); }
.tutor-info { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 26px 8px 0; }
.tutor-info .stars { margin-bottom: .4rem !important; }
.tutor-name { font-size: 1.08rem; font-weight: 700; line-height: 1.45; margin-bottom: .2rem; }
.tutor-name a { color: var(--heading); }
.tutor-name a:hover { color: var(--rose); }
.tutor-position, .tutor-title { display: block; color: var(--olive-700); font-size: .85rem; font-weight: 500; font-style: italic; margin-bottom: .6rem; }
.tutor-bio, .tutor-info > p:not(.tutor-position):not(.tutor-title) {
    color: var(--muted); font-size: .87rem; line-height: 1.65; margin-bottom: 1rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tutor-bio small, .tutor-info > p small { font-size: inherit; }
.tutor-profile-link {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 20px;
    border: 2px solid var(--rose-100);
    border-radius: var(--pill);
    color: var(--rose);
    font-size: .85rem; font-weight: 600;
}
.tutor-profile-link:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }
.tutor-social { display: flex; justify-content: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.tutor-social a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--olive-100); color: var(--olive-800); font-size: .9rem; }
.tutor-social a:hover { background: var(--rose); color: var(--white); }

/* ==========================================================================
   VIDEO REVIEWS — light, arched thumbnails
   ========================================================================== */
.video-reviews-section { background: var(--white); }
.video-card {
    position: relative;
    aspect-ratio: 4 / 4.4;
    overflow: hidden;
    border-radius: 999px 999px var(--r) var(--r) / 280px 280px var(--r) var(--r);
    background: var(--olive-700);
    cursor: pointer;
    isolation: isolate;
    box-shadow: var(--sh);
    transition: transform var(--t), box-shadow var(--t);
}
.video-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.video-thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .8s var(--ease); }
.video-card:hover .video-thumbnail { transform: scale(1.06); }
.video-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px;
    background: linear-gradient(180deg, rgba(52, 55, 31, 0) 30%, rgba(52, 55, 31, .85) 100%);
}
.play-button {
    position: relative;
    width: 76px; height: 90px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rose);
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
    color: var(--white);
    font-size: 2rem;
    transition: transform var(--t), background-color var(--t);
}
.play-button i { margin-left: 4px; }
.play-pulse { display: none; }
.video-card:hover .play-button { transform: scale(1.1); background: var(--cream); color: var(--rose); }
.video-title {
    position: absolute; left: 20px; right: 20px; bottom: 22px;
    color: var(--cream); font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.5; text-align: center;
}

.lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(52, 55, 31, .88);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t), visibility var(--t);
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-content { position: relative; width: min(100%, 1000px); aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #000; border: 4px solid var(--cream); }
.lightbox-content iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--rose); color: var(--white); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lightbox-close:hover { background: var(--cream); color: var(--rose); }

/* ==========================================================================
   CTA BANNERS
   ========================================================================== */
.cta-section-main { background: var(--white); padding-top: 0 !important; }
.cta-banner-wrapper {
    position: relative;
    overflow: hidden;
    padding: clamp(36px, 5vw, 70px);
    border-radius: var(--r-lg);
    background: var(--lattice-rose) center / 100px 120px, var(--rose);
    color: rgba(255, 255, 255, .92);
}
.cta-banner-wrapper > .row { position: relative; z-index: 1; }
.cta-banner-wrapper .cta-image {
    position: relative;
    max-width: 340px;
    margin: 0 auto;
    padding: 14px;
    background: var(--frame-cream) center / 100% 100% no-repeat;
}
.cta-banner-wrapper .cta-image img {
    width: 100%;
    aspect-ratio: 100 / 120;
    object-fit: cover;
    border-radius: 0 !important;
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
}
.cta-subtitle-pill {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 1rem;
    color: var(--cream);
    font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
}
.cta-subtitle-pill::before { content: ""; width: 26px; height: 2px; background: currentColor; opacity: .7; }
.cta-heading { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--white); line-height: 1.35; margin-bottom: 1rem; }
.cta-description { color: rgba(255, 255, 255, .9); font-size: 1.04rem; }
.cta-description p:last-child { margin-bottom: 0; }

.cta-banner-alternate { background: var(--lattice-olive) center / 100px 120px, var(--olive-700); color: rgba(249, 240, 224, .9); }
.cta-banner-alternate .cta-heading { color: var(--cream); }
.cta-banner-alternate .cta-subtitle-pill { color: var(--rose-100); }
.cta-banner-alternate .cta-description { color: rgba(249, 240, 224, .88); }
.cta-banner-alternate .btn-cta-primary { background: var(--rose); border-color: var(--rose); color: var(--white) !important; }
.cta-banner-alternate .btn-cta-primary:hover { background: var(--cream); border-color: var(--cream); color: var(--rose-700) !important; }
.cta-section.alternate { background: var(--cream); padding-top: var(--section-y) !important; }
.testimonials-section + .cta-section.alternate { padding-top: 0 !important; }

/* ==========================================================================
   AREAS WE SERVE
   ========================================================================== */
.areas-section { background: var(--cream); padding-top: var(--section-y) !important; }
.area-card {
    position: relative;
    height: 100%;
    display: flex; gap: 20px; align-items: flex-start;
    padding: 28px 30px;
    background: var(--white);
    border-radius: var(--r);
    border-left: 4px solid var(--rose);
    box-shadow: var(--sh-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.areas-section .row > [class*="col-"]:nth-child(even) .area-card { border-left-color: var(--olive); }
.area-card:hover { transform: translateX(6px); box-shadow: var(--sh); }
.area-icon { width: 54px; height: 65px; font-size: 1.3rem; color: var(--olive-700); }
.area-title { font-size: 1.12rem; margin-bottom: .45rem; }
.area-desc { color: var(--muted); font-size: .94rem; }
.area-desc p:last-child { margin-bottom: 0; }
.area-desc ul { padding-left: 1.1rem; margin-bottom: 0; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-section { background: var(--cream); }
.testimonials-section .carousel { padding: 0 70px; }
.testimonials-section .carousel-inner { padding: 36px 0 20px; }
.testimonial-card {
    position: relative;
    padding: 60px clamp(26px, 5vw, 70px) 44px;
    text-align: center;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--sh);
}
.testimonial-card::before {
    content: "";
    position: absolute; inset: 12px;
    border: 1px dashed var(--sand);
    border-radius: calc(var(--r-lg) - 8px);
    pointer-events: none;
}
.quote-badge {
    position: absolute;
    top: -34px; left: 50%;
    transform: translateX(-50%);
    width: 58px; height: 70px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rose);
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
    color: var(--white);
    font-size: 1.8rem;
}
.testimonial-text {
    font-family: var(--font-head);
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    font-weight: 500;
    line-height: 1.9;
    color: var(--heading);
    margin-bottom: 1.8rem;
}
.testimonial-author { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.author-image { width: 60px; height: 72px; flex-shrink: 0; padding: 3px; background: var(--frame-olive) center / 100% 100% no-repeat; }
.author-image img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
.author-name { font-size: 1rem; margin: 0 0 2px; }
.author-location { font-size: .84rem; color: var(--muted); margin: 0; }
.author-location i { color: var(--rose); }
.testimonials-section .carousel-control-prev, .testimonials-section .carousel-control-next { width: 56px; opacity: 1; }
.custom-carousel-btn {
    width: 50px; height: 50px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--olive);
    color: var(--olive-800);
    font-size: 1.1rem;
    transition: var(--t-fast);
}
.carousel-control-prev:hover .custom-carousel-btn, .carousel-control-next:hover .custom-carousel-btn { background: var(--rose); border-color: var(--rose); color: var(--white); }

/* ==========================================================================
   FAQ — clean lines
   ========================================================================== */
.faqs-section, .faq-section { background: var(--white); }
.faq-help-card {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 2.5rem;
    padding: 22px 28px;
    border-radius: var(--pill);
    background: var(--olive-50);
    border: 1px solid var(--olive-100);
}
.faq-help-card h5 { font-size: 1.05rem; margin: 0 0 2px; }
.faq-help-card p { color: var(--muted); font-size: .92rem; margin: 0; }

.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: transparent; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; }
.accordion .accordion-item {
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
}
.accordion .accordion-item:first-child { border-top: 1px solid var(--line) !important; }
.accordion .accordion-header { margin: 0; }
.accordion .accordion-button {
    display: flex; align-items: center; gap: 16px;
    padding: 24px 4px;
    background: transparent !important;
    color: var(--heading);
    font-family: var(--font-head);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.6;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.accordion .accordion-button:not(.collapsed) { color: var(--rose); }
.accordion .accordion-button::after {
    flex-shrink: 0;
    width: 34px; height: 34px;
    margin-left: auto;
    border-radius: 50%;
    border: 2px solid var(--olive-200);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23656a3d'%3E%3Cpath d='M8 3.5a.75.75 0 0 1 .75.75v3h3a.75.75 0 0 1 0 1.5h-3v3a.75.75 0 0 1-1.5 0v-3h-3a.75.75 0 0 1 0-1.5h3v-3A.75.75 0 0 1 8 3.5Z'/%3E%3C/svg%3E");
    background-size: 16px; background-position: center; background-repeat: no-repeat;
    transition: transform var(--t), background-color var(--t), border-color var(--t);
}
.accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
    background-color: var(--rose);
    border-color: var(--rose);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 3.5a.75.75 0 0 1 .75.75v3h3a.75.75 0 0 1 0 1.5h-3v3a.75.75 0 0 1-1.5 0v-3h-3a.75.75 0 0 1 0-1.5h3v-3A.75.75 0 0 1 8 3.5Z'/%3E%3C/svg%3E");
}
.faq-number {
    flex-shrink: 0;
    width: 36px; height: 43px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--frame-sand) center / contain no-repeat;
    color: var(--olive-700);
    font-family: var(--font-body);
    font-size: .78rem; font-weight: 700;
    padding-top: 3px;
}
.accordion .accordion-button:not(.collapsed) .faq-number { background-image: var(--frame-rose); color: var(--rose); }
.accordion .accordion-body { padding: 0 60px 26px 4px; color: var(--text); font-size: .98rem; line-height: 1.85; }
.modern-faq-accordion .accordion-body { padding-left: 56px; }
.accordion .accordion-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   FORMS & FREE TRIAL
   ========================================================================== */
.contact-form-section input[type="text"], .contact-form-section input[type="email"], .contact-form-section input[type="tel"],
.contact-form-section input[type="url"], .contact-form-section input[type="number"], .contact-form-section input[type="date"],
.contact-form-section input[type="time"], .contact-form-section input[type="password"], .contact-form-section select,
.contact-form-section textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"],
.comment-form textarea, .sidebar-wrapper input[type="search"], .sidebar-wrapper input[type="text"], .form-control, .form-select {
    width: 100%;
    min-height: 52px;
    padding: 12px 20px;
    border: 1.5px solid var(--sand);
    border-radius: var(--pill);
    background-color: var(--white);
    color: var(--heading);
    font-family: var(--font-body);
    font-size: .95rem;
    box-shadow: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    -webkit-appearance: none; appearance: none;
}
.contact-form-section textarea, .comment-form textarea { min-height: 140px; border-radius: var(--r); resize: vertical; }
.contact-form-section select, .form-select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cc3a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 18px center; background-size: 16px;
}
.contact-form-section input::placeholder, .contact-form-section textarea::placeholder { color: #a9a58d; }
.contact-form-section input:focus, .contact-form-section select:focus, .contact-form-section textarea:focus,
.comment-form input:focus, .comment-form textarea:focus, .sidebar-wrapper input:focus, .form-control:focus, .form-select:focus {
    outline: none; border-color: var(--rose); box-shadow: var(--ring);
}
.contact-form-section label, .comment-form label { display: block; margin: 0 0 6px 12px; font-size: .86rem; font-weight: 600; color: var(--heading); }
.contact-form-section p { margin-bottom: 1rem; }
.contact-form-section input[type="submit"], .contact-form-section button[type="submit"], .contact-form-section .wpcf7-submit,
.contact-form-section .ff-btn-submit, .comment-form input[type="submit"], .comment-form .submit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-height: 56px; padding: 14px 30px;
    border: 0 !important; border-radius: var(--pill) !important;
    background: var(--rose) !important; color: var(--white) !important;
    font-family: var(--font-body); font-size: 1rem; font-weight: 600;
    cursor: pointer; box-shadow: var(--sh-rose);
    transition: background-color var(--t-fast), transform var(--t-fast);
}
.contact-form-section input[type="submit"]:hover, .contact-form-section button[type="submit"]:hover, .contact-form-section .wpcf7-submit:hover,
.contact-form-section .ff-btn-submit:hover, .comment-form input[type="submit"]:hover { background: var(--olive-700) !important; transform: translateY(-2px); }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid-tip { font-size: .8rem; color: var(--rose-700); margin: 6px 0 0 14px; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0 !important; padding: 12px 18px !important; border-radius: var(--r); font-size: .9rem; }
.contact-form-section .ff-el-form-control { border-radius: var(--pill) !important; }
.contact-form-section .ff-el-group { margin-bottom: 18px; }
.choices { margin-bottom: 0; }
.choices__inner { min-height: 52px; padding: 9px 18px !important; border: 1.5px solid var(--sand) !important; border-radius: var(--pill) !important; background: var(--white) !important; }
.choices.is-focused .choices__inner, .choices.is-open .choices__inner { border-color: var(--rose) !important; box-shadow: var(--ring); }
.choices__list--dropdown, .choices__list[aria-expanded] { border: 0 !important; border-radius: var(--r) !important; box-shadow: var(--sh-lg); margin-top: 6px !important; z-index: 20 !important; }
.choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--rose-50) !important; color: var(--rose-700); }
.iti { width: 100%; display: block; }

.free-trial-section {
    padding: var(--section-y) 0 !important;
    background: var(--cream);
}
.free-trial-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: var(--sh-lg);
}
.free-trial-card > .row { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0; align-items: stretch !important; }
.free-trial-card > .row > .col-lg-5 {
    position: relative;
    padding: clamp(34px, 4.5vw, 60px);
    background: var(--lattice-olive) center / 100px 120px, var(--olive-700);
    color: rgba(249, 240, 224, .88);
}
.free-trial-card > .row > .col-lg-7 { padding: clamp(28px, 4vw, 54px); }
.free-trial-card .section-subtitle { color: var(--rose-100); }
.free-trial-card .section-subtitle::before, .free-trial-card .section-subtitle::after { background: var(--rose-300); }
.free-trial-card .section-title { color: var(--cream); font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.free-trial-card .section-desc { color: rgba(249, 240, 224, .86); margin: 0; }
.free-trial-guarantees { display: grid; gap: 14px; margin: 2rem 0 0; padding: 0; }
.guarantee-item { display: flex; align-items: center; gap: 12px; color: var(--cream); font-size: .95rem; font-weight: 500; }
.guarantee-item i {
    width: 34px; height: 41px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rose);
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
    color: var(--white);
    font-size: .95rem;
}
.trial-form-container { padding: 0; background: none; border: 0; }

/* ==========================================================================
   FOOTER CTA & FOOTER
   ========================================================================== */
.footer-cta-section {
    position: relative;
    padding: clamp(60px, 7vw, 96px) 0;
    background: var(--lattice-rose) center / 100px 120px, var(--rose);
    text-align: center;
}
.footer-cta-section .cta-content { position: relative; max-width: 820px; margin: 0 auto; padding: 0; background: none; box-shadow: none; }
.footer-cta-section .cta-content::before {
    content: "";
    display: block;
    width: 44px; height: 53px;
    margin: 0 auto 1.25rem;
    background: var(--frame-cream) center / contain no-repeat;
}
.footer-cta-section .cta-title { color: var(--white); font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.4; margin-bottom: 1rem; }
.footer-cta-section .cta-desc { color: rgba(255, 255, 255, .9); font-size: 1.08rem; max-width: 620px; margin: 0 auto 2rem; }

.site-footer { position: relative; background: var(--olive-800); color: rgba(249, 240, 224, .72); font-size: .94rem; }
.site-footer::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--lattice-cream) center / 100px 120px;
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000);
    mask-image: linear-gradient(90deg, transparent 40%, #000);
    pointer-events: none;
}
.site-footer > * { position: relative; }
.site-footer .footer-main-area { padding-top: clamp(56px, 6vw, 80px) !important; }
.footer-logo { max-height: 70px; width: auto; }
.footer-about-text { color: rgba(249, 240, 224, .72); line-height: 1.85; max-width: 360px; }
.footer-social-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(249, 240, 224, .3);
    color: var(--cream);
    font-size: .92rem;
}
.footer-social-btn:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }
.footer-widget-title { display: flex; align-items: center; gap: 10px; color: var(--cream); font-size: 1.05rem; margin-bottom: 1.3rem !important; }
.footer-widget-title::before { content: ""; width: 12px; height: 15px; background: var(--rose-300); -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
.footer-menu { padding: 0; margin: 0; list-style: none; }
.footer-menu li { margin-bottom: 10px; }
.footer-menu a { color: rgba(249, 240, 224, .72); }
.footer-menu a:hover { color: var(--rose-100); padding-left: 4px; }
.footer-menu .sub-menu { list-style: none; padding-left: 12px; margin-top: 8px; }
.footer-contact-list li { gap: 12px; margin-bottom: 14px !important; align-items: center !important; }
.footer-icon { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(249, 240, 224, .1); color: var(--rose-100); font-size: .85rem; margin: 0 !important; }
.footer-contact-list a, .footer-contact-list span { color: rgba(249, 240, 224, .8); }
.footer-contact-list a:hover { color: var(--rose-100); }
.footer-bottom-bar { border-top: 1px solid rgba(249, 240, 224, .14) !important; padding: 22px 0 !important; font-size: .86rem; background: rgba(0, 0, 0, .12); }
.footer-bottom-bar .text-muted { color: rgba(249, 240, 224, .6) !important; }
.footer-copy-link { color: var(--cream); font-weight: 500; }
.footer-copy-link:hover { color: var(--rose-100); }

/* Floating buttons */
.floating-buttons { position: fixed; right: 20px; bottom: 20px; z-index: 1040; display: flex; flex-direction: column; gap: 12px; }
.floating-btn { position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white) !important; font-size: 1.45rem; box-shadow: 0 14px 30px -12px rgba(52, 55, 31, .55); transition: transform var(--t-fast); }
.floating-btn:hover { transform: translateY(-3px) scale(1.04); }
.whatsapp-btn { background: var(--whatsapp); }
.trial-btn { background: var(--rose); }
.floating-btn-tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); padding: 7px 14px; border-radius: var(--pill); background: var(--olive-800); color: var(--cream); font-size: .8rem; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: var(--t-fast); }
.floating-btn:hover .floating-btn-tooltip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.notification-badge { position: absolute; top: -6px; right: -8px; padding: 2px 8px; border-radius: var(--pill); background: var(--olive); color: var(--on-olive); font-size: .62rem; font-weight: 700; border: 2px solid var(--white); line-height: 1.3; }
.back-to-top { position: fixed; left: 20px; bottom: 20px; z-index: 1040; display: none; width: 48px; height: 48px; padding: 0 !important; border-radius: 50% !important; background: var(--olive-700) !important; border: 0 !important; color: var(--cream) !important; box-shadow: var(--sh); line-height: 48px; text-align: center; font-size: 1.1rem; }
.back-to-top:hover { background: var(--rose) !important; color: var(--white) !important; }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.stats-section { position: relative; z-index: 2; margin-top: -30px; padding-bottom: 10px; }
.stats-container { padding: 10px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh); }
.stats-container .row { --bs-gutter-y: 0; }
.stat-item { position: relative; height: 100%; padding: 26px 16px; text-align: center; }
.stats-container .row > [class*="col-"] + [class*="col-"] .stat-item { border-left: 1px dashed var(--sand); }
.stat-number { display: block; font-family: var(--font-head); font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1.2; color: var(--rose); }
.stats-container .row > [class*="col-"]:nth-child(even) .stat-number { color: var(--olive-700); }
.stat-label { margin: 6px 0 0; color: var(--muted); font-size: .9rem; font-weight: 500; }

.story-section { background: var(--cream); }
.story-image-wrap { position: relative; max-width: 470px; margin: 0 auto; padding: 22px; }
.story-image-wrap::before { content: ""; position: absolute; inset: 0; background: var(--frame-olive) center / 100% 100% no-repeat; transform: translate(-16px, 14px); }
.story-img-frame { position: relative; }
.story-img-frame img {
    width: 100%; aspect-ratio: 100 / 120; object-fit: cover;
    border-radius: 0 !important;
    -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
    mask: var(--frame-mask) center / 100% 100% no-repeat;
}
.story-badge-floating {
    position: absolute; right: -14px; bottom: 60px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px 12px 12px;
    border-radius: var(--pill);
    background: var(--rose);
    color: var(--white);
    box-shadow: var(--sh-rose);
}
.story-badge-floating > i { width: 42px; height: 42px; border-radius: 50%; background: var(--white); color: var(--rose); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.story-badge-floating strong { display: block; color: var(--white); font-size: .9rem; line-height: 1.3; }
.story-badge-floating small { display: block; color: rgba(255, 255, 255, .85); font-size: .78rem; }
.story-content-wrap .section-title::after { display: none; }

.mission-section { background: var(--white); }
.mission-card { text-align: left; padding: 40px 36px; border-radius: var(--r-lg); background: var(--cream); box-shadow: none; }
.mission-card-header { gap: 6px; }
.mission-icon { width: 58px; height: 70px; font-size: 1.35rem; }
.mission-icon::before { background: var(--white); }
.mission-title { font-size: 1.35rem; }
.mission-desc { color: var(--text); }
.mission-desc p:last-child { margin-bottom: 0; }
.mission-section .row > [class*="col-"]:nth-child(even) .mission-card { background: var(--olive-50); }

.values-section { background: var(--lattice-sand) center / 100px 120px, var(--cream); }
.value-card { text-align: center; }
.value-header { flex-direction: column; gap: 4px; }
.value-step-badge { order: -1; font-family: var(--font-head); font-size: .8rem; font-weight: 700; color: var(--rose); letter-spacing: .12em; }
.value-number { font-family: var(--font-head); color: var(--rose); font-weight: 700; }
.value-title { font-size: 1.12rem; }
.value-desc { color: var(--muted); font-size: .94rem; }

.timeline-section { background: var(--white); }
.timeline-roadmap { position: relative; max-width: 960px; margin: 0 auto; }
.timeline-roadmap::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-left: 2px dashed var(--olive-200); }
.timeline-item { position: relative; width: 50%; padding: 0 50px 34px 0; }
.timeline-item-right { margin-left: 50%; padding: 0 0 34px 50px; }
.timeline-dot { position: absolute; top: 16px; right: -15px; width: 30px; height: 36px; background: var(--frame-rose) center / contain no-repeat, var(--white); -webkit-mask: none; z-index: 1; }
.timeline-dot i { display: none; }
.timeline-item-right .timeline-dot { right: auto; left: -15px; background-image: var(--frame-olive); }
.timeline-content { padding: 24px 28px; border-radius: var(--r); background: var(--cream); transition: var(--t); }
.timeline-content:hover { background: var(--white); box-shadow: var(--sh); }
.timeline-year-badge { display: inline-block; padding: 3px 14px; border-radius: var(--pill); background: var(--rose); color: var(--white); font-size: .8rem; font-weight: 700; }
.timeline-item-right .timeline-year-badge { background: var(--olive-700); }
.timeline-title { font-size: 1.12rem; margin: .6rem 0 .3rem !important; }
.timeline-description { color: var(--muted); font-size: .94rem; }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-info-section { background: var(--cream); padding-bottom: calc(var(--section-y) / 2) !important; }
.contact-card { height: 100%; padding: 36px 26px 30px; text-align: center; background: var(--white); border-radius: var(--arch); box-shadow: var(--sh-sm); transition: transform var(--t), box-shadow var(--t); }
.contact-card:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.info-icon { margin: 0 auto 1rem; }
.whatsapp-icon { color: #149447; }
.info-title { font-size: 1.1rem; margin-bottom: .35rem; }
.info-details { color: var(--muted); font-size: .94rem; word-break: break-word; }
.info-details a { color: var(--heading); font-weight: 500; }
.info-details a:hover { color: var(--rose); }
.contact-social-strip { padding: 26px; border-radius: var(--pill); background: var(--white); }
.social-strip-title { color: var(--muted); font-size: .9rem; font-weight: 500; }
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.social-link { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--olive-200); color: var(--olive-800); font-size: 1.05rem; }
.social-link:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }

.contact-form-section:not(.free-trial-section) { background: var(--cream); padding: calc(var(--section-y) / 2) 0 var(--section-y) !important; }
.contact-lead-wrap .section-title::after { display: none; }
.contact-lead-desc { color: var(--muted); font-size: 1.05rem; }
.contact-features-list { display: grid; gap: 16px; }
.contact-feature-item { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--r); background: var(--white); }
.contact-feature-icon { width: 48px; height: 58px; font-size: 1.15rem; }
.contact-feature-content h6 { font-size: .98rem; margin-bottom: 3px; }
.contact-feature-content p { font-size: .88rem; color: var(--muted); margin: 0; }
.map-frame { border-radius: var(--r-lg); overflow: hidden; line-height: 0; border: 6px solid var(--white); box-shadow: var(--sh-sm); }
.map-frame iframe { width: 100% !important; height: 320px; border: 0; }
.contact-form-card { position: sticky; top: calc(var(--header-h) + 24px); padding: clamp(28px, 4vw, 46px); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-lg); border-top: 5px solid var(--rose); }
.form-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--rose); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.form-title { font-size: 1.55rem; margin-bottom: .35rem; }
.form-subtitle { color: var(--muted); margin: 0; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-section { background: var(--cream); }
.pricing-card {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column;
    padding: 50px 34px 36px;
    text-align: center;
    background: var(--white);
    border-radius: var(--arch);
    box-shadow: var(--sh-sm);
    transition: transform var(--t), box-shadow var(--t);
}
.pricing-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.pricing-card .pricing-icon { margin: 0 auto 1rem; }
.pricing-name { font-size: 1.35rem; margin-bottom: .4rem; }
.pricing-description { color: var(--muted); font-size: .94rem; margin-bottom: 1.4rem; }
.pricing-price-wrapper { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 18px 0; margin-bottom: 1.5rem; border-top: 1px dashed var(--sand); border-bottom: 1px dashed var(--sand); }
.pricing-price { font-family: var(--font-head); font-size: clamp(2.3rem, 4vw, 2.9rem); font-weight: 700; line-height: 1; color: var(--rose); }
.pricing-duration { color: var(--muted); font-size: .95rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 12px; text-align: left; }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: .95rem; }
.pricing-features i { color: var(--olive-600); margin-top: 3px; flex-shrink: 0; }
.pricing-btn { width: 100%; margin-top: auto; }
.pricing-card.featured { padding-top: 70px; background: var(--lattice-rose) center / 100px 120px, var(--rose); color: rgba(255, 255, 255, .9); transform: translateY(-12px); box-shadow: var(--sh-rose); }
.pricing-card.featured:hover { transform: translateY(-18px); }
.pricing-card.featured .pricing-name, .pricing-card.featured .pricing-price { color: var(--white); }
.pricing-card.featured .pricing-description, .pricing-card.featured .pricing-duration, .pricing-card.featured .pricing-features li { color: rgba(255, 255, 255, .9); }
.pricing-card.featured .pricing-price-wrapper { border-color: rgba(255, 255, 255, .35); }
.pricing-card.featured .pricing-features i { color: var(--cream); }
.pricing-card.featured .pricing-icon { background-image: var(--frame-cream); color: var(--white); }
.pricing-card.featured .pricing-icon::before { background: rgba(255, 255, 255, .15); }
.popular-badge { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: var(--pill); background: var(--cream); color: var(--rose-700); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pricing-custom-card { border-radius: var(--r-lg); text-align: left; padding: 36px; background: var(--olive-50); box-shadow: none; }
.pricing-custom-card:hover { transform: none; }
.pricing-custom-card .pricing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.custom-price { font-size: 2rem; color: var(--olive-700); }
.faq-section.faqs-section { padding-top: 0 !important; background: var(--cream); }

/* ==========================================================================
   BLOG, SINGLE POST, SIDEBAR, COMMENTS
   ========================================================================== */
.blog-archive-section, .article, .single-article-section, .default-page-section { background: var(--cream); }
.blog-card { height: 100%; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--t), box-shadow var(--t); }
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.blog-thumb { position: relative; display: block; margin: 12px 12px 0; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 999px 999px 12px 12px / 200px 200px 12px 12px; background: var(--olive-100); }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.blog-card:hover .blog-thumb img { transform: scale(1.06); }
.blog-overlay { display: none; }
.blog-category { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 14px; border-radius: var(--pill); background: var(--rose); color: var(--white); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.blog-content { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 26px; text-align: center; }
.blog-meta { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--olive-700); font-size: .82rem; font-weight: 500; margin-bottom: .5rem; }
.blog-meta i { color: var(--olive); }
.blog-title { font-size: 1.1rem !important; line-height: 1.55; margin-bottom: .6rem; }
.blog-title a { color: var(--heading); }
.blog-title a:hover { color: var(--rose); }
.blog-excerpt { color: var(--muted); font-size: .92rem; margin-bottom: 1.25rem; }
.blog-card .btn-primary-custom { margin-top: auto; background: transparent; border-color: var(--rose-100); color: var(--rose) !important; box-shadow: none; padding: 11px 22px; font-size: .88rem; }
.blog-card .btn-primary-custom:hover { background: var(--rose); border-color: var(--rose); color: var(--white) !important; }
.read-more { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: .9rem; }

.pagination-wrapper, .navigation.pagination { display: flex; justify-content: center; }
.nav-links, .pagination-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-numbers { min-width: 46px; height: 46px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pill); background: var(--white); color: var(--heading); font-weight: 500; font-size: .92rem; }
a.page-numbers:hover { background: var(--olive-100); color: var(--olive-800); }
.page-numbers.current { background: var(--rose); color: var(--white); }
.page-numbers.dots { background: transparent; }

.single-post-card, .page-card, .comments-card { padding: clamp(24px, 4vw, 52px); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-sm); }
.post-header-meta { font-size: .88rem; color: var(--muted); padding-bottom: 1.2rem; border-bottom: 1px dashed var(--sand); }
.post-cat-badge { padding: 4px 14px; border-radius: var(--pill); background: var(--rose); color: var(--white); font-weight: 600; font-size: .76rem; }
.post-cat-badge:hover { background: var(--olive-700); color: var(--cream); }
.post-meta-item i { color: var(--olive-600); }
.single-post-thumb img { border-radius: var(--r) !important; }

.entry-content { color: var(--text); font-size: 1.04rem; line-height: 1.95; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5 { margin: 2.2rem 0 1rem; }
.entry-content h2 { font-size: 1.7rem; }
.entry-content h3 { font-size: 1.35rem; }
.entry-content h4 { font-size: 1.15rem; }
.entry-content a { text-decoration: underline; text-decoration-color: var(--rose-100); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.entry-content a:hover { text-decoration-color: var(--rose); }
.entry-content a.mini-cta-btn, .entry-content a.btn-primary-custom { text-decoration: none; }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; margin-bottom: 1.25rem; }
.entry-content li { margin-bottom: .5rem; }
.entry-content ul li::marker { color: var(--rose); }
.entry-content ol li::marker { color: var(--olive-700); font-weight: 700; }
.entry-content img { border-radius: var(--r); height: auto; }
.entry-content blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 28px 32px 28px 84px;
    border-radius: var(--r);
    background: var(--olive-50);
    color: var(--heading);
    font-family: var(--font-head);
    font-size: 1.08rem;
    font-weight: 500;
}
.entry-content blockquote::before { content: "\201C"; position: absolute; left: 26px; top: 6px; font-size: 4rem; line-height: 1; color: var(--rose); font-family: Georgia, serif; }
.entry-content blockquote p:last-child { margin: 0; }
.entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 1.5rem; font-size: .95rem; }
.entry-content th, .entry-content td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content th { background: var(--olive-50); color: var(--heading); }
.entry-content tr:last-child td { border-bottom: 0; }
.related-posts .section-title-sm { display: flex; align-items: center; gap: 12px; }
.related-posts .section-title-sm::before { content: ""; width: 16px; height: 19px; background: var(--rose); -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }

.quran-mini-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 2rem 0; padding: 20px 20px 20px 30px; border-radius: var(--pill); background: var(--olive-700); }
.mini-cta-text { font-family: var(--font-head); font-weight: 700; color: var(--cream); font-size: 1.05rem; }
.mini-cta-btn { padding: 12px 24px; }

.sidebar-wrapper { position: sticky; top: calc(var(--header-h) + 24px); }
.sidebar-wrapper .widget { margin-bottom: 24px; padding: 26px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-sm); }
.sidebar-wrapper .widget-title { display: flex; align-items: center; gap: 10px; font-size: 1.08rem !important; margin-bottom: 1rem !important; padding-bottom: .8rem; border-bottom: 1px dashed var(--sand); }
.sidebar-wrapper .widget-title::before { content: ""; width: 12px; height: 15px; background: var(--rose); -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
.sidebar-wrapper ul { list-style: none; padding: 0; margin: 0; }
.sidebar-wrapper ul li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.sidebar-wrapper ul li:last-child { border-bottom: 0; }
.sidebar-wrapper ul li a { color: var(--text); font-weight: 500; }
.sidebar-wrapper ul li a:hover { color: var(--rose); }
.courses-widget { display: grid; gap: 12px; }
.courses-widget .course-item { display: flex; gap: 14px; align-items: center; padding: 6px; border-radius: var(--r-sm); }
.courses-widget .course-item:hover { background: var(--cream); }
.courses-widget .course-thumb { flex-shrink: 0; width: 60px; height: 72px; margin: 0; aspect-ratio: auto; border-radius: 0; -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
.courses-widget .course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.courses-widget .course-title { font-size: .92rem; margin-bottom: 2px; text-align: left; }
.courses-widget .view-course { font-size: .8rem; font-weight: 600; }
.btn-view-all { width: 100%; margin-top: 8px; background: var(--olive-700); color: var(--cream) !important; padding: 12px; }
.btn-view-all:hover { background: var(--rose); }

.comments-title, .comment-reply-title { font-size: 1.35rem; margin-bottom: 1.25rem; }
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.comment-list .children { list-style: none; padding-left: 28px; }
.comment-body { padding: 20px 22px; border-radius: var(--r); background: var(--cream); margin-bottom: 16px; }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--heading); }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: .8rem; margin: 4px 0 10px; }
.comment-metadata a { color: var(--muted); }
.comment-form .submit { width: auto; }

/* ==========================================================================
   SINGLE COURSE
   ========================================================================== */
.course-overview { background: var(--cream); }
.course-overview .section-title::after { display: none; }
.course-thumbnail { position: relative; max-width: 480px; margin: 0 auto; padding: 18px; background: var(--frame-rose) center / 100% 100% no-repeat; }
.course-thumbnail img { width: 100%; aspect-ratio: 100 / 120; object-fit: cover; display: block; -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
.course-badge-lg { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); padding: 6px 18px; border-radius: var(--pill); background: var(--rose); color: var(--white); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.course-meta-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.course-meta-list li { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: var(--pill); background: var(--white); color: var(--text); font-size: .95rem; }
.course-meta-list li i { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--olive-100); color: var(--olive-800); }
.course-meta-list li strong { color: var(--heading); }

.outcomes-section { background: var(--white); }
.outcomes-section + .outcomes-section { background: var(--cream); }
.overview-card { padding: clamp(24px, 4vw, 52px); border-radius: var(--r-lg); background: var(--cream); }
.outcomes-section + .outcomes-section .overview-card { background: var(--white); }
.overview-content { font-size: 1.02rem; line-height: 1.95; }
.overview-content h2, .overview-content h3, .overview-title { font-size: 1.3rem; margin: 1.5rem 0 .75rem; }
.overview-content > *:first-child { margin-top: 0; }
.overview-content ul li::marker { color: var(--rose); }
.outcomes-section .row > [class*="col-"] { margin-bottom: 26px; }
.outcome-card { height: 100%; display: flex; gap: 22px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-sm); transition: transform var(--t), box-shadow var(--t); }
.outcome-card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.outcome-image { position: relative; width: 38%; flex-shrink: 0; aspect-ratio: 100 / 120; }
.outcome-image img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
.outcome-number { position: absolute; right: -8px; top: 12px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rose); color: var(--white); font-family: var(--font-head); font-weight: 700; border: 3px solid var(--white); }
.outcome-content { padding: 6px 6px 6px 0; }
.outcome-title { font-size: 1.1rem; margin-bottom: .45rem; }
.outcome-content p { color: var(--muted); font-size: .93rem; margin: 0; }

.learn-section { background: var(--white); }
.learn-section .row > [class*="col-"] { margin-bottom: 22px; }
.learn-card { height: 100%; display: flex; gap: 18px; align-items: flex-start; padding: 26px; border-radius: var(--r); background: var(--cream); transition: background-color var(--t), box-shadow var(--t); flex-wrap: wrap; }
.learn-card:hover { background: var(--white); box-shadow: var(--sh); }
.learn-card-icon { width: 54px; height: 65px; font-size: 1.25rem; }
.learn-card-icon::before { background: var(--white); }
.learn-card h4 { flex: 1; min-width: 60%; margin: 16px 0 0; }
.learn-card p { flex-basis: 100%; }

.full-cta-1 { position: relative; overflow: hidden; padding: clamp(76px, 9vw, 120px) 0; background: var(--lattice-rose) center / 100px 120px, var(--rose); color: rgba(255, 255, 255, .92); }
.full-cta-1 .cta-title, .full-cta-2 .cta-title, .cta-section .cta-title { color: var(--white); font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.4; margin-bottom: 1rem; }
.full-cta-1 .cta-description { color: rgba(255, 255, 255, .92); font-size: 1.08rem; }
.full-cta-2 { background: var(--olive-800); overflow: hidden; }
.cta-image-section { height: 100%; min-height: 460px; background-size: cover; background-position: center; background-color: var(--olive-700); -webkit-mask: radial-gradient(120% 100% at 0% 50%, #000 70%, transparent 70.5%); mask: radial-gradient(120% 100% at 0% 50%, #000 70%, transparent 70.5%); }
.cta-content-section { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 90px); color: rgba(249, 240, 224, .82); background: var(--lattice-cream) center / 100px 120px; }
.full-cta-2 .cta-title { color: var(--cream) !important; }
.full-cta-2 .cta-description { color: rgba(249, 240, 224, .85); }
.cta-features { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 10px; }
.cta-features li { display: flex; align-items: center; gap: 10px; color: var(--cream); }
.cta-features i { color: var(--rose-300); }
.full-cta-3 { background: var(--cream); }
.cta-box-centered { position: relative; text-align: center; padding: clamp(40px, 5vw, 70px); border-radius: var(--arch); background: var(--white); box-shadow: var(--sh); }
.cta-box-centered::before { content: ""; display: block; width: 44px; height: 53px; margin: 0 auto 1rem; background: var(--frame-rose) center / contain no-repeat; }
.cta-box-centered h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.cta-box-centered > p { color: var(--muted); font-size: 1.06rem; max-width: 640px; margin: 0 auto 2rem; }
.cta-box-centered > p.mt-4 { margin: 1.5rem auto 0; font-size: .9rem; color: var(--muted) !important; }
.cta-section:not(.alternate) { position: relative; padding: clamp(76px, 9vw, 116px) 0 !important; background: var(--lattice-olive) center / 100px 120px, var(--olive-700); color: rgba(249, 240, 224, .88); text-align: center; }
.cta-section:not(.alternate) .cta-title { color: var(--cream); }
.cta-section:not(.alternate) .cta-content p { color: rgba(249, 240, 224, .88); }

/* ==========================================================================
   SINGLE TEACHER
   ========================================================================== */
.teacher-single-section { background: var(--cream); }
.teacher-profile-sidebar.sticky-top { top: calc(var(--header-h) + 24px); z-index: 1; }
.teacher-sidebar-card { padding: 30px 28px; border-radius: var(--arch); background: var(--white); box-shadow: var(--sh); text-align: center; }
.teacher-avatar-frame { width: 180px; height: 216px; margin: 0 auto; padding: 10px; background: var(--frame-rose) center / 100% 100% no-repeat; }
.teacher-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: top; -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
.teacher-verified-badge { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: var(--pill); background: var(--olive-700); color: var(--cream); font-size: .78rem; font-weight: 600; }
.teacher-verified-badge i { color: var(--rose-100) !important; }
.teacher-sidebar-name { font-size: 1.4rem; }
.teacher-position-badge { display: inline-block; color: var(--rose); font-size: .88rem; font-weight: 600; font-style: italic; }
.teacher-rating-strip .stars { color: var(--rose) !important; }
.teacher-sidebar-quote { padding: 16px 18px; border-radius: var(--r); background: var(--olive-50); color: var(--text); font-size: .93rem; line-height: 1.75; font-style: italic; }
.teacher-meta-box { text-align: left; border-top: 1px dashed var(--sand); border-bottom: 1px dashed var(--sand); }
.teacher-meta-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; font-size: .88rem; }
.teacher-meta-row + .teacher-meta-row { border-top: 1px dashed var(--line); }
.meta-label { display: flex; align-items: center; color: var(--muted); font-weight: 500; white-space: nowrap; }
.meta-label i { color: var(--rose) !important; }
.meta-val { color: var(--heading); font-weight: 600; text-align: right; }
.teacher-action-buttons .btn-primary-custom { width: 100%; }
.btn-whatsapp-outline { width: 100%; background: transparent; border-color: rgba(37, 211, 102, .5); color: #149447 !important; padding: 12px 24px; }
.btn-whatsapp-outline:hover { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--white) !important; }
.teacher-bio-card, .teacher-highlights-card { padding: clamp(24px, 4vw, 46px); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-sm); }
.bio-header .section-subtitle { margin-bottom: .5rem; }
.bio-title { font-size: 1.7rem; }
.highlights-title { font-size: 1.3rem; }
.highlights-title i { color: var(--rose) !important; }
.teacher-highlights-card { background: var(--olive-50); box-shadow: none; }
.highlight-item { height: 100%; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r); background: var(--white); }
.highlight-icon { width: 46px; height: 55px; font-size: 1.05rem; }
.highlight-text h5 { font-size: .98rem; margin-bottom: 4px; }
.highlight-text p { font-size: .87rem; color: var(--muted); margin: 0; }
.teacher-cta-banner { position: relative; overflow: hidden; padding: clamp(34px, 4vw, 54px); border-radius: var(--r-lg); background: var(--lattice-rose) center / 100px 120px, var(--rose); color: rgba(255, 255, 255, .92); }
.teacher-cta-banner .cta-title { color: var(--white); font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
.teacher-cta-banner .cta-desc { color: rgba(255, 255, 255, .9); }
.teacher-cta-banner .btn-primary-custom { background: var(--cream); border-color: var(--cream); color: var(--rose-700) !important; box-shadow: none; }
.teacher-cta-banner .btn-primary-custom:hover { background: transparent; color: var(--cream) !important; }

/* ==========================================================================
   TAXONOMY & STATE PAGES
   ========================================================================== */
.term-description { color: var(--muted); font-size: 1.06rem; max-width: 680px; }
.related-categories-section { background: var(--cream); }
.category-card { display: block; height: 100%; border-radius: var(--arch); background: var(--white); box-shadow: var(--sh-sm); transition: transform var(--t), box-shadow var(--t); }
.category-card:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.category-card-body { padding-top: 36px !important; }
.category-icon-box { margin: 0 auto 1rem; }
.category-card-title { font-size: 1.1rem; }
.category-card-desc { color: var(--muted); font-size: .9rem; }
.category-count-badge { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: var(--pill); background: var(--olive-100); color: var(--olive-800); font-size: .8rem; font-weight: 600; }

.state-section { background: var(--cream); }
.state-card { max-width: 620px; margin: 0 auto; padding: clamp(36px, 5vw, 60px); text-align: center; border-radius: var(--arch); background: var(--white); box-shadow: var(--sh-lg); }
.state-icon { width: 90px; height: 108px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; background: var(--frame-rose) center / contain no-repeat; color: var(--rose); font-size: 2.3rem; }
.state-icon.is-success { background-image: var(--frame-olive); color: var(--success); }
.state-code { font-family: var(--font-head); font-size: clamp(4rem, 12vw, 6.5rem); font-weight: 700; line-height: 1; color: var(--rose); margin-bottom: .5rem; }
.state-card h2 { font-size: 1.7rem; margin-bottom: .75rem; }
.state-card p { color: var(--muted); margin-bottom: 1.75rem; }
.state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ==========================================================================
   REVEAL
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--reveal-delay, 0s); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .pricing-card.featured[data-reveal].is-visible { transform: translateY(-12px); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
    .header-main .navbar-nav .nav-link { padding: 10px 10px !important; font-size: .92rem; }
    .hero-chip-1 { left: -10px; }
    .hero-chip-2 { right: -10px; }
}

@media (max-width: 991.98px) {
    :root { --header-h: 74px; }
    .site-logo { max-height: 52px; }

    .header-main .navbar-collapse {
        margin: 0 -6px 18px;
        padding: 14px;
        border-radius: var(--r-lg);
        background: var(--white);
        box-shadow: var(--sh-lg);
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
    .header-main .navbar-nav { gap: 2px; align-items: stretch !important; }
    .header-main .navbar-nav > .nav-item { justify-content: space-between; border-bottom: 1px dashed var(--line); }
    .header-main .navbar-nav > .nav-item:last-child { border-bottom: 0; }
    .header-main .navbar-nav > .nav-item > .nav-link { flex: 1; }
    .header-main .navbar-nav > .nav-item > .nav-link::after { display: none; }
    .header-main .navbar-nav .dropdown-menu { display: none !important; position: static; flex-basis: 100%; width: 100%; min-width: 0; box-shadow: none; border: 0; border-left: 2px solid var(--rose-100); border-radius: 0; margin: 2px 0 10px 12px; padding: 0 0 0 8px; }
    .header-main .navbar-nav .dropdown-menu.show { display: block !important; }
    .header-main .dropdown-menu .dropdown-submenu-item { flex-wrap: wrap; }
    .header-main .dropdown-submenu-item > .dropdown-item { flex: 1 1 0; min-width: 0; }
    .dropdown-arrow { display: none; }
    .dropdown-toggle-split, .dropdown-toggle-split-nested { width: 36px; height: 36px; background: var(--olive-50); color: var(--olive-800); font-size: .8rem; }
    .nav-item.show > .dropdown-toggle-split, .dropdown-submenu-item.show > .dropdown-toggle-split-nested { background: var(--rose); color: var(--white); transform: rotate(180deg); }
    .nav-cta-wrapper { margin-left: 0 !important; }
    .header-cta { width: 100%; padding: 14px 20px; }

    .hero-section.has-media::before { top: auto; width: 100%; height: 46%; border-radius: 160px 160px 0 0; }
    .hero-content.text-lg-start { text-align: center; }
    .hero-content .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-media { max-width: 360px; margin-top: 10px; }
    .hero-trust-strip > [class*="col-"]:nth-child(3) .trust-item { border-left: 0 !important; }
    .hero-trust-strip > [class*="col-"]:nth-child(-n+2) .trust-item { border-bottom: 1px dashed var(--sand); }

    .about-image-wrapper, .story-image-wrap { max-width: 400px; }
    .cta-banner-wrapper .cta-content { text-align: center; }
    .cta-subtitle-pill::before { display: none; }

    .timeline-roadmap::before { left: 14px; transform: none; }
    .timeline-item, .timeline-item-right { width: 100%; margin-left: 0; padding: 0 0 26px 50px; }
    .timeline-dot, .timeline-item-right .timeline-dot { left: 0; right: auto; }

    .stats-container .row > [class*="col-"]:nth-child(3) .stat-item { border-left: 0; }
    .contact-form-card, .sidebar-wrapper, .teacher-profile-sidebar.sticky-top { position: static; }
    .cta-image-section { min-height: 320px; -webkit-mask: none; mask: none; }
    .pricing-card.featured { transform: none; }
    .pricing-custom-card, .pricing-custom-card .pricing-name, .pricing-custom-card .pricing-description { text-align: center !important; }
    .pricing-custom-card .pricing-features { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
    .free-trial-card > .row > .col-lg-5 { text-align: center; }
    .free-trial-card .free-trial-guarantees { justify-items: center; }
}

@media (max-width: 767.98px) {
    body { font-size: 15.5px; }
    .container { --bs-gutter-x: 1.5rem; }

    .category-filter-wrapper { justify-content: flex-start; margin: 0 -12px; }
    .category-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 12px; gap: 22px; }
    .category-filters::-webkit-scrollbar { display: none; }

    .hero-chip { display: none; }
    .trust-item { padding: 16px; gap: 10px; flex-direction: column; text-align: center; }
    .trust-number { font-size: 1.05rem; }

    .about-floating-badge { left: 0; bottom: 30px; }
    .story-badge-floating { right: 0; bottom: 30px; }

    .testimonials-section .carousel { padding: 0; margin-bottom: 56px; }
    .testimonials-section .carousel-control-prev, .testimonials-section .carousel-control-next { top: auto; bottom: -58px; width: 50px; }
    .testimonials-section .carousel-control-prev { left: calc(50% - 58px); }
    .testimonials-section .carousel-control-next { right: calc(50% - 58px); }

    .accordion .accordion-button { padding: 20px 2px; font-size: .98rem; gap: 12px; }
    .accordion .accordion-body, .modern-faq-accordion .accordion-body { padding: 0 4px 22px; }
    .faq-help-card { border-radius: var(--r-lg); text-align: center; justify-content: center; }

    .stats-container .row > [class*="col-"] .stat-item { border-left: 0 !important; }
    .stats-container .row > [class*="col-"]:not(:last-child) .stat-item { border-bottom: 1px dashed var(--sand); }

    .area-card { flex-direction: column; align-items: center; text-align: center; }
    .outcome-card { flex-direction: column; text-align: center; }
    .outcome-image { width: 60%; }

    .floating-buttons { right: 14px; bottom: 14px; gap: 10px; }
    .floating-btn { width: 50px; height: 50px; font-size: 1.3rem; }
    .floating-btn-tooltip { display: none; }
    .back-to-top { left: 14px; bottom: 14px; }
    .footer-bottom-bar { padding-bottom: 84px !important; }

    .teacher-meta-row { flex-direction: column; gap: 2px; }
    .meta-val { text-align: left; }
    .quran-mini-cta { border-radius: var(--r-lg); justify-content: center; text-align: center; }
    .contact-social-strip { border-radius: var(--r-lg); }
}

@media (max-width: 575.98px) {
    .hero-actions > a { width: 100%; }
    .pricing-card { padding: 44px 22px 30px; }
    .feature-card, .why-card, .value-card { padding: 40px 24px 30px; }
}