*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Poppins,sans-serif;background:#f5f8fb;color:#333}
.hero{min-height:100vh;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url('https://images.unsplash.com/photo-1621232051504-dc6f30ba8bc6?q=80&w=2662&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover;display:flex;flex-direction:column}
nav{display:flex;justify-content:space-between;align-items:center;padding:20px 8%;position:sticky;top:0;background:rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.logo{font-size:28px;color:#fff;font-weight:700}
nav ul{display:flex;list-style:none;gap:24px}
nav a{color:#fff;text-decoration:none}
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.logo img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.logo span {
    font-family: "Playfair Display", serif;
    letter-spacing: 0.5px;
}
.hero-content{margin:auto;text-align:center;color:#fff;padding:20px}
.hero h1{font:700 64px 'Playfair Display',serif;margin-bottom:20px}
.hero p{max-width:700px;margin:auto;font-size:20px}
.buttons{margin-top:35px}
.btn{display:inline-block;background:#0a8f6a;color:#fff;padding:14px 28px;border-radius:40px;text-decoration:none;margin:8px}
.secondary{background:transparent;border:2px solid #fff}
section{padding:80px 8%}
h2{text-align:center;font-size:40px;margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px}
.card,.package,.place{background:#fff;border-radius:18px;box-shadow:0 15px 40px rgba(0,0,0,.08);overflow:hidden;transition:.3s}
.card,.package{padding:30px;text-align:center}
.place img{width:100%;height:240px;object-fit:cover}
.place h3{padding:20px}
.package.featured{background:#0a8f6a;color:#fff;transform:scale(1.05)}
.about,.contact{text-align:center;max-width:900px;margin:auto}
footer{padding:30px;text-align:center;background:#111;color:#fff}
.card:hover,.package:hover,.place:hover{transform:translateY(-8px)}
@media(max-width:768px){
.hero h1{font-size:42px}
nav{flex-direction:column;gap:16px}
nav ul{flex-wrap:wrap;justify-content:center}
}