@media (max-width: 767px) {
  /* Typography scaling */
  h1,
  .h_2_56_400_w {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  h2,
  .h_2_400_56_w {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
  .parag_48_400_w,
  .parag_48_400_w_60 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
  .parag_20_400_w_60 {
    font-size: 16px !important;
  }

  /* Navigation logo smaller */
  .container_nav_bar img {
    max-width: 220px !important;
  }

  /* Navigation links vertical (optional) */
  .wrap_nav_links {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px 15px !important;
  }

  /* Benefits grid single column */
  .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Cards full width */
  .benefit-card,
  .card_team,
  .card_team_back {
    width: 100% !important;
    max-width: none !important;
  }

  /* Team section reset scale */
  .section_team {
    transform: none !important;
  }

  /* Badge images smaller */
  .wrap_badges img {
    height: 160px !important;
  }

  /* Swiper slides full width */
  .swiper-slide {
    width: 80% !important;
  }

  /* Hero Section Mobile Adjustments */
  .section_h_m { /* Common hero section class */
    min-height: 0 !important; 
    height: auto !important;   
    padding-top: 0 !important; 
  }

  /* The main media container div (first child of section_h_m) */
  .section_h_m > div:nth-child(1) {
    position: relative !important; 
    width: 100% !important;
    height: auto !important;       
  }

  /* For the div that renders the background image (child of the above) */
  .section_h_m > div:nth-child(1) > div[style*="background-image"] {
    position: relative !important; 
    width: 100% !important;
    padding-top: 56.25%; /* Aspect ratio 16:9 ( (9/16)*100% ). Adjust if your images differ. */
    height: 0 !important; 
    background-size: 100% auto !important; 
    background-position: top center !important;
    background-repeat: no-repeat !important;
    /* Ensure inline styles for height on this element are overridden */
    min-height: 0 !important; /* Override any inline min-height if present */
  }

  /* For the video element (direct child of the media container) */
  .section_h_m > div:nth-child(1) > video {
    display: block !important;
    width: 100% !important;
    height: auto !important;    
    object-fit: unset !important; 
    position: relative !important; 
  }

  /* Overlay: dark tint for images */
  .section_h_m > div:nth-child(1) > div[style*="background: rgba(10, 25, 53, 0.08)"] {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
  }
  /* Overlay: gradient */
  .section_h_m > div:nth-child(1) > div[style*="background: linear-gradient"] {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    height: 40%; /* Default gradient height, adjust if needed */
  }
  /* Specific gradient height for news page video */
  .section_h_m > div:nth-child(1) > div[style*="height: 60%"][style*="background: linear-gradient"] {
      height: 60% !important;
  }

  /* Text content container (typically the second direct child of section_h_m) */
  .section_h_m > div[style*="z-index: 2"],
  .section_h_m > div[style*="z-index: 1"]:not(:first-child) { /* Ensures not to target media container on news page */
     position: absolute !important; /* Changed from relative */
     top: 0 !important;
     left: 0 !important;
     width: 100% !important;
     height: 100% !important; /* Covers the media container */
     padding: 0 !important; /* Padding will be on inner elements */
     display: flex !important; 
     flex-direction: column !important;
     justify-content: flex-end !important; /* Aligns .max_width (or other direct child) to the bottom */
     align-items: center !important; /* Centers .max_width (or other direct child) horizontally */
     text-align: center;
     margin-top: 0 !important; /* Ensure no top margin */
     z-index: 3 !important; /* Above media (1) and overlays (around 2) */
     pointer-events: none; /* Allows clicks to pass through empty areas of this container */
  }

  /* Children of the absolutely positioned text container should be interactive and take full width */
  .section_h_m > div[style*="z-index: 2"] > *,
  .section_h_m > div[style*="z-index: 1"]:not(:first-child) > * {
      pointer-events: auto;
      width: 100%; /* Ensures .max_width takes available space */
      max-width: 1000px; /* Keeps consistency with desktop max-width for text block */
  }

  /* Adjust the inner container holding the actual text for better spacing on mobile */
  .section_h_m .container_h_m {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 2vh !important; /* Reduced from 8vh to decrease space below */
    margin-bottom: 0 !important; /* Override any bottom margin */
    height: auto !important; /* Ensure height is not 100% if it was set by inline styles previously */
    width: 100% !important; /* Ensure it uses the width from its parent (.max_width) */
    box-sizing: border-box; /* Include padding in width/height calculations */
  }

  /* For technology page, the h1 has a large margin-bottom, reduce it */
  html body .section_h_m .wrap_logos_title_h_m h1.h_2_56_400_w[style*="margin-bottom: 9cm"] {
      margin-bottom: 2vh !important;
  }
  html body .section_h_m .wrap_logos_title_h_m p.parag_48_400_w[style*="margin-top: -1cm"] {
      margin-top: 1vh !important;
  }

  /* Specific gradient for technology.html hero image */
  .section_h_m > div:nth-child(1) > div[style*="background-image: url('assets/images/Projekt_Marc_Bild1.jpeg')"] {
    position: relative; /* Ensure it can contain an absolutely positioned pseudo-element or child for gradient */
  }
  .section_h_m > div:nth-child(1) > div[style*="background-image: url('assets/images/Projekt_Marc_Bild1.jpeg')"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%; /* Adjust height of the gradient overlay as needed */
    background: linear-gradient(to bottom, rgba(10, 25, 53, 0) 0%, #0a1935 70%);
    z-index: 2; /* Ensure it's above the image but below text */
  }

  /* Ensure the dark tint overlay is below the new gradient if it exists on this specific element */
  .section_h_m > div:nth-child(1) > div[style*="background-image: url('assets/images/Projekt_Marc_Bild1.jpeg')"] > div[style*="background: rgba(10, 25, 53, 0.3)"] {
      z-index: 1 !important; 
  }

  /* Careers page: Restrict width of hero title container to force line break on mobile */
  html body main.page_main section.section_why > div[style*="top: 320px"][style*="text-align: center"] {
    padding-left: 12% !important; /* Adjusted side padding */
    padding-right: 12% !important; /* Adjusted side padding */
    box-sizing: border-box !important;
  }
}

/* Desktop rule to move "Our Technology" title closer to image edge */
@media (min-width: 768px) {
  html body .section_h_m .wrap_logos_title_h_m h1.h_2_56_400_w[style*="margin-bottom: 9cm"] {
      margin-bottom: 1.5rem !important;
  }
  html body .section_h_m .wrap_logos_title_h_m p.parag_48_400_w[style*="margin-top: -1cm"] {
      margin-top: 0.5rem !important;
  }
}

/* Adjust positioning for specific text elements on Technology page */

/* Move "Our Technology" hero text block (H1 and its P subtitle) down by 3cm */
html body .section_h_m .wrap_logos_title_h_m[style*="max-width: 800px"] {
    margin-top: 3cm !important;
}

/* Move "DBD (Dielectric Barrier Discharge)..." paragraph in "section_why" down by 3cm */
/* Original inline style is margin-top: -1cm. New margin-top will be -1cm + 3cm = 2cm */
html body .section_why .wrap_title_why p.parag_48_400_w[style*="margin-top: -1cm"] {
    margin-top: 2cm !important;
}