{"id":9367,"date":"2026-02-22T12:58:05","date_gmt":"2026-02-22T06:58:05","guid":{"rendered":"https:\/\/avemedia.net\/?page_id=9367"},"modified":"2026-08-19T09:17:35","modified_gmt":"2026-08-19T03:17:35","slug":"testing-page-01","status":"publish","type":"page","link":"https:\/\/avemedia.net\/?page_id=9367","title":{"rendered":"Testing page 01"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n AVE Media | Custom Order Builder<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com \"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js \"><\/script>\r\n <!-- Stripe.js -->\r\n <script src=\"https:\/\/js.stripe.com\/v3\/ \"><\/script>\r\n <!-- EmailJS for sending emails without backend -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@3\/dist\/email.min.js \"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css \" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300 ;400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { \r\n font-family: 'Inter', sans-serif; \r\n color: #EAEFEF;\r\n }\r\n \r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1f2937; }\r\n ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #6b7280; }\r\n\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }\r\n \r\n .glass-panel {\r\n background: rgba(31, 41, 55, 0.7);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .checkbox-wrapper input:checked + div {\r\n background-color: #2563eb;\r\n border-color: #2563eb;\r\n }\r\n .checkbox-wrapper input:checked + div svg {\r\n display: block;\r\n }\r\n \r\n .loader {\r\n border: 3px solid #f3f3f3;\r\n border-radius: 50%;\r\n border-top: 3px solid #3498db;\r\n width: 20px;\r\n height: 20px;\r\n -webkit-animation: spin 1s linear infinite;\r\n animation: spin 1s linear infinite;\r\n }\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .text-custom { color: #d7f0fc; }\r\n \r\n .addon-price {\r\n min-width: 80px;\r\n text-align: right;\r\n }\r\n\r\n \/* Next Steps custom color *\/\r\n .next-steps-text {\r\n color: #F2F2F2;\r\n }\r\n\r\n \/* Stripe Elements styling *\/\r\n .StripeElement {\r\n background-color: #1f2937;\r\n border: 1px solid #374151;\r\n border-radius: 0.5rem;\r\n padding: 0.75rem;\r\n color: white;\r\n }\r\n .StripeElement--focus {\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n }\r\n .StripeElement--invalid {\r\n border-color: #ef4444;\r\n }\r\n <\/style>\r\n<base target=\"_blank\">\r\n<base target=\"_blank\">\r\n<\/head>\r\n<body class=\"bg-gray-900 min-h-screen flex flex-col\">\r\n\r\n <!-- Navbar -->\r\n <nav class=\"border-b border-gray-800 bg-gray-900\/90 sticky top-0 z-40 backdrop-blur-md\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between h-16 items-center\">\r\n <div class=\"flex items-center h-full py-2\">\r\n <a href=\"https:\/\/avemedia.net\/ \" target=\"_blank\" class=\"text-2xl font-bold text-[#EAEFEF] tracking-tight hover:text-blue-400 transition-colors cursor-pointer\">\r\n AVE Media\r\n <\/a>\r\n <\/div>\r\n <div class=\"text-sm text-gray-400\">Custom Order Portal<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Main Content -->\r\n <main class=\"flex-grow container mx-auto px-4 py-12 max-w-7xl\">\r\n \r\n <!-- Header -->\r\n <div class=\"text-center mb-12 animate-fade-in\">\r\n <h1 class=\"text-4xl md:text-5xl font-bold mb-4 text-white\">\r\n Build Your Package\r\n <\/h1>\r\n <p class=\"text-gray-400 max-w-2xl mx-auto\">\r\n Select the services you need. Adjust quantities, add extras, and get an instant quote with delivery estimates.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Carts Grid with Operators - SIDE BY SIDE LAYOUT -->\r\n <div class=\"flex flex-col lg:flex-row items-stretch justify-center gap-4 mb-16\">\r\n\r\n <!-- CART 1: Long Form -->\r\n <div id=\"cart-1\" class=\"glass-panel rounded-2xl p-6 flex flex-col animate-fade-in flex-1 max-w-md\" style=\"animation-delay: 0.1s;\">\r\n <div class=\"flex justify-between items-start mb-4\">\r\n <div class=\"bg-blue-500\/20 text-blue-400 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide\">Video<\/div>\r\n <div class=\"text-right\">\r\n <div class=\"text-2xl font-bold text-[#EAEFEF]\">$75<span class=\"text-sm text-gray-500 font-normal\">\/video<\/span><\/div>\r\n <div class=\"text-xs text-gray-500\">2-8 Minutes<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <h3 class=\"text-xl font-bold mb-2 text-[#EAEFEF]\">High-Retention Editing<\/h3>\r\n <p class=\"text-gray-400 text-sm mb-6 flex-grow\">\r\n Pro long video editing, motion graphics, smooth cuts, transitions, b-roll, music, SFX, etc.\r\n <\/p>\r\n\r\n <div class=\"bg-gray-800 rounded-xl p-4 mb-6\">\r\n <label class=\"block text-xs text-gray-400 mb-2 uppercase font-bold\">Quantity<\/label>\r\n <div class=\"flex items-center justify-between\">\r\n <button onclick=\"updateQty(1, -1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-minus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <span id=\"qty-display-1\" class=\"text-2xl font-bold w-12 text-center text-[#EAEFEF]\">0<\/span>\r\n <button onclick=\"updateQty(1, 1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-plus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"mt-2 text-xs text-center text-blue-400\" id=\"time-est-1\">Est. Delivery: 0 Days<\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-3 mb-6\">\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-1-2\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">High CTR Thumbnail<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+1 Day per video<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$15<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-1-3\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Extra 5min Footage<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$40<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-1-4\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Extra 10min Footage<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+1 Day per video<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$80<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-1-5\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">2 Short Form Videos<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+2 Days per video<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$60<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"mt-auto pt-4 border-t border-gray-700 flex justify-between items-center\">\r\n <span class=\"text-gray-400 text-sm\">Subtotal<\/span>\r\n <span id=\"subtotal-1\" class=\"text-2xl font-bold text-blue-400\">$0<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden lg:flex items-center justify-center\">\r\n <div class=\"text-4xl font-bold text-gray-600\">+<\/div>\r\n <\/div>\r\n\r\n <!-- CART 2: Short Form -->\r\n <div id=\"cart-2\" class=\"glass-panel rounded-2xl p-6 flex flex-col animate-fade-in flex-1 max-w-md\" style=\"animation-delay: 0.2s;\">\r\n <div class=\"flex justify-between items-start mb-4\">\r\n <div class=\"bg-purple-500\/20 text-purple-400 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide\">Shorts<\/div>\r\n <div class=\"text-right\">\r\n <div class=\"text-2xl font-bold text-[#EAEFEF]\">$30<span class=\"text-sm text-gray-500 font-normal\">\/video<\/span><\/div>\r\n <div class=\"text-xs text-gray-500\">1 Minute<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <h3 class=\"text-xl font-bold mb-2 text-[#EAEFEF]\">Short-Form Editing<\/h3>\r\n <p class=\"text-gray-400 text-sm mb-6 flex-grow\">\r\n Pro short video editing, motion graphics, smooth cuts, transitions, captions, b-roll, music, SFX, etc.\r\n <\/p>\r\n\r\n <div class=\"bg-gray-800 rounded-xl p-4 mb-6\">\r\n <label class=\"block text-xs text-gray-400 mb-2 uppercase font-bold\">Quantity<\/label>\r\n <div class=\"flex items-center justify-between\">\r\n <button onclick=\"updateQty(2, -1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-minus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <span id=\"qty-display-2\" class=\"text-2xl font-bold w-12 text-center text-[#EAEFEF]\">0<\/span>\r\n <button onclick=\"updateQty(2, 1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-plus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"mt-2 text-xs text-center text-purple-400\" id=\"time-est-2\">Est. Delivery: 0 Days<\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-3 mb-6\">\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-2-1\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Meta Ad style<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+1 Day per video<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$40<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-2-2\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">1 Month 3-Pages Management<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$300<\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-2-4\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">6 Social Media Designs<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+4 Days per video<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$60<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-2-3\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">12 Social Media Designs<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+6 Days delivery<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$110<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"mt-auto pt-4 border-t border-gray-700 flex justify-between items-center\">\r\n <span class=\"text-gray-400 text-sm\">Subtotal<\/span>\r\n <span id=\"subtotal-2\" class=\"text-2xl font-bold text-purple-400\">$0<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden lg:flex items-center justify-center\">\r\n <div class=\"text-4xl font-bold text-gray-600\">+<\/div>\r\n <\/div>\r\n\r\n <!-- CART 3: Podcast -->\r\n <div id=\"cart-3\" class=\"glass-panel rounded-2xl p-6 flex flex-col animate-fade-in flex-1 max-w-md\" style=\"animation-delay: 0.3s;\">\r\n <div class=\"flex justify-between items-start mb-4\">\r\n <div class=\"bg-green-500\/20 text-green-400 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide\">Podcast<\/div>\r\n <div class=\"text-right\">\r\n <div class=\"text-2xl font-bold text-[#EAEFEF]\">$95<span class=\"text-sm text-gray-500 font-normal\">\/ep<\/span><\/div>\r\n <div class=\"text-xs text-gray-500\">30-60 Minutes<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <h3 class=\"text-xl font-bold mb-2 text-[#EAEFEF]\">Podcast Production<\/h3>\r\n <p class=\"text-gray-400 text-sm mb-6 flex-grow\">\r\n Podcast episode editing, multi-angle, 1 min hook video with motion graphic highlights, smooth cuts, transitions, music, etc.\r\n <\/p>\r\n\r\n <div class=\"bg-gray-800 rounded-xl p-4 mb-6\">\r\n <label class=\"block text-xs text-gray-400 mb-2 uppercase font-bold\">Quantity<\/label>\r\n <div class=\"flex items-center justify-between\">\r\n <button onclick=\"updateQty(3, -1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-minus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <span id=\"qty-display-3\" class=\"text-2xl font-bold w-12 text-center text-[#EAEFEF]\">0<\/span>\r\n <button onclick=\"updateQty(3, 1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-plus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"mt-2 text-xs text-center text-green-400\" id=\"time-est-3\">Est. Delivery: 0 Days<\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-3 mb-6\">\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-3-1\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Separate Audio Editing<\/span>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$30<span class=\"text-xs block text-gray-600 font-normal\">per episode<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-3-2\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Extra 30min<\/span>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$30<span class=\"text-xs block text-gray-600 font-normal\">per episode<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-3-3\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">2 Short Form Videos<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+2 Days per episode<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$60<span class=\"text-xs block text-gray-600 font-normal\">per episode<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-3-4\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">High CTR Thumbnail<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+1 Day per episode<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$15<span class=\"text-xs block text-gray-600 font-normal\">per episode<\/span><\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"mt-auto pt-4 border-t border-gray-700 flex justify-between items-center\">\r\n <span class=\"text-gray-400 text-sm\">Subtotal<\/span>\r\n <span id=\"subtotal-3\" class=\"text-2xl font-bold text-green-400\">$0<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden lg:flex items-center justify-center\">\r\n <div class=\"text-4xl font-bold text-blue-500\">=<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Sticky Footer Summary -->\r\n <div class=\"fixed bottom-0 left-0 right-0 bg-gray-900\/95 border-t border-gray-800 backdrop-blur-lg p-4 z-30 shadow-2xl\">\r\n <div class=\"max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <div class=\"flex flex-col md:flex-row gap-6 items-center\">\r\n <div class=\"text-center md:text-left\">\r\n <p class=\"text-xs text-gray-500 uppercase font-bold\">Total Estimate<\/p>\r\n <h2 id=\"grand-total\" class=\"text-3xl font-bold text-[#EAEFEF]\">$0<\/h2>\r\n <\/div>\r\n <div class=\"hidden md:block h-8 w-px bg-gray-700\"><\/div>\r\n <div class=\"text-center md:text-left\">\r\n <p class=\"text-xs text-gray-500 uppercase font-bold\">Est. Delivery<\/p>\r\n <h2 id=\"grand-time\" class=\"text-xl font-semibold text-blue-400\">0 Days<\/h2>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"openCheckout()\" class=\"w-full md:w-auto bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-xl transition-all transform hover:scale-105 shadow-lg shadow-blue-600\/20 flex items-center justify-center gap-2\">\r\n Proceed to Checkout <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"h-24\"><\/div>\r\n\r\n <\/main>\r\n\r\n <!-- Checkout Modal -->\r\n <div id=\"checkout-modal\" class=\"fixed inset-0 z-50 hidden\">\r\n <div class=\"absolute inset-0 bg-black\/80 backdrop-blur-sm transition-opacity\" onclick=\"closeCheckout()\"><\/div>\r\n \r\n <div class=\"absolute inset-0 flex items-center justify-center p-4 pointer-events-none\">\r\n <div class=\"bg-gray-900 border border-gray-700 w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl shadow-2xl pointer-events-auto transform transition-all scale-95 opacity-0\" id=\"checkout-content\">\r\n \r\n <div class=\"p-6 border-b border-gray-800 flex justify-between items-center sticky top-0 bg-gray-900 z-10\">\r\n <h2 class=\"text-2xl font-bold text-[#EAEFEF]\">Order Summary & Payment<\/h2>\r\n <button onclick=\"closeCheckout()\" class=\"text-gray-400 hover:text-white transition-colors\">\r\n <i class=\"fas fa-times text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"p-6 space-y-8\">\r\n \r\n <!-- PROFESSIONAL INVOICE DESIGN -->\r\n <div id=\"order-summary-card\" class=\"bg-white rounded-sm shadow-lg relative overflow-hidden\">\r\n <div class=\"absolute inset-0 opacity-[0.03]\" style=\"background-image: radial-gradient(#000000 1px, transparent 1px); background-size: 20px 20px;\"><\/div>\r\n \r\n <div class=\"relative p-8 border-b-2 border-gray-200 bg-white\">\r\n <div class=\"flex justify-between items-start\">\r\n <div class=\"flex flex-col\">\r\n <div class=\"flex items-center gap-3 mb-1\">\r\n <span class=\"text-3xl font-bold text-gray-800 tracking-tight\">AVE Media<\/span>\r\n <\/div>\r\n <p class=\"text-xs text-gray-500 tracking-widest uppercase mt-1\">Video Production Services<\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <h1 class=\"text-2xl font-light text-gray-800 tracking-tight\">ORDER SUMMARY<\/h1>\r\n <p class=\"text-sm text-gray-500 mt-1 font-mono\" id=\"invoice-id\">#INV-0000<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex justify-between mt-8 text-sm\">\r\n <div>\r\n <p class=\"text-gray-500 text-xs uppercase tracking-wider mb-1\">Invoice Date<\/p>\r\n <p class=\"font-semibold text-gray-800\" id=\"invoice-date\">--<\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <p class=\"text-gray-500 text-xs uppercase tracking-wider mb-1\">Date<\/p>\r\n <p class=\"font-semibold text-gray-800\">On Receipt<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"relative p-8 bg-white\">\r\n <table class=\"w-full text-left border-collapse\">\r\n <thead>\r\n <tr class=\"text-xs text-gray-500 uppercase tracking-wider border-b border-gray-300\">\r\n <th class=\"pb-3 font-semibold text-gray-700\">Description<\/th>\r\n <th class=\"pb-3 font-semibold text-gray-700 text-center w-24\">Qty<\/th>\r\n <th class=\"pb-3 font-semibold text-gray-700 text-right\">Amount<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"checkout-recap\" class=\"text-sm\">\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div class=\"relative bg-gray-100 p-8 border-t border-gray-300\">\r\n <div class=\"flex justify-between items-end\">\r\n <div class=\"text-xs text-gray-600\">\r\n <p class=\"mb-1\"><span class=\"font-semibold text-gray-800\">Payment Terms:<\/span> Net 0<\/p>\r\n <p><span class=\"font-semibold text-gray-800\">Delivery:<\/span> <span id=\"checkout-time-display\">--<\/span><\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <p class=\"text-xs text-gray-500 uppercase tracking-wider mb-1\">Total Amount<\/p>\r\n <p id=\"checkout-total\" class=\"text-4xl font-bold text-gray-800 tracking-tight\">$0.00<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"relative bg-gray-800 text-white p-4 text-center text-xs\">\r\n <p>Thank you for your order. | avemedia.net<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Download Button -->\r\n <div class=\"flex justify-center -mt-2\">\r\n <button onclick=\"downloadSummary()\" id=\"download-btn\" class=\"bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg text-sm font-semibold flex items-center gap-2 transition-all shadow-lg border border-gray-600\">\r\n <i class=\"fas fa-download\"><\/i> Download Invoice Image\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- ORDER NOW BUTTON (CHANGED FROM PURCHASE NOW) -->\r\n <div class=\"border-t border-gray-700 pt-6\">\r\n <h3 class=\"text-lg font-bold text-[#EAEFEF] mb-4 flex items-center gap-2\">\r\n <i class=\"fas fa-credit-card text-blue-500\"><\/i> Secure Payment\r\n <\/h3>\r\n \r\n <div id=\"payment-section\">\r\n <div class=\"bg-gray-800 rounded-xl p-6 border border-gray-700 mb-4\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <span class=\"text-gray-400\">Total to Pay:<\/span>\r\n <span id=\"payment-total\" class=\"text-2xl font-bold text-white\">$0.00<\/span>\r\n <\/div>\r\n \r\n <button onclick=\"initiatePayment()\" id=\"purchase-btn\" class=\"w-full bg-green-600 hover:bg-green-500 text-white font-bold py-4 px-6 rounded-xl transition-all transform hover:scale-[1.02] shadow-lg shadow-green-600\/20 flex items-center justify-center gap-2 text-lg\">\r\n <i class=\"fas fa-lock\"><\/i> Order Now\r\n <\/button>\r\n \r\n <p class=\"text-xs text-gray-500 text-center mt-3\">\r\n <i class=\"fas fa-shield-alt mr-1\"><\/i> Secured by Stripe. Your payment information is encrypted.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Payment Form (Hidden initially) -->\r\n <div id=\"payment-form-container\" class=\"hidden bg-gray-800 rounded-xl p-6 border border-gray-700\">\r\n <form id=\"payment-form\" class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm text-gray-400 mb-2\">Email Address (for invoice)<\/label>\r\n <input type=\"email\" id=\"email-input\" required class=\"w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-blue-500 focus:outline-none\" placeholder=\"your@email.com\">\r\n <\/div>\r\n \r\n <div>\r\n <label class=\"block text-sm text-gray-400 mb-2\">Card Information<\/label>\r\n <div id=\"card-element\" class=\"StripeElement\">\r\n <!-- Stripe Card Element will be inserted here -->\r\n <\/div>\r\n <div id=\"card-errors\" class=\"text-red-400 text-sm mt-2\" role=\"alert\"><\/div>\r\n <\/div>\r\n\r\n <button type=\"submit\" id=\"submit-payment-btn\" class=\"w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-6 rounded-xl transition-all flex items-center justify-center gap-2\">\r\n <span id=\"button-text\">Pay Now<\/span>\r\n <div id=\"spinner\" class=\"loader hidden\"><\/div>\r\n <\/button>\r\n \r\n <button type=\"button\" onclick=\"cancelPayment()\" class=\"w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-xl transition-all text-sm\">\r\n Cancel\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- Success Message (Hidden initially) -->\r\n <div id=\"payment-success\" class=\"hidden bg-green-900\/30 border border-green-500\/30 rounded-xl p-6 text-center\">\r\n <i class=\"fas fa-check-circle text-5xl text-green-400 mb-4\"><\/i>\r\n <h4 class=\"text-xl font-bold text-white mb-2\">Payment Successful!<\/h4>\r\n <p class=\"text-gray-400 mb-4\">Invoices have been sent to your email and chyanick06@gmail.com<\/p>\r\n <p class=\"text-sm text-gray-500\">Order ID: <span id=\"success-order-id\" class=\"text-gray-300\"><\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Bank Transfer Option (Alternative) -->\r\n <div class=\"border-t border-gray-700 pt-6 opacity-50 hover:opacity-100 transition-opacity\">\r\n <h3 class=\"text-sm font-bold text-gray-400 mb-4 flex items-center gap-2 cursor-pointer\" onclick=\"toggleBankTransfer()\">\r\n <i class=\"fas fa-university\"><\/i> Pay via Bank Transfer (Alternative)\r\n <i class=\"fas fa-chevron-down ml-auto\" id=\"bank-arrow\"><\/i>\r\n <\/h3>\r\n \r\n <div id=\"bank-transfer-section\" class=\"hidden space-y-4\">\r\n <div class=\"grid gap-4\">\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">Account Name<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-name\">Anick Chowdhury<\/span>\r\n <button onclick=\"copyToClipboard('copy-name')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\" title=\"Copy\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">Account Number<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-acc\">8311995114<\/span>\r\n <button onclick=\"copyToClipboard('copy-acc')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">Account Type<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-type\">Checking<\/span>\r\n <button onclick=\"copyToClipboard('copy-type')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">Routing Number (ACH\/Wire)<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-route\">026073150<\/span>\r\n <button onclick=\"copyToClipboard('copy-route')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">SWIFT\/BIC<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-swift\">CMFGUS33<\/span>\r\n <button onclick=\"copyToClipboard('copy-swift')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Next Steps -->\r\n <div class=\"bg-gray-800 rounded-xl p-5 border border-gray-700\">\r\n <h4 class=\"font-bold mb-2 next-steps-text\">Next Steps<\/h4>\r\n <p class=\"text-gray-400 text-sm mb-3\">\r\n Once payment is completed, please send the following to:\r\n <\/p>\r\n <div class=\"flex items-center gap-2 mb-4 bg-gray-900 p-3 rounded-lg border border-gray-700\">\r\n <i class=\"fas fa-envelope text-white\"><\/i>\r\n <span class=\"text-[#EAEFEF] font-semibold\">anick@avemedia.net<\/span>\r\n <\/div>\r\n <ul class=\"text-sm text-gray-400 space-y-2 list-disc list-inside\">\r\n <li><strong>Downloaded Invoice Receipt Image<\/strong> (from above)<\/li>\r\n <li><strong>Payment Screenshot<\/strong><\/li>\r\n <li>Project Details & Brief<\/li>\r\n <li>Reference Videos (Links)<\/li>\r\n <li><strong>Raw Assets<\/strong> (Footage, Logos, etc.)<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n \r\n <div class=\"p-6 border-t border-gray-800 bg-gray-900 sticky bottom-0\">\r\n <button onclick=\"closeCheckout()\" class=\"w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl transition-colors\">\r\n Close & Return\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Initialize EmailJS\r\n (function() {\r\n emailjs.init(\"YOUR_EMAILJS_PUBLIC_KEY\"); \/\/ Replace with your EmailJS public key\r\n })();\r\n\r\n \/\/ Stripe initialization\r\n let stripe;\r\n let cardElement;\r\n let elements;\r\n\r\n const services = {\r\n 1: { \r\n name: \"High-Retention Video\", \r\n basePrice: 75,\r\n timePerUnit: 3, \r\n qty: 0,\r\n addons: {\r\n 'addon-1-2': { name: \"High CTR Thumbnail\", price: 15, type: 'per_unit', addsTime: 1 },\r\n 'addon-1-3': { name: \"Extra 5min\", price: 40, type: 'per_unit' },\r\n 'addon-1-4': { name: \"Extra 10min\", price: 80, type: 'per_unit', addsTime: 1 },\r\n 'addon-1-5': { name: \"2 Short Form Videos\", price: 60, type: 'per_unit', addsTime: 2 }\r\n }\r\n },\r\n 2: { \r\n name: \"Short-Form Video\", \r\n basePrice: 30, \r\n timePerUnit: 2, \r\n qty: 0,\r\n addons: {\r\n 'addon-2-1': { name: \"Meta Ad style\", price: 40, type: 'per_unit', addsTime: 1 },\r\n 'addon-2-2': { name: \"1 Month 3-Pages Management\", price: 300, type: 'flat' },\r\n 'addon-2-4': { name: \"6 Social Media Designs\", price: 60, type: 'per_unit', addsTime: 4 },\r\n 'addon-2-3': { name: \"12 Social Media Designs\", price: 110, type: 'flat', addsTime: 6 }\r\n }\r\n },\r\n 3: { \r\n name: \"Podcast Editing\", \r\n basePrice: 95,\r\n timePerUnit: 3, \r\n qty: 0,\r\n addons: {\r\n 'addon-3-1': { name: \"Separate Audio Editing\", price: 30, type: 'per_unit' },\r\n 'addon-3-2': { name: \"Extra 30min\", price: 30, type: 'per_unit' },\r\n 'addon-3-3': { name: \"2 Short Form Videos\", price: 60, type: 'per_unit', addsTime: 2 },\r\n 'addon-3-4': { name: \"High CTR Thumbnail\", price: 15, type: 'per_unit', addsTime: 1 }\r\n }\r\n }\r\n };\r\n\r\n let currentOrderDetails = null;\r\n\r\n function updateQty(cartId, change) {\r\n const service = services[cartId];\r\n let newQty = service.qty + change;\r\n if (newQty < 0) newQty = 0;\r\n if (newQty > 99) newQty = 99;\r\n service.qty = newQty;\r\n document.getElementById(`qty-display-${cartId}`).innerText = newQty;\r\n calculateTotals();\r\n }\r\n\r\n function calculateTotals() {\r\n let grandTotal = 0;\r\n let grandTime = 0;\r\n currentOrderDetails = [];\r\n\r\n for (const [id, service] of Object.entries(services)) {\r\n let subtotal = 0;\r\n let serviceTime = 0;\r\n let itemDetails = {\r\n name: service.name,\r\n qty: service.qty,\r\n addons: [],\r\n itemTotal: 0\r\n };\r\n \r\n if (service.qty > 0) {\r\n subtotal += service.basePrice * service.qty;\r\n serviceTime += (service.qty * service.timePerUnit);\r\n }\r\n\r\n for (const [addonId, addon] of Object.entries(service.addons)) {\r\n const isChecked = document.getElementById(addonId).checked;\r\n if (isChecked) {\r\n if (addon.type === 'per_unit') {\r\n subtotal += addon.price * service.qty;\r\n } else {\r\n subtotal += addon.price;\r\n }\r\n\r\n if (addon.addsTime) {\r\n if (addon.type === 'per_unit') {\r\n serviceTime += (addon.addsTime * service.qty);\r\n } else {\r\n serviceTime += addon.addsTime;\r\n }\r\n }\r\n \r\n itemDetails.addons.push(addon.name);\r\n }\r\n }\r\n\r\n itemDetails.itemTotal = subtotal;\r\n if (service.qty > 0) {\r\n currentOrderDetails.push(itemDetails);\r\n }\r\n\r\n document.getElementById(`subtotal-${id}`).innerText = `$${subtotal}`;\r\n const cardTimeDisplay = document.getElementById(`time-est-${id}`);\r\n if(service.qty === 0) {\r\n cardTimeDisplay.innerText = \"Est. Delivery: 0 Days\";\r\n } else {\r\n cardTimeDisplay.innerText = `Est. Delivery: ${serviceTime} Day${serviceTime !== 1 ? 's' : ''}`;\r\n }\r\n\r\n grandTotal += subtotal;\r\n grandTime += serviceTime;\r\n }\r\n\r\n document.getElementById('grand-total').innerText = `$${grandTotal}`;\r\n document.getElementById('grand-time').innerText = grandTime > 0 ? `${grandTime} Days` : \"0 Days\";\r\n window.currentTotal = grandTotal;\r\n window.currentTime = grandTime;\r\n }\r\n\r\n function openCheckout() {\r\n const modal = document.getElementById('checkout-modal');\r\n const content = document.getElementById('checkout-content');\r\n const recap = document.getElementById('checkout-recap');\r\n \r\n const now = new Date();\r\n document.getElementById('invoice-date').innerText = now.toLocaleDateString();\r\n document.getElementById('invoice-id').innerText = `#INV-${Math.floor(Math.random() * 10000)}`;\r\n \r\n let recapHTML = '';\r\n let isEmpty = true;\r\n\r\n for (const [id, service] of Object.entries(services)) {\r\n if (service.qty > 0) {\r\n isEmpty = false;\r\n let addonsList = [];\r\n let itemTotal = service.basePrice * service.qty;\r\n\r\n for (const [addonId, addon] of Object.entries(service.addons)) {\r\n if (document.getElementById(addonId).checked) {\r\n let addonCost = addon.type === 'per_unit' ? addon.price * service.qty : addon.price;\r\n itemTotal += addonCost;\r\n addonsList.push(addon.name);\r\n }\r\n }\r\n\r\n recapHTML += `\r\n <tr class=\"border-b border-gray-200 last:border-0\">\r\n <td class=\"py-3 align-top\">\r\n <p class=\"font-semibold text-gray-800\">${service.name}<\/p>\r\n ${addonsList.length > 0 ? `<p class=\"text-xs text-gray-500 mt-1\">Includes: ${addonsList.join(', ')}<\/p>` : ''}\r\n <\/td>\r\n <td class=\"py-3 text-center text-gray-600 font-mono\">${service.qty}<\/td>\r\n <td class=\"py-3 text-right font-mono font-semibold text-gray-800\">$${itemTotal.toFixed(2)}<\/td>\r\n <\/tr>\r\n `;\r\n }\r\n }\r\n\r\n if (isEmpty) {\r\n recapHTML = '<tr><td colspan=\"3\" class=\"py-8 text-center text-gray-500 italic\">No items selected.<\/td><\/tr>';\r\n }\r\n\r\n recap.innerHTML = recapHTML;\r\n document.getElementById('checkout-total').innerText = `$${(window.currentTotal || 0).toFixed(2)}`;\r\n document.getElementById('payment-total').innerText = `$${(window.currentTotal || 0).toFixed(2)}`;\r\n document.getElementById('checkout-time-display').innerText = `${window.currentTime || 0} Days`;\r\n\r\n modal.classList.remove('hidden');\r\n setTimeout(() => {\r\n content.classList.remove('scale-95', 'opacity-0');\r\n content.classList.add('scale-100', 'opacity-100');\r\n }, 10);\r\n }\r\n\r\n function closeCheckout() {\r\n const modal = document.getElementById('checkout-modal');\r\n const content = document.getElementById('checkout-content');\r\n \r\n content.classList.remove('scale-100', 'opacity-100');\r\n content.classList.add('scale-95', 'opacity-0');\r\n \r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n resetPaymentForm();\r\n }, 200);\r\n }\r\n\r\n function resetPaymentForm() {\r\n document.getElementById('payment-section').classList.remove('hidden');\r\n document.getElementById('payment-form-container').classList.add('hidden');\r\n document.getElementById('payment-success').classList.add('hidden');\r\n document.getElementById('email-input').value = '';\r\n if (cardElement) {\r\n cardElement.clear();\r\n }\r\n }\r\n\r\n function initiatePayment() {\r\n if (!window.currentTotal || window.currentTotal === 0) {\r\n alert('Please select at least one service before proceeding to payment.');\r\n return;\r\n }\r\n\r\n \/\/ Show payment form\r\n document.getElementById('payment-section').classList.add('hidden');\r\n document.getElementById('payment-form-container').classList.remove('hidden');\r\n\r\n \/\/ Initialize Stripe if not already done\r\n if (!stripe) {\r\n stripe = Stripe('pk_test_YOUR_STRIPE_PUBLIC_KEY'); \/\/ Replace with your Stripe publishable key\r\n elements = stripe.elements();\r\n \r\n cardElement = elements.create('card', {\r\n style: {\r\n base: {\r\n fontSize: '16px',\r\n color: '#ffffff',\r\n '::placeholder': {\r\n color: '#9ca3af',\r\n },\r\n },\r\n },\r\n });\r\n \r\n cardElement.mount('#card-element');\r\n \r\n cardElement.on('change', function(event) {\r\n const displayError = document.getElementById('card-errors');\r\n if (event.error) {\r\n displayError.textContent = event.error.message;\r\n } else {\r\n displayError.textContent = '';\r\n }\r\n });\r\n }\r\n }\r\n\r\n function cancelPayment() {\r\n document.getElementById('payment-section').classList.remove('hidden');\r\n document.getElementById('payment-form-container').classList.add('hidden');\r\n }\r\n\r\n \/\/ Handle payment submission\r\n document.getElementById('payment-form').addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n \r\n const submitBtn = document.getElementById('submit-payment-btn');\r\n const spinner = document.getElementById('spinner');\r\n const buttonText = document.getElementById('button-text');\r\n const email = document.getElementById('email-input').value;\r\n \r\n if (!email) {\r\n alert('Please enter your email address for the invoice.');\r\n return;\r\n }\r\n\r\n submitBtn.disabled = true;\r\n spinner.classList.remove('hidden');\r\n buttonText.textContent = 'Processing...';\r\n\r\n try {\r\n \/\/ Create payment intent (in production, this should be done on your server)\r\n \/\/ For demo purposes, we'll simulate a successful payment\r\n const { paymentIntent, error } = await stripe.confirmCardPayment(\r\n 'client_secret_from_server', \/\/ This should come from your server\r\n {\r\n payment_method: {\r\n card: cardElement,\r\n billing_details: {\r\n email: email,\r\n },\r\n },\r\n }\r\n );\r\n\r\n if (error) {\r\n throw error;\r\n }\r\n\r\n \/\/ Payment successful\r\n await handlePaymentSuccess(email, paymentIntent.id);\r\n \r\n } catch (error) {\r\n console.error('Payment error:', error);\r\n document.getElementById('card-errors').textContent = error.message;\r\n submitBtn.disabled = false;\r\n spinner.classList.add('hidden');\r\n buttonText.textContent = 'Pay Now';\r\n }\r\n });\r\n\r\n async function handlePaymentSuccess(customerEmail, paymentId) {\r\n const orderId = `ORD-${Date.now()}`;\r\n document.getElementById('success-order-id').textContent = orderId;\r\n \r\n \/\/ Generate invoice image\r\n const canvas = await html2canvas(document.getElementById('order-summary-card'), {\r\n scale: 2,\r\n backgroundColor: '#ffffff'\r\n });\r\n \r\n const invoiceImage = canvas.toDataURL('image\/png');\r\n\r\n \/\/ Send emails to both customer and admin\r\n try {\r\n \/\/ Send to customer\r\n await emailjs.send(\"YOUR_SERVICE_ID\", \"YOUR_TEMPLATE_ID\", {\r\n to_email: customerEmail,\r\n to_name: customerEmail.split('@')[0],\r\n order_id: orderId,\r\n amount: `$${window.currentTotal.toFixed(2)}`,\r\n invoice_image: invoiceImage,\r\n payment_id: paymentId\r\n });\r\n\r\n \/\/ Send to admin (chyanick06@gmail.com)\r\n await emailjs.send(\"YOUR_SERVICE_ID\", \"YOUR_TEMPLATE_ID\", {\r\n to_email: \"chyanick06@gmail.com\",\r\n to_name: \"AVE Media Admin\",\r\n order_id: orderId,\r\n amount: `$${window.currentTotal.toFixed(2)}`,\r\n invoice_image: invoiceImage,\r\n customer_email: customerEmail,\r\n payment_id: paymentId,\r\n order_details: JSON.stringify(currentOrderDetails, null, 2)\r\n });\r\n\r\n \/\/ Show success message\r\n document.getElementById('payment-form-container').classList.add('hidden');\r\n document.getElementById('payment-success').classList.remove('hidden');\r\n \r\n } catch (error) {\r\n console.error('Email sending failed:', error);\r\n alert('Payment successful but invoice email failed to send. Please contact support.');\r\n }\r\n }\r\n\r\n function toggleBankTransfer() {\r\n const section = document.getElementById('bank-transfer-section');\r\n const arrow = document.getElementById('bank-arrow');\r\n \r\n if (section.classList.contains('hidden')) {\r\n section.classList.remove('hidden');\r\n arrow.classList.add('rotate-180');\r\n } else {\r\n section.classList.add('hidden');\r\n arrow.classList.remove('rotate-180');\r\n }\r\n }\r\n\r\n function downloadSummary() {\r\n const btn = document.getElementById('download-btn');\r\n const originalContent = btn.innerHTML;\r\n \r\n btn.innerHTML = '<div class=\"loader\"><\/div> Generating...';\r\n btn.disabled = true;\r\n\r\n const element = document.getElementById('order-summary-card');\r\n\r\n html2canvas(element, {\r\n scale: 2,\r\n backgroundColor: '#ffffff',\r\n logging: false,\r\n useCORS: true\r\n }).then(canvas => {\r\n const link = document.createElement('a');\r\n link.download = `AVE-Media-Invoice-${Date.now()}.png`;\r\n link.href = canvas.toDataURL('image\/png');\r\n link.click();\r\n\r\n btn.innerHTML = '<i class=\"fas fa-check\"><\/i> Downloaded!';\r\n btn.classList.remove('bg-gray-800');\r\n btn.classList.add('bg-green-600');\r\n \r\n setTimeout(() => {\r\n btn.innerHTML = originalContent;\r\n btn.disabled = false;\r\n btn.classList.add('bg-gray-800');\r\n btn.classList.remove('bg-green-600');\r\n }, 3000);\r\n }).catch(err => {\r\n console.error(err);\r\n btn.innerHTML = 'Error. Try again.';\r\n btn.disabled = false;\r\n });\r\n }\r\n\r\n function copyToClipboard(elementId) {\r\n const text = document.getElementById(elementId).innerText;\r\n navigator.clipboard.writeText(text).then(() => {\r\n const btn = document.querySelector(`button[onclick=\"copyToClipboard('${elementId}')\"]`);\r\n const originalIcon = btn.innerHTML;\r\n \r\n btn.innerHTML = '<i class=\"fas fa-check text-green-400\"><\/i>';\r\n btn.classList.add('border-green-500');\r\n \r\n setTimeout(() => {\r\n btn.innerHTML = originalIcon;\r\n btn.classList.remove('border-green-500');\r\n }, 2000);\r\n });\r\n }\r\n\r\n \/\/ Initialize\r\n calculateTotals();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6df18ea elementor-widget elementor-widget-html\" data-id=\"6df18ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>AVE Media | Founder & Lead Editor<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;600;700&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background: #ffffff;\n color: #ffffff;\n overflow-x: hidden;\n }\n \n .font-display {\n font-family: 'Space Grotesk', sans-serif;\n }\n\n \/* Tight height container *\/\n .story-section {\n min-height: auto;\n padding: 2rem 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* White gradient text *\/\n .gradient-text {\n background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 50%, #ffffff 100%);\n background-size: 200% 200%;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: gradient-shift 6s ease infinite;\n }\n\n @keyframes gradient-shift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n\n \/* All text white *\/\n .text-content {\n color: #ffffff;\n }\n\n \/* Subtle underline effect - white *\/\n .hover-line {\n position: relative;\n display: inline-block;\n color: #ffffff;\n font-weight: 600;\n }\n .hover-line::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 2px;\n bottom: -2px;\n left: 0;\n background: #ffffff;\n transform: scaleX(0);\n transform-origin: bottom right;\n transition: transform 0.3s ease-out;\n }\n .hover-line:hover::after {\n transform: scaleX(1);\n transform-origin: bottom left;\n }\n\n \/* Clean image styling *\/\n .image-container {\n position: relative;\n display: inline-block;\n }\n \n .image-container::before {\n content: '';\n position: absolute;\n -inset: 3px;\n border: 2px solid #ffffff;\n border-radius: 12px;\n z-index: -1;\n opacity: 0.3;\n }\n\n \/* White tags with transparency *\/\n .tag {\n transition: all 0.3s ease;\n color: #ffffff;\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.3);\n }\n .tag:hover {\n background: rgba(255, 255, 255, 0.2);\n color: #ffffff;\n transform: translateY(-2px);\n }\n <\/style>\n<\/head>\n<body class=\"antialiased min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900\">\n\n <!-- Main Story Section - Compact -->\n <section class=\"story-section w-full px-6\">\n <div class=\"max-w-5xl mx-auto w-full\">\n \n <!-- Grid Layout - Tight spacing -->\n <div class=\"grid grid-cols-1 md:grid-cols-12 gap-6 items-center\">\n \n <!-- Image Column -->\n <div class=\"md:col-span-4 flex justify-center\">\n <div class=\"image-container w-48 h-48 md:w-56 md:h-56\">\n <img decoding=\"async\" src=\"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/02\/Untitled-design-1.png\" \n alt=\"AVE Media Founder\" \n class=\"w-full h-full object-cover rounded-xl shadow-lg border-2 border-white\/20\">\n <\/div>\n <\/div>\n\n <!-- Content Column -->\n <div class=\"md:col-span-8 space-y-4 text-center md:text-left\">\n \n <!-- Header -->\n <div class=\"space-y-1\">\n <p class=\"text-white\/60 text-xs font-mono tracking-widest uppercase font-semibold\">AVE Media<\/p>\n <h1 class=\"font-display text-3xl md:text-4xl font-bold leading-tight text-white\">\n Founder & <span class=\"gradient-text\">Lead Editor<\/span>\n <\/h1>\n <\/div>\n\n <!-- Story Content - 120 words -->\n <div class=\"space-y-3 text-content\">\n <p class=\"leading-relaxed text-sm md:text-base text-white\/90\">\n I lead a creative team of <span class=\"font-semibold text-white\">7-9 editors and designers<\/span> at AVE Media, transforming long-form content into compelling short-form stories that drive engagement across social platforms.\n <\/p>\n <p class=\"leading-relaxed text-sm text-white\/70\">\n From managing complex client projects to designing thumbnails and social assets, I bridge the gap between raw footage and viral content. Every frame is intentional. Every cut drives results.\n <\/p>\n <\/div>\n\n <!-- Tags -->\n <div class=\"flex flex-wrap gap-2 justify-center md:justify-start pt-2\">\n <span class=\"tag px-3 py-1.5 border rounded-full text-xs font-medium cursor-default\">\n Team Leadership\n <\/span>\n <span class=\"tag px-3 py-1.5 border rounded-full text-xs font-medium cursor-default\">\n Video Editing\n <\/span>\n <span class=\"tag px-3 py-1.5 border rounded-full text-xs font-medium cursor-default\">\n Social Media\n <\/span>\n <span class=\"tag px-3 py-1.5 border rounded-full text-xs font-medium cursor-default\">\n Visual Design\n <\/span>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n<\/body>\n<\/html>\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-0d008fd e-flex e-con-boxed e-con e-parent\" data-id=\"0d008fd\" 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-245e2bb elementor-widget elementor-widget-html\" data-id=\"245e2bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Pok\u00e9mon Discovery Call<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@600&display=swap');\n\n body {\n background-color: transparent;\n margin: 0;\n overflow: hidden;\n height: 100vh;\n width: 100vw;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: 'Fredoka', sans-serif;\n }\n\n \/* The Container *\/\n .pokeball-container {\n position: relative;\n width: 200px;\n height: 200px;\n cursor: pointer;\n animation: float 3s ease-in-out infinite;\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n .pokeball-container:hover {\n transform: scale(1.05);\n }\n\n \/* Pokeball CSS Construction *\/\n .ball {\n width: 100%;\n height: 100%;\n background-color: #1e3a8a; \/* Navy Blue *\/\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n box-shadow: \n inset -10px -10px 30px rgba(0,0,0,0.3),\n 0 10px 20px rgba(0,0,0,0.2);\n border: 4px solid rgba(255,255,255,0.1);\n }\n\n \/* The White Band *\/\n .ball::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n height: 20px;\n background-color: white;\n transform: translateY(-50%);\n z-index: 2;\n }\n\n \/* The Center Button *\/\n .center-button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 60px;\n height: 60px;\n background-color: white;\n border-radius: 50%;\n border: 8px solid #1e3a8a; \/* Navy Blue *\/\n z-index: 3;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 0 0 10px rgba(0,0,0,0.2);\n }\n\n \/* The Inner Button (Blinking Eye) *\/\n .eye {\n width: 30px;\n height: 30px;\n background-color: #1e3a8a; \/* Navy Blue *\/\n border-radius: 50%;\n animation: blink 4s infinite;\n position: relative;\n }\n\n \/* Shine on eye *\/\n .eye::after {\n content: '';\n position: absolute;\n top: 5px;\n right: 5px;\n width: 8px;\n height: 8px;\n background-color: white;\n border-radius: 50%;\n opacity: 0.8;\n }\n\n \/* Speech Bubble *\/\n .speech-bubble {\n position: absolute;\n top: -100px;\n left: 50%;\n transform: translateX(-50%) scale(0);\n background-color: white;\n color: #1e3a8a; \/* Navy Blue Text *\/\n padding: 15px 25px;\n border-radius: 20px;\n font-size: 1.2rem;\n font-weight: 600;\n white-space: nowrap;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n opacity: 0;\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n pointer-events: none;\n z-index: 10;\n }\n\n \/* Bubble Tail *\/\n .speech-bubble::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 10px 10px 0;\n border-style: solid;\n border-color: white transparent transparent transparent;\n }\n\n \/* Active States *\/\n .pokeball-container.active .speech-bubble {\n transform: translateX(-50%) scale(1);\n opacity: 1;\n top: -120px;\n }\n\n .pokeball-container.active {\n animation: shake 0.5s ease-in-out, float 3s ease-in-out infinite 0.5s;\n }\n\n \/* Animations *\/\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n }\n\n @keyframes blink {\n 0%, 96%, 100% { transform: scaleY(1); }\n 98% { transform: scaleY(0.1); }\n }\n\n @keyframes shake {\n 0% { transform: rotate(0deg); }\n 25% { transform: rotate(-10deg); }\n 50% { transform: rotate(10deg); }\n 75% { transform: rotate(-10deg); }\n 100% { transform: rotate(0deg); }\n }\n\n \/* Click Hint *\/\n .hint {\n position: absolute;\n bottom: -60px;\n width: 100%;\n text-align: center;\n color: #1e3a8a;\n font-size: 0.9rem;\n opacity: 0.6;\n pointer-events: none;\n font-family: sans-serif;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"pokeball-container\" id=\"pokeball\" onclick=\"toggleActive()\">\n <div class=\"ball\">\n <div class=\"center-button\">\n <div class=\"eye\"><\/div>\n <\/div>\n <\/div>\n <div class=\"speech-bubble\">\n When do we do a Discovery Call?\n <\/div>\n <div class=\"hint\">Click me!<\/div>\n <\/div>\n\n <script>\n function toggleActive() {\n const ball = document.getElementById('pokeball');\n ball.classList.toggle('active');\n \n \/\/ Optional: Play a sound effect here if desired\n \/\/ const audio = new Audio('pop.mp3'); \n \/\/ audio.play().catch(e => console.log(\"Audio play failed\"));\n }\n\n \/\/ Auto-trigger once on load for demo purposes, then stop\n setTimeout(() => {\n const ball = document.getElementById('pokeball');\n if(!ball.classList.contains('active')) {\n ball.classList.add('active');\n setTimeout(() => {\n ball.classList.remove('active');\n }, 3000);\n }\n }, 1000);\n <\/script>\n<\/body>\n<\/html>\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>AVE Media | Custom Order Builder AVE Media Custom Order Portal Build Your Package Select the services you need. Adjust quantities, add extras, and get an instant quote with delivery estimates. Video $75\/video 2-8 Minutes High-Retention Editing Pro long video editing, motion graphics, smooth cuts, transitions, b-roll, music, SFX, etc. Quantity 0 Est. Delivery: 0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"disabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9367","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Testing page 01<\/title>\n<meta name=\"description\" content=\"Testing page 01\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avemedia.net\/?page_id=9367\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Testing page 01\" \/>\n<meta property=\"og:description\" content=\"Testing page 01\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avemedia.net\/?page_id=9367\" \/>\n<meta property=\"og:site_name\" content=\"Ave Media\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-19T03:17:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/02\/Untitled-design-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/?page_id=9367\",\"url\":\"https:\\\/\\\/avemedia.net\\\/?page_id=9367\",\"name\":\"Testing page 01\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/?page_id=9367#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/?page_id=9367#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/avemedia.net\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Untitled-design-1.png\",\"datePublished\":\"2026-02-22T06:58:05+00:00\",\"dateModified\":\"2026-08-19T03:17:35+00:00\",\"description\":\"Testing page 01\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/?page_id=9367#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/avemedia.net\\\/?page_id=9367\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/?page_id=9367#primaryimage\",\"url\":\"https:\\\/\\\/avemedia.net\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Untitled-design-1.png\",\"contentUrl\":\"https:\\\/\\\/avemedia.net\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Untitled-design-1.png\",\"width\":300,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/?page_id=9367#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/avemedia.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Testing page 01\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/#website\",\"url\":\"https:\\\/\\\/avemedia.net\\\/\",\"name\":\"Ave Media\",\"description\":\"Professional Video Editing Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/#organization\"},\"alternateName\":\"avemedia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/avemedia.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/#organization\",\"name\":\"Ave Media\",\"alternateName\":\"avemedia\",\"url\":\"https:\\\/\\\/avemedia.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/avemedia.net\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cropped-fgg.webp\",\"contentUrl\":\"https:\\\/\\\/avemedia.net\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cropped-fgg.webp\",\"width\":512,\"height\":512,\"caption\":\"Ave Media\"},\"image\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Testing page 01","description":"Testing page 01","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avemedia.net\/?page_id=9367","og_locale":"en_US","og_type":"article","og_title":"Testing page 01","og_description":"Testing page 01","og_url":"https:\/\/avemedia.net\/?page_id=9367","og_site_name":"Ave Media","article_modified_time":"2026-08-19T03:17:35+00:00","og_image":[{"url":"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/02\/Untitled-design-1.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avemedia.net\/?page_id=9367","url":"https:\/\/avemedia.net\/?page_id=9367","name":"Testing page 01","isPartOf":{"@id":"https:\/\/avemedia.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/avemedia.net\/?page_id=9367#primaryimage"},"image":{"@id":"https:\/\/avemedia.net\/?page_id=9367#primaryimage"},"thumbnailUrl":"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/02\/Untitled-design-1.png","datePublished":"2026-02-22T06:58:05+00:00","dateModified":"2026-08-19T03:17:35+00:00","description":"Testing page 01","breadcrumb":{"@id":"https:\/\/avemedia.net\/?page_id=9367#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avemedia.net\/?page_id=9367"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avemedia.net\/?page_id=9367#primaryimage","url":"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/02\/Untitled-design-1.png","contentUrl":"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/02\/Untitled-design-1.png","width":300,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/avemedia.net\/?page_id=9367#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avemedia.net\/"},{"@type":"ListItem","position":2,"name":"Testing page 01"}]},{"@type":"WebSite","@id":"https:\/\/avemedia.net\/#website","url":"https:\/\/avemedia.net\/","name":"Ave Media","description":"Professional Video Editing Agency","publisher":{"@id":"https:\/\/avemedia.net\/#organization"},"alternateName":"avemedia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avemedia.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/avemedia.net\/#organization","name":"Ave Media","alternateName":"avemedia","url":"https:\/\/avemedia.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avemedia.net\/#\/schema\/logo\/image\/","url":"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/01\/cropped-fgg.webp","contentUrl":"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/01\/cropped-fgg.webp","width":512,"height":512,"caption":"Ave Media"},"image":{"@id":"https:\/\/avemedia.net\/#\/schema\/logo\/image\/"}}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/pages\/9367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/avemedia.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9367"}],"version-history":[{"count":22,"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/pages\/9367\/revisions"}],"predecessor-version":[{"id":10150,"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/pages\/9367\/revisions\/10150"}],"wp:attachment":[{"href":"https:\/\/avemedia.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}