.presentation-section {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  background-color: rgb(0, 126, 126);
  padding: 10vh 10vw;
}

.presentation-section p {
  color:white;
}

.presentation-section h1 {
  color: white;
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  max-height: 100vh;
  transform: rotate(180deg);
  left: 0%;

}


.role {
  font-size: 3vw;
  white-space: no-wrap;
  text-align: left;
  justify-self: left;
}

.subtitle {
  color: rgba(0, 0, 0, 0.3);

}

.name-container {
  position: relative;
  display: flex;
  flex-direction: column;
}

.name {
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(20px, 1vw, 40px)
}

.role {
  color: rgba(0, 0, 0, 0.3);
  display: block;
  text-align: right;

  font-size: clamp(10px, 10vw, 50px)
}

.subtitle-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.presentation-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: justify;
  text-justify: inter-word;
  column-gap: 4vw;
}

@media (max-width: 768px) {
  .presentation-text {
    
    grid-template-columns: 1fr;
  }
}

.presentation-paragraph {
  margin-top: 5vh;
  line-height: 24px;
  font-style: normal;
  font-family: Unageo-Light;

  font-size: clamp(12px, 1.5vw, 18px);
}

.presentation-header {
  text-transform: uppercase;
}

.bold-presentation {
  font-family: Unageo-Bold;
  color: white;
}