@import "../_assets/style-preview";
.featured-style {
    padding-bottom: 40px;
    padding-top: 50px;
    text-align: center;
    .feature-block {
        .inner-box {
            position: relative;
            display: block;
            background: #ffffff;
            border-radius: 12px;
            margin-bottom: 30px;
            padding: 55px 60px 45px 60px;
            transition: all 500ms ease;
            .gjs-icon {
                display: flex;
                margin: 0 auto 37px;
                justify-content: center;
                align-items: center;
                position: relative;
                transition: all 500ms ease;
                min-height: 85px;
                width: 85px;
                svg {
                    width: 85px;
                    height: 85px;
                }
            }
            h3 {
                display: block;
                font-size: 22px;
                line-height: 31px;
                margin-bottom: 25px;
            }
            p {
                margin-bottom: 35px;
            }
            &:hover {
                box-shadow: 0 4px 45px 0 rgba(0, 0, 0, 0.05);
                .gjs-icon {
                    transform: rotateY(180deg);
                }
            }
        }
        .link {
            a {
                position: relative;
                display: inline-block;
                width: 56px;
                height: 56px;
                line-height: 56px;
                background: #ededff;
                text-align: center;
                border-radius: 50%;
                font-size: 22px;
                color: #9680ef;
                font-weight: 700;
                &:before {
                    position: absolute;
                    content: "→";
                    font-size: 29px;
                    top: -1px;
                    left: 12px;
                }
            }
        }
        &:nth-child(1) .inner-box .gjs-icon {
            color: #6c5ce7;
        }
        &:nth-child(2) .inner-box .gjs-icon {
            color: #00c4dc;
        }
        &:nth-child(3) .inner-box .gjs-icon {
            color: #fc8a29;
        }
        &:nth-child(4) .inner-box .gjs-icon {
            color: #3ad44f;
        }
        &:nth-child(5) .inner-box .gjs-icon {
            color: #ff5252;
        }
        &:nth-child(6) .inner-box .gjs-icon {
            color: #fdcb00;
        }
        &:nth-child(7) .inner-box .gjs-icon {
            color: #00b894;
        }
        &:nth-child(8) .inner-box .gjs-icon {
            color: #0984e3;
        }
    }
}
