/* Odyssey Ladies Hostel – Premium stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  --primary: hsl(190, 60%, 45%);
  --accent: hsl(38, 85%, 55%);
  --bg: hsl(210, 15%, 12%);
  --card-bg: hsla(0, 0%, 100%, 0.08);
  --text: hsl(0, 0%, 95%);
  --shadow: 0 4px 12px rgba(0,0,0,0.4);
}

* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}

nav {display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:rgba(0,0,0,0.4);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;}
nav a {color:var(--text);margin-left:1.5rem;text-decoration:none;font-weight:600;transition:color .3s;}
nav a:hover {color:var(--accent);}
.hero {
  width: 100%;
  aspect-ratio: 16 / 9; /* Maintains standard widescreen image dimensions */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('https://odysseyladieshostel.in/kaloor/image/Odyssey%20ladies%20Hostel-Kaloor%20Kochi.png') center/cover no-repeat;
  position: relative;
}

.hero::after {
  display: none;
}

.hero h1 {position:relative;z-index:1;font-size:3rem;color:#fff;}

section {padding:4rem 2rem;}
.container {max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}
.card {background:var(--card-bg);border-radius:12px;padding:2rem;backdrop-filter:blur(12px);box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;}
.card:hover {transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.5);}

button {background:var(--primary);color:#fff;border:none;padding:0.8rem 1.6rem;border-radius:6px;cursor:pointer;transition:background .3s;}
button:hover {background:var(--accent);}

footer {text-align:center;padding:2rem;background:rgba(0,0,0,0.3);}

/* Responsive tweaks */
@media (max-width:768px){nav{flex-direction:column;}}