/**
 * file: css/css.css
 * purpose: styling
 **/

/* Define variables in the :root */
:root {
  --backgr: #FFFFFF;
  --text: #161616;
  --darkgreen: #173A24;
  --lightgreen: #BBC397;
  --logogreen: #29633B;
  --darkblue: #5C91A4;
  --lightblue: #BEE3E7;
}

h1, h2 {
  font-family: "railroad-gothic-atf", sans-serif;
  font-weight: 600;
  font-style: normal;
}

h3, h4, h5, h6 {
  font-family: Verdana, sans-serif;
}

p {
  font-family: "richmond-text", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body{
  margin: 0; /* Sætter marginen til 0 for at fjerne standardafstand i siderne af sitet */
 }

.header{
  display: flex; /* Bruger flexbox for at arrangere elementerne */
  flex-direction: row; /* Lægger elementerne i rækkefølge horisontalt */
  justify-content: space-between; /* Fordeler pladsen mellem elementerne */
  align-items: center;/* Centrerer elementerne vertikalt */
  background: transparent; /* Gør baggrunden transparent */
  background-color: transparent; /* Baggrundsfarven er transparent */
  position:fixed;
  z-index: 100;
  width:100%;
}

.menu-placement{
  display: flex; /* Bruger flexbox for at arrangere elementerne */
  flex-direction: row; /* Gør så elementerne ligger horisontalt */
  margin-top: 0.1rem; /* Lidt margin for at justere positionen */
  align-items: center;
  margin-right: 0.3rem;
 
}

.logo {
  width: 35%;
  height: auto;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
}

#sprog{
  margin-right: 0.5rem; /* Giver lidt margin til højre for sprogbilledet */
  width: 1.2rem;
  height: 1.2rem;
}

.burger-menu {
  display: flex; /* Brug flexbox for at arrangere de tre linjer */
  flex-direction: column;  /* Gør linjerne stakket vertikalt */
  gap: 0.2rem; /* Lægger lidt afstand mellem linjerne */
  cursor: pointer; /* Gør ikonet klikbart */
}

.burger-menu span {
  width: 1.5rem; /* Bredden på linjerne */
  height: 0.17rem; /* Højden på linjerne */
  background: var(--text); /* Linjerne bliver sorte */
  border-radius: 0.8rem; /* Afrunder hjørnerne på linjerne */
  transition: 0.3s; /* Gør overgangene glidende */
}

.menu {
  display: none; /* Menuen er skjult */
  position: fixed; /* Menuen er fastlåst i positionen */
  top: 0.2rem; /* Lidt afstand til toppen */
  right: 0; /* Menuen placeres til højre */
  background: transparent; /* Baggrundstransparent */
  flex-direction: column; /* Menuen bliver opstillet vertikalt */
  align-items: flex-end; /* Elementerne i menuen justeres til højre */
  padding: 0.5rem; /* Lidt indvendig afstand */
  margin-top: 30px; /* Placer menuen lidt længere ned */
  gap: 10px; /* Afstand mellem menu punkterne */
  list-style: none; /* Fjern punkttegn fra listen */
  z-index: 1000; /* Sørger for at menuen er synlig over andre elementer */
}

.menu.open {
  display: flex; /* Menuen bliver synlig */
}

/* Menu Items */
.menu a {
  font-size: 12px;
  font-family: Verdana, sans-serif;
  font-weight: 700;
  color: var(--text);
  cursor: pointer; /* Gør linkene klikbare */
  text-decoration: none; /* Remove underline */
  display: block; /* Gør den klikbare boks til linkene større */
  transition: transform 0.3s, color 0.3s; /* Gør animationen glidende */
}

/* Hover effekt (når musen er over linkene) */
.menu a:hover{
  color: var(--darkblue); /* Ændrer farven til mørk blå ved hover */
  transform: scale(1.3); /* Forstørrer teksten lidt ved hover */
}

/* Aktiv tilstand (når linket er blevet klikket) */
.menu a:active {
  transform: scale(1.2); /* Forstørrer teksten lidt, når den er klikket */
  color: var(--darkblue); 
}

/* Header/burgermenu styling slut */

/* Hero styling start */

#section1{
  display: flex; /* Brug flexbox til at arrangere indholdet */
}

#section5 {
  margin-top: -193px;
  margin-left: -5px;
}

