/* ===== SLIDER BACKGROUND PROFESSIONAL CSS ===== */

.slide1{
  background: url('images/slide12.jpg') center/cover no-repeat;
}

.slide2{
  background: url('images/slide22.jpg') center/cover no-repeat;
}

.slide3{
  background: url('images/slide23.jpg') center/cover no-repeat;
}

/* Overlay for readability */
.slide{
  position: relative;
  overflow: hidden;
}

.slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 1;
}

/* Ensure content stays above overlay */
.slide-left,
.slide-right{
  position: relative;
  z-index: 2;
}

/* Optional: slight zoom effect (premium feel) */
.slide{
  transition: transform 0.6s ease;
}

.slide:hover{
  transform: scale(1.01);
}