.step-section {
    position: relative;
}

.step-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.step-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.step-content {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 70px 0 120px;
    background: -moz-linear-gradient(
        top,
        rgba( 255, 255, 255, 1 ) 10%,
        rgba( 255, 255, 255, 0.66 ) 60%,
        rgba( 255, 255, 255, 0 ) 100%
    );
    background: -webkit-linear-gradient(
        top,
        rgba( 255, 255, 255, 1 ) 10%,
        rgba( 255, 255, 255, 0.66 ) 60%,
        rgba( 255, 255, 255, 0 ) 100%
    );
    background: linear-gradient(
        to bottom,
        rgba( 255, 255, 255, 1 ) 10%,
        rgba( 255, 255, 255, 0.66 ) 60%,
        rgba( 255, 255, 255, 0 ) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}

.accordion-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.step-number {
    margin: 0;
    padding: 0 0 0;
    color: #0991aa;
    font-size: 40px;
    font-weight: normal;
    line-height: 1.33em;
    font-family: 'Courgette', cursive;
    width: 40px;
}

.step-name {
    margin: 0;
    padding: 0 0 0;
    color: #023645;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3em;
    font-family: 'Montserrat', sans-serif;
    width: calc( 100% - 40px );
}

.step-section .fx-accordion {
    background: #ffffff;
    box-shadow: 0 4px 16px rgba( 2, 54, 69, 0.13 );
}

.step-section .fx-accordion__panel.is-current .fx-accordion__panel__toggle {
    border: none;
    position: relative;
    border-bottom: 1px solid transparent;
}

.step-section .fx-accordion__panel__toggle {
    margin: 0 0 0;
    padding: 10px 52px 10px 20px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba( 58, 131, 158, 0.1 );
}

.step-section .fx-accordion__panel .fx-accordion__panel__toggle::after {
    content: '\e90b';
    position: absolute;
    top: 50%;
    right: 40px;
    width: 0;
    height: 0;
    border: none;
    font-size: 25px;
    color: #023645;
    font-family: 'icomoon';
    margin-top: -15px;
}

.step-section
    .fx-accordion__panel.is-current
    .fx-accordion__panel__toggle::after {
    content: '\e900';
    color: #af5e5b;
}

.step-section .fx-accordion__panel__content {
    padding: 0 20px 20px;
    border: none;
    text-align: left;
    border-bottom: 1px solid rgba( 58, 131, 158, 0.1 );
}

@media ( min-width: 1025px ) {
    .step-section .fx-accordion__panel__content {
        display: block !important;
        position: static;
        margin-bottom: 45px;
    }

    .fx-accordion__panel__btn-grp {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 25px;
    }
}

.step-content h2 {
    margin-bottom: 35px;
}

.journey-btn {
    text-align: center;
}

.step-grapgic {
    position: absolute;
    left: 0;
    top: 10px;
    max-width: 65px;
}

.step-name br {
    display: none;
}

@media ( min-width: 768px ) {
    .step-section .fx-accordion {
        max-width: 470px;
        margin: 0 auto 40px;
    }

    .step-name {
        padding: 0 25px 0 15px;
    }

    .step-section .fx-accordion__panel .fx-accordion__panel__toggle::after {
        top: 20px;
        margin-top: 0;
    }

    .step-content {
        padding: 80px 0 180px;
    }
}

@media ( min-width: 1025px ) {
    .step-section .fx-accordion__panels {
        box-sizing: border-box;
        display: flex;
        flex: 0 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        margin-right: -16px;
        margin-left: -16px;
        justify-content: center;
        text-align: center;
    }

    .step-section .fx-accordion__panel {
        box-sizing: border-box;
        flex: 0 0 auto;
        flex-basis: auto;
        padding-right: 0;
        padding-left: 0;
        margin: 20px 16px;
        background: #ffffff;
        width: calc( 33.33% - 32px );
        box-shadow: 0 4px 16px rgba( 2, 54, 69, 0.13 );
        padding: 40px 25px 10px;
        overflow: hidden;
    }

    .step-section .fx-accordion {
        background: #ffffff;
        box-shadow: none;
    }

    .step-section .fx-accordion {
        max-width: 950px;
        margin: 0 auto 40px;
        background: transparent;
    }

    .step-section
        .fx-accordion__panel:not( .is-expanded )
        .fx-accordion__panel__content,
    .accordion-heading,
    .step-name br {
        display: block;
        text-align: center;
    }

    .step-section .fx-accordion__panel .fx-accordion__panel__toggle::after {
        display: none;
    }

    .accordion-heading span {
        display: block;
        width: 100%;
    }

    .step-number {
        font-size: 48px;
    }

    .step-name {
        padding: 34px 0 10px;
        font-size: 20px;
    }

    .step-section .fx-accordion__panel__toggle,
    .step-section .fx-accordion__panel__content {
        border: none;
        padding: 0 0;
        text-align: center;
    }

    .step-grapgic {
        left: -27px;
        top: 34px;
        max-width: 255px;
    }

    .step-content h2 {
        margin-bottom: 30px;
    }

    .step-content {
        padding: 110px 0 180px;
    }

    .step-box {
        position: relative;
        overflow: hidden;
    }

    .step-box:before {
        content: '';
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: calc( 50% - 100px );
        left: calc( 50% - 100px );
        transform: scale( 0 );
        transition: transform 0.6s ease-in-out;
        background: #d69a36;
    }

    .step-box:hover:before {
        transform: scale( 3 );
    }

    .step-number,
    .step-name {
        transition: all 0.5s ease-in-out 0.3s;
    }

    .fx-accordion__panel {
        transition: top 0.8s ease-in-out, left 0.8s ease-in-out,
            opacity 0.8s ease-in-out;
    }

    .fx-accordion__panel:nth-child( 1 ) {
        top: 50px;
        left: -50px;
        opacity: 0;
    }

    .fx-accordion__panel:nth-child( 2 ) {
        top: 50px;
        left: 0;
        opacity: 0;
        transition-delay: 0.2s;
    }

    .fx-accordion__panel:nth-child( 3 ) {
        top: 50px;
        left: 50px;
        opacity: 0;
        transition-delay: 0.4s;
    }

    .fx-accordion__panel.is-active:nth-child( 1 ),
    .fx-accordion__panel.is-active:nth-child( 2 ),
    .fx-accordion__panel.is-active:nth-child( 3 ) {
        top: 0;
        left: 0;
        opacity: 1;
    }

    .step-box:hover .step-number,
    .step-box:hover .step-name,
    .step-box:hover .fx-accordion__panel__content {
        color: #fff;
        transition-delay: 0s;
    }
}