.steps {
    margin-bottom: 35px;
    width: 100%;
    line-height: 1.142rem;
    box-sizing: border-box;
    height: 4.7rem;
    padding: 1rem 4rem 1rem 2rem;
    display: flex;
}
.steps a {
    text-decoration: none;
}
.step {
    text-decoration: none;
    display: block;
    padding: 18px 10px 18px 20px;
    width: calc(33%);
    height: 100%;
    position: relative;
    background: white;
    color: var(--secondary);
}

.step span.number{

  font-size: 1.6rem;
  font-weight: bold;
}
.step:after {
    content: "";
    position: absolute;
    z-index: 5;
    right: -3.4rem;
    top: 0px;
    height: 2.7rem;
    width: 3.5rem;
    background: white;
    clip-path: polygon(0 0, 0% 100%, 24% 50%);
}
.step:before {
    content: "";
    position: absolute;
    z-index: 3;
    right: -2.99rem;
    top: 0px;
    height: 2.7rem;
    width: 3rem;
    background: var(--primary);
    clip-path: polygon(0 0, 0% 100%, 35% 50%);
}
a.step:hover,
a.step:focus {
    color: var(--primary);
}
.step-content .title {
    text-transform: capitalize;
}
.step.active {
    z-index: 2;
    background: var(--primary);
    color: var(--secondary);
}
.step.active b.number{
    color: var(--secondary);
}
.step.active:after
{
  background: var(--primary);
}
.btn-back {
    font-size: .8rem;
}

.btn-arrow-left,
.btn-arrow-right {
    position: relative;
}

.btn-arrow-left > span::before,
.btn-arrow-right > span::before {
    display: inline-block;
    position: absolute;
    top: 9px;
    transition: none;
}

.btn-arrow-left > span::before {
    left: -15px;
    transform: translate3d(10px, 0, 0); /* Initial position */
}
.btn-arrow-right > span::before {
    transform: translate3d(0, 0, 0); /* Initial position */
}

.btn-arrow-left:hover > span::before,
.btn-arrow-left:focus > span::before,
.btn-arrow-right:hover > span::before,
.btn-arrow-right:hover > span::before  {
    animation-duration: 1.5s;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    -webkit-animation-iteration-count: infinite;
    position: absolute;
}

.btn-arrow-right:hover > span::before,
.btn-arrow-right:focus > span::before  {
    animation-name: arrowRightAnim;
    -webkit-animation-name: arrowRightAnim;
}

.btn-arrow-left:hover > span::before,
.btn-arrow-left:focus > span::before  {
    animation-name: arrowLeftAnim;
    -webkit-animation-name: arrowLeftAnim;
    left: -15px;
}

@keyframes arrowRightAnim {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes arrowLeftAnim {
    from {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@media screen and (max-width: 768px) {
    .step span.number{
        font-size: 1.6rem;
        font-weight: bold;
    }
    .step-content .title {
        display: none;
        visibility: hidden;
        width: 0;
    }

}

.categoryProduct {
    height: 13rem; 
}

.categoryProduct img{
    height: 13rem; 
    object-fit: cover;
    width: 100%;
}