wrapping the icon + label + number
so a tap anywhere on it lands the user on the contact form. */
a.call-pill {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
a.call-pill:hover .contact-hear-icon { background: #d57000; }
a.call-pill:hover .call-info .call-number { color: #fff; }
.mobile-contact-header {
display: none;
}
/*-----------------------[ 8.Main Slider Section CSS ]------------------------*/
.hero-slider-section {
position: relative;
}
.hero-slider-section {
position: relative;
height: 935px;
overflow: hidden;
z-index: 1;
}
.hero-slider-container {
height: 100%;
}
.hero-slide {
position: relative;
height: 100%;
}
.slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.slide-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 100px 0;
max-width: 850px;
margin: 0 auto;
}
.slide-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(9, 18, 23, 0.8), rgba(9, 18, 23, 0.8));
}
.slider-main,
.slick-list,
.slick-track {
height: 100%;
}
.slide-content {
opacity: 0;
transform: translateY(50px);
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.slide-content .provide {
transition-delay: 0.2s;
}
.slide-content .quality {
transition-delay: 0.3s;
}
.slide-content .residents {
transition-delay: 0.5s;
}
.slide-content .btn-cutomer-main {
transition-delay: 0.7s;
}
.slick-active .slide-content,
.slick-active .slide-content .provide,
.slick-active .slide-content .quality,
.slick-active .slide-content .residents,
.slick-active .slide-content .btn-cutomer-main {
opacity: 1;
transform: translateY(0);
}
.sec-one-slider-btn {
width: 80px;
height: 80px;
background: #FFF;
border: 0 none;
text-align: center;
color: #FFF;
/* Sit above the fading hero slides (slick gives them z-index 998–1000) AND above the
stats bar, which is pulled up over the hero bottom and was masking these arrows. */
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .25s ease;
}
.sec-one-slider-btn:hover {
background: linear-gradient(135deg, #FE8500 0%, #d57000 100%);
}
.NextArrow {
position: absolute;
bottom: 0;
right: 325px;
}
/* Box size is locked at 36x36 regardless of which arrow asset is
showing, so the hover state doesn't visually shrink the icon. Using
background-image (not content:url) means the SVG renders at the box
dimensions, not its intrinsic size — the two assets ship at slightly
different viewBoxes which is what caused the size shift before. */
.NextArrow:before,
.PrevArrow:before {
content: "";
display: inline-block;
width: 36px;
height: 36px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.NextArrow:before { background-image: url('../assets/images/svg/right-arrow.svg'); }
.PrevArrow:before { background-image: url('../assets/images/svg/left-arrow.svg'); }
.PrevArrow {
position: absolute;
bottom: 0;
right: 415px;
}
/* On hover, swap to the white-arrow asset shipped in the theme. */
.NextArrow:hover:before { background-image: url('../assets/images/svg/right-white-arrow.svg'); }
.PrevArrow:hover:before { background-image: url('../assets/images/svg/left-white-arrow.svg'); }
.provide {
color: var(--5, #FFF);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: 1.8px;
text-transform: uppercase;
padding-bottom: 10px;
}
.quality {
color: var(--5, #FFF);
font-size: 80px;
font-weight: 700;
line-height: 100px;
text-transform: uppercase;
text-align: center;
}
.residents {
color: var(--5, #FFF);
font-size: 24px;
font-weight: 400;
line-height: 36px;
margin-top: 20px;
text-align: center;
max-width: 820px;
}
.btn-cutomer-main {
display: flex;
align-items: center;
margin-top: 65px;
gap: 80px;
}
.cutomer-img-main {
position: relative;
}
.cutome2 {
position: absolute;
left: 50px;
top: 0;
}
.cutome3 {
position: absolute;
left: 100px;
top: 0;
}
.cutomer-img-main-text {
display: flex;
align-items: center;
gap: 120px;
justify-content: center;
margin-top: 60px;
}
.cutomer-img-main img {
width: 64px;
height: 64px;
border-radius: 50%;
}
/* Google Maps reviews badge (replaces the old triple customer avatars) */
.google-maps-main { position: relative; display: inline-flex; }
.google-reviews-badge { display: inline-flex; transition: transform .15s ease; }
.google-reviews-badge:hover { transform: translateY(-2px); }
.cutomer-img-main .google-maps-logo { width: 54px; height: auto; border-radius: 0; }
.cutomers-text-main .gr-rating { font-weight: 700; margin-right: 8px; }
.cutomers-text-main .gr-stars { color: #FBBC04; letter-spacing: 1px; margin-right: 6px; }
.cutomers-text-main h2 {
color: #000000;
font-size: 24px;
font-weight: 500;
line-height: 36px;
}
.cutomers-text-main p {
color: #000000;
font-size: 18px;
font-weight: 500;
line-height: 24px;
display: flex;
align-items: center;
gap: 10px;
}
.cutomers-text-main p::before {
content: url(../assets/images/svg/star.svg);
}
/*-----------------------[ 9.Section Two CSS ]------------------------*/
.image-Photo {
max-width: 100%;
}
.timate-box-main-head {
display: flex;
align-items: center;
gap: 50px;
width: 100%;
max-width: 975px;
background: #F5F6F7;
/* was -110px, which pulled this bar up OVER the hero's bottom-right and masked the hero
slider arrows. The overlap was already documented as one that should be removed
(margin-top:0); doing so lets the arrows stay put at the hero's bottom and stay clickable. */
margin-top: 0;
z-index: 10;
/* Now lives in its own .section-stats block (split from the about content).
relative (not absolute) so the section reserves its height in flow; the
negative margin still lifts it to overlap the bottom of the hero. */
position: relative;
left: 0;
}
/* Stats counter bar as its own homepage section, with breathing room above
(from the hero) and below (before the About section). The bar's overlap is
intentionally removed via site-custom.css (margin-top:0). */
.section-stats { position: relative; z-index: 2; padding: 45px 0; }
/* About + bullets as its own section. No longer needs the big top padding that
used to clear the absolutely-positioned stats bar above it. */
.section-about { padding-top: 45px; padding-bottom: 0; }
.section-about .about-row { padding-top: 0; padding-bottom: 100px; }
@media (max-width: 767px) {
.section-stats { padding: 30px 0; }
.section-about { padding-top: 30px; }
}
/* Optional per-section image shown ONLY on phones, injected right below the
section heading (About + Why-Choose blocks). Hidden on desktop/tablet. */
.section-mobile-img { display: none; }
@media (max-width: 767px) {
.section-mobile-img {
display: block;
width: 100%;
height: auto;
margin: 16px 0 22px;
border-radius: 8px;
}
}
/* Stats row reveal. It deliberately does NOT use the shared `.fade_up` class:
that one is revealed by a global observer that fires on page load with no
offset, so on tall desktops the row appeared immediately. Instead this row
starts hidden and js/script.js reveals it (adds `.shown-once`) only after the
user scrolls and it reaches ~the middle of the screen — then it stays put. */
.timate-box-main-head.stats-reveal {
opacity: 0;
transform: translateY(-100%);
transition: opacity 1.6s ease, transform 1.6s ease;
/* While hidden it's translated up over the hero; without this it still catches clicks
(opacity:0 doesn't disable hit-testing) and masks the hero slider arrows beneath it. */
pointer-events: none;
}
.timate-box-main-head.shown-once {
opacity: 1 !important;
transform: none !important;
pointer-events: auto;
}
/* Spacer injected by the build between two visible homepage sections when the
section that used to sit between them is hidden — keeps the vertical gap. */
.home-section-gap {
width: 100%;
height: 90px;
}
@media (max-width: 991px) {
.home-section-gap { height: 60px; }
}
@media (max-width: 575px) {
.home-section-gap { height: 40px; }
}
.timate-box-main {
text-align: center;
}
.timate-box-main p {
color: #091217;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
padding-top: 10px;
}
.timate-box-main h2 {
color: var(--13, #091217);
text-align: center;
font-size: 80px;
font-style: normal;
font-weight: 700;
line-height: 100px;
text-transform: uppercase;
}
.timate-box-main h2 sup {
color: var(--14, #FE8500);
font-weight: 400;
}
.aboutText {
color: var(--14, #FE8500);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: 1.8px;
text-transform: uppercase;
}
.about-row {
padding-top: 200px;
padding-bottom: 100px;
}
.business {
color: #091217;
font-size: 48px;
font-weight: 700;
line-height: 64px;
padding-top: 10px;
}
.hardest {
color: #091217;
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
.hardest-space {
padding-top: 30px;
}
.multi-qustions-main {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 30px;
margin-bottom: 60px;
}
.qution-text {
color: #091217;
font-size: 20px;
font-weight: 400;
line-height: 30px;
display: inline-flex;
align-items: center;
padding-bottom: 20px;
}
.qution-text::before {
content: url('../assets/images/svg/check-mark.svg');
width: 36px;
height: 36px;
background-color: #FE8500;
border-radius: 50%;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 8px 15px rgba(254, 133, 0, 0.80);
}
.secTwo-img-main {
display: flex;
align-items: center;
justify-content: flex-end;
}
.secTwo-img-main img {
max-width: 100%;
clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
}
/* Card image height: "Fill the column" (block field `cardImgHeight`) makes the
photo take the column's full height, cover-cropped, instead of sitting at its
natural aspect ratio and leaving dead space. Opt-in per block — the homepage's
About card is composed around its own artwork and must keep natural height.
The vertical label and the CALL US NOW badge are positioned against the
COLUMN, not this box, so they stay put as the image grows. */
.secTwo-img-main--fill {
align-items: stretch;
height: 100%;
}
.secTwo-img-main--fill .secTwo-img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 991px) {
/* Stacked: the column height is the image's own, so "fill" would collapse it. */
.secTwo-img-main--fill {
align-items: center;
height: auto;
}
.secTwo-img-main--fill .secTwo-img { height: auto; }
}
.bluer-roofing {
color: rgb(255 255 255 / 57%);
font-size: 64px;
font-weight: 700;
line-height: 64px;
letter-spacing: 3.2px;
transform: rotate(90deg);
position: absolute;
left: -60px;
top: 230px;
z-index: 1;
}
.card-call-now-main {
background: #091217;
padding: 20px;
position: absolute;
left: 0;
bottom: 40px;
animation: 5s ease 0s normal none infinite running moveLeftRight;
}
@keyframes moveLeftRight {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(10px);
-moz-transform: translateX(10px);
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
}
100% {
transform: translateX(0);
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
}
.card-call-now-main div {
display: flex;
align-items: center;
gap: 10px;
color: var(--5, #FFF);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 30px;
}
.card-call-now-main a {
color: var(--14, #FE8500);
font-size: 30px;
font-weight: 500;
line-height: 30px;
margin-top: 10px;
display: block;
transition: all 0.3s ease-in-out;
}
.card-call-now-main a:hover {
color: #FFF;
}
/*-----------------------[ 10.Section Three CSS ]------------------------*/
.section-three {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../assets/images/home/roofer-man.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
height: 600px;
position: relative;
padding: 100px 0;
}
.latest-code {
color: #FFF;
}
.latest-hardest {
padding-top: 20px;
color: var(--8, #A8A9AD);
max-width: 630px;
}
.benefits-slider .slick-arrow {
width: 48px;
height: 48px;
font-size: 0;
background: #FE8500;
border-radius: 50%;
box-shadow: 0px 8px 15px rgba(254, 133, 0, 0.80);
}
.benefits-slider .slick-prev {
position: absolute;
top: 40px;
right: 60px;
z-index: 5;
}
.benefits-slider .slick-next {
position: absolute;
right: 0;
top: 40px;
}
.benefits-slider .slick-prev::before {
content: url('../assets/images/svg/left-white-arrow.svg');
}
.benefits-slider .slick-next::before {
content: url('../assets/images/svg/right-white-arrow.svg');
}
.fade-down {
animation: fadeDown 0.8s ease forwards;
}
@keyframes fadeDown {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fade-up {
animation: fadeUp 0.8s ease forwards;
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*-----------------------[ 11.Section Four CSS ]------------------------*/
.services-slider-img {
width: 100%;
}
/* The photo is wrapped in a link to the same page as "read more". */
.services-slider-imglink {
display: block;
overflow: hidden;
}
/* Service card photo: square-cropped so the cards line up. Left at natural
height the six shots rendered 406x655 / 406x374 / 406x284 / 406x609 … — a
ragged grid. Two classes: the site's own Edit Site CSS ships
`.container img { max-width:100% }` (0,1,1), which outranks a lone class. */
.services-slider-box .services-slider-img {
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
display: block;
}
.services-slider-box:hover .circle-svg {
background: #FE8500;
}
/* Site-builder services section — reproduces the original layered effect
where the dark BG fills section-three behind the OUR SERVICES header,
and the white service cards sit overlapping the lower half. Header text
and slider cards share the same horizontal padding so they align. */
.section-services-bg {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../assets/images/home/roofer-man.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
padding-top: 100px;
padding-bottom: 100px;
position: relative;
}
.section-services-bg .rakshak-services-header {
max-width: 720px;
padding-left: 15px; /* align with the first .services-slider-box (15px slick margin) */
padding-right: 15px;
margin-bottom: 80px; /* room for the orange ◀ ▶ arrows in the top-right */
position: relative;
}
.section-services-bg .rakshak-services-header .business {
color: #fff;
}
.services-slider.slick-initialized.slick-slider {
margin-top: 0;
position: relative;
}
/* Beat the legacy -220px margin-top at max-width:1199px in media_query.css —
that pull-up was for the source layout where the slider lived below a
separate section-three. Our slider already sits inside the dark section. */
.section-services-bg .services-slider.slick-initialized.slick-slider {
margin-top: 0 !important;
}
.services-slider-box.slick-slide {
margin: 0 15px;
}
/* Orange-circle slick arrows for the services slider — same look as
.benefits-slider's arrows. Positioned in the top-right of the slider
sitting just above the cards. Brought close together (~12px gap) so
they read as a single ◀ ▶ control rather than two stray buttons. */
.services-slider .slick-arrow {
width: 48px;
height: 48px;
font-size: 0;
background: #FE8500;
border-radius: 50%;
border: 0 none;
box-shadow: 0px 8px 15px rgba(254, 133, 0, 0.80);
z-index: 5;
cursor: pointer;
}
.services-slider .slick-prev {
position: absolute;
top: -68px;
right: 75px; /* 48px arrow + 12px gap + 15px slide gutter */
left: auto;
}
.services-slider .slick-next {
position: absolute;
top: -68px;
right: 15px; /* match .services-slider-box gutter */
}
.services-slider .slick-prev::before {
content: url('../assets/images/svg/left-white-arrow.svg');
}
.services-slider .slick-next::before {
content: url('../assets/images/svg/right-white-arrow.svg');
}
.services-slider .slick-arrow:hover {
background: #e07300;
}
.circle-svg {
width: 100px;
height: 100px;
background: #091217;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -55px;
position: relative;
transition: all 0.3s ease-in-out;
}
.circle-svg img {
width: 100%;
max-width: 64px;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
/* Icon sizing + colour. Two classes on purpose — the theme's `max-width:64px`
above is (0,1,1) and so is the site's own `.container img { max-width:100% }`
in site-custom.css, which loads LATER and therefore won. The icons were being
blown up to 100px+, and one rendered 100x144 — overflowing its own 100px
circle. That, plus mismatched viewBoxes (0.70–1.24), is what made them look a
mess: a fixed square box + contain gives every icon the same optical size.
The icons ship orange (#FE8500) and the circle turns orange on hover, so they
used to disappear on hover; forcing white reads on both the dark circle and
the orange one. */
.circle-box-main .circle-svg img {
width: 52px;
height: 52px;
max-width: none;
object-fit: contain;
filter: brightness(0) invert(1);
}
.services-slider-box:hover .circle-svg img {
transform: rotateY(180deg);
}
.circle-box-main {
border-right: 2px solid var(--12, #F5F6F7);
border-bottom: 2px solid var(--12, #F5F6F7);
border-left: 2px solid var(--12, #F5F6F7);
background: var(--5, #FFF);
padding: 0 30px 30px 30px;
}
.circle-box-main h2 {
color: var(--13, #091217);
font-size: 24px;
font-weight: 600;
line-height: 36px;
padding-top: 30px;
}
.circle-box-main p {
color: var(--4, #222);
font-size: 16px;
font-weight: 400;
line-height: 24px;
padding-top: 10px;
}
.read-more-btn {
margin-top: 30px;
}
/*-----------------------[ 12.Section Five CSS ]------------------------*/
.section-five {
padding: 100px 0;
overflow: hidden;
}
.haassle-box {
display: flex;
align-items: center;
gap: 30px;
padding: 15px 0;
border-bottom: 2px solid #F5F6F7;
}
/* Feature icons: the theme's own SVG declares width/height (80×80), but uploaded
SVGs often carry only a viewBox, so an ![]()
would render them at the 300×150
default and blow up the row. Pin every icon to the design's natural 80×80 slot,
preserving aspect ratio, so mixed-source icons stay consistent. */
.haassle-box > img {
width: 80px;
height: 80px;
object-fit: contain;
flex-shrink: 0;
}
.haassle-box-sub h2 {
color: var(--13, #091217);
font-size: 24px;
font-weight: 600;
line-height: 36px;
}
.haassle-box-sub p {
color: var(--4, #222);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.why-choose-img1-main {
display: flex;
align-items: center;
justify-content: end;
}
.why-choose-img1 {
max-width: 100%;
}
.why-choose-img2 {
position: absolute;
right: 0;
bottom: 0;
}
/* The image column isn't positioned, so .why-choose-img2 anchors to the SECTION —
it's sized to overlap img1 and stop just short of the text column. The theme's
own asset is 945px wide, which clears the text by design; a larger upload (ours
are 1600px) sweeps straight across the copy and buries it. Cap it at half the
section so ANY image lands where the design intended.
Two classes deliberately: the site's own Edit Site CSS ships
`.container img { max-width: 100% }` (0,1,1), which outranks a lone
`.why-choose-img2` (0,1,0) and silently undoes the cap.
`.why-choose--overlay .why-choose-img2` below is equal specificity but later,
so the overlay layout still wins on pages that use it. */
.section-five .why-choose-img2 {
max-width: 50%;
height: auto;
}
/* ── Why Choose Us: overlay layout ────────────────────────────────────
Opt-in via the block's "Layout" field (adds .why-choose--overlay). The
images run wide behind the copy and the copy floats over them on a frosted
panel. Scoped to the modifier class ONLY — the plain section-five layout
(e.g. the homepage's, which hides img2) must be left exactly as it was. */
.why-choose--overlay .why-choose-img2 {
/* The theme leaves .why-choose-img1-main unpositioned, so img2 anchors to
the section — which is what lets it sweep across behind the text. Cap it
so an arbitrarily large uploaded photo can't run off the section. */
max-width: 72%;
height: 100%;
object-fit: cover;
bottom: 0;
top: 0;
}
.why-choose--overlay .why-choose-img1 {
position: relative;
z-index: 1;
}
/* The text column moves ahead of the imagery. */
.why-choose--overlay > .container > .row > [class*="col-"]:first-child {
position: relative;
z-index: 2;
}
.why-choose-panel {
position: relative;
padding: 40px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 24px 60px rgba(9, 18, 23, 0.18);
}
/* The rows inside the panel divide on a tint of the text colour rather than the
opaque #F5F6F7 the flat layout uses, which would read as solid banding here. */
.why-choose--overlay .haassle-box {
border-bottom-color: rgba(9, 18, 23, 0.10);
}
/* backdrop-filter is unsupported in Firefox unless layout.css.backdrop-filter
is enabled; fall back to a more opaque panel so the text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.why-choose-panel { background: rgba(255, 255, 255, 0.95); }
}
@media (max-width: 991px) {
/* Stacked: the image sits below the copy, so there's nothing to overlay —
drop the panel back to flat content and let img2 size normally. */
.why-choose-panel {
padding: 0;
border-radius: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0;
box-shadow: none;
}
.why-choose--overlay .why-choose-img2 {
position: static;
max-width: 100%;
height: auto;
}
}
/*-----------------------[ 13.Section Ads ]------------------------*/
.ads-section {
padding: 100px 0;
background: var(--13, #091217);
}
.satistication-container {
display: flex;
align-items: center;
gap: 110px;
}
.satistication {
color: #FFF;
font-weight: 500;
max-width: 770px;
}
.satistication span {
font-weight: 700;
color: #FE8500;
}
.arrrowVector {
position: absolute;
right: -130px;
bottom: -50px;
animation: 3s ease 0s normal none infinite running moveLeftRight;
}
.call-detl {
display: flex;
align-items: center;
gap: 20px;
}
.call-detl .img-main-call {
width: 80px;
height: 80px;
border-radius: 50%;
background: #FE8500;
display: flex;
align-items: center;
justify-content: center;
}
.call-detl .img-main-call img {
width: 48px;
}
.call-detl p {
color: var(--5, #FFF);
font-size: 20px;
font-weight: 500;
line-height: 30px;
padding-bottom: 10px;
}
.call-detl a {
color: var(--14, #FE8500);
font-size: 30px;
font-weight: 500;
line-height: 30px;
transition: all 0.3s ease-in-out;
}
.call-detl a:hover {
color: #FFF;
}
/* ── Redesigned CTA / satisfaction band (cta-band2) ─────────────────
Green panel on the left, a rectangular photo on the right masked to a
curved left edge (so an editor can swap a plain rectangle and still get
the curve), swappable feature icons, and an orange call-now badge. */
.cta-band2 { padding: 60px 0; background: #fff; }
.cta-band2 .ctab2 {
position: relative;
max-width: 1600px;
margin: 0 auto;
min-height: 360px;
background: #163A2B;
border-radius: 18px;
overflow: hidden;
isolation: isolate;
}
.cta-band2 .ctab2-defs { position: absolute; width: 0; height: 0; }
.cta-band2 .ctab2-photo {
position: absolute; top: 0; right: 0; bottom: 0;
width: 62%; z-index: 0;
clip-path: url(#ctabCurve);
-webkit-clip-path: url(#ctabCurve);
}
.cta-band2 .ctab2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-band2 .ctab2-inner {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
gap: 30px; padding: 50px 56px; min-height: 360px;
}
.cta-band2 .ctab2-left { max-width: 640px; }
.cta-band2 .ctab2-title { color: #fff; font-size: clamp(24px, 2.7vw, 36px); font-weight: 700; line-height: 1.16; margin: 0; }
.cta-band2 .ctab2-title span { color: #FE8500; }
.cta-band2 .ctab2-title2 { display: block; color: #fff; }
.cta-band2 .ctab2-rule { display: block; width: 68px; height: 3px; background: #FE8500; border-radius: 2px; margin: 22px 0; }
.cta-band2 .ctab2-text { color: #E7ECE9; font-size: 19px; line-height: 1.5; margin: 0 0 30px; max-width: 440px; }
.cta-band2 .ctab2-text span { color: #FE8500; font-weight: 600; }
.cta-band2 .ctab2-feats { display: flex; flex-wrap: nowrap; gap: 18px; }
.cta-band2 .ctab2-feat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cta-band2 .ctab2-feat-ico { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.cta-band2 .ctab2-feat-lbl { color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.22; max-width: 88px; }
.cta-band2 .ctab2-right { align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.cta-band2 .ctab2-badge {
display: flex; align-items: center; gap: 16px;
background: #FE8500; padding: 16px 30px 16px 20px;
border-radius: 60px; box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.cta-band2 .ctab2-badge-ico {
width: 54px; height: 54px; border-radius: 50%;
background: rgba(255,255,255,.22);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cta-band2 .ctab2-badge-ico img { width: 27px; height: 27px; }
.cta-band2 .ctab2-badge-txt p { margin: 0 0 3px; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #fff; text-transform: uppercase; line-height: 1; }
.cta-band2 .ctab2-badge-txt a { color: #fff; font-size: 27px; font-weight: 800; line-height: 1; transition: color .2s ease-in-out; }
.cta-band2 .ctab2-badge-txt a:hover { color: #163A2B; }
.cta-band2 .ctab2-strip { background: #000; color: #fff; font-size: 15px; font-weight: 600; padding: 9px 24px; border-radius: 8px; }
@media (max-width: 991px) {
.cta-band2 { padding: 40px 0; }
.cta-band2 .ctab2 { border-radius: 12px; }
.cta-band2 .ctab2-photo { position: static; width: 100%; height: 220px; clip-path: none; -webkit-clip-path: none; }
.cta-band2 .ctab2-inner { flex-direction: column; align-items: flex-start; padding: 34px 26px; min-height: 0; }
.cta-band2 .ctab2-feats { flex-wrap: wrap; gap: 18px 26px; }
.cta-band2 .ctab2-right { align-self: stretch; align-items: flex-start; }
}
@media (max-width: 575px) {
.cta-band2 .ctab2-feats { gap: 16px 22px; }
.cta-band2 .ctab2-badge { padding: 13px 22px; }
.cta-band2 .ctab2-badge-txt a { font-size: 22px; }
}
/*-----------------------[ 14.Section Six CSS ]------------------------*/
.section-six {
padding: 100px 0;
}
.tbas-btn-heading-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-bottom: 40px;
}
.tbas-btn-heading-main div {
max-width: 630px;
}
.total-count {
background: #FE8500;
width: 18px;
height: 18px;
color: #FFF;
font-size: 10px;
position: absolute;
top: -18px;
display: flex;
justify-content: center;
align-items: center;
}
.total-count.tab-active {
background: var(--13, #091217);
color: #FFF;
}
.tab-btn-main {
display: flex;
align-items: center;
gap: 20px;
}
.tab-btn {
padding: 10px 20px;
background: var(--12, #F5F6F7);
color: var(--13, #091217);
transition: all 0.3s ease-in-out;
display: block;
}
.tabContainer {
overflow: hidden;
position: relative;
}
.Tabcondent {
position: absolute;
width: 50%;
height: 50%;
opacity: 0;
transition: all ease-in-out 0.3s;
}
.tab-btn.tab-active {
background: var(--14, #FE8500);
color: #FFFF;
}
.tab-btn:hover {
color: #FFF;
background: #FE8500;
}
.Tabcondent.tab-active {
width: 100%;
height: 100%;
opacity: 1;
transition: all ease-in-out 0.6s;
position: relative;
}
.img-group-project {
display: flex;
align-items: center;
gap: 30px;
margin-top: 30px;
}
.img-group-project2 {
margin-top: 0;
margin-bottom: 30px;
}
.project-card {
position: relative;
overflow: hidden;
display: block;
}
.card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Region/project cards: square so every card in the row is the same size.
`height:100%` above resolves to the image's natural height when the parent
has none, so the five area cards came out 621x572 / 621x435 / 621x1001 /
621x414 — wildly uneven. Two classes to beat site-custom's `.container img`. */
.project-card .card-img {
aspect-ratio: 1 / 1;
height: auto;
}
.card-horizontal-img {
min-height: 300px;
}
/* Area / project cards.
AT REST the dark panel sits behind the area name (plus the orange border), so
a card reads as a link rather than a bare photo — it used to be fully hidden
(opacity:0) until hover.
ON HOVER the panel grows smoothly up to fill the card, the arrow fades in and
the area name + line turn orange.
--po-rest is how much of the panel shows at rest. Measured, not guessed: the
text block's top sits 107px above the overlay's bottom edge (20px overlay
padding + 25px .text-content bottom padding + the ~70px of h3 + p), so 118px
clears the area name by ~10px. It's a single animating layer (a
background-size, because `height` can't transition from a content-derived
value), so there's no two-layer flash. Raise it if a region name ever wraps
to two lines. */
.project-overlay {
--po-rest: 118px;
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background-image: linear-gradient(rgba(9, 18, 23, 0.82), rgba(9, 18, 23, 0.82));
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% var(--po-rest);
transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.project-card:hover .project-overlay {
background-size: 100% 100%;
}
/* The arrow belongs to the full panel — it appears once it has come up. */
.icon-box {
align-self: flex-end;
background: #fff;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease 0.1s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}
.project-card:hover .icon-box {
opacity: 1;
transform: none;
}
/* Area name + strapline go orange on hover. */
.text-content h3,
.text-content p {
transition: color 0.3s ease;
}
.project-card:hover .text-content h3,
.project-card:hover .text-content p {
color: #FE8500;
}
/* Orange left border: short at rest, full height once the panel is up —
otherwise it floats over the bare photo.
Rest height = --po-rest, less the 20px the line is offset from the bottom,
less 10px more so it stops just past the area name (whose top is 107px up)
and leaves a gap before the panel's top edge rather than butting into it. */
.text-content::before {
content: '';
height: calc(var(--po-rest) - 30px);
border-left: 2px solid #FE8500;
position: absolute;
left: 20px;
bottom: 20px;
transition: height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.project-card:hover .text-content::before {
height: calc(100% - 40px);
}
.text-content::after {
content: '';
width: calc(100% - 30px);
border-bottom: 2px solid #FE8500;
position: absolute;
left: 10px;
bottom: 30px;
}
.text-content {
color: #fff;
padding: 0 15px 25px;
}
.text-content h3 {
color: var(--5, #FFF);
font-size: 20px;
font-weight: 600;
line-height: 30px;
}
.text-content p {
color: var(--5, #FFF);
font-size: 18px;
font-weight: 400;
line-height: 24px;
padding-top: 8px;
}
/*-----------------------[ 15.Section Seven CSS ]------------------------*/
.section-seven {
padding: 100px 0;
}
.alking {
margin: 0 auto;
max-width: 700px;
text-align: center;
}
.contact-us-future-btn {
margin-top: 40px;
}
.slider-qut-per-main {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 3px solid #FFF;
padding: 30px 30px 20px 30px;
}
.slider-qut-per-main .slider-person img {
border-radius: 50%;
width: 70px;
height: 70px;
}
.slider-person {
display: flex;
align-items: center;
gap: 15px;
}
.emper-main {
padding: 30px;
}
.emper {
color: var(--4, #222);
font-size: 18px;
font-weight: 400;
line-height: 28px;
}
.jack-detail-main h3 {
color: var(--14, #FE8500);
font-size: 20px;
font-weight: 500;
line-height: 30px;
}
.jack-detail-main p {
color: var(--4, #222);
font-size: 18px;
font-weight: 500;
line-height: 24px;
}
.future-slider {
margin-top: 60px;
}
.fuures-slider-box {
margin: 0 12px 0 0;
background: #F5F6F7;
position: relative;
z-index: 1;
overflow: hidden;
/* Equal-height layout: stretch to fill the slick slot so cards
with shorter quotes don't appear shorter than their neighbours.
The slick-track / slick-slide rules below let this height
propagate down from the carousel's tallest slide. */
display: flex;
flex-direction: column;
height: 100%;
}
/* Equal-height for slick-managed slides inside .future-slider.
slick wraps each slide in
so we need height: auto on .slick-slide + height: 100% on the
inner wrapper for the box to actually stretch. */
.future-slider .slick-track {
display: flex !important;
}
.future-slider .slick-slide {
height: auto;
display: flex !important;
}
.future-slider .slick-slide > div {
width: 100%;
display: flex;
}
/* Push the bottom house decoration to the bottom by letting the
quote block grow to fill the leftover vertical space. */
.fuures-slider-box .emper-main {
flex: 1 1 auto;
}
.house {
width: 140px;
position: absolute;
bottom: -3px;
right: 0;
z-index: -1;
filter: brightness(0) saturate(100%) invert(66%) sepia(80%) saturate(4138%) hue-rotate(1deg) brightness(103%) contrast(102%);
opacity: 0.1;
}
/*-----------------------[ 16.Marquee Section CSS ]------------------------*/
.logos {
overflow: hidden;
white-space: nowrap;
position: relative;
display: flex;
margin-top: 60px;
}
.logos-slide {
animation: slide-ltr 50s linear infinite;
}
@keyframes slide-ltr {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.marquee-content {
display: flex;
justify-content: space-around;
min-width: 100%;
align-items: center;
}
.marquee-img-main {
margin: 0 17px;
}
/*-----------------------[ 17.Section Eight CSS ]------------------------*/
.section-eight {
background-image: linear-gradient(to bottom, rgba(9, 18, 23, 0.7), rgba(9, 18, 23, 0.7)), url('../assets/images/home/sec-form-bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
padding: 100px 0;
}
.trust-conter-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 60px;
}
.trust-conter-main h2 {
color: #fff;
}
.trust-conter-main p {
color: var(--8, #A8A9AD);
}
.form-box {
padding: 30px;
background: #FFF;
}
.nedd-help-form {
margin-top: 30px;
}
.nedd-help-form input {
width: 100%;
padding: 10px 15px;
background: var(--12, #F5F6F7);
border: none;
outline: none;
margin-bottom: 20px;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.nedd-help-form input::placeholder {
color: #A8A9AD;
}
/* Match the select + textarea to the text inputs (same gray field, padding,
spacing) so the booking form reads as one tidy set of controls. */
.nedd-help-form select,
.nedd-help-form textarea {
width: 100%;
padding: 10px 15px;
background: var(--12, #F5F6F7);
border: none;
outline: none;
margin-bottom: 20px;
font-size: 18px;
font-weight: 400;
line-height: 24px;
color: #091217;
font-family: inherit;
}
.nedd-help-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding-right: 44px;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'9'%20viewBox%3D'0%200%2014%209'%3E%3Cpath%20d%3D'M1%201l6%206%206-6'%20fill%3D'none'%20stroke%3D'%23091217'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
}
/* Placeholder option (nothing chosen yet) reads muted, like input placeholders */
.nedd-help-form select:invalid { color: #A8A9AD; }
.nedd-help-form textarea { min-height: 120px; resize: vertical; }
/* Native date field: tidy up its label + control spacing to match */
.nedd-help-form .sf-field-lbl {
display: block;
margin-bottom: 8px;
font-size: 15px;
color: #454f54;
}
.couter-form-row {
justify-content: space-between;
}
/*-----------------------[ 18.Section Blog CSS ]------------------------*/
.blog-section {
padding: 100px 0;
}
.recent-artical {
text-align: center;
}
.blog-home-row {
padding-top: 60px;
}
.blog-box-home-main {
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: block;
}
.blog-box-home-main::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.03);
opacity: 0;
z-index: 1;
transition: opacity 0.3s ease;
}
.blog-box-home-main:hover::before {
opacity: 1;
}
/* Card thumbnails crop to the design's own card ratio (the theme's blog-img1-3
are all 410x310) rather than following each source image's shape. Without
this a 1:1, a 3:2 and a 4:3 upload rendered 406 / 271 / 374px tall in the
same row, so the cards' titles and dates never lined up. */
.blog-img {
width: 100%;
aspect-ratio: 410 / 310;
height: auto;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s ease, filter 0.4s ease;
}
/* Blog listing ("design blog") page only: crop card thumbnails to a 1:1 square
so mixed-aspect images line up. Scoped to .template-blog-home so the homepage
blog cards keep their original aspect ratio. */
.template-blog-home .blog-img {
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
object-position: center;
display: block;
}
.blog-box-home-main:hover .blog-img {
transform: scale(1.03);
filter: brightness(0.95);
}
.date-blog-main {
position: relative;
}
.date-blog {
color: var(--8, #A8A9AD);
text-align: center;
font-size: 18px;
font-weight: 500;
line-height: 24px;
padding: 8px 12px;
background: var(--12, #F5F6F7);
transform: rotate(-90deg);
width: fit-content;
position: absolute;
left: -45px;
top: 65px;
transition: all 0.4s ease;
}
.blog-box-home-main:hover .date-blog {
background: #FE8500;
color: #FFF;
left: -40px;
}
.blog-content-hed {
margin: 20px 0 20px 60px;
transition: transform 0.3s ease;
}
.blog-box-home-main:hover .blog-content-hed {
transform: translateX(8px);
}
.blog-roofing-text {
color: var(--4, #222);
font-size: 18px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
gap: 10px;
}
.blog-box-home-main:hover .blog-roofing-text {
color: #FE8500;
letter-spacing: 0.5px;
transition: color 0.3s ease, letter-spacing 0.3s ease;
}
.blog-roofing-text::before {
content: url('../assets/images/svg/home.svg');
transition: transform 0.3s ease;
}
.blog-box-home-main:hover .blog-roofing-text::before {
transform: translateX(-3px);
filter: brightness(0) saturate(100%) invert(73%) sepia(52%) saturate(6410%) hue-rotate(0deg) brightness(101%) contrast(100%);
}
.haiRated {
color: var(--13, #091217);
font-size: 24px;
font-weight: 600;
line-height: 36px;
transition: all 0.3s ease;
}
/* Blog index card excerpt — short paragraph under the title, clamped to 3 lines. */
.blog-card-excerpt {
color: var(--4, #4a4a4a);
font-size: 15px;
font-weight: 400;
line-height: 24px;
margin-top: 10px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.arrow-red-blog {
padding-top: 20px;
transition: transform 0.4s ease;
}
.blog-box-home-main:hover .arrow-red-blog {
transform: translateX(10px);
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
animation: arrowPulse 1.2s infinite alternate;
}
@keyframes arrowPulse {
0% {
transform: translateX(12px) scaleX(1.2);
}
100% {
transform: translateX(16px) scaleX(1.3);
}
}
/*-----------------------[ 19.Footer CSS ]------------------------*/
footer {
background: var(--13, #091217);
padding-top: 100px;
}
.working-hours {
color: var(--5, #FFF);
font-size: 24px;
font-weight: 600;
line-height: 36px;
padding-bottom: 20px;
}
.timing-hrw {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px 0;
border-bottom: 2px solid #ffffff0f;
}
.timing-hrw p {
color: var(--8, #A8A9AD);
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.footer-row-quick {
justify-content: space-between;
}
/* Our Services + Quick Links sit side-by-side. Both columns top-align so
the two headings line up on the same baseline and the first list item
in each column also lines up with the other — reads as two parallel
lists rather than two vertically-centred chunks of different heights. */
.quicklinks-main {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 40px;
}
.quicklinks-main > div {
flex: 1;
min-width: 0;
}
.quicklinks-main ul li a {
color: var(--8, #A8A9AD);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 40px;
transition: all 0.4s ease-in-out;
}
.quicklinks-main ul li a:hover {
color: #FE8500;
}
.footer-img-group {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.footer-img-group .footer-imgs {
width: 100%;
}
.img-container {
position: relative;
overflow: hidden;
flex: 1;
display: block;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.57);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.brand-instagram {
width: 40px;
opacity: 0;
transform: scale(0.5) rotate(0deg);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.img-container:hover .img-overlay {
opacity: 1;
}
.img-container:hover .brand-instagram {
opacity: 1;
transform: scale(1) rotate(360deg);
}
.media-logo-call-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 20px;
border-radius: 30px;
background: var(--4, #222);
margin-top: 60px;
margin-bottom: 40px;
flex-wrap: wrap; /* let columns drop to a second row when the footer narrows */
}
/* Brand link inside the footer pill: placeholder SVG + site name text. */
.media-logo-call-footer .footer-brand-link {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex: 0 1 auto;
min-width: 0;
}
.media-logo-call-footer .footer-brand-link img {
height: 40px;
width: auto;
display: block;
flex-shrink: 0;
}
/* User-uploaded logo in the footer: no site-name text shipped next to it,
so let the image carry the full brand mark on its own. */
.media-logo-call-footer .footer-brand-link .footer-brand-logo {
height: auto;
max-height: 56px;
}
.media-logo-call-footer .call-detl {
border-radius: 50px;
background: var(--14, #FE8500);
padding: 10px 50px 10px 10px;
flex: 0 1 auto;
min-width: 0;
}
.media-logo-call-footer .footer-med-icons-main {
flex: 0 0 auto;
/* Reserve room for ~4 60px social circles + 3×20px gaps = 300px so the
footer pill keeps its 3-cell flex layout (brand | call | socials) even
when no social platforms are configured. */
min-width: 300px;
justify-content: flex-end;
}
.media-logo-call-footer .call-detl .img-main-call {
background: var(--13, #091217);
}
.media-logo-call-footer .call-detl a {
color: #FFFFFF;
}
.footer-med-icons-main {
display: flex;
align-items: center;
gap: 20px;
}
.footer-med-icons {
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
}
.footer-med-icons:hover {
background: #FE8500;
}
.footer-med-icons img {
width: 32px;
}
.copyrights-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding-bottom: 40px;
}
.copyrights-main p,
.copyrights-main a {
color: var(--8, #A8A9AD);
font-size: 18px;
font-weight: 400;
line-height: 24px;
text-align: center;
}
.copyrights-main a:hover {
color: #FE8500;
}
/*-----------------------[ 20.Bottom To Top Button CSS ]------------------------*/
button.bottom-top-button {
position: fixed;
right: 30px;
bottom: 20px;
z-index: 999;
width: 50px;
height: 50px;
color: #FFF;
font-size: 30px;
background: #FE8500;
}
.nav-links>li>a.active {
filter: brightness(0) saturate(100%) invert(73%) sepia(52%) saturate(6410%) hue-rotate(0deg) brightness(101%) contrast(100%);
}
.dropdown-menu li a.active {
color: #FE8500 !important;
}
/*-----------------------[ 21.About Page CSS ]------------------------*/
.heroSection {
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 27.86%, rgba(0, 0, 0, 0.00) 100%), url('../assets/images/about/header-bg.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 220px 0 100px;
}
.section-about-two {
padding-top: 100px;
}
.img-header-text {
color: #FFF;
font-size: 64px;
font-weight: 700;
line-height: 72px;
}
.breadcrumb-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-top: 20px;
}
.breadcrumb-group a {
color: #FFF;
font-size: 18px;
font-weight: 500;
line-height: 26px;
text-transform: uppercase;
}
/*-----------------------[ 22.Team Page CSS ]------------------------*/
.section-team-two {
padding: 100px 0;
}
.team-cards {
position: relative;
z-index: 1;
background-color: #F5F6F7;
overflow: hidden;
transition: all 500ms ease;
border-radius: 20px 20px 0 0;
}
.team-row {
gap: 40px 0;
}
.team-images-main {
position: relative;
z-index: 1;
overflow: hidden;
background-image: url('../assets/images/team/roofing-img.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
border-radius: 20px 20px 150px 0;
border-bottom: 7px solid #FE8500;
}
.team-images-main img {
transition: all 0.4s ease-in-out;
}
.team-cards:hover .team-images-main img {
transform: scale(1.05);
}
.team-contact {
position: relative;
padding: 30px;
}
.team-card-title a {
font-size: 24px;
line-height: 35px;
font-weight: 600;
display: block;
color: #091217;
transition: all 0.4s ease-in-out;
}
.team-cards:hover .team-card-title a {
color: #FE8500;
}
.team-card-designation {
font-size: 16px;
font-weight: 400;
color: #606060;
transition: all 0.4s ease-in-out;
}
.team-cards:hover .team-card-designation {
color: #091217;
}
.team-card-hover {
position: absolute;
bottom: 37px;
right: 30px;
}
.team-card-hover-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #FE8500;
font-size: 21px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
cursor: pointer;
}
.team-cards:hover .team-card-hover-btn {
transform: rotate(90deg);
}
.team-card-hover-social {
position: absolute;
bottom: 100%;
right: 0;
z-index: 3;
margin: 0;
opacity: 0;
padding-bottom: 10px;
transform: scaleY(0);
transition: all 0.3s linear;
transform-origin: bottom center;
}
.team-card-hover-social a {
width: 40px;
height: 40px;
background-color: #FE8500;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 500ms ease;
}
.team-card-hover-social a:hover {
background-color: #091217;
}
.team-card-hover-social a+a {
margin-top: 10px;
}
.team-cards:hover .team-card-hover-social {
opacity: 1;
transform: scaleY(1);
}
/*-----------------------[ 23.Team Details Page CSS ]------------------------*/
.team-details-section {
padding: 100px 0;
}
.team-details-col1 {
padding-right: 0;
display: flex;
flex-direction: column;
}
.team-details-col1 .team-details-img {
flex-grow: 1;
}
.team-details-main-col2 {
padding-left: 0;
}
.team-details-col2 {
background: #091217;
padding: 50px;
height: 100%;
}
.contact-team-main {
padding: 30px 0;
border-top: 1px solid #ffffff47;
border-bottom: 1px solid #ffffff47;
margin-top: 30px;
}
.feugiat {
color: #A8A9AD;
font-size: 18px;
font-weight: 400;
line-height: 30px;
padding-top: 10px;
}
.contact-team-person {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.contact-team-person h2 {
max-width: 110px;
width: 100%;
}
.contact-team-person h2,
.contact-team-person p {
color: #FFF;
font-size: 18px;
font-weight: 500;
line-height: 30px;
}
.contact-team-person a {
max-width: 300px;
width: 100%;
}
.contact-team-person p {
color: var(--4, #A8A9AD);
font-weight: 400;
}
.team-person-media-main {
position: absolute;
bottom: 20px;
left: 30px;
}
.team-person-media-main a {
width: 50px;
height: 50px;
background: #FFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
margin-bottom: 10px;
transition: all 0.3s ease-in-out;
}
.team-person-media-main a:hover {
background: #FE8500;
}
.team-person-media-main a:hover img {
filter: none;
}
.team-person-media-main a img {
filter: brightness(0) saturate(100%) invert(73%) sepia(52%) saturate(6410%) hue-rotate(0deg) brightness(101%) contrast(100%);
}
.quam {
color: #091217;
}
/* ------------- Progress Bar ----------- */
.single-team-page-row2 {
padding-top: 60px;
}
.home-img-col {
display: flex;
align-items: center;
justify-content: center;
}
.home-img-col img {
width: 100%;
}
.progress-bar {
margin: 20px 0 10px;
overflow: hidden;
text-align: start;
}
.progress-title-holder {
padding-bottom: 7px;
position: relative;
}
.progress-title {
color: var(--3, #091217);
font-size: 18px;
font-weight: 500;
line-height: 30px;
}
.progress-number-wrapper,
.progress-number-mark {
color: #FE8500;
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
.progress-number-mark {
margin-bottom: 4px;
position: absolute;
bottom: 0;
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.progress-content-outter {
height: 4px;
border-radius: 2px;
background-color: rgba(168, 169, 173, 0.2);
}
.progress-content {
height: 4px;
border-radius: 2px;
background-color: #FE8500;
width: 0%;
}
/*-----------------------[ 24.Pricing Plan Page CSS ]------------------------*/
.pricing-plans-row {
margin-top: 60px;
}
.asd {
position: absolute;
top: 0;
right: 0;
width: 100%;
}
.pricing-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
padding: 30px;
position: relative;
transition: transform 0.3s;
border: 2px solid transparent;
}
.pricing-card:hover {
transform: translateY(-10px);
border: 2px solid #FE8500;
}
.featured {
border: 2px solid #FE8500;
transform: scale(1.05);
}
.popular-tag {
background: #FE8500;
color: #FFF;
padding: 5px 10px;
border-radius: 20px;
position: absolute;
top: -15px;
right: 20px;
font-size: 12px;
}
.price {
font-size: 40px;
font-weight: 700;
margin: 15px 0;
color: #091217;
}
.price span {
font-size: 18px;
color: #FE8500;
font-weight: 500;
}
.pricing-btn {
width: 100%;
margin-top: 30px;
}
.features li {
padding-bottom: 10px;
display: flex;
gap: 10px;
font-size: 18px;
line-height: 28px;
}
.features li::before {
content: url(../assets/images/svg/rosette-check-white.svg);
}
/*-----------------------[ 25.Our Client Page CSS ]------------------------*/
.clients-main {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 54px;
margin-top: 60px;
}
.clients-main img {
max-width: 100%;
}
/*-----------------------[ 26.Testimonial Page CSS ]------------------------*/
.testimonial-col .slider-person img {
width: 70px;
}
.testimonial-row {
gap: 30px 0;
}
.qotestion {
width: 60px;
}
.testimonial-col .fuures-slider-box {
margin: 0;
}
/*-----------------------[ 27.FAQ Page CSS ]------------------------*/
.testimonial-page-row {
gap: 24px 0;
}
.pulm-multi-main {
display: flex;
align-items: center;
justify-content: center;
}
.pulm-multi {
max-width: 100%;
}
#accordionExample {
margin-top: 40px;
}
.accordion-item:first-of-type>.accordion-header .accordion-button {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.accordion-item:first-of-type {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.accordion-button:focus {
box-shadow: none;
}
#accordionExample .accordion-button {
padding: 12px;
font-size: 18px;
font-weight: 600;
line-height: 30px;
background: rgba(168, 169, 173, 0.1);
margin-bottom: 15px;
}
.accordion-button:not(.collapsed) {
color: #FE8500;
background-color: rgba(254, 133, 0, 0.1) !important;
}
#accordionExample.accordion {
--bs-accordion-border-color: none;
}
#accordionExample .accordion-body {
padding: 0 0 30px 0;
color: var(--4, #091217);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.accordion-button::after {
background-image: url('../assets/images/svg/drop-down-arrow.svg');
--bs-accordion-btn-icon-width: 2rem;
filter: brightness(0) saturate(100%) invert(73%) sepia(52%) saturate(6410%) hue-rotate(0deg) brightness(101%) contrast(100%);
}
.accordion-button:not(.collapsed)::after {
background-image: url('../assets/images/svg/drop-down-arrow.svg');
filter: brightness(0) saturate(100%) invert(73%) sepia(52%) saturate(6410%) hue-rotate(0deg) brightness(101%) contrast(100%);
}
/*-----------------------[ 28.404 Page CSS ]------------------------*/
.furthe {
max-width: 700px;
margin: 20px auto;
}
.error-container {
text-align: center;
}
.error-img {
max-width: 100%;
}
.error-img-btn {
display: flex;
align-items: center;
flex-direction: column;
}
/*-----------------------[ 29.Services Deatils Page CSS ]------------------------*/
.services-page-row {
gap: 30px 0;
}
.layers-img1 {
width: 100%;
margin: 30px 0;
}
.fusce {
color: #091217;
font-size: 18px;
font-weight: 400;
line-height: 28px;
}
.serice-process-main {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 50px;
}
.adds-img-home {
width: 100%;
}
.card-adds-main {
margin-top: 40px;
}
.adds-details-main {
background: #091217;
padding: 30px;
border-top: 5px solid #FE8500;
text-align: center;
}
.adds-details-main h3 {
font-size: 35px;
line-height: 45px;
color: #FFF;
font-weight: 700;
text-align: center;
}
.layers-img2 {
max-width: 100%;
border-radius: 10px;
}
.process-box {
padding: 20px;
background: var(--12, #F5F6F7);
border-radius: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.ldwagv {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.process-box img {
max-width: 64px;
width: 100%;
filter: brightness(0) saturate(100%) invert(52%) sepia(99%) saturate(1881%) hue-rotate(360deg) brightness(102%) contrast(101%);
}
/* Two classes on purpose: the theme's `max-width:64px` above is (0,1,1) and so
is the site's own `.container img { max-width:100% }` in site-custom.css,
which loads LATER and wins — icons ballooned to 183x183 inside their card.
Fixed square box so every icon reads at the same optical size whatever its
viewBox. */
.ldwagv .process-box img {
width: 56px;
height: 56px;
max-width: none;
object-fit: contain;
flex-shrink: 0;
}
.process-box h3 {
font-size: 24px;
line-height: 35px;
font-weight: 500;
color: #091217;
}
.process-box p {
font-size: 16px;
line-height: 26px;
font-weight: 400;
color: #091217;
padding-top: 5px;
}
.ourServicesPrcoes {
color: var(--13, #091217);
font-size: 32px;
font-weight: 700;
line-height: 42px;
margin: 30px 0;
}
.service-video {
width: 100%;
height: 100%;
margin: 40px 0;
}
.roofing-services-list-main {
padding: 30px;
border: 2px solid #F5F6F7;
}
.all-service-text {
font-size: 36px;
font-weight: 700;
line-height: 48px;
color: #FFF;
text-align: center;
padding: 30px;
background: #091217;
}
.service-list-arow-main {
padding: 15px 0;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 2px solid #FE8500;
transition: all 0.3s ease-in-out;
}
.service-list-arow-main:hover {
background: #FE8500;
padding: 15px 20px;
}
.service-list-arow-main.active {
background: #FE8500;
padding: 15px 20px;
}
.service-list-arow-main.active p {
color: #FFF;
}
.service-list-arow-main:hover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(211deg) brightness(102%) contrast(101%);
}
/* Sidebar links must never wrap. Hover adds 20px of padding EACH SIDE, so the
text area shrinks by 40px mid-interaction and a long name dropped its last
word onto a second line as you moused over it. The longest name here
("Wood Flooring Fitters Perth and Kinross") measured 352px at the theme's
original 20px in a 342px box — it wrapped even at rest. At 16px it's ~282px,
which fits both at rest (342px) and on hover (302px), so the indent effect
survives and nothing reflows. The text sits in its own span so nowrap +
ellipsis apply to it rather than to this flex row. */
.service-list-arow-main p {
color: #091217;
font-size: 16px;
font-weight: 500;
line-height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
white-space: nowrap;
overflow: hidden;
min-width: 0;
text-overflow: ellipsis;
}
.service-list-arow-main:hover p {
color: #FFF;
}
.roofing-person {
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
}
#service-page-form {
padding: 20px;
position: relative;
margin-top: 40px;
}
#service-page-form input {
margin-bottom: 13px;
}
/* Sidebar secondary headers toned down vs the top "UFH Services" bar (36px):
the enquiry-form heading and the "Areas We Cover" header sit smaller. */
#service-page-form .send-message-text {
font-size: 23px;
line-height: 32px;
text-align: center;
}
.all-service-text.all-service-text--sub {
font-size: 23px;
line-height: 32px;
padding: 20px;
}
.sidebar-areas-box { margin-top: 30px; }
/* "Areas We Cover" as a full-width section under the consultation band. */
.mp-areas-fw { padding: 44px 0 20px; }
.contasgh {
font-size: 25px;
line-height: 35px;
margin-bottom: 20px;
}
.sevem {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.serv-map-consad {
font-size: 18px;
line-height: 28px;
color: #000;
}
.serphone {
filter: brightness(0) saturate(100%) invert(52%) sepia(99%) saturate(1881%) hue-rotate(360deg) brightness(102%) contrast(101%);
}
.sevem a:hover {
color: #FE8500;
}
.imgs-group-services-main img {
width: 100%;
}
.imgs-group-services-main {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 40px 0;
}
/* Service-page content blocks: keep a clear gap below each list / process
block so consecutive blocks (e.g. Small Orange Ticks → Icons & Headers)
don't butt together. Scoped to .all-services-row so the homepage's shared
.multi-qustions-main bullet list isn't affected. */
.all-services-row .single-services-list-fetur,
.all-services-row .ldwagv,
.all-services-row .multi-qustions-main { margin-bottom: 45px !important; }
/* ── Service page: product gallery carousel ───────────────────────────
Portrait cards of real products from the page's category — the floor, its
name and its manufacturer — so a service page can hand the visitor straight
to something they can actually have fitted. TWO ROWS of ~5 (a page of 10)
with prev/next arrows (script.js) that pan across to the next 10. */
.svc-pg-carousel {
--svc-pg-visible: 5;
--svc-pg-gap: 14px;
position: relative;
margin: 0 0 45px;
/* Room for the arrows, which overhang the track edges. */
padding: 0 4px;
}
/* A two-row grid that flows into columns and scrolls horizontally: 20 cards
become 2 rows × 10 columns, of which 5 columns (= 10 cards, two rows of five)
are visible; the arrows page across to reveal the next 10. Each column is a
fixed fraction of the VISIBLE width, so the extra columns overflow and become
the scroll. */
.svc-pg-track {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
grid-auto-columns: calc((100% - (var(--svc-pg-visible) - 1) * var(--svc-pg-gap)) / var(--svc-pg-visible));
gap: 20px var(--svc-pg-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Hide the scrollbar — the arrows are the control. */
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 4px;
}
.svc-pg-track::-webkit-scrollbar { display: none; }
.svc-pg-card {
scroll-snap-align: start;
text-decoration: none;
color: inherit;
min-width: 0;
}
/* Prev/next arrows — circular, overhanging the track, vertically centred on
the whole two-row block. Disabled (dimmed, non-interactive) at each end. */
.svc-pg-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid #e4ddd0;
background: #fff;
color: #091217;
box-shadow: 0 6px 18px rgba(9, 18, 23, .12);
cursor: pointer;
z-index: 2;
transition: background .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.svc-pg-prev { left: -14px; }
.svc-pg-next { right: -14px; }
.svc-pg-nav:hover { background: #FE8500; color: #fff; border-color: #FE8500; }
.svc-pg-nav:disabled { opacity: 0; pointer-events: none; }
.svc-pg-img {
display: block;
/* Portrait — a plank swatch reads better tall than square. */
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 10px;
background: #ece8de;
}
/* Two classes: site-custom.css ships BOTH `.container img { max-width:100% }`
AND `.all-services-row img { margin:20px 0 }` (each 0,1,1). The gallery lives
inside .all-services-row, so that margin shoved every card image 20px DOWN
inside its overflow:hidden container — a beige band at the top and the image
clipped off the bottom. This higher-specificity (0,3,1) rule must zero the
margin too, not just the width. */
.svc-pg-card .svc-pg-img img {
width: 100%;
height: 100%;
max-width: none;
margin: 0;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.svc-pg-card:hover .svc-pg-img img {
transform: scale(1.06);
}
.svc-pg-meta {
display: block;
padding: 10px 2px 0;
}
.svc-pg-name {
display: block;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: #091217;
transition: color .2s ease;
}
.svc-pg-card:hover .svc-pg-name {
color: #FE8500;
}
.svc-pg-brand {
display: inline-block;
margin-top: 5px;
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #6f6250;
background: #ece8de;
border-radius: 999px;
padding: 3px 8px;
white-space: nowrap;
}
@media (max-width: 1199px) {
.svc-pg-carousel { --svc-pg-visible: 4; }
}
@media (max-width: 767px) {
.svc-pg-carousel { --svc-pg-visible: 3; }
}
@media (max-width: 479px) {
.svc-pg-carousel { --svc-pg-visible: 2; }
.svc-pg-prev { left: -6px; }
.svc-pg-next { right: -6px; }
}
/* Service-page body copy. The Text blocks emit bare s straight into this
column and the theme's reset leaves them at margin:0, so consecutive
paragraphs ran together as one slab with no gap between them. */
.all-services-row > [class*="col-"] > p {
margin: 0 0 18px;
}
.all-services-row > [class*="col-"] > p:last-child {
margin-bottom: 0;
}
/* The first thing in the column shouldn't push away from the section's own
top padding. */
.all-services-row > [class*="col-"] > *:first-child {
margin-top: 0;
}
/* ── Mobile "Read More" for the intro paragraphs ──────────────────────
On phones the leading paragraphs are collapsed to just the first, with the
rest revealed by a toggle. script.js wraps the extra
s in
.svc-readmore-extra and animates max-height; the collapse only applies on
phones, and the desktop rule below force-clears any inline height JS left
behind so a resize can never clip the copy. */
.svc-readmore-extra { overflow: hidden; }
.svc-readmore-toggle { display: none; }
@media (max-width: 767px) {
.svc-readmore-extra {
max-height: 0;
opacity: 0;
/* Eased height reveal; the px ceiling is set inline by script.js from
the measured content height so the transition has a concrete target. */
transition: max-height .45s ease, opacity .35s ease;
}
.svc-readmore-extra.is-open { opacity: 1; }
.svc-readmore-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 2px 0 18px;
padding: 0;
border: 0;
background: none;
color: #FE8500;
font-family: inherit;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.svc-readmore-toggle .svc-readmore-chev { transition: transform .3s ease; }
.svc-readmore-toggle[aria-expanded="true"] .svc-readmore-chev { transform: rotate(180deg); }
}
/* Desktop: always fully open, whatever inline height a phone session left. */
@media (min-width: 768px) {
.svc-readmore-extra { max-height: none !important; opacity: 1 !important; }
}
/* Book a Free Consultation band reuses the homepage .section-eight design
verbatim (see build.mjs {{SERVICE_CONSULT_FORM}}) — same white .form-box card
and .nedd-help-form controls the homepage already styles, so no bespoke CSS. */
/* ── Anti-scrape email image ── keeps the rendered PNG aligned with text. */
.email-img-link { display: inline-block; line-height: 0; }
.email-img { max-width: 100%; height: auto; }
.email-img-inline { vertical-align: middle; }
.sevem .serv-map-consad .email-img { display: block; }
/* ── Service sidebar "Call us free" — small label over a bold orange number
so the phone reads as the primary call-to-action, not body text. */
.sevem-phone { align-items: flex-start; }
.serv-phone { line-height: 1.2; }
.serv-phone-label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #7a7a7a;
}
.serv-phone-num {
display: inline-block;
margin-top: 3px;
font-size: 24px;
font-weight: 800;
line-height: 1.15;
letter-spacing: .3px;
color: #FE8500;
}
.serv-phone-num:hover { color: #e07a00; text-decoration: none; }
.single-services-list-fetur {
margin-top: 20px;
padding: 30px;
background: #F5F6F7;
}
/* One grid, two equal columns, filled column-first. --tick-rows (set inline by
the build) pins the row count so each left/right item lands in the same grid
row — rows auto-size to the taller of the pair, so a wrapped 2-line item
makes its partner cell grow to match and everything stays aligned. */
.single-services-list-fetur ul {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
grid-template-rows: repeat(var(--tick-rows, 1), auto);
align-items: stretch;
column-gap: 20px;
}
.single-services-list-fetur ul li {
color: #222222;
font-size: 17px;
font-weight: 400;
line-height: 40px;
display: flex;
align-items: flex-start;
gap: 10px;
}
.single-services-list-fetur ul li:before {
content: url(../assets/images/svg/rosette-check-white.svg);
position: relative;
top: 7px;
}
/* ── Underfloor Heating "types" cards (two clickable boxes) ─────────────── */
.ufh-types {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin: 24px 0 10px;
}
.ufh-type-card {
display: block;
padding: 0 0 26px;
background: #F5F6F7;
border: 1px solid #ecebe6;
border-top: 4px solid #FE8500;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: #091217;
transition: transform .2s ease, box-shadow .2s ease;
}
.ufh-type-img {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.ufh-type-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ufh-type-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(9, 18, 23, .12);
color: #091217;
}
.ufh-type-card h3 {
font-size: 22px;
margin: 22px 26px 10px;
color: #091217;
}
.ufh-type-card p {
font-size: 16px;
line-height: 27px;
color: #454f54;
margin: 0 26px 14px;
}
.ufh-type-card .ufh-type-more {
display: block;
margin: 0 26px;
font-weight: 600;
color: #FE8500;
}
@media (max-width: 767px) {
.ufh-types { grid-template-columns: 1fr; }
}
/* Underfloor-heating consultation band: the heading is longer than the wood
flooring one, so drop it a notch to keep it on a tidy two lines. */
.consult-section--ufh .business.latest-code {
font-size: 34px;
line-height: 1.2;
}
@media (max-width: 991px) {
.consult-section--ufh .business.latest-code { font-size: 28px; }
}
/*-----------------------[ 30.Project Page CSS ]------------------------*/
.project2-pRow {
gap: 30px 0;
}
.project-img-wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: auto;
display: block;
}
.hover-overlay {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
color: #FE8500;
padding: 20px;
transition: bottom 0.5s ease-in-out;
height: 100%;
display: flex;
align-items: flex-end;
}
.project-img-wrapper:hover .hover-overlay {
bottom: 0;
}
.project-img {
width: 100%;
}
.overlay-content p {
color: var(--4, #222);
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
.overlay-content h3 {
color: #FE8500;
font-size: 30px;
font-weight: 600;
line-height: 36px;
}
.overlay-content .arrow-box {
width: 50px;
height: 50px;
background: #FE8500;
position: absolute;
top: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.overlay-content .arrow-box img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7488%) hue-rotate(58deg) brightness(105%) contrast(95%);
}
.diamond-nextbtn-head {
display: flex;
justify-content: space-between;
border-top: 2px solid rgba(168, 169, 173, 0.2);
border-bottom: 2px solid rgba(168, 169, 173, 0.2);
margin-top: 50px;
}
.diamond-btn {
background: #FE8500;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.diamond-btn img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7488%) hue-rotate(58deg) brightness(105%) contrast(95%);
width: 35px;
}
.diamond-next-btn {
display: flex;
align-items: center;
gap: 10px;
margin: 20px 0;
cursor: pointer;
}
.diamond-next-btn h3 {
color: #000;
font-size: 18px;
font-weight: 600;
line-height: 30px;
}
.send-inquiry-form {
padding: 30px;
background: #FFF;
box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.08);
position: sticky;
top: 100px;
}
.project-info-text {
color: #000000;
font-size: 36px;
font-weight: 600;
line-height: 48px;
margin-bottom: 30px;
text-align: center;
}
.project-info-main {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #9090903b;
padding: 20px 0;
}
.project-info-main p:nth-child(1) {
color: #222222;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 30px;
}
.project-info-main p:nth-child(2) {
color: #FE8500;
font-size: 20px;
}
.project-details-icon {
margin-top: 30px;
justify-content: center;
}
.project-details-icon .footer-med-icons {
background: #FE8500;
width: 50px;
height: 50px;
}
.project-details-icon .footer-med-icons img {
width: 30px;
}
.no-side-bar-row-project {
justify-content: center;
}
/*-----------------------[ 31.Blog Page CSS ]------------------------*/
.blog-page1-row {
gap: 30px 0
}
.blog-standard-main {
display: flex;
align-items: center;
gap: 10px;
background: #F5F6F7;
}
.blog-standard-main .blog-content-hed {
margin: 20px 20px 20px 20px;
width: 100%;
}
.blog-standard-main .date-blog {
transform: rotate(0);
position: absolute;
left: 15px;
top: 15px;
background: #FE8500;
color: #FFF;
}
.blog-standard-main .date-blog-main {
position: unset;
}
.blog-standard-main.blog-box-home-main:hover .date-blog {
background: #FE8500;
color: #FFF;
left: 15px;
}
.search-box-main {
padding: 20px;
background: #F5F6F7;
}
.search-input input {
width: 100%;
height: 60px;
outline: none;
border: none;
padding: 18px 15px;
color: var(--4, #222);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 30px;
}
.search-input {
position: relative;
}
.search-box {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: 0;
}
#recent-post-box {
margin-bottom: 20px;
margin-top: 40px;
}
.recent-post-main {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.recent-post-text-main p {
color: var(--4, #222);
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.recent-post-text-main h2 {
color: var(--4, #222);
font-size: 18px;
font-weight: 600;
line-height: 27px;
}
.recent-post-main .recent-post-text-main h2:hover {
color: #FE8500;
}
/* Recent-post thumbnails: the original template relied on tiny image files; imported
posts use large images, so pin the thumb to a fixed square that fits alongside the
date + title. flex-shrink:0 stops the text squeezing it. */
.recent-post-main img {
width: 90px;
height: 90px;
object-fit: cover;
flex-shrink: 0;
border-radius: 6px;
}
/* ── Standard blog body typography ───────────────────────────────────
Imported / editor article content uses bare tags; map them to the theme's
blog styling (.interdum headings + .fusce body) so every post reads the same. */
.blog-body h2 { color: #091217; font-size: 32px; font-weight: 600; line-height: 42px; margin: 34px 0 12px; }
.blog-body h3 { color: #091217; font-size: 23px; font-weight: 600; line-height: 32px; margin: 26px 0 10px; }
.blog-body p { color: #091217; font-size: 18px; font-weight: 400; line-height: 28px; margin: 0 0 18px; }
.blog-body ul, .blog-body ol { margin: 0 0 20px; padding-left: 22px; }
.blog-body li { color: #091217; font-size: 18px; font-weight: 400; line-height: 28px; margin-bottom: 8px; }
.blog-body li::marker { color: #FE8500; }
.blog-body a { color: #FE8500; text-decoration: underline; }
.blog-body > *:first-child { margin-top: 0; }
.blog-body blockquote { margin: 24px 0; padding: 18px 26px; border-left: 4px solid #FE8500; background: #f7f3ea; font-size: 20px; line-height: 30px; color: #091217; }
.blog-body table.blog-compare { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.blog-body table.blog-compare th, .blog-body table.blog-compare td { border: 1px solid #ece6d8; padding: 11px 14px; text-align: left; vertical-align: top; }
.blog-body table.blog-compare th { background: #f7f3ea; font-weight: 600; color: #091217; }
@media (max-width: 600px) {
.blog-body h2 { font-size: 26px; line-height: 34px; }
.blog-body h3 { font-size: 20px; line-height: 28px; }
.blog-body table.blog-compare { font-size: 14px; }
}
/*-----------------------[ 32.Blog details Page CSS ]------------------------*/
/* Link out to the Google Business profile under the contact map. The map embed
itself shows the business listing; this opens the full profile (reviews,
photos, directions) since a maps.app.goo.gl share link can't be iframed. */
/* The map and its link are one block. The iframe is height:100%, so when the
link was a bare sibling it filled the column and pushed the link ~40px
outside it. Flex column: the map takes what's left, the link stays inside. */
.map-block {
display: flex;
flex-direction: column;
height: 100%;
}
.map-block .map-iframe {
flex: 1 1 auto;
min-height: 0; /* allow the iframe to shrink inside the flex column */
}
/* Secondary action next to the form's solid orange "Send Message" pill — same
pill language, outlined rather than filled so it supports the primary
action instead of competing with it. */
.map-profile-link {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding: 11px 20px;
border: 1.5px solid rgba(254, 133, 0, 0.45);
border-radius: 40px;
background: #fff;
color: #FE8500;
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: background-color .18s ease, border-color .18s ease,
transform .18s ease, box-shadow .18s ease;
}
/* Tinted rather than filled solid: Google's pin is multicolour and stays
legible on a light wash, and the button keeps its secondary weight. */
.map-profile-link:hover,
.map-profile-link:focus-visible {
background: rgba(254, 133, 0, 0.08);
border-color: #FE8500;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(254, 133, 0, 0.18);
}
.map-profile-link:focus-visible {
outline: 2px solid #FE8500;
outline-offset: 2px;
}
.map-profile-icon {
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.map-profile-arrow {
flex: 0 0 auto;
transition: transform .18s ease;
}
.map-profile-link:hover .map-profile-arrow { transform: translate(2px, -2px); }
/* Date fields in this theme's forms: same box as .search-input input, plus the
site's orange as the picker accent (tints the native calendar's selected day)
and room on the right so the calendar icon isn't jammed against the edge. */
:root { --sf-date-accent: #FE8500; }
.search-input input[type="date"] {
padding-right: 12px;
font-size: 18px;
line-height: 30px;
color: var(--4, #222);
}
.sf-daterange input[type="date"] {
height: 60px;
border: none;
outline: none;
background: #fff;
padding: 18px 12px 18px 15px;
font-size: 18px;
line-height: 30px;
color: var(--4, #222);
}
.search-input .sf-daterange { margin-bottom: 20px; }
/* Contact page form — the markup is generated by the build but deliberately
reuses the theme's existing .search-input / .quote-btn styles so it matches
the original design. These rules only fill the gaps the old static markup
never needed: the submit is now a real