*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --blue: #153242;
  --base: #EAE4D7;
  --minegray: rgba(21, 50, 66, 0.5); /* #153242 med 50% opacity */
}

html {
  scroll-behavior: smooth;
}


p {
  font-family: "work sans";
}


.landingpage-hero {
  position: relative;
  width: 100%;
  height: 70vh;
  padding: 2rem 1.5rem;
  margin-top: -100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  color: white;
  overflow: hidden;
}

.landingpage-hero .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}



h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  font-size: 2rem;
}


.bullet-list-landing-page {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 0;
}

.bullet-list-landing-page li {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.9rem;
  display: flex;
  gap: 5px;
  align-items: center;
}

.landingpage-button {
  background-color: white;
  color: var(--blue, #153242);
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease;
}

.landingpage-button:hover {
  opacity: 0.85;
}



/* LANDINGPAGE CSS  */
.landingpage-section-one{
/* background-color: red; */

display: flex;
background-size: cover;
color: white;
padding: 16px;
justify-content: center;
align-items: center;
flex-direction: column;
}
.info-box{
    background-image: url("/img/3.png");
    background-size: cover;
    list-style-type: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 32px 16px;
    border-radius: 5px;
  }
  .stone{
    width: 30px;
  }
  .info-box ul{
    list-style-type: none;
    font-family: "work sans";
    font-size: 12px;
   

  }
  .info-box ul li{
    margin-left: 8px;
    margin-top: 8px;
  }
  .info-box ul li .fa-solid{
    margin-top: 8px;
    padding-right: 8px;
  }
 











  /* BULLETLIST   */


.landing-page-section-two{
/* padding: 16px;   */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}


.section-two-landingpage{
  display: flex;
  padding: 16px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
  

}
.section-two-landingpage article{
display: flex;
flex-direction: column;
/* background-color: blue; */
width: 50%;
text-align: left;


}

.section-two-landingpage article h2{
  font-weight: 100;
  color: var(--blue);
  font-size: 24px;
  padding: 0;
  margin: 0;

}

.medbring-selv-article p{
font-size: 16px;
height: 100%;
}

.bullet-list article ul{
  list-style-type: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px
 
}
.bullet-list ul li{
  display: flex;
  font-family: 'work sans';
  width: 100%;
  /* background-color: red; */
    width: 132px;
    height: 50px;
    align-items: center;
    font-size: 16px;
    text-align: center;
    justify-content: center;

  
}
.bullet-list ul img{
  /* position: absolute; */
  width: 20px;
margin-right: 10px;

}
.bullet-list ul .fa-solid{
  position: relative;
  color: var(--blue);
    font-size: 32px;



    display: none;
}


/* BULLET LIST END */


/* RENTING */
.renting{
margin-bottom: 16px;
margin-top: 16px;}

/* RENTING END */






















/* items */
#items{
  display: flex;
  grid-template-columns: 33% 33% 33%; 
  gap:0;
  justify-content: center;
  align-items: center;
  gap: 8px;



padding-bottom: 32px;

}

.item{
  width: 115px;
  height: 229px;
  padding:0;
  
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;

  overflow: hidden;
  
}

.item>img
{
  width:100%;
  height: 100%;
  border-radius: 5px;
}
.item>div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  position:absolute;
  color:white;

}

.item>.prices{
padding: 8px;
font-size: 12px;
font-family: "Lora", serif;
font-weight: 100;
}
.item h3{
  color:white;
  font-size: 12px;
  text-transform: capitalize;
  font-weight: 100;
  margin-bottom: 16px;
  font-family: "Lora", serif;

  

}

/* ITEMS END */



























/*STEP-BYSTEP-BAR*/
 .landing-page-section-two{
  background-color: white;;
  padding: 32px;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;

 }
.progress-container{

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center


}
/* dette er min html klasse. til den tilføjer jeg et element før:before og et efter:after */
.step { 
  position: relative; /* For at absolut positionerede pseudo-elementer placeres i forhold til .step */
  font-family: 'Work Sans', sans-serif;
  color: #D9D9D9;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  font-size: 10px;
  width:80px;

  counter-increment: stepNummerRoshni; /*aner ik hvorfor lortetikk eu*/

}
.step.active{
  color:#979797;
  
}

