.headerbolge {
  height: 110vh; /* Full skjermhøyde */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(225, 239, 249, 0.6));
  /*background: linear-gradient(to bottom, #FFFFFF, #E1EFF9); /* Gradient bakgrunn */
  position: relative; /* For å plassere bølgen */
  padding-bottom: 250px;
  padding-top:50px;
    overflow: hidden; /* Masks any excess rendering issues */
} 

.wave { 
  position: absolute;
  bottom: 0; /* Bølgen vises nederst */
  width: 100%; /* Full bredde */ 
}


.level-headercontent{
  position: absolute; /* Plasserer hele teksten oppå videoen */
  top: 25%; /* Juster plassering i headeren */
  left: 10%; /* Plassering fra venstre kant */ 
  width: 80%; /* Kontrollerer bredden for hele tekstblokken */
  text-align: left; /* Justerer tekst til venstre */
  z-index: 5; /* Sørger for at teksten vises foran videoen */
}

.level-headercontent h1, h2{
  font-family:arial, sans-serif;
  color:#183866;
}

.level-headercontent h1{ 
font-size: clamp(1.25rem, 2vw + 1rem, 1.75rem);

  margin-bottom: 8px;
} 

.level-headercontent h2{
  font-weight:normal;
font-size: clamp(1rem, 2vw + 1rem, 1.125rem);
  width:80%;
}


/*
.niva p {
    color: #183866;
    font-size: 14px; /* Størrelse på teksten */
    font-weight: bold; /* Gjør teksten fet */
    margin: 0; /* Fjern standard margin */
} 


.niva {
    width: 100%; /* Får containeren til å skalere med skjermstørrelsen */
    max-width: 400px; /* Setter en maksimal bredde for containeren */
    margin: 0 auto; /* Sentrerer containeren horisontalt */
}

.niva img {
    margin-bottom: 8px;
    width: 7%; /* Bildet skal skaleres til 100% av containerens bredde */
    height: auto; /* Bevarer størrelsesforholdet */
    object-fit: contain; /* Sørger for at bildet ikke blir deformert */
}




/* Tematikk ikoner */ 


.tematikk_ikoner {
    display: flex; /* Aktiver flex for layout */
    width: 100%; /* Sørg for full bredde på containeren */
  justify-content: space-between; 
 
}

.ikon {
    flex: 1; /* Gjør boksene fleksible innenfor containeren */
    margin: 0 24px; /* Avstand mellom boksene */
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    width: 33%; /* Hver boks tar opp 33% av containerens bredde */
}

.ikon img {
    width: 20%; /* Bildet tar opp 80% av boksen */
    height: auto; /* Bevarer størrelsesforholdet */
    margin-bottom: 10px; /* Avstand til teksten */
}


.ikon h3 {
    color: #183866; /* Mørk blå tekst */
    font-size: clamp(1rem, 2vw + 1rem, 1.125rem);
    margin: 10px 0;
    font-family:arial, sans-serif; 
    font-weight: bold; 
}

.ikon p {
   font-size: clamp(0.75rem, 2vw + 1rem, 0.875rem);
   font-family: arial, sans-serif; 
   color: #183866; /* Mørk blå tekst */
   word-spacing: normal; /* Reduserer mellomrom mellom ordene */
  letter-spacing: 0.5px; /* Justerer avstand mellom bokstavene */
  max-width: 100%; /* Justerer bredden på hver tekstblokk for å unngå for store mellomrom */
}





  .wave {
        transform: translateY(1px); /* Nudges the wave by 1px to hide the artifact */
        background-color: transparent; /* Ensure no overlay affects the visual */
    }
   
  



/* Container for logo og ressurs-knapp */
.logo-ress-container {
  position: absolute; /* Plasserer containeren i forhold til header/videoen */
  top: 20px;
  left: 0;
  width: 100%; /* Full bredde for fleksibilitet */
  z-index: 10; /* Sørger for at den vises foran andre elementer */
  display: flex; /* Bruk flexbox for å justere innholdet */
  justify-content: space-between; /* Plasserer elementer på hver sin side */
  align-items: center; /* Vertikal sentrering */
  padding: 0 20px; /* Litt innrykk fra kanten */

}


/* Logo-styling */
.logo {
  display: inline-block;
  margin: 28px;
  padding-left: 24px;
  width: 60%; 
}

.logo img {
   width: 50%;
  height: auto; 
  display: block;
  opacity: 1;
}




/*HAMBURGERMENY*/
/* Hamburger-ikonet – skjult på desktop, vises for 1024px og ned */
.hamburger-icon {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 8px;
  width: 10%; 
  margin-right: 24px; 
}

