/* =========================
GLOBAL STYLE
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  }

body {
background: #f6fff6;
color: #222;
line-height: 1.6;
}

/* =========================
HEADER
========================= */

.top-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background: #e8ffe8;
flex-wrap: wrap;
}

.logo-area {
display: flex;
align-items: center;
gap: 10px;
}

.logo-area img {
width: 70px;
height: 70px;
border-radius: 10px;
}

.site-title h1 {
font-size: 22px;
color: #1b5e20;
}

.site-title p {
font-size: 13px;
color: #4caf50;
}

/* =========================
NAVBAR
========================= */

.navbar {
background: #1b5e20;
padding: 10px;
}

.nav-list {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
}

.nav-list li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 6px 10px;
border-radius: 5px;
}

.nav-list li a:hover {
background: #4caf50;
}

/* Mobile Menu Button */
.menu-toggle {
display: none;
font-size: 28px;
color: white;
cursor: pointer;
text-align: right;
}

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

.hero {
background: linear-gradient(to right, #e8ffe8, #ffffff);
padding: 60px 20px;
text-align: center;
}

.hero h2 {
font-size: 30px;
color: #1b5e20;
margin-bottom: 15px;
}

.hero p {
font-size: 16px;
margin-bottom: 20px;
}

.hero-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}

.btn {
display: inline-block;
padding: 10px 18px;
background: #1b5e20;
color: white;
text-decoration: none;
border-radius: 6px;
transition: 0.3s;
}

.btn:hover {
background: #4caf50;
}

/* =========================
SECTIONS
========================= */

.section {
padding: 50px 20px;
text-align: center;
}

.bg-light {
background: #f0fff0;
}

/* =========================
CARDS
========================= */

.cards {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
}

.card {
background: white;
padding: 20px;
width: 250px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
transition: 0.3s;
}

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

/* =========================
ADSENSE BOX
========================= */

.ads-box {
background: #fff;
border: 2px dashed #4caf50;
padding: 30px;
margin-top: 20px;
border-radius: 10px;
}

/* =========================
WHATSAPP BUTTON
========================= */

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

/* =========================
SOCIAL MEDIA
========================= */

.social-section {
padding: 40px 20px;
text-align: center;
background: #e8ffe8;
}

.social-section h3 {
margin-bottom: 20px;
color: #1b5e20;
}

.social-icons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}

.social-icons a {
width: 50px;
height: 50px;
background: #1b5e20;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 20px;
transition: 0.3s;
}

.social-icons a:hover {
background: #4caf50;
transform: translateY(-5px);
}

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

footer {
background: #1b5e20;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
}

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

@media (max-width: 768px) {

```
.nav-list {
    display: none;
    flex-direction: column;
    background: #1b5e20;
    position: absolute;
    width: 100%;
    left: 0;
    top: 120px;
}

.nav-list.active {
    display: flex;
}

.menu-toggle {
    display: block;
}

.hero h2 {
    font-size: 22px;
}

.card {
    width: 90%;
}

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

}