*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;color:#243142;background:linear-gradient(180deg,#fbf8ff,#f0ecff)}
.back-link{display:inline-block;margin:28px 20px;color:#5b2a86;text-decoration:none;font-weight:600}
.slider-demo{max-width:920px;margin:18px auto;padding:12px}
.slider-demo h1{text-align:center;margin-bottom:18px}
.slider-container{position:relative;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 8px 30px rgba(20,20,40,0.06)}
.slides{display:flex;transition:transform .45s ease-in-out}
.slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center}
.slide img{width:100%;height:480px;object-fit:cover;display:block}
.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.6);color:#fff;border:0;padding:10px 14px;border-radius:6px;cursor:pointer}
.prev{left:12px}
.next{right:12px}
.dots{display:flex;justify-content:center;gap:8px;padding:12px 0}
.dot{width:12px;height:12px;border-radius:50%;background:#e0e0e0;cursor:pointer}
.dot.active{background:#5b2a86}
@media(max-width:700px){.slide img{height:260px}.slider-demo{padding:6px}}
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}



.slider-heading {
  text-align: center;
  /* Reduced top margin so heading sits closer to the image section */
  margin: 8px 0 10px 0;
  font-weight: 700;
  color: #222;
  text-transform: uppercase;
  letter-spacing: 2px;
  /* responsive font size between 20px and 36px */
  font-size: clamp(20px, 4vw, 36px);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.slider-container {
  position: relative;
  width: 90%;
  max-width: 1000px;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 100%; /* each slide takes full container width */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.slide img {
  width: 100%;
  height: auto;
  max-height: 70vh; /* prevent images from exceeding viewport height */
  object-fit: cover; /* cover to fill while preserving aspect ratio */
  display: block;
}

/* Prev/Next buttons positioned at the sides of the slider */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.prev { left: 12px; }
.next { right: 12px; }

/* Reduce button size on small screens and make them less intrusive */
@media (max-width:520px){
  .prev, .next{ padding:8px 10px; font-size:18px; left:8px; right:8px }
}