.steps_section {
    width: 100%;
    position: relative;
    background: #012D52;

    & .container {
        position: relative;
        z-index: 2;

        & .section_inner {
            width: 100%;
            display: flex;
            flex-direction: column;
            
            & .section_heading {
                width: 100%;
                font-size: 36px;
                font-weight: 500;
                text-align: center;
                color: #FFFFFF;
                margin: 0 0 50px;

                @media (max-width: 991px) {
                    font-size: 26px;
                }
            }
            
            & .steps_outer {
                width: 100%;
                gap: 50px;

                @media (min-width: 992px) {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                }

                & .step {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    @media (min-width: 992px) {
                        width: calc(25% - 50px);
                    }

                    @media (max-width: 991px) {
                        width: 100%;
                    }

                    & img {
                        width: auto;
                        height: 50px;
                    }

                    & .step_count {
                        width: 100%;
                        text-align: center;
                        font-size: 14px;
                        font-weight: 500;
                        text-transform: uppercase;
                        color: #FFFFFF;
                        margin: 20px 0;
                        letter-spacing: 1.5px;
                    }

                    & .heading {
                        width: 100%;
                        text-align: center;
                        font-size: 20px;
                        font-weight: 600;
                        color: #00BBFF;
                        margin: 0 0 20px;
                    }

                    & p.text {
                        width: 100%;
                        font-size: 14px;
                        font-weight: 300;
                        text-align: center;
                        color: #FFFFFF;
                        margin: 0;
                    }
                }

                & .slick-dots {
                    & li.slick-active {
                        & button {
                            background-color: #fff !important;
                        }
                    }

                    & li:not(.slick-active) {
                        & button {
                            background-color: #474747 !important;
                        }
                    }
                }
            }
    
            & .call_to_action_buttons {
                width: 100%;
                margin: 40px 0 0;
            }
        }
    }
}