@import url("./header.css");
@import url("./footer.css");
@import url("./bot.css");
@import url("https://fonts.googleapis.com/css2?family=Anta&display=swap");

body {
  background: rgb(15 23 42);
  color: rgb(2, 8, 23);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  /* border: 1px solid rgb(226, 232, 240); */
}

/* --- Global Container & Spacing --- */
.section-padding {
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
}

.max-width-container {
  max-width: 80rem; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
}

.text-center-wrapper {
  text-align: center;
}

/* --- Hero Section --- */
.hero-section {
  background-image: linear-gradient(
    to bottom right,
    #0f172a,
    #1e293b,
    #0f172a
  ); /* bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 */
  position: relative;
  overflow: hidden;
}

.hero-background-effects {
  position: absolute;
  inset: 0;
}

.hero-blob-emerald {
  position: absolute;
  top: 25%; /* top-1/4 */
  left: 25%; /* left-1/4 */
  width: 24rem; /* w-96 */
  height: 24rem; /* h-96 */
  background-color: rgba(16, 185, 129, 0.1); /* bg-emerald-500/10 */
  border-radius: 50%;
  filter: blur(48px); /* blur-3xl */
}

.hero-blob-blue {
  position: absolute;
  bottom: 25%; /* bottom-1/4 */
  right: 25%; /* right-1/4 */
  width: 24rem; /* w-96 */
  height: 24rem; /* h-96 */
  background-color: rgba(59, 130, 246, 0.1); /* bg-blue-500/10 */
  border-radius: 50%;
  filter: blur(48px); /* blur-3xl */
}

.hero-content {
  position: relative; /* relative */
  max-width: 64rem; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  text-align: center; /* text-center */
  z-index: 1; /* Ensure content is above blobs */
}

.hero-title {
  font-family: "Anta", sans-serif;
  font-size: 3rem; /* text-5xl */
  line-height: 1.2;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1.5rem; /* mb-6 */
}

.hero-title-gradient {
  background-image: linear-gradient(
    to right,
    #34d399,
    #60a5fa
  ); /* from-emerald-400 to-blue-400 */
  -webkit-background-clip: text; /* bg-clip-text */
  -webkit-text-fill-color: transparent; /* text-transparent */
  background-clip: text; /* Fallback */
  color: transparent; /* Fallback */
}

.hero-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.625; /* leading-relaxed */
  color: #d1d5db; /* text-gray-300 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

/* --- Mission & Vision Section --- */
.mission-vision-section {
  background-color: rgba(30, 41, 59, 0.3); /* bg-slate-800/30 */
}

.mission-vision-grid {
  display: grid; /* grid */
  gap: 4rem; /* gap-16 */
  align-items: center; /* items-center */
}

.mission-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 2rem; /* mb-8 */
  font-family: "Anta", sans-serif;
}

.mission-paragraph {
  font-size: 1.125rem; /* text-lg */
  line-height: 1.625; /* leading-relaxed */
  color: #d1d5db; /* text-gray-300 */
  margin-bottom: 1.5rem; /* mb-6 */
}

.mission-image-wrapper {
  position: relative; /* relative */
}

.mission-image-card {
  background-image: linear-gradient(
    to bottom right,
    #1e293b,
    #0f172a
  ); /* bg-gradient-to-br from-slate-800 to-slate-900 */
  border-radius: 1rem; /* rounded-2xl */
  padding: 2rem; /* p-8 */
  border: 1px solid #334155; /* border border-slate-700 */
}

.mission-image {
  width: 100%; /* w-full */
  height: 16rem; /* h-64 */
  object-fit: cover; /* object-cover */
  border-radius: 0.5rem; /* rounded-lg */
}

.mission-blob-gradient {
  position: absolute; /* absolute */
  bottom: -1.5rem; /* -bottom-6 */
  right: -1.5rem; /* -right-6 */
  width: 6rem; /* w-24 */
  height: 6rem; /* h-24 */
  background-image: linear-gradient(
    to right,
    #34d399,
    #60a5fa
  ); /* bg-gradient-to-r from-emerald-400 to-blue-400 */
  border-radius: 50%; /* rounded-full */
  filter: blur(32px); /* blur-2xl */
  opacity: 0.2; /* opacity-20 */
}

/* --- Values Section --- */
.values-section {
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
}

.values-header {
  margin-bottom: 4rem; /* mb-16 */
}

