:root{--w-column:200px;}
        .custom-carousel-wrapper *{box-sizing:border-box;margin:0;padding:0;list-style:none;}


    .custom-carousel-wrapper .carousel{
        background-image:radial-gradient(#001f3f,#001e);
        height:70vh;
        position:relative;
    }
    
    .custom-carousel-wrapper .carousel .list{
        width:min(1200px,90vw);
        margin:auto;
        height:100%;
        position:relative;
    }
    
    .custom-carousel-wrapper .carousel .item{
        position:absolute;
        inset:0;
        opacity:0;
        transition:opacity 0.6s ease;
    }
    
    .custom-carousel-wrapper .carousel .item.active{
        opacity:1;
        transform:translateX(0);
    }
    
    .custom-carousel-wrapper .carousel .item figure {
        position: absolute;
        width: 44%;              
        left: 1%;                
        top: 10%;               
        transform: none;         
    }

    .custom-carousel-wrapper .carousel .item figure::before { 
        content: ''; 
        position: absolute; 
        background-color: #ececec2e; 
        width: 90%;              
        height: 300px;            
        bottom: 10px;         
        left: 20%;              /
        border-radius: 50%; 
        filter: blur(45px); 
        z-index: -1;            /
    }

    .custom-carousel-wrapper .carousel .item figure img {
        width: 78%;            
        display: block;
        position: relative;
    }
    
    .custom-carousel-wrapper .carousel .content{
        position:absolute;
        z-index:2;
        width:70%;
        height:100%;
        left:var(--w-column);
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
        gap:20px;
        right: 0;
    }

    .custom-carousel-wrapper .carousel h2{
        font-size:38px;
        line-height:1.8em;
        color: white;
        opacity:0;transform:translateX(80px);
    }
    
    .custom-carousel-wrapper .carousel .description{
        color:#fff8;
        max-width:600px;
        font-size:18px;
        line-height: 2rem;
        color: #ffe;
        opacity:0;transform:translateX(80px);
    }
    
    .custom-carousel-wrapper .carousel .more{
        display:grid;
        margin-top: 32px;
        opacity:0;transform:translateX(80px);
    }
    
    .custom-carousel-wrapper .carousel button{
        border-radius:30px;
        color:#fff;
        border:none;
        padding:8px 15px;
        cursor:pointer;
        font-weight:500;
    }
    
    .custom-carousel-wrapper .carousel button:first-child{
        background-image:linear-gradient(to left,#fffff,#ececec);

    }
    
    .custom-carousel-wrapper .carousel button:last-child{
        border:2px solid transparent;
        background:linear-gradient(#242745,#242745) padding-box,
             linear-gradient(to left,#cc5500,#cc5555) border-box;
    }
    
    .custom-carousel-wrapper .carousel button i{
        margin-left:8px;
    }

.custom-carousel-wrapper .arrows{
  width:min(1600px, 95vw);
  display:flex;
  justify-content:space-between;
  position:absolute;
  top:52%;
  left:50%;
  transform:translate(-50%,-25px);
  z-index:5;
}
.custom-carousel-wrapper .arrows button{
  width:50px;
  height:50px;
  border-radius:50%;
  border:2px solid #cc5500;
  background-color:#232442;
  color:#fffe;
  font-size:large;
  cursor:pointer;
  transition:0.5s;
}
.custom-carousel-wrapper .arrows button:hover{
  border:1px solid #ececec;
  color:#fff;
}

.custom-carousel-wrapper .indicators{
  position:absolute;
  bottom:60px;
  width:min(1200px,90vw);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.custom-carousel-wrapper .indicators .number{
  /*font-family:'League Gothic',sans-serif;*/
  font-size:3em;
  position: absolute;
  bottom: 50%;
  right:6%;
  
}
.custom-carousel-wrapper .indicators ul{
  display:flex;
  gap:10px;
}
.custom-carousel-wrapper .indicators li{
  width:50px;
  height:5px;
  background-color: #242745;
  border-radius:10px;
  cursor:pointer;
  transition:0.5s;
}
.custom-carousel-wrapper .indicators li.active{background-color:#cc5500;}



/*@media(max-width:768px){*/
/*  .custom-carousel-wrapper .carousel h2{font-size:22px;}*/
/*  .custom-carousel-wrapper .carousel .description {*/
/*      font-size: 14px;*/
/*  }*/
/*  .custom-carousel-wrapper .indicators .number{*/
/*      font-size: 20px;*/
/*  }*/
/*  .custom-carousel-wrapper .indicators li{*/
/*      width: 30px;*/
/*      height: 3px;*/
/*  }*/
/*  .custom-carousel-wrapper .arrows button{*/
/*      width: 30px;*/
/*      height: 30px;*/
/*  }*/
/*      .custom-carousel-wrapper .carousel .item figure{*/
/*          width: 80%;*/
/*      }*/
  
/*}*/



@media (max-width: 768px) {
    
    .custom-carousel-wrapper .carousel{
        height: 80vh;
    }

  /* ساختار کلی اسلاید */
  .custom-carousel-wrapper .carousel .list {
    height: auto;
  }

  .custom-carousel-wrapper .carousel .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    padding: 20px 0 100px;
    text-align: center;
  }

  /* فقط اسلاید فعال دیده شود */
  .custom-carousel-wrapper .carousel .item.active {
    opacity: 1;
    position: relative;
  }

  .custom-carousel-wrapper .carousel .item figure {
    position: relative;
    width: 80%;
    margin: 0 auto 20px;
    left: 0;
    top: 0;
    transform: none;
  }

  .custom-carousel-wrapper .carousel .item figure::before {
    display: none;
  }

  .custom-carousel-wrapper .carousel .item figure img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .custom-carousel-wrapper .carousel .content {
    position: relative;
    width: 90%;
    margin: 0 auto;
    left: 0;
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .custom-carousel-wrapper .carousel h2 {
    font-size: 20px;
    line-height: 1.6em;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .custom-carousel-wrapper .carousel .description {
    font-size: 14px;
    line-height: 1.8em;
    color: #fff;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .custom-carousel-wrapper .carousel .more {
    margin-top: 0px;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* دکمه‌های قبلی و بعدی */
  .custom-carousel-wrapper .arrows {
    bottom: 70px;
    top: auto;
    transform: translate(-50%, -200px);
  }

  .custom-carousel-wrapper .arrows button {
    /*width: 30px;*/
    /*height: 30px;*/
    font-size: 14px;
    border: 1px solid #cc5500;
  }

  /* شمارنده و خطوط پایین */
  .custom-carousel-wrapper .indicators {
    bottom: 30px;
    flex-direction: column;
    gap: 8px;
  }

  .custom-carousel-wrapper .indicators .number {
    font-size: 18px;
    position: relative;
    bottom: auto;
    right: 0;
  }

  .custom-carousel-wrapper .indicators ul {
    gap: 5px;
  }

  .custom-carousel-wrapper .indicators li {
    width: 25px;
    height: 3px;
    border-radius: 5px;
  }
}

.custom-carousel-wrapper .carousel .list { position: relative; }

.custom-carousel-wrapper .carousel .item{
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;      /* ⛔ کلیک‌ناپذیر برای اسلایدهای غیرفعال */
  transition: opacity .6s ease;
}

.custom-carousel-wrapper .carousel .item.active{
  opacity: 1;
  z-index: 1;
  pointer-events: auto;      /* ✅ فقط اسلاید فعال کلیک‌پذیر باشد */
}

/* احتیاطی: لینک و دکمه‌ها قابل کلیک بمانند */
.custom-carousel-wrapper .carousel .item a{ display: inline-block; }
.custom-carousel-wrapper .carousel .item figure a{ display: block; }







@keyframes fadeInRight{
  from{opacity:0;transform:translateX(80px);}
  to{opacity:1;transform:translateX(0);}
}
.custom-carousel-wrapper .item.active h2{
  animation:fadeInRight 0.8s ease forwards;
  animation-delay:0.2s;
}
.custom-carousel-wrapper .item.active .description{
  animation:fadeInRight 0.8s ease forwards;
  animation-delay:0.6s;
}
.custom-carousel-wrapper .item.active .more{
  animation:fadeInRight 0.8s ease forwards;
  animation-delay:1s;
}