*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif;color:#222;line-height:1.6}
h1,h2,h3{font-family:'Playfair Display',serif}

.header{position:fixed;top:0;width:100%;background:#000;color:#fff;z-index:1000}
.nav{display:flex;justify-content:space-between;align-items:center;padding:15px 8%}
.nav-links{display:flex;gap:20px;list-style:none;transition:0.3s}
.nav-links a{color:#fff;text-decoration:none;font-weight:500}
.nav-links a:hover{color:gold}
.menu-toggle{display:none;font-size:28px;color:#fff;cursor:pointer}

.home{margin-top:0}

/* HERO */
.hero{height:70vh;background:url('https://images.unsplash.com/photo-1519741497674-611481863552') center/cover no-repeat;position:relative;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center}
.hero-content{position:relative;z-index:2;width:90%}
.hero-content h1{font-size:48px;margin-bottom:20px}
.hero-content p{font-size:18px;margin-bottom:25px}
.hero-buttons{display:flex;justify-content:center;gap:15px}

/* SECTION & GRID */
.section{padding:60px 8%}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:#f9f9f9;padding:20px;border-radius:8px;text-align:center}
.masonry{column-count:2;column-gap:10px}
.masonry img{width:100%;margin-bottom:10px;border-radius:5px}

/* BOOKING FORM */
.booking-form{max-width:700px;margin:auto;background:#fff;padding:40px;border-radius:12px;box-shadow:0 15px 40px rgba(0,0,0,0.1)}
.booking-form .form-group{position:relative;margin-bottom:25px}
.booking-form input,
.booking-form textarea{width:100%;padding:14px 12px;border:1px solid #ccc;border-radius:6px;font-size:16px;background:transparent;outline:none;transition:0.3s}
.booking-form input:focus,
.booking-form textarea:focus{border-color:gold}
.booking-form textarea{min-height:120px;resize:none}
.booking-form label{position:absolute;left:12px;top:14px;background:#fff;padding:0 6px;color:#888;font-size:14px;pointer-events:none;transition:0.3s}
.booking-form input:focus + label,
.booking-form input:not(:placeholder-shown) + label,
.booking-form textarea:focus + label,
.booking-form textarea:not(:placeholder-shown) + label{top:-10px;font-size:12px;color:gold}
.booking-form button{width:100%;padding:14px 0;font-size:16px;border-radius:8px;margin-top:10px;cursor:pointer}
.booking-form button:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}

/* BUTTONS */
.btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer}
.gold{background:gold;color:#000}
.dark{background:#000;color:#fff}

/* FOOTER */
footer{background:#000;color:#fff;text-align:center;padding:30px}

/* WHATSAPP */
.whatsapp{position:fixed;bottom:20px;right:20px;background:#25D366;color:#fff;padding:15px;border-radius:50%;font-size:20px}

/* ===== MOBILE ===== */
@media(max-width:768px){
    .menu-toggle{display:block}
    .nav-links{position:fixed;top:0;right:-100%;height:100vh;width:250px;background:#000;flex-direction:column;padding-top:80px;gap:20px;display:flex;list-style:none;transition:0.3s;z-index:999}
    .nav-links.active{right:0}
    .nav-links li a{color:#fff;font-size:18px;text-align:center;padding:15px 0;display:block}
    .nav-links li a:hover{color:gold}
    .masonry{column-count:1}
}