/* element før html */
.step::before {
  content: counter(stepNummerRoshni); /*Den viser det counter-increment med navnet stepNummerRoshni */
  color:white;
  width: 30px;
  height: 30px;
  background-color: #D9D9D9;
  border-radius: 50%;
  position: absolute;
  top: -30px; /* Jeg  cirklen op over boksen */
  left: 50%;
  transform: translateX(-50%); /*Jeg  centrerer de blå dutter horisontalt */

 /*HER centerer jeg counter nummer som jeg afspiller*/
 display: flex;
 flex-direction: column;
 justify-content: center;
  z-index: 1;



}



/* element efter html  */
.step::after {
  content: "";
  height: 2px;
  width: 70px;
  background-color: #D9D9D9;
  position: absolute;
  top: -15px; /*Læg mæke til at denne er halv så meget fra toppen som de blå, (fordi det skal være i midten)*/ 
  left: -50%; /* Den orange linjhe bliver flyttet 50% til venstre fra den orgianle plads,*/
}

/* Fjern stregen fra første step */
.step:first-child::after {
  display: none;
}


/* *ACTIVE */
.step.active::before{
  background: var(--blue);
  color:white;
  opacity: 100%;

}

/*STEP-BYSTEP-BAR END*/












/* CALENDER */

.section-two-article{
  width: 100%;
 display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 8px;


}

input[type="radio"] {
  display: none; /* Jeg skjuler den normale knap(den grimme) */
}

table {
  gap: 16px; /* Mellemrum mellem bokse */
  justify-content: center;
  padding: 16px;
  align-items: center;
  
}

fieldset label {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  color: white;
  text-align: center;
  cursor: pointer;
  background-color: #D9D9D9;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="radio"]:checked + label {
  background-color: darkblue;
  font-weight: bold;
}

.section-two-article {
  background-color: yllow;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

input[type="radio"] {
  display: none; /* Skjuler grim knap(standard-knap) */
}

.choose-time {
  display: grid;
  gap: 1fr;
  grid-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

fieldset legend {
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  margin-bottom: 16px;
}

fieldset label {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  color: white;
  text-align: center;
  cursor: pointer;
  background-color: var(--blue);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
height: 70px;
width: 65px;
margin: px;
}
fieldset label.taken {
opacity: 50%;
}
.dates td{
  font-size: 12px;
  font-family: 'Work Sans', sans-serif;
  color:#153242
}
.days td{
  font-size: 24px;
  font-family: 'Lora', serif;
  color: #153242;
  opacity: 50%;
}

input[type="radio"]:checked + label {
  background-color: darkblue;
  font-weight: bold;
  transform: scale(1.05);
  transition: 0.2s ease;
  display: flex;
}





.number-of-persons{
  display: flex;
  width: 100%;
  border-radius: 5px;
padding-left: 16px;
}


.custom-select-wrapper {
  position: relative;
  width: 250px; 
}

.custom-select {
  width: 100%;
  height: 100%;
  appearance: none;
  background: transparent;
  border: none;
  padding: 10px 40px;
  font-size: 16px;
  font-family: 'Work Sans', sans-serif;
  color: #ffffff;
  box-sizing: border-box;
  cursor: pointer;
  background-color: var(--blue);
  border-radius: 5px;
  align-self: flex-start;
}


.custom-select:focus {
  outline: none;
}

.icon-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
}

.icon-right {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
}

.custom-select option {
  background: white;
  color: #4D4C4C;
  
  width: 300px;
  z-index: 0;
  border-bottom-left-radius: 2%;
  border-bottom-right-radius: 2%;
}

.submit{
  width: 350px;
  font-size: 25px;
  display: flex;
  justify-content: center;
  text-align: center;
  align-self: center;
  margin-top: 16px;
  border-radius: 5px;
  border:none;
background-color: var(--blue);
  color:white;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  margin-top: 16px;

}
.submit:hover{
  opacity: 10%;
}
.firstform{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* CALENDER END */


/* ABOUT-US-LANDIG-PAGE-SECTION */
.aboutus{
  display: flex;
  flex-direction: row;
  padding: 16px;
  background-color: var(--blue);
  color:white;
  align-items: cnter;
  justify-content: cnter;
}
.aboutus p{
  font-size: 12px;
margin-top: 8px;
}
.aboutus article{
  width: 50%;

  display: flex;
  flex-direction: column;

}
.aboutus article:last-child{
  position: relative;
}
.aboutus-img{
  position: absolute;
  right: -10%;
  top: 10%;
  width: 100%;
}






/* LANDINGPAGEEND */








/* HAANDKLEADER PAGE CSS-2 */
.secondmain{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px;





}

#items-two{
display: grid;
grid-template-columns: 1fr;
gap:1rem;
padding: 1rem;
padding-top: 32px;
padding-bottom: 32px;
}

.item-two{
  width: 100%;
  padding: 0;
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  height: 250px;
  background-color: blue;
  color:white;

}
.item-two:first-child
{
background-image: url("img/hat.png");
background-size: cover;
background-repeat: no-repeat;


}



.item-two:last-child
{
background-image: url("img/towels.png");
background-size: cover;
background-repeat: no-repeat;


}
.item-two>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  bottom:0;
}


