/* =========================================================
support section
========================================================= */

.support-section{

  padding:50px 0;

}

.support-inner{
  
}



/* =========================================================
slider layout
========================================================= */

  .support-slider-area{
    --prev-peek-x:12%;
    --next-peek-x:12%;

    --prev-peek-y:120px;
    --next-peek-y:60px;

    --slider-extra-h:10px;
  }

.support-slider{
    height:calc(var(--slide-h) + var(--slider-extra-h));
  }



/* =========================================================
slide
========================================================= */

.support-slide{
  position:absolute;
  top:0;
  left:50%;

    width:var(--slide-w);
  aspect-ratio:1350 / 1676;

  border-radius:20px;
  overflow:visible;

  background-size:cover;
  background-position:center;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateX(-50%) scale(.9);

  transition:
    opacity .7s ease,
    transform .7s ease,
    visibility .7s;
}

.support-slide::before{
  content:"";
  position:absolute;
  inset:0;

  border-radius:20px;

  background-image:inherit;
  background-size:cover;
  background-position:center;

  z-index:0;
}

.support-slide::after{
  content:"";
  position:absolute;
  inset:0;

  border-radius:20px;

  background:rgba(0,0,0,.42);

  z-index:1;
}

.support-overlay{
  display:none;
}

.support-slide.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);

  z-index:3;
}

.  .support-slide.prev-slide{
    transform:
      translateX(calc(-50% - var(--prev-peek-x)))
      translateY(var(--prev-peek-y))
      scale(.9);
  }

  .support-slide.next-slide{
    transform:
      translateX(calc(-50% + var(--next-peek-x)))
      translateY(var(--next-peek-y))
      scale(.9);
  }


.support-content{
  transition:opacity .9s ease;
}

.support-slide.prev-slide .support-content,
.support-slide.next-slide .support-content{
  opacity:0;
  pointer-events:none;
}

/* =========================================================
slide content
========================================================= */

.support-content{
 

transform:translateY(30px);

}

.support-sub{
  font-size:clamp(15px,1.4vw,22px);
  font-weight:300;
  letter-spacing:.08em;

  margin-bottom:8px;
}


.support-title.wb{
  font-size:24px;
  line-height:1.12;
  font-weight:300;

  margin-bottom:clamp(28px,3.5vw,42px);
    letter-spacing: 0px
}

.support-text{
  font-size:clamp(13px,1.15vw,18px);
  line-height:1.9;
  font-weight:300;

  margin-bottom:clamp(32px,4vw,50px);
}



/* =========================================================
view more button
========================================================= */

.support-btn .arrow {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    left: 18px;
    color: #fff;
     font-size: 1.4rem;
  }

  .support-btn .text {
    transform: translateX(16px);
  }


/* =========================================================
arrow
========================================================= */

.support-arrow{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  transform:none;

  width:30px;
  height:30px;

  border:1px solid #133284;
  border-radius:50%;

  background:#fff;

  cursor:pointer;

  z-index:20;

  transition:.3s;
}

.support-arrow.prev{
  grid-area:prev;

  justify-self:center;
  align-self:center;
      transform:translateY(-10px);
}

.support-arrow.next{
  grid-area:next;

  justify-self:center;
  align-self:center;
      transform:translateY(-10px);
}

.support-arrow:hover{
  background:#133284;
}

.support-arrow span{
  position:absolute;
  top:50%;
  left:50%;

  width:clamp(8px,1vw,12px);
  height:clamp(8px,1vw,12px);

  border-top:1px solid #133284;
  border-right:1px solid #133284;

  transition:.3s;
}

.support-arrow:hover span{
  border-color:#fff;
}

.support-arrow.prev span{
  transform:
    translate(-40%,-50%)
    rotate(-135deg);
}

.support-arrow.next span{
  transform:
    translate(-60%,-50%)
    rotate(45deg);
}



/* =========================================================
nav
========================================================= */

.support-nav{
  grid-area:nav;

  position:relative;
  z-index:10;

  width:90%;
  max-width:300px;
    margin-top: 0rem;
  justify-self:end;
}

.support-nav-item{
  position:relative;

  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:24px 0;

  background:none;
  border:none;
  border-bottom:1px dashed #aeb6d0;

  cursor:pointer;

  color:#133284;
  text-align:left;

  transition:.3s;
}

.support-nav-item span{
  position:relative;

  font-size:clamp(18px,1.15vw,24px);
  font-weight:300;
  letter-spacing:0em;

  transition:.4s;
}

.support-nav-item::after{
  content:">";

  font-size:18px;

  transition:.4s;
}

.support-nav-item:hover span,
.support-nav-item.active span{
  transform:translateX(14px);
}

.support-nav-item:hover::after,
.support-nav-item.active::after{
  transform:translateX(8px);
}



/* =========================================================
responsive
========================================================= */

@media screen and (max-width:1100px){

 
  .support-inner{
    width:min(100%,92%);

    grid-template-columns:44px 1fr 44px;
    grid-template-areas:
      "prev slider next"
      "nav nav nav";

    row-gap:50px;
  }

  .support-arrow.prev{
    grid-area:prev;
  }

  .support-slider-area{
    grid-area:slider;
  }

  .support-arrow.next{
    grid-area:next;
  }
    

  .support-nav{
    grid-area:nav;

    width:100%;
    justify-self:center;
      margin-top: 1rem;
  }

  .support-slider{
    height:clamp(360px,100vw,760px);
  }

  .support-slide{
    width:clamp(300px,58vw,520px);
  }

}



@media screen and (max-width:768px){


  .support-inner{
    grid-template-columns:40px 1fr 40px;
    row-gap:6px;
  }

 
  .support-slide{
    width:clamp(260px,72vw,420px);
  }

  

  .support-content{
    width:125%;
    margin-left:-12.5%;

    padding:36px 24px;
  }

  .support-title{
    font-size:6vw;
      letter-spacing: 3px;
  }

  .support-text{
    font-size:12px;
      letter-spacing: 1px;

  }

  .support-btn{
    width:120px;
    height:40px;
  }

  .support-nav-item{
    padding:10px 0;
  }

  .support-nav-item span{
    font-size:1.25rem;

  }

}