body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.hero-section {
  background-color: #7297b2;
  color: #fff;
}


/* image hero-section */
.about-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}
.about-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(70%); /* Creates a dark overlay effect */
}


@media (max-width: 800px) {
  .about-hero{
    height: 50vh;    
  }

}






 /* mission section */
 .mission-section {
  padding: 80px 20px;
  background-color: #ffffff;
}

.underline {
  width: 80px;
  height: 4px;
  background-color: #007bff;
  margin: 10px 0 20px;
}

.mission-img {
  max-width: 100%;
  height: auto;
  border-radius: 10px; 
}







.card i {
  color: #f8b400; /* Gold icon color */
}
.card {
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
}
.card:hover {
  transform: scale(1.05);
}




.approach{
  background-color: rgb(108, 117, 125);
}

.timeline {
    position: relative;
    padding: 20px 0;
}
.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
}
.timeline-item .timeline-icon {
    width: 50px;
    height: 50px;
    background: #f8b400;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.timeline-item .timeline-content {
    width: 45%;
    padding: 20px;
    background: rgb(201, 172, 229);
    border-radius: 10px;
    position: relative;
}
.timeline-content.left {
    text-align: right;
    margin-right: auto;
}
.timeline-content.right {
    text-align: left;
    margin-left: auto;
}
.timeline-item:nth-child(even) .timeline-icon {
    left: calc(50% - 60px);
}
.timeline-item:nth-child(odd) .timeline-icon {
    left: calc(50% + 10px);
}