.dm-sans {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  color: #2A3132;
}

.welcome-container, .my-approach-container, .schedule-container {
  display: flex;
  width: 100%;
}

.welcome-text,
.welcome-photo,
.my-approach-text,
.my-approach-photo,
.schedule-text,
.schedule-photo {
  border: 1px solid #2A3132;
  width: 50%;
  box-sizing: border-box;
  /* optional but helpful for padding/margin adjustments */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* padding: 1rem; */
  background-color: #fcf6e8;
}

.welcome-text,
.my-approach-text,
.schedule-text {
    padding: 1rem;
    background-color: #fcf6e8;
}

.welcome-header {
  font-size: 80px;
}

.subtext {
  font-size: 20px;
  margin-top: -20px;;
}

img {
  width: 100%;
  /* Ensures the image scales within its container */
  height: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

.home-nav-item {
  float: left;
}

.nav {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #2A3132;
  width: 100%;
  position: sticky;
  top: 0;
  font-size: x-large;
}

.reverse {
  flex-direction: row;
}

@media screen and (max-width: 768px) {
  .welcome-container,
  .my-approach-container,
  .schedule-container {
    flex-direction: column;
  }

  .welcome-text,
  .welcome-photo,
  .my-approach-text,
  .my-approach-photo,
  .schedule-text,
  .schedule-photo {
    width: 100%;
  }

  .welcome-header {
    font-size: 48px;
    /* reduce size on small screens */
  }

  .subtext {
    font-size: 16px;
  }

  .reverse {
    flex-direction: column-reverse;
  }
}


/*
Potential Color Themes
 #B85042,
#E7E8D1,
#A7BEAE

#2A3132,
#763626,
#90AFC5 */