.slider {
      position: relative;
      width: 100%;
      height: 100vh; /* Full viewport height */
      overflow: hidden;
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 100%; /* Start off-screen to the right */
      display: flex;
      align-items: center;
      justify-content: flex-start; /* Text on left side */
      padding-left: 5%;
      background-size: cover;
      background-position: center;
      color: white;
      transition: left 1s ease-in-out;
    }

    .slide.active {
      left: 0; /* Show active slide */
    }

    .slide.prev {
      left: -100%; /* Move previous slide out to the left */
    }

    .slide h1 {
      /* font-size: 3rem; */
      max-width: 400px;
      text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
      text-decoration: none; /* override global .active underline */
    }

    /* Also ensure active slide heading isn't underlined by global .active rule */
    .slider .slide.active h1 { text-decoration: none; }

    /* Stronger override: .active on parent may apply text-decoration to descendants.
       Use !important and target descendants to ensure no underline appears. */
    .slider .slide.active,
    .slider .slide.active h1,
    .slider .slide.active * {
      text-decoration: none !important;
    }