:root{
 --teal:#0f766e;
 --bg:#ffffff;
 --muted:#6b7280;
 --card:#f9fafb;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:Inter,Arial;background:var(--bg);color:#042023;}
.container{max-width:1100px;margin:20px auto;padding:20px;}

header{display:flex;justify-content:space-between;align-items:center;}
.logo{height:70px;}

nav a{margin:0 12px;color:var(--teal);font-weight:600;text-decoration:none;}

.menu-btn{display:none;font-size:26px;cursor:pointer;color:var(--teal);}
.mobile-nav{display:none;flex-direction:column;margin-top:16px;}
.mobile-nav a{padding:10px 0;border-bottom:1px solid #eee;color:var(--teal);}

.hero{
 background-image: url('hero_bg.png');
 background-size: cover;
 background-position: center;
 padding:80px 40px;
 border-radius:16px;
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 gap:20px;
 animation:fadeIn 1.2s ease;
}

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

.card{
 background:var(--card);
 padding:20px;border-radius:14px;
 margin-top:20px;
 animation:fadeIn 1s ease;
}

.gallery{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
 gap:14px;margin-top:20px;
}
.gallery div{
 background:#e7f7f5;
 height:180px;border-radius:10px;
 animation:fadeIn 1.3s ease;
}

footer{text-align:center;margin-top:28px;padding:14px;color:var(--muted);}
.social-icons img{margin:0 6px;}

@media(max-width:900px){
 nav{display:none;}
 .menu-btn{display:block;}
 .mobile-nav{display:flex;}
 .hero{
 background-image: url('hero_bg.png');
 background-size: cover;
 background-position: center;
 padding:80px 40px;
 border-radius:16px;
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 gap:20px;
 animation:fadeIn 1.2s ease;
}
}