/* dm-sans-<uniquifier > {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
}

.topnav {
  background-color: #000000;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.topnav.hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 18px 20px;
  text-decoration: none;
  font-size: 1.2rem;
  font-family: "DM Sans", sans-serif;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #cb693c;
  color: white;
  font-weight: bold;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* ------------------- forside hero sektion ----------------------------- */
.hero-container {
  position: relative;
  max-width: 1920px;
  height: 91vh;
  overflow: hidden;
}

.hero-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4);
}

/* Bottom right text */
.text-block {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.learn-more-button {
  margin-top: 0;
  padding: 10px 20px;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-family: "DM Sans", sans-serif;
  color: white;
  background-color: transparent;
  border: 2px solid white;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.learn-more-button:hover {
  background-color: white;
  color: black;
}
.hero-container .text-block h4 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: "DM Sans", sans-serif;
}

.hero-container .text-block p {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-family: "DM Sans", sans-serif;
  margin-bottom: 50px;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.scroll-indicator span {
  display: block;
  width: clamp(16px, 2vw, 40px);
  height: clamp(16px, 2vw, 40px);
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg); /* makes a chevron/arrow shape */
  animation: bounce 1.4s infinite;
}

/* Stagger each chevron so they animate one after another */
.scroll-indicator span:nth-child(1) {
  animation-delay: 0s;
  opacity: 0.3;
}
.scroll-indicator span:nth-child(2) {
  animation-delay: 0.2s;
  opacity: 0.6;
}

@keyframes bounce {
  0% {
    transform: rotate(45deg) translate(-4px, -4px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) translate(4px, 4px);
    opacity: 0;
  }
}

.about-me {
  margin: clamp(20px, 3vw, 40px);
  transition: all 0.3s ease;
}

.about-me h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-family: "DM Sans", sans-serif;
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 40px);
}

.about-me h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.about-me p {
  font-size: 1rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 200;
}

.about-me-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
}

.about-me-content {
  flex: 1 1 200px; /* vokser, krymper, minimum 300px bred */
  padding: 20px;
  background-color: #242424;
  color: white;
  border: 1px solid #eee;
  border-radius: 5px;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    box-shadow 0.3s ease;
}

.about-me-content.visible {
  opacity: 1;
  transform: translateY(0);
}

.about-me-content:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.about-me-content a {
  color: #cb693c;
  text-decoration: none;
  font-weight: bold;
}

.about-me-content a:hover {
  text-decoration: underline;
}

/* logoslideshow */

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 0 0 20px 0;
  margin-top: 90px;
  white-space: nowrap;
  position: relative;
}
.logos:before,
.logos:after {
  content: "";
  position: absolute;
  top: 0;
  width: 400px;
  height: 100%;
  z-index: 2;
}
.logos:before {
  left: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}
.logos:after {
  right: 0;
  background: linear-gradient(to left, #ffffff, transparent);
}
.logos:hover .logo-slide {
  animation-play-state: paused;
}
.logo-slide {
  animation: 35s slide linear infinite;
  display: inline-block;
}
.logo-slide img {
  height: 50px;
  margin: 0 40px;
}

@media screen and (max-width: 600px) {
  .logos {
    display: none;
  }
}

/* ---------------------------- forside Case sektion ----------------------------------------------*/

.case-section {
  background-color: #1e1e1e;
  padding: 5px 40px 40px 40px;
}

.case-section h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-family: "DM Sans", sans-serif;
  text-align: center;
  color: white;
}

.card-flex {
  display: grid;
  justify-content: center; /* centrerer gruppen af kort */
  align-items: center;
  margin: 0 auto; /* centrerer selve flex containeren */
  grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
  gap: 40px;
}
.case-card {
  position: relative;
  overflow: hidden;
  width: 250px;
  height: 400px;
  border-radius: 5px;
}

.case-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Hover label: show 'Se mere' when hovering a case card. Use ::before so we don't conflict
   with the existing ::after gradient overlay. */
