body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
}

.hero {
  background-color: #f0eee5;
  display: flex;
   background-size: cover;
  height: 100vh; /* หรือปรับตามต้องการ */
  flex-direction: column;
  color: #003366;
}

.top-bar {
  background-color: #2d73b9;
  padding: 10px 80px;
  
}
.logo {
  height: 80px;
}

.navbar {
  display: flex;
  justify-content: center;
  margin-top: -24px;
  font-size: 33px;


  /* border-bottom: 3px solid #1a2b57;
  width: fit-content;
  margin: 0 auto; */
  
}
.menu-underline {
  border: none;
  border-top: 3px solid #031d67;
  width: 64%; /* หรือจะใช้ width: fit-content; แล้วครอบด้วย container */
  margin: -30px auto 20px auto; /* <— ขยับเส้นขึ้นด้วย margin-top ติดลบ */
}


.navbar ul {
  list-style: none;
  display: flex;
  gap: 30px;
  align-items: center;
  
}

.navbar li a {
  text-decoration: none;
  color: #003366;
  margin: 0 20px;
  font-weight: bold;
}

.paw-icon {
  height: 64px;
}

.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #003366;
  padding: 10px;
  position: absolute;
  right: 20px;
  top: 25px;
}

/* Responsive for Mobile */
@media (max-width: 768px) {
  

  .navbar ul {
    display: none;
    flex-direction: column;
    gap: 10px;
    background-color: white;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    padding: 20px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 999;
  }
  .menu-underline {
    display: none;
    width: 90%;
    margin: -20px auto 16px auto;
  }


  .navbar ul.show {
    display: flex;
  }

  .hamburger {
    display: block;
  }
  
}

    .section1-1 img  {
        width: 100%;
        height: auto;
        display: flex;
    }
    .section1-2 img  {
        width: 100%;
        height: auto;
        display: flex;
    }
    .section1-3 img  {
        width: 100%;
        height: auto;
        display: flex;
    }