.qv-home-hifz, .qv-home-hifz * { box-sizing: border-box; } .qv-home-hifz { --qv-green: #123f35; --qv-dark: #082f28; --qv-gold: #deb52e; --qv-cream: #f8f6ef; --qv-text: #263a34; --qv-muted: #61726c; --qv-line: #e5dfcf; overflow: hidden; color: var(--qv-text); background: #ffffff; font-family: inherit; } .qv-home-hifz section, .qv-home-hifz nav, .qv-home-hifz blockquote { margin: 0 !important; } .qv-home-hifz a { color: var(--qv-green); text-decoration-thickness: 1px; text-underline-offset: 3px; } .qv-home-hifz__container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .qv-home-hifz__hero { position: relative; min-height: 680px; display: flex; align-items: center; padding: 90px 0; color: #ffffff; background: linear-gradient(90deg, rgba(5, 39, 32, .97) 0%, rgba(5, 39, 32, .91) 39%, rgba(5, 39, 32, .50) 65%, rgba(5, 39, 32, .12) 100%), url("/assets/media/f0e6921671de6bb30280.webp") center / cover no-repeat; } .qv-home-hifz__hero-content { position: relative; z-index: 1; max-width: 700px; } .qv-home-hifz__eyebrow { display: inline-flex; margin-bottom: 18px; padding: 8px 13px; color: #fff3c2; background: rgba(222, 181, 46, .17); border: 1px solid rgba(222, 181, 46, .55); border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .qv-home-hifz h1 { margin: 0 0 22px; color: #ffffff; font-size: clamp(40px, 5.8vw, 72px); line-height: 1.04; letter-spacing: -.035em; } .qv-home-hifz__hero p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .88); font-size: clamp(17px, 2vw, 21px); line-height: 1.75; } .qv-home-hifz__hero-actions, .qv-home-hifz__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .qv-home-hifz__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 21px; border-radius: 10px; font-size: 15px; font-weight: 800; text-decoration: none !important; transition: transform .2s ease, background .2s ease; } .qv-home-hifz__button:hover { transform: translateY(-2px); } .qv-home-hifz__button--gold { color: var(--qv-dark) !important; background: var(--qv-gold); } .qv-home-hifz__button--light { color: #ffffff !important; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .42); } .qv-home-hifz__jump { padding: 18px 0; background: #ffffff; border-bottom: 1px solid var(--qv-line); } .qv-home-hifz__jump-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; } .qv-home-hifz__jump a { padding: 8px 12px; color: var(--qv-green); background: var(--qv-cream); border: 1px solid var(--qv-line); border-radius: 999px; font-size: 13px; font-weight: 750; text-decoration: none; } .qv-home-hifz__section { padding: clamp(68px, 8vw, 105px) 0; background: #ffffff; } .qv-home-hifz__section--cream { background: var(--qv-cream); } .qv-home-hifz__section--green { color: #ffffff; background: radial-gradient(circle at 88% 8%, rgba(222, 181, 46, .18), transparent 30%), linear-gradient(145deg, var(--qv-green), var(--qv-dark)); } .qv-home-hifz__heading { max-width: 790px; margin: 0 auto 38px; text-align: center; } .qv-home-hifz__label { display: block; margin-bottom: 11px; color: #9a7100; font-size: 12px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-home-hifz__section--green .qv-home-hifz__label { color: var(--qv-gold); } .qv-home-hifz h2 { margin: 0 0 15px; color: var(--qv-dark); font-size: clamp(31px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -.025em; } .qv-home-hifz__section--green h2, .qv-home-hifz__section--green h3 { color: #ffffff; } .qv-home-hifz__heading p, .qv-home-hifz__lead { margin: 0; color: var(--qv-muted); font-size: 17px; line-height: 1.78; } .qv-home-hifz__section--green .qv-home-hifz__heading p, .qv-home-hifz__section--green .qv-home-hifz__lead { color: rgba(255, 255, 255, .80); } .qv-home-hifz__answer { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 22px; max-width: 960px; margin: 0 auto; padding: clamp(27px, 4vw, 42px); background: #ffffff; border: 1px solid var(--qv-line); border-radius: 22px; box-shadow: 0 18px 50px rgba(18, 63, 53, .08); } .qv-home-hifz__answer-mark, .qv-home-hifz__number, .qv-home-hifz__check { display: grid; place-items: center; color: var(--qv-dark); background: var(--qv-gold); font-weight: 900; } .qv-home-hifz__answer-mark { width: 72px; height: 72px; border-radius: 20px; font-size: 28px; } .qv-home-hifz__answer h2 { margin-bottom: 12px; font-size: clamp(27px, 3.2vw, 40px); } .qv-home-hifz__answer p { margin: 0; color: var(--qv-muted); font-size: 16px; line-height: 1.8; } .qv-home-hifz__quote { max-width: 900px; margin: 28px auto 0 !important; padding: 24px 26px; color: var(--qv-text); background: rgba(222, 181, 46, .12); border-left: 5px solid var(--qv-gold); border-radius: 0 16px 16px 0; } .qv-home-hifz__quote p { margin: 0 0 9px; font-size: 17px; font-weight: 750; line-height: 1.65; } .qv-home-hifz__quote cite { color: var(--qv-muted); font-size: 13px; font-style: normal; } .qv-home-hifz__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; align-content: start; } .qv-home-hifz__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qv-home-hifz__card { margin: 0 !important; padding: 25px; background: #ffffff; border: 1px solid var(--qv-line); border-radius: 18px; box-shadow: 0 10px 32px rgba(18, 63, 53, .05); } .qv-home-hifz__card--warning { background: #fff9e9; border-color: rgba(222, 181, 46, .65); } .qv-home-hifz__number, .qv-home-hifz__check { width: 43px; height: 43px; margin-bottom: 16px; border-radius: 12px; font-size: 14px; } .qv-home-hifz__check { color: #ffffff; background: var(--qv-green); } .qv-home-hifz__card h3 { margin: 0 0 9px; color: var(--qv-green); font-size: 20px; line-height: 1.35; } .qv-home-hifz__card p, .qv-home-hifz__card li { color: var(--qv-muted); font-size: 14px; line-height: 1.72; } .qv-home-hifz__card p { margin: 0; } .qv-home-hifz__card p + p { margin-top: 11px; } .qv-home-hifz__card ul { margin: 12px 0 0; padding-left: 20px; } .qv-home-hifz__steps { display: grid; gap: 15px; max-width: 970px; margin: 0 auto; } .qv-home-hifz__step { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 18px; margin: 0 !important; padding: 23px; background: #ffffff; border: 1px solid var(--qv-line); border-radius: 17px; } .qv-home-hifz__step h3 { margin: 0 0 7px; color: var(--qv-green); font-size: 20px; } .qv-home-hifz__step p { margin: 0; color: var(--qv-muted); font-size: 15px; line-height: 1.73; } .qv-home-hifz__balance { display: grid; grid-template-columns: .92fr 1.08fr; gap: 20px; align-items: stretch; } .qv-home-hifz__balance-main { padding: clamp(28px, 4vw, 43px); color: #ffffff; background: var(--qv-green); border-radius: 21px; } .qv-home-hifz__balance-main h3 { margin: 0 0 13px; color: #ffffff; font-size: 29px; } .qv-home-hifz__balance-main p { margin: 0; color: rgba(255, 255, 255, .80); line-height: 1.8; } .qv-home-hifz__balance-list { display: grid; gap: 13px; } .qv-home-hifz__mini { padding: 18px 20px; background: #ffffff; border: 1px solid var(--qv-line); border-radius: 15px; } .qv-home-hifz__mini strong { display: block; margin-bottom: 5px; color: var(--qv-green); } .qv-home-hifz__mini span { color: var(--qv-muted); font-size: 14px; line-height: 1.65; } .qv-home-hifz__session { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .qv-home-hifz__session-box { padding: 27px; color: #ffffff; background: rgba(255, 255, 255, .075); border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; } .qv-home-hifz__session-box strong { display: block; margin-bottom: 9px; color: var(--qv-gold); font-size: 19px; } .qv-home-hifz__session-box p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.7; } .qv-home-hifz__routine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .qv-home-hifz__routine-item { min-height: 185px; padding: 21px; background: #ffffff; border: 1px solid var(--qv-line); border-radius: 16px; } .qv-home-hifz__routine-item b { display: block; margin-bottom: 9px; color: #a17600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .qv-home-hifz__routine-item strong { display: block; margin-bottom: 8px; color: var(--qv-green); font-size: 17px; } .qv-home-hifz__routine-item span { color: var(--qv-muted); font-size: 13px; line-height: 1.62; } .qv-home-hifz__note { margin-top: 24px; padding: 20px 22px; color: var(--qv-text); background: rgba(222, 181, 46, .13); border: 1px solid rgba(222, 181, 46, .48); border-radius: 15px; font-size: 15px; line-height: 1.75; } .qv-home-hifz__resources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; } .qv-home-hifz__resource { display: block; min-height: 170px; padding: 22px; color: var(--qv-text) !important; background: #ffffff; border: 1px solid var(--qv-line); border-radius: 16px; text-decoration: none !important; } .qv-home-hifz__resource strong { display: block; margin-bottom: 8px; color: var(--qv-green); font-size: 17px; } .qv-home-hifz__resource span { color: var(--qv-muted); font-size: 13px; line-height: 1.62; } .qv-home-hifz__faq { display: grid; gap: 13px; max-width: 930px; margin: 0 auto; } .qv-home-hifz__faq details { overflow: hidden; background: #ffffff; border: 1px solid var(--qv-line); border-radius: 15px; } .qv-home-hifz__faq summary { padding: 19px 21px; color: var(--qv-green); cursor: pointer; font-size: 16px; font-weight: 800; } .qv-home-hifz__faq p { margin: 0; padding: 0 21px 20px; color: var(--qv-muted); font-size: 14px; line-height: 1.72; } .qv-home-hifz__cta { padding: clamp(36px, 6vw, 70px); color: #ffffff; background: radial-gradient(circle at 85% 15%, rgba(222, 181, 46, .22), transparent 30%), linear-gradient(145deg, var(--qv-green), var(--qv-dark)); border-radius: 26px; text-align: center; } .qv-home-hifz__cta h2 { color: #ffffff; } .qv-home-hifz__cta p { max-width: 760px; margin: 0 auto; color: rgba(255, 255, 255, .80); font-size: 16px; line-height: 1.75; } .qv-home-hifz__cta-actions { justify-content: center; } .qv-home-hifz__disclaimer { max-width: 880px; margin: 24px auto 0; color: var(--qv-muted); font-size: 12px; line-height: 1.65; text-align: center; } @media (max-width: 980px) { .qv-home-hifz__grid--three, .qv-home-hifz__session { grid-template-columns: 1fr 1fr; } .qv-home-hifz__routine, .qv-home-hifz__resources { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .qv-home-hifz__container { width: min(100% - 30px, 1180px); } .qv-home-hifz__hero { min-height: 620px; padding: 68px 0; background-position: 58% center; } .qv-home-hifz__section { padding: 52px 0; } .qv-home-hifz__heading { margin-bottom: 28px; } .qv-home-hifz__grid, .qv-home-hifz__grid--three, .qv-home-hifz__balance, .qv-home-hifz__session { grid-template-columns: 1fr; } .qv-home-hifz__answer { grid-template-columns: 1fr; } .qv-home-hifz__answer-mark { width: 58px; height: 58px; } } @media (max-width: 520px) { .qv-home-hifz h1 { font-size: 38px; } .qv-home-hifz__hero { min-height: 660px; background-position: 62% center; } .qv-home-hifz__hero-actions, .qv-home-hifz__cta-actions { display: grid; } .qv-home-hifz__button { width: 100%; } .qv-home-hifz__step { grid-template-columns: 43px minmax(0, 1fr); gap: 13px; padding: 18px; } .qv-home-hifz__number, .qv-home-hifz__check { width: 39px; height: 39px; } .qv-home-hifz__routine, .qv-home-hifz__resources { grid-template-columns: 1fr; } }