.case-card {
  cursor: pointer;
  transition: transform 0.3s ease;
}
.case-card::before {
  content: "Se projekt";
  position: absolute;
  /* left: 12px;
  top: 12px; */
  transform: translateY(-6px);
  background: rgba(0, 0, 0, 0.65);
  color: #dd7f54;
  padding: 8px 12px;
  border-radius: 0 0 6px 0;
  font-weight: 600;
  font-size: 1rem;
  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
  opacity: 0;
  transition:
    opacity 180ms ease,
    transform 200ms ease;
  pointer-events: none; /* don't block clicks */
  z-index: 6; /* above the gradient overlay */
  white-space: nowrap;
}
.case-card:hover::before {
  opacity: 1;
  transform: translateY(0);
}

.case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* dark at the bottom, transparent at the top */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.791) 0%,
    rgba(0, 0, 0, 0.548) 40%,
    rgba(255, 255, 255, 0.116) 100%
  );
}

.case-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  z-index: 1; /* sikrer teksten ligger over overlayet */
}

/* Mobil - slideshow */
@media screen and (max-width: 600px) {
  .slideshow-wrapper {
    overflow: hidden; /* skjuler de kort der ikke er aktive */
    width: 100%;
    display: flex;
  }

  .card-flex {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: flex-start;
    transition: transform 0.4s ease;
    transform: translateX(0); /* start altid på første kort */
  }

  .case-card {
    min-width: 100%;
    width: 100%;
    height: 500px;
    margin: 0;
    border-radius: 5px;
    flex-shrink: 0; /* forhindrer kortene i at krympe */
    overflow: hidden;
  }

  .case-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .case-link {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    display: block;
  }
}

@media screen and (min-width: 600px) {
  .case-card:hover {
    transform: scale(1.02);
    transition: transform 0.5s ease;
  }
}
.slideshow-wrapper {
  position: relative;
  align-items: center;
}

#prev,
#next {
  display: none;
  z-index: 10;
  border: white solid 2px;
  border-radius: 50%;
  width: 44px; /* equal width/height makes border-radius:50% a perfect circle */
  height: 44px;
  padding: 0;
  /* centering and display handled inside mobile media query so buttons stay hidden on large screens */
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  background: transparent; /* ensure no filled background */
  color: white; /* keep arrow text visible */
  -webkit-appearance: none; /* remove default button styling on iOS/Safari */
  appearance: none;
  outline: none;
  font-size: 18px; /* adjust arrow size */
}

#prev {
  left: 10px;
}
#next {
  right: 10px;
}

@media screen and (max-width: 600px) {
  #prev,
  #next {
    display: inline-flex; /* show and center content on mobile */
    align-items: center;
    justify-content: center;
    /* vertically center the buttons relative to the slideshow */
    top: 50%;
    transform: translateY(-50%);
  }
  /* place prev near the left edge and next near the right edge */
  #prev {
    left: 12px;
  }
  #next {
    right: 12px;
  }
}

/* Kontakt form sektion */
.contact-section {
  padding: 4rem 2rem;
}

.contact-wrapper {
  display: flex;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: flex-start;
}

/* --- Venstre side --- */
.contact-info {
  flex: 1;
}

.contact-info h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  /* font-weight: 500; */
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: "DM Sans", sans-serif;
}

