body {
      background-color: #1a1a1a;
      color: #f5f5f5;
      font-family: 'Segoe UI', sans-serif;
    }
    .hero {
      background-color: red;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      overflow: hidden;
    }
    
    .hero img {
      max-width: 100%;
      height: auto;
    }

    .hero img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
    .highlight {
      color: #f9d302; 
      font-weight: bold;
    }
    .section {
      padding: 4rem 1rem;
    }
    h1, h2 {
      color: #ffffff;
    }
    ul li::marker {
      color: #dc3545; /* Bootstrap's red */
    }
    hr {
      border-color: #444;
      margin: 3rem 0;
    }
    
    
    .faq {
        border:1px solid white;
        padding:3em;
    }
.hero {
  position: relative;
  overflow: hidden;
}

/* Ta bort max-height-begränsningen */
.hero-slider {
  position: relative;
  width: 100%;
  max-width: 1400px; /* justera storlek här */
  margin: 0 auto; /* CENTRERAR */
}

/* Låt media styra höjden och visa allt (inga crop) */
.hero-media {
  width: 100%;
  height: auto;
  object-fit: contain; /* eller ta bort helt om du vill */
  display: block;
}

/* Slides */
.hero-slide {
  display: none;
}

.hero-slide-active {
  display: block;
}

/* Navigationspilar */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.hero-nav-prev {
  left: 1rem;
}

.hero-nav-next {
  right: 1rem;
}

.hero-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}