.progress-container.two{
  margin-top: 32px;
  margin-bottom: 32px;
}
.fa-chevron-right {

margin-left: 16px;
}
/*table-two-*/
.delete{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border:none;
  background-color: transparent;
  font-family: "work sans";
  font-weight: 300;
  font-size: 12px;
  color: white;

}

.edit-number{
  font-family: "work sans";
  font-weight: 300;

}
.delete img{
  width: 12px;
  margin-top: 8px;
  margin-bottom: 5px;
  /* display: none; */
}

.number{
  font-family: "Work", sans-serif;
  font-size: 12px;
  font-weight: 300;

}
h3.number{
  font-weight: 300;
  font-size: 16px;
}

.table-two{
  width: 100vw;
  text-align: left;
  background-color: var(--blue);
  color:white;
  min-height: 200px;
}
.table-two-td{
  margin-top: 100px;
}
/* antalhånklder-side-end */

table.table-two tr td:nth-child(1) {
  width: 50%;
  padding-right: 30px;;

}

table.table-two tr td:nth-child(2) {

  padding-right: 16px;

  
 
}

table.table-two tr td:nth-child(3) {
  padding-right: 16px;


}

.submit-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  height: 200px;

    background-image: url("img/payingbackground.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 100% ;

  
}
/* HAANDKLEADER PAGE END*/









/* BETALING */

.section-three{
  
  display: flex;
  flex-direction: column;
  width: 100vw;
  /* background-color: red; */
  justify-content: center;
  align-items: center;
  background-color: var(--blue);
  color:white;
  padding-top: 32px;
  


}

.kode-form{
  font-family: "work sans";
  display: flex;
  /* background-color: red; */
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
  padding: 16px;
  color:white;
  width: 100vw;

  
}


.kode-form input[type="text"]{
  width: 100%;
  padding: 8px;
  border: none;
  background-color: white;
  margin-top: 8px;
}

.kode-form input[type="number"]{
  width: 100px;
  padding: 8px;
}

.kode-form label{
color:white;
font-family: "Lora", serif;
margin-top: 32px;
font-size: 12px;

}


.no-code{
  font-family: "work sans";
  font-weight: 400;
}
.submit.three{
  padding: 8px;
  background-color: white;
  margin: 8px;
  color:var(--blue);
    font-family: "Lora", serif;
}