.video-container {
  position: relative;
  width: 100vw; /* Full viewport width */
  height: 80vh; /* Static height */
  overflow: hidden; /* Hide overflow */
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-video {
  position: absolute;
  height: 100%; /* Match container height */
  width: auto; /* Maintain aspect ratio */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.hero-intro{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-text{
  position: absolute; /* Positionerer teksten så den ikke rykker sig i forhold til containeren */
  color: white;
  text-align:center;
  align-content: center;
}

#titel{
  font-size: 3rem;
}

#under-titel{
  font-size: 1rem;
  font-family: "railroad-gothic-atf", sans-serif;
  margin-top: -1rem;
}

.button1{
  display: flex;
  justify-self: center;
  align-self: center;
  border: none; /* Fjerner kanten */
  padding: 0.8rem 1.8rem;
  padding-top: 16px;
  border-radius: 30px; /* Gør hjørnerne runde */
  color: var(--backgr);
  background-color: var(--darkblue);
  font-family: "railroad-gothic-atf", sans-serif;
  transition-duration: 0.4s; /* Glidende overgang */
  cursor: pointer;
  
}

.button1:hover{
  color: var(--text); /* Skifter tekstfarven ved hover */
  background-color: var(--lightblue); /* Skifter baggrundsfarven ved hover */
}
/* Hero styling slut */


#section2 {
  margin-top: -0.5rem;
}

#hvorfor-returnit-titel{
  font-family: "railroad-gothic-atf", sans-serif;
  font-size: 2rem;
  color: var(--darkblue); 
}

#hvorfor-returnit-undertekst{
font-size: 0.8rem;
margin-top: -2rem;
padding: 1rem;
}

.hvorfor-returnit-container{
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(-50px); 
  margin-right: -25px;
}


.circle {
  width: 600px; 
  height: 800px;
  position: relative; 
}

/* Placering af ikonerne cirkelært */
.process-step {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform-origin: center;
  transform: translate(-50%, -50%)
             rotate(calc(var(--angle) * 1deg))
             translate(0, -300px) 
             rotate(calc(-1 * var(--angle) * 1deg));
  transition: transform 0.5s;
}

.process-step img {
  width: 80px; 
  height: 80px;
  object-fit: contain;
  margin-bottom: 5px;

}

.process-step img[src*="afhentning.webp"] {
  width: 190px; 
  height: 120px;
  margin-bottom: -15px;
}

.process-step img[src*="vask_omsmeltning.webp"] {
  width: 120px; 
  height: 100px;
}

.process-step figcaption {
  margin-top: 0px;
  font-size: 16px;
  font-family: Verdana, sans-serif;
  color: #173A24;
  font-weight: bolder;
  line-height: 1.2;
  text-align: center;
}

/* 
Tilføjer en hover-effekt til elementer med klassen "process-step". 
Når brugeren holder musen over et ikon:
Elementet forskydes og roteres tilbage til sin oprindelige vinkel for at bevare retningen.
Elementet flyttes længere væk fra midten (fra -350px til -370px) for at skabe en hæve-effekt.
Elementet skaleres op til 110% af sin oprindelige størrelse (scale(1.1)) for at fremhæve det.
Overgangen sker glidende med en varighed på 0.5 sekunder.
*/
.process-step:hover {
  transform: translate(-50%, -50%)
             rotate(calc(var(--angle) * 1deg))
             translate(0, -320px)
             rotate(calc(-1 * var(--angle) * 1deg))
             scale(1.1); /* Hover-effekt */
  transition: transform 0.5s;
}
.process-step.active img {
  transform: scale(1.2); /* Forstøre billedet ved det valgte ikon */
  transition: transform 0.5s; /* Giver en glidende overgang */
  margin-bottom: 10px;
}
 
/* 
"opacity: 1" gør elementet synligt som standard.
En transition på 0.3 sekunder med "ease-in-out" sørger for en glidende overgang for ændringer

Når klassen "fade" tilføjes, sættes "opacity" til 0, hvilket gør elementet usynligt (fade-out-effekt).
*/
.process-details {
  position: absolute;
  top: 185%;
  left: 53%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #173A24;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
  opacity: 1; /* Starter synlig */
  transition: opacity 0.3s ease-in-out; /* Glidende overgang */
}
.process-details.fade {
  opacity: 0; /* Fade out når klassen "fade" tilføjes */
}


#process-title {
  font-family: Verdana, sans-serif;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

#process-description {
  font-family: "richmond-text", sans-serif;
  margin: 10px 0 0; 
  line-height: 1.5;
  color: #173A24;
  font-size: 15px; 
}

