/* === KONTAINER === */
.bolag-container {
  padding: 2rem;
  max-width: 1024px;
  margin: 0 auto;
}

.bolag-container h1 {
  font-size: 1.8rem;
  color: var(--black--h1);
  margin: 0 auto 0;
/*   animation: pulse 2s infinite; */
}

.bolag-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 1rem;
}

/* === FLEXRAD FÖR TVÅ KOLUMNER === */
.bolag-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
}

/* === KOLUMNBLOCK === */
.bolag-text {
  flex: 1 1 45%;
  max-width: 90%;
  padding: 1rem;
  border-radius: 8px;
}

.bolag-text h2,
.bolag-text h3 {
  color: var(--black--h1);
  margin: 1rem 0;
  
}

.bolag-text h2 {
  text-align: left;
  font-size: 1.3rem;
  padding-left: .5rem;
/*   margin-left: 0; */
}

.bolag-text h3 {
  font-size: 1.1rem;
  text-align: left;
  padding: 1rem .5rem ;
  padding-bottom: 0.5rem;
  
}

.bolag-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--black-font-p);
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

/* === PROFILER MED BILD + TEXT === */

.bandprofil-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center; /* centrerar innehållet snyggt */
  margin-top: 2rem;
}

.bandprofil {
  flex: 1 1 220px; /* växer, krymper, minsta bredd */
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kontaktprofil {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.profilbild img {
  width: 120px;
  height: auto;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}

.profilbild img:hover {
  transform: scale(1.05);
}

.profiltext h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--black--h1);
}
.profiltext p {
  margin: 0;
 
  color: var(--black--h1);
}

.profiltext a {
  color: var(--primary-blue); 
  text-decoration: none;
  transition: color 0.5s ease, text-decoration 0.5s ease;  
}

.profiltext a:hover {
  color: var(--hover-text-a); 
  text-decoration: underline;
}
@media screen and (max-width: 600px) {
  .bandprofil-container {
    flex-direction: column;
    align-items: center;
  }
}
/* === ANIMATIONER === */
/* @keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-icon {
  width: 50px;
  animation: spin 5s linear infinite;
  display: block;
  margin: 1rem auto;
} */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === BAKGRUNDSBANNER === */
.background-banner {
  background: url('images/bg-banner1.webp') center/cover no-repeat;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .background-banner h1 {
  font-size: 2.5rem;
  color: rgb(253, 251, 251);
  text-shadow: 2px 3px 4px rgb(3, 3, 3);
  animation: pulse 3s infinite;
} */

/* === HOVER-EFFEKT FÖR LISTOR (om du använder sådana) === */
.bolag-flex li {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.bolag-flex li:hover {
  background-color: #eee;
  transform: scale(1.03);
  cursor: pointer;
}

/* === RESPONSIVITET === */
@media screen and (max-width: 768px) {
  .bolag-flex {
    flex-direction: column;
    align-items: center;
  }

  .bolag-text {
    max-width: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 540px) {
  .bolag-text ol li {
    font-size: 0.95rem;
    padding: 0.75rem 0;
  }

  .bolag-text ol img {
    width: 14px;
  }

  .bolag-container h1 {
    font-size: 1.6rem;
    padding: 1rem 1rem 0;
 
   
  }

  .bolag-container {
    padding: 2rem 0 0;
  }

  .kontaktprofil {
    flex-direction: column;
    align-items: flex-start;
  }

  .profilbild img {
    width: 120px;
  }
}

/* @media screen and (max-width: 440px) {
  .bolag-text {
    width: 100%;
  }

  .background-banner h1 {
    font-size: 2rem;
  }
} */