/*

 No custom CSS thanks to Tailwind!
 tailwindcss.com

*/
html,
body {
  width: auto !important;
  overflow-x: hidden !important;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  display: flex;
  align-items: flex-start; /* Aligns items to the top */
  justify-content: flex-end; /* Aligns items to the left */
  padding: 10px; /* Padding around the container */
}

.button {
  width: 29%;
  height: 4%;

  background-color: green; /* Blue background */
  color: #ffffff; /* White text */
  border: none;
  padding: 10px 20px; /* Padding around the text */
  border-radius: 5px; /* Rounded corners */

  font-size: 8px; /* Larger text */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth background color change */
}

/* * {
  box-sizing: border-box;
} */

.main {
  min-height: 50vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider {
  margin-right: 40px;
  position: relative;
  width: 100%;
  height: 670px;
  overflow: hidden;
}
.item {
  position: absolute;
  width: 370px;
  height: 500px;
  text-align: justify;
  background-color: #4b5c50;
  border-radius: 10px;
  padding: 20px;
  transition: 0.5s;
  left: calc(50% - 110px);
  top: 0;
}
#next,
#prev {
  position: absolute;
  top: 40%;
  color: #000;
  background-color: transparent;
  border: none;
  font-size: xxx-large;
  font-family: monospace;
  font-weight: bold;
  left: 50px;
}
#next {
  left: unset;
  right: 50px;
}
@media screen and (max-width: 768px) {
  .slider {
    width: 100%; /* Adjust the width */
    height: 300px; /* Adjust the height */
  }
  .item {
    width: 200px;
    height: 270px;
    padding: 15px;
  }
}

/* -------------------------------------------------- */