/* 
Skjuler alle pile som standard og sørger for, at de kun bliver synlige, når klassen "active" tilføjes. 
Pilen placeres, roteres og flyttes væk fra midten ved hjælp af "transform". 
En overgang på 0.5 sekunder gør, at pilen vises på en "glidende" måde.
*/
.pil {
  display: none; 
  position: absolute;
  width: 70px;
  height: 70px;
  background-image: url('../images/pil.webp'); 
  background-size: contain;
  background-repeat: no-repeat;
  top: 42%;
  left: 51.6%;
  transform-origin: center bottom;
  transform: translate(-42%, -51.6%)
             rotate(calc(var(--angle) * 1deg))
             translate(0, -250px);
  transition: all 0.5s ease-in-out;
}

/* Når pilen har "active"-klassen, vises den */
.pil.active {
  display: block; /* Gør pilen synlig */
}

.process-tekst-knap {
  text-align: center; /* Centrerer alt */
  color: #173A24; 
}

.process-tekst-knap h3 {
  font-size: 20px;
  font-weight: bold;
  
}

.process-tekst-knap .button {
display: inline-block;
font-family: "railroad-gothic-atf", sans-serif;
padding: 25px 35px; 
background-color: #5C91A4;
color: #ffffff;
border-radius: 50px; 
text-decoration: none;
font-size: 20px;
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.process-tekst-knap .button:hover,
.bundsektion-sluttekst .button:hover {
  transform: scale(1.1);
}

/* Infografik Desktop styling slut */

/* Return It i tal sektion styling start */


.ikon-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.ikon-container-tekst{
  margin-top: -10px;
  width: 210px;
}

.ikon-container-tekst h5{
  font-size: 0.7rem;
}

.ikon-container-tekst p{
  font-size: 0.7rem;
  margin-top: -0.85rem;
}

.hvorfor-returnit-img{
  height: 100px;
  width: 100px;
}

#divider{
  width: 100%; /* Fleksibel bredde */
  height: 2rem;
  object-fit: cover; /* Bevarer proportioner uden forvrængning */
  display: block; /* Sørg for, at billedet ikke flyder ved siden af noget andet */
  margin: 0 auto; /* Centrerer billedet horisontalt */
  margin-top: 40px;
  margin-bottom: 60px;
}

.button2{
  display: flex;
  justify-self: center;
  align-self: center;
  border: none; /* Fjerner kanten */
  padding: 15px 30px;
  padding-top: 16px;
  border-radius: 30px; /* Gør hjørnerne runde */
  color: var(--backgr);
  background-color: var(--darkblue);
  font-family: "railroad-gothic-atf", sans-serif;
  font-size: large;
  transition-duration: 0.4s; /* Glidende overgang */
  cursor: pointer;
  margin-top: 2rem;
  margin-bottom: 40px;
}

.button2:hover{
  color: var(--text); /* Skifter tekstfarven ved hover */
  background-color: var(--lightblue); /* Skifter baggrundsfarven ved hover */
}

/* Return It i tal sektion styling slut */


/* Infografik Mobil styling start */

#infografik-titel{
  color: var(--darkblue);
  text-align: center;
}

.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* Skjul elementer udenfor containeren */
}

#section3-mobile {
  display:none;
  height: 900px;
}

.carousel {
  display: flex;
  transition: transform 0.3s ease; /* Smooth overgang */
}

.carousel-element {
  display: none; /* Skjul slides som ikke er aktive */
  text-align: center;
  font-size: 0.8rem;
  width: 100%;
}

.carousel-element.active {
  display: block; /* Vis kun den aktive slide */
}

img {
  width: auto;
  height: 9rem;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.carousel-dots .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: var(--lightblue); /* Ikke-aktiv prik */
  cursor: pointer;
}

.carousel-dots .dot.active {
  background-color: var(--darkblue); /* Aktiv prik */
}

.infografik-tekst{
  margin: 0 0.5rem;
}
/* Infografik styling slut */


/* Datasektion styling start */
#section4{
  width: 100%;
  height: auto;
  background-image: url("../images/data-background.png");
  background-size: cover; 
  background-repeat: no-repeat;
  object-fit: cover; /* Bevarer proportioner uden forvrængning */ 
}


.data-container{
  display: flex;
  flex-direction: column;
  padding-top:100px;
  padding-bottom:240px;
  margin-top: -70px;

}

.data-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: -30px;
}

.data-text{
  text-align: center;
  margin-top:-62px;
}

/* Datasektion styling slut */

/*Genanvendelse sektion styling Start*/

