/* ================================
GLOBAL STYLES
================================ */

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

body{
font-family:'Poppins',sans-serif;
line-height:1.6;
color:#333;
background:#f4f6f7;
}

/* ================================
CONTAINER
================================ */

.container{
max-width:1200px;
margin:auto;
padding:80px 25px;
}

/* ================================
NAVIGATION
================================ */

.navbar{
position:sticky;
top:0;
background:white;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
z-index:999;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
}

.logo{
font-size:28px;
font-weight:700;
color:#1e6f5c;
}

.nav-links{
list-style:none;
display:flex;
gap:35px;
}

.nav-links a{
text-decoration:none;
font-weight:600;
color:#333;
transition:.3s;
}

.nav-links a:hover{
color:#ff7a18;
}

.nav-cta{
background:#ff7a18;
padding:10px 18px;
border-radius:30px;
color:white !important;
}

/* ================================
HERO SECTION
================================ */

.hero{
height:85vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;

background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url("images/work1.jpg");

background-size:cover;
background-position:center;

color:white;
}

.hero-title{
font-size:64px;
font-weight:700;
animation:heroSlide 1.6s ease;
}

.hero-sub{
font-size:22px;
margin-top:15px;
opacity:.9;
animation:heroFade 2.5s ease;
}

.hero-buttons{
margin-top:30px;
display:flex;
justify-content:center;
gap:20px;
}

/* HERO ANIMATIONS */

@keyframes heroSlide{

0%{
opacity:0;
transform:translateY(-60px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes heroFade{

0%{opacity:0}
100%{opacity:1}

}

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

.btn-primary{
background:#ff7a18;
color:white;
padding:15px 35px;
border-radius:40px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.btn-primary:hover{
transform:scale(1.08);
background:#ff5500;
}

.btn-secondary{
background:white;
color:#333;
padding:15px 35px;
border-radius:40px;
text-decoration:none;
font-weight:600;
}

/* ================================
SECTION STYLE
================================ */

section{
background:white;
border-radius:14px;
margin:60px auto;
max-width:1200px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

h2{
text-align:center;
font-size:36px;
margin-bottom:40px;
color:#1e6f5c;
}

/* ================================
ABOUT
================================ */

.about-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:25px;
font-size:18px;
text-align:center;
}

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

.services{
background:#f8fafb;
}

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

.service-card{

background:white;
padding:35px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:.35s;
text-align:center;

}

.service-card:hover{

transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,0.15);

}

.service-card h3{

margin-bottom:10px;
color:#1e6f5c;

}

/* ================================
GALLERY
================================ */

.gallery-grid{

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

}

.gallery-grid img{

width:100%;
border-radius:12px;
transition:.35s;
box-shadow:0 10px 30px rgba(0,0,0,0.15);

}

.gallery-grid img:hover{

transform:scale(1.06);

}

/* ================================
REVIEWS
================================ */

.review-slider{

max-width:700px;
margin:auto;
text-align:center;

}

.review{

display:none;
font-size:20px;

}

.review.active{

display:block;
animation:fade 1s;

}

@keyframes fade{

from{opacity:0}
to{opacity:1}

}

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

.contact form{

max-width:600px;
margin:auto;
display:flex;
flex-direction:column;
gap:18px;

}

.contact input,
.contact select,
.contact textarea{

padding:14px;
border-radius:8px;
border:1px solid #ddd;
font-size:16px;

}

.contact textarea{

height:120px;

}

.contact button{

background:#ff7a18;
color:white;
border:none;
padding:16px;
font-size:18px;
border-radius:40px;
cursor:pointer;
transition:.3s;

}

.contact button:hover{

background:#ff5500;
transform:scale(1.05);

}

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

.floating-buttons{

position:fixed;
bottom:25px;
right:25px;
display:flex;
flex-direction:column;
gap:14px;
z-index:999;

}

.call-btn,
.whatsapp-btn{

width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:26px;
color:white;
text-decoration:none;
box-shadow:0 6px 20px rgba(0,0,0,0.25);
transition:.3s;

}

.call-btn{

background:#ff7a18;

}

.whatsapp-btn{

background:#25D366;

}

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

transform:scale(1.15);

}

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

iframe{

border-radius:12px;

}

/* ================================
MOBILE
================================ */

@media(max-width:768px){

.hero-title{
font-size:38px;
}

.hero-buttons{
flex-direction:column;
}

.nav-links{
display:none;
}

}