/** Shopify CDN: Minification failed
Line 186: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__title {
font-size: var(--text-3xl); font-weight: var(--font-black);
line-height: 1.15; letter-spacing: var(--tracking-tight);
margin-bottom: var(--sp-4);
}
@media (min-width: 768px) { .page-hero__title { font-size: var(--text-4xl); } }
.page-hero__lead {
font-size: var(--text-lg); color: var(--clr-grey-400);
line-height: var(--leading-relaxed); max-width: 580px;
margin-bottom: var(--sp-8);
}
.page-hero__meta {
font-size: var(--text-sm); color: var(--clr-grey-500);
display: flex; flex-wrap: wrap; gap: var(--sp-5);
}
.page-hero__meta span { display: flex; align-items: center; gap: 6px; }
/* ── Contact method cards ── */
.contact-card {
background: var(--clr-white);
border: 1px solid var(--clr-grey-200);
border-radius: var(--r-xl);
padding: var(--sp-8);
display: flex; flex-direction: column; gap: var(--sp-4);
}
.contact-card--primary {
background: linear-gradient(135deg, rgba(137,230,142,.07) 0%, rgba(137,230,142,.02) 100%);
border-color: rgba(137,230,142,.25);
}
.contact-card__icon {
width: 56px; height: 56px; border-radius: var(--r-xl);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.contact-card--primary .contact-card__icon {
background: rgba(137,230,142,.15); border: 1px solid rgba(137,230,142,.3);
}
.contact-card--secondary .contact-card__icon {
background: var(--clr-grey-100); border: 1px solid var(--clr-grey-200);
}
.contact-card__label {
font-size: var(--text-xs); font-weight: var(--font-bold);
text-transform: uppercase; letter-spacing: var(--tracking-wider);
color: var(--clr-grey-500); margin-bottom: 2px;
}
.contact-card__value {
font-size: var(--text-xl); font-weight: var(--font-black);
color: var(--clr-dark); line-height: 1.2;
}
.contact-card__sub {
font-size: var(--text-sm); color: var(--clr-grey-600);
line-height: var(--leading-relaxed);
}
.contact-card__badge {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25);
border-radius: var(--r-full); padding: 4px 10px;
font-size: var(--text-xs); font-weight: var(--font-semibold);
color: #166534;
}
/* ── Topic cards ── */
.topic-card {
display: flex; align-items: flex-start; gap: var(--sp-4);
padding: var(--sp-5); border-radius: var(--r-xl);
background: var(--clr-white); border: 1px solid var(--clr-grey-150);
transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.topic-card:hover {
border-color: rgba(137,230,142,.3);
box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.topic-card__icon {
width: 40px; height: 40px; border-radius: var(--r-lg); flex-shrink: 0;
background: var(--clr-grey-50); border: 1px solid var(--clr-grey-200);
display: flex; align-items: center; justify-content: center;
}
.topic-card__title { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--clr-dark); margin-bottom: 3px; }
.topic-card__desc { font-size: var(--text-xs); color: var(--clr-grey-600); line-height: 1.5; }
/* ── Response time table ── */
.response-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.response-table th {
background: var(--clr-grey-50); padding: 10px 16px;
text-align: left; font-weight: var(--font-semibold);
color: var(--clr-dark); font-size: var(--text-xs);
text-transform: uppercase; letter-spacing: .06em;
}
.response-table td { padding: 10px 16px; border-top: 1px solid var(--clr-grey-100); color: var(--clr-grey-700); line-height: 1.5; vertical-align: top; }
.response-table td:first-child { font-weight: var(--font-semibold); color: var(--clr-dark); }
.response-table .fast { color: #166534; font-weight: var(--font-semibold); }
.response-table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--clr-grey-200); }
/* ── Roman Urdu box ── */
.urdu-box {
background: var(--clr-grey-50); border: 1px solid var(--clr-grey-200);
border-radius: var(--r-xl); padding: var(--sp-5) var(--sp-4);
}
@media (min-width: 640px) {
.urdu-box { padding: var(--sp-8); }
}
.urdu-box__title {
font-size: var(--text-xl); font-weight: var(--font-bold);
color: var(--clr-dark); margin-bottom: var(--sp-5);
}
.urdu-box__list {
display: flex; flex-direction: column; gap: var(--sp-4);
font-size: var(--text-base); color: var(--clr-grey-700);
line-height: var(--leading-relaxed); padding-left: var(--sp-5);
}
/* ── Contact form ── */
.contact-form {
background: var(--clr-white);
border: 1px solid var(--clr-grey-200);
border-radius: var(--r-xl);
padding: var(--sp-8);
}
.contact-form__group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.contact-form__group:last-of-type { margin-bottom: 0; }
.contact-form__label {
font-size: var(--text-sm); font-weight: var(--font-semibold);
color: var(--clr-dark);
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
width: 100%; padding: 11px 14px;
border: 1.5px solid var(--clr-grey-200); border-radius: var(--r-lg);
font-size: var(--text-base); font-family: inherit; color: var(--clr-dark);
background: var(--clr-white);
transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
outline: none;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
border-color: var(--clr-primary);
box-shadow: 0 0 0 3px rgba(137,230,142,.15);
}
.contact-form__textarea { resize: vertical; min-height: 120px; line-height: var(--leading-relaxed); }
.contact-form__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 560px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
.contact-form__success {
display: none; text-align: center; padding: var(--sp-8);
background: rgba(137,230,142,.07); border: 1px solid rgba(137,230,142,.25);
border-radius: var(--r-xl);
}
.contact-form__success.visible { display: block; }
.contact-form__success-icon {
width: 56px; height: 56px; border-radius: 50%;
background: rgba(137,230,142,.15); border: 2px solid rgba(137,230,142,.3);
display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-4);
}
.contact-form__note {
font-size: var(--text-xs); color: var(--clr-grey-500);
margin-top: var(--sp-4); text-align: center; line-height: 1.5;
}