@media (min-width:768px){
.contact {
    max-width: 650px;
}

#contact {
    display: flex;
    justify-content: center;
}

.content-contact {
    display: flex;
}

.right-txt-contact {
    border-radius: 0px 24px 24px 0px;
    width: 50%;
}

.left-image-contact {
  text-align: center;
  width: 50%;
}

.left-image-contact img {
  border-radius: 24px 0px 0px 24px;
}

.container-rate {
    text-align: left;
}

.rate-button {
    text-align: center;
}

.container-workflow {
    max-width: 590px;
}

.box-1, .box-2, .box-3 {
    display: flex;
    flex: 2;
    padding: 20px 0 20px 0;
}

.workflow-text {
    text-align: left !important;
    flex: 2;
    width: 70%;
}

.workflow-icon {
  width: unset;
  margin: 0 auto;   
  align-content: center;
  padding-right: 30px;
}

.workflow-icon img {
    width: 100px;
}

#rate {
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-video-wrapper {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  margin: 0px 0px 20px 0px;
}

.ads-video-wrapper {
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0px 0px 20px 0px;
}

.container-example-1, .container-example-3 {
  display: flex;
  flex-direction: row;
  max-width: 650px;
  padding-bottom: 60px;
}

.container-example-2 {
  display: flex;
  flex-direction: row-reverse;
  max-width: 650px;
  padding-bottom: 60px;
}

.example-right-text, .example-left-text {
   display: flex;
   flex-wrap: wrap;
   flex: 1;
   justify-content: center;
   text-align: left !important;
   align-content:first baseline;
   margin-top: 140px;
  }

.example-left-text {
    padding: 10px 18px 0px 40px;
}

.ads-video-wrapper video {
  width: 300px;
  object-fit: cover;
  border-radius: 30px;
  flex: 1;
}

.ads-video-wrapper, .newsletter-video-wrapper {
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.newsletter-video-wrapper video {
  width: 300px;
  object-fit: cover;
  flex: 1;
}

.img-mobile{ display:none; }
.img-tablet{ display:block; }

.test_splash {
    padding-top: 140px;
    padding-bottom: 110px;
}

.top-container-text {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    text-align: center;
    padding-bottom: 40px;
    max-width: 600px;
}

.mockup img {
    width: 90%;
  }

.mockup {
  /* display: flex;
  align-items: flex-start; */
  flex: 1;
  max-width: 50%; 
}

#portfolio > div > div.test > div > div.portfolio-text > h2 {
    text-align: left !important;
  }

.portfolio-text {
  flex: 2;
  max-width: 55%;
  text-align: left;
  padding: 0px 0px 0px 20px;
}

.test-portfolio {
  padding-top: 30px;
  padding-bottom: 50px;
}

span.intro {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  padding-bottom: 16px;
  font-weight: 800;
}

#splash > div > div > div.right-image > img {
    border-radius: 20px;
}

span.splash-text {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    line-height: 40px;
}

.right-image {
    width: 50%;
    padding-right: 50px;
}

.left-txt-box {
    width: 40%;
    position: absolute;
    top: 400px;
    left: 50px;
    border-radius: 24px;
    padding: 24px 18px 22px 18px;
}

.txt-statement, .test-statement {
    max-width: 600px;
    margin: 0 auto;
}

  nav {
    display: flex;
    justify-content: flex-end;
  }

  .desktop_nav {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    background-color: transparent;
    flex-wrap: nowrap;
    padding: 16px 16px;
  }

  .menu_items, .container {
    display: none !important;
  }

  .desktop_nav a {
    margin-right: 25px;
  }

  .rate-text {
    padding-bottom: 40px;
  }

  h1, h2, h3, p {
      padding-bottom: 30px;
  }
  body > footer > div.footer-container > div.footer-about > h3 {
    padding-bottom: 16px !important;
  }
  .wrapper-terms {
      max-width: 950px;
      margin: 0 auto;
  }
}

@media (min-width: 1280px) {
  .test_splash {
    padding: 130px 120px;
  }
  .right-image {
    width: 30%;
    padding-right: 250px;
  }
  .left-txt-box {
    width: 28%;
    top: 350px;
    left: 360px;
  }

  #statement {
    background-color:unset;
  }

  .txt-statement {
    background-color: var(--blue);
    padding: 65px 45px 65px 45px;
    border-radius: 24px;
  }

  .top-container-text {
    max-width: 950px;
  }

  .container-examples, .container-contact {
    flex-direction: column;
  }

  .container-portfolio {
    margin: 0 auto;
  }

  .container-example-1, .container-example-2, .container-example-3 {
    max-width: 950px;
  }

  .example-right-text {
    padding: 10px 48px 0px 18px;
  }
  .example-left-text {
    padding: 10px 18px 0px 48px;
  }

  .container-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4 kolonner */
    grid-template-rows: repeat(2, 300px);   /* 2 rækker, hver 300px høje */
    gap: 0;                                
    width: 100%;
    height: auto;
  }

  .container-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* beskærer billedet i rammen */
    display: block;
  }

  #workflow {
    background-color: unset;
    padding: 80px 20px 40px 20px;
  }

  .container-workflow {
    background-color: var(--blue);
    padding: 45px 175px 45px 175px;
    border-radius: 24px;
  }

  .container-gallery {
    border-radius: 24px;
  }

  #rate, #contact {
    max-width: 950px;
  }

  #contact {
    margin:  0 auto; 
  }

  .contact {
    max-width: 950px;
  }

  .right-txt-contact {
    width: 50%;
    padding: 40px;
  }

  .left-image-contact {
      width: 50%;
  }

  .portfolio-text {
    align-content: center;
  }

  .mockup img {
    width: 120%;
  }

  .mockup {
    max-width: 100%; 
  }
}