/* ====================================
   About Page Styles
==================================== */

.about {
    width: 100%;
    max-width: var(--max-width-md, 60rem);
    color: var(--color-dark, #333);
    margin: 2rem auto auto auto;
    padding: 0 20px;
  }
  

.profile-image-container {
  text-align: center;
  margin-bottom: 20px;
}

.profile-image {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.bio {
  width: var(--max-width-sm, 40rem);
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-height-reg, 1.5);
  color: var(--color-secondary, #666);
  text-align: left;
}

body.dark-mode .bio {
  color: var(--color-white, #fff);
}

.bio-container {
  padding: var(--spacing-lg, 2rem); 
  display: flex;
  justify-content: center; 
  align-items: center; 
}

.brands {
  text-align: center;
}

.brands h2 {
  font-size: var(--font-size-xxl, 2rem);
  font-weight: var(--font-weight-bold, 700);
  margin-bottom: var(--spacing-lg, 2rem);
}

.brand-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm), 1rem;
}

.brand-logos img {
  max-width: 10rem;
  height: auto;
  display: block;
  transition: transform 0.3s;
}

.brand-logos img:hover {
  transform: scale(1.1);
}