/* Media Center Depth Slider CSS */
.slider-wrapper {
  position: relative;
  max-width: 1300px;
  margin: auto;
  overflow: hidden;
}

.slider {
  position: relative;
  height: 420px;
}

.slide {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
  opacity: 0;
}

.slide img {
  width: 360px;
  height: 360px;
  object-fit: cover;
  border-radius: 50%;
}

.slide.center {
  transform: translate(-50%, -50%) scale(1);
  z-index: 5;
  opacity: 1;
}

.slide.near {
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 4;
  opacity: 0.85;
}

.slide.far {
  transform: translate(-50%, -50%) scale(0.7);
  z-index: 3;
  opacity: 0.65;
}

.slide.very-far {
  transform: translate(-50%, -50%) scale(0.55);
  z-index: 2;
  opacity: 0.4;
}

.left-1 { left: 35%; }
.right-1 { left: 65%; }

.left-2 { left: 20%; }
.right-2 { left: 80%; }

.left-3 { left: 5%; }
.right-3 { left: 95%; }

.controls {
  margin-top: 40px;
  text-align: center;
}

.controls button {
  padding: 10px 20px;
  background: #0b5c6b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
}