{"id":336,"date":"2023-06-20T11:03:10","date_gmt":"2023-06-20T11:03:10","guid":{"rendered":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/?page_id=336"},"modified":"2023-06-21T05:08:33","modified_gmt":"2023-06-21T05:08:33","slug":"how-it-works","status":"publish","type":"page","link":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/how-it-works\/","title":{"rendered":"How it works"},"content":{"rendered":"\n<div class=\"wp-block-group alignwide is-layout-constrained wp-container-core-group-is-layout-b32f5feb wp-block-group-is-layout-constrained\" style=\"padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px\">\n<div class=\"wp-block-group alignwide is-layout-constrained wp-container-core-group-is-layout-e5c0cd5e wp-block-group-is-layout-constrained\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<pre class=\"wp-block-code\"><code>&#091;smc_how_it_works]<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide alignfull is-layout-constrained wp-container-core-group-is-layout-a7e17ea5 wp-block-group-is-layout-constrained\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">        <section id=\"how_it_works-section\" class=\"alignfull how_it_works how_it_works-section section\">\n                                                    <div class=\"section-wrap\">\n                        <div class=\"container\">\n                            <div class=\"inner-section-wrap\">\n                                            <div class=\"section-title-wrapper text-center\" data-aos=\"fade-up\" data-aos-duration=\"1500\" data-aos-delay=\"100\">\n                                    <span class=\"super-title\">How it works<\/span>\n                                    <h2 class=\"section-title\">How we start works?<\/h2>\n                            <\/div>\n                                        <div class=\"step_block\">\n                                    <ul>\n                                                    <li data-aos=\"fade-up\" data-aos-duration=\"1500\" data-aos-delay=\"100\">\n                <div class=\"step_text\">\n                    <div class='step-content'>\n                        <h4><a href=\"#\">Prepare requirements<\/a><\/h4>\n                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#039;s standard.<\/p>\n                                                    <a href=\"#\" class=\"btn btn-noborder\">\n                                Details <i class=\"fas fa-long-arrow-alt-right\"><\/i>\n                            <\/a>\n                                            <\/div>\n\n                                        <div class=\"step-icon\">\n                        <i class=\"fas fa-address-card\"><\/i>\n                    <\/div>\n                    \n                <\/div>\n                <div class=\"step_number\">\n                                                            <h2>\n                        01                    <\/h2>\n                                    <\/div>\n                <div class=\"step_img\">\n                                    <\/div>\n            <\/li>\n                        <li data-aos=\"fade-up\" data-aos-duration=\"1500\" data-aos-delay=\"100\">\n                <div class=\"step_text\">\n                    <div class='step-content'>\n                        <h4><a href=\"#\">Send your requirement<\/a><\/h4>\n                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#039;s standard.<\/p>\n                                                    <a href=\"#\" class=\"btn btn-noborder\">\n                                Details <i class=\"fas fa-long-arrow-alt-right\"><\/i>\n                            <\/a>\n                                            <\/div>\n\n                                        <div class=\"step-icon\">\n                        <i class=\"fas fa-american-sign-language-interpreting\"><\/i>\n                    <\/div>\n                    \n                <\/div>\n                <div class=\"step_number\">\n                                                            <h2>\n                        02                    <\/h2>\n                                    <\/div>\n                <div class=\"step_img\">\n                                    <\/div>\n            <\/li>\n                        <li data-aos=\"fade-up\" data-aos-duration=\"1500\" data-aos-delay=\"100\">\n                <div class=\"step_text\">\n                    <div class='step-content'>\n                        <h4><a href=\"#\">Will estimate<\/a><\/h4>\n                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#039;s standard.<\/p>\n                                                    <a href=\"#\" class=\"btn btn-noborder\">\n                                Details <i class=\"fas fa-long-arrow-alt-right\"><\/i>\n                            <\/a>\n                                            <\/div>\n\n                                        <div class=\"step-icon\">\n                        <i class=\"fas fa-address-card\"><\/i>\n                    <\/div>\n                    \n                <\/div>\n                <div class=\"step_number\">\n                                                            <h2>\n                        03                    <\/h2>\n                                    <\/div>\n                <div class=\"step_img\">\n                                    <\/div>\n            <\/li>\n                        <li data-aos=\"fade-up\" data-aos-duration=\"1500\" data-aos-delay=\"100\">\n                <div class=\"step_text\">\n                    <div class='step-content'>\n                        <h4><a href=\"#\">Need your approval<\/a><\/h4>\n                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#039;s standard.<\/p>\n                                                    <a href=\"#\" class=\"btn btn-noborder\">\n                                Details <i class=\"fas fa-long-arrow-alt-right\"><\/i>\n                            <\/a>\n                                            <\/div>\n\n                                        <div class=\"step-icon\">\n                        <i class=\"fas fa-anchor\"><\/i>\n                    <\/div>\n                    \n                <\/div>\n                <div class=\"step_number\">\n                                                            <h2>\n                        04                    <\/h2>\n                                    <\/div>\n                <div class=\"step_img\">\n                                    <\/div>\n            <\/li>\n                        <li data-aos=\"fade-up\" data-aos-duration=\"1500\" data-aos-delay=\"100\">\n                <div class=\"step_text\">\n                    <div class='step-content'>\n                        <h4><a href=\"#\">Start the work<\/a><\/h4>\n                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#039;s standard.<\/p>\n                                                    <a href=\"#\" class=\"btn btn-noborder\">\n                                Details <i class=\"fas fa-long-arrow-alt-right\"><\/i>\n                            <\/a>\n                                            <\/div>\n\n                                        <div class=\"step-icon\">\n                        <i class=\"fas fa-address-card\"><\/i>\n                    <\/div>\n                    \n                <\/div>\n                <div class=\"step_number\">\n                                                            <h2>\n                        05                    <\/h2>\n                                    <\/div>\n                <div class=\"step_img\">\n                                    <\/div>\n            <\/li>\n                                                        <\/ul>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                            <\/section>\n        \n<style>\n\n\/***\n  * How It Works Section \n*\/\n.how_it_works .step_block ul {\n    padding: 0;\n}\n\n.how_it_works .step_block ul li {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    margin-bottom: 30px;\n}\n\n.how_it_works .step_block ul li:last-child {\n    margin-bottom: 0;\n}\n\n.how_it_works .step_block ul li::before {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 50px;\n    transform: translateX(-50%);\n    width: 6px;\n    height: calc(100% + 100px);\n    background-color: var(--theme-color);\n}\n\n.how_it_works .step_block ul li:first-child::after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: -5px;\n    transform: translateX(-50%);\n    width: 15px;\n    height: 15px;\n    background-color: var(--theme-color);\n    border-radius: 15px;\n}\n\n.how_it_works .step_block ul li:first-child::before {\n    top: 0;\n}\n\n.how_it_works .step_block ul li:last-child::before {\n    height: 50%;\n    top: 0;\n}\n\n.how_it_works .step_block ul li .step_text,\n.how_it_works .step_block ul li .step_img {\n    width: 40%;\n    text-align: right;\n    position: relative;\n}\n\n.how_it_works .step_block ul li .step_text {\n    padding: 20px;\n    background: var(--white-color);\n    box-shadow: 0 2px 25px 0 var(--box-shadow);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    gap: 1em;\n}\n\n.how_it_works .step_block ul li .step_text p {\n    margin: 10px 0;\n}\n\n.how_it_works .step_text:before {\n    content: '';\n    position: absolute;\n    border-style: solid;\n    border-color: #ff090900;\n    top: 40%;\n    border-width: 17px;\n    right: -33px;\n    border-left-color: var(--white-color);\n}\n\n.how_it_works .step_block ul li:nth-child(2n) .step_text:before {\n    transform: rotate(180deg);\n    left: -33px;\n    right: unset;\n}\n\n.how_it_works .step_block ul li:nth-child(2n) .step_text {\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n}\n\n.how_it_works .step_block ul li .step_img {\n    position: relative;\n    overflow: hidden;\n    border-radius: 10px;\n    cursor: pointer;\n}\n\n.how_it_works .step_block ul li .step_img img {\n    transition: all ease 0.6s;\n    -webkit-transition: all ease 0.6s;\n    -ms-transition: all ease 0.6s;\n}\n\n.how_it_works .step_block ul li .step_img img:hover {\n    transform: scale(1.1);\n    -webkit-transform: scale(1.1);\n    -ms-transform: scale(1.1);\n}\n\n.how_it_works .step_block ul li:nth-child(2n) {\n    flex-direction: row-reverse;\n}\n\n.how_it_works .step_block ul li:nth-child(2n) .step_text,\n.how_it_works .step_block ul li:nth-child(2n) .step_img {\n    text-align: left;\n}\n\n\/* how it works numbers *\/\n.how_it_works .step_block ul li .step_number {\n    width: 100px;\n    height: 100px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    border-radius: 100%;\n    background: var(--white-color);\n    border: 5px solid rgba(var(--theme-rgb-color), 62%);\n    box-shadow: 0 0px 8px rgba(var(--theme-rgb-color), 46%), 0 0 #eee inset, 0 0 #eee inset;\n}\n\n.how_it_works .step_number h2 {\n    font-size: 28px;\n    color: var(--theme-color);\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 5px solid rgba(var(--theme-rgb-color), 72%);\n    border-radius: 100%;\n    margin: 0;\n    box-shadow: 0 2px 15px rgba(var(--theme-rgb-color), 50%), 1px 0 rgba(var(--theme-rgb-color), 50%) inset, -1px 0 rgba(var(--theme-rgb-color), 50%) inset;\n}\n\n.how_it_works .step-icon {\n    font-size: 49px;\n}\n@media screen and (max-width: 480px) {\n\n    .how_it_works .step_block ul li,\n    .how_it_works .step_block ul li:nth-child(2n) {\n        flex-direction: column;\n        padding-left: 30px;\n        margin-bottom: 20px;\n    }\n\n    .how_it_works .step_block ul li:last-child {\n        margin-bottom: 0;\n    }\n\n    .how_it_works .step_block ul li::before {\n        left: 8px;\n        transform: none;\n    }\n\n    .how_it_works .step_block ul li:first-child::after {\n        left: -5px;\n        transform: none;\n        display: none;\n    }\n\n    .how_it_works .step_block ul li .step_text,\n    .how_it_works .step_block ul li .step_img,\n    .how_it_works .step_block ul li:nth-child(2) .step_text,\n    .how_it_works .step_block ul li:nth-child(2) .step_img {\n        text-align: center;\n    }\n\n    .how_it_works .step_block ul li .step_text,\n    .how_it_works .step_block ul li .step_img {\n        width: 100%;\n    }\n\n    .how_it_works .step_text:before {\n        transform: rotate(180deg);\n        left: -33px;\n        right: unset;\n    }\n\n    .how_it_works .step_block ul li .step_number {\n        position: absolute;\n        top: -5px;\n        left: -15px;\n        width: 50px;\n        height: 50px;\n    }\n\n    .how_it_works .step_block ul li:last-child::before {\n        opacity: 0;\n    }\n\n    .how_it_works .step_block ul li .step_number h2 {\n        font-size: 15px;\n        margin-bottom: 0;\n        margin-top: -2px;\n        border: none;\n        box-shadow: none;\n    }\n}\n<\/style>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-pagebuilder.php","meta":{"footnotes":""},"class_list":["post-336","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/wp-json\/wp\/v2\/pages\/336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/wp-json\/wp\/v2\/comments?post=336"}],"version-history":[{"count":5,"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/wp-json\/wp\/v2\/pages\/336\/revisions"}],"predecessor-version":[{"id":356,"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/wp-json\/wp\/v2\/pages\/336\/revisions\/356"}],"wp:attachment":[{"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/wp-json\/wp\/v2\/media?parent=336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}