/* --- HERO SECTION --- */
#hero {
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.hero-image {
  max-width: 40;
}
/* ========== 1. BACKGROUND IMAGES ========== */
#hero {
  background-image: url("./imgs/optimised/background-imgs/espresso_machine-1.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
}

#hero .content {
  background-color: var(--primary-color);
  width: fit-content;
  padding: 2% 3%;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
}

/* ========== 3. SECTION BOXES & HEADINGS ========== */
/* --- PAGE TITLE SECTION --- */
#pg-title {
  border-color: black;
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
}

.inner-section-box {
  background-color: var(--primary-color-lighter);
  border-color: black;
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
}

#about {
  background-image: url("/imgs/optimised/background-imgs/drip_room_cafe-venue-1.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#coffee-card {
  background-image: url("./imgs/optimised/background-imgs/cafe_cookie_counter-1.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#venue-info {
  background-image: url("./imgs/optimised/background-imgs/drip_room_cafe-venue-2.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Coffee Card section text spacing */
#coffee-card-student-info p {
  margin-bottom: 4%;
}

/* --- CONTACT SECTION --- */
#contact-us {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

/* Section heading (menu page) */
.section-heading-menu {
  width: 60%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Inner box structure */
.inner-section-box {
  height: fit-content;
  margin-bottom: 15%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* MEMBERSHIP */

#facts {
  width: 100%;
  padding: 20px;
  text-align: justify;
  text-align-last: left;
}

#coffee-purchased {
  background-color: var(--primary-color);
}

#points-earned {
  background-color: var(--secondary-color);
}