{"id":487,"date":"2023-06-20T10:28:16","date_gmt":"2023-06-20T10:28:16","guid":{"rendered":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/?page_id=487"},"modified":"2023-06-20T10:29:51","modified_gmt":"2023-06-20T10:29:51","slug":"how-it-works","status":"publish","type":"page","link":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/how-it-works\/","title":{"rendered":"How It Works"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:80px;padding-bottom:80px\">\n<div class=\"wp-block-group alignwide is-layout-constrained wp-block-group-is-layout-constrained\">\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-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-b89a9467 wp-block-group-is-layout-flex\" style=\"padding-left:50px\">\n<section id=\"how_it_works\" class=\"alignfull how_it_works how_it_works-section section\">\n        <div class=\"section-wrap\">\n        <div class=\"container\">\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\">The most thorough &amp; effective construction service in NYC.<\/h2>\n                            <\/div>\n                <\/div>\n                    <div class=\"line-wrapper-abs\">\n                <div id=\"line\">\n                                        <div class=\"branch flip\" >\n                                                \n                                                    <img decoding=\"async\" src=\"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-content\/uploads\/sites\/7\/2023\/06\/building-1.png\" alt=\"\">\n                        \n                        <div class=\"content left\">\n                            <p class=\"year\">Design &amp; Implementation<\/p>\n                            <p class=\"text\">Massa tincidunt nunc pulvinar sapien et. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Consequat ac felis donec et odio <\/p>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"branch mirror-down turn\" >\n                                                \n                                                    <img decoding=\"async\" src=\"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-content\/uploads\/sites\/7\/2023\/06\/interior-1.png\" alt=\"\">\n                        \n                        <div class=\"content right\">\n                            <p class=\"year\">Process Engineering<\/p>\n                            <p class=\"text\">Massa tincidunt nunc pulvinar sapien et. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Consequat ac felis donec et odio <\/p>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"branch flip\" >\n                                                \n                                                    <img decoding=\"async\" src=\"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-content\/uploads\/sites\/7\/2023\/06\/house-1.png\" alt=\"\">\n                        \n                        <div class=\"content left\">\n                            <p class=\"year\">Construction Management<\/p>\n                            <p class=\"text\">Massa tincidunt nunc pulvinar sapien et. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Consequat ac felis donec et odio <\/p>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"branch mirror-down turn\" >\n                                                \n                                                    <img decoding=\"async\" src=\"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-content\/uploads\/sites\/7\/2023\/06\/consult-1.png\" alt=\"\">\n                        \n                        <div class=\"content right\">\n                            <p class=\"year\">Civil Engineering<\/p>\n                            <p class=\"text\">Massa tincidunt nunc pulvinar sapien et. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Consequat ac felis donec et odio <\/p>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"branch flip\" >\n                                                \n                                                    <img decoding=\"async\" src=\"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-content\/uploads\/sites\/7\/2023\/06\/consult-1.png\" alt=\"\">\n                        \n                        <div class=\"content left\">\n                            <p class=\"year\">Mass Management<\/p>\n                            <p class=\"text\">Massa tincidunt nunc pulvinar sapien et. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Consequat ac felis donec et odio<\/p>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"branch mirror-down turn\" style='--bar-color:#f76902'>\n                                                    <div class=\"timeline-icon\" style='color:#f76902'><i class=\"fas fa-calendar-alt\"><\/i><\/div>\n                                                \n                        \n                        <div class=\"content right\">\n                            <p class=\"year\">Timely Deliver<\/p>\n                            <p class=\"text\">Massa tincidunt nunc pulvinar sapien et. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Consequat ac felis donec et odio<\/p>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"branch flip\" style='--bar-color:#f76902'>\n                                                    <div class=\"timeline-icon\" style='color:#f76902'><i class=\"fas fa-graduation-cap\"><\/i><\/div>\n                                                \n                        \n                        <div class=\"content left\">\n                            <p class=\"year\">2K+ Award Won<\/p>\n                            <p class=\"text\">Massa tincidunt nunc pulvinar sapien et. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Consequat ac felis donec et odio<\/p>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"branch mirror-down turn\" style='--bar-color:#f76902'>\n                                                    <div class=\"timeline-icon\" style='color:#f76902'><i class=\"fas fa-ambulance\"><\/i><\/div>\n                                                \n                        \n                        <div class=\"content right\">\n                            <p class=\"year\">25M Building Complete<\/p>\n                            <p class=\"text\">Massa tincidunt nunc pulvinar sapien et. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Consequat ac felis donec et odio<\/p>\n                        <\/div>\n                    <\/div>\n                                    <\/div><!-- line -->\n            <\/div>\n            <\/div><!-- section wrap -->\n    \n\n\n<style>\n\/* timeline *\/\n:root{\n    --bar-color: var(--theme-color);\n}\n.line-wrapper-abs{\n    min-height: 650px;\n}\n#line {\n    width: 100%;\n    max-width: 1190px;\n    height: 4px;\n    background-color: var(--theme-color);\n    margin: 0 auto;\n    position: relative;\n    top: 320px;\n}\n\n#line::after {\n    content: '';\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background-color: var(--theme-color);\n    position: absolute;\n    right: -5px;\n    top: -4px;\n}\n\n#line::before {\n    content: '';\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background-color: var(--theme-color);\n    position: absolute;\n    left: -5px;\n    top: -4px; \n}\n\n\/* branches *\/\n\n .branch {\n    width: calc(1190px\/10);\n    height: 130px;\n    border-left: 3px solid var(--bar-color);\n    position: relative;\n    bottom: 160px;\n    left: 40px;\n    display: inline-block;\n    transition: all 1.5s ease;\n}\n\n .branch::after {\n    content: '';\n    width: 15px;\n    height: 2px;\n    border-bottom: 3px solid var(--bar-color);\n    position: absolute;\n    bottom: 0;\n    left: -2px;\n}\n\n.branch::before {\n    content: '';\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: var(--bar-color);\n    position: absolute;\n    top: -4px;\n    left: -5.5px;\n}\n\n.mirror-down {\n    transform: scaleY(-1);  \n    top: 30px;\n}\n\n\/* inner content of branches *\/\n\n.mirror-down .content {\n  transform: scaleY(-1);\n  bottom: 0;\n}\n\n.branch .content {\n    position: absolute;\n    left: 30px;\n    top: 0px;\n    width: 200px;\n    height: 130px;\n    overflow: hidden;\n}\n\n.branch .year {\n  font-size: 1.2rem;\n  font-weight: 300;\n}\n\n.branch .text {\n    font-size: 0.92rem;\n    margin-top: 15px;\n}\n\n\/* icons *\/\n\n.branch img, .branch i {\n    position: absolute;\n    top: -135px;\n    left: -40px;\n    transform: scale(0.6);\n    font-size: 80px;\n    height: 135px;\n    width: 135px;\n    object-fit: cover;\n}\n\n.mirror-down img, .mirror-down i {\n  transform: scale(0.6) scaleY(-1);\n}\n\n@media (max-width: 1435px) {\n  #line {\n    transform: scale(0.9);\n  }\n}\n\n@media (max-width: 1256px) {\n  #line {\n    transform: scale(0.8);\n  }\n}\n\n@media (min-width: 1256px) {\n  \n  \/* subfooter *\/\n  .sub-foot {\n    justify-content: space-between;\n    margin-bottom: 5px;\n  }\n\n  .img-col {\n    width: 50%;\n  }\n\n}\n\n@media (max-width: 1255px) {\n    .line-wrapper-abs{\n        height: 1300px;\n    }\n   #line {\n      transform: rotate(90deg);\n      transform-origin: left;\n      top: 40px;\n      left: 50%;  \n      width: 1190px;\n    }\n\n    .branch.flip {\n        transform: scaleY(-1);\n    }\n\n    .branch.turn {\n        transform: scaleY(1);\n    }\n \n    .branch {\n        bottom: 0px;\n        height: 25px;\n    }\n\n    .mirror-down {\n        top: -22px;\n        left: -70px;\n    }\n\n    .branch::after {\n        content: '';\n        border: none;\n    }\n\n    .branch::before {\n        content: '';\n        width: 10px;\n        height: 10px;\n        left: -6px;\n    }\n  \n    .branch .text {\n        font-size: 1rem;  \n    }\n\n    .branch .left {\n        left: 4px;\n        top: -220px;\n        transform: scaleY(-1) rotate(-90deg);\n        transform-origin: top left;\n        width: 220px;\n    }\n  \n    .flip img, .flip i {\n      left: 120px;\n      top: -200px;\n      transform: rotate(-90deg) scaleX(-1) scale(0.6);\n    }\n\n    .branch .right {\n        left: -10px;\n        top: -20px;\n        transform: rotate(-90deg)!important;\n        transform-origin: top left;\n    } \n  \n    .turn img, .turn i {\n      left: 110px;\n      top: -160px;\n      transform: rotate(-90deg) scaleX(-1) scale(0.6);\n    }\n\n} \n\n@media (max-width: 652px) {\n  #line {\n      transform: rotate(90deg) scale(0.8);\n      transform-origin: left;\n      top: 40px;\n      left: 50%;  \n      width: 1190px;\n  }\n\n}\n<\/style>\n<\/section>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-pagebuilder.php","meta":{"footnotes":""},"class_list":["post-487","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-json\/wp\/v2\/pages\/487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-json\/wp\/v2\/comments?post=487"}],"version-history":[{"count":1,"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-json\/wp\/v2\/pages\/487\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-json\/wp\/v2\/pages\/487\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/demo.sparklewpthemes.com\/spark-multipurpose\/construction\/wp-json\/wp\/v2\/media?parent=487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}