/* ======================================================
   PROMISE FACILITY MANAGEMENT SERVICES
   Premium Corporate Website
   Theme : From Dust to Trust
   Color : #008080
====================================================== */

:root{

--primary:#008080;
--primary-dark:#005f5f;
--primary-light:#18b7b7;
--light:#eaf9f9;
--white:#ffffff;
--text:#2d2d2d;
--gray:#777777;
--border:#ececec;
--shadow:0 15px 40px rgba(0,0,0,.08);
--radius:18px;
--transition:.35s ease;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Open Sans',sans-serif;
font-size:16px;
line-height:1.7;
color:var(--text);
background:#fff;
overflow-x:hidden;

}

h1,h2,h3,h4,h5{

font-family:'Montserrat',sans-serif;
font-weight:700;
line-height:1.2;

}

a{

text-decoration:none;
transition:var(--transition);

}

img{

display:block;
max-width:100%;

}

.container{

width:min(1200px,92%);
margin:auto;

}

section{

padding:110px 0;

}

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title span{

display:inline-block;
padding:10px 18px;
border-radius:50px;
background:#eaf9f9;
color:var(--primary);
font-weight:600;
letter-spacing:1px;
margin-bottom:20px;

}

.section-title h2{

font-size:48px;
margin-bottom:20px;

}

.section-title p{

max-width:700px;
margin:auto;
color:var(--gray);

}

/* ===========================
Buttons
=========================== */

.primary-btn{

background:var(--primary);
color:#fff;
padding:16px 34px;
border-radius:50px;
font-weight:600;
display:inline-block;
box-shadow:var(--shadow);

}

.primary-btn:hover{

background:var(--primary-dark);
transform:translateY(-4px);

}

.secondary-btn{

border:2px solid #fff;
padding:16px 34px;
color:#fff;
border-radius:50px;
display:inline-block;
font-weight:600;

}

.secondary-btn:hover{

background:#fff;
color:var(--primary);

}

/* ===========================
Loader
=========================== */

#loader{

position:fixed;
inset:0;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;

}

.loader-content{

text-align:center;

}

.loader-content img{

width:130px;
margin:auto;

}

.loader-content h2{

margin-top:20px;
color:var(--primary);

}

.loader-content p{

color:#777;
margin-top:8px;

}

.loader-bar{

width:250px;
height:6px;
background:#ddd;
border-radius:100px;
margin-top:30px;
overflow:hidden;

}

.loader-bar span{

display:block;
height:100%;
width:0%;
background:linear-gradient(90deg,#18b7b7,#008080);

animation:loading 2s linear infinite;

}

@keyframes loading{

0%{width:0%;}
100%{width:100%;}

}

/* ===========================
Progress Bar
=========================== */

#progressBar{

position:fixed;
top:0;
left:0;
height:4px;
width:0%;
background:#18b7b7;
z-index:999999;

}

/* ===========================
Navigation
=========================== */

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
padding:18px 0;

backdrop-filter:blur(18px);

background:rgba(255,255,255,.18);

transition:.4s;

}

header.scrolled{

background:#fff;
box-shadow:var(--shadow);

}

header .container{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo img{

height:72px;

}

nav ul{

display:flex;
gap:35px;
list-style:none;

}

nav a{

font-weight:600;
color:#222;

}

nav a:hover{

color:var(--primary);

}

.header-buttons{

display:flex;
gap:15px;
align-items:center;

}

.call-btn{

width:48px;
height:48px;

display:flex;
justify-content:center;
align-items:center;

background:var(--primary);

color:#fff;

border-radius:50%;

}

#mobileMenu{

display:none;
background:none;
border:none;
font-size:24px;

}

/* ===========================
Hero
=========================== */

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(rgba(0,0,0,.55),

rgba(0,0,0,.55)),

url('../images/hero/kerala-villa.jpg');

background-size:cover;

background-position:center;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:600px;
height:600px;

background:rgba(24,183,183,.18);

filter:blur(120px);

border-radius:50%;

top:-200px;
right:-200px;

}

.hero-content{

position:relative;

z-index:5;

width:min(1200px,92%);

margin:auto;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

}

