/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero {
  position: relative;
}

.about-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--clr-light);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.slogan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  font-size: var(--size-2xl);
  color: var(--clr-light);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Company Overview Section */
.overview__description {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.overview__highlights {
  padding: 2rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.highlights__title {
  margin-bottom: 1rem;
}

.highlights__list {
  list-style-type: none;
  padding-left: 0;
}

.highlights__list li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.highlights__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--clr-green);
  font-size: var(--size-3xl);
}

.overview__cta {
  font-weight: bold;
  font-size: var(--size-lg);
  text-align: center;
  margin-top: 2rem;
}

/* Responsive adjustments */
/* xs */
/* @media (min-width: 475px) {} */

/* sm */
 @media (min-width: 640px) {
  .slogan {
    font-size: var(--size-3xl);
  }

  .overview__description {
    font-size: var(--size-lg);
  }
}

/* md */
@media (min-width: 768px) {
  .about-hero__image {
    max-height: 450px;
  }

  .slogan {
    font-size: var(--size-4xl);
  }

  .overview__description {
    font-size: var(--size-xl);
  }

  .highlights__list li::before {
    font-size: 2.175rem;
  }

  .highlights__list li {
    padding-left: 1.5rem;
  }

  .highlights__list {
    font-size:var(--size-lg);
  }
}

/* lg */
@media (min-width: 1024px) {
  .about-hero__image {
    max-height: 550px;
  }

  .slogan {
    font-size: var(--size-5xl);
  }

  .overview__description {
    font-size: var(--size-2xl);
  }

  .highlights__list li::before {
    font-size: 2.25rem;
  }

  .highlights__list li {
    padding-left: 2rem;
  }

  .highlights__list {
    font-size:var(--size-xl);
  }
}

/* xl */
@media (min-width: 1280px) {
  .highlights__list li::before {
    font-size: 2.5rem;
  }

  .highlights__list {
    font-size:var(--size-2xl);
  }
}

/* 2xl */
/* @media (min-width: 1536px) {} */