.values-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1rem; /* mb-4 */
  font-family: "Anta", sans-serif;
}

.values-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  color: #9ca3af; /* text-gray-400 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

.values-grid {
  display: grid; /* grid */
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 2rem; /* gap-8 */
}

.value-card {
  text-align: center; /* text-center */
  position: relative; /* for group hover */
  cursor: default; /* Indicate not clickable */
}

.value-icon-wrapper {
  width: 5rem; /* w-20 */
  height: 5rem; /* h-20 */
  background-image: linear-gradient(
    to right,
    #10b981,
    #059669
  ); /* bg-gradient-to-r from-emerald-500 to-emerald-600 */
  border-radius: 50%; /* rounded-full */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  margin-bottom: 1.5rem; /* mb-6 */
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform duration-300 */
}

.value-card:hover .value-icon-wrapper {
  transform: scale(1.1); /* group-hover:scale-110 */
}

.value-icon-wrapper svg {
  color: #ffffff; /* text-white */
  width: 2rem; /* size={32} */
  height: 2rem; /* size={32} */
}

.value-title {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1rem; /* mb-4 */
  
}

.value-description {
  color: #9ca3af; /* text-gray-400 */
}

/* --- Timeline Section --- */
.timeline-section {
  background-color: rgba(30, 41, 59, 0.3); /* bg-slate-800/30 */
}

.timeline-header {
  margin-bottom: 4rem; /* mb-16 */
}

.timeline-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1rem; /* mb-4 */
  font-family: "Anta", sans-serif;
}

.timeline-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  color: #9ca3af; /* text-gray-400 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

.timeline-relative-container {
  position: relative; /* relative */
}

.timeline-line {
  position: absolute; /* absolute */
  left: 50%; /* left-1/2 */
  transform: translateX(-50%); /* -translate-x-1/2 */
  width: 0.25rem; /* w-1 */
  height: 100%; /* h-full */
  background-color: #334155; /* bg-slate-700 */
  z-index: 0;
}

.timeline-items-spacing {
  display: flex;
  flex-direction: column;
  gap: 3rem; /* space-y-12 */
}

.timeline-item-wrapper {
  display: flex; /* flex */
  align-items: center; /* items-center */
}

.timeline-item-left {
  flex-direction: row; /* flex-row */
}

.timeline-item-right {
  flex-direction: row-reverse; /* flex-row-reverse */
}

.timeline-card-wrapper {
  width: 50%; /* w-1/2 */
}

.timeline-card-wrapper.align-right {
  padding-right: 2rem; /* pr-8 */
  text-align: right; /* text-right */
}

.timeline-card-wrapper.align-left {
  padding-left: 2rem; /* pl-8 */
  text-align: left; /* text-left */
}

.timeline-card {
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
  border: 1px solid #334155; /* border border-slate-700 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
}

.timeline-year {
  color: #34d399; /* text-emerald-400 */
  font-weight: 700; /* font-bold */
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem;
  margin-bottom: 0.5rem; /* mb-2 */
}

.timeline-item-title {
  color: #ffffff; /* text-white */
  font-weight: 700; /* font-bold */
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  margin-bottom: 0.75rem; /* mb-3 */
}

.timeline-item-description {
  color: #9ca3af; /* text-gray-400 */
}

.timeline-dot-wrapper {
  position: relative; /* relative */
  z-index: 10; /* z-10 */
}

.timeline-dot {
  width: 1rem; /* w-4 */
  height: 1rem; /* h-4 */
  background-color: #10b981; /* bg-emerald-500 */
  border-radius: 50%; /* rounded-full */
  border: 4px solid #0f172a; /* border-4 border-slate-900 */
}

/* --- Team Section --- */
.team-section {
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
}

.team-header {
  margin-bottom: 4rem; /* mb-16 */
}

.team-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1rem; /* mb-4 */
  font-family: "Anta", sans-serif;
}

.team-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  color: #9ca3af; /* text-gray-400 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

.team-grid {
  display: grid; /* grid */
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 2rem; /* gap-8 */
}

.team-member-card {
  text-align: center; /* text-center */
  position: relative; /* for group hover */
}

.team-member-image-wrapper {
  position: relative; /* relative */
  margin-bottom: 1.5rem; /* mb-6 */
}

