.flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #f0f0f0;
}

.flex-row {
  background-color: #E5E7E0;
  display: flex;
  flex: auto;
  justify-content: center;
  align-items: center;
}

.flex-row:first-child {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top:3%;
  padding-bottom:3%;
}

.flex-row:nth-child(2) {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top:3%;
  padding-bottom:3%;
}

.flex-row:nth-child(3) {
  position: relative; /* Necessary for absolute positioning of the video */
  width: 100%; /* Occupy the full width of the screen */
  max-width: 100%; /* Ensure it doesn't exceed the screen width */
  overflow: hidden; /* Hide any overflow */
}

/* Mobile layout */
@media screen and (max-width: 767px) {
  .flex-row:nth-child(2) {
    width: 90%; /* Slightly narrower on mobile */
    margin: 0 auto; /* Center the video container */
  }

  .flex-row:nth-child(2) video {
    width: 100%; /* Make the video fill its container */
    height: auto; /* Maintain aspect ratio */
  }
}
/*
.flex-row:nth-child(3) {
}
*/

.black {
  color: #000000;
  font-size: 4vw;
  font-weight: 900;
  line-height: 0.2;
}

.coral {
  color: #00BFFF;
  font-size: 4vw;
  font-weight: 900;
}

.grey {
  color: #003546;
  font-size: 1.5vw;
  font-weight: 500;
}





.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 5rem auto;
  background-color:#E5E7E0;
}


.left-column, .right-column {
  flex: 1;
  min-height: 100px; /* Adjust as needed */
  background-color:red;
  
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}








/* Desktop layout */
@media screen and (min-width: 768px) {
  .container {
    flex-direction: row;
  }

  .main-content {
    flex: 1;
  }
}


.mug-image {
  display: inline-block; /* Ensures the image stays in line */
  vertical-align: middle; /* Aligns the image vertically in line with text */
  width: 8rem; /* Set the width to 5rem */
  height: auto; /* Set the height to 5rem for a circular shape */
  border-radius: 50%; /* Makes the image circular */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  border: .3rem solid #000000; /* Adds a black border */
}