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

body{
  font-family:"Inter",sans-serif;
  background:var(--bg-light);
}


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

.hero-section{
  height:60vh;
  min-height:420px;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    0deg,
    rgba(18,65,161,0.75),
    rgba(18,65,161,0.2)
  );
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:700px;
  padding:20px;
}


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

.section-padding{
  padding:80px 0;
}


/* =====================================================
MAIN AMENITY CARDS
===================================================== */

.amenity-card{
  border-radius:14px;
  overflow:hidden;
  background:white;
  border:1px solid rgba(0,0,0,0.06);
  transition:all .3s ease;
}

.amenity-card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.amenity-card img{
  width:100%;
  height:250px;
  object-fit:cover;
}


/* =====================================================
SMALL AMENITIES
===================================================== */

.small-amenity{
  background:rgba(18,65,161,0.05);
  border:1px solid rgba(18,65,161,0.12);
  border-radius:12px;
  padding:30px;
  text-align:center;
  transition:all .25s ease;
}

.small-amenity .material-symbols-outlined{
  font-size:36px;
  color:var(--color-primary);
}

.small-amenity:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 25px rgba(0,0,0,0.08);
}


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

.cta-section{
  background:var(--color-primary);
  color:white;
  padding:100px 0;
  text-align:center;
}


/* =====================================================
RESPONSIVE DESIGN
===================================================== */

/* tablets */

@media (max-width:992px){

  .hero-section{
    height:50vh;
  }

  .section-padding{
    padding:60px 0;
  }

}


/* mobile */

@media (max-width:768px){

  .hero-section{
    height:45vh;
    min-height:360px;
  }

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

  .section-padding{
    padding:50px 0;
  }

  .amenity-card img{
    height:220px;
  }

}


/* small phones */

@media (max-width:480px){

  .hero-content h1{
    font-size:1.6rem;
  }

  .hero-content p{
    font-size:0.95rem;
  }

  .small-amenity{
    padding:22px;
  }

}