/* Reset CSS */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Banner */
.banner {
  background-color: #313737;
  height: 110px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
}

.container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

/* Logo */
.logo {
  height: 50px;
  width: 250px;
  object-fit: contain;
}

/* Menu */
.menu {
  display: flex;
  align-items: center;
}

.menu-items {
  display: flex;
  gap: 20px;
  list-style: none;
}

.menu-items li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  transition: color 0.3s ease;
}

.menu-items li a:hover {
  color: #ff6347;
}

/* Skjul menu-checkbox som standard */
.menu-checkbox {
  display: none;
}

/* Hamburger-ikon styling */
.menu-toggle-label {
  display: none; /* Skjult på større skærme */
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
  position: absolute;
  right: 20px; /* Justér placering til højre */
  top: 50%; /* Centrer vertikalt i headeren */
  transform: translateY(-50%); /* Justering for præcis vertikal centrering */
}

.menu-toggle-label {
  display: none; /* Skjult på større skærme */
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
}

/* Content Section */
.content-section {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-image {
  width: 100%;
  height: auto;
  max-height: 800px;
  display: block;
  object-fit: cover;
}

.transparent-box {
  position: absolute;
  width: 560px; /* Standard bredde for desktop */
  max-width: 90%; /* Begræns bredde på mindre skærme */
  background-color: rgba(100, 100, 100, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Venstrejusteret tekst */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border-top: #cd3535 5px solid;
  border-bottom: #cd3535 5px solid;
  padding: 20px 40px;
  z-index: 1;
  left: 50px; /* Flyt boksen 50px fra venstre kant */
  top: 50%;
  transform: translateY(-50%); /* Juster lodret centrering */
}

.transparent-box h1 {
  font-size: 36px; /* Standard skriftstørrelse for desktop */
  color: #ffffff;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

/* Standard styling for teksten */
.transparent-box p {
  font-size: 20px; /* Standard skriftstørrelse */
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.4;
  text-align: left; /* Venstrejusteret tekst på desktop */
  white-space: normal; /* Tillader tekstombrydning */
}

.button-container {
  display: flex;
  gap: 15px; /* Afstand mellem knapper */
}

.btn {
  padding: 10px 20px;
  background-color: #313737;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px; /* Standard tekststørrelse */
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #ff6347;
}

.btn-secondary {
  background-color: #ffffff;
  color: #313737;
  border: 2px solid #313737;
}

.btn-secondary:hover {
  background-color: #313737;
  color: #ffffff;
}

/* Benefits Section */
.benefits-section {
  display: flex; /* Brug flexbox til centrering */
  justify-content: center; /* Centrer kassen horisontalt */
  align-items: center; /* Centrer kassen vertikalt */
  padding: 40px 20px;
  background-color: #f9f9f9;
}

.benefits-container {
  max-width: 800px; /* Begræns kassen til en passende bredde */
  padding: 30px 20px; /* Luft inde i kassen */
  text-align: left; /* Venstrejustering af indhold */
}

.benefits-container h2 {
  font-size: 28px;
  color: #313737;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: bold;
}

.benefits-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.benefits-list li {
  font-size: 18px;
  color: #555;
  margin-bottom: 15px;
  padding-left: 25px;
  position: relative;
}

.benefits-list li::before {
  content: "✔";
  color: #cd3535;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: 0;
}

/* Styling for call-to-action link i benefits-section */
.benefits-section p {
  font-size: 18px; /* Tilpas skriftstørrelse for teksten */
  color: #555; /* Grå farve for bedre kontrast */
  line-height: 1.6; /* Giver bedre læsbarhed */
  text-align: center; /* Centrer teksten */
  margin-top: 20px; /* Tilføjer lidt luft ovenfor */
}

.benefits-section p a {
  color: #cd3535; /* Rød farve for link */
  text-decoration: none; /* Fjern understregning */
  font-weight: bold; /* Gør linket mere synligt */
  transition: color 0.3s ease; /* Giver en glidende effekt ved hover */
}

.benefits-section p a:hover {
  color: #313737; /* Skifter til en mørkere farve ved hover */
}

/* Teaser sektion */
.teaser-section {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 40px 20px;
}

.teaser-left,
.teaser-right {
  flex: 1;
  padding: 20px;
}

.teaser-left {
  border-right: 2px solid #cd3535;
}

.teaser-left h2,
.teaser-right h2 {
  font-size: 24px;
  color: #313737;
  margin-bottom: 15px;
}

.teaser-left p,
.teaser-right p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

.teaser-left .btn,
.teaser-right .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #313737;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.teaser-left .btn:hover,
.teaser-right .btn:hover {
  background-color: #cd3535;
}

/* Footer */
.footer {
  background-color: #313737;
  color: #ffffff;
  padding: 40px 20px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap; /* Tillader fleksibel stabling */
  gap: 20px;
}

.footer-section {
  flex: 1;
  display: flex;
  justify-content: center; /* Centrer kassen horisontalt */
  align-items: center; /* Centrer kassen vertikalt */
}

.footer-box {
  max-width: 300px;
  text-align: left; /* Venstrejuster tekst inde i kassen */
}

.footer-box h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #cd3535;
}

.footer-box p,
.footer-box a,
.footer-menu li a {
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 10px;
}

.footer-box a:hover {
  color: #cd3535;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 10px;
}

.nowrap {
  white-space: nowrap;
}

/* Responsivt design */
.menu-toggle {
  display: none;
  font-size: 24px;
  color: #ffffff;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-items {
  display: flex;
  gap: 20px;
}

.active {
  color: #cd3535 !important;
}

@media (max-width: 1024px) {
  .menu-toggle-label {
    display: block; /* Vis hamburger-ikonet på mindre skærme */
  }

  .menu-items {
    display: none; /* Skjul menuen som standard */
    flex-direction: column;
    background-color: #313737;
    position: absolute;
    top: 110px; /* Under headeren */
    right: 20px;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
  }

  .menu-checkbox:checked + .menu-toggle-label + .menu .menu-items {
    display: flex; /* Vis menuen, når checkboxen er markeret */
  }

  .menu-items li {
    margin-bottom: 10px;
  }
}

/* Responsivt design */
@media (max-width: 768px) {
  .background-image {
    width: 100%;
    height: auto;
    max-height: 800px;
    display: block;
    object-fit: cover;
  }

  .content-section {
    padding-top: 100px; /* Mindre afstand under header på mobil */
    margin-bottom: 30px; /* Mindre afstand til næste sektion */
  }

  .transparent-box {
    width: 100%; /* Boksen fylder hele skærmbredden */
    left: 0; /* Flyt til venstre kant */
    padding: 15px 20px; /* Mindre padding */
    border-radius: 0; /* Fjern afrundede hjørner for at fylde hele bredden */
  }

  .transparent-box h1 {
    font-size: 24px; /* Reducer størrelse på overskriften */
  }

  .transparent-box p {
    font-size: 16px; /* Reducer skriftstørrelsen på mobil */
    text-align: left; /* Centrer teksten på mobil */
    line-height: 1.5; /* For bedre læsbarhed */
  }

  .teaser-left {
    border-right: none; /* Fjern højre kantlinje */
  }

  .button-container {
    flex-direction: column; /* Stabel knapperne lodret */
    gap: 10px; /* Mindre afstand mellem knapper */
  }

  /* Knapper */
  .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #cd3535;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease;
  }

  .btn:hover {
    background-color: #313737;
  }

  .btn-secondary {
    background-color: #ffffff;
    color: #cd3535;
    border: 2px solid #cd3535;
  }

  .btn-secondary:hover {
    background-color: #cd3535;
    color: #ffffff;
  }

  .icon-phone::before {
    content: "📞";
    margin-right: 8px;
  }

  .icon-email::before {
    content: "✉️";
    margin-right: 8px;
  }
  .mobile-break {
    text-align: left; /* Venstrejusteret tekst */
    width: 300px; /* Bredde på linjen */
  }

  .benefits-section {
    padding: 20px 15px; /* Mindre padding for mobil */
  }

  .benefits-container {
    max-width: 100%; /* Fylder hele bredden på mobil */
    padding: 20px; /* Reducer indre luft på mobil */
    border-radius: 5px; /* Mindre afrunding på mobil */
  }

  .benefits-container h2 {
    font-size: 22px; /* Mindre overskriftsstørrelse på mobil */
  }

  .benefits-list li {
    font-size: 16px; /* Mindre skrift på mobil */
    padding-left: 20px; /* Mindre afstand til ikoner */
  }

  .benefits-list li::before {
    font-size: 16px; /* Reducer ikonstørrelse på mobil */
  }
}

/* Login sektion */
.login-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh; /* Få sektionen til at fylde det meste af skærmen */
  background-color: #f9f9f9;
  padding: 20px;
}

.login-container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.login-container h1 {
  font-size: 24px;
  color: #313737;
  margin-bottom: 20px;
}

.login-label {
  display: block;
  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
  text-align: left;
}

.login-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.login-input:focus {
  outline: none;
  border-color: #cd3535;
}

.btn-primary {
  width: 100%; /* Gør knappen bred */
  background-color: #cd3535;
  color: #ffffff;
  font-size: 18px;
  padding: 12px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #313737;
}

.error-message {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #cd3535;
  border-radius: 5px;
  background-color: #ffe5e5; /* Lys rød baggrund for synlighed */
  color: #cd3535;
  margin-bottom: 20px; /* Giver afstand til input-feltet */
  box-sizing: border-box;
  text-align: center;
}

.code-form {
  text-align: center;
}

.code-inputs {
  display: flex;
  justify-content: center;
  gap: 10px; /* Mellemrum mellem felterne */
  margin-bottom: 20px;
}

.code-input {
  width: 50px;
  height: 50px;
  font-size: 24px;
  text-align: center;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}

.code-input:focus {
  border-color: #cd3535;
  outline: none;
}

.red {
  color: #cd3535;
}