/* Slider container */
.SFslider {
  position: relative;
  overflow: hidden;
  margin: auto;
  height: 500px; 
}

@media screen and (max-width: 400px) { .SFslider { max-height: 200px; width: 100%;} }
@media screen and (min-width: 401px) and (max-width: 600px) { .SFslider { max-height: 360px;width: 95%; } }
@media screen and (min-width: 601px) and (max-width: 800px) { .SFslider { max-height: 390px; width: 90%;} }
@media screen and (min-width: 801px) { .SFslider { height: 600px; width: 85%;} }

.SFslider .SFslide img,
.SFslider .SFslide video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;   /* fill container */
  object-fit: contain; /* scale inside */
}

/* Slides */
.SFslide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.95);
  transition: none;
}

.SFslide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Animations */
@keyframes slideInFromRight { 0%{transform:translateX(100%) scale(0.95);opacity:0}100%{transform:translateX(0) scale(1);opacity:1} }
@keyframes slideOutToLeft { 0%{transform:translateX(0) scale(1);opacity:1}100%{transform:translateX(-100%) scale(0.95);opacity:0} }
@keyframes slideInFromLeft { 0%{transform:translateX(-100%) scale(0.95);opacity:0}100%{transform:translateX(0) scale(1);opacity:1} }
@keyframes slideOutToRight { 0%{transform:translateX(0) scale(1);opacity:1}100%{transform:translateX(100%) scale(0.95);opacity:0} }

.SFslide-in-right { animation: slideInFromRight 0.7s forwards ease; }
.SFslide-out-left { animation: slideOutToLeft 0.7s forwards ease; }
.SFslide-in-left { animation: slideInFromLeft 0.7s forwards ease; }
.SFslide-out-right { animation: slideOutToRight 0.7s forwards ease; }

/* Arrows */
.SFarrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.6);
  border: 1px solid #ccc;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 4px;
  transition: background 0.3s;
}
.SFarrow:hover { background: rgba(255,255,255,0.9); }
.SFarrow.prev { left: 10px; }
.SFarrow.next { right: 10px; }