.tf-step.style2 .step .item-step {

  background: #ffffff;

  border: 1px solid #efefef;

  box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.05);

  border-radius: 16px;

  padding: 30px 30px 29px 30px;

  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition   : all 0.3s ease;
  -ms-transition    : all 0.3s ease;
  -o-transition     : all 0.3s ease;
  transition        : all 0.3s ease;

}

.tf-step.style2 .step .item-step:hover {
    border-color: #F7A408;
}



.tf-step.style2 .step .item-step .inner {

    display: flex;

    align-items: center;

}



.tf-step.style2 .step .item-step .inner .number {

    font-weight: 700;

    font-size: 100px;

    line-height: 0.75em;

    background: linear-gradient(180deg, #F7A408 27.78%, rgba(247, 164, 8, 0) 76.89%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-fill-color: transparent;

    padding-right: 44px;

    border-right: 1px solid #F0F0F0;

    margin: 0;

    margin-right: 30px;

    height: 90px;

}



.tf-step.style2 .heading {

    font-weight: 700;

    font-size: 22px;

    line-height: 120%;

    color: #09143A;

    margin-top: -2px;

    margin-bottom: 17px;

}



.tf-step.style2 .text p {

    font-weight: 400;

font-size: 14px;

line-height: 150%;

color: #4F5464;

margin: 0;

}



.tf-step.style2 .step .item-step:not(:last-child) {

    margin-bottom: 55.7px;

}



.tf-step.style2 .step .item-step:last-child:after {

    display: none;

}



.tf-step.style2 .step .item-step::after {

    content: '';

    position: absolute;

    width: 56px;

    height: 56px;

    bottom: -57px;

    left: 60px;

    background: url(./mark.svg);

    z-index: 99;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

}



/* style1 */



.tf-step.style1 .step {

    display: flex;

    flex-wrap: wrap;

    margin-left: -30px;

}



.tf-step.style1 .step .item-step {

    width: calc(33.33333% - 30px);

    margin-left: 30px;

}



.tf-step.style1 .wrap-icon-inner {

    text-align: center;

    margin-bottom: -86px;

}



.tf-step.style1 .number {

    font-weight: 700;

font-size: 200px;

line-height: 1.5em;

background: linear-gradient(180deg, #F7A408 27.78%, rgba(247, 164, 8, 0) 76.89%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

text-fill-color: transparent;

opacity: 0.2;

}



.tf-step.style1 .inner-content {

    background: #FFFFFF;

border: 1px solid #EFEFEF;

box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.05);

border-radius: 16px;

padding: 27px 30px 30px 30px;

/* height: 493px; */
-webkit-transition: all 0.3s ease;
-moz-transition   : all 0.3s ease;
-ms-transition    : all 0.3s ease;
-o-transition     : all 0.3s ease;
transition        : all 0.3s ease;

}

.tf-step.style1 .item-step:hover .inner-content {
    transform: translateY(-10px);
}



.tf-step.style1 .inner-content .header-content {

    display: flex;

}



.tf-step.style1 .icon {

    width: 60px;

    height: 60px;

    margin-right: 15px;

    flex-shrink: 0;

}



.tf-step.style1 .heading {

    font-weight: 700;

    font-size: 22px;

    line-height: 120%;

    color: #09143A;

    margin: 0;

}



.tf-step.style1 .header-content {

    padding-bottom: 17px;

    border-bottom: 1px solid #F0F0F0;

    margin-bottom: 16px;

    min-height: 123px;

}



.tf-step.style1 .text {

    font-weight: 400;

font-size: 14px;

line-height: 150%;

color: #4F5464;

}



.tf-step.style1 .text .st {

    margin-bottom: 15px;

}



.tf-step.style1 .text .st2 {

    line-height: 200%;

}



@media (max-width: 1200px) {

    .tf-step.style1 .inner-content,

    .tf-step.style1 .header-content {

        height: 100%;

    }
    .tf-step.style1 .header-content {
        flex-wrap: wrap;
        justify-content: center;
    }
    .tf-step.style1 .header-content .icon {
        margin-bottom: 10px;
    }

}



@media (max-width: 991px) {
    .tf-step.style1 .step {
        margin-left: 0;
    }

    .tf-step.style1 .step .item-step {

        width: calc(100%);
        margin: 0;
    }

}



@media (max-width: 767px) {

    .tf-step.style2 .step .item-step .inner {

        display: block;

    }

}

