/* ─── MYCPE ONE V5.0 Design Tokens (MCP) ─────────────────────────── */ :root { /* Brand / Primary */ --brand: #3A58EF; --brand-hover: #2F49D0; --brand-active: #2640B8; --brand-light: #EEF1FD; --brand-mid: #C7D0FA; --brand-400: #6179F2; --brand-800: #1A2D99; /* Dark Navy */ --dark-blue: #26244A; --dark-blue-700: #3A3861; --dark-blue-900: #14132A; /* Text Scale */ --text-primary: #101828; --text-strong: #1D2939; --text-body: #344054; --text-secondary: #475467; --text-muted: #667085; --text-placeholder:#98A2B3; /* Borders & Backgrounds */ --border: #D0D5DD; --border-light: #EAECF0; --bg: #F9FAFB; --bg-card: #F2F4F7; --bg-subtle: #F7F8FE; --surface: #FFFFFF; /* States */ --success: #039855; --success-light: #ECFDF3; --warning: #DC6803; --error: #D92D20; /* Typography */ --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Spacing Scale (MCP) */ --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; /* Border Radius (MCP) */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* Elevation / Shadows (MCP) */ --shadow-xs: 0 1px 2px rgba(16,24,40,0.05); --shadow-sm: 0 1px 3px rgba(16,24,40,0.10), 0 1px 2px rgba(16,24,40,0.06); --shadow-md: 0 4px 8px -2px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.06); --shadow-lg: 0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03); --shadow-xl: 0 20px 24px -4px rgba(16,24,40,0.08), 0 8px 8px -4px rgba(16,24,40,0.03); --shadow-brand: 0 4px 14px rgba(58,88,239,0.28); /* Transitions (MCP) */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 150ms; --dur: 200ms; --dur-slow: 300ms; } /* ─── Layout Utilities ──────────────────────────────────────────────── */ /* .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-40); } */ .section { padding: var(--sp-80) 0; } .section--sm { padding: 60px 0; } .section--lg { padding: var(--sp-96) 0; } /* ─── Typography (MCP Scale) ─────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); background: var(--brand-light); padding: var(--sp-4) var(--sp-12); border-radius: var(--radius-full); margin-bottom: var(--sp-16); line-height: 1.4; } .eyebrow--dark { color: rgba(255,255,255,0.90); background: rgba(255,255,255,0.12); } h1 { font-size: 48px; font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: var(--text-primary); } h2 { font-size: 36px; font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; color: var(--text-primary); } h3 { font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.01em; color: var(--text-primary); } h4 { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--text-primary); } h5 { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-primary); } h6 { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text-primary); } p { font-size: 16px; line-height: 1.6; color: var(--text-secondary); } .text-center { text-align: center; } .text-white { color: #fff !important; } .text-brand { color: var(--brand); } .section-title { margin-bottom: var(--sp-12); } .section-sub { font-size: 18px; line-height: 1.7; color: var(--text-secondary); max-width: 600px; margin: 0 auto; } /* ─── Buttons (MCP) ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1; padding: 11px var(--sp-20); border-radius: var(--radius-lg); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); } .btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: var(--shadow-brand); } .btn--dark { background: var(--dark-blue); color: #fff; border-color: var(--dark-blue); } .btn--dark:hover { background: var(--dark-blue-700); border-color: var(--dark-blue-700); box-shadow: var(--shadow-md); } .btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); } .btn--outline:hover { background: var(--brand-light); box-shadow: var(--shadow-xs); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); } .btn--ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.55); } .btn--white { background: #fff; color: var(--dark-blue); border-color: #fff; font-weight: 700; } .btn--white:hover { background: var(--bg); box-shadow: var(--shadow-md); } .btn--lg { font-size: 16px; padding: 13px var(--sp-24); } .btn--sm { font-size: 13px; padding: 7px var(--sp-14); } /* mos_schedule_btn — shared CTA button */ .mos_schedule_btn { display: inline-flex; align-items: center; gap: 8px; background: #3A58EF; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; border-radius: 4px; border: 1.5px solid #3A58EF; color: #FFFFFF; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; padding: 12px 20px; } .mos_schedule_btn:hover { background: #2d47d4; border-color: #2d47d4; color: #FFFFFF; text-decoration: none; } .mos_schedule_btn svg path { stroke: #FFFFFF; } /* ─── Generic Card (MCP) ─────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: var(--sp-32); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border); } .card-icon { width: 48px; height: 48px; background: var(--brand-light); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-20); flex-shrink: 0; transition: background var(--dur) var(--ease); } .card:hover .card-icon { background: var(--dark-blue); } .card:hover .card-icon svg { stroke: #fff; } /* ─── Badge / Tag (MCP) ──────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--sp-4); font-size: 12px; font-weight: 600; padding: 3px var(--sp-10); border-radius: var(--radius-full); line-height: 1.4; } .badge--brand { background: var(--brand-light); color: var(--brand); } .badge--success { background: var(--success-light); color: var(--success); } .badge--dark { background: var(--dark-blue); color: #fff; } /* ─── Divider ────────────────────────────────────────────────────────── */ .divider { width: 48px; height: 3px; background: var(--brand); border-radius: 2px; margin: 0 auto var(--sp-28); } .divider--left { margin-left: 0; } /* ════════════════════════════════════════════════════════════════════ NAVBAR (MCP) ══════════════════════════════════════════════════════════════════════ */ .navbar { /* position: sticky; top: 0; z-index: 100; background: var(--dark-blue); border-bottom: 1px solid rgba(255,255,255,0.07); height: 64px; display: flex; align-items: center; */ } .navbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .navbar__logo { display: flex; align-items: center; gap: var(--sp-10); } .navbar__logo-mark { width: 34px; height: 34px; background: var(--brand); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; } .navbar__logo-text { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .navbar__logo-text span { color: var(--brand-400); } .navbar__nav { display: flex; align-items: center; gap: var(--sp-28); } .navbar__nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.70); transition: color var(--dur-fast) var(--ease); position: relative; padding-bottom: 2px; } .navbar__nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--brand-400); border-radius: 1px; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .navbar__nav a:hover { color: #fff; } .navbar__nav a:hover::after { transform: scaleX(1); } .navbar__actions { display: flex; align-items: center; gap: var(--sp-10); } /* ════════════════════════════════════════════════════════════════════ 1. HERO BANNER — white / centred layout (matches hero-section design) ══════════════════════════════════════════════════════════════════════ */ .hero { background: #fff; padding: 56px 0; position: relative; overflow: hidden; } .hero::before { display: none; } .hero .container { /* display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; gap: var(--sp-48); */ } .hero__left { width: 100%; max-width: 820px; text-align: left; } .hero__badge { margin-bottom: var(--sp-20); } /* Override eyebrow--dark pill for the light hero background */ .hero .eyebrow--dark { color: var(--brand); background: var(--brand-light); } .hero h1 { color: #101828; margin-bottom: 16px; font-size: 48px; line-height: 60px; letter-spacing: -0.96px; } .hero h1 em { font-style: normal; color: var(--brand); } span.hero_sub { display: inline-block; font-size: 24px; color: #475467; margin-bottom: 24px; line-height: 28px; font-weight: 500; color: #000; } span.hero_sub em { font-style: normal; color: var(--brand); } .hero__desc { font-size: 20px; color: #475467; margin-bottom: 24px; line-height: 30px; max-width: 620px; margin-left: 0; margin-right: auto; } .hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 50px; } /* Buttons — styled to match pricing-buttons design */ .hero__left .btn { border-radius: 4px; font-size: 16px; font-weight: 600; line-height: 24px; font-family: var(--font); display: inline-flex; align-items: center; gap: 8px; } .hero__left .btn--primary { background: #3A58EF; color: #fff; border-color: #3A58EF; box-shadow: 0 1px 2px 0 rgba(16,24,40,0.05); padding: 12px 20px; } .hero__left .btn--primary:hover { background: #182878; border-color: #182878; box-shadow: 0 1px 2px 0 rgba(16,24,40,0.05); } .hero__left .btn--ghost { background: transparent; color: #3A58EF; border: 1px solid #3A58EF; padding: 12px 40px; } .hero__left .btn--ghost:hover { background: #3A58EF; color: #fff; box-shadow: 0 1px 2px 0 rgba(16,24,40,0.05); } .hero__left .btn--ghost:hover svg path { fill: #fff; } .hero__stats { display: flex; gap: 24px; flex-wrap: nowrap; justify-content: flex-start; padding-top: 50px; border-top: 1px solid #EAECF0; } .hero__stat-item { text-align: left; flex-shrink: 0; } .hero__stat-num { font-size: 24px; font-weight: 700; color: #101828; line-height: 32px; } .hero__stat-num span { color: var(--brand); } .hero__stat-label { font-size: 14px; color: #344054; margin-top: 5px; line-height: 20px; } /* Dashboard visual card — adapted for light background */ .hero__visual { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-2xl); padding: var(--sp-24); box-shadow: var(--shadow-md); width: 100%; max-width: 820px; } .hero__visual-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-20); } .hero__visual-title { font-size: 13px; font-weight: 600; color: var(--text-body); } .hero__visual-tabs { display: flex; gap: var(--sp-4); } .hero__visual-tab { font-size: 11px; font-weight: 600; padding: 4px var(--sp-10); border-radius: var(--radius-md); color: var(--text-muted); background: var(--bg-card); } .hero__visual-tab.active { background: var(--brand); color: #fff; } .hero__visual-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); margin-bottom: var(--sp-16); } .hero__metric { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--sp-16); } .hero__metric-val { font-size: 22px; font-weight: 700; color: var(--text-primary); } .hero__metric-label { font-size: 11px; color: var(--text-muted); margin-top: var(--sp-2); } .hero__metric-change { font-size: 11px; font-weight: 600; margin-top: var(--sp-6); } .hero__metric-change.up { color: var(--success); } .hero__metric-change.down { color: var(--error); } .hero__chart { background: var(--bg); border-radius: var(--radius-lg); height: 110px; display: flex; align-items: flex-end; gap: 5px; padding: var(--sp-12); } .hero__chart-bar { flex: 1; border-radius: 3px 3px 0 0; transition: opacity var(--dur) var(--ease); } .hero__chart-bar:hover { opacity: 0.75; } .hero__trusted { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-12) 0 0; border-top: 1px solid var(--border-light); margin-top: var(--sp-16); } .hero__trusted-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .hero__trusted-logos { display: flex; gap: var(--sp-10); } .hero__trusted-dot { width: 64px; height: 20px; background: var(--border-light); border-radius: var(--radius-sm); } /* ─── Hero Services Grid (right column) ──────────────────────────── */ .hero__services { display: flex; align-items: center; height: 100%; padding-left: 32px; } .hero__services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; } .hero__svc-item { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #EAECF0; border-radius: 12px; padding: 22px 20px; height: 100px; box-sizing: border-box; transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease; } .hero__svc-item:hover { box-shadow: 0 4px 12px rgba(58,88,239,0.10); border-color: #C7D0FA; transform: translateY(-2px); } .hero__svc-icon { width: 52px; height: 52px; min-width: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero__svc-icon--blue { background: #3A58EF; } .hero__svc-icon--green { background: #099250; } .hero__svc-icon--amber { background: #DC6803; } .hero__svc-icon--red { background: #D92D20; } .hero__svc-icon--purple { background: #6941C6; } .hero__svc-icon--orange { background: #E04F16; } .hero__svc-icon--teal { background: #0891B2; } .hero__svc-icon--pink { background: #BE185D; } .hero__svc-info h4 { font-size: 15px; font-weight: 600; color: #101828; line-height: 1.4; margin: 0; } @media (max-width: 991px) { .hero__services { padding-left: 0; padding-top: 40px; justify-content: center; } .hero__services-grid { max-width: 100%; } } @media (max-width: 575px) { .hero__services-grid { grid-template-columns: 1fr; } } /* ─── Trust / Accreditation Bar (Figma design) ─────────────────── */ .trust-bar { background: #F9FAFB; padding: 72px 140px; } .trust-bar .container { display: flex; align-items: stretch; gap: 24px; max-width: 1320px; margin: 0 auto; padding: 0; } .trust-bar__item { flex: 1; min-width: 0; background: #fff; border: 1px solid #EAECF0; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: box-shadow var(--dur) var(--ease); } .trust-bar__item:hover { box-shadow: var(--shadow-md); } .trust-bar__item--semrush { flex: 1; min-width: 0; border-radius: 12px; overflow: hidden; position: relative; background: #421983; } /* ════════════════════════════════════════════════════════════════════ 2. WHAT WE OFFER (MCP) ══════════════════════════════════════════════════════════════════════ */ .offer { background: #F9FAFB; } .offer__header { text-align: center; margin-bottom: var(--sp-48); } .offer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-20); } .offer__card { background: #fff; border: 1px solid #EAECF0; border-radius: 12px; padding: 24px; min-height: 228px; position: relative; transition: border-color var(--dur) var(--ease); } .offer__card::before { display: none; } .offer__card:hover { border-color: #5D667B; background: #fff; box-shadow: none; transform: none; } .offer__card-icon { border-radius: 8px; background: #EBEEFD; display: inline-flex; align-items: center; justify-content: center; padding: 10px; margin-bottom: 24px; transition: background var(--dur) var(--ease); } .offer__card:hover .offer__card-icon { background: #3A58EF; } .offer__card:hover .offer__card-icon svg path { stroke: #fff; } .offer__card:hover .offer__card-icon svg circle { stroke: #fff; } .offer__card:hover .offer__card-icon svg { stroke: #fff; } .offer__card h5 { color: #344054; font-family: Inter; font-size: 20px; font-weight: 700; line-height: 30px; margin-bottom: 8px; } .offer__card p { color: #475467; font-family: Inter; font-size: 16px; font-weight: 400; line-height: 24px; padding: 0; margin-bottom: 0; } .offer__card a { font-size: 14px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-16); transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .offer__card a:hover { color: var(--brand-hover); gap: var(--sp-8); } .offer__popular { display: inline-block; font-size: 11px; font-weight: 700; background: var(--brand); color: #fff; padding: 2px var(--sp-8); border-radius: var(--radius-full); margin-left: var(--sp-8); vertical-align: middle; } /* ════════════════════════════════════════════════════════════════════ 3. PRICING PACKAGES — accordion table design ══════════════════════════════════════════════════════════════════════ */ .pricing { background: #F9FAFB; } .pricing__header { text-align: center; margin-bottom: 32px; } /* ── Package Tabs ─────────────────────────────────────────────────── */ .pkg-tabs { flex-wrap: wrap; display: inline-flex; padding: 8px; justify-content: center; align-items: center; gap: 8px; border-radius: 50px; border: 1px solid var(--Text-Grey-200, #EAECF0); background: var(--White, #FFF); margin-bottom: 32px; } .pkg-tab { border: none; white-space: nowrap; transition: background 0.18s, color 0.18s, box-shadow 0.18s; color: var(--Text-Grey-500, #5D667B); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; border-radius: 50px; background: var(--Theme-Blue-50, #EBEEFD); padding: 10px 24px; } .pkg-tab.active { color: var(--White, #FFF); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; border-radius: 50px; background: var(--Theme-Blue-800, #182878); box-shadow: 0 4px 4px -2px rgba(24, 39, 75, 0.06), 0 2px 4px -2px rgba(24, 39, 75, 0.02), 0 0 2px 0 #E0E0E0; padding: 10px 24px; } .pkg-tab:not(.active):hover { background: rgba(255,255,255,0.7); color: #344054; } /* ── Table Wrapper ────────────────────────────────────────────────── */ .pkg-table { overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07); border-radius: 16px; border: 1px solid var(--Text-Grey-200, #EAECF0); background: var(--White, #FFF); padding: 36px; } /* ── Table Header ─────────────────────────────────────────────────── */ .pkg-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; border-bottom: 2px solid #EAECF0; } .pkg-head__label { padding: 0; border-right: 0; display: flex; flex-direction: column; justify-content: start; } .pkg-head__title { margin-bottom: 12px; color: var(--Text-Grey-700, #344054); font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: 32px; } .pkg-head__sub { color: var(--Text-Grey-700, #344054); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; line-height: 28px; } .pkg-head__plan { padding: 24px 14px; text-align: center; border-right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; } .pkg-head__plan:last-child { border-right: none; } .pkg-head__plan--custom { border-radius: 12px 12px 0 0; } .pkg-plan__price { color: var(--Theme-Blue-500, #3A58EF); text-align: center; font-family: Inter; font-size: 30px; font-style: normal; font-weight: 700; line-height: 38px; } .pkg-plan__price span { color: var(--Text-Grey-700, #344054); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .pkg-head__plan--custom .pkg-plan__price { color: var(--Theme-Blue-500, #3A58EF); text-align: center; font-family: Inter; font-size: 30px; font-style: normal; font-weight: 700; line-height: 38px; } .pkg-head__plan--custom .pkg-plan__price span { color: rgba(255,255,255,0.5); } .pkg-plan__badge { border-radius: 50px; background: var(--Theme-Blue-50, #EBEEFD); color: var(--Text-Grey-700, #344054); text-align: center; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; padding: 4px 16px; } .pkg-plan__badge--custom { border-radius: 50px; background: var(--White, #FFF); } .pkg-plan__btn { display: block; width: 100%; cursor: pointer; text-decoration: none; white-space: nowrap; background: transparent; transition: border-color 0.18s, color 0.18s, background 0.18s; border-radius: 4px; border: 1px solid var(--Theme-Blue-500, #3A58EF); color: var(--Theme-Blue-500, #3A58EF); text-align: center; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; padding: 8px 14px; } .pkg-plan__btn:hover { border-color: #3A58EF; color: #3A58EF; } .pkg-plan__btn--custom { border-color: #3A58EF; border-radius: 4px; background: var(--Theme-Blue-500, #3A58EF); color: var(--White, #FFF); text-align: center; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; padding: 8px 14px; } .pkg-plan__btn--custom:hover { background: #182878; border-color: #182878; color: #fff; } /* ── Accordion Groups ─────────────────────────────────────────────── */ .pkg-group { border-top: 1px solid #EAECF0; } .pkg-group:first-of-type { border-top: none; } .pkg-group__hdr { display: flex; align-items: center; gap: 12px; padding: 14px 24px; cursor: pointer; background: #fff; user-select: none; transition: background 0.15s; } .pkg-group__hdr:hover { background: #F9FAFB; } .pkg-group__ico { width: 24px; height: 24px; flex-shrink: 0; border-radius: 0; border: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; color: #3A58EF; font-weight: 300; transition: border-color 0.15s, color 0.15s; } .pkg-group--open .pkg-group__ico { border-color: #3A58EF; color: #3A58EF; } .pkg-group__name { color: var(--Text-Grey-600, #475467); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; line-height: 28px; } /* ── Sub-section Header ───────────────────────────────────────────── */ .pkg-sub-hd { padding: 10px 24px; background: #F9FAFB; font-size: 14px; font-weight: 700; color: #344054; border-top: 1px solid #EAECF0; } /* ── Data Rows ────────────────────────────────────────────────────── */ .pkg-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; border-top: 1px solid #F2F4F7; } .pkg-row:hover { background: #FAFAFA; } .pkg-row__lbl { padding: 11px 24px; font-size: 14px; color: #344054; display: flex; align-items: center; border-right: 0; } .pkg-row__cell { padding: 11px 8px; display: flex; align-items: center; justify-content: center; border-right: 0; color: var(--Text-Grey-700, #344054); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: inherit; } .pkg-row__cell:last-child { border-right: none; } .pkg-row__cell--c { } /* Selected plan column highlight — matches custom column colour */ .pkg-table--col-1 .pkg-head__plan:nth-child(2), .pkg-table--col-1 .pkg-row__cell:nth-child(2) { background: var(--Theme-Blue-50, #EBEEFD); } .pkg-table--col-2 .pkg-head__plan:nth-child(3), .pkg-table--col-2 .pkg-row__cell:nth-child(3) { background: var(--Theme-Blue-50, #EBEEFD); } .pkg-table--col-3 .pkg-head__plan:nth-child(4), .pkg-table--col-3 .pkg-row__cell:nth-child(4) { background: var(--Theme-Blue-50, #EBEEFD); } /* Rounded top corners on selected column header */ .pkg-table--col-1 .pkg-head__plan:nth-child(2) { border-radius: 12px 12px 0 0; } .pkg-table--col-2 .pkg-head__plan:nth-child(3) { border-radius: 12px 12px 0 0; } .pkg-table--col-3 .pkg-head__plan:nth-child(4) { border-radius: 12px 12px 0 0; } /* Rounded bottom corners on selected column last row */ .pkg-table--col-1 .pkg-group:last-child .pkg-row:last-child .pkg-row__cell:nth-child(2) { border-radius: 0 0 12px 12px; } .pkg-table--col-2 .pkg-group:last-child .pkg-row:last-child .pkg-row__cell:nth-child(3) { border-radius: 0 0 12px 12px; } .pkg-table--col-3 .pkg-group:last-child .pkg-row:last-child .pkg-row__cell:nth-child(4) { border-radius: 0 0 12px 12px; } /* Custom column highlight when Book A Meeting is clicked */ .pkg-table--col-custom .pkg-head__plan--custom { background: var(--Theme-Blue-50, #EBEEFD); } .pkg-table--col-custom .pkg-row__cell--c { background: var(--Theme-Blue-50, #EBEEFD); } .pkg-table--col-custom .pkg-group:last-child .pkg-row:last-child .pkg-row__cell--c { border-radius: 0 0 12px 12px; } /* Selected column: flip check icons to dark-blue filled (skip X marks which use not ) */ .pkg-table--col-1 .pkg-row__cell:nth-child(2) svg:has(path) circle, .pkg-table--col-2 .pkg-row__cell:nth-child(3) svg:has(path) circle, .pkg-table--col-3 .pkg-row__cell:nth-child(4) svg:has(path) circle, .pkg-table--col-custom .pkg-row__cell--c svg:has(path) circle { fill: #3A58EF; } .pkg-table--col-1 .pkg-row__cell:nth-child(2) svg path, .pkg-table--col-2 .pkg-row__cell:nth-child(3) svg path, .pkg-table--col-3 .pkg-row__cell:nth-child(4) svg path, .pkg-table--col-custom .pkg-row__cell--c svg path { fill: white; } /* ── Group header column highlight (gradient stripe at column position) ─ Default all-in-one table: grid 2fr 1fr 1fr 1fr 1fr = 6 total fr Column positions: col-1 = 2/6–3/6, col-2 = 3/6–4/6, col-3 = 4/6–5/6, custom = 5/6–end */ .pkg-table--col-1 .pkg-group__hdr { background: linear-gradient(to right, #F9FAFB calc(100%*2/6), #EBEEFD calc(100%*2/6), #EBEEFD calc(100%*3/6), #F9FAFB calc(100%*3/6)); } .pkg-table--col-2 .pkg-group__hdr { background: linear-gradient(to right, #F9FAFB calc(100%*3/6), #EBEEFD calc(100%*3/6), #EBEEFD calc(100%*4/6), #F9FAFB calc(100%*4/6)); } .pkg-table--col-3 .pkg-group__hdr { background: linear-gradient(to right, #F9FAFB calc(100%*4/6), #EBEEFD calc(100%*4/6), #EBEEFD calc(100%*5/6), #F9FAFB calc(100%*5/6)); } .pkg-table--col-custom .pkg-group__hdr { background: linear-gradient(to right, #F9FAFB calc(100%*5/6), #EBEEFD calc(100%*5/6)); } /* --cols-2 tables: grid 2fr 1fr 1fr = 4 total fr col-1 = 50%–75%, col-2 = 75%–end */ .pkg-table--cols-2.pkg-table--col-1 .pkg-group__hdr { background: linear-gradient(to right, #F9FAFB 50%, #EBEEFD 50%, #EBEEFD 75%, #F9FAFB 75%); } .pkg-table--cols-2.pkg-table--col-2 .pkg-group__hdr { background: linear-gradient(to right, #F9FAFB 75%, #EBEEFD 75%); } /* --cols-3 tables: grid 2fr 1fr 1fr 1fr = 5 total fr col-1 = 40%–60%, col-2 = 60%–80%, col-3 = 80%–end */ .pkg-table--cols-3.pkg-table--col-1 .pkg-group__hdr { background: linear-gradient(to right, #F9FAFB 40%, #EBEEFD 40%, #EBEEFD 60%, #F9FAFB 60%); } .pkg-table--cols-3.pkg-table--col-2 .pkg-group__hdr { background: linear-gradient(to right, #F9FAFB 60%, #EBEEFD 60%, #EBEEFD 80%, #F9FAFB 80%); } .pkg-table--cols-3.pkg-table--col-3 .pkg-group__hdr { background: linear-gradient(to right, #F9FAFB 80%, #EBEEFD 80%); } /* ════════════════════════════════════════════════════════════════════ 4. HOW IT WORKS (MCP) ══════════════════════════════════════════════════════════════════════ */ .how { background: #ffffff; padding: 72px 0; } .how__header { text-align: center; margin-bottom: var(--sp-48); display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); } .how__steps { display: flex; align-items: flex-start; justify-content: center; width: 100%; overflow: hidden; } .how__step-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); text-align: center; } .how__step-circle-bg { width: 80px; height: 80px; border-radius: 50%; border: 2px solid #F2F4F7; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .how__step-col:hover .how__step-circle-bg { background: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-brand); } .how__step-col:hover .how__step-circle-bg .how__step-num { color: #fff; } .how__step-num { transition: color var(--dur) var(--ease); color: var(--Text-Grey-800, #1D2939); text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 800; line-height: 110%; letter-spacing: -0.48px; } .how__step-text { display: flex; flex-direction: column; gap: var(--sp-8); align-items: center; width: 100%; } .how__step h5 { color: var(--Text-Grey-700, #344054); text-align: center; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; line-height: 30px; margin-bottom: 8px; } .how__step-arrow { display: flex; align-items: center; padding-top: 30px; flex-shrink: 0; max-width: 120px; overflow: hidden; } .how__step-arrow svg { width: 100%; height: auto; } section#how {} section#how h2.section-title { color: var(--Theme-Dark-Blue-800, #26244A); text-align: center; font-family: Inter; font-size: 36px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: -.72px; padding: 0; margin-bottom: 8px; } section#how p.section-sub { color: var(--Text-Grey-600, #475467); text-align: center; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; margin: 0; padding: 0; } section#how h2.section-title span { color: var(--Theme-Blue-500, #3A58EF); font-family: Inter; font-size: 36px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: -.72px; } @media (max-width: 768px) { .how__steps { flex-direction: column; align-items: center; gap: var(--sp-32); } .how__step-arrow { display: none; } } /* ── Contact form floating labels ─────────────────────────────────── */ .fl-wrap { flex: 1; min-width: 0; position: relative; } .fl-input { width: 100%; border: 1px solid #EAECF0; border-radius: 4px; padding: 14px 16px 6px; font-family: 'Inter', sans-serif; font-size: 14px; color: #101828; outline: none; box-sizing: border-box; background: #fff; transition: border-color .15s; } .fl-input:focus { border-color: #3A58EF; } .fl-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: 'Inter', sans-serif; font-size: 14px; color: #5D667B; background: #fff; padding: 0 4px; pointer-events: none; transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease; line-height: 1; } /* Lifted state — on focus or when input has value */ .fl-input:focus ~ .fl-label, .fl-input:not(:placeholder-shown) ~ .fl-label { top: 0px; transform: translateY(-50%); font-size: 12px; color: #5D667B; } .fl-req { color: #F04438; } /* Select wrapper */ .fl-select-wrap { position: relative; } .fl-select { padding: 12px 40px 12px 16px; appearance: none; -webkit-appearance: none; cursor: pointer; } .fl-label--up { top: 0px; transform: translateY(-50%); font-size: 12px; color: #5D667B; } .fl-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; } /* Textarea */ .fl-textarea { width: 100%; border: 1px solid #EAECF0; border-radius: 4px; padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: 14px; color: #667085; outline: none; box-sizing: border-box; resize: vertical; transition: border-color .15s; } .fl-textarea:focus { border-color: #3A58EF; } .fl-textarea::placeholder { color: #667085; } /* ════════════════════════════════════════════════════════════════════ 5. WHY MYCPE ONE (MCP) ══════════════════════════════════════════════════════════════════════ */ .why { background: var(--bg); } .why .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); align-items: center; } .why__left h2 { margin-bottom: var(--sp-16); } .why__left > p { margin-bottom: var(--sp-32); font-size: 17px; line-height: 1.7; } .why__points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); } .why__point { display: flex; gap: var(--sp-12); align-items: center; } .why__point-icon { width: 40px; height: 40px; flex-shrink: 0; background: var(--brand-light); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .why__point:hover .why__point-icon { background: var(--brand); transform: scale(1.05); } .why__point:hover .why__point-icon svg { stroke: #fff; } .why__point-text h6 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-4); } .why__point-text p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; } .why__right { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); } .why__metric-card { text-align: start; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); border-radius: 12px; border: 1px solid var(--Text-Grey-200, #EAECF0); background: var(--White, #FFF); padding: 24px; margin-top: 0; margin-block: 24px; } .why__metric-card:hover { border-radius: 12px; border: 1px solid var(--Text-Grey-500, #5D667B); background: var(--White, #FFF); } .why__metric-card:hover .why__metric-icon span { border-radius: 8px; background: #3a58ef; } .why__metric-card:hover .why__metric-icon span svg { stroke: #fff; } .why__metric-card.dark { background: var(--dark-blue); border-color: var(--dark-blue); } .why__metric-card.brand { background: var(--brand); border-color: var(--brand); } .why__metric-icon { margin: 0; display: inline-block; } .why__metric-icon span { border-radius: 8px; background: var(--Theme-Blue-50, #EBEEFD); display: inline-block; padding: 10px; margin-bottom: 24px; } .why__metric-val { color: var(--Text-Grey-700, #344054); font-family: Inter; font-size: 20px; font-style: normal; font-weight: 600; line-height: 30px; margin-bottom: 8px; text-align: start; } .why__metric-card.dark .why__metric-val, .why__metric-card.brand .why__metric-val { color: #fff; } .why__metric-label { margin-top: var(--sp-6); color: var(--Text-Grey-600, #475467); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; padding: 0; text-align: start; } .why__metric-card.dark .why__metric-label, .why__metric-card.brand .why__metric-label { color: rgba(255,255,255,0.65); } /* ════════════════════════════════════════════════════════════════════ 6. TESTIMONIALS (MCP) ══════════════════════════════════════════════════════════════════════ */ .testimonials { background: var(--surface); } .testimonials__header { text-align: center; margin-bottom: var(--sp-48); } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); } .testimonial-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: var(--sp-28); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .testimonial-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--border); } .testimonial-card__stars { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-16); } .testimonial-card__stars span { font-size: 15px; color: #F79009; } .testimonial-card__text { font-size: 15px; line-height: 1.75; color: var(--text-body); margin-bottom: var(--sp-20); } .testimonial-card__author { display: flex; align-items: center; gap: var(--sp-12); } .testimonial-card__avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; } .testimonial-card__name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .testimonial-card__role { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .testimonials__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-24); margin-top: var(--sp-56); padding-top: var(--sp-48); border-top: 1px solid var(--border-light); text-align: center; } .testimonials__stat-val { color: var(--Theme-Blue-500, #3A58EF); font-family: Inter; font-size: 48px; font-style: normal; font-weight: 700; line-height: 60px; letter-spacing: -0.96px; } .testimonials__stat-label { font-family: Inter; font-weight: 600; font-size: 18px; line-height: 28px; letter-spacing: normal; color: #344054; margin-top: 8px; } .testimonials__header h2.section-title { color: var(--Theme-Dark-Blue-800, #26244A); text-align: center; font-family: Inter; font-size: 36px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: -0.72px; } p.section-sub { color: var(--Text-Grey-600, #475467); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; text-align: center; } .Rating_Top { display: flex; align-items: self-start; justify-content: space-between; } .Rating_Top_Right { display: flex; gap: 4px; } .testimonial-card:hover .Rating_Top_Right svg path { fill: rgb(58, 88, 239); } /* ════════════════════════════════════════════════════════════════════ 7. BUNDLE (MCP) ══════════════════════════════════════════════════════════════════════ */ .bundle { background: #EBEEFD; padding: var(--sp-80) 0; position: relative; overflow: hidden; } .bundle::before { display: none; } .bundle .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); align-items: center; position: relative; } .bundle__left h2 { color: var(--dark-blue-900); margin-bottom: var(--sp-16); } .bundle__left p { color: #4B5563; font-size: 16px; margin-bottom: var(--sp-32); line-height: 1.75; } .bundle__left .eyebrow { margin-bottom: var(--sp-20); color: var(--brand); background: var(--brand-mid); } .bundle__features { display: flex; flex-direction: column; gap: var(--sp-12); margin-bottom: var(--sp-32); } .bundle__feature { display: flex; align-items: center; gap: var(--sp-12); font-size: 15px; color: #374151; font-weight: 500; } .bundle__feature-check { width: 20px; height: 20px; border-radius: 50%; background: rgba(52,211,153,0.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bundle__right { background: #fff; border: 1px solid var(--brand-mid); border-radius: var(--radius-2xl); padding: var(--sp-32); backdrop-filter: blur(10px); } .bundle__selector-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #6B7280; margin-bottom: var(--sp-16); text-transform: uppercase; } .bundle__services { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-bottom: var(--sp-24); } .bundle__service-chip { font-size: 13px; font-weight: 500; padding: 7px var(--sp-14); border-radius: var(--radius-md); cursor: pointer; background: var(--brand-light); color: #374151; border: 1px solid var(--brand-mid); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .bundle__service-chip:hover { background: var(--brand-mid); color: var(--brand); border-color: var(--brand); } .bundle__service-chip.selected { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-brand); } .bundle__summary { background: var(--brand-light); border: 1px solid var(--brand-mid); border-radius: var(--radius-lg); padding: var(--sp-20); } .bundle__summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #4B5563; margin-bottom: var(--sp-10); } .bundle__summary-row:last-child { margin-bottom: 0; } .bundle__summary-row.total { font-size: 15px; font-weight: 700; color: var(--dark-blue-900); border-top: 1px solid var(--brand-mid); padding-top: var(--sp-12); margin-top: var(--sp-4); } .bundle__summary-row .savings { color: #059669; font-weight: 600; } .bundle a.btn.btn--primary.btn--lg { border-radius: 4px; background: var(--Theme-Blue-500, #3A58EF); box-shadow: 0 1px 2px 0 rgb(16 24 40 / .05); padding: 12px 20px; color: var(--White, #FFF); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; } .bundle a.btn.btn--primary.btn--lg:hover { border-radius: 4px; background: var(--Theme-Blue-800, #182878); box-shadow: 0 1px 2px 0 rgb(16 24 40 / .05); } /* ════════════════════════════════════════════════════════════════════ 8. CONTACT US (MCP) ══════════════════════════════════════════════════════════════════════ */ .contact { background: var(--bg); } .contact-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-24); align-items: start; } .contact-card { background: #fff; border: 1px solid #EAECF0; border-radius: 12px; padding: var(--sp-32); } .contact-card__title { margin-bottom: var(--sp-8); color: var(--dark-blue-900); } .contact-card__sub { margin-bottom: var(--sp-24); color: #5D667B; } /* Floating label inputs */ .form-float { position: relative; } .form-float__input { width: 100%; height: 50px; font-family: var(--font); font-size: 14px; color: var(--text-primary); background: #fff; border: 1px solid #EAECF0; border-radius: 6px; padding: 18px 14px 4px; outline: none; box-sizing: border-box; transition: border-color var(--dur-fast) var(--ease); } .form-float__input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(58,88,239,0.10); } .form-float__lbl { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font); font-size: 14px; color: #5D667B; pointer-events: none; background: #fff; padding: 0 2px; transition: all .15s var(--ease); } .form-float__input:focus ~ .form-float__lbl, .form-float__input:not(:placeholder-shown) ~ .form-float__lbl { top: 8px; transform: none; font-size: 11px; color: var(--brand); } /* Form grid rows */ .contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); margin-bottom: var(--sp-16); } /* Select wrapper */ .contact-select-wrap { position: relative; } .contact-select { width: 100%; height: 50px; font-family: var(--font); font-size: 14px; color: var(--text-primary); background: #fff; border: 1px solid #EAECF0; border-radius: 6px; padding: 14px 40px 4px 14px; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; box-sizing: border-box; } .contact-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(58,88,239,0.10); } .contact-select__lbl { position: absolute; left: 11px; top: -9px; font-family: var(--font); font-size: 12px; color: #5D667B; background: #fff; padding: 0 4px; pointer-events: none; } .contact-select__caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; } /* Submit button */ .contact-submit-btn { width: 100%; background: var(--brand); color: #fff; border: none; border-radius: 6px; padding: 13px 20px; font-family: var(--font); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: var(--sp-8); cursor: pointer; transition: background var(--dur) var(--ease); margin-top: var(--sp-8); } .contact-submit-btn:hover { background: var(--brand-hover); } /* Quick Contact */ .contact-qc__title { font-size: 20px; font-weight: 700; color: var(--dark-blue-900); margin: 0 0 var(--sp-24); } .contact-qc__list { display: flex; flex-direction: column; gap: var(--sp-24); } .contact-qc__item { display: flex; gap: var(--sp-16); align-items: flex-start; } .contact-qc__icon { width: 52px; height: 52px; flex-shrink: 0; background: #EBEEFD; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .contact-qc__meta { display: flex; flex-direction: column; gap: 4px; } .contact-qc__label { font-size: 14px; font-weight: 500; color: #5D667B; line-height: 20px; } .contact-qc__value { font-size: 18px; font-weight: 600; color: #2A3343; line-height: 28px; text-decoration: none; } .contact-qc__value:hover { color: var(--brand); } @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } } .form-group { margin-bottom: var(--sp-20); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); } /* ════════════════════════════════════════════════════════════════════ 9. BLOGS (MCP) ══════════════════════════════════════════════════════════════════════ */ .blogs { background: var(--surface); } .blogs__header { text-align: center; margin-bottom: var(--sp-48); } .blogs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); } .blog-card { overflow: hidden; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); border-radius: 8px; background: #FFF; padding: 16px; height: 100%; border: 1px solid #eeeeee; } .blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--border); } .blog-card__thumb { height: 176px; display: flex; align-items: center; justify-content: center; max-height: 240px; overflow: hidden; border-radius: 8px; } .blog-card__thumb img { transition: transform var(--dur-slow) var(--ease); } .blog-card:hover .blog-card__thumb img { transform: scale(1.08); } .blog-card__body { padding: 0; } .blog-card__category { font-size: 14px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: var(--sp-8); margin-top: 18px; } .blog-card h5 { font-size: 20px; overflow: hidden; color: var(--Text-Grey-800, #1D2939); font-style: normal; font-weight: 700; line-height: 130%; height: 52px; margin-top: 0; margin-bottom: 8px; } .blog-card p { font-size: 15px; margin-bottom: var(--sp-16); color: var(--Text-Grey-500, #5D667B); font-style: normal; font-weight: 400; line-height: 24px; } .blog-card__meta { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-12); border-top: 1px solid var(--border-light); color: var(--Text-Grey-400, #98A2B3); font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin-bottom: 0; } .blog-card__read { font-size: 13px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: var(--sp-4); transition: gap var(--dur-fast) var(--ease); } .blog-card:hover .blog-card__read { gap: var(--sp-8); } .blogs__cta { text-align: center; margin-top: var(--sp-40); } section#blogs {} section#blogs a.btn.btn--outline.btn--lg { border-radius: 4px; background: var(--Theme-Blue-500, #3A58EF); box-shadow: 0 1px 2px 0 rgb(16 24 40 / .05); padding: 12px 20px; color: var(--White, #FFF); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; } section#blogs a.btn.btn--outline.btn--lg:hover { border-radius: 4px; background: var(--Theme-Blue-800, #182878); box-shadow: 0 1px 2px 0 rgb(16 24 40 / .05); } /* ════════════════════════════════════════════════════════════════════ 9b. BLOG CARDS — Insightful_Box (shared component) ══════════════════════════════════════════════════════════════════════ */ .Insightful_Box { border-radius: 8px; background: #FFF; padding: 16px; height: 100%; border: 1px solid #eeeeee; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .Insightful_Box:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); transform: translateY(-4px); border-color: #D0D5DD; } .Insightful_Box img { width: 100%; } .Insightful_img { max-height: 240px; overflow: hidden; border-radius: 8px; } .Insightful_Box a img { border-radius: 8px; transition: transform 0.3s ease; } .Insightful_Box:hover a img { transform: scale(1.08); } .Insightful_content { padding-top: 4px; } /* h3 = title (new_design uses h3), h4 = title (source uses h4) */ .Insightful_Box h3, .Insightful_Box h4.insight-title { overflow: hidden; color: var(--Text-Grey-800, #1D2939); font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; height: 52px; margin-top: 18px; margin-bottom: 8px; } .Insightful_Box h4 { overflow: hidden; color: var(--Text-Grey-800, #1D2939); font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; height: 52px; margin-top: 18px; margin-bottom: 8px; } /* h4 inside Insightful_content = author/views row */ .Insightful_content h4 { overflow: visible; color: var(--Text-Grey-400, #98A2B3); font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; height: auto; margin-top: 0; margin-bottom: 15px; } .Insightful_Box p { color: var(--Text-Grey-500, #5D667B); font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: 24px; } .Insightful_Box a { text-decoration: none; color: inherit; } .view_all_blog { margin-top: 40px; } .Fill_Btn { color: #fff; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; border-radius: 4px; border: 1px solid #3A58EF; background-color: #3A58EF; padding: 10px 24px; display: inline-block; transition: background 0.2s ease, color 0.2s ease; text-decoration: none; } .Fill_Btn:hover { background-color: #182878; border-color: #182878; color: #fff; text-decoration: none; } /* ════════════════════════════════════════════════════════════════════ 6b. CPA SPONSORS — How Digital Marketing Helps ══════════════════════════════════════════════════════════════════════ */ section.cpa_sponsers { padding: 80px 0 50px 0; } section.cpa_sponsers.bg-blue { background: var(--Theme-Blue-50, #EBEEFD); } section.cpa_sponsers h2 { margin-bottom: 24px; color: var(--Theme-Dark-Blue-800, #26244A); font-family: Inter; font-size: 36px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: -0.72px; } section.cpa_sponsers p { color: var(--Text-Grey-500, #5D667B); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; margin-bottom: 5px; } .sponser-desc { display: flex; flex-direction: column; gap: 16px; /* max-width: 900px; */ margin: 0 auto; } /* ════════════════════════════════════════════════════════════════════ 10. FAQ (MCP) ══════════════════════════════════════════════════════════════════════ */ .faq { background: var(--bg); } .faq__header { text-align: start; margin-bottom: var(--sp-48); } .faq__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); background: var(--brand-light); border: 1px solid var(--brand-mid); padding: var(--sp-4) 14px; border-radius: var(--radius-full); margin-bottom: var(--sp-16); line-height: 1.4; } .faq__section-title { color: var(--text-primary); margin-bottom: var(--sp-12); letter-spacing: .36px; text-transform: capitalize; padding: 0; font-family: Inter; font-size: 2.25rem; font-style: normal; font-weight: 700; line-height: 120%; } .faq__section-sub { max-width: 600px; color: var(--Text-Grey-600, #475467); text-align: start; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; margin: 0; padding: 0; margin-bottom: 0; } .faq__list { max-width: inherit; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-8); } .faq__item { overflow: hidden; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); margin: 0; border: 0; margin-bottom: 16px; border-radius: 0; background: #fff0; border-bottom: 1px solid #d9d9d9; } .faq__item.open { border-color: var(--brand-mid); box-shadow: none; } .faq__question { display: flex; align-items: center; justify-content: start; gap: var(--sp-16); padding: var(--sp-20) var(--sp-24); padding-left: 0; padding-right: 0; padding-top: 0; cursor: pointer; user-select: none; transition: background var(--dur-fast) var(--ease); color: #667085; font-family: Inter; font-size: 20px; font-weight: 600; line-height: 30px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; } .faq__question:hover { background: var(--bg); } .faq__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur) var(--ease), transform var(--dur-slow) var(--ease); } .faq__item.open .faq__icon { transform: rotate(45deg); } .faq__icon svg { color: var(--brand); transition: color var(--dur) var(--ease); min-width: 24px; min-height: 24px; } .faq__item.open .faq__icon svg { min-width: 24px; min-height: 24px; } .faq__answer { border-radius: 50%; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur) var(--ease), transform var(--dur-slow) var(--ease); display: none; } .faq__item.open .faq__answer { max-height: 320px; padding: 0 var(--sp-24) var(--sp-20); color: var(--secondary-secondary-100, #171a1f); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; margin-bottom: 15px; padding-left: 50px; display: inline-block; } /* ════════════════════════════════════════════════════════════════════ FAQ_Main — shared accordion FAQ component ══════════════════════════════════════════════════════════════════════ */ .FAQ_Box .sticky-top { top: 130px; z-index: 9; } .FAQ_Main h2.Sec_Title { text-transform: capitalize; padding: 0; margin-bottom: 35px; color: #26244A; font-family: Inter; font-size: 2.25rem; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: -0.72px; } .FAQ_Main .FAQ_Box .accordion-header .accordion-button::before { flex-shrink: 0; margin-left: 0; margin-right: 24px; content: ""; background-repeat: no-repeat; background-image: url('https://assets.my-cpe.com/entigrity-assets/custom/l_and_d/images/Open_Accordion_Icon.svg'); background-size: cover; transition: all 0.3s; transform: rotate(45deg); width: 32px; height: 32px; display: inline-block; } .FAQ_Main .FAQ_Box .accordion-flush .accordion-item .accordion-button.collapsed::before { transform: rotate(0deg); } .FAQ_Main .FAQ_Box .accordion-button { color: var(--Text-Grey-700, #344054); background: transparent; border: 0; padding-left: 0; text-align: left; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 600; line-height: 150%; } .FAQ_Main .FAQ_Box .accordion-button::after { display: none; } .FAQ_Main .FAQ_Box .accordion-flush .accordion-item .accordion-button.collapsed { border-radius: 0; border: 0; background: transparent; padding-left: 0; } .FAQ_Main .FAQ_Box .accordion-item { margin: 0; border: none; margin-bottom: 16px; border-radius: 0; background: transparent; border-bottom: 1px solid #D9D9D9; } .FAQ_Main .FAQ_Box .accordion-body { border: 0; background: transparent; padding: 0; padding-left: 55px; } .FAQ_Main .FAQ_Box .accordion-body p { color: var(--secondary-secondary-100, #171A1F); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; padding: 0; margin-bottom: 15px; } .FAQ_Main .FAQ_Box .accordion-body ul { margin-left: 20px; } .FAQ_Main .FAQ_Box .accordion-body ul li { color: var(--secondary-secondary-100, #171A1F); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; list-style: disc; margin-bottom: 10px; } .FAQ_Main .FAQ_Box .collapse { border: 0; } .FAQ_Main .FAQ_Box .nav-pills button.nav-link { font-family: Inter; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; color: #344054; padding: 8px; display: inline-block; width: auto; max-width: fit-content; margin-bottom: 16px; } .FAQ_Main .FAQ_Box .nav-pills button.nav-link.active { background: #D8DEFC; padding: 8px; color: #1D2939; border-radius: 4px; } .FAQ_Main .FAQ_Box .tab-content h3 { font-family: Inter; font-size: 26px; font-weight: 700; line-height: 33.8px; text-align: left; color: #26244A; } .FAQ_Main .mos_schedule_btn { background: #3A58EF; color: #FFFFFF; border-color: #3A58EF; } .FAQ_Main .mos_schedule_btn svg path { stroke: #FFFFFF; } .FAQ_Main .mos_schedule_btn:hover { background: #2d47d4; border-color: #2d47d4; } .accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed { border-radius: 0; border: 0 !important; outline: none !important; box-shadow: none; } /* ════════════════════════════════════════════════════════════════════ FOOTER CTA BANNER (MCP) ══════════════════════════════════════════════════════════════════════ */ .footer-cta { padding: 72px 0; text-align: center; position: relative; overflow: hidden; background: #EBEEFD; /* background: url(../images/Ready_to_Grow_Bg.png); background-size: cover; background-repeat: no-repeat; */ } .footer-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 70%); pointer-events: none; } .footer-cta h2 { color: #fff; margin-bottom: var(--sp-12); color: var(--Theme-Dark-Blue-800, #26244A); font-family: Inter; font-size: 36px; font-style: normal; font-weight: 700; line-height: 48px; letter-spacing: -.72px; text-align: center; padding-bottom: 0; } .footer-cta p { max-width: inherit; color: var(--Text-Grey-600, #475467); text-align: center; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; margin: 0; padding: 0; margin-bottom: 48px; } .footer-cta__btns { display: flex; gap: var(--sp-12); justify-content: center; flex-wrap: wrap; } .footer-cta__btns a.btn.btn--white.btn--lg { border-radius: 4px; background: var(--Theme-Blue-500, #3A58EF); box-shadow: 0 1px 2px 0 rgb(16 24 40 / .05); padding: 12px 20px; display: inline-block; color: var(--White, #FFF); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; } .footer-cta__btns a.btn.btn--white.btn--lg:hover { border-radius: 4px; background: var(--Theme-Blue-800, #182878); box-shadow: 0 1px 2px 0 rgb(16 24 40 / .05); } .footer-cta__btns a.btn.btn--ghost.btn--lg { border-radius: 4px; border: 1px solid var(--Theme-Blue-500, #3A58EF); padding: 12px 20px; color: var(--Theme-Blue-500, #3A58EF); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; display: flex; align-items: center; gap: 8px; } .footer-cta__btns a.btn.btn--ghost.btn--lg:hover { background: var(--Theme-Blue-500, #3A58EF); color: #fff; } /* ─── Footer (MCP) ────────────────────────────────────────────────── */ .footer { background: var(--dark-blue-900); padding: var(--sp-64) 0 var(--sp-32); } .footer__top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: var(--sp-48); padding-bottom: var(--sp-48); border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: var(--sp-32); } .footer__brand p { font-size: 14px; color: rgba(255,255,255,0.40); margin-top: var(--sp-12); line-height: 1.7; } .footer__social { display: flex; gap: var(--sp-8); margin-top: var(--sp-20); } .footer__social-link { width: 36px; height: 36px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.45); font-size: 13px; font-weight: 600; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } .footer__social-link:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); } .footer__col-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: var(--sp-16); } .footer__col ul { display: flex; flex-direction: column; gap: var(--sp-10); } .footer__col ul li a { font-size: 14px; color: rgba(255,255,255,0.42); transition: color var(--dur-fast) var(--ease); } .footer__col ul li a:hover { color: rgba(255,255,255,0.90); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-12); } .footer__copy { font-size: 13px; color: rgba(255,255,255,0.28); } .footer__legal { display: flex; gap: var(--sp-20); } .footer__legal a { font-size: 13px; color: rgba(255,255,255,0.28); transition: color var(--dur-fast) var(--ease); } .footer__legal a:hover { color: rgba(255,255,255,0.65); } /* ─── SVG Icon helpers ────────────────────────────────────────────────── */ .icon { display: inline-block; vertical-align: middle; } /* svg { display: block; } */ /* ─── Pricing table column-count overrides ────────────────────────────── */ .pkg-table--cols-2 .pkg-head, .pkg-table--cols-2 .pkg-row { grid-template-columns: 2fr 1fr 1fr; } .pkg-table--cols-3 .pkg-head, .pkg-table--cols-3 .pkg-row { grid-template-columns: 2fr 1fr 1fr 1fr; } /* ── Tab intro card ──────────────────────────────────────────────── */ .pkg-intro-card { display: flex; align-items: flex-start; gap: 32px; background: #fff; border: 1px solid #EAECF0; border-radius: 16px; padding: 28px 32px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(16,24,40,.07); } .pkg-intro-card__left { flex: 1; min-width: 0; } .pkg-intro-card__title { font-size: 20px; font-weight: 700; color: #101828; margin: 0 0 10px; line-height: 1.3; } .pkg-intro-card__desc { font-size: 14px; color: #667085; line-height: 1.65; margin: 0; } .pkg-intro-card__right { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; min-width: 220px; } .pkg-intro-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; background: #F0F3FF; border-radius: 50px; font-size: 13px; font-weight: 500; color: #344054; white-space: nowrap; } .pkg-intro-badge__ico { width: 20px; height: 20px; background: #12B76A; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; line-height: 1; } /* ── Platform selector ───────────────────────────────────────────── */ .pkg-platform-selector { margin-top: 20px; } .pkg-platform-selector__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #98A2B3; text-transform: uppercase; margin-bottom: 10px; } .pkg-platform-btns { display: flex; flex-wrap: wrap; gap: 8px; } .pkg-platform-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border: 1.5px solid #D0D5DD; border-radius: 50px; background: #fff; font-size: 14px; font-weight: 500; color: #344054; cursor: pointer; transition: background .15s, color .15s, border-color .15s; font-family: Inter, sans-serif; } .pkg-platform-btn.active { background: #182878; color: #fff; border-color: #182878; } .pkg-platform-btn:not(.active):hover { background: #F0F3FF; border-color: #182878; color: #182878; } .platform-ico { width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; font-family: Arial, sans-serif; line-height: 1; } .platform-ico[data-brand="google"] { background: #4285F4; color: #fff; } .platform-ico[data-brand="yelp"] { background: #D32323; color: #fff; } .platform-ico[data-brand="linkedin"] { background: #0A66C2; color: #fff; font-size: 9px; } .platform-ico[data-brand="meta"] { background: #0081FB; color: #fff; } .platform-ico[data-brand="bing"] { background: #008373; color: #fff; } .platform-ico[data-brand="x"] { background: #000; color: #fff; } /* Tab icon alignment */ .pkg-tab svg { vertical-align: middle; margin-right: 4px; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — Tablet ≤ 1024px ══════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .section { padding: 60px 0; } .section--sm { padding: 44px 0; } .section--lg { padding: 72px 0; } /* Trust bar */ .trust-bar { padding: 48px 40px; } /* Offer */ .offer__grid { grid-template-columns: repeat(2, 1fr); } /* Why: stack two halves */ .why .container { grid-template-columns: 1fr; gap: var(--sp-48); } .why__right { grid-template-columns: repeat(2, 1fr); } /* Bundle */ .bundle .container { grid-template-columns: 1fr; gap: var(--sp-40); } /* Testimonials */ .testimonials__grid { grid-template-columns: repeat(2, 1fr); } .testimonials__stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-20); } /* Blogs */ .blogs__grid { grid-template-columns: repeat(2, 1fr); } /* Footer */ .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-32); } /* Pricing table — allow horizontal scroll */ .pkg-table { padding: 20px; overflow-x: auto; } .pkg-head, .pkg-row { min-width: 680px; } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — Mobile ≤ 768px ══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Base spacing */ .section { padding: 48px 0; } .section--sm { padding: 36px 0; } .section--lg { padding: 56px 0; } /* Typography scale-down */ h1 { font-size: 32px; line-height: 1.2; letter-spacing: -0.5px; } h2 { font-size: 26px; line-height: 1.25; } h3 { font-size: 20px; } .section-title { font-size: 26px; } .faq__section-title { font-size: 1.5rem; } /* Navbar: hide nav links on mobile */ .navbar__nav { display: none; } .navbar__actions { display: none; } /* ── Hero ─────────────────────────────────────────────────── */ .hero { padding: 40px 0; } section#home h1, .hero h1 { font-size: 30px; line-height: 40px; letter-spacing: -0.5px; } .hero__desc { font-size: 16px; line-height: 1.6; } .hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; } .hero__ctas .btn { width: 100%; justify-content: center; } .hero__stats { flex-wrap: wrap; gap: 16px; padding-top: 24px; justify-content: flex-start; } .hero__stat-item { flex: 1 1 calc(50% - 8px); background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--sp-16); } .hero__stat-num { font-size: 20px; line-height: 1.3; } .hero__visual { padding: var(--sp-16); margin-top: 24px;} .hero__visual-metrics { grid-template-columns: 1fr 1fr; } /* ── Trust bar ────────────────────────────────────────────── */ .trust-bar { padding: 32px 16px; } .trust-bar .container { flex-wrap: wrap; gap: 12px; } .trust-bar__item, .trust-bar__item--semrush { flex: 1 1 calc(50% - 6px); min-width: 0; } /* ── Offer ────────────────────────────────────────────────── */ .offer__grid { grid-template-columns: 1fr; } .offer__card { min-height: auto; } /* ── Pricing ──────────────────────────────────────────────── */ .pkg-tabs { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding-bottom: 4px; width: 100%; } .pkg-table { padding: 12px; border-radius: 10px; overflow-x: auto; } .pkg-intro-card { flex-direction: column; gap: 20px; padding: 20px; } .pkg-intro-card__right { width: 100%; flex-direction: row; flex-wrap: wrap; min-width: 0; } .pkg-platform-btns { gap: 6px; } .pkg-platform-btn { font-size: 13px; padding: 7px 14px; } .pkg-head, .pkg-row { min-width: 830px; } .pkg-group__hdr { padding: 12px 8px; } .pkg-row__lbl { padding: 10px 8px; font-size: 13px; min-width: 206px; } .pkg-row__cell { padding: 10px 4px; font-size: 13px; min-width: 154px; } /* ── Why ──────────────────────────────────────────────────── */ .why .container { grid-template-columns: 1fr; } .why__points { grid-template-columns: 1fr; } .why__right { grid-template-columns: repeat(2, 1fr); } /* ── Testimonials ─────────────────────────────────────────── */ .testimonials__grid { grid-template-columns: 1fr; } .testimonials__stats { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: var(--sp-40); } .testimonials__stat-val { font-size: 36px; line-height: 1.2; letter-spacing: -0.5px; } .testimonials__stat-label { font-size: 15px; } /* ── Bundle ───────────────────────────────────────────────── */ .bundle .container { grid-template-columns: 1fr; } .bundle { padding: 48px 0; } /* ── Contact ──────────────────────────────────────────────── */ .contact-form-row { grid-template-columns: 1fr; gap: var(--sp-16); } /* ── How it works (arrow already hidden, ensure col stacks) ── */ .how__steps { flex-direction: column; align-items: center; gap: var(--sp-32); } .how__step-arrow { display: none; } section#how h2.section-title { font-size: 26px; line-height: 1.25; letter-spacing: -0.5px; } /* ── Blogs ────────────────────────────────────────────────── */ .blogs__grid { grid-template-columns: 1fr; } /* ── FAQ ──────────────────────────────────────────────────── */ .faq__header { text-align: center; } .faq__eyebrow { display: inline-flex; } .faq__section-sub { text-align: center; margin: 0 auto; } .faq__question { font-size: 16px; line-height: 1.5; } .faq__item.open .faq__answer { font-size: 15px; padding-left: 20px; } /* ── Footer CTA ───────────────────────────────────────────── */ .footer-cta { padding: 48px 0; } .footer-cta h2 { font-size: 26px; line-height: 36px; } .footer-cta p { font-size: 16px; margin-bottom: 32px; } .footer-cta__btns { flex-direction: column; align-items: center; gap: var(--sp-12); } .footer-cta__btns a.btn { width: 100%; max-width: 320px; justify-content: center; } /* ── Footer ───────────────────────────────────────────────── */ .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-24); } .footer__bottom { flex-direction: column; text-align: center; gap: var(--sp-8); } .pkg-head__label { min-width: 206px; } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — Small Mobile ≤ 480px ══════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { h1 { font-size: 26px; line-height: 1.2; } h2 { font-size: 22px; } .section { padding: 36px 0; } /* Hero */ .hero h1, section#home h1 { font-size: 26px; line-height: 36px; } .hero__stat-item { flex: 1 1 100%; } /* Trust bar — one per row */ .trust-bar__item, .trust-bar__item--semrush { flex: 1 1 100%; } /* Why metrics — single column */ .why__right { grid-template-columns: 1fr; } /* Testimonials stats — two columns */ .testimonials__stats { grid-template-columns: 1fr 1fr; } .testimonials__stat-val { font-size: 28px; } /* FAQ */ .faq__section-title { font-size: 1.25rem; } .faq__question { font-size: 15px; } /* Footer */ .footer__top { grid-template-columns: 1fr; } .footer__legal { flex-direction: column; gap: var(--sp-8); align-items: center; } } /* ─── Our Work Section ─────────────────────────────────────────── */ section.Our_Work { background: #EBEEFD; padding: 72px 0; } section.Our_Work h3 { background: #FFFFFF; border-radius: 16px 0 0 0; color: #344054; padding: 14px 16px; font-family: Inter; font-size: 20px; font-weight: 700; line-height: 26px; margin-bottom: 0; } section.Our_Work h2 { color: var(--Theme-Dark-Blue-800, #26244A); text-align: center; font-family: Inter; font-size: 36px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: -0.72px; margin-bottom: 12px; } section.Our_Work > .container > p { color: var(--Text-Grey-600, #475467); text-align: center; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; margin-bottom: 40px; } /* ── Our Work outer nav-pills tabs ── */ .Our_Work_Tabs { margin-top: 32px; } .Our_Work_Tabs .nav-pills { display: inline-block; justify-content: center; align-items: center; margin-top: 48px; background: #F9FAFB; padding: 2px; border-radius: 12px; margin-bottom: 24px; } .Our_Work_Tabs .nav-pills li.nav-item { float: left; display: flex; align-items: center; justify-content: center; } .Our_Work_Tabs .nav-pills .nav-link { font-family: Inter; font-size: 15px; font-weight: 500; line-height: 24px; padding: 10px 16px; color: #667085; border-radius: 50px; width: 100%; text-align: center; display: block; } .Our_Work_Tabs .nav-pills .nav-link.active { background: #FFFFFF; box-shadow: 0px 0px 2px 0px #E0E0E0, 0px 2px 4px -2px #18274B05, 0px 4px 4px -2px #18274B0F; color: #344054; margin-bottom: 2px; border-radius: 10px; } .Our_Work_Tabs .nav-pills li.nav-item .nav-link { font-family: Inter; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; text-underline-position: from-font; text-decoration-skip-ink: none; padding: 8px 58px; color: #5D667B; } /* ── Our Work: main Bootstrap pill tab panes ────────────────────────────── Force show/hide of the 5 main tab panes (#pills-home, #pills-profile, etc.) using high-specificity !important so no other rule can interfere. ──────────────────────────────────────────────────────────────────────────── */ #pills-tabContent > .tab-pane { display: none !important; } #pills-tabContent > .tab-pane.active { display: block !important; } /* Bootstrap pill wrapper always visible */ .Our_Work_Tabs_tab_content { display: block !important; } /* ── Our_Work custom sub-tab panels ───────────────────────────────────────── All custom sub-tab divs have id="tab-*" (tab-16, tab-17, tab-social, etc.) Bootstrap wrappers use id="pills-*" — safe, no overlap. ──────────────────────────────────────────────────────────────────────────── */ section.Our_Work [id^="tab-"] { display: none !important; padding: 0; } section.Our_Work [id^="tab-"][class*="current"] { display: block !important; overflow: visible; } .tabs-container { position: relative; height: 100%; } .tabs-container nav { position: relative; width: 100%; border: 1px solid #EAECF0; border-radius: 0 0 0 16px; } @media all and (min-width: 42em) { .tabs-container { height: inherit; overflow-y: hidden; } .tabs-container nav ul { display: flex; flex-direction: column; justify-content: flex-start; border: none; padding: 0; } .tabs-container nav ul li { display: block; margin: 0; padding: 14px 16px; border: none; border-bottom: 1px solid #EAECF0; background: #FFFFFF; font-family: Inter; font-size: 14px; font-weight: 500; line-height: 20px; color: #5D667B; cursor: pointer; } .tabs-container nav ul li:not(.active) { position: relative; top: auto; } .tabs-container nav ul li:last-child { border-bottom: none; border-radius: 0 0 0 16px; } .tabs-container nav ul li.active { font-weight: 700; color: #FFFFFF; background: #3A58EF; border-bottom: none; } .tabs-container nav ul li.active:after { display: none; } .tabs-container nav ul li:hover { background: #F3F1FD; color: #344054; } .tabs-container nav ul li.active:hover { background: #3A58EF; color: #fff; } } /* ── Services Inner Boxes ── */ .Services_InnerBox { padding: 0; display: inline-block; border-width: 1px; border-style: solid; border-color: #EAECF0; width: 100%; border-radius: 16px; margin-bottom: 16px; } .Services_InnerBox_Main { padding: 16px; max-height: 450px; overflow: auto; } .Services_InnerBox_Title { padding: 16px; } .Services_InnerBox_Points { border-top: 1px solid #EAECF0; padding: 16px; } .Services_InnerBox_Points ul li { list-style: none; font-family: Inter; font-size: 16px; font-weight: 400; line-height: 24px; color: #475467; padding-bottom: 12px; position: relative; padding-left: 26px; } .Services_InnerBox.All_Videos_Box { padding: 0; border-radius: 12px; /* height: 210px; */ overflow: hidden; } .Services_InnerBox.All_Videos_Box .Services_InnerBox_Title { padding: 0; padding-top: 16px; font-family: Inter; font-size: 16px; font-weight: 700; line-height: 24px; text-align: left; color: #475467; } .Services_InnerBox.All_Videos_Box h4 { font-family: Inter; font-size: 16px; font-weight: 700; line-height: 24px; color: #475467; overflow: hidden; height: 48px; } /* ── Video card hover: dark overlay ── */ .Services_InnerBox.All_Videos_Box .View_Samples_Box.Videos_Box.Video_Img_Box:before { width: 100%; height: 100%; opacity: 0; background: #101828; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; } .Services_InnerBox.All_Videos_Box:hover .View_Samples_Box.Videos_Box.Video_Img_Box:before { opacity: 0.75; } /* ── Image: subtle scale only (no blur) ── */ .Services_InnerBox.All_Videos_Box:hover img { transform: scale(1.05); } /* ── Play Now button (h3 without .Video_style) shows on hover ── */ .Services_InnerBox.All_Videos_Box:hover .View_Samples_Box.Videos_Box.Video_Img_Box h3:not(.Video_style) { opacity: 1; } /* ── View Details text (p) shows on hover ── */ .Services_InnerBox.All_Videos_Box:hover .View_Samples_Box.Videos_Box.Video_Img_Box p { opacity: 1; } .Videos_Tabs_Main .col-md-4, .Graphics_Tabs_Main .col-md-4 { padding-left: 8px; padding-right: 8px; margin-bottom: 16px; } .Videos_Tabs_Main .Services_InnerBox.All_Videos_Box { border-radius: 12px; border: 1px solid var(--Text-Grey-200, #EAECF0); background: var(--White, #FFF); margin: 0; } .Services_InnerBox.All_Videos_Box { padding: 16px; border-radius: 12px; } /* ── View Samples / Video Thumbnail Boxes ── */ .View_Samples_Box { margin-top: 24px; position: relative; border-radius: 24px; overflow: hidden; } .View_Samples_Box:before { content: ''; background: #000945; opacity: 0.3; width: 306px; height: 172px; display: inline-block; border-radius: 24px; position: absolute; z-index: 99; } .View_Samples_Box h3 { position: absolute; top: auto; left: 10px; bottom: 10px; display: flex; align-items: center; font-family: Inter; font-size: 20px; font-weight: 600; line-height: 30px; color: #fff; background: transparent; border-radius: 0; margin-bottom: 0; padding: 0; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; z-index: 999; translate: 0% 0%; } .View_Samples_Box h3 svg { margin-right: 10px; } .View_Samples_Box.Videos_Box.Video_Img_Box { margin: 0; position: relative; border-radius: 12px; /* height: 210px; border: none; */ } .View_Samples_Box.Videos_Box.Video_Img_Box:before { width: 100%; height: 100%; opacity: 0; background: #000945; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; border-radius: 12px; } .View_Samples_Box.Videos_Box.Video_Img_Box h3 { position: absolute; top: 36%; right: 0; left: 0; margin: 0 auto; background: transparent; display: flex; align-items: center; justify-content: center; border: 1px solid #FFFFFF; padding: 10px 16px; max-height: 40px; max-width: 162px; font-family: Inter; font-size: 14px; font-weight: 600; line-height: 20px; color: #FFFFFF; border-radius: 4px; opacity: 0; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .View_Samples_Box.Videos_Box.Video_Img_Box p { position: absolute; top: 65%; right: 0; left: 0; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 10px 16px; max-height: 40px; max-width: 220px; font-family: Inter; font-size: 14px; font-weight: 600; line-height: 20px; color: #FFFFFF; border-radius: 4px; opacity: 0; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; z-index: 999; } .View_Samples_Box.Videos_Box.Video_Img_Box img { filter: blur(0px); transform: scale(1); -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; /* height: 210px; */ width: 100%; object-fit: cover; border-radius: 12px; } .View_Samples_Box.Videos_Box.Video_Img_Box:hover img.Videos_Img { filter: blur(0px); } /* ── Services Box ── */ .Services_Box { border: 1px solid #EAECF0; border-radius: 0 16px 16px 0; margin-bottom: 16px; } .Our_Work_Tabs [id^="tab-"] .Services_Box { background: #fff; } .Services_Box_Title { color: var(--Text-Grey-700, #344054); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px; margin-bottom: 16px; } section.Our_Work .Services_Box h3.Services_Box_Title { border: 1px solid #EAECF0; background: #FFFFFF; border-radius: 0 16px 0 0; padding: 16px; text-align: left; color: #344054; margin-bottom: 0; font-size: 20px; font-weight: 700; line-height: 26px; } /* Override max-height inside Our Work so content doesn't get clipped */ .Our_Work_Tabs .Services_InnerBox_Main { max-height: fit-content; overflow: hidden; padding: 16px; } /* ── View More / Load More button ── */ .Load_More_Btn_Main { /* margin-top: 8px; margin-bottom: 4px; padding: 16px 20px; border-top: 1px solid #EAECF0; */ } .Our_Work_Tabs a.Load_More_Btn { background: #3A58EF; box-shadow: 0px 1px 2px 0px #1018280D; border-radius: 4px; padding: 12px 20px; font-family: Inter; font-size: 16px; font-weight: 600; line-height: 24px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; display: inline-block; border: 1px solid #3A58EF; transition: .4s ease-out; cursor: pointer; } .Our_Work_Tabs a.Load_More_Btn:hover { border: 1px solid #3A58EF; background: transparent; color: #3A58EF; } /* ── Video style label (overlay) ── */ .View_Samples_Box.Videos_Box.Video_Img_Box h3.Video_style { opacity: 1; top: auto; border: 0; margin: 0; translate: inherit; position: absolute; bottom: 16px; left: 0; max-width: inherit; text-align: left; width: inherit; display: inline-block !important; color: var(--White, #FFF); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; max-height: 60px; overflow: hidden; padding: 0 16px; z-index: 999; } .View_Samples_Box.Videos_Box.Video_Img_Box:after { content: ''; background: linear-gradient(180deg, rgba(16, 24, 40, 0.00) 0%, #101828 100%); width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; opacity: 0.8; } /* ── Watch Video Modal ── */ .Watch_video .modal-content { background: transparent; border: 0; } .Watch_video .modal-header .btn-close { background-color: #fff; background-size: 12px; opacity: 1; position: absolute; top: -10px; right: -10px; z-index: 9999; border-radius: 50%; padding: 8px; } .Watch_video .modal-header { position: relative; padding: 0; border: 0; } .Services_InnerBox.All_Videos_Box.Short_Box .View_Samples_Box.Videos_Box.Video_Img_Box.Short_Img_Box:after { background: none; } .View_Samples_Box.Videos_Box.Video_Img_Box h3 { top: 40%; } /* (current2-5 rules are covered by .Our_Work_Tabs .tab-content.current* above) */ /* ── Responsive: Our Work ── */ @media (max-width: 991.98px) { section.Our_Work { padding: 48px 0; } section.Our_Work h2 { font-size: 28px; } .Our_Work_Tabs .nav-pills { display: inline-block; justify-content: center; align-items: center; margin-top: 48px; background: #F9FAFB; padding: 2px; border-radius: 12px; margin-bottom: 24px; } .Our_Work_Tabs .nav-pills li.nav-item { flex: 0 0 auto; } .Our_Work_Tabs .nav-pills .nav-link { font-size: 13px; padding: 8px 18px; border-radius: 50px; white-space: nowrap; width: auto; } .Our_Work_Tabs .nav-pills .nav-link.active { box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10); } .Services_InnerBox.All_Videos_Box { height: auto; min-height: 220px; } .View_Samples_Box.Videos_Box.Video_Img_Box { height: 190px; } .View_Samples_Box.Videos_Box.Video_Img_Box img { height: 190px; } } @media (max-width: 767.98px) { section.Our_Work h2 { font-size: 24px; } .tabs-container nav ul li:not(.active) { position: absolute; top: -999em; } .tabs-container nav ul { list-style: none; margin: 0; padding: 0; border: 1px solid #ccc; position: relative; } .tabs-container nav ul li.active:after { width: 16px; height: 16px; background-image: url(https://assets.my-cpe.com/entigrity-assets/custom/demo_digital_marketing/images/digital-page/Arrow_Down.svg); background-repeat: no-repeat; content: ''; position: absolute; right: 1.4em; top: 1.4em; z-index: 9999; border: 0; display: block; } .tabs-container nav ul.expanded li:not(.active) { position: relative; top: auto; background: #EBEEFD; border: 1px solid #EAECF0; font-family: Inter; font-weight: 500; font-size: 14px; line-height: 20px; color: #5D667B; } .tab-content { margin-top: 70px; } .Services_InnerBox.All_Videos_Box { height: auto; margin-bottom: 16px; } .View_Samples_Box.Videos_Box.Video_Img_Box { height: 180px; } .View_Samples_Box.Videos_Box.Video_Img_Box img { height: 180px; } } /* ─── Videos Tab: Shorts / Reels cards ────────────────────────────────────── */ /* col-md-3 column spacing for Shorts grid */ .Videos_Tabs_Main .col-md-3 { padding-left: 8px; padding-right: 8px; margin-bottom: 16px; } /* Short_Box: portrait (9:16) video card */ .Services_InnerBox.All_Videos_Box.Short_Box { position: relative; padding: 0; } /* Short_Img_Box: portrait image container */ .View_Samples_Box.Videos_Box.Video_Img_Box.Short_Img_Box { margin: 0; position: relative; border-radius: 12px; } .View_Samples_Box.Videos_Box.Video_Img_Box.Short_Img_Box img { width: 100%; min-height: 429px; } /* Hover: Short overlay — matches regular video cards (no blur) */ .Services_InnerBox.All_Videos_Box.Short_Box:hover img { transform: scale(1); } .Services_InnerBox.All_Videos_Box.Short_Box:hover .View_Samples_Box.Videos_Box.Video_Img_Box.Short_Img_Box:before { opacity: 0.75; } .Services_InnerBox.All_Videos_Box.Short_Box:hover h3:not(.Video_style) { opacity: 1; } /* ─── Graphics Tab: Graphics_Img_Box ────────────────────────────────────────── */ .Graphics_Tabs_Main .col-md-3 { /* padding-left: 6px; padding-right: 6px; margin-bottom: 12px; */ } /* Standard logo/graphic thumbnail — fixed height, logo centered */ .Graphics_Img_Box { /* border: 1px solid #EAECF0; border-radius: 8px; overflow: hidden; background: #FFFFFF; transition: box-shadow 0.2s ease, transform 0.2s ease; height: 120px; padding: 10px; display: flex; align-items: center; justify-content: center; */ margin-bottom: 16px; } .Graphics_Img_Box:hover { /* box-shadow: 0 4px 16px rgba(16, 24, 40, 0.12); transform: translateY(-2px); */ } .Graphics_Img_Box img { /* max-width: 100%; max-height: 100px; width: auto; height: auto; display: block; */ } /* Graphics_Img_Box1 — same height as base, no override needed */ .Graphics_Img_Box.Graphics_Img_Box1 { border: 2px solid #cccccc3d; border-radius: 10px; } .Graphics_Img_Box.Graphics_Img_Box1 img { /* max-width: 100%; max-height: 100px; */ width: 150px; height: 121px; object-fit: contain; border-radius: 5px; cursor: pointer; transition: 0.3s; display: block; margin: 0 auto; } /* ── Infographics Box (Emails/Newsletter + Graphics infographics) ─────────── */ .Services_InnerBox.Infographics_Box { padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid #EAECF0; margin-bottom: 16px; background: #FFFFFF; transition: box-shadow 0.2s ease, transform 0.2s ease; } .Services_InnerBox.Infographics_Box:hover { /* box-shadow: 0 6px 20px rgba(16, 24, 40, 0.10); transform: translateY(-2px); */ } .Infographics_Img_Box { width: 100%; overflow: hidden; } .Infographics_Img_Box img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .Infographics_Img_Box a { display: block; overflow: hidden; } .Infographics_Img_Box a:hover img { /* transform: scale(1.04); */ } /* ── Blog Cards (Content tab — same structure as Videos but no play overlay) */ /* ── Blog Cards (Content tab) ────────────────────────────────────────────── */ .Services_InnerBox.All_Videos_Box.All_Blogs_Box { height: auto; overflow: visible; /* allow box-shadow to show outside card bounds */ border-radius: 12px; border: 1px solid #EAECF0; background: #FFFFFF; cursor: pointer; transition: box-shadow 0.25s ease, transform 0.25s ease; } .Services_InnerBox.All_Videos_Box.All_Blogs_Box:hover { /* box-shadow: 0 8px 28px rgba(16, 24, 40, 0.14); transform: translateY(-4px); */ } /* Image container — clips zoomed image within card corners */ .Services_InnerBox.All_Videos_Box.All_Blogs_Box .View_Samples_Box.Videos_Box.Video_Img_Box { /* height: 200px; border-radius: 12px; overflow: hidden; */ } /* Image fills card, smooth zoom on hover */ .Services_InnerBox.All_Videos_Box.All_Blogs_Box .View_Samples_Box.Videos_Box.Video_Img_Box img { /* height: 200px; width: 100%; */ object-fit: cover; border-radius: 12px; transform: scale(1); transition: transform 0.4s ease; } .Services_InnerBox.All_Videos_Box.All_Blogs_Box:hover .View_Samples_Box.Videos_Box.Video_Img_Box img { transform: scale(1); } /* Hide play-button overlay and bottom gradient — blogs are thumbnail-only */ .Services_InnerBox.All_Videos_Box.All_Blogs_Box .View_Samples_Box.Videos_Box.Video_Img_Box:after, .Services_InnerBox.All_Videos_Box.All_Blogs_Box .View_Samples_Box.Videos_Box.Video_Img_Box:before { /* display: none !important; */ } /* ── Inner Blog category pills (#pills-tab1) ─────────────────────────────── */ #pills-tab1 { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; background: #F9FAFB; border-bottom: 1px solid #EAECF0; justify-content: flex-start; list-style: none; margin: 0; } #pills-tab1 .nav-item { flex: none; } #pills-tab1 .nav-link { font-family: Inter; font-size: 13px; font-weight: 500; padding: 5px 14px; color: #667085; border-radius: 50px; background: #FFFFFF; border: 1px solid #EAECF0; white-space: nowrap; line-height: 20px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } #pills-tab1 .nav-link:hover { background: #F0F2FE; color: #3A58EF; border-color: #C7D0FA; } #pills-tab1 .nav-link.active { background: #3A58EF; color: #FFFFFF; border-color: #3A58EF; font-weight: 600; box-shadow: none; } /* Inner Blogs tab pane content container */ #pills-tabContent1 { padding: 16px; } /* ─── Ratings & Review Tab: Review_and_Ratings_Box ───────────────────────── */ .Review_and_Ratings_Box { overflow: hidden; margin-bottom: 16px; display: flex; flex-direction: column; transition: box-shadow 0.2s ease, transform 0.2s ease; border-radius: 12px; border: 1px solid var(--Text-Grey-200, #EAECF0); box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08); background: var(--White, #FFF); padding: 24px; height: 100%; } .Review_and_Ratings_Box:hover { /* box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); transform: translateY(-3px); */ } /* Red top bar — Yelp brand color as base; logo SVG is white + red on this bg */ .Review_and_Ratings_Box_Top { gap: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .Review_and_Ratings_Box_Top ul { display: flex; align-items: center; gap: 3px; list-style: none; padding: 0; margin: 0; flex-shrink: 0; } .Review_and_Ratings_Box_Top ul li { display: flex; align-items: center; line-height: 1; } /* Author + rating section */ .Ratings_Author_Box { padding: 0; flex: 1; display: flex; flex-direction: column; } .Ratings_Author_Box > a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; height: 100%; color: inherit; } /* Firm logo + name row */ .Author_Box { display: flex; gap: 16px; align-items: center; margin-bottom: 0; } .Author_Box > img { /* width: 44px; height: 44px; border-radius: 8px; object-fit: contain; flex-shrink: 0; border: 1px solid #EAECF0; background: #F9FAFB; padding: 4px; */ } /* Firm name — must override section.Our_Work h3 rule */ .Author_Box_Text h3 { color: var(--Theme-Dark-Blue-800, #26244A); font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; line-height: 30px; margin-bottom: 2px; } .Author_Box_Text p { font-family: Inter; font-size: 12px; font-weight: 400; color: #667085; margin-bottom: 0; line-height: 18px; } /* Stats row: Rating score + Number of ratings */ .Ratings_Box { display: flex; gap: 24px; padding-top: 0; border-top: 0; margin-top: auto; } .Ratings_Box_Left { display: flex; flex-direction: column; gap: 2px; margin-right: 12px; padding-right: 12px; border-right: 1px solid #D9D9D9; } .Ratings_Box_Left label { text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0; cursor: default; color: var(--Text-Grey-400, #98A2B3); font-family: Inter; font-size: 12px; font-style: normal; font-weight: 500; line-height: 18px; } .Ratings_Box_Left p { color: var(--Theme-Blue-500, #3A58EF); font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: 32px; text-align: center; } .Ratings_Box .Ratings_Box_Left:last-child { border-right: 0; } /* ── g-4 gutter for Ratings cards row ───────────────────────────────────── */ .Videos_Tabs_Main .row.g-4 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; } img:hover { opacity: 0.7; } ul#pills-tab1 { display: flex; align-items: center; overflow-x: scroll; justify-content: start; overflow-y: hidden; width: 100%; flex-wrap: nowrap; background: transparent; gap: 16px; padding: 16px; margin: 0px; } ul#pills-tab1 li.nav-item { display: inline-block; float: none; width: auto; } ul#pills-tab1 li.nav-item .nav-link.active { color: var(--White, #FFF); text-align: center; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 500; line-height: 18px; border-radius: 50px; background: var(--Theme-Blue-800, #182878); padding: 8px 20px; } ul#pills-tab1 li.nav-item .nav-link { color: var(--Text-Grey-500, #5D667B); text-align: center; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 500; line-height: 18px; min-width: max-content; border-radius: 50px; border: 1px solid var(--Text-Grey-200, #EAECF0); padding: 8px 20px; } .View_Samples_Box:before { content: ''; /* background: #000000; */ background: #000945; opacity: 0.3; width: 306px; height: 172px; display: inline-block; border-radius: 24px; position: absolute; z-index: 99; } .View_Samples_Box.Videos_Box.Video_Img_Box:before { width: 316px; height: 193px; opacity: 0; background: #000945; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; border-radius: 12px; } .Services_InnerBox.All_Videos_Box .View_Samples_Box.Videos_Box.Video_Img_Box:before { /* width: 316px; height: 193px; */ opacity: 0; background: #101828; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .View_Samples_Box.Videos_Box.Video_Img_Box:after { content: ''; content: ''; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -6.82%, #000 100%); width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; opacity: 0.8; } .Services_InnerBox.All_Videos_Box.All_Ebooks_Box .View_Samples_Box.Videos_Box.Video_Img_Box:before { opacity: 0; } .Services_InnerBox.All_Videos_Box.All_Ebooks_Box .View_Samples_Box.Videos_Box.Video_Img_Box:after { opacity: 0; } .Services_InnerBox.Infographics_Box .Infographics_Img_Box { border-width: 1px; border-style: solid; border-color: #EAECF0; border-radius: 12px; position: relative; overflow: hidden; max-height: 303px; } /* ── More_Can: controlled by jQuery show/hide — no CSS needed ────────────── */ /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 991.98px) { .Services_InnerBox.All_Videos_Box.Short_Box, .View_Samples_Box.Videos_Box.Video_Img_Box.Short_Img_Box, .View_Samples_Box.Videos_Box.Video_Img_Box.Short_Img_Box img { height: 260px; } } @media (max-width: 767.98px) { .Services_InnerBox.All_Videos_Box.Short_Box, .View_Samples_Box.Videos_Box.Video_Img_Box.Short_Img_Box, .View_Samples_Box.Videos_Box.Video_Img_Box.Short_Img_Box img { height: 220px; } .Review_and_Ratings_Box { height: auto; } .Review_and_Ratings_Box:hover { transform: none; } #pills-tab1 { padding: 8px 12px; gap: 4px; } #pills-tab1 .nav-link { font-size: 12px; padding: 4px 10px; } .Videos_Tabs_Main .col-md-3 { margin-bottom: 12px; } } /* ── Visibility utility (replaces style="display:none") ────────────────────── */ .dm-hidden { display: none !important; } /* ── Trust Bar ─────────────────────────────────────────────────────────────── */ .trust-bar__item img { height: 84px; width: auto; object-fit: contain; } .trust-bar__label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #45535F; text-align: center; } .trust-bar__item--semrush { background: #421983; border-color: #421983; padding: 20px 24px; align-items: flex-start; gap: 6px; } .trust-bar__semrush-header { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .trust-bar__semrush-name { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.1em; text-transform: uppercase; } .trust-bar__semrush-cert { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.75); line-height: 1.4; } .trust-bar__semrush-title { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 700; color: #fff; line-height: 1.2; } .trust-bar__item--stat { gap: 4px; } .trust-bar__stat-val { font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 700; color: #3A58EF; line-height: 60px; letter-spacing: -0.96px; } .trust-bar__stat-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #45535F; } /* ── Extracted from inline styles ──────────────────────────────────────────── */ /* Hero service icon accent colours */ .hero__svc-icon--cyan { background: #0891B2; } .hero__svc-icon--pink { background: #BE185D; } /* Testimonial avatar image */ .testimonial-card__avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } /* Featured testimonial card (brand border) */ .testimonial-card--featured { border-color: var(--brand); } /* Featured offer card */ .offer__card--featured { border-color: var(--brand); position: relative; } /* "Most Popular" badge wrapper */ .offer__badge-wrap { position: absolute; top: -1px; right: 20px; } /* Bottom-tab badge inside featured card */ .offer__badge-wrap .badge { border-radius: 0 0 6px 6px; font-size: 11px; padding: 4px 10px; } /* Pricing section title dark accent */ .pricing__header .section-title span { color: #182878; } /* bmap node positions */ .bmap__node--google { left: 27px; top: 16px; } .bmap__node--meta { left: 165px; top: 16px; } .bmap__node--seo { left: 303px; top: 16px; } .bmap__node--social { left: 441px; top: 16px; } .bmap__node--email { left: 14px; top: 231px; } .bmap__node--landing { left: 454px; top: 231px; } .bmap__node--crm { left: 234px; top: 408px; } .bmap__hub--center { left: 190px; top: 194px; } /* bmap icon circle background colours */ .bmap__icon--seo { background: #F2F2F8; } .bmap__icon--social { background: #EDE9FE; } .bmap__icon--email { background: #D1FAE5; } .bmap__icon--landing { background: #DBEAFE; } .bmap__icon--crm { background: #CCFBF1; } /* Form required asterisks */ .form-float__lbl span { color: #F04438; } /* Textarea height */ textarea.form-float__input { height: 100px; } /* ── Bundle Hub-Spoke Map ────────────────────────────────────── */ .bmap { position: relative; width: 580px; height: 540px; background: #EAEAF8; border-radius: 20px; flex-shrink: 0; } .bmap__lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .bmap__node { position: absolute; width: 112px; background: #fff; border-radius: 14px; padding: 16px 10px 14px; text-align: center; box-shadow: 0 2px 10px rgba(80,90,180,0.10); z-index: 1; } .bmap__hub { position: absolute; width: 200px; background: #fff; border-radius: 18px; padding: 22px 16px 18px; text-align: center; box-shadow: 0 4px 20px rgba(80,90,180,0.15); z-index: 1; } .bmap__icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 0; width: 52px; height: 52px; } .bmap__icon--circle { border-radius: 50%; } .bmap__label { font-size: 12px; font-weight: 600; color: #344054; margin-top: 8px; line-height: 1.3; } .bmap__hub-icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .bmap__hub-title { font-size: 15px; font-weight: 700; color: #101828; line-height: 1.4; margin-bottom: 10px; } .bmap__hub-badge { display: inline-block; background: #EEF2FF; color: #3A58EF; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 4px 14px; } .bundle__right-wrap { overflow: hidden; display: flex; justify-content: center; background: transparent; border: none; } @media (max-width: 991px) { .bundle__right-wrap { justify-content: flex-start; } } /* ── DM Plan Bar ─────────────────────────────────────────────── */ .dm-plan-bar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999; background: #fff; border-top: 1px solid #EAECF0; box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08); padding: 12px 0; } .dm-plan-bar__inner { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; } .dm-plan-bar__info, .dm-plan-bar__price-wrap { display: flex; flex-direction: column; align-items: flex-start; } .dm-plan-bar__label, .dm-plan-bar__price-label { color: #344054; font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; line-height: 18px; margin-bottom: 1px; } .dm-plan-bar__name { color: #344054; font-family: Inter, sans-serif; font-size: 16px; font-weight: 700; line-height: 22px; } .dm-plan-bar__price { color: #3A58EF; font-family: Inter, sans-serif; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: -0.48px; } .dm-plan-bar__btn { border-radius: 4px; background: #3A58EF; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); padding: 12px 24px; color: #fff !important; font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; text-decoration: none !important; white-space: nowrap; transition: background 0.2s; } .dm-plan-bar__btn:hover { background: #2742d4; color: #fff !important; } @media (max-width: 576px) { .dm-plan-bar__inner { gap: 16px; justify-content: space-between; } .dm-plan-bar__btn { padding: 10px 16px; font-size: 14px; } }