/** Shopify CDN: Minification failed
Line 203:2 Unexpected "<"
**/
/* ── Page hero ── */
.page-hero {
background: var(--clr-dark);
padding: calc(64px + var(--sp-12)) 0 var(--sp-12);
color: var(--clr-white);
position: relative; overflow: hidden;
}
.page-hero::before {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(137,230,142,.08) 1px, transparent 1px);
background-size: 28px 28px; pointer-events: none;
}
.page-hero__breadcrumb {
display: flex; align-items: center; gap: .4rem;
font-size: var(--text-xs); font-weight: var(--font-medium);
color: var(--clr-grey-500); margin-bottom: var(--sp-5);
letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.page-hero__breadcrumb a { color: var(--clr-grey-500); transition: color var(--ease-fast); }
.page-hero__breadcrumb a:hover { color: var(--clr-primary); }
.page-hero__breadcrumb-sep { color: var(--clr-grey-600); }
.page-hero__breadcrumb-current { color: var(--clr-primary); }
.page-hero__eyebrow {
font-size: var(--text-xs); font-weight: var(--font-semibold);
text-transform: uppercase; letter-spacing: var(--tracking-widest);
color: var(--clr-primary); margin-bottom: var(--sp-3);
display: flex; align-items: center; gap: var(--sp-2);
}
.page-hero__title {
font-size: var(--text-3xl); font-weight: var(--font-black);
line-height: 1.1; letter-spacing: var(--tracking-tight);
margin-bottom: var(--sp-4);
}
@media (min-width: 768px) { .page-hero__title { font-size: var(--text-4xl); } }
.page-hero__title-accent {
background: linear-gradient(135deg, #89e68e 0%, #5cc463 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; display: block;
}
.page-hero__lead {
font-size: var(--text-lg); color: var(--clr-grey-400);
line-height: var(--leading-relaxed); max-width: 660px;
}
/* ── Emergency strip ── */
.emergency-strip {
background: #7f1d1d; border-bottom: 2px solid #ef4444;
padding: var(--sp-4) 0;
}
.emergency-strip__inner {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--sp-4);
}
.emergency-strip__text {
font-size: var(--text-sm); font-weight: var(--font-semibold);
color: #fca5a5; display: flex; align-items: center; gap: var(--sp-2);
}
.emergency-strip__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.emergency-strip__btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: var(--r-full);
font-size: var(--text-xs); font-weight: var(--font-bold);
letter-spacing: .04em; text-transform: uppercase;
transition: all var(--ease-fast);
}
.emergency-strip__btn--red {
background: #ef4444; color: #fff;
}
.emergency-strip__btn--red:hover { background: #dc2626; }
.emergency-strip__btn--outline {
border: 1px solid rgba(252,165,165,.4); color: #fca5a5;
}
.emergency-strip__btn--outline:hover { background: rgba(239,68,68,.2); }
/* ── Self-check cards ── */
.check-card {
background: var(--clr-grey-50); border: 1px solid var(--clr-grey-200);
border-radius: var(--r-xl); padding: var(--sp-6);
}
.check-card__question {
display: flex; align-items: flex-start; gap: var(--sp-4);
padding: var(--sp-4) 0;
border-bottom: 1px solid var(--clr-grey-100);
font-size: var(--text-base); color: var(--clr-grey-700);
line-height: var(--leading-relaxed);
cursor: default;
}
.check-card__question:last-child { border-bottom: none; padding-bottom: 0; }
.check-card__question:first-child { padding-top: 0; }
.check-card__num {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
background: var(--clr-grey-200); font-size: var(--text-xs);
font-weight: var(--font-black); color: var(--clr-grey-600);
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.check-card__question.check-card__question--warning .check-card__num {
background: #fee2e2; color: #dc2626;
}
/* ── Tool cards ── */
.tool-card {
background: var(--clr-white); border: 1px solid var(--clr-grey-200);
border-radius: var(--r-2xl); padding: var(--sp-7);
display: flex; flex-direction: column; gap: var(--sp-4);
box-shadow: var(--shadow-xs);
}
.tool-card__icon-wrap {
width: 52px; height: 52px; border-radius: var(--r-xl);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.tool-card__icon-wrap--green { background: rgba(137,230,142,.15); }
.tool-card__icon-wrap--yellow { background: rgba(245,158,11,.12); }
.tool-card__icon-wrap--red { background: rgba(239,68,68,.10); }
.tool-card__icon-wrap--blue { background: rgba(59,130,246,.10); }
.tool-card__title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--clr-dark); }
.tool-card__desc { font-size: var(--text-base); color: var(--clr-grey-600); line-height: var(--leading-relaxed); }
.tool-card__steps { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.tool-card__step {
display: flex; align-items: flex-start; gap: var(--sp-3);
font-size: var(--text-sm); color: var(--clr-grey-700); line-height: var(--leading-relaxed);
}
.tool-card__step-num {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
background: var(--clr-primary); font-size: 11px;
font-weight: var(--font-black); color: var(--clr-black);
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.tool-card__note {
font-size: var(--text-xs); color: var(--clr-grey-500);
background: var(--clr-grey-50); border-radius: var(--r-lg);
padding: var(--sp-3) var(--sp-4); line-height: var(--leading-relaxed);
margin-top: var(--sp-2);
}
/* ── Helpline cards ── */
.helpline-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .helpline-grid { grid-template-columns: 1fr 1fr; } }
.helpline-card {
border-radius: var(--r-xl); padding: var(--sp-6);
display: flex; gap: var(--sp-4); align-items: flex-start;
}
.helpline-card--pk { background: rgba(137,230,142,.08); border: 1px solid rgba(137,230,142,.2); }
.helpline-card--intl { background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.15); }
.helpline-card__icon { flex-shrink: 0; }
.helpline-card__name { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--clr-dark); margin-bottom: var(--sp-1); }
.helpline-card__number { font-size: var(--text-xl); font-weight: var(--font-black); color: var(--clr-primary-text); margin-bottom: var(--sp-2); }
.helpline-card--intl .helpline-card__number { color: #3b82f6; }
.helpline-card__desc { font-size: var(--text-sm); color: var(--clr-grey-600); line-height: var(--leading-relaxed); }
.helpline-card__tag {
display: inline-flex; align-items: center;
background: rgba(137,230,142,.15); border-radius: var(--r-full);
font-size: 11px; font-weight: var(--font-bold); color: var(--clr-primary-text);
padding: 2px 8px; margin-bottom: var(--sp-2);
}
.helpline-card--intl .helpline-card__tag { background: rgba(59,130,246,.12); color: #3b82f6; }
/* ── Warning sign list ── */
.warn-sign-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.warn-sign {
display: flex; align-items: flex-start; gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
border-radius: var(--r-lg); font-size: var(--text-base);
line-height: var(--leading-relaxed);
}
.warn-sign--orange { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); color: var(--clr-grey-700); }
.warn-sign--red { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: var(--clr-grey-700); }
.warn-sign__dot {
flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px;
}
.warn-sign--orange .warn-sign__dot { background: #f59e0b; }
.warn-sign--red .warn-sign__dot { background: #ef4444; }
/* ── Commitment box ── */
.commitment-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .commitment-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .commitment-grid { grid-template-columns: 1fr 1fr 1fr; } }
.commitment-item {
display: flex; align-items: flex-start; gap: var(--sp-4);
padding: var(--sp-5);
background: rgba(137,230,142,.06); border: 1px solid rgba(137,230,142,.15);
border-radius: var(--r-xl);
}
.commitment-item__icon { flex-shrink: 0; }
.commitment-item__title { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--clr-white); margin-bottom: var(--sp-1); }
.commitment-item__text { font-size: var(--text-sm); color: var(--clr-grey-400); line-height: var(--leading-relaxed); }
/* ── Urdu box ── */
.urdu-rg-box {
background: var(--clr-dark-2); border: 1px solid rgba(137,230,142,.15);
border-radius: var(--r-2xl); padding: var(--sp-8);
}
.urdu-rg-box .check-list li {
color: var(--clr-grey-300); font-size: var(--text-sm); line-height: var(--leading-relaxed);
}