.tagline{

display:inline-block;

background:rgba(255,255,255,.12);

backdrop-filter:blur(15px);

padding:10px 22px;

border-radius:50px;

color:#fff;

margin-bottom:30px;

}

.hero h1{

font-size:68px;

color:#fff;

margin-bottom:25px;

}

.hero h1 span{

color:#18b7b7;

}

.hero p{

font-size:20px;

color:#f1f1f1;

margin-bottom:40px;

max-width:650px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:45px;

}

.trust-row{

display:flex;

gap:30px;

flex-wrap:wrap;

color:#fff;

}

.trust-row div{

display:flex;
align-items:center;
gap:8px;

}

.glass-card{

background:rgba(255,255,255,.12);

backdrop-filter:blur(25px);

padding:45px;

border-radius:25px;

border:1px solid rgba(255,255,255,.15);

box-shadow:0 25px 60px rgba(0,0,0,.25);

color:#fff;

}

.glass-card h3{

font-size:30px;

margin-bottom:20px;

}

.glass-card ul{

margin-top:25px;

padding-left:18px;

}

.glass-card li{

margin-bottom:12px;

}

.scroll-down{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

color:#fff;

font-size:28px;

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{transform:translate(-50%,0);}
50%{transform:translate(-50%,12px);}

}

/* ===========================
About
=========================== */

.about-grid{

display:grid;

grid-template-columns:420px 1fr;

gap:70px;

align-items:center;

}

.about-image{

padding:40px;

border-radius:25px;

background:#fff;

box-shadow:var(--shadow);

}

.about-image img{

margin:auto;

width:260px;

}

.about-content p{

margin-bottom:25px;

font-size:18px;

color:#555;

}

.about-highlights{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

margin-top:40px;

}

.about-highlights div{

background:#fff;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

border-top:5px solid var(--primary);

}

.about-highlights h3{

margin-bottom:15px;

color:var(--primary);

}
/* =========================================================
   SERVICES
========================================================= */

.services{
background:#f8fbfb;
}

.service-category{
margin-bottom:70px;
}

