:root {
  --green:#0f6f3e;
  --gold:#c9a227;
}

body {
  margin:0;
  font-family:'Segoe UI', sans-serif;
  background:#f6f6f6;
  color:#333;
}

header {
  background:linear-gradient(90deg,var(--green),var(--gold));
  padding:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo {
  height:60px;
}

nav a {
  color:white;
  margin:0 12px;
  text-decoration:none;
  font-weight:600;
}

.hero {
  text-align:center;
  padding:80px 20px;
  background:white;
}

.cards {
  display:flex;
  justify-content:center;
  gap:20px;
  padding:40px;
}

.card {
  background:white;
  padding:25px;
  border-left:6px solid var(--gold);
  width:220px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition:transform .3s;
}

.card:hover {
  transform:translateY(-8px);
}

.content {
  padding:40px;
}

.whatsapp {
  position:fixed;
  bottom:20px;
  right:20px;
  background:#25D366;
  color:white;
  padding:15px 20px;
  border-radius:50px;
  text-decoration:none;
  font-weight:bold;
  box-shadow:0 6px 15px rgba(0,0,0,.2);
}

/* Animations */
.fade-in { animation: fade 1.5s ease; }
.slide-up { animation: slide 1.2s ease; }

@keyframes fade {
  from {opacity:0;}
  to {opacity:1;}
}

@keyframes slide {
  from {transform:translateY(40px); opacity:0;}
  to {transform:translateY(0); opacity:1;}
}


.hero-service {
  background: linear-gradient(135deg, #0a3d62, #1e90ff);
  color: white;
  padding: 80px 20px;
  text-align: center;
}

.service-content {
  max-width: 1000px;
  margin: 60px auto;
  padding: 20px;
  line-height: 1.8;
}

.service-content h2 {
  color: #0a3d62;
  margin-top: 40px;
}

.service-content ul {
  margin-left: 20px;
}