.input-boxes-row{
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
.input-div{
  
  margin-bottom: 16px;

}


.input-div>input[type="text"]{
  width: 99%;
}

.input-div>.kode-form input[type="text"]{
  width: 100px;
  padding: 8px;
}
.input-in-div{
  width: 100px;
  display: flex;
}

.back-btn{
  text-decoration: none;
  font-family: "work sans";
  color:white;
  background-color: var(--blue);
  text-align: center;
  font-size: 25px;
  padding: 8px;
  border-radius: 5px;
  margin-bottom: 16px;
  margin-top: 16px;
  align-self: flex-start;
  margin-left: 16px;
  display: flex;
  flex-direction: row;
justify-content: center;
align-items: center;
}
.back-btn p{
  font-size: 12px;
  
}

.add{
  /* background-color: red; */
  
  display: flex;
  flex-direction: column;
  font-size: 12px;
      font-family: "Lora", serif;
      margin-top: 32px;
}

.add-picture-div
{
background-image: url("img/nocodeadd.png");
background-size: contain;
width: 234px;
height: 121px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: flex-end;
  padding: 8px;
  padding-right: 16px;
  margin-top: 8px;

}

.add-picture-div .fa-solid{
  text-decoration: none;
    color:white;
      font-size: 20px;


  
}

/* BETALING END */








/* BEKRÆFTET */

.section-four{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  margin-top: 8px;
  margin-bottom: 98px;
  padding-left: 16px;
  padding-right: 16px;
}
.progress-container.three{
  padding-top: 150px;
  position: relative;
}
.submit.four{
  max-width: 300px;
}
h1.confirmed{
  font-size: 32px;
  font-size: 500;
  margin-bottom: 8px;
  color: var(--blue);
  text-transform: uppercase;
  font-weight: 900;
  margin-top: 30%;
  
}
h2.confirmed{
    color: var(--blue);
opacity: 80%;
font-size: 24px;
margin-bottom: 9px;

}
p.confirmed{
    font-family: "Work Sans", sans-serif;
  font-size: 12px;
  color:var(--blue);
  font-style: italic;
  margin-bottom: 100px;

}
/* BEKRÆFTET END */



.resultat-hatte.number{
  color:white;
}


.aboutus.maps{
  background-color: white;
  color:var(--blue);
  padding-top: 64px;
  padding-bottom: 64px;
  justify-content: space-between;
}
.aboutus.maps article{
  background-color: none;
  width: 45%;
}
.aboutus.maps p{
  color: var(--blue);
}
.map{
  width: 100%;
  height: 200px;
  align-self: flex-end;

}
.adresse{
font-family: "Work", sans-serif;
font-size: 12px;
align-self: flex-end;

}

.aboutus.maps h2{
  font-size: 16px;
  text-transform: uppercase;
}


/*about us*/



.hero {
  height: 70dvh;
  background-image: url('img/realbackgorund.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 100px 0px;
}

.hero-title {
  color: white;
  font-family: 'Lora', serif;
  font-size: 3rem;
}


.intro {
  padding: 2rem 1rem;
}

.intro h2 {
  font-family: 'Lora', serif;
  font-size: 1.8rem;
  text-transform: uppercase;
}

.video-wrapper {
  position: relative;
  margin-top: 1rem;
}


.intro-video {
  width: 100%;
  border-radius: 8px;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: black;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.7);
  clip-path: polygon(30% 20%, 30% 80%, 80% 50%);
  cursor: pointer;
  transition: opacity 0.3s;
}

.play-button:hover {
  opacity: 1;
}

.team {
  padding: 2rem 1rem;

}

.team-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.team-member {
  background-color: #e9e9e9;
  border-radius: 8px;
  padding: 1rem;
  width: 45%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin-top: 16px;
}

.billedblok {
  background-color: #153242;
  color: white;
  font-size: 0.85rem;

}



.values {
  padding: 2rem 1rem;
  text-align: center;
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 1rem auto;
  max-width: 300px;
}

.nav-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  gap: 1rem;
}

