.border-slider {
    background-color: rgba(0, 0, 0, 0.15) !important;
    
    border: 1px solid rgba(232, 120, 4, 1.0) !important;
    
    background-clip: padding-box;
    border-radius:20px;
}

.slider-info{
    left: 20px !important;
    
}
  .section {
    width: 100%;
    max-width: 1400px;
  }

  /* ── ACCORDION ── */
  .accordion {
    display: flex;
    gap: 20px;
    height: 481px;
  }

  .card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    flex: 0 0 157px;
    transition: flex 0.65s cubic-bezier(0.77, 0, 0.18, 1);
    user-select: none;
    border: 1px solid #FDF5F5;
  }
  .card.active {
    flex: 1 1 auto;
    cursor: default;
  }

  /* background image */
  .card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);
  }
  .card:hover:not(.active) .card-bg {
    transform: scale(1.05);
  }

  /* overlay: dark when collapsed, lighter when open */
  .card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.52);
    transition: background 0.45s;
  }
  .card.active .card-overlay {
    background: rgba(0,0,0,0.18);
  }

  /* top gradient for title readability */
  .card-grad-top {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, transparent 45%);
    opacity: 0;
    transition: opacity 0.4s 0.15s;
    pointer-events: none;
  }
  .card.active .card-grad-top { opacity: 1; }

  /* bottom gradient for text readability */
  .card-grad-bottom {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s 0.15s;
    pointer-events: none;
  }
  .card.active .card-grad-bottom { opacity: 1; }

  /* ── COLLAPSED LABEL ── */
  /* centered, single line, all rotated the same way (bottom→top) */
  .card-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: opacity 0.2s;
    pointer-events: none;
  }
  .card-label span {
    font-family: 'Roboto', Times, serif;
    white-space: nowrap;
    font-weight: 500;
    font-size: 32px;
    color: #E87804;
    letter-spacing: 0.08em;
    writing-mode: vertical-lr;
    transform: rotate(180deg); /* all point bottom→top */
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
  }

  .card.active .card-label {
    opacity: 0;
    transition-delay: 0s;
  }

  /* ── EXPANDED CONTENT ── */
  .card-content {
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* title top, text bottom */
    opacity: 0;
    transition: opacity 0.28s;
    pointer-events: none;
  }
  .card.active .card-content {
    opacity: 1;
    transition-delay: 0.22s;
    pointer-events: auto;
  }

  .card-title {
    font-family: 'Roboto', Times, serif;
    white-space: nowrap;
    font-weight: 500;
    font-size: 32px;
    color: #E87804;
    line-height: 1.2;
  }

  .card-text {
    font-family: 'Roboto', Times, serif;
    white-space: wrap;
    font-weight: 400;
    font-size: 16px;
    color: #FDF5F5;
    line-height: 1.65;
    max-width: 560px;
  }

  /* ── IMAGES ── */
  .card-1 .card-bg { background-image: url('https://static.tildacdn.com/tild3865-3866-4565-a566-613665653437/586bac23-7843-4534-b.jpg'); }
  .card-2 .card-bg { background-image: url('https://static.tildacdn.com/tild3135-3661-4363-a464-616438383532/dcbab278-a057-496a-a.jpg'); }
  .card-3 .card-bg { background-image: url('https://static.tildacdn.com/tild6664-6634-4164-a363-313061643939/cd0b2a4e-b20e-445c-a.jpg'); }
  .card-4 .card-bg { background-image: url('https://static.tildacdn.com/tild3838-3834-4331-a239-326437376261/6a8540ef-96aa-47f6-a.jpg'); }
  .card-5 .card-bg { background-image: url('https://static.tildacdn.com/tild6334-6230-4036-a165-626139343263/e7e7bd54-4249-41bb-8.jpg'); }

@media (max-width: 1400px){
    .card {
    position: relative;
    flex: 0 0 80px;
  }
}

  /* ── MOBILE ── */
  @media (max-width: 640px) {
      .section {
    width: auto;
    padding:0 10px;
      }
      
    .accordion {
      flex-direction: column;
      height: auto;
      gap: 8px;
    }

    .card {
      flex: none !important;
      width: 100%;
      height: 60px;
      border-radius: 16px;
      transition: height 0.6s cubic-bezier(0.77, 0, 0.18, 1);
    }
    .card.active { height: 300px; }

    /* horizontal on mobile */
    .card-label span {
      writing-mode: horizontal-tb;
      transform: none;
    }

    .card-content { padding: 18px 20px; }
    .card-title { font-size: 24px; }
    .card-text { font-size: 16px; }
  }
  .scrollbooster-viewport {
    cursor: -webkit-grab;
    cursor: grab;
    padding-bottom: 30px;
    margin-bottom: -30px;
}
.scrollbooster-viewport:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.scrollbooster-content {
    position: absolute;
    width: 100%;
    height: 100%;
}
.yu-arrow-left,
.yu-arrow-right {
    cursor: pointer;
}
  .faq{width:100%; max-width:1400px; margin:0 auto;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;padding:0;}
  .faq-item{background:#2a2a2a;border-radius:12px;overflow:hidden;border:1.5px solid #333;}
  .faq-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;cursor:pointer;gap:16px;-webkit-tap-highlight-color:transparent;}
  .faq-title{font-family:'Roboto',sans-serif;font-weight:700;font-size:40px;color:#FDF5F5;margin:0;line-height:1.3;}
  .faq-btn{flex-shrink:0;width:50px;height:50px;border-radius:50%;background:#E87804;display:flex;align-items:center;justify-content:center;transition:transform 0.35s cubic-bezier(0.77,0,0.18,1);}
  .faq-btn svg{display:block;transition:transform 0.35s cubic-bezier(0.77,0,0.18,1);}
  .faq-item.open .faq-btn svg{transform:rotate(45deg);}
  .faq-body{max-height:0;overflow:hidden;transition:max-height 0.45s cubic-bezier(0.77,0,0.18,1);}
  .faq-inner{padding:0 22px 22px;border-top:1.5px solid #3a3a3a;padding-top:16px;}
  .faq-text{font-family:'Roboto',sans-serif;font-weight:400;font-size:16px;color:#ccc;line-height:1.7;margin:0;}

 @media(max-width:960px){
    faq{
        max-width:940px;
    }
  }

  @media(max-width:640px){
    .faq-title{font-size:24px;}
    .faq-header{padding:16px 16px;}
    .faq-inner{padding:14px 16px 16px;}
    .faq-btn{width:32px;height:32px;}
    faq{
        max-width:623px;
    }
  }
  @media(max-width:370px){
    faq{
        max-width:350px;
    }
  }