.qv-quran-hero, .qv-quran-hero * { box-sizing: border-box; } .qv-quran-hero { --qv-green: #123f32; --qv-green-2: #1b5746; --qv-gold: #d9ad2f; --qv-gold-soft: #f1df9d; --qv-cream: #faf8f2; --qv-ink: #18332a; --qv-muted: #61726b; position: relative; overflow: hidden; padding: 86px 24px; background: radial-gradient(circle at 88% 15%, rgba(217,173,47,.13), transparent 31%), radial-gradient(circle at 5% 90%, rgba(18,63,50,.08), transparent 27%), linear-gradient(135deg, #ffffff 0%, #fbfaf6 100%); font-family: Arial, sans-serif; } .qv-quran-hero__inner { width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; } .qv-quran-hero__content { position: relative; z-index: 2; animation: qvFadeLeft .75s ease both; } .qv-quran-hero__eyebrow { display: inline-block; margin-bottom: 18px; color: #a77d17; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .qv-quran-hero h1 { max-width: 720px; margin: 0 0 22px; color: var(--qv-green); font-size: clamp(42px, 5.3vw, 69px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; } .qv-quran-hero__lead { max-width: 690px; margin: 0; color: var(--qv-muted); font-size: 17px; line-height: 1.8; } .qv-quran-hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; } .qv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 0 23px; border-radius: 9px; text-decoration: none !important; font-size: 14px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .qv-btn:hover { transform: translateY(-2px); } .qv-btn--gold { background: var(--qv-gold); color: #ffffff !important; box-shadow: 0 9px 24px rgba(217,173,47,.24); } .qv-btn--gold:hover { box-shadow: 0 13px 30px rgba(217,173,47,.31); } .qv-btn--outline { border: 1px solid rgba(18,63,50,.22); background: rgba(255,255,255,.72); color: var(--qv-green) !important; } .qv-btn--outline:hover { background: #ffffff; } .qv-quran-hero__trust { margin-top: 39px; padding-top: 25px; border-top: 1px solid rgba(18,63,50,.11); display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; } .qv-trust-item strong, .qv-trust-item span { display: block; } .qv-trust-item strong { margin-bottom: 5px; color: var(--qv-green); font-size: 14px; } .qv-trust-item span { color: #7b8883; font-size: 11px; line-height: 1.45; } .qv-quran-hero__visual { position: relative; min-height: 530px; display: flex; align-items: center; justify-content: center; animation: qvFadeRight .85s ease both; } .qv-quran-card { position: relative; z-index: 3; width: min(450px, 90%); padding: 48px 42px 39px; border-radius: 25px; background: linear-gradient(145deg, rgba(29,84,67,.98), rgba(15,55,43,.99)); color: white; box-shadow: 0 32px 60px rgba(18,63,50,.18), inset 0 1px 0 rgba(255,255,255,.12); } .qv-quran-card::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(239,214,128,.17); border-radius: 18px; pointer-events: none; } .qv-quran-card__small { display: block; position: relative; z-index: 2; color: var(--qv-gold-soft); font-size: 10px; font-weight: 800; letter-spacing: .16em; } .qv-quran-symbol { position: relative; z-index: 2; margin: 29px 0 22px; color: #efd37a; font-size: 68px; line-height: 1; } .qv-quran-card h2 { position: relative; z-index: 2; margin: 0 0 12px; color: #ffffff; font-size: 31px; line-height: 1.2; } .qv-quran-card p { position: relative; z-index: 2; margin: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.7; } .qv-quran-path { position: relative; z-index: 2; margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .qv-quran-path div { padding: 13px 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(255,255,255,.045); } .qv-quran-path span, .qv-quran-path strong { display: block; } .qv-quran-path span { margin-bottom: 4px; color: #e1bd53; font-size: 10px; font-weight: 700; } .qv-quran-path strong { color: #ffffff; font-size: 12px; } .qv-quran-hero__orb { position: absolute; border-radius: 50%; filter: blur(1px); } .qv-orb-one { width: 330px; height: 330px; right: -15px; top: 50px; background: rgba(217,173,47,.10); } .qv-orb-two { width: 250px; height: 250px; left: -5px; bottom: 16px; background: rgba(18,63,50,.07); } .qv-floating-card { position: absolute; z-index: 4; padding: 12px 16px; border: 1px solid rgba(18,63,50,.08); border-radius: 9px; background: rgba(255,255,255,.94); color: var(--qv-green); box-shadow: 0 13px 30px rgba(18,63,50,.10); font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); animation: qvFloat 4.8s ease-in-out infinite; } .qv-floating-card--top { top: 85px; left: -8px; } .qv-floating-card--bottom { right: -3px; bottom: 82px; animation-delay: .8s; } .qv-floating-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--qv-gold); } @keyframes qvFadeLeft { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } @keyframes qvFadeRight { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } @keyframes qvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .qv-quran-hero__content, .qv-quran-hero__visual, .qv-floating-card { animation: none; } } @media (max-width: 980px) { .qv-quran-hero { padding: 68px 22px; } .qv-quran-hero__inner { grid-template-columns: 1fr; gap: 45px; } .qv-quran-hero__content { text-align: center; } .qv-quran-hero__lead { margin-left: auto; margin-right: auto; } .qv-quran-hero__actions { justify-content: center; } .qv-quran-hero__trust { max-width: 700px; margin-left: auto; margin-right: auto; } .qv-quran-hero__visual { min-height: 500px; } } @media (max-width: 620px) { .qv-quran-hero { padding: 52px 17px; } .qv-quran-hero h1 { font-size: 39px; } .qv-quran-hero__lead { font-size: 15px; } .qv-quran-hero__actions { display: grid; } .qv-btn { width: 100%; } .qv-quran-hero__trust { grid-template-columns: 1fr 1fr; gap: 17px; } .qv-quran-hero__visual { min-height: 450px; } .qv-quran-card { width: 100%; padding: 38px 27px 31px; } .qv-quran-card h2 { font-size: 26px; } .qv-floating-card--top { top: 8px; left: 3px; } .qv-floating-card--bottom { right: 3px; bottom: 1px; } } .qv-learning, .qv-learning * { box-sizing: border-box; } .qv-learning { --qv-green: #123f32; --qv-green-soft: #eaf2ee; --qv-gold: #d9ad2f; --qv-ink: #18332a; --qv-muted: #66756f; --qv-line: #dfe8e3; padding: 86px 24px; background: #ffffff; font-family: Arial, sans-serif; } .qv-learning__inner { width: min(1180px, 100%); margin: 0 auto; } .qv-learning__intro { max-width: 790px; margin: 0 auto 46px; text-align: center; } .qv-learning__eyebrow { display: inline-block; margin-bottom: 13px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-learning h2 { margin: 0 0 18px; color: var(--qv-green); font-size: clamp(32px, 4vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .qv-learning__intro p { margin: 0 auto; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-learning__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .qv-learning-card { position: relative; min-height: 250px; padding: 29px 25px 27px; border: 1px solid var(--qv-line); border-radius: 15px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .qv-learning-card:hover { transform: translateY(-5px); border-color: rgba(217,173,47,.45); box-shadow: 0 17px 34px rgba(18,63,50,.08); } .qv-learning-card__number { margin-bottom: 24px; color: var(--qv-gold); font-size: 13px; font-weight: 800; letter-spacing: .08em; } .qv-learning-card h3 { margin: 0 0 13px; color: var(--qv-green); font-size: 20px; line-height: 1.3; } .qv-learning-card__title-link { display: block; text-decoration: none !important; color: inherit !important; } .qv-learning-card__title-link h3 { transition: color .2s ease; } .qv-learning-card__title-link:hover h3, .qv-learning-card__title-link:focus-visible h3 { color: #a77d17; } .qv-learning-card p { margin: 0; color: var(--qv-muted); font-size: 14px; line-height: 1.72; } .qv-learning__note { margin-top: 34px; padding: 24px 27px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(18,63,50,.11); border-radius: 13px; background: var(--qv-green-soft); } .qv-learning__note div { max-width: 720px; } .qv-learning__note strong, .qv-learning__note span { display: block; } .qv-learning__note strong { margin-bottom: 6px; color: var(--qv-green); font-size: 17px; } .qv-learning__note span { color: #5f7169; font-size: 14px; line-height: 1.6; } .qv-learning__cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 0 20px; border-radius: 8px; background: var(--qv-green); color: #ffffff !important; text-decoration: none !important; font-size: 13px; font-weight: 800; transition: transform .2s ease, background-color .2s ease; } .qv-learning__cta:hover { transform: translateY(-2px); background: #1b5746; } @media (max-width: 980px) { .qv-learning { padding: 70px 22px; } .qv-learning__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .qv-learning { padding: 55px 17px; } .qv-learning__grid { grid-template-columns: 1fr; } .qv-learning-card { min-height: auto; } .qv-learning__note { display: block; } .qv-learning__cta { width: 100%; margin-top: 18px; } } .qv-trust-section, .qv-trust-section * { box-sizing: border-box; } .qv-trust-section { --qv-green: #123f32; --qv-green-2: #1b5746; --qv-gold: #d9ad2f; --qv-cream: #f8f6ef; --qv-muted: #66756f; --qv-line: #dde7e2; padding: 90px 24px; background: linear-gradient(180deg, #f9faf8 0%, #ffffff 100%); font-family: Arial, sans-serif; } .qv-trust-section__inner { width: min(1180px, 100%); margin: 0 auto; } .qv-trust-section__intro { max-width: 820px; margin-bottom: 44px; } .qv-trust-section__eyebrow { display: inline-block; margin-bottom: 13px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-trust-section h2 { margin: 0 0 18px; max-width: 900px; color: var(--qv-green); font-size: clamp(33px, 4.4vw, 50px); line-height: 1.12; letter-spacing: -.025em; } .qv-trust-section__intro p { margin: 0; max-width: 760px; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-trust-section__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 19px; } .qv-trust-card { position: relative; padding: 30px 30px 28px 82px; border: 1px solid var(--qv-line); border-radius: 16px; background: #ffffff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .qv-trust-card:hover { transform: translateY(-4px); border-color: rgba(217,173,47,.42); box-shadow: 0 16px 34px rgba(18,63,50,.07); } .qv-trust-card__icon { position: absolute; top: 29px; left: 27px; width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--qv-green); color: #ffffff; font-size: 11px; font-weight: 800; } .qv-trust-card h3 { margin: 0 0 10px; color: var(--qv-green); font-size: 20px; line-height: 1.35; } .qv-trust-card p { margin: 0; color: var(--qv-muted); font-size: 14px; line-height: 1.72; } .qv-trust-section__proof { margin-top: 32px; padding: 31px 34px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-radius: 18px; background: linear-gradient(135deg, var(--qv-green), #174c3d); box-shadow: 0 18px 42px rgba(18,63,50,.12); } .qv-trust-proof__content { max-width: 760px; } .qv-trust-proof__label { display: block; margin-bottom: 8px; color: #ead079; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .qv-trust-proof__content h3 { margin: 0 0 9px; color: #ffffff; font-size: 24px; line-height: 1.3; } .qv-trust-proof__content p { margin: 0; color: rgba(255,255,255,.74); font-size: 14px; line-height: 1.7; } .qv-trust-proof__button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 0 21px; border-radius: 8px; background: var(--qv-gold); color: #ffffff !important; text-decoration: none !important; font-size: 13px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; } .qv-trust-proof__button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217,173,47,.22); } @media (max-width: 820px) { .qv-trust-section { padding: 70px 20px; } .qv-trust-section__grid { grid-template-columns: 1fr; } .qv-trust-section__proof { display: block; } .qv-trust-proof__button { margin-top: 20px; } } @media (max-width: 560px) { .qv-trust-section { padding: 54px 17px; } .qv-trust-card { padding: 72px 23px 24px; } .qv-trust-card__icon { top: 22px; left: 23px; } .qv-trust-section__proof { padding: 27px 23px; } .qv-trust-proof__button { width: 100%; } } .qv-level-path, .qv-level-path * { box-sizing: border-box; } .qv-level-path { --qv-green: #123f32; --qv-gold: #d9ad2f; --qv-muted: #64736d; --qv-line: #dce7e1; --qv-soft: #f7faf8; padding: 90px 24px; background: #ffffff; font-family: Arial, sans-serif; } .qv-level-path__inner { width: min(1120px, 100%); margin: 0 auto; } .qv-level-path__header { max-width: 850px; margin: 0 auto 48px; text-align: center; } .qv-level-path__eyebrow { display: inline-block; margin-bottom: 13px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-level-path__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-level-path__header p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-level-path__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .qv-level-card { padding: 32px 29px; border: 1px solid var(--qv-line); border-radius: 18px; background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%); } .qv-level-card--featured { border-color: rgba(217,173,47,.52); background: linear-gradient(180deg, #fffefa 0%, #ffffff 100%); box-shadow: 0 17px 40px rgba(18,63,50,.06); } .qv-level-card__top { margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .qv-level-card__number { width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--qv-green); color: #ffffff; font-size: 10px; font-weight: 800; } .qv-level-card__number--gold { background: var(--qv-gold); } .qv-level-card__label { color: #a77d17; font-size: 9px; font-weight: 800; letter-spacing: .11em; } .qv-level-card h3 { margin: 0 0 13px; color: var(--qv-green); font-size: 23px; line-height: 1.35; } .qv-level-card > p { margin: 0; color: var(--qv-muted); font-size: 14px; line-height: 1.75; } .qv-level-card ul { margin: 22px 0 24px; padding: 0; list-style: none; } .qv-level-card li { position: relative; padding: 8px 0 8px 23px; color: #50625b; font-size: 13px; line-height: 1.55; } .qv-level-card li::before { content: "✓"; position: absolute; left: 0; color: var(--qv-gold); font-weight: 800; } .qv-level-card__course-link { color: var(--qv-green) !important; font-weight: 700; text-decoration: underline !important; text-decoration-color: rgba(217,173,47,.7) !important; text-underline-offset: 3px; } .qv-level-card__course-link:hover, .qv-level-card__course-link:focus-visible { color: #a77d17 !important; } .qv-level-card__note { padding: 17px 18px; border-radius: 11px; background: var(--qv-soft); } .qv-level-card__note--featured { background: #f8f4e8; } .qv-level-card__note strong, .qv-level-card__note span { display: block; } .qv-level-card__note strong { margin-bottom: 5px; color: var(--qv-green); font-size: 13px; } .qv-level-card__note span { color: var(--qv-muted); font-size: 11px; line-height: 1.65; } .qv-level-path__plan { margin-top: 32px; padding: 34px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 36px; align-items: center; 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-level-path__plan-label { display: block; margin-bottom: 8px; color: #ead079; font-size: 9px; font-weight: 800; letter-spacing: .13em; } .qv-level-path__plan h3 { margin: 0 0 9px; color: #ffffff; font-size: 22px; line-height: 1.35; } .qv-level-path__plan p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.72; } .qv-level-path__plan-steps { display: grid; gap: 8px; } .qv-level-path__plan-steps span { padding: 9px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.06); color: #ffffff; text-align: center; font-size: 10px; font-weight: 700; } .qv-level-path__cta { margin-top: 24px; padding: 24px 27px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(18,63,50,.10); border-radius: 14px; background: #edf4f1; } .qv-level-path__cta strong, .qv-level-path__cta span { display: block; } .qv-level-path__cta strong { margin-bottom: 5px; color: var(--qv-green); font-size: 16px; } .qv-level-path__cta span { color: #607169; font-size: 13px; line-height: 1.65; } .qv-level-path__cta a { flex: 0 0 auto; min-height: 47px; 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: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; } .qv-level-path__cta a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217,173,47,.20); } @media (max-width: 850px) { .qv-level-path { padding: 70px 20px; } .qv-level-path__grid { grid-template-columns: 1fr; } .qv-level-path__plan { grid-template-columns: 1fr; } } @media (max-width: 600px) { .qv-level-path { padding: 55px 17px; } .qv-level-card { padding: 27px 22px; } .qv-level-path__plan { padding: 27px 22px; } .qv-level-path__cta { display: block; } .qv-level-path__cta a { width: 100%; margin-top: 18px; } } .qv-quran-plans, .qv-quran-plans * { box-sizing: border-box; } .qv-quran-plans { --qv-green: #123f32; --qv-green-2: #1b5746; --qv-gold: #d9ad2f; --qv-gold-soft: #f3e5ad; --qv-muted: #65746e; --qv-line: #dce7e1; padding: 90px 24px; background: #ffffff; font-family: Arial, sans-serif; scroll-margin-top: 100px; } .qv-quran-plans__inner { width: min(1080px, 100%); margin: 0 auto; } .qv-quran-plans__intro { max-width: 760px; margin: 0 auto 46px; text-align: center; } .qv-quran-plans__eyebrow { display: inline-block; margin-bottom: 13px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-quran-plans h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(33px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .qv-quran-plans__intro p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-quran-plans__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } .qv-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-plan-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(18,63,50,.10); } .qv-plan-card--featured { border: 1px solid rgba(217,173,47,.65); background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%); } .qv-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-plan-card__top { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 22px; } .qv-plan-card__label { color: #a77d17; font-size: 10px; font-weight: 800; letter-spacing: .12em; } .qv-plan-card__duration { padding: 6px 10px; border-radius: 7px; background: #edf4f1; color: var(--qv-green); font-size: 10px; font-weight: 700; } .qv-plan-card h3 { margin: 0 0 12px; color: var(--qv-green); font-size: 25px; line-height: 1.3; } .qv-plan-card__description { min-height: 74px; margin: 0; color: var(--qv-muted); font-size: 14px; line-height: 1.7; } .qv-plan-card__price { display: flex; align-items: baseline; margin: 26px 0; color: var(--qv-green); } .qv-plan-card__currency { margin-right: 3px; color: var(--qv-gold); font-size: 20px; font-weight: 800; } .qv-plan-card__price strong { color: var(--qv-green); font-size: 49px; line-height: 1; } .qv-plan-card__period { margin-left: 8px; color: #78857f; font-size: 12px; } .qv-plan-card__features { margin: 0 0 29px; padding: 0; list-style: none; } .qv-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-plan-card__features li::before { content: "✓"; position: absolute; left: 0; color: var(--qv-gold); font-weight: 800; } .qv-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, box-shadow .2s ease, background-color .2s ease; } .qv-plan-card__button:hover { transform: translateY(-2px); } .qv-plan-card__button--outline { border: 1px solid var(--qv-green); color: var(--qv-green) !important; background: #ffffff; } .qv-plan-card__button--outline:hover { background: #f5f9f7; } .qv-plan-card__button--gold { background: var(--qv-gold); color: #ffffff !important; box-shadow: 0 9px 24px rgba(217,173,47,.18); } .qv-quran-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-quran-plans__trial strong, .qv-quran-plans__trial span { display: block; } .qv-quran-plans__trial strong { margin-bottom: 5px; color: #ffffff; font-size: 17px; } .qv-quran-plans__trial span { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.6; } .qv-quran-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-quran-plans { padding: 70px 20px; } .qv-quran-plans__grid { grid-template-columns: 1fr; } .qv-plan-card__description { min-height: auto; } } @media (max-width: 580px) { .qv-quran-plans { padding: 55px 17px; } .qv-plan-card { padding: 27px 22px; } .qv-quran-plans__trial { display: block; } .qv-quran-plans__trial a { width: 100%; margin-top: 17px; } } .qv-audience, .qv-audience * { box-sizing: border-box; } .qv-audience { --qv-green: #123f32; --qv-green-2: #1b5746; --qv-gold: #d9ad2f; --qv-muted: #65746e; --qv-line: #dfe8e3; padding: 90px 24px; background: #f8faf9; font-family: Arial, sans-serif; } .qv-audience__inner { width: min(1120px, 100%); margin: 0 auto; } .qv-audience__intro { max-width: 790px; margin: 0 auto 45px; text-align: center; } .qv-audience__eyebrow { display: inline-block; margin-bottom: 12px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-audience h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(33px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .qv-audience__intro p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-audience__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .qv-audience-card { padding: 34px 32px; border: 1px solid var(--qv-line); border-radius: 18px; background: #ffffff; box-shadow: 0 14px 34px rgba(18,63,50,.06); transition: transform .25s ease, box-shadow .25s ease; } .qv-audience-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(18,63,50,.10); } .qv-audience-card--dark { border-color: var(--qv-green); background: linear-gradient(145deg, #174d3e, #10382d); } .qv-audience-card__tag { display: inline-block; margin-bottom: 17px; color: #a77d17; font-size: 10px; font-weight: 800; letter-spacing: .12em; } .qv-audience-card--dark .qv-audience-card__tag { color: #e6c866; } .qv-audience-card h3 { margin: 0 0 14px; color: var(--qv-green); font-size: 26px; line-height: 1.3; } .qv-audience-card--dark h3 { color: #ffffff; } .qv-audience-card p { margin: 0 0 22px; color: var(--qv-muted); font-size: 14px; line-height: 1.75; } .qv-audience-card--dark p { color: rgba(255,255,255,.74); } .qv-audience-card ul { margin: 0 0 28px; padding: 0; list-style: none; } .qv-audience-card li { position: relative; padding: 9px 0 9px 25px; border-bottom: 1px solid #edf1ef; color: #53675f; font-size: 13px; line-height: 1.5; } .qv-audience-card li::before { content: "✓"; position: absolute; left: 0; color: var(--qv-gold); font-weight: 800; } .qv-audience-card--dark li { border-bottom-color: rgba(255,255,255,.10); color: rgba(255,255,255,.82); } .qv-audience-card a { display: inline-flex; min-height: 48px; padding: 0 19px; align-items: center; justify-content: center; border-radius: 8px; background: var(--qv-green); color: #ffffff !important; text-decoration: none !important; font-size: 13px; font-weight: 800; transition: transform .2s ease, background-color .2s ease; } .qv-audience-card a:hover { transform: translateY(-2px); background: var(--qv-green-2); } .qv-audience-card--dark a { background: var(--qv-gold); } @media (max-width: 780px) { .qv-audience { padding: 70px 20px; } .qv-audience__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .qv-audience { padding: 55px 17px; } .qv-audience-card { padding: 28px 23px; } .qv-audience-card a { width: 100%; } } .qv-journey, .qv-journey * { box-sizing: border-box; } .qv-journey { --qv-green: #123f32; --qv-green-2: #1b5746; --qv-gold: #d9ad2f; --qv-muted: #66756f; --qv-line: #dce7e1; --qv-soft: #f6f9f7; --qv-cream: #faf8f1; padding: 90px 24px; background: #ffffff; font-family: Arial, sans-serif; } .qv-journey__inner { width: min(1120px, 100%); margin: 0 auto; } .qv-journey__intro { max-width: 820px; margin: 0 auto 50px; text-align: center; } .qv-journey__eyebrow { display: inline-block; margin-bottom: 12px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-journey h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(33px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .qv-journey__intro p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-journey__timeline { position: relative; max-width: 940px; margin: 0 auto; } .qv-journey__timeline::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 31px; width: 2px; background: linear-gradient( to bottom, var(--qv-gold), rgba(217,173,47,.18) ); } .qv-journey-day { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; margin-bottom: 20px; padding: 25px 26px 25px 0; border: 1px solid var(--qv-line); border-radius: 16px; background: var(--qv-soft); transition: transform .25s ease, box-shadow .25s ease; } .qv-journey-day:last-child { margin-bottom: 0; } .qv-journey-day:hover { transform: translateX(4px); box-shadow: 0 14px 32px rgba(18,63,50,.07); } .qv-journey-day--continue { border-color: rgba(217,173,47,.38); background: linear-gradient( 135deg, #fffdf7, #ffffff ); } .qv-journey-day__number { position: relative; z-index: 2; align-self: start; justify-self: center; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--qv-green); color: #ffffff; font-size: 12px; font-weight: 800; box-shadow: 0 6px 18px rgba(18,63,50,.16); } .qv-journey-day__number--gold { background: var(--qv-gold); } .qv-journey-day__content { padding-right: 12px; } .qv-journey-day__label { display: inline-block; margin-bottom: 7px; color: #a77d17; font-size: 9px; font-weight: 800; letter-spacing: .13em; } .qv-journey-day h3 { margin: 0 0 10px; color: var(--qv-green); font-size: 21px; line-height: 1.35; } .qv-journey-day p { margin: 0 0 8px; color: var(--qv-muted); font-size: 14px; line-height: 1.72; } .qv-journey-day p:last-child { margin-bottom: 0; } .qv-journey__live { margin-top: 48px; padding: 38px; border-radius: 20px; background: radial-gradient( circle at right top, rgba(217,173,47,.15), transparent 32% ), linear-gradient( 135deg, var(--qv-green), #174c3d ); } .qv-journey__section-heading { max-width: 770px; margin-bottom: 29px; } .qv-journey__section-heading > span { display: block; margin-bottom: 8px; color: #ead079; font-size: 9px; font-weight: 800; letter-spacing: .13em; } .qv-journey__section-heading h3 { margin: 0 0 10px; color: #ffffff; font-size: clamp(25px, 3vw, 34px); line-height: 1.25; } .qv-journey__section-heading p { margin: 0; color: rgba(255,255,255,.74); font-size: 14px; line-height: 1.75; } .qv-journey__live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .qv-journey-feature { padding: 23px 21px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255,255,255,.06); } .qv-journey-feature__icon { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; margin-bottom: 17px; border-radius: 50%; background: var(--qv-gold); color: #ffffff; font-size: 9px; font-weight: 800; } .qv-journey-feature h4 { margin: 0 0 9px; color: #ffffff; font-size: 17px; line-height: 1.35; } .qv-journey-feature p { margin: 0; color: rgba(255,255,255,.70); font-size: 12px; line-height: 1.7; } .qv-journey__halaqah { margin-top: 22px; padding: 28px 30px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; align-items: center; border: 1px solid var(--qv-line); border-radius: 16px; background: #ffffff; } .qv-journey__halaqah-title span { display: block; margin-bottom: 7px; color: #a77d17; font-size: 9px; font-weight: 800; letter-spacing: .12em; } .qv-journey__halaqah-title h3 { margin: 0; color: var(--qv-green); font-size: 20px; line-height: 1.4; } .qv-journey__halaqah > p { margin: 0; color: var(--qv-muted); font-size: 13px; line-height: 1.75; } .qv-journey__kit { margin-top: 22px; padding: 37px; border-radius: 18px; background: var(--qv-soft); } .qv-journey__kit-heading { max-width: 760px; margin-bottom: 27px; } .qv-journey__kit-heading > span { display: block; margin-bottom: 7px; color: #a77d17; font-size: 9px; font-weight: 800; letter-spacing: .13em; } .qv-journey__kit-heading h3 { margin: 0 0 9px; color: var(--qv-green); font-size: 26px; line-height: 1.3; } .qv-journey__kit-heading p { margin: 0; color: var(--qv-muted); font-size: 13px; line-height: 1.72; } .qv-journey__kit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; } .qv-journey-kit-item { padding: 19px 20px; border: 1px solid var(--qv-line); border-radius: 11px; background: #ffffff; } .qv-journey-kit-item strong, .qv-journey-kit-item span { display: block; } .qv-journey-kit-item strong { margin-bottom: 6px; color: var(--qv-green); font-size: 14px; } .qv-journey-kit-item span { color: var(--qv-muted); font-size: 11px; line-height: 1.65; } .qv-journey__practice { margin-top: 22px; padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(217,173,47,.30); border-radius: 17px; background: linear-gradient( 135deg, #fffdf8, #faf7ed ); } .qv-journey__practice-content { max-width: 740px; } .qv-journey__practice-label { display: block; margin-bottom: 7px; color: #a77d17; font-size: 9px; font-weight: 800; letter-spacing: .13em; } .qv-journey__practice h3 { margin: 0 0 8px; color: var(--qv-green); font-size: 21px; line-height: 1.35; } .qv-journey__practice p { margin: 0; color: var(--qv-muted); font-size: 13px; line-height: 1.72; } .qv-journey__youtube { flex: 0 0 auto; min-height: 47px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--qv-green); color: #ffffff !important; text-decoration: none !important; font-size: 11px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; } .qv-journey__youtube:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,63,50,.15); } .qv-journey__cta { margin-top: 24px; padding: 27px 29px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-radius: 15px; background: #edf4f1; } .qv-journey__cta strong, .qv-journey__cta span { display: block; } .qv-journey__cta strong { margin-bottom: 5px; color: var(--qv-green); font-size: 15px; } .qv-journey__cta span { color: var(--qv-muted); font-size: 12px; line-height: 1.65; } .qv-journey__cta-buttons { flex: 0 0 auto; display: flex; gap: 9px; } .qv-journey__cta-buttons a { min-height: 45px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none !important; font-size: 11px; font-weight: 800; } .qv-journey__cta-primary { background: var(--qv-gold); color: #ffffff !important; } .qv-journey__cta-secondary { border: 1px solid rgba(18,63,50,.24); background: #ffffff; color: var(--qv-green) !important; } @media (max-width: 900px) { .qv-journey__live-grid { grid-template-columns: 1fr; } .qv-journey__halaqah { grid-template-columns: 1fr; gap: 14px; } .qv-journey__practice { display: block; } .qv-journey__youtube { margin-top: 19px; } .qv-journey__cta { display: block; } .qv-journey__cta-buttons { margin-top: 19px; } } @media (max-width: 650px) { .qv-journey { padding: 60px 17px; } .qv-journey__timeline::before { left: 24px; } .qv-journey-day { grid-template-columns: 50px minmax(0, 1fr); gap: 14px; padding: 22px 18px 22px 0; } .qv-journey-day__number { width: 38px; height: 38px; font-size: 10px; } .qv-journey-day h3 { font-size: 18px; } .qv-journey__live { padding: 28px 22px; } .qv-journey__halaqah { padding: 24px 21px; } .qv-journey__kit { padding: 28px 21px; } .qv-journey__kit-grid { grid-template-columns: 1fr; } .qv-journey__practice { padding: 26px 21px; } .qv-journey__youtube { width: 100%; } .qv-journey__cta { padding: 25px 21px; } .qv-journey__cta-buttons { display: grid; grid-template-columns: 1fr; } .qv-journey__cta-buttons a { width: 100%; } } .qv-teachers, .qv-teachers * { box-sizing: border-box; } .qv-teachers { --qv-green: #123f32; --qv-green-2: #1b5746; --qv-gold: #d9ad2f; --qv-muted: #66756f; --qv-line: #dfe8e3; --qv-soft: #f7f9f8; padding: 90px 24px; background: #f8faf9; font-family: Arial, sans-serif; } .qv-teachers__inner { width: min(1180px, 100%); margin: 0 auto; } .qv-teachers__intro { max-width: 790px; margin: 0 auto 47px; text-align: center; } .qv-teachers__eyebrow { display: inline-block; margin-bottom: 12px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-teachers h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(33px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .qv-teachers__intro p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-teachers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; } .qv-teacher-card { position: relative; padding: 30px 27px; border: 1px solid var(--qv-line); border-radius: 17px; background: #ffffff; box-shadow: 0 13px 32px rgba(18,63,50,.055); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .qv-teacher-card:hover { transform: translateY(-5px); border-color: rgba(217,173,47,.48); box-shadow: 0 20px 44px rgba(18,63,50,.09); } .qv-teacher-card__initial { width: 52px; height: 52px; margin-bottom: 21px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--qv-green); color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: .04em; } .qv-teacher-card__role { display: block; margin-bottom: 8px; color: #a77d17; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .qv-teacher-card h3 { margin: 0 0 13px; color: var(--qv-green); font-size: 23px; line-height: 1.3; } .qv-teacher-card p { min-height: 115px; margin: 0 0 20px; color: var(--qv-muted); font-size: 13px; line-height: 1.72; } .qv-teacher-card__skills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 23px; } .qv-teacher-card__skills span { padding: 6px 9px; border-radius: 20px; background: #edf4f1; color: var(--qv-green); font-size: 10px; font-weight: 700; } .qv-teacher-card__link { display: inline-flex; color: var(--qv-green) !important; text-decoration: none !important; font-size: 12px; font-weight: 800; border-bottom: 1px solid rgba(18,63,50,.24); } .qv-teacher-card__link:hover { color: var(--qv-gold) !important; border-color: var(--qv-gold); } .qv-teachers__footer { margin-top: 31px; padding: 25px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 14px; background: var(--qv-green); } .qv-teachers__footer strong, .qv-teachers__footer span { display: block; } .qv-teachers__footer strong { margin-bottom: 5px; color: #ffffff; font-size: 17px; } .qv-teachers__footer span { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.6; } .qv-teachers__footer 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: 920px) { .qv-teachers { padding: 70px 20px; } .qv-teachers__grid { grid-template-columns: 1fr; } .qv-teacher-card p { min-height: auto; } } @media (max-width: 580px) { .qv-teachers { padding: 55px 17px; } .qv-teachers__footer { display: block; } .qv-teachers__footer a { width: 100%; margin-top: 18px; } } .qv-faq, .qv-faq * { box-sizing: border-box; } .qv-faq { --qv-green: #123f32; --qv-green-2: #1b5746; --qv-gold: #d9ad2f; --qv-muted: #65746e; --qv-line: #dde7e2; --qv-soft: #f8faf9; padding: 90px 24px; background: #ffffff; font-family: Arial, sans-serif; } .qv-faq__inner { width: min(980px, 100%); margin: 0 auto; } .qv-faq__intro { max-width: 760px; margin: 0 auto 44px; text-align: center; } .qv-faq__eyebrow { display: inline-block; margin-bottom: 12px; color: #a77d17; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .qv-faq h2 { margin: 0 0 17px; color: var(--qv-green); font-size: clamp(32px, 4vw, 47px); line-height: 1.12; letter-spacing: -.025em; } .qv-faq__intro p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-faq__list { display: grid; gap: 12px; } .qv-faq__item { border: 1px solid var(--qv-line); border-radius: 13px; background: var(--qv-soft); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; } .qv-faq__item[open] { border-color: rgba(217,173,47,.45); box-shadow: 0 10px 26px rgba(18,63,50,.06); } .qv-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-faq__item summary::-webkit-details-marker { display: none; } .qv-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-faq__item[open] summary::after { content: "−"; background: var(--qv-green); color: #ffffff; } .qv-faq__answer { padding: 0 22px 21px; } .qv-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.75; } @media (max-width: 620px) { .qv-faq { padding: 55px 17px; } .qv-faq__item summary { padding: 18px 52px 18px 18px; font-size: 14px; } .qv-faq__answer { padding: 0 18px 19px; } } .qv-final-cta, .qv-final-cta * { box-sizing: border-box; } .qv-final-cta { --qv-green: #123f32; --qv-green-light: #1b5746; --qv-gold: #d9ad2f; padding: 90px 24px; background: radial-gradient(circle at 85% 20%, rgba(217,173,47,.16), transparent 28%), radial-gradient(circle at 10% 80%, rgba(255,255,255,.06), transparent 26%), linear-gradient(135deg, #10382d 0%, #174d3e 100%); font-family: Arial, sans-serif; } .qv-final-cta__inner { width: min(950px, 100%); margin: 0 auto; text-align: center; } .qv-final-cta__eyebrow { display: inline-block; margin-bottom: 14px; color: #e6c866; font-size: 11px; font-weight: 800; letter-spacing: .15em; } .qv-final-cta h2 { max-width: 760px; margin: 0 auto 18px; color: #ffffff; font-size: clamp(35px, 4.5vw, 52px); line-height: 1.12; letter-spacing: -.025em; } .qv-final-cta__inner > p { max-width: 720px; margin: 0 auto; color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.8; } .qv-final-cta__actions { margin-top: 31px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } .qv-final-btn { min-height: 51px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; text-decoration: none !important; font-size: 13px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; } .qv-final-btn:hover { transform: translateY(-2px); } .qv-final-btn--gold { background: var(--qv-gold); color: #ffffff !important; box-shadow: 0 10px 27px rgba(217,173,47,.18); } .qv-final-btn--light { border: 1px solid rgba(255,255,255,.27); background: rgba(255,255,255,.08); color: #ffffff !important; } .qv-final-cta__support { margin-top: 22px; color: rgba(255,255,255,.67); font-size: 13px; } .qv-final-cta__support span { margin-right: 6px; } .qv-final-cta__support a { color: #efd372 !important; text-decoration: none !important; font-weight: 800; border-bottom: 1px solid rgba(239,211,114,.38); } .qv-final-cta__support a:hover { border-color: #efd372; } .qv-final-cta__trust { margin-top: 43px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.11); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .qv-final-cta__trust strong, .qv-final-cta__trust span { display: block; } .qv-final-cta__trust strong { margin-bottom: 5px; color: #ffffff; font-size: 14px; } .qv-final-cta__trust span { color: rgba(255,255,255,.57); font-size: 11px; line-height: 1.5; } @media (max-width: 680px) { .qv-final-cta { padding: 60px 17px; } .qv-final-cta__actions { display: grid; } .qv-final-btn { width: 100%; } .qv-final-cta__support span, .qv-final-cta__support a { display: block; } .qv-final-cta__support a { width: fit-content; margin: 7px auto 0; } .qv-final-cta__trust { grid-template-columns: 1fr 1fr; gap: 20px; } }