.contact-info p {
  font-size: 15px;
  font-family: "DM Sans", sans-serif;
  color: #666;
  line-height: 1.7;
  margin-bottom: 3rem;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.info-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.info-item a {
  color: #333;
  text-decoration: none;
}

.info-item a:hover {
  color: #cb693c;
}

.social-icons {
  display: flex;
  gap: 12px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.social-btn:hover {
  background-color: #cb693c;
  color: white;
  border-color: #cb693c;
}

/* --- Højre side --- */
.contact-form-wrap {
  flex: 1;
  background-color: #f2f2f2;
  border-radius: 8px;
  padding: 2rem;
}

.form-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.form-row label {
  width: 20%;
  padding: 10px 12px 10px 0;
  font-size: 14px;
  flex-shrink: 0;
}

.form-row .input-wrap {
  flex: 1;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  box-sizing: border-box;
  resize: vertical;
  font-size: 14px;
  background-color: white;
}

/* generelt for inputs og textarea */
input::placeholder,
textarea::placeholder {
  color: rgba(0, 0, 0, 0.317); /* vælg din farve/alpha her */
  opacity: 1; /* sikrer Firefox ikke dimmer ekstra */
}

textarea {
  min-height: 140px;
}

.submit-btn {
  display: block;
  margin-left: auto;
  background-color: transparent;
  color: #cb693c;
  padding: 12px 24px;
  border: 1px solid #cb693c;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #cb693c;
  color: white;
}

/* --- Responsiv: mobil --- */
@media screen and (max-width: 768px) {
  .contact-wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .form-row {
    flex-direction: column;
  }

  .form-row label {
    width: 100%;
    padding: 0 0 4px 0;
  }

  .submit-btn {
    width: 100%;
    background-color: #cb693c;
    color: white;
  }

  /* Make the contact area use the full mobile width and remove extra paddings */
  .contact-section {
    padding: 2rem 0; /* keep vertical spacing */
  }

  /* keep a 20px outer margin around the contact area on mobile */
  .contact-wrapper {
    max-width: 100%;
    width: calc(100% - 40px); /* account for 20px margins left/right */
    margin: 20px; /* 20px space all around */
    padding: 0; /* inner padding handled on the form-wrap */
    box-sizing: border-box;
  }

  .contact-form-wrap {
    width: 100%;
    max-width: none;
    padding: 1rem; /* reduce inner padding so inputs stretch */
    border-radius: 6px;
  }

  .contact-info,
  .contact-form-wrap {
    box-sizing: border-box;
  }

  /* ensure input-wrap fills available width like submit-btn */
  .form-row .input-wrap {
    width: 100%;
  }
}

/* ----------------Footer styles -------------------------------------------------------------- */
.site-footer {
  background-color: #0f0f0f;
  color: #ddd;
  padding: 36px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.footer-inner {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto 18px;
}
.footer-brand .brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: white;
}
.footer-brand .brand-tag {
  margin-top: 6px;
  color: #bdbdbd;
  font-size: 0.95rem;
}
.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links a {
  color: #cfcfcf;
  text-decoration: none;
}
.footer-links a:hover {
  color: #cb693c;
}
.footer-social {
  margin-left: auto;
}
.footer-social .social-icons {
  display: flex;
  gap: 10px;
}
.footer-social .social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ddd;
  text-decoration: none;
}
.footer-social .social-btn:hover {
  background: #cb693c;
  color: white;
  border-color: #cb693c;
}
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}
.footer-bottom small {
  color: #999;
}
.back-to-top {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ddd;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.back-to-top:hover {
  background: #222;
}

@media screen and (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    gap: 14px;
  }
  .footer-social {
    margin-left: 0;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* animation ease-in-out */
/* Tilføj til din CSS */
.contact-info,
.contact-form-wrap,
.info-item,
.social-btn {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.contact-info.visible,
.contact-form-wrap.visible,
.info-item.visible,
.social-btn.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Forsinkelse så elementerne kommer ind én efter én */
.info-item:nth-child(1) {
  transition-delay: 0.1s;
}
.info-item:nth-child(2) {
  transition-delay: 0.2s;
}
.info-item:nth-child(3) {
  transition-delay: 0.3s;
}

.social-btn:nth-child(1) {
  transition-delay: 0.4s;
}
.social-btn:nth-child(2) {
  transition-delay: 0.5s;
}
.social-btn:nth-child(3) {
  transition-delay: 0.6s;
}

/* ------ CASE SIDERNE ---------------------------------------------------------------------------- */

/* ──----------------- HERO sektion 1 ----------------------------── */
.hero {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* dark overlay */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
}

/* Small screens: give hero content a 20px inset so it doesn't touch the edges */
@media screen and (max-width: 768px) {
  .hero__content {
    padding: 20px;
    box-sizing: border-box;
  }
}

/* Large screens: place hero text to the left and vertically centered */
@media screen and (min-width: 769px) {
  .hero__content {
    /* keep content full-height but align children to the left and center vertically */
    align-items: flex-start;
    justify-content: center;
    padding-left: 80px; /* give breathing room from the left edge */
    padding-right: 48px;
    box-sizing: border-box;
  }

  /* keep the topbar visually in the top-left without affecting vertical centering */
  .hero__topbar {
    position: absolute;
    top: 28px;
    left: 80px;
    /* give the topbar a right inset too so it spans the hero area and
       can place items at the far right (e.g. the Figma logo) */
    right: 80px;
    display: flex;
    justify-content: space-between; /* keep left content left and logo to the right */
    align-items: center;
  }

  .hero__text {
    margin-top: 0; /* override the mobile rule that pushed it to the bottom */
    padding-bottom: 0;
    text-align: left;
    max-width: 680px;
  }

  /* ensure the title/desc sit left and don't expand too wide */
  .hero__title,
  .hero__desc {
    margin-left: 0;
  }
}

/* Move badge under hero text on small screens: hide original and show a pseudo-badge */
@media screen and (max-width: 768px) {
  .hero__topbar .badge {
    display: none;
  }

  .hero__text[data-badge]::after {
    content: attr(data-badge);
    display: inline-block;
    background: #b95a2e6b;
    color: #ff8850;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 12px; /* appear below title and description */
    white-space: nowrap;
  }

  /* ensure the pseudo-element sits after the hero text content */
  .hero__text {
    display: block;
  }
}

/* top bar */
.hero__topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.badge {
  display: inline-block;
  background: #a54a2077;
  color: #ff8750;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  padding: 10px 22px;
  border-radius: 8px;
  letter-spacing: 0.01em;
}

.figma-logo {
  width: 72px;
  height: 72px;
  background: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  position: relative; /* needed for the badge pseudo-element */
  transition:
    background-color 220ms ease,
    transform 160ms ease;
  cursor: pointer;
}

.figma-logo[data-badge="true"]::after {
  /* tap-dot style: small orange dot at bottom-right */
  content: "";
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8714a;
  z-index: 8;
  transform-origin: center;
  animation: tap-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes tap-dot-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

/* Tooltip / cursor-text that appears when hovering the logo */
.figma-logo::before {
  content: "See the process";
  position: absolute;
  left: 50%;
  top: calc(100% + 10px); /* place under the logo */
  transform: translateX(-50%) translateY(6px);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  z-index: 12;
}

.figma-logo:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* change background on hover to black */
.figma-logo:hover {
  background: #000;
}

/* subtle lift on hover */
.figma-logo:hover {
  transform: translateY(-3px);
}

.figma-logo img {
  width: 50px;
  height: 50px;
}

.plain-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* title area */
.hero__text {
  margin-top: auto;
  padding-bottom: 12px;
  /* start hidden and slightly lowered so we can animate it into place */
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.hero__text.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__title {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 5vw, 52px);
  color: white;
  line-height: 1.1;
  margin-bottom: 16px;
}

.hero__desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
  max-width: 520px;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero__text,
  .feature,
  .about-me-content,
  .problem {
    transition: none !important;
    animation: none !important;
  }
  .hero__text.visible,
  .feature.visible,
  .about-me-content.visible,
  .problem.visible,
  .bottom-pic.visible {
    opacity: 1;
    transform: none;
  }
}

/* Make proces respects reduced motion as well */
@media (prefers-reduced-motion: reduce) {
  .proces {
    transition: none !important;
    animation: none !important;
  }
  .proces.visible {
    opacity: 1;
    transform: none;
  }
}

/* ── FEATURES SECTION ── */
.features {
  background: var(--section-bg);
  padding: 30px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 80px;
}

.feature {
  display: flex;
  gap: 24px;
  align-items: center;
}

.feature__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature__icon svg {
  width: 52px;
  height: 52px;
  stroke: #cb693c;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature__body {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.feature__title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 0;
  color: var(--dark);
}

.feature__desc {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* Animate features as they enter the viewport */
.feature {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.feature.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger a few items to make the entrance feel natural */
.features .feature:nth-child(1) {
  transition-delay: 0.06s;
}
.features .feature:nth-child(2) {
  transition-delay: 0.12s;
}
.features .feature:nth-child(3) {
  transition-delay: 0.18s;
}
.features .feature:nth-child(4) {
  transition-delay: 0.24s;
}
.features .feature:nth-child(5) {
  transition-delay: 0.3s;
}
.features .feature:nth-child(6) {
  transition-delay: 0.36s;
}

/* Responsive: stack features vertically on smaller screens */
@media screen and (max-width: 768px) {
  .features {
    grid-template-columns: 1fr; /* single column */
    padding: 20px 20px;
    gap: 20px; /* smaller vertical spacing */
  }

  .feature {
    align-items: center;
  }

  .feature__icon {
    width: 48px;
    height: 48px;
  }

  .feature__icon svg {
    width: 36px;
    height: 36px;
  }

  .feature__title {
    font-size: 15px;
  }

  .feature__desc {
    font-size: 14px;
  }
}

/* --------------- case side sektion 2 ---------------------------------------  */

/* ── SECTION ── */
.problem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  overflow: hidden;
}

/* Animate .problem sections into view */
.problem {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.problem.visible {
  opacity: 1;
  transform: translateY(0);
}

/* left text */
.problem__text {
  padding: 72px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(247, 247, 247);
}

.problem__title {
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 46px);
  color: var(--dark);
  margin-bottom: 24px;
}

.problem__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 380px;
}

/* right image */

.frede_visual {
  overflow: hidden;
  max-height: 543px;
  object-position: center top;
}

.frede_visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
}

.problem__visual {
  overflow: hidden;
}

.problem_visual {
  overflow: hidden;
  max-height: 520px;
  object-position: center top;
}

.problem-visual {
  overflow: hidden;
  max-height: 550px;
  object-position: center top;
}

#slideshow-img {
  transition: opacity 0.5s ease-in-out;
}

.problem__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
}

