{"id":1380,"date":"2026-05-24T19:42:50","date_gmt":"2026-05-24T19:42:50","guid":{"rendered":"https:\/\/tasinsheikh.com\/ebook\/?page_id=1380"},"modified":"2026-05-25T18:23:26","modified_gmt":"2026-05-25T18:23:26","slug":"awwwards-creative","status":"publish","type":"page","link":"https:\/\/tasinsheikh.com\/portfolio\/awwwards-creative\/","title":{"rendered":"AWWWARDS CREATIVE"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1380\" class=\"elementor elementor-1380\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5ed934 e-flex e-con-boxed e-con e-parent\" data-id=\"f5ed934\" data-element_type=\"container\" data-e-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<div class=\"elementor-element elementor-element-9a3e991 e-con-full e-flex e-con e-child\" data-id=\"9a3e991\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fbe2787 elementor-widget elementor-widget-image\" data-id=\"fbe2787\" 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 fetchpriority=\"high\" decoding=\"async\" width=\"2000\" height=\"2000\" src=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Blue-and-Black-Minimalist-Brand-Logo-6.png\" class=\"attachment-full size-full wp-image-1399\" alt=\"\" srcset=\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Blue-and-Black-Minimalist-Brand-Logo-6.png 2000w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Blue-and-Black-Minimalist-Brand-Logo-6-300x300.png 300w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Blue-and-Black-Minimalist-Brand-Logo-6-1024x1024.png 1024w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Blue-and-Black-Minimalist-Brand-Logo-6-150x150.png 150w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Blue-and-Black-Minimalist-Brand-Logo-6-768x768.png 768w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Blue-and-Black-Minimalist-Brand-Logo-6-1536x1536.png 1536w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Blue-and-Black-Minimalist-Brand-Logo-6-650x650.png 650w, https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/Blue-and-Black-Minimalist-Brand-Logo-6-1300x1300.png 1300w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/>\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-711822d e-con-full elementor-hidden-mobile e-flex e-con e-child\" data-id=\"711822d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2c9e0f hfe-nav-menu__align-center hfe-nav-menu__breakpoint-none hfe-submenu-icon-arrow hfe-submenu-animation-none hfe-link-redirect-child elementor-widget elementor-widget-navigation-menu\" data-id=\"c2c9e0f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;padding_horizontal_menu_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:15,&quot;sizes&quot;:[]},&quot;padding_horizontal_menu_item_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_menu_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_menu_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:15,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;dropdown_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;dropdown_border_radius_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;dropdown_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;dropdown_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;width_dropdown_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;220&quot;,&quot;sizes&quot;:[]},&quot;width_dropdown_item_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_dropdown_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_dropdown_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:15,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"navigation-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"hfe-nav-menu hfe-layout-horizontal hfe-nav-menu-layout horizontal hfe-pointer__none\" data-layout=\"horizontal\">\n\t\t\t\t<div role=\"button\" class=\"hfe-nav-menu__toggle elementor-clickable\" tabindex=\"0\" aria-label=\"Menu Toggle\">\n\t\t\t\t\t<span class=\"screen-reader-text\">Menu<\/span>\n\t\t\t\t\t<div class=\"hfe-nav-menu-icon\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<nav class=\"hfe-nav-menu__layout-horizontal hfe-nav-menu__submenu-arrow\" data-toggle-icon=\"\" data-close-icon=\"\" data-full-width=\"\">\n\t\t\t\t\t<ul id=\"menu-1-c2c9e0f\" class=\"hfe-nav-menu\"><li id=\"menu-item-1359\" class=\"menu-item menu-item-type-custom menu-item-object-custom parent hfe-creative-menu\"><a href=\"https:\/\/tasinsheikh.com\/\" class = \"hfe-menu-item\">Home<\/a><\/li>\n<li id=\"menu-item-1360\" class=\"menu-item menu-item-type-custom menu-item-object-custom parent hfe-creative-menu\"><a href=\"https:\/\/tasinsheikh.com\/\" class = \"hfe-menu-item\">Services<\/a><\/li>\n<li id=\"menu-item-1361\" class=\"menu-item menu-item-type-custom menu-item-object-custom parent hfe-creative-menu\"><a href=\"https:\/\/tasinsheikh.com\/\" class = \"hfe-menu-item\">Pricing<\/a><\/li>\n<li id=\"menu-item-1362\" class=\"menu-item menu-item-type-custom menu-item-object-custom parent hfe-creative-menu\"><a href=\"https:\/\/tasinsheikh.com\/\" class = \"hfe-menu-item\">Contact<\/a><\/li>\n<\/ul> \n\t\t\t\t<\/nav>\n\t\t\t<\/div>\n\t\t\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-b998fe0 e-con-full e-flex e-con e-child\" data-id=\"b998fe0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2bc2403 elementor-align-right e-transform elementor-widget elementor-widget-button\" data-id=\"2bc2403\" 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;:-5,&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 class=\"ekit-svg-icon icon-arrow-right\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M30.966 16.234l-9.6-9.6c-0.312-0.312-0.819-0.312-1.131 0s-0.312 0.819 0 1.131l8.234 8.234h-26.069c-0.442 0-0.8 0.358-0.8 0.8s0.358 0.8 0.8 0.8h26.069l-8.234 8.234c-0.312 0.312-0.312 0.819 0 1.131 0.156 0.156 0.361 0.234 0.566 0.234s0.409-0.078 0.566-0.234l9.6-9.6c0.312-0.312 0.312-0.819 0-1.131z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Let's Talk<\/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-d3163bf e-con-full e-flex e-con e-parent\" data-id=\"d3163bf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-9da320c e-con-full e-flex e-con e-child\" data-id=\"9da320c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-1f2cf57 e-con-full container e-flex e-con e-child\" data-id=\"1f2cf57\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b9e9c5 elementor-widget elementor-widget-heading\" data-id=\"1b9e9c5\" 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\">Anume plus<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de53154 elementor-widget elementor-widget-heading\" data-id=\"de53154\" 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\">Headphones you can see, <br> hear, and feel.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-394f75e elementor-widget elementor-widget-html\" data-id=\"394f75e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"cards stacked\" >\r\n            <div class=\"card\">\r\n                <div class=\"popup-showcase one\">#Silence<\/div>\r\n            <\/div>\r\n            <div class=\"card\">\r\n\r\n                <div class=\"popup one\">#Elastic<\/div>\r\n            <\/div>\r\n            <div class=\"card\">\r\n                <div class=\"popup-showcase two\">#Crystal<\/div>\r\n            <\/div>\r\n            <div class=\"card\"> <\/div>\r\n            <div class=\"card\"> <\/div>\r\n            <div class=\"card\">\r\n\r\n\r\n            <\/div>\r\n            <div class=\"card\">\r\n                <div class=\"popup two\">#Headset<\/div>\r\n            <\/div>\r\n        <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-225e7a4 e-con-full spacing-huge e-flex e-con e-child\" data-id=\"225e7a4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0134a42 e-con-full showcase e-flex e-con e-child\" data-id=\"0134a42\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be0c06f badge-showcase elementor-widget elementor-widget-heading\" data-id=\"be0c06f\" 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\">Anume plus<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c7f3f30 badge-showcase elementor-widget elementor-widget-heading\" data-id=\"c7f3f30\" 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\">Headphone  you can see, <br> hear and feel.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63599be elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"63599be\" 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>So you can work, focus, relive memories, and connect in ways never before possible. The era of the special headset is here. Explore Anume plus now.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-41a17bd e-con-full button-wrapper-showcase e-flex e-con e-child\" data-id=\"41a17bd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c379a4a elementor-align-left e-transform text-showcase elementor-widget elementor-widget-button\" data-id=\"c379a4a\" 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;:-5,&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 class=\"ekit-svg-icon icon-arrow-right\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M30.966 16.234l-9.6-9.6c-0.312-0.312-0.819-0.312-1.131 0s-0.312 0.819 0 1.131l8.234 8.234h-26.069c-0.442 0-0.8 0.358-0.8 0.8s0.358 0.8 0.8 0.8h26.069l-8.234 8.234c-0.312 0.312-0.312 0.819 0 1.131 0.156 0.156 0.361 0.234 0.566 0.234s0.409-0.078 0.566-0.234l9.6-9.6c0.312-0.312 0.312-0.819 0-1.131z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Let's Talk<\/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<\/div>\n\t\t<div class=\"elementor-element elementor-element-bc068e0 e-con-full e-flex e-con e-child\" data-id=\"bc068e0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ee336b9 e-con-full e-flex e-con e-child\" data-id=\"ee336b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a498c81 e-con-full showcase e-flex e-con e-child\" data-id=\"a498c81\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12b9a26 badge-showcase elementor-widget elementor-widget-heading\" data-id=\"12b9a26\" 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\">Anume plus<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47a2039 badge-showcase elementor-widget elementor-widget-heading\" data-id=\"47a2039\" 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\">Buy Us A Coffe<\/h2>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dd3ea23 e-con-full button-wrapper-showcase e-flex e-con e-child\" data-id=\"dd3ea23\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d21b162 elementor-align-left e-transform text-showcase elementor-widget elementor-widget-button\" data-id=\"d21b162\" 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;:-5,&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 class=\"ekit-svg-icon icon-arrow-right\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M30.966 16.234l-9.6-9.6c-0.312-0.312-0.819-0.312-1.131 0s-0.312 0.819 0 1.131l8.234 8.234h-26.069c-0.442 0-0.8 0.358-0.8 0.8s0.358 0.8 0.8 0.8h26.069l-8.234 8.234c-0.312 0.312-0.312 0.819 0 1.131 0.156 0.156 0.361 0.234 0.566 0.234s0.409-0.078 0.566-0.234l9.6-9.6c0.312-0.312 0.312-0.819 0-1.131z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Travel to Tasin<\/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<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9cdb866 elementor-widget elementor-widget-html\" data-id=\"9cdb866\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n     body, html {\r\n\r\n\r\n     position: relative;\r\n     overflow-x: hidden;\r\n     margin: 0;\r\n     background-color: #111111;\r\n }\r\n\r\n\r\n\r\n .container {\r\n     position: relative;\r\n     display: grid;\r\n     justify-content: center;\r\n     place-items: center;\r\n     gap: 1.5rem;\r\n\r\n\r\n\r\n\r\n }\r\n\r\n .cards {\r\n     position: relative;\r\n\r\n     height: 250px;\r\n     display: flex;\r\n     justify-content: center;\r\n     --card-width: 200px;\r\n     --spacing: calc(var(--card-width) \/ 2);\r\n     opacity: 0;\r\n\r\n\r\n }\r\n\r\n .card {\r\n     width: var(--card-width);\r\n     height: var(--card-width);\r\n     position: absolute;\r\n     top: 0;\r\n     left: 50%;\r\n     border-radius: 1rem;\r\n     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n     display: flex;\r\n     align-items: center;\r\n     justify-content: center;\r\n\r\n\r\n\r\n\r\n     \/* CSS transforms for different states *\/\r\n     transform: translateX(-50%);\r\n     \/* Add smooth transition for transform changes *\/\r\n     transform-origin: center center;\r\n     \/* background-image: url(\"..\/img\/Espresso\\ on\\ Drip\\ Tray.png\"); *\/\r\n     background-size: cover;\r\n\r\n }\r\n\r\n .cards.spread .card {\r\n     transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n\r\n }\r\n\r\n \/* bg image *\/\r\n\r\n  .cards .card:nth-child(1) {\r\n  background-image: url(\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/magnific_ultra-detailed-shouldersh_Bm9GXreoQR-2.png\");\r\n\r\n  }\r\n  .cards .card:nth-child(2) {\r\nbackground-image: url(\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/magnific_ultra-realistic-shoulder-_IaiYWKUtvE.png\");\r\n\r\n  }\r\n  .cards .card:nth-child(3) {\r\n background-image: url(\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/magnific_futuristic-shoulder-portr_e8yZDmodqL.png\");\r\n\r\n  }\r\n  .cards .card:nth-child(4) {\r\n  background-image: url(\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/magnific_closeup-shouldershot-port_KjDtCm1kqp.png\");\r\n\r\n  }\r\n  .cards .card:nth-child(5) {\r\n     background-image: url(\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/magnific_ultra-cinematic-shoulders_hEZ00rkvqL.png\");\r\n\r\n  }\r\n  .cards .card:nth-child(6) {\r\n  background-image: url(\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/magnific_hyper-realistic-cyberpunk_KjDtQoFkqp.png\");\r\n\r\n  }\r\n  .cards .card:nth-child(7) {\r\n background-image: url(\"https:\/\/tasinsheikh.com\/portfolio\/wp-content\/uploads\/2026\/05\/magnific_ultra-cinematic-shoulders_WMlPAQncXe.png\");\r\n\r\n object-fit: cover;\r\n  }\r\n\r\n \/* Stacked state transforms *\/\r\n .cards.stacked .card:nth-child(1) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(2) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(3) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(4) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(5) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(6) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(7) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n\r\n \/* Spread state transforms *\/\r\n .cards.spread .card:nth-child(1) {\r\n     transform: translate(calc(-50% - var(--spacing) * 3.6), 40px) rotate(-12deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(2) {\r\n     transform: translate(calc(-50% - var(--spacing) * 2.4), -10px) rotate(-6deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(3) {\r\n     transform: translate(calc(-50% - var(--spacing) * 1.3), 10px) rotate(-4deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(4) {\r\n     transform: translate(calc(-50% + 0px), 10px) rotate(0deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(5) {\r\n     transform: translate(calc(-50% + var(--spacing) * 1.3), 10px) rotate(4deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(6) {\r\n     transform: translate(calc(-50% + var(--spacing) * 2.4), 20px) rotate(8deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(7) {\r\n     transform: translate(calc(-50% + var(--spacing) * 3.6), 10px) rotate(12deg);\r\n }\r\n\r\n\r\n\r\n \/* vertical stacking *\/\r\n\r\n .cards.verticalspread .card:nth-child(1) {\r\n     transform: translate(0%, 0%) scale(1);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(2) {\r\n     transform: translate(45%, 25%) scale(0.97);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(3) {\r\n     transform: translate(90%, 50%) scale(0.94);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(4) {\r\n     transform: translate(135%, 75%) scale(0.91);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(5) {\r\n     transform: translate(180%, 100%) scale(0.88);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(6) {\r\n     transform: translate(225%, 125%) scale(0.85);\r\n\r\n }\r\n\r\n \/* Popup styles *\/\r\n .popup,\r\n .popup-showcase {\r\n     position: absolute;\r\n     top: -50px;\r\n     left: 50%;\r\n     transform: translateX(-50%) scale(0);\r\n     background: #333;\r\n     color: white;\r\n     padding: 8px 12px;\r\n     border-radius: 6px;\r\n     font-size: 14px;\r\n     font-weight: bold;\r\n     font-family: \"DM Sans\", Sans-serif;\r\n     white-space: nowrap;\r\n     opacity: 0;\r\n     z-index: 10;\r\n     pointer-events: none;\r\n }\r\n\r\n .popup::after,\r\n .popup-showcase::after {\r\n     content: '';\r\n     position: absolute;\r\n     top: 100%;\r\n     left: 70%;\r\n     transform: translateX(-50%);\r\n     border: 6px solid transparent;\r\n\r\n }\r\n\r\n .popup.one {\r\n     background-color: #FE891D;\r\n }\r\n\r\n .popup.one::after {\r\n     border-top-color: #FE891D;\r\n\r\n }\r\n .popup.two {\r\n     background-color: #A104CA;\r\n }\r\n\r\n .popup.two::after {\r\n     border-top-color: #A104CA;\r\n\r\n }\r\n .popup-showcase.one {\r\n     background-color: #FD871A;\r\n }\r\n\r\n  .popup-showcase.one::after {\r\n     border-top-color: #FD871A;\r\n\r\n }\r\n .popup-showcase.two {\r\n     background-color: #A31A9C;\r\n }\r\n\r\n .popup-showcase.two::after {\r\n     border-top-color: #A31A9C;\r\n\r\n }\r\n\r\n \/* Popup visible state *\/\r\n .popup.show {\r\n     transform: translateX(-50%) scale(1);\r\n     opacity: 1;\r\n }\r\n\r\n .text-landing {\r\n     text-align: center;\r\n }\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n .text-landing {\r\n     position: relative;\r\n     z-index: -1;\r\n }\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n .card {\r\n     will-change: transform;\r\n }\r\n\r\n \/* Tablet - Hide cards 4, 5, 6, 7 - only show first 3 cards *\/\r\n @media (max-width: 768px) {\r\n\r\n     .card:nth-child(1),\r\n     .card:nth-child(2),\r\n     .card:nth-child(6),\r\n     .card:nth-child(7) {\r\n         display: none;\r\n     }\r\n\r\n     .container {\r\n         height: 80vh;\r\n         align-content: center;\r\n         gap: 2.5rem;\r\n     }\r\n\r\n     .cards {\r\n         position: relative;\r\n         width: auto;\r\n         height: 200px;\r\n         display: flex;\r\n         justify-content: center;\r\n         --card-width: 150px;\r\n         --spacing: calc(var(--card-width) \/ 2);\r\n         opacity: 0;\r\n     }\r\n\r\n\r\n\r\n\r\n\r\n\r\n }\r\n\r\n\r\n }\r\n<\/style>\r\n\r\n\r\n\r\n\r\n\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 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\r\n <script>\r\n        \/\/ Initialize a new Lenis instance for smooth scrolling\r\n        \/\/ Initialize Lenis\r\n        const lenis = new Lenis({\r\n            autoRaf: true,\r\n        });\r\n\r\n        \/\/ Listen for the scroll event and log the event data\r\n        lenis.on('scroll', (e) => {\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\r\n\/\/ GSAP Timeline for professional header entrance animation\r\n\/\/ GSAP Timeline for professional header entrance animation\r\nfunction initHeaderAnimation() {\r\n   \/\/ Create master timeline\r\n   const tl = gsap.timeline();\r\n\r\n   \/\/ Set initial states - fade in from below with blur\r\n   gsap.set(\".logo-container img\", {\r\n       opacity: 0,\r\n       y: 50,\r\n       filter: \"blur(10px)\"\r\n   });\r\n\r\n   gsap.set(\".links-wrapper .hfe-nav-menu li\", {\r\n       opacity: 0,\r\n       y: 50,\r\n       filter: \"blur(10px)\"\r\n   });\r\n\r\n   gsap.set(\".hfe-nav-menu__toggle\", {\r\n       opacity: 0,\r\n       y: 50,\r\n       filter: \"blur(10px)\"\r\n   });\r\n\r\n   \/\/ Animate logo entrance\r\n   tl.to(\".logo-container img\", {\r\n       duration: 1,\r\n       opacity: 1,\r\n       y: 0,\r\n       filter: \"blur(0px)\",\r\n       ease: \"power2.out\"\r\n   })\r\n\r\n   \/\/ Animate navigation items with reverse stagger (last item first)\r\n   .to(\".links-wrapper .hfe-nav-menu li\", {\r\n       duration: 0.8,\r\n       opacity: 1,\r\n       y: 0,\r\n       filter: \"blur(0px)\",\r\n       stagger: {\r\n           each: 0.15,\r\n           from: \"end\"\r\n       },\r\n       ease: \"power2.out\"\r\n   }, \"-=0.6\")\r\n\r\n   \/\/ Animate mobile toggle\r\n   .to(\".hfe-nav-menu__toggle\", {\r\n       duration: 0.7,\r\n       opacity: 1,\r\n       y: 0,\r\n       filter: \"blur(0px)\",\r\n       ease: \"power2.out\"\r\n   }, \"-=0.4\");\r\n\r\n   return tl;\r\n}\r\n\r\n\/\/ Function to replay animation\r\nfunction replayAnimation() {\r\n   initHeaderAnimation();\r\n}\r\n\r\n\/\/ Initialize when page loads\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n   initHeaderAnimation();\r\n});\r\n        \/\/ function lockScroll(duration = 4000) {\r\n        \/\/     const scrollY = window.scrollY;\r\n\r\n        \/\/     document.body.style.position = 'fixed';\r\n        \/\/     document.body.style.top = `-${scrollY}px`;\r\n        \/\/     document.body.style.left = '0';\r\n        \/\/     document.body.style.right = '0';\r\n        \/\/     document.body.style.width = '100%';\r\n        \/\/     document.body.style.overflow = 'hidden';\r\n\r\n        \/\/     setTimeout(() => {\r\n        \/\/         document.body.style.position = '';\r\n        \/\/         document.body.style.top = '';\r\n        \/\/         document.body.style.left = '';\r\n        \/\/         document.body.style.right = '';\r\n        \/\/         document.body.style.width = '';\r\n        \/\/         document.body.style.overflow = '';\r\n\r\n        \/\/         window.scrollTo(0, scrollY);\r\n        \/\/     }, duration);\r\n        \/\/ }\r\n\r\n        \/\/ Always scroll to top on reload\r\n        \/\/ if ('scrollRestoration' in history) {\r\n        \/\/     history.scrollRestoration = 'manual'; \/\/ Disable auto scroll restore\r\n        \/\/ }\r\n\r\n        \/\/ window.addEventListener('beforeunload', () => {\r\n        \/\/     window.scrollTo(0, 0); \/\/ Ensures it's at the top before leaving\r\n        \/\/ });\r\n\r\n        window.addEventListener('load', () => {\r\n            window.scrollTo(0, 0); \/\/ Forces top scroll on load\r\n\r\n\r\n        });\r\n\r\n\r\n        const cards = document.querySelector('.cards');\r\n        const toggleBtn = document.getElementById('spreadToggle');\r\n        const popups = document.querySelectorAll('.popup');\r\n        const cardsElement = document.querySelector('.card');\r\n        const computedStyles = getComputedStyle(cardsElement);\r\n        const cardWidth = parseInt(computedStyles.getPropertyValue('--card-width'));\r\n        const spacing = cardWidth \/ 2;\r\n\r\n        gsap.set(popups, {\r\n            scale: 0,\r\n            opacity: 0,\r\n            transformOrigin: \"center bottom\"\r\n        });\r\n\r\n\r\n\r\n        \/\/ GSAP Timeline for spreading animation\r\n        function createSpreadTimeline() {\r\n            const tl = gsap.timeline();\r\n            const spreadData = [\r\n                { x: -spacing * 3.6, y: 40, rotation: -12 },\r\n                { x: -spacing * 2.4, y: -10, rotation: -6 },\r\n                { x: -spacing * 1.3, y: 10, rotation: -4 },\r\n                { x: 0, y: 10, rotation: 0 },\r\n                { x: spacing * 1.3, y: 10, rotation: 4 },\r\n                { x: spacing * 2.4, y: 20, rotation: 8 },\r\n                { x: spacing * 3.6, y: 10, rotation: 12 }\r\n            ];\r\n\r\n            tl.set('.cards', { opacity: 1 })\r\n                .from('.cards', { y: '50vh', rotate: -15, duration: 1.5 })\r\n                .call(() => {\r\n                    spreadData.forEach((data, index) => {\r\n                        gsap.to(`.card:nth-child(${index + 1})`, {\r\n                            x: data.x,\r\n                            y: data.y,\r\n                            rotation: data.rotation,\r\n                            duration: 1.2,\r\n                            ease: \"cubic-bezier(0.4, 0, 0.2, 1)\"\r\n                        });\r\n                    });\r\n                })\r\n                .to(popups, {\r\n                    scale: 1,\r\n                    opacity: 1,\r\n                    duration: 0.3,\r\n                    ease: \"back.out(1.7)\"\r\n                }, 2.2);\r\n\r\n            return tl;\r\n        }\r\n        \/\/ Initialize GSAP transforms for popups\r\n\r\n\r\n\r\n        \/\/ Auto-start animation after page loads\r\n        window.addEventListener('load', () => {\r\n            \/\/ Add a small delay to ensure everything is fully loaded\r\n            setTimeout(() => {\r\n                createSpreadTimeline().play();\r\n            }, 500); \/\/ 500ms delay after page load\r\n        });\r\n\r\n        document.fonts.ready.then(() => {\r\n            \/\/ Create the main timeline\r\n            const mainTimeline = gsap.timeline({delay:1});\r\n\r\n            \/\/ Set initial states\r\n            gsap.set(\".text-landing\", { opacity: 1 });\r\n            gsap.set(\".heading-split\", { opacity: 1 });\r\n            gsap.set(\".text-showcase\", { opacity: 1 });\r\n            gsap.set(\".heading-split-showcase\", { opacity: 1 });\r\n\r\n            \/\/ Create SplitText for both elements\r\n            const splitTextLanding = SplitText.create(\".text-landing\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                autoSplit: true\r\n            });\r\n\r\n            const splitHeading = SplitText.create(\".heading-split\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                autoSplit: true\r\n            });\r\n            const splitTextShowcase = SplitText.create(\".text-showcase\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                \/\/ autoSplit: true\r\n            });\r\n\r\n            const splitHeadingShowcase = SplitText.create(\".heading-split-showcase\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                \/\/ autoSplit: true\r\n            });\r\n            const splitBadgeShowcase = SplitText.create(\".badge-showcase\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                autoSplit: true\r\n            });\r\n\r\n            \/\/ Add animations to timeline\r\n            mainTimeline\r\n                .from(splitHeading.words, {\r\n                    duration: 2,\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                }, 0) \/\/ Start immediately\r\n                .from(splitTextLanding.words, {\r\n                    duration: 1.5,\r\n                    filter: 'blur(5px)',\r\n                    yPercent: 100,\r\n                    opacity: 0,\r\n                    stagger: 0.05,\r\n                    ease: \"expo.out\"\r\n                }, 2.5) \/\/ Start at 3 seconds\r\n                .from('.button-landing-cta', {\r\n                    autoAlpha: 0,\r\n                    y: 40,\r\n                    stagger: 0.2,\r\n                    duration: 1\r\n                }, 3); \/\/ Start at 3.5 seconds\r\n\r\n            \/\/ Showcase section timeline (ScrollTrigger activated)\r\n            const showcaseTimeline = gsap.timeline({\r\n                scrollTrigger: {\r\n                    trigger: \".showcase\", \/\/ or use a wrapper element like \".showcase-section\"\r\n                    start: \"clamp(top center)\",\r\n                     end: \"bottom top\",\r\n                    \/\/end: \"bottom 65%\",\r\n                    toggleActions: \"play none none none\",\r\n                    \/\/ scrub: true,\r\n                    \/\/ markers: true \/\/ uncomment for debugging\r\n                }\r\n            });\r\n\r\n            showcaseTimeline\r\n                .from(splitBadgeShowcase.words, {\r\n                    duration: 1.2,\r\n                    filter: 'blur(5px)',\r\n                    yPercent: 100,\r\n                    opacity: 0,\r\n                    ease: \"expo.out\"\r\n\r\n                })\r\n                .from(splitHeadingShowcase.words, {\r\n                    duration: 1.5,\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') \/\/ Start immediately when triggered\r\n                .from(splitTextShowcase.words, {\r\n                    duration: 1.5,\r\n                    filter: 'blur(5px)',\r\n                    yPercent: 100,\r\n                    opacity: 0,\r\n                    stagger: 0.05,\r\n                    ease: \"expo.out\"\r\n                }, 1.5) \/\/ Start 1 seconds after heading\r\n                .from('.button-showcase-cta', {\r\n                    autoAlpha: 0,\r\n                    y:40,\r\n                    stagger: 0.2,\r\n                    duration: 1\r\n                }, \"-=1.3\");\r\n            \/\/ Return both timelines for external control\r\n            return {\r\n                landing: mainTimeline,\r\n                showcase: showcaseTimeline\r\n            };\r\n        });\r\n\r\n\r\n\r\n\r\n        \/\/ Select the two elements\r\n\r\n        const showcase = document.querySelector('.showcase');\r\n\r\n        \/\/ Get the bottom position of the .showcase section\r\n        const showcaseBottom = showcase.offsetTop + showcase.offsetHeight;\r\n\r\n        \/\/ Get the top position of the .cards element\r\n        const cardsTop = cards.getBoundingClientRect().top + window.scrollY;\r\n        const cardsBottom = cards.offsetTop + cards.offsetHeight;\r\n\r\n        \/\/ Calculate the distance\r\n        let distance = showcaseBottom - cardsTop + 100;\r\n        let distanceMobile = showcaseBottom - cardsTop + 280;\r\n\r\n\r\n        \/\/ console.log('Distance between .cards and bottom of .showcase:', distance, 'px');\r\n\r\n        \/\/ 1. Wait a bit for the initial spread to happen\r\n        \/\/ Replace the existing scroll trigger section in your code with this:\r\n\r\n        \/\/ 1. Wait a bit for the initial spread to happen\r\n        setTimeout(() => {\r\n            const cards = document.querySelectorAll('.cards .card');\r\n            \/\/ Calculate spread positions from CSS custom properties\r\n\r\n\r\n            \/\/ const spreadData = [\r\n            \/\/     { x: -spacing * 3.6, y: 40, rotation: -12 },\r\n            \/\/     { x: -spacing * 2.4, y: -10, rotation: -6 },\r\n            \/\/     { x: -spacing * 1.3, y: 10, rotation: -4 },\r\n            \/\/     { x: 0, y: 10, rotation: 0 },\r\n            \/\/     { x: spacing * 1.3, y: 10, rotation: 4 },\r\n            \/\/     { x: spacing * 2.4, y: 20, rotation: 8 },\r\n            \/\/     { x: spacing * 3.6, y: 10, rotation: 12 }\r\n            \/\/ ];\r\n\r\n            \/\/ Remove all CSS classes to avoid conflicts\r\n            \/\/ document.querySelector('.cards').classList.remove('spread', 'stacked');\r\n\r\n\r\n            \/\/ Use fromTo instead of set + to for smoother animation\r\n            \/\/ cards.forEach((card, i) => {\r\n            \/\/     \/\/ Set initial spread position immediately without transition\r\n            \/\/     gsap.set(card, {\r\n            \/\/         x: spreadData[i].x,\r\n            \/\/         y: spreadData[i].y,\r\n            \/\/         rotation: spreadData[i].rotation,\r\n            \/\/         xPercent: -50,\r\n            \/\/         \/\/ Enable hardware acceleration\r\n            \/\/     });\r\n            \/\/ });\r\n            \/\/ remove the popup\r\n            gsap.to(popups, {\r\n                scrollTrigger: {\r\n                    trigger: \".cards\",\r\n                    start: \"bottom center\",\r\n                    \/\/ endTrigger: \".text-showcase\",\r\n                    \/\/ end: \"bottom top\",\r\n                    toggleActions: \"play none none reverse\",\r\n                },\r\n                scale: 0,\r\n                \/\/ opacity: 1,\r\n                duration: 0.3,\r\n                ease: \"back.in(1.7)\"\r\n            });\r\n            \/\/ STEP 1: Animate cards from spread \u2192 stacked (with scrub)\r\n            cards.forEach((card, i) => {\r\n\r\n                gsap.to(card, {\r\n                    scrollTrigger: {\r\n                        trigger: \".cards\",\r\n                        start: \"top 20%\",\r\n                        endTrigger: \".text-showcase\",\r\n                        end: \"bottom bottom\",\r\n                        scrub: true,\r\n\r\n\r\n                    },\r\n                    x: 0,\r\n                    y: 0,\r\n                    rotation: 0,\r\n                    ease: \"none\",\r\n                    xPercent: -50\r\n                });\r\n            });\r\n\r\n            \/\/ STEP 2: Animate the whole wrapper down (this completes first)\r\n            gsap.to('.cards', {\r\n                scrollTrigger: {\r\n                    trigger: \".cards\",\r\n                    start: \"top 20%\",\r\n                    endTrigger: \".text-showcase\",\r\n                    end: \"bottom center\", \/\/ This completes at \"bottom top\"\r\n                    scrub: true,\r\n                    \/\/ markers: true,\r\n                    id: '2',\r\n\r\n\r\n                },\r\n                y: distance,\r\n                ease: \"none\",\r\n            });\r\n            \/\/ popup showcase\r\n            gsap.to('.popup-showcase', {\r\n                scrollTrigger: {\r\n                    trigger: \".text-showcase\",\r\n                    start: \"bottom 55%\",\r\n                    endTrigger: \".text-showcase\",\r\n                    end: \"bottom center\",\r\n                    toggleActions: \"play none none reverse\",\r\n                    \/\/ markers:true,\r\n\r\n                },\r\n                scale: 1,\r\n                opacity: 1,\r\n                duration: 0.3,\r\n                rotate: -5,\r\n                delay: .5,\r\n                repeatDelay: .5,\r\n                ease: \"back.out(1.7)\"\r\n            });\r\n            \/\/ STEP 3: Vertical spread trigger - starts AFTER the y:distance is complete\r\n            const verticalSpreadData = [\r\n                { xPercent: -50, yPercent: 0, scale: 1.2 },   \/\/ Card 1 - starting from -50\r\n                { xPercent: 30, yPercent: 18, scale: 1.19 },  \/\/ Card 2 - maintained 80 unit increment\r\n                { xPercent: 110, yPercent: 36, scale: 1.18 }, \/\/ Card 3 - maintained 80 unit increment\r\n                { xPercent: 190, yPercent: 54, scale: 1.17 }, \/\/ Card 4 - maintained 80 unit increment\r\n                { xPercent: 270, yPercent: 72, scale: 1.16 }, \/\/ Card 5 - maintained 80 unit increment\r\n                { xPercent: 350, yPercent: 90, scale: 1.15 }, \/\/ Card 6 - maintained 80 unit increment\r\n                { xPercent: 430, yPercent: 108, scale: 1.14 }, \/\/ Card 7 - maintained 80 unit increment\r\n            ];\r\n\r\n\r\n\r\n\r\n            \/\/ Animate each card's vertical spread with scrub\r\n            cards.forEach((card, i) => {\r\n                gsap.to(card, {\r\n                    scrollTrigger: {\r\n                        trigger: \".text-showcase\",\r\n                        start: \"bottom 60%\",\r\n                        endTrigger: \".text-showcase\",\r\n                        end: \"bottom center\", \/\/ This completes at \"bottom top\"\r\n                        id: 'll',\r\n                        toggleActions: \"play none none reverse\",\r\n                        \/\/ markers: true\r\n                    },\r\n                    xPercent: verticalSpreadData[i].xPercent,\r\n                    yPercent: verticalSpreadData[i].yPercent,\r\n                    scale: verticalSpreadData[i].scale,\r\n                    \/\/ duration:2,\r\n                    ease: \"none\" \/\/ Use \"none\" for scrub animations\r\n                });\r\n            });\r\n\r\n            \/\/ Reset back to stacked positions (after y:distance movement)\r\n            gsap.matchMedia().add(\"(max-width: 768px)\", () => {\r\n\r\n\r\n                ScrollTrigger.getAll().forEach(trigger => {\r\n                    if (trigger.vars.id === '2' || trigger.vars.id === 'll' ||\r\n                        trigger.trigger === document.querySelector('.cards') ||\r\n                        trigger.trigger === document.querySelector('.text-showcase')) {\r\n                        trigger.kill();\r\n                    }\r\n                });\r\n                \/\/ Hide cards 1, 2, 6, 7 (indices 0, 1, 5, 6)\r\n                const cardsToHide = [0, 1, 5, 6];\r\n                cardsToHide.forEach(index => {\r\n                    if (cards[index]) {\r\n                        gsap.set(cards[index], { display: \"none\" });\r\n                    }\r\n                });\r\n\r\n                \/\/ Show only cards 3, 4, 5 (indices 2, 3, 4) and apply vertical spread data\r\n                const visibleCards = [cards[2], cards[3], cards[4]]; \/\/ 3rd, 4th, 5th cards\r\n                const tabletSpreadData = [\r\n                    { xPercent: -50, yPercent: 0, scale: 1.16 }, \/\/ 3rd card (index 2) - repositioned as first\r\n                    { xPercent: 30, yPercent: 18, scale: 1.14 }, \/\/ 4th card (index 3) - repositioned as second\r\n                    { xPercent: 110, yPercent: 36, scale: 1.12 }  \/\/ 5th card (index 4) - repositioned as third\r\n                ];\r\n\r\n                \/\/ Remove popup animations for tablet\r\n                gsap.to(popups, {\r\n                    scrollTrigger: {\r\n                        trigger: \".cards\",\r\n                        start: \"bottom center\",\r\n                        toggleActions: \"play none none reverse\",\r\n                    },\r\n                    scale: 0,\r\n                    duration: 0.3,\r\n                    ease: \"back.in(1.7)\"\r\n                });\r\n\r\n                \/\/ Animate visible cards from spread \u2192 stacked\r\n                visibleCards.forEach((card, i) => {\r\n                    if (card) {\r\n                        gsap.to(card, {\r\n                            scrollTrigger: {\r\n                                trigger: \".cards\",\r\n                                start: \"top 25%\",\r\n                                endTrigger: \".text-showcase\",\r\n                                end: \"bottom bottom\",\r\n                                scrub: true,\r\n                            },\r\n                            x: 0,\r\n                            y: 0,\r\n                            rotation: 0,\r\n                            ease: \"none\",\r\n                            xPercent: -50\r\n                        });\r\n                    }\r\n                });\r\n\r\n                \/\/ Animate the whole wrapper down\r\n                gsap.to('.cards', {\r\n                    scrollTrigger: {\r\n                        trigger: \".cards\",\r\n                        start: \"top 25%\",\r\n                        endTrigger: \".text-showcase\",\r\n                        end: \"bottom center\",\r\n                        scrub: true,\r\n                    },\r\n                    y: distanceMobile,\r\n                    ease: \"none\",\r\n                });\r\n\r\n                \/\/ Popup showcase animation\r\n                gsap.to('.popup-showcase', {\r\n                    scrollTrigger: {\r\n                        trigger: \".text-showcase\",\r\n                        start: \"bottom 55%\",\r\n                        endTrigger: \".text-showcase\",\r\n                        end: \"bottom center\",\r\n                        toggleActions: \"play none none reverse\",\r\n                    },\r\n                    scale: 1,\r\n                    opacity: 1,\r\n                    duration: 0.3,\r\n                    delay: .5,\r\n                    repeatDelay: .5,\r\n                    ease: \"back.out(1.7)\"\r\n                });\r\n\r\n                \/\/ Apply vertical spread to visible cards with tablet-specific data\r\n                visibleCards.forEach((card, i) => {\r\n                    if (card) {\r\n                        gsap.to(card, {\r\n                            scrollTrigger: {\r\n                                trigger: \".text-showcase\",\r\n                                start: \"bottom 60%\",\r\n                                endTrigger: \".text-showcase\",\r\n                                end: \"bottom center\",\r\n                                toggleActions: \"play none none reverse\",\r\n                            },\r\n                            xPercent: tabletSpreadData[i].xPercent,\r\n                            yPercent: tabletSpreadData[i].yPercent,\r\n                            scale: tabletSpreadData[i].scale,\r\n                            ease: \"none\"\r\n                        });\r\n                    }\r\n                });\r\n\r\n            });\r\n        }, 4000);\r\n\r\n        \/\/ GSAP MatchMedia for tablet and below\r\n        \/\/ GSAP matchMedia for tablet and below\r\n\r\n\r\n    <\/script>\t\t\t\t<\/div>\n\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>Menu Home Services Pricing Contact Let&#8217;s Talk Anume plus Headphones you can see, hear, and feel. #Silence #Elastic #Crystal #Headset Anume plus Headphone you can see, hear and feel. So you can work, focus, relive memories, and connect in ways never before possible. The era of the special headset is here. Explore Anume plus now. [&hellip;]<\/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-1380","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/pages\/1380","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=1380"}],"version-history":[{"count":130,"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/pages\/1380\/revisions"}],"predecessor-version":[{"id":1549,"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/pages\/1380\/revisions\/1549"}],"wp:attachment":[{"href":"https:\/\/tasinsheikh.com\/portfolio\/wp-json\/wp\/v2\/media?parent=1380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}