/*ABOUT US */

/* Section Spacing */
.section {
  padding: 80px 5%;
}

/* HERO SECTION */
.about-hero {
  background: linear-gradient(rgba(0, 51, 102, 0.8), rgba(0, 0, 0, 0.6)),
    url("images/Main_2.JPG") center/cover;
  color: #fff;
  text-align: center;
  padding: 120px 20px;
}

.about-hero h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.about-hero p {
  font-size: 1.2rem;
}
/* Responsive for mobile */
@media (max-width: 768px) {
  .about-hero {
      padding: 80px 10px; 
  }
  .about-hero h1 {
      font-size: 2rem; 
  }
  .about-hero p {
      font-size: 1rem; 
  }
}
/* INTRODUCTION SECTION */
.about-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  background: #f9fafc;
}

.about-intro h2 {
  text-align: left;
}
.about-intro .content {
  flex: 1;
  min-width: 300px;
}

.about-intro img {
  flex: 1;
  max-width: 500px;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .about-intro {
      flex-direction: column;
      text-align: center;
  }
  .about-intro img {
      max-width: 100%;
  }
  .about-intro h2 {
    text-align: center;
    font-size: 1.5rem;
  }
  .about-intro p {
    font-size: 0.8rem;
  }
}


/* CORE VALUES SECTION */
.about-values {
  background: #fff;
  text-align: center;
}

.about-values .values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.about-values .value-box {
  background: #f9fafc;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.about-values .value-box h3 {
  color: #216d9e; 
  margin-bottom: 10px;
}

.about-values .value-box i {
  font-size: 3rem;
  color: #216d9e;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .about-values .values-grid {
      grid-template-columns: 1fr;
  }
  .about-values .value-box i {
    font-size: 2rem
  }
  .about-values .value-box h3 {
    font-size: 1.2rem;
  }
  .about-values .value-box p {
    font-size: 0.9rem;
  }
  .about-values h2{
    font-size: 1.8rem;
  }
}


/* VISION & MISSION SECTION */
.about-vision-mission {
  text-align: center;
  background: #f9fafc;
  padding: 80px 5%;
}

.about-vision-mission h2 {
  font-size: 2.5rem;
  margin-bottom: 50px;
  color: #216d9e; /* Dark Blue */
}

.vision-mission-container {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.vision,
.mission {
  flex: 1;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(97, 97, 97, 0.1);
  text-align: center;
  border: 1px solid #ff8c00;
}

.vision .icon,
.mission .icon {
  font-size: 3rem;
  margin-bottom: 10px;
  color: #ff8c00;
}

.vision h3,
.mission h3 {
  font-size: 1.8rem;
  color: #ff8c00;
  margin-bottom: 10px;
}

.vision p,
.mission p {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
  .vision-mission-container {
      flex-direction: column; /* Stack vertically */
      text-align: center;
  }
  .vision, .mission {
      margin-bottom: 20px; /* Add margin to separate stacked sections */
  }
  .about-vision-mission  h2{
   font-size: 1.7rem;
  }
  .vision .icon,
.mission .icon {
  font-size: 2rem;
 
}

.vision h3,
.mission h3 {
  font-size: 1.2rem;
 
}

.vision p,
.mission p {
  font-size: 0.9rem;
 
}
}


/* APPROVALS SECTION */
.about-approvals {
  background: #F9FAFC; /* Light background color */
  padding: 60px 20px;
  text-align: center;
}

.about-approvals .approvals-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

.about-approvals h2 {
  font-size: 2.5rem;
  color: #216D9E; /* Dark Blue */
  margin-bottom: 20px;
  font-weight: bold;
}

.about-approvals p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
  text-align: justify;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .about-approvals h2 {
      font-size: 2rem; /* Adjust title size for mobile */
  }
  .about-approvals p {
      font-size: 1rem; /* Adjust text size for mobile */
      line-height: 1.6;
  }
}



/* INFRASTRUCTURE SECTION */
.about-infra {
  text-align: center;
  background: #fff;
}

.about-infra .infra-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
  justify-content: center;
}

.about-infra .infra-card {
  background: #f9fafc;
  padding: 20px;
  border-radius: 8px;
  flex: 1;
  min-width: 250px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.about-infra .infra-card h4 {
  color: #216d9e; 
}

.about-infra .infra-card i {
  font-size: 3rem;
  color: #216d9e;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .about-infra .infra-cards {
      flex-direction: column; /* Stack infrastructure cards vertically */
      text-align: center;
  }
  .about-infra .infra-card {
      margin-bottom: 20px; /* Add margin between cards */
  }
  .about-infra h2{
   font-size: 1.7rem;
  }
  .about-infra .infra-card h4 {
    font-size: 1.2rem;
  }
  .about-infra .infra-card i {
    font-size: 2rem;
  }
  .about-infra .infra-card p {
    font-size: 0.9rem;
  }
}


/* CTA SECTION */
.about-cta {
  text-align: center;
  background: #216d9e; /* Dark Blue */
  color: #fff;
  padding: 60px 20px;
}

.about-cta h2 {
  margin-bottom: 20px;
}

.about-cta button {
  background: #ffa500; /* Orange */
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
}

.about-cta button:hover {
  background: #ff8c00; /* Darker Orange */
}

@media (max-width: 768px) {
  .about-cta h2 {
      font-size: 1.2rem; /* Adjust font size */
  }
  .about-cta button {
      padding: 10px 20px; /* Adjust padding */
  }
}