/* =====================================================
   GLOBAL RESET
===================================================== */

body {
  font-family: 'Roboto', sans-serif;
  background: #f8fbff;
  color: #1a1a1a;
}

/* =====================================================
   LUXURY COLOR SYSTEM
===================================================== */

:root {
  --light-blue: #eaf4ff;
  --luxury-blue: #0a2c4a;
  --gold: #c9a227;
  --dark: #111;
}

/* =====================================================
   NAVBAR
===================================================== */

.luxury-nav {
  background: rgba(10, 44, 74, 0.85);
  backdrop-filter: blur(10px);
  transition: all .3s ease;
  padding: 15px 0;
}

.navbar-logo {
  height: 80px;
}

.nav-link {
  color: #fff !important;
  font-weight: 500;
  margin-left: 20px;
  transition: .3s;
}

.nav-link:hover {
  color: var(--gold) !important;
}

.btn-gold {
  background: var(--gold);
  color: #fff;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 500;
  border: none;
}

.btn-gold:hover {
  background: #b8921f;
}

/* =====================================================
   HERO SECTION
===================================================== */

.hero-carousel {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.hero-img {
  height: 100vh;
  object-fit: cover;
  animation: zoomEffect 18s infinite alternate ease-in-out;
}

@keyframes zoomEffect {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  padding: 40px 60px;
  border-radius: 15px;
  text-align: center;
  color: #fff;
}

.hero-overlay h1 {
  font-size: 3.5rem;
  font-weight: 700;
}

.hero-overlay p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* =====================================================
   SECTION SPACING
===================================================== */

section {
  padding: 80px 0;
}

/* =====================================================
   ROOM CARDS
===================================================== */

.room-card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  transition: .4s;
}

.room-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0,0,0,.15);
}

.room-card img {
  height: 260px;
  object-fit: cover;
}

/* =====================================================
   FEATURE BOXES
===================================================== */

.dashboard-card {
  background: #fff;
  padding: 35px;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0,0,0,.05);
  transition: .3s;
}

.dashboard-card:hover {
  transform: translateY(-6px);
}

/* =====================================================
   CTA SECTION
===================================================== */

.luxury-cta {
  background: var(--luxury-blue);
  color: #fff;
  text-align: center;
  padding: 90px 20px;
}

.luxury-cta h3 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

/* =====================================================
   FOOTER (LIGHT BLUE)
===================================================== */

.footer {
  background: var(--light-blue);
  padding: 60px 0;
}

.footer h5 {
  font-weight: 600;
  color: var(--luxury-blue);
}

.footer a {
  color: #333;
}

.footer a:hover {
  color: var(--luxury-blue);
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px) {

  .hero-overlay {
    padding: 25px;
  }

  .hero-overlay h1 {
    font-size: 2rem;
  }

  .hero-carousel,
  .hero-img {
    height: 75vh;
  }

}