:root {
--dark: #182333;
--muted: #6c757d;
--light: #f8f9fa;
}
body {
font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--muted);
} p,
span,
li,
a,
small,
.text-muted,
.lead,
.nav-link,
.btn,
.footer-links li a,
.footer-contact-info,
.service-item-desc,
.why-choose-meta,
.why-choose-block p,
.about-text,
.about-feature p,
.about-bullet-list li {
font-size: 1.08rem !important; line-height: 1.8;
}
.btn,
.btn-split-text {
font-size: 1rem !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
color: var(--dark);
font-weight: 700;
}
.topbar,
.navbar,
.site-footer {
background: var(--dark);
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background: transparent;
box-shadow: none;
transition: background-color .25s ease, box-shadow .25s ease;
}
.topbar {
background: rgb(34 66 114);
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topbar-highlight {
position: relative;
z-index: 0;
margin-top: -8px;
margin-bottom: -8px;
padding: 8px 28px 8px 0;
color: #fff;
}
.topbar-highlight::before {
content: "";
position: absolute;
inset: 0 0 0 -100vw;
background: #8ecd30;
z-index: -1;
}
.top-header-flex {
width: 100%;
display: flex !important;
justify-content: flex-end;
flex-wrap: wrap;
}
.navbar {
background: rgb(240 246 255 / 66%);
border-bottom: 1px solid rgba(255, 255, 255, .08);
transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
backdrop-filter: blur(1.5px);
}
.navbar {
--bs-navbar-color: #fff;
--bs-navbar-hover-color: var(--brand);
--bs-navbar-active-color: var(--brand);
--bs-navbar-brand-color: #fff;
--bs-navbar-brand-hover-color: #fff;
}
.brand-logo {
max-height: 60px;
}
.site-header .brand-logo {
transition: filter .25s ease;
}
.site-header.is-sticky {
background: #fff;
box-shadow: 0 10px 30px rgba(24, 35, 51, .12);
}
.site-header.is-sticky .topbar {
display: none !important;
}
.site-header.is-sticky .navbar {
--bs-navbar-color: var(--dark);
--bs-navbar-hover-color: var(--brand);
--bs-navbar-active-color: var(--brand);
--bs-navbar-brand-color: var(--dark);
--bs-navbar-brand-hover-color: var(--dark);
background: #fff;
border-bottom-color: rgba(24, 35, 51, .08);
}
.site-header.is-sticky .brand-logo {
filter: none;
}
.btn-brand {
--bs-btn-bg: var(--brand);
--bs-btn-border-color: var(--brand);
--bs-btn-color: #fff;
--bs-btn-hover-bg: #e58e1c;
--bs-btn-hover-border-color: #e58e1c;
font-weight: 700;
text-transform: uppercase;
border-radius: 0;
letter-spacing: .04em;
}
.btn-split {
display: inline-flex;
align-items: stretch;
overflow: hidden;
border-radius: 6px;
text-decoration: none;
margin-top: 20px;
padding: 0px;
background: #88c733;
transition: 0.5s;
}
.btn-split:hover {
background: #224272;
}
.btn-split-text,
.btn-split-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-split-text {
padding: 14px 13px;
background: #88c733;
color: white;
font-size: 15px;
letter-spacing: .02em;
font-weight: 500;
}
.btn-split-icon {
min-width: 45px;
padding: 0 10px;
background: #224272;
color: #fff;
margin: 5px;
transition: 0.5s;
}
.btn-split-icon .bi-arrow-right::before {
font-weight: 600 !important;
} .btn-outline-brand {
--bs-btn-color: var(--brand);
--bs-btn-border-color: var(--brand);
--bs-btn-hover-bg: var(--brand);
--bs-btn-hover-border-color: var(--brand);
--bs-btn-hover-color: #fff;
font-weight: 700;
text-transform: uppercase;
border-radius: 0;
}
.hero-carousel .carousel-item {
min-height: 100vh;
color: #fff;
transition: opacity .01s linear 1.45s;
}
.hero-carousel .carousel-inner {
overflow: hidden;
background: var(--dark);
}
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev,
.hero-carousel .carousel-item.active {
display: block;
}
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev {
position: absolute;
inset: 0;
top: 0;
width: 100%;
}
.hero-carousel .carousel-item {
opacity: 0;
transform: none !important;
}
.hero-carousel .carousel-item.active,
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev {
opacity: 1;
}
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev {
z-index: 2;
}
.hero-carousel .carousel-item.active {
z-index: 1;
}
.hero-carousel .carousel-item-next.carousel-item-start,
.hero-carousel .carousel-item-prev.carousel-item-end {
z-index: 3;
}
.hero-carousel .active.carousel-item-start,
.hero-carousel .active.carousel-item-end {
z-index: 1;
}
.hero-slide {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 190px 0 70px;
overflow: hidden;
}
.hero-slide::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--hero-bg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.hero-carousel .carousel-item-next.carousel-item-start .hero-slide::after,
.hero-carousel .carousel-item-prev.carousel-item-end .hero-slide::after {
animation: bannerImageIn 1.45s cubic-bezier(.77, 0, .175, 1) 0s both;
}
.hero-slide::before {
content: "";
position: absolute;
inset: 0;
background: rgb(24 35 51 / 30%);
z-index: 1;
background: linear-gradient(to bottom, rgba(10, 15, 25, 0.05) 0%, rgba(10, 15, 25, 0.3) 40%, rgb(10 15 25 / 56%) 100%);
}
.nav-link {
color: black;
}
.hero-slide>.container {
position: relative;
z-index: 2;
}
.hero-carousel h1,
.hero-carousel h2 {
color: #fff;
font-size: 55px;
}
p.why-choose-description {
width: 600px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
section#services {
padding: 40px 0px;
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
width: 8%;
z-index: 10;
opacity: 1;
transition: none;
margin-top: 100px;
}
.hero-carousel .carousel-indicators {
z-index: 10;
}
.hero-content { margin: 0 auto;
text-align: center;
opacity: 0;
transform: translateY(110px);
}
.hero-badge {
padding: 10px 45px;
color: #fff;
background: rgba(253, 161, 43, .18);
border: 1px solid rgba(253, 161, 43, .65);
border-radius: 999px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.hero-badge-number {
color: var(--brand);
font-size: 35px;
line-height: 1;
font-weight: 900;
}
.hero-cta {
--bs-btn-bg: transparent;
--bs-btn-border-color: #fff;
--bs-btn-color: #fff;
--bs-btn-hover-bg: transparent;
--bs-btn-hover-border-color: transparent;
--bs-btn-hover-color: #fff;
--bs-btn-active-bg: transparent;
--bs-btn-active-border-color: #fff;
--bs-btn-active-color: #fff;
position: relative;
overflow: hidden;
isolation: isolate;
color: #fff;
background: transparent !important;
border: 2px solid #fff;
border-radius: 5px;
padding: 12px 35px !important;
font-size: 15px;
box-shadow: none;
}
.hero-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(135deg, #1e4a77, #1e4a77, #0d824a, #8dcc31);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.hero-cta:hover {
color: #fff;
background: transparent !important;
border-color: transparent;
box-shadow: 0 14px 30px rgba(27, 94, 32, .32);
transform: translateY(-4px);
}
.hero-cta:hover::before {
transform: scaleX(1);
}
.hero-carousel .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .hero-content,
.hero-carousel .carousel-item-next.carousel-item-start .hero-content,
.hero-carousel .carousel-item-prev.carousel-item-end .hero-content {
animation: bannerContentIn 1.45s cubic-bezier(.2, .8, .2, 1) 0s forwards;
}
.hero-carousel .active.carousel-item-start .hero-content,
.hero-carousel .active.carousel-item-end .hero-content {
animation: none;
opacity: 0;
visibility: hidden;
}
@keyframes bannerImageIn {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes bannerContentIn {
from {
opacity: 0;
transform: translateY(110px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.text-brand {
color: #8ecd30 !important;
}
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .nav-link.show {
color: #1d8c44;
}
.site-header .nav-link:focus,
.site-header .nav-link:hover {
color: #1d8c44;
}
.site-header .navbar-nav {
gap: 35px;
}
.site-header .nav-link {
font-size: 15px;
}
.section-padding {
padding: 65px 0;
}
.section-kicker {
color: #74b53b;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
h2.display-6 {
font-weight: 500;
margin-bottom: 20px;
}
.divider {
width: 64px;
height: 3px;
background: var(--brand);
margin: 18px auto 24px;
}
.divider.start {
margin-left: 0;
}
.about-renovex {
position: relative;
overflow: hidden;
background: #fff;
padding: 40px 0px;
}
.about-renovex h2.display-6 {
width: 670px;
}
.about-renovex::before {
content: "";
position: absolute;
left: -160px;
top: 80px;
width: 340px;
height: 340px;
background: radial-gradient(circle, rgba(129, 199, 132, .22), transparent 68%);
}
.about-renovex::after {
content: "";
position: absolute;
right: -180px;
bottom: -160px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(56, 142, 60, .14), transparent 70%);
}
.about-renovex .container {
position: relative;
z-index: 1;
}
.about-renovex-images {
position: relative;
min-height: 100%;
height: 100%;
display: flex;
align-items: stretch;
}
.about-image-frame {
position: relative;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 28px 80px rgba(18, 36, 58, .14);
}
.about-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about-image-frame-large {
width: 100%;
min-height: 100%;
max-height: 590px;
}
.about-image-frame-small {
position: absolute;
right: -8px;
top: 14%;
width: 60%;
min-height: 270px;
border: 12px solid #fff;
border-radius: 28px;
}
.about-years-badge {
position: absolute;
left: 50%;
bottom: 12%;
transform: translateX(-50%);
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 160px;
padding: 20px;
background: linear-gradient(135deg, #ffbf00, #f2a800);
border-radius: 28px;
box-shadow: 0 22px 50px rgba(34, 24, 0, .2);
color: #08233c;
animation: experienceFloat 3s ease-in-out infinite;
}
.badge-number {
font-size: clamp(3rem, 7vw, 4.5rem);
line-height: 1;
font-weight: 900;
}
.badge-label {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
}
.about-feature-panel {
margin-top: 34px;
background: #f5f5f5;
border-radius: 6px;  padding: 24px;
border-left: 7px solid #224272;
}
.about-feature-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.about-feature {
display: flex;
gap: 18px;
align-items: flex-start;
}
.about-feature-icon {
flex: 0 0 auto;
width: 56px;
height: 56px;
display: inline-grid;
place-items: center;
color: white;
background: #224272;
border-radius: 5px;
font-size: 24px; }
.about-feature h3 {
margin-bottom: 8px;
font-size: 17px;
font-weight: 600;
}
.about-feature p {
margin-bottom: 0;
color: #5d6775;
font-size: 15px;
line-height: 1.7;
}
.about-bullet-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 16px;
}
.about-bullet-list li {
position: relative;
padding-left: 26px;
color: #5d6775;
font-size: 16px;
line-height: 1.8;
}
.about-bullet-list li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #f9c00c;
}
.about-visual-card {
overflow: hidden;
border-radius: 28px;
box-shadow: 0 24px 60px rgba(18, 36, 58, .15);
}
.about-visual-card img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.about-years-badge {
position: absolute;
left: -20px;
bottom: -20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 170px;
height: 170px;
border-radius: 50%;
background: linear-gradient(135deg, #ffd34a, #ffb100);
color: #102443;
border: 8px solid #fff;
box-shadow: 0 24px 60px rgba(34, 24, 0, .16);
animation: experienceFloat 3.5s ease-in-out infinite;
}
.badge-number {
font-size: clamp(3.8rem, 7vw, 5.5rem);
line-height: 1;
font-weight: 900;
}
.badge-label {
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-align: center;
}
.about-side-panel::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(212, 245, 221, .09), rgba(56, 142, 60, .28)),
radial-gradient(circle at 92% 8%, rgba(129, 199, 132, .3), transparent 25%);
border-radius: inherit;
}
.about-side-panel>* {
position: relative;
z-index: 1;
}
.about-years-card {
display: flex;
align-items: center;
gap: 18px;
padding: 28px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 26px;
animation: experienceFloat 3s ease-in-out infinite;
}
.about-years-number {
font-size: clamp(4.5rem, 9vw, 7rem);
line-height: .82;
font-weight: 900;
}
.about-years-text {
max-width: 150px;
color: #d4f5dd;
font-size: 18px;
font-weight: 800;
line-height: 1.25;
text-transform: uppercase;
}
.about-commitment-box {
margin-top: 24px;
padding: 26px;
background: #fff;
color: var(--muted);
border-radius: 24px;
}
.about-commitment-title,
.about-check-title {
display: block;
margin-bottom: 10px;
color: var(--dark);
font-size: 20px;
font-weight: 800;
}
.about-commitment-box p {
margin-bottom: 0;
font-size: 16px;
line-height: 1.75;
}
.about-check-list {
margin-top: 24px;
}
.about-check-list .about-check-title {
color: #fff;
}
.about-check-list ul {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.about-check-list li {
display: flex;
gap: 10px;
align-items: flex-start;
color: rgba(255, 255, 255, .84);
font-size: 15px;
line-height: 1.5;
}
.about-check-list i {
color: #81c784;
font-size: 20px;
line-height: 1.2;
}
.about-section {
position: relative;
overflow: hidden; }
.about-section .container {
position: relative;
z-index: 1;
}
.about-text {
font-size: 16px;
line-height: 1.75;
}
.about-creative-card {
position: relative;
overflow: hidden;
padding: 56px;
background: rgba(255, 255, 255, .9);
border: 1px solid rgba(56, 142, 60, .14);
border-radius: 38px;
box-shadow: 0 28px 80px rgba(24, 35, 51, .12);
}
.about-creative-card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(56, 142, 60, .12), transparent 34%),
radial-gradient(circle at 82% 18%, rgba(129, 199, 132, .24), transparent 28%);
}
.about-creative-card>* {
position: relative;
z-index: 1;
}
.about-orbit {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.about-orbit-one {
right: -70px;
top: -70px;
width: 220px;
height: 220px;
background: linear-gradient(135deg, #d4f5dd, #81c784, #388e3c, #1b5e20);
opacity: .22;
animation: orbitFloat 5s ease-in-out infinite;
}
.about-orbit-two {
left: 48%;
bottom: -90px;
width: 180px;
height: 180px;
border: 28px solid rgba(129, 199, 132, .2);
animation: orbitFloat 6s ease-in-out infinite reverse;
}
.about-experience-card {
position: relative;
overflow: hidden;
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 38px;
color: #fff;
background: #12243a;
border-radius: 32px;
box-shadow: 0 24px 64px rgba(18, 36, 58, .24);
animation: experienceFloat 3.4s ease-in-out infinite;
}
.about-experience-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 82% 20%, rgba(129, 199, 132, .34), transparent 26%),
linear-gradient(135deg, rgba(212, 245, 221, .1), rgba(56, 142, 60, .28));
}
.about-experience-card>* {
position: relative;
z-index: 1;
}
.about-experience-eyebrow {
margin-bottom: 20px;
color: #d4f5dd;
font-size: 13px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.about-experience-main {
display: flex;
align-items: center;
gap: 16px;
}
.about-experience-number {
font-size: clamp(4.5rem, 10vw, 7rem);
line-height: .85;
font-weight: 900;
}
.about-experience-label {
max-width: 120px;
font-size: 16px;
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
}
.about-experience-line {
width: 82px;
height: 4px;
margin: 30px 0 22px;
background: linear-gradient(135deg, #d4f5dd, #81c784, #388e3c, #1b5e20);
border-radius: 999px;
}
.about-experience-card p {
margin-bottom: 0;
color: rgba(255, 255, 255, .78);
font-size: 16px;
line-height: 1.75;
}
.about-commitment {
position: relative;
overflow: hidden;
display: flex;
gap: 18px;
align-items: flex-start;
padding: 24px;
background: #12243a;
border-radius: 24px;
color: #fff;
box-shadow: 0 18px 44px rgba(18, 36, 58, .18);
}
.about-commitment::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 90% 10%, rgba(129, 199, 132, .32), transparent 32%),
linear-gradient(135deg, rgba(212, 245, 221, .1), rgba(56, 142, 60, .22));
}
.about-commitment-icon {
position: relative;
z-index: 1;
flex: 0 0 auto;
width: 54px;
height: 54px;
display: inline-grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg, #d4f5dd, #81c784, #388e3c, #1b5e20);
border-radius: 18px;
font-size: 24px;
box-shadow: 0 12px 24px rgba(27, 94, 32, .24);
}
.about-commitment p {
position: relative;
z-index: 1;
margin-bottom: 0;
font-size: 16px;
line-height: 1.75;
}
.about-commitment-title {
position: relative;
z-index: 1;
display: block;
margin-bottom: 6px;
color: #fff;
font-size: 20px;
font-weight: 800;
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.why-choose-item {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
color: var(--dark);
background: rgba(255, 255, 255, .92);
border: 1px solid rgba(56, 142, 60, .14);
border-radius: 18px;
box-shadow: 0 12px 30px rgba(24, 35, 51, .07);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-choose-item::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(212, 245, 221, .75), rgba(129, 199, 132, .18));
opacity: 0;
transition: opacity .25s ease;
}
.why-choose-item:hover {
border-color: rgba(56, 142, 60, .28);
box-shadow: 0 18px 40px rgba(24, 35, 51, .11);
transform: translateY(-5px);
}
.why-choose-item:hover::before {
opacity: 1;
}
.why-choose-item i,
.why-choose-item span {
position: relative;
z-index: 1;
}
.why-choose-item i {
color: #388e3c;
font-size: 22px;
}
.why-choose-item span {
font-size: 15px;
font-weight: 700;
line-height: 1.4;
}
.about-cta {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--dark);
border-color: var(--dark);
border-radius: 999px;
}
.about-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(135deg, #d4f5dd, #81c784, #388e3c, #1b5e20);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.about-cta:hover {
color: #fff;
background: transparent;
border-color: transparent;
transform: translateY(-3px);
}
.about-cta:hover::before {
transform: scaleX(1);
}
@keyframes experienceFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}
@keyframes orbitFloat {
0%,
100% {
transform: translateY(0) rotate(12deg);
}
50% {
transform: translateY(-16px) rotate(18deg);
}
}
.service-card,
.team-card,
.blog-card,
.stat-card {
border: 0;
border-radius: 0;
box-shadow: 0 15px 35px rgba(24, 35, 51, .08);
transition: transform .28s ease, box-shadow .28s ease;
}
.service-item {
position: relative;
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 18px 45px rgba(24, 35, 51, .08);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
background: #fff;
border: 1px solid #00000014;
border-top: 0;
}
.services-slider {
--services-visible: 3;
--services-gap: 24px;
}
.services-slider-viewport {
overflow: hidden;
padding: 14px 2px 22px;
margin: -14px -2px -22px;
}
.services-slider-track {
display: flex;
gap: var(--services-gap);
transition: transform 0.45s ease;
will-change: transform;
}
.services-slider-slide {
flex: 0 0 calc((100% - 48px) / 3);
min-width: 0;
}
.services-slider-controls {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 28px;
}
.services-slider-button {
width: 52px;
height: 52px;
border: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #224272;
color: #fff;
font-size: 1.2rem;
transition: background-color .25s ease, opacity .25s ease, transform .25s ease;
}
.services-slider-button:hover:not(:disabled) {
background: #88c733;
transform: translateY(-2px);
}
.services-slider-button:focus-visible {
outline: 3px solid rgba(136, 199, 51, .4);
outline-offset: 3px;
}
.services-slider-button:disabled {
opacity: .35;
cursor: default;
}
@media (max-width: 991.98px) {
.services-slider {
--services-visible: 2;
}
.services-slider-slide {
flex-basis: calc((100% - 24px) / 2);
}
}
@media (max-width: 575.98px) {
.services-slider {
--services-visible: 1;
--services-gap: 16px;
}
.services-slider-controls {
justify-content: center;
margin-top: 22px;
}
.services-slider-slide {
flex-basis: 100%;
}
.services-slider-button {
width: 46px;
height: 46px;
}
}
@media (prefers-reduced-motion: reduce) {
.services-slider-track {
transition: none;
}
}
.service-item .service-item-topline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: #7186a4;
transition: background .3s ease;
z-index: 3;
pointer-events: none;
}
.service-item:hover {
transform: translateY(-12px);
box-shadow: 0 30px 65px rgba(24, 35, 51, .16);
}
.service-item:hover .service-item-topline {
background: linear-gradient(135deg, #067552 0%, #64a842 45%, #8ecd31 100%);
}
.service-item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
padding: 28px 28px 16px;
transition: transform .3s ease;
}
.service-item-header h3 {
margin-bottom: 0;
font-size: 18px;
font-weight: 600;
color: black;
transition: color .3s ease;
}
.service-item-number {
color: var(--dark);
font-size: 1.5rem;
font-weight: 900;
}
.service-item-desc {
padding: 0 28px 24px;
margin-bottom: 0;
color: #5d6775;
line-height: 1.8;
font-size: 0.95rem;
min-height: 110px; overflow: hidden;
transition: color .3s ease, transform .3s ease;
}
.service-item-image {
margin-top: auto;
}
.service-item:hover .service-item-header {
transform: translateY(-4px);
}
.service-item:hover .service-item-header h3 {
color: #224272;
}
.service-item:hover .service-item-desc {
color: #455468;
transform: translateY(-4px);
}
.service-item:hover .service-item-image:after {
background: rgba(34, 66, 114, 0.12);
}
.why-choose-block {
position: relative;
border: 1px solid rgb(0 0 0 / 2%);
border-radius: 10px;
background: rgb(34 66 114);
backdrop-filter: blur(18px);
overflow: hidden;
box-shadow: 0 24px 80px rgba(18, 35, 51, .08);
transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease, background-color .32s ease;
}
.why-choose-block::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: linear-gradient(180deg, rgb(255 255 255), rgb(255 255 255));
z-index: 2;
}
.why-choose-block::after {
content: "";
position: absolute;
inset: -35% auto -35% -120%;
width: 70%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
transform: skewX(-24deg);
opacity: 0;
pointer-events: none;
}
.why-choose-block .why-choose-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #067552 0%, #64a842 45%, #8ecd31 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform .38s ease;
z-index: 0;
pointer-events: none;
}
.why-choose-block:hover {
transform: translateY(-10px) scale(1.02);
border-color: rgba(255, 255, 255, .12);
box-shadow: 0 28px 70px rgba(24, 35, 51, .18);
border: 1px solid #1d8c44;
}
.why-choose-block:hover .why-choose-bg {
transform: scaleX(1);
}
.why-choose-block:hover::after {
opacity: 1;
animation: whyChooseShine .9s ease;
}
.why-choose-head {
display: flex;
gap: 16px;
align-items: flex-start;
position: relative;
z-index: 1;
}
.why-choose-icon {
display: inline-grid;
place-items: center;
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: 18px;
background: #e2edfd;
color: #102443;
font-size: 1.4rem;
transition: transform .32s ease, box-shadow .32s ease, background-color .32s ease;
}
.why-choose-head h3 {
margin-bottom: 6px;
font-size: 1.05rem;
color: white;
transition: transform .32s ease;
}
.why-choose-meta {
margin: 0;
color: #5d6775;
font-size: 0.95rem;
line-height: 1.6;
}
.why-choose-block p {
margin-top: 13px;
margin-bottom: 0;
color: #ffffffdb;
line-height: 1.8;
font-size: 0.95rem;
transition: color .32s ease;
position: relative;
z-index: 1;
}
.why-choose-block:hover .why-choose-icon {
transform: translateY(-6px) rotate(-6deg) scale(1.08);
box-shadow: 0 18px 34px rgba(226, 237, 253, .22);
background: #fff;
}
.why-choose-block:hover .why-choose-head h3 {
transform: translateX(4px);
}
.why-choose-block:hover p {
color: #fff;
}
section#why-choose {
padding: 30px 0px;
}
@keyframes whyChooseShine {
from {
left: -120%;
}
to {
left: 140%;
}
}
.service-item-image:after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
transition: background-color .3s ease;
}
.service-item-image {
overflow: hidden;
border-top: 1px solid rgba(24, 35, 51, .06);
position: relative;
}
.service-item-image img {
width: 100%;
display: block;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .38s ease;
}
.service-item:hover .service-item-image img {
transform: scale(1.08);
}
.service-card:hover,
.team-card:hover,
.blog-card:hover,
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 22px 45px rgba(24, 35, 51, .16);
}
.service-card img,
.blog-card img {
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .35s ease;
}
.team-card img {
aspect-ratio: 360 / 445;
object-fit: cover;
transition: transform .35s ease;
}
.service-card:hover img,
.team-card:hover img,
.blog-card:hover img {
transform: scale(1.05);
}
.service-card,
.team-card,
.blog-card {
overflow: hidden;
}
.btn,
.nav-link,
.site-footer a,
.text-brand {
transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover {
transform: translateY(-2px);
}
.dark-section {
background: var(--dark);
color: rgba(255, 255, 255, .75);
}
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5 {
color: #fff;
}
.cta-strip {
background: var(--brand);
color: #fff;
font-weight: 700;
}
.footer-contact-section {
padding-top: 5rem;
padding-bottom: 0;
margin-bottom: -150px;
position: relative;
z-index: 2;
}
.site-footer {
padding-top: 10%;
background: #224272;
}
.more-btn-margin {
margin-top: 30px;
}
.footer-contact-box {
position: relative;
padding: 3rem 2.5rem;
border-radius: 5px 50px 5px 50px;
background: linear-gradient(135deg, #067552 0%, #64a842 45%, #8ecd31 100%);
box-shadow: 0 30px 70px rgba(0, 0, 0, .16);
overflow: hidden;
width: 85%;
margin-right: auto;
margin-left: auto;
}
p.footer-brand-logo-content {
color: #ffffffe8;
margin-top: 10px;
font-size: 15px;
}
.footer-menus h3 {
font-size: 17px;
color: white;
margin-bottom: 25px;
}
.footer-menus p {
font-size: 15px;
display: flex;
}
.site-footer h3,
.site-footer p,
.site-footer li,
.site-footer a {
color: rgba(255, 255, 255, .9);
}
.site-footer a {
text-decoration: none;
}
.site-footer a:hover {
color: #ffffff;
}
.footer-brand .brand-logo {
max-height: 50px;
filter: brightness(0) invert(1);
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .18);
color: #fff;
background: rgba(255, 255, 255, .05);
}
.footer-social a:hover {
background: rgba(255, 255, 255, .12);
}
.footer-links {
margin-top: 1rem;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links li a {
color: rgba(255, 255, 255, .8);
font-size: 15px;
}
.footer-contact-info {
color: rgba(255, 255, 255, .75);
line-height: 1.8;
font-size: 15px;
}
.footer-bottom {
opacity: .85;
border-top: 1px solid #ffffff26;
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
font-size: 15px;
color: #ffffffeb;
}
.footer-bottom a {
color: #c2ff6b !important;
}
.footer-bottom a:hover {
color: #8ecd30;
}
.footer-contact-box::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.12) 0, transparent 30%),
radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.08) 0, transparent 25%);
}
.footer-contact-box::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
bottom: -100px;
left: -100px;
}
.footer-contact-box>.row {
position: relative;
z-index: 1;
}
.contact-subhead {
color: #ffffffe3 !important;
font-style: normal !important;
}
.footer-contact-box h2 {
font-size: 33px;
line-height: 1.05; line-height: 42px;
margin-bottom: 5px;
}
.footer-contact-box p {
color: rgb(255 255 255);
font-style: oblique;
font-size: 14px;
}
.btn-contact {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 20px;
min-width: 250px;
border-radius: 999px;
background: #fff;
color: #224272;
font-weight: 600;
border: 0;
box-shadow: 0 18px 30px rgba(0, 0, 0, .12);
font-size: 16px;
}
.btn-contact:hover {
transform: translateY(-1px);
background: #f8f9fb;
}
.btn-contact i {
font-size: 1rem;
}
@media (max-width: 767.98px) {
.about-renovex h2.display-6 {
width: auto;
}
.footer-contact-box {
padding: 2rem 1.5rem;
}
.footer-contact-box h2 {
font-size: 20px;
line-height: 30px;
}
.text-lg-end {
text-align: left !important;
}
}
.process-num {
width: 54px;
height: 54px;
background: var(--brand);
color: #fff;
display: inline-grid;
place-items: center;
font-weight: 800;
margin-bottom: 18px;
transition: transform .28s ease, background-color .28s ease;
}
.process-step:hover .process-num {
transform: rotate(8deg) scale(1.08);
background: var(--dark);
}
.testimonial-img {
width: 86px;
height: 86px;
object-fit: cover;
}
.site-footer a {
color: white;
text-decoration: none;
}
.site-footer a:hover {
color: #8ecd30;
}
@media (max-width: 767.98px) {
.hero-carousel .carousel-item,
.hero-slide {
min-height: 500px;
}
.hero-slide {
padding: 140px 0 60px;
}
.about-creative-card {
padding: 32px 24px;
border-radius: 28px;
}
.about-feature {
flex-direction: column;
}
.about-side-panel {
padding: 24px;
border-radius: 26px;
}
.about-years-card {
padding: 22px;
}
.about-years-number {
font-size: 64px;
}
.about-experience-card {
min-height: auto;
padding: 30px 24px;
margin-top: 10px;
}
.about-experience-number {
font-size: 64px;
}
.why-choose-grid {
grid-template-columns: 1fr;
}
.about-commitment,
.why-choose-item {
padding: 22px;
transform: none !important;
}
.about-commitment {
flex-direction: column;
}
.section-padding {
padding: 64px 0;
}
}
@media screen and (max-width: 600px) {
.about-renovex h2.display-6 {
width: auto;
}
p.why-choose-description {
width: 100%;
text-align: justify;
color: #000000e0;
margin-bottom: 0px;
}
p.service-head-description {
text-align: justify;
color: #000000e0;
margin-bottom: 0px;
}
.footer-contact-section {
margin-bottom: 0px;
}
h2.display-6,
.section-kicker {
text-align: left;
}
h2.display-6 {
font-size: 25px;
}
.hero-carousel h1,
.hero-carousel h2 {
font-size: 30px;
margin-bottom: 10px !important;
}
.hero-content p {
font-size: 16px;
margin-bottom: 20px !important;
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
display: none;
}
.about-image-frame-large {
max-height: 475px;
border-radius: 10px;
}
.about-text {
text-align: justify;
color: #000000d4;
}
.about-feature-row {
display: flex;
flex-direction: column;
}
.btn-split {
margin-top: 50px;
}
.site-header .navbar-nav {
gap: 10px;
background: #224272;
padding: 20px;
}
.site-header .nav-link {
color: white;
}
}
@media only screen and (min-width: 601px) and (max-width: 991px) {
.about-renovex h2.display-6 {
width: 560px;
}
.site-header .navbar-nav {
gap: 10px;
background: #224272;
padding: 20px;
}
.site-header .nav-link {
color: white;
}
.hero-slide {
min-height: 400px;
}
.hero-carousel .carousel-item {
min-height: 400px;
}
.hero-carousel h1,
.hero-carousel h2 {
font-size: 40px;
}
.lead {
font-size: 16px;
}
.about-image-frame-large {
width: 65%;
margin-right: auto;
margin-left: auto;
}
.footer-contact-section {
margin-bottom: 0px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-slide {
min-height: 600px;
}
.hero-carousel .carousel-item {
min-height: 600px;
}
.hero-carousel h1,
.hero-carousel h2 {
color: #fff;
font-size: 40px;
}
.about-renovex h2.display-6 {
width: 560px;
}
.lead {
font-size: 16px;
}
.about-feature-row {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.why-choose-head {
flex-direction: column;
}
.why-choose-block p {
line-height: 24px;
}
.footer-contact-box {
width: 100%;
}
.site-footer {
padding-top: 15%;
}
.service-item-desc {
line-height: 22px;
font-size: 15px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero-carousel h1,
.hero-carousel h2 {
font-size: 55px;
}
.footer-contact-box {
width: 95%;
}
.site-footer {
padding-top: 13%;
}
}
@media (max-width: 991px) { .navbar {
padding: 10px 0 !important;
} .brand-logo {
max-height: 40px;
} .navbar-toggler {
border: none;
padding: 6px 10px;
}
.navbar-toggler:focus {
box-shadow: none;
} #mainNav {
background: #fff;
margin-top: 10px;
padding: 15px;
border-radius: 10px;
} .navbar-nav {
width: 100%;
align-items: flex-start !important;
}
.navbar-nav .nav-item {
width: 100%;
}
.navbar-nav .nav-link {
width: 100%;
padding: 12px 10px;
border-bottom: 1px solid #eee;
}
.navbar-nav .nav-link:last-child {
border-bottom: none;
} .navbar-nav .nav-link.active {
color: #88c733;
}
}
html {
scroll-behavior: smooth;
} @media (min-width: 992px) {
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.navbar-nav .nav-item.dropdown .dropdown-menu {
display: block !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(10px) !important;
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
margin-top: 0 !important;
} .navbar-nav .nav-item.dropdown {
position: relative;
}
.navbar-nav .nav-item.dropdown::after {
content: "";
position: absolute;
bottom: -15px;
left: 0;
right: 0;
height: 15px;
background: transparent;
z-index: 1000;
}
}
.navbar .dropdown-menu {
background-color: #ffffff;
border: none;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
padding: 10px 0;
margin-top: 0;
}
.navbar .dropdown-item {
font-size: 0.95rem !important;
color: var(--dark) !important;
padding: 8px 24px;
font-weight: 500;
text-transform: capitalize;
transition: all 0.25s ease;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
background-color: rgb(240 246 255);
color: #88c733 !important;
padding-left: 28px;
}
.navbar .dropdown-item.active {
background-color: transparent;
color: #88c733 !important;
} .navbar .dropdown-toggle::after {
display: inline-block;
margin-left: 0.35em;
vertical-align: 0.25em;
content: "";
border-top: 0.35em solid;
border-right: 0.35em solid transparent;
border-bottom: 0;
border-left: 0.35em solid transparent;
transition: transform 0.3s ease;
}
.navbar .nav-item.dropdown:hover .dropdown-toggle::after {
transform: rotate(180deg);
} @media (max-width: 767px) {
.about-renovex h2.display-6 {
width: auto;
} .section-kicker,
.display-6,
.service-head-description,
.why-choose-description {
text-align: center !important;
margin-left: auto;
margin-right: auto;
} .about-renovex .col-lg-7 {
text-align: center;
} .about-renovex h2 {
text-align: center;
} .about-text {
justify-content: center;
} .about-feature-row {
flex-direction: column;
gap: 20px;
}
.about-feature {
justify-content: center;
text-align: center;
flex-direction: column;
align-items: center;
}
.about-feature-icon {
margin-bottom: 10px;
} .btn-split {
display: inline-flex;
justify-content: center;
margin-top: 30px;
} .service-item {
text-align: center;
} .why-choose-head {
flex-direction: column;
text-align: center;
align-items: center;
}
.why-choose-icon {
margin-bottom: 10px;
} .hero-content h1,
.hero-content p {
text-align: center;
}
.hero-content {
padding-left: 10px;
padding-right: 10px;
}
.hero-content h1 {
font-size: 32px; }
.hero-content p {
font-size: 16px;
}
.service-item {
text-align: center;
}
.service-item-header h3 {
margin-left: auto;
margin-right: auto;
}
} .tr-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.tr-stat-card {
background: #ffffff;
border: 1px solid rgba(24, 35, 51, 0.08);
border-radius: 8px;
box-shadow: 0 5px 15px rgba(24, 35, 51, 0.03);
transition: all 0.3s ease;
}
.tr-stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(24, 35, 51, 0.08);
border-color: rgba(136, 199, 51, 0.3);
}
.tr-stat-number {
font-size: 2.8rem;
font-weight: 800;
color: #88c733; line-height: 1.1;
}
.tr-stat-label {
font-size: 0.85rem !important;
letter-spacing: 0.05em;
color: var(--muted);
}
.tr-project-card {
background: #ffffff;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(24, 35, 51, 0.06);
height: 100%;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.tr-project-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(24, 35, 51, 0.1);
border-color: rgba(136, 199, 51, 0.3);
}
.tr-project-img-wrapper {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
background-color: #f8f9fa;
}
.tr-project-img {
object-fit: cover;
height: 100%;
width: 100%;
transition: transform 0.5s ease;
}
.tr-project-card:hover .tr-project-img {
transform: scale(1.08);
}
.tr-project-img-placeholder {
height: 100%;
width: 100%;
}
.tr-project-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(24, 35, 51, 0.9) 0%, rgba(24, 35, 51, 0.4) 60%, rgba(24, 35, 51, 0.1) 100%);
opacity: 0;
transition: opacity 0.35s ease;
}
.tr-project-card:hover .tr-project-overlay {
opacity: 1;
}
.tr-project-location-badge {
align-self: flex-start;
background: #88c733;
color: #ffffff;
padding: 4px 12px;
border-radius: 50px;
font-size: 0.75rem !important;
font-weight: 600;
}
.tr-project-overlay h3 {
font-size: 1.25rem;
}
.tr-project-info {
flex-grow: 1;
border-top: 1px solid rgba(24, 35, 51, 0.06);
background: #ffffff;
}
.text-brand {
color: #88c733 !important;
}
@media (max-width: 576px) {
.tr-stats-grid {
grid-template-columns: 1fr;
}
}