.qv-tajweed-hero, .qv-tajweed-hero * { box-sizing: border-box; } .qv-tajweed-hero { --qv-green: #123f32; --qv-green-2: #1b5746; --qv-gold: #d9ad2f; --qv-muted: #62736c; --qv-line: #dce7e1; --qv-soft: #f4f8f6; position: relative; overflow: hidden; padding: 95px 24px; background: radial-gradient( circle at 87% 13%, rgba(217,173,47,.12), transparent 28% ), linear-gradient( 135deg, #f8faf9 0%, #ffffff 62%, #f5f9f7 100% ); font-family: Arial, sans-serif; } .qv-tajweed-hero::before { content: ""; position: absolute; width: 330px; height: 330px; left: -180px; bottom: -190px; border: 1px solid rgba(18,63,50,.08); border-radius: 50%; } .qv-tajweed-hero__inner { position: relative; z-index: 2; width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.06fr .94fr; gap: 70px; align-items: center; } .qv-tajweed-hero__eyebrow { display: inline-block; margin-bottom: 15px; color: #a77d17; font-size: 10px; line-height: 1.5; font-weight: 800; letter-spacing: .14em; } .qv-tajweed-hero h1 { max-width: 680px; margin: 0 0 22px; color: var(--qv-green); font-size: clamp(41px, 5vw, 62px); line-height: 1.05; letter-spacing: -.035em; } .qv-tajweed-hero__lead { max-width: 690px; margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.85; } .qv-tajweed-hero__actions { margin-top: 31px; display: flex; flex-wrap: wrap; gap: 11px; } .qv-tajweed-hero__btn { min-height: 50px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; text-decoration: none !important; font-size: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .qv-tajweed-hero__btn:hover { transform: translateY(-2px); } .qv-tajweed-hero__btn--gold { background: var(--qv-gold); color: #ffffff !important; box-shadow: 0 10px 25px rgba(217,173,47,.20); } .qv-tajweed-hero__btn--outline { border: 1px solid var(--qv-green); background: #ffffff; color: var(--qv-green) !important; } .qv-tajweed-hero__btn--outline:hover { background: #f4f8f6; } .qv-tajweed-hero__trust { margin-top: 36px; padding-top: 25px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; border-top: 1px solid var(--qv-line); } .qv-tajweed-hero__trust strong, .qv-tajweed-hero__trust span { display: block; } .qv-tajweed-hero__trust strong { margin-bottom: 5px; color: var(--qv-green); font-size: 12px; line-height: 1.4; } .qv-tajweed-hero__trust span { color: #75837d; font-size: 10px; line-height: 1.5; } .qv-tajweed-hero__visual { position: relative; min-height: 510px; padding: 58px 47px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(18,63,50,.10); border-radius: 28px; background: radial-gradient( circle at top right, rgba(217,173,47,.16), transparent 38% ), linear-gradient( 145deg, #123f32 0%, #194d3e 100% ); box-shadow: 0 28px 70px rgba(18,63,50,.14); } .qv-tajweed-hero__arabic { margin-bottom: 18px; color: #ead079; direction: rtl; font-family: Georgia, "Times New Roman", serif; font-size: 27px; line-height: 1.6; } .qv-tajweed-hero__visual-label { margin-bottom: 11px; color: rgba(255,255,255,.53); font-size: 9px; font-weight: 800; letter-spacing: .14em; } .qv-tajweed-hero__visual h2 { margin: 0 0 12px; color: #ffffff; font-size: 35px; line-height: 1.15; } .qv-tajweed-hero__visual > p { max-width: 400px; margin: 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.7; } .qv-tajweed-path { margin-top: 32px; } .qv-tajweed-path__item { display: flex; align-items: center; gap: 14px; } .qv-tajweed-path__number { flex: 0 0 auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); color: #ead079; font-size: 9px; font-weight: 800; } .qv-tajweed-path__item strong, .qv-tajweed-path__item small { display: block; } .qv-tajweed-path__item strong { margin-bottom: 3px; color: #ffffff; font-size: 13px; } .qv-tajweed-path__item small { color: rgba(255,255,255,.54); font-size: 10px; } .qv-tajweed-path__line { width: 1px; height: 22px; margin: 5px 0 5px 18px; background: rgba(255,255,255,.15); } .qv-tajweed-hero__floating { position: absolute; min-width: 155px; padding: 13px 15px; border: 1px solid rgba(18,63,50,.08); border-radius: 11px; background: #ffffff; box-shadow: 0 15px 35px rgba(0,0,0,.11); } .qv-tajweed-hero__floating strong, .qv-tajweed-hero__floating span { display: block; } .qv-tajweed-hero__floating strong { margin-bottom: 3px; color: var(--qv-green); font-size: 11px; } .qv-tajweed-hero__floating span { color: #7a8882; font-size: 9px; } .qv-tajweed-hero__floating--top { top: 45px; right: -30px; } .qv-tajweed-hero__floating--bottom { bottom: 45px; left: -35px; } @media (max-width: 1050px) { .qv-tajweed-hero__inner { gap: 45px; } .qv-tajweed-hero__floating--top { right: 15px; } .qv-tajweed-hero__floating--bottom { left: 15px; } } @media (max-width: 880px) { .qv-tajweed-hero { padding: 70px 20px; } .qv-tajweed-hero__inner { grid-template-columns: 1fr; } .qv-tajweed-hero__content { text-align: center; } .qv-tajweed-hero__lead { margin-left: auto; margin-right: auto; } .qv-tajweed-hero__actions { justify-content: center; } .qv-tajweed-hero__trust { text-align: left; } .qv-tajweed-hero__visual { max-width: 650px; width: 100%; margin: 0 auto; } } @media (max-width: 600px) { .qv-tajweed-hero { padding: 55px 17px; } .qv-tajweed-hero h1 { font-size: 38px; } .qv-tajweed-hero__actions { display: grid; grid-template-columns: 1fr; } .qv-tajweed-hero__btn { width: 100%; } .qv-tajweed-hero__trust { grid-template-columns: 1fr; text-align: center; } .qv-tajweed-hero__visual { min-height: auto; padding: 45px 25px; } .qv-tajweed-hero__arabic { font-size: 23px; } .qv-tajweed-hero__visual h2 { font-size: 30px; } .qv-tajweed-hero__floating { position: static; margin-top: 14px; } } .qv-tajweed-parent-link, .qv-tajweed-parent-link * { box-sizing: border-box; } .qv-tajweed-parent-link { padding: 17px 24px; background: #f7faf8; border-top: 1px solid #e2ebe6; border-bottom: 1px solid #e2ebe6; font-family: Arial, sans-serif; } .qv-tajweed-parent-link__inner { width: min(1180px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; } .qv-tajweed-parent-link span { color: #687770; font-size: 13px; line-height: 1.6; } .qv-tajweed-parent-link a { color: #123f32 !important; text-decoration: none !important; font-size: 13px; font-weight: 800; white-space: nowrap; } .qv-tajweed-parent-link a:hover { color: #a77d17 !important; } @media (max-width: 650px) { .qv-tajweed-parent-link__inner { display: block; } .qv-tajweed-parent-link a { display: block; margin-top: 6px; white-space: normal; } } .qv-tajweed-program, .qv-tajweed-program * { box-sizing: border-box; } .qv-tajweed-program { --qv-green: #123f32; --qv-green-2: #19503f; --qv-gold: #d9ad2f; --qv-muted: #64736d; --qv-line: #dce7e1; --qv-soft: #f7faf8; padding: 90px 24px; background: #ffffff; font-family: Arial, sans-serif; } .qv-tajweed-program__inner { width: min(1180px, 100%); margin: 0 auto; } .qv-tajweed-program__header { max-width: 860px; margin: 0 auto 52px; text-align: center; } .qv-tajweed-program__eyebrow { display: inline-block; margin-bottom: 13px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-tajweed-program__header h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(34px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .qv-tajweed-program__header p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-tajweed-program__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: stretch; } .qv-tajweed-program__part { padding: 35px 32px; border: 1px solid var(--qv-line); border-radius: 20px; background: linear-gradient( 180deg, #ffffff 0%, #fbfdfc 100% ); } .qv-tajweed-program__part--featured { border-color: rgba(217,173,47,.48); background: linear-gradient( 180deg, #fffefa 0%, #ffffff 100% ); box-shadow: 0 18px 45px rgba(18,63,50,.07); } .qv-tajweed-program__part-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .qv-tajweed-program__number { flex: 0 0 auto; width: 47px; height: 47px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--qv-green); color: #ffffff; font-size: 11px; font-weight: 800; } .qv-tajweed-program__number--gold { background: var(--qv-gold); } .qv-tajweed-program__arabic { display: block; margin-bottom: 3px; direction: rtl; text-align: left; color: #a77d17; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 700; } .qv-tajweed-program__part h3 { margin: 0; color: var(--qv-green); font-size: 27px; line-height: 1.25; } .qv-tajweed-program__intro { margin: 0 0 27px; color: var(--qv-muted); font-size: 14px; line-height: 1.75; } .qv-tajweed-lessons { display: grid; gap: 12px; } .qv-tajweed-lesson { display: flex; gap: 14px; padding: 17px; border: 1px solid #e7eeea; border-radius: 12px; background: #ffffff; } .qv-tajweed-lesson__count { flex: 0 0 auto; width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #edf4f1; color: var(--qv-green); font-size: 9px; font-weight: 800; } .qv-tajweed-lesson strong { display: block; margin-bottom: 5px; color: var(--qv-green); font-size: 14px; line-height: 1.4; } .qv-tajweed-lesson p { margin: 0; color: var(--qv-muted); font-size: 12px; line-height: 1.65; } .qv-tajweed-practical { display: grid; gap: 12px; } .qv-tajweed-practical__item { display: flex; gap: 13px; padding: 16px 17px; border-bottom: 1px solid #e8eeeb; } .qv-tajweed-practical__item > span { flex: 0 0 auto; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--qv-green); color: #ead079; font-size: 11px; font-weight: 800; } .qv-tajweed-practical__item strong { display: block; margin-bottom: 4px; color: var(--qv-green); font-size: 14px; line-height: 1.4; } .qv-tajweed-practical__item p { margin: 0; color: var(--qv-muted); font-size: 12px; line-height: 1.65; } .qv-tajweed-program__practice-note { margin-top: 23px; padding: 20px; border-radius: 12px; background: var(--qv-green); } .qv-tajweed-program__practice-note strong { display: block; margin-bottom: 7px; color: #ffffff; font-size: 14px; } .qv-tajweed-program__practice-note p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; } .qv-tajweed-program__assessment { margin-top: 34px; padding: 29px 31px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 17px; background: linear-gradient( 135deg, var(--qv-green) 0%, #174c3d 100% ); } .qv-tajweed-program__assessment > div { max-width: 800px; } .qv-tajweed-program__assessment-label { display: block; margin-bottom: 7px; color: #ead079; font-size: 9px; font-weight: 800; letter-spacing: .13em; } .qv-tajweed-program__assessment strong { display: block; margin-bottom: 8px; color: #ffffff; font-size: 19px; line-height: 1.4; } .qv-tajweed-program__assessment p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.7; } .qv-tajweed-program__assessment-button { flex: 0 0 auto; min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--qv-gold); color: #ffffff !important; text-decoration: none !important; font-size: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; } .qv-tajweed-program__assessment-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217,173,47,.20); } @media (max-width: 880px) { .qv-tajweed-program { padding: 70px 20px; } .qv-tajweed-program__grid { grid-template-columns: 1fr; } .qv-tajweed-program__assessment { display: block; } .qv-tajweed-program__assessment-button { margin-top: 20px; } } @media (max-width: 560px) { .qv-tajweed-program { padding: 55px 17px; } .qv-tajweed-program__part { padding: 27px 21px; } .qv-tajweed-program__part h3 { font-size: 23px; } .qv-tajweed-lesson { padding: 15px; } .qv-tajweed-program__assessment { padding: 25px 22px; } .qv-tajweed-program__assessment-button { width: 100%; } } .qv-tajweed-why, .qv-tajweed-why * { box-sizing: border-box; } .qv-tajweed-why { --qv-green: #123f32; --qv-green-2: #194e3e; --qv-gold: #d9ad2f; --qv-muted: #64736d; --qv-line: #dce7e1; --qv-soft: #f7faf8; padding: 90px 24px; background: linear-gradient( 180deg, #f7faf8 0%, #ffffff 100% ); font-family: Arial, sans-serif; } .qv-tajweed-why__inner { width: min(1180px, 100%); margin: 0 auto; } .qv-tajweed-why__header { max-width: 870px; margin: 0 auto 50px; text-align: center; } .qv-tajweed-why__eyebrow { display: inline-block; margin-bottom: 13px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-tajweed-why__header h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(34px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .qv-tajweed-why__header p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-tajweed-why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .qv-tajweed-why-card { position: relative; padding: 31px 29px 29px 79px; border: 1px solid var(--qv-line); border-radius: 17px; background: #ffffff; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .qv-tajweed-why-card:hover { transform: translateY(-4px); border-color: rgba(217,173,47,.48); box-shadow: 0 17px 38px rgba(18,63,50,.07); } .qv-tajweed-why-card__number { position: absolute; top: 28px; left: 27px; width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--qv-green); color: #ead079; font-size: 10px; font-weight: 800; } .qv-tajweed-why-card h3 { margin: 0 0 10px; color: var(--qv-green); font-size: 19px; line-height: 1.4; } .qv-tajweed-why-card p { margin: 0; color: var(--qv-muted); font-size: 13px; line-height: 1.75; } .qv-tajweed-why__method { margin-top: 34px; padding: 36px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items: center; border-radius: 20px; background: radial-gradient( circle at right top, rgba(217,173,47,.14), transparent 40% ), linear-gradient( 135deg, var(--qv-green) 0%, #174c3d 100% ); } .qv-tajweed-why__method-label { display: block; margin-bottom: 9px; color: #ead079; font-size: 9px; font-weight: 800; letter-spacing: .14em; } .qv-tajweed-why__method h3 { margin: 0 0 11px; color: #ffffff; font-size: 24px; line-height: 1.35; } .qv-tajweed-why__method p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.75; } .qv-tajweed-why__method-steps { display: grid; gap: 8px; } .qv-tajweed-why__method-steps span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.06); color: #ffffff; text-align: center; font-size: 11px; font-weight: 700; } .qv-tajweed-why__note { margin-top: 25px; padding: 19px 23px; border-left: 4px solid var(--qv-gold); border-radius: 9px; background: #f8faf9; } .qv-tajweed-why__note strong { display: block; margin-bottom: 6px; color: var(--qv-green); font-size: 13px; } .qv-tajweed-why__note p { margin: 0; color: #718079; font-size: 11px; line-height: 1.7; } @media (max-width: 820px) { .qv-tajweed-why { padding: 70px 20px; } .qv-tajweed-why__grid { grid-template-columns: 1fr; } .qv-tajweed-why__method { grid-template-columns: 1fr; } } @media (max-width: 560px) { .qv-tajweed-why { padding: 55px 17px; } .qv-tajweed-why-card { padding: 72px 22px 25px; } .qv-tajweed-why-card__number { top: 22px; left: 22px; } .qv-tajweed-why__method { padding: 27px 22px; } .qv-tajweed-why__method h3 { font-size: 21px; } } .qv-tajweed-teachers, .qv-tajweed-teachers * { box-sizing: border-box; } .qv-tajweed-teachers { --qv-green: #123f32; --qv-green-2: #194e3e; --qv-gold: #d9ad2f; --qv-muted: #64736d; --qv-line: #dce7e1; --qv-soft: #f7faf8; padding: 90px 24px; background: #ffffff; font-family: Arial, sans-serif; } .qv-tajweed-teachers__inner { width: min(1180px, 100%); margin: 0 auto; } .qv-tajweed-teachers__header { max-width: 860px; margin: 0 auto 35px; text-align: center; } .qv-tajweed-teachers__eyebrow { display: inline-block; margin-bottom: 13px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-tajweed-teachers__header h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(34px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .qv-tajweed-teachers__header p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-tajweed-teachers__trust { margin: 0 auto 34px; padding: 20px 23px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; border: 1px solid var(--qv-line); border-radius: 15px; background: var(--qv-soft); } .qv-tajweed-teachers__trust div { padding: 4px 12px; text-align: center; border-right: 1px solid var(--qv-line); } .qv-tajweed-teachers__trust div:last-child { border-right: 0; } .qv-tajweed-teachers__trust strong, .qv-tajweed-teachers__trust span { display: block; } .qv-tajweed-teachers__trust strong { margin-bottom: 5px; color: var(--qv-green); font-size: 12px; line-height: 1.4; } .qv-tajweed-teachers__trust span { color: #74827c; font-size: 10px; line-height: 1.45; } .qv-tajweed-teachers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .qv-tajweed-teacher-card { padding: 29px 26px; border: 1px solid var(--qv-line); border-radius: 18px; background: linear-gradient( 180deg, #ffffff 0%, #fbfdfc 100% ); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .qv-tajweed-teacher-card:hover { transform: translateY(-5px); border-color: rgba(217,173,47,.5); box-shadow: 0 18px 40px rgba(18,63,50,.08); } .qv-tajweed-teacher-card__top { margin-bottom: 19px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .qv-tajweed-teacher-card__avatar { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--qv-green); color: #ead079; font-family: Georgia, serif; font-size: 22px; font-weight: 700; } .qv-tajweed-teacher-card__badge { padding: 6px 9px; border-radius: 20px; background: #f5edd6; color: #8c6914; font-size: 8px; font-weight: 800; letter-spacing: .09em; } .qv-tajweed-teacher-card h3 { margin: 0 0 4px; font-size: 22px; line-height: 1.3; } .qv-tajweed-teacher-card h3 a { color: var(--qv-green) !important; text-decoration: none !important; } .qv-tajweed-teacher-card h3 a:hover { color: #a77d17 !important; } .qv-tajweed-teacher-card__role { display: block; margin-bottom: 15px; color: #a77d17; font-size: 11px; font-weight: 800; } .qv-tajweed-teacher-card p { margin: 0; color: var(--qv-muted); font-size: 13px; line-height: 1.75; } .qv-tajweed-teacher-card ul { margin: 20px 0 24px; padding: 0; list-style: none; } .qv-tajweed-teacher-card li { position: relative; padding: 7px 0 7px 21px; color: #52655d; font-size: 12px; line-height: 1.5; } .qv-tajweed-teacher-card li::before { content: "✓"; position: absolute; left: 0; color: var(--qv-gold); font-weight: 800; } .qv-tajweed-teacher-card__button { min-height: 44px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--qv-green); border-radius: 8px; background: #ffffff; color: var(--qv-green) !important; text-decoration: none !important; font-size: 11px; font-weight: 800; transition: transform .2s ease, background-color .2s ease, color .2s ease; } .qv-tajweed-teacher-card__button:hover { transform: translateY(-2px); background: var(--qv-green); color: #ffffff !important; } .qv-tajweed-teachers__highlight { margin-top: 32px; padding: 31px 33px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 18px; background: radial-gradient( circle at right top, rgba(217,173,47,.14), transparent 38% ), linear-gradient( 135deg, var(--qv-green) 0%, #174c3d 100% ); } .qv-tajweed-teachers__highlight > div { max-width: 780px; } .qv-tajweed-teachers__highlight-label { display: block; margin-bottom: 7px; color: #ead079; font-size: 9px; font-weight: 800; letter-spacing: .13em; } .qv-tajweed-teachers__highlight strong { display: block; margin-bottom: 8px; color: #ffffff; font-size: 19px; line-height: 1.4; } .qv-tajweed-teachers__highlight p { margin: 0; color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.7; } .qv-tajweed-teachers__trial { flex: 0 0 auto; min-height: 48px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--qv-gold); color: #ffffff !important; text-decoration: none !important; font-size: 11px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; } .qv-tajweed-teachers__trial:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217,173,47,.2); } @media (max-width: 950px) { .qv-tajweed-teachers__grid { grid-template-columns: 1fr 1fr; } .qv-tajweed-teachers__trust { grid-template-columns: 1fr 1fr; } .qv-tajweed-teachers__trust div { border-right: 0; } } @media (max-width: 720px) { .qv-tajweed-teachers { padding: 70px 20px; } .qv-tajweed-teachers__grid { grid-template-columns: 1fr; } .qv-tajweed-teachers__highlight { display: block; } .qv-tajweed-teachers__trial { margin-top: 20px; } } @media (max-width: 560px) { .qv-tajweed-teachers { padding: 55px 17px; } .qv-tajweed-teachers__trust { grid-template-columns: 1fr; } .qv-tajweed-teacher-card { padding: 26px 22px; } .qv-tajweed-teachers__highlight { padding: 26px 22px; } .qv-tajweed-teachers__trial { width: 100%; } } .qv-tajweed-plans, .qv-tajweed-plans * { box-sizing: border-box; } .qv-tajweed-plans { --qv-green: #123f32; --qv-gold: #d9ad2f; --qv-muted: #65746e; --qv-line: #dce7e1; padding: 90px 24px; background: #ffffff; font-family: Arial, sans-serif; scroll-margin-top: 100px; } .qv-tajweed-plans__inner { width: min(1080px, 100%); margin: 0 auto; } .qv-tajweed-plans__header { max-width: 800px; margin: 0 auto 46px; text-align: center; } .qv-tajweed-plans__eyebrow { display: inline-block; margin-bottom: 13px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-tajweed-plans__header h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(33px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .qv-tajweed-plans__header p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-tajweed-plans__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .qv-tajweed-plan-card { position: relative; padding: 33px; border: 1px solid var(--qv-line); border-radius: 18px; background: #ffffff; box-shadow: 0 13px 34px rgba(18,63,50,.06); transition: transform .25s ease, box-shadow .25s ease; } .qv-tajweed-plan-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(18,63,50,.10); } .qv-tajweed-plan-card--featured { border-color: rgba(217,173,47,.65); background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%); } .qv-tajweed-plan-card__best { position: absolute; top: -13px; right: 24px; padding: 7px 12px; border-radius: 20px; background: var(--qv-gold); color: #ffffff; font-size: 9px; font-weight: 800; letter-spacing: .08em; } .qv-tajweed-plan-card__top { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 22px; } .qv-tajweed-plan-card__label { color: #a77d17; font-size: 10px; font-weight: 800; letter-spacing: .12em; } .qv-tajweed-plan-card__duration { padding: 6px 10px; border-radius: 7px; background: #edf4f1; color: var(--qv-green); font-size: 10px; font-weight: 700; } .qv-tajweed-plan-card h3 { margin: 0 0 12px; color: var(--qv-green); font-size: 25px; line-height: 1.3; } .qv-tajweed-plan-card__description { min-height: 78px; margin: 0; color: var(--qv-muted); font-size: 14px; line-height: 1.7; } .qv-tajweed-plan-card__price { display: flex; align-items: baseline; margin: 26px 0; } .qv-tajweed-plan-card__currency { margin-right: 3px; color: var(--qv-gold); font-size: 20px; font-weight: 800; } .qv-tajweed-plan-card__price strong { color: var(--qv-green); font-size: 49px; line-height: 1; } .qv-tajweed-plan-card__period { margin-left: 8px; color: #78857f; font-size: 12px; } .qv-tajweed-plan-card__features { margin: 0 0 29px; padding: 0; list-style: none; } .qv-tajweed-plan-card__features li { position: relative; padding: 10px 0 10px 25px; border-bottom: 1px solid #eef2f0; color: #53675f; font-size: 13px; line-height: 1.5; } .qv-tajweed-plan-card__features li::before { content: "✓"; position: absolute; left: 0; color: var(--qv-gold); font-weight: 800; } .qv-tajweed-plan-card__button { display: flex; width: 100%; min-height: 51px; align-items: center; justify-content: center; border-radius: 9px; text-decoration: none !important; font-size: 13px; font-weight: 800; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } .qv-tajweed-plan-card__button:hover { transform: translateY(-2px); } .qv-tajweed-plan-card__button--outline { border: 1px solid var(--qv-green); background: #ffffff; color: var(--qv-green) !important; } .qv-tajweed-plan-card__button--outline:hover { background: #f5f9f7; } .qv-tajweed-plan-card__button--gold { background: var(--qv-gold); color: #ffffff !important; box-shadow: 0 9px 24px rgba(217,173,47,.18); } .qv-tajweed-plans__trial { margin-top: 29px; padding: 24px 27px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-radius: 14px; background: var(--qv-green); } .qv-tajweed-plans__trial strong, .qv-tajweed-plans__trial span { display: block; } .qv-tajweed-plans__trial strong { margin-bottom: 5px; color: #ffffff; font-size: 17px; } .qv-tajweed-plans__trial span { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.6; } .qv-tajweed-plans__trial a { flex: 0 0 auto; display: inline-flex; min-height: 46px; padding: 0 18px; align-items: center; justify-content: center; border-radius: 8px; background: var(--qv-gold); color: #ffffff !important; text-decoration: none !important; font-size: 12px; font-weight: 800; } @media (max-width: 800px) { .qv-tajweed-plans { padding: 70px 20px; } .qv-tajweed-plans__grid { grid-template-columns: 1fr; } .qv-tajweed-plan-card__description { min-height: auto; } } @media (max-width: 580px) { .qv-tajweed-plans { padding: 55px 17px; } .qv-tajweed-plan-card { padding: 27px 22px; } .qv-tajweed-plans__trial { display: block; } .qv-tajweed-plans__trial a { width: 100%; margin-top: 17px; } } .qv-tajweed-faq, .qv-tajweed-faq * { box-sizing: border-box; } .qv-tajweed-faq { --qv-green: #123f32; --qv-gold: #d9ad2f; --qv-muted: #65746e; --qv-line: #dde7e2; --qv-soft: #f8faf9; padding: 90px 24px; background: #f8faf9; font-family: Arial, sans-serif; } .qv-tajweed-faq__inner { width: min(980px, 100%); margin: 0 auto; } .qv-tajweed-faq__header { max-width: 820px; margin: 0 auto 44px; text-align: center; } .qv-tajweed-faq__eyebrow { display: inline-block; margin-bottom: 12px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-tajweed-faq__header h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(32px, 4vw, 47px); line-height: 1.12; letter-spacing: -.025em; } .qv-tajweed-faq__header p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-tajweed-faq__list { display: grid; gap: 12px; } .qv-tajweed-faq__item { border: 1px solid var(--qv-line); border-radius: 13px; background: #ffffff; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; } .qv-tajweed-faq__item[open] { border-color: rgba(217,173,47,.48); box-shadow: 0 10px 26px rgba(18,63,50,.06); } .qv-tajweed-faq__item summary { position: relative; padding: 20px 58px 20px 22px; color: var(--qv-green); font-size: 15px; line-height: 1.5; font-weight: 800; cursor: pointer; list-style: none; } .qv-tajweed-faq__item summary::-webkit-details-marker { display: none; } .qv-tajweed-faq__item summary::after { content: "+"; position: absolute; top: 50%; right: 21px; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf4f1; color: var(--qv-green); font-size: 18px; font-weight: 500; } .qv-tajweed-faq__item[open] summary::after { content: "−"; background: var(--qv-green); color: #ffffff; } .qv-tajweed-faq__answer { padding: 0 22px 21px; } .qv-tajweed-faq__answer p { margin: 0; padding-top: 17px; border-top: 1px solid rgba(18,63,50,.08); color: var(--qv-muted); font-size: 14px; line-height: 1.78; } .qv-tajweed-faq__bottom { margin-top: 28px; padding: 24px 27px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-radius: 14px; background: var(--qv-green); } .qv-tajweed-faq__bottom strong, .qv-tajweed-faq__bottom span { display: block; } .qv-tajweed-faq__bottom strong { margin-bottom: 5px; color: #ffffff; font-size: 17px; } .qv-tajweed-faq__bottom span { max-width: 700px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.65; } .qv-tajweed-faq__bottom a { flex: 0 0 auto; min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--qv-gold); color: #ffffff !important; text-decoration: none !important; font-size: 12px; font-weight: 800; } @media (max-width: 650px) { .qv-tajweed-faq { padding: 55px 17px; } .qv-tajweed-faq__item summary { padding: 18px 52px 18px 18px; font-size: 14px; } .qv-tajweed-faq__answer { padding: 0 18px 19px; } .qv-tajweed-faq__bottom { display: block; } .qv-tajweed-faq__bottom a { width: 100%; margin-top: 18px; } } .qv-tajweed-final, .qv-tajweed-final * { box-sizing: border-box; } .qv-tajweed-final { --qv-green: #123f32; --qv-gold: #d9ad2f; padding: 95px 24px; background: radial-gradient( circle at top right, rgba(217,173,47,.15), transparent 35% ), linear-gradient( 135deg, #123f32 0%, #174c3d 100% ); font-family: Arial, sans-serif; } .qv-tajweed-final__inner { width: min(950px, 100%); margin: 0 auto; text-align: center; } .qv-tajweed-final__eyebrow { display: inline-block; margin-bottom: 15px; color: #ead079; font-size: 10px; font-weight: 800; letter-spacing: .15em; } .qv-tajweed-final h2 { max-width: 850px; margin: 0 auto 20px; color: #ffffff; font-size: clamp(35px, 4.7vw, 52px); line-height: 1.1; letter-spacing: -.025em; } .qv-tajweed-final__lead { max-width: 820px; margin: 0 auto; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.8; } .qv-tajweed-final__trust { margin: 30px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .qv-tajweed-final__trust span { padding: 8px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 25px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); font-size: 11px; font-weight: 700; } .qv-tajweed-final__actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .qv-tajweed-final__button, .qv-tajweed-final__whatsapp { min-height: 50px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; text-decoration: none !important; font-size: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .qv-tajweed-final__button:hover, .qv-tajweed-final__whatsapp:hover { transform: translateY(-2px); } .qv-tajweed-final__button--gold { background: var(--qv-gold); color: #ffffff !important; box-shadow: 0 10px 25px rgba(217,173,47,.20); } .qv-tajweed-final__button--outline { border: 1px solid rgba(255,255,255,.45); background: transparent; color: #ffffff !important; } .qv-tajweed-final__button--outline:hover { background: rgba(255,255,255,.08); } .qv-tajweed-final__whatsapp { background: #ffffff; color: var(--qv-green) !important; } .qv-tajweed-final__note { max-width: 700px; margin: 25px auto 0; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.65; } @media (max-width: 650px) { .qv-tajweed-final { padding: 65px 18px; } .qv-tajweed-final__actions { display: grid; grid-template-columns: 1fr; } .qv-tajweed-final__button, .qv-tajweed-final__whatsapp { width: 100%; } }