header {
  box-sizing: border-box; /* Padding og border regnes inn i elementets totale bredde */
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

h1{
  margin: 0px;
}

header {
  background-color: #4a72b8; /* Setter bakgrunnsfarge på headeren */
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* Skrifttype */
  font-size: 17px;
  color: white; /* Setter tekstfarge til hvit */
  min-height: 100px; /* Minimum høyde på headeren */
  height: auto; /* Høyden tilpasses innholdet */
  padding: 0 20px; /* Horisontal padding på 20px, ingen vertikal padding */
  width: 100%; /* Headeren fyller hele bredden */
  display: flex; /* Gjør headeren til en flex-container for enkel layout */
  align-items: center; /* Sentrerer elementene vertikalt i headeren */
  justify-content: flex-start; /* Plasserer elementene mot starten (venstre) horisontalt */
  position: relative;
}

.Logo {
  margin-left: auto; /* Flytter logo til høyre i headeren */
  display: flex; /* Gjør logo-containeren til flex-container */
  align-items: center; /* Sentrerer logoen vertikalt */
}

/* Standard: bildet vises 
.skjul-paa-mobil {
    display: block;
}

/* Når skjermen er 600px eller mindre */ /*@media (max-width: 1080px) {
    .skjul-paa-mobil {
        display: none;
        margin-left: auto; /* Flytter logo til høyre i headeren */ /*
        display: flex; /* Gjør logo-containeren til flex-container */ /*
        align-items: center; /* Sentrerer logoen vertikalt */

/*
@media (min-width: 1081px) { 
    .skjul-paa-mobil {
        width: auto;
        height: 100px;
        margin-left: auto; /* Flytter logo til høyre i headeren */ /*
        display: flex; /* Gjør logo-containeren til flex-container */ /*
       align-items: center; /* Sentrerer logoen vertikalt */

    

.Logo img {
  height: 100px; /* Setter høyde på logo */
  width: auto; /* Bredden justeres proporsjonalt */
}
body {
  margin: 0; /* Fjerner standard margin */
  padding: 0; /* Fjerner standard padding */
}
.meny {
  background-color: #4a72b8; /* Bakgrunnsfarge på menyen */
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* Skrifttype */
}

.meny ul {
  list-style: none; /* Fjerner punktmerking på listen */
  margin: 0; /* Fjerner margin */
  padding: 0; /* Fjerner padding */
  display: flex; /* Gjør listen til horisontal flex-container */
}

.meny li {
  margin-left: 10px; /* Avstand mellom meny-elementene */
}

.meny a {
  display: block; /* Gjør lenkene til blokk-elementer */
  padding: 15px 20px; /* Legger padding inni lenkene */
  color: white; /* Tekstfarge */
  text-decoration: none; /* Fjerner understrek */
}

.meny a:hover {
  background-color: #819db8; /* Endrer bakgrunn når musen hovrer over lenken */
}


.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 15px;
}

.hamburger span {
  display: block;
  width: 28px;
  height: 3px;
  margin: 6px 0;
  background-color: white;
}




@media (max-width: 768px) {

  @media (max-width: 768px) {

  .Logo {
    display: none;
  }

  #bunnlogo {
    display: none !important;
  }

}}

  /* Vis hamburger */
  .hamburger {
    display: block;
  }

  /* Skjul vanlig meny */
    .meny {
    display: none;
    width: 100%;
    background-color: #4a72b8;
    position: absolute;
    top: 100%;          /* rett under header */
    left: 0;
    width: 100%;
    background-color: #4a72b8;
    z-index: 9999;

    display: none;      /* fjernes fra layout */
  
  }
  /* Når menyen er aktiv */
  .meny.active {
    display: block;
  }

  .meny ul {
    flex-direction: column;
  }

  .meny li {
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.2);
  }

  .meny a {
    padding: 15px;
    text-align: center;
  }

  /* Gjør header mer kompakt */
  header {
    flex-wrap: wrap;
  }

  .Logo {
    margin-left: auto;
  }


















.container {
  position: relative; /* Gjør det mulig å plassere elementer absolutt inni */
  width: 100%; /* Fyller hele bredden */
  height: 400px; /* Setter høyde på container */
  overflow: hidden; /* Skjuler innhold som går utenfor */
}

.container img {
  width: 100%; /* Bildet fyller hele bredden */
  height: 100%; /* Bildet fyller hele høyden */
  object-fit: cover; /* Bildet dekker hele containeren uten å strekke */
  position: absolute; /* Plasserer bildet absolutt */
  top: 0; /* Starter øverst */
  left: 0; /* Starter venstre */
  z-index: -1; /* Legger bildet bak annet innhold */
}

.container p {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* Skrifttype */
  position: relative; /* Relativ posisjon */
  color: white; /* Tekstfarge hvit */
  text-align: center; /* Sentrerer horisontalt */
  font-size: 1.5rem; /* Størrelse på brødtekst */
  margin-top: 10px; /* Avstand fra forrige element */
  font-size: 40px;
}

.container { object-fit: cover; /* Bildet dekker hele containeren uten å strekke */ 
  position: relative; /* Gjør det mulig å plassere elementer absolutt */ 
  width: 100%; /* Fyller hele bredden */ 
  height: auto; /* Høyden tilpasses innholdet */ 
  overflow: hidden; /* Skjuler innhold som går utenfor */ }


#innhold {
  display: block;          /* fjernet grid for video-box */
  border: 7px solid #4a72b8;
  width: 75%;
  max-width: none;
  margin: 35px auto 0 auto; /* topp, horisontal sentrering */
  object-fit: cover;
  align-items: center;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#video-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 format */
  height: 0;
}

#video-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

#video-box video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* fyller rammen pent */
   width: calc(100% + 1px);
}







#boks {
  display: grid; /* Lager grid */
  grid-template-columns: 1fr; /* Én kolonne */
  gap: 40px; /* Avstand mellom elementene */
  margin: 50px auto; /* Sentrerer horisontalt og gir vertikal margin */
  max-width: 73%; /* Maks bredde */
  align-items: center; /* Sentrerer innhold vertikalt i cellene */
  justify-items: center; /* Sentrerer innhold horisontalt i cellene */
  background-color: #c6c6c6; /* Bakgrunnsfarge */
  border: 7px solid #4a72b8; /* Ramme */
  text-align: center; /* Sentrerer tekst horisontalt */
  font-size: 30px; /* Tekststørrelse */
  padding: 20px; /* Padding inni boksen */
  min-height: 100px; /* Minimum høyde */
  font-size: 50px;
}

#boks a:hover {
  background-color: #819db8; /* Bakgrunn ved hover på lenker */
}

footer {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 17px;
  margin-top: 50px;
  background-color: #819db8;
  color: #ffffff;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;

  padding: 30px 30px;
  gap: 0px; /* tettere mellom kolonnene */

  text-align: center;
}

/* Lister */
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* VENSTRE */
.bunnvenstre {
  display: flex;
  justify-content: flex-start; /* Endret fra center */
  align-items: center;
}

/* LOGO */
#bunnlogo {
  display: flex;
  justify-content: center; /* holder logoen sentrert */
  align-items: center;
}

#bunnlogo img {
  height: 100px;   /* større, men fortsatt kontrollert */
  width: auto;
  display: block;
}



/* HØYRE */
.bunnhøyre {
  display: flex;
  justify-content: flex-end; /* Endret fra center */
  align-items: center;
}