* {
      box-sizing: border-box;
    }

   
    .fade-slider {
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
    }

    .fade-slide {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      top: 0;
      left: 0;    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

   
    .slider {
      position: relative;
      width: 100%;
      height: 60vh;
      overflow: hidden;
    }

    .slides {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 1s ease-in-out;
    }

    .slide {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
    }

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

    .dots {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .dot.active {
      background-color: #fff;
    }

    @media (max-width: 768px) {
      .slider {
        height: 40vh;
      }
    }
      opacity: 0;
      transition: opacity 1s ease-in-out;
      z-index: 0;
    }

    .fade-slide.active {
      opacity: 1;
      z-index: 1;
    }

    .dots {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 2;
    }

    .dot {
      height: 12px;
      width: 12px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .dot.active {
      background-color: #fff;
    }