/* responsive */
@media (max-width: 680px) {
  .problem {
    grid-template-columns: 1fr;
  }
  .problem__visual {
    min-height: 320px;
  }
  .problem__text {
    padding: 48px 28px;
  }
}

/* ------------------ case side process section 3 ---------------------------------------*/

.proces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 72px 56px;
  background: var(--white);
}

.proces__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* animate elements inside proces coming from the left */
.proces__left,
.proces__desc {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.proces.visible .proces__left,
.proces.visible .proces__desc {
  opacity: 1;
  transform: translateX(0);
}
.proces__left {
  transition-delay: 0.06s;
}
.proces__desc {
  transition-delay: 0.18s;
}

.proces__line {
  display: block;
  width: 32px;
  height: 5px;
  background: #cb693c;
  border-radius: 5px;
  flex-shrink: 0;
}

.proces__line_om {
  display: block;
  width: 32px;
  height: 5px;
  background: #cb693c;
  border-radius: 5px;
  flex-shrink: 0;
}

.proces__title,
.proces__title_om {
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 46px);
  color: var(--dark);
  margin-left: 20px;
}

.proces__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 420px;
  margin-left: 20px;
}

@media (max-width: 680px) {
  .proces {
    grid-template-columns: 1fr;
    padding: 48px 28px;
  }
  .proces__title {
    align-self: center;
    margin-left: -64px;
    text-align: center; /* center the title text horizontally */
    width: 100%;
  }
  .proces__line {
    margin-left: 32px;
  }

  .proces__line_om {
    margin-left: 32px;
  }

  /* center the short description under the title for a cleaner mobile layout */
  .proces__desc {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    max-width: none;
  }
}

