@charset "utf-8";

body {
font-family: "Poppins", sans-serif;
color: #1f1a1d;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 24px;
background: #fff;
font-weight: 400;
overflow-x: hidden;
}
:root {
--primary: #1a1a1a;
--secondary: #2a2a2a;
--accent: #f28c28;
--accent-hover: #e67e22;
--accent-light: #ff5a2c;
--white: #ffffff;
--off-white: #f8f8f8;
--text: #333333;
--text-light: #6b7280;
--border: #ececec;
}
* {
border: medium none;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Outfit", sans-serif;
font-weight: 700;
}
ul {
list-style-type: none;
margin: 0;
}
a {
text-decoration: none;
outline: none !important;
margin: 0;
}
a:hover {
text-decoration: none;
outline: none;
}
textarea {
resize: none;
}
.mar-top {
margin-top: 30px;
}
button:focus {
outline: none;
border: none;
}
p {
line-height: 26px;
font-size: 14px;
font-weight: 400;
color: #535151;
margin: 0;
}
input:focus {
outline: none;
border: none;
} ::selection {
background: #f47b20;
color: #ffffff;
}
::-moz-selection {
background: #f47b20;
color: #ffffff;
} #preloader {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(
circle at top left,
rgba(244, 123, 32, 0.08),
transparent 35%
),
radial-gradient(
circle at bottom right,
rgba(240, 181, 45, 0.08),
transparent 35%
),
linear-gradient(135deg, #ffffff, #faf9f7, #f5f2ee);
z-index: 999999;
transition: 0.6s ease;
}
.loader-content {
text-align: center;
position: relative;
z-index: 2;
} .loader-content img {
width: 220px;
height: auto;
margin: 0 auto 35px;
animation: pulseLogo 2s ease-in-out infinite;
} .paint-loader {
width: 280px;
height: 10px;
margin: 0 auto;
overflow: hidden;
border-radius: 50px;
background: rgba(31, 26, 29, 0.08);
position: relative;
}
.paint-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
border-radius: 50px;
background: linear-gradient(90deg, #f47b20, #f0b52d, #f47b20);
animation: paintFill 2.2s ease infinite;
} .loader-content span {
display: block;
margin-top: 20px;
color: #000;
font-size: 13px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
} @keyframes pulseLogo {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes paintFill {
0% {
width: 0;
}
100% {
width: 100%;
}
} body.loaded #preloader {
opacity: 0;
visibility: hidden;
} .paint-loader {
width: 260px;
height: 10px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50px;
overflow: hidden;
margin: auto;
}
.paint-fill {
width: 0;
height: 100%;
background: linear-gradient(90deg, #f47b20, #f0b52d);
animation: paintFill 2s ease infinite;
}
.loader-content span {
display: block;
margin-top: 20px;
color: #fff;
letter-spacing: 2px;
font-size: 13px;
text-transform: uppercase;
}
#preloader .loader-content span{
color: #1f1a1d;
} @keyframes paintFill {
0% {
width: 0;
}
100% {
width: 100%;
}
} .section-heading {    margin-bottom: 60px;}.section-subtitle {    display: inline-block;    font-family: "Outfit", sans-serif;    font-size: 14px;    font-weight: 700;    letter-spacing: 2px;    text-transform: uppercase;    color: #f47b20;    margin-bottom: 12px;}.section-title {    font-family: "Outfit", sans-serif;    font-size: 52px;    font-weight: 800;    line-height: 1.2;    color: #1a1a1d;    margin-bottom: 18px;}.section-description {    max-width: 700px;    margin: 0 auto;    font-size: 16px;    line-height: 1.8;    color: #666;} @media (max-width: 1199px) {    .section-heading {        margin-bottom: 50px;    }    .section-title {        font-size: 46px;    }} @media (max-width: 991px) {    .section-heading {        margin-bottom: 45px;    }    .section-subtitle {        font-size: 13px;        letter-spacing: 1.8px;    }    .section-title {        font-size: 40px;    }    .section-description {        max-width: 100%;        font-size: 15px;    }} @media (max-width: 767px) {    .section-heading {        margin-bottom: 35px;        text-align: center;    }    .section-subtitle {        font-size: 12px;        margin-bottom: 10px;    }    .section-title {        font-size: 32px;        line-height: 1.3;        margin-bottom: 15px;    }    .section-description {        font-size: 15px;        line-height: 1.7;    }} @media (max-width: 575px) {    .section-heading {        margin-bottom: 30px;    }    .section-title {        font-size: 28px;    }    .section-description {        font-size: 14px;        line-height: 1.7;    }} .header-wrap {
position: absolute;
top: 20px;
left: 0;
width: 100%;
z-index: 9999;
} .main-navbar {
width: 90%;
max-width: 1280px;
margin: auto;
padding: 12px 25px;
border-radius: 18px;
background: rgba(15, 23, 42, 0.78);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: 0.35s ease;
}
.main-navbar.sticky {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
background: rgba(15, 23, 42, 0.95);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
} .main-navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
} .nav-logo {
position: relative;
display: flex;
align-items: center;
justify-content: center;
} .nav-logo::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(rgb(255 255 255 / 38%), #00000000 70%);
filter: blur(14px);
z-index: -1;
}
.nav-logo img {
height: 78px;
width: auto;
transition: 0.35s ease;
}
.main-navbar.sticky .nav-logo img {
height: 68px;
} .nav-links {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-size: 14px;
transition: 0.3s ease;
position: relative;
font-family: "Outfit", sans-serif;
font-weight: 400;
letter-spacing: 3px;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
background: #f47b20;
transition: 0.3s ease;
}
.nav-links a:hover {
color: #f0b52d;
}
.nav-links a:hover::after {
width: 100%;
} .nav-phone {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 50px;
text-decoration: none;
color: #fff;
font-weight: 600;
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff5a36);
transition: 0.35s ease;
}
.nav-phone:hover {
color: #fff;
transform: translateY(-2px);
} .menu-btn {
display: none;
background: none;
border: none;
cursor: pointer;
}
.menu-btn span {
display: block;
width: 24px;
height: 2px;
background: #fff;
margin: 5px 0;
border-radius: 10px;
} .mobile-sidebar {
position: fixed;
top: 0;
right: -320px;
width: 320px;
height: 100vh;
background: #0f172a;
padding: 30px;
z-index: 99999;
transition: 0.35s ease;
}
.mobile-sidebar.active {
right: 0;
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
.sidebar-header img {
height: 60px;
}
.close-sidebar {
background: none;
border: none;
color: #fff;
font-size: 32px;
cursor: pointer;
}
.mobile-sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-sidebar li {
margin-bottom: 18px;
}
.mobile-sidebar a {
color: #fff;
text-decoration: none;
font-size: 16px;
} .menu-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
opacity: 0;
visibility: hidden;
transition: 0.35s ease;
z-index: 99998;
}
.menu-overlay.active {
opacity: 1;
visibility: visible;
} @media (max-width: 991px) {
.nav-links,
.nav-phone {
display: none;
}
.menu-btn {
display: block;
}
.nav-logo img {
height: 60px;
}
.main-navbar {
width: 94%;
}
}
@media (max-width: 767px) {
.main-navbar {
width: 92%;
padding: 10px 18px;
}
.mobile-sidebar {
width: 280px;
}
.nav-logo::before {
width: 90px;
height: 90px;
}
.nav-logo img {
height: 58px;
}
} .hero-section {
position: relative;
height: 100vh;
overflow: hidden;
}
.heroSwiper,
.heroSwiper .swiper-slide {
width: 100%;
height: 100%;
}
.heroSwiper .swiper-slide {
position: relative;
} .hero-image {
position: absolute;
inset: 0;
overflow: hidden;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
animation: kenBurns 12s linear infinite;
}
@keyframes kenBurns {
from {
transform: scale(1);
}
to {
transform: scale(1.12);
}
} .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.82) 0%,
rgba(0, 0, 0, 0.6) 45%,
rgba(0, 0, 0, 0.25) 100%
);
z-index: 1;
} .hero-content {
position: relative;
z-index: 2;
max-width: 720px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
} .hero-content::before {
content: "";
position: absolute;
left: -25px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 140px;
border-radius: 20px;
background: linear-gradient(180deg, #f0b52d, #f47b20, #ff3b30);
} .hero-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
padding: 10px 18px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #f0b52d;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 20px;
}
.hero-subtitle::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #f47b20;
} .hero-content h1 {
font-family: "Outfit", sans-serif;
font-size: 78px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -2px;
margin-bottom: 25px;
color: #fff;
text-shadow: 0 5px 25px rgba(0, 0, 0, 0.35);
} .hero-content p {
max-width: 600px;
font-size: 18px;
line-height: 1.9;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 35px;
} .hero-buttons {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.btn-phone {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
color: #fff;
text-decoration: none;
font-weight: 600;
transition: 0.35s ease;
}
.btn-phone:hover {
color: #fff;
background: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
} .hero-badge {
position: absolute;
right: -80px;
bottom: 80px;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.hero-badge strong {
display: block;
font-size: 48px;
font-weight: 800;
line-height: 1;
}
.hero-badge span {
font-size: 14px;
font-weight: 600;
} .heroSwiper .swiper-pagination {
bottom: 45px !important;
}
.heroSwiper .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: #fff;
opacity: 0.4;
transition: 0.35s;
}
.heroSwiper .swiper-pagination-bullet-active {
width: 40px;
border-radius: 30px;
opacity: 1;
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
}
.hero-content > * {
opacity: 0;
transform: translateY(40px);
}
.swiper-slide-active .hero-subtitle {
opacity: 1;
transform: translateY(0);
transition: 0.8s ease 0.2s;
}
.swiper-slide-active h1 {
opacity: 1;
transform: translateY(0);
transition: 0.8s ease 0.4s;
}
.swiper-slide-active p {
opacity: 1;
transform: translateY(0);
transition: 0.8s ease 0.6s;
}
.swiper-slide-active .hero-buttons {
opacity: 1;
transform: translateY(0);
transition: 0.8s ease 0.8s;
}
[data-aos] {
will-change: transform, opacity;
} .swiper-slide-active .hero-content {
animation: heroReveal 0.9s ease;
}
@keyframes heroReveal {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 991px) {
.hero-content {
max-width: 100%;
}
.hero-content::before {
display: none;
}
.hero-content h1 {
font-size: 58px;
}
.hero-badge {
display: none;
}
} @media (max-width: 767px) {
.hero-section {
height: 85vh;
}
.hero-content {
height: 85vh;
justify-content: flex-start;
padding-top: 140px;
text-align: center;
align-items: center;
}
.hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.hero-content h1 {
font-size: 42px;
margin-bottom: 15px;
}
.hero-content p {
font-size: 16px;
margin-bottom: 25px;
}
.hero-buttons {
flex-direction: column;
width: 100%;
}
.hero-buttons a {
width: 100%;
}
.heroSwiper .swiper-pagination {
bottom: 20px !important;
}
} @media (max-width: 575px) {
.hero-content h1 {
font-size: 34px;
}
.hero-content p {
font-size: 15px;
}
.hero-subtitle {
font-size: 11px;
}
} .stats-section {
padding: 50px 0;
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
position: relative;
overflow: hidden;
}
.stats-section::before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
top: -150px;
left: -150px;
}
.stats-section::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
bottom: -100px;
right: -100px;
} .stats-section .section-subtitle,
.stats-section .section-title,
.stats-section .section-description {
color: #fff;
} .section-heading {    margin-bottom: 60px;}.section-subtitle {    display: inline-block;    font-family: "Outfit", sans-serif;    font-size: 14px;    font-weight: 700;    letter-spacing: 2px;    text-transform: uppercase;    color: #f47b20;    margin-bottom: 12px;}.section-title {    font-family: "Outfit", sans-serif;    font-size: 52px;    font-weight: 800;    line-height: 1.2;    color: #1a1a1d;    margin-bottom: 18px;}.section-description {    max-width: 700px;    margin: 0 auto;    font-size: 16px;    line-height: 1.8;    color: #666;} @media (max-width: 1199px) {    .section-heading {        margin-bottom: 50px;    }    .section-title {        font-size: 46px;    }} @media (max-width: 991px) {    .section-heading {        margin-bottom: 45px;    }    .section-subtitle {        font-size: 13px;        letter-spacing: 1.8px;    }    .section-title {        font-size: 40px;    }    .section-description {        max-width: 100%;        font-size: 15px;    }} @media (max-width: 767px) {    .section-heading {        margin-bottom: 35px;        text-align: center;    }    .section-subtitle {        font-size: 12px;        margin-bottom: 10px;    }    .section-title {        font-size: 32px;        line-height: 1.3;        margin-bottom: 15px;    }    .section-description {        font-size: 15px;        line-height: 1.7;    }} @media (max-width: 575px) {    .section-heading {        margin-bottom: 30px;    }    .section-title {        font-size: 28px;    }    .section-description {        font-size: 14px;        line-height: 1.7;    }} .stat-card {
height: 100%;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 24px;
padding: 35px 25px;
text-align: center;
transition: 0.35s ease;
}
.stat-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.18);
} .stat-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.stat-icon i {
font-size: 30px;
color: #f47b20;
} .stat-card h3 {
font-family: "Outfit", sans-serif;
font-size: 58px;
font-weight: 800;
color: #fff;
margin-bottom: 10px;
} .stat-card p {
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
}  @media (max-width: 1199px) {
.stat-card {
padding: 30px 20px;
}
.stat-card h3 {
font-size: 48px;
}
.stat-icon {
width: 70px;
height: 70px;
}
.stat-icon i {
font-size: 26px;
}
} @media (max-width: 991px) {
.stats-section {
padding: 100px 0;
}
.stats-section .row {
row-gap: 16px;
}
.stats-section .col-md-6 {
padding-left: 8px;
padding-right: 8px;
}
.stat-card {
padding: 30px 20px;
margin: 0;
}
.stat-card h3 {
font-size: 42px;
}
.stat-card p {
font-size: 13px;
}
.stat-card:hover {
transform: none;
}
} @media (max-width: 767px) {
.stats-section {
padding: 80px 0;
}
.stats-section .row {
row-gap: 12px;
}
.stats-section .col-6 {
padding-left: 6px;
padding-right: 6px;
}
.stat-card {
padding: 25px 15px;
border-radius: 20px;
margin: 0;
}
.stat-card:hover {
transform: none;
}
.stat-icon {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.stat-icon i {
font-size: 22px;
}
.stat-card h3 {
font-size: 34px;
margin-bottom: 8px;
}
.stat-card p {
font-size: 11px;
line-height: 1.4;
}
} @media (max-width: 575px) {
.stats-section {
padding: 70px 0;
}
.stats-section::before,
.stats-section::after {
display: none;
}
.stats-section .col-6 {
padding-left: 8px;
padding-right: 8px;
}
.stat-card {
padding: 22px 12px;
}
.stat-icon {
width: 55px;
height: 55px;
}
.stat-icon i {
font-size: 20px;
}
.stat-card h3 {
font-size: 30px;
}
} @media (min-width: 992px) {
.stat-card:hover {
transform: translateY(-10px);
}
} .services-section {
background: #f8f9fa;
position: relative;
overflow: hidden;
padding: 60px 0;
} .section-heading {
margin-bottom: 60px;
}
.section-subtitle {
display: inline-block;
font-family: "Outfit", sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #f47b20;
margin-bottom: 12px;
}
.section-title {
font-family: "Outfit", sans-serif;
font-size: 52px;
font-weight: 800;
color: #1a1a1d;
margin-bottom: 15px;
}
.section-description {
max-width: 700px;
margin: 0 auto;
color: #666;
line-height: 1.8;
} .service-card {
background: #fff;
border-radius: 24px;
overflow: hidden;
border: 1px solid #ececec;
transition: 0.35s ease;
margin: 10px;
}
.service-card:hover {
transform: translateY(-8px);
border-color: #f47b20;
}
.service-img {
height: 260px;
overflow: hidden;
}
.service-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.7s ease;
}
.service-card:hover img {
transform: scale(1.08);
}
.service-content {
padding: 30px;
min-height: 300px;
display: flex;
flex-direction: column;
}
.service-content h3 {
min-height: 70px;
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.service-content p {
min-height: 90px;
margin-bottom: 25px;
}
.service-content .btn-primary {
margin-top: auto;
}
.service-number {
display: inline-block;
color: #f47b20;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 10px;
}
.service-content h3 {
min-height: 70px;
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.service-content p {
font-family: "Poppins", sans-serif;
font-weight: 400;
color: #666;
line-height: 1.8;
margin-bottom: 25px;
}  @media (max-width: 1199px) {
.service-img {
height: 240px;
}
.service-content {
min-height: 280px;
}
.service-content h3 {
font-size: 26px;
min-height: 65px;
}
.service-content p {
min-height: 85px;
}
} @media (max-width: 991px) {
.services-section {
padding: 100px 0;
}
.service-card {
margin: 8px;
}
.service-img {
height: 220px;
}
.service-content {
padding: 25px;
min-height: 260px;
}
.service-content h3 {
font-size: 24px;
min-height: 60px;
display: flex;
align-items: flex-start;
}
.service-content p {
min-height: 80px;
margin-bottom: 20px;
}
.service-content .btn-primary {
margin-top: auto;
}
} @media (max-width: 767px) {
.services-section {
padding: 80px 0;
}
.service-card {
margin: 0;
}
.service-img {
height: 220px;
}
.service-content {
padding: 25px 20px;
min-height: auto;
}
.service-content h3 {
min-height: auto;
font-size: 22px;
margin-bottom: 12px;
}
.service-content p {
min-height: auto;
font-size: 15px;
margin-bottom: 20px;
}
.service-content .btn-primary {
margin-top: 0;
width: 100%;
justify-content: center;
}
.service-number {
font-size: 13px;
}
} @media (max-width: 575px) {
.services-section {
padding: 70px 0;
}
.service-img {
height: 200px;
}
.service-content {
padding: 20px;
}
.service-content h3 {
font-size: 20px;
}
.service-content p {
font-size: 14px;
line-height: 1.7;
}
.service-content .btn-primary {
padding: 12px 20px;
}
} .btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 60px;
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
color: #fff;
font-family: "Outfit", sans-serif;
font-weight: 600;
transition: 0.35s ease;
}
.btn-primary:hover {
color: #fff;
transform: translateY(-4px);
}
.btn-primary i {
transition: 0.35s ease;
}
.btn-primary:hover i {
transform: translateX(5px);
} #services-slide .owl-dots {
margin-top: 40px;
}
#services-slide .owl-dot span {
width: 12px;
height: 12px;
background: #ddd;
}
#services-slide .owl-dot.active span {
width: 35px;
background: #f47b20;
border-radius: 20px;
} .about-section {
background: #fff;
overflow: hidden;
padding: 100px 0;
} .about-image-wrapper {
position: relative;
}
.about-image {
width: 100%;
height: 650px;
object-fit: cover;
border-radius: 30px;
} .about-exp-card {
position: absolute;
left: 30px;
bottom: 30px;
background: #fff;
padding: 22px 28px;
border-radius: 20px;
border-left: 5px solid #f47b20;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}
.about-exp-card h3 {
font-family: "Outfit", sans-serif;
font-size: 42px;
font-weight: 800;
color: #1a1a1d;
margin: 0;
}
.about-exp-card p {
margin: 0;
color: #666;
} .about-content {
padding-left: 50px;
position: relative;
} .about-content::before {
content: "ABOUT";
position: absolute;
top: -70px;
left: 0;
font-family: "Outfit", sans-serif;
font-size: 130px;
font-weight: 800;
color: #f7f7f7;
line-height: 1;
z-index: -1;
} .about-content .section-title {
margin: 15px 0 25px;
} .about-content p {
font-family: "Poppins", sans-serif;
font-weight: 400;
color: #666;
line-height: 1.9;
margin-bottom: 18px;
} .about-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 35px 0;
}
.feature-item {
font-family: "Poppins", sans-serif;
font-weight: 400;
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
color: #444;
}
.feature-item i {
color: #f47b20;
} @media (max-width: 991px) {
.about-content {
padding-left: 0;
margin-top: 50px;
}
.about-image {
height: 500px;
}
.about-content::before {
font-size: 90px;
}
}
@media (max-width: 767px) {
.about-image {
height: 350px;
}
.about-content::before {
font-size: 60px;
top: -40px;
}
.about-features {
grid-template-columns: 1fr;
}
.about-exp-card {
padding: 15px 20px;
}
.about-exp-card h3 {
font-size: 30px;
}
} .promise-section {
padding: 100px 0;
background: #f8f9fa;
} .promise-left h2 {
font-family: "Outfit", sans-serif;
font-size: 52px;
font-weight: 800;
line-height: 1.15;
color: #1a1a1d;
margin: 15px 0 25px;
}
.promise-left p {
color: #666;
line-height: 1.9;
max-width: 450px;
} .promise-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
} .promise-item {
min-height: 200px;
background: #fff;
padding: 35px;
border-radius: 20px;
border: 1px solid #ececec;
transition: 0.35s ease;
position: relative;
}
.promise-item span {
display: block;
font-size: 60px;
font-family: "Outfit", sans-serif;
font-weight: 800;
color: #efefef;
line-height: 1;
margin-bottom: 15px;
transition: 0.35s ease;
color: #f47b2052;
}
.promise-item h3 {
font-size: 24px;
font-family: "Outfit", sans-serif;
font-weight: 700;
color: #1a1a1d;
margin: 0;
}
.promise-item:hover {
border-color: #f47b20;
transform: translateY(-6px);
}
.promise-item:hover span {
color: #f47b20;
} @media (max-width: 991px) {
.promise-left {
margin-bottom: 50px;
}
.promise-left h2 {
font-size: 38px;
}
.promise-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.promise-section {
padding: 80px 0;
}
.promise-left h2 {
font-size: 30px;
}
.promise-item {
padding: 25px;
}
.promise-item span {
font-size: 48px;
}
} .projects-section {
position: relative;
background: #f8fafc;
overflow: hidden;
background: linear-gradient(180deg, #ffffff, #faf9f7);
padding: 50px 0;
} .testimonial-section .container {
position: relative;
z-index: 2;
}
.projects-btn {
margin-top: 50px;
text-align: center;
} .projects-grid {
column-count: 3;
column-gap: 25px;
} .project-item {
position: relative;
display: block;
width: 100%;
margin-bottom: 25px;
break-inside: avoid;
overflow: hidden;
border-radius: 24px;
text-decoration: none;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
transition: 0.4s ease;
}
.project-item:hover {
transform: translateY(-8px);
} .project-item img {
width: 100%;
display: block;
object-fit: cover;
transition: 0.7s ease;
height: 100%;
} .project-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
rgba(244, 123, 32, 0.92),
rgba(240, 181, 45, 0.92)
);
opacity: 0;
transition: 0.4s ease;
}
.project-overlay i {
font-size: 34px;
color: #fff;
transform: translateY(20px) scale(0.8);
transition: 0.4s ease;
}
.project-overlay span {
margin-top: 12px;
color: #fff;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
transform: translateY(20px);
transition: 0.4s ease;
} .project-item:hover img {
transform: scale(1.12);
}
.project-item:hover .project-overlay {
opacity: 1;
}
.project-item:hover .project-overlay i,
.project-item:hover .project-overlay span {
transform: translateY(0) scale(1);
} @media (max-width: 991px) {
.projects-grid {
column-count: 2;
}
}
@media (max-width: 767px) {
.projects-grid {
column-count: 1;
}
.project-item {
margin-bottom: 20px;
}
} .testimonial-section {
background: #ffffff;
position: relative;
padding: 50px 0;
} .google-rating-wrap {
display: flex;
justify-content: center;
margin-bottom: 50px;
}
.google-rating {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 35px;
background: #fff;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}
.google-rating img {
width: 55px;
}
.google-rating h3 {
margin: 0;
font-size: 34px;
font-weight: 700;
color: #1f1a1d;
}
.google-rating span {
color: #6b7280;
font-size: 14px;
} .review-card {
background: #fff;
border-radius: 24px;
padding: 40px;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
margin: 15px;
}
.review-stars {
color: #f0b52d;
font-size: 20px;
margin-bottom: 20px;
letter-spacing: 3px;
}
.review-card p {
font-size: 17px;
line-height: 1.9;
color: #64748b;
margin-bottom: 30px;
} .review-author {
display: flex;
align-items: center;
gap: 15px;
}
.review-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #f47b20, #f0b52d);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 22px;
}
.review-author h4 {
margin: 0;
font-size: 18px;
}
.review-author span {
color: #6b7280;
font-size: 14px;
} .reviews-btn {
text-align: center;
margin-top: 50px;
}
.reviews-btn .main-btn {
display: inline-flex;
align-items: center;
gap: 10px;
} #review-slider .owl-dots {
margin-top: 30px;
}
#review-slider .owl-dot span {
width: 12px;
height: 12px;
}
#review-slider .owl-dot.active span {
width: 35px;
border-radius: 30px;
background: #f47b20;
} @media (max-width: 767px) {
.review-card {
padding: 30px 25px;
}
.google-rating {
flex-direction: column;
text-align: center;
}
} .instagram-section {
background: #f8fafc;
position: relative;
overflow: hidden;
padding: 50px 0;
} .instagram-item {
position: relative;
display: block;
overflow: hidden;
border-radius: 25px;
}
.instagram-item img {
width: 100%;
height: 350px;
object-fit: cover;
border-radius: 25px;
transition: 0.6s ease;
} .instagram-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(
135deg,
rgba(244, 123, 32, 0.92),
rgba(240, 181, 45, 0.92)
);
opacity: 0;
transition: 0.4s ease;
}
.instagram-overlay i {
font-size: 34px;
color: #fff;
transform: translateY(20px);
transition: 0.4s ease;
}
.instagram-overlay span {
color: #fff;
font-weight: 600;
transform: translateY(20px);
transition: 0.4s ease;
} .instagram-item:hover img {
transform: scale(1.1);
}
.instagram-item:hover .instagram-overlay {
opacity: 1;
}
.instagram-item:hover .instagram-overlay i,
.instagram-item:hover .instagram-overlay span {
transform: translateY(0);
} .instagram-btn {
margin-top: 50px;
text-align: center;
}
.instagram-btn a {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 34px;
border-radius: 60px;
background: linear-gradient(135deg, #f47b20, #f0b52d);
color: #ffffff;
font-size: 16px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 15px 35px rgba(244, 123, 32, 0.25);
transition: 0.4s ease;
}
.instagram-btn a i {
font-size: 20px;
}
.instagram-btn a:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(244, 123, 32, 0.35);
color: #ffffff;
} #instagram-slide .owl-dots {
margin-top: 40px;
}
#instagram-slide .owl-dot span {
width: 12px;
height: 12px;
background: #d1d5db;
transition: 0.3s ease;
}
#instagram-slide .owl-dot.active span {
width: 35px;
border-radius: 30px;
background: #f47b20;
} @media (max-width: 767px) {
.instagram-item img {
height: 280px;
}
} .process-section {
padding: 120px 0;
background: #fff;
overflow: hidden;
}
.process-wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
margin-top: 70px;
} .process-item {
flex: 1;
max-width: 250px;
text-align: center;
opacity: 0;
transform: translateY(40px);
transition: 0.8s ease;
} .reveal-process.active .process-item {
opacity: 1;
transform: translateY(0);
}
.reveal-process.active .process-item:nth-child(1) {
transition-delay: 0.1s;
}
.reveal-process.active .process-item:nth-child(3) {
transition-delay: 0.3s;
}
.reveal-process.active .process-item:nth-child(5) {
transition-delay: 0.5s;
}
.reveal-process.active .process-item:nth-child(7) {
transition-delay: 0.7s;
} .process-circle {
width: 85px;
height: 85px;
margin: 0 auto 25px;
border-radius: 50%;
background: #fff;
border: 2px solid #f47b20;
display: flex;
align-items: center;
justify-content: center;
font-family: "Outfit", sans-serif;
font-size: 24px;
font-weight: 700;
color: #f47b20;
transition: 0.35s ease;
}
.process-item:hover .process-circle {
background: #f47b20;
color: #fff;
transform: translateY(-5px);
} .process-line {
flex: 1;
max-width: 120px;
height: 2px;
background: #ececec;
margin-top: 42px;
position: relative;
}
.process-line::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #f47b20;
} .reveal-process.active .process-line::before {
animation: fillLine 1s forwards;
}
.reveal-process.active .process-line:nth-child(2)::before {
animation-delay: 0.2s;
}
.reveal-process.active .process-line:nth-child(4)::before {
animation-delay: 0.5s;
}
.reveal-process.active .process-line:nth-child(6)::before {
animation-delay: 0.8s;
}
@keyframes fillLine {
from {
width: 0;
}
to {
width: 100%;
}
} .process-item h3 {
font-family: "Outfit", sans-serif;
font-size: 24px;
font-weight: 700;
color: #1a1a1d;
margin-bottom: 12px;
}
.process-item p {
font-family: "Poppins", sans-serif;
font-weight: 400;
color: #666;
line-height: 1.8;
} @media (max-width: 991px) {
.process-wrapper {
flex-wrap: wrap;
gap: 40px;
}
.process-line {
display: none;
}
.process-item {
max-width: 45%;
}
} @media (max-width: 767px) {
.process-section {
padding: 80px 0;
}
.process-wrapper {
flex-direction: column;
align-items: center;
}
.process-item {
max-width: 100%;
}
.process-circle {
width: 70px;
height: 70px;
font-size: 20px;
}
.process-item h3 {
font-size: 22px;
}
} .faq-section {
position: relative;
padding: 120px 0;
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
overflow: hidden;
} .faq-section::before {
content: "FAQ";
position: absolute;
left: -70px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
font-family: "Outfit", sans-serif;
font-size: 180px;
font-weight: 800;
letter-spacing: 10px;
color: rgba(255, 255, 255, 0.08);
pointer-events: none;
} .faq-section .sub-title {
color: #ffffff;
opacity: 0.8;
}
.faq-section .section-heading h2 {
color: #ffffff;
}
.faq-section .section-heading p {
color: rgba(255, 255, 255, 0.8);
} .faq-wrapper {
max-width: 950px;
margin: 60px auto 0;
position: relative;
z-index: 2;
} .faq-item {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
margin-bottom: 14px;
overflow: hidden;
transition: 0.35s ease;
}
.faq-item:hover {
background: rgba(255, 255, 255, 0.18);
transform: translateY(-3px);
}
.faq-item.active {
background: #ffffff;
} .faq-question {
width: 100%;
background: none;
border: none;
padding: 22px 28px;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
cursor: pointer;
font-family: "Outfit", sans-serif;
font-size: 20px;
font-weight: 700;
color: #ffffff;
}
.faq-item.active .faq-question {
color: #1a1a1d !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
} .faq-question span {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 24px;
transition: 0.35s ease;
}
.faq-item.active .faq-question span {
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
color: #fff;
transform: rotate(45deg);
} .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.faq-answer p {
padding: 20px 28px 24px;
margin: 0;
color: rgba(255, 255, 255, 0.85);
line-height: 1.8;
font-size: 15px;
}
.faq-item.active .faq-answer p {
color: #666;
} .faq-item.active .faq-answer {
max-height: 250px;
} .cta-section {
padding: 80px 0;
background: #fff;
}
.cta-wrapper {
background: #111827;
border-radius: 30px;
padding: 55px 60px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
position: relative;
overflow: hidden;
} .cta-wrapper::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(244, 123, 32, 0.2), transparent 70%);
pointer-events: none;
}
.cta-wrapper::after {
content: "";
position: absolute;
bottom: -140px;
left: -140px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(240, 181, 45, 0.15),
transparent 70%
);
pointer-events: none;
} .cta-content {
position: relative;
z-index: 2;
}
.cta-content .section-subtitle {
color: #f47b20;
}
.cta-content .section-title {
color: #fff;
margin: 12px 0 18px;
}
.cta-content .section-description {
color: rgba(255, 255, 255, 0.75);
max-width: 550px;
margin: 0;
} .cta-actions {
position: relative;
z-index: 2;
}
.cta-phone-main {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 30px;
border-radius: 80px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
text-decoration: none;
transition: 0.35s ease;
white-space: nowrap;
}
.cta-phone-main:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-4px);
}
.phone-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
transition: 0.35s ease;
}
.cta-phone-main:hover .phone-icon {
transform: rotate(-15deg);
}
.phone-content {
white-space: nowrap;
}
.phone-content small {
display: block;
color: rgba(255, 255, 255, 0.65);
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 3px;
}
.phone-content strong {
display: block;
color: #fff;
font-family: "Outfit", sans-serif;
font-size: 28px;
font-weight: 800;
white-space: nowrap;
} @media (max-width: 991px) {
.cta-wrapper {
flex-direction: column;
text-align: center;
padding: 50px 35px;
}
.cta-content .section-description {
margin: auto;
}
.cta-content .section-title {
font-size: 38px;
}
} @media (max-width: 767px) {
.cta-section {
padding: 60px 0;
}
.cta-wrapper {
padding: 35px 25px;
border-radius: 24px;
}
.cta-content .section-title {
font-size: 28px;
}
.cta-phone-main {
width: 100%;
justify-content: center;
padding: 15px 20px;
}
.phone-icon {
width: 50px;
height: 50px;
font-size: 18px;
}
.phone-content strong {
font-size: 22px;
}
} .footer-section {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0f172a 0%, #111827 50%, #1f2937 100%);
color: #fff;
padding: 100px 0 0;
} .footer-shape {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.footer-shape-1 {
width: 500px;
height: 500px;
top: -250px;
left: -250px;
background: radial-gradient(rgba(244, 123, 32, 0.18), transparent 70%);
}
.footer-shape-2 {
width: 600px;
height: 600px;
right: -300px;
bottom: -300px;
background: radial-gradient(rgba(240, 181, 45, 0.15), transparent 70%);
} .footer-top {
position: relative;
z-index: 2;
padding-bottom: 70px;
}
.footer-widget {
height: 100%;
padding: 35px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: 0.4s ease;
}
.footer-widget:hover {
transform: translateY(-8px);
border-color: rgba(244, 123, 32, 0.25);
}
.footer-logo {
max-width: 180px;
max-width: 150px;
margin-bottom: 25px;
height: auto;
}
.footer-about p {
margin: 0;
color: rgba(255, 255, 255, 0.75);
line-height: 1.9;
} .footer-widget h4 {
font-size: 22px;
font-weight: 700;
margin-bottom: 25px;
position: relative;
padding-bottom: 12px;
}
.footer-widget h4::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 3px;
border-radius: 20px;
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
} .footer-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-widget ul li {
margin-bottom: 15px;
}
.footer-widget ul li a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
transition: 0.3s ease;
}
.footer-widget ul li a:hover {
color: #f47b20;
padding-left: 5px;
} .footer-contact li {
display: flex;
align-items: flex-start;
gap: 12px;
color: rgba(255, 255, 255, 0.75);
}
.footer-contact i {
color: #f47b20;
margin-top: 5px;
min-width: 18px;
} .footer-call-banner {
position: relative;
z-index: 2;
margin-bottom: 60px;
padding: 45px;
border-radius: 30px;
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
box-shadow: 0 20px 50px rgba(244, 123, 32, 0.25);
}
.footer-call-subtitle {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 12px;
}
.footer-call-banner h3 {
font-size: 42px;
font-weight: 800;
margin-bottom: 10px;
color: #fff;
}
.footer-call-banner p {
margin: 0;
color: rgba(255, 255, 255, 0.9);
}
.footer-call-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 35px;
background: #fff;
color: #111827;
border-radius: 60px;
font-weight: 700;
text-decoration: none;
transition: 0.35s ease;
}
.footer-call-btn:hover {
color: #111827;
transform: translateY(-4px);
} .footer-bottom {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 30px 0;
}
.footer-bottom p {
margin: 0;
color: rgba(255, 255, 255, 0.65);
}
.footer-bottom p a {
color: #fff;
}
.footer-social {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.footer-social a {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: 0.35s ease;
}
.footer-social a:hover {
background: linear-gradient(135deg, #f0b52d, #f47b20, #ff3b30);
transform: translateY(-5px);
} @media (max-width: 991px) {
.footer-widget {
margin-bottom: 25px;
}
.footer-call-banner {
text-align: center;
padding: 40px 30px;
}
.footer-call-btn {
margin-top: 25px;
}
.footer-call-banner h3 {
font-size: 34px;
}
}
@media (max-width: 767px) {
.footer-section {
padding-top: 80px;
}
.footer-widget {
padding: 25px;
}
.footer-call-banner {
padding: 35px 20px;
}
.footer-call-banner h3 {
font-size: 28px;
}
.footer-social {
justify-content: center;
margin-top: 15px;
}
.footer-bottom {
text-align: center;
}
}
@media (max-width: 575px) {
.footer-call-banner h3 {
font-size: 24px;
}
.footer-call-btn {
width: 100%;
justify-content: center;
}
} .section-heading {
max-width: 850px;
margin: 0 auto 60px;
}
.section-subtitle {
display: inline-block;
font-family: "Outfit", sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
color: #f47b20;
margin-bottom: 12px;
letter-spacing: 3px;
}
.section-title {
font-family: "Outfit", sans-serif;
font-size: 52px;
font-weight: 800;
line-height: 1.15;
color: #1a1a1d;
margin-bottom: 18px;
}
.section-description {
font-family: "Poppins", sans-serif;
font-weight: 400;
max-width: 700px;
margin: 0 auto;
color: #666;
line-height: 1.8;
font-size: 16px;
} @media (max-width: 1199px) {
.section-title {
font-size: 46px;
}
} @media (max-width: 991px) {
.section-heading {
margin-bottom: 50px;
}
.section-title {
font-size: 40px;
}
.section-description {
max-width: 600px;
}
} @media (max-width: 767px) {
.section-heading {
margin-bottom: 40px;
}
.section-subtitle {
font-size: 12px;
letter-spacing: 1.5px;
}
.section-title {
font-size: 32px;
line-height: 1.2;
}
.section-description {
font-size: 15px;
line-height: 1.7;
}
} @media (max-width: 575px) {
.section-title {
font-size: 28px;
}
.section-description {
font-size: 14px;
}
} .whatsapp-float {
position: fixed;
right: 25px;
bottom: 25px;
width: 65px;
height: 65px;
border-radius: 50%;
background: #25d366;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 32px;
z-index: 9999;
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.35);
transition: 0.35s ease;
}
.whatsapp-float:hover {
color: #fff;
transform: translateY(-5px) scale(1.08);
box-shadow: 0 20px 45px rgba(37, 211, 102, 0.45);
} .whatsapp-float::before {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid #25d366;
animation: whatsappPulse 2s infinite;
}
@keyframes whatsappPulse {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
@media (max-width: 767px) {
.whatsapp-float {
width: 58px;
height: 58px;
font-size: 28px;
right: 20px;
bottom: 20px;
}
} .page-banner {
position: relative;
padding: 170px 0 90px;
overflow: hidden;
background: url(//taspainting.com.au/wp-content/themes/tas-painting-theme/assets/images/inner-banner.webp) center / cover no-repeat;
} .banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(15, 23, 42, 0.88),
rgba(15, 23, 42, 0.72)
);
background-size: cover;
} .banner-glow {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
top: -180px;
right: -180px;
background: radial-gradient(rgba(244, 123, 32, 0.22), transparent 70%);
filter: blur(80px);
animation: glowFloat 6s ease-in-out infinite;
} .page-banner-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 850px;
margin: auto;
}
.banner-subtitle {
display: inline-block;
padding: 10px 22px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: #f0b52d;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 13px;
margin-bottom: 20px;
animation: fadeUp 0.8s ease;
}
.page-banner-content h1 {
font-size: 58px;
font-weight: 800;
color: #fff;
line-height: 1.1;
margin-bottom: 20px;
animation: fadeUp 1s ease;
}
.page-banner-content p {
max-width: 650px;
margin: auto;
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
line-height: 1.9;
animation: fadeUp 1.2s ease;
} .paint-dot {
position: absolute;
border-radius: 50%;
z-index: 1;
}
.dot-1 {
width: 12px;
height: 12px;
background: #f47b20;
top: 25%;
left: 15%;
animation: floatPaint 7s linear infinite;
}
.dot-2 {
width: 20px;
height: 20px;
background: #f0b52d;
top: 60%;
left: 12%;
animation: floatPaint 10s linear infinite;
}
.dot-3 {
width: 14px;
height: 14px;
background: #f47b20;
top: 35%;
right: 18%;
animation: floatPaint 8s linear infinite;
}
.dot-4 {
width: 10px;
height: 10px;
background: #f0b52d;
top: 70%;
right: 12%;
animation: floatPaint 9s linear infinite;
} @keyframes bannerZoom {
from {
background-size: 100%;
}
to {
background-size: 108%;
}
}
@keyframes glowFloat {
0% {
transform: translateY(0);
}
50% {
transform: translateY(30px);
}
100% {
transform: translateY(0);
}
}
@keyframes floatPaint {
0% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-30px) scale(1.2);
}
100% {
transform: translateY(0) scale(1);
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 767px) {
.page-banner {
padding: 140px 0 70px;
}
.page-banner-content h1 {
font-size: 38px;
}
}
@media (max-width: 575px) {
.page-banner-content h1 {
font-size: 30px;
}
.page-banner-content p {
font-size: 15px;
}
} .about-page-section {
position: relative;
overflow: hidden;
background: #fff;
padding: 50px 0;
} .about-images {
position: relative;
max-width: 600px;
margin: auto;
min-height: 650px;
} .about-main-image {
position: relative;
z-index: 2;
overflow: hidden;
border-radius: 30px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
}
.about-main-image img {
width: 100%;
height: 650px;
object-fit: cover;
border-radius: 30px;
transition: 0.8s ease;
}
.about-main-image:hover img {
transform: scale(1.05);
} .about-floating-image {
position: absolute;
overflow: hidden;
border-radius: 20px;
border: 8px solid #fff;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
z-index: 3;
}
.about-floating-image img {
width: 100%;
height: 100%;
object-fit: cover;
} .floating-one {
width: 220px;
height: 260px;
top: 40px;
right: -40px;
animation: floatOne 5s ease-in-out infinite;
} .floating-two {
width: 220px;
height: 260px;
bottom: 40px;
left: -40px;
animation: floatTwo 6s ease-in-out infinite;
} .about-glow {
position: absolute;
width: 350px;
height: 350px;
top: -80px;
left: -80px;
border-radius: 50%;
background: radial-gradient(rgba(244, 123, 32, 0.2), transparent 70%);
filter: blur(70px);
z-index: 1;
animation: glowMove 6s ease-in-out infinite;
} .about-content-wrap {
padding-left: 50px;
}
.about-subtitle {
display: inline-block;
color: #f47b20;
font-size: 14px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 15px;
font-family: "Outfit", sans-serif;
}
.about-content-wrap h2 {
font-family: "Outfit", sans-serif;
font-size: 52px;
font-weight: 800;
line-height: 1.15;
margin-bottom: 25px;
color: #1f1a1d;
}
.about-content-wrap p {
font-family: "Poppins", sans-serif;
color: #666;
font-size: 16px;
line-height: 1.9;
margin-bottom: 18px;
} .about-list {
margin: 30px 0;
padding: 0;
list-style: none;
}
.about-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
font-family: "Poppins", sans-serif;
font-weight: 500;
color: #333;
}
.about-list li i {
color: #f47b20;
font-size: 18px;
} .about-content-wrap .btn-primary {
margin-top: 10px;
} @keyframes floatOne {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
@keyframes floatTwo {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
@keyframes glowMove {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
} @media (max-width: 1199px) {
.about-content-wrap h2 {
font-size: 44px;
}
}
@media (max-width: 991px) {
.about-content-wrap {
padding-left: 0;
margin-top: 60px;
}
.about-images {
min-height: auto;
}
.floating-one {
right: 0;
}
.floating-two {
left: 0;
}
}
@media (max-width: 767px) {
.about-main-image img {
height: 450px;
}
.about-floating-image {
width: 140px;
height: 180px;
}
.floating-one {
top: 20px;
right: 10px;
}
.floating-two {
bottom: 20px;
left: 10px;
}
.about-content-wrap h2 {
font-size: 36px;
}
.about-content-wrap p {
font-size: 15px;
}
}
@media (max-width: 575px) {
.about-main-image img {
height: 380px;
}
.about-floating-image {
display: none;
}
.about-content-wrap {
margin-top: 40px;
}
.about-content-wrap h2 {
font-size: 30px;
}
.about-subtitle {
font-size: 12px;
}
} .why-about-section {
padding: 100px 0;
background: #faf9f7;
}
.why-about-section .promise-item {
background: #fff;
text-align: center;
padding: 40px 30px;
border-radius: 24px;
border: 1px solid #ececec;
transition: 0.35s ease;
height: 100%;
}
.why-about-section .promise-item:hover {
transform: translateY(-8px);
border-color: #f47b20;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}
.why-about-section .promise-item span {
display: block;
font-size: 60px;
font-weight: 800;
color: rgba(244, 123, 32, 0.7);
line-height: 1;
margin-bottom: 20px;
}
.why-about-section .promise-item h3 {
font-size: 22px;
margin-bottom: 15px;
}
.why-about-section .promise-item p {
color: #666;
line-height: 1.8;
} .services-grid-section {
position: relative;
overflow: hidden;
padding: 50px 0;
}
.services-grid-section::before {
content: "";
position: absolute;
width: 700px;
height: 700px;
top: -300px;
right: -300px;
border-radius: 50%;
background: radial-gradient(rgba(244, 123, 32, 0.08), transparent 70%);
filter: blur(80px);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
position: relative;
z-index: 2;
} .service-card {
background: #fff;
border-radius: 28px;
overflow: hidden;
border: 1px solid #ececec;
transition: 0.45s ease;
box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
} .service-image {
position: relative;
overflow: hidden;
}
.service-image img {
width: 100%;
height: 260px;
object-fit: cover;
transition: 0.8s ease;
}
.service-card:hover img {
transform: scale(1.08);
} .service-number {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
color: #f47b20;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
} .service-content {
padding: 30px;
}
.service-content h3 {
font-family: "Outfit", sans-serif;
font-size: 26px;
font-weight: 700;
margin-bottom: 15px;
color: #1f1a1d;
}
.service-content p {
font-family: "Poppins", sans-serif;
color: #666;
line-height: 1.8;
margin-bottom: 20px;
} .service-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: #f47b20;
font-weight: 600;
}
.service-link i {
transition: 0.3s ease;
}
.service-link:hover i {
transform: translateX(6px);
}
@media (max-width: 991px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.services-grid {
grid-template-columns: 1fr;
}
} .featured-project {
position: relative;
overflow: hidden;
}
.featured-project::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: -200px;
top: -200px;
border-radius: 50%;
background: radial-gradient(rgba(244, 123, 32, 0.08), transparent 70%);
filter: blur(70px);
} .featured-project-image {
position: relative;
overflow: hidden;
border-radius: 30px;
}
.featured-project-image img {
width: 100%;
height: 600px;
object-fit: cover;
border-radius: 30px;
transition: 0.8s ease;
}
.featured-project-image:hover img {
transform: scale(1.05);
}
.project-badge {
position: absolute;
top: 25px;
left: 25px;
background: #f47b20;
color: #fff;
padding: 10px 20px;
border-radius: 50px;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
} .featured-project-content {
padding-left: 50px;
}
.featured-project-content h2 {
font-family: "Outfit", sans-serif;
font-size: 52px;
font-weight: 800;
line-height: 1.15;
margin: 20px 0;
}
.featured-project-content p {
font-family: "Poppins", sans-serif;
color: #666;
line-height: 1.9;
margin-bottom: 30px;
} .project-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 35px;
}
.info-item {
background: #fff;
padding: 20px;
border-radius: 20px;
border: 1px solid #ececec;
text-align: center;
}
.info-item span {
display: block;
font-size: 13px;
color: #f47b20;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.info-item h4 {
margin: 0;
font-size: 18px;
font-weight: 600;
} .projects-showcase {
position: relative;
background: #fafafa;
overflow: hidden;
padding: 100px 0;
} .projects-heading {
max-width: 800px;
margin: 0 auto 50px;
}
.projects-heading .section-subtitle {
display: inline-block;
color: #f47b20;
font-size: 14px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 15px;
}
.projects-heading .section-title {
font-size: 58px;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.1;
}
.projects-heading p {
color: #666;
font-size: 17px;
line-height: 1.8;
max-width: 650px;
margin: auto;
} .project-divider {
width: 120px;
height: 2px;
background: #dcdcdc;
margin: 0 auto 60px;
} .projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
} .project-card {
position: relative;
overflow: hidden;
display: block;
border-radius: 15px;
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.project-card img {
width: 100%;
height: 380px;
object-fit: cover;
transition: 0.8s ease;
} .project-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.75));
opacity: 0;
transition: 0.4s ease;
}
.project-overlay h3 {
color: #fff;
font-size: 24px;
margin-bottom: 10px;
transform: translateY(20px);
transition: 0.4s ease;
}
.project-overlay span {
color: #f47b20;
font-weight: 600;
transform: translateY(20px);
transition: 0.4s ease;
} .project-card:hover img {
transform: scale(1.08);
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-card:hover .project-overlay h3,
.project-card:hover .project-overlay span {
transform: translateY(0);
} .projects-showcase .btn-primary {
min-width: 220px;
} @media (max-width: 991px) {
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
.projects-heading .section-title {
font-size: 46px;
}
}
@media (max-width: 767px) {
.projects-grid {
grid-template-columns: 1fr;
}
.project-card img {
height: 280px;
}
.projects-heading .section-title {
font-size: 34px;
}
.project-divider {
margin-bottom: 40px;
}
} .contact-info-section{    position:relative;    padding:100px 0;    background:#ffffff;    overflow:hidden;    z-index:1;}.contact-info-section::before{    content:"";    position:absolute;    width:520px;    height:520px;    top:-240px;    right:-240px;    border-radius:50%;    background:radial-gradient(circle,rgba(244,123,32,.08) 0%,transparent 70%);    filter:blur(90px);    z-index:-1;}.contact-info-section::after{    content:"";    position:absolute;    width:420px;    height:420px;    left:-180px;    bottom:-180px;    border-radius:50%;    background:radial-gradient(circle,rgba(244,123,32,.05) 0%,transparent 70%);    filter:blur(90px);    z-index:-1;} .section-heading{    max-width:760px;    margin:0 auto 70px;}.section-subtitle{    display:inline-flex;    align-items:center;    gap:10px;    font-family:"Poppins",sans-serif;    font-size:14px;    font-weight:600;    text-transform:uppercase;    letter-spacing:3px;    color:#f47b20;    margin-bottom:18px;}.section-subtitle::before{    content:"";    width:45px;    height:2px;    background:#f47b20;}.section-title{    font-family:"Outfit",sans-serif;    font-size:52px;    font-weight:800;    line-height:1.15;    color:#1f1a1d;    margin-bottom:20px;}.section-description{    max-width:650px;    margin:0 auto;    font-size:16px;    line-height:1.9;    color:#666;    font-family:"Poppins",sans-serif;} .contact-card{    position:relative;    background:#ffffff;    border-radius:28px;    padding:45px 35px;    text-align:center;    height:100%;    overflow:hidden;    border:1px solid rgba(0,0,0,.05);    transition:all .45s ease;    box-shadow:0 18px 45px rgba(15,23,42,.06);}.contact-card::before{    content:"";    position:absolute;    left:0;    top:0;    width:100%;    height:4px;    background:linear-gradient(90deg,#f47b20,#f7b733);    transform:scaleX(0);    transform-origin:left;    transition:.45s;}.contact-card:hover{    transform:translateY(-12px);    box-shadow:0 30px 70px rgba(15,23,42,.10);}.contact-card:hover::before{    transform:scaleX(1);} .contact-icon{    position:relative;    width:90px;    height:90px;    margin:0 auto 28px;    display:flex;    align-items:center;    justify-content:center;    border-radius:50%;    background:linear-gradient(135deg,#f47b20,#f7b733);    color:#ffffff;    font-size:32px;    transition:.45s;    overflow:hidden;}.contact-icon::after{    content:"";    position:absolute;    width:110%;    height:110%;    background:rgba(255,255,255,.15);    transform:scale(0);    border-radius:50%;    transition:.4s;}.contact-card:hover .contact-icon{    transform:rotateY(180deg);}.contact-card:hover .contact-icon::after{    transform:scale(1);} .contact-card h3{    font-family:"Outfit",sans-serif;    font-size:28px;    font-weight:700;    color:#1f1a1d;    margin-bottom:16px;}.contact-card p{    font-family:"Poppins",sans-serif;    font-size:16px;    line-height:1.8;    color:#666;    margin:0;}.contact-card a{    display:inline-block;    font-family:"Poppins",sans-serif;    font-size:16px;    font-weight:500;    color:#666;    transition:.35s;    word-break:break-word;}.contact-card a:hover{    color:#f47b20;} .contact-card .shape{    position:absolute;    width:120px;    height:120px;    border-radius:50%;    background:rgba(244,123,32,.05);    right:-60px;    bottom:-60px;} .contact-info-section .row>div{    margin-bottom:30px;}.contact-info-section .row>div:last-child{    margin-bottom:0;} .contact-form-section{    position:relative;    padding:100px 0;    background:#fafafa;    overflow:hidden;    z-index:1;}.contact-form-section::before{    content:"";    position:absolute;    width:550px;    height:550px;    right:-220px;    top:-220px;    border-radius:50%;    background:radial-gradient(circle,rgba(244,123,32,.10) 0%,transparent 70%);    filter:blur(90px);    z-index:-1;}.contact-form-section::after{    content:"";    position:absolute;    width:450px;    height:450px;    left:-180px;    bottom:-180px;    border-radius:50%;    background:radial-gradient(circle,rgba(244,123,32,.06) 0%,transparent 70%);    filter:blur(90px);    z-index:-1;} .contact-wrapper{    position:relative;    background:#ffffff;    padding:70px;    border-radius:30px;    overflow:hidden;    box-shadow:0 25px 70px rgba(15,23,42,.08);}.contact-wrapper::before{    content:"";    position:absolute;    top:0;    left:0;    width:6px;    height:100%;    background:linear-gradient(180deg,#f47b20,#f7b733);} .contact-form-box .section-subtitle{    display:inline-flex;    align-items:center;    gap:10px;    color:#f47b20;    text-transform:uppercase;    letter-spacing:3px;    font-size:14px;    font-weight:600;    margin-bottom:18px;}.contact-form-box .section-subtitle::before{    content:"";    width:40px;    height:2px;    background:#f47b20;}.contact-form-box h2{    font-family:"Outfit",sans-serif;    font-size:52px;    font-weight:800;    color:#1f1a1d;    line-height:1.15;    margin-bottom:20px;}.contact-form-box p{    color:#666;    line-height:1.9;    margin-bottom:35px;    max-width:560px;} .contact-form p{    margin-bottom:22px;}.contact-form .row{    margin-left:-10px;    margin-right:-10px;}.contact-form .row > div{    padding-left:10px;    padding-right:10px;}.contact-form input,.contact-form textarea,.contact-form select{    width:100%;    border:1px solid #e7e7e7;    background:#fafafa;    border-radius:16px;    padding:17px 22px;    font-size:15px;    color:#1f1a1d;    transition:all .35s ease;    outline:none;}.contact-form textarea{    resize:none;    min-height:180px;}.contact-form input::placeholder,.contact-form textarea::placeholder{    color:#9a9a9a;}.contact-form input:hover,.contact-form textarea:hover,.contact-form select:hover{    border-color:#f47b20;}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{    background:#fff;    border-color:#f47b20;    box-shadow:0 0 0 4px rgba(244,123,32,.12);} .wpcf7-not-valid-tip{    font-size:13px;    margin-top:8px;}.wpcf7-response-output{    margin:25px 0 0 !important;    padding:15px 20px !important;    border-radius:12px;    font-size:14px;}.wpcf7-spinner{    margin-left:15px;} .contact-form .wpcf7-submit{    display:inline-flex;    align-items:center;    justify-content:center;    min-width:220px;    padding:18px 40px;    border:none;    border-radius:60px;    background:linear-gradient(135deg,#f47b20,#f7b733);    color:#fff;    font-size:16px;    font-weight:600;    cursor:pointer;    transition:all .35s ease;    box-shadow:0 15px 35px rgba(244,123,32,.25);}.contact-form .wpcf7-submit:hover{    background:#1f1a1d;    transform:translateY(-3px);    box-shadow:0 22px 45px rgba(31,26,29,.25);} .contact-image{    position:relative;    overflow:hidden;    border-radius:30px;    height:100%;}.contact-image img{    width:100%;    height:720px;    object-fit:cover;    transition:transform .8s ease;}.contact-image:hover img{    transform:scale(1.08);}.contact-image::after{    content:"";    position:absolute;    inset:0;    background:linear-gradient(to top,    rgba(0,0,0,.35),    rgba(0,0,0,.05),    transparent);} .contact-badge{    position:absolute;    left:30px;    bottom:30px;    background:#fff;    padding:22px 30px;    border-radius:22px;    box-shadow:0 20px 45px rgba(15,23,42,.15);    animation:badgeFloat 5s ease-in-out infinite;    z-index:5;}.contact-badge h3{    margin:0;    font-size:40px;    font-weight:800;    color:#f47b20;    font-family:"Outfit",sans-serif;    line-height:1;}.contact-badge span{    display:block;    margin-top:8px;    color:#666;    font-size:14px;    font-weight:500;} @keyframes badgeFloat{0%{transform:translateY(0);}50%{transform:translateY(-10px);}100%{transform:translateY(0);}} .contact-map-section{    position:relative;    padding:100px 0;    background:#fafafa;    overflow:hidden;    z-index:1;}.contact-map-section::before{    content:"";    position:absolute;    left:-220px;    bottom:-220px;    width:500px;    height:500px;    border-radius:50%;    background:radial-gradient(circle,rgba(244,123,32,.08),transparent 70%);    filter:blur(90px);    z-index:-1;}.contact-map-section::after{    content:"";    position:absolute;    right:-180px;    top:-180px;    width:420px;    height:420px;    border-radius:50%;    background:radial-gradient(circle,rgba(244,123,32,.05),transparent 70%);    filter:blur(80px);    z-index:-1;} .map-wrapper{    position:relative;    overflow:hidden;    border-radius:30px;    background:#fff;    box-shadow:0 20px 60px rgba(15,23,42,.08);}.map-wrapper iframe{    display:block;    width:100%;    height:560px;    border:0;}.map-wrapper::after{    content:"";    position:absolute;    inset:0;    border-radius:30px;    border:1px solid rgba(0,0,0,.05);    pointer-events:none;} .service-area-box{    position:relative;    background:#ffffff;    border-radius:30px;    padding:45px;    height:100%;    overflow:hidden;    box-shadow:0 20px 60px rgba(15,23,42,.08);    transition:.4s;}.service-area-box:hover{    transform:translateY(-8px);    box-shadow:0 28px 70px rgba(15,23,42,.12);}.service-area-box::before{    content:"";    position:absolute;    top:0;    left:0;    width:6px;    height:100%;    background:linear-gradient(180deg,#f47b20,#f7b733);} .service-area-box h3{    font-family:"Outfit",sans-serif;    font-size:30px;    font-weight:700;    color:#1f1a1d;    margin-bottom:30px;} .service-area-box ul{    margin:0;    padding:0;    list-style:none;}.service-area-box ul li{    position:relative;    display:flex;    align-items:center;    padding:14px 0 14px 34px;    border-bottom:1px solid rgba(0,0,0,.06);    color:#555;    font-size:16px;    font-family:"Poppins",sans-serif;    transition:.35s;}.service-area-box ul li:last-child{    border-bottom:none;}.service-area-box ul li::before{    content:"✓";    position:absolute;    left:0;    width:22px;    height:22px;    border-radius:50%;    background:#f47b20;    color:#fff;    font-size:12px;    display:flex;    align-items:center;    justify-content:center;    font-weight:700;}.service-area-box ul li:hover{    color:#f47b20;    transform:translateX(6px);} .service-area-box::after{    content:"";    position:absolute;    right:-55px;    bottom:-55px;    width:140px;    height:140px;    border-radius:50%;    background:rgba(244,123,32,.05);} .contact-card,.contact-icon,.contact-image img,.service-area-box,.service-area-box li,.map-wrapper,.contact-wrapper{    transition:all .35s ease;} .contact-wrapper,.contact-card,.contact-image,.map-wrapper,.service-area-box{    border-radius:30px;} ::selection{    background:#f47b20;    color:#ffffff;}::-moz-selection{    background:#f47b20;    color:#ffffff;} .error-page {
min-height: 120vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
background: #fafafa;
}
.error-page::before {
content: "";
position: absolute;
width: 700px;
height: 700px;
top: -300px;
right: -300px;
border-radius: 50%;
background: radial-gradient(rgba(244, 123, 32, 0.08), transparent 70%);
filter: blur(80px);
}
.error-content {
position: relative;
z-index: 2;
max-width: 700px;
margin: auto;
}
.error-logo {
max-width: 180px;
margin-bottom: 30px;
}
.error-number {
display: block;
font-family: "Outfit", sans-serif;
font-size: 180px;
font-weight: 800;
line-height: 1;
color: #f47b20;
}
.error-content h1 {
font-family: "Outfit", sans-serif;
font-size: 52px;
font-weight: 700;
margin-bottom: 20px;
}
.error-content p {
font-family: "Poppins", sans-serif;
font-size: 18px;
color: #666;
line-height: 1.8;
max-width: 550px;
margin: 0 auto 35px;
}
.error-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.error-number {
font-size: 120px;
}
.error-content h1 {
font-size: 34px;
}
.error-content p {
font-size: 16px;
}
} .service-overview-section {
position: relative;
overflow: hidden;
padding: 80px;
}
.service-overview-image {
position: relative;
}
.service-overview-image img {
width: 100%;
border-radius: 24px;
display: block;
object-fit: cover;
}
.service-overview-content {
padding-left: 40px;
}
.service-overview-content h2 {
font-family: "Outfit", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.2;
color: var(--primary);
margin-bottom: 25px;
}
.service-overview-content p {
font-family: "Poppins", sans-serif;
color: var(--text-light);
font-size: 16px;
line-height: 1.9;
margin-bottom: 20px;
}
.service-overview-list {
margin: 35px 0;
padding: 0;
list-style: none;
}
.service-overview-list li {
display: flex;
align-items: center;
margin-bottom: 18px;
font-family: "Poppins", sans-serif;
font-weight: 500;
color: var(--primary);
}
.service-overview-list li:last-child {
margin-bottom: 0;
}
.service-overview-list li i {
width: 24px;
height: 24px;
min-width: 24px;
margin-right: 12px;
border-radius: 50%;
background: rgba(242, 140, 40, 0.12);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.service-overview-content .btn-primary {
margin-top: 10px;
} .service-overview-image::before {
content: '';
position: absolute;
width: 180px;
height: 180px;
border: 2px solid rgba(242, 140, 40, 0.15);
border-radius: 24px;
top: -20px;
left: -20px;
z-index: -1;
} @media (max-width: 1199px) {
.service-overview-content h2 {
font-size: 42px;
}
}
@media (max-width: 991px) {
.service-overview-content {
padding-left: 0;
margin-top: 50px;
}
.service-overview-content h2 {
font-size: 38px;
}
}
@media (max-width: 767px) {
.service-overview-content h2 {
font-size: 32px;
}
.service-overview-content p {
font-size: 15px;
}
.service-overview-list {
margin: 25px 0;
}
.service-overview-list li {
align-items: flex-start;
font-size: 15px;
}
}
@media (max-width: 575px) {
.service-overview-content h2 {
font-size: 28px;
}
.service-overview-image img {
border-radius: 18px;
}
} .service-included-section {
background: var(--off-white);
position: relative;
overflow: hidden;
padding: 80px 0;
}
.service-included-section .col-md-6,
.service-included-section .col-lg-3{
margin-top: 30px;
}
.included-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
padding: 35px 25px;
text-align: center;
height: 100%;
transition: all 0.4s ease;
}
.included-card:hover {
transform: translateY(-10px);
border-color: var(--accent);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.included-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
border-radius: 50%;
background: rgba(242, 140, 40, 0.12);
display: flex;
align-items: center;
justify-content: center;
}
.included-icon i {
font-size: 34px;
color: var(--accent);
}
.included-card h4 {
font-family: "Outfit", sans-serif;
font-size: 24px;
font-weight: 600;
color: var(--primary);
margin-bottom: 15px;
}
.included-card p {
font-family: "Poppins", sans-serif;
font-size: 15px;
line-height: 1.8;
color: var(--text-light);
margin-bottom: 0;
} .related-projects-section {
position: relative;
background: #fff;
overflow: hidden;
padding: 60px 0;
}
.related-projects-section .row {
margin-top: 30px;
}
.related-projects-section .col-md-6,
.related-projects-section .col-lg-4 {
margin-bottom: 30px;
}
.project-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s ease;
height: 100%;
}
.project-card:hover {
transform: translateY(-8px);
border-color: var(--accent);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.project-image {
overflow: hidden;
}
.project-image img {
width: 100%;
height: 280px;
display: block;
object-fit: cover;
transition: all 0.5s ease;
}
.project-card:hover .project-image img {
transform: scale(1.08);
}
.project-content {
padding: 25px;
}
.project-content h4 {
font-family: "Outfit", sans-serif;
font-size: 24px;
font-weight: 600;
color: var(--primary);
margin-bottom: 12px;
line-height: 1.3;
}
.project-content p {
font-family: "Poppins", sans-serif;
font-size: 15px;
line-height: 1.8;
color: var(--text-light);
margin-bottom: 0;
} @media (max-width: 991px) {
.related-projects-section .row {
margin-top: 20px;
}
.project-image img {
height: 240px;
}
.project-content {
padding: 20px;
}
.project-content h4 {
font-size: 22px;
}
} @media (max-width: 767px) {
.related-projects-section .col-md-6,
.related-projects-section .col-lg-4 {
margin-bottom: 20px;
}
.project-image img {
height: 220px;
}
.project-content {
padding: 18px;
}
.project-content h4 {
font-size: 20px;
}
.project-content p {
font-size: 14px;
}
} @media (max-width: 575px) {
.project-image img {
height: 200px;
}
.project-content {
padding: 16px;
}
} .service-process-section {
position: relative;
background: var(--off-white);
overflow: hidden;
padding: 80px 0;
}
.service-process-section .row {
margin-top: 40px;
}
.process-card {
position: relative;
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
padding: 40px 30px;
height: 100%;
margin-top: 30px;
transition: all 0.4s ease;
}
.process-card:hover {
transform: translateY(-10px);
border-color: var(--accent);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.process-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 65px;
height: 65px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-family: "Outfit", sans-serif;
font-size: 22px;
font-weight: 700;
margin-bottom: 25px;
}
.process-card h4 {
font-family: "Outfit", sans-serif;
font-size: 24px;
font-weight: 600;
color: var(--primary);
margin-bottom: 15px;
line-height: 1.3;
}
.process-card p {
font-family: "Poppins", sans-serif;
font-size: 15px;
line-height: 1.8;
color: var(--text-light);
margin-bottom: 0;
} @media (max-width: 991px) {
.service-process-section .row {
margin-top: 30px;
}
.process-card {
padding: 35px 25px;
margin-top: 25px;
}
.process-number {
width: 60px;
height: 60px;
font-size: 20px;
}
.process-card h4 {
font-size: 22px;
}
} @media (max-width: 767px) {
.service-process-section .row {
margin-top: 20px;
}
.process-card {
padding: 30px 20px;
margin-top: 20px;
}
.process-number {
width: 55px;
height: 55px;
font-size: 18px;
margin-bottom: 20px;
}
.process-card h4 {
font-size: 20px;
margin-bottom: 12px;
}
.process-card p {
font-size: 14px;
line-height: 1.7;
}
} @media (max-width: 575px) {
.process-card {
padding: 25px 18px;
margin-top: 15px;
}
.process-number {
width: 50px;
height: 50px;
font-size: 16px;
}
.process-card h4 {
font-size: 18px;
}
} @media (max-width: 991px) {
.included-card {
margin-bottom: 30px;
}
.included-card h4 {
font-size: 22px;
}
}
@media (max-width: 767px) {
.included-card {
padding: 30px 20px;
}
.included-icon {
width: 70px;
height: 70px;
}
.included-icon i {
font-size: 28px;
}
.included-card h4 {
font-size: 20px;
}
.included-card p {
font-size: 14px;
}
}
@media (max-width: 575px) {
.included-card {
margin-bottom: 20px;
}
} .thank-you-section {
position: relative;
padding: 120px 0 80px;
text-align: center;
overflow: hidden;
}
.thank-you-content {
max-width: 800px;
margin: 0 auto;
}
.thank-you-icon {
margin-bottom: 30px;
}
.thank-you-icon i {
font-size: 90px;
color: var(--accent);
display: inline-block;
}
.thank-you-content .section-subtitle {
margin-bottom: 15px;
}
.thank-you-content h1 {
font-family: "Outfit", sans-serif;
font-size: 60px;
font-weight: 700;
line-height: 1.15;
color: var(--primary);
margin-bottom: 25px;
}
.thank-you-content p {
max-width: 650px;
margin: 0 auto 35px;
font-size: 17px;
line-height: 1.8;
color: var(--text-light);
}
.thank-you-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
} .thank-you-features {
padding-bottom: 100px;
}
.feature-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
padding: 40px 25px;
text-align: center;
transition: all 0.4s ease;
height: 100%;
}
.feature-card:hover {
transform: translateY(-8px);
border-color: var(--accent);
box-shadow: 0 20px 45px rgba(31, 26, 29, 0.08);
}
.feature-card i {
font-size: 45px;
color: var(--accent);
margin-bottom: 20px;
}
.feature-card h4 {
font-family: "Outfit", sans-serif;
font-size: 22px;
font-weight: 600;
color: var(--primary);
margin: 0;
} .thank-you-cta {
padding-bottom: 120px;
}
.thank-you-cta .cta-content {
position: relative;
overflow: hidden;
background: var(--primary);
border-radius: 25px;
padding: 70px 40px;
text-align: center;
}
.thank-you-cta .cta-content::before {
content: "";
position: absolute;
width: 280px;
height: 280px;
background: rgba(216, 192, 138, 0.08);
border-radius: 50%;
top: -120px;
right: -80px;
}
.thank-you-cta .cta-content::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(216, 192, 138, 0.06);
border-radius: 50%;
bottom: -80px;
left: -60px;
}
.thank-you-cta h3 {
position: relative;
z-index: 2;
font-family: "Outfit", sans-serif;
font-size: 42px;
font-weight: 700;
color: #fff;
margin-bottom: 15px;
}
.thank-you-cta p {
position: relative;
z-index: 2;
color: rgba(255, 255, 255, 0.8);
font-size: 17px;
margin-bottom: 30px;
}
.thank-you-cta .btn-primary {
position: relative;
z-index: 2;
} .thank-you-buttons .btn-primary,
.thank-you-cta .btn-primary {
background: var(--accent);
border: 2px solid var(--accent);
color: var(--primary);
}
.thank-you-buttons .btn-primary:hover,
.thank-you-cta .btn-primary:hover {
background: #cdb271;
border-color: #cdb271;
color: var(--primary);
}
.thank-you-buttons .btn-secondary {
background: transparent;
border: 2px solid var(--border);
color: var(--primary);
}
.thank-you-buttons .btn-secondary:hover {
border-color: var(--accent);
color: var(--primary);
} @media (max-width: 991px) {
.thank-you-section {
padding: 100px 0 70px;
}
.thank-you-content h1 {
font-size: 48px;
}
.thank-you-cta h3 {
font-size: 34px;
}
}
@media (max-width: 767px) {
.thank-you-section {
padding: 80px 0 60px;
}
.thank-you-icon i {
font-size: 70px;
}
.thank-you-content h1 {
font-size: 38px;
}
.thank-you-content p {
font-size: 16px;
}
.thank-you-buttons {
flex-direction: column;
}
.thank-you-buttons a {
width: 100%;
justify-content: center;
}
.feature-card {
margin-bottom: 20px;
}
.thank-you-cta .cta-content {
padding: 50px 25px;
}
.thank-you-cta h3 {
font-size: 30px;
}
}
@media (max-width: 575px) {
.thank-you-content h1 {
font-size: 32px;
}
.thank-you-content p {
font-size: 15px;
}
.thank-you-cta h3 {
font-size: 26px;
}
} .legal-content-section {
padding: 120px 0;
background: #fff;
}
.legal-content {
max-width: 950px;
margin: 0 auto;
}
.legal-block {
margin-bottom: 50px;
padding-bottom: 40px;
border-bottom: 1px solid var(--border);
}
.legal-block:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.legal-block h2 {
font-family: "Outfit", sans-serif;
font-size: 32px;
font-weight: 700;
color: var(--primary);
margin-bottom: 20px;
position: relative;
padding-left: 18px;
}
.legal-block h2::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 30px;
background: var(--accent);
border-radius: 10px;
}
.legal-block p {
font-family: "Poppins", sans-serif;
font-size: 16px;
line-height: 1.9;
color: var(--text-light);
margin-bottom: 0;
}
.legal-contact-list {
margin: 25px 0 0;
padding: 0;
list-style: none;
}
.legal-contact-list li {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 15px 20px;
margin-bottom: 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--off-white);
color: var(--text);
font-family: "Poppins", sans-serif;
}
.legal-contact-list li strong {
color: var(--primary);
font-weight: 600;
min-width: 90px;
} .legal-block:hover h2 {
color: var(--accent);
transition: 0.3s ease;
}
.legal-contact-list li:hover {
border-color: var(--accent);
transform: translateX(5px);
transition: all 0.3s ease;
} @media (max-width: 991px) {
.legal-content-section {
padding: 100px 0;
}
.legal-block h2 {
font-size: 28px;
}
}
@media (max-width: 767px) {
.legal-content-section {
padding: 80px 0;
}
.legal-block {
margin-bottom: 40px;
padding-bottom: 30px;
}
.legal-block h2 {
font-size: 24px;
padding-left: 15px;
}
.legal-block h2::before {
height: 24px;
}
.legal-block p {
font-size: 15px;
line-height: 1.8;
}
.legal-contact-list li {
padding: 15px;
font-size: 14px;
}
}
@media (max-width: 575px) {
.legal-block h2 {
font-size: 22px;
}
.legal-contact-list li {
display: block;
}
.legal-contact-list li strong {
display: block;
margin-bottom: 5px;
}
} .legal-content-section {
padding: 120px 0;
background: #fff;
}
.legal-content {
max-width: 950px;
margin: 0 auto;
}
.legal-block {
margin-bottom: 50px;
padding-bottom: 40px;
border-bottom: 1px solid var(--border);
}
.legal-block:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.legal-block h2 {
font-family: "Outfit", sans-serif;
font-size: 32px;
font-weight: 700;
color: var(--primary);
margin-bottom: 20px;
position: relative;
padding-left: 18px;
}
.legal-block h2::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 30px;
background: var(--accent);
border-radius: 10px;
}
.legal-block p {
font-family: "Poppins", sans-serif;
font-size: 16px;
line-height: 1.9;
color: var(--text-light);
}
.legal-contact-list {
margin: 25px 0 0;
padding: 0;
list-style: none;
}
.legal-contact-list li {
padding: 15px 20px;
margin-bottom: 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--off-white);
}
.legal-contact-list li strong {
color: var(--primary);
font-weight: 600;
}  .success-message,
.wp-success,
.alert-success,
.wpcf7 form.sent .wpcf7-response-output{
background:#eafaf1;
color:#1f7a46;
border:1px solid #b9e6ca;
padding:15px 20px;
border-radius:8px;
margin:20px 0;
font-weight:500;
}
.error-message,
.wp-error,
.alert-danger,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
background:#fff2f2;
color:#c62828;
border:1px solid #f3b5b5;
padding:15px 20px;
border-radius:8px;
margin:20px 0;
font-weight:500;
}
.warning-message,
.alert-warning{
background:#fff8e5;
color:#9c6b00;
border:1px solid #f5d77a;
padding:15px 20px;
border-radius:8px;
margin:20px 0;
font-weight:500;
}
.info-message,
.alert-info{
background:#eef7ff;
color:#0b5cad;
border:1px solid #b7d7f8;
padding:15px 20px;
border-radius:8px;
margin:20px 0;
font-weight:500;
} .wpcf7-response-output{
margin-top:20px !important;
padding:15px 20px !important;
border-radius:8px;
font-size:15px;
}
.wpcf7-not-valid-tip{
color:#d32f2f;
font-size:14px;
margin-top:6px;
font-weight:500;
}
.wpcf7-spinner{
margin-left:10px;
}
.alignleft{
float:left;
margin:0 20px 20px 0;
}
.alignright{
float:right;
margin:0 0 20px 20px;
}
.aligncenter{
display:block;
margin:20px auto;
}
.wp-caption{
max-width:100%;
}
.wp-caption-text{
text-align:center;
font-size:14px;
color:#666;
margin-top:10px;
}
.screen-reader-text{
position:absolute;
left:-9999px;
}
.sticky{
display:block;
}
.gallery-caption{
font-style:italic;
}
.bypostauthor{
display:block;
}
.page-banner{
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} .featured-blog {
padding: 100px 0 70px;
}
.featured-blog .row {
align-items: center;
}
.featured-blog-image {
position: relative;
overflow: hidden;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(31, 26, 29, 0.08);
}
.featured-blog-image img {
width: 100%;
height: 500px;
display: block;
object-fit: cover;
transition: transform .6s ease;
}
@media (hover: hover) {
.featured-blog:hover .featured-blog-image img {
transform: scale(1.06);
}
}
.featured-blog-content {
padding-left: 50px;
}
.featured-label {
display: inline-flex;
align-items: center;
padding: 8px 18px;
margin-bottom: 20px;
background: rgba(244, 123, 32, 0.1);
border-radius: 50px;
font-size: 14px;
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
}
.featured-blog-content h2 {
margin-bottom: 20px;
font-family: "Outfit", sans-serif;
font-size: 42px;
font-weight: 700;
line-height: 1.25;
}
.featured-blog-content h2 a {
color: var(--primary);
transition: color .3s ease;
}
@media (hover: hover) {
.featured-blog-content h2 a:hover {
color: var(--accent);
}
}
.featured-blog-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 25px;
}
.featured-blog-meta li,
.featured-blog-meta span {
display: inline-flex;
align-items: center;
color: var(--text-light);
font-size: 15px;
}
.featured-blog-meta i {
margin-right: 8px;
color: var(--accent);
}
.featured-blog-content p {
margin-bottom: 35px;
color: var(--text-light);
line-height: 1.9;
}
.featured-blog-content .btn {
min-width: 180px;
justify-content: center;
} @media (max-width: 991px) {
.featured-blog {
padding: 80px 0 60px;
}
.featured-blog-content {
padding: 35px 0 0;
}
.featured-blog-image img {
height: 420px;
}
.featured-blog-content h2 {
font-size: 34px;
}
}
@media (max-width: 767px) {
.featured-blog {
padding: 60px 0 50px;
}
.featured-blog-image img {
height: 300px;
}
.featured-blog-content {
padding-top: 30px;
}
.featured-blog-content h2 {
font-size: 28px;
}
.featured-blog-meta {
gap: 12px;
}
}
@media (max-width: 575px) {
.featured-blog-image {
border-radius: 18px;
}
.featured-blog-image img {
height: 240px;
}
.featured-blog-content h2 {
font-size: 24px;
}
.featured-blog-content p {
font-size: 15px;
}
.featured-blog-content .btn {
width: 100%;
}
} .blog-grid-section {
padding: 30px 0 100px;
}
.blog-card {
height: 100%;
background: #fff;
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(31, 26, 29, 0.06);
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
@media (hover: hover) {
.blog-card:hover {
transform: translateY(-10px);
border-color: var(--accent);
box-shadow: 0 25px 60px rgba(31, 26, 29, 0.10);
}
} .blog-image {
display: block;
overflow: hidden;
}
.blog-image img {
width: 100%;
height: 260px;
display: block;
object-fit: cover;
transition: transform .6s ease;
}
@media (hover: hover) {
.blog-card:hover .blog-image img {
transform: scale(1.08);
}
} .blog-content {
padding: 28px;
}
.blog-content h3 {
margin-bottom: 15px;
font-family: "Outfit", sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
}
.blog-content h3 a {
color: var(--primary);
transition: color .3s ease;
}
@media (hover: hover) {
.blog-content h3 a:hover {
color: var(--accent);
}
}
.blog-content p {
margin-bottom: 22px;
color: var(--text-light);
line-height: 1.8;
} .blog-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 18px;
}
.blog-meta span {
display: inline-flex;
align-items: center;
font-size: 14px;
color: var(--text-light);
}
.blog-meta i {
margin-right: 8px;
color: var(--accent);
} .blog-read-more {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
color: var(--accent);
transition: color .3s ease;
}
.blog-read-more i {
transition: transform .3s ease;
}
@media (hover: hover) {
.blog-read-more:hover {
color: var(--primary);
}
.blog-read-more:hover i {
transform: translateX(6px);
}
} @media (max-width: 991px) {
.blog-grid-section {
padding-bottom: 80px;
}
.blog-image img {
height: 240px;
}
.blog-content {
padding: 24px;
}
.blog-content h3 {
font-size: 22px;
}
}
@media (max-width: 767px) {
.blog-grid-section {
padding-bottom: 60px;
}
.blog-image img {
height: 220px;
}
.blog-content {
padding: 22px;
}
.blog-content h3 {
font-size: 20px;
}
}
@media (max-width: 575px) {
.blog-card {
border-radius: 20px;
}
.blog-image img {
height: 200px;
}
.blog-content {
padding: 20px;
}
.blog-content h3 {
font-size: 18px;
}
.blog-content p {
font-size: 14px;
}
.blog-meta {
gap: 10px;
}
.blog-meta span {
font-size: 13px;
}
}