.active-nav {
  text-decoration: underline;
}

/*--------------------------------------------------------------
# Global Flex
--------------------------------------------------------------*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.flex2-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex3-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.flex4-container {
  display: flex;           /* establish flex container */
  flex-wrap: wrap;
  flex-direction: row;  /* make main axis horizontal, CHANGE HERE REST IS SAME */
  justify-content: center; /* center items vertically, in this case */
  align-items: center;     /* center items horizontally, in this case */
  gap: 40px; /* Adjust the gap size as needed */
  /* height: 280px; */
}

.flex5-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction:row;
}

.flex6-container {
  display: flex;
  flex-direction:row;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  flex-wrap: wrap;
}
.flex7-container {
  display: flex;
  flex-direction:row;
  justify-content: end; /* align horizontal */
  align-items: end; /* align vertical */
}

.iframe-container {
  position: relative;
  width: 50%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.text-div, .image-div {
  flex: 1 1 50%;
  box-sizing: border-box;
}
.text-div-about, .image-div-about {
  flex: 1 1 50%;
  box-sizing: border-box;
}

.main-section {
  position: absolute;
  top: 15vh;
  left: 15vw;
  right: 15vw;
}

/* .text-div {
  padding: 10px;
  margin-top:-20%;
}
.text-div-about {
  padding: 10px;
  margin-top:-20%;
}

.image-div {
  padding: 10px;
  margin-top:-15%;
}
.image-div-about {
  padding: 10px;
  margin-top:-15%;
} */

.responsive-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .text-div, .image-div {
      flex: 1 1 100%;
  }
  .image-div {
    margin-top:0;
  }
  .main-section {
    left: 5vw;
    right: 5vw;
  }
}

@media (max-width: 768px) {

  .flex6-container {
    flex-direction:column;
  }
  .flex7-container {
    justify-content: center; /* align horizontal */
  }
  .iframe-container {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .main-section {
    left: 5vw;
    right: 5vw;
  }
}