.headerbolgen {
  min-height: 40vh; /* Gir nok plass til innholdet */
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(225, 239, 249, 0.6));
  position: relative;
  padding-bottom: 100px;
  display: flex; /* Aktiverer flexbox */
  flex-direction: column; /* Plasserer innholdet vertikalt */
  align-items: center; /* Sentrerer innholdet horisontalt */
  justify-content: center; /* Sentrerer innholdet vertikalt */
  overflow: hidden;
}
 

.content {
  position: relative;
  z-index: 5;
  width: 60%;
  margin: 0 auto;
  padding-top: 24px; /* Fjern unødvendig ekstrarom */
  padding-bottom: 24px; 
  line-height: 2; /* God linjeavstand */
}


.content h2 {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  /*font-size: 22px; /* Passer til 80% bredde */
  color: #183866;
  font-family: Arial, sans-serif;
  font-weight: normal;
  margin: 0;
  line-height: 1.5; /* Mindre linjeavstand */
}



.wavef { 
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1; /* Lavere enn innholdet */
  transform: translateY(1px); /* Nudges the wave by 1px to hide the artifact */
  background-color: transparent; /* Ensure no overlay affects the visual */
}








@media (max-width: 1024px) {
  .headerbolgen {
    min-height: 50vh; /* Reduserer høyden for bedre tilpasning */
    padding-bottom: 100px; /* Justerer luft under */
    padding-top: 24px;
  }

  .content {
    width: 85%; /* Øker bredden */
    margin-top: 16px; /* Justerer avstand */
    line-height: 1.2; /* Øker lesbarheten */
      margin: 0 auto 16px auto /* Sentraliserer boksen og legger margin under var auto*/
  }

  .content h2 {
    font-size: 20px; /* Reduserer skriftstørrelsen */
  }

  .content h3 {
    font-size: 16px;
    margin-top: 24px; /* Justerer avstand */
  }
  

}

@media (max-width: 768px) {

  .headerbolgen {
    min-height: 45vh; /* Reduserer høyden for små skjermer */
    padding-bottom: 80px; /* Justerer luft under */
    padding-top: 28px; /* Reduserer padding for bedre plassutnyttelse */
    margin-bottom: 32px;
  }

  .content {
    width: 85%; /* Øker bredden til 95% for mer plass */
    margin-top: 8px; /* Reduserer margin for tettere layout */
    line-height: 1.3; /* Bedre lesbarhet på små skjermer */
  }

  .content h2 {
    font-size: 18px; /* Reduserer skriftstørrelsen på tittel */
  }

  .content h3 {
    font-size: 16px; /* Reduserer skriftstørrelsen på undertittel */
    margin-top: 24px; /* Justerer margin for bedre avstand */
    line-height:1.3;
  }

  .read-more a {
    font-size: 16px; /* Reduserer fontstørrelsen på les mer-lenken */
  }

  .read-more img {
    width: 10px;
    height: 10px;
    margin-left: 5px; /* Reduserer avstanden mellom teksten og ikonet */
  }
}