/**
 * 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;
}

main {
  color: var(--text);
  background-color: var(--backgr);
}

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

 html{
  scroll-behavior: smooth; /* Aktivere smooth scroll, så navigationen sker glidende */
 }

/* Header/burgermenu styling start */

.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: -10px; /* Lidt margin for at justere positionen */
}

#sprog{
  margin-right: 50px; /* Giver lidt margin til højre for sprogbilledet */
}

.burger-menu {
  display: flex; /* Brug flexbox for at arrangere de tre linjer */
  flex-direction: column;  /* Gør linjerne stakket vertikalt */
  gap: 5px; /* Lægger lidt afstand mellem linjerne */
  cursor: pointer; /* Gør ikonet klikbart */
  margin-top: 40px; /* Lidt afstand til toppen */
  margin-right: 10px; /* Lidt afstand til højre */
  margin-bottom: 10px; /* Lidt afstand til bunden */
  padding-right: 20px; /* Lidt ekstra plads til højre */
  z-index: 1001; /* Sørger for at ikonet er synligt over andre elementer */
}

.burger-menu span {
  width: 30px; /* Bredden på linjerne */
  height: 3px; /* Højden på linjerne */
  background: var(--text); /* Linjerne bliver sorte */
  border-radius: 2px; /* 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: 5px; /* Lidt afstand til toppen */
  right: 0; /* Menuen placeres til højre */
  height: 100vh; /* Menuen fylder hele højden af skærmen */
  background: transparent; /* Baggrundstransparent */
  flex-direction: column; /* Menuen bliver opstillet vertikalt */
  align-items: flex-end; /* Elementerne i menuen justeres til højre */
  padding: 20px; /* Lidt indvendig afstand */
  margin-top: 60px; /* Placer menuen lidt længere ned */
  margin-right: 20px; /* Afstand til højre kant */
  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: 18px;
  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); 
}

section {
  height: 100vh; /* Gør hver sektion så høj som skærmen */
  display: flex; /* Brug flexbox til at arrangere indholdet */
}
/* Header/burgermenu styling slut */

/* Hero styling start */

#section1{
  height: 50vh; /* Sætter højden på hero sektionen */
  display: flex; /* Brug flexbox til at arrangere indholdet */
}

.video-container {
  width: auto; /* Automatisk bredde */
  overflow: hidden; /* Skjuler overskydende del af videoen */
  position: relative; /* For at kunne bruge positionering i containeren */
  display: flex;
}

.hero-video {
  object-fit: cover; /* Sørger for at videoen dækker hele containeren uden at blive forvrænget */
  object-position: center center; /* Centrerer videoen */
  width: 100%;
}

.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: 100px;
}

#under-titel{
  font-size: 40px;
  font-family: "railroad-gothic-atf", sans-serif;
}

.button1{
  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;
}

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

/* Hero styling slut */

/* Hvorfor Return It sektion styling start */

#section2{
  height: 60vh; /* Sætter højden på sektionen */
  margin-bottom: 100px;
}

.hvorfor-returnit-container{
  width:100%;
  margin:auto;
}

.hvorfor-returnit-intro{
  margin-bottom: 50px; /* Margin nederst */
  margin:auto;
  text-align: center;
  width:750px;
}

#hvorfor-returnit-titel{
  font-family: "railroad-gothic-atf", sans-serif;
  font-size: 40px;
  color: var(--darkblue);
  margin-top: 50px;
  margin-bottom: 10px;
}

.ikon-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
}

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

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

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

/* Hvorfor Return It sektion styling slut */

#divider{
  display: flex;
  width: 100%;
  margin-bottom: 100px;
  margin-top: -60px;
}

/* Infografik styling start */

#section3{
display: flex;
flex-direction: column;
}

.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: 355px;
  margin-top: -50px ;
}

/* Container som centrerer cirklen */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(-50px); 
  margin-right: -50px;
}

.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: 52%;
  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 styling slut */

/* Return It i tal sektion styling start */

#section4{
  height: 50vh;
  background-image: url("/images/data-background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 410px;
  justify-content: center;
  margin-bottom: -120px;
  margin-top: 50px;
}

.data-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-left: 150px;
  margin-right: 150px;
  margin-bottom: 80px;
}

.data-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
}

.data-text{
  text-align: center;
  z-index: 10;
}

/* Return It i tal sektion 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%;
  height: 2550px; 
  background-image: url('../images/baggrund_bundsektion.webp'); 
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: top center; 
}

.bundsektion-wrapper {
  max-width: 1100px;
  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; 
}

.grafik-billeder {
  display: flex;
  flex-direction: column;
  gap: 200px; 
  margin: 0 auto; 
  margin-top: 60px;
}

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

/* 
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: 250px;
  height: auto;
  margin-left: auto;
  animation-delay: 0s; /* Starter med det samme */
}

/* Champagneglas: Kort forsinkelse */
.champagneglas {
  max-width: 450px;
  height: auto;
  margin-top: -10px;
  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 {
  max-width: 550px; 
  margin-left: auto; 
  padding: 5px;
}

.mellemrubrik-wrapper h3 {
  font-size: 25px;
  color: #5C91A4;
  margin-bottom: 10px;
}

.mellemrubrik-wrapper p {
  font-size: 20px;
  color: #FFFFFF;
  line-height: 1.5;
}

.nederste-mellemrubrik {
  margin-top: 100px;
  font-size: 20px;
  color: #FFFFFF;
  line-height: 1.5;
}

.nederste-mellemrubrik ul {
  margin-top: -20px; 
  padding-left: 20px; 
  font-family: "richmond-text", sans-serif;
}

.slut-overskrift {
  font-size: 25px;
  color: #5C91A4;
  margin-bottom: 10px;
}

.slut-tekst {
  font-size: 20px;
  color: #FFFFFF;
  line-height: 1.5;  
}
.bundsektion-sluttekst .button {
  display: block;
  margin: 0 auto;
  width: fit-content; 
  margin-top: 100px;
  font-family: "railroad-gothic-atf", sans-serif;
  padding: 25px 35px;
  background-color: #BEE3E7;
  color: #173A24;
  border-radius: 50px; 
  text-decoration: none;
  font-size: 20px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
/*Genanvendelse sektion styling Slut*/

/* Footer styling start */
.footer-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-left: 10px ;
  margin-right: 10px;
  margin-top: 1730px;
}

.footer-info{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: "railroad-gothic-atf", sans-serif;
  color: var(--darkblue);
}

.footer-logo-copyright{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "railroad-gothic-atf", sans-serif;
  color: var(--darkblue);
}

#footer-logo{
  height: 100px;
  width: 100px;
}

#faq{
  font-family: "railroad-gothic-atf", sans-serif;
  color: var(--darkblue);
}
/* Footer styling slut */