.main-nav-button {
  background-color: var(--blue);
  color: white;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 6px;
  font-size: 1.2rem;
  font-family: 'Lora', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.back-button {
  background-color: var(--blue);
  color: white;
  font-size: 1.2rem;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}


.kontakt-sauna {
  padding: 2rem 1rem;
  color: #153242;
  font-family: 'Work Sans', sans-serif;
}

.kontakt-sauna h2 {
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #153242;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.kontakt-form {
  max-width: 500px;
  margin: 0 auto;
  background-color: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(21, 50, 66, 0.15);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kontakt-form label {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.kontakt-form input,
.kontakt-form textarea {
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(21, 50, 66, 0.1);
  outline: none;
}

.kontakt-form button {
  padding: 0.9rem 1.2rem;
  background-color: var(--blue);
  color: white;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.kontakt-form button:hover {
  background-color: var(--blue);
  transform: translateY(-1px);
}












@media (min-width:700px) {


    .landingpage-hero {
    height: 100vh;
    padding: 0 5%;
    justify-content: center;
  }

  .hero-content {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

    .bullet-list-landing-page {
    flex-direction: row; /* Skift til vandret */
    justify-content: flex-start; /* Eller center */
    align-items: center;
    gap: 2rem;
  }

  .landingpage-hero h1 {
    font-size: 10rem;
  }

  .bullet-list-landing-page li {
    font-size: 1.1rem;
    
  }

  .landingpage-button {
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
  }

  #landing-page-section-two{
    background-image: url("img/background-strokes.png");
    background-size:30%;
    background-repeat: no-repeat;
    background-position: 70%;
  }
.info-box
{
  width: 100%;
width: 100%;
height: 668px ;
  background-image: url("img/landingpage-sectionone-background.png");
  background-size: cover;
padding: 64px;

  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: bottom;
  padding: 32px;
  padding-bottom: 5%;
}
#bullet-list-landing-page{
  margin-top: 18px;
  margin-bottom: 8px;
}
.booktidh2{
  width: 60%;
font-weight: 100;
margin: 0;
padding: 0;
font-size: 52px;
font-weight: 100;
}
.info-box ul {
  font-size: 16px;

}
.info-box ul li{
  margin-top: 16px;
}
.info-box ul li .fa-solid{
  margin-top: 16px;
  padding-right: 16px;
}
  .step {
    counter-increment: stepNummerRoshni; /*aner ik hvorfor lortetikk eu*/
    position: relative; /* For at absolut positionerede pseudo-elementer placeres i forhold til .step */
    font-family: 'Work Sans', sans-serif;
    display: flex;

    flex-direction: column;
    /* background-color: rgb(151, 151, 151); */
    text-align: center;
    align-items: center;
    font-size: 16px;
    width:310px;
    counter-increment: stepNummerRoshni; /*aner ik hvorfor lortetikk eu*/

}
  
  /* CIRKEL FØR STEPPET */
  .step::before {
color:white;
    content: "";
    width: 30px;
    height: 30px;
    background-color: #D9D9D9;
    border-radius: 50%;
    position: absolute;
    top: -30px; /* Løfter cirklen op over boksen */
    left: 50%;
    transform: translateX(-50%); /* Centrerer horisontalt */
    z-index: 1;
    /*her centerer jeg counter nummer som jeg afspiller*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    content: counter(stepNummerRoshni); /*Den viser det counter-increment med navnet stepNummerRoshni */

  }
  
  /* STREG FØR STEPPET */
  .step::after {
    content: "";
    height: 2px;
    width: 300px;
    background-color:#D9D9D9;
    position: absolute;
    top: -15px; /*Læg mæke til at denne er halv så meget fra toppen som de blå, (fordi det skal være i midten)*/ 
    left: -50%; /* Skubber linjen til venstre, så den forbinder med forrige step */
    z-index: 0;

  }
  .step.active::before{
    background-color: var(--blue)!important;

  }
  
  
  /* Fjern stregen fra første step */
  .step:first-child::after {
    display: none;
  }
  
label:has(input:checked) {
  border: 2px solid red;
}





/* items */

#items{
  gap: 42px;
  margin-top: 32px;
  margin-bottom: 32px;
  width: 100%;
  align-self: center;
  justify-self: center;
}
.item>.prices{
padding: 8px;

}
.item h3{
  color:white;
  font-size: 16px;
  text-transform: capitalize;
  font-weight: lighter!important;
  

}
.prices p{
  font-size: 12px;
}
/* items end */


.item{
  width: 219px;
  height: 432px;
  padding:0;
  
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;

  overflow: hidden;
  
}
.item:hover{
  background-color: red;
  border: 10px solid var(--blue)s;
   /* width: 220px;
  height: 333px; */
}
.item>img
{
  width: 100%!important;
  height: 100%!important;
  border-radius: 5px;
}

.item>img:hover{
   width: 220px;
  height: 333px;
}

.item>div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  position:absolute;
  color:white;
bottom:50%;
}

.item>.prices{
padding: 8px;
font-size: 1px;
font-family: "Lora", serif;
font-weight: 100;
}
.item h3{
  color:white;
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 100;
  margin-bottom: 12px;
  font-family: "Lora", serif;

  

}

  .delete{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border:none;
    background-color: transparent;
    font-family: "work sans";
    font-weight: 300;
    font-size: 12px;
    color:white;

  }
  .delete p{
    color:white;
  }
  .edit-number{
    font-family: "work sans";
    font-weight: 300;
  
  }
  .delete img{
    width: 16px;
    margin-top: 8px;
  }
  .number{
    font-family: "work sans";
    font-size: 12px;
    font-weight: 300;
  
  }
  h3.number{
    font-weight: 300;
    font-size: 16px;
  }
  .resultat.number{
    font-weight: 300;
    font-size: 16px;
  }
  #items-two{
display: grid;
grid-template-columns: 1fr 1fr;
gap:1rem;
padding: 1rem;
padding-top: 32px;
padding-bottom: 32px;
}
  
  .table-two{
    width: 100%;
  }
  
  /* antalhånklder-side-end */
  
  table.table-two tr td:nth-child(1) {
    width: 80%;
  
  }
  
  table.table-two tr td:nth-child(2) {
    width: 100%;  
    justify-content: center;
    text-align: center;
  
    
   
  }

  .resultat-handklaeder{
    color:white;
  }
  .resultat-hatte{color:white;}
  
  table.table-two tr td:nth-child(3) {
width: 100%;  
  }
  
.section-two-landingpage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  margin: 32px 0 0 0;
  padding: 0;
}