.service-category h3{
font-size:32px;
margin-bottom:35px;
color:var(--primary);
text-align:center;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.service-card{

background:#fff;
padding:35px;
border-radius:22px;
box-shadow:var(--shadow);
transition:.35s;
position:relative;
overflow:hidden;

}

.service-card::before{

content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:5px;
background:var(--primary);

}

.service-card:hover{

transform:translateY(-10px);

}

.service-card .icon{

width:75px;
height:75px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
background:linear-gradient(135deg,#18b7b7,#008080);
color:#fff;
margin-bottom:25px;

}

.service-card h4{

margin-bottom:15px;
font-size:24px;

}

.service-card p{

color:#666;

}

/* =========================================================
   BEFORE AFTER
========================================================= */

.gallery{

background:#fff;

}

.comparison-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.comparison-card{

overflow:hidden;

border-radius:22px;

box-shadow:var(--shadow);

background:#fff;

transition:.4s;

}

.comparison-card:hover{

transform:translateY(-8px);

}

.comparison-card img{

width:100%;
height:270px;
object-fit:cover;

transition:.5s;

}

.comparison-card:hover img{

transform:scale(1.06);

}

.comparison-content{

padding:30px;

}

.comparison-content h3{

margin-bottom:12px;

}

.comparison-content p{

color:#666;

margin-bottom:15px;

}

.comparison-content span{

font-weight:600;
color:var(--primary);

}

/* =========================================================
   WHY US
========================================================= */

.why-us{

background:linear-gradient(180deg,#ffffff,#f5fdfd);

}

.features-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.feature-card{

padding:40px;

text-align:center;

background:#fff;

border-radius:22px;

box-shadow:var(--shadow);

transition:.4s;

}

.feature-card:hover{

transform:translateY(-10px);

}

.feature-card i{

font-size:45px;

color:var(--primary);

margin-bottom:20px;

}

.feature-card h3{

margin-bottom:15px;

}

.feature-card p{

color:#666;

}

/* =========================================================
COUNTERS
========================================================= */

.counter-section{

background:linear-gradient(135deg,#008080,#005f5f);

color:#fff;

}

.counter-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.counter{

text-align:center;

}

.counter h2{

font-size:70px;

margin-bottom:10px;

}

.counter p{

font-size:18px;

}

/* =========================================================
TESTIMONIALS
========================================================= */

.testimonials{

background:#f8fbfb;

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.stars{

color:#f6b800;

font-size:22px;

margin-bottom:20px;

}

.customer{

display:flex;

align-items:center;

margin-top:30px;

}

.avatar{

width:60px;
height:60px;

border-radius:50%;

background:var(--primary);

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-weight:bold;

margin-right:18px;

font-size:22px;

}

/* =========================================================
PROCESS
========================================================= */

.process{

background:#fff;

}

.process-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.process-card{

background:#f9f9f9;

padding:40px;

border-radius:22px;

text-align:center;

position:relative;

}

.step{

width:70px;

height:70px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:linear-gradient(135deg,#18b7b7,#008080);

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-weight:bold;

font-size:24px;

}

/* =========================================================
CTA
========================================================= */

.cta{

background:linear-gradient(135deg,#008080,#18b7b7);

color:#fff;

text-align:center;

}

.cta h2{

font-size:48px;

margin-bottom:20px;

}

.cta p{

max-width:700px;

margin:auto;

margin-bottom:35px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

/* =========================================================
CONTACT
========================================================= */

.contact-grid{

display:grid;

grid-template-columns:420px 1fr;

gap:50px;

}

.info-card{

display:flex;

gap:20px;

margin-bottom:30px;

align-items:flex-start;

}

.info-card i{

font-size:28px;

color:var(--primary);

margin-top:5px;

}

.social-links{

margin-top:40px;

display:flex;

gap:15px;

}

.social-links a{

width:50px;

height:50px;

display:flex;

justify-content:center;

align-items:center;

background:var(--primary);

border-radius:50%;

color:#fff;

font-size:18px;

transition:.3s;

}

.social-links a:hover{

transform:translateY(-5px);

background:var(--primary-dark);

}

.contact-form{

background:#fff;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

}

.contact-form input,
.contact-form textarea,
.contact-form select{

width:100%;

padding:18px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:12px;

font-family:inherit;

font-size:16px;

}

.contact-form button{

width:100%;

padding:18px;

background:var(--primary);

color:#fff;

border:none;

border-radius:50px;

font-size:18px;

cursor:pointer;

transition:.3s;

}

.contact-form button:hover{

background:var(--primary-dark);

}

/* =========================================================
MAP
========================================================= */

.map iframe{

width:100%;

height:450px;

border:0;

}

/* =========================================================
FOOTER
========================================================= */

footer{

background:#0f2222;

color:#ddd;

padding:80px 0 40px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

margin-bottom:50px;

}

.footer-logo{

width:170px;

margin-bottom:20px;

}

footer h4{

color:#fff;

margin-bottom:20px;

}

footer ul{

list-style:none;

}

footer li{

margin-bottom:12px;

}

footer a{

color:#ccc;

}

footer a:hover{

color:#18b7b7;

}

footer hr{

border:none;

border-top:1px solid rgba(255,255,255,.1);

margin-bottom:30px;

}

.copyright{

text-align:center;

color:#999;

}

/* =========================================================
FLOATING BUTTONS
========================================================= */

.floating-whatsapp,
.floating-call{

position:fixed;

right:25px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:24px;

z-index:999;

box-shadow:0 10px 30px rgba(0,0,0,.2);

}

.floating-whatsapp{

bottom:30px;

background:#25D366;

}

.floating-call{

bottom:105px;

background:#008080;

}

.floating-whatsapp:hover,
.floating-call:hover{

transform:scale(1.08);

}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:992px){

.hero-content,
.about-grid,
.contact-grid{

grid-template-columns:1fr;

}

.counter-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

.hero{

height:auto;

padding:180px 0 120px;

}

.hero h1{

font-size:52px;

}

nav{

display:none;

}

#mobileMenu{

display:block;

}

}

@media(max-width:768px){

.section-title h2{

font-size:34px;

}

.hero h1{

font-size:42px;

}

.hero-buttons{

flex-direction:column;

}

.counter-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.about-highlights{

grid-template-columns:1fr;

}

.cta h2{

font-size:34px;

}

}