/* ------------------- Reset ------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Nunito'; letter-spacing: 2px; color: #1c1c1c; }

/* ------------------- Header ------------------- */
.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0px 5%; background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky; top: 0; z-index: 1000;
}
.header img { height: 90px; max-width: 100%; }

/* ------------------- Navbar ------------------- */
.navbar ul { display: flex; list-style: none; }
.navbar ul li { margin-left: 45px; }
.navbar ul li a {
  text-decoration: none; color: #444; font-weight: 500; transition: color 0.3s;
}
.navbar ul li a:hover, .navbar ul li.active a { color: #f58432; }

/* ------------------- Hamburger ------------------- */
.hamburger { display: none; font-size: 28px; cursor: pointer; color: #333; z-index: 1100; }
.hamburger.open i::before { 
  content: "\f00d"; 
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900; 
}

/* ------------------- Hero ------------------- */
.hero { width: 100%; height: 100vh; position: relative; overflow: hidden; }
.slider { width: 100%; height: 100%; position: relative; }
.slides { display: flex; width: 100%; height: 100%; transition: transform 0.6s ease-in-out; }
.slides img { width: 100%; height: 100vh; object-fit: cover; flex-shrink: 0; }

/* Hero text */
.hero-text {
  position: absolute;
  top: 5%;
  left: 75%;
  color: #fff;
  font-family: 'Nunito';
  font-size: 10px;
  /* font-size: clamp(10px, 1vw, 16px);   ✅ responsive text size */
  max-width: 80%;
  line-height: 1.8;
  padding: 2px 15px;
}

/* ------------------- Sections ------------------- */
.content { padding: 40px 10%; text-align: center; }
.content h1 { font-size: 1.5rem; margin-bottom: 20px; color: rgb(116, 113, 113); font-family: Verdana;}
.content p { font-size: 1rem; color: rgb(116, 113, 113); text-align: justify; line-height: 1.5; }

/* ------------------- Images ------------------- */
.image-block { text-align: center; margin: 30px 0; }
.image-block img {
  max-width: 100%; border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* ------------------- Footer Gallery ------------------- */
.footer {
  display: flex; justify-content: space-around; flex-wrap: wrap;
  background: #f4f4f4; padding: 30px 5%;
}
.footer-item { text-align: center; flex: 1 1 250px; margin: 10px; }
.footer-item img { width: 100%; height: auto; border-radius: 10px; }
.footer-item p { margin-top: 10px; font-weight: bold; color: #444; }

/* ------------------- Map ------------------- */
.map {
  width: 100%; background-color: white; display: flex;
  justify-content: space-around; padding: 20px; flex-wrap: wrap; gap: 20px;
}
.map1, .map2 { flex: 1 1 400px; }    
.map1 h2 { margin-bottom: 15px; color: #222; padding: 10px 30px;}
.map1 p { margin: 8px 0; font-size: 15px; display: flex; align-items: center;  padding-left: 30px;}
.map1 i { color: #2563eb; margin-right: 8px; font-size: 16px; }
.map2 iframe { width: 100%; height: 350px; border: none; border-radius: 8px; }

/* ------------------- Social Icons ------------------- */
.social-icons1 {
  width: 100%; background-color: #222; 
  padding: 20px 15px; display: flex; flex-wrap: wrap;
  gap: 15px; align-items: center; justify-content: center;
}
.social-icons1 a {
  margin: 5px; font-size: 15px; text-decoration: none; color: #fff; transition: 0.3s;
}
.social-icons1 a:hover { color: #e63946; }

/* Floating Social Icons */
.social-icons {
  position: fixed;
  top: 40%;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}
.social-icons a {
  background: #f58432;; color: #fff;
  padding: 12px 15px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  transition: 0.3s;
}
.social-icons a:hover { background: #f58432;; padding-left: 20px; }

#lst_head { margin-top: 10px; color: #aaa; font-size: 14px; text-align: center; width: 100%; }
#lst_head a { text-decoration: none; color: #e63946; font-weight: bold; font-size: 15px; }

/* ------------------- Responsive ------------------- */
@media (max-width: 992px) {
  .hero-text { left: 60%; font-size: clamp(10px, 2.5vw, 14px); }
  .content h1 { font-size: 1.3rem; }
}
@media (max-width: 768px) {
  .hamburger { display: block; }
  .navbar {
    position: absolute; top: 70px; right: 5%; 
    width: 220px; background: #fff; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
    display: none; border-radius: 8px;
  }
  .navbar ul { flex-direction: column; padding: 15px 0; max-height: 80vh; overflow-y: auto; }
  .navbar ul li { margin: 12px 0; text-align: center; }
  .navbar.active { display: block; }

  .hero-text { left: 50%; transform: translateX(-50%); text-align: center; font-size: clamp(10px, 3vw, 13px); max-width: 90%; }
  .content { padding: 30px 5%; }
  .content h1 { font-size: 1.2rem; }
  .map { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .hero-text { top: 10%; left: 50%; transform: translateX(-50%); font-size: clamp(9px, 1vw, 12px); max-width: 95%; }
  .content h1 { font-size: 1rem; }
  .map { padding: 10px; }
  .footer { flex-direction: column; align-items: center; }
  #lst_head { font-size: 12px; }
}