@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root{--green:#0f4f4a;--glass:rgba(255,255,255,.18)}
body{margin:0;font-family:Inter,Arial;background:#f3f6f8;color:#111}
header{background:var(--green);color:#fff}
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px}
.menu{list-style:none;display:flex;gap:14px}
.menu li{position:relative}
.nav a{color:#fff;text-decoration:none;font-size:14px}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:280px;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.dropdown a{display:block;padding:10px;color:#000}
.menu li:hover .dropdown{display:block}

.hero{padding:80px 20px;text-align:center;background:#000;color:#fff}

.services{padding:70px 20px;background:linear-gradient(135deg,#0f4f4a,#083633)}
.grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}

.card{
 background:var(--glass);
 backdrop-filter:blur(14px);
 border-radius:20px;
 padding:22px;
 color:#fff;
 position:relative;
 overflow:hidden;
 transition:transform .22s ease, box-shadow .22s ease;
 box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.35)
}
.card .full{opacity:0;max-height:0;transition:.18s ease}
.card:hover{transform:scale(1.05);box-shadow:0 28px 70px rgba(0,0,0,.45)}
.card:hover .full{opacity:1;max-height:200px}

footer{background:#123d39;color:#fff;text-align:center;padding:20px}

.social{position:fixed;left:14px;top:40%;display:flex;flex-direction:column;gap:12px}
.social a{width:38px;height:38px;border-radius:50%;background:#123d39;color:#fff;display:flex;align-items:center;justify-content:center}
.whatsapp{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px}