/* HEADER SECTION */
.header-section {
  background-image: linear-gradient(to bottom right, var(--blue-400), var(--blue-600));
  color: var(--white);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.header-section .container {
  text-align: center;
}

.header-section .title {
  font-size: 2.25rem;
  line-height: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: var(--font-serif);
  color: var(--white);
}
.header-section .description {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--white);
}
.header-section svg {
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  stroke: var(--blue-300);
  fill: none;
  stroke-width: 2px;
}

/* ORIGINS SECTION */
.origins-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.origins-section .how-we-started {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  place-items: center;
  margin-bottom: 4rem;
}

@media (max-width: 900px){
  .origins-section .how-we-started {
    grid-template-columns: repeat(1, 1fr);
  }
}

.origins-section .how-we-started .title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
}
.origins-section .how-we-started .description {
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.625;
}
.origins-section .how-we-started .description:last-child {
  margin-bottom: 0;
}
.origins-section .how-we-started .image {
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  width:100%;
}

.origins-section .milestones {
  border-radius: 0.5rem;
  padding: 2rem;
  margin-bottom: 4rem;
}
.origins-section .milestones .title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem; 
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
}
.origins-section .milestones-grid {
  display: grid;
  gap:1.5rem;
  grid-template-columns: repeat(3, 1fr)
}
.origins-section .milestone-item {
  text-align: center;
}
.origins-section .milestone-item .value {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: var(--blue-600);
  margin-bottom: 0.5rem;
}
.origins-section .milestone-item .title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.25rem;
}
.origins-section .milestone-item .description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted);
}

/* FOUNDERS SECTION */
.founders-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.founders-section .title-container {
  text-align: center;
  margin-bottom: 3rem;
}
.founders-section .founders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 1024px) {
  .founders-section .founders-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .founders-section .founders-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.founders-section .founder-item {
  background-color: var(--white);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
}

.founders-section .founder-item:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}

.founders-section .founder-image {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  object-fit: cover;
}
.founders-section .founder-name {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.founders-section .founder-position {
  color: var(--blue-600);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.founders-section .founder-experience {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.founders-section .founder-description {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.625rem;
}

/* VALUES SECTION */
.values-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.values-section .values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 768px) {
  .values-section .values-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.values-section .value-item {
  text-align: center;
  padding: 1.5rem;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  border-radius: 1.5rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--white);
}

.values-section .value-item:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}

.values-section .value-item .svg-container {
  background-color: var(--blue-100);
  border-radius: 9999px;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0rem auto 1.5rem;
}

.values-section .value-item .svg-container svg {
  width: 32px;
  height: 32px;
  display: block;
  vertical-align: middle;
  stroke: var(--blue-600);
  stroke-width: 2;
  fill: none;
  
}

.values-section .value-item .title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text);
}
.values-section .value-item .description {
  color: var(--muted);
}

/* Fix for inconsistent class usage in other
display: grid items */
/* .values-section {
  text-align: center;
  text-align: center;
  padding: 1.5rem;
} */
/* .values-section .title {
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text);
}
.values-section .description {
  text-align: center;
  color: var(--muted);
} */