/* General Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height:1.6; color:#07356e; scroll-behavior:smooth; }

/* Header */
header { background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:1000; height:80px; }
.nav-container { display:flex; justify-content:space-between; align-items:center; height:100%; padding:0 40px; }
.logo img { max-height:70px; margin-top:5px; width:auto; }
nav ul { display:flex; list-style:none; }
nav ul li { margin:0 20px; }
nav ul li a { text-decoration:none; color:#07356e; font-weight:600; transition:color 0.3s; }
nav ul li a:hover { color:#0a78ff; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; cursor:pointer; }
.hamburger span { height:3px; width:25px; background:#07356e; margin:4px 0; border-radius:3px; }
@media(max-width:768px) {
  nav ul { display:none; flex-direction:column; background:#fff; position:absolute; top:80px; right:0; width:200px; box-shadow:0 4px 6px rgba(0,0,0,0.1); }
  nav ul.active { display:flex; }
  .hamburger { display:flex; }
}

/* Hero Slider */
.slider { position:relative; width:100%; height:80vh; overflow:hidden; }
.slide { display:none; position:absolute; width:100%; height:100%; }
.slide img { width:100%; height:100%; object-fit:cover; }
.caption { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(7,53,110,0.3); color:#fff; text-align:center; padding:20px 30px; width:70%; border-radius:12px; }
.caption h2 { font-size:2.5rem; margin-bottom:10px; }
.caption p { font-size:1.2rem; }

/* Fade animation */
.fade { animation-name: fade; animation-duration:1s; }
@keyframes fade { from {opacity:0.4;} to {opacity:1;} }

/* Slider Navigation Dots */
.navigation { position:absolute; bottom:20px; width:100%; display:flex; justify-content:center; gap:10px; }
.dot { height:12px; width:12px; background:rgba(255,255,255,0.7); border-radius:50%; display:inline-block; cursor:pointer; }
.dot.active { background:#0a78ff; }

/* Sections */
section { max-width:1100px; margin:60px auto; padding:0 20px; text-align:center; }

/* About */
#about { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
#about img { flex:1; max-width:500px; border-radius:12px; }
#about .content { flex:1; text-align:left; }
#about p { margin-bottom:20px; }
.buttons { display:flex; gap:15px; }
.btn { padding:10px 20px; background:#0a78ff; color:#fff; border:none; border-radius:5px; text-decoration:none; cursor:pointer; transition:background 0.3s; }
.btn:hover { background:#07356e; }

/* Facilities */
#facilities ul { list-style:disc; columns:2; text-align:left; gap:15px; }

/* Excursion */
#excursion .excursion-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:15px; margin-top:20px; }
#excursion img { width:100%; border-radius:8px; object-fit:cover; }

/* Contact */
/* Phone number */
.contact-info .phone a {
  font-size: 28px;  /* larger font */
  font-weight: bold;
  color: #0a78ff;
  text-decoration: none;
}

/* Buttons container */
.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;       /* considerable gap */
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Large buttons with same width */
.contact-btn {
  flex: 1 1 200px;   /* equal minimum width */
  max-width: 250px;  /* optional max width */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 25px;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  color: #fff;
  transition: background 0.3s;
}

.contact-btn i {
  font-size: 1.5rem;
}

/* WhatsApp button */
.contact-btn.whatsapp { background:#25D366; }
.contact-btn.whatsapp:hover { background:#1DA851; }

/* Facebook button */
.contact-btn.facebook { background:#1877F2; }
.contact-btn.facebook:hover { background:#0e5ac9; }

/* Email button */
.contact-btn.email { background:#FF5722; }
.contact-btn.email:hover { background:#e64a19; }


/* Footer */
footer { display:flex; justify-content:space-between; padding:20px 40px; background:#eee; font-size:0.9rem; }

/* Room Modal */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:2000; overflow:auto; }
.modal-content { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; padding:40px; max-width:1000px; margin:40px auto; }
.modal-content img { width:100%; cursor:pointer; border-radius:8px; object-fit:cover; }
.close { position:absolute; top:15px; right:25px; font-size:2rem; color:#fff; cursor:pointer; }

/* Facilities Section */
#facilities ul.facilities-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* force 3 columns on desktop */
  gap: 20px 30px; /* row gap 20px, column gap 30px */
  text-align: left;
  padding: 0;
  margin-top: 20px;
}

#facilities ul.facilities-list li {
  font-size: 1.1rem;
  padding-left: 35px; /* increase space between icon and text */
  position: relative;
  line-height: 1.6;
}

#facilities ul.facilities-list li i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #0a78ff;
  font-size: 1.2rem;
}

/* Responsive: 2 columns on tablets, 1 column on mobile */
@media (max-width: 992px) {
  #facilities ul.facilities-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  #facilities ul.facilities-list { grid-template-columns: 1fr; }
}

/* Mobile view adjustments */
@media (max-width: 600px) {
  /* Hero slider captions */
  .slide-caption {
    width: 90%;           /* narrower for small screens */
    padding: 15px;
    margin: 0 auto;       /* center it */
  }

  /* About section image */
  #about .about-image {
    padding: 0 15px;      /* left + right margin */
  }

  #about .about-image img {
    width: 100%;
    border-radius: 10px;
  }
}

/* About section layout */
#about .about-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;              /* space between image and text */
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

#about .about-image,
#about .about-text {
  flex: 1;                /* make them equal width */
}

#about .about-image img {
  width: 100%;
  border-radius: 12px;
}

/* Responsive: stack columns only on smaller devices */
@media (max-width: 768px) {
  #about .about-container {
    flex-direction: column;
    text-align: center;
  }
}