/*--------------------------------------------------------------
# Attend Hero Section
--------------------------------------------------------------*/
.attend-hero-section {
  display: flex;
  justify-content: space-between;
  padding: 4rem var(--side-padding);
  background-color: var(--color-muted-black);
  color: var(--color-light-grey);
  width: 100%;
}

.attend-hero-item {
  color: var(--color-muted-white);
}

/*--------------------------------------------------------------
# Why Attend Section
--------------------------------------------------------------*/
.why-attend-section {
  background-color: var(--color-muted-white);
  padding: 4rem var(--side-padding);
  width: 100%;
}

/*--------------------------------------------------------------
# Agenda Section
--------------------------------------------------------------*/
.agenda-section {
  background-color: var(--color-dark-blue);
  padding: 4rem var(--side-padding);
  color: var(--color-muted-white);
  width: 100%;
}

.agenda-section .agenda-item:last-child {
  margin-top: 1rem;
}

/* Agenda Item Styles */
.attend-agenda-list-item {
  border-radius: 6px;
  padding: 1.5rem;
  border: 1px solid var(--color-light-grey);
}

.agenda-icon-container {
  --size: 74px;
  width: var(--size);
  height: var(--size);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-bright-blue);
  color: var(--color-pure-white);
  margin-bottom: 1rem;
}

.agenda-icon-container img {
  filter: brightness(0) saturate(100%) invert(100%);
  width: 55px;
  height: 55px;
}

/*--------------------------------------------------------------
# Who Attends Section
--------------------------------------------------------------*/
.who-attends-section {
  background-color: var(--color-pure-white);
  padding: 4rem var(--side-padding);
  width: 100%;
  border-bottom: 1px solid var(--color-light-grey);
}

.who-attends-section h2 {
  text-align: center;
  margin-bottom: 2rem;
}

/*--------------------------------------------------------------
# Attend CTA Section
--------------------------------------------------------------*/
.attend-cta-section {
  background-color: var(--color-sponsor-grey);
  text-align: center;
  padding: 4rem var(--side-padding);
  width: 100%;
}

.attend-cta-section a {
  margin-top: 1rem;
}

/*--------------------------------------------------------------
# Large Desktop View (≥ 1200px)
--------------------------------------------------------------*/
@media (min-width: 1200px) {
  .attend-hero-section,
  .why-attend-section,
  .agenda-section,
  .who-attends-section,
  .attend-cta-section {
    padding: 6rem var(--side-padding);
  }

  .agenda-section .agenda-item:last-child {
    text-align: end;
    margin-top: unset;
  }

  .who-attends-section h2 {
    margin-bottom: 3rem;
  }
}