.team-member-image {
  width: 12rem; /* w-48 */
  height: 12rem; /* h-48 */
  object-fit: cover; /* object-cover */
  border-radius: 50%; /* rounded-full */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  border: 4px solid #334155; /* border-4 border-slate-700 */
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors duration-300 */
}

.team-member-card:hover .team-member-image {
  border-color: #10b981; /* group-hover:border-emerald-500 */
}

.team-member-overlay {
  position: absolute; /* absolute */
  inset: 0; /* inset-0 */
  background-image: linear-gradient(
    to top,
    rgba(16, 185, 129, 0.2),
    transparent
  ); /* bg-gradient-to-t from-emerald-500/20 to-transparent */
  border-radius: 50%; /* rounded-full */
  opacity: 0; /* opacity-0 */
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-opacity duration-300 */
}

.team-member-card:hover .team-member-overlay {
  opacity: 1; /* group-hover:opacity-100 */
}

.team-member-name {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 0.5rem; /* mb-2 */
}

.team-member-position {
  color: #34d399; /* text-emerald-400 */
  font-weight: 600; /* font-semibold */
  margin-bottom: 0.5rem; /* mb-2 */
}

.team-member-expertise {
  color: #9ca3af; /* text-gray-400 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  margin-bottom: 1rem; /* mb-4 */
}

.team-member-description {
  color: #9ca3af; /* text-gray-400 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
}

/* --- Final CTA Section --- */
.final-cta-section {
  background-image: linear-gradient(
    to right,
    #0f172a,
    #1e293b,
    #0f172a
  ); /* bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 */
}

.final-cta-container {
  max-width: 56rem; /* max-w-4xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  text-align: center; /* text-center */
}

.final-cta-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1.5rem; /* mb-6 */
  font-family: "Anta", sans-serif;
}

.final-cta-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  color: #d1d5db; /* text-gray-300 */
  margin-bottom: 2rem; /* mb-8 */
  max-width: 42rem; /* max-w-2xl */
  margin-left: auto;
  margin-right: auto;
}

.final-cta-button-group {
  display: flex; /* flex */
  flex-direction: column; /* flex-col */
  gap: 1rem; /* gap-4 */
  justify-content: center; /* justify-center */
}

.final-cta-button-primary {
  background-image: linear-gradient(
    to right,
    #10b981,
    #059669
  ); /* from-emerald-500 to-emerald-600 */
  color: #ffffff; /* text-white */
  padding-left: 2rem; /* px-8 */
  padding-right: 2rem; /* px-8 */
  padding-top: 0.75rem; /* py-3 */
  padding-bottom: 0.75rem; /* py-3 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 600; /* font-semibold */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-200 */
  display: inline-flex; /* inline-flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  text-decoration: none;
}

.final-cta-button-primary:hover {
  background-image: linear-gradient(
    to right,
    #059669,
    #047857
  ); /* hover:from-emerald-600 hover:to-emerald-700 */
}

.final-cta-button-primary svg {
  margin-left: 0.5rem; /* ml-2 */
  width: 1.25rem; /* size={20} */
  height: 1.25rem; /* size={20} */
}

.final-cta-button-secondary {
  border: 1px solid #4b5563; /* border border-gray-600 */
  color: #ffffff; /* text-white */
  padding-left: 2rem; /* px-8 */
  padding-right: 2rem; /* px-8 */
  padding-top: 0.75rem; /* py-3 */
  padding-bottom: 0.75rem; /* py-3 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 600; /* font-semibold */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-200 */
  text-decoration: none;
}

.final-cta-button-secondary:hover {
  border-color: #34d399; /* hover:border-emerald-400 */
  color: #34d399; /* hover:text-emerald-400 */
}

/* --- Responsive Adjustments --- */
@media (min-width: 640px) {
  /* sm breakpoint */
  .max-width-container,
  .hero-content,
  .final-cta-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }
  .values-grid,
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
  }
  .final-cta-button-group {
    flex-direction: row; /* sm:flex-row */
  }
  .timeline-item-wrapper {
    flex-wrap: nowrap; /* Prevent wrapping on smaller screens */
  }
}

@media (min-width: 768px) {
  /* md breakpoint */
  .mission-vision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* lg:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  /* lg breakpoint */
  .max-width-container,
  .hero-content,
  .final-cta-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }
  .hero-title {
    font-size: 4.5rem; /* lg:text-7xl */
  }
  .values-grid,
  .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* lg:grid-cols-4 */
  }
}