.entire-quote-section {
  background-color: rgb(245, 230, 189);
  /* height: 40vh; */
  font-size: 1em;
  display: flex;
  justify-content: center;     /* Center the container vertically */
  align-items: center;         /* Center the container horizontally */
  padding: 2em 0;
}

.quotes-container {
  display: flex;
  flex-direction: column;      /* Stack the divs vertically */
  align-items: center;         /* Align the divs horizontally */
  justify-content: center;     /* Align the divs vertically */
  width: 80%;                  /* Set the width of the quotes container */
}

.quotes-carousel {
  display: flex;
  justify-content: center;     /* Center the carousel horizontally */
  align-items: center; 
  position: relative;          /* For absolute positioning of carousel items */

  width: 100%;
  padding: 5%;
  border-radius: 0.625em;         /* Optional: Add rounded corners */
}

.quotes-carousel-item {
  text-align: center;
  font-style: italic;
  position: absolute;
  width: 100%;
  opacity: 0;                  /* Initially hidden */
  transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity */
}

.quotes-carousel-item.active {
  opacity: 1;                  /* Only the active item is fully visible */
}

.quote {
  font-size: 1.5em;
  font-weight: 200;
}

.author {
  font-size: 1.2em;
  color: #666666;
  margin-bottom: 0;
}

.quotes-pagination {
  display: flex;
  justify-content: center;     /* Center the pagination buttons */
  align-items: center;
  margin-top: 1.25;            /* Add some space between the carousel and pagination */
  padding: 0.625em;
  border-radius: 0.3125em;          /* Optional: Rounded corners for pagination */
}

.quotes-pagination button {
  border: none;
  background-color: transparent;
  color: #666666;
  font-size: 1.2em;
  cursor: pointer;
  padding: 0.3125 1em;       /* Increased padding to replace the margin effect */
  margin: 0;               /* Remove the margin */
  transition: background-color 0.3s ease; /* Smooth transition for hover */
}

button.active {
  /* font-weight: bold; */
  color: #fff;             /* Change text color to white for contrast */
  background-color: black;   /* Active background color */
  border-radius: 5px;      /* Optional: Adds rounded corners */
}

button:hover {
  color: #000;
}

.next, .prev {
  z-index: 3;
}

.quotes-page-numbers {
  display: flex;
  gap: 0.625em;                   /* Space between page numbers */
}


/* Media query for tablets */
@media (width <= 1000px) {

}

@media (width <= 600px) {
  .quotes-pagination {
    padding: 0;
  }
  button {
    padding: 0.3125em .5em;       /* Increased padding to replace the margin effect */
  }

}

/* Media query for mobile devices */
@media (width <=  480px) {
  .quote{
    font-size: 1em;
  }
  .author {
    font-size: 1em;
  }
  button {
    font-size: 1em;
  }
  .entire-quote-section {
    height: 40vh;
  }
  .quotes-pagination button {
    font-size: 1em;
  }
  .quotes-container {
    width: 90%;                  /* Set the width of the quotes container */
  }
}