.hamburger-icon span {
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 100px; 
  background: #183866;
  transition: all 0.3s ease;
}


/* Fullskjerms overlay for mobilmeny */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: linear-gradient(to bottom, #ffffff, #BAE5FB);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  font-family: arial, sans-serif; 
  pointer-events: none;  /* Ingen interaksjon når overlayet er skjult */
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* Overlayet fanger nå alle klikk */
}


.mobile-menu-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-menu-content nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #183866;
}

.mobile-menu-content nav ul li {
  margin: 20px 0;
}

.mobile-menu-content nav ul li a {
  font-size: 1.5rem;
  color: #183866;
  font-weight: 600; 
  text-decoration: none;
}

/* Lukke-ikon (animeres ved hover) */
.menu-close {
  position: absolute;
  top: 48px;
  right: 65px;  
  font-size: 5rem;
  color: #183866;
  cursor: pointer; 
  transition: transform 0.3s ease;
}

.menu-close:hover {
  transform: rotate(90deg);
}











/* For iPad (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .hamburger-icon {
    display: flex;
  }
 
.logo img {
        width: 80%;
        height: auto;
   max-width: 400px; 
    }
  
  .logo{
    width: 70%; 
  }
  
  
  .logo-ress-container {
  margin: 0px; 

} 
 

  

  .tematikk_ikoner {
    display: flex; /* Aktiver flex for layout */
    width: 100%; /* Sørg for full bredde på containeren */
        font-family: arial, sans-serif;
}

  
.ikon {
    flex: 1; /* Gjør boksene fleksible innenfor containeren */
    max-width: 400px; /* Begrenser maksimal bredde */
    margin: 0 16px; /* Avstand mellom boksene hvis gap ikke fungerer */
    margin-top:32px;
}
  
  .ikon h3 {
    font-size: 1rem;
    margin: 8px 0;
}
  
  .ikon p {
    font-size: 0.75rem;
}
  
  
  
  .headerbolge {
  height: 80vh; /* Full skjermhøyde */
  padding-bottom: 0px;
  padding-top:0px;
}
  
 
  .wave {
        transform: translateY(1px); /* Nudges the wave by 1px to hide the artifact */
        background-color: transparent; /* Ensure no overlay affects the visual */
    }
   
  
 .level-headercontent{
   top:25%;
   
  }
  
  .level-headercontent h2{
  width:100%;
}
 
 
  
}

 

/* For mobil (maks 768px) */
@media screen and (max-width: 768px) {

    .logo img {
    width: 100%;
  }
  
  
  .logo {
  display: inline-block;
  margin: 16px;
  padding-left: 0px;
  width: 100%; 
  }
  
    
 .level-headercontent{
   top:15%;
   margin-top:16px;
  } 
  
    
  .menu-close {
  top: 15px;
  right: 24px;  
  font-size: 4rem;
}
  
  .mobile-menu-overlay {
    padding: 16px; 
  }
  
  
  .tematikk_ikoner {
    display: flex; /* Aktiverer fleksibel layout */
    flex-direction: column; /* Plasserer ikonene under hverandre */
    align-items: center; /* Sentraliser ikonene horisontalt */
    gap: 16px; /* Avstand mellom ikonene */
    margin-top: 32px; /* Luft over */
    margin-bottom: 32px; /* Luft under */
    margin-left:0px;
    padding-left:0px;
  
  }

  .ikon {
    width: 100%; /* Sikrer full bredde på små skjermer */
    max-width: 350px; /* Begrens bredde for bedre synlighet */
    margin: 0; /* Sentraliserer boksen */
    padding-left:0;
  }

  .ikon img {
    width: 50px; /* Reduserer størrelsen på ikonet for små skjermer */
    height: 50px; /* Justerer høyden på ikonet */
    margin-bottom: 8px; /* Avstand til teksten */
  }

  .ikon h3 {
    font-size: 1rem; /* Reduserer overskriftsstørrelsen */
    margin: 8px 0; /* Justerer avstand over og under */
  }

  .ikon p {
    font-size:  0.875rem; /* Bevarer lesbar tekststørrelse */
  }
  

  
  .niva img {
    margin-bottom: 8px;
    width: 70px; /* Dynamisk bredde basert på innhold */
  height: auto; 
} 

    
  .headerbolge {
  height: 1100px;
   
}

  .level-headercontent h1{
  font-size:1.5rem;
  margin-bottom: 8px;
}

.level-headercontent h2{
  font-weight:normal;
  font-size:1.125rem;
  width:100%;
}
  

}


}