{"id":12917,"date":"2025-02-06T23:59:51","date_gmt":"2025-02-06T23:59:51","guid":{"rendered":"https:\/\/merakytech.com\/?page_id=12917"},"modified":"2025-02-07T10:36:50","modified_gmt":"2025-02-07T10:36:50","slug":"test","status":"publish","type":"page","link":"https:\/\/merakytech.com\/fr\/test\/","title":{"rendered":"Test"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12917\" class=\"elementor elementor-12917\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-78a97fc5 e-con-full e-flex e-con e-parent\" data-id=\"78a97fc5\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/youtu.be\\\/8_VmBZNb9UY&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;,&quot;background_privacy_mode&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-video-embed\"><\/div>\n\t\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-4cda3d1d e-flex e-con-boxed e-con e-child\" data-id=\"4cda3d1d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2c535ad7 e-con-full e-flex e-con e-child\" data-id=\"2c535ad7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d6881b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"3d6881b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\">\ud83d\udc4b<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31f31ed9 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"31f31ed9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Welcome Brandmode<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9aa6981 elementor-widget__width-initial exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading\" data-id=\"9aa6981\" data-element_type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_center   ekit_heading_tablet-   ekit_heading_mobile-\"><h1 class=\"ekit-heading--title elementskit-section-title text_fill\">We are a leading <span><span>digital agency<\/span><\/span> with global reach &amp; <span><span>services<\/span><\/span><\/h1><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2009ce3e e-con-full e-flex e-con e-parent\" data-id=\"2009ce3e\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-449cca64 e-flex e-con-boxed e-con e-child\" data-id=\"449cca64\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-25e7e593 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"25e7e593\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;animation_delay&quot;:150}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-698a102c exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading\" data-id=\"698a102c\" data-element_type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-text_center\"><a href=\"#\"><h4 class=\"ekit-heading--title elementskit-section-title text_fill\"> Social Media <br>  <span><span>Marketing<\/span><\/span><\/h4><\/a><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3cf19d55 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"3cf19d55\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;animation_delay&quot;:200}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-36450c0e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading\" data-id=\"36450c0e\" data-element_type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-text_center\"><a href=\"#\"><h4 class=\"ekit-heading--title elementskit-section-title \"> Website <br>  <span><span>Development<\/span><\/span><\/h4><\/a><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-480faf66 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"480faf66\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;animation_delay&quot;:250}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7ceff79b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading\" data-id=\"7ceff79b\" data-element_type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-text_center\"><a href=\"#\"><h4 class=\"ekit-heading--title elementskit-section-title text_fill\"> App  <br>  <span><span>Development<\/span><\/span><\/h4><\/a><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-660ce257 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"660ce257\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-222a43de exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading\" data-id=\"222a43de\" data-element_type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-text_center\"><a href=\"#\"><h4 class=\"ekit-heading--title elementskit-section-title \">Brand <br>  <span><span>Identity<\/span><\/span><\/h4><\/a><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-75e1e66e e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"75e1e66e\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;animation_delay&quot;:350}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e96ec00 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading\" data-id=\"2e96ec00\" data-element_type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-text_center\"><a href=\"#\"><h4 class=\"ekit-heading--title elementskit-section-title text_fill\">SEO<br>  <span><span>Optimization<\/span><\/span><\/h4><\/a><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f65212e e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"f65212e\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;animation_delay&quot;:350}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-894b353 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading\" data-id=\"894b353\" data-element_type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-text_center\"><a href=\"#\"><h4 class=\"ekit-heading--title elementskit-section-title text_fill\">SEO<br>  <span><span>Optimization<\/span><\/span><\/h4><\/a><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-413c961d e-flex e-con-boxed e-con e-parent\" data-id=\"413c961d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-664f02e5 animGradientHighlight exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"664f02e5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Animated Text Reveals <br> Elementor &amp; GSAP Template<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-31f35394 e-con-full e-flex e-con e-child\" data-id=\"31f35394\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67a1f89c exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-button\" data-id=\"67a1f89c\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/dmmotionarts.com\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-arrow-right\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Provided By<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4dadc8ec exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-button\" data-id=\"4dadc8ec\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/dmmotionarts.com\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">DMmotionarts.com<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a0acfc8 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-button\" data-id=\"6a0acfc8\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.youtube.com\/@DMmotionarts\/\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Youtube @DMmotionarts<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78dfd1b7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"78dfd1b7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.4\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/split-type\"><\/script>\r\n\r\n<style>\r\n    \r\n    .animGradientHighlight h1 {animation: movegradient 4s linear infinite;\r\n\tbackground-image: linear-gradient(to right, #77f, #33d0ff, #25ffbb, #33d0ff, #77f);\r\n\tbackground-size: 200% auto;\r\n\t-webkit-background-clip: text;\r\n\r\n}\r\n\r\n@keyframes movegradient { to { background-position: 200% center; } }\r\n    \r\n    \r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14474071 e-flex e-con-boxed e-con e-parent\" data-id=\"14474071\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-302009bc elementor-widget__width-initial dm-single-heading-1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"302009bc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That Reveals From The Bottom<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72b86a1d exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"72b86a1d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  let animHeading1 = document.querySelectorAll('.dm-single-heading-1');\r\n\r\n  animHeading1.forEach((headingElement1, index) => {\r\n    let dmSplitHeading1 = new SplitType(headingElement1.querySelector('h2'), { types: 'words' });\r\n\r\n    gsap.from(dmSplitHeading1.words, {\r\n      scrollTrigger: {\r\n        trigger: headingElement1,\r\n        start: 'top 80%'\r\n      },\r\n      y: 30,\r\n      opacity: 0,\r\n      duration: 0.3,\r\n      stagger: 0.1\r\n    });\r\n  });\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12de6724 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"12de6724\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49a55578 elementor-widget__width-initial dm-heading1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"49a55578\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am Heading That Reveals From The Bottom<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-524abdf7 elementor-widget__width-initial dm-paragraph1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"524abdf7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4bee738c exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"4bee738c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\n\ndocument.addEventListener('DOMContentLoaded', () => {    \n\nlet animHeadingPara1 = document.querySelectorAll('.dm-heading1')\n\n  animHeadingPara1.forEach((headingElement1, index) => {\n  let dmSplitHeading1 = new SplitType(headingElement1.querySelector('h2'), { types: 'words' });\n  let dmSplitParagraph1 = new SplitType(document.querySelectorAll('.dm-paragraph1')[index].querySelector('p'), { types: 'lines' });\n\n  let headingParaTimeline1 = gsap.timeline({\n    scrollTrigger: {\n      trigger: headingElement1,\n      scroller: 'body',\n      start: 'top 80%'\n    }\n  });\n\n  headingParaTimeline1\n    .from(dmSplitHeading1.words, {\n      y: 30,\n      opacity: 0,\n      duration: 0.3,\n      stagger: 0.1\n    })\n    .from(dmSplitParagraph1.lines, {\n      y: 30,\n      opacity: 0,\n      duration: 0.3,\n      stagger: 0.1\n    }, \"-=0.2\"); \/\/ overlap the animations slightly for a smoother effect\n});\n\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-17647e78 e-flex e-con-boxed e-con e-parent\" data-id=\"17647e78\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f8f0f1d elementor-widget__width-initial dm-single-heading-2 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"1f8f0f1d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That Reveals From The Left<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c59745f exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"4c59745f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  let animHeading2 = document.querySelectorAll('.dm-single-heading-2');\r\n\r\n  animHeading2.forEach((headingElement2, index) => {\r\n    let dmSplitHeading2 = new SplitType(headingElement2.querySelector('h2'), { types: 'words' });\r\n\r\n    gsap.from(dmSplitHeading2.words, {\r\n      scrollTrigger: {\r\n        trigger: headingElement2,\r\n        start: 'top 80%'\r\n      },\r\n      x: -30,\r\n      opacity: 0,\r\n      duration: 0.3,\r\n      stagger: 0.1\r\n    });\r\n  });\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4329d5b4 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"4329d5b4\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ff9ca67 elementor-widget__width-initial dm-heading2 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"4ff9ca67\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am Heading That Reveals From The Left<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e53df8f elementor-widget__width-initial dm-paragraph2 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"4e53df8f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d6a4cec exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"6d6a4cec\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {    \r\n\r\n  let animHeadingPara2 = document.querySelectorAll('.dm-heading2');\r\n\r\n  animHeadingPara2.forEach((headingElement2, index) => {\r\n    let dmSplitHeading2 = new SplitType(headingElement2.querySelector('h2'), { types: 'words' });\r\n    let dmSplitParagraph2 = new SplitType(document.querySelectorAll('.dm-paragraph2')[index].querySelector('p'), { types: 'lines' });\r\n\r\n    let headingParaTimeline2 = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: headingElement2,\r\n        scroller: 'body',\r\n        start: 'top 80%'\r\n      }\r\n    });\r\n\r\n    headingParaTimeline2\r\n      .from(dmSplitHeading2.words, {\r\n        x: -30,\r\n        opacity: 0,\r\n        duration: 0.3,\r\n        stagger: 0.1\r\n      })\r\n      .from(dmSplitParagraph2.lines, {\r\n        x: -30,\r\n        opacity: 0,\r\n        duration: 0.3,\r\n        stagger: 0.1\r\n      }, \"-=0.2\"); \/\/ overlap the animations slightly for a smoother effect\r\n  });\r\n\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a7ab828 e-flex e-con-boxed e-con e-parent\" data-id=\"6a7ab828\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-647618a4 elementor-widget__width-initial dm-single-heading-3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"647618a4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That Reveals by Clipping from Bottom<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c559e18 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"3c559e18\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \r\n    .dm-single-heading-3 .word {\r\n        \r\n        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\r\n        \r\n    }\r\n \r\n    \r\n<\/style>\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  let animHeading3 = document.querySelectorAll('.dm-single-heading-3');\r\n\r\n  animHeading3.forEach((headingElement3, index) => {\r\n    let dmSplitHeading3 = new SplitType(headingElement3.querySelector('h2'), { types: 'words' });\r\n\r\n    gsap.from(dmSplitHeading3.words, {\r\n      scrollTrigger: {\r\n        trigger: headingElement3,\r\n        start: 'top 80%'\r\n      },\r\n      clipPath: 'polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)',\r\n      duration: 0.3,\r\n      stagger: 0.1\r\n    });\r\n  });\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67f569f7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"67f569f7\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51161e93 elementor-widget__width-initial dm-heading3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"51161e93\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am Heading That Reveals by Clipping from Bottom<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7402634a elementor-widget__width-initial dm-paragraph3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"7402634a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33464942 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"33464942\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \r\n    .dm-heading3 .word {\r\n        \r\n         clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\r\n        \r\n    }\r\n    \r\n    .dm-paragraph3 .line {\r\n        \r\n        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\r\n        \r\n    }\r\n    \r\n<\/style>\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {    \r\n\r\n  let animHeadingPara3 = document.querySelectorAll('.dm-heading3');\r\n\r\n  animHeadingPara3.forEach((headingElement3, index) => {\r\n    let dmSplitHeading3 = new SplitType(headingElement3.querySelector('h2'), { types: 'words' });\r\n    let dmSplitParagraph3 = new SplitType(document.querySelectorAll('.dm-paragraph3')[index].querySelector('p'), { types: 'lines' });\r\n\r\n    let headingParaTimeline3 = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: headingElement3,\r\n        scroller: 'body',\r\n        start: 'top 80%'\r\n      }\r\n    });\r\n\r\n    headingParaTimeline3\r\n      .from(dmSplitHeading3.words, {\r\n        clipPath: 'polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)',\r\n        opacity: 0,\r\n        duration: 0.3,\r\n        stagger: 0.1\r\n      })\r\n      .from(dmSplitParagraph3.lines, {\r\n        clipPath: 'polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)',\r\n        opacity: 0,\r\n        duration: 0.3,\r\n        stagger: 0.1\r\n      }, \"-=0.2\"); \/\/ overlap the animations slightly for a smoother effect\r\n  });\r\n\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-144ade8c e-flex e-con-boxed e-con e-parent\" data-id=\"144ade8c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3eeb92fe elementor-widget__width-initial dm-single-heading-4 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"3eeb92fe\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That Reveals by Clipping from Bottom<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f2e0610 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"1f2e0610\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n  .dm-single-heading-4 .line {\r\n      \r\n      overflow: hidden;\r\n      \r\n  }\r\n  \r\n  .dm-single-line-wrapper-4 {\r\n      \r\n      overflow: hidden;\r\n  }\r\n  \r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n    let animHeading4 = document.querySelectorAll('.dm-single-heading-4');\r\n\r\n    animHeading4.forEach((headingElement4, index) => {\r\n      let dmSplitHeading4 = new SplitType(headingElement4.querySelector('h2'), { types: 'lines, words' });\r\n      \r\n       const dmSingleHeadingLines4 = document.querySelectorAll('.dm-single-heading-4 .line');\r\n       \r\n    dmSingleHeadingLines4.forEach((lineElement) => {\r\n\r\n    const dmWrapper = document.createElement('div');\r\n    dmWrapper.classList.add('dm-single-line-wrapper-4');\r\n    lineElement.parentNode.insertBefore(dmWrapper, lineElement);\r\n    dmWrapper.appendChild(lineElement);\r\n    \r\n    });\r\n\r\n      gsap.from(dmSplitHeading4.words, {\r\n        scrollTrigger: {\r\n          trigger: headingElement4,\r\n          start: 'top 80%'\r\n        },\r\n        y:'120%',\r\n        duration: 0.3,\r\n        stagger: 0.1\r\n      });\r\n    });\r\n  });\r\n  \r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1fd5b11b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"1fd5b11b\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-48cf69e7 elementor-widget__width-initial dm-heading4 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"48cf69e7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am Heading That Reveals by Clipping from Bottom<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a46531f elementor-widget__width-initial dm-paragraph4 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"6a46531f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-307b68c5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"307b68c5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n  .dm-heading4 .line {\r\n      \r\n   overflow: hidden;\r\n   \r\n  }\r\n  \r\n  .dm-line-wrapper-4 {\r\n      \r\n      overflow: hidden;\r\n  }\r\n\r\n  .dm-paragraph4 .line {\r\n      \r\n    overflow: hidden;\r\n    \r\n  }\r\n  \r\n<\/style>\r\n\r\n<script>\r\n\r\n  document.addEventListener('DOMContentLoaded', () => {    \r\n\r\n    let animHeadingPara4 = document.querySelectorAll('.dm-heading4');\r\n\r\n    animHeadingPara4.forEach((headingElement4, index) => {\r\n      \r\n      \/\/Split Heading and Paragraph into lines,words, chars\r\n      let dmSplitHeading4 = new SplitType(headingElement4.querySelector('h2'), { types: 'lines, words' });\r\n      \r\n      let dmSplitParagraph4 = new SplitType(document.querySelectorAll('.dm-paragraph4')[index].querySelector('p'), { types: 'lines' });\r\n\r\n      let headingParaTimeline4 = gsap.timeline({\r\n        scrollTrigger: {\r\n          trigger: headingElement4,\r\n          scroller: 'body',\r\n          start: 'top 80%'\r\n        }\r\n      });\r\n      \r\n    const dmParagraphLines4 = document.querySelectorAll('.dm-paragraph4 .line');\r\n    const dmHeadinglines4 = document.querySelectorAll('.dm-heading4 .line');\r\n    \r\n    dmParagraphLines4.forEach((lineElement) => {\r\n    \r\n    const dmWrapper = document.createElement('div');\r\n    dmWrapper.classList.add('dm-line-wrapper-4');\r\n    lineElement.parentNode.insertBefore(dmWrapper, lineElement);\r\n    dmWrapper.appendChild(lineElement);\r\n    \r\n    });\r\n    \r\n    dmHeadinglines4.forEach((lineElement) => {\r\n\r\n    const dmWrapper = document.createElement('div');\r\n    dmWrapper.classList.add('dm-line-wrapper-4');\r\n    lineElement.parentNode.insertBefore(dmWrapper, lineElement);\r\n    dmWrapper.appendChild(lineElement);\r\n    \r\n    });\r\n\r\n      headingParaTimeline4\r\n        .from(dmSplitHeading4.words, {\r\n          y:'120%',\r\n          opacity: 0,\r\n          duration: 0.3,\r\n          stagger: 0.1\r\n        })\r\n        .from(dmSplitParagraph4.lines, {\r\n           y:'120%',\r\n          opacity: 0,\r\n          duration: 0.3,\r\n          stagger: 0.1 \/\/Remove Stagger if you want to reveal by line\r\n        }, \"-=0.2\"); \/\/ overlap the animations slightly for a smoother effect\r\n    });\r\n\r\n  });\r\n  \r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-12509f9 e-flex e-con-boxed e-con e-parent\" data-id=\"12509f9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fbe183a elementor-widget__width-initial dm-single-heading-5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"5fbe183a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That Reveals by Color from Left<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57135c60 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"57135c60\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n    .dm-single-heading-5 .dm-line-5 {\r\n        \r\n        overflow: hidden;\r\n        position: relative;\r\n        clip-path: inset(0 100% 0 0);\r\n        transition: none !important;\r\n        width: fit-content !important;\r\n    }\r\n    \r\n    .dm-line-5.animate {\r\n        \r\n        animation: dm-clip-text 1s forwards;\r\n        \r\n    }\r\n   \r\n    \r\n    .dmRevealAnim1:after {\r\n        \r\n        transition: none !important;\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        top:0;\r\n        height: 100%;\r\n        width: 100%;\r\n        z-index: 5;\r\n        background-color: red; \/*Reveal Color*\/\r\n\t\tpointer-events: none;\r\n\t\tanimation: dm-bg-reveal 1s forwards;\r\n    }\r\n    \r\n    @keyframes dm-bg-reveal {\r\n\t\r\n\t0% {\r\n\t    \r\n\t    clip-path: inset(0 100% 0 0);\r\n\t    \r\n\t}\r\n\t\r\n\t50% {\r\n\t    \r\n\t    clip-path: inset(0 0% 0 0);\r\n\t    \r\n\t}\r\n\t\r\n\t100% {\r\n\t    \r\n\t    \r\n\t    clip-path: inset(0 0% 0 100%);\r\n\t    \r\n\t}\r\n}\r\n\r\n\r\n@keyframes dm-clip-text {\r\n\tfrom {\r\n\t\tclip-path: inset(0 100% 0 0);\r\n\t}\r\n\tto {\r\n\t\tclip-path: inset(0 0 0 0);\r\n\t}\r\n}\r\n\r\n   \r\n<\/style>\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  let animHeading5 = document.querySelectorAll('.dm-single-heading-5');\r\n\r\n  animHeading5.forEach((headingElement5, index) => {\r\n    let dmSplitHeading5 = new SplitType(headingElement5.querySelector('h2'), { types: 'lines', lineClass: 'dm-line-5' });\r\n    \r\n    const dmSingleHeadingLines5 = document.querySelectorAll('.dm-single-heading-5 .dm-line-5');\r\n\r\n    dmSingleHeading5timeline = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: headingElement5,\r\n        start: 'top 80%'\r\n      }\r\n    });\r\n   \r\n   dmSplitHeading5.lines.forEach((line, i) => {\r\n       dmSingleHeading5timeline.to(line, {\r\n           onStart: () => {\r\n               line.classList.add('animate', 'dmRevealAnim1');\r\n            },\r\n            delay: 0.1   \/\/Add delay here\r\n       }); \r\n});\r\n});\r\n});\r\n\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c01211 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"c01211\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-414793d1 elementor-widget__width-initial dm-heading5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"414793d1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am Heading That Reveals by Color from Left<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24a759a4 elementor-widget__width-initial dm-paragraph5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"24a759a4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13a0a970 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"13a0a970\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n  .dm-heading5 .line {\r\n      \r\n   overflow: hidden;\r\n   position: relative;\r\n    clip-path: inset(0 100% 0 0);\r\n    transition: none !important;\r\n    width: fit-content !important;\r\n  }\r\n  \r\n   .dm-heading5 .line.animate {\r\n        \r\n        animation: dm-clip-text 1s forwards;\r\n        \r\n    }\r\n\r\n  .dm-paragraph5 .line {\r\n      \r\n    overflow: hidden;\r\n    position: relative;\r\n    clip-path: inset(0 100% 0 0);\r\n    transition: none !important;\r\n    \r\n  }\r\n  \r\n  .dm-paragraph5 .line.animate {\r\n      \r\n    animation: dm-clip-text 1s forwards;\r\n    \r\n  }\r\n  \r\n   .dmRevealAnim1hp:after {\r\n        \r\n        transition: none !important;\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        top:0;\r\n        height: 100%;\r\n        width: 100%;\r\n        z-index: 5;\r\n        background-color: red; \/*Reveal Color*\/\r\n\t\tpointer-events: none;\r\n\t\tanimation: dm-bg-reveal-hp 1s forwards;\r\n    }\r\n  \r\n  @keyframes dm-bg-reveal-hp {\r\n\t\r\n\t0% {\r\n\t    \r\n\t    clip-path: inset(0 100% 0 0);\r\n\t    \r\n\t}\r\n\t\r\n\t50% {\r\n\t    \r\n\t    clip-path: inset(0 0% 0 0);\r\n\t    \r\n\t}\r\n\t\r\n\t100% {\r\n\t    \r\n\t    \r\n\t    clip-path: inset(0 0% 0 100%);\r\n\t    \r\n\t}\r\n}\r\n\r\n\r\n@keyframes dm-clip-text-hp {\r\n\tfrom {\r\n\t\tclip-path: inset(0 100% 0 0);\r\n\t}\r\n\tto {\r\n\t\tclip-path: inset(0 0 0 0);\r\n\t}\r\n}\r\n  \r\n<\/style>\r\n\r\n<script>\r\n\r\n document.addEventListener('DOMContentLoaded', () => {    \r\n\r\n  let animHeadingPara5 = document.querySelectorAll('.dm-heading5');\r\n\r\n  animHeadingPara5.forEach((headingElement5, index) => {\r\n    let dmSplitHeading5 = new SplitType(headingElement5.querySelector('h2'), { types: 'words, lines' });\r\n    let dmSplitParagraph5 = new SplitType(document.querySelectorAll('.dm-paragraph5')[index].querySelector('p'), { types: 'lines' });\r\n\r\n    let headingParaTimeline5 = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: headingElement5,\r\n        scroller: 'body',\r\n        start: 'top 80%'\r\n      }\r\n    });\r\n\r\n   \/\/ Adding class for heading lines\r\n      dmSplitHeading5.lines.forEach((line, i) => {\r\n        headingParaTimeline5.to(line, {\r\n          onStart: () => {\r\n            line.classList.add('animate', 'dmRevealAnim1hp');\r\n          } ,\r\n          delay: 0.1 \/\/ addDelay here\r\n        });\r\n      });\r\n\r\n      \/\/ Adding class for paragraph lines\r\n      dmSplitParagraph5.lines.forEach((line, i) => {\r\n        headingParaTimeline5.to(line, {\r\n          onStart: () => {\r\n            line.classList.add('animate', 'dmRevealAnim1hp');\r\n          },\r\n          delay: 0.1 \/\/ add Delay here\r\n        });\r\n      });\r\n  });\r\n\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3da91c0d e-flex e-con-boxed e-con e-parent\" data-id=\"3da91c0d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-631362da elementor-widget__width-initial dm-single-heading-6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"631362da\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That Reveals by Color from Bottom<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-581e784e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"581e784e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n   .dm-single-heading-6 .dm-line-6 {\r\n       \r\n  overflow: hidden;\r\n  position: relative;\r\n  clip-path: inset(100% 0% 0 0);\r\n  transition: none !important;\r\n  width: fit-content !important;\r\n  \r\n}\r\n\r\n.dm-line-6.animate {\r\n    \r\n  animation: dm-clip-text-2 1s forwards;\r\n  \r\n}\r\n\r\n.dmRevealAnim2:after {\r\n    \r\n  transition: none !important;\r\n  content: '';\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  height: 100%;\r\n  width: 100%;\r\n  z-index: 5;\r\n  background-color: red; \/*Reveal Color*\/\r\n  pointer-events: none;\r\n  animation: dm-bg-reveal-2 1s forwards;\r\n  \r\n}\r\n\r\n@keyframes dm-bg-reveal-2 {\r\n    \r\n  0% {\r\n    clip-path: inset(100% 0% 0% 0%);\r\n  }\r\n  50% {\r\n    clip-path: inset(0% 0% 0% 0%);\r\n  }\r\n  100% {\r\n    clip-path: inset(0% 0% 100% 0%);\r\n  }\r\n  \r\n}\r\n\r\n@keyframes dm-clip-text-2 {\r\n    \r\n  from {\r\n    clip-path: inset(100% 0% 0% 0%);\r\n  }\r\n  to {\r\n    clip-path: inset(0% 0% 0% 0%);\r\n  }\r\n  \r\n}\r\n\r\n   \r\n<\/style>\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  let animHeading6 = document.querySelectorAll('.dm-single-heading-6');\r\n\r\n  animHeading6.forEach((headingElement6, index) => {\r\n    let dmSplitHeading6 = new SplitType(headingElement6.querySelector('h2'), { types: 'lines', lineClass: 'dm-line-6' });\r\n    \r\n    const dmSingleHeadingLines6 = document.querySelectorAll('.dm-single-heading-6 .dm-line-6');\r\n\r\n    dmSingleHeading6timeline = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: headingElement6,\r\n        start: 'top 80%'\r\n      }\r\n    });\r\n   \r\n    dmSplitHeading6.lines.forEach((line, i) => {\r\n      dmSingleHeading6timeline.to(line, {\r\n        onStart: () => {\r\n          line.classList.add('animate', 'dmRevealAnim2');\r\n        },\r\n        delay: 0.1 \/\/Add Delay Here\r\n      });\r\n    });\r\n  });\r\n});\r\n\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13164f6e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"13164f6e\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ed31b5 elementor-widget__width-initial dm-heading6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"1ed31b5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am Heading That Reveals by Color from Bottom<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3444b346 elementor-widget__width-initial dm-paragraph6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"3444b346\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-548306ad exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"548306ad\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n  .dm-heading6 .line {\r\n  overflow: hidden;\r\n  position: relative;\r\n  clip-path: inset(100% 0% 0 0);\r\n  transition: none !important;\r\n  width: fit-content !important;\r\n}\r\n\r\n.dm-heading6 .line.animate {\r\n  animation: dm-clip-text-hp-2 1s forwards;\r\n}\r\n\r\n.dm-paragraph6 .line {\r\n  overflow: hidden;\r\n  position: relative;\r\n  clip-path: inset(0 100% 0 0);\r\n  transition: none !important;\r\n}\r\n\r\n.dm-paragraph6 .line.animate {\r\n  animation: dm-clip-text-hp-2 1s forwards;\r\n}\r\n\r\n.dmRevealAnim2hp:after {\r\n  transition: none !important;\r\n  content: '';\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  height: 100%;\r\n  width: 100%;\r\n  z-index: 5;\r\n  background-color: red; \/*Reveal Color*\/\r\n  pointer-events: none;\r\n  animation: dm-bg-reveal-hp-2 1s forwards;\r\n}\r\n\r\n@keyframes dm-bg-reveal-hp-2 {\r\n  0% {\r\n    clip-path: inset(100% 0% 0 0);\r\n  }\r\n  50% {\r\n    clip-path: inset(0 0% 0 0);\r\n  }\r\n  100% {\r\n    clip-path: inset(0 0% 100% 0%);\r\n  }\r\n}\r\n\r\n@keyframes dm-clip-text-hp-2 {\r\n  from {\r\n    clip-path: inset(100% 0% 0 0);\r\n  }\r\n  to {\r\n    clip-path: inset(0 0 0 0);\r\n  }\r\n}\r\n\r\n  \r\n<\/style>\r\n\r\n<script>\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n  let animHeadingPara6 = document.querySelectorAll('.dm-heading6');\r\n\r\n  animHeadingPara6.forEach((headingElement6, index) => {\r\n    let dmSplitHeading6 = new SplitType(headingElement6.querySelector('h2'), { types: 'words, lines' });\r\n    let dmSplitParagraph6 = new SplitType(document.querySelectorAll('.dm-paragraph6')[index].querySelector('p'), { types: 'lines' });\r\n\r\n    let headingParaTimeline6 = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: headingElement6,\r\n        scroller: 'body',\r\n        start: 'top 80%'\r\n      }\r\n    });\r\n\r\n    \/\/ Adding class for heading lines\r\n    dmSplitHeading6.lines.forEach((line, i) => {\r\n      headingParaTimeline6.to(line, {\r\n        onStart: () => {\r\n          line.classList.add('animate', 'dmRevealAnim2hp');\r\n        },\r\n        delay: 0.1 \/\/Add Delay Here\r\n      });\r\n    });\r\n\r\n    \/\/ Adding class for paragraph lines\r\n    dmSplitParagraph6.lines.forEach((line, i) => {\r\n      headingParaTimeline6.to(line, {\r\n        onStart: () => {\r\n          line.classList.add('animate', 'dmRevealAnim2hp');\r\n        },\r\n        delay: 0.1 \/\/Add Delay Here\r\n      });\r\n    });\r\n  });\r\n});\r\n\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19719e93 e-flex e-con-boxed e-con e-parent\" data-id=\"19719e93\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-644b6671 elementor-widget__width-initial dm-single-heading-7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"644b6671\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That Reveals by rotating on X from left<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51f2b85 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"51f2b85\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n    .dm-single-heading-7 .word {\r\n        \r\n        transition: none !important;\r\n        transform-origin: bottom left;\r\n        perspective: 2000px;\r\n        \r\n    \r\n    }\r\n   \r\n    \r\n<\/style>\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  let animHeading7 = document.querySelectorAll('.dm-single-heading-7');\r\n\r\n  animHeading7.forEach((headingElement7, index) => {\r\n    let dmSplitHeading7 = new SplitType(headingElement7.querySelector('h2'), { types: 'words' });\r\n\r\n    gsap.from(dmSplitHeading7.words, {\r\n        \r\n      scrollTrigger: {\r\n          \r\n        trigger: headingElement7,\r\n        start: 'top 80%'\r\n        \r\n      },\r\n      \r\n      x:-100,\r\n      opacity:0,\r\n      transform:'skew(-50deg)',\r\n      rotateX: 90,\r\n      duration: 0.5,\r\n      stagger: 0.1\r\n      \r\n    });\r\n  });\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61f529cd exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"61f529cd\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1decf5ca elementor-widget__width-initial dm-heading7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"1decf5ca\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am Heading That Reveals rotating on X from left<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f0ef2ff elementor-widget__width-initial dm-paragraph7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"7f0ef2ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1cd372d5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"1cd372d5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\n    .dm-heading7 .word {\n        \n         transition: none !important;\n        transform-origin: bottom left;\n        perspective: 2000px;\n    }\n\n    .dm-paragraph7 .line {\n        \n         transition: none !important;\n        transform-origin: bottom left;\n        perspective: 2000px;\n    }\n    \n<\/style>\n\n\n<script>\n\ndocument.addEventListener('DOMContentLoaded', () => {    \n    let animHeadingPara7 = document.querySelectorAll('.dm-heading7');\n\n    animHeadingPara7.forEach((headingElement7, index) => {\n        let dmSplitHeading7 = new SplitType(headingElement7.querySelector('h2'), { types: 'words' });\n        let dmSplitParagraph7 = new SplitType(document.querySelectorAll('.dm-paragraph7')[index].querySelector('p'), { types: 'lines' });\n\n        let headingParaTimeline7 = gsap.timeline({\n            scrollTrigger: {\n                trigger: headingElement7,\n                scroller: 'body',\n                start: 'top 80%'\n            }\n        });\n\n        headingParaTimeline7\n            .from(dmSplitHeading7.words, {\n                \n            x:-100,\n            opacity:0,\n            transform:'skew(-50deg)',\n            rotateX: 90,\n            duration: 0.5,\n            stagger: 0.1\n            \n            })\n            .from(dmSplitParagraph7.lines, {\n                \n                 x:-100,\n                 opacity:0,\n                 transform:'skew(-50deg)',\n                 rotateX: 90,\n                 duration: 0.5,\n                 stagger: 0.1\n            }, \"-=0.2\"); \/\/ overlap the animations slightly for a smoother effect\n    });\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-85f02b3 e-flex e-con-boxed e-con e-parent\" data-id=\"85f02b3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1be61c4c elementor-widget__width-initial dm-single-heading-8 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"1be61c4c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That Increase opacity as you scroll<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28e20c2e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"28e20c2e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n    .dm-single-heading-8 .word {\r\n        \r\n        transition: none !important;\r\n        opacity: 0.1;\r\n       \r\n    }\r\n    \r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  let animHeading8 = document.querySelectorAll('.dm-single-heading-8'); \r\n\r\n  animHeading8.forEach((headingElement8, index) => {  \r\n    let dmSplitHeading8 = new SplitType(headingElement8.querySelector('h2'), { types: 'words' }); \r\n\r\n    gsap.to(dmSplitHeading8.words, {\r\n        \r\n      scrollTrigger: {\r\n          \r\n        trigger: headingElement8,\r\n        start: '50% 80%',\r\n        end:'50% 30%',\r\n        markers: false,\r\n        scrub:true\r\n        \r\n      },\r\n      \r\n      opacity: 1,\r\n      duration: 0.5,\r\n      stagger: 0.1\r\n      \r\n    });\r\n  });\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fa0da95 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"6fa0da95\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ead8eab elementor-widget__width-initial dm-heading8 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"ead8eab\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Heading That Increase opacity as you scroll<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17892236 elementor-widget__width-initial dm-paragraph8 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"17892236\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f614a7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"9f614a7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \r\n    .dm-heading8 .word, .dm-paragraph8 .word {\r\n        \r\n        opacity: 0.1;\r\n        \r\n        \r\n    }\r\n    \r\n    \r\n    \r\n    \r\n<\/style>\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {    \r\n\r\n  let animHeadingPara8 = document.querySelectorAll('.dm-heading8');\r\n\r\n  animHeadingPara8.forEach((headingElement8, index) => {\r\n    let dmSplitHeading8 = new SplitType(headingElement8.querySelector('h2'), { types: 'words' });\r\n    let dmSplitParagraph8 = new SplitType(document.querySelectorAll('.dm-paragraph8')[index].querySelector('p'), { types: 'words' });\r\n\r\n    let headingParaTimeline8 = gsap.timeline({\r\n      scrollTrigger: {\r\n          \r\n        trigger: headingElement8,\r\n        start: '50% 80%',\r\n        end:'50% 30%',\r\n        markers: false,\r\n        scrub:true\r\n        \r\n      }\r\n    });\r\n\r\n    headingParaTimeline8\r\n      .to(dmSplitHeading8.words, {\r\n        \r\n        opacity: 1,\r\n        duration: 0.5,\r\n        stagger: 0.1\r\n      })\r\n      .to(dmSplitParagraph8.words, {\r\n        \r\n        opacity: 1,\r\n        duration: 0.5,\r\n        stagger: 0.1\r\n      }, \"-=0.2\");\r\n  });\r\n\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-543d7249 e-flex e-con-boxed e-con e-parent\" data-id=\"543d7249\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76d9f90c elementor-widget__width-initial dm-single-heading-9 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"76d9f90c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That changes color as you scroll<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ce69149 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"3ce69149\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n    .dm-single-heading-9 .word {\r\n        \r\n        color:blue;\r\n        transition: none !important;\r\n        opacity: 0.1;\r\n       \r\n    }\r\n    \r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  let animHeading9 = document.querySelectorAll('.dm-single-heading-9'); \r\n\r\n  animHeading9.forEach((headingElement9, index) => {  \r\n    let dmSplitHeading9 = new SplitType(headingElement9.querySelector('h2'), { types: 'words' }); \r\n\r\n    gsap.to(dmSplitHeading9.words, {\r\n        \r\n      scrollTrigger: {\r\n          \r\n        trigger: headingElement9,\r\n        start: '50% 80%',\r\n        end: '50% 30%',\r\n        markers: false,\r\n        scrub: true\r\n        \r\n      },\r\n      \r\n      color:'red',\r\n      opacity: 1,\r\n      duration: 0.5,\r\n      stagger: 0.1\r\n      \r\n    });\r\n  });\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-762ca389 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"762ca389\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d44519e elementor-widget__width-initial dm-heading9 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"7d44519e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Heading That changes color as you scroll<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e591746 elementor-widget__width-initial dm-paragraph9 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"5e591746\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59b3a90 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"59b3a90\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n    .dm-heading9 .word, .dm-paragraph9 .word {\r\n        \r\n        color:blue;\r\n        opacity: 0.1;\r\n    }\r\n    \r\n<\/style>\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {    \r\n\r\n  let animHeadingPara9 = document.querySelectorAll('.dm-heading9');\r\n\r\n  animHeadingPara9.forEach((headingElement9, index) => {\r\n    let dmSplitHeading9 = new SplitType(headingElement9.querySelector('h2'), { types: 'words' });\r\n    let dmSplitParagraph9 = new SplitType(document.querySelectorAll('.dm-paragraph9')[index].querySelector('p'), { types: 'words' });\r\n\r\n    let headingParaTimeline9 = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: headingElement9,\r\n        start: '50% 80%',\r\n        end: '50% 30%',\r\n        markers: false,\r\n        scrub: true\r\n      }\r\n    });\r\n\r\n    headingParaTimeline9\r\n      .to(dmSplitHeading9.words, {\r\n        \r\n        color:'red',\r\n        opacity: 1,\r\n        duration: 0.5,\r\n        stagger: 0.1\r\n      })\r\n      .to(dmSplitParagraph9.words, {\r\n          \r\n        color:'red',\r\n        opacity: 1,\r\n        duration: 0.5,\r\n        stagger: 0.1\r\n      }, \"-=0.2\");\r\n  });\r\n\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-78743158 e-flex e-con-boxed e-con e-parent\" data-id=\"78743158\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-383d9e2e elementor-widget__width-initial dm-single-heading-10 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"383d9e2e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Single Heading That reveals by scramble words<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a8a0d3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"8a8a0d3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/baffle.js\/0.2.0\/baffle.min.js\" integrity=\"sha512-haSDSYvV1BDJYCDs52GczvTcLl3hpw8SK7isG5arkvNdHKBOcOqvl\/vjO0qKNtQdZLznXA408zT0tzIamWJgrw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"><\/script>\r\n\r\n<style>\r\n    \r\n    .dm-single-heading-10 .word {\r\n        \r\n        opacity: 0;\r\n        \r\n    }\r\n    \r\n    \r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  let animHeading10 = document.querySelectorAll('.dm-single-heading-10');\r\n\r\n  animHeading10.forEach((headingElement10) => {\r\n    let headingText = headingElement10.querySelector('h2');\r\n\r\n    \/\/ Initialize SplitType for splitting the text into words\r\n    let dmSplitHeading10 = new SplitType(headingText, { types: 'words' });\r\n\r\n    const revealTL = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: headingElement10,\r\n        start: 'top 80%',\r\n        once: true, \/\/ Ensures the animation only happens once\r\n      },\r\n    });\r\n\r\n    \/\/ Initialize a Baffle.js instance for each word\r\n    dmSplitHeading10.words.forEach((word, index) => {\r\n      let baffleInstance = baffle(word, {\r\n        characters: '!\/|~#.^+*$#%nwf',\r\n        speed: 50,\r\n      });\r\n\r\n      \/\/ Start the obfuscation immediately\r\n      baffleInstance.start();\r\n\r\n      \/\/ Use GSAP to reveal each word\r\n      revealTL.to(word, {\r\n          \r\n        opacity: 1, \/\/ Optional, animates opacity or other properties\r\n        duration:0.1, \/\/Duration of text-reveal\r\n        onStart: () => {\r\n          baffleInstance.reveal(100, { easing: 'linear', delay: 0 });\r\n        }\r\n        \r\n      });\r\n    });\r\n  });\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13fc72e2 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"13fc72e2\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11d3db7d elementor-widget__width-initial dm-heading10 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"11d3db7d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I am a Heading That Reveals by Scramble words<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5fbf5a14 elementor-widget__width-initial dm-paragraph10 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"5fbf5a14\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I am a paragraph that only starts revealing when full heading above has been revealed. Heading and I can be revealed line by line, word by word or char by char.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ee1979e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"7ee1979e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/baffle.js\/0.2.0\/baffle.min.js\" integrity=\"sha512-haSDSYvV1BDJYCDs52GczvTcLl3hpw8SK7isG5arkvNdHKBOcOqvl\/vjO0qKNtQdZLznXA408zT0tzIamWJgrw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"><\/script>\r\n\r\n<style>\r\n    \r\n    .dm-heading10 .word, .dm-paragraph10 .word {\r\n        \r\n        opacity: 0;\r\n        \r\n    }\r\n    \r\n    \r\n    \r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {    \r\n\r\n  let animHeadingPara10 = document.querySelectorAll('.dm-heading10');\r\n\r\n  animHeadingPara10.forEach((headingElement10, index) => {\r\n    \/\/ Split heading and paragraph into words using SplitType\r\n    let dmSplitHeading10 = new SplitType(headingElement10.querySelector('h2'), { types: 'words' });\r\n    let dmSplitParagraph10 = new SplitType(document.querySelectorAll('.dm-paragraph10')[index].querySelector('p'), { types: 'words' });\r\n\r\n    \/\/ Create GSAP timeline\r\n    let headingParaTimeline10 = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: headingElement10,\r\n        start: 'top 80%',\r\n       \r\n      }\r\n    });\r\n\r\n    \/\/ Process each word in the heading\r\n    dmSplitHeading10.words.forEach((word) => {\r\n      let baffleInstance = baffle(word, {\r\n        characters: '!\/|~#.^+*$#%nwf', \/\/ Custom characters for obfuscation\r\n        speed: 50,\r\n      });\r\n\r\n      \/\/ Start Baffle.js obfuscation\r\n      baffleInstance.start();\r\n\r\n      \/\/ Use GSAP to reveal the word\r\n      headingParaTimeline10.to(word, {\r\n        opacity: 1,\r\n        duration: 0.1,\r\n        onStart: () => {\r\n          baffleInstance.reveal(100, { easing: 'linear', delay: 0 });\r\n        },\r\n        stagger: 0.1,\r\n      });\r\n    });\r\n\r\n    \/\/ Process each word in the paragraph\r\n    dmSplitParagraph10.words.forEach((word) => {\r\n      let baffleInstance = baffle(word, {\r\n        characters: '!\/|~#.^+*$#%nwf', \/\/ Custom characters for obfuscation\r\n        speed: 50,\r\n      });\r\n\r\n      \/\/ Start Baffle.js obfuscation\r\n      baffleInstance.start();\r\n\r\n      \/\/ Use GSAP to reveal the word\r\n      headingParaTimeline10.to(word, {\r\n        opacity: 1,\r\n        duration: 0.1,\r\n        onStart: () => {\r\n          baffleInstance.reveal(100, { easing: 'linear', delay: 0 });\r\n        },\r\n        stagger: 0.1,\r\n      }); \/\/ Stagger this to overlap with the previous animation\r\n    });\r\n  });\r\n\r\n});\r\n\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-31e030ef elementor-section-height-min-height mdw-image-numbers elementor-section-full_width elementor-section-height-default elementor-section-items-middle exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no\" data-id=\"31e030ef\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-20feb111 exad-glass-effect-no exad-sticky-section-no\" data-id=\"20feb111\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-d557f60 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no\" data-id=\"d557f60\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-54bd63c9 exad-glass-effect-no exad-sticky-section-no\" data-id=\"54bd63c9\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-3690d9ac elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no elementor-invisible\" data-id=\"3690d9ac\" data-element_type=\"section\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-deb9bc8 exad-glass-effect-no exad-sticky-section-no\" data-id=\"deb9bc8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3acf9679 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"3acf9679\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">WEB DESIGN<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f34d302 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"2f34d302\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Pixel Perfect<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a1f8261 exad-sticky-section-no exad-glass-effect-no elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"3a1f8261\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:50}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">1<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-202f8ca3 elementor-widget__width-initial elementor-absolute elementor-widget-divider--view-line exad-sticky-section-no exad-glass-effect-no elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"202f8ca3\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-587affbd exad-glass-effect-no exad-sticky-section-no\" data-id=\"587affbd\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-551f9917 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no\" data-id=\"551f9917\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-446ada64 exad-glass-effect-no exad-sticky-section-no\" data-id=\"446ada64\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-3f8dd9cf elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no elementor-invisible\" data-id=\"3f8dd9cf\" data-element_type=\"section\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:50}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4b0ddb67 exad-glass-effect-no exad-sticky-section-no\" data-id=\"4b0ddb67\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7790b094 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"7790b094\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">APP DESIGN<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d83df1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"1d83df1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Android &amp; iOS\u200b<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-18938d77 exad-sticky-section-no exad-glass-effect-no elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"18938d77\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">2<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42ec696a elementor-widget__width-initial elementor-absolute elementor-widget-divider--view-line exad-sticky-section-no exad-glass-effect-no elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"42ec696a\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-60cecd81 exad-glass-effect-no exad-sticky-section-no\" data-id=\"60cecd81\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-3db88161 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no\" data-id=\"3db88161\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-32d0c63b exad-glass-effect-no exad-sticky-section-no\" data-id=\"32d0c63b\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-2c17cb84 elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no elementor-invisible\" data-id=\"2c17cb84\" data-element_type=\"section\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:100}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-1c22a322 exad-glass-effect-no exad-sticky-section-no\" data-id=\"1c22a322\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-170c0801 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"170c0801\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">GRAPHIC DESIGN\u200b\u200b<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6160f6d2 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"6160f6d2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Trendy Design\u200b<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b71ecd3 exad-sticky-section-no exad-glass-effect-no elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"7b71ecd3\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:150}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">3<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25033cf1 elementor-widget__width-initial elementor-absolute elementor-widget-divider--view-line exad-sticky-section-no exad-glass-effect-no elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"25033cf1\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-22ba01ca exad-glass-effect-no exad-sticky-section-no\" data-id=\"22ba01ca\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-7289524e elementor-section-height-min-height elementor-section-boxed elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no\" data-id=\"7289524e\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4c1501fa exad-glass-effect-no exad-sticky-section-no\" data-id=\"4c1501fa\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-ae0db7f elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no elementor-invisible\" data-id=\"ae0db7f\" data-element_type=\"section\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:150}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-6663e9d5 exad-glass-effect-no exad-sticky-section-no\" data-id=\"6663e9d5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7377e1cc exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"7377e1cc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">DIGITAL ART<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c7b2436 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"7c7b2436\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">100% Custom\u200b\u200b<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-d15d277 exad-sticky-section-no exad-glass-effect-no elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"d15d277\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:200}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">4<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3665e979 elementor-widget__width-initial elementor-absolute elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget-divider--view-line exad-sticky-section-no exad-glass-effect-no elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"3665e979\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-6471248b elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no\" data-id=\"6471248b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-29c76dc exad-glass-effect-no exad-sticky-section-no\" data-id=\"29c76dc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-621ceb3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"621ceb3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.mdw-image-numbers .elementor-inner-section .elementor-inner-section{\n    width: 250px;\n}\n.mdw-image-numbers{\n    --hover-text-color: #ffffff;\n    --seperator-color: #1e1b1766;\n}\n.mdw-image-numbers .elementor-inner-section .elementor-heading-title{\n   transition: 0.3s ease;\n}\n.mdw-image-numbers .elementor-inner-section:hover .elementor-heading-title{\n    color: var(--hover-text-color);\n}\n.mdw-image-numbers .elementor-widget-divider .elementor-widget-container{\n    background: rgb(249,249,249);\n    background: linear-gradient(180deg, rgba(249,249,249,0) 0%, var(--seperator-color) 50%, rgba(249,249,249,0) 100%);\n}\n\n@media (max-width: 1024px){\n.mdw-image-numbers > .elementor-column:nth-child(2n) .elementor-widget-divider,\n.mdw-image-numbers > .elementor-container > .elementor-column:nth-child(2n) .elementor-widget-divider{\n    visibility: hidden;\n}\n}\n\n@media (max-width: 767px){\n.mdw-image-numbers .elementor-widget-divider{\n    width: 100% !important;\n    height: 1px;\n    max-width: 100% !important;\n    overflow: hidden;\n}\n.mdw-image-numbers > .elementor-column:nth-child(2n) .elementor-widget-divider,\n.mdw-image-numbers > .elementor-container > .elementor-column:nth-child(2n) .elementor-widget-divider{\n    visibility: visible;\n}\n.mdw-image-numbers .elementor-widget-divider .elementor-widget-container{\n    background: rgb(249,249,249);\n    background: linear-gradient(90deg, rgba(249,249,249,0) 0%, var(--seperator-color) 50%, rgba(249,249,249,0) 100%);\n}\n.mdw-image-numbers .elementor-inner-section .elementor-inner-section{\n    order: 2;\n}\n.mdw-image-numbers .elementor-widget-divider .elementor-divider-separator{\n    border-top-width: 1px !important;\n}\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc4b Welcome Brandmode We are a leading digital agency with global reach &amp; services Social Media Marketing Website Development App Development Brand Identity SEO Optimization SEO Optimization Animated Text Reveals Elementor &amp; GSAP Template Provided By DMmotionarts.com Youtube @DMmotionarts I am a Single Heading That Reveals From The Bottom I am Heading That Reveals From [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12917","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/merakytech.com\/fr\/wp-json\/wp\/v2\/pages\/12917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/merakytech.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/merakytech.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/merakytech.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/merakytech.com\/fr\/wp-json\/wp\/v2\/comments?post=12917"}],"version-history":[{"count":23,"href":"https:\/\/merakytech.com\/fr\/wp-json\/wp\/v2\/pages\/12917\/revisions"}],"predecessor-version":[{"id":13405,"href":"https:\/\/merakytech.com\/fr\/wp-json\/wp\/v2\/pages\/12917\/revisions\/13405"}],"wp:attachment":[{"href":"https:\/\/merakytech.com\/fr\/wp-json\/wp\/v2\/media?parent=12917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}