/* Your custom styles will go here */
  .carousel {
      max-width: 100%;
      margin: 0 auto;
      height: 100%;
      overflow: hidden;
  }

  .carousel img {
      width: 100%;
      max-height: 608px;
      object-fit: cover;
  }

  .slick-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      /* Remove the default list style */
      padding: 0;
      margin: 40px 0px;
  }

  .slick-dots li {
      margin: 0 15px;
  }

  .slick-dots li button.dot {
      width: 15px;
      height: 15px;
      background-color: #ffffff;
      border: none;
      border-radius: 50%;
      padding: 0;
      transition: all 0.3s;
  }

  .slick-dots li.slick-active button.dot {
      width: 40px;
      border-radius: 35%;
      background-color: #ffffff;
  }

  .slick-dots li.slick-active button:before {
      opacity: .75;
      color: transparent;
  }

  .slick-dots li button:before {
      font-family: 'slick';
      font-size: 6px;
      line-height: 20px;
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      content: '•';
      text-align: center;
      opacity: .25;
      color: rgba(0, 0, 0, 0);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }