, so it was left dark on green. */
.service-inner-section-area .service3-single-boxarea:hover .content .sf-card-title {
color: var(--ztc-text-text-1);
transition: all 0.4s;
}
/* Equal-height promise cards. The vendor card is height:auto, so a longer
paragraph left its neighbours short and the row looked ragged. */
.sf-service-grid > [class*='col-'] {
display: flex;
}
.sf-service-grid .service3-single-boxarea {
display: flex;
flex-direction: column;
width: 100%;
}
.sf-service-grid .service3-single-boxarea .icons {
flex: 0 0 auto;
}
/* The vendor card already carries margin-bottom:30px and sp1 adds another
100px under it — 130px of dead space below the last row. Trim the section
padding by the card's own margin so the visual gap comes out at 100px. */
.service-inner-section-area.sf-service-section {
padding-bottom: 70px;
}
@media (max-width: 767px) {
.service-inner-section-area.sf-service-section {
padding-bottom: 20px;
}
}
/* --------------------------------------------------------------------------
Contact page — the three phone / email / address boxes.
The address runs to three lines while the phone number runs to one, so the
boxes came out at three different heights. Equalise them, keeping the
icon/label header at a fixed top so the three headers line up and only the
detail below absorbs the extra height.
-------------------------------------------------------------------------- */
.sf-contact-grid > [class*='col-'] {
display: flex;
margin-bottom: 30px;
}
.sf-contact-grid .contact-bottom-box {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.sf-contact-grid .contact-bottom-box .contact-box {
flex: 0 0 auto;
}
.sf-contact-grid .contact-bottom-box .call {
flex: 1 0 auto;
}
/* Plain-language disclaimer block at the foot of the services page. */
.sf-note {
background: var(--sf-neutral-tint);
border-left: 4px solid var(--ztc-text-text-2);
border-radius: 6px;
padding: 24px 28px;
}
.sf-note p {
margin: 0;
}
/* --------------------------------------------------------------------------
About page — "How We Work" steps.
main.css only styles .history-boxarea under
`.history1-scetion-area .history-single-slider`, which is a carousel we do
not use. In a plain Bootstrap row the steps inherited nothing: unstyled
numerals, an invisible connector dot, ragged heights. This restates the
vendor's own type scale for a static grid and adds the rule that joins the
four steps into a sequence.
-------------------------------------------------------------------------- */
.sf-steps-grid > [class*='col-'] {
display: flex;
margin-bottom: 30px;
}
.sf-steps-grid .history-boxarea {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
padding-right: 24px;
/* So the connector rule below can be measured against this card's width
rather than the viewport. */
container-type: inline-size;
}
.sf-steps-grid .history-boxarea h2 {
margin: 0;
color: var(--ztc-text-text-2);
font-family: var(--ztc-family-font1);
font-size: 44px;
font-weight: 600;
line-height: 44px;
}
/* The dot, plus the rule running from it to the next step. The rule is drawn
with ::after so it can overflow the box; it is suppressed on the last card
and whenever the columns stack. */
.sf-steps-grid .history-boxarea .dot {
position: relative;
display: inline-block;
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--ztc-bg-bg-3);
}
/* The rule has to stop at the next dot, not run to the edge of the window. One
dot to the next is this card's width plus the two 15px column gutters; take
off the 16px dot the rule starts from and 14px is what is left over. 100cqw
is the card's own width — 100vw ran the rule across every card to its right
and off the page. */
.sf-steps-grid .history-boxarea .dot::after {
position: absolute;
content: "";
top: 50%;
left: 100%;
height: 1px;
width: calc(100cqw + 14px);
background: rgba(11, 42, 42, 0.15);
}
.sf-steps-grid > [class*='col-']:last-child .history-boxarea .dot::after {
display: none;
}
@media (max-width: 991px) {
.sf-steps-grid .history-boxarea .dot::after {
display: none;
}
}
.sf-steps-grid .history-boxarea .step-title {
display: block;
color: var(--ztc-text-text-2);
font-family: var(--ztc-family-font1);
font-size: 22px;
font-weight: 600;
line-height: 1.35;
}
.sf-steps-grid .history-boxarea p {
margin: 0;
color: var(--ztc-text-text-3);
font-family: var(--ztc-family-font1);
font-size: 16px;
line-height: 26px;
}
/* --------------------------------------------------------------------------
About page — "Life Protection" gallery.
Same problem as the steps above: .team-boxarea is only styled inside
.team1-section-area. Without it the images render at their natural size, so
six differently-proportioned photos made a ragged grid.
-------------------------------------------------------------------------- */
.sf-gallery-grid .team-boxarea {
position: relative;
z-index: 1;
overflow: hidden;
}
.sf-gallery-grid .team-boxarea .img1 {
position: relative;
z-index: 1;
overflow: hidden;
border-radius: 8px;
}
/* The card image is wrapped in a lightbox link. Without display:block the
anchor stays inline and leaves a descender gap under the photo. */
.sf-service-figure .sf-lightbox,
.sf-gallery-grid .team-boxarea .img1 .sf-lightbox {
display: block;
cursor: zoom-in;
}
/* .sf-service-figure is a fixed aspect-ratio box, so the link inside it has to
fill that box rather than shrink to the image — otherwise the photo escapes
the rounded corners on the way out. */
.sf-service-figure .sf-lightbox {
height: 100%;
}
.sf-service-figure .sf-lightbox img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sf-gallery-grid .team-boxarea .img1 img {
display: block;
height: 280px;
width: 100%;
object-fit: cover;
border-radius: 8px;
transition: all 0.4s;
}
.sf-gallery-grid .team-boxarea:hover .img1 img {
transform: scale(1.06);
transition: all 0.4s;
}
.sf-gallery-grid .team-boxarea .content-area {
text-align: center;
}
.sf-gallery-grid .team-boxarea .content-area span {
display: inline-block;
color: var(--ztc-text-text-2);
font-family: var(--ztc-family-font1);
font-size: 22px;
font-weight: 600;
line-height: 22px;
}
.sf-gallery-grid .team-boxarea .content-area p {
margin: 0;
color: var(--ztc-text-text-3);
font-family: var(--ztc-family-font1);
font-size: 16px;
line-height: 16px;
}
/* --------------------------------------------------------------------------
FAQ section on the combined Client Stories & FAQ page.
-------------------------------------------------------------------------- */
.sf-faq .accordion-item {
background: #fff;
border: 1px solid var(--sf-neutral-line);
border-radius: 8px;
margin-bottom: 16px;
}
.sf-faq .accordion-button {
background: #fff;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
padding: 20px 24px;
}
.sf-faq .accordion-button:not(.collapsed) {
background: var(--sf-neutral-tint);
box-shadow: none;
}
.sf-faq .accordion-button:focus {
box-shadow: none;
outline: 2px solid var(--ztc-text-text-2);
outline-offset: -2px;
}
.sf-faq .accordion-body {
color: var(--sf-neutral-text);
font-size: 16px;
line-height: 1.75;
padding: 0 24px 22px;
}
/* --------------------------------------------------------------------------
Footer corrections to the vendor layout.
The template's logo rule is `height:36px; width:164px; object-fit:cover`,
sized for its own 4.5:1 wordmark. Ours is 347x101 (3.4:1), so cover crops
the top and bottom off it — constrain by height instead. Kept at the same
70px as the header logo so the mark is one size across the site.
-------------------------------------------------------------------------- */
.vl-footer1-section-area .footer-logo1 img {
height: auto;
width: auto;
max-height: 70px;
max-width: 100%;
object-fit: contain;
}
@media (max-width: 767px) {
.vl-footer1-section-area .footer-logo1 img {
max-height: 46px;
}
}
/* The contact list carries an icon plus text that wraps (our address is far
longer than the template's). Inline images leave the wrapped lines running
back under the icon, and the 16px line-height closes the gap up. */
.vl-footer-widget .footer-contact li a {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 24px;
}
.vl-footer-widget .footer-contact li a img {
flex: 0 0 auto;
margin: 4px 0 0;
}
/* Homepage "what you get" band: one photo per feature, stacked in the same
grid cell so the box keeps a stable height while site.js cross-fades
between them as the slider moves. */
.sf-feature-images .img1 {
display: grid;
}
.sf-feature-images .sf-feature-image {
grid-area: 1 / 1;
opacity: 0;
transition: opacity 0.5s ease;
}
.sf-feature-images .sf-feature-image.is-active {
opacity: 1;
}
/* About page collage: the narrow right-hand column was drawn for a portrait
photo. Our library is mostly landscape, so crop to the same 560:760 shape
rather than letting a wide image sit short beside the family photo. */
.sf-about-portrait img {
width: 100%;
aspect-ratio: 560 / 760;
object-fit: cover;
border-radius: 8px;
}
@media (max-width: 991px) {
.sf-about-portrait img {
aspect-ratio: 16 / 9;
}
}
/* The subject of couple-planning-home.webp sits right of centre, so a centred
crop would cut him in half. */
.sf-about-portrait img {
object-position: 62% center;
}
/* Homepage services carousel: the cards were coming out different heights
because the photos are not all the same shape — Home Insurance reuses the
1920x900 banner image while the rest are 900x630. Crop every card photo to
the same ratio, and let the owl stage stretch its items so the cards line up
even if a title ever wraps to two lines. */
.service1-section-area .service-single-slider .service-boxarea .img1 img {
width: 100%;
aspect-ratio: 900 / 630;
object-fit: cover;
}
.service1-section-area .service-single-slider .owl-stage {
display: flex;
}
.service1-section-area .service-single-slider .owl-item {
display: flex;
height: auto;
}
.service1-section-area .service-single-slider .owl-item .service-boxarea {
width: 100%;
}
/* --------------------------------------------------------------------------
Mobile: justify body copy.
On a phone the measure is short enough that ragged-right paragraphs look
uneven against the card and section edges. Justify running text only —
headings, buttons, nav, form controls, list items and the small meta lines
(copyright, contact rows, counters) keep their own alignment.
Hyphenation is deliberately OFF (`hyphens: manual`). Auto-hyphenation does
close the gaps justification opens on a narrow measure, but it split words
mid-syllable on nearly every line ("of-fice", "else-where"), which reads as
a rendering fault. Wider word spacing is the lesser evil.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
p,
.sf-prose {
text-align: justify;
text-justify: inter-word;
hyphens: manual;
}
/* Keep these centred / left as designed. `.heading1 p` / `.heading2 p` are
intro paragraphs — running text, so they justify with everything else;
the centred variants are caught by `.text-center p` above. */
.text-center p,
.btn,
.btn p,
.cta1-section-area p,
.footer-widget p.copyright,
.copyright p,
.breadcrumb p,
form p,
.form-group p,
.error p,
.counter-area p,
.rating p,
blockquote p {
text-align: inherit;
hyphens: manual;
}
}
/* --------------------------------------------------------------------------
Mobile off-canvas menu.
The vendor panel was built for the template's own wordmark and a menu with
dropdowns; ours is a wider logo and five flat links, which left it with an
oversized logo, a 90px hole under it, and no indication of the current page.
-------------------------------------------------------------------------- */
/* Sit above the sticky header (z-index 99 in main.css, same as the panel) so
the header never bleeds through the open panel on a slow transition. */
.vl-offcanvas {
z-index: 999;
padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
/* Tie the panel to the viewport, not to 100% of a resizing document, so the
mobile browser's collapsing address bar cannot clip the bottom. */
height: 100dvh;
}
.vl-offcanvas-overlay {
z-index: 998;
}
/* The vendor rule sizes the wrapper div, not the image, so our 347x101 logo
rendered at its natural width. */
.vl-offcanvas .vl-offcanvas-logo {
height: auto;
width: auto;
}
.vl-offcanvas .vl-offcanvas-logo img {
height: 40px;
width: auto;
max-width: 200px;
object-fit: contain;
}
/* mb-90 is a utility on the markup and beats the vendor's own responsive
override, so the 90px gap survived on phones. */
.vl-offcanvas .vl-offcanvas-header.mb-90 {
margin-bottom: 32px;
}
.vl-offcanvas .vl-offcanvas-menu.mb-40 {
margin-bottom: 24px;
}
/* Close button: 24px glyph in a 44px target, the minimum comfortable tap. */
.vl-offcanvas .vl-offcanvas-close button {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-right: -10px;
font-size: 24px;
cursor: pointer;
}
/* Links were 8px of padding on an 18px line — roughly 37px tall. */
.vl-offcanvas-menu ul li a {
padding: 11px 0;
font-size: 20px;
}
.vl-offcanvas-menu ul li + li {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* The vendor active state repeats the same white, so the current page was
indistinguishable. Use the bright accent instead. */
.vl-offcanvas-menu ul li.active > a,
.vl-offcanvas-menu ul li a:hover,
.vl-offcanvas-menu ul li a:focus-visible {
color: var(--ztc-bg-bg-5);
}
/* Contact block: fixed-width icons so the three lines align, and enough room
between rows that each address line is a comfortable tap target. */
.vl-offcanvas-info span a {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
line-height: 1.5;
}
.vl-offcanvas-info span a i {
flex: 0 0 18px;
margin: 4px 0 0;
text-align: center;
}
/* Keyboard focus is invisible on a dark panel without this. */
.vl-offcanvas a:focus-visible,
.vl-offcanvas button:focus-visible,
.vl-offcanvas-toggle:focus-visible {
outline: 2px solid var(--ztc-bg-bg-5);
outline-offset: 3px;
}
/* Give the hamburger the same 44px target as the close button. */
.vl-header-action-item .vl-offcanvas-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
cursor: pointer;
}
/* On phones the vendor box (44px target + 6px padding + border) came out
nearly 60px tall and towered over the logo beside it. Shrink the button
only — the logo keeps its size. 40px stays a comfortable tap target. */
@media (max-width: 767px) {
.vl-header-action-item {
padding: 2px;
}
.vl-header-action-item .vl-offcanvas-toggle {
width: 36px;
height: 36px;
}
.vl-header-action-item button {
font-size: 18px;
}
}
/* Freeze the page behind the panel — without this the document scrolls under
the overlay on iOS while the menu is open. */
body.sf-offcanvas-open {
overflow: hidden;
}
/* --------------------------------------------------------------------------
Mobile section headings: use the full width.
The vendor sets `display: inline-block` on section h2s, so they shrink to
fit their text rather than to their column. Combined with the word-span
markup the text-anime script injects, that made headings break a word or
two early and sit in a narrow block with dead space beside them. Below the
lg breakpoint the heading column is already 100% wide, so let the heading
itself fill it. Only the h2 — SplitText wraps each word in its own div, so
width rules must never reach the children or every word becomes a line.
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
.heading1 h2,
.heading2 h2 {
display: block;
width: 100%;
max-width: 100%;
}
}
/* --------------------------------------------------------------------------
Phones: left-align the centred section headings.
Several sections centre their heading block (`heading1 text-center`) inside
a half-width column. That reads well on a wide screen, but on a phone the
column is full width and a centred two- or three-line heading gives every
line a different ragged start, which fights the left-aligned body copy and
cards below it. Pull them back to the left edge, and let their intro
paragraph justify with the rest of the running text.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.heading1.text-center,
.heading2.text-center {
text-align: left !important; /* .text-center is a Bootstrap !important utility. */
}
.heading1.text-center p,
.heading2.text-center p {
text-align: justify;
text-justify: inter-word;
hyphens: manual;
}
}
/* --------------------------------------------------------------------------
Phones: justify the tick-list body copy too.
The justify rule above only covers and .sf-prose. The check-marked
lists — case study cards, the about founder block, the services points —
are full sentences of running text and read as ragged islands next to
justified paragraphs. The text sits in its own span beside the tick, so
justify that span rather than the
, which is a flex row.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* The tick floats on phones and the text span is inline, so justification
has to sit on the block itself. */
.sf-case-card__list li,
.heading1 ul li {
text-align: justify;
text-justify: inter-word;
hyphens: manual;
}
}
/* --------------------------------------------------------------------------
Footer column rhythm below lg.
The template spaced its footer columns with `space30` divs placed *above*
each widget. Once Quick Links and What We Cover pair up on a phone, a top
spacer on only one of them drops that column relative to its neighbour, so
the headings no longer line up. The spacers are gone; the gap is a bottom
margin on the column instead, which every column in a row shares.
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
.vl-footer1-section-area > .container > .row > [class*="col-"] {
margin-bottom: 40px;
}
.vl-footer1-section-area > .container > .row > [class*="col-"]:last-child {
margin-bottom: 0;
}
}
/* --------------------------------------------------------------------------
CTA band on phones: tighter, and the buttons centred.
The 32px spacer plus the heading's 40px line box left a hole between the
headline and the buttons. The pair also sat hard against the left edge with
a stacked 20px top margin on the second button; a centred flex row with a
real gap handles both the side-by-side and the wrapped case.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.cta1-section-area .cta-header .space32 {
/* 16px read as cramped against the two-line headline; 28px is enough air
without reopening the hole the vendor's 32px left. */
height: 28px;
}
/* Headline centred to match the centred button row below it. Also needs a
full-width block: the vendor h2 is inline-block, which would centre only
the text inside a shrink-wrapped box. */
.cta1-section-area .cta-header h2 {
display: block;
width: 100%;
text-align: center;
}
.cta1-section-area .cta-header .btn-area1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
/* Vendor spacing between the two buttons — the flex gap replaces it. */
.cta1-section-area .cta-header .btn-area1 .vl-btn1.btn2 {
margin-left: 0;
margin-top: 0;
}
}
/* --------------------------------------------------------------------------
Buttons: drop the decorative disc.
Every .vl-btn1 carried a 36px circle as its ::before, sitting behind the
label at the left. On the template's olive palette it read as a subtle
texture; in our blue it reads as a stray bubble behind the first word or a
half-drawn icon slot. Removed sitewide.
`display: none` beats the many per-section ::before overrides in main.css
without having to match their specificity — none of them set `display`, so
this wins that property outright. (Those overrides, and the brand-colour
ones near the top of this file, are now inert but harmless.)
-------------------------------------------------------------------------- */
.vl-btn1::before,
.vl-btn1:hover::before,
.vl-btn4::before,
.vl-btn4:hover::before {
display: none;
}
/* --------------------------------------------------------------------------
About page steps on phones: number and title share a line.
Stacked, each step spent three rows on "01", a lone dot and two words, so
four steps ran on for most of a screen. On a phone the card becomes a small
grid — number in the left column, title beside it, description across both.
The connecting dot goes: its rule is already suppressed below 992px, which
left it as an unexplained bullet floating between the two.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.sf-steps-grid > [class*='col-'] {
margin-bottom: 24px;
}
.sf-steps-grid .history-boxarea {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 14px;
row-gap: 8px;
align-items: center;
padding-right: 0;
}
/* The spacer divs between the parts are what stacked them apart; the grid
gaps replace them. */
.sf-steps-grid .history-boxarea > div[class*='space'],
.sf-steps-grid .history-boxarea .dot {
display: none;
}
.sf-steps-grid .history-boxarea h2 {
grid-column: 1;
grid-row: 1;
font-size: 34px;
line-height: 1;
}
.sf-steps-grid .history-boxarea .step-title {
grid-column: 2;
grid-row: 1;
font-size: 20px;
}
.sf-steps-grid .history-boxarea p {
grid-column: 1 / -1;
grid-row: 2;
}
}
/* --------------------------------------------------------------------------
Gallery cards on phones: title only.
The category line under each caption ("Life & Health", "Investment") is a
grouping cue that only pays off when several cards sit side by side. Stacked
one per screen there is nothing to group, so it is just a second line of
type competing with the caption. Hidden below 768px — the text stays in the
markup for screen readers and for the wider layouts.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.sf-gallery-grid .team-boxarea .content-area p,
.sf-gallery-grid .team-boxarea .content-area .space8 {
display: none;
}
}
/* --------------------------------------------------------------------------
Footer link lists on phones: tighter rhythm.
The template spaces footer links with a 24px padding-top on each anchor,
which on a full-height desktop column reads as generous. On a phone it
stretches four links over most of a screen. Halve it, but keep the rows
around 34px tall so each link is still a comfortable tap target, and give
the first link a little more so it does not crowd its heading.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.vl-footer1-section-area .vl-footer-widget ul li a {
padding-top: 12px;
line-height: 22px;
}
.vl-footer1-section-area .vl-footer-widget ul li:first-child a {
padding-top: 16px;
}
}
/* --------------------------------------------------------------------------
Gallery cards on phones: bind the caption to its own photo.
Stacked one per row, the 24px gap inside a card and the 30px gap between
cards were near enough identical, so a caption floated equidistant between
the photo above it and the photo below — you could not tell which it
belonged to. Proximity does the grouping: pull the caption up under its
photo and push the next card further away.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.sf-gallery-grid .team-boxarea > .space24 {
height: 10px;
}
.sf-gallery-grid > [class*='col-'] > .space30 {
height: 48px;
}
}
/* --------------------------------------------------------------------------
Copyright line and its credit.
The credit sits inside the same paragraph so it inherits the centring and
the top border, but it gets its own line and a lighter weight — it is an
attribution, not part of the copyright statement.
-------------------------------------------------------------------------- */
.vl-footer1-section-area .vl-copyright-area p .sf-credit {
display: block;
margin-top: 6px;
font-size: 14px;
opacity: 0.75;
}
.vl-footer1-section-area .vl-copyright-area p .sf-credit a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.vl-footer1-section-area .vl-copyright-area p .sf-credit a:hover {
color: var(--ztc-text-text-4);
}
/* The template sets this line at 18px, which on a phone wraps to two lines and
reads louder than the links above it. */
@media (max-width: 767px) {
.vl-footer1-section-area .vl-copyright-area p {
font-size: 14px;
line-height: 20px;
padding: 20px 0 24px;
}
.vl-footer1-section-area .vl-copyright-area p .sf-credit {
font-size: 12px;
}
}
/* --------------------------------------------------------------------------
Back-to-top dial on phones.
At the template's 56px it lands on top of the copyright text at the bottom
of the page. 44px still clears the minimum tap target.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.progress-wrap {
right: 20px;
bottom: 20px;
height: 44px;
width: 44px;
}
.progress-wrap::after,
.progress-wrap::before {
height: 44px;
width: 44px;
line-height: 44px;
font-size: 15px;
}
}
/* About page image collage: on phones the third photo (couple-planning-home)
stacks into a full-width block and just pads the scroll, so drop it and keep
the family shot and the growth chart. */
@media (max-width: 767px) {
.sf-about-hide-mobile {
display: none;
}
}
/* Per-service detail heading: icon always beside the title, every width.
Sits before the phone rule below so the shared block still applies there. */
.heading1 > .sf-icon-head {
display: flex;
align-items: center;
gap: 16px;
}
.heading1 > .sf-icon-head > [class^='space'] {
display: none;
}
.heading1 > .sf-icon-head > .icons {
flex: 0 0 auto;
}
/* The mobile rule further down sets `width: 100%` on .heading1 h2; as a flex
item that would squeeze the icon out, so pin it to the free space instead. */
.heading1 > .sf-icon-head > h2 {
margin: 0;
flex: 1 1 auto;
width: auto;
min-width: 0;
}
/* Icon beside the heading on phones.
The vendor stacks the service icon above the title, which on a narrow screen
wastes a whole row on a 40px glyph. Below 768px the wrapper becomes a flex
row and the vendor spacer div between them is dropped in favour of a gap.
On larger screens .sf-icon-head is an ordinary block, so desktop is
untouched. */
@media (max-width: 767px) {
.sf-icon-head {
display: flex;
align-items: center;
gap: 14px;
}
.sf-icon-head > [class^='space'] {
display: none;
}
.sf-icon-head > .icons {
flex: 0 0 auto;
}
.sf-icon-head > h2,
.sf-icon-head > a {
margin: 0;
}
}
/* Marker highlight. The browser default is a hard yellow that clashes
with the brand palette, so use a soft brand-cyan wash with the body text
colour left intact. The tiny negative inline margin plus padding lets the
band breathe without shifting the line box. */
.sf-mark {
background: rgba(var(--sf-logo-cyan-rgb), 0.28);
color: inherit;
padding: 0.1em 0.15em;
margin: 0 -0.05em;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
Case-study cards on phones: no dead column under the tick.
The list item is a two-column flex row — tick, then text. On a narrow card
the text runs to five or six lines while the tick occupies only the first,
leaving an empty 34px strip down the left of the rest. Floating the tick
instead lets the second line onwards run back under it, so the block reads
as one paragraph with a marker rather than a table with a hole in it.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.sf-case-card__list li {
display: block;
}
.sf-case-card__tick {
float: left;
margin: 3px 10px 0 0;
}
/* Clear the float so the next item's tick starts on its own line. */
.sf-case-card__list li::after {
content: '';
display: block;
clear: both;
}
}
/* --------------------------------------------------------------------------
Contact detail boxes: close the gaps.
The vendor stacks a 32px spacer div on top of the divider and another 32px
of padding under it, so 64px of nothing separated "Call Us Today" from the
number. And .call is a flex-grow item (that is what equalises the three
boxes side by side), which on a phone — where they stack and there is
nothing to equalise — just left a pool of empty space under the number.
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
.contact-inner-area .contact-bottom-box {
padding: 24px;
}
.sf-contact-grid .contact-bottom-box .space32 {
height: 16px;
}
.contact-inner-area .contact-bottom-box .call {
padding-top: 18px;
}
.contact-inner-area .contact-bottom-box .contact-box .icons {
height: 64px;
width: 64px;
line-height: 64px;
}
}
/* Below lg the boxes are stacked (or paired, where the address box is much
taller than the phone one), so equalising their heights buys nothing and
only leaves the shorter boxes padded out with empty space. Let each box end
where its content ends; the equal-height rules stay for desktop. */
@media (max-width: 991px) {
.sf-contact-grid > [class*='col-'] {
display: block;
/* The vendor box already carries margin-bottom: 30px; the column's own
margin was only there to space the flex items. */
margin-bottom: 0;
}
.sf-contact-grid .contact-bottom-box {
height: auto;
}
.sf-contact-grid .contact-bottom-box .call {
flex: 0 0 auto;
}
}
/* Desktop footer links: the vendor's 24px padding-top on a 16px line box
spread four links down most of the column. 14px keeps them clearly
separated rows without the list looking double-spaced. The phone rule
further up already handles small screens. */
@media (min-width: 768px) {
.vl-footer1-section-area .vl-footer-widget ul li a {
padding-top: 14px;
line-height: 20px;
}
}
/* --------------------------------------------------------------------------
Client success stories carousel (homepage and Stories & FAQ).
Owl lays its stage out with floats, so slides in a row are only as tall as
their own content and two cards side by side come out ragged. Making the
stage a flex row restores the equal-height behaviour the grid version had.
-------------------------------------------------------------------------- */
.sf-case-slider .owl-stage {
display: flex;
}
.sf-case-slider .owl-item {
display: flex;
height: auto;
}
.sf-case-slide {
display: flex;
width: 100%;
padding-bottom: 4px; /* room for the card's hover lift */
}
/* Nav arrows and dots, in the section's own palette — Owl ships them grey on
grey, which is invisible on this dark band. */
.sf-case-slider .owl-nav {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 32px;
}
.sf-case-slider .owl-nav button.owl-prev,
.sf-case-slider .owl-nav button.owl-next {
height: 44px;
width: 44px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
color: #fff;
font-size: 16px;
transition: all 0.3s;
}
.sf-case-slider .owl-nav button.owl-prev:hover,
.sf-case-slider .owl-nav button.owl-next:hover {
background: var(--ztc-text-text-6);
border-color: var(--ztc-text-text-6);
color: var(--ztc-text-text-2);
}
.sf-case-slider .owl-nav button.disabled {
opacity: 0.35;
cursor: default;
}
.sf-case-slider .owl-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.sf-case-slider .owl-dots button.owl-dot span {
display: block;
height: 8px;
width: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transition: all 0.3s;
}
.sf-case-slider .owl-dots button.owl-dot.active span {
width: 24px;
border-radius: 4px;
background: var(--ztc-text-text-6);
}
/* ---------------------------------------------------------------------------
Inner page h1
The breadcrumb banner heading is the h1 on every page except the homepage.
The vendor template shipped it as an h2 and only styles `.inner-header h2`,
so these rules mirror that block exactly for the h1. Do not "simplify" this
by editing main.css — that file stays as the vendor shipped it.
--------------------------------------------------------------------------- */
.inner-pages-section-area .inner-header h1 {
color: var(--ztc-text-text-2);
font-family: var(--ztc-family-font1);
font-size: var(--ztc-font-size-font-s60);
font-style: normal;
font-weight: var(--ztc-weight-semibold);
line-height: 66px;
text-transform: capitalize;
}
@media (max-width: 767px) {
.inner-pages-section-area .inner-header h1 {
font-size: var(--ztc-font-size-font-s40);
line-height: 50px;
}
}