.breadcrumb-wrapper {
      padding: 20px 0;
   }

   .breadcrumb-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
   }

   .breadcrumb-clean-energy {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      font-size: 15px;
      color: #004b87;
      /* Linde blue tone */
   }

   .breadcrumb-item a {
      text-decoration: none;
      color: #0077CC;
      /* Linde link color */
      font-weight: 600;
   }

   .breadcrumb-item a:hover {
      text-decoration: underline;
   }

   .breadcrumb-separator {
      margin: 0 10px;
      color: #666;
      font-size: 16px;
   }

   .breadcrumb-item.current {
      color: #444;
      font-weight: 500;
   }

   /* Responsive adjustments */
   @media (max-width: 600px) {
      .breadcrumb-clean-energy {
         font-size: 14px;
      }

      .breadcrumb-separator {
         margin: 0 6px;
      }
   }

   .hero-text-block {
      max-width: 1200px;
      padding: 25px 180px 15px;
      margin: 0 auto;
      box-sizing: border-box;
   }

   /* Eyebrow text style */
   .hero-eyebrow {
      margin: 0 0 12px 0;
      font-size: 3rem;
      font-weight: 200;
      color: #002d54;
   }

   /* Page title style */
   .hero-title {
      margin: 0;
      font-size: 5rem;
      font-weight: 200;
      color: #002d54;
   }

   /* Full width image wrapper */
   .hero-image-wrapper img {
      width: 1200px;
      height: 400px;
      display: block;
      margin: 0 auto;
      object-fit: cover;
   }

   @media (max-width: 1200px) {
      .hero-image-wrapper img {
         width: 100%;
         height: 400px;
         margin: 20px 0 0 0;

      }

      .hero-text-block {
         padding: 25px 20px 15px;

      }

   }

   /* Mobile adjustments */
   @media (max-width: 600px) {
      .hero-title {
         font-size: 32px;
      }

      .hero-eyebrow {
         font-size: 2rem;
      }

      .hero-image-wrapper img {
         height: 200px;
         object-fit: cover;
      }
   }

   /* Section spacing */
   .experience-section {
      background: #ffffff;
      padding-top: 60px;
   }

   /* Two-column layout */
   .experience-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 180px;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      /* text slightly wider */
      gap: 40px;
      align-items: start;
   }

   /* Text column */
   .experience-text h2 {
      margin: 0 0 18px;
      color: #0A2E4A;
   }

   .experience-text p {
      margin: 0;
      color: #002d54;
      font-size: 1.8rem;
      line-height: 2.7rem;
      max-width: 680px;
   }

   /* Image collage container */
   .experience-images {
      position: relative;
      width: 100%;
      min-height: 420px;
      /* ensures space for overlap */
   }

   /* Back (large) image */
   .img-large {
      display: block;
      width: 100%;
      height: 300px;
      border-radius: 0px;
      object-fit: cover;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
   }

   /* Shared styles for overlapping small images */
   .img-small {
      position: absolute;
      display: block;
      width: 230px;
      height: auto;
      border: 6px solid #fff;
      /* white frame like the screenshot */
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
      background: #fff;
      object-fit: cover;
      border-radius: 0px;
   }

   /* Exact overlap positioning to match the screenshot */
   .img-small-1 {
        z-index: 2;
        top: 25%;
        left: 240px;
        height: 200px;
        object-fit: cover;
   }

   .img-small-2 {
      /* lower-left image (truck) */
      bottom: 20px;
      left: 160px;
      /* width: 250px; */
      height: 180px;
      object-fit: cover;
   }

   /* Responsive behavior: stack on smaller screens */
   @media (max-width: 960px) {
      .experience-container {
         grid-template-columns: 1fr;
      }

      .experience-images {
         min-height: unset;
         margin-top: 10px;
      }

      /* On mobile, place the small images below the large image */
      .img-small,
      .img-small-2 {
         position: static;
         width: 48%;
         margin-top: 14px;
         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
      }

      .experience-images {
         display: flex;
         flex-wrap: wrap;
         gap: 4%;
      }
   }

   #experience-heading {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 180px;
      text-align: left;
      font-size: 5rem;
      margin-bottom: 25px;
      font-weight: 200;

   }


   .two-column-hero {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      min-height: 600px;
   }

   .hero-text {
      width: 50%;
      background-color: #003256;
      color: #ffffff;
      padding: 60px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .hero-text h2 {
      margin-bottom: 20px;
      font-weight: 200;
      font-size: 3rem;
   }

   .hero-text p {
      font-size: 2rem;
      line-height: 1.5;
      margin-bottom: 30px;
   }

   .hero-link {
      font-size: 2rem;
      color: #ffffff;
      text-decoration: none;
      font-weight: 600;
   }

   .hero-link:hover {
      text-decoration: none;
   }

   .hero-image {
      width: 50%;
   }

   .hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   #why-hydrogen-text,
   #why-hydrogen-a {
      color: white;
      font-size: 1.8rem;

   }
   #why-hydrogen-a{
    font-size: 2.5rem;
    text-decoration: none;
    font-weight: 200;
   }
    #why-hydrogen-a:hover{

        color: rgb(226, 226, 226);

    }

   /* -------- Responsive ---------- */

   @media (max-width: 900px) {
      .two-column-hero {
         flex-direction: column;
      }

      .hero-text,
      .hero-image {
         width: 100%;
      }

      .hero-text {
         padding: 40px 25px;
      }

      #experience-heading {
         font-size: 32px;
      }
   }

   .two-column-hero-alt {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      min-height: 600px;
   }

   .hero-alt-text {
      width: 50%;
      background-color: #f4f4f4;
      color: #002d54;
      padding: 60px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .hero-alt-text h2 {
      margin-bottom: 20px;
      font-weight: 200;
      font-size: 3rem;
   }

   .hero-alt-text p {
      font-size: 1.8rem;
      line-height: 1.5;
      margin-bottom: 30px;
   }

   .hero-alt-link {
      font-size: 2.5rem;
      color: #0077CC;
      text-decoration: none;
      font-weight: 200;
      text-decoration: none;
   }

   .hero-alt-link:hover {
      color: #004b87;
      text-decoration: none;
   }

   .hero-alt-image {
      width: 50%;
   }

   .hero-alt-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }


   /* -------- Responsive ---------- */

   @media (max-width: 900px) {
      .two-column-hero-alt {
         flex-direction: column;
      }

      .hero-alt-text,
      .hero-alt-image {
         width: 100%;
      }

      .hero-alt-text {
         padding: 40px 25px;
      }

      .hero-alt-text h2,
      .hero-text h2 {
         font-size: 3rem;
      }

      .hero-alt-text p,
      .hero-alt-link,
      #why-hydrogen-text,
      #why-hydrogen-a,
      .experience-text p {
         font-size: 1.6rem;
      }
   }

   /* Block wrapper */
   .linde-partner-carousel {
      width: 100%;
      padding: 8px 16px 24px;
      background: #ffffff;
      box-sizing: border-box;
   }

   /* Title centered at the top */
   .carousel-title {
      text-align: left;
      color: #002d54;
      font-size: 4rem;
      font-weight: 600;
      max-width: 1200px;
      margin: auto;
      padding-bottom: 40px;
      padding-top: 40px;
   }

   /* Carousel layout */
   .carousel {
      margin: 0 auto;
      position: relative;
      width: 1200px;
   }

   .carousel-viewport {
      overflow: hidden;
      width: 100%;
   }

   .carousel-track {
      display: flex;
      transition: transform 420ms ease;
      will-change: transform;
   }

   /* Each "page" of three cards */
   .carousel-slide {
      min-width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      box-sizing: border-box;
   }

   /* Card styles */
   .card {
      border: 1px solid #e6e6e6;
      background: #fff;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      background-color: #f4f4f4;

   }

   .card-image {
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #f5f7fa;
   }

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

   .card-body {
      padding: 18px 18px 22px;
      color: #002d54;
   }

   .card-title {
      font-size: 2rem;
      font-weight: 700;
      margin: 0 0 20px;
      color: #002d54;
      font-weight: 200;
   }

   .card-text {
      font-size: 1.8rem;
      line-height: 1.55;
      margin: 0 0 14px;
      color: #002d54;
   }

   .card-cta {
      color: #0077CC;
      text-decoration: none;
      font-weight: 600;
      font-size: 1.125rem;
   }

   .card-cta:hover,
   .card-cta:focus {
      text-decoration: none;
   }

   /* Controls at the bottom-left */
   .carousel-controls {
      display: flex;
      gap: 8px;
      margin-top: 16px;
   }

   .carousel-btn {
      border: 1px solid #0077CC;
      background: #ffffff;
      color: #0077CC;
      width: 52px;
      height: 45px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
   }

   .carousel-btn:hover:not(:disabled) {
      background: #f1f5f9;
   }

   .carousel-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
   }

   /* --------- Responsive --------- */
   @media (max-width: 1200px) {
      .two-column-hero {
         width: 100%;
      }

      .two-column-hero-alt {
         width: 100%;
      }

      #experience-heading {
         padding: 0 20px;
      }

      .experience-container {
         padding: 0 20px;
      }

      /* Carousel layout */
      .carousel {
         width: 100%;
      }

      .card-title {
         margin: 0 0 20px;
      }

      .carousel-title {
         padding-top: 15px;
      }
   }

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

   @media (max-width: 640px) {
      .carousel-slide {
         grid-template-columns: 1fr;
      }

      .card-title {
         font-size: 1.5rem;
      }

      .card-text {
         font-size: 1rem;
      }

      .carousel-title {
         font-size: 3rem;
      }
   }