/* BASE RESET */
* { margin:0; padding:0; box-sizing:border-box; font-family:Arial,sans-serif; }
body { line-height:1.6; background:#ECEEDF; color:#333; scroll-behavior: smooth; }

/* HEADER & NAV */
header nav { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:#CFAB8D; position:sticky; z-index:1000; }
.logo { color:#fff; font-size:1.5rem; font-weight:bold; }
.nav-links { display:flex; gap:1rem; list-style:none;}
.nav-links a { color:#fff; text-decoration:none; font-weight:bold; }
.hamburger { display:none; flex-direction:column; cursor:pointer; }
.hamburger span { width:25px; height:3px; background:#fff; margin:4px 0; transition:0.3s; }

/* HERO */
#hero { display:flex; align-items:center; justify-content:center; text-align:center; padding:6rem 1rem; background:#ECEEDF; color:#333; height:100vh;transform: translateY(-7%);}
#hero h1 { font-size:2.5rem; margin-bottom:1rem; }
#hero p { font-size:1.25rem; margin-bottom:1.5rem; }
#hero button { background:#CFAB8D; color:#333; border:none; padding:.75rem 1.5rem; font-weight:bold; cursor:pointer; border-radius:5px; transition:0.3s; }
#hero button:hover { background:#e0e0e0; }

/* ABOUT */
#about { padding:4rem 1rem; background: #D9C4B0; }
#about h2 { text-align:center; font-size:2rem; margin-bottom:2rem; }
.about-container { display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:1000px; margin:0 auto; text-align:center; }
.about-container img { width:100%; max-width:350px; border-radius:10px; }

/* SERVICES */
.service-filters { text-align:center; margin-bottom:1.5rem; }
.service-filters button { margin:0 .25rem; padding:.5rem 1rem; border:none; border-radius:5px; cursor:pointer; background:#ddd; }
.service-filters button.active, .service-filters button:hover { background:#CFAB8D; color:#fff; }

.services-grid { display:grid; gap:1.5rem; max-width:1100px; margin:0 auto; padding:0 1rem; grid-template-columns:1fr; }
.service-card { background:#fff; padding:2rem; border-radius:12px; text-align:center; box-shadow:0 4px 15px rgba(0,0,0,0.05); transition:0.3s; }
.service-card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15); }
.service-card .icon { font-size:2rem; margin-bottom:.75rem; }

/* PLANS */
#plans { padding:4rem 1rem;margin:50px 0; background-color: #D9C4B0;}
.plans-grid { display:grid; gap:2rem; max-width:1100px; margin:0 auto; grid-template-columns:1fr; padding:0 1rem; }
.plan-card { background:#fff; padding:2rem; border-radius:12px; text-align:center; box-shadow:0 4px 15px rgba(0,0,0,0.05); transition:0.3s; }
.plan-card.popular { border:2px solid #CFAB8D; }
.plan-card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15); }
.plan-card h3 { font-size:1.5rem; margin-bottom:.5rem; }
.plan-card .price { font-size:1.75rem; color:#CFAB8D; margin-bottom:1rem; }
.plan-card ul { list-style:none; margin-bottom:1.5rem; }
.plan-card ul li { margin:.5rem 0; color:#555; }
.plan-card button { background:#CFAB8D; color:#fff; border:none; padding:.75rem 1.5rem; border-radius:6px; cursor:pointer; transition:0.3s; }
.plan-card button:hover { background:#CFAB8D; }

/* CONTACT */
#contact { padding:4rem 1rem; }
#contact h2 { text-align:center; font-size:2rem; margin-bottom:2rem; }
#contact form { display:flex; flex-direction:column; max-width:500px; margin:0 auto; gap:.75rem; }
#contact input, #contact textarea { padding:.75rem; border:1px solid #ccc; border-radius:4px; width:100%; }
#contact button { background:#CFAB8D; color:#333; border:none; padding:.75rem; cursor:pointer; border-radius:5px; }
#contact button:hover { background:#444; }

/* FOOTER */
footer { background:#CFAB8D; color:#333; text-align:center; padding:2rem 1rem; }
footer img { width:24px; margin:0 .25rem; vertical-align:middle; }

h2{
    text-align: center;
    margin:25px 0;
}
/* RESPONSIVE */
@media(min-width:600px){ 
    .about-container{ flex-direction:row; text-align:left; } 
    .services-grid{ grid-template-columns:repeat(2,1fr); } 
    .plans-grid{ grid-template-columns:repeat(2,1fr); } 
}
@media(min-width:992px){ .services-grid{ grid-template-columns:repeat(3,1fr); } .plans-grid{ grid-template-columns:repeat(3,1fr); } #hero h1{ font-size:3rem; } }
@media(max-width:768px){ .hamburger{ display:flex; } .nav-links{ display:none; flex-direction:column; gap:1rem; width:100%; padding:1rem; color:#fff} .nav-links.active{ display:flex; } }