/*
input,
textarea,
img,
video,
div,
section,
a {
  border-radius: 0 !important;
} */

  html, body {
    font-family: 'Source Sans 3', sans-serif;
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    color: #543A3F;
    margin: 0;
    padding: 0;
  }

  body {
  padding-top: 56px; /* Same as navbar height */
}

  h1, h2, h3, h4, h5, h6, p, div {
    margin: 0;
    padding: 0;
    font-weight: inherit;
  }

  .header, .subheader, .title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
  }

  .header {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .subheader {
    font-size: 2.6rem;
    margin-bottom: 1rem;
  }

  .title {
    font-size: 1.7rem;
    margin-bottom: 1rem;
  }

  .subtitle {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    /*font-weight: 700;*/
    color: #695357;
  }

  .body {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }

  .body.small {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
  }

  .caption {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
  }

  .caption.blue{
    color: #543A3F;
  }

  @media (max-width: 768px) {
    .header {
      font-size: 2.6rem;
    }

    }


  /* ==================Buttons =====================*/

      .nav-button {
        color: #B17D87; /*pinkish: #B17D87*/
        font-weight: 600;
        letter-spacing: 0.05rem;
        padding: 5px 10px;
        text-decoration: none;
      }

      .nav-button.active {
        color: #B17D87;
        background-color: transparent;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.5rem;
      }

      .nav-button.inactive {
        background-color: transparent;
      }

      .nav-button:hover {
        color: #543A3F;
      }


      .primary-button {
          font-weight: 700;
          font-size: 1.1rem;
          border-radius: 10px;
          background-color: #6200EE;
          color: #FFFFFF;
          padding: 15px 20px;
          border: 2px solid transparent;
          cursor: pointer;
          margin-top: 10px;
          margin-bottom: 10px;
          text-decoration: none;
          box-sizing: border-box;
      }

      .primary-button:hover {
        background-color: #3700B3;
      }

      .secondary-button {
        font-weight: 700;
        font-size: 1.1rem;
        border-radius: 10px;
        background-color: #FFFFFF;
        color: #6200EE;
        padding: 15px 20px;
        border: 2px solid #6200EE;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 10px;
        text-decoration: none;
        box-sizing: border-box;
      }

      .secondary-button:hover {
        background-color: #F2E7FE; /* Optional soft hover background */
        border-color: #3700B3;
        color: #3700B3;
      }

      @media (max-width: 768px) {
        .primary-button,
        .secondary-button {
          width: 100%;
          text-align: center;
          display: block;
          margin-left: auto;
          margin-right: auto;
        }
      }

      a.text-link {
        color: #6200EE;
        text-decoration: none;
      }

      a.text-link:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.3rem;
      }

      a {
        text-decoration: none;
      }

      .icon {
        position: relative;
        top: -1px;
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }


      /* ==================Video =====================*/


      video {
          width: 100%;
          height: auto;
          object-fit: cover;
          margin: 0; /* Remove default margin */
          padding: 0; /* Remove default padding */
          display: block; /* Remove any extra space below the image/video */
        }

