/* Bulk Page Generator content region — pgx-/cta-tape style (matches sunlitesystems.in's
   generator pattern, per Mayank's request 2026-07-21). Shared across all generated pages;
   do not re-inline copies into individual pages.
   Note: the floating/sticky contact widget is handled site-wide by rx-sticky-cta.js/css —
   this file intentionally has no sticky-bar or body-padding rules. */
.pgx-wrap { max-width: 1140px; margin: 0 auto; padding: 40px 15px 60px; font-family: 'Poppins', Arial, sans-serif; color: #333; line-height: 1.7; }
.pgx-wrap h1 { font-size: 2.1rem; color: #1a2b4c; margin-top: 0; margin-bottom: 14px; }
.pgx-wrap h2 { font-size: 1.5rem; color: #1a2b4c; margin: 34px 0 14px; }
.pgx-wrap h3 { font-size: 1.15rem; color: #1a2b4c; margin: 20px 0 8px; }
.pgx-wrap p { margin: 0 0 16px; }
.pgx-wrap a { color: #0056b3; }
.pgx-wrap ul { margin: 0 0 16px; padding-left: 22px; }
.pgx-wrap li { margin-bottom: 6px; }

.pgx-intro { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.pgx-intro-text { flex: 1 1 420px; }

/* ================= INTERNAL LINK BOX ================= */
.internal-link-box { background: #eef4ff; border-left: 4px solid #0056b3; padding: 16px 20px; margin: 28px 0; border-radius: 6px; }
.internal-link-box p { margin: 0 0 8px; }
.internal-link-box p:last-child { margin-bottom: 0; }
.internal-link-box a { color: #0056b3; text-decoration: none; }
.internal-link-box a:hover { text-decoration: underline; }

/* ================= FAQ SECTION (accordion / "envelope fold") ================= */
.faq-section { margin: 32px 0; }
.faq-item { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; margin-bottom: 12px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item:hover { border-color: #dbe4f3; }
.faq-item.v3-open { background: #fff; border-color: #dbe4f3; box-shadow: 0 8px 22px rgba(26,43,76,.08); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; border: none; background: none; cursor: pointer; padding: 16px 20px; text-align: left; font-family: inherit; font-size: 1.05rem; font-weight: 600; color: #1a2b4c; }
.faq-q i { flex-shrink: 0; font-size: 13px; color: #94a3b8; transition: transform .3s cubic-bezier(.34,1.56,.64,1), color .2s ease; }
.faq-item.v3-open .faq-q i { transform: rotate(180deg); color: #f59e0b; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.faq-item.v3-open .faq-a { grid-template-rows: 1fr; }
.faq-a p { margin: 0; overflow: hidden; color: #444; padding: 0 20px; }
.faq-a > p { min-height: 0; }
.faq-item.v3-open .faq-a p { padding: 0 20px 18px; }

/* ================= INLINE CTA TAPE (top / middle / bottom) ================= */
.cta-tape { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: #1a2b4c; color: white; border-radius: 8px; padding: 14px 20px; margin: 28px 0; }
.cta-tape .cta-tape-text { font-size: 0.95rem; font-weight: 600; color: #fff; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-tape .cta-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 13px; color: #ffffff; white-space: nowrap; transition: 0.2s; }
.cta-tape .cta-btn:hover { color: #ffffff; }
.cta-tape .cta-call { background: #007bff; }
.cta-tape .cta-call:hover { background: #0062cc; }
.cta-tape .cta-wa { background: #25D366; }
.cta-tape .cta-wa:hover { background: #1ea952; }
.cta-tape .cta-mail { background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.55); }
.cta-tape .cta-mail:hover { background: rgba(255,255,255,0.32); }

@media (max-width: 575px) {
    .cta-tape { justify-content: center; text-align: center; }
    .pgx-intro-text { flex: 1 1 100%; }
}

/* ================= HERO / CONTENT BANNER IMAGES =================
   Banner images supplied at 1311x350 (~3.75:1) — aspect-ratio matches exactly
   so the FULL image shows with no cropping, at any screen width. */
/* Full-bleed breakout: banners span the entire browser viewport width at every screen
   size (not just the 1140px .pgx-wrap text column) via the 100vw negative-margin trick.
   No rounded corners/shadow since they sit flush with the viewport edges.
   overflow-x:hidden on body is required here — 100vw can be a few px wider than the
   visible viewport when a vertical scrollbar is present, which otherwise adds a
   hairline horizontal scrollbar to the whole page. */
body { overflow-x: hidden; }
.pgx-hero-banner { margin: 0 calc(50% - 50vw) 28px; width: 100vw; overflow: hidden; }
.pgx-hero-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1311 / 350; object-fit: contain; object-position: center; }

.pgx-content-banner { margin: 30px calc(50% - 50vw); width: 100vw; overflow: hidden; }
.pgx-content-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1311 / 350; object-fit: contain; object-position: center; }

@media (max-width: 575px) {
    .pgx-wrap { padding-bottom: 30px; }
    .pgx-hero-banner { margin: 0 calc(50% - 50vw) 14px; }
    .pgx-content-banner { margin: 14px calc(50% - 50vw); }
}

/* ================= PRODUCT RANGE GRID (new-gen category directory) =================
   Reusable across brand pages — add .pgx-range with grouped .pgx-range-group blocks. */
.pgx-range { margin: 8px 0 34px; padding: 28px 20px; border-radius: 20px; background: linear-gradient(180deg,#f4f7fc,#ffffff); border: 1px solid #e8edf5; }
.pgx-range-head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.pgx-range-head h2 { margin: 0 0 8px; }
.pgx-range-head p { margin: 0; color: #64748b; font-size: 14.5px; }
.pgx-range-group { margin-bottom: 24px; }
.pgx-range-group:last-child { margin-bottom: 0; }
.pgx-range-group h3 { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #1a2b4c; margin: 0 0 14px; }
.pgx-range-group h3 i { color: #f59e0b; font-size: 13px; }
.pgx-range-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 200px)); gap: 12px; }
.pgx-range-card { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: space-between; gap: 10px; height: 100%; box-sizing: border-box; padding: 20px 14px; background: #fff; border: 1px solid #eef1f6; border-radius: 14px; text-decoration: none !important; box-shadow: 0 2px 10px rgba(26,43,76,.04); transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease; }
.pgx-range-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px rgba(26,43,76,.15), 0 6px 14px rgba(26,43,76,.07); border-color: #dbe4f3; }
.pgx-range-icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#2b3f6b,#1a2b4c); flex-shrink: 0; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease; }
.pgx-range-card:hover .pgx-range-icon { transform: scale(1.08); background: linear-gradient(135deg,#ffe08a,#f6c453); }
.pgx-range-icon i { font-size: 18px; color: #f6c453; transition: color .25s ease; }
.pgx-range-card:hover .pgx-range-icon i { color: #1a2b4c; }
.pgx-range-card span { font-size: 13.5px; font-weight: 600; color: #1e293b; line-height: 1.35; }
.pgx-range-card .pgx-range-go { margin-top: -4px; font-size: 11.5px; font-weight: 700; color: #0056b3; display: inline-flex; align-items: center; gap: 4px; opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.pgx-range-card:hover .pgx-range-go { opacity: 1; transform: translateX(0); }

/* Touch devices never trigger :hover, so the "Explore" link would otherwise stay
   invisible (opacity:0) forever on phones/tablets — always show it there instead. */
@media (hover: none) {
    .pgx-range-card .pgx-range-go { opacity: 1; transform: none; }
}

@media (max-width: 575px) {
    .pgx-range { padding: 22px 14px; border-radius: 16px; }
    .pgx-range-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
    .pgx-range-card { padding: 16px 12px; }
}

/* ---- Tabbed navigation (progressive enhancement — js/pgx-range-tabs.js adds
   .pgx-tabs-on and builds .pgx-range-tabs from each group's h3; with JS off, all
   groups stay visible as a long-scroll list, so nothing breaks without JS). ---- */
.pgx-range-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; }
.pgx-range-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid #e0e7f2; background: #fff; color: #45527a; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pgx-range-tab i { color: #f59e0b; font-size: 13px; transition: color .2s ease; }
.pgx-range-tab:hover { border-color: #c7d5ec; background: #f4f7fc; }
.pgx-range-tab.active { background: linear-gradient(135deg,#2b3f6b,#1a2b4c); border-color: #1a2b4c; color: #fff; box-shadow: 0 8px 18px rgba(26,43,76,.22); }
.pgx-range-tab.active i { color: #f6c453; }
.pgx-tabs-on .pgx-range-group--tabbed { display: none; }
.pgx-tabs-on .pgx-range-group--tabbed.is-active { display: block; animation: pgxRangeFadeIn .25s ease; }
.pgx-tabs-on .pgx-range-group--tabbed h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@keyframes pgxRangeFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 575px) {
    .pgx-range-tabs { gap: 6px; margin-bottom: 22px; }
    .pgx-range-tab { padding: 8px 14px; font-size: 12.5px; }
}

/* ================= CORE BRANDS (real logos) ================= */
.pgx-brands { position: relative; margin: 0 0 34px; padding: 34px 24px; border-radius: 22px; background: linear-gradient(160deg,#10193a,#1e2f5c 55%,#10193a); overflow: hidden; }
.pgx-brands::before { content: ''; position: absolute; top: -70px; right: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(246,196,83,.22), transparent 70%); pointer-events: none; }
.pgx-brands::after { content: ''; position: absolute; bottom: -80px; left: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(43,63,107,.5), transparent 70%); pointer-events: none; }
.pgx-brands-head { position: relative; text-align: center; max-width: 640px; margin: 0 auto 28px; }
.pgx-brands-head h2 { margin: 0 0 8px; color: #fff; }
.pgx-brands-head p { margin: 0; color: #97a3c4; font-size: 14.5px; }
.pgx-brands-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.pgx-brand-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 12px; background: #fff; border-radius: 16px; text-decoration: none !important; box-shadow: 0 4px 16px rgba(0,0,0,.2); transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease; }
.pgx-brand-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 14px 30px rgba(246,196,83,.3); }
.pgx-brand-card img { max-width: 100%; max-height: 36px; width: auto; height: auto; object-fit: contain; filter: grayscale(45%); opacity: .85; transition: filter .22s ease, opacity .22s ease; }
.pgx-brand-card:hover img { filter: grayscale(0%); opacity: 1; }
.pgx-brand-card span { font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #64748b; text-transform: uppercase; }

@media (max-width: 575px) {
    .pgx-brands { padding: 24px 16px; border-radius: 16px; }
    .pgx-brands-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
    .pgx-brand-card { padding: 12px 8px; gap: 7px; }
    .pgx-brand-card img { max-height: 26px; }
    .pgx-brand-card span { font-size: 9.5px; }
}

/* ================= WHY BUY FROM US (perks + CTA, before FAQ) ================= */
.pgx-perks { margin: 0 0 34px; padding: 34px 20px; border-radius: 20px; background: #f4f7fc; border: 1px solid #e8edf5; }
.pgx-perks-head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.pgx-perks-head h2 { margin: 0 0 8px; }
.pgx-perks-head p { margin: 0; color: #64748b; font-size: 14.5px; }
.pgx-perks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 28px; }
.pgx-perk-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 14px; background: #fff; border: 1px solid #eef1f6; border-radius: 16px; box-shadow: 0 2px 10px rgba(26,43,76,.04); transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease; }
.pgx-perk-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(26,43,76,.1); }
.pgx-perk-icon { width: 56px; height: 56px; border-radius: 14px; background: #eef2f9; display: flex; align-items: center; justify-content: center; transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.pgx-perk-card:hover .pgx-perk-icon { transform: scale(1.08) rotate(-4deg); }
.pgx-perk-icon i { font-size: 22px; color: #1a2b4c; }
.pgx-perk-card span { font-size: 13.5px; font-weight: 700; color: #1e293b; line-height: 1.3; }
.pgx-perks-cta { text-align: center; }
.pgx-perks-cta a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 999px; background: #007bff; color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none !important; box-shadow: 0 10px 24px rgba(0,123,255,.3); transition: transform .2s ease, box-shadow .2s ease; }
.pgx-perks-cta a:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,123,255,.4); }

@media (max-width: 575px) {
    .pgx-perks { padding: 24px 14px; border-radius: 16px; }
    .pgx-perks-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
    .pgx-perk-card { padding: 16px 10px; }
    .pgx-perk-icon { width: 46px; height: 46px; }
    .pgx-perk-icon i { font-size: 18px; }
    .pgx-perks-cta a { width: 100%; justify-content: center; }
}