.section-two-landingpage article {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
}


.medbring-selv-article {
margin-bottom: 0.8rem;
}


#bullet-list ul {
  display: flex;
  gap: 48px;
  list-style: none;
  justify-content: center;
  padding: 0;
}

#bullet-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  font: 16px 'Work Sans', sans-serif;
}

#bullet-list img {
  width: 32px;
  margin-bottom: 8px;
}

#bullet-list .fa-solid {
  display: none;
}

#bullet-list p {
  margin: 0;
}

h2#medbring-selv{
  font-size: 30px;
}
.back-btn{
  margin: 0;
  
}



/* BETALING */
.section-three{
  width: 80vw;
  padding-top: 32px;
}
#kode-form{
  width: 50vw;
}
#kode-form label{
  font-size: 16px;
}
#kode-form input[type="text"]{
  height: 50px;
}
.input-boxes-row{
  justify-content: center;
}

.input-boxes-row div{
  width: 100%;
}
#input-ind-div{
  width: 300px;
}
.back-btn{
  margin-left: 32px;
}
.add-picture-div{
  width: 434px;
  height: 221px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 32px;

}
h1.confirmed{
  margin-top: 0;
  padding-top: 0;
  margin-top: 100px;
  font-size: 50px;
}
h2.confirmed{
  font-size: 32px;
}
p.confirmed{
  font-size:20px;
}




.aboutus{
  display: flex;
  flex-direction: row;
  padding: 16px;
  background-color: var(--blue);
  color:white;
  align-items: center;
  justify-content: center;
  width: 100%;
  align-self: center;
}
.aboutus p{
  font-size: 12px;
font-family: "Work", sans-serif;
margin-top: 8px;
}
.aboutus article{
  width: 25%;
  padding-top: 32px;
  padding-bottom: 32px;

  display: flex;
  flex-direction: column;

}
#aboutus>article:last-child{
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  border:#4D4C4C;

}
.aboutus-img{
  position: static;
  right: none;
  width: none;
   width: 100%;
   padding-left: 10%;

}
#aboutus p{
  font-size:16px;
  width: 80%;
  font-weight: lighter;
}

/* sidste sektion landingpagr*/
.aboutus.maps{
  display: flex;
  flex-direction: row;
  padding: 16px;
  background-color: white;
 
  align-items: center;
  justify-content: center;
  width: 100%;
  align-self: center;
}
.aboutus.maps article{
  width: 25%;
  padding-top: 32px;
  padding-bottom: 32px;

  display: flex;
  flex-direction: column;

}
#aboutusmaps p{
  font-size:16px;
  width: 80%;
  font-weight: lighter;
}
#aboutusmaps h2{
  font-size: 32px;
}
#map{
  align-self: flex-end;
  width: 80%;
  height: 200px;
}
.choose-time label{
  padding: 50px;
  font-size: 20px;
  margin: 2px;
}

.choose-time label:hover {
  background-color: #1e3a4c;
  transform: scale(1.02);
  transition: background-color 0.2s ease, transform 0.2s ease;
}



/*about us dsk */
section:not(.hero) {
  padding: 32px;
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;         /* ← Centrer horisontalt */
  justify-content: center;     /* ← Centrer vertikalt (hvis der er højde) */
  padding: 4rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.intro h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.intro p {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 800px;
}


.video-wrapper {
  margin-top: 2rem;
  max-width: 800px;
}



  .hero {
    height: 85vh;
    padding: 160px 32px 64px;
  }

  .hero-title {
    font-size: 4rem;
  }

  .intro,
  .team,
  .values,
  .kontakt-sauna {
    padding: 4rem 6rem;
  }

  .team-grid {
    gap: 2rem;
  }

  .team-member {
    width: 48%;
    padding: 2rem;
    font-size: 1rem;
  }

  .values-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 800px;
  }

  .kontakt-form {
    padding: 3rem;
    max-width: 700px;
  }

  .kontakt-form input,
  .kontakt-form textarea {
    font-size: 1.1rem;
    padding: 1rem 1.2rem;
  }

  .kontakt-form button {
    font-size: 1.1rem;
    padding: 1.1rem 2rem;
  }

  .nav-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }

  .main-nav-button,
  .back-button {
    font-size: 1.2rem;
    padding: 1rem 2rem;
  }


}