html,
body{
overflow-x:hidden;
}
.modal-open{
overflow:hidden;
padding-right:0 !important;
}
:root{
--primary:#0B9A4A; /* Green */
--primary-dark:#0A7C3C;
--secondary:#F68B1F; /* Orange */
--dark:#0B2F63; /* Navy Blue */
--text:#111;
--light:#F7FBF8;
--white:#ffffff;
}
/*==============================
Google Font
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;700;700&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Outfit',sans-serif;
background:#f7fbf7;
color:#222;
overflow-x:hidden;
}
a{
text-decoration:none;
}
img{
max-width:100%;
}
p {
margin-top: 0;
margin-bottom:0px;
}
/*==============================
Hero Section
==============================*/
/*=========================
Header
==========================*/
.main-header{
position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
z-index:9999;
box-shadow:0 8px 25px rgba(0,0,0,.08);
padding:10px 0;
}
body{
padding-top:110px;
}
/*=========================
Desktop Header
==========================*/
.desktop-header{
display:grid;
grid-template-columns:220px 1fr auto;
align-items:center;
gap:30px;
}
.logo img{
height:85px;
}
.desktop-menu{
display:flex;
justify-content:center;
align-items:center;
gap:35px;
list-style:none;
margin:0;
padding:0;
}
.desktop-menu li a{
color:#0B2F63;
text-decoration:none;
font-weight:600;
transition:.3s;
}
.desktop-menu li a:hover{
color:#0B9A4A;
}
/*=========================
Desktop Call Button
==========================*/
.header-call-btn{
display:flex;
align-items:center;
gap:10px;
padding:15px 28px;
background:#0B9A4A;
color:#fff;
text-decoration:none;
border-radius:50px;
font-weight:600;
white-space:nowrap;
transition:.3s;
}
.header-call-btn:hover{
background:#F68B1F;
color:#fff;
}
/*=========================
Mobile Header
==========================*/
.mobile-header{
display:none;
}
.mobile-phone{
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
color:#0B2F63;
font-weight:700;
font-size:18px;
}
.mobile-phone i{
color:#0B9A4A;
}
/*=========================
Hamburger
==========================*/
.menu-toggle{
display:none;
width:42px;
height:42px;
border:none;
background:none;
font-size:34px;
color:#0B2F63;
}
/*=========================
Overlay
==========================*/
.mobile-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:9998;
}
.mobile-overlay.active{
opacity:1;
visibility:visible;
}
/*=========================
Mobile Menu
==========================*/
.mobile-menu{
position:fixed;
top:0;
right:-320px;
width:300px;
max-width:85%;
height:100vh;
background:#fff;
padding:80px 25px;
transition:.35s;
z-index:99999;
overflow-y:auto;
}
.mobile-menu.active{
right:0;
}
.mobile-menu ul{
list-style:none;
margin:0;
padding:0;
}
.mobile-menu li{
margin-bottom:20px;
}
.mobile-menu li a{
color:#222;
text-decoration:none;
font-size:18px;
font-weight:600;
}
.mobile-menu li a:hover{
color:#0B9A4A;
}
.close-menu{
position:absolute;
top:20px;
right:20px;
border:none;
background:none;
font-size:30px;
cursor:pointer;
}
/*=========================
Responsive
==========================*/
@media(max-width:991px){
body{
padding-top:75px;
}
.desktop-header{
display:none;
}
.mobile-header{
display:flex;
justify-content:space-between;
align-items:center;
}
.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
}
}
/*==========================================
Hero Banner
==========================================*/
.hero-banner{
position:relative;
overflow:hidden;
padding:90px 0;
background:#08151d;
background-image:url("../images/hero-bg.webp");
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
display:flex;
align-items:center;
}
.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(90deg,
rgba(7,18,29,.92) 0%,
rgba(7,18,29,.88) 38%,
rgba(7,18,29,.45) 70%,
rgba(7,18,29,.15) 100%);
}
.hero-banner .container{
position:relative;
z-index:2;
}
.hero-title{
color:#fff;
font-size:64px;
font-weight:800;
position:relative;
display:inline-block;
}
.hero-title::after{
content:"";
width:110px;
height:5px;
background:#0BA84A;
position:absolute;
left:0;
bottom:-12px;
border-radius:20px;
}
/*==========================================
Left Content
==========================================*/
.hero-stress{
color:#F68B1F;
font-weight:700;
}
.hero-badge{
display:inline-flex;
align-items:center;
gap:12px;
padding:12px 26px;
border-radius:60px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(10px);
margin-bottom:30px;
}
.hero-badge i{
color:#24c95d;
font-size:22px;
}
.hero-badge span{
color:#fff;
font-size:18px;
font-weight:600;
}
/*==========================================
Heading
==========================================*/
.hero-left h1{
color:#fff;
font-size:42px;
font-weight:800;
line-height:1.5;
margin-bottom:12px;
}
.hero-left h2{
font-size:34px;
font-weight:700;
line-height:1.5;
color:#fff;
margin-bottom:12px;
}
.text-green{
color:#19c454;
}
.text-orange{
color:#ff9f1c;
}
.hero-green{
color:#0BA84A;
}
.hero-white{
color:#fff;
}
.hero-orange{
color:#F68B1F;
}
/*==========================================
Paragraph
==========================================*/
.hero-btn-primary .bi-whatsapp{
font-size:22px;
margin-right:4px;
}
.hero-left p{
font-size:17px;
line-height:1.7;
color:#f4f4f4;
max-width:650px;
margin-bottom:20px;
}
.hero-city{
padding:6px 16px;
border:2px solid #0BA84A;
color:#fff;
border-radius:40px;
}
/*==========================================
Buttons
==========================================*/
.hero-btns{
display:flex;
flex-wrap:wrap;
gap:18px;
margin-bottom:30px;
}
.hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:18px 34px;
border-radius:60px;
text-decoration:none;
font-size:18px;
font-weight:700;
transition:.35s;
}
.hero-btn i{
font-size:20px;
}
.hero-btn-primary{
background:#0ba84a;
color:#fff;
box-shadow:0 18px 40px rgba(11,168,74,.35);
}
.hero-btn-primary:hover{
background:#07853a;
color:#fff;
transform:translateY(-4px);
}
.hero-btn-outline{
border:2px solid rgba(255,255,255,.35);
color:#fff;
background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);
}
.hero-btn-outline:hover{
background:#fff;
color:#0b2f63;
}
/*==========================================
Right Image
==========================================*/
.hero-image{
position:relative;
text-align:center;
}
.hero-image img{
width:100%;
max-width:560px;
border-radius:25px;
box-shadow:0 35px 80px rgba(0,0,0,.35);
animation:floatImage 5s ease-in-out infinite;
}
/*==========================================
Image Animation
==========================================*/
@keyframes floatImage{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
100%{
transform:translateY(0);
}
}
/*==========================================
Hero Features
==========================================*/
.hero-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.feature-box{
display:flex;
align-items:center;
gap:18px;
padding:22px 25px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(14px);
border-radius:18px;
transition:.35s;
}
.feature-box:hover{
transform:translateY(-8px);
background:rgba(255,255,255,.14);
border-color:#0BA84A;
}
.feature-icon{
width:65px;
height:65px;
border-radius:50%;
background:#0BA84A;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:28px;
flex-shrink:0;
box-shadow:0 12px 30px rgba(11,168,74,.35);
}
.feature-box span{
color:#fff;
font-size:18px;
font-weight:600;
line-height:1.5;
}
/*==========================================
Decorative Shapes
==========================================*/
.hero-banner::before{
content:"";
position:absolute;
width:380px;
height:380px;
background:rgba(11,168,74,.12);
border-radius:50%;
top:-120px;
right:-120px;
filter:blur(20px);
}
.hero-banner::after{
content:"";
position:absolute;
width:260px;
height:260px;
background:rgba(246,139,31,.10);
border-radius:50%;
left:-90px;
bottom:-90px;
filter:blur(20px);
}
/*==========================================
Responsive
==========================================*/
@media(max-width:1199px){
.hero-left h1{
font-size:32px;
}
.hero-left p{
font-size:21px;
}
.hero-image img{
max-width:500px;
}
}
@media(max-width:991px){
.hero-banner{
padding:90px 0;
background-attachment:scroll;
text-align:center;
}
.hero-left{
max-width:100%;
}
.hero-left h1{
font-size:30px;
}
.hero-left p{
font-size:18px;
margin-left:auto;
margin-right:auto;
}
.hero-btns{
justify-content:center;
}
.hero-features{
grid-template-columns:1fr 1fr;
margin-top:10px;
}
.hero-image img{
max-width:420px;
}
}
@media(max-width:767px){
.hero-banner{
padding:70px 0;
min-height:auto;
}
.hero-badge{
padding:10px 18px;
}
.hero-city{
display:block;
width:fit-content;
margin:15px auto 0;
text-align:center;
}
.hero-badge span{
font-size:15px;
}
.hero-left h1{
font-size:26px;
line-height:1.0;
}
.hero-left p{
font-size:16px;
line-height:1.7;
}
.hero-left h2 {
font-size: 26px;
font-weight: 700;
line-height: 1.5;
color: #fff;
margin-bottom: 12px;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(7, 18, 29, 0.8) 0%, rgba(7, 18, 29, 0.8) 38%, rgba(7, 18, 29, 0.8) 70%, rgba(7, 18, 29, 0.8) 100%);
}
.hero-btns{
flex-direction:column;
gap:15px;
}
.hero-btn{
width:100%;
padding:10px 16px;
font-size:18px;
}
.hero-features{
grid-template-columns:1fr;
gap:15px;
}
.feature-box{
padding:18px;
}
.feature-icon{
width:55px;
height:55px;
font-size:22px;
}
.feature-box span{
font-size:16px;
}
.hero-image img{
max-width:100%;
}
}
/*=========================
Problem Section
==========================*/
.problem-section{
padding:40px 0;
background:#ffffff;
}
.problem-section h2{
font-size:42px;
font-weight:700;
color:var(--dark);
margin-bottom:20px;
}
.problem-desc{
max-width:780px;
margin:auto;
font-size:18px;
color:#111;
line-height:30px;
}
/* Cards */
.problem-card{
background:#fff;
border-radius:18px;
padding:30px 22px;
text-align:center;
height:100%;
border:1px solid #ececec;
transition:.35s;
box-shadow:0 10px 25px rgba(0,0,0,.05);
}
.problem-card:hover{
transform:translateY(-8px);
border-color:var(--primary);
}
.problem-card i{
font-size:34px;
color:var(--secondary);
margin-bottom:18px;
}
.problem-card p{
margin:0;
font-size:16px;
font-weight:700;
color:#333;
line-height:28px;
}
/* Warning Box */
.warning-box{
background:#f8faf8;
border-left:6px solid var(--secondary);
padding:35px;
border-radius:20px;
}
.warning-box h4{
color:var(--dark);
font-size:30px;
font-weight:700;
margin-bottom:18px;
}
.warning-box p{
color:#111;
font-size:17px;
line-height:30px;
}
/* CTA */
.problem-btn{
display:inline-block;
padding:18px 38px;
border-radius:50px;
background:var(--primary);
color:#fff;
font-weight:700;
font-size:18px;
animation:pulse 2s infinite;
transition:.35s;
}
.problem-btn:hover{
background:var(--secondary);
color:#fff;
}
/* Responsive */
@media(max-width:991px){
.problem-section{
padding:30px 0;
}
.problem-section h2{
font-size:34px;
}
.warning-box h4{
font-size:26px;
}
}
@media(max-width:767px){
.problem-section{
padding:30px 0;
}
.problem-section h2{
font-size:28px;
}
.problem-desc{
font-size:16px;
line-height:28px;
}
.problem-card{
padding:25px 18px;
}
.problem-card p{
font-size:15px;
line-height:25px;
}
.warning-box{
padding:25px;
}
.warning-box h4{
font-size:22px;
}
.warning-box p{
font-size:15px;
line-height:28px;
}
.problem-btn{
width:100%;
text-align:center;
}
}
.problem-cta{
max-width:900px;
margin:60px auto 0;
text-align:center;
padding:50px;
border-radius:25px;
background:linear-gradient(135deg,#0B9A4A,#0B2F63);
color:#fff;
overflow:hidden;
position:relative;
}
.problem-cta::before{
content:"";
position:absolute;
width:180px;
height:180px;
background:rgba(255,255,255,.08);
border-radius:50%;
top:-70px;
right:-70px;
}
.problem-cta::after{
content:"";
position:absolute;
width:130px;
height:130px;
background:rgba(255,255,255,.08);
border-radius:50%;
bottom:-40px;
left:-40px;
}
.problem-cta h3{
font-size:36px;
font-weight:700;
margin-bottom:20px;
position:relative;
z-index:2;
}
.problem-cta p{
font-size:17px;
line-height:30px;
color:#fff;
position:relative;
z-index:2;
}
.problem-cta .problem-btn{
margin-top:15px;
background:#F68B1F;
color:#fff;
padding:16px 38px;
border-radius:50px;
display:inline-block;
font-weight:700;
animation:pulse 2s infinite;
position:relative;
z-index:2;
}
.problem-cta .problem-btn:hover{
background:#ffffff;
color:#0B2F63;
}
@media(max-width:767px){
.problem-cta h3{
font-size:24px;
font-weight:700;
margin-bottom:20px;
position:relative;
z-index:2;
}
.problem-cta .problem-btn{
margin-top:15px;
background:#F68B1F;
color:#fff;
padding:16px 8px;
border-radius:50px;
display:inline-block;
font-weight:700;
animation:pulse 2s infinite;
position:relative;
z-index:2; font-size:16px;
}
}
/*=========================
Damage Section
==========================*/
.damage-section{
padding:50px 0;
background:#f8fbfd;
}
.damage-section h2{
font-size:36px;
font-weight:700;
color:var(--dark);
margin-bottom:20px;
}
.damage-desc{
font-size:18px;
color:#111;
max-width:760px;
margin:auto;
line-height:30px;
}
/* Main Image */
.damage-main-image{
width:320px;
max-width:100%;
animation:float 4s ease-in-out infinite;
}
/* Cards */
.damage-card{
background:#fff;
border-radius:20px;
padding:15px;
text-align:center;
height:100%;
border-top:5px solid var(--primary);
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
}
.damage-card:hover{
transform:translateY(-8px);
}
.damage-card img{
object-fit:contain;
margin-bottom:20px;
}
.damage-card p{
margin:0;
font-size:17px;
font-weight:700;
color:#333;
line-height:28px;
}
/* Bottom Box */
.damage-bottom{
background:#fff;
border-radius:25px;
padding:45px;
text-align:center;
margin-top:10px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}
.damage-bottom h3{
font-size:36px;
font-weight:700;
color:var(--dark);
margin-bottom:20px;
}
.damage-bottom p{
font-size:17px;
color:#111;
line-height:30px;
margin-bottom:30px;
}
.damage-btn{
display:inline-block;
background:var(--primary);
color:#fff;
padding:18px 40px;
border-radius:50px;
font-weight:700;
transition:.35s;
animation:pulse 2s infinite;
}
.damage-btn:hover{
background:var(--secondary);
color:#fff;
}
/* Floating */
@keyframes float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
}
/* Responsive */
@media(max-width:991px){
.damage-section h2{
font-size:34px;
}
.damage-main-image{
width:240px;
}
}
@media(max-width:767px){
.damage-section{
padding:30px 0;
}
.damage-section h2{
font-size:22px;
}
.damage-desc{
font-size:16px;
line-height:28px;
}
.damage-card{
padding:20px;
}
.damage-card p{
font-size:15px;
line-height:25px;
}
.damage-bottom{
padding:30px 20px;
}
.damage-bottom h3{
font-size:24px;
}
.damage-btn{
width:100%;
text-align:center;
}
}
/*==============================
Process Section
==============================*/
.process-section{
position: relative;
overflow: hidden;
padding:40px 0;
background:
radial-gradient(circle at top left,#dff7ea 0%,transparent 35%),
radial-gradient(circle at bottom right,#fff3e2 0%,transparent 30%),
linear-gradient(180deg,#ffffff 0%,#f7fbf8 100%);
}
.process-section::before{
content:"";
position:absolute;
width:320px;
height:320px;
border-radius:50%;
background:rgba(11,154,74,.08);
top:-140px;
left:-120px;
}
.process-section::after{
content:"";
position:absolute;
width:260px;
height:260px;
border-radius:50%;
background:rgba(246,139,31,.08);
bottom:-120px;
right:-40px;
}
.process-section .container{
position:relative;
z-index:2;
}
/*==============================
Heading
==============================*/
.process-heading{
max-width:850px;
margin:0 auto 70px;
}
.process-heading h2{
font-size:36px;
font-weight:700;
color:var(--dark);
margin:20px 0;
}
.process-heading p{
font-size:17px;
color:#111;
line-height:30px;
margin-bottom:12px;
}
/*==============================
Timeline
==============================*/
.process-wrapper{
max-width:1050px;
margin:auto;
position:relative;
}
.process-wrapper::before{
content:"";
position:absolute;
left:50%;
top:0;
transform:translateX(-50%);
width:5px;
height:100%;
background:linear-gradient(
to bottom,
#0B9A4A,
#F68B1F,
#0B9A4A
);
border-radius:50px;
}
/*==============================
Items
==============================*/
.process-item{
width:50%;
position:relative;
margin-bottom:45px;
}
.process-item.left{
padding-right:75px;
text-align:right;
}
.process-item.right{
margin-left:50%;
padding-left:75px;
}
/*==============================
Step Number
==============================*/
.step-number{
position:absolute;
top:25px;
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:24px;
font-weight:700;
color:#fff;
background:linear-gradient(
135deg,
#F68B1F,
#ffb75d
);
border:5px solid #fff;
box-shadow:
0 15px 35px rgba(246,139,31,.35);
z-index:3;
}
.left .step-number{
right:-35px;
}
.right .step-number{
left:-35px;
}
/*==============================
Cards
==============================*/
.process-box{
background:#fff;
padding:36px;
border-radius:22px;
border:1px solid #edf2ef;
box-shadow:
0 15px 40px rgba(0,0,0,.06);
transition:.35s;
position:relative;
}
.process-box::before{
content:"";
position:absolute;
left:0;
top:0;
width:6px;
height:100%;
border-radius:20px 0 0 20px;
background:linear-gradient(
to bottom,
#0B9A4A,
#F68B1F
);
}
.process-box:hover{
transform:translateY(-10px);
border-color:#0B9A4A;
box-shadow:
0 20px 50px rgba(11,154,74,.18);
}
.process-box h4{
font-size:24px;
font-weight:700;
color:var(--dark);
margin-bottom:12px;
}
.process-box p{
margin:0;
color:#111;
font-size:16px;
line-height:28px;
}
/*==============================
CTA
==============================*/
.theme-btn{
display:inline-flex;
align-items:center;
margin-top:15px;
padding:12px 42px;
border-radius:60px;
background:linear-gradient(
135deg,
#0B9A4A,
#08783b
);
color:#fff;
font-size:18px;
font-weight:700;
position:relative;
overflow:hidden;
box-shadow:
0 18px 35px rgba(11,154,74,.35);
transition:.4s;
animation:pulse 2s infinite;
}
.theme-btn i{
font-size:22px;
}
.theme-btn::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:55%;
height:100%;
background:rgba(255,255,255,.25);
transform:skewX(-25deg);
transition:.7s;
}
.theme-btn:hover::before{
left:130%;
}
.theme-btn:hover{
background:linear-gradient(
135deg,
#F68B1F,
#ffab3d
);
color:#fff;
transform:translateY(-4px);
}
/*==============================
Responsive
==============================*/
@media(max-width:991px){
.process-section{
padding:40px 0;
}
.process-heading{
margin-bottom:50px;
}
.process-heading h2{
font-size:34px;
}
.process-wrapper::before{
left:28px;
}
.process-item{
width:100%;
padding-left:90px !important;
padding-right:0 !important;
margin-left:0 !important;
text-align:left !important;
}
.step-number{
left:-6px !important;
right:auto !important;
width:60px;
height:60px;
font-size:20px;
}
.process-box{
padding:25px;
}
}
@media(max-width:767px){
.process-section{
padding:30px 0;
}
.process-heading h2{
font-size:22px;
}
.process-heading p{
font-size:15px;
line-height:28px;
}
.process-box h4{
font-size:20px;
}
.process-box p{
font-size:15px;
}
.theme-btn{
width:100%;
justify-content:center;
font-size:16px;
}
}
.services-section{
padding:50px 0;
background:#fff;
}
.services-section h2{font-weight:700;}
.service-card{
background:#fff;
border-radius:20px;
overflow:hidden;
border:1px solid #eee;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
height:100%;
}
.service-card:hover{
transform:translateY(-10px);
}
.service-card img{
width:100%;
height:220px;
object-fit:cover;
}
.service-content{
padding:25px;
display:flex;
flex-direction:column;
height:calc(100% - 220px);
}
.service-content h4{
font-size:24px;
font-weight:700;
color:#0B2F63;
margin-bottom:15px;
}
.service-content p{
color:#111;
line-height:28px;
margin-bottom:20px;
}
.service-for{
background:#eef8f2;
padding:12px;
border-radius:12px;
color:#0B9A4A;
font-size:14px;
min-height:72px;
margin-bottom:20px;
}
.service-btn{
display:block;
text-align:center;
background:#0B9A4A;
color:#fff;
padding:7px;
border-radius:50px; font-size:15px;
font-weight:700;
transition:.3s;
}
.service-btn:hover{
background:#F68B1F;
color:#fff;
}
@media(max-width:767px){
.service-content h4{
font-size:20px;
font-weight:700;
color:#0B2F63;
margin-bottom:15px;
}
}
/*=========================
Property Type Section
==========================*/
.property-section{
padding:30px 0;
background:#13375f;
}
.property-section h2{
font-size:36px;
font-weight:800;
color:#fff;
}
.property-card{
background:#fff;
border-radius:20px;
overflow:hidden;
height:100%;
border:1px solid #edf2ef;
transition:.35s;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}
.property-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(11,154,74,.15);
}
/* Image */
.property-img{
width:100%;
height:230px;
overflow:hidden;
background:#f2f2f2;
}
.property-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.5s;
}
.property-card:hover .property-img img{
transform:scale(1.08);
}
/* Content */
.property-content{
padding:10px;
text-align:center;
}
.property-content h4{
font-size:20px;
font-weight:700;
color:#0B2F63;
margin-bottom:15px;
}
.property-content p{
font-size:17px;
color:#111;
line-height:30px;
min-height:65px;
margin-bottom:25px;
}
.property-btn{
display:block;
width:100%;
padding:15px;
border-radius:50px;
background:linear-gradient(135deg,#0B9A4A,#08783b);
color:#fff;
font-weight:700;
transition:.35s;
animation:pulse 2s infinite;
}
.property-btn:hover{
background:linear-gradient(135deg,#F68B1F,#ffb14d);
color:#fff;
}
/* Responsive */
@media(max-width:991px){
.property-section{
padding:40px 0;
}
.property-section h2{
font-size:34px;
}
.property-img{
height:210px;
}
.property-content h4{
font-size:24px;
}
}
@media(max-width:767px){
.property-section{
padding:30px 0;
}
.property-section h2{
font-size:28px;
}
.property-img{
height:200px;
}
.property-content{
padding:20px;
}
.property-content h4{
font-size:22px;
}
.property-content p{
font-size:15px;
line-height:26px;
min-height:auto;
}
}
/*=========================
Why Choose Us
==========================*/
.why-section{
padding:100px 0;
background:#fff;
}
.why-image{
border-radius:25px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.12);
}
.why-image img{
width:100%;
height:620px;
object-fit:cover;
display:block;
}
.why-section h2{
font-size:34px;
font-weight:700;
color:#0B2F63;
margin:20px 0 35px;
}
.why-list{
display:flex;
flex-direction:column;
gap:18px;
}
.why-item{
display:flex;
align-items:center;
gap:8px;
padding:2px 22px;
border-bottom:1px solid #ececec;
}
.why-item:last-child{
border-bottom:none;
}
.brand-highlight{
color:#f87e22;
}
.why-item i{
font-size:24px;
color:#0B9A4A;
flex-shrink:0;
}
.why-item span{
font-size:20px;
font-weight:500;
color:#222;
}
.why-section small{
display:block;
margin-top:30px;
color:#666;
font-style:italic;
}
@media(max-width:991px){
.why-section{
padding:80px 0;
}
.why-image img{
height:450px;
}
.why-section h2{
font-size:36px;
margin-top:25px;
}
}
@media(max-width:767px){
.why-section{
padding:60px 0;
}
.why-image img{
height:300px;
}
.why-section h2{
font-size:28px;
}
.why-item{
padding:15px 0;
gap:15px;
}
.why-item span{
font-size:16px;
line-height:26px;
}
.why-item i{
font-size:20px;
}
}
/*=========================
Service Area
==========================*/
.location-section{
position:relative;
overflow:hidden;
padding:50px 0;
background:
radial-gradient(circle at top left,rgba(11,154,74,.18),transparent 35%),
radial-gradient(circle at bottom right,rgba(246,139,31,.18),transparent 35%),
linear-gradient(135deg,#eef8f2 0%,#dff3e8 45%,#f9efe3 100%);
}
.location-section::before{
content:"";
position:absolute;
width:380px;
height:380px;
background:rgba(11,154,74,.12);
border-radius:50%;
top:-150px;
left:-120px;
filter:blur(10px);
}
.location-section::after{
content:"";
position:absolute;
width:320px;
height:320px;
background:rgba(246,139,31,.12);
border-radius:50%;
bottom:-120px;
right:-80px;
filter:blur(10px);
}
.location-section .container{
position:relative;
z-index:2;
}
.location-section h2{
font-size:36px;
font-weight:700;
color:#0B2F63;
margin:20px 0;
}
.location-section p{
font-size:18px;
color:#111;
}
.location-list{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:18px;
margin-top:30px;
}
.location-item{
display:flex;
align-items:center;
gap:10px;
padding:16px 28px;
background:#fff;
border:1px solid #e8ece8;
border-radius:60px;
font-size:18px;
font-weight:700;
color:#222;
transition:.35s;
box-shadow:0 10px 25px rgba(0,0,0,.05);
}
.location-item:hover{
background:#0B9A4A;
color:#fff;
transform:translateY(-5px);
}
.location-item i{
color:#F68B1F;
font-size:20px;
}
.location-item:hover i{
color:#fff;
}
.location-btn{
display:inline-block;
padding:18px 42px;
border-radius:60px;
background:#0B9A4A;
color:#fff;
font-size:18px;
font-weight:700;
transition:.35s;
animation:pulse 2s infinite;
}
.location-btn:hover{
background:#F68B1F;
color:#fff;
}
@media(max-width:767px){
.location-section{
padding:30px 0;
}
.location-section h2{
font-size:28px;
}
.location-btn{
width:100%;
text-align:center;
}
}
@media (max-width:767px){
.location-list{
display:flex;
flex-wrap:wrap;
gap:12px;
}
.location-item{
justify-content:center;
text-align:center;
font-size:15px;
padding:15px 10px;
}
}
/*=========================
Comparison Section
==========================*/
.compare-section{
padding:50px 0;
background:#fff;
}
.compare-heading h2{
font-size:36px;
font-weight:700;
color:#0B2F63;
margin-top:20px;
}
.compare-box{
margin-top:50px;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,.08);
}
.compare-header{
display:grid;
grid-template-columns:1fr 1fr;
}
.compare-title{
padding:22px;
text-align:center;
color:#fff;
font-size:24px;
font-weight:700;
}
.compare-title.diy{
background:#dc3545;
}
.compare-title.pro{
background:#0B9A4A;
}
.compare-row{
display:grid;
grid-template-columns:1fr 1fr;
border-bottom:1px solid #ececec;
}
.compare-row:last-child{
border-bottom:none;
}
.compare-left,
.compare-right{
padding:15px 25px;
display:flex;
align-items:center;
gap:15px;
font-size:18px;
font-weight:500;
}
.compare-left{
background:#fff7f7;
}
.compare-right{
background:#f5fcf8;
}
.compare-left i{
color:#dc3545;
font-size:22px;
}
.compare-right i{
color:#0B9A4A;
font-size:22px;
}
.compare-bottom{
margin-top:50px;
}
.compare-bottom h4{
font-size:36px;
font-weight:700;
color:#0B2F63;
margin-bottom:25px;
}
@media(max-width:767px){
.compare-heading h2{
font-size:24px;
}
.compare-header{
grid-template-columns:1fr;
}
.compare-row{
grid-template-columns:1fr;
}
.compare-title{
font-size:20px;
}
.compare-left,
.compare-right{
font-size:16px;
padding:18px;
}
.compare-bottom h4{
font-size:24px;
}
}
@media (max-width:767px){
.compare-box{
overflow:hidden;
border-radius:20px;
}
.compare-header{
display:grid;
grid-template-columns:1fr 1fr;
}
.compare-row{
display:grid;
grid-template-columns:1fr 1fr;
}
.compare-left,
.compare-right{
width:100%;
padding:15px 12px;
font-size:14px;
display:flex;
align-items:flex-start;
gap:8px;
line-height:1.5;
}
.compare-title{
font-size:18px;
padding:18px 10px;
text-align:center;
}
.compare-left i,
.compare-right i{
font-size:16px;
margin-top:2px;
flex-shrink:0;
}
}
/*=========================
Promise Section
==========================*/
.promise-section{
padding:50px 0;
background:#0B2F63;
position:relative;
overflow:hidden;
}
.promise-section::before{
content:"";
position:absolute;
width:380px;
height:380px;
background:rgba(255,255,255,.05);
border-radius:50%;
top:-150px;
left:-120px;
}
.promise-section::after{
content:"";
position:absolute;
width:300px;
height:300px;
background:rgba(246,139,31,.10);
border-radius:50%;
bottom:-120px;
right:-80px;
}
.promise-section .container{
position:relative;
z-index:2;
}
.promise-section h2{
color:#fff;
font-size:36px;
font-weight:700;
margin:20px 0;
}
.promise-card{
position:relative;
background:#fff;
border-radius:18px;
padding:35px 25px;
text-align:center;
height:100%;
overflow:hidden;
transition:.35s;
box-shadow:0 15px 35px rgba(0,0,0,.15);
}
/* Top Green Strip */
.promise-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background:#0B9A4A;
}
/* Orange Corner */
.promise-card::after{
content:"";
position:absolute;
right:0;
bottom:0;
width:70px;
height:70px;
background:#F68B1F;
clip-path:polygon(100% 0,0 100%,100% 100%);
opacity:.15;
}
.promise-card:hover{
transform:translateY(-10px);
}
.promise-icon{
width:70px;
height:70px;
margin:auto auto 20px;
border-radius:18px;
background:#eef8f2;
display:flex;
align-items:center;
justify-content:center;
transform:rotate(45deg);
}
.promise-icon i{
transform:rotate(-45deg);
font-size:28px;
color:#0B9A4A;
}
.promise-card h5{
font-size:22px;
color:#222;
font-weight:700;
line-height:32px;
margin:0;
}
@media(max-width:991px){
.promise-section{
padding:80px 0;
}
.promise-section h2{
font-size:34px;
}
}
@media(max-width:767px){
.promise-section{
padding:60px 0;
}
.promise-section h2{
font-size:28px;
}
.promise-card{
padding:28px 20px;
}
.promise-card h5{
font-size:18px;
line-height:28px;
}
.promise-icon{
width:60px;
height:60px;
}
.promise-icon i{
font-size:24px;
}
}
/*=========================
FAQ Section
==========================*/
.faq-section{
padding:50px 0;
background:#f8fbf8;
}
.faq-section h2{
font-size:36px;
font-weight:700;
color:#0B2F63;
}
.custom-faq .accordion-item{
border:none;
border-radius:16px !important;
overflow:hidden;
margin-bottom:18px;
box-shadow:0 12px 35px rgba(0,0,0,.06);
}
.custom-faq .accordion-button{
padding:22px 25px;
font-size:20px;
font-weight:700;
color:#222;
background:#fff;
box-shadow:none;
}
.custom-faq .accordion-button:not(.collapsed){
background:#0B9A4A;
color:#fff;
}
.custom-faq .accordion-button:focus{
box-shadow:none;
}
.custom-faq .accordion-button::after{
filter:brightness(0);
}
.custom-faq .accordion-button:not(.collapsed)::after{
filter:brightness(0) invert(1);
}
.custom-faq .accordion-body{
padding:22px 25px;
font-size:17px;
color:#111;
line-height:30px;
background:#fff;
}
@media(max-width:767px){
.faq-section{
padding:30px 0;
}
.faq-section h2{
font-size:28px;
}
.custom-faq .accordion-button{
font-size:17px;
padding:18px;
}
.custom-faq .accordion-body{
font-size:15px;
padding:18px;
line-height:26px;
}
}
.contact-cta-section{
position:relative;
padding:100px 0;
background:
linear-gradient(rgba(8,25,35,.88),rgba(8,25,35,.88)),
url("../images/contact.webp");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
overflow:hidden;
}
.contact-cta-section::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:320px;
height:320px;
border-radius:50%;
background:rgba(11,168,74,.12);
filter:blur(40px);
}
.contact-cta-section::after{
content:"";
position:absolute;
left:-100px;
bottom:-100px;
width:260px;
height:260px;
border-radius:50%;
background:rgba(246,139,31,.12);
filter:blur(35px);
}
.contact-cta-section .container{
position:relative;
z-index:2;
}
.contact-left h2{
font-size:36px;
font-weight:700;
color:#fff;
margin:10px 0;
}
.contact-subtitle{
font-size:16px;
color:#fff;
margin-bottom:10px;
}
.contact-left h3{
color:#F68B1F;
margin-bottom:35px; font-size:18px;
}
.contact-tag{
display:inline-block;
background:#0BA84A;
color:#fff;
padding:10px 22px;
border-radius:50px;
font-weight:600;
}
.contact-info-item{
display:flex;
gap:18px;
margin-bottom:30px;
}
.contact-icon{
width:60px;
height:60px;
border-radius:50%;
background:#0BA84A;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:22px;
flex-shrink:0;
}
.contact-info-item h5{
font-weight:700; color:#fff;
margin-bottom:10px;
}
.contact-info-item a{
color:#fff;
text-decoration:none;
line-height:30px;
}
.contact-info-item p{
margin:0;
color:#fff;
line-height:28px;
}
/* Right */
.contact-right{
background:#fff;
border-radius:24px;
padding:50px;
box-shadow:0 20px 60px rgba(0,0,0,.08);
border-top:6px solid #0BA84A;
}
.right-tag{
display:inline-block;
background:#eefaf2;
color:#0BA84A;
padding:8px 18px;
border-radius:50px;
font-weight:600;
margin-bottom:20px;
}
.contact-right h3{
font-size:38px;
color:#0B2F63;
margin-bottom:20px;
}
.contact-right p{
color:#111;
line-height:30px;
}
.service-points{
margin:35px 0;
}
.service-points div{
margin-bottom:18px;
font-weight:600;
}
.service-points i{
color:#0BA84A;
margin-right:10px;
}
.contact-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.contact-call-btn,
.contact-whatsapp-btn{
flex:1;
text-align:center;
padding:16px;
color:#fff;
border-radius:50px;
text-decoration:none;
font-weight:700;
transition:.35s;
}
.contact-call-btn{
background:#F68B1F;
}
.contact-whatsapp-btn{
background:#25D366;
}
.contact-call-btn:hover,
.contact-whatsapp-btn:hover{
color:#fff;
transform:translateY(-4px);
}
@media(max-width:767px){
.contact-cta-section{
position:relative;
padding:30px 0;
background:
linear-gradient(rgba(8,25,35,.88),rgba(8,25,35,.88)),
url("../images/contact.webp");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
overflow:hidden;
}
.contact-left h2{
font-size:26px;
}
.contact-right{
padding:30px 25px;
}
.contact-right h3{
font-size:28px;
}
.contact-buttons{
flex-direction:column;
}
}
.contact-cta-section .row > .col-lg-6{
margin-top:0 !important;
}
/*=========================
Footer
==========================*/
.footer-section{
background:#08284f;
padding:18px 0;
border-top:1px solid rgba(255,255,255,.08);
}
.footer-section p{
color:#fff;
font-size:15px;
margin:0;
}
.footer-section a{
color:#F68B1F;
text-decoration:none;
font-weight:700;
transition:.3s;
}
.footer-section a:hover{
color:#fff;
}
@media(max-width:767px){
.footer-section{
text-align:center;
}
}
/*=========================
Floating Contact
==========================*/
.floating-contact{
position:fixed;
left:20px;
bottom:30px;
z-index:9999;
display:flex;
flex-direction:column;
gap:15px;
}
.float-btn{
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:28px;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.25);
animation:pulse 2s infinite;
transition:.35s;
}
.call-btn{
background:#F68B1F;
}
.whatsapp-btn{
background:#25D366;
}
.float-btn:hover{
color:#fff;
transform:translateY(-5px) scale(1.08);
}
@media(max-width:767px){
.floating-contact{
left:15px;
bottom:20px;
}
.float-btn{
width:52px;
height:52px;
font-size:24px;
}
}
/*=========================
Mobile Sticky CTA
==========================*/
.mobile-sticky-cta{
position:fixed;
bottom:0;
left:0;
width:100%;
display:none;
z-index:99;
background:#fff;
box-shadow:0 -5px 20px rgba(0,0,0,.15);
}
.mobile-sticky-cta a{
flex:1;
text-align:center;
padding:12px 8px;
color:#fff;
text-decoration:none;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:700;
}
.mobile-sticky-cta i{
font-size:20px;
margin-bottom:4px;
}
.mobile-call{
background:#F68B1F;
}
.mobile-whatsapp{
background:#25D366;
}
.mobile-enquiry{
background:#0B9A4A;
}
.mobile-call:hover,
.mobile-whatsapp:hover,
.mobile-enquiry:hover{
color:#fff;
}
@media(max-width:767px){
.mobile-sticky-cta{
display:flex;
}
body{
padding-bottom:70px;
}
.floating-contact{display: none;}
}
/*=========================
Popup
=========================*/
.enquiry-modal{
position:relative;
border:none;
border-radius:25px;
overflow:hidden;
}
/* Close */
.modal-close{
position:absolute;
top:18px;
right:18px;
width:42px;
height:42px;
border:none;
background:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#0B2F63;
font-size:18px;
box-shadow:0 8px 20px rgba(0,0,0,.15);
z-index:999;
transition:.3s;
}
.modal-close:hover{
background:#F68B1F;
color:#fff;
transform:rotate(90deg);
}
/* Left */
.popup-left{
background:linear-gradient(135deg,#0B2F63,#0B9A4A);
color:#fff;
height:100%;
padding:50px 35px;
}
.popup-tag{
display:inline-block;
background:rgba(255,255,255,.15);
padding:8px 18px;
border-radius:40px;
margin-bottom:20px;
font-size:14px;
}
.popup-left h3{
font-size:34px;
font-weight:700;
margin-bottom:20px;
}
.popup-left p{
color:#f2f2f2;
line-height:28px;
margin-bottom:30px;
}
.popup-left ul{
padding:0;
margin:0;
list-style:none;
}
.popup-left li{
display:flex;
gap:12px;
margin-bottom:18px;
font-size:17px;
}
.popup-left i{
color:#F68B1F;
}
/* Right */
.popup-form{
padding:45px;
}
.popup-form h4{
text-align:center;
color:#0B2F63;
font-size:30px;
font-weight:700;
margin-bottom:25px;
}
.popup-form .form-control{
height:55px;
border-radius:10px;
border:1px solid #ddd;
box-shadow:none;
}
.popup-form textarea.form-control{
height:auto;
}
.popup-form .form-control:focus{
border-color:#0B9A4A;
box-shadow:none;
}
/* Responsive */
@media(max-width:991px){
.popup-left{
display:none;
}
.popup-form{
padding:30px;
}
}
@media(max-width:767px){
.popup-form{
padding:25px;
}
.popup-form h4{
font-size:24px;
}
}