body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: white;
  color: black;
}

h1 {
  font-family: sans-serif;
  font-size: 28px;
  text-align: left;
}

.history-container, .achievements-container {
  background-color: white;
  color: black;
  padding: 20px;
}


.history-container, .highlights-container, .achievements-container h3 {
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

.history-container, .achievements-container p {
  font-family: sans-serif;
  font-size: 14px;
  text-align: justify;
  padding-right: 20px;
}

.history-container hr, .achievements-container hr {
  border-width: 2px;
  color: black;
  padding-left: 40px;
}

.history-content, .highlights-content, .achievements-content, .awards-content {
  display: flex;
  flex-wrap: wrap; /* Allow elements to wrap on smaller screens */
  justify-content: space-between;
  padding: 20px;
}

.history-content, .achievements-content {
  display: flex;
  flex-direction: row-reverse; /* Reverse order of elements */
}


.history-image, .achievements-image, .highlights-image, .awards-image {
  width: 40%; /* Adjust width as needed */
  height: auto;
  margin-bottom: 20px;
}

.history-text, .highlights-text, .achievements-text, .awards-text {
    flex: 1;
  padding: 20px;
}

.highlights-container, .awards-container {
  background-color: #223965;
  color: white;
  padding: 20px;
}

.highlights-container p, .awards-container p {
  font-family: sans-serif;
  font-size: 14px;
  text-align: justify;
}


.highlights-container hr, .awards-container hr {
  border-width: 2px;
  color: white;
  padding-left: 20px;
}

.achievements-image {
  width: 40%;
  height: auto;
  margin-bottom: 20px;
  max-width: 700px; /* Adjust max-width as needed */
}

.highlights-text ul, .achievements-text ul, .awards-text ul {
  list-style-type: disc;
  padding-left: 20px;
}

.highlights-text li, .achievements-text li, .awards-text li {
  font-size: 14px;
  text-align: justify;
}

/* Responsive Design */
@media (max-width: 768px) {
  .history-content, .highlights-content, .achievements-content, .awards-content {
    flex-direction: column;
    align-items: center;
    padding: 3px;
  }
  .history-container, .highlights-container, .achievements-container, .awards-container {
      padding: 5px;
  }
    h1 {
        font-size: 20px; /* Adjust the font size as needed */
        text-align: center;
        padding: 0;
    }
    p{
        padding: 0px;
    }
    .history-image, .achievements-image, .highlights-image, .awards-image {
      width: 100%; /* Adjust width as needed */
      height: auto;
      margin-bottom: 5px;
    }
    .highlights-text, .awards-text {
     padding: 0px;
}
    
    .history-text, .highlights-text, .achievements-text, .awards-text {
        text-align: center;
        padding: 5px;
     }
}