.tt-process-box {
    &.style-one {
        display: flex;
        margin-bottom: 48px;
        position: relative;

        &:last-child {
            margin-bottom: 0;
        }

        .icon-container {
            background-color: #fff;
            border: 2px solid #dee2e6;
            border-radius: 1rem;
            margin-right: 1.5rem;
            height: 65px;
            min-width: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: all 0.3s ease-in-out;
        }

        .tt-process_step {
            font-size: 16px;
            font-weight: 500;
            color: $color__theme;
            margin-bottom: 6px;
        }

        .box-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .description {
            margin-bottom: 0;
        }

        &:hover {
            .icon-container {
                background-color: $color__theme;
                color: #fff;
                border-color: $color__theme;
            }
        }
    }

    &.style-two {
        text-align: center;

        .icon-container {
            font-size: 32px;
            margin-bottom: 28px;
            color: $color__theme;
            display: inline-block;
        }

        .tt-process_step {
            font-size: 13px;
            font-weight: 400;
            background-color: #ceddff;
            display: inline-block;
            border-radius: 20px;
            padding: 5px 15px;
            color: $color__theme;
            margin-bottom: 18px;
        }

        .box-title {
            font-size: 18px;
            font-weight: 600;
        }
    }

    &.style-three {
        text-align: center;
        position: relative;
        display: block;
        transition: all 0.3s ease;
        padding: 40px 30px;
        border-radius: 15px;
        z-index: 2;
        margin-bottom: 30px;

        @media(max-width: 575px) {
            max-width: 400px;
            margin: 0 auto;
        }


        .icon-container {
            height: 80px;
            width: 80px;
            line-height: 77px;
            text-align: center;
            color: $color__theme;
            font-size: 40px;
            font-weight: 800;
            display: inline-block;
            margin-bottom: 25px;
            border: 2px solid rgba(101, 101, 101, 0.1);
            border-radius: 10px;
            transition: all 0.3s ease-in-out;
        }

        .box-title {
            font-size: 20px;
            margin-bottom: 5px;
            font-weight: 600;
        }

        p {
            margin: 0;
        }

        //&:after {
        //    content: '';
        //    position: absolute;
        //    width: 80px;
        //    height: 2px;
        //    border-bottom: 2px dashed $color__theme;
        //    right: -55px;
        //    top: 50%;
        //    transform: translateY(-50%);
        //    z-index: -2;
        //}
        //
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            border-radius: 15px;
            transition: all 0.3s ease-in-out;
        }

        &:hover {
            box-shadow: 0 5px 20px 0 rgba(210, 210, 245, 0.5);
            z-index: 2;

            .icon-container {
                background-color: $color__theme;
                border-color: $color__theme;
                color: #fff;
            }

            &:before {
                background-color: #fff;
            }
        }
    }
}

.process-box-wrapper {
    .tt-process-box {
        &:not(:last-child) {
            .icon-container {
                &:before {
                    content: '';
                    position: absolute;
                    top: 64px;
                    left: 33px;
                    height: 100%;
                    z-index: -1;
                    border-style: dashed;
                    border-width: 1px;
                    border-color: #D6D5E1;
                    background-color: transparent;
                }
            }
        }
    }
}

.process-box-wrapper {
    .row {
        .col-lg-3 {
            &:not(:nth-child(4)) {
                .tt-process-box.style-three {
                    &:after {
                        content: '';
                        position: absolute;
                        width: 80px;
                        height: 2px;
                        border-bottom: 2px dashed $color__theme;
                        right: -55px;
                        top: 50%;
                        transform: translateY(-50%);
                        z-index: -2;
                    }

                    //&:before {
                    //    content: '';
                    //    position: absolute;
                    //    left: 0;
                    //    top: 0;
                    //    width: 100%;
                    //    height: 100%;
                    //    z-index: -1;
                    //    border-radius: 15px;
                    //    transition: all 0.3s ease-in-out;
                    //}
                }

                @media(max-width: 991px) {
                    &:nth-child(3) {
                        .tt-process-box.style-three {
                            &:after {
                                display: none;
                            }
                        }
                    }
                }

                @media(max-width: 767px) {
                    &:nth-child(2) {
                        .tt-process-box.style-three {
                            &:after {
                                display: none;
                            }
                        }
                    }

                    &:nth-child(3) {
                        .tt-process-box.style-three {
                            &:after {
                                display: block;
                            }
                        }
                    }
                }

                @media(max-width: 767px) {
                    &:nth-child(2) {
                        .tt-process-box.style-three {
                            &:after {
                                display: none;
                            }
                        }
                    }

                    &:nth-child(3) {
                        .tt-process-box.style-three {
                            &:after {
                                display: block;
                            }
                        }
                    }
                }

                @media(max-width: 575px) {
                    .tt-process-box.style-three {
                        &:after {
                            display: none !important;
                        }
                    }
                }
            }
        }
    }
}