.slider {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
}

.slide {
  min-width: 100%;
  flex: 1;
  display: none;
  position: relative; /* Ensure the text is positioned relative to the slide */
}

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

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background: none;
  color: black;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 50px;
  font-weight: 700;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* attempt to add text */

.text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white; /* Text color */
}

.text p {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  .text {
    bottom: 10px; /* Adjust position for smaller screens */
    left: 10px; /* Adjust position for smaller screens */
  }

  .text .h1 {
	  
	color: #fff;
    font-size: 60px;
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}

  .text p {
    font-size: 14px; /* Adjust font size for smaller screens */
  }
}