.fade-in {
  opacity: 0; 
  transform: translateY(50px); 
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.animate {
  opacity: 1; 
  transform: translateY(0); 
}
.bundsektion {
  width: 100%;
  background-image: url('../images/baggrund_bundsektion.webp'); 
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: top center; 
}

.bundsektion-wrapper {
  max-width: 100%;
  display: flex;
  flex-direction: column; 
}

.bundsektion-øverste-content {
  text-align: center;
  padding-top: 6rem; 
  margin: 1rem;
}

.overskrift-bundsektion {
  font-size: 2rem;
  color: var(--darkblue);
}

.underrubrik {
  font-size: 0.8rem;
  color: var(--backgr);
  line-height: 1.6;
}

.bundsektion-content {
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
}

.grafik-billeder {
  display: flex;
  flex-direction: column;
}

.grafik-billeder img {
  height: auto; /* Bevare proportionerne */
}


/* 
CSS-animationer giver mulighed for at animere elementer ved at ændre deres egenskaber over tid.
De består af to hoveddele:
keyframes og animationsegenskaber:
Keyframes bruges til at definere animationens trin, fra start til slut.
Procentdele (0% til 100%) angiver, hvordan elementets egenskaber skal ændre sig på forskellige tidspunkter.*/


/* 
Tilføjer en op-og-ned animation til elementer med klassen "animated-element". 
Animationen varer 2 sekunder, kører uendeligt og skifter retning ved hver gentagelse. 
".bestik" starter animationen med det samme (ingen forsinkelse).
".champagneglas" har en forsinkelse på 1 sekund for at skabe en forskudt effekt.
Keyframes "moveUpAndDown" styrer bevægelsen, hvor elementet flyttes 10px op og ned
*/

.animated-element {
  animation: moveUpAndDown 2s ease-in-out infinite alternate;
}

/* Bestikket: Ingen forsinkelse */
.bestik {
  max-width: 40%;
  height: auto;
  align-self: center;
  animation-delay: 0s; /* Starter med det samme */
}

/* Champagneglas: Kort forsinkelse */
.champagneglas {
  max-width: 50%;
  height: auto;
  align-self: center;
  animation-delay: 1s; /* Starter efter 1 sekund */
}

/* Keyframes for op-og-ned-bevægelse */
@keyframes moveUpAndDown {
  0% {
    transform: translateY(-10px); 
  }
  100% {
    transform: translateY(10px);
  }
}

.mellemrubrik-wrapper {
margin: 1rem;
}

.mellemrubrik-wrapper h3 {
  font-size: 2rem;
  color: var(--darkblue);
  margin-bottom: 1rem;
}

.mellemrubrik-wrapper p {
  font-size: 0.8rem;
  color: var(--backgr);
  line-height: 1.5;
}

.nederste-mellemrubrik {
  font-size: 0.8rem;
  color: var(--backgr);
  line-height: 1.5;
}

.nederste-mellemrubrik ul {
  font-family: "richmond-text", sans-serif;
}

#nederste-mellemrubrik-tekst{
  margin-top: -30px;
}

.slut-overskrift {
  font-size: 1.5rem;
  color: var(--darkblue);
  margin-bottom: 1rem;
}

.slut-tekst {
  font-size: 0.8rem;
  color: var(--backgr);
  line-height: 1.5;  
}
.bundsektion-sluttekst{
  display: block;
  margin: 1rem;
  font-family: "railroad-gothic-atf", sans-serif;
  color: var(--darkgreen);
}

.button3{
  display: flex;
  justify-self: center;
  align-self: center;
  border: none; /* Fjerner kanten */
  padding: 15px 30px;
  padding-top: 16px;
  border-radius: 30px; /* Gør hjørnerne runde */
  color: var(--text);
  background-color: var(--lightblue);
  font-family: "railroad-gothic-atf", sans-serif;
  font-size: large;
  transition-duration: 0.4s; /* Glidende overgang */
  cursor: pointer;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.button3:hover{
  color: var(--backgr); /* Skifter tekstfarven ved hover */
  background-color: var(--darkblue); /* Skifter baggrundsfarven ved hover */
}
/*Genanvendelse sektion styling Slut*/


/* Footer styling start */
.footer-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo{
width: 5rem;
height: auto;
margin-top: 2rem;
}

#footer-kontakt{
color: var(--darkblue);
}

#faq{
  text-decoration: none;
  color: var(--darkblue);
}

#faq:hover{
  color: var(--lightblue);
}

#copyright{
 color: var(--darkblue);
}
/* Footer styling slut */

.circle-header {
  text-align: center; 
  margin: 10px auto; 
  font-family: "railroad-gothic-atf", sans-serif; 
  font-weight: bold;
  font-size: 40px; 
  color: #5C91A4; 
  text-transform: uppercase; 
  max-width: 550px;
  line-height: 1; 
  margin-bottom: 370px;
  margin-top: 100px;
}

.champagneglas1 {
display: none;
}

.champagneglas2 {
  display: block;
  }

  ul{
    font-size: 13px;
    color: var(--backgr);
    font-family: "richmond-text", sans-serif;
    font-weight: 300;
  }


@media (min-width: 501px) {
  #section1 {
    display:block;
    width:100%; 
  }

  .video-container {
    width: 100%;
    height: 60vh;
    display:block;
  } 

  .hero-video {
    overflow:hidden;
    position: relative;
    width: 100%; /* Maintain aspect ratio */
    height:auto;
  }
  
  #divider{
    width: 100%;
    height: 150px;
    object-fit: contain;
  }

  .data-container{
    flex-direction: row;
    margin-bottom: 50px;
    padding-top: 150px;
    margin-top: 70px;
  }
  
  .data-text{
  max-width: 500px;
  font-size: 20px;
  }

.data-titel{
  margin-bottom: -10px;
  font-size: 20px;
  line-height: 20px;
}

.champagneglas2 {
display: none;
}


.champagneglas1 {
  display: block;
  }

  .menu a {
    font-size: 18px;
  }

  .menu {
    margin-top: 80px; /* Placer menuen lidt længere ned */
  }
  

}

@media (min-width: 724px) {
  

  #section3{
    display:none;
  }
  #section3-mobile {
    display:block;
  }
  
  #titel {
    font-size: 10rem;
  }

  #under-titel {
    font-size: 3rem;
  }

  .button1 {
    width: 270px;
    padding: 15px;
    align-self: center;
    justify-content: center;
    font-size: 25px;
    padding-top: 20px;
  }

  .logo {
    width: 100px;
  }

  .burger-menu {
    gap: 7px; /* Lægger lidt afstand mellem linjerne */
   
  }

  .burger-menu span {
    width: 50px; /* Bredden på linjerne */
    height: 5px; /* Højden på linjerne */
    margin-right: 10px;
  
  }

  #sprog {
    width: 40px;
    height: auto;
    margin-right: 10px;
    margin-bottom: -7px;
  }
 #hvorfor-returnit-titel {
  font-size: 75px;
  margin-top: 50px;
 }

 #hvorfor-returnit-undertekst {
  font-size: 30px;
  max-width: 1400px;
  justify-self: center;
  margin-top: -80px;
  line-height: 35px;
 }


 .hvorfor-returnit-ikoner{
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-around; /* Fordeler ikonerne */
  width:100%;
  margin:auto;
  margin-top: 35px;

}

.hvorfor-returnit-img{
  height: 200px;
  width: 200px;
}
.ikon-container-tekst h5{
  font-size: 20px;
  margin-top: 25px;
}

.ikon-container-tekst p{
  font-size: 20px;
  line-height: 20px;
  margin-top: -30px;
}

.ikon-container-tekst{
  margin-top: -10px;
  text-align: center;
  width: 300px;
}

.process-tekst-knap {
  text-align: center; /* Centrerer alt */
  color: #173A24; 
  font-size: 20px;
  font-weight: bold;
  margin-top: -40px;
}
.bundsektion-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; 
  gap: 50px;
}

.bundsektion-øverste-content {
  text-align: center;
  padding-top: 200px;
}

.overskrift-bundsektion {
  font-size: 40px;
  color: #5C91A4;
  font-weight: bold;
  margin-bottom: 20px;
}

.underrubrik {
  font-size: 25px;
  color: #FFFFFF;
  line-height: 1.6;
}

.bundsektion-content {
  display: flex; 
  flex-direction: row; 
  align-items: flex-start; 
  gap: 100px; 
}

.bundsektion-øverste-content h2{
font-size: 50px;
}

.mellemrubrik-wrapper h3{
  font-size: 25px;
}

.mellemrubrik-wrapper p{
font-size: 20px;
margin-top: -10px;
}

ul{
  font-size: 20px;
  color: var(--backgr);
  font-family: "richmond-text", sans-serif;
  font-weight: 300;
}

.slut-overskrift {
  font-size: 25px;
}

.slut-tekst {
  font-size: 20px;
  margin-top: -10px;
}

.bestik {
  max-width: 250px;
  margin-top: 50px;
}


.champagneglas1 {
  max-width: 500px;
  margin-top: 180px;
}


}

@media (min-width: 501px) and (max-width:840px) {
  .hero-video {
    width:170%;
  } 

}