/* ============================================================================
THE COGENT - core service pages (v3 "Dark & Gradient")
Pages: /best-digital-marketing-company-in-jaipur/ /best-seo-company-in-jaipur/
/best-social-media-marketing-company-in-jaipur/ /ppc-company-in-jaipur/
/influencer-marketing-agency-jaipur/
Loaded right after cogent-v3.css. Only restyles; no content is generated.
Shared vocabulary (classes added in the markup, all prefixed sc-):
sc-hero split hero, framed media on a gradient panel
sc-eyebrow small gradient-tinted chip above a heading
sc-head section head (left), --split (heading | lead), --center
sc-btn gradient pill (link fills the pill), --ghost glass outline
sc-bento 12-col bento grid for service / feature cards
sc-steps process row with gradient connectors
sc-band CTA panel with gradient top rule
sc-media-split / sc-reasons / sc-panel / sc-zig split layouts
========================================================================== */
/* ----------------------------------------------------------------------------
0. RHYTHM, CONTAINERS, TYPE RESET (legacy Poppins sizes, shadows, gradients)
-------------------------------------------------------------------------- */
main > section:not(.sc-hero):not(.sc-band):not(.faq),
main > .container > section:not(.counts) {
padding-block: calc(var(--section-y) * .62) !important;
margin-block: 0 !important; min-height: 0 !important; height: auto !important;
}
main > section:not(.faq) > .container,
main > section:not(.faq) > .container-fluid,
main .custom-blogs > .container-fluid > .container {
max-width: var(--maxw) !important; padding-inline: var(--gutter) !important; margin-inline: auto;
}
main .custom-blogs > .container-fluid { padding: 0 !important; }
main .custom-blogs > .container-fluid > .container { padding-block: calc(var(--section-y) * .62) !important; }
/* decorative legacy dividers: the section rhythm replaces them */
.sc-divider { display: none !important; }
hr.sc-rule { border: 0 !important; height: 1px; max-width: var(--maxw); margin: 0 auto !important; background: var(--grad-line) !important; opacity: .5; }
main section:where(:not(.faq)) :where(h1,h2,h3,h4,h5,h6,p,li,span,a,button) { text-shadow: none !important; }
main section:where(:not(.faq)) h2:where(:not(.accordion-header)) {
font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem) !important; line-height: 1.1 !important;
font-weight: 700 !important; letter-spacing: -.03em; color: var(--ink) !important;
background: none !important; -webkit-text-fill-color: currentColor !important; text-align: left !important;
padding: 0 !important; margin: 0;
}
main section:where(:not(.faq)) :where(h1,h2,h3,h4) span {
font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important;
background: var(--grad-text) !important; -webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important; color: transparent !important;
}
main section:where(:not(.faq)) h3 {
font-size: clamp(1.12rem, 1rem + .45vw, 1.35rem) !important; line-height: 1.25 !important; font-weight: 600 !important;
color: var(--ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important;
letter-spacing: -.015em; text-align: left !important; padding: 0 !important; margin: 0 0 .55rem;
}
main section:where(:not(.faq)) h4 {
font-size: 1.12rem !important; line-height: 1.3 !important; font-weight: 600 !important; color: var(--ink) !important;
background: none !important; -webkit-text-fill-color: currentColor !important; letter-spacing: -.01em; margin: 0 0 .45rem; text-align: left !important;
}
main section:where(:not(.faq)) p, main :where(.custom-blogs) p {
font-size: 1rem !important; line-height: 1.7 !important; font-weight: 400 !important;
color: var(--ink-2) !important; text-align: left !important; padding: 0;
}
main section:where(:not(.faq)) h2::after { content: none !important; }
main section:where(:not(.faq)) :where(b, strong) { color: var(--ink); }
main section a[style*="#df4576"] { color: var(--accent) !important; }
/* ----------------------------------------------------------------------------
1. SECTION HEADS
-------------------------------------------------------------------------- */
.sc-head { text-align: left !important; margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem) !important; padding: 0 !important; width: 100%; }
.sc-head > h2 { max-width: 24ch; }
.sc-head > p { max-width: 64ch; margin-top: 1rem !important; padding: 0 !important; font-size: 1.06rem !important; }
.sc-head > p br { display: none; }
main section .sc-head > h2::after {
content: "" !important; display: block; width: 64px; height: 3px; margin-top: 1rem; border-radius: 3px; background: var(--grad-2);
}
.sc-head--center { text-align: center !important; }
.sc-head--center > h2, .sc-head--center > p { margin-inline: auto; text-align: center !important; }
main section .sc-head--center > h2::after { margin-inline: auto !important; }
.sc-head--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.sc-head--split > h6 { grid-column: 1; grid-row: 1; justify-self: start; }
.sc-head--split > h2 { grid-column: 1; grid-row: 2; }
.sc-head--split > p { grid-column: 2; grid-row: 1 / 3; margin: 0 !important; align-self: end; }
.sc-eyebrow, main section .sc-eyebrow {
display: inline-flex !important; align-items: center; gap: .5rem; width: fit-content;
font-family: var(--font-body) !important; font-weight: 600 !important; font-size: .78rem !important; line-height: 1.2 !important;
letter-spacing: .12em !important; text-transform: uppercase; color: var(--accent) !important;
background: rgba(227,69,118,.09) !important; border: 1px solid rgba(227,69,118,.22);
padding: .38rem .85rem !important; border-radius: var(--r-pill); margin: 0 0 1rem !important; text-align: left;
}
.sc-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-2); flex: none; }
/* ----------------------------------------------------------------------------
2. BUTTONS (legacy : the link fills the pill)
-------------------------------------------------------------------------- */
main button.sc-btn {
position: relative; display: inline-flex !important; align-items: stretch; width: auto !important; max-width: 100%;
padding: 0 !important; margin: 1.9rem 0 0 !important; border: 0 !important; border-radius: var(--r-pill) !important;
background: var(--grad-2) !important; box-shadow: var(--glow) !important; overflow: hidden; isolation: isolate;
transition: transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease);
}
main button.sc-btn::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%) -120% 0 / 220% 100% no-repeat;
transition: background-position .7s var(--ease);
}
main button.sc-btn:hover { transform: translateY(-2px); box-shadow: var(--glow-lg) !important; }
main button.sc-btn:hover::after { background-position: 120% 0; }
main button.sc-btn:active { transform: translateY(0) scale(.98); }
main button.sc-btn a {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; width: 100%;
padding: .9rem 1.75rem !important; white-space: nowrap;
font-family: var(--font-head) !important; font-weight: 600 !important; font-size: 1rem !important; line-height: 1.2 !important;
letter-spacing: .005em !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
background: none !important; text-decoration: none !important;
}
main button.sc-btn a img { width: 18px !important; height: 18px !important; border-radius: 0 !important; object-fit: contain; filter: brightness(0) invert(1); }
main button.sc-btn--ghost {
background: rgba(255,255,255,.03) !important; border: 1px solid var(--line-3) !important; box-shadow: none !important;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
main button.sc-btn--ghost::after { content: none; }
main button.sc-btn--ghost a { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
main button.sc-btn--ghost:hover { border-color: var(--accent) !important; background: rgba(227,69,118,.08) !important; box-shadow: none !important; }
.sc-actions { display: flex !important; flex-wrap: wrap; gap: .75rem !important; margin: 1.9rem 0 0 !important; justify-content: flex-start !important; }
.sc-actions > button.sc-btn { margin: 0 !important; }
/* ----------------------------------------------------------------------------
3. HERO (split: copy left, framed media right, single brand glow)
-------------------------------------------------------------------------- */
main > section.sc-hero {
position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible;
background: none !important; min-height: 0 !important; height: auto !important;
padding: clamp(2.75rem, 5.5vw, 5rem) 0 clamp(2.75rem, 5vw, 4.5rem) !important; display: block !important;
}
.sc-hero::before {
content: ""; position: absolute; z-index: -1; width: min(860px, 95vw); aspect-ratio: 1; right: -12%; top: -38%;
background: radial-gradient(closest-side, rgba(227,69,118,.26), rgba(242,156,72,.12) 42%, rgba(91,79,176,.16) 68%, transparent);
filter: blur(24px); pointer-events: none;
}
.sc-hero::after {
content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .5;
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%);
}
.sc-hero-row {
display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: center; gap: clamp(2rem, 5vw, 4.5rem); margin: 0 !important;
}
.sc-hero-row > * { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
.sc-hero-copy { display: flex !important; flex-direction: column; justify-content: center !important; align-items: flex-start !important; text-align: left !important; min-width: 0; }
main section.sc-hero h1 {
font-family: var(--font-head) !important; font-weight: 700 !important;
font-size: clamp(2.3rem, 1.3rem + 3vw, 3.9rem) !important; line-height: 1.05 !important; letter-spacing: -.035em !important;
color: var(--ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important;
text-align: left !important; text-shadow: none !important; margin: 0 !important; padding: 0 !important; max-width: 17ch;
}
main section.sc-hero h1:not(:has(span)) {
background: var(--grad-text) !important; -webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important; padding-bottom: .06em !important;
}
main section.sc-hero h1 span { display: block; }
.sc-hero h1 br, .sc-hero p br { display: none; }
main section.sc-hero p {
font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem) !important; line-height: 1.65 !important; color: var(--ink-2) !important;
max-width: 48ch; margin: 1.35rem 0 0 !important; text-align: left !important; font-weight: 400 !important;
}
main section.sc-hero h2.sc-kicker {
font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem) !important; font-weight: 600 !important; line-height: 1.35 !important;
color: var(--ink-2) !important; letter-spacing: -.01em !important; margin: 0 0 .9rem !important;
}
main section.sc-hero h3.sc-hero-sub {
font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem) !important; font-weight: 600 !important; color: var(--ink) !important; margin: .85rem 0 0 !important;
}
.sc-hero-media { position: relative; display: flex !important; align-items: center !important; justify-content: center !important; min-height: clamp(320px, 34vw, 470px); }
.sc-hero-orb {
position: absolute; inset: 7% 4% 5%; z-index: 0; border-radius: var(--r-xl);
background:
radial-gradient(closest-side at 50% 55%, rgba(227,69,118,.28), transparent 75%),
radial-gradient(60% 60% at 20% 10%, rgba(91,79,176,.30), transparent 70%),
linear-gradient(var(--surface), var(--surface)) padding-box,
var(--grad-border) border-box;
border: 1px solid transparent; box-shadow: var(--sh-lg);
}
.sc-hero-orb::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .55;
background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 22px 22px;
-webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.sc-hero-media > img {
position: relative; z-index: 1; width: auto !important; max-width: 92% !important; max-height: 470px; height: auto;
object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); mix-blend-mode: normal !important;
}
@media (prefers-reduced-motion: no-preference) {
.sc-hero-copy > * { animation: v3-rise .9s var(--ease) both; }
.sc-hero-copy > :nth-child(2) { animation-delay: .06s; }
.sc-hero-copy > :nth-child(3) { animation-delay: .12s; }
.sc-hero-copy > :nth-child(n+4) { animation-delay: .18s; }
.sc-hero-media { animation: v3-settle 1.1s var(--ease) .1s both; }
}
/* DM hero: checklist chips */
.sc-checks { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .75rem; margin: 1.5rem 0 0 !important; padding: 0 !important; width: 100%; max-width: 560px; }
.sc-checks > [class*="col"] { width: auto !important; max-width: none; padding: 0 !important; display: flex; flex-direction: column; gap: .55rem; }
.sc-checks li {
list-style: none; display: flex !important; align-items: center; gap: .6rem !important; min-height: 44px;
font-size: .95rem !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--ink) !important;
background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .4rem 1rem .4rem .4rem;
}
.sc-checks li img { width: 28px !important; height: 28px !important; padding: 7px; flex: none; border-radius: 50% !important; background: var(--grad-2); }
/* PPC hero: framed video instead of a cut-out image */
.ppc-hero .sc-hero-media { min-height: 0; padding: 0 !important; height: auto !important; }
.ppc-hero .sc-hero-orb { inset: auto -6% -8% auto; width: 70%; height: 70%; border: 0; background: radial-gradient(closest-side, rgba(227,69,118,.35), transparent); filter: blur(30px); box-shadow: none; }
.ppc-hero .sc-hero-orb::after { content: none; }
.ppc-hero .sc-hero-media video {
position: relative; z-index: 1; display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3.3; object-fit: cover;
border-radius: var(--r-xl); border: 1px solid transparent;
background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box; padding: 6px; box-shadow: var(--sh-lg);
}
/* SEO hero: the SERP screenshots sit on the panel, not cut off */
.seo_video .sc-hero-media { min-height: 0; padding: clamp(2rem, 3.5vw, 2.75rem) 0 !important; }
.seo_video .sc-hero-media > img { max-width: 104% !important; max-height: none; }
.seo_video .sc-hero-orb { inset: 0 5%; }
/* ----------------------------------------------------------------------------
4. CARDS + BENTO
-------------------------------------------------------------------------- */
.sc-bento {
display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense;
gap: clamp(.85rem, 1.5vw, 1.2rem); margin: 0 !important; --bs-gutter-x: 0;
}
.sc-bento > * { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; grid-column: span 4; min-width: 0; }
/* the card surface, shared by .col-boxe / .col-box cards and DM service rows */
.sc-bento > * > :is(.col-boxe, .col-box), .sc-svc, .sc-feat, .sc-ticks > div, .sc-icon-bento > div, .sc-steps > [class*="col-lg-3"] > :is(.box, .col-box) {
position: relative; display: flex !important; flex-direction: column; height: 100%; width: 100%; overflow: hidden;
background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
padding: clamp(1.35rem, 2.3vw, 1.9rem) !important; box-shadow: none !important; min-height: 0 !important;
transition: transform var(--t3) var(--ease), border-color var(--t3) var(--ease), box-shadow var(--t3) var(--ease);
}
.sc-bento > * > :is(.col-boxe, .col-box)::before { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
.sc-bento > * > :is(.col-boxe, .col-box):hover, .sc-svc:hover, .sc-feat:hover, .sc-icon-bento > div:hover, .sc-steps > [class*="col-lg-3"] > :is(.box, .col-box):hover {
transform: translateY(-4px); border-color: var(--line-2) !important; box-shadow: var(--sh) !important;
}
}
.sc-bento > * > :is(.col-boxe, .col-box) h3 { margin: 0 0 .7rem !important; }
.sc-bento > * > :is(.col-boxe, .col-box) h6, .sc-bento > * > :is(.col-boxe, .col-box) .read-more-text {
font-family: var(--font-body) !important; font-size: .97rem !important; line-height: 1.65 !important; font-weight: 400 !important;
color: var(--ink-2) !important; padding: 0 !important; margin: 0 !important;
}
/* variants */
.sc-v-grad, .sc-card--grad {
background: var(--grad-2) !important; border-color: transparent !important; box-shadow: var(--glow) !important;
}
.sc-v-grad :is(h2,h3,h4,h6,p,span,a,b), .sc-card--grad :is(h2,h3,h4,h6,p,span,a,b) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.sc-v-grad a, .sc-card--grad a { text-decoration: underline !important; text-underline-offset: 3px; }
.sc-v-border, .sc-card--border {
border-color: transparent !important;
background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important;
}
.sc-v-tint, .sc-card--tint {
background: radial-gradient(90% 120% at 100% 0%, rgba(91,79,176,.28), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(242,156,72,.10), transparent 60%), var(--surface) !important;
}
/* SEO: managed services (6) - alternating 5/7 widths */
.sc-bento--six > :nth-child(1) { grid-column: span 5; }
.sc-bento--six > :nth-child(2) { grid-column: span 7; }
.sc-bento--six > :nth-child(3) { grid-column: span 7; }
.sc-bento--six > :nth-child(4) { grid-column: span 5; }
.sc-bento--six > :nth-child(5) { grid-column: span 5; }
.sc-bento--six > :nth-child(6) { grid-column: span 7; }
.sc-bento--six > :nth-child(1) > .col-boxe { background: var(--grad-2) !important; border-color: transparent !important; box-shadow: var(--glow) !important; }
.sc-bento--six > :nth-child(3) > .col-boxe { background: radial-gradient(90% 120% at 100% 0%, rgba(91,79,176,.28), transparent 60%), var(--surface) !important; }
.sc-bento--six > :nth-child(4) > .col-boxe, .sc-bento--six > :nth-child(6) > .col-boxe { border-color: transparent !important; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important; }
/* gradient-filled bento card text (shared rule by position) */
.sc-bento--six > :nth-child(1) > .col-boxe :is(h3,h6,a,b),
.sc-bento--smm > :nth-child(1) > .col-boxe :is(h3,h6,span),
.sc-bento--ppc > :nth-child(4) > .col-boxe :is(h3,h6,a),
.sc-bento--inf > :nth-child(1) > .col-box :is(h3,h6) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* SMM: services (6 + CTA) - tall lead tile, 2x2, wide tile + CTA tile */
.sc-bento--smm > :nth-child(1) { grid-column: 1 / span 4; grid-row: span 2; }
.sc-bento--smm > :nth-child(6) { grid-column: span 8; }
.sc-bento--smm > :nth-child(7) { grid-column: span 4; }
.sc-bento--smm > :nth-child(1) > .col-boxe { background: var(--grad-2) !important; border-color: transparent !important; box-shadow: var(--glow) !important; justify-content: flex-end; }
.sc-bento--smm > :nth-child(1) > .col-boxe .read-more-btn { color: #fff !important; }
.sc-bento--smm > :nth-child(5) > .col-boxe { border-color: transparent !important; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important; }
.sc-bento--smm > :nth-child(6) > .col-boxe { background: radial-gradient(90% 140% at 100% 0%, rgba(91,79,176,.28), transparent 60%), var(--surface) !important; }
.sc-bento-cta { display: flex !important; align-items: center; justify-content: center !important; padding: 1.5rem !important; border-radius: var(--r-lg); border: 1px dashed var(--line-2); background: rgba(255,255,255,.015); min-height: 120px; }
.sc-bento-cta .hover-btn { margin: 0 !important; }
.social-box-hover .col-boxe .read-more-btn {
display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding-top: .6rem;
font-family: var(--font-head) !important; font-size: .92rem !important; font-weight: 600 !important; color: var(--accent) !important;
}
/* PPC: why us (6 + CTA) */
.sc-bento--ppc > :nth-child(1) { grid-column: span 7; }
.sc-bento--ppc > :nth-child(2) { grid-column: span 5; }
.sc-bento--ppc > :nth-child(3) { grid-column: span 4; }
.sc-bento--ppc > :nth-child(4) { grid-column: span 8; }
.sc-bento--ppc > :nth-child(5) { grid-column: span 5; }
.sc-bento--ppc > :nth-child(6) { grid-column: span 7; }
.sc-bento--ppc > :nth-child(7) { grid-column: 1 / -1; border: 0; background: none; min-height: 0; padding: .5rem 0 0 !important; }
.sc-bento--ppc > :nth-child(1) > .col-boxe { border-color: transparent !important; background: radial-gradient(90% 140% at 100% 0%, rgba(91,79,176,.3), transparent 60%), linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important; }
.sc-bento--ppc > :nth-child(4) > .col-boxe { background: var(--grad-2) !important; border-color: transparent !important; box-shadow: var(--glow) !important; }
.sc-bento--ppc > :nth-child(6) > .col-boxe { background: radial-gradient(80% 120% at 0% 100%, rgba(242,156,72,.12), transparent 60%), var(--surface) !important; }
/* Influencer: solutions (5) - tall lead tile + 2x2 */
.sc-bento--inf > :nth-child(1) { grid-column: 1 / span 4; grid-row: span 2; }
.sc-bento--inf > :nth-child(1) > .col-box { background: var(--grad-2) !important; border-color: transparent !important; box-shadow: var(--glow) !important; justify-content: flex-end; }
.sc-bento--inf > :nth-child(3) > .col-box { border-color: transparent !important; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important; }
.sc-bento--inf > :nth-child(4) > .col-box { background: radial-gradient(90% 140% at 100% 0%, rgba(91,79,176,.28), transparent 60%), var(--surface) !important; }
.sc-bento--inf .col-box > .d-flex { gap: 0 !important; }
.sc-bento--inf .col-box h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem) !important; }
.sc-bento--inf > :nth-child(1) .col-box h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem) !important; letter-spacing: -.025em; }
/* ----------------------------------------------------------------------------
5. DM: 360 services bento (7 cards, media wells)
-------------------------------------------------------------------------- */
.sc-svc-bento { margin-top: .25rem !important; }
.sc-svc { margin: 0 !important; padding: 0 !important; --bs-gutter-x: 0; gap: 0; }
.sc-svc > * { width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; }
.sc-svc-media {
order: -1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
height: 220px; padding: 1.25rem !important; overflow: hidden;
background: radial-gradient(70% 90% at 50% 100%, rgba(227,69,118,.18), transparent 70%), rgba(255,255,255,.02);
border-bottom: 1px solid var(--line);
}
.sc-svc-media img { max-height: 100% !important; max-width: 100% !important; width: auto !important; object-fit: contain; border-radius: 0 !important; transition: transform var(--t3) var(--ease); }
@media (prefers-reduced-motion: no-preference) { .sc-svc:hover .sc-svc-media img { transform: scale(1.05); } }
.sc-svc-copy { padding: clamp(1.35rem, 2.3vw, 1.9rem) !important; justify-content: flex-start !important; }
main section .sc-svc-copy h2 { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem) !important; line-height: 1.2 !important; letter-spacing: -.02em; margin-bottom: .7rem !important; }
.sc-svc-copy p { font-size: .97rem !important; }
.sc-svc-bento > .sc-svc--wide { grid-column: span 7; display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.sc-svc-bento > .sc-svc--wide .sc-svc-media { order: 2 !important; height: auto; border-bottom: 0; border-left: 1px solid var(--line); }
.sc-svc-bento > .sc-svc--wide .sc-svc-copy { justify-content: center !important; }
.sc-svc-bento > .sc-svc--tall { grid-column: span 5; }
.sc-svc-bento > .sc-svc--third:nth-child(3) { grid-column: span 4; }
.sc-svc-bento > .sc-svc--third:nth-child(4) { grid-column: span 3; }
.sc-svc-bento > .sc-svc--third:nth-child(5) { grid-column: span 5; }
.sc-svc-bento > .sc-svc--half:nth-child(6) { grid-column: span 5; }
.sc-svc-bento > .sc-svc--half:nth-child(7) { grid-column: span 7; display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.sc-svc-bento > .sc-svc--half:nth-child(7) .sc-svc-media { order: 2 !important; height: auto; border-bottom: 0; border-left: 1px solid var(--line); }
.sc-svc-bento > .sc-svc--half:nth-child(7) .sc-svc-copy { justify-content: center !important; }
.sc-svc.sc-card--grad .sc-svc-media { background: rgba(0,0,0,.12); border-color: rgba(255,255,255,.18); }
.sc-svc.sc-card--grad .sc-svc-media img { max-height: 180px !important; border-radius: 18px !important; }
.sc-svc.sc-card--grad p { color: rgba(255,255,255,.92) !important; -webkit-text-fill-color: rgba(255,255,255,.92) !important; }
/* the inline-pink link (section 0 accent rule) kept a pink `color`, so its underline was pink on pink */
main section .sc-card--grad a[style*="#df4576"] { color: #fff !important; }
/* ----------------------------------------------------------------------------
6. DM: lead form + copy split
-------------------------------------------------------------------------- */
.sc-split-form > .container > .row { display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin: 0 !important; }
.sc-split-form > .container > .row > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.sc-split-form .sc-form-copy { order: 1; }
.sc-split-form .sc-form { order: 2; }
.sc-split-form .sc-form-copy h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem) !important; max-width: 20ch; }
.sc-split-form .sc-form-copy h2 span { font-size: inherit !important; display: inline; }
.sc-split-form .sc-form-copy h2::after { content: "" !important; display: block; width: 64px; height: 3px; margin-top: 1rem; border-radius: 3px; background: var(--grad-2); }
.sc-split-form .sc-form-copy h4 {
font-family: var(--font-head) !important; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem) !important; color: var(--ink) !important;
font-weight: 600 !important; margin: 1.5rem 0 1.1rem !important; padding-left: 1rem; border-left: 3px solid var(--pink);
}
.sc-split-form .sc-form-copy p + br { display: none; }
.sc-split-form .sc-form-copy p + p, .sc-split-form .sc-form-copy br + p { margin-top: 1rem !important; }
/* lead form panel, shared by DM + SEO */
main .sc-form {
position: sticky !important; top: 92px; height: auto !important;
background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-xl) !important;
padding: clamp(1.4rem, 3vw, 2.25rem) !important; box-shadow: var(--sh) !important; overflow: hidden;
}
main .sc-form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad); }
.sc-form .row { --bs-gutter-x: .8rem; }
.sc-form .fields { margin-bottom: .85rem !important; }
.sc-form .input-group-text, .sc-form #basic-addon1 {
height: auto !important; background: var(--surface-3) !important; border: 1px solid var(--line-2) !important; border-right: 0 !important;
border-radius: var(--r-sm) 0 0 var(--r-sm) !important; color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important;
font-family: var(--font-head) !important; font-weight: 600 !important; font-size: 1rem !important; line-height: 1 !important;
padding: 0 .95rem !important; text-shadow: none !important; display: inline-flex; align-items: center; background-clip: border-box !important;
}
.sc-form .input-group .numbersOnly { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
.sc-form #sum-question { font-family: var(--font-head) !important; color: var(--ink) !important; font-weight: 600; font-size: 1rem; }
.sc-form textarea { min-height: 104px; }
.sc-form #regen-sum {
width: 100%; min-height: 48px; background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-3) !important;
border-radius: var(--r-pill) !important; font-family: var(--font-head) !important; font-weight: 600 !important; font-size: .92rem !important; padding: .75rem !important;
}
.sc-form #regen-sum:hover { border-color: var(--accent) !important; }
main .sc-form #btnsubmits { width: 100% !important; min-height: 52px; border-radius: var(--r-pill) !important; background: var(--grad-2) !important; color: #fff !important; font-size: 1.02rem !important; }
/* ----------------------------------------------------------------------------
7. DM: why choose us (pillars panel + icon bento)
-------------------------------------------------------------------------- */
.why-choose-as-digital-marketing-jaipur > .container > .row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); margin: 0 !important; align-items: stretch; }
.why-choose-as-digital-marketing-jaipur > .container > .row > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.why-choose-as-digital-marketing-jaipur .sc-head { grid-column: 1 / -1; margin-bottom: .75rem !important; }
.why-choose-as-digital-marketing-jaipur .sc-head h2 { margin: 0 !important; }
.why-choose-as-digital-marketing-jaipur .sc-head h2 span { font-size: inherit !important; }
.sc-pillars { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(.5rem, 1.5vw, 1rem) clamp(1.25rem, 3vw, 2.25rem); }
.sc-pillar { position: relative; padding: 1.4rem 0 1.4rem 1.6rem !important; border-bottom: 1px solid var(--line); }
.sc-pillar:last-child { border-bottom: 0; }
.sc-pillar::before { content: ""; position: absolute; left: 0; top: 1.65rem; width: 9px; height: 9px; border-radius: 50%; background: var(--grad-2); box-shadow: 0 0 0 5px rgba(227,69,118,.12); }
main section .sc-pillar h4 { font-family: var(--font-head) !important; font-size: 1.25rem !important; margin: 0 0 .45rem !important; }
.sc-pillar p { font-size: .97rem !important; }
.sc-pillar p.pt-2 { padding-top: .5rem !important; color: var(--ink-3) !important; font-size: .9rem !important; }
.sc-icon-col { justify-content: stretch !important; align-items: stretch !important; }
.sc-icon-bento { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1rem); margin: 0 !important; height: 100%; width: 100%; }
.sc-icon-bento > div { margin: 0 !important; width: auto !important; max-width: none !important; align-items: flex-start; justify-content: space-between; text-align: left !important; gap: 1.25rem; min-height: 132px !important; }
.sc-icon-bento > div img { width: 46px !important; height: 46px !important; object-fit: contain; border-radius: 0 !important; }
main section .sc-icon-bento > div h3 { font-size: 1.02rem !important; margin: 0 !important; }
.sc-icon-bento > div:nth-child(1) { grid-column: span 2; grid-row: span 2; background: var(--grad-2) !important; border-color: transparent !important; box-shadow: var(--glow) !important; }
main section .sc-icon-bento > div:nth-child(1) h3 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem) !important; color: #fff !important; }
.sc-icon-bento > div:nth-child(1) img { width: 72px !important; height: 72px !important; }
.sc-icon-bento > div:nth-child(5) { border-color: transparent !important; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important; }
.sc-icon-bento > div:nth-child(3) { background: radial-gradient(100% 120% at 100% 0%, rgba(91,79,176,.3), transparent 60%), var(--surface) !important; }
/* ----------------------------------------------------------------------------
8. BLOGS (editorial bento: 1 feature + 2 horizontal)
-------------------------------------------------------------------------- */
.custom-blogs .col-12.text-center { text-align: left !important; margin-bottom: clamp(1.25rem, 2.5vw, 2rem) !important; }
.custom-blogs .section-title { margin: 0 !important; }
main .custom-blogs h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem) !important; color: var(--ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; letter-spacing: -.03em; line-height: 1.1 !important; text-align: left !important; font-weight: 700 !important; }
main .custom-blogs h2::after { content: "" !important; display: block; width: 64px; height: 3px; margin-top: 1rem; border-radius: 3px; background: var(--grad-2); }
.sc-blogs { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.9rem, 1.5vw, 1.2rem); margin: 0 !important; }
.sc-blogs > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; grid-column: span 6; }
.sc-blogs > :nth-child(1) { grid-column: 1 / -1; }
.sc-blogs .course-card {
height: 100%; display: flex; flex-direction: column; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 0 1.4rem !important; box-shadow: none;
transition: transform var(--t3) var(--ease), border-color var(--t3) var(--ease), box-shadow var(--t3) var(--ease);
}
@media (prefers-reduced-motion: no-preference) { .sc-blogs .course-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--sh); } }
.sc-blogs .img-wrapper { overflow: hidden; margin-bottom: 1.2rem; }
.sc-blogs .img-wrapper img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; transition: transform var(--t3) var(--ease); }
@media (prefers-reduced-motion: no-preference) { .sc-blogs .course-card:hover .img-wrapper img { transform: scale(1.04); } }
.sc-blogs .course-card > a:not(.ms-2) { padding: 0 1.5rem; text-decoration: none; }
main .sc-blogs h4 {
padding: 0 !important; margin: 0 0 .6rem !important; font-size: 1.18rem !important; line-height: 1.35 !important;
font-family: var(--font-head) !important; font-weight: 600 !important; color: var(--ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important;
}
.sc-blogs .course-card:hover h4 { color: var(--accent) !important; }
main .sc-blogs p.text-white { padding: 0 1.5rem !important; color: var(--ink-2) !important; font-size: .95rem !important; flex: 1 1 auto; }
.sc-blogs .course-card > a.ms-2 { margin: 1.1rem 1.5rem 0 !important; align-self: flex-start; }
.sc-blogs .hover-btn {
background: rgba(255,255,255,.03) !important; border: 1px solid var(--line-3) !important; box-shadow: none !important;
padding: .65rem 1.2rem !important; min-height: 44px; font-size: .9rem !important; color: var(--ink) !important;
}
.sc-blogs .hover-btn:hover { border-color: transparent !important; box-shadow: var(--glow) !important; }
/* feature card: image left, copy right */
.sc-blogs > :nth-child(1) .course-card {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: 1fr auto auto 1fr; padding: 0 !important;
border-color: transparent; background: radial-gradient(80% 120% at 100% 0%, rgba(91,79,176,.22), transparent 60%), linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box;
}
.sc-blogs > :nth-child(1) .img-wrapper { grid-column: 1; grid-row: 1 / -1; margin: 0; }
.sc-blogs > :nth-child(1) .img-wrapper, .sc-blogs > :nth-child(1) .img-wrapper a { display: block; height: 100%; }
.sc-blogs > :nth-child(1) .img-wrapper img { height: 100%; min-height: 100%; }
.sc-blogs > :nth-child(1) .course-card > :not(.img-wrapper) { grid-column: 2; }
.sc-blogs > :nth-child(1) .course-card > a:not(.ms-2) { grid-row: 1; align-self: end; padding: 2rem 2rem 0; }
.sc-blogs > :nth-child(1) p.text-white { grid-row: 2; padding: 0 2rem !important; }
.sc-blogs > :nth-child(1) .course-card > a.ms-2 { grid-row: 3; margin: 1.25rem 2rem 2rem !important; }
main .sc-blogs > :nth-child(1) h4 { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem) !important; }
/* ----------------------------------------------------------------------------
9. CTA BAND (shared by in-india-cta, seo-rank, ppc-contact)
-------------------------------------------------------------------------- */
main > section.sc-band { background: none !important; padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 !important; min-height: 0 !important; }
.sc-band > .container, .sc-panel > .container { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter)) !important; }
.sc-band > .container {
position: relative; overflow: hidden; isolation: isolate;
background: radial-gradient(70% 160% at 0% 0%, rgba(91,79,176,.34), transparent 60%), radial-gradient(60% 160% at 100% 100%, rgba(242,156,72,.16), transparent 60%), var(--surface);
border: 1px solid var(--line); border-radius: var(--r-xl);
padding: clamp(1.75rem, 4vw, 3rem) clamp(1.35rem, 4vw, 3.25rem) !important; box-shadow: var(--sh);
}
.sc-band > .container::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.sc-band > .container::after {
content: ""; position: absolute; z-index: -1; right: -6%; top: -60%; width: 46%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(closest-side, rgba(227,69,118,.28), transparent); filter: blur(10px); pointer-events: none;
}
.sc-band .row { display: flex; align-items: center; margin: 0 !important; gap: 1.5rem 2rem; flex-wrap: nowrap; }
.sc-band .row > * { padding: 0 !important; min-height: 0 !important; }
.sc-band .row > .col-12:only-child, .sc-band .row > .col-lg-12:only-child {
display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
gap: 1.5rem 2.5rem; text-align: left !important;
}
.sc-band .row > .col-lg-8 { flex: 1 1 auto; width: auto; }
.sc-band .row > .col-lg-4 { flex: 0 0 auto; width: auto; display: flex !important; justify-content: flex-end !important; }
main section.sc-band :is(h2, h3, h5) {
font-family: var(--font-head) !important; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem) !important; line-height: 1.12 !important;
font-weight: 700 !important; letter-spacing: -.03em !important; color: var(--ink) !important; -webkit-text-fill-color: currentColor !important;
text-align: left !important; margin: 0 !important; max-width: 24ch; background: none !important;
}
main section.sc-band button.sc-btn { margin: 0 !important; flex: none; }
/* ----------------------------------------------------------------------------
10. FAQ (shared component from cogent-v3; align its gradient rule)
-------------------------------------------------------------------------- */
main section.faq { padding-block: calc(var(--section-y) * .75) !important; }
main section.faq .col-12 > h2:first-child { text-align: center !important; margin-bottom: 2.25rem; }
main section.faq .col-12 > h2:first-child::after { margin-inline: auto !important; }
main section.faq .accordion-button { min-height: 56px; }
/* ----------------------------------------------------------------------------
11. SPLIT LAYOUTS (media + copy; reasons with tick cards; tinted panel)
-------------------------------------------------------------------------- */
.sc-media-split > .container > .row, .sc-reasons > .container > .row, .sc-panel > .container > .row {
display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin: 0 !important;
}
.sc-media-split > .container > .row > *, .sc-reasons > .container > .row > *, .sc-panel > .container > .row > * {
width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; min-width: 0;
}
.sc-media-col {
position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 360px;
border-radius: var(--r-xl); border: 1px solid transparent; overflow: hidden;
background: radial-gradient(closest-side at 50% 55%, rgba(227,69,118,.24), transparent 75%), radial-gradient(70% 70% at 15% 10%, rgba(91,79,176,.3), transparent 70%),
linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box;
padding: clamp(1.25rem, 3vw, 2.5rem) !important;
}
.sc-media-col > img { max-height: 440px; width: auto !important; max-width: 100%; object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 26px 36px rgba(0,0,0,.45)); }
.sc-media-split .sc-copy-col h2 { margin-bottom: 1.4rem !important; max-width: 22ch; }
.sc-media-split .sc-copy-col h2::after { content: "" !important; display: block; width: 64px; height: 3px; margin-top: 1rem; border-radius: 3px; background: var(--grad-2); }
.sc-media-split .sc-copy-col p + br, .sc-media-split .sc-copy-col br { display: none; }
.sc-media-split .sc-copy-col :is(p + p, br + p) { margin-top: 1rem !important; }
.seo-about-content.sc-media-split .sc-media-col { position: sticky; top: 92px; align-self: start; min-height: 520px; }
.seo-about-content.sc-media-split > .container > .row { align-items: start; }
/* influencer: framed animation video */
.sc-media-split--right .sc-media-col { padding: 0 !important; min-height: 0; background: linear-gradient(#000, #000) padding-box, var(--grad-border) border-box; box-shadow: var(--sh-lg); }
.sc-media-split--right .sc-media-col video { display: block; width: 100%; height: auto; aspect-ratio: 606 / 480; object-fit: cover; mix-blend-mode: normal !important; border-radius: 0 !important; }
.will-do-influencer .sc-copy-col p { font-size: 1.02rem !important; padding: 0 !important; }
/* reasons: tick cards 2x2 */
.sc-reasons-copy { display: flex !important; flex-direction: column; justify-content: center !important; align-items: flex-start; }
.sc-reasons-copy > h2 { margin-bottom: .2rem !important; }
main section .sc-reasons-copy > h3.sc-h2-sub { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem) !important; font-weight: 700 !important; letter-spacing: -.03em !important; margin: .2rem 0 0 !important; background: var(--grad-text) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; padding-bottom: .06em !important; }
.sc-reasons-copy > h2::after, .sc-reasons-copy > h3.sc-h2-sub::after { content: "" !important; display: block; width: 64px; height: 3px; margin-top: 1rem; border-radius: 3px; background: var(--grad-2); -webkit-text-fill-color: initial; }
.ppc-cogent .sc-reasons-copy > h2::after { content: none !important; }
.sc-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1.75rem; width: 100%; }
.sc-ticks > div { margin: 0 !important; flex-direction: column !important; gap: .9rem !important; padding: 1.25rem !important; }
.sc-ticks > div > img { width: 34px !important; height: 34px !important; padding: 8px; border-radius: 50% !important; background: var(--grad-2); flex: none; }
.sc-ticks .content-wrap p { font-size: .94rem !important; line-height: 1.6 !important; margin: 0 !important; }
.sc-ticks .content-wrap p span {
display: inline-block; margin-bottom: .25rem; font-family: var(--font-head) !important; font-size: 1.08rem !important; font-weight: 600 !important;
line-height: 1.3 !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; background: none !important; letter-spacing: -.01em !important;
}
.sc-ticks > div:nth-child(1) { border-color: transparent !important; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important; }
.sc-ticks > div:nth-child(4) { background: radial-gradient(100% 130% at 100% 0%, rgba(91,79,176,.28), transparent 60%), var(--surface) !important; }
.sc-reasons-media { display: flex; align-items: center; justify-content: center; }
.sc-reasons-media > img { max-width: 100%; height: auto; border-radius: 0 !important; filter: drop-shadow(0 26px 36px rgba(0,0,0,.45)); }
/* SMM composite (image + screen-blended video) inside a solid frame so the blend works */
.social-media .sc-reasons-media .img-box {
position: relative; width: 100%; height: auto !important; min-height: 460px; display: flex !important; align-items: center; justify-content: center !important;
overflow: hidden; isolation: isolate; border-radius: var(--r-xl); border: 1px solid transparent; padding: 2rem;
background: radial-gradient(70% 70% at 70% 30%, rgba(91,79,176,.32), transparent 70%), linear-gradient(#0B0B13, #0B0B13) padding-box, var(--grad-border) border-box;
}
.social-media .img-box > img { position: relative; z-index: 1; max-width: 100%; border-radius: 0 !important; }
.social-media .img-box .video-2 { z-index: 2; left: -60px !important; bottom: -30px !important; width: 70% !important; height: auto !important; opacity: .9; }
/* tinted feature panel (influencer boost) */
.sc-panel > .container {
position: relative; overflow: hidden;
background: radial-gradient(80% 120% at 0% 0%, rgba(91,79,176,.26), transparent 55%), radial-gradient(70% 110% at 100% 100%, rgba(242,156,72,.12), transparent 55%), var(--surface);
border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.75rem, 5vw, 3.75rem) !important; box-shadow: var(--sh);
}
.sc-panel > .container::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.sc-panel .row > :first-child { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.sc-panel h2 { max-width: 18ch; }
.sc-panel h2::after { content: "" !important; display: block; width: 64px; height: 3px; margin-top: 1rem; border-radius: 3px; background: var(--grad-2); }
.sc-panel p { margin-top: 1.25rem !important; padding: 0 !important; font-size: 1rem !important; }
.sc-panel .row > :last-child img { display: block; margin-inline: auto; max-height: 460px; width: auto; max-width: 100%; border-radius: 0 !important; }
/* ----------------------------------------------------------------------------
12. SEO specifics
-------------------------------------------------------------------------- */
/* stats: counts bento from cogent-v3, 6 tiles in a 3 x 2 grid */
main > .container.seo-keypoints { margin-top: 0 !important; max-width: var(--maxw); padding-inline: var(--gutter) !important; }
.seo-keypoints .counts { margin-block: calc(var(--section-y) * .3) calc(var(--section-y) * .5) !important; }
.seo-keypoints .counts > div > .row { align-items: center; margin: 0; --bs-gutter-x: 2rem; }
.seo-keypoints .counts h2 { margin-bottom: 1.1rem !important; }
.seo-keypoints .counts h2 span { display: block; }
.sc-stat-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 0 !important; width: 100%; }
.sc-stat-grid > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; }
.sc-stat-grid .count-box { min-height: 148px; }
.sc-stat-grid .count-box h3 { margin: 0 0 0 .1rem !important; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem) !important; }
.sc-stat-grid .count-box h3 { background: var(--grad-text) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.sc-stat-grid > :nth-child(1) .count-box h3 { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.sc-stat-grid > :nth-child(6) .count-box { background: radial-gradient(100% 120% at 100% 0%, rgba(242,156,72,.2), transparent 60%) padding-box, linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad-border) border-box !important; }
/* key features: 2-col feature bento + sticky form */
.sc-features > .container > .row { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin: 0 !important; }
.sc-features > .container > .row > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.sc-feat-col { justify-content: flex-start !important; }
.sc-feat-col > h2 { max-width: 22ch; margin-bottom: 1.75rem !important; }
.sc-feat-col > h2::after { content: "" !important; display: block; width: 64px; height: 3px; margin-top: 1rem; border-radius: 3px; background: var(--grad-2); }
.sc-feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.sc-feat { padding: 1.25rem 1.35rem !important; }
main section .sc-feat h4 { font-family: var(--font-head) !important; font-size: 1.08rem !important; margin: 0 0 .45rem !important; }
.sc-feat p { font-size: .93rem !important; line-height: 1.6 !important; }
.sc-feat:nth-child(1), .sc-feat:nth-child(6) { grid-column: 1 / -1; }
.sc-feat:nth-child(1) { border-color: transparent !important; background: radial-gradient(90% 160% at 100% 0%, rgba(91,79,176,.3), transparent 60%), linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important; }
.sc-feat:nth-child(6) { background: var(--grad-2) !important; border-color: transparent !important; box-shadow: var(--glow) !important; }
.sc-feat:nth-child(6) :is(h4, h4 span, p) { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
.sc-features .sc-form { top: 92px; }
/* client logos marquee (SEO + influencer) */
main > section.sc-logos { overflow: hidden; }
.sc-logos > .container-fluid > h2 { text-align: center !important; margin-inline: auto; }
.sc-logos > .container-fluid > p { text-align: center !important; color: var(--ink-3) !important; margin-top: .6rem !important; }
.sc-logos .logos {
background: none !important; padding: .5rem 0 !important; margin-top: clamp(1.5rem, 3vw, 2.25rem);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sc-logos .logos::before, .sc-logos .logos::after { display: none !important; }
.sc-logos .logos-slide img {
width: 152px !important; height: 84px !important; object-fit: contain; vertical-align: middle;
background: #fff; padding: 10px 16px; margin: 0 .4rem !important; border-radius: var(--r-md) !important; border: 1px solid var(--line);
filter: grayscale(1) contrast(1.05); transition: filter var(--t2) var(--ease);
}
.sc-logos .logos-slide img:hover { filter: none; }
.sc-logos .logos:hover .logos-slide { animation-play-state: paused; }
/* process steps with gradient connectors (SEO + influencer) */
.sc-steps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); margin: 0 !important; }
.sc-steps > * { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; position: relative; }
.sc-steps > .sc-head { grid-column: 1 / -1; }
.sc-steps > [class*="col-lg-3"]:not(:last-child)::after {
content: ""; position: absolute; z-index: 2; top: calc(clamp(1.35rem, 2.3vw, 1.9rem) + 31px); right: calc(-1 * clamp(1rem, 2.4vw, 1.75rem));
width: clamp(1rem, 2.4vw, 1.75rem); height: 2px; background: var(--grad-2);
}
.sc-steps > [class*="col-lg-3"] > :is(.box, .col-box) { gap: 0; }
.sc-steps > [class*="col-lg-3"]:first-of-type > :is(.box, .col-box) { border-color: transparent !important; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important; }
.sc-steps .box > img, .sc-steps .col-box > .svg-box {
width: 64px !important; height: 64px !important; padding: 15px !important; margin: 0 0 1.35rem !important; flex: none;
display: grid; place-items: center; border-radius: 50% !important; border: 1px solid transparent !important;
background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad-border) border-box !important; box-shadow: 0 0 0 6px rgba(227,69,118,.06);
}
.sc-steps .col-box > .svg-box svg { width: 30px; height: 30px; }
.sc-steps .box > img { object-fit: contain; }
main section .sc-steps :is(.box, .col-box) h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem) !important; margin: 0 0 .6rem !important; padding: 0 !important; }
.sc-steps :is(.box, .col-box) p { font-size: .95rem !important; line-height: 1.65 !important; margin: 0 !important; }
/* managed services head (h2 + lead) */
.engine-optimise .sc-head > p.pb-5 { padding: 0 !important; }
/* benefits: stacked panels, image alternates sides */
.sc-zig > .container > .row:not(:first-child) {
display: grid !important; align-items: center; gap: clamp(1.25rem, 3.5vw, 3rem); margin: 0 0 clamp(.85rem, 1.5vw, 1.2rem) !important;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(.85rem, 1.6vw, 1.15rem) !important;
transition: border-color var(--t3) var(--ease);
}
.sc-zig > .container > .row:not(:first-child):hover { border-color: var(--line-2); }
.sc-zig > .container > .row:nth-child(even) { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.sc-zig > .container > .row:nth-child(odd):not(:first-child) { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.sc-zig > .container > .row:nth-child(4n+2) { background: radial-gradient(70% 120% at 100% 0%, rgba(91,79,176,.2), transparent 60%), var(--surface); }
.sc-zig > .container > .row:not(:first-child) > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.sc-zig > .container > .row:not(:first-child) > .d-flex { padding: clamp(.5rem, 2vw, 1.5rem) clamp(.5rem, 2vw, 1.75rem) !important; }
.sc-zig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg) !important; }
.sc-zig h3 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.85rem) !important; letter-spacing: -.02em !important; margin-bottom: .85rem !important; }
.sc-zig p { font-size: .98rem !important; }
.sc-zig .sc-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important; }
/* ----------------------------------------------------------------------------
13. SMM specifics
-------------------------------------------------------------------------- */
/* in-house studio: copy + three staggered reel frames */
.sc-studio > .container > .row { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin: 0 !important; }
.sc-studio > .container > .row > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.sc-studio-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.sc-studio-copy h2 { max-width: 16ch; }
.sc-studio-copy h2::after { content: "" !important; display: block; width: 64px; height: 3px; margin-top: 1rem; border-radius: 3px; background: var(--grad-2); }
.sc-studio-copy p { margin-top: 1.2rem !important; }
.sc-studio-copy .hover-btn { margin-top: 1.75rem !important; }
.sc-studio .circles {
position: absolute; z-index: -1; left: -10%; bottom: -30%; width: 260px !important; height: 260px !important; border-radius: 50% !important;
background: radial-gradient(closest-side, rgba(227,69,118,.22), transparent) !important; filter: blur(10px); pointer-events: none;
}
.sc-reel-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); margin: 0 !important; align-items: start; }
.sc-reel-row > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.sc-reel-row > :nth-child(odd) { margin-top: clamp(1.5rem, 4vw, 3rem) !important; }
.sc-reel-row video, .sc-reel-strip video {
display: block; width: 100% !important; height: auto !important; aspect-ratio: 9 / 16; object-fit: cover;
border-radius: var(--r-lg) !important; border: 1px solid var(--line-2);
background: radial-gradient(80% 60% at 50% 40%, rgba(227,69,118,.18), transparent 70%), var(--surface-2); box-shadow: var(--sh);
}
.sc-reel-row > :nth-child(2) video, .sc-reel-strip > :nth-child(3) video {
border: 2px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad-border) border-box; box-shadow: var(--glow);
}
/* moment & meme: 3 x 3 square bento, lead post 2 x 2 */
.sc-meme-bento { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1rem); margin: 0 !important; }
.sc-meme-bento > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.sc-meme-bento > .sc-head { grid-column: 1 / -1; margin-bottom: clamp(.75rem, 2vw, 1.25rem) !important; }
.sc-meme-bento > :nth-child(2) { grid-column: span 2; grid-row: span 2; }
.sc-meme-bento .col-box { height: 100%; aspect-ratio: 1; padding: 0 !important; border-radius: var(--r-lg) !important; overflow: hidden; border: 1px solid var(--line); background: var(--surface) !important; }
.sc-meme-bento > :nth-child(2) .col-box { aspect-ratio: auto; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box !important; padding: 0 !important; }
.sc-meme-bento .col-box img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; margin: 0 !important; transition: transform var(--t3) var(--ease); }
@media (prefers-reduced-motion: no-preference) { .sc-meme-bento .col-box:hover img { transform: scale(1.04); } }
/* portfolio: pills + square gallery */
.social-industries .nav-pills { flex-wrap: wrap; gap: .5rem !important; margin: 0 0 1.5rem !important; }
main .social-industries .nav-pills .nav-link {
display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.1rem !important; text-transform: none !important;
font-family: var(--font-head) !important; font-size: .93rem !important; font-weight: 500 !important; color: var(--ink-2) !important;
background: var(--surface) !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-pill) !important;
}
main .social-industries .nav-pills .nav-link:hover { color: var(--ink) !important; border-color: var(--line-3) !important; }
main .social-industries .nav-pills .nav-link.active { color: #fff !important; background: var(--grad-2) !important; border-color: transparent !important; box-shadow: var(--glow); }
.social-industries .tab-pane > .row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, .9rem); margin: 0 !important; }
.social-industries .tab-pane > .row > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.social-industries .tab-pane > .row > :empty { display: none; }
.social-industries .tab-pane img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg) !important; border: 1px solid var(--line); transition: transform var(--t3) var(--ease); }
@media (prefers-reduced-motion: no-preference) { .social-industries .tab-pane img:hover { transform: translateY(-4px); } }
/* SMM services mobile carousel (existing Bootstrap carousel, < 992px) */
.social-box-hover .carousel .col-boxe {
display: block; min-height: 220px; background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 1.5rem !important; overflow: hidden;
}
.social-box-hover .carousel .col-boxe::before { display: none !important; }
.social-box-hover .carousel .col-boxe h3 { margin-bottom: .6rem !important; }
.social-box-hover .carousel .col-boxe h6 { font-size: .97rem !important; line-height: 1.65 !important; color: var(--ink-2) !important; font-weight: 400 !important; }
/* ----------------------------------------------------------------------------
14. PPC specifics
-------------------------------------------------------------------------- */
/* ad formats carousel (Owl 1) */
main > section.sc-formats { padding-top: calc(var(--section-y) * .2) !important; }
.sc-formats .post-slide {
display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important; text-align: left;
min-height: 0 !important; height: calc(100% - 1rem); margin: .5rem !important; padding: 1.6rem !important;
background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; box-shadow: none !important;
transition: transform var(--t3) var(--ease), border-color var(--t3) var(--ease);
}
@media (prefers-reduced-motion: no-preference) { .sc-formats .post-slide:hover { transform: translateY(-4px); border-color: transparent !important; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad-border) border-box !important; } }
.sc-formats .owl-wrapper { display: flex !important; }
.sc-formats .owl-item { display: flex; }
.sc-formats .owl-item > .post-slide { width: 100%; }
.sc-formats .post-slide .sv-box { order: -1; width: 60px !important; height: 60px !important; margin-bottom: 1.25rem; border-radius: 18px !important; background: var(--grad-2) !important; box-shadow: var(--glow); }
.sc-formats .post-slide .sv-box svg { width: 32px; height: 32px; }
main section.sc-formats .post-slide h3 { text-align: left !important; font-size: 1.25rem !important; margin: 0 !important; }
.sc-formats .post-slide hr { width: 100%; margin: 1rem 0 !important; border: 0 !important; height: 1px; background: var(--line-2); }
main section.sc-formats .post-slide p { text-align: left !important; font-size: .95rem !important; }
/* Owl 1 arrows on all five pages: CSS chevrons instead of the missing icon font */
main .owl-controls .owl-buttons { display: flex !important; justify-content: flex-end; gap: .55rem; margin-top: 1rem !important; padding-inline: .5rem; }
main .owl-controls .owl-buttons :is(.owl-prev, .owl-next) {
position: static !important; width: 48px; height: 48px; padding: 0 !important; display: inline-grid !important; place-items: center;
border-radius: 50% !important; background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--ink);
font-size: 0 !important; transition: background var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
main .owl-controls .owl-buttons :is(.owl-prev, .owl-next)::after {
content: "" !important; font-size: 0 !important; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: translateX(2px) rotate(45deg); font-family: inherit !important;
}
main .owl-controls .owl-buttons .owl-next::after { transform: translateX(-2px) rotate(-135deg); }
main .owl-controls .owl-buttons :is(.owl-prev, .owl-next):hover { background: var(--grad-2) !important; border-color: transparent !important; color: #fff; }
main .owl-controls .owl-pagination { display: none; }
/* full-bleed band over the legacy texture */
main > section.ppc-bg.sc-bleed {
min-height: 0 !important; padding-block: clamp(2.75rem, 6vw, 4.5rem) !important; margin-block: calc(var(--section-y) * .3) !important;
background: linear-gradient(90deg, rgba(8,8,15,.94) 0%, rgba(8,8,15,.78) 55%, rgba(8,8,15,.55) 100%), url(/Images/ppc-bg.png) center / cover no-repeat !important;
border-block: 1px solid var(--line);
}
.sc-bleed::before, .sc-bleed::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--grad-line); }
.sc-bleed::before { top: 0; } .sc-bleed::after { bottom: 0; }
.sc-bleed .col-12 { min-height: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 1.5rem 3rem; }
main section.sc-bleed h2 { text-align: left !important; max-width: 26ch; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem) !important; }
.sc-bleed .hover-btn { flex: none; }
/* expectations: heading panel + 3 x 2 icon tiles */
.sc-perform { display: grid !important; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1rem); margin: 0 !important; }
.sc-perform > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; flex: none !important; }
.sc-perform-head { grid-row: span 2; text-align: left !important; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(0rem, 2vw, 1.5rem) 0 0 !important; }
main section .sc-perform-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem) !important; }
main section .sc-perform-head h3 {
font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem) !important; font-weight: 700 !important; letter-spacing: -.03em !important; line-height: 1.1 !important;
background: var(--grad-text) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; padding-bottom: .06em !important;
}
.sc-perform-head h3::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 1rem; border-radius: 3px; background: var(--grad-2); }
.sc-perform > .col-lg-2 {
display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: space-between !important; gap: 1.25rem; min-height: 168px;
text-align: left !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem !important;
transition: transform var(--t3) var(--ease), border-color var(--t3) var(--ease);
}
@media (prefers-reduced-motion: no-preference) { .sc-perform > .col-lg-2:hover { transform: translateY(-4px); border-color: var(--line-2); } }
.sc-perform .svg-box { width: 56px !important; height: 56px !important; border: 0 !important; border-radius: 16px !important; background: rgba(255,255,255,.04); overflow: visible; }
.sc-perform .svg-box::before { display: none !important; }
.sc-perform .svg-box svg { width: 34px; height: 34px; }
.sc-perform .svg-box:hover .on-hover { fill: #fff !important; }
main section .sc-perform h4 { text-align: left !important; font-size: 1.08rem !important; margin: 0 !important; }
.sc-perform > .col-lg-2:nth-child(2) { background: var(--grad-2); border-color: transparent; box-shadow: var(--glow); }
.sc-perform > .col-lg-2:nth-child(2) .svg-box { background: rgba(255,255,255,.18); }
.sc-perform > .col-lg-2:nth-child(2) h4 { color: #fff !important; }
.sc-perform > .col-lg-2:nth-child(6) { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box; }
.sc-perform > .col-lg-2:nth-child(4) { background: radial-gradient(100% 130% at 100% 0%, rgba(91,79,176,.28), transparent 60%), var(--surface); }
/* ----------------------------------------------------------------------------
15. INFLUENCER specifics
-------------------------------------------------------------------------- */
.influence-banner h1 { max-width: 19ch !important; font-size: clamp(2.1rem, 1.25rem + 2.6vw, 3.4rem) !important; }
.influence-banner.sc-hero p { padding: 0 !important; }
.sc-reel-strip { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); margin: 0 !important; align-items: start; }
.sc-reel-strip > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.sc-reel-strip > .sc-head { grid-column: 1 / -1; }
.sc-reel-strip > .sc-head h2 br { display: none; }
.sc-reel-strip > :nth-child(odd):not(.sc-head) { margin-top: clamp(1.25rem, 3.5vw, 2.75rem) !important; }
/* mobile Owl carousels (solutions + process) */
.influencer-solutions .owl-carousel .post-slide, .influencer-process .owl-carousel .post-slide { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: .5rem !important; height: auto; }
.influencer-solutions .owl-carousel .col-box, .influencer-process .owl-carousel .col-box {
background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; padding: 1.5rem !important; box-shadow: none !important; height: 100%;
}
.influencer-solutions .owl-carousel .col-box h6 { padding-top: .75rem !important; font-size: .97rem !important; color: var(--ink-2) !important; font-weight: 400 !important; line-height: 1.65 !important; }
.influencer-process .owl-carousel .svg-box { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50% !important; border: 1px solid transparent !important; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad-border) border-box; margin-bottom: 1rem; }
.influencer-process .owl-carousel .svg-box svg { width: 28px; height: 28px; }
.influencer-process .owl-carousel .col-box h3 { padding: 0 !important; margin-bottom: .5rem !important; }
.influencer-process .owl-carousel .col-box p { font-size: .95rem !important; }
/* ----------------------------------------------------------------------------
16. RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
.sc-perform { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-perform-head { grid-column: 1 / -1; grid-row: auto; padding: 0 0 .75rem !important; }
}
@media (max-width: 991.98px) {
.sc-hero-row { grid-template-columns: 1fr; }
.sc-hero-media { min-height: 0; width: 100%; max-width: 620px; margin-inline: auto !important; padding: 1.5rem 0 !important; }
.sc-hero-media > img { max-height: 380px; }
main section.sc-hero h1 { max-width: 20ch; }
.sc-head--split { grid-template-columns: 1fr; grid-template-rows: none; }
.sc-head--split > h6, .sc-head--split > h2, .sc-head--split > p { grid-column: 1; grid-row: auto; }
.sc-head--split > p { margin-top: 1rem !important; }
.sc-bento > * { grid-column: span 6 !important; grid-row: auto !important; }
.sc-bento--smm > :nth-child(7), .sc-bento--ppc > :nth-child(7) { grid-column: 1 / -1 !important; }
.sc-bento--inf > :nth-child(1) { grid-column: 1 / -1 !important; }
.sc-svc-bento > .sc-svc { grid-column: span 6 !important; display: flex !important; flex-direction: column; }
.sc-svc-bento > .sc-svc--wide, .sc-svc-bento > .sc-svc--half:nth-child(7) { grid-column: 1 / -1 !important; }
.sc-svc-bento > .sc-svc .sc-svc-media { order: -1 !important; height: 220px !important; border-left: 0 !important; border-bottom: 1px solid var(--line) !important; }
.sc-split-form > .container > .row, .sc-features > .container > .row, .sc-media-split > .container > .row,
.sc-reasons > .container > .row, .sc-panel > .container > .row, .sc-studio > .container > .row,
.why-choose-as-digital-marketing-jaipur > .container > .row { grid-template-columns: 1fr; }
main .sc-form, .seo-about-content.sc-media-split .sc-media-col { position: relative !important; top: 0; }
.seo-about-content.sc-media-split .sc-media-col { min-height: 320px; }
.sc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-steps > [class*="col-lg-3"]::after { display: none; }
.sc-zig > .container > .row:not(:first-child) { grid-template-columns: 1fr !important; }
.sc-perform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-panel .row > :last-child { order: -1 !important; }
.sc-panel .row > :first-child { order: 2 !important; }
.sc-reel-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-reel-strip > :nth-child(odd):not(.sc-head) { margin-top: 0 !important; }
.sc-reel-strip > :nth-child(even) { margin-top: 0 !important; }
.sc-reel-strip > :nth-child(3), .sc-reel-strip > :nth-child(5) { margin-top: 1.75rem !important; }
}
@media (max-width: 767.98px) {
.sc-bento > * { grid-column: 1 / -1 !important; }
.sc-blogs > * { grid-column: 1 / -1 !important; }
.sc-svc-bento > .sc-svc { grid-column: 1 / -1 !important; }
.sc-band .row { flex-direction: column; align-items: flex-start; }
.sc-band .row > .col-12:only-child, .sc-band .row > .col-lg-12:only-child { flex-direction: column !important; align-items: flex-start !important; }
.sc-band .row > .col-lg-4 { width: 100%; justify-content: flex-start !important; }
.sc-bleed .col-12 { flex-direction: column !important; align-items: flex-start !important; }
.sc-meme-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-meme-bento > :nth-child(2), .sc-meme-bento > :nth-child(7) { grid-column: 1 / -1; grid-row: auto; }
.sc-meme-bento > :nth-child(2) .col-box, .sc-meme-bento > :nth-child(7) .col-box { aspect-ratio: 1; }
.social-industries .tab-pane > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.social-industries .tab-pane > .row > .col-12 { grid-column: 1 / -1; }
.sc-blogs > :nth-child(1) .course-card { display: flex; padding: 0 0 1.4rem !important; }
.sc-blogs > :nth-child(1) .img-wrapper { margin-bottom: 1.2rem; }
.sc-blogs > :nth-child(1) .img-wrapper img, .sc-blogs > :nth-child(1) .img-wrapper, .sc-blogs > :nth-child(1) .img-wrapper a { height: auto; min-height: 0; }
.sc-blogs > :nth-child(1) .course-card > a:not(.ms-2) { padding: 0 1.5rem; }
.sc-blogs > :nth-child(1) p.text-white { padding: 0 1.5rem !important; }
.sc-blogs > :nth-child(1) .course-card > a.ms-2 { margin: 1.1rem 1.5rem 0 !important; }
}
@media (max-width: 575.98px) {
.seo_video .sc-hero-media > img { max-width: 100% !important; }
.sc-checks { grid-template-columns: 1fr; }
.sc-actions { flex-direction: column; align-items: stretch !important; width: 100%; }
.sc-actions > button.sc-btn, .sc-hero-copy > button.sc-btn { width: 100% !important; }
.sc-band button.sc-btn, .sc-reasons-copy > button.sc-btn, .sc-panel button.sc-btn { width: 100% !important; }
.sc-ticks { grid-template-columns: 1fr; }
.sc-feat-grid { grid-template-columns: 1fr; }
.sc-feat:nth-child(n) { grid-column: auto; }
.sc-steps { grid-template-columns: 1fr; }
.sc-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-icon-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-icon-bento > div:nth-child(1) { grid-column: 1 / -1; grid-row: auto; min-height: 150px !important; }
.sc-perform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-perform > .col-lg-2 { min-height: 150px; padding: 1.1rem !important; }
.sc-reel-row { gap: .5rem; }
.social-media .sc-reasons-media .img-box { min-height: 300px; padding: 1.25rem; }
.sc-media-col { min-height: 260px; }
.sc-split-form .sc-form-copy h4 { margin-top: 1.25rem !important; }
}
/* ----------------------------------------------------------------------------
17. PANEL PADDING (beats the grid-child resets above)
-------------------------------------------------------------------------- */
.sc-split-form > .container > .row > .sc-form,
.sc-features > .container > .row > .sc-form { padding: clamp(1.4rem, 3vw, 2.25rem) !important; }
.why-choose-as-digital-marketing-jaipur > .container > .row > .sc-pillars { padding: clamp(.5rem, 1.5vw, 1rem) clamp(1.25rem, 3vw, 2.25rem) !important; }
.sc-media-split > .container > .row > .sc-media-col { padding: clamp(1.25rem, 3vw, 2.5rem) !important; }
.sc-media-split--right > .container > .row > .sc-media-col { padding: 0 !important; }
/* ----------------------------------------------------------------------------
18. ALIGNMENT PASS
-------------------------------------------------------------------------- */
/* heads sitting in their own bootstrap row: drop the negative gutter so the
heading shares the left edge with the grid below */
main section .row:has(> .sc-head) { margin-inline: 0 !important; --bs-gutter-x: 0; }
main section .row:has(> .sc-head) > .sc-head { padding-inline: 0 !important; }
/* hero media: image sits on the panel floor and pops out of its top */
.sc-hero:not(.seo_video):not(.ppc-hero) .sc-hero-media { align-items: flex-end !important; }
.sc-hero:not(.seo_video):not(.ppc-hero) .sc-hero-orb { inset: 14% 3% 0; }
.sc-hero:not(.seo_video):not(.ppc-hero) .sc-hero-media > img { margin-bottom: 0 !important; }
.solutions.sc-hero .sc-hero-media > img { margin-bottom: 6% !important; }
main section.influence-banner.sc-hero h1 { max-width: 21ch !important; font-size: clamp(2rem, 1.15rem + 2.3vw, 3.15rem) !important; }
/* bento text widths */
.sc-bento > * > :is(.col-boxe, .col-box) h6 { width: auto !important; max-width: 62ch !important; }
.sc-bento--smm > :nth-child(1) > .col-boxe .read-more-btn { margin-top: .4rem; }
main section .sc-bento--smm > :nth-child(1) > .col-boxe h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem) !important; letter-spacing: -.025em; }
main section .sc-bento--six > :nth-child(1) > .col-boxe h3,
main section .sc-bento--ppc > :nth-child(4) > .col-boxe h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem) !important; }
/* band: copy column never centres */
.sc-band .row > * { justify-content: flex-start; }
.sc-band .row > .col-lg-8 { display: flex !important; justify-content: flex-start !important; text-align: left !important; }
/* ad-format cards: copy flush with the title */
main section.sc-formats .post-slide p { padding: 0 !important; margin: 0 !important; }
/* SMM reasons composite: let the dashboard art fill the frame */
.social-media .img-box > img { width: 100% !important; }
/* keep the existing responsive duplicates intact: the desktop-only grid
(d-none d-lg-flex) stays hidden below lg, exactly as before */
@media (max-width: 991.98px) { .sc-bento.d-none { display: none !important; } }
.influencer-solutions .owl-carousel .col-box > .d-flex { justify-content: flex-start !important; text-align: left !important; }
.influencer-process .owl-carousel .col-box :is(h3, p) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; text-align: left !important; }
/* h6 is used as body copy / eyebrows on these pages. cogent-v3's display-font
:is() list contains #btnsubmits, which gives it id specificity and beats its
own `h6 { body font }` rule; :is(h6, #sc-none) matches the same h6 with
equal-plus specificity to restore the text face. */
main section :is(h6, #sc-none), main section :is(h6, #sc-none) *:not(i) { font-family: var(--font-body) !important; }
/* ad formats: the carousel runs past the container, fade its trailing edge */
.sc-formats .owl-wrapper-outer { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
@media (max-width: 767.98px) { .sc-formats .owl-wrapper-outer { -webkit-mask-image: none; mask-image: none; } }
/* SEO key features: the sticky form column is narrow, so its paired fields stack */
.sc-features > .container > .row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.sc-features .sc-form .fields.col-lg-6 { flex: 0 0 100%; width: 100%; max-width: 100%; }
@media (max-width: 991.98px) {
.sc-svc-bento > .sc-svc--wide, .sc-svc-bento > .sc-svc--half:nth-child(7) { display: flex !important; flex-direction: column; }
/* the 2-col override above comes after section 16, so restate the stack below lg */
.sc-features > .container > .row { grid-template-columns: 1fr; }
.sc-features .sc-form { top: 0; } /* not sticky here, so the 92px offset would push it into the next band */
}
@media (max-width: 575.98px) {
.sc-icon-bento > div:nth-child(6) { grid-column: 1 / -1; min-height: 110px !important; }
}
/* ----------------------------------------------------------------------------
19. TONE BANDS (cogent-v3 §28: blocks alternate .v3-dark / .v3-light; a light
band re-defines the tokens, so only colours hard-coded for dark need help here)
-------------------------------------------------------------------------- */
/* DM why-us: the icons are white PNGs, so on a light band they sit on a gradient chip */
.v3-light .sc-icon-bento > div:not(:nth-child(1)) img {
padding: 11px; border-radius: 14px !important; background: var(--grad-2); box-shadow: 0 10px 22px -12px rgba(227,69,118,.6);
}
/* SEO stats: cogent-v3 paints tile 4 with a near-black wash; on a light band it becomes a soft tint */
.v3-light .counts .sc-stat-grid > :nth-child(4) .count-box {
background: linear-gradient(160deg, rgba(91,79,176,.16), var(--surface-2) 60%) padding-box, var(--grad-border) border-box;
}
/* SEO stats band is a .container: paint its off-white past the container edges, and let
the band padding alone set the rhythm */
main > .container.seo-keypoints.v3-light { box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
main > .seo-keypoints:is(.v3-light, .v3-dark) .counts { margin-block: 0 !important; }
/* cogent-v3 §26 treats the .counts panel as a nested section (gap on top, none below), which
left the button and tiles touching the panel's bottom edge; #sc-rhythm only lifts specificity */
main > .container.seo-keypoints:not(#sc-rhythm) > section.counts { padding: clamp(1.75rem, 4vw, 3.25rem) !important; }
/* PPC ad formats: legacy colours the chevron itself (--lg-ink), so on a light band it stayed
dark on the gradient hover; follow the button colour instead */
main .v3-light .owl-controls .owl-buttons :is(.owl-prev, .owl-next)::after { color: inherit; }
/* PPC why-us: the black drop shadow reads as a grey smudge on off-white */
.v3-light .sc-reasons-media > img { filter: drop-shadow(0 26px 36px rgba(17,18,27,.18)); }
/* band rhythm: bands pad themselves, so inner legacy padding/margins would double the gap */
main > .custom-blogs:is(.v3-light, .v3-dark) > .container-fluid > .container { padding-block: 0 !important; }
main > .india-services:is(.v3-light, .v3-dark) > .container > .row:first-child { margin-top: 0; }
.sc-zig > .container > .row:last-child:not(:first-child) { margin-bottom: 0 !important; }
/* ----------------------------------------------------------------------------
PERF (additive, keep at the end): hero images are wrapped in
so browsers get the .webp sibling.
display:contents keeps the layout, but "> img" child selectors no longer reach
the ![]()
, so the hero-image rules above are mirrored for "> picture > img".
-------------------------------------------------------------------------- */
.sc-hero-media > picture > img {
position: relative; z-index: 1; width: auto !important; max-width: 92% !important; max-height: 470px; height: auto;
object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); mix-blend-mode: normal !important;
}
.seo_video .sc-hero-media > picture > img { max-width: 104% !important; max-height: none; }
@media (max-width: 991.98px) { .sc-hero-media > picture > img { max-height: 380px; } }
@media (max-width: 575.98px) { .seo_video .sc-hero-media > picture > img { max-width: 100% !important; } }
.sc-hero:not(.seo_video):not(.ppc-hero) .sc-hero-media > picture > img { margin-bottom: 0 !important; }
.solutions.sc-hero .sc-hero-media > picture > img { margin-bottom: 6% !important; }
.sc-media-col > picture > img { max-height: 440px; width: auto !important; max-width: 100%; object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 26px 36px rgba(0,0,0,.45)); }
.social-media .img-box > picture > img { position: relative; z-index: 1; max-width: 100%; border-radius: 0 !important; }
.social-media .img-box > picture > img { width: 100% !important; }