{"id":1054,"date":"2026-05-23T14:57:29","date_gmt":"2026-05-23T14:57:29","guid":{"rendered":"https:\/\/tasinsheikh.com\/ebook\/?page_id=1054"},"modified":"2026-05-25T12:50:13","modified_gmt":"2026-05-25T12:50:13","slug":"agency-landing-page","status":"publish","type":"page","link":"https:\/\/tasinsheikh.com\/portfolio\/agency-landing-page\/","title":{"rendered":"Agency Landing Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1054\" class=\"elementor elementor-1054\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38c1596 e-flex e-con-boxed e-con e-parent\" data-id=\"38c1596\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f677d3d elementor-widget elementor-widget-html\" data-id=\"f677d3d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.floating-car{\r\n    animation: floatingZoom 5s ease-in-out infinite;\r\n    transform-origin: center center;\r\n    display: inline-block;\r\n}\r\n\r\n@keyframes floatingZoom{\r\n    0%{\r\n        transform: translateY(0px) scale(1);\r\n    }\r\n\r\n    50%{\r\n        transform: translateY(-12px) scale(1.05);\r\n    }\r\n\r\n    100%{\r\n        transform: translateY(0px) scale(1);\r\n    }\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d88aa28 e-con-full e-flex e-con e-child\" data-id=\"d88aa28\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ead140f elementor-widget elementor-widget-image\" data-id=\"ead140f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/tasinsheikh.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Monochrome-Modern-Technology-Black-Logo-2-1024x1024.png\" class=\"attachment-large size-large wp-image-1193\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Monochrome-Modern-Technology-Black-Logo-2-1024x1024.png 1024w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Monochrome-Modern-Technology-Black-Logo-2-300x300.png 300w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Monochrome-Modern-Technology-Black-Logo-2-150x150.png 150w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Monochrome-Modern-Technology-Black-Logo-2-768x768.png 768w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Monochrome-Modern-Technology-Black-Logo-2-1536x1536.png 1536w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Monochrome-Modern-Technology-Black-Logo-2-650x650.png 650w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Monochrome-Modern-Technology-Black-Logo-2-1300x1300.png 1300w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Monochrome-Modern-Technology-Black-Logo-2.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-75e5f9b e-con-full e-flex e-con e-child\" data-id=\"75e5f9b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b1d2c4 elementor-icon-list--layout-inline elementor-hidden-mobile elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"4b1d2c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-inline-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/tasinsheikh.com\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Hero<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/tasinsheikh.com\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Services<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/tasinsheikh.com\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Our Work<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/tasinsheikh.com\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">About Us<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b2e208 e-transform elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"5b2e208\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_translateY_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-8,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_hover_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_hover_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/tasinsheikh.com\/\" target=\"_blank\">\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-far-arrow-alt-circle-right\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256zm72 20v-40c0-6.6 5.4-12 12-12h116v-67c0-10.7 12.9-16 20.5-8.5l99 99c4.7 4.7 4.7 12.3 0 17l-99 99c-7.6 7.6-20.5 2.2-20.5-8.5v-67H140c-6.6 0-12-5.4-12-12z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Start a project<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\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-ec15d75 e-con-full e-flex e-con e-parent\" data-id=\"ec15d75\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-e1d6138 e-con-full e-flex e-con e-child\" data-id=\"e1d6138\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e77fdb elementor-widget elementor-widget-html\" data-id=\"6e77fdb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- marquee -->\r\n    <style>\r\n\r\n\r\n        .card-one .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-two .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-three .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-four .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-five .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-six .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n\r\n\r\n        .marquee-container {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 100vh;\r\n            min-height: 800px;\r\n            max-height: 1200px;\r\n            overflow-x: hidden;\r\n\r\n        }\r\n\r\n        @media screen and (max-width:767px) {\r\n            .marquee-container {\r\n                 height: 70vh;\r\n                 min-height: 500;\r\n                 max-height: 700px;\r\n\r\n            }\r\n        }\r\n\r\n        .animation-clip {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 50%;\r\n            \/* margin-top: 6vw; *\/\r\n            transform: translateX(-50%);\r\n            width: min(100vw, 2500px);\r\n            height: 100%;\r\n            overflow: hidden;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .image-item {\r\n            position: absolute;\r\n            width: 16vw;\r\n            aspect-ratio: 1\/2;\r\n            \/*margin-top: -.5%;*\/\r\n            \/* height: 300px; *\/\r\n            border-radius: 32px;\r\n\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\r\n            opacity: 0;\r\n            transition: transform 0.3s ease;\r\n            object-fit: cover;\r\n        }\r\n.image-item img {\r\n    display:block;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    border-radius: 32px;\r\n\r\n}\r\n        @media only screen and (max-width: 767px) {\r\n            .image-item img {\r\n    display:block;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    border-radius: 24px;\r\n\r\n}\r\n            .image-item {\r\n\r\n                width: 32.5vw;\r\n                aspect-ratio: 1\/2;\r\n                border-radius: 24px ;\r\n\r\n\r\n            }\r\n\r\n            .iphone-frame {\r\n                width: 33.5vw !important;\r\n                aspect-ratio: 1\/2;\r\n                \/*border-radius: 16px;*\/\r\n            }\r\n\r\n        }\r\n\r\n        \/* .image-item:hover {\r\n            transform: scale(1.2);\r\n            } *\/\r\n\r\n        .iphone-frame {\r\n            position: absolute;\r\n            \/* height: 320px; *\/\r\n            border-radius: 2.5vw;\r\n            aspect-ratio: 1\/2;\r\n            width: 16.5vw;\r\n            z-index: 10;\r\n            display: flex;\r\n\r\n            align-items: center;\r\n            justify-content: center;\r\n            transform: translate(-50%, -50%);\r\n        }\r\n\r\n        .iphone-screen img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n\r\n\r\n        .left-cloud {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 15%;\r\n    height: 100%;\r\n    background: linear-gradient(to right, #E0DFDF 0%, #E0DFDF 5%, transparent 100%);\r\n    filter: blur(5px);\r\n    z-index: 100;\r\n}\r\n\r\n.right-cloud {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 15%;\r\n    height: 100%;\r\n    background: linear-gradient(to left, #E0DFDF 0%, #E0DFDF 5%, transparent 100%);\r\n    filter: blur(5px);\r\n    z-index: 100;\r\n}\r\n\r\n    <\/style>\r\n    <!-- hero-section -->\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n\r\n            position: relative;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .hero-section {\r\n            min-height: 100vh;\r\n            background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\r\n            background-size: cover;\r\n            background-position: center;\r\n            background-repeat: no-repeat;\r\n            \/* background-attachment: fixed; *\/\r\n            display: flex;\r\n            align-items: flex-end;\r\n            justify-content: center;\r\n            position: relative;\r\n\r\n            \/* overflow-x: hidden; *\/\r\n        }\r\n\r\n        .hero-content {\r\n            text-align: center;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            color: white;\r\n            padding: 1rem;\r\n            z-index: 2;\r\n        }\r\n\r\n        .hero-heading {\r\n            font-size: clamp(2.5rem, 5vw, 4rem);\r\n            font-weight: 600;\r\n            text-transform: uppercase;\r\n            margin-bottom: 1.5rem;\r\n            letter-spacing: -0.02em;\r\n\r\n        }\r\n\r\n        .hero-paragraph {\r\n            font-size: clamp(1.1rem, 2vw, 1.25rem);\r\n            margin-bottom: 2.5rem;\r\n            max-width: 550px;\r\n            color: rgba(255, 255, 255, 0.95);\r\n            font-weight: 500;\r\n            line-height: 1.7;\r\n\r\n        }\r\n    <\/style>\r\n\r\n    <style>\r\n        :root {\r\n            --icon-width: 56px;\r\n            --icon-height: 56px;\r\n            --text-bar-width: 128px;\r\n            --text-bar-height: 56px;\r\n            --border-radius: 12px;\r\n            --gap: 0px;\r\n        }\r\n          @media screen and (max-width:767px) {\r\n              :root {\r\n                   --icon-width: 40px;\r\n            --icon-height: 40px;\r\n            --text-bar-width: 128px;\r\n            --text-bar-height: 40px;\r\n            --border-radius: 8px;\r\n              }\r\n          }\r\n\r\n\r\n        .hero-content-card {\r\n            position: absolute;\r\n            inset: 0;\r\n            height: 100vh;\r\n            width: 100vw;\r\n            pointer-events: none;\r\n            z-index: 100;\r\n\r\n        }\r\n\r\n        .card {\r\n\r\n            position: relative;\r\n            display: inline-block;\r\n            position: absolute;\r\n            font-size: 17px;\r\n             font-family: \"DM Sans\", Sans-serif;\r\n            \/* will-change: transform, opacity; *\/\r\n\r\n        }\r\n\r\n        .card-one {\r\n            top: 30%;\r\n            left: 15%;\r\n            font-family: \"DM Sans\", Sans-serif;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .card-two {\r\n            top: 50%;\r\n            left: 5%;\r\n        }\r\n\r\n        .card-three {\r\n            top: 73%;\r\n            left: 15%;\r\n        }\r\n\r\n        .card-four {\r\n            top: 25%;\r\n            right: 17%;\r\n        }\r\n\r\n        .card-five {\r\n            top: 45%;\r\n            right: 5%;\r\n        }\r\n\r\n        .card-six {\r\n            top: 65%;\r\n            right: 15%;\r\n        }\r\n         @media screen and (max-width:767px) {\r\n             .card-one {\r\n    top: 27%;\r\n    left: 3%; }\r\n             .card-five {\r\n                 top: 28% !important;\r\n                 right: 5%;\r\n             }\r\n             .card-two {\r\n                 top:13%;\r\n                 left: 5%;\r\n             }\r\n             .card-four {\r\n                 top:20%;\r\n                 left: 35%;\r\n             }\r\n            .card-three, .card-six  {\r\n                 opacity: 0;\r\n             }\r\n        }\r\n\r\n        .container {\r\n            position: relative;\r\n            border-radius: var(--border-radius);\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n.btn-sec-inner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n}\r\n\r\n.btn-sec-inner p {\r\n  margin: 0;\r\n}\r\n\r\n\r\n        .icon {\r\n            width: var(--icon-width);\r\n            height: var(--icon-height);\r\n            background-color: #ffffff;\r\n            border-radius: var(--border-radius);\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\r\n            position: relative;\r\n            z-index: 2;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .icon img {\r\n            width: 60%;\r\n            aspect-ratio: 1\/1;\r\n        }\r\n\r\n        .icon-bg {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: 60%;\r\n            aspect-ratio: 1\/1;\r\n            border-radius: 50%;\r\n            background-color: rgb(255, 63, 63);\r\n            z-index: -1;\r\n        }\r\n\r\n        .text-bar {\r\n            background: rgba(255,255,255,0.12);\r\n  backdrop-filter: blur(20px) saturate(130%);\r\n\r\n  -webkit-backdrop-filter: blur(20px) saturate(130%);\r\n            height: var(--icon-height);\r\n\r\n            border-radius: 12px 0 0 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 15px;\r\n            font-weight: 600;\r\n           font-family: \"DM Sans\", sans-serif;\r\n            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n            clip-path: inset(0 0 0 100%);\r\n            z-index: 1;\r\n            position: relative;\r\n            padding: 0 20px;\r\n            white-space: nowrap;\r\n            min-width: 100px;\r\n\r\n        }\r\n        .icon, .text-bar {\r\n            transform: scale(0);\r\n        }\r\n    <\/style>\r\n\r\n    <style>\r\n        .spacer {\r\n    width: 100%;\r\n    height: 35vh;\r\n}\r\n@media screen and (max-width: 767px) {\r\n    .spacer {\r\n        height: 20vh;\r\n    }\r\n}\r\n.promo-section {\r\n    margin-bottom: 3rem;\r\n}\r\n.promo-heading-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n}\r\n.promo-badge {\r\n    font-size: clamp(1.1rem, 2vw, 1.25rem);\r\n    margin-bottom: 2.5rem;\r\n    font-weight: 500;\r\n    line-height: 1.7;\r\n}\r\n\r\n.promo-heading {\r\n    \/*font-size: clamp(2.5rem, 5vw, 4rem);*\/\r\n    font-weight: 500;\r\n    text-align: center;\r\n\r\n    \/*margin-bottom: 1.5rem;*\/\r\n    letter-spacing: -0.02em;\r\n}\r\n\r\n.promo-paragraph {\r\n    font-size: clamp(1.1rem, 2vw, 1.25rem);\r\n    margin-bottom: 2.5rem;\r\n    max-width: 550px;\r\n    text-align: center;\r\n    font-weight: 500;\r\n    line-height: 1.2em;\r\n}\r\n.hero-buttons {\r\n    display: flex;\r\n    gap: 1rem;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 1rem;\r\n}\r\n\r\n.btn-primary {\r\n    display: flex;\r\n    gap: 1rem;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background-color: white;\r\n    padding: 12px 24px;\r\n    border-radius: 16px;\r\n    color: black;\r\n    transform: translateY(25px);\r\n    opacity: 0;\r\n\r\n}\r\n\r\n.btn-icon {\r\n    width: 2rem;\r\n    aspect-ratio: 1\/1;\r\n    border-radius: 6px;\r\n    background-color: rgb(0, 0, 0);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n}\r\n\r\n.btn-icon img {\r\n    width: 60%;\r\n\r\n\r\n}\r\n\r\n.btn-secondary {\r\n    display: flex;\r\n    gap: 1rem;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 12px 12px;\r\n    color: rgb(255, 255, 255);\r\n    position: relative;\r\n    \/* opacity: 0; *\/\r\n\r\n\r\n}\r\n.btn-secondary-bg {\r\n    position: absolute;\r\n    z-index: -1;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\nbackground-image: radial-gradient(circle at center, #FF587F 0%, #F04A6F 20%, #B4183D 100%);\r\n\r\n\r\n    border-radius: 10px;\r\n\r\n\r\n}\r\n.btn-sec-inner {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 1rem;\r\n}\r\n.btn-sec-inner p {\r\n    transform: translateX(150%);\r\n}\r\n.btn-sec-icon {\r\n    width: 2rem;\r\n    aspect-ratio: 1\/1;\r\n    border-radius: 6px;\r\n    background-color: rgb(255, 255, 255);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n}\r\n\r\n.btn-sec-icon img {\r\n    width: 60%;\r\n\r\n\r\n}\r\n\r\n\r\n\r\n\r\n  :root{\r\n    --icon-width: 48px;\r\n    --icon-height: 48px;\r\n    --border-radius: 10px;\r\n  }\r\n\r\n  .icon{\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .text-bar{\r\n    height: var(--icon-height);\r\n    border-radius: 10px 0 0 10px;\r\n    padding: 12px 20px 12px 20px;\r\n  }\r\n\r\n \/* \u00a9 Nicolai Palmkvist \u2013 https:\/\/nicolaipalmkvist.com *\/\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a7e676 elementor-widget elementor-widget-html\" data-id=\"7a7e676\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"hero-content-card\">\r\n                <div class=\"card card-one\">\r\n                    <div class=\"container\">\r\n                        <div class=\"text-bar\">Personal Brand<\/div>\r\n                        <div class=\"icon\">\r\n                            <div class=\"icon-bg\"><\/div>\r\n                            <img decoding=\"async\" src=\"https:\/\/mintcream-gnu-256830.hostingersite.com\/wp-content\/uploads\/2026\/02\/1.svg\" alt=\"\">\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"card card-two\">\r\n                    <div class=\"container\">\r\n                        <div class=\"text-bar\">Web Design <\/div>\r\n                        <div class=\"icon\">\r\n                            <div class=\"icon-bg\"><\/div>\r\n                            <img decoding=\"async\" src=\"https:\/\/mintcream-gnu-256830.hostingersite.com\/wp-content\/uploads\/2026\/02\/2.svg\" alt=\"\">\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"card card-three\">\r\n                    <div class=\"container\">\r\n                        <div class=\"text-bar\">Growth<\/div>\r\n                        <div class=\"icon\">\r\n                            <div class=\"icon-bg\"><\/div>\r\n                            <img decoding=\"async\" src=\"https:\/\/mintcream-gnu-256830.hostingersite.com\/wp-content\/uploads\/2026\/02\/3.svg\" alt=\"\">\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"card card-four\">\r\n                    <div class=\"container\">\r\n                        <div class=\"text-bar\">Digital frist<\/div>\r\n                        <div class=\"icon\">\r\n                            <div class=\"icon-bg\"><\/div>\r\n                            <img decoding=\"async\" src=\"https:\/\/mintcream-gnu-256830.hostingersite.com\/wp-content\/uploads\/2026\/02\/5.svg\" alt=\"\">\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"card card-five\">\r\n                    <div class=\"container\">\r\n                        <div class=\"text-bar\">Responsive <\/div>\r\n                        <div class=\"icon\">\r\n                            <div class=\"icon-bg\"><\/div>\r\n                            <img decoding=\"async\" src=\"https:\/\/mintcream-gnu-256830.hostingersite.com\/wp-content\/uploads\/2026\/02\/6.svg\" alt=\"\">\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"card card-six\">\r\n                    <div class=\"container\">\r\n                        <div class=\"text-bar\">Premium Support<\/div>\r\n                        <div class=\"icon\">\r\n                            <div class=\"icon-bg\"><\/div>\r\n                            <img decoding=\"async\" src=\"https:\/\/mintcream-gnu-256830.hostingersite.com\/wp-content\/uploads\/2026\/02\/4.svg\" alt=\"\">\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n\r\n             <!-- marquee -->\r\n    <style>\r\n\r\n\r\n        .card-one .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-two .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-three .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-four .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-five .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n.card-six .icon-bg {\r\n    background-color: #ffffff;\r\n}\r\n\r\n\r\n        .marquee-container {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 100vh;\r\n            min-height: 800px;\r\n            max-height: 1200px;\r\n            overflow-x: hidden;\r\n\r\n        }\r\n\r\n        @media screen and (max-width:767px) {\r\n            .marquee-container {\r\n                 height: 70vh;\r\n                 min-height: 500;\r\n                 max-height: 700px;\r\n\r\n            }\r\n        }\r\n\r\n        .animation-clip {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 50%;\r\n            \/* margin-top: 6vw; *\/\r\n            transform: translateX(-50%);\r\n            width: min(100vw, 2500px);\r\n            height: 100%;\r\n            overflow: hidden;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .image-item {\r\n            position: absolute;\r\n            width: 16vw;\r\n            aspect-ratio: 1\/2;\r\n            \/*margin-top: -.5%;*\/\r\n            \/* height: 300px; *\/\r\n            border-radius: 32px;\r\n\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\r\n            opacity: 0;\r\n            transition: transform 0.3s ease;\r\n            object-fit: cover;\r\n        }\r\n.image-item img {\r\n    display:block;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    border-radius: 32px;\r\n\r\n}\r\n        @media only screen and (max-width: 767px) {\r\n            .image-item img {\r\n    display:block;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    border-radius: 24px;\r\n\r\n}\r\n            .image-item {\r\n\r\n                width: 32.5vw;\r\n                aspect-ratio: 1\/2;\r\n                border-radius: 24px ;\r\n\r\n\r\n            }\r\n\r\n            .iphone-frame {\r\n                width: 33.5vw !important;\r\n                aspect-ratio: 1\/2;\r\n                \/*border-radius: 16px;*\/\r\n            }\r\n\r\n        }\r\n\r\n        \/* .image-item:hover {\r\n            transform: scale(1.2);\r\n            } *\/\r\n\r\n        .iphone-frame {\r\n            position: absolute;\r\n            \/* height: 320px; *\/\r\n            border-radius: 2.5vw;\r\n            aspect-ratio: 1\/2;\r\n            width: 16.5vw;\r\n            z-index: 10;\r\n            display: flex;\r\n\r\n            align-items: center;\r\n            justify-content: center;\r\n            transform: translate(-50%, -50%);\r\n        }\r\n\r\n        .iphone-screen img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n\r\n\r\n        .left-cloud {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 15%;\r\n    height: 100%;\r\n    background: linear-gradient(to right, #E0DFDF 0%, #E0DFDF 5%, transparent 100%);\r\n    filter: blur(5px);\r\n    z-index: 100;\r\n}\r\n\r\n.right-cloud {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 15%;\r\n    height: 100%;\r\n    background: linear-gradient(to left, #E0DFDF 0%, #E0DFDF 5%, transparent 100%);\r\n    filter: blur(5px);\r\n    z-index: 100;\r\n}\r\n\r\n    <\/style>\r\n    <!-- hero-section -->\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n\r\n            position: relative;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .hero-section {\r\n            min-height: 100vh;\r\n            background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\r\n            background-size: cover;\r\n            background-position: center;\r\n            background-repeat: no-repeat;\r\n            \/* background-attachment: fixed; *\/\r\n            display: flex;\r\n            align-items: flex-end;\r\n            justify-content: center;\r\n            position: relative;\r\n\r\n            \/* overflow-x: hidden; *\/\r\n        }\r\n\r\n        .hero-content {\r\n            text-align: center;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            color: white;\r\n            padding: 1rem;\r\n            z-index: 2;\r\n        }\r\n\r\n        .hero-heading {\r\n            font-size: clamp(2.5rem, 5vw, 4rem);\r\n            font-weight: 600;\r\n            text-transform: uppercase;\r\n            margin-bottom: 1.5rem;\r\n            letter-spacing: -0.02em;\r\n\r\n        }\r\n\r\n        .hero-paragraph {\r\n            font-size: clamp(1.1rem, 2vw, 1.25rem);\r\n            margin-bottom: 2.5rem;\r\n            max-width: 550px;\r\n            color: rgba(255, 255, 255, 0.95);\r\n            font-weight: 500;\r\n            line-height: 1.7;\r\n\r\n        }\r\n    <\/style>\r\n\r\n    <style>\r\n        :root {\r\n            --icon-width: 56px;\r\n            --icon-height: 56px;\r\n            --text-bar-width: 128px;\r\n            --text-bar-height: 56px;\r\n            --border-radius: 12px;\r\n            --gap: 0px;\r\n        }\r\n          @media screen and (max-width:767px) {\r\n              :root {\r\n                   --icon-width: 40px;\r\n            --icon-height: 40px;\r\n            --text-bar-width: 128px;\r\n            --text-bar-height: 40px;\r\n            --border-radius: 8px;\r\n              }\r\n          }\r\n\r\n\r\n        .hero-content-card {\r\n            position: absolute;\r\n            inset: 0;\r\n            height: 100vh;\r\n            width: 100vw;\r\n            pointer-events: none;\r\n            z-index: 100;\r\n\r\n        }\r\n\r\n        .card {\r\n\r\n            position: relative;\r\n            display: inline-block;\r\n            position: absolute;\r\n            font-size: 17px;\r\n             font-family: \"DM Sans\", Sans-serif;\r\n            \/* will-change: transform, opacity; *\/\r\n\r\n        }\r\n\r\n        .card-one {\r\n            top: 30%;\r\n            left: 15%;\r\n            font-family: \"DM Sans\", Sans-serif;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .card-two {\r\n            top: 50%;\r\n            left: 5%;\r\n        }\r\n\r\n        .card-three {\r\n            top: 73%;\r\n            left: 15%;\r\n        }\r\n\r\n        .card-four {\r\n            top: 25%;\r\n            right: 17%;\r\n        }\r\n\r\n        .card-five {\r\n            top: 45%;\r\n            right: 5%;\r\n        }\r\n\r\n        .card-six {\r\n            top: 65%;\r\n            right: 15%;\r\n        }\r\n         @media screen and (max-width:767px) {\r\n             .card-one {\r\n    top: 27%;\r\n    left: 3%; }\r\n             .card-five {\r\n                 top: 28% !important;\r\n                 right: 5%;\r\n             }\r\n             .card-two {\r\n                 top:13%;\r\n                 left: 5%;\r\n             }\r\n             .card-four {\r\n                 top:20%;\r\n                 left: 35%;\r\n             }\r\n            .card-three, .card-six  {\r\n                 opacity: 0;\r\n             }\r\n        }\r\n\r\n        .container {\r\n            position: relative;\r\n            border-radius: var(--border-radius);\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n.btn-sec-inner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n}\r\n\r\n.btn-sec-inner p {\r\n  margin: 0;\r\n}\r\n\r\n\r\n        .icon {\r\n            width: var(--icon-width);\r\n            height: var(--icon-height);\r\n            background-color: #ffffff;\r\n            border-radius: var(--border-radius);\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\r\n            position: relative;\r\n            z-index: 2;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .icon img {\r\n            width: 60%;\r\n            aspect-ratio: 1\/1;\r\n        }\r\n\r\n        .icon-bg {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: 60%;\r\n            aspect-ratio: 1\/1;\r\n            border-radius: 50%;\r\n            background-color: rgb(255, 63, 63);\r\n            z-index: -1;\r\n        }\r\n\r\n        .text-bar {\r\n            background: rgba(255,255,255,0.12);\r\n  backdrop-filter: blur(20px) saturate(130%);\r\n\r\n  -webkit-backdrop-filter: blur(20px) saturate(130%);\r\n            height: var(--icon-height);\r\n\r\n            border-radius: 12px 0 0 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 15px;\r\n            font-weight: 600;\r\n           font-family: \"DM Sans\", sans-serif;\r\n            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n            clip-path: inset(0 0 0 100%);\r\n            z-index: 1;\r\n            position: relative;\r\n            padding: 0 20px;\r\n            white-space: nowrap;\r\n            min-width: 100px;\r\n\r\n        }\r\n        .icon, .text-bar {\r\n            transform: scale(0);\r\n        }\r\n    <\/style>\r\n\r\n    <style>\r\n        .spacer {\r\n    width: 100%;\r\n    height: 35vh;\r\n}\r\n@media screen and (max-width: 767px) {\r\n    .spacer {\r\n        height: 20vh;\r\n    }\r\n}\r\n.promo-section {\r\n    margin-bottom: 3rem;\r\n}\r\n.promo-heading-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n}\r\n.promo-badge {\r\n    font-size: clamp(1.1rem, 2vw, 1.25rem);\r\n    margin-bottom: 2.5rem;\r\n    font-weight: 500;\r\n    line-height: 1.7;\r\n}\r\n\r\n.promo-heading {\r\n    \/*font-size: clamp(2.5rem, 5vw, 4rem);*\/\r\n    font-weight: 500;\r\n    text-align: center;\r\n\r\n    \/*margin-bottom: 1.5rem;*\/\r\n    letter-spacing: -0.02em;\r\n}\r\n\r\n.promo-paragraph {\r\n    font-size: clamp(1.1rem, 2vw, 1.25rem);\r\n    margin-bottom: 2.5rem;\r\n    max-width: 550px;\r\n    text-align: center;\r\n    font-weight: 500;\r\n    line-height: 1.2em;\r\n}\r\n.hero-buttons {\r\n    display: flex;\r\n    gap: 1rem;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 1rem;\r\n}\r\n\r\n.btn-primary {\r\n    display: flex;\r\n    gap: 1rem;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background-color: white;\r\n    padding: 12px 24px;\r\n    border-radius: 16px;\r\n    color: black;\r\n    transform: translateY(25px);\r\n    opacity: 0;\r\n\r\n}\r\n\r\n.btn-icon {\r\n    width: 2rem;\r\n    aspect-ratio: 1\/1;\r\n    border-radius: 6px;\r\n    background-color: rgb(0, 0, 0);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n}\r\n\r\n.btn-icon img {\r\n    width: 60%;\r\n\r\n\r\n}\r\n\r\n.btn-secondary {\r\n    display: flex;\r\n    gap: 1rem;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 12px 12px;\r\n    color: rgb(255, 255, 255);\r\n    position: relative;\r\n    \/* opacity: 0; *\/\r\n\r\n\r\n}\r\n.btn-secondary-bg {\r\n    position: absolute;\r\n    z-index: -1;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\nbackground-image: radial-gradient(circle at center, #FF587F 0%, #F04A6F 20%, #B4183D 100%);\r\n\r\n\r\n    border-radius: 10px;\r\n\r\n\r\n}\r\n.btn-sec-inner {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 1rem;\r\n}\r\n.btn-sec-inner p {\r\n    transform: translateX(150%);\r\n}\r\n.btn-sec-icon {\r\n    width: 2rem;\r\n    aspect-ratio: 1\/1;\r\n    border-radius: 6px;\r\n    background-color: rgb(255, 255, 255);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n}\r\n\r\n.btn-sec-icon img {\r\n    width: 60%;\r\n\r\n\r\n}\r\n\r\n\r\n\r\n\r\n  :root{\r\n    --icon-width: 48px;\r\n    --icon-height: 48px;\r\n    --border-radius: 10px;\r\n  }\r\n\r\n  .icon{\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .text-bar{\r\n    height: var(--icon-height);\r\n    border-radius: 10px 0 0 10px;\r\n    padding: 12px 20px 12px 20px;\r\n  }\r\n\r\n \/* \u00a9 Nicolai Palmkvist \u2013 https:\/\/nicolaipalmkvist.com *\/\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5b0f14e hero-section e-flex e-con-boxed e-con e-child\" data-id=\"5b0f14e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-cc1b26f e-con-full section e-flex e-con e-child\" data-id=\"cc1b26f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e0dfa59 elementor-widget elementor-widget-heading\" data-id=\"e0dfa59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HA PPY <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3187f6d floating-car elementor-widget elementor-widget-image\" data-id=\"3187f6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"1536\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-May-24-2026-04_19_43-PM.png\" class=\"attachment-full size-full wp-image-1163\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-May-24-2026-04_19_43-PM.png 1024w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-May-24-2026-04_19_43-PM-200x300.png 200w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-May-24-2026-04_19_43-PM-683x1024.png 683w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-May-24-2026-04_19_43-PM-768x1152.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\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-fc160a8 promo-section e-flex e-con-boxed e-con e-child\" data-id=\"fc160a8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-79c8303 e-con-full promo-heading-wrapper e-flex e-con e-child\" data-id=\"79c8303\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-315543b elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"315543b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<svg class=\"ekit-svg-icon icon-download-arrow\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M26.923 21.957c0.436-0.451 0.436-1.162 0-1.613-0.451-0.436-1.178-0.436-1.613 0l-8.18 8.18v-26.994c0-0.629-0.5-1.129-1.129-1.129s-1.146 0.5-1.146 1.129v26.994l-8.164-8.18c-0.451-0.436-1.162-0.436-1.613 0-0.436 0.451-0.436 1.162 0 1.613l10.117 10.117c0.436 0.436 1.162 0.436 1.613 0l10.116-10.117z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4687d0 elementor-widget elementor-widget-heading\" data-id=\"f4687d0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Building Luxury Experience<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-291dfaa elementor-widget elementor-widget-heading\" data-id=\"291dfaa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Responsive Design<br> Refined for Luxury<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fff9edf elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"fff9edf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>The finest digital experiences aren&#8217;t just seen. They are felt in every fluid transition and flawless layout.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-97f63a6 elementor-widget elementor-widget-html\" data-id=\"97f63a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<a href=\"https:\/\/nicolaipalmkvist.com\" class=\"btn-secondary-link\">\r\n    <div class=\"btn-secondary\">\r\n        <div class=\"btn-secondary-bg\"><\/div>\r\n        <div class=\"btn-sec-inner\">\r\n\r\n            <p>Start a project<\/p>\r\n            <div class=\"btn-sec-icon\">\r\n                <img decoding=\"async\" src=\"https:\/\/mintcream-gnu-256830.hostingersite.com\/wp-content\/uploads\/2025\/09\/100.svg\" alt=\"\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/a>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a50493 e-con-full e-flex e-con e-child\" data-id=\"2a50493\" data-element_type=\"container\" data-e-type=\"container\" id=\"marquee-container\">\n\t\t<div class=\"elementor-element elementor-element-2b75072 e-con-full animation-clip e-flex e-con e-child\" data-id=\"2b75072\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-b30873e e-con-full left-cloud e-flex e-con e-child\" data-id=\"b30873e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9359bd8 e-con-full right-cloud e-flex e-con e-child\" data-id=\"9359bd8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dfb5c45 e-con-full iphone-frame e-flex e-con e-child\" data-id=\"dfb5c45\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4d980f3 e-con-full iphone-screen e-flex e-con e-child\" data-id=\"4d980f3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e17fc88 elementor-widget elementor-widget-image\" data-id=\"e17fc88\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"372\" height=\"750\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/iframe.png\" class=\"attachment-large size-large wp-image-1227\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/iframe.png 372w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/iframe-149x300.png 149w\" sizes=\"(max-width: 372px) 100vw, 372px\" \/>\t\t\t\t\t\t\t\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-85f50be image-item elementor-widget elementor-widget-image\" data-id=\"85f50be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"437\" height=\"787\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/3CFC0E3B-B207-42A8-8FC9-22657D5F75FA.png\" class=\"attachment-large size-large wp-image-1368\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/3CFC0E3B-B207-42A8-8FC9-22657D5F75FA.png 437w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/3CFC0E3B-B207-42A8-8FC9-22657D5F75FA-167x300.png 167w\" sizes=\"(max-width: 437px) 100vw, 437px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a69bb22 image-item elementor-widget elementor-widget-image\" data-id=\"a69bb22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"439\" height=\"787\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/02AECFA2-F05D-4CB9-BD5D-1579520F89F2.png\" class=\"attachment-large size-large wp-image-1370\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/02AECFA2-F05D-4CB9-BD5D-1579520F89F2.png 439w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/02AECFA2-F05D-4CB9-BD5D-1579520F89F2-167x300.png 167w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b71e8fd image-item elementor-widget elementor-widget-image\" data-id=\"b71e8fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"441\" height=\"786\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/3CE8A5E0-0620-4330-B3F6-C11164B68144.png\" class=\"attachment-large size-large wp-image-1371\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/3CE8A5E0-0620-4330-B3F6-C11164B68144.png 441w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/3CE8A5E0-0620-4330-B3F6-C11164B68144-168x300.png 168w\" sizes=\"(max-width: 441px) 100vw, 441px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8465cc0 image-item elementor-widget elementor-widget-image\" data-id=\"8465cc0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"439\" height=\"786\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/5F4F442A-6F7F-4954-9AB4-8AF2E2F797DF.png\" class=\"attachment-large size-large wp-image-1372\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/5F4F442A-6F7F-4954-9AB4-8AF2E2F797DF.png 439w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/5F4F442A-6F7F-4954-9AB4-8AF2E2F797DF-168x300.png 168w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e084ee image-item elementor-widget elementor-widget-image\" data-id=\"0e084ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"439\" height=\"786\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/65B5728F-FAFD-4BB8-9DE6-F795EE5FAA0F.png\" class=\"attachment-large size-large wp-image-1373\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/65B5728F-FAFD-4BB8-9DE6-F795EE5FAA0F.png 439w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/65B5728F-FAFD-4BB8-9DE6-F795EE5FAA0F-168x300.png 168w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5816ce image-item elementor-widget elementor-widget-image\" data-id=\"f5816ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"435\" height=\"783\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/04D1A836-6092-48D2-BFE1-C69273A3D176.png\" class=\"attachment-large size-large wp-image-1374\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/04D1A836-6092-48D2-BFE1-C69273A3D176.png 435w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/04D1A836-6092-48D2-BFE1-C69273A3D176-167x300.png 167w\" sizes=\"(max-width: 435px) 100vw, 435px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e10d416 image-item elementor-widget elementor-widget-image\" data-id=\"e10d416\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"268\" height=\"512\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/65D7827A-63F5-4EEF-8B14-972535775059.png\" class=\"attachment-large size-large wp-image-1375\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/65D7827A-63F5-4EEF-8B14-972535775059.png 268w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/65D7827A-63F5-4EEF-8B14-972535775059-157x300.png 157w\" sizes=\"(max-width: 268px) 100vw, 268px\" \/>\t\t\t\t\t\t\t\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10e556a elementor-widget elementor-widget-html\" data-id=\"10e556a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link data-minify=\"1\" rel=\"stylesheet\" href=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/lenis@1.3.11\/dist\/lenis.css?ver=1779314497\">\r\n   <script data-minify=\"1\" src=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/npm\/gsap@3.13.0\/dist\/ScrollToPlugin.min.js?ver=1773388797\"> <\/script>\r\n<script data-minify=\"1\" src=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/npm\/gsap@3.13.0\/dist\/ScrollTrigger.min.js?ver=1773388797\"><\/script>\r\n<script data-minify=\"1\" src=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/npm\/gsap@3.13.0\/dist\/SplitText.min.js?ver=1773388797\"><\/script>\r\n<script data-minify=\"1\" src=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/lenis@1.3.8\/dist\/lenis.min.js?ver=1773388797\"><\/script>\r\n<script data-minify=\"1\" src=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js?ver=1773388797\"><\/script>\r\n<script>\/\/ Initialize a new Lenis instance for smooth scrolling\r\nconst lenis = new Lenis();\r\n\r\n\/\/ Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin\r\nlenis.on('scroll', ScrollTrigger.update);\r\n\r\n\/\/ Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker\r\n\/\/ This ensures Lenis's smooth scroll animation updates on each GSAP tick\r\ngsap.ticker.add((time) => {\r\n  lenis.raf(time * 1000); \/\/ Convert time from seconds to milliseconds\r\n});\r\n\r\n\/\/ Disable lag smoothing in GSAP to prevent any delay in scroll animations\r\ngsap.ticker.lagSmoothing(0);\r\n\r\n\r\n\r\n\/\/ new lenis\r\n\r\n\r\n\r\n\r\n<\/script>\r\n\r\n\r\n\/\/ <script>\r\n\/\/ gsap.registerPlugin(SplitText)\r\n\/\/ gsap.registerPlugin(ScrollTrigger)\r\n\/\/      gsap.registerPlugin(ScrollToPlugin)\r\n\/\/         \/\/ Create ScrollTrigger for section 2\r\n\/\/       ScrollTrigger.create({\r\n\/\/     trigger: \".promo-section\",\r\n\/\/     start: \"bottom 95%\",\r\n\/\/     onEnter: () => {\r\n\r\n\/\/         \/\/ Wait for next frame to ensure smooth start\r\n\/\/         requestAnimationFrame(() => {\r\n\/\/             requestAnimationFrame(() => {\r\n\/\/                 gsap.to(window, {\r\n\/\/                     duration: 3,\r\n\/\/                     scrollTo: {\r\n\/\/                         y: \"#marquee-container\",\r\n\/\/                         offsetY: 150\r\n\/\/                     },\r\n\/\/                     ease: \"power1.inOut\"\r\n\/\/                 });\r\n\/\/             });\r\n\/\/         });\r\n\/\/     },\r\n\/\/     \/\/ once: true\r\n\/\/ });\r\n\/\/ <\/script>\r\n<script> class ViewportTriggeredMarquee {\r\n    constructor() {\r\n        this.container = document.getElementById('marquee-container');\r\n        this.images = [];\r\n        this.amplitude = 150;\r\n        this.arcMultiplier = .3; \/\/ Default arc multiplier\r\n        this.hasAnimated = false;\r\n\r\n        this.init();\r\n    }\r\n\r\n    init() {\r\n        this.collectImages();\r\n        this.updateResponsiveSettings();\r\n        this.positionIPhoneFrame();\r\n        this.setupIntersectionObserver();\r\n\r\n        \/\/ Add resize listener\r\n        window.addEventListener('resize', () => {\r\n            this.updateResponsiveSettings();\r\n            this.positionIPhoneFrame();\r\n        });\r\n    }\r\n\r\n    updateResponsiveSettings() {\r\n        const width = window.innerWidth;\r\n\r\n        if (width < 768) {\r\n            \/\/ Mobile: 5 images\r\n            this.visibleImages = 5;\r\n            this.amplitude = 70;\r\n            this.arcMultiplier = -2;\r\n        } else if (width >= 768 && width <= 1200) {\r\n            \/\/ Tablet: 7 images\r\n            this.visibleImages = 7;\r\n            this.amplitude = 120;\r\n            this.arcMultiplier = .2;\r\n        } else if (width > 1200 && width <= 1350) {\r\n            \/\/ Large tablet: 9 images\r\n            this.visibleImages = 7;\r\n            this.amplitude = 120;\r\n            this.arcMultiplier = .3;\r\n        } else {\r\n            \/\/ Desktop: 11 images\r\n            this.visibleImages = 7;\r\n            this.amplitude = 150;\r\n            this.arcMultiplier = .3;\r\n        }\r\n\r\n        this.showHideImages();\r\n    }\r\n\r\n    showHideImages() {\r\n        \/\/ Show\/hide images based on screen size\r\n        this.images.forEach((imageObj, index) => {\r\n            if (index < this.visibleImages) {\r\n                imageObj.element.style.display = 'block';\r\n                imageObj.active = true;\r\n            } else {\r\n                \/\/ imageObj.element.style.display = 'none';\r\n                imageObj.active = false;\r\n            }\r\n        });\r\n\r\n        \/\/ Update active images array\r\n        this.activeImages = this.images.filter(img => img.active);\r\n    }\r\n\r\n    collectImages() {\r\n        const imageElements = this.container.querySelectorAll('.image-item');\r\n\r\n        this.images = Array.from(imageElements).map((element, index) => ({\r\n            element: element,\r\n            index: index,\r\n            active: true\r\n        }));\r\n    }\r\n\r\n    positionIPhoneFrame() {\r\n        \/\/ Always position at the center of the visible images\r\n        const centerProgress = 0.5;\r\n        const centerPosition = this.calculatePosition(centerProgress);\r\n\r\n        const iPhoneFrame = document.querySelector('.iphone-frame');\r\n        if (iPhoneFrame) {\r\n            iPhoneFrame.style.left = centerPosition.x + 'px';\r\n            iPhoneFrame.style.top = centerPosition.y + 'px';\r\n        }\r\n    }\r\n\r\n    setupIntersectionObserver() {\r\n        const observer = new IntersectionObserver(\r\n            (entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting && entry.intersectionRatio >= 0.5 && !this.hasAnimated) {\r\n                        this.startAnimation();\r\n                        this.hasAnimated = true;\r\n                    }\r\n                });\r\n            },\r\n            {\r\n                threshold: [0.5]\r\n            }\r\n        );\r\n\r\n        observer.observe(this.container);\r\n    }\r\n\r\n    calculatePosition(progress) {\r\n        \/\/ Cap the effective window width at 2500px for ultra-wide screens\r\n        const actualWidth = window.innerWidth;\r\n        const windowWidth = Math.min(actualWidth, 2500);\r\n        const windowHeight = window.innerHeight;\r\n\r\n        \/\/ X position: start from right and move to left within the capped width\r\n        const x = (windowWidth + 100) - (progress * (windowWidth + 200));\r\n\r\n        \/\/ Y position follows an arc above center\r\n        \/\/ const normalizedX = Math.max(0, Math.min(1, progress)) * Math.PI;\r\n        \/\/ const y = (windowHeight \/ 2) - Math.sin(normalizedX) * this.amplitude;\r\n        const normalizedX = Math.max(0, Math.min(1, progress)) * Math.PI;\r\n        const arcOffset = this.amplitude * this.arcMultiplier;\r\n        const y = (windowHeight \/ 2) - Math.sin(normalizedX) * this.amplitude + arcOffset;\r\n\r\n        return { x, y };\r\n    }\r\n\r\n    getLeftOffset() {\r\n        const actualWidth = window.innerWidth;\r\n        return actualWidth > 2500 ? (actualWidth - 2500) \/ 2 : 0;\r\n    }\r\n\r\n    startAnimation() {\r\n        \/\/ Phase 1: Reveal all active cards along the path\r\n        this.revealCards().then(() => {\r\n            \/\/ Phase 2: Move cards sequentially\r\n            setTimeout(() => {\r\n                this.moveCardsSequentially();\r\n            }, 1000);\r\n        });\r\n    }\r\n\r\n    async revealCards() {\r\n        return new Promise((resolve) => {\r\n            const totalDuration = 2500;\r\n            const startTime = performance.now();\r\n\r\n            \/\/ Set initial positions for active images only\r\n            this.activeImages.forEach((imageObj, index) => {\r\n                const startProgress = (index \/ (this.activeImages.length - 1)) - 0.8;\r\n                const startPosition = this.calculatePosition(startProgress);\r\n\r\n                imageObj.element.style.left = startPosition.x + 'px';\r\n                imageObj.element.style.top = startPosition.y + 'px';\r\n                imageObj.element.style.transform = 'translate(-50%, -50%)';\r\n                imageObj.element.style.opacity = 1;\r\n            });\r\n\r\n            const animate = (currentTime) => {\r\n                const elapsed = currentTime - startTime;\r\n                const progress = Math.min(elapsed \/ totalDuration, 1);\r\n                const easedProgress = 1 - Math.pow(1 - progress, 3);\r\n\r\n                this.activeImages.forEach((imageObj, index) => {\r\n                    const startProgress = (index \/ (this.activeImages.length - 1)) - 0.8;\r\n                    const targetProgress = index \/ (this.activeImages.length - 1);\r\n                    const currentProgress = startProgress + (targetProgress - startProgress) * easedProgress;\r\n                    const position = this.calculatePosition(currentProgress);\r\n\r\n                    imageObj.element.style.left = position.x + 'px';\r\n                    imageObj.element.style.top = position.y + 'px';\r\n                });\r\n\r\n                if (progress < 1) {\r\n                    requestAnimationFrame(animate);\r\n                } else {\r\n                    \/\/ Ensure exact final positions\r\n                    this.activeImages.forEach((imageObj, index) => {\r\n                        const finalProgress = index \/ (this.activeImages.length - 1);\r\n                        const finalPosition = this.calculatePosition(finalProgress);\r\n                        imageObj.element.style.left = finalPosition.x + 'px';\r\n                        imageObj.element.style.top = finalPosition.y + 'px';\r\n                    });\r\n                    resolve();\r\n                }\r\n            };\r\n\r\n            requestAnimationFrame(animate);\r\n        });\r\n    }\r\n\r\n    moveCardsSequentially() {\r\n        this.stepIndex = 0;\r\n\r\n        \/\/ Ensure cards are in exact initial positions\r\n        this.activeImages.forEach((imageObj, index) => {\r\n            const initialProgress = index \/ (this.activeImages.length - 1);\r\n            const position = this.calculatePosition(initialProgress);\r\n            imageObj.element.style.left = position.x + 'px';\r\n            imageObj.element.style.top = position.y + 'px';\r\n            imageObj.element.style.opacity = 1;\r\n        });\r\n\r\n        this.moveToNextStep();\r\n    }\r\n\r\n    moveToNextStep() {\r\n        const stepDuration = 800;\r\n        const startTime = performance.now();\r\n\r\n        const currentPositions = this.activeImages.map((imageObj) => ({\r\n            x: parseFloat(imageObj.element.style.left),\r\n            y: parseFloat(imageObj.element.style.top)\r\n        }));\r\n\r\n        const animate = (currentTime) => {\r\n            const elapsed = currentTime - startTime;\r\n            const progress = Math.min(elapsed \/ stepDuration, 1);\r\n            const easedProgress = 1 - Math.pow(1 - progress, 3);\r\n\r\n            this.activeImages.forEach((imageObj, index) => {\r\n                const currentCardPosition = index + this.stepIndex;\r\n                const targetCardPosition = currentCardPosition + 1;\r\n\r\n                let normalizedTarget = (targetCardPosition \/ (this.activeImages.length - 1)) % (this.activeImages.length \/ (this.activeImages.length - 1));\r\n\r\n                const currentPos = currentPositions[index];\r\n                let targetPosition = this.calculatePosition(normalizedTarget);\r\n\r\n                if (targetPosition.x > currentPos.x + (window.innerWidth \/ 2)) {\r\n                    const offScreenRightProgress = -0.3;\r\n                    const offScreenRightPosition = this.calculatePosition(offScreenRightProgress);\r\n\r\n                    const x = offScreenRightPosition.x + (targetPosition.x - offScreenRightPosition.x) * easedProgress;\r\n                    const y = offScreenRightPosition.y + (targetPosition.y - offScreenRightPosition.y) * easedProgress;\r\n\r\n                    imageObj.element.style.left = x + 'px';\r\n                    imageObj.element.style.top = y + 'px';\r\n                } else {\r\n                    const x = currentPos.x + (targetPosition.x - currentPos.x) * easedProgress;\r\n                    const y = currentPos.y + (targetPosition.y - currentPos.y) * easedProgress;\r\n\r\n                    imageObj.element.style.left = x + 'px';\r\n                    imageObj.element.style.top = y + 'px';\r\n                }\r\n\r\n                const currentX = parseFloat(imageObj.element.style.left);\r\n                if (currentX < -100) {\r\n                    imageObj.element.style.opacity = 0;\r\n                } else {\r\n                    imageObj.element.style.opacity = 1;\r\n                }\r\n            });\r\n\r\n            if (progress < 1) {\r\n                requestAnimationFrame(animate);\r\n            } else {\r\n                this.stepIndex++;\r\n                setTimeout(() => {\r\n                    this.moveToNextStep();\r\n                }, 800);\r\n            }\r\n        };\r\n\r\n        requestAnimationFrame(animate);\r\n    }\r\n}\r\n\r\n\/\/ Initialize the marquee\r\nconst marquee = new ViewportTriggeredMarquee();<\/script>\r\n<script>\r\ngsap.registerPlugin(SplitText)\r\ngsap.registerPlugin(ScrollTrigger)\r\n\r\n\r\n\r\n\r\nconst breakpoint = 767;\r\n\r\ngsap.set('.icon', { scale: 0 })\r\ngsap.set('.text-bar', { scale: 0 })\r\n\r\nlet totalDistance;\r\n\r\nconst marqueeContainer = document.getElementById('marquee-container');\r\n\r\nconst buttonSecondary = document.querySelector('.btn-secondary')\r\nconst secondaryIcon = document.querySelector('.btn-sec-icon');\r\nconst buttonSecondaryWidth = buttonSecondary.offsetWidth\r\nconst secondaryIconWidth = secondaryIcon.offsetWidth\r\n\r\nconst buttonSecondarydistancefromLeft = buttonSecondary.getBoundingClientRect().right\r\nconst secondaryIcondistancefromLeft = secondaryIcon.getBoundingClientRect().right;\r\n\r\nconst button_icon_distance = buttonSecondarydistancefromLeft - secondaryIcondistancefromLeft;\r\n\r\nconst c = (2 * button_icon_distance) + secondaryIconWidth\r\nconst ratio_icon_button = c \/ buttonSecondaryWidth;\r\nconst offset = -(buttonSecondaryWidth \/ 2) + (c \/ 2);\r\n\/\/ console.log({\r\n\/\/     buttonSecondary, secondaryIcon, buttonSecondaryWidth, secondaryIconWidth,\r\n\/\/     buttonSecondarydistancefromLeft, secondaryIcondistancefromLeft, button_icon_distance, c, ratio_icon_button\r\n\/\/ })\r\n\r\ngsap.set(buttonSecondary, { x: -(buttonSecondaryWidth \/ 2) + (c \/ 2) })\r\ngsap.set('.btn-secondary-bg', { width: c, x: (buttonSecondaryWidth - c) })\r\n\/\/ gsap.set('.btn-sec-inner p', {xPercent: 100})\r\n\/\/ gsap.timeline({ delay: 2 }).to('.btn-secondary-bg', { width: buttonSecondaryWidth, x: (buttonSecondaryWidth \/ 2) - (c \/ 2) })\r\n\/\/     .to('.btn-sec-icon', { x: (buttonSecondaryWidth \/ 2) - (c \/ 2) }, '<')\r\n\/\/     .to('.btn-sec-inner p', { x: (buttonSecondaryWidth \/ 2) - (c \/ 2) }, '<')\r\n\r\n\r\ndocument.fonts.ready.then(() => {\r\n    const mainTimelineLanding = gsap.timeline()\r\n    const promoTimeline = gsap.timeline();\r\n    const splitHeading = SplitText.create(\".hero-heading\", {\r\n        type: \"words,lines\",\r\n        linesClass: \"line\",\r\n        autoSplit: true\r\n    });\r\n\r\n    const splitPara = SplitText.create(\".hero-paragraph\", {\r\n        type: \"words,lines\",\r\n        linesClass: \"line\",\r\n        autoSplit: true\r\n    });\r\n    const splitPromoHeading = SplitText.create(\".promo-heading\", {\r\n        type: \"words,lines\",\r\n        linesClass: \"line\",\r\n        autoSplit: true\r\n    });\r\n\r\n    const splitPromoPara = SplitText.create(\".promo-paragraph\", {\r\n        type: \"lines\",\r\n        linesClass: \"line\",\r\n        autoSplit: true\r\n    });\r\n    const splitPromoBadge = SplitText.create(\".promo-badge\", {\r\n        type: \"lines\",\r\n        linesClass: \"line\",\r\n        autoSplit: true\r\n    });\r\n    gsap.set(\".hero-heading\", { opacity: 1 });\r\n    gsap.set(\".hero-paragraph\", { opacity: 1 });\r\n    mainTimelineLanding\r\n        .from(splitHeading.words, {\r\n            duration: 1.3,\r\n            filter: 'blur(5px)',\r\n            yPercent: 40,\r\n            opacity: 0,\r\n            stagger: 0.02,\r\n            ease: \"expo.out\"\r\n        })\r\n        .from(splitPara.lines, {\r\n            duration: 1.3,\r\n            filter: 'blur(5px)',\r\n            yPercent: 100,\r\n            opacity: 0,\r\n            stagger: 0.2,\r\n            ease: \"expo.out\"\r\n        }, '-=1')\r\n        .to('.btn-primary', {\r\n            y: 0,\r\n            filter: 'blue(5px)',\r\n            duration: .3,\r\n            opacity: 1,\r\n            stagger: 0.1,\r\n            ease:'sine.out',\r\n        }, '-=.8')\r\n\r\n    gsap.from(splitPromoHeading.words, {\r\n        duration: 0.5,\r\n        filter: 'blur(5px)',\r\n        yPercent: 40,\r\n        opacity: 0,\r\n        stagger: 0.02,\r\n        ease: \"expo.out\",\r\n        scrollTrigger: {\r\n            trigger: splitPromoHeading.words[0]?.parentElement || \".promo-heading\",\r\n            start: \"top 90%\",\r\n            \/\/ toggleActions: \"play none none reverse\"\r\n        }\r\n    });\r\n\r\n    \/\/ Badge animation\r\n    gsap.from(splitPromoPara.lines, {\r\n        duration: 1.3,\r\n        filter: 'blur(5px)',\r\n        yPercent: 100,\r\n        opacity: 0,\r\n        stagger: 0.2,\r\n        ease: \"expo.out\",\r\n        scrollTrigger: {\r\n            trigger: splitPromoBadge.lines[0]?.parentElement || \".promo-badge\",\r\n            start: \"top 70%\",\r\n            \/\/ toggleActions: \"play none none reverse\"\r\n        }\r\n    });\r\n\r\n    \/\/ Button animation\r\n    gsap.from(splitPromoBadge.lines, {\r\n        yPercent: 80,\r\n        filter: 'blur(5px)',\r\n        duration: .8,\r\n        opacity: 0,\r\n        stagger: 0.2,\r\n        scrollTrigger: {\r\n            trigger: \".btn-primary\",\r\n            start: \"top 70%\",\r\n            \/\/ toggleActions: \"play none none reverse\"\r\n        }\r\n    });\r\n\r\n\r\n    gsap.timeline({\r\n        scrollTrigger: {\r\n            trigger: \".btn-secondary\", \/\/ Or use a parent container\r\n            start: \"top 70%\", \/\/ Animation starts when top of element hits 70% from top of viewport\r\n            \/\/ end: \"bottom 30%\", \/\/ Optional: end point\r\n            \/\/ toggleActions: \"play none none reverse\", \/\/ play on enter, reverse on leave\r\n            \/\/ markers: true, \/\/ Uncomment for debugging\r\n        }\r\n    })\r\n        .from('.btn-secondary', { scale: .1, duration: .4, transformOrigin: `${(buttonSecondaryWidth \/ 2) - offset}px center` })\r\n        .to('.btn-secondary-bg', {\r\n            width: buttonSecondaryWidth,\r\n            x: (buttonSecondaryWidth \/ 2) - (c \/ 2)\r\n        })\r\n        .to('.btn-sec-icon', {\r\n            x: (buttonSecondaryWidth \/ 2) - (c \/ 2)\r\n        }, '<')\r\n        .to('.btn-sec-inner p', {\r\n            x: (buttonSecondaryWidth \/ 2) - (c \/ 2)\r\n        }, '<');\r\n\r\n})\r\n\r\n\r\nfunction animateCard(card, delay = 0) {\r\n    const icon = card.querySelector('.icon');\r\n    const textBar = card.querySelector('.text-bar');\r\n    const container = card.querySelector('.container');\r\n\r\n    \/\/ Get actual dimensions\r\n    const textBarWidth = textBar.offsetWidth;\r\n    const iconWidth = icon.offsetWidth;\r\n    totalDistance = textBarWidth + iconWidth;\r\n\r\n    \/\/ Create timeline for this card\r\n    const tl = gsap.timeline({\r\n        delay: delay,\r\n        \/\/ repeat: -1,\r\n        repeatDelay: 2,\r\n    });\r\n\r\n    \/\/ Animation sequence\r\n    tl.to(icon, { scale: 1 })\r\n    tl.to(textBar, { scale: 1 }, '<')\r\n        .to(icon, {\r\n            x: -totalDistance * 2 \/ 3,\r\n            borderRadius: \"12px 0 0 12px\",\r\n            duration: 1.2,\r\n            ease: 'power2.out'\r\n        })\r\n        .to(textBar, {\r\n            clipPath: 'inset(0 0 0 0%)',\r\n            borderRadius: \"0 12px 12px 0\",\r\n            duration: 1.2,\r\n            x: totalDistance \/ 3,\r\n            ease: 'power2.out'\r\n        }, \"<\") \/\/ Start at the same time as icon animation\r\n\r\n\r\n}\r\n\r\n\r\n\/\/ Wait for page load then start animations\r\nconst cards = document.querySelectorAll('.card');\r\n\/\/ window.addEventListener('load', () => {\r\n    \/\/ gsap.matchMedia().add(`(min-width: ${breakpoint + 1}px)`, () => {\r\n\r\n        \/\/ Animate each card with a slight delay between them\r\n        cards.forEach((card, index) => {\r\n            \/\/ animateCard(card, 1.5 + (index * 0.3));\r\n            animateCard(card, 1.2);\r\n        });\r\n    \/\/ })\r\n\/\/ });\r\n\r\n\r\n\r\n\r\nfunction calculateDistance() {\r\n    const cardThree = document.querySelector('.card-three');\r\n    const btnSecondary = document.querySelector('.btn-secondary');\r\n\r\n    if (!cardThree || !btnSecondary) {\r\n        console.log('Elements not found!');\r\n        return null;\r\n    }\r\n\r\n    \/\/ Get bounding rectangles\r\n    const cardRect = cardThree.getBoundingClientRect();\r\n    const btnRect = btnSecondary.getBoundingClientRect();\r\n\r\n    \/\/ Calculate different types of distances\r\n    const verticalDistance = btnRect.top - cardRect.bottom;\r\n    const horizontalDistance = btnRect.left - cardRect.right;\r\n    const centerToCenter = Math.sqrt(\r\n        Math.pow(btnRect.left + btnRect.width \/ 2 - (cardRect.left + cardRect.width \/ 2), 2) +\r\n        Math.pow(btnRect.top + btnRect.height \/ 2 - (cardRect.top + cardRect.height \/ 2), 2)\r\n    );\r\n\r\n    \/\/ Get absolute positions (accounting for scroll)\r\n    const scrollY = window.scrollY;\r\n    const cardAbsoluteTop = cardRect.top + scrollY;\r\n    const btnAbsoluteTop = btnRect.top + scrollY;\r\n    const absoluteVerticalDistance = btnAbsoluteTop - (cardAbsoluteTop + cardRect.height);\r\n\r\n    const distances = {\r\n        vertical: verticalDistance,\r\n        horizontal: horizontalDistance,\r\n        centerToCenter: centerToCenter,\r\n        absoluteVertical: absoluteVerticalDistance,\r\n        cardPosition: cardAbsoluteTop,\r\n        buttonPosition: btnAbsoluteTop\r\n    };\r\n\r\n    console.log('Distance Results:', distances);\r\n    return distances;\r\n}\r\n\r\n\/\/ Call the function\r\nconst verticalDistance = calculateDistance().absoluteVertical\r\n\r\nsetTimeout(() => {\r\n    gsap.matchMedia().add(`(min-width: ${breakpoint + 1}px)`, () => {\r\n\r\n        cards.forEach((card, i) => {\r\n            const cardTimeline = gsap.timeline({\r\n                scrollTrigger: {\r\n                    trigger: \".card-three\",\r\n                    start: \"top 70%\",\r\n                    endTrigger: \".promo-section\",\r\n                    end: \"top 90%\",\r\n                    scrub: true,\r\n                    \/\/ markers:true,\r\n\r\n                }\r\n            })\r\n            const icon = card.querySelector('.icon')\r\n            const textBar = card.querySelector('.text-bar')\r\n            cardTimeline.to(icon, {\r\n\r\n                x: - totalDistance \/ 3,\r\n                borderRadius: \"12px 12px 12px 12px\",\r\n                duration: 1.2,\r\n                \/\/ ease: 'power2.out'\r\n            })\r\n                .to(textBar, {\r\n                    clipPath: 'inset(0 0 0 100%)',\r\n                    borderRadius: \"12px 12px 12px 12px\",\r\n                    duration: .7,\r\n                    x: -totalDistance * 1 \/ 3,\r\n                    opacity: 0\r\n                    \/\/ ease: 'power2.out'\r\n                }, '<') \/\/ Start at the same time as the reverse icon animation\r\n\r\n\r\n            const cardTimelineScale = gsap.timeline({\r\n                scrollTrigger: {\r\n                    trigger: \".promo-section\",\r\n                    start: \"top 90%\",\r\n                    endTrigger: \".btn-secondary\",\r\n                    end: \"top center\",\r\n                    scrub: true,\r\n                }\r\n            })\r\n            cardTimelineScale.to(icon, {\r\n                borderRadius: \"12px 12px 12px 12px\",\r\n                scale: 1.3\r\n            })\r\n\r\n\r\n        const offseta = (i % 3) * 100\r\n\r\n        gsap.to(card, {\r\n            scrollTrigger: {\r\n                trigger: \".card-three\",\r\n                start: \"top 70%\",\r\n                endTrigger: \".btn-secondary\",\r\n                end: \"top center\",\r\n                scrub: true,\r\n\r\n\r\n\r\n            },\r\n\r\n            y: verticalDistance + offseta,\r\n            borderRadius: \"12px 12px 12px 12px\",\r\n            ease: \"none\",\r\n\r\n        });\r\n\r\n        })\r\n\r\n\r\n        \/\/ card vertical travel animation\r\n\r\n    })\r\n    gsap.matchMedia().add(`(max-width: ${breakpoint }px)`, () => {\r\nScrollTrigger.normalizeScroll(true);\r\n        cards.forEach((card, i) => {\r\n            const cardTimeline = gsap.timeline({\r\n                scrollTrigger: {\r\n                    trigger: \".card-three\",\r\n                    start: \"top 70%\",\r\n                    endTrigger: \".promo-section\",\r\n                    end: \"top 50%\",\r\n                    scrub: true,\r\n                    \/\/ markers:true,\r\n\r\n                }\r\n            })\r\n            const icon = card.querySelector('.icon')\r\n            const textBar = card.querySelector('.text-bar')\r\n            cardTimeline.to(icon, {\r\n\r\n                x: - totalDistance \/ 3,\r\n                borderRadius: \"12px 12px 12px 12px\",\r\n                duration: 1.2,\r\n                \/\/ ease: 'power2.out'\r\n            })\r\n                .to(textBar, {\r\n                    clipPath: 'inset(0 0 0 100%)',\r\n                    borderRadius: \"12px 12px 12px 12px\",\r\n                    duration: .7,\r\n                    x: -totalDistance * 1 \/ 3,\r\n                    opacity: 0\r\n                    \/\/ ease: 'power2.out'\r\n                }, '<') \/\/ Start at the same time as the reverse icon animation\r\n\r\n\r\n            const cardTimelineScale = gsap.timeline({\r\n                scrollTrigger: {\r\n                    trigger: \".promo-section\",\r\n                    start: \"top 90%\",\r\n                    endTrigger: \".btn-secondary\",\r\n                    end: \"top center\",\r\n                    scrub: true,\r\n                }\r\n            })\r\n            \/\/ cardTimelineScale.to(icon, {\r\n            \/\/     borderRadius: \"12px 12px 12px 12px\",\r\n            \/\/     scale: 1.3\r\n            \/\/ })\r\n\r\n\r\n        })\r\n            const offseta = 200;\r\n                  const animationConfig = {\r\n                0: verticalDistance + offseta,\r\n                1: (verticalDistance * 1.5) + offseta,\r\n                3: (verticalDistance * 1.3) + offseta,  \/\/ Example: 1.5x distance\r\n                4: (verticalDistance * 1) + offseta   \/\/ Example: 0.7x distance\r\n            };\r\n\r\n            cards.forEach((card, i) => {\r\n                if (animationConfig[i] !== undefined) {\r\n                    gsap.to(card, {\r\n                        scrollTrigger: {\r\n                            trigger: \".card-three\",\r\n                            start: \"top 70%\",\r\n                            endTrigger: \".btn-secondary\",\r\n                            end: \"top center\",\r\n                            scrub: .5,\r\n                            invalidateOnRefresh: true,\r\n                            \/\/ markers:true,\r\n                        },\r\n                        y: animationConfig[i],\r\n                        x:(i % 2) * 30,\r\n                        borderRadius: \"12px 12px 12px 12px\",\r\n                        ease: \"none\",\r\n                    });\r\n                }\r\n            });\r\n\r\n\r\n        \/\/ card vertical travel animation\r\n\r\n    })\r\n\r\n\r\n\r\n\r\n}, 4000)\r\n\r\n\r\n\r\n\r\n\/\/ gsap.matchMedia().add(`(min-width: ${breakpoint + 1}px)`, () => {\r\n\r\n    cards.forEach((card, i) => {\r\n\r\n        gsap.to(cards[0].querySelector('.container'), { \/\/ Animate each card, not just cards[0]\r\n            scale: 0,\r\n            opacity: 0,\r\n            x: 120,\r\n            y: 70,\r\n            \/\/ x: 20 + (i * 50), \/\/ Different x for each card\r\n            \/\/ y: 15 + (i * 30),\r\n            \/\/ duration: 2.5,\r\n            scrollTrigger: {\r\n                trigger: marqueeContainer,\r\n                \/\/ trigger: '.btn-secondary',\r\n                start: \"top 52%\",\r\n                end: '+=500',\r\n                toggleActions: \"play none none reverse\",\r\n                \/\/ scrub: true,\r\n            },\r\n        });\r\n        gsap.to(cards[1].querySelector('.container'), { \/\/ Animate each card, not just cards[0]\r\n            scale: 0,\r\n            opacity: 0,\r\n            x: 150,\r\n\r\n\r\n            scrollTrigger: {\r\n                trigger: marqueeContainer,\r\n                \/\/ trigger: '.btn-secondary',\r\n                start: \"top 50%\",\r\n                end: '+=500',\r\n                toggleActions: \"play none none reverse\",\r\n                \/\/ scrub: true,\r\n            },\r\n        });\r\n        gsap.to(cards[2].querySelector('.container'), { \/\/ Animate each card, not just cards[0]\r\n            scale: 0,\r\n            opacity: 0,\r\n            x: 150,\r\n            y: -60,\r\n\r\n            scrollTrigger: {\r\n                trigger: marqueeContainer,\r\n                \/\/ trigger: '.btn-secondary',\r\n                start: \"top 50%\",\r\n                end: '+=500',\r\n                toggleActions: \"play none none reverse\",\r\n                \/\/ scrub: true,\r\n            },\r\n        });\r\n        gsap.to(cards[3].querySelector('.container'), { \/\/ Animate each card, not just cards[0]\r\n            scale: 0,\r\n            opacity: 0,\r\n            x: -150,\r\n            y: 70,\r\n            \/\/ x: 20 + (i * 50), \/\/ Different x for each card\r\n            \/\/ y: 15 + (i * 30),\r\n            \/\/ duration: 2.5,\r\n            scrollTrigger: {\r\n                trigger: marqueeContainer,\r\n                \/\/ trigger: '.btn-secondary',\r\n                start: \"top 50%\",\r\n                end: '+=500',\r\n                toggleActions: \"play none none reverse\",\r\n                \/\/ scrub: true,\r\n            },\r\n        });\r\n        gsap.to(cards[4].querySelector('.container'), { \/\/ Animate each card, not just cards[0]\r\n            scale: 0,\r\n            opacity: 0,\r\n            x: -100,\r\n\r\n\r\n            scrollTrigger: {\r\n                trigger: marqueeContainer,\r\n                \/\/ trigger: '.btn-secondary',\r\n                start: \"top 50%\",\r\n                end: '+=500',\r\n                toggleActions: \"play none none reverse\",\r\n                \/\/ scrub: true,\r\n            },\r\n        });\r\n        gsap.to(cards[5].querySelector('.container'), { \/\/ Animate each card, not just cards[0]\r\n            scale: 0,\r\n            opacity: 0,\r\n            x: -150,\r\n            y: -50,\r\n\r\n            scrollTrigger: {\r\n                trigger: marqueeContainer,\r\n                \/\/ trigger: '.btn-secondary',\r\n                start: \"top 50%\",\r\n                end: '+=500',\r\n                toggleActions: \"play none none reverse\",\r\n                \/\/ scrub: true,\r\n            },\r\n        });\r\n    });\r\n\/\/ });\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8e21d9f e-flex e-con-boxed e-con e-parent\" data-id=\"8e21d9f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b1b0b44 elementor-widget elementor-widget-html\" data-id=\"b1b0b44\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n    const button = document.querySelector(\".btn-secondary\");\r\n\r\n    if(button){\r\n\r\n        button.addEventListener(\"click\", function(e){\r\n\r\n            e.preventDefault();\r\n\r\n            window.open(\"https:\/\/tasinsheikh.com\", \"_blank\");\r\n\r\n        });\r\n\r\n    }\r\n\r\n});\r\n<\/script>\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","protected":false},"excerpt":{"rendered":"<p>Hero Services Our Work About Us Start a project Personal Brand Web Design Growth Digital frist Responsive Premium Support HA PPY Building Luxury Experience Responsive Design Refined for Luxury The finest digital experiences aren&#8217;t just seen. They are felt in every fluid transition and flawless layout. Start a project \/\/<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1054","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/pages\/1054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/comments?post=1054"}],"version-history":[{"count":248,"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/pages\/1054\/revisions"}],"predecessor-version":[{"id":1392,"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/pages\/1054\/revisions\/1392"}],"wp:attachment":[{"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/media?parent=1054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}