/* ===== RESET DEFAULT STYLES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== BASE STYLES ===== */
body {
  font-family: 'Roc Grotesk', sans-serif;
  background-color: #0f5444; /* Dark green background */
  color: #d8af4e; /* Gold text */
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ===== HEADER / TOP BANNER ===== */
header {
  background-color: #f3f2ed; /* Light banner background */
  width: 1920px;
  height: 60px;
  position: relative;
  margin: 0 auto; /* Center the banner horizontally */
}

/* ===== LOGO CONTAINER ===== */
.logo {
  position: absolute;
  top: 5px;    /* Position 5px from the top */
  left: 5px;   /* Position 5px from the left */
  width: 178px; /* Final display size */
  height: 50px;
}

.logo img,
.logo svg {
  width: 100%;
  height: 100%;
  display: block; /* Prevents unwanted whitespace */
}

/* ===== MAIN CONTENT AREA ===== */
main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

main h1 {
  font-size: 3rem;       /* Large text for Coming Soon */
  font-weight: 500;       /* Roc Grotesk Medium */
  color: #d8af4e;         /* Gold text */
}

/* ===== RESPONSIVE DESIGN ===== */
@media screen and (max-width: 768px) {
  header {
    width: 100%;
    height: 60px; /* Keep consistent height on smaller screens */
  }

  .logo {
    width: 140px;  /* Slightly smaller logo for mobile */
    height: 40px;
    top: 5px;
    left: 5px;
  }

  main h1 {
    font-size: 2rem; /* Scale text down for mobile */
  }
}