.smart-slider { width: 100%; position: relative; }
.smart-slider.swiper { z-index: 1; }

.smart-slide {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: none;
  transition: transform .6s ease, opacity .6s ease, margin-inline-start .4s ease;
}
.smart-slide__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.smart-slide__inner { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; color: #fff; cursor: pointer; }

.smart-slider[data-click-only="true"] { touch-action: none; }
.smart-slider .swiper-slide-active .smart-slide__inner div { font-size: 20px !important; }

.smart-slider-controls {
  position: absolute; inset-inline: 0; bottom: 10px;
  display: flex; gap: .5rem; justify-content: center;
}
.smart-slider-prev, .smart-slider-next {
  color: #fff; border: 0; border-radius: .5rem; padding: .4rem .6rem; cursor: pointer;
}
a.hero-btn {border-radius: 4px;color: white;background: #EF6C00;padding: 8px 16px;border:3px solid transparent;}
.sss-fade { animation: sssFade .35s ease forwards; }

@property --angle {
	syntax: '<angle>';
	inherits: true;
	initial-value: 0deg;
}

.hero-btn:hover{
	color:white;
	--angle: 0deg;
	background: linear-gradient(#C65A00, #C65A00) padding-box, conic-gradient(from var(--angle), #EF6C00, #C65A00) border-box;
	border: 2px solid transparent;
	border-radius: 4px;
	animation: rotate-gradient 3s infinite linear;
}

@keyframes rotate-gradient {
	from { --angle: 0deg; }
	to { --angle: 360deg; }
}
@keyframes sssFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media screen and (max-width: 768px) {.hero-btn{font-size:14px !important;}a.hero-btn {padding: 8px 16px;}
}