:root{
--pink:#f7c6d9;
--pink-dark:#e99bb8;
--sage:#cfe8cf;
--green:#2f5e44;
--green-light:#4b8a67;
--white:#fff;
--bg:#fdfaf8;
--shadow:0 10px 30px rgba(0,0,0,.1);
--radius:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:Poppins,sans-serif;
background:linear-gradient(180deg,#fdfaf8,#f7fff7);
color:#234;
overflow-x:hidden;
}
h1,h2,h3,h4{
font-family:"Playfair Display",serif;
color:var(--green);
}
.container{
width:min(1200px,92%);
margin:auto;
}
a{text-decoration:none}
.bg-circle{
position:fixed;
border-radius:50%;
filter:blur(80px);
z-index:-1;
opacity:.35;
}
.bg-one{
width:400px;height:400px;
background:var(--pink);
top:-100px;left:-100px;
}
.bg-two{
width:500px;height:500px;
background:var(--sage);
right:-150px;bottom:-150px;
}
.navbar{
position:sticky;
top:0;
backdrop-filter:blur(15px);
background:rgba(255,255,255,.7);
padding:18px 0;
z-index:100;
}
.navbar .container{
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:2rem;
font-weight:700;
color:var(--green);
}
.logo span{color:var(--pink-dark)}
.nav-links{
display:flex;
gap:2rem;
list-style:none;
}
.nav-links a{
color:var(--green);
font-weight:500;
}
.nav-button,.primary-button,.secondary-button{
padding:.9rem 1.6rem;
border-radius:999px;
transition:.3s;
display:inline-block;
}
.nav-button,.primary-button{
background:var(--green);
color:white;
}
.secondary-button{
border:2px solid var(--green);
color:var(--green);
}
.primary-button:hover,.nav-button:hover{
transform:translateY(-3px);
background:var(--green-light);
}
.secondary-button:hover{
background:var(--green);
color:white;
}
.hero{
padding:7rem 0;
}
.hero .container{
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
align-items:center;
}
.eyebrow{
color:var(--pink-dark);
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
}
.hero h1{
font-size:4rem;
margin:1rem 0;
line-height:1.1;
}
.hero p{
font-size:1.1rem;
margin-bottom:2rem;
line-height:1.8;
}
.hero-buttons{
display:flex;
gap:1rem;
flex-wrap:wrap;
}
.hero-card,.image-placeholder{
background:linear-gradient(135deg,var(--pink),var(--sage));
height:500px;
border-radius:30px;
box-shadow:var(--shadow);
}
section{
padding:6rem 0;
}
.section-title{
text-align:center;
margin-bottom:3rem;
}
.section-title span{
color:var(--pink-dark);
font-weight:600;
text-transform:uppercase;
}
.section-title h2{
font-size:2.8rem;
margin-top:.5rem;
}
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;
align-items:center;
}
.about-text p{
margin:1rem 0;
line-height:1.8;
}
.about-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
margin-top:2rem;
}
.about-list div,
.services-grid article,
.why-grid div,
.testimonial-grid article,
.cta-card{
background:rgba(255,255,255,.7);
backdrop-filter:blur(15px);
padding:1.5rem;
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
}
.service-icon{
font-size:2rem;
margin-bottom:1rem;
}
.services-grid article:hover,
.gallery-grid div:hover,
.why-grid div:hover,
.testimonial-grid article:hover{
transform:translateY(-8px);
transition:.3s;
}
.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
}
.gallery-grid div{
height:220px;
border-radius:20px;
background:linear-gradient(135deg,var(--sage),var(--pink));
box-shadow:var(--shadow);
}
.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.5rem;
}
.testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
}
.cta-card{
text-align:center;
padding:4rem;
background:linear-gradient(135deg,var(--green),var(--green-light));
color:white;
}
.cta-card h2,.cta-card span,.cta-card p{
color:white;
margin:1rem 0;
}
footer{
background:var(--green);
color:white;
padding:3rem 0;
text-align:center;
}
.footer-logo{
font-size:2rem;
margin-bottom:1rem;
}
.footer-logo span{color:var(--pink)}
@keyframes float{
50%{transform:translateY(-15px)}
}
.hero-card{
animation:float 5s ease-in-out infinite;
}
@media(max-width:900px){
.hero .container,
.about-grid,
.services-grid,
.gallery-grid,
.why-grid,
.testimonial-grid{
grid-template-columns:1fr;
}
.nav-links{display:none}
.hero h1{font-size:3rem}
}