.carousel-container {
    max-width: 1200px;
    width: 100%;
    position: relative;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.8s ease-out;
    margin: auto;
  }
  .carousel-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    mask: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  }
  .carousel { display: flex; transition: transform .5s cubic-bezier(.25,.46,.45,.94); gap: 20px; padding: 20px 0; }
  .carousel-item {
    flex: 0 0 auto; width: 280px; height: 500px; border-radius: 15px; overflow: hidden; position: relative;
    cursor: pointer; transition: all .3s ease; box-shadow: 0 10px 25px rgba(0,0,0,.2);
  }
  .carousel-item:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 20px 40px rgba(0,0,0,.3); }
  .carousel-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
  .carousel-item:hover img { transform: scale(1.1); }
  .carousel-item::after { content:''; position:absolute; inset:0; background:linear-gradient(45deg, rgba(102,126,234,.8), rgba(118,75,162,.8)); opacity:0; transition:opacity .3s ease; }
  .carousel-item:hover::after { opacity:1; }
  .carousel-item .item-content {
    position:absolute; bottom:0; left:0; right:0; padding:20px; color:#fff;
    background: linear-gradient(transparent, rgba(0,0,0,.8)); transform: translateY(100%); transition: transform .3s ease;
  }
  .carousel-item:hover .item-content { transform: translateY(0); }
  .item-title { font-size:1.2rem; font-weight:700; margin-bottom:5px; }
  .item-description { font-size:.9rem; opacity:.9; }
  .carousel-indicators { display:flex; justify-content:center; gap:10px; margin-top:20px; }
  .indicator { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:all .3s ease; }
  .indicator.active { background:#fff; transform: scale(1.2); }
  @media (max-width:768px){ .carousel-item{width:240px;height:500px;} }
  @media (max-width:480px){ .carousel-container{padding:20px 10px;} .carousel-item{width:200px;height:500px;} .carousel{gap:15px;} }
  @keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }