/* VIDEO.CSS - OVERRIDES PAGINA EDITING VIDEO (creator look) */

/* Background più dinamico, sempre PayPal */
.service-detail{
  padding-top: 120px;
  padding-bottom: 70px;

  background:
    radial-gradient(circle at 20% 12%, rgba(0,156,222,0.20), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(0,48,135,0.26), transparent 60%),
    radial-gradient(circle at 55% 85%, rgba(1,33,105,0.30), transparent 55%),
    linear-gradient(180deg, rgba(1,33,105,0.14), rgba(0,0,0,0));
}

.service-detail .container{
  max-width: 980px;
}

/* Tutto testo bianco */
.service-detail,
.service-detail *{
  color: #ffffff;
}

/* Titolo */
.service-detail h2{
  text-align: center;
  margin-bottom: 1.2rem;
  text-shadow: 0 12px 45px rgba(0,0,0,0.55);
}

/* Intro più “hero” */
.service-detail p{
  opacity: 0.94;
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 860px;
  margin: 0 auto 2rem auto;
  text-align: center;
}

/* Lista stile “timeline / editing steps” */
.service-detail ul{
  max-width: 900px;
  margin: 2rem auto;
  padding: 0;
}

.service-detail li{
  list-style: none;
  position: relative;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,156,222,0.35);
  border-radius: 18px;

  padding: 1rem 1.1rem 1rem 3.2rem;
  margin-bottom: 0.9rem;

  box-shadow: 0 16px 40px rgba(0,0,0,0.40);
}

/* Icone “video” per ogni punto */
.service-detail li::before{
  content: "▶";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #009CDE;
  font-size: 1.15rem;
}

/* CTA */
.service-detail .cta-btn{
  display: inline-block;
  padding: 1.1rem 2.6rem;
  border-radius: 999px;
  background: linear-gradient(45deg, #003087, #009CDE);
  color: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

.service-detail .cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.55), 0 0 55px rgba(0,156,222,0.18);
}

/* Mobile */
@media (max-width: 768px){
  .service-detail{ padding-top: 110px; }
  .service-detail p{ text-align: left; }
}