/* ============================= */
/* MOBILE FIRST STYLING           */
/* ============================= */

/* Testimonials */
.testimonials {
  border-radius: 20px;
  width: 28%; /* gør den fuld bredde på mobil */
  padding: 12px 20px;
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  font-weight: 400;
  margin: 2em auto; /* centreret og med margin-top/bottom */
  font-size: 16px;
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.25));
  display: block;
}

/* Client Case Section Title */
#client_case {
  text-align: center;
  font-size: 28px; /* mindre på mobil */
  margin: 1.5em auto;
}

/* Client Case Grid - stacked on mobile */
.clientcase-grid {
  display: block; /* stacked layout for mobile */
  width: 95%;
  margin: 0 auto;
}

/* Each box */
.boks_1,
.boks_2,
.boks_3,
.boks_4,
.boks_5,
.boks_6 {
  width: 90%; /* fylder næsten hele skærmen */
  padding: 15px 20px;
  margin: 2em auto;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 15px;
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.25));
  display: block; /* sikrer stacked layout */
  grid-column: auto; /* fjern grid-column på mobil */
}

/* Box Titles */
.yt_tekst1,
.yt_tekst2,
.yt_tekst3,
.yt_tekst4,
.yt_tekst5,
.yt_tekst6 {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 1em;
  text-align: center;
}

/* Videos */
.yt_video1,
.yt_video2,
.yt_video3,
.yt_video4,
.yt_video5,
.yt_video6 {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border: none;
  display: block;
}

/* client case section 2 */

.client_h1_2 {
  margin-top: 5em;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  margin-bottom: 4em;
  width: fit-content;
  font-size: 17px;
  white-space: nowrap;
  border-radius: 15px;
  padding: 10px 30px;
  background-color: #ffffff;
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.25));
}

.review1 {
  grid-column: 1/2;
  width: 90%;
  margin-left: 1em;
}

.review2 {
  grid-column: 2/3;
  width: 90%;
  margin-left: 1em;
}

.review3 {
  grid-column: 1/2;
  width: 90%;
  margin-left: 1em;
  margin-top: 3em;
}

.review4 {
  grid-column: 2/3;
  grid-row: 2/4;
  width: 90%;
  margin-left: 1em;
  margin-top: 3em;
}

.review5 {
  grid-column: 1/2;
  width: 90%;
  margin-left: 1em;
  margin-top: 4em;
}

.review6 {
  grid-column: 2/3;
  width: 90%;
  margin-left: 1em;
  margin-top: 1em;
}

.review7 {
  grid-column: 1/2;
  grid-row: 4/5;
  width: 90%;
  margin-left: 1em;
  margin-top: 2em;
}

/* footer */

.streg_1 {
  height: 1px; /* tykkelse */
  width: 90%; /* halvvejs ind på skærmen */
  background-color: black;
  margin-left: 2em;
  margin-bottom: 1em;
}

.tekst_footer {
  margin-left: 3em;
  margin-bottom: 2em;
  width: 50%;
  line-height: 40px;
  font-size: 0.7em;
}

.footer_content {
  display: flex;
}

.logo_footer {
  margin-left: 3em;
  height: 2%;
}

.streg_2 {
  height: 1px; /* tykkelse */
  width: 90%; /* halvvejs ind på skærmen */
  background-color: black;
  margin-left: 2em;
  margin-right: 2em;
  margin-bottom: 4em;
  margin-top: 3em;
}

.footer_menu {
  display: flex;
  white-space: nowrap;
  gap: 25px;
}
@media (max-width: 768px) {
  .footer_menu {
    flex-wrap: wrap; /* må bryde linjen */
  }
}

#book_a_call {
  background-color: #000000; /* black background */
  color: white; /* tekst color */
  border-radius: 30px; /* valgfrit, for afrundede kanter */
  padding: 5px 20px;
  margin-right: 1.5em;
  font-size: 14px;
}

#book_a_call:hover {
  background-color: rgba(
    215,
    190,
    133,
    1
  ); /* eksempel: lilla baggrund ved hover */
  color: #000000; /* evt. ændre tekstfarve, hvis du vil */
}

@media (min-width: 850px) {
  .clientcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .clientcase_grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin-bottom: 5em;
  }

  .testimonials {
    border-radius: 20px; /* valgfrit, for afrundede kanter */
    width: fit-content;
    padding: 12px 40px;
    background-color: #ffffff; /* black background */
    color: rgb(0, 0, 0); /* tekst color */
    font-weight: 400;
    margin-bottom: 1.5em;
    font-size: 25px;
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.25));
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5em;
  }

  #client_case {
    font-size: 45px;
  }

  .client_h1_2 {
    margin-top: 5em;
    margin-left: auto;
    margin-right: auto;
    font-weight: 450;
    margin-bottom: 4em;
    width: fit-content;
    border-radius: 20px;
    padding: 12px 40px;
    background-color: #ffffff;
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.25));
  }

  /* footer */

  .streg_1 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
  }

  .streg_2 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6em;
  }

  .tekst_footer {
    font-size: 26px;
    font-weight: 350;
    margin-left: 2.8em;
  }
  .logo_footer {
    display: block; /* vigtigt for centering */
    margin: 0 auto; /* centrerer logo */
    width: 200px; /* sæt ønsket størrelse */
    height: 150px; /* beregnes automatisk */
    max-width: 100%; /* sikrer at det ikke overskrider container */
  }

  #book_a_call {
    background-color: #000000; /* black background */
    color: white; /* tekst color */
    border-radius: 30px; /* valgfrit, for afrundede kanter */
    padding: 5px 20px;
    margin-right: 1.5em;
    font-size: 20px;
  }

  .footer_menu {
    list-style: none; /* fjern bullets */
    display: flex; /* gør listen til flex container */
    justify-content: center; /* centrer items horisontalt */
    gap: 2em; /* afstand mellem menupunkterne */
    padding: 0; /* fjern indbygget padding */
    margin: 0; /* fjern margin */
    font-size: 20px;
    font-weight: 450;
  }
}