/* =========================================================
LAYOUT
========================================================= */

.feature_component{
  position:relative;
}

.feature_tabs{
  display:flex;
  gap:8.5rem;
  align-items:flex-start;
}

/* LEFT SIDE */

.feature_tabs-menu{
  width:50%;
  position:relative;
  z-index:2;
}
.feature-tab-heading {
    display: none;
}
.feature_tab-link.active .feature-tab-heading {
    display: inline-block;
}

/* RIGHT SIDE */

.feature_tabs-content{
  width:50%;
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;

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

/* =========================================================
TAB ITEM
========================================================= */

.feature_tab-link{
  position:relative;
  padding:2rem 0;
  cursor:pointer;
}

/* HEADING */

.feature_tab-link .heading-4{
  transition:all .3s ease;
}

.feature_tab-link.active .heading-4{
  font-weight:600;
}

/* =========================================================
PARAGRAPH
========================================================= */

.feature_paragraph{
  opacity:0;
  max-height:0;
  overflow:hidden;

  transition:    opacity .45s ease,
    max-height .45s ease,
    margin-top .45s ease;

  margin-top:0;
}

.feature_tab-link.active .feature_paragraph{
  opacity:1;
  max-height:1000px;
  margin-top:1rem;
}

/* =========================================================
BOTTOM BORDER
========================================================= */

.border-line-btm{
  width:0%;
  height:2px;
  background:#171A1C;
  transition:width .25s linear;
}

.feature_tab-link.active .border-line-btm{
  width:100%;
}

/* =========================================================
RIGHT IMAGES
========================================================= */

.feature_image-wrapper{
  position:absolute;
  inset:0;

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

  opacity:0;
  visibility:hidden;

  transform:translateY(120px);

  transition:     transform .8s cubic-bezier(.22,.61,.36,1),
    opacity .4s ease,
    visibility .4s ease;

  will-change:transform;
}

.feature_image-wrapper.active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  z-index:2;
}

.feature_image{
  width:100%;
  height:auto;
  display:block;
}

.feature_component.is-end .feature_tabs{
  position:sticky;
  top:0;
}
/* =========================================================
MOBILE IMAGE
========================================================= */

.feature_mobile-image-wrapper{
  display:none;
}

/* =========================================================
TABLET + MOBILE
========================================================= */

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

  .feature_tabs{
    display:block;
  }

  /* REMOVE STICKY */

  .feature_tabs-content{
    display:none;
  }

  .feature_tabs-menu{
    width:100%;
  }

  /* ITEM */

  /* .feature_tab-link{
    padding:1.5rem 0;
    border-bottom:1px solid #E5E7EB;
  } */

  /* MOBILE IMAGE */

  .feature_mobile-image-wrapper{
    display:block;
    opacity:0;
    max-height:0;
    overflow:hidden;

    transition:
      opacity .45s ease,
      max-height .45s ease,
      margin-top .45s ease;

    margin-top:0;
  }
.feature_image{
  width:auto;
  height:auto;
}

  .feature_tab-link.active .feature_mobile-image-wrapper{
    opacity:1;
    max-height:1000px;
    margin-top:1.5rem;
    display: flex;
  }

  /* PARAGRAPH */

  .feature_paragraph{
    opacity:0;
    max-height:0;
    overflow:hidden;
  }

  .feature_tab-link.active .feature_paragraph{
    opacity:1;
    max-height:2000px;
    margin-top:1rem;
  }

  /* BORDER */

  .border-line-btm{
    width:100% !important;
    opacity:.15;
  }

  .border-line-btm{
    width:0% !important;
    opacity:1;
    transition:width .45s ease;
  }

  .feature_tab-link.active .border-line-btm{
    width:100% !important;
  }

}


/* active accordion */
.feature_tab-link.active .feature-block {
  opacity: 1;
}

.feature-block {
  opacity: 0.5;
  transition: all 0.3s ease;
}

/* image */
.feature_image-wrapper {
  display: none;
}

.feature_image-wrapper.active {
  display: block;
}

/* optional progress animation */
.border-line-btm {
  --progress: 0%;
  position: relative;
}

.border-line-btm::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--progress);
  background: #171a1c;
  transition: width 0.3s linear;
}