/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #1e202c;
  color: #bfc0d1;
}

/* Slider */
.slider {
  width: 100%;
  height: 300px; /* adjust as needed */
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #31323e;
  border-radius: 15px:
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  
}

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slides img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 150%;
  object-fit: contain;
  opacity: 0;
  animation: fade 24s infinite;
}

/* Animation delays for each image */
.slides img:nth-child(1) { animation-delay: 0s; }
.slides img:nth-child(2) { animation-delay: 3s; }
.slides img:nth-child(3) { animation-delay: 6s; }
.slides img:nth-child(4) { animation-delay: 9s; }
.slides img:nth-child(5) { animation-delay: 12s; }
.slides img:nth-child(6) { animation-delay: 15s; }
.slides img:nth-child(7) { animation-delay: 18s; }
.slides img:nth-child(8) { animation-delay: 21s; }

@keyframes fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Container */
.container {
  max-width: 500px;
  margin: 40px auto;
  background: #31323e;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* Heading */
.container h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #60519b;
}

/* Form */
form {
  display: flex;
  flex-direction: column;
}

label {
  margin: 10px 0 5px;
  font-weight: bold;
}

input, select, textarea {
  padding: 12px;
  border: 1px solid #60519b;
  border-radius: 8px;
  background: #1e202c;
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 15px;
}

button {
  background: #60519b;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background: #4a3e85;
}