.process-section:before {

  content: "";

  position: absolute;

  left: 40%;

  top: 0;

  bottom: 0;

  right: 0;

  background-size: cover;

  background-repeat: no-repeat;

}

@media (max-width: 1536px) {

  .process-section:before {

  left: 37%;

}
 
}



.process-section .tab-cards {

  width: 100%;

  box-shadow: var(--shadow);

}



.process-section .tab-card {

  width: 25%;

  background: white;

  padding: 45px 32px;

  transition: all 0.4s ease;

  cursor: pointer;

  overflow: hidden;

  text-align: left;

  height: 270px;

  border-right: 4px solid var(--border-color-white);

}



.process-section .tab-card:hover {

  width: 35%;

}



.process-section .tab-card h5 {

  font-weight: 600;

  margin-bottom: 0;

  transition: transform 0.3s ease;

}



.process-section .tab-card p {

  font-size: 14px;

  margin-top: 15px;

  opacity: 0;

  max-height: 0;

  transition: all 0.4s ease;

}



.process-section .tab-card.active {

  width: 67%;

}



.process-section .tab-card.active p,

.process-section .tab-card:hover p {

  opacity: 1;

}



.process-section .tab-card h3 {

  position: relative;

  display: inline-block;

  padding-bottom: 4px;

  font-weight: bold;

}



.process-section .tab-card h3::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  height: 4px;

  width: 20px;

  border-radius: 0;

}



.underline-blue::after {

  background-color: var(--grad-color-1);

}



.underline-purple::after {

  background-color: var(--grad-color-2);

}



.underline-violet::after {

  background-color: var(--grad-color-3);

}



.underline-cyan::after {

  background-color: var(--grad-color-1);

}



@media (max-width: 991.98px) {

  .tab-card {

    padding: 10px !important;

  }



  .tab-cards {

    flex-wrap: nowrap;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    gap: 0px;

    padding: 0;

  }



  .tab-card {

    flex: 0 0 310px;

    max-width: 310px;

    padding: 24px;

    height: auto;

    border-right: 4px solid #faf9ff;

    transition: none;

    padding: 24px !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;

  }



  .tab-card p {

    opacity: 1;

    max-height: none;

  }



  .tab-card h3 {

    font-size: 28px;

  }

  .process-section .tab-card p {

    opacity: 1 !important;

  }

  .process-section:before {

    display: none;

  }

}