/*
        .phone-container video {
            max-width: 100%;
            height: auto;
            object-position: top; /* Crop from the top
            clip-path: inset(0 0 2px 0); /* Crop 2px from the bottom
        }

*/

      /* ==================App Video with Playbutton =====================*/

      .phone-container {
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 350px; /* adjust to your layout */
        overflow: hidden;
        aspect-ratio: 9 / 16; /* optional for mobile screens */
        cursor: pointer;
      }


      .phone-container video {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        clip-path: inset(0 0 2px 0); /* your original crop */
      }

      .play-button {
        background: url('images/icons/play_arrow.svg') no-repeat center center;
      }

      .replay-button {
        background: url('images/icons/replay.svg') no-repeat center center;
      }

      /* Centered play button */
      .play-button, .replay-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background-size: 48px 48px;
        background-color: rgba(0, 0, 0, 0.4);
        border: none;
        border-radius: 50%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        /* Center and size the SVG background */
        background-size: 40px 40px;
      }

      .play-button.hidden,
      .replay-button.hidden {
        display: none;
      }


      /* ==================Navigation bar =====================*/

      #stickynavbar {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2;
      transition: top 0.3s;
    }


      .top-navigation {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #FFFFFF;
          padding: 8px;
          padding-bottom: 0px;
          /*margin-bottom: 3vw;*/
          /*position: relative;*/
          /*z-index: 2;*/
          background-color: white;
      }

      /*
      .page-body-small {
        max-width: 800px;
        margin: auto;
      }
      */

      .nav-left,
      .nav-center,
      .nav-right {
        flex: 1;
        display: flex;
        justify-content: center;
      }

      .nav-left {
          /*flex-grow: 1;
          flex-basis: 0;*/
          display: flex;
          justify-content: flex-start;
      }

      .nav-right {
          /*flex-grow: 1;
          flex-basis: 0;*/
          display: flex;
          justify-content: flex-end;
      }

      .website-logo {
        width: auto;
        height: 40px;
      }

      .website-logo: hover {
        width: auto;
        height: 40px;
      }

      .website-logo:hover {
        content: url('images/icons/logo-lena-heinrich-hover.svg');
      }

      /*

      .language-button {
          font-family: 'Inter', sans-serif;
          font-size: 10pt;
          font-weight: 700;
          border: none;
          background: none;
          cursor: pointer;
          text-transform: uppercase;
          letter-spacing: 0.049em;
      }

      .language-button.active {
          color: #B17D87;
          text-decoration: underline;
          text-decoration-thickness: 2px;
          text-underline-offset: 0.5rem;
      }

      .language-button.inactive {
          color: #B17D87;
      }

      .language-button:hover {
          color: #543A3F;
      }

      */




      /* ==================Landing page header =====================*/

      .main-body {
          margin-bottom: 100px;
          max-width:1200px;
          margin:auto;
          padding:16px;
      }

      .wide-main-body {
          margin-bottom: 100px;
          max-width:1400px;
          margin:auto;
          padding:16px;
      }

      /* ======================Gallery ===========================*/

      .gallery {
          display: grid;
          z-index: 0;
          grid-template-columns: repeat(3, 1fr);
          gap: 3vw;
          margin-bottom: 3vw;
          margin-top: 2vw;
      }


      @media (max-width: 900px) {
        .gallery {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 600px) {
        .gallery {
          grid-template-columns: repeat(1, 1fr);
        }
      }

      .card {
        position: relative; /* 👈 This makes absolutely positioned children anchor to it */
        z-index: 1;
      }

      .card-link {
          color: inherit;
          text-decoration: none;
          cursor: pointer;
      }

      @media (hover: none) and (pointer: coarse) {
        .card-title {
        }
      }

      .card:hover .card-title {
        text-decoration: underline;
        text-underline-offset: 0.3rem;

      }

      /*
      .card-link.big {
        grid-column: span 2;
      }
      */

      .card img {
          width: 100%;
          height: 350px;
          object-fit: cover;
          z-index: 2;
      }


      .card-content {
          padding: 16px;
          position: relative;
          z-index: 3;
          backdrop-filter: blur(20px);
          margin-top: -70px;
          background-image: linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgb(255, 255, 255) 100%);
      }

      .tag {
          position: absolute;
          top: 244px;
          right: 16px;
          z-index: 4;
          display: inline-block;
          font-weight: 500;
          font-size: 1rem;
          border-radius: 8px;
          background-color: #E53935; /*, red: #E53935, brown: #543A3F, pinkish: #695357 */
          color: #FDF5F7;
          padding: 1px 6px;
          text-decoration: none;
      }


/*
      @media (max-width: 400px) {
        .card-link.big .card-link.one {
          grid-column: span 1;
        }
      }
      */

