html {
  padding: 2%;
  color: white;
}

body {
  /* background-color: #f3cece; */
  color: white;
  margin: 0;
  padding: 0;
  font-family: "El Messiri", sans-serif;
}

h1 {
  text-align: center ;
  color: pink;
  font-family: "Neonderthaw", cursive;
  font-weight: 400;
  font-style: normal;
}

/* .container {
  background-color: rgb(191, 255, 255);
  margin-top: 50px;
  margin-bottom: 50px;
} */

.form-select-sm {
  background-color: transparent;
  color: white;
  border: transparent;
}

.card {
  flex: 0 0 250px; /* Shows roughly 5 cards at once */
  min-width: 200px;
  height: auto;
  /* background: linear-gradient(135deg, #e399de 0%, #e8e8c2 100%); */
  background: transparent;
  opacity: 0.8;
  background-size: 400% 400%;
  scroll-snap-align: start;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin: 20px;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

img {
  max-width: 150px;
  max-height: 350px;
  margin: 20px;
  float: center;
}

.carousel-container {
  position: relative;
  width: 100%;
  display: flex;
  /* overflow: hidden; */
}

.scroll-wrapper {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 10px 0;
  scroll-behavior: smooth; /* Smooth sliding animation */
  /* scroll-snap-type: x mandatory; */
  scrollbar-width: none; /* Hide scrollbar */
}

.scroll-wrapper::-webkit-scrollbar { display: none; }

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  border: none;
  font-size: 18px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  justify-content: center;
}

.nav-btn:hover {
  transform: translateY(-50%) scale(1.1);
}

.nav-btn.hidden {
    opacity: 0;
    pointer-events: none; /* Prevents clicking when invisible */
}

.prev {
  left: 10px;
}
.next {
  right: 10px;
}

.btn-group {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

footer {
  position: absolute;
  bottom: 20px;
}

.title {
  font-size: larger;
  height: 50px;
  align-content: center;
}

.details {
  font-size: smaller;
  height: 120px;
}

.review-row {
  height: 50px;
}

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  line-clamp: 2;
  /* Change this number to your desired line count */
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

form {
  display: inline;
}

.admin-only {
  display: none;
}

/* Canva background styles */

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Layer structure priority placement */
    background-color: #0b1121; /* High-fidelity deep workspace slate background */
}