@media (max-width: 400px) {
  .proces__line_om {
    display: none;
  }
  .problem__title_om {
    margin: 0;
  }
}

/* ------------------- case side bottom section 4 ----------------------------------------------------- */

.bottom-pic {
  border-radius: 8px;
  overflow: hidden;
  max-width: 1200px;
  height: clamp(550px, 30vw, 400px);
  margin: 40px auto 40px;
  width: calc(100% - 48px);
}

.bottom-pic img {
  display: block;
  width: 100%;
  height: 100%; /* fill container height */
  object-fit: cover; /* preserve aspect ratio, crop to fill */
}

.bottom-pic {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.bottom-pic.visible {
  opacity: 1;
  transform: translateY(0);
}

.bottom-pic {
  transition-delay: 0.12s;
}

.bottom-video {
  border-radius: 8px;
  overflow: hidden;
  max-width: 1200px;
  height: clamp(550px, 30vw, 400px);
  margin: 40px auto 40px;
  width: calc(100% - 48px);
}

.bottom-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.bottom-pic iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* --------------------------- 2 videoer ved siden af hinanden -------------------------------- */

.video-row {
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding: 2rem 1rem;
}

.video-card {
  width: 48%;
}

.video-card iframe {
  width: 100%;
  height: calc(45vw * 585 / 329);
  max-height: 600px;
  border-radius: 15px;
  display: block;
}

@media (max-width: 768px) {
  .video-row {
    flex-direction: column;
    align-items: center;
  }

  .video-card {
    width: 100%;
    max-width: 329px;
  }

  .video-card iframe {
    height: calc(100vw * 585 / 329);
    max-height: 585px;
  }
}