Luxury Services Auto Scroll

:root{
  --primary:#1b5b6f;
  --accent:#1ab3f7;
}

/* ===== BASE ===== */
body{
  margin:0;
  font-family:"Poppins",sans-serif;
  background:linear-gradient(to bottom,#f8fdfe,#e3ebee,#fafbfc);
  color:#fff;
}
.full-width-services{
  width:100%;
  padding:60px 0;
  overflow:hidden;
}
.services-heading{
  text-align:center;
  font-size:34px;
  font-weight:800;
  background:linear-gradient(90deg,#1b5b6f,#1ab3f7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:32px;
}

/* ===== SCROLLER ===== */
.services-scroll{
  overflow:hidden;
  position:relative;
}
.services-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:servicesAutoScroll 32s linear infinite;
}
@keyframes servicesAutoScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.services-scroll:hover .services-track{animation-play-state:paused;}

/* ===== CARDS ===== */
.service-card{
  flex:0 0 300px;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  min-height:260px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  cursor:pointer;
  perspective:1000px;
  transition:transform .7s cubic-bezier(.22,.61,.36,1),box-shadow .6s ease;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .7s ease;
}
.service-card.boat::before{background-image:url('https://www.bookingproplus.com/storage/imgs/yachts-vida-boa.jpg');}
.service-card.plane::before{background-image:url('https://www.bookingproplus.com/storage/imgs/private-jet.jpg');}
.service-card.car::before{background-image:url('https://www.bookingproplus.com/storage/imgs/car-rent.jpg');}
.service-card.sky::before{background-image:url('https://www.bookingproplus.com/storage/imgs/skydive.jpg');}

.service-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(11,17,20,0.08),rgba(2,6,11,0.45));
  z-index:2;
}

/* ===== GLASS PANEL ===== */
.glass-panel{
  position:relative;
  z-index:3;
  width:100%;
  padding:18px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,0.1);
  text-align:center;
  color:#fff;
}
.service-title{
  font-size:18px;
  font-weight:800;
  margin-bottom:6px;
  color:#fff;
  position:relative;
  display:inline-block;
}
.service-title::after{
  content:"";
  display:block;
  height:2px;
  margin:6px auto 0;
  width:36px;
  background:linear-gradient(90deg,transparent,#ffde8a,white,#ffde8a,transparent);
  border-radius:20px;
  opacity:0.85;
}
.service-sub{font-size:13px;color:rgba(255,255,255,0.9);}

/* ===== LUXURY EFFECTS ===== */
.service-card:hover{
  transform:translateY(-10px) scale(1.05) rotate3d(1,1,0,6deg);
  box-shadow:
    0 0 18px #1a8dcc,
    0 0 45px #137ec4,
    0 12px 38px #1c94d3;
}


/* ===== MOBILE ===== */
@media(max-width:600px){
  .service-card{flex:0 0 230px;min-height:180px;}
}