/* FLEXBOX CONTAINER---------------------------------- */

  .flexbox-container {
    display: flex; /* Use flexbox to align items */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: space-between; /* Space between items */
    gap: 4vw;
    margin-bottom: 80px; /* Adjust margin as needed */
}



.content-wide {
    flex: 3; /* Allow this to take available space */
    min-width: 300px; /* Minimum width for text content */
}

.content-small {
    /*margin-left: 50px; /* Space between text and note */
    align-self: flex-start; /* Align note at the start */
    flex:1;
}

.content-middle {
    flex: 2; /* Allow this to take available space */
  /*  min-width: 300px; /* Minimum width for text content */
}

.content-small p {
    /*padding: 10px; /* Optional: add padding */
}

/* Responsive styles */

@media (max-width: 1024px) {

  .flexbox-container {
      flex-direction: column; /* Stack items vertically on smaller screens */
      margin-bottom: 50px;
  }

  .content-small {
  margin-left: 0; /* Remove left margin on mobile */
  margin-right: 0; /* Remove right margin on mobile */
  margin-top: 10px; /* Add top margin for spacing */
  }
}

/* Responsive styles */
@media (max-width: 1024px) {
    .content-small {
    order: 1;
    }
    .content-middle {
    order: 2;
    }
    .content-wide {
    order: 3;
    }
}

/* Videos row: keep videos side-by-side */
.videos-row {
  display: flex;
}

@media (max-width: 600px) {
  .videos-row {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* -----------------Image container ---------------*/

.image-container {
    display: flex;
    flex-wrap: wrap; /* Allows images to wrap to the next line if necessary */
    gap: 20px; /* Space between images */
    align-content: stretch;
}

.image-container img {
    flex: 1;
    min-width:250px;
    width: 100%;
    height: 250px;
    object-fit: cover;
}


.single-image-container img {
  min-height: 200px;
  width: 100%;
  height: auto;
  max-height:600px;
  object-fit: cover;
}

@media (max-width: 900px) {

  .image-container img {
      flex: 1;
      min-width:150px;
      width: 100%;
      height: 200px;
      object-fit: cover;
  }

  .single-image-container img {
    min-height: 400px;
  }

}

/*.spacing img {
  margin-bottom: 5vw;
} */

/* -----------------Layout ---------------*/

.spacing {
  margin-bottom: 80px;
}

.spacing-small {
  margin-bottom: 40px;
}

@media (max-width: 1200px) {
  .spacing {
    margin-bottom: 40px;
  }

  .spacing-small {
    margin-bottom: 20px;
  }
}

.centered{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px; /* Adjust the horizontal AND vertical gap */
}

@media (max-width: 600px) {
  .centered {
    gap: 0px;
  }
}

/* -----------------Image scroll to the right ---------------*/
.image-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.image-scroll img {
  height: auto;
  height: 194px; /* or the actual width of your image */
  display: block;
}

/* -----------------Grid for little illustrations ---------------*/

.content-illustration {
  display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px; /* space between images */
    padding: 20px;

}

.content-illustration img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* makes all images square */
}

@media (max-width: 600px) {
  .content-illustration {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* -----------------locked project overlay ---------------*/

.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.hidden {
  display: none;
}

.overlay-content {
  background-color: white;      /* Make background white */
  padding: 2rem;                /* Add some spacing */
  border-radius: 8px;           /* Rounded corners */
  max-width: 400px;             /* Optional width */
  width: 90%;                  /* Responsive width */
  box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* subtle shadow */
}

@media (max-width: 600px) {
  .overlay-content {
    margin: 16px;
  }
}

.image-placeholder {
  width: 156px;
  height: 156px;
  margin: 16px auto 1rem;
  border-radius: 8px;
}

.image-placeholder img {
  width: 100%;
  height: auto
}

.overlay-buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* -------------------hover effect image -----------------*/
#laptopImage.hover-effect:hover {
  content: url('images/about/laptop_2.png');
}