/* ─── Our People Section ─────────────────────────────────────────── */
#our-people {
  background-color: var(--bg);
}

.card {
  box-shadow: none !important;
  border-color: var(--primary);
}

#our-people-container {
  max-width: 1500px;
}

#our-people img:not(.cardCompanyLogo) {
  width: clamp(8rem, 15vw, 15rem);
  height: clamp(8rem, 15vw, 15rem);
  object-fit: cover;
  flex-shrink: 0;
  transition: width 0.3s ease, height 0.3s ease;
  border-radius: 100%;
}

#head-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  width: 100%;
}

#head-title .section-header {
  margin-bottom: 0;
}

#head-title .container {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ─── Goals ──────────────────────────────────────────────────── */
#goals {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#goals-container * {
  text-align: left;
}

#goals .container {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}


#goals-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.goal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.5rem;
  margin-bottom: 20px;
}

.goal-card {
  padding: 1.5rem;
  border-radius: 1rem;
  max-width: 600px;
  width: 80%;
  max-width: 500px;
  text-align: center;
}

.goal-icon {
  font-size: 2.5rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.goal-icon svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  box-sizing: content-box;
  background-color: rgba(144, 238, 144, 0.3); 
  border: 1px solid rgba(45,122,34,0.2);
  border-radius: 14px;
  padding: 10px;
  color: rgba(0, 128, 0, 0.9);
}

.goal-name {
  font-size: 1.25rem;
  font-weight: bold;
}

.goal-desc {
  color: var(--text-muted);
  margin-top: 0.5rem;
}







/* ─── Card Grid ──────────────────────────────────────────────────── */

#bottomGroup {
  display: flex;
  gap: 1rem;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.cardGroup {
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  padding: 1rem;
}

/* ─── Individual Card ────────────────────────────────────────────── */

.business-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  width: 100%;
  position: relative;

  transition:
    width 0.3s ease,
    padding 0.3s ease;
  max-width: 350px;
  background-color: var(--bg-light);
}

/* ─── Card Right Side ────────────────────────────────────────────── */

.cardInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: 0;
  width: 100%;
  gap: 0.5rem;
  border-radius: 1rem;
  padding: 1rem;
  height: 100%;
}

.cardDetails {
  color: var(--text-muted);
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.detail-icon {
  transition: all 0.1s ease-in-out;
  text-decoration: none;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.detail-icon:hover {
  color: var(--primary);
  font-weight: bold;
  transform: scale(1.05);
}

.card-position {
  font-style: italic;
  color: var(--primary) !important;
  font-weight: bold;
}

/* ─── Company Logo (absolute positioned) ────────────────────────── */

.cardCompanyLogo {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* ─── Top Group ──────────────────────────────────────────────────── */

#topGroup {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  gap: 2rem;
}

/* ─── Responsive Breakpoints ─────────────────────────────────────── */

@media (max-width: 1024px) {
  .business-card {
    width: calc(50% - 0.5rem);
    padding: 0.85rem;
  }
}

@media (max-width: 768px) {
  .business-card {
    width: 100%;
    padding: 0.85rem;
  }

  #thomas .business-card {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .card-email,
  .card-phone {
    white-space: normal;
    word-break: break-all;
  }

  #topGroup {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: 1rem;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #topGroup::-webkit-scrollbar {
    display: none;
  }

  #bottomGroup {
    display: none;
  }

  .business-card {
    flex-shrink: 0;
    width: 80vw;
    max-width: 280px;
    scroll-snap-align: center;
  }

  /* Progress indicators / dots */
  .scroll-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .scroll-indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
  }

  .scroll-indicator.active {
    background-color: var(--primary);
    width: 1.5rem;
    border-radius: 0.25rem;
  }
}


section:nth-child(odd) {
  background-color: var(--bg) !important; 
}

section:nth-child(even) {
  background-color: var(--bg-dark) !important;
}

section:nth-child(odd) .card {
  background-color: var(--bg-light) !important; 
}

section:nth-child(even) .card {
  background-color: var(--bg) !important;
}