/* =========================================================
   HEADER — logo, brand name, nav buttons, contact button
   ========================================================= */

.hero-wrapper {
  position: relative;   /* shared anchor point for header + backdrop */
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;           /* sits above the photo AND its gradient overlay */
}

.header-block {
  background-color: #052d55;
  height: 60px;
  width: 1000px;
  top: 20px;
  border-radius: 2px;
  margin: auto;
  display: flex;
  align-items: center;
  position: relative;   /* dropdown anchors to the whole header */
}

.logo-container {
  display: inline-flex;
  height: 60px;
  width: 80px;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 35px;
  background-color: whitesmoke;
  border: 2px;
  border-color: whitesmoke;
  border-radius: 10px;
}

.brand-name-container {
  display: inline-flex;
  height: 60px;
  width: 230px;
  align-items: center;
  justify-content: left;
}

.brand-name-style {
  font-family: "Asap Sharp", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: white;
  font-size: 15px;
}

.button-container {
  display: inline-flex;
  height: 60px;
  width: 100px;
  align-items: center;
  justify-content: left;
}

.last-button-container {
  display: inline-flex;
  height: 60px;
  width: 150px;
  align-items: center;
  justify-content: left;
}

.contact-us-container {
  display: inline-flex;
  height: 60px;
  width: 120px;
  align-items: center;
  justify-content: right;
}

.header-buttons-style {
  font-family: "Asap Sharp", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: transparent;
  color: white;
  font-size: 13px;
  border: 0px;
}

.contact-us-button-style {
  height: auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Asap Sharp", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;          /* dinaikkan dari 600 → 700, lebih tebal */
  font-style: normal;
  color: #12024D;
  font-size: 13px;
  background-color: white;
  border-color: white;
  border: 0px;
  border-radius: 30px;       /* diubah dari 4px → 30px, jadi pill/bulat penuh */
  padding: 10px 20px;         /* menggantikan height/width tetap */
  text-decoration: none;        
}

.arrow-button {
  width: 10px;
  margin-top: 4.5px;
}

.logo-container:hover,
.brand-name-container:hover,
.button-container:hover,
.header-buttons-style:hover {
  cursor: pointer;
}

.nav-links {
  display: contents;   /* transparan di layout desktop, supaya nav item & tombol Contact Us tetap sejajar rapi seperti sebelum ada wrapper ini */
}

.brand-link {
  display: contents;   /* sama alasannya — logo-container & brand-name-container tetap jadi flex child langsung .header-block */
  text-decoration: none;
}