.slider {
      width: 100%;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
    .slide {
      width: 100%;
      height: 100%;
      position: absolute;
      transition: all 0.5s;
    }
    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 10px;
      text-align: center;
    }
    .header-gradient {
      background: linear-gradient(to bottom, #4FC3F7, #B2EBF2);
    }
    .footer-gradient {
      background: linear-gradient(to bottom, #B2EBF2, #FFF59D);
    }
    .nav-gradient {
      background: linear-gradient(to bottom, #4FC3F7, #B2EBF2);
    }