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

.support-section{

  padding:120px 0;
  overflow-x:hidden;
  overflow-y:visible;
}

.support-inner{
  width:min(1400px,90%);
  margin:0 auto;

  display:grid;
  grid-template-columns:.7fr 6fr .7fr .1fr 3fr;
  grid-template-areas:"prev slider next spacer nav";

  align-items:center;
}



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

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

  position:relative;
  width:100%;

  overflow:visible;
    --slide-w: min(42vw, 640px);
  --slide-h: calc(var(--slide-w) * 1676 / 1350);
  --prev-peek-x:18%;
  --next-peek-x:18%;

  --prev-peek-y:120px;
  --next-peek-y:90px;
    
      --slider-extra-h:120px;
}

.support-slider{
  position:relative;

  width:100%;
  height:calc(var(--slide-h) + var(--slider-extra-h));

  overflow:visible;
}



/* =========================================================
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{
  opacity:.45;
  visibility:visible;

  transform:
    translateX(calc(-50% - var(--prev-peek-x)))
    translateY(var(--prev-peek-y))
    scale(.88);

  z-index:1;
}

.support-slide.next-slide{
  opacity:.45;
  visibility:visible;

transform:
    translateX(calc(-50% + var(--next-peek-x)))
    translateY(var(--next-peek-y))
    scale(.88);

  z-index:1;
}
.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{
  position:relative;
  z-index:2;
  width:160%;
  margin-left:-30%;
 
  height:100%;

transform:translateY(120px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:clamp(40px,5vw,70px) clamp(28px,4vw,56px);

  color:#fff;
}

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

  margin-bottom:8px;
}

.support-title{
  font-size:clamp(50px,6.4vw,100px);
  line-height:1.12;
  font-weight:300;

  margin-bottom:clamp(28px,3.5vw,42px);
    letter-spacing: 8px
}
.support-title.wb{
  font-size:clamp(38px,5vw,70px);
  line-height:1.12;
  font-weight:300;

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

.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{
  position:relative;

  width:clamp(120px,15vw,200px);
  height:clamp(29px,3vw,40px);

  background:#133284;

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

  overflow:hidden;

  color:#fff;
  text-decoration:none;

 transition:
    background-color .35s ease,
    color .35s ease;
    border-radius: 6px; 
}



.support-btn:hover{
  background:rgb(46, 179, 205); opacity: 1;

}

.support-btn .arrow,
.support-btn .text{
  position:relative;
  z-index:2;

  transition:.4s ease;
}

.support-btn .arrow{
 position:absolute;
  left:32px;
  top:50%;

  opacity:0;
  transform:translateY(-50%) scale(0);

  transition:
    transform .3s ease,
    opacity .3s ease;
}

.support-btn .text{
  font-size:clamp(11px,1vw,16px);
  letter-spacing:.05em;
}

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

.support-btn:hover .arrow{
  opacity:1;
    transform:translateY(-50%) scale(1);
}



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

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

  width:clamp(44px,4vw,56px);
  height:clamp(44px,4vw,56px);

  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;
}

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

  justify-self:center;
  align-self:center;
}

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

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

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

  border-top:2px solid #133284;
  border-right:2px 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:100%;
  max-width:360px;

  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:.12em;

  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-section{
    padding:80px 0;
  }

  .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%;
    max-width:680px;

    justify-self:center;
  }

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

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

}



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

  .support-section{
    padding:70px 0;
  }

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

  .support-slider{
    height:clamp(480px,118vw,680px);
  }

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

  .support-slide.prev-slide{
    transform:
      translateX(calc(-50% - 12%))
      translateY(36px)
      scale(.9);
  }

  .support-slide.next-slide{
    transform:
      translateX(calc(-50% + 12%))
      translateY(36px)
      scale(.9);
  }

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

    padding:36px 24px;
  }

  .support-title{
    font-size:clamp(34px,10vw,52px);
  }

  .support-text{
    font-size:14px;
  }

  .support-btn{
    width:220px;
    height:62px;
  }

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

  .support-nav-item span{
    font-size:20px;
  }

}