/* ================= VARIABLES ================= */
:root {
  --primary-blue: #2563eb;
  --primary-dark: #1e40af;

  --bg-dark: #0f172a;      /* Dark background */
  --bg-card: #1e293b;      /* Card background */
  --bg-footer: #020617;    /* Darker footer */

  --text-main: #f8fafc;    /* Main light text */
  --text-muted: #94a3b8;   /* Secondary text */

  --accent-green: #22c55e;
  --white: #ffffff;
}

/* ================= GLOBAL RESET ================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.about-header {
margin-left: 1rem;
}

.about-header h1 {
  color: var(--primary-blue);
  display: flex;
  justify-content: center;
}

/* ================= HERO IMAGES ================= */
.hero-images {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.hero-images img {
  width: 450px;
  height: auto;          /* keeps aspect ratio */
  object-fit: cover;
  border-radius: 0.75rem;
  border: 2px solid var(--primary-blue);
}

/* ================= MISSION & VISION ================= */
.mission-vision {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;            /* Reduced gap slightly to allow more room for card width */
  justify-content: center;
  padding: 1rem;
  max-width: 1400px;    /* Optional: prevents the whole section from being too wide */
  margin: 0 auto;
}

.card {
  background-color: var(--bg-card);
  border-radius: 1rem;
  padding: 1.5rem;
  flex: 1 1 350px;      /* Card will be at least 350px but grow to fill space */
  max-width: 450px;     /* Prevents them from becoming awkwardly wide on desktop */
  border: 1px solid var(--primary-blue);
  transition: transform 0.3s ease, background 0.3s ease;
}

.card h2 {
  margin-bottom: 0.5rem;  /* better control than padding */
}

.mission-vision {
  margin-top: 0;
  margin-bottom: 0;
}

.card:hover {
  transform: translateY(-6px);
}

/* ================= STATS ================= */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
  justify-content: center;
  padding: 1rem 1rem;
}

.stat-card {
  text-align: center;
  background-color: var(--bg-card);
  padding: 1rem;
  border-radius: 1rem;
  width: 190px;
  border: 1px solid var(--primary-blue);
}

.stat-icon {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  color: var(--primary-blue);
}

/* ================= OUR STORY ================= */
.our-story {
  padding: 0 2rem 0rem 2rem; /* Top: 0, Right: 2rem, Bottom: 3rem, Left: 2rem */
}
.our-story h2{
  padding: 0rem;
}

.story-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.our-story p{
  max-width: fit-content;
}

.story-grid > div {
  max-width: none; /* Allows text to fill the available space */
  width: 100%;
}

.badge {
  display: inline-block;
  background-color: rgba(37, 99, 235, 0.15);
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ================= VALUES ================= */
.values {
  padding: 1rem 1rem;
  text-align: center;
}

.values h2 {
  padding: 0rem 0rem;
  text-align: center;
}

.values-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.value-card {
  width: 200px;
  background-color: var(--bg-card);
  border-radius: 1rem;
  padding: 1rem;
  border: 1px solid var(--primary-blue);
  transition: transform 0.3s ease, background 0.3s ease;
}

.value-card:hover {
  transform: translateY(-6px);
  background-color: var(--bg-dark);
}

.value-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary-blue);
}

/* ================= SERVICES OVERVIEW ================= */
.services-overview {
  padding: 0rem 0rem;
  text-align: center;
}
.services-overview h2 {
  padding:0rem;
}
.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
  justify-content: center;
}

.services-grid div {
  width: 260px;
  background-color: var(--bg-card);
  border: 1px solid var(--primary-blue);
  border-radius: 0.75rem;
  padding: 1rem;
  transition: transform 0.3s ease, background 0.3s ease;
}

.services-grid div:hover {
  transform: translateY(-6px);
  background-color: var(--bg-dark);
}

/* ================= MOBILE VIEW ================= */
@media (max-width: 768px) {
.about-header h1 {
  font-size: 25px;
  padding: 1rem;
}
/* HERO IMAGES - 2 COLUMNS ON MOBILE */
.hero-images {
  display: flex;
  flex-wrap: wrap;   /* allow images to wrap */
  gap: 1rem;         /* space between images */
  justify-content: center;
  padding: 1rem 0;
  padding: 1rem;
}

.hero-images img {
  width: calc(50% - 0.5rem);  /* two images per row, accounting for gap */
  height: auto;
  max-width: 100%;
  border-radius: 0.5rem;
}
  /* MISSION & VISION */
  .mission-vision {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }

  .card {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    margin: 0 auto;
  }

 /* STATS SECTION - 2 COLUMNS */
  .stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
  }

  .stat-card {
    width: calc(50% - 0.5rem); /* 2 cards per row with gap */
    max-width: 50%;
    margin: 0;
  }

  .stat-icon {
    font-size: 2rem;
  }


  /* OUR STORY */
  /* Find this in your @media (max-width: 768px) section */
.our-story {
  padding: 0 1rem 0rem 1rem; /* Reduced bottom padding to 0.5rem */
  margin-bottom: 0rem;
}
  .our-story h2 {
  margin-top: 0;
  margin-bottom: 0rem; /* Adjust this for the space between the title and the text */
}

/* Target the list specifically within the Our Story section */
.our-story ul {
    margin-left: 1.5rem;  /* Pushes the entire list to the right */
    list-style-position: outside; /* Ensures bullets sit in the margin */
    text-align: left; /* Ensures text stays left-aligned even if section is centered */
}

.our-story li {
    margin-bottom: 0.5rem; /* Adds a little breathing room between each milestone */
}
  .story-grid {
    flex-direction: column;
    padding: 1rem 0;
    gap: 1rem;
    margin-top: 0rem;
  }

  .story-grid > div {
    width: 100%;
    max-width: 100%;
  }

  .badge {
    margin-bottom: 0.3rem;
    margin-right: 0.3rem;
  }

  /* VALUES */
  .values {
  padding: 0 1rem 0rem 1rem; /* Changed first value from 1rem to 0 */
  text-align: center;
  margin-top: 0rem;
}
.values h2 {
  margin-top: 0;
  margin-bottom: 0rem; /* Adjust this for the space between the title and the text */
}
  .values-grid {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
  }

  .value-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
  }

  .value-icon {
    font-size: 2rem;
  }

  /* SERVICES OVERVIEW */
  /* Add or update this inside your @media (max-width: 768px) block */
.services-overview {
  padding: 0 1rem 1rem 1rem; /* Set top padding to 0 */
}

.services-overview h2 {
  margin-top: 0; /* Ensures the "What We Do" title doesn't push itself down */
}
  .services-grid {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
  }

  .services-grid div {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
  }

  /* TEXT WRAP */
  h1, h2, h3, p {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}