Hero Section - Gift Cards<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n\n \/* ===========================================\n HERO SECTION\n =========================================== *\/\n section.ho-hero {\n background: #FDFCF4;\n color: #333333;\n padding: 80px 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 500px;\n width: 100%;\n max-width: 100%;\n }\n\n section.ho-hero .ho-hero-content {\n max-width: 800px;\n width: 100%;\n text-align: center;\n }\n\n section.ho-hero h1 {\n font-size: 56px;\n font-weight: 700;\n margin-bottom: 25px;\n line-height: 1.1;\n color: #333333;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n justify-content: center;\n }\n\n section.ho-hero h1 .ho-gift-icon {\n width: 52px;\n height: 52px;\n display: inline-block;\n vertical-align: middle;\n }\n\n section.ho-hero h1 .ho-gift-icon svg {\n width: 100%;\n height: 100%;\n }\n\n section.ho-hero .ho-description {\n font-size: 20px;\n margin-bottom: 35px;\n opacity: 0.75;\n color: #333333;\n font-weight: 400;\n line-height: 1.5;\n }\n\n .ho-cta-buttons {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn {\n padding: 18px 35px;\n border: none;\n border-radius: 50px;\n font-weight: 700;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 18px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: 'Afacad', sans-serif;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn .ho-btn-icon {\n width: 20px;\n height: 20px;\n display: inline-block;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn .ho-btn-icon svg {\n width: 100%;\n height: 100%;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn-primary {\n background: #F25F34;\n color: white;\n border: 3px solid white;\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4);\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn-primary:hover {\n background: #dc4e37;\n color: white;\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 12px 35px rgba(242, 95, 52, 0.5);\n }\n\n \/* CTA subtext under the button *\/\n section.ho-hero .ho-cta-subtext {\n margin-top: 16px;\n font-size: 15px;\n opacity: 0.65;\n color: #333333;\n font-weight: 500;\n text-align: center;\n }\n\n \/* Stats row *\/\n section.ho-hero .ho-stats-row {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 40px;\n margin-top: 45px;\n flex-wrap: wrap;\n }\n\n section.ho-hero .ho-stat {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n section.ho-hero .ho-stat .ho-stat-number {\n font-size: 28px;\n font-weight: 700;\n color: #F25F34;\n line-height: 1.2;\n }\n\n section.ho-hero .ho-stat .ho-stat-label {\n font-size: 15px;\n opacity: 0.7;\n color: #333333;\n font-weight: 500;\n margin-top: 2px;\n }\n\n section.ho-hero .ho-stat-divider {\n width: 1px;\n height: 40px;\n background: rgba(51, 51, 51, 0.15);\n }\n\n \/* Mobile Responsive *\/\n @media (max-width: 768px) {\n section.ho-hero {\n padding: 40px 20px 30px 20px;\n min-height: auto;\n }\n\n section.ho-hero .ho-hero-content {\n max-width: 100%;\n }\n\n section.ho-hero h1 {\n font-size: 48px;\n margin-bottom: 20px;\n padding: 0 10px;\n line-height: 1.1;\n }\n\n section.ho-hero h1 .ho-gift-icon {\n width: 46px;\n height: 46px;\n }\n\n section.ho-hero .ho-description {\n font-size: 18px;\n margin-bottom: 30px;\n padding: 0 10px;\n line-height: 1.5;\n }\n\n section.ho-hero .ho-cta-buttons {\n flex-direction: column;\n align-items: center;\n gap: 15px;\n padding: 0 10px;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn {\n width: 90%;\n max-width: 320px;\n justify-content: center;\n padding: 20px 35px;\n font-size: 18px;\n }\n\n section.ho-hero .ho-stats-row {\n gap: 25px;\n margin-top: 35px;\n }\n\n section.ho-hero .ho-stat .ho-stat-number {\n font-size: 24px;\n }\n\n section.ho-hero .ho-stat .ho-stat-label {\n font-size: 14px;\n }\n }\n\n @media (max-width: 480px) {\n section.ho-hero {\n padding: 30px 15px 25px 15px;\n }\n\n section.ho-hero h1 {\n font-size: 42px;\n padding: 0 5px;\n line-height: 1.1;\n margin-bottom: 18px;\n }\n\n section.ho-hero h1 .ho-gift-icon {\n width: 42px;\n height: 42px;\n }\n\n section.ho-hero .ho-description {\n font-size: 17px;\n padding: 0 5px;\n line-height: 1.5;\n margin-bottom: 25px;\n }\n\n section.ho-hero .ho-cta-buttons {\n padding: 0 5px;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn {\n width: 95%;\n max-width: 300px;\n padding: 18px 30px;\n font-size: 17px;\n }\n\n section.ho-hero .ho-stats-row {\n gap: 18px;\n margin-top: 30px;\n }\n\n section.ho-hero .ho-stat-divider {\n height: 32px;\n }\n }\n\n @media (max-width: 360px) {\n section.ho-hero {\n padding: 25px 10px 20px 10px;\n }\n\n section.ho-hero h1 {\n font-size: 38px;\n line-height: 1.1;\n padding: 0;\n }\n\n section.ho-hero h1 .ho-gift-icon {\n width: 38px;\n height: 38px;\n }\n\n section.ho-hero .ho-description {\n font-size: 16px;\n line-height: 1.5;\n padding: 0;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn {\n width: 98%;\n max-width: 280px;\n font-size: 16px;\n }\n\n section.ho-hero .ho-stats-row {\n gap: 14px;\n }\n\n section.ho-hero .ho-stat .ho-stat-number {\n font-size: 20px;\n }\n\n section.ho-hero .ho-stat .ho-stat-label {\n font-size: 13px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"ho-hero\">\n <div class=\"ho-hero-content\">\n <h1>\n <span class=\"ho-gift-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"#F25F34\" stroke=\"#F25F34\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"#F25F34\" stroke=\"#F25F34\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/span>\n Give the Gift of <span class=\"ho-handmade-circle\">Discovery<\/span>\n <\/h1>\n <p class=\"ho-description\">Choose from hundreds of unique hands-on workshops across Portugal and offer the joy of learning directly with passionate local artisans and skilled teachers<\/p>\n\n <div class=\"ho-cta-buttons\">\n <a href=\"#purchase\" class=\"ho-btn ho-btn-primary\">\n <span class=\"ho-btn-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"currentColor\"\/>\n <\/svg>\n <\/span>\n Buy a Gift Card\n <\/a>\n <\/div>\n\n <p class=\"ho-cta-subtext\">Valid for 12 months \u00b7 Any amount<\/p>\n <\/div>\n <\/section>\n\n <script>\n \/\/ Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e431a4 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"4e431a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"760\" height=\"625\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-1024x842.png\" class=\"attachment-large size-large wp-image-21928\" alt=\"Homepage banner\" srcset=\"https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-1024x842.png 1024w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-300x247.png 300w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-768x632.png 768w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-590x485.png 590w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-815x670.png 815w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-577x475.png 577w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-600x493.png 600w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856.png 1194w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81103e7 elementor-widget-widescreen__width-inherit elementor-hidden-widescreen elementor-hidden-desktop elementor-hidden-laptop elementor-widget elementor-widget-image\" data-id=\"81103e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"760\" height=\"380\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-1024x512.png\" class=\"attachment-large size-large wp-image-21830\" alt=\"giftcard banner\" srcset=\"https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-1024x512.png 1024w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-300x150.png 300w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-768x384.png 768w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-590x295.png 590w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-577x289.png 577w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-600x300.png 600w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner.png 1200w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-113a5ab e-flex e-con-boxed e-con e-parent\" data-id=\"113a5ab\" 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-1084e57 elementor-widget elementor-widget-html\" data-id=\"1084e57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>How It Works Section - Gift Cards<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n\n \/* ===========================================\n HOW IT WORKS SECTION\n =========================================== *\/\n .ho-how-it-works {\n background: #FDFCF4;\n padding: 80px 40px;\n width: 100%;\n }\n\n .ho-how-it-works-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 70px;\n color: #333333;\n line-height: 1.2;\n }\n\n .ho-steps {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 40px;\n max-width: 1400px;\n margin: 0 auto;\n position: relative;\n }\n\n \/* Connecting line across the desktop row, sitting behind the icon circles *\/\n .ho-steps::before {\n content: \"\";\n position: absolute;\n top: 40px;\n left: 12.5%;\n right: 12.5%;\n height: 2px;\n background: repeating-linear-gradient(\n to right,\n rgba(242, 95, 52, 0.35) 0,\n rgba(242, 95, 52, 0.35) 10px,\n transparent 10px,\n transparent 20px\n );\n z-index: 0;\n }\n\n .ho-step {\n text-align: center;\n position: relative;\n z-index: 1;\n transition: transform 0.3s ease;\n }\n\n .ho-step:hover {\n transform: translateY(-6px);\n }\n\n .ho-step-icon-wrap {\n position: relative;\n width: 80px;\n height: 80px;\n margin: 0 auto 30px;\n }\n\n .ho-step-number {\n position: absolute;\n top: -8px;\n right: -8px;\n width: 26px;\n height: 26px;\n background: #F25F34;\n color: white;\n border: 2px solid #FDFCF4;\n border-radius: 50%;\n font-size: 13px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n }\n\n .ho-step-icon {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: #FBEAE3;\n transition: background 0.3s ease, transform 0.3s ease;\n }\n\n .ho-step:hover .ho-step-icon {\n background: #F25F34;\n }\n\n .ho-step:hover .ho-step-icon svg path,\n .ho-step:hover .ho-step-icon svg circle {\n stroke: white;\n }\n\n .ho-step:hover .ho-step-icon svg path[fill=\"#F25F34\"],\n .ho-step:hover .ho-step-icon svg circle[fill=\"#F25F34\"] {\n fill: white;\n }\n\n .ho-step-icon svg {\n width: 36px;\n height: 36px;\n }\n\n .ho-step h3 {\n font-size: 32px;\n margin-bottom: 25px;\n color: #F25F34;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .ho-step p {\n color: #333333;\n line-height: 1.6;\n font-size: 18px;\n }\n\n \/* Mobile Responsive *\/\n @media (max-width: 1024px) {\n .ho-steps {\n grid-template-columns: repeat(2, 1fr);\n gap: 50px;\n max-width: 800px;\n }\n\n .ho-steps::before {\n display: none;\n }\n\n .ho-how-it-works {\n padding: 60px 30px;\n }\n }\n\n @media (max-width: 768px) {\n .ho-steps {\n grid-template-columns: 1fr;\n gap: 25px;\n max-width: 600px;\n }\n\n .ho-step {\n display: flex;\n gap: 20px;\n text-align: left;\n align-items: center;\n }\n\n .ho-step:hover {\n transform: none;\n }\n\n .ho-step-icon-wrap {\n width: 80px;\n height: 80px;\n margin: 0;\n flex-shrink: 0;\n }\n\n .ho-step-content {\n flex: 1;\n }\n\n .ho-step h3 {\n font-size: 28px;\n margin-bottom: 8px;\n line-height: 1.2;\n }\n\n .ho-step p {\n font-size: 16px;\n line-height: 1.5;\n }\n\n .ho-how-it-works {\n padding: 50px 20px;\n }\n\n .ho-how-it-works-title {\n font-size: 36px;\n margin-bottom: 35px;\n line-height: 1.2;\n }\n }\n\n @media (max-width: 480px) {\n .ho-step {\n gap: 15px;\n }\n\n .ho-step-icon-wrap {\n width: 60px;\n height: 60px;\n }\n\n .ho-step-icon {\n width: 60px;\n height: 60px;\n }\n\n .ho-step-icon svg {\n width: 28px;\n height: 28px;\n }\n\n .ho-step-number {\n width: 22px;\n height: 22px;\n font-size: 11px;\n }\n\n .ho-step h3 {\n font-size: 24px;\n margin-bottom: 5px;\n }\n\n .ho-step p {\n font-size: 15px;\n line-height: 1.5;\n }\n\n .ho-how-it-works-title {\n font-size: 32px;\n margin-bottom: 30px;\n line-height: 1.2;\n }\n\n .ho-how-it-works {\n padding: 40px 20px;\n }\n\n .ho-steps {\n gap: 20px;\n }\n }\n\n @media (max-width: 360px) {\n .ho-step {\n gap: 12px;\n }\n\n .ho-step-icon-wrap {\n width: 50px;\n height: 50px;\n }\n\n .ho-step-icon {\n width: 50px;\n height: 50px;\n }\n\n .ho-step-icon svg {\n width: 24px;\n height: 24px;\n }\n\n .ho-step h3 {\n font-size: 22px;\n }\n\n .ho-step p {\n font-size: 14px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"ho-how-it-works\">\n <h2 class=\"ho-how-it-works-title\">How It <span class=\"ho-handmade-circle\">Works<\/span><\/h2>\n <div class=\"ho-steps\">\n <div class=\"ho-step\">\n <div class=\"ho-step-icon-wrap\">\n <span class=\"ho-step-number\">1<\/span>\n <div class=\"ho-step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"6\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"ho-step-content\">\n <h3>Choose<\/h3>\n <p>Select a gift card amount or pick a specific workshop that catches your eye<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-step\">\n <div class=\"ho-step-icon-wrap\">\n <span class=\"ho-step-number\">2<\/span>\n <div class=\"ho-step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" fill=\"#F25F34\" stroke=\"#F25F34\" stroke-width=\"1.5\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"ho-step-content\">\n <h3>Personalize<\/h3>\n <p>Add a heartfelt message and recipient details to make it truly special<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-step\">\n <div class=\"ho-step-icon-wrap\">\n <span class=\"ho-step-number\">3<\/span>\n <div class=\"ho-step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <path d=\"M3 7L12 13L21 7\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"ho-step-content\">\n <h3>Send<\/h3>\n <p>Instant email delivery or schedule for the perfect moment<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-step\">\n <div class=\"ho-step-icon-wrap\">\n <span class=\"ho-step-number\">4<\/span>\n <div class=\"ho-step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M9 12l2 2 4-4\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <path d=\"M15 8C15 8 16 9 17 10\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"ho-step-content\">\n <h3>Relax<\/h3>\n <p>Not the right fit? No problem! Gift cards can be swapped for any other workshop, ensuring everyone finds something they love<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n<\/body>\n<\/html>\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-9727217 e-flex e-con-boxed e-con e-parent\" data-id=\"9727217\" 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-9da2ca1 elementor-widget elementor-widget-html\" data-id=\"9da2ca1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>Gift Options Section - Choose Your Perfect Gift<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n .ho-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n .ho-section {\n padding: 40px 0;\n }\n .ho-gift-options {\n background: #FDFCF4;\n padding: 40px 40px 80px 40px;\n width: 100%;\n }\n .ho-gift-options-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 60px;\n color: #333333;\n line-height: 1.2;\n }\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n .ho-gift-selector {\n background: #FDFCF4;\n border-radius: 20px;\n padding: 50px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n max-width: 1200px;\n margin: 0 auto;\n }\n .ho-gift-type-toggle {\n display: flex;\n background: #f5f5f5;\n border-radius: 50px;\n padding: 5px;\n margin-bottom: 40px;\n }\n .ho-toggle-btn {\n flex: 1;\n padding: 15px 20px;\n border: none;\n border-radius: 50px;\n background: transparent;\n cursor: pointer;\n transition: all 0.3s ease;\n font-weight: 600;\n font-family: 'Afacad', sans-serif;\n font-size: 16px;\n }\n .ho-toggle-btn.active {\n background: #F25F34;\n color: white;\n box-shadow: 0 4px 15px rgba(242, 95, 52, 0.3);\n }\n .ho-amount-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 30px;\n margin: 40px auto;\n max-width: 1200px;\n }\n .ho-amount-card {\n background: white;\n border: 2px solid #333333;\n border-radius: 20px;\n padding: 40px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n .ho-amount-card:hover {\n border-color: #F25F34;\n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.2);\n }\n .ho-amount-card h4 {\n font-size: 40px;\n font-weight: 700;\n color: #F25F34;\n margin-bottom: 15px;\n transition: all 0.3s ease;\n line-height: 1.2;\n }\n .ho-amount-card p {\n font-weight: 600;\n margin-bottom: 12px;\n color: #333;\n font-size: 20px;\n transition: all 0.3s ease;\n line-height: 1.3;\n }\n .ho-amount-card small {\n color: #666;\n font-size: 16px;\n line-height: 1.4;\n transition: all 0.3s ease;\n }\n .ho-custom-amount {\n margin-top: 15px;\n }\n .ho-custom-amount input {\n width: 100%;\n padding: 12px;\n border: 2px solid #e5e5e5;\n border-radius: 10px;\n font-size: 16px;\n text-align: center;\n font-family: 'Afacad', sans-serif;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n .ho-custom-amount input:focus {\n outline: none;\n border-color: #F25F34;\n box-shadow: 0 0 0 3px rgba(242, 95, 52, 0.1);\n }\n .ho-custom-amount input::placeholder {\n color: #999;\n }\n .ho-amount-cta {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: #F25F34;\n color: white;\n border: none;\n padding: 15px;\n font-weight: 700;\n font-size: 16px;\n font-family: 'Afacad', sans-serif;\n cursor: pointer;\n transform: translateY(100%);\n transition: all 0.3s ease;\n border-radius: 0 0 18px 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n .ho-amount-card:hover .ho-amount-cta {\n transform: translateY(0);\n }\n .ho-amount-cta:hover {\n background: #dc4e37;\n }\n .ho-workshop-options {\n display: none;\n }\n .ho-workshop-options.active {\n display: block;\n }\n .ho-workshops-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n margin: 30px auto;\n max-width: 1200px;\n }\n .ho-workshop-card {\n background: white;\n border: 2px solid #333333;\n border-radius: 20px;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n }\n .ho-workshop-card-link {\n text-decoration: none;\n color: inherit;\n display: block;\n }\n .ho-workshop-card-link:hover,\n .ho-workshop-card-link:focus,\n .ho-workshop-card-link:active {\n text-decoration: none;\n color: inherit;\n }\n .ho-workshop-card:hover,\n .ho-workshop-card.selected {\n border-color: #F25F34;\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.2);\n }\n .ho-workshop-image {\n width: 100%;\n height: 200px;\n background: #f0f0f0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #666;\n font-style: italic;\n overflow: hidden;\n }\n .ho-workshop-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .ho-workshop-image .ho-search-icon {\n width: 60px;\n height: 60px;\n }\n .ho-workshop-image .ho-search-icon svg {\n width: 100%;\n height: 100%;\n }\n .ho-workshop-content {\n padding: 20px;\n }\n .ho-workshop-title {\n font-size: 20px;\n font-weight: 700;\n color: #F25F34;\n margin-bottom: 8px;\n line-height: 1.3;\n }\n .ho-workshop-price {\n font-size: 17px;\n font-weight: 600;\n color: #333;\n margin-bottom: 8px;\n line-height: 1.3;\n }\n .ho-workshop-description {\n color: #666;\n font-size: 14px;\n line-height: 1.4;\n }\n .ho-categories-preview {\n margin: 40px auto 0;\n padding-top: 30px;\n border-top: 2px solid #f0f0f0;\n position: relative;\n max-width: 1200px;\n }\n .ho-categories-preview::before {\n content: 'OR';\n position: absolute;\n top: -12px;\n left: 50%;\n transform: translateX(-50%);\n background: #FDFCF4;\n padding: 0 20px;\n color: #666;\n font-weight: 600;\n font-size: 14px;\n }\n .ho-categories-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 15px;\n margin-top: 20px;\n }\n .ho-category-tag,\n .ho-category-tag:link,\n .ho-category-tag:visited {\n background: #F25F34;\n color: #ffffff !important;\n padding: 15px;\n border-radius: 50px;\n text-align: center;\n font-weight: 600;\n font-size: 14px;\n transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n .ho-category-tag .ho-category-icon {\n width: 20px;\n height: 20px;\n display: inline-block;\n }\n .ho-category-tag .ho-category-icon svg {\n width: 100%;\n height: 100%;\n }\n .ho-category-tag:hover,\n .ho-category-tag:focus,\n .ho-category-tag:active {\n background: #dc4e37;\n color: #ffffff !important;\n text-decoration: none;\n transform: scale(1.05);\n box-shadow: 0 6px 18px rgba(242, 95, 52, 0.35);\n }\n .ho-category-tag:hover .ho-category-icon svg [fill=\"white\"],\n .ho-category-tag:focus .ho-category-icon svg [fill=\"white\"] {\n fill: #ffffff;\n }\n .ho-category-tag:hover .ho-category-icon svg [stroke=\"white\"],\n .ho-category-tag:focus .ho-category-icon svg [stroke=\"white\"] {\n stroke: #ffffff;\n }\n .ho-browse-btn {\n background: transparent;\n color: #333333;\n border: 2px solid #333333;\n padding: 8px 16px;\n border-radius: 20px;\n font-weight: 600;\n margin-top: 8px;\n cursor: pointer;\n font-family: 'Afacad', sans-serif;\n transition: all 0.3s ease;\n font-size: 14px;\n }\n .ho-browse-btn:hover {\n background: #F25F34;\n border-color: #F25F34;\n color: white;\n }\n @media (max-width: 768px) {\n .ho-gift-options-title {\n font-size: 36px;\n margin-bottom: 30px;\n line-height: 1.2;\n }\n .ho-gift-options {\n padding: 30px 20px 50px 20px;\n }\n .ho-gift-selector {\n padding: 0;\n box-shadow: none;\n }\n .ho-gift-type-toggle {\n margin-bottom: 25px;\n }\n .ho-toggle-btn {\n padding: 12px 16px;\n font-size: 15px;\n }\n \/* Clean mobile layout: Content left, Price + CTA right *\/\n .ho-amount-options {\n grid-template-columns: 1fr;\n gap: 15px;\n margin: 25px auto;\n }\n .ho-amount-card {\n display: flex;\n align-items: center;\n gap: 15px;\n padding: 20px;\n text-align: left;\n }\n .ho-amount-card-content {\n flex: 1;\n }\n .ho-amount-card p {\n font-size: 20px;\n margin-bottom: 5px;\n line-height: 1.2;\n font-weight: 700;\n }\n .ho-amount-card small {\n font-size: 14px;\n display: block;\n line-height: 1.3;\n }\n .ho-amount-card-right {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n }\n .ho-amount-card h4 {\n font-size: 48px;\n margin-bottom: 0;\n line-height: 1;\n }\n \/* Custom amount card special layout *\/\n .ho-amount-card.ho-custom-card {\n flex-direction: column;\n text-align: center;\n }\n .ho-amount-card.ho-custom-card .ho-amount-card-content {\n width: 100%;\n }\n .ho-amount-card.ho-custom-card .ho-amount-card-right {\n width: 100%;\n }\n .ho-custom-amount {\n margin: 10px 0;\n }\n .ho-amount-cta {\n position: static;\n transform: none;\n border-radius: 50px;\n padding: 12px 20px;\n font-size: 16px;\n font-weight: 700;\n min-width: 120px;\n }\n .ho-workshop-title {\n font-size: 18px;\n line-height: 1.3;\n }\n .ho-workshop-price {\n font-size: 16px;\n line-height: 1.3;\n }\n .ho-workshops-grid {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n .ho-categories-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n @media (max-width: 1024px) and (min-width: 769px) {\n .ho-workshops-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n }\n }\n @media (max-width: 480px) {\n .ho-gift-options {\n padding: 20px 15px 40px 15px;\n }\n .ho-gift-options-title {\n font-size: 32px;\n line-height: 1.2;\n }\n .ho-toggle-btn {\n padding: 10px 12px;\n font-size: 14px;\n }\n .ho-amount-card {\n gap: 12px;\n padding: 18px;\n }\n .ho-amount-card h4 {\n font-size: 42px;\n }\n .ho-amount-card p {\n font-size: 18px;\n }\n .ho-amount-card small {\n font-size: 13px;\n }\n .ho-amount-cta {\n padding: 10px 18px;\n font-size: 15px;\n min-width: 110px;\n }\n .ho-workshop-title {\n font-size: 17px;\n }\n .ho-workshop-price {\n font-size: 15px;\n }\n .ho-categories-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"ho-gift-options\" id=\"purchase\">\n <h2 class=\"ho-gift-options-title\">Choose Your <span class=\"ho-handmade-circle\">Perfect<\/span> Gift<\/h2>\n \n <div class=\"ho-gift-type-toggle\">\n <button class=\"ho-toggle-btn active\" onclick=\"toggleGiftType('amount')\">Amount Gift Card<\/button>\n <button class=\"ho-toggle-btn\" onclick=\"toggleGiftType('workshop')\">Specific Workshop<\/button>\n <\/div>\n \n <div class=\"ho-amount-options\" id=\"amountOptions\">\n <div class=\"ho-amount-card\">\n <div class=\"ho-amount-card-content\">\n <p>Perfect Start<\/p>\n <small>Great for intro workshops and creative sessions<\/small>\n <\/div>\n <div class=\"ho-amount-card-right\">\n <h4>\u20ac25<\/h4>\n <button class=\"ho-amount-cta\" onclick=\"addToCart('amount', 25)\">Buy Now<\/button>\n <\/div>\n <\/div>\n \n <div class=\"ho-amount-card\">\n <div class=\"ho-amount-card-content\">\n <p>Popular Choice<\/p>\n <small>Perfect for cooking classes and craft workshops<\/small>\n <\/div>\n <div class=\"ho-amount-card-right\">\n <h4>\u20ac50<\/h4>\n <button class=\"ho-amount-cta\" onclick=\"addToCart('amount', 50)\">Buy Now<\/button>\n <\/div>\n <\/div>\n \n <div class=\"ho-amount-card\">\n <div class=\"ho-amount-card-content\">\n <p>Premium Experience<\/p>\n <small>Full-day workshops and premium experiences<\/small>\n <\/div>\n <div class=\"ho-amount-card-right\">\n <h4>\u20ac100<\/h4>\n <button class=\"ho-amount-cta\" onclick=\"addToCart('amount', 100)\">Buy Now<\/button>\n <\/div>\n <\/div>\n \n <div class=\"ho-amount-card ho-custom-card\">\n <div class=\"ho-amount-card-content\">\n <p>Any Amount<\/p>\n <div class=\"ho-custom-amount\">\n <input type=\"number\" placeholder=\"Enter amount (\u20ac15-\u20ac500)\" min=\"15\" max=\"500\" id=\"customAmount\">\n <\/div>\n <small>Choose the perfect amount for your recipient<\/small>\n <\/div>\n <div class=\"ho-amount-card-right\">\n <button class=\"ho-amount-cta\" onclick=\"addToCartCustom()\">Buy Now<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"ho-workshop-options\" id=\"workshopOptions\">\n <div class=\"ho-workshops-grid\">\n <a href=\"https:\/\/handson.pt\/workshops\/?q=ceramic\" class=\"ho-workshop-card-link\">\n <div class=\"ho-workshop-card\">\n <div class=\"ho-workshop-image\">\n <img decoding=\"async\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2026\/03\/IMG_3571.jpeg\" alt=\"Ceramics Workshops\">\n <\/div>\n <div class=\"ho-workshop-content\">\n <h4 class=\"ho-workshop-title\">Ceramics Workshops<\/h4>\n <p class=\"ho-workshop-price\">From \u20ac25<\/p>\n <p class=\"ho-workshop-description\">Shape, sculpt and paint your own pieces with a professional ceramicist.<\/p>\n <\/div>\n <\/div>\n <\/a>\n \n <a href=\"https:\/\/handson.pt\/workshops\/?q=cooking\" class=\"ho-workshop-card-link\">\n <div class=\"ho-workshop-card\">\n <div class=\"ho-workshop-image\">\n <img decoding=\"async\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2024\/11\/Sushi3-scaled.jpg\" alt=\"Cooking Workshops\">\n <\/div>\n <div class=\"ho-workshop-content\">\n <h4 class=\"ho-workshop-title\">Cooking Workshops<\/h4>\n <p class=\"ho-workshop-price\">From \u20ac50<\/p>\n <p class=\"ho-workshop-description\">Sushi, pastel de nata, sourdough and more \u2014 cook it yourself with a pro.<\/p>\n <\/div>\n <\/div>\n <\/a>\n \n <a href=\"https:\/\/handson.pt\/workshops\/?q=tufting\" class=\"ho-workshop-card-link\">\n <div class=\"ho-workshop-card\">\n <div class=\"ho-workshop-image\">\n <img decoding=\"async\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2024\/11\/hvzbkh-2-1200x1199.jpg\" alt=\"Tufting Workshops\">\n <\/div>\n <div class=\"ho-workshop-content\">\n <h4 class=\"ho-workshop-title\">Tufting Workshops<\/h4>\n <p class=\"ho-workshop-price\">From \u20ac75<\/p>\n <p class=\"ho-workshop-description\">Design and tuft your own custom rug, finished and delivered to your door.<\/p>\n <\/div>\n <\/div>\n <\/a>\n \n <div class=\"ho-workshop-card\" onclick=\"browseAllWorkshops()\">\n <div class=\"ho-workshop-image\" style=\"background: #F25F34;\">\n <span class=\"ho-search-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"white\" stroke-width=\"2\"\/>\n <path d=\"M21 21L16.65 16.65\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/span>\n <\/div>\n <div class=\"ho-workshop-content\">\n <h4 class=\"ho-workshop-title\">Pick Any Workshop<\/h4>\n <p class=\"ho-workshop-price\">Browse All Options<\/p>\n <p class=\"ho-workshop-description\">Choose from our full collection of amazing workshops and experiences.<\/p>\n <button class=\"ho-browse-btn\" onclick=\"browseAllWorkshops()\">View All Workshops<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"ho-categories-preview\">\n <h3 style=\"margin-bottom: 20px; color: #333; text-align: center; line-height: 1.3;\">All Workshop Categories Available<\/h3>\n <div class=\"ho-categories-grid\">\n <a href=\"[ARTS_CRAFTS_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\" fill=\"white\"\/>\n <\/svg>\n <\/span>\n Arts & Crafts\n <\/a>\n <a href=\"[FOOD_DRINKS_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 2C10.9 2 10 2.9 10 4V12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12V4C14 2.9 13.1 2 12 2Z\" fill=\"white\"\/>\n <path d=\"M12 16C10.9 16 10 16.9 10 18V20C10 21.1 10.9 22 12 22C13.1 22 14 21.1 14 20V18C14 16.9 13.1 16 12 16Z\" fill=\"white\"\/>\n <circle cx=\"7\" cy=\"7\" r=\"2\" fill=\"white\"\/>\n <circle cx=\"17\" cy=\"7\" r=\"2\" fill=\"white\"\/>\n <\/svg>\n <\/span>\n Food & Drinks\n <\/a>\n <a href=\"[FAUNA_FLORA_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M17 8C17 10.76 14.76 13 12 13C9.24 13 7 10.76 7 8C7 5.24 9.24 3 12 3C14.76 3 17 5.24 17 8Z\" fill=\"white\"\/>\n <path d=\"M12 13V21\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M8 17C8 17 9 15 12 15C15 15 16 17 16 17\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/span>\n Fauna & Flora\n <\/a>\n <a href=\"[HOME_DIY_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M3 12L12 3L21 12V20C21 20.55 20.55 21 20 21H4C3.45 21 3 20.55 3 20V12Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/span>\n Home & DIY\n <\/a>\n <a href=\"[SPORTS_FITNESS_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M6 12H2M22 12H18M12 6V2M12 22V18\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"white\" stroke-width=\"2\"\/>\n <\/svg>\n <\/span>\n Sports & Fitness\n <\/a>\n <a href=\"[ALL_CATEGORIES_URL]\" class=\"ho-category-tag\">+ More<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n var currentGiftType = 'amount';\n function toggleGiftType(type) {\n currentGiftType = type;\n var buttons = document.querySelectorAll('.ho-toggle-btn');\n buttons.forEach(function(btn) { btn.classList.remove('active'); });\n event.target.classList.add('active');\n \n if (type === 'amount') {\n document.getElementById('amountOptions').style.display = 'grid';\n document.getElementById('workshopOptions').style.display = 'none';\n } else {\n document.getElementById('amountOptions').style.display = 'none';\n document.getElementById('workshopOptions').style.display = 'block';\n }\n }\n function addToCart(type, amount) {\n console.log('Adding to cart:', type, amount);\n \/\/ Redirect to gift card purchase page with amount_price parameter\n if (type === 'workshop') {\n window.location.href = '\/gift-card-purchase\/?listing_id=' + amount;\n } else {\n window.location.href = '\/gift-card-purchase\/?amount_price=' + amount;\n }\n }\n function addToCartCustom() {\n var customAmountInput = document.getElementById('customAmount');\n var customAmount = customAmountInput.value;\n \n \/\/ Check if input is empty\n if (!customAmount || customAmount.trim() === '') {\n customAmountInput.focus();\n customAmountInput.style.borderColor = '#F25F34';\n customAmountInput.style.boxShadow = '0 0 0 3px rgba(242, 95, 52, 0.2)';\n alert('Please enter an amount first');\n return;\n }\n \n \/\/ Check if amount is within valid range\n var amount = parseFloat(customAmount);\n if (amount < 15 || amount > 500) {\n customAmountInput.focus();\n customAmountInput.style.borderColor = '#F25F34';\n customAmountInput.style.boxShadow = '0 0 0 3px rgba(242, 95, 52, 0.2)';\n alert('Please enter a valid amount between \u20ac15 and \u20ac500');\n return;\n }\n \n \/\/ Reset input styling and proceed\n customAmountInput.style.borderColor = '#e5e5e5';\n customAmountInput.style.boxShadow = 'none';\n \n console.log('Adding custom amount to cart:', amount);\n \/\/ Redirect to gift card purchase page with amount_price parameter\n window.location.href = '\/gift-card-purchase\/?amount_price=' + amount;\n }\n function browseAllWorkshops() {\n window.open('https:\/\/handson.pt\/workshops', '_blank');\n }\n <\/script>\n<\/body>\n<\/html>\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-3bc476d e-flex e-con-boxed e-con e-parent\" data-id=\"3bc476d\" 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-f54a50b elementor-widget elementor-widget-html\" data-id=\"f54a50b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>Trust Section - Why Choose Hands On Gift Cards<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n\n .ho-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n\n .ho-section {\n padding: 40px 0;\n }\n\n .ho-trust-section-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 24px;\n color: #333333;\n line-height: 1.2;\n }\n\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n\n .ho-trust-section {\n background: #FDFCF4;\n padding: 30px 0 60px 0;\n }\n\n .ho-trust-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 25px;\n margin-top: 40px;\n }\n\n .ho-trust-item {\n border-radius: 20px;\n padding: 30px;\n text-align: center;\n transition: transform 0.3s ease;\n }\n\n .ho-trust-item:nth-child(1) { \n background: #F9C8B8; \n }\n \n .ho-trust-item:nth-child(2) { \n background: #B8E6F9; \n }\n \n .ho-trust-item:nth-child(3) { \n background: #C8F9B8; \n }\n \n .ho-trust-item:nth-child(4) { \n background: #F9B8E6; \n }\n\n .ho-trust-item:hover {\n transform: scale(1.02);\n }\n\n .ho-trust-icon {\n width: 60px;\n height: 60px;\n margin: 0 auto 15px;\n display: block;\n }\n\n .ho-trust-icon svg {\n width: 100%;\n height: 100%;\n }\n\n .ho-trust-item h4 {\n margin-bottom: 12px;\n font-weight: 700;\n font-size: 24px;\n line-height: 1.2;\n }\n\n .ho-trust-item:nth-child(1) h4 {\n color: #F25F34;\n }\n\n .ho-trust-item:nth-child(2) h4 {\n color: #256B82;\n }\n\n .ho-trust-item:nth-child(3) h4 {\n color: #4EA494;\n }\n\n .ho-trust-item:nth-child(4) h4 {\n color: #F25F34;\n }\n\n .ho-trust-item p {\n color: #555;\n line-height: 1.5;\n font-size: 16px;\n }\n\n \/* Tablet Responsive - 2x2 Grid *\/\n @media (max-width: 1024px) and (min-width: 769px) {\n .ho-trust-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 30px;\n }\n }\n\n \/* Mobile Responsive - Horizontal Compact Layout *\/\n @media (max-width: 768px) {\n .ho-trust-section {\n padding: 20px 0 40px 0;\n }\n\n .ho-trust-section-title {\n font-size: 36px;\n margin-bottom: 20px;\n line-height: 1.2;\n }\n\n .ho-trust-grid {\n grid-template-columns: 1fr;\n gap: 15px;\n margin-top: 25px;\n }\n\n .ho-trust-item {\n display: flex;\n align-items: center;\n gap: 20px;\n padding: 20px;\n text-align: left;\n }\n\n .ho-trust-icon {\n width: 60px;\n height: 60px;\n margin: 0;\n flex-shrink: 0;\n }\n\n .ho-trust-content {\n flex: 1;\n }\n\n .ho-trust-item h4 {\n font-size: 20px;\n margin-bottom: 5px;\n line-height: 1.2;\n }\n\n .ho-trust-item p {\n font-size: 15px;\n line-height: 1.4;\n }\n }\n\n @media (max-width: 480px) {\n .ho-trust-section {\n padding: 15px 0 35px 0;\n }\n\n .ho-trust-section-title {\n font-size: 32px;\n line-height: 1.2;\n }\n\n .ho-trust-grid {\n gap: 12px;\n margin-top: 20px;\n }\n\n .ho-trust-item {\n gap: 15px;\n padding: 18px;\n }\n\n .ho-trust-icon {\n width: 50px;\n height: 50px;\n }\n\n .ho-trust-item h4 {\n font-size: 18px;\n line-height: 1.2;\n }\n\n .ho-trust-item p {\n font-size: 14px;\n line-height: 1.4;\n }\n }\n\n @media (max-width: 360px) {\n .ho-trust-icon {\n width: 45px;\n height: 45px;\n }\n\n .ho-trust-item h4 {\n font-size: 17px;\n }\n\n .ho-trust-item p {\n font-size: 13px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"ho-trust-section ho-section\">\n <div class=\"ho-container\">\n <h2 class=\"ho-trust-section-title\">Why Choose Hands On <span class=\"ho-handmade-circle\">Gift Cards<\/span>?<\/h2>\n <div class=\"ho-trust-grid\">\n <div class=\"ho-trust-item\">\n <div class=\"ho-trust-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M13 2L3 14H12L11 22L21 10H12L13 2Z\" fill=\"#F25F34\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-trust-content\">\n <h4>Send Now or Later<\/h4>\n <p>Gift cards delivered instantly via email or scheduled for the perfect surprise moment<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-trust-item\">\n <div class=\"ho-trust-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#256B82\" stroke-width=\"2\"\/>\n <path d=\"M12 6V12L16 14\" stroke=\"#256B82\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-trust-content\">\n <h4>12 Month Validity<\/h4>\n <p>Plenty of time to find and book the perfect workshop experience<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-trust-item\">\n <div class=\"ho-trust-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\" stroke=\"#4EA494\" stroke-width=\"2\"\/>\n <path d=\"M2 10H22\" stroke=\"#4EA494\" stroke-width=\"2\"\/>\n <path d=\"M6 15H10\" stroke=\"#4EA494\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-trust-content\">\n <h4>No Hidden Fees<\/h4>\n <p>What you pay is exactly what they get - transparent pricing always<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-trust-item\">\n <div class=\"ho-trust-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <path d=\"M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"#F25F34\"\/>\n <circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-trust-content\">\n <h4>Always the Right Choice<\/h4>\n <p>Verified quality teachers and full flexibility to change workshops - find the perfect fit<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n<\/body>\n<\/html>\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-9c330a1 e-flex e-con-boxed e-con e-parent\" data-id=\"9c330a1\" 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-f15485c elementor-widget elementor-widget-html\" data-id=\"f15485c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>What People Say & FAQ Section<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \/* The full-bleed FAQ uses vw units, which ignore the scrollbar.\n This stops that from producing a horizontal scrollbar. *\/\n html,\n body {\n overflow-x: hidden;\n max-width: 100%;\n }\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n \/* ===========================================\n TESTIMONIALS SECTION\n =========================================== *\/\n .ho-testimonials-section {\n background: #FDFCF4;\n padding: 40px 40px 80px 40px;\n width: 100%;\n }\n .ho-testimonials-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 60px;\n color: #333333;\n line-height: 1.2;\n }\n .ho-testimonials-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 60px;\n max-width: 1400px;\n margin: 0 auto;\n }\n .ho-testimonial {\n text-align: left;\n position: relative;\n }\n .ho-quote-icon {\n width: 50px;\n height: 50px;\n margin-bottom: 20px;\n opacity: 0.3;\n }\n .ho-quote-icon svg {\n width: 100%;\n height: 100%;\n }\n .ho-testimonial-text {\n font-style: italic;\n font-size: 20px;\n margin-bottom: 25px;\n line-height: 1.6;\n color: #333;\n }\n .ho-testimonial-author {\n font-weight: 700;\n color: #F25F34;\n font-size: 22px;\n margin-bottom: 5px;\n line-height: 1.2;\n }\n .ho-testimonial-role {\n color: #666;\n font-size: 18px;\n line-height: 1.3;\n }\n \/* ===========================================\n CTA BUTTON (end of testimonials, before FAQ)\n Mirrors the hero button exactly.\n =========================================== *\/\n .ho-cta-wrap {\n text-align: center;\n margin-top: 60px;\n }\n .ho-cta-wrap .ho-btn {\n padding: 18px 35px;\n border: none;\n border-radius: 50px;\n font-weight: 700;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 18px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: 'Afacad', sans-serif;\n }\n .ho-cta-wrap .ho-btn .ho-btn-icon {\n width: 20px;\n height: 20px;\n display: inline-block;\n }\n .ho-cta-wrap .ho-btn .ho-btn-icon svg {\n width: 100%;\n height: 100%;\n }\n .ho-cta-wrap .ho-btn-primary,\n .ho-cta-wrap .ho-btn-primary:link,\n .ho-cta-wrap .ho-btn-primary:visited {\n background: #F25F34;\n color: #ffffff !important;\n border: 3px solid white;\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4);\n }\n .ho-cta-wrap .ho-btn-primary:hover,\n .ho-cta-wrap .ho-btn-primary:focus,\n .ho-cta-wrap .ho-btn-primary:active {\n background: #dc4e37;\n color: #ffffff !important;\n text-decoration: none;\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 12px 35px rgba(242, 95, 52, 0.5);\n }\n \/* ===========================================\n FAQ SECTION\n =========================================== *\/\n .ho-faq-section {\n background: #256B82;\n padding: 60px 40px 80px 40px;\n \/* Full-bleed: breaks out of the theme's max-width container so the\n teal reaches both edges of the viewport. *\/\n width: auto;\n margin-left: calc(50% - 50vw);\n margin-right: calc(50% - 50vw);\n }\n .ho-faq-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 40px;\n color: white;\n line-height: 1.2;\n }\n .ho-faq-intro {\n text-align: center;\n margin-bottom: 60px;\n color: rgba(255,255,255,0.9);\n font-size: 20px;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.5;\n }\n .ho-faq-container {\n max-width: 1000px;\n margin: 0 auto;\n }\n .ho-faq-item {\n margin-bottom: 30px;\n }\n .ho-faq-question {\n width: 100%;\n text-align: left;\n background: transparent;\n border: none;\n padding: 25px 0;\n font-size: 24px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: border-color 0.3s ease;\n font-family: 'Afacad', sans-serif;\n color: #ffffff;\n border-bottom: 2px solid rgba(255,255,255,0.2);\n line-height: 1.3;\n }\n \/* Text stays white for contrast; the teal accent moves to the rule and the icon *\/\n .ho-faq-question:hover,\n .ho-faq-question:focus-visible,\n .ho-faq-question.active {\n color: #ffffff;\n border-bottom-color: #4EA494;\n }\n .ho-faq-question:focus-visible {\n outline: 2px solid #4EA494;\n outline-offset: 4px;\n }\n .ho-faq-icon {\n font-size: 32px;\n font-weight: bold;\n line-height: 1;\n transition: transform 0.3s ease;\n color: #4EA494;\n flex-shrink: 0;\n margin-left: 15px;\n }\n \/* The \"+\" rotates into an \"\u00d7\" \u2014 the character itself never changes *\/\n .ho-faq-question.active .ho-faq-icon {\n transform: rotate(45deg);\n }\n .ho-faq-answer {\n padding: 0;\n color: rgba(255,255,255,0.85);\n line-height: 1.6;\n font-size: 18px;\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease;\n }\n .ho-faq-answer.active {\n padding: 25px 0 0 0;\n }\n .ho-faq-answer a {\n color: #ffffff;\n text-decoration: underline;\n text-underline-offset: 3px;\n }\n .ho-faq-answer p + p {\n margin-top: 14px;\n }\n .ho-faq-answer ul {\n margin: 14px 0 0 0;\n padding-left: 22px;\n list-style: none;\n }\n .ho-faq-answer ul li {\n position: relative;\n padding-left: 4px;\n margin-bottom: 8px;\n }\n .ho-faq-answer ul li::before {\n content: \"\";\n position: absolute;\n left: -18px;\n top: 12px;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: #4EA494;\n }\n .ho-faq-answer ul li:last-child {\n margin-bottom: 0;\n }\n \/* ===========================================\n FAQ CONTACT NOTE\n =========================================== *\/\n .ho-faq-contact {\n max-width: 1000px;\n margin: 60px auto 0 auto;\n text-align: center;\n color: rgba(255,255,255,0.9);\n font-size: 20px;\n line-height: 1.6;\n }\n .ho-faq-contact a {\n color: #ffffff;\n font-weight: 700;\n text-decoration: underline;\n text-underline-offset: 3px;\n transition: color 0.3s ease;\n }\n .ho-faq-contact a:hover,\n .ho-faq-contact a:focus-visible {\n color: #4EA494;\n }\n \/* Mobile Responsive *\/\n @media (max-width: 1024px) {\n .ho-testimonials-grid {\n grid-template-columns: 1fr;\n gap: 50px;\n max-width: 800px;\n }\n }\n @media (max-width: 768px) {\n .ho-testimonials-section {\n padding: 25px 20px 50px 20px;\n }\n .ho-faq-section {\n padding: 40px 20px 60px 20px;\n }\n .ho-testimonials-title,\n .ho-faq-title {\n font-size: 36px;\n margin-bottom: 35px;\n line-height: 1.2;\n }\n .ho-testimonials-grid {\n gap: 35px;\n }\n .ho-testimonial {\n display: flex;\n align-items: flex-start;\n gap: 15px;\n }\n .ho-quote-icon {\n width: 40px;\n height: 40px;\n margin-bottom: 0;\n flex-shrink: 0;\n }\n .ho-testimonial-content {\n flex: 1;\n }\n .ho-testimonial-text {\n font-size: 17px;\n margin-bottom: 15px;\n line-height: 1.5;\n }\n .ho-testimonial-author {\n font-size: 19px;\n margin-bottom: 3px;\n line-height: 1.2;\n }\n .ho-testimonial-role {\n font-size: 16px;\n line-height: 1.3;\n }\n .ho-cta-wrap {\n margin-top: 40px;\n }\n .ho-cta-wrap .ho-btn {\n width: 90%;\n max-width: 320px;\n justify-content: center;\n padding: 20px 35px;\n font-size: 18px;\n }\n .ho-faq-intro {\n font-size: 17px;\n margin-bottom: 35px;\n line-height: 1.5;\n }\n .ho-faq-question {\n font-size: 18px;\n padding: 18px 0;\n line-height: 1.3;\n }\n .ho-faq-answer {\n font-size: 16px;\n line-height: 1.5;\n }\n .ho-faq-icon {\n font-size: 26px;\n }\n .ho-faq-contact {\n font-size: 17px;\n margin-top: 45px;\n }\n }\n @media (max-width: 480px) {\n .ho-testimonials-section {\n padding: 20px 15px 40px 15px;\n }\n .ho-faq-section {\n padding: 35px 15px 50px 15px;\n }\n .ho-testimonials-title,\n .ho-faq-title {\n font-size: 32px;\n line-height: 1.2;\n }\n .ho-testimonials-grid {\n gap: 30px;\n }\n .ho-testimonial {\n gap: 12px;\n }\n .ho-quote-icon {\n width: 35px;\n height: 35px;\n }\n .ho-testimonial-text {\n font-size: 16px;\n line-height: 1.5;\n }\n .ho-testimonial-author {\n font-size: 18px;\n line-height: 1.2;\n }\n .ho-testimonial-role {\n font-size: 15px;\n line-height: 1.3;\n }\n .ho-cta-wrap {\n margin-top: 35px;\n }\n .ho-cta-wrap .ho-btn {\n width: 95%;\n max-width: 300px;\n padding: 18px 30px;\n font-size: 17px;\n }\n .ho-faq-intro {\n font-size: 16px;\n line-height: 1.5;\n }\n .ho-faq-question {\n font-size: 17px;\n padding: 16px 0;\n line-height: 1.3;\n }\n .ho-faq-answer {\n font-size: 15px;\n line-height: 1.5;\n }\n .ho-faq-icon {\n font-size: 24px;\n }\n .ho-faq-contact {\n font-size: 16px;\n margin-top: 40px;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .ho-cta-wrap .ho-btn,\n .ho-faq-answer,\n .ho-faq-icon,\n .ho-faq-question {\n transition: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"ho-testimonials-section\" id=\"testimonials\">\n <h2 class=\"ho-testimonials-title\">What <span class=\"ho-handmade-circle\">People<\/span> Say<\/h2>\n <div class=\"ho-testimonials-grid\">\n <div class=\"ho-testimonial\">\n <div class=\"ho-quote-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M10 8C10 8 8 10 8 13C8 16 10 18 13 18C16 18 18 16 18 13C18 10 16 8 13 8C12 8 11 8.5 10 9V8Z\" fill=\"#F25F34\"\/>\n <path d=\"M3 8C3 8 1 10 1 13C1 16 3 18 6 18C9 18 11 16 11 13C11 10 9 8 6 8C5 8 4 8.5 3 9V8Z\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-testimonial-content\">\n <div class=\"ho-testimonial-text\">\n “The pottery workshop was absolutely amazing! Such a thoughtful gift that created lasting memories. I never knew I had such creative potential!”\n <\/div>\n <div class=\"ho-testimonial-author\">Maria S.<\/div>\n <div class=\"ho-testimonial-role\">Gift Recipient<\/div>\n <\/div>\n <\/div>\n <div class=\"ho-testimonial\">\n <div class=\"ho-quote-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M10 8C10 8 8 10 8 13C8 16 10 18 13 18C16 18 18 16 18 13C18 10 16 8 13 8C12 8 11 8.5 10 9V8Z\" fill=\"#F25F34\"\/>\n <path d=\"M3 8C3 8 1 10 1 13C1 16 3 18 6 18C9 18 11 16 11 13C11 10 9 8 6 8C5 8 4 8.5 3 9V8Z\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-testimonial-content\">\n <div class=\"ho-testimonial-text\">\n “Perfect last-minute gift solution! The recipient loved being able to choose their own workshop. Will definitely use this again.”\n <\/div>\n <div class=\"ho-testimonial-author\">Jo\u00e3o P.<\/div>\n <div class=\"ho-testimonial-role\">Gift Buyer<\/div>\n <\/div>\n <\/div>\n <div class=\"ho-testimonial\">\n <div class=\"ho-quote-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M10 8C10 8 8 10 8 13C8 16 10 18 13 18C16 18 18 16 18 13C18 10 16 8 13 8C12 8 11 8.5 10 9V8Z\" fill=\"#F25F34\"\/>\n <path d=\"M3 8C3 8 1 10 1 13C1 16 3 18 6 18C9 18 11 16 11 13C11 10 9 8 6 8C5 8 4 8.5 3 9V8Z\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-testimonial-content\">\n <div class=\"ho-testimonial-text\">\n “As someone who’s hard to shop for, this gift card was perfect. I tried wine making and had the best time. So unique and personal!”\n <\/div>\n <div class=\"ho-testimonial-author\">Ana C.<\/div>\n <div class=\"ho-testimonial-role\">Gift Recipient<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"ho-cta-wrap\">\n <a href=\"#purchase\" class=\"ho-btn ho-btn-primary\">\n <span class=\"ho-btn-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"currentColor\"\/>\n <\/svg>\n <\/span>\n Buy a Gift Card\n <\/a>\n <\/div>\n <\/section>\n \n <section class=\"ho-faq-section\" id=\"faq\">\n <h2 class=\"ho-faq-title\">Frequently Asked <span class=\"ho-handmade-circle\">Questions<\/span><\/h2>\n <div class=\"ho-faq-intro\">\n Have questions about our gift cards? Here are the answers to some of the things you may be wondering.\n <\/div>\n <div class=\"ho-faq-container\">\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q1\" aria-expanded=\"false\" aria-controls=\"faq-a1\" onclick=\"toggleFAQ(this)\">\n Can the recipient choose any workshop?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a1\" role=\"region\" aria-labelledby=\"faq-q1\">\n <p>Absolutely. Our Gift Cards give access to hundreds of workshops and experiences across Portugal, from food and drinks to arts, crafts, wellness, sports and much more. The recipient can choose the experience that suits them best.<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q2\" aria-expanded=\"false\" aria-controls=\"faq-a2\" onclick=\"toggleFAQ(this)\">\n Can the recipient choose the date?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a2\" role=\"region\" aria-labelledby=\"faq-q2\">\n <p>Yes. The Gift Card is not tied to a specific workshop, date or time. The recipient can browse our experiences and book the date that works best for them, subject to the availability of the chosen workshop.<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q3\" aria-expanded=\"false\" aria-controls=\"faq-a3\" onclick=\"toggleFAQ(this)\">\n How will the Gift Card be delivered?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a3\" role=\"region\" aria-labelledby=\"faq-q3\">\n <p>Our Gift Cards are 100% digital and delivered by email. You can send it directly to the recipient, schedule it to arrive on a specific date, or send it to yourself so you can print it and give it in person.<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q4\" aria-expanded=\"false\" aria-controls=\"faq-a4\" onclick=\"toggleFAQ(this)\">\n Can I personalise the Gift Card?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a4\" role=\"region\" aria-labelledby=\"faq-q4\">\n <p>Of course. Add the recipient’s name and a personal message to make the gift feel truly personal. You can also choose when the Gift Card should be delivered, making it easy to plan ahead for birthdays, Christmas, anniversaries or any special occasion.<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q5\" aria-expanded=\"false\" aria-controls=\"faq-a5\" onclick=\"toggleFAQ(this)\">\n How long does the recipient have to use it?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a5\" role=\"region\" aria-labelledby=\"faq-q5\">\n <p>The Gift Card is valid for 12 months from the date of purchase, so there’s plenty of time to find the perfect experience. If they need a little longer, a one-time 12-month extension can be requested, subject to the applicable fee and conditions.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"ho-faq-contact\">\n Still have questions about your Gift Card, redemption, validity extensions or anything else? Contact us at <a href=\"mailto:hello@handson.pt\">hello@handson.pt<\/a> — we’re happy to help.\n <\/div>\n <\/section>\n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"FAQPage\",\n \"mainEntity\": [\n {\"@type\":\"Question\",\"name\":\"Can the recipient choose any workshop?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Absolutely. Our Gift Cards give access to hundreds of workshops and experiences across Portugal and Spain, from food and drinks to arts, crafts, wellness, sports and much more. The recipient can choose the experience that suits them best, subject to availability.\"}},\n {\"@type\":\"Question\",\"name\":\"Can the recipient choose the date?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. The Gift Card is not tied to a specific workshop, date or time. The recipient can browse our experiences and book the date that works best for them, subject to the availability of the chosen workshop.\"}},\n {\"@type\":\"Question\",\"name\":\"How will the Gift Card be delivered?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Our Gift Cards are 100% digital and delivered by email. You can send it directly to the recipient, schedule it to arrive on a specific date, or send it to yourself so you can print it and give it in person.\"}},\n {\"@type\":\"Question\",\"name\":\"Can I personalise the Gift Card?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Of course. Add the recipient\u2019s name and a personal message to make the gift feel truly personal. You can also choose when the Gift Card should be delivered, making it easy to plan ahead for birthdays, Christmas, anniversaries or any special occasion.\"}},\n {\"@type\":\"Question\",\"name\":\"How long does the recipient have to use it?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The Gift Card is valid for 12 months from the date of purchase, so there\u2019s plenty of time to find the perfect experience. If they need a little longer, a one-time 12-month extension can be requested, subject to the applicable fee and conditions.\"}}\n ]\n }\n <\/script>\n <script>\n \/\/ Smooth scrolling for anchor links (same behaviour as the hero button)\n document.querySelectorAll('.ho-cta-wrap a[href^=\"#\"]').forEach(function (anchor) {\n anchor.addEventListener('click', function (e) {\n var target = document.querySelector(this.getAttribute('href'));\n if (target) {\n e.preventDefault();\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n });\n function closeAllFAQ() {\n document.querySelectorAll('.ho-faq-question').forEach(function (q) {\n q.classList.remove('active');\n q.setAttribute('aria-expanded', 'false');\n });\n document.querySelectorAll('.ho-faq-answer').forEach(function (a) {\n a.classList.remove('active');\n a.style.maxHeight = null;\n });\n }\n function toggleFAQ(element) {\n var answer = element.nextElementSibling;\n var wasOpen = element.classList.contains('active');\n closeAllFAQ();\n if (!wasOpen) {\n element.classList.add('active');\n element.setAttribute('aria-expanded', 'true');\n answer.classList.add('active');\n \/\/ Measured after the padding is applied, so nothing gets clipped\n \/\/ no matter how long the answer is.\n answer.style.maxHeight = (answer.scrollHeight + 20) + 'px';\n }\n }\n \/\/ Keep the open answer correctly sized if the viewport reflows.\n window.addEventListener('resize', function () {\n var open = document.querySelector('.ho-faq-answer.active');\n if (open) {\n open.style.maxHeight = 'none';\n open.style.maxHeight = (open.scrollHeight + 20) + 'px';\n }\n });\n <\/script>\n<\/body>\n<\/html>\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-3ebd315 e-flex e-con-boxed e-con e-parent\" data-id=\"3ebd315\" 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-2b7b34f elementor-widget elementor-widget-html\" data-id=\"2b7b34f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>Final CTA Section + Floating Button<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \/* The full-bleed CTA uses vw units, which ignore the scrollbar.\n This stops that from producing a horizontal scrollbar. *\/\n html,\n body {\n overflow-x: hidden;\n max-width: 100%;\n }\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n .ho-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0;\n }\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n \/* ===========================================\n FINAL CTA SECTION\n Full-bleed, matching the teal FAQ band exactly:\n same breakout technique, same paddings.\n =========================================== *\/\n section.ho-final-cta {\n background: #F25F34;\n color: white;\n text-align: center;\n position: relative;\n padding: 60px 40px 80px 40px;\n \/* Full-bleed: breaks out of the theme's max-width container so the\n orange reaches both edges of the viewport. *\/\n width: auto;\n margin-left: calc(50% - 50vw);\n margin-right: calc(50% - 50vw);\n }\n .ho-final-cta::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image\/svg+xml,<svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><g fill=\"%23ffffff\" fill-opacity=\"0.05\"><circle cx=\"30\" cy=\"30\" r=\"4\"\/><\/g><\/svg>') repeat;\n }\n .ho-final-cta-content {\n position: relative;\n z-index: 2;\n }\n .ho-final-cta-title {\n font-size: 48px;\n font-weight: 700;\n margin-bottom: 20px;\n color: white;\n line-height: 1.2;\n }\n .ho-final-cta-subtitle {\n font-size: 20px;\n margin-bottom: 40px;\n opacity: 0.95;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.5;\n }\n .ho-final-cta-buttons {\n display: flex;\n gap: 20px;\n justify-content: center;\n flex-wrap: wrap;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n padding: 18px 35px;\n border: none;\n border-radius: 50px;\n font-weight: 700;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 18px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: 'Afacad', sans-serif;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn .ho-btn-icon {\n width: 22px;\n height: 22px;\n display: inline-block;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn .ho-btn-icon svg {\n width: 100%;\n height: 100%;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn-primary {\n background: white;\n color: #F25F34;\n box-shadow: 0 8px 20px rgba(0,0,0,0.15);\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn-primary:hover {\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 12px 30px rgba(0,0,0,0.2);\n }\n \/* ===========================================\n FLOATING BUTTON\n =========================================== *\/\n a.ho-floating-btn {\n position: fixed;\n bottom: 30px;\n right: 30px;\n background: #F25F34;\n color: white;\n padding: 18px 30px;\n border-radius: 50px;\n text-decoration: none;\n font-weight: 700;\n font-size: 18px;\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4);\n z-index: 1000;\n opacity: 0;\n transform: translateY(100px);\n transition: all 0.5s ease;\n font-family: 'Afacad', sans-serif;\n display: flex;\n align-items: center;\n gap: 10px;\n border: 3px solid white;\n animation: pulse 2s infinite;\n min-width: 160px;\n justify-content: center;\n }\n a.ho-floating-btn .ho-btn-icon {\n width: 20px;\n height: 20px;\n display: inline-block;\n }\n a.ho-floating-btn .ho-btn-icon svg {\n width: 100%;\n height: 100%;\n }\n a.ho-floating-btn.visible {\n opacity: 1;\n transform: translateY(0);\n }\n a.ho-floating-btn:hover {\n background: #dc4e37;\n color: white;\n transform: translateY(-5px) scale(1.05);\n box-shadow: 0 12px 35px rgba(242, 95, 52, 0.5);\n animation-play-state: paused;\n }\n @keyframes pulse {\n 0% {\n transform: scale(1);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4), 0 0 0 0 rgba(242, 95, 52, 0.7);\n }\n 70% {\n transform: scale(1.05);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4), 0 0 0 10px rgba(242, 95, 52, 0);\n }\n 100% {\n transform: scale(1);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4), 0 0 0 0 rgba(242, 95, 52, 0);\n }\n }\n \/* Mobile Responsive \u2014 breakpoints mirror the FAQ band *\/\n @media (max-width: 768px) {\n section.ho-final-cta {\n padding: 40px 20px 60px 20px;\n }\n section.ho-final-cta .ho-final-cta-title {\n font-size: 36px;\n line-height: 1.2;\n }\n section.ho-final-cta .ho-final-cta-subtitle {\n font-size: 17px;\n margin-bottom: 30px;\n line-height: 1.5;\n }\n section.ho-final-cta .ho-final-cta-buttons {\n flex-direction: column;\n align-items: center;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n padding: 18px 35px;\n font-size: 18px;\n width: 90%;\n max-width: 320px;\n justify-content: center;\n }\n a.ho-floating-btn {\n bottom: 25px;\n right: 25px;\n padding: 16px 28px;\n font-size: 17px;\n min-width: 150px;\n }\n }\n @media (max-width: 480px) {\n section.ho-final-cta {\n padding: 35px 15px 50px 15px;\n }\n section.ho-final-cta .ho-final-cta-title {\n font-size: 32px;\n line-height: 1.2;\n }\n section.ho-final-cta .ho-final-cta-subtitle {\n font-size: 16px;\n line-height: 1.5;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n width: 95%;\n max-width: 300px;\n padding: 18px 30px;\n font-size: 17px;\n }\n a.ho-floating-btn {\n bottom: 20px;\n right: 20px;\n padding: 15px 25px;\n font-size: 16px;\n min-width: 140px;\n }\n }\n @media (max-width: 360px) {\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n width: 98%;\n max-width: 280px;\n font-size: 16px;\n }\n a.ho-floating-btn {\n bottom: 15px;\n right: 15px;\n padding: 14px 22px;\n font-size: 15px;\n min-width: 130px;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n a.ho-floating-btn {\n animation: none;\n transition: opacity 0.3s ease;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n transition: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"ho-final-cta\" id=\"gift-cards\">\n <div class=\"ho-container\">\n <div class=\"ho-final-cta-content\">\n <h2 class=\"ho-final-cta-title\">Ready to Give the <span class=\"ho-handmade-circle\">Perfect<\/span> Gift?<\/h2>\n <p class=\"ho-final-cta-subtitle\">Join thousands of happy gift-givers who chose Hands On experiences. Give more than a gift – give a memory that lasts forever.<\/p>\n\n <div class=\"ho-final-cta-buttons\">\n <a href=\"#purchase\" class=\"ho-btn ho-btn-primary\">\n <span class=\"ho-btn-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"currentColor\"\/>\n <\/svg>\n <\/span>\n Offer a Gift Card\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <a href=\"#purchase\" class=\"ho-floating-btn\" id=\"floatingBtn\">\n <span class=\"ho-btn-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"currentColor\"\/>\n <\/svg>\n <\/span>\n Gift Cards\n <\/a>\n <script>\n \/\/ Floating button functionality\n var floatingBtn = document.getElementById('floatingBtn');\n var hasScrolled = false;\n function checkScroll() {\n var scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n\n if (scrollTop > 100 && !hasScrolled) {\n hasScrolled = true;\n floatingBtn.classList.add('visible');\n } else if (scrollTop <= 100 && hasScrolled) {\n hasScrolled = false;\n floatingBtn.classList.remove('visible');\n }\n }\n \/\/ Listen for scroll events with passive option for better performance\n window.addEventListener('scroll', checkScroll, { passive: true });\n\n \/\/ Check initial position\n checkScroll();\n \/\/ Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(function(anchor) {\n anchor.addEventListener('click', function(e) {\n var target = document.querySelector(this.getAttribute('href'));\n if (target) {\n e.preventDefault();\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hero Section – Gift Cards Give the Gift of Discovery Choose from hundreds of unique hands-on workshops across Portugal and offer the joy of learning directly with passionate local artisans and skilled teachers Buy a Gift Card Valid for 12 months \u00b7 Any amount How It Works Section – Gift Cards How It Works 1 […]<\/p>\n","protected":false},"author":138,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15769","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/15769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/comments?post=15769"}],"version-history":[{"count":108,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/15769\/revisions"}],"predecessor-version":[{"id":59253,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/15769\/revisions\/59253"}],"wp:attachment":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/media?parent=15769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Hero Section - Gift Cards<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n\n \/* ===========================================\n HERO SECTION\n =========================================== *\/\n section.ho-hero {\n background: #FDFCF4;\n color: #333333;\n padding: 80px 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 500px;\n width: 100%;\n max-width: 100%;\n }\n\n section.ho-hero .ho-hero-content {\n max-width: 800px;\n width: 100%;\n text-align: center;\n }\n\n section.ho-hero h1 {\n font-size: 56px;\n font-weight: 700;\n margin-bottom: 25px;\n line-height: 1.1;\n color: #333333;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n justify-content: center;\n }\n\n section.ho-hero h1 .ho-gift-icon {\n width: 52px;\n height: 52px;\n display: inline-block;\n vertical-align: middle;\n }\n\n section.ho-hero h1 .ho-gift-icon svg {\n width: 100%;\n height: 100%;\n }\n\n section.ho-hero .ho-description {\n font-size: 20px;\n margin-bottom: 35px;\n opacity: 0.75;\n color: #333333;\n font-weight: 400;\n line-height: 1.5;\n }\n\n .ho-cta-buttons {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn {\n padding: 18px 35px;\n border: none;\n border-radius: 50px;\n font-weight: 700;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 18px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: 'Afacad', sans-serif;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn .ho-btn-icon {\n width: 20px;\n height: 20px;\n display: inline-block;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn .ho-btn-icon svg {\n width: 100%;\n height: 100%;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn-primary {\n background: #F25F34;\n color: white;\n border: 3px solid white;\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4);\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn-primary:hover {\n background: #dc4e37;\n color: white;\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 12px 35px rgba(242, 95, 52, 0.5);\n }\n\n \/* CTA subtext under the button *\/\n section.ho-hero .ho-cta-subtext {\n margin-top: 16px;\n font-size: 15px;\n opacity: 0.65;\n color: #333333;\n font-weight: 500;\n text-align: center;\n }\n\n \/* Stats row *\/\n section.ho-hero .ho-stats-row {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 40px;\n margin-top: 45px;\n flex-wrap: wrap;\n }\n\n section.ho-hero .ho-stat {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n section.ho-hero .ho-stat .ho-stat-number {\n font-size: 28px;\n font-weight: 700;\n color: #F25F34;\n line-height: 1.2;\n }\n\n section.ho-hero .ho-stat .ho-stat-label {\n font-size: 15px;\n opacity: 0.7;\n color: #333333;\n font-weight: 500;\n margin-top: 2px;\n }\n\n section.ho-hero .ho-stat-divider {\n width: 1px;\n height: 40px;\n background: rgba(51, 51, 51, 0.15);\n }\n\n \/* Mobile Responsive *\/\n @media (max-width: 768px) {\n section.ho-hero {\n padding: 40px 20px 30px 20px;\n min-height: auto;\n }\n\n section.ho-hero .ho-hero-content {\n max-width: 100%;\n }\n\n section.ho-hero h1 {\n font-size: 48px;\n margin-bottom: 20px;\n padding: 0 10px;\n line-height: 1.1;\n }\n\n section.ho-hero h1 .ho-gift-icon {\n width: 46px;\n height: 46px;\n }\n\n section.ho-hero .ho-description {\n font-size: 18px;\n margin-bottom: 30px;\n padding: 0 10px;\n line-height: 1.5;\n }\n\n section.ho-hero .ho-cta-buttons {\n flex-direction: column;\n align-items: center;\n gap: 15px;\n padding: 0 10px;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn {\n width: 90%;\n max-width: 320px;\n justify-content: center;\n padding: 20px 35px;\n font-size: 18px;\n }\n\n section.ho-hero .ho-stats-row {\n gap: 25px;\n margin-top: 35px;\n }\n\n section.ho-hero .ho-stat .ho-stat-number {\n font-size: 24px;\n }\n\n section.ho-hero .ho-stat .ho-stat-label {\n font-size: 14px;\n }\n }\n\n @media (max-width: 480px) {\n section.ho-hero {\n padding: 30px 15px 25px 15px;\n }\n\n section.ho-hero h1 {\n font-size: 42px;\n padding: 0 5px;\n line-height: 1.1;\n margin-bottom: 18px;\n }\n\n section.ho-hero h1 .ho-gift-icon {\n width: 42px;\n height: 42px;\n }\n\n section.ho-hero .ho-description {\n font-size: 17px;\n padding: 0 5px;\n line-height: 1.5;\n margin-bottom: 25px;\n }\n\n section.ho-hero .ho-cta-buttons {\n padding: 0 5px;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn {\n width: 95%;\n max-width: 300px;\n padding: 18px 30px;\n font-size: 17px;\n }\n\n section.ho-hero .ho-stats-row {\n gap: 18px;\n margin-top: 30px;\n }\n\n section.ho-hero .ho-stat-divider {\n height: 32px;\n }\n }\n\n @media (max-width: 360px) {\n section.ho-hero {\n padding: 25px 10px 20px 10px;\n }\n\n section.ho-hero h1 {\n font-size: 38px;\n line-height: 1.1;\n padding: 0;\n }\n\n section.ho-hero h1 .ho-gift-icon {\n width: 38px;\n height: 38px;\n }\n\n section.ho-hero .ho-description {\n font-size: 16px;\n line-height: 1.5;\n padding: 0;\n }\n\n section.ho-hero .ho-cta-buttons .ho-btn {\n width: 98%;\n max-width: 280px;\n font-size: 16px;\n }\n\n section.ho-hero .ho-stats-row {\n gap: 14px;\n }\n\n section.ho-hero .ho-stat .ho-stat-number {\n font-size: 20px;\n }\n\n section.ho-hero .ho-stat .ho-stat-label {\n font-size: 13px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"ho-hero\">\n <div class=\"ho-hero-content\">\n <h1>\n <span class=\"ho-gift-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"#F25F34\" stroke=\"#F25F34\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"#F25F34\" stroke=\"#F25F34\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/span>\n Give the Gift of <span class=\"ho-handmade-circle\">Discovery<\/span>\n <\/h1>\n <p class=\"ho-description\">Choose from hundreds of unique hands-on workshops across Portugal and offer the joy of learning directly with passionate local artisans and skilled teachers<\/p>\n\n <div class=\"ho-cta-buttons\">\n <a href=\"#purchase\" class=\"ho-btn ho-btn-primary\">\n <span class=\"ho-btn-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"currentColor\"\/>\n <\/svg>\n <\/span>\n Buy a Gift Card\n <\/a>\n <\/div>\n\n <p class=\"ho-cta-subtext\">Valid for 12 months \u00b7 Any amount<\/p>\n <\/div>\n <\/section>\n\n <script>\n \/\/ Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e431a4 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"4e431a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"760\" height=\"625\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-1024x842.png\" class=\"attachment-large size-large wp-image-21928\" alt=\"Homepage banner\" srcset=\"https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-1024x842.png 1024w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-300x247.png 300w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-768x632.png 768w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-590x485.png 590w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-815x670.png 815w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-577x475.png 577w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856-600x493.png 600w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/Homepage-banner-e1763568824856.png 1194w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81103e7 elementor-widget-widescreen__width-inherit elementor-hidden-widescreen elementor-hidden-desktop elementor-hidden-laptop elementor-widget elementor-widget-image\" data-id=\"81103e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"760\" height=\"380\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-1024x512.png\" class=\"attachment-large size-large wp-image-21830\" alt=\"giftcard banner\" srcset=\"https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-1024x512.png 1024w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-300x150.png 300w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-768x384.png 768w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-590x295.png 590w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-577x289.png 577w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner-600x300.png 600w, https:\/\/handson.pt\/wp-content\/uploads\/2025\/11\/giftcard-banner.png 1200w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-113a5ab e-flex e-con-boxed e-con e-parent\" data-id=\"113a5ab\" 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-1084e57 elementor-widget elementor-widget-html\" data-id=\"1084e57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>How It Works Section - Gift Cards<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n\n \/* ===========================================\n HOW IT WORKS SECTION\n =========================================== *\/\n .ho-how-it-works {\n background: #FDFCF4;\n padding: 80px 40px;\n width: 100%;\n }\n\n .ho-how-it-works-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 70px;\n color: #333333;\n line-height: 1.2;\n }\n\n .ho-steps {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 40px;\n max-width: 1400px;\n margin: 0 auto;\n position: relative;\n }\n\n \/* Connecting line across the desktop row, sitting behind the icon circles *\/\n .ho-steps::before {\n content: \"\";\n position: absolute;\n top: 40px;\n left: 12.5%;\n right: 12.5%;\n height: 2px;\n background: repeating-linear-gradient(\n to right,\n rgba(242, 95, 52, 0.35) 0,\n rgba(242, 95, 52, 0.35) 10px,\n transparent 10px,\n transparent 20px\n );\n z-index: 0;\n }\n\n .ho-step {\n text-align: center;\n position: relative;\n z-index: 1;\n transition: transform 0.3s ease;\n }\n\n .ho-step:hover {\n transform: translateY(-6px);\n }\n\n .ho-step-icon-wrap {\n position: relative;\n width: 80px;\n height: 80px;\n margin: 0 auto 30px;\n }\n\n .ho-step-number {\n position: absolute;\n top: -8px;\n right: -8px;\n width: 26px;\n height: 26px;\n background: #F25F34;\n color: white;\n border: 2px solid #FDFCF4;\n border-radius: 50%;\n font-size: 13px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n }\n\n .ho-step-icon {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: #FBEAE3;\n transition: background 0.3s ease, transform 0.3s ease;\n }\n\n .ho-step:hover .ho-step-icon {\n background: #F25F34;\n }\n\n .ho-step:hover .ho-step-icon svg path,\n .ho-step:hover .ho-step-icon svg circle {\n stroke: white;\n }\n\n .ho-step:hover .ho-step-icon svg path[fill=\"#F25F34\"],\n .ho-step:hover .ho-step-icon svg circle[fill=\"#F25F34\"] {\n fill: white;\n }\n\n .ho-step-icon svg {\n width: 36px;\n height: 36px;\n }\n\n .ho-step h3 {\n font-size: 32px;\n margin-bottom: 25px;\n color: #F25F34;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .ho-step p {\n color: #333333;\n line-height: 1.6;\n font-size: 18px;\n }\n\n \/* Mobile Responsive *\/\n @media (max-width: 1024px) {\n .ho-steps {\n grid-template-columns: repeat(2, 1fr);\n gap: 50px;\n max-width: 800px;\n }\n\n .ho-steps::before {\n display: none;\n }\n\n .ho-how-it-works {\n padding: 60px 30px;\n }\n }\n\n @media (max-width: 768px) {\n .ho-steps {\n grid-template-columns: 1fr;\n gap: 25px;\n max-width: 600px;\n }\n\n .ho-step {\n display: flex;\n gap: 20px;\n text-align: left;\n align-items: center;\n }\n\n .ho-step:hover {\n transform: none;\n }\n\n .ho-step-icon-wrap {\n width: 80px;\n height: 80px;\n margin: 0;\n flex-shrink: 0;\n }\n\n .ho-step-content {\n flex: 1;\n }\n\n .ho-step h3 {\n font-size: 28px;\n margin-bottom: 8px;\n line-height: 1.2;\n }\n\n .ho-step p {\n font-size: 16px;\n line-height: 1.5;\n }\n\n .ho-how-it-works {\n padding: 50px 20px;\n }\n\n .ho-how-it-works-title {\n font-size: 36px;\n margin-bottom: 35px;\n line-height: 1.2;\n }\n }\n\n @media (max-width: 480px) {\n .ho-step {\n gap: 15px;\n }\n\n .ho-step-icon-wrap {\n width: 60px;\n height: 60px;\n }\n\n .ho-step-icon {\n width: 60px;\n height: 60px;\n }\n\n .ho-step-icon svg {\n width: 28px;\n height: 28px;\n }\n\n .ho-step-number {\n width: 22px;\n height: 22px;\n font-size: 11px;\n }\n\n .ho-step h3 {\n font-size: 24px;\n margin-bottom: 5px;\n }\n\n .ho-step p {\n font-size: 15px;\n line-height: 1.5;\n }\n\n .ho-how-it-works-title {\n font-size: 32px;\n margin-bottom: 30px;\n line-height: 1.2;\n }\n\n .ho-how-it-works {\n padding: 40px 20px;\n }\n\n .ho-steps {\n gap: 20px;\n }\n }\n\n @media (max-width: 360px) {\n .ho-step {\n gap: 12px;\n }\n\n .ho-step-icon-wrap {\n width: 50px;\n height: 50px;\n }\n\n .ho-step-icon {\n width: 50px;\n height: 50px;\n }\n\n .ho-step-icon svg {\n width: 24px;\n height: 24px;\n }\n\n .ho-step h3 {\n font-size: 22px;\n }\n\n .ho-step p {\n font-size: 14px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"ho-how-it-works\">\n <h2 class=\"ho-how-it-works-title\">How It <span class=\"ho-handmade-circle\">Works<\/span><\/h2>\n <div class=\"ho-steps\">\n <div class=\"ho-step\">\n <div class=\"ho-step-icon-wrap\">\n <span class=\"ho-step-number\">1<\/span>\n <div class=\"ho-step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"6\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"ho-step-content\">\n <h3>Choose<\/h3>\n <p>Select a gift card amount or pick a specific workshop that catches your eye<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-step\">\n <div class=\"ho-step-icon-wrap\">\n <span class=\"ho-step-number\">2<\/span>\n <div class=\"ho-step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" fill=\"#F25F34\" stroke=\"#F25F34\" stroke-width=\"1.5\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"ho-step-content\">\n <h3>Personalize<\/h3>\n <p>Add a heartfelt message and recipient details to make it truly special<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-step\">\n <div class=\"ho-step-icon-wrap\">\n <span class=\"ho-step-number\">3<\/span>\n <div class=\"ho-step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <path d=\"M3 7L12 13L21 7\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"ho-step-content\">\n <h3>Send<\/h3>\n <p>Instant email delivery or schedule for the perfect moment<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-step\">\n <div class=\"ho-step-icon-wrap\">\n <span class=\"ho-step-number\">4<\/span>\n <div class=\"ho-step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M9 12l2 2 4-4\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <path d=\"M15 8C15 8 16 9 17 10\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"ho-step-content\">\n <h3>Relax<\/h3>\n <p>Not the right fit? No problem! Gift cards can be swapped for any other workshop, ensuring everyone finds something they love<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n<\/body>\n<\/html>\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-9727217 e-flex e-con-boxed e-con e-parent\" data-id=\"9727217\" 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-9da2ca1 elementor-widget elementor-widget-html\" data-id=\"9da2ca1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>Gift Options Section - Choose Your Perfect Gift<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n .ho-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n .ho-section {\n padding: 40px 0;\n }\n .ho-gift-options {\n background: #FDFCF4;\n padding: 40px 40px 80px 40px;\n width: 100%;\n }\n .ho-gift-options-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 60px;\n color: #333333;\n line-height: 1.2;\n }\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n .ho-gift-selector {\n background: #FDFCF4;\n border-radius: 20px;\n padding: 50px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n max-width: 1200px;\n margin: 0 auto;\n }\n .ho-gift-type-toggle {\n display: flex;\n background: #f5f5f5;\n border-radius: 50px;\n padding: 5px;\n margin-bottom: 40px;\n }\n .ho-toggle-btn {\n flex: 1;\n padding: 15px 20px;\n border: none;\n border-radius: 50px;\n background: transparent;\n cursor: pointer;\n transition: all 0.3s ease;\n font-weight: 600;\n font-family: 'Afacad', sans-serif;\n font-size: 16px;\n }\n .ho-toggle-btn.active {\n background: #F25F34;\n color: white;\n box-shadow: 0 4px 15px rgba(242, 95, 52, 0.3);\n }\n .ho-amount-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 30px;\n margin: 40px auto;\n max-width: 1200px;\n }\n .ho-amount-card {\n background: white;\n border: 2px solid #333333;\n border-radius: 20px;\n padding: 40px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n .ho-amount-card:hover {\n border-color: #F25F34;\n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.2);\n }\n .ho-amount-card h4 {\n font-size: 40px;\n font-weight: 700;\n color: #F25F34;\n margin-bottom: 15px;\n transition: all 0.3s ease;\n line-height: 1.2;\n }\n .ho-amount-card p {\n font-weight: 600;\n margin-bottom: 12px;\n color: #333;\n font-size: 20px;\n transition: all 0.3s ease;\n line-height: 1.3;\n }\n .ho-amount-card small {\n color: #666;\n font-size: 16px;\n line-height: 1.4;\n transition: all 0.3s ease;\n }\n .ho-custom-amount {\n margin-top: 15px;\n }\n .ho-custom-amount input {\n width: 100%;\n padding: 12px;\n border: 2px solid #e5e5e5;\n border-radius: 10px;\n font-size: 16px;\n text-align: center;\n font-family: 'Afacad', sans-serif;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n .ho-custom-amount input:focus {\n outline: none;\n border-color: #F25F34;\n box-shadow: 0 0 0 3px rgba(242, 95, 52, 0.1);\n }\n .ho-custom-amount input::placeholder {\n color: #999;\n }\n .ho-amount-cta {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: #F25F34;\n color: white;\n border: none;\n padding: 15px;\n font-weight: 700;\n font-size: 16px;\n font-family: 'Afacad', sans-serif;\n cursor: pointer;\n transform: translateY(100%);\n transition: all 0.3s ease;\n border-radius: 0 0 18px 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n .ho-amount-card:hover .ho-amount-cta {\n transform: translateY(0);\n }\n .ho-amount-cta:hover {\n background: #dc4e37;\n }\n .ho-workshop-options {\n display: none;\n }\n .ho-workshop-options.active {\n display: block;\n }\n .ho-workshops-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n margin: 30px auto;\n max-width: 1200px;\n }\n .ho-workshop-card {\n background: white;\n border: 2px solid #333333;\n border-radius: 20px;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n }\n .ho-workshop-card-link {\n text-decoration: none;\n color: inherit;\n display: block;\n }\n .ho-workshop-card-link:hover,\n .ho-workshop-card-link:focus,\n .ho-workshop-card-link:active {\n text-decoration: none;\n color: inherit;\n }\n .ho-workshop-card:hover,\n .ho-workshop-card.selected {\n border-color: #F25F34;\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.2);\n }\n .ho-workshop-image {\n width: 100%;\n height: 200px;\n background: #f0f0f0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #666;\n font-style: italic;\n overflow: hidden;\n }\n .ho-workshop-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .ho-workshop-image .ho-search-icon {\n width: 60px;\n height: 60px;\n }\n .ho-workshop-image .ho-search-icon svg {\n width: 100%;\n height: 100%;\n }\n .ho-workshop-content {\n padding: 20px;\n }\n .ho-workshop-title {\n font-size: 20px;\n font-weight: 700;\n color: #F25F34;\n margin-bottom: 8px;\n line-height: 1.3;\n }\n .ho-workshop-price {\n font-size: 17px;\n font-weight: 600;\n color: #333;\n margin-bottom: 8px;\n line-height: 1.3;\n }\n .ho-workshop-description {\n color: #666;\n font-size: 14px;\n line-height: 1.4;\n }\n .ho-categories-preview {\n margin: 40px auto 0;\n padding-top: 30px;\n border-top: 2px solid #f0f0f0;\n position: relative;\n max-width: 1200px;\n }\n .ho-categories-preview::before {\n content: 'OR';\n position: absolute;\n top: -12px;\n left: 50%;\n transform: translateX(-50%);\n background: #FDFCF4;\n padding: 0 20px;\n color: #666;\n font-weight: 600;\n font-size: 14px;\n }\n .ho-categories-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 15px;\n margin-top: 20px;\n }\n .ho-category-tag,\n .ho-category-tag:link,\n .ho-category-tag:visited {\n background: #F25F34;\n color: #ffffff !important;\n padding: 15px;\n border-radius: 50px;\n text-align: center;\n font-weight: 600;\n font-size: 14px;\n transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n .ho-category-tag .ho-category-icon {\n width: 20px;\n height: 20px;\n display: inline-block;\n }\n .ho-category-tag .ho-category-icon svg {\n width: 100%;\n height: 100%;\n }\n .ho-category-tag:hover,\n .ho-category-tag:focus,\n .ho-category-tag:active {\n background: #dc4e37;\n color: #ffffff !important;\n text-decoration: none;\n transform: scale(1.05);\n box-shadow: 0 6px 18px rgba(242, 95, 52, 0.35);\n }\n .ho-category-tag:hover .ho-category-icon svg [fill=\"white\"],\n .ho-category-tag:focus .ho-category-icon svg [fill=\"white\"] {\n fill: #ffffff;\n }\n .ho-category-tag:hover .ho-category-icon svg [stroke=\"white\"],\n .ho-category-tag:focus .ho-category-icon svg [stroke=\"white\"] {\n stroke: #ffffff;\n }\n .ho-browse-btn {\n background: transparent;\n color: #333333;\n border: 2px solid #333333;\n padding: 8px 16px;\n border-radius: 20px;\n font-weight: 600;\n margin-top: 8px;\n cursor: pointer;\n font-family: 'Afacad', sans-serif;\n transition: all 0.3s ease;\n font-size: 14px;\n }\n .ho-browse-btn:hover {\n background: #F25F34;\n border-color: #F25F34;\n color: white;\n }\n @media (max-width: 768px) {\n .ho-gift-options-title {\n font-size: 36px;\n margin-bottom: 30px;\n line-height: 1.2;\n }\n .ho-gift-options {\n padding: 30px 20px 50px 20px;\n }\n .ho-gift-selector {\n padding: 0;\n box-shadow: none;\n }\n .ho-gift-type-toggle {\n margin-bottom: 25px;\n }\n .ho-toggle-btn {\n padding: 12px 16px;\n font-size: 15px;\n }\n \/* Clean mobile layout: Content left, Price + CTA right *\/\n .ho-amount-options {\n grid-template-columns: 1fr;\n gap: 15px;\n margin: 25px auto;\n }\n .ho-amount-card {\n display: flex;\n align-items: center;\n gap: 15px;\n padding: 20px;\n text-align: left;\n }\n .ho-amount-card-content {\n flex: 1;\n }\n .ho-amount-card p {\n font-size: 20px;\n margin-bottom: 5px;\n line-height: 1.2;\n font-weight: 700;\n }\n .ho-amount-card small {\n font-size: 14px;\n display: block;\n line-height: 1.3;\n }\n .ho-amount-card-right {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n }\n .ho-amount-card h4 {\n font-size: 48px;\n margin-bottom: 0;\n line-height: 1;\n }\n \/* Custom amount card special layout *\/\n .ho-amount-card.ho-custom-card {\n flex-direction: column;\n text-align: center;\n }\n .ho-amount-card.ho-custom-card .ho-amount-card-content {\n width: 100%;\n }\n .ho-amount-card.ho-custom-card .ho-amount-card-right {\n width: 100%;\n }\n .ho-custom-amount {\n margin: 10px 0;\n }\n .ho-amount-cta {\n position: static;\n transform: none;\n border-radius: 50px;\n padding: 12px 20px;\n font-size: 16px;\n font-weight: 700;\n min-width: 120px;\n }\n .ho-workshop-title {\n font-size: 18px;\n line-height: 1.3;\n }\n .ho-workshop-price {\n font-size: 16px;\n line-height: 1.3;\n }\n .ho-workshops-grid {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n .ho-categories-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n @media (max-width: 1024px) and (min-width: 769px) {\n .ho-workshops-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n }\n }\n @media (max-width: 480px) {\n .ho-gift-options {\n padding: 20px 15px 40px 15px;\n }\n .ho-gift-options-title {\n font-size: 32px;\n line-height: 1.2;\n }\n .ho-toggle-btn {\n padding: 10px 12px;\n font-size: 14px;\n }\n .ho-amount-card {\n gap: 12px;\n padding: 18px;\n }\n .ho-amount-card h4 {\n font-size: 42px;\n }\n .ho-amount-card p {\n font-size: 18px;\n }\n .ho-amount-card small {\n font-size: 13px;\n }\n .ho-amount-cta {\n padding: 10px 18px;\n font-size: 15px;\n min-width: 110px;\n }\n .ho-workshop-title {\n font-size: 17px;\n }\n .ho-workshop-price {\n font-size: 15px;\n }\n .ho-categories-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"ho-gift-options\" id=\"purchase\">\n <h2 class=\"ho-gift-options-title\">Choose Your <span class=\"ho-handmade-circle\">Perfect<\/span> Gift<\/h2>\n \n <div class=\"ho-gift-type-toggle\">\n <button class=\"ho-toggle-btn active\" onclick=\"toggleGiftType('amount')\">Amount Gift Card<\/button>\n <button class=\"ho-toggle-btn\" onclick=\"toggleGiftType('workshop')\">Specific Workshop<\/button>\n <\/div>\n \n <div class=\"ho-amount-options\" id=\"amountOptions\">\n <div class=\"ho-amount-card\">\n <div class=\"ho-amount-card-content\">\n <p>Perfect Start<\/p>\n <small>Great for intro workshops and creative sessions<\/small>\n <\/div>\n <div class=\"ho-amount-card-right\">\n <h4>\u20ac25<\/h4>\n <button class=\"ho-amount-cta\" onclick=\"addToCart('amount', 25)\">Buy Now<\/button>\n <\/div>\n <\/div>\n \n <div class=\"ho-amount-card\">\n <div class=\"ho-amount-card-content\">\n <p>Popular Choice<\/p>\n <small>Perfect for cooking classes and craft workshops<\/small>\n <\/div>\n <div class=\"ho-amount-card-right\">\n <h4>\u20ac50<\/h4>\n <button class=\"ho-amount-cta\" onclick=\"addToCart('amount', 50)\">Buy Now<\/button>\n <\/div>\n <\/div>\n \n <div class=\"ho-amount-card\">\n <div class=\"ho-amount-card-content\">\n <p>Premium Experience<\/p>\n <small>Full-day workshops and premium experiences<\/small>\n <\/div>\n <div class=\"ho-amount-card-right\">\n <h4>\u20ac100<\/h4>\n <button class=\"ho-amount-cta\" onclick=\"addToCart('amount', 100)\">Buy Now<\/button>\n <\/div>\n <\/div>\n \n <div class=\"ho-amount-card ho-custom-card\">\n <div class=\"ho-amount-card-content\">\n <p>Any Amount<\/p>\n <div class=\"ho-custom-amount\">\n <input type=\"number\" placeholder=\"Enter amount (\u20ac15-\u20ac500)\" min=\"15\" max=\"500\" id=\"customAmount\">\n <\/div>\n <small>Choose the perfect amount for your recipient<\/small>\n <\/div>\n <div class=\"ho-amount-card-right\">\n <button class=\"ho-amount-cta\" onclick=\"addToCartCustom()\">Buy Now<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"ho-workshop-options\" id=\"workshopOptions\">\n <div class=\"ho-workshops-grid\">\n <a href=\"https:\/\/handson.pt\/workshops\/?q=ceramic\" class=\"ho-workshop-card-link\">\n <div class=\"ho-workshop-card\">\n <div class=\"ho-workshop-image\">\n <img decoding=\"async\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2026\/03\/IMG_3571.jpeg\" alt=\"Ceramics Workshops\">\n <\/div>\n <div class=\"ho-workshop-content\">\n <h4 class=\"ho-workshop-title\">Ceramics Workshops<\/h4>\n <p class=\"ho-workshop-price\">From \u20ac25<\/p>\n <p class=\"ho-workshop-description\">Shape, sculpt and paint your own pieces with a professional ceramicist.<\/p>\n <\/div>\n <\/div>\n <\/a>\n \n <a href=\"https:\/\/handson.pt\/workshops\/?q=cooking\" class=\"ho-workshop-card-link\">\n <div class=\"ho-workshop-card\">\n <div class=\"ho-workshop-image\">\n <img decoding=\"async\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2024\/11\/Sushi3-scaled.jpg\" alt=\"Cooking Workshops\">\n <\/div>\n <div class=\"ho-workshop-content\">\n <h4 class=\"ho-workshop-title\">Cooking Workshops<\/h4>\n <p class=\"ho-workshop-price\">From \u20ac50<\/p>\n <p class=\"ho-workshop-description\">Sushi, pastel de nata, sourdough and more \u2014 cook it yourself with a pro.<\/p>\n <\/div>\n <\/div>\n <\/a>\n \n <a href=\"https:\/\/handson.pt\/workshops\/?q=tufting\" class=\"ho-workshop-card-link\">\n <div class=\"ho-workshop-card\">\n <div class=\"ho-workshop-image\">\n <img decoding=\"async\" src=\"https:\/\/handson.pt\/wp-content\/uploads\/2024\/11\/hvzbkh-2-1200x1199.jpg\" alt=\"Tufting Workshops\">\n <\/div>\n <div class=\"ho-workshop-content\">\n <h4 class=\"ho-workshop-title\">Tufting Workshops<\/h4>\n <p class=\"ho-workshop-price\">From \u20ac75<\/p>\n <p class=\"ho-workshop-description\">Design and tuft your own custom rug, finished and delivered to your door.<\/p>\n <\/div>\n <\/div>\n <\/a>\n \n <div class=\"ho-workshop-card\" onclick=\"browseAllWorkshops()\">\n <div class=\"ho-workshop-image\" style=\"background: #F25F34;\">\n <span class=\"ho-search-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"white\" stroke-width=\"2\"\/>\n <path d=\"M21 21L16.65 16.65\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/span>\n <\/div>\n <div class=\"ho-workshop-content\">\n <h4 class=\"ho-workshop-title\">Pick Any Workshop<\/h4>\n <p class=\"ho-workshop-price\">Browse All Options<\/p>\n <p class=\"ho-workshop-description\">Choose from our full collection of amazing workshops and experiences.<\/p>\n <button class=\"ho-browse-btn\" onclick=\"browseAllWorkshops()\">View All Workshops<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"ho-categories-preview\">\n <h3 style=\"margin-bottom: 20px; color: #333; text-align: center; line-height: 1.3;\">All Workshop Categories Available<\/h3>\n <div class=\"ho-categories-grid\">\n <a href=\"[ARTS_CRAFTS_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\" fill=\"white\"\/>\n <\/svg>\n <\/span>\n Arts & Crafts\n <\/a>\n <a href=\"[FOOD_DRINKS_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 2C10.9 2 10 2.9 10 4V12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12V4C14 2.9 13.1 2 12 2Z\" fill=\"white\"\/>\n <path d=\"M12 16C10.9 16 10 16.9 10 18V20C10 21.1 10.9 22 12 22C13.1 22 14 21.1 14 20V18C14 16.9 13.1 16 12 16Z\" fill=\"white\"\/>\n <circle cx=\"7\" cy=\"7\" r=\"2\" fill=\"white\"\/>\n <circle cx=\"17\" cy=\"7\" r=\"2\" fill=\"white\"\/>\n <\/svg>\n <\/span>\n Food & Drinks\n <\/a>\n <a href=\"[FAUNA_FLORA_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M17 8C17 10.76 14.76 13 12 13C9.24 13 7 10.76 7 8C7 5.24 9.24 3 12 3C14.76 3 17 5.24 17 8Z\" fill=\"white\"\/>\n <path d=\"M12 13V21\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M8 17C8 17 9 15 12 15C15 15 16 17 16 17\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/span>\n Fauna & Flora\n <\/a>\n <a href=\"[HOME_DIY_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M3 12L12 3L21 12V20C21 20.55 20.55 21 20 21H4C3.45 21 3 20.55 3 20V12Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/span>\n Home & DIY\n <\/a>\n <a href=\"[SPORTS_FITNESS_URL]\" class=\"ho-category-tag\">\n <span class=\"ho-category-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M6 12H2M22 12H18M12 6V2M12 22V18\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"white\" stroke-width=\"2\"\/>\n <\/svg>\n <\/span>\n Sports & Fitness\n <\/a>\n <a href=\"[ALL_CATEGORIES_URL]\" class=\"ho-category-tag\">+ More<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n var currentGiftType = 'amount';\n function toggleGiftType(type) {\n currentGiftType = type;\n var buttons = document.querySelectorAll('.ho-toggle-btn');\n buttons.forEach(function(btn) { btn.classList.remove('active'); });\n event.target.classList.add('active');\n \n if (type === 'amount') {\n document.getElementById('amountOptions').style.display = 'grid';\n document.getElementById('workshopOptions').style.display = 'none';\n } else {\n document.getElementById('amountOptions').style.display = 'none';\n document.getElementById('workshopOptions').style.display = 'block';\n }\n }\n function addToCart(type, amount) {\n console.log('Adding to cart:', type, amount);\n \/\/ Redirect to gift card purchase page with amount_price parameter\n if (type === 'workshop') {\n window.location.href = '\/gift-card-purchase\/?listing_id=' + amount;\n } else {\n window.location.href = '\/gift-card-purchase\/?amount_price=' + amount;\n }\n }\n function addToCartCustom() {\n var customAmountInput = document.getElementById('customAmount');\n var customAmount = customAmountInput.value;\n \n \/\/ Check if input is empty\n if (!customAmount || customAmount.trim() === '') {\n customAmountInput.focus();\n customAmountInput.style.borderColor = '#F25F34';\n customAmountInput.style.boxShadow = '0 0 0 3px rgba(242, 95, 52, 0.2)';\n alert('Please enter an amount first');\n return;\n }\n \n \/\/ Check if amount is within valid range\n var amount = parseFloat(customAmount);\n if (amount < 15 || amount > 500) {\n customAmountInput.focus();\n customAmountInput.style.borderColor = '#F25F34';\n customAmountInput.style.boxShadow = '0 0 0 3px rgba(242, 95, 52, 0.2)';\n alert('Please enter a valid amount between \u20ac15 and \u20ac500');\n return;\n }\n \n \/\/ Reset input styling and proceed\n customAmountInput.style.borderColor = '#e5e5e5';\n customAmountInput.style.boxShadow = 'none';\n \n console.log('Adding custom amount to cart:', amount);\n \/\/ Redirect to gift card purchase page with amount_price parameter\n window.location.href = '\/gift-card-purchase\/?amount_price=' + amount;\n }\n function browseAllWorkshops() {\n window.open('https:\/\/handson.pt\/workshops', '_blank');\n }\n <\/script>\n<\/body>\n<\/html>\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-3bc476d e-flex e-con-boxed e-con e-parent\" data-id=\"3bc476d\" 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-f54a50b elementor-widget elementor-widget-html\" data-id=\"f54a50b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>Trust Section - Why Choose Hands On Gift Cards<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n\n .ho-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n\n .ho-section {\n padding: 40px 0;\n }\n\n .ho-trust-section-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 24px;\n color: #333333;\n line-height: 1.2;\n }\n\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n\n .ho-trust-section {\n background: #FDFCF4;\n padding: 30px 0 60px 0;\n }\n\n .ho-trust-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 25px;\n margin-top: 40px;\n }\n\n .ho-trust-item {\n border-radius: 20px;\n padding: 30px;\n text-align: center;\n transition: transform 0.3s ease;\n }\n\n .ho-trust-item:nth-child(1) { \n background: #F9C8B8; \n }\n \n .ho-trust-item:nth-child(2) { \n background: #B8E6F9; \n }\n \n .ho-trust-item:nth-child(3) { \n background: #C8F9B8; \n }\n \n .ho-trust-item:nth-child(4) { \n background: #F9B8E6; \n }\n\n .ho-trust-item:hover {\n transform: scale(1.02);\n }\n\n .ho-trust-icon {\n width: 60px;\n height: 60px;\n margin: 0 auto 15px;\n display: block;\n }\n\n .ho-trust-icon svg {\n width: 100%;\n height: 100%;\n }\n\n .ho-trust-item h4 {\n margin-bottom: 12px;\n font-weight: 700;\n font-size: 24px;\n line-height: 1.2;\n }\n\n .ho-trust-item:nth-child(1) h4 {\n color: #F25F34;\n }\n\n .ho-trust-item:nth-child(2) h4 {\n color: #256B82;\n }\n\n .ho-trust-item:nth-child(3) h4 {\n color: #4EA494;\n }\n\n .ho-trust-item:nth-child(4) h4 {\n color: #F25F34;\n }\n\n .ho-trust-item p {\n color: #555;\n line-height: 1.5;\n font-size: 16px;\n }\n\n \/* Tablet Responsive - 2x2 Grid *\/\n @media (max-width: 1024px) and (min-width: 769px) {\n .ho-trust-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 30px;\n }\n }\n\n \/* Mobile Responsive - Horizontal Compact Layout *\/\n @media (max-width: 768px) {\n .ho-trust-section {\n padding: 20px 0 40px 0;\n }\n\n .ho-trust-section-title {\n font-size: 36px;\n margin-bottom: 20px;\n line-height: 1.2;\n }\n\n .ho-trust-grid {\n grid-template-columns: 1fr;\n gap: 15px;\n margin-top: 25px;\n }\n\n .ho-trust-item {\n display: flex;\n align-items: center;\n gap: 20px;\n padding: 20px;\n text-align: left;\n }\n\n .ho-trust-icon {\n width: 60px;\n height: 60px;\n margin: 0;\n flex-shrink: 0;\n }\n\n .ho-trust-content {\n flex: 1;\n }\n\n .ho-trust-item h4 {\n font-size: 20px;\n margin-bottom: 5px;\n line-height: 1.2;\n }\n\n .ho-trust-item p {\n font-size: 15px;\n line-height: 1.4;\n }\n }\n\n @media (max-width: 480px) {\n .ho-trust-section {\n padding: 15px 0 35px 0;\n }\n\n .ho-trust-section-title {\n font-size: 32px;\n line-height: 1.2;\n }\n\n .ho-trust-grid {\n gap: 12px;\n margin-top: 20px;\n }\n\n .ho-trust-item {\n gap: 15px;\n padding: 18px;\n }\n\n .ho-trust-icon {\n width: 50px;\n height: 50px;\n }\n\n .ho-trust-item h4 {\n font-size: 18px;\n line-height: 1.2;\n }\n\n .ho-trust-item p {\n font-size: 14px;\n line-height: 1.4;\n }\n }\n\n @media (max-width: 360px) {\n .ho-trust-icon {\n width: 45px;\n height: 45px;\n }\n\n .ho-trust-item h4 {\n font-size: 17px;\n }\n\n .ho-trust-item p {\n font-size: 13px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"ho-trust-section ho-section\">\n <div class=\"ho-container\">\n <h2 class=\"ho-trust-section-title\">Why Choose Hands On <span class=\"ho-handmade-circle\">Gift Cards<\/span>?<\/h2>\n <div class=\"ho-trust-grid\">\n <div class=\"ho-trust-item\">\n <div class=\"ho-trust-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M13 2L3 14H12L11 22L21 10H12L13 2Z\" fill=\"#F25F34\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-trust-content\">\n <h4>Send Now or Later<\/h4>\n <p>Gift cards delivered instantly via email or scheduled for the perfect surprise moment<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-trust-item\">\n <div class=\"ho-trust-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#256B82\" stroke-width=\"2\"\/>\n <path d=\"M12 6V12L16 14\" stroke=\"#256B82\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-trust-content\">\n <h4>12 Month Validity<\/h4>\n <p>Plenty of time to find and book the perfect workshop experience<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-trust-item\">\n <div class=\"ho-trust-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\" stroke=\"#4EA494\" stroke-width=\"2\"\/>\n <path d=\"M2 10H22\" stroke=\"#4EA494\" stroke-width=\"2\"\/>\n <path d=\"M6 15H10\" stroke=\"#4EA494\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-trust-content\">\n <h4>No Hidden Fees<\/h4>\n <p>What you pay is exactly what they get - transparent pricing always<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-trust-item\">\n <div class=\"ho-trust-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#F25F34\" stroke-width=\"2\"\/>\n <path d=\"M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14\" stroke=\"#F25F34\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"#F25F34\"\/>\n <circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-trust-content\">\n <h4>Always the Right Choice<\/h4>\n <p>Verified quality teachers and full flexibility to change workshops - find the perfect fit<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n<\/body>\n<\/html>\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-9c330a1 e-flex e-con-boxed e-con e-parent\" data-id=\"9c330a1\" 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-f15485c elementor-widget elementor-widget-html\" data-id=\"f15485c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>What People Say & FAQ Section<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \/* The full-bleed FAQ uses vw units, which ignore the scrollbar.\n This stops that from producing a horizontal scrollbar. *\/\n html,\n body {\n overflow-x: hidden;\n max-width: 100%;\n }\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n \/* ===========================================\n TESTIMONIALS SECTION\n =========================================== *\/\n .ho-testimonials-section {\n background: #FDFCF4;\n padding: 40px 40px 80px 40px;\n width: 100%;\n }\n .ho-testimonials-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 60px;\n color: #333333;\n line-height: 1.2;\n }\n .ho-testimonials-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 60px;\n max-width: 1400px;\n margin: 0 auto;\n }\n .ho-testimonial {\n text-align: left;\n position: relative;\n }\n .ho-quote-icon {\n width: 50px;\n height: 50px;\n margin-bottom: 20px;\n opacity: 0.3;\n }\n .ho-quote-icon svg {\n width: 100%;\n height: 100%;\n }\n .ho-testimonial-text {\n font-style: italic;\n font-size: 20px;\n margin-bottom: 25px;\n line-height: 1.6;\n color: #333;\n }\n .ho-testimonial-author {\n font-weight: 700;\n color: #F25F34;\n font-size: 22px;\n margin-bottom: 5px;\n line-height: 1.2;\n }\n .ho-testimonial-role {\n color: #666;\n font-size: 18px;\n line-height: 1.3;\n }\n \/* ===========================================\n CTA BUTTON (end of testimonials, before FAQ)\n Mirrors the hero button exactly.\n =========================================== *\/\n .ho-cta-wrap {\n text-align: center;\n margin-top: 60px;\n }\n .ho-cta-wrap .ho-btn {\n padding: 18px 35px;\n border: none;\n border-radius: 50px;\n font-weight: 700;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 18px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: 'Afacad', sans-serif;\n }\n .ho-cta-wrap .ho-btn .ho-btn-icon {\n width: 20px;\n height: 20px;\n display: inline-block;\n }\n .ho-cta-wrap .ho-btn .ho-btn-icon svg {\n width: 100%;\n height: 100%;\n }\n .ho-cta-wrap .ho-btn-primary,\n .ho-cta-wrap .ho-btn-primary:link,\n .ho-cta-wrap .ho-btn-primary:visited {\n background: #F25F34;\n color: #ffffff !important;\n border: 3px solid white;\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4);\n }\n .ho-cta-wrap .ho-btn-primary:hover,\n .ho-cta-wrap .ho-btn-primary:focus,\n .ho-cta-wrap .ho-btn-primary:active {\n background: #dc4e37;\n color: #ffffff !important;\n text-decoration: none;\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 12px 35px rgba(242, 95, 52, 0.5);\n }\n \/* ===========================================\n FAQ SECTION\n =========================================== *\/\n .ho-faq-section {\n background: #256B82;\n padding: 60px 40px 80px 40px;\n \/* Full-bleed: breaks out of the theme's max-width container so the\n teal reaches both edges of the viewport. *\/\n width: auto;\n margin-left: calc(50% - 50vw);\n margin-right: calc(50% - 50vw);\n }\n .ho-faq-title {\n font-size: 48px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 40px;\n color: white;\n line-height: 1.2;\n }\n .ho-faq-intro {\n text-align: center;\n margin-bottom: 60px;\n color: rgba(255,255,255,0.9);\n font-size: 20px;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.5;\n }\n .ho-faq-container {\n max-width: 1000px;\n margin: 0 auto;\n }\n .ho-faq-item {\n margin-bottom: 30px;\n }\n .ho-faq-question {\n width: 100%;\n text-align: left;\n background: transparent;\n border: none;\n padding: 25px 0;\n font-size: 24px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: border-color 0.3s ease;\n font-family: 'Afacad', sans-serif;\n color: #ffffff;\n border-bottom: 2px solid rgba(255,255,255,0.2);\n line-height: 1.3;\n }\n \/* Text stays white for contrast; the teal accent moves to the rule and the icon *\/\n .ho-faq-question:hover,\n .ho-faq-question:focus-visible,\n .ho-faq-question.active {\n color: #ffffff;\n border-bottom-color: #4EA494;\n }\n .ho-faq-question:focus-visible {\n outline: 2px solid #4EA494;\n outline-offset: 4px;\n }\n .ho-faq-icon {\n font-size: 32px;\n font-weight: bold;\n line-height: 1;\n transition: transform 0.3s ease;\n color: #4EA494;\n flex-shrink: 0;\n margin-left: 15px;\n }\n \/* The \"+\" rotates into an \"\u00d7\" \u2014 the character itself never changes *\/\n .ho-faq-question.active .ho-faq-icon {\n transform: rotate(45deg);\n }\n .ho-faq-answer {\n padding: 0;\n color: rgba(255,255,255,0.85);\n line-height: 1.6;\n font-size: 18px;\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease;\n }\n .ho-faq-answer.active {\n padding: 25px 0 0 0;\n }\n .ho-faq-answer a {\n color: #ffffff;\n text-decoration: underline;\n text-underline-offset: 3px;\n }\n .ho-faq-answer p + p {\n margin-top: 14px;\n }\n .ho-faq-answer ul {\n margin: 14px 0 0 0;\n padding-left: 22px;\n list-style: none;\n }\n .ho-faq-answer ul li {\n position: relative;\n padding-left: 4px;\n margin-bottom: 8px;\n }\n .ho-faq-answer ul li::before {\n content: \"\";\n position: absolute;\n left: -18px;\n top: 12px;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: #4EA494;\n }\n .ho-faq-answer ul li:last-child {\n margin-bottom: 0;\n }\n \/* ===========================================\n FAQ CONTACT NOTE\n =========================================== *\/\n .ho-faq-contact {\n max-width: 1000px;\n margin: 60px auto 0 auto;\n text-align: center;\n color: rgba(255,255,255,0.9);\n font-size: 20px;\n line-height: 1.6;\n }\n .ho-faq-contact a {\n color: #ffffff;\n font-weight: 700;\n text-decoration: underline;\n text-underline-offset: 3px;\n transition: color 0.3s ease;\n }\n .ho-faq-contact a:hover,\n .ho-faq-contact a:focus-visible {\n color: #4EA494;\n }\n \/* Mobile Responsive *\/\n @media (max-width: 1024px) {\n .ho-testimonials-grid {\n grid-template-columns: 1fr;\n gap: 50px;\n max-width: 800px;\n }\n }\n @media (max-width: 768px) {\n .ho-testimonials-section {\n padding: 25px 20px 50px 20px;\n }\n .ho-faq-section {\n padding: 40px 20px 60px 20px;\n }\n .ho-testimonials-title,\n .ho-faq-title {\n font-size: 36px;\n margin-bottom: 35px;\n line-height: 1.2;\n }\n .ho-testimonials-grid {\n gap: 35px;\n }\n .ho-testimonial {\n display: flex;\n align-items: flex-start;\n gap: 15px;\n }\n .ho-quote-icon {\n width: 40px;\n height: 40px;\n margin-bottom: 0;\n flex-shrink: 0;\n }\n .ho-testimonial-content {\n flex: 1;\n }\n .ho-testimonial-text {\n font-size: 17px;\n margin-bottom: 15px;\n line-height: 1.5;\n }\n .ho-testimonial-author {\n font-size: 19px;\n margin-bottom: 3px;\n line-height: 1.2;\n }\n .ho-testimonial-role {\n font-size: 16px;\n line-height: 1.3;\n }\n .ho-cta-wrap {\n margin-top: 40px;\n }\n .ho-cta-wrap .ho-btn {\n width: 90%;\n max-width: 320px;\n justify-content: center;\n padding: 20px 35px;\n font-size: 18px;\n }\n .ho-faq-intro {\n font-size: 17px;\n margin-bottom: 35px;\n line-height: 1.5;\n }\n .ho-faq-question {\n font-size: 18px;\n padding: 18px 0;\n line-height: 1.3;\n }\n .ho-faq-answer {\n font-size: 16px;\n line-height: 1.5;\n }\n .ho-faq-icon {\n font-size: 26px;\n }\n .ho-faq-contact {\n font-size: 17px;\n margin-top: 45px;\n }\n }\n @media (max-width: 480px) {\n .ho-testimonials-section {\n padding: 20px 15px 40px 15px;\n }\n .ho-faq-section {\n padding: 35px 15px 50px 15px;\n }\n .ho-testimonials-title,\n .ho-faq-title {\n font-size: 32px;\n line-height: 1.2;\n }\n .ho-testimonials-grid {\n gap: 30px;\n }\n .ho-testimonial {\n gap: 12px;\n }\n .ho-quote-icon {\n width: 35px;\n height: 35px;\n }\n .ho-testimonial-text {\n font-size: 16px;\n line-height: 1.5;\n }\n .ho-testimonial-author {\n font-size: 18px;\n line-height: 1.2;\n }\n .ho-testimonial-role {\n font-size: 15px;\n line-height: 1.3;\n }\n .ho-cta-wrap {\n margin-top: 35px;\n }\n .ho-cta-wrap .ho-btn {\n width: 95%;\n max-width: 300px;\n padding: 18px 30px;\n font-size: 17px;\n }\n .ho-faq-intro {\n font-size: 16px;\n line-height: 1.5;\n }\n .ho-faq-question {\n font-size: 17px;\n padding: 16px 0;\n line-height: 1.3;\n }\n .ho-faq-answer {\n font-size: 15px;\n line-height: 1.5;\n }\n .ho-faq-icon {\n font-size: 24px;\n }\n .ho-faq-contact {\n font-size: 16px;\n margin-top: 40px;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .ho-cta-wrap .ho-btn,\n .ho-faq-answer,\n .ho-faq-icon,\n .ho-faq-question {\n transition: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"ho-testimonials-section\" id=\"testimonials\">\n <h2 class=\"ho-testimonials-title\">What <span class=\"ho-handmade-circle\">People<\/span> Say<\/h2>\n <div class=\"ho-testimonials-grid\">\n <div class=\"ho-testimonial\">\n <div class=\"ho-quote-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M10 8C10 8 8 10 8 13C8 16 10 18 13 18C16 18 18 16 18 13C18 10 16 8 13 8C12 8 11 8.5 10 9V8Z\" fill=\"#F25F34\"\/>\n <path d=\"M3 8C3 8 1 10 1 13C1 16 3 18 6 18C9 18 11 16 11 13C11 10 9 8 6 8C5 8 4 8.5 3 9V8Z\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-testimonial-content\">\n <div class=\"ho-testimonial-text\">\n “The pottery workshop was absolutely amazing! Such a thoughtful gift that created lasting memories. I never knew I had such creative potential!”\n <\/div>\n <div class=\"ho-testimonial-author\">Maria S.<\/div>\n <div class=\"ho-testimonial-role\">Gift Recipient<\/div>\n <\/div>\n <\/div>\n <div class=\"ho-testimonial\">\n <div class=\"ho-quote-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M10 8C10 8 8 10 8 13C8 16 10 18 13 18C16 18 18 16 18 13C18 10 16 8 13 8C12 8 11 8.5 10 9V8Z\" fill=\"#F25F34\"\/>\n <path d=\"M3 8C3 8 1 10 1 13C1 16 3 18 6 18C9 18 11 16 11 13C11 10 9 8 6 8C5 8 4 8.5 3 9V8Z\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-testimonial-content\">\n <div class=\"ho-testimonial-text\">\n “Perfect last-minute gift solution! The recipient loved being able to choose their own workshop. Will definitely use this again.”\n <\/div>\n <div class=\"ho-testimonial-author\">Jo\u00e3o P.<\/div>\n <div class=\"ho-testimonial-role\">Gift Buyer<\/div>\n <\/div>\n <\/div>\n <div class=\"ho-testimonial\">\n <div class=\"ho-quote-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M10 8C10 8 8 10 8 13C8 16 10 18 13 18C16 18 18 16 18 13C18 10 16 8 13 8C12 8 11 8.5 10 9V8Z\" fill=\"#F25F34\"\/>\n <path d=\"M3 8C3 8 1 10 1 13C1 16 3 18 6 18C9 18 11 16 11 13C11 10 9 8 6 8C5 8 4 8.5 3 9V8Z\" fill=\"#F25F34\"\/>\n <\/svg>\n <\/div>\n <div class=\"ho-testimonial-content\">\n <div class=\"ho-testimonial-text\">\n “As someone who’s hard to shop for, this gift card was perfect. I tried wine making and had the best time. So unique and personal!”\n <\/div>\n <div class=\"ho-testimonial-author\">Ana C.<\/div>\n <div class=\"ho-testimonial-role\">Gift Recipient<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"ho-cta-wrap\">\n <a href=\"#purchase\" class=\"ho-btn ho-btn-primary\">\n <span class=\"ho-btn-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"currentColor\"\/>\n <\/svg>\n <\/span>\n Buy a Gift Card\n <\/a>\n <\/div>\n <\/section>\n \n <section class=\"ho-faq-section\" id=\"faq\">\n <h2 class=\"ho-faq-title\">Frequently Asked <span class=\"ho-handmade-circle\">Questions<\/span><\/h2>\n <div class=\"ho-faq-intro\">\n Have questions about our gift cards? Here are the answers to some of the things you may be wondering.\n <\/div>\n <div class=\"ho-faq-container\">\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q1\" aria-expanded=\"false\" aria-controls=\"faq-a1\" onclick=\"toggleFAQ(this)\">\n Can the recipient choose any workshop?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a1\" role=\"region\" aria-labelledby=\"faq-q1\">\n <p>Absolutely. Our Gift Cards give access to hundreds of workshops and experiences across Portugal, from food and drinks to arts, crafts, wellness, sports and much more. The recipient can choose the experience that suits them best.<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q2\" aria-expanded=\"false\" aria-controls=\"faq-a2\" onclick=\"toggleFAQ(this)\">\n Can the recipient choose the date?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a2\" role=\"region\" aria-labelledby=\"faq-q2\">\n <p>Yes. The Gift Card is not tied to a specific workshop, date or time. The recipient can browse our experiences and book the date that works best for them, subject to the availability of the chosen workshop.<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q3\" aria-expanded=\"false\" aria-controls=\"faq-a3\" onclick=\"toggleFAQ(this)\">\n How will the Gift Card be delivered?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a3\" role=\"region\" aria-labelledby=\"faq-q3\">\n <p>Our Gift Cards are 100% digital and delivered by email. You can send it directly to the recipient, schedule it to arrive on a specific date, or send it to yourself so you can print it and give it in person.<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q4\" aria-expanded=\"false\" aria-controls=\"faq-a4\" onclick=\"toggleFAQ(this)\">\n Can I personalise the Gift Card?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a4\" role=\"region\" aria-labelledby=\"faq-q4\">\n <p>Of course. Add the recipient’s name and a personal message to make the gift feel truly personal. You can also choose when the Gift Card should be delivered, making it easy to plan ahead for birthdays, Christmas, anniversaries or any special occasion.<\/p>\n <\/div>\n <\/div>\n <div class=\"ho-faq-item\">\n <button type=\"button\" class=\"ho-faq-question\" id=\"faq-q5\" aria-expanded=\"false\" aria-controls=\"faq-a5\" onclick=\"toggleFAQ(this)\">\n How long does the recipient have to use it?\n <span class=\"ho-faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <div class=\"ho-faq-answer\" id=\"faq-a5\" role=\"region\" aria-labelledby=\"faq-q5\">\n <p>The Gift Card is valid for 12 months from the date of purchase, so there’s plenty of time to find the perfect experience. If they need a little longer, a one-time 12-month extension can be requested, subject to the applicable fee and conditions.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"ho-faq-contact\">\n Still have questions about your Gift Card, redemption, validity extensions or anything else? Contact us at <a href=\"mailto:hello@handson.pt\">hello@handson.pt<\/a> — we’re happy to help.\n <\/div>\n <\/section>\n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"FAQPage\",\n \"mainEntity\": [\n {\"@type\":\"Question\",\"name\":\"Can the recipient choose any workshop?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Absolutely. Our Gift Cards give access to hundreds of workshops and experiences across Portugal and Spain, from food and drinks to arts, crafts, wellness, sports and much more. The recipient can choose the experience that suits them best, subject to availability.\"}},\n {\"@type\":\"Question\",\"name\":\"Can the recipient choose the date?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. The Gift Card is not tied to a specific workshop, date or time. The recipient can browse our experiences and book the date that works best for them, subject to the availability of the chosen workshop.\"}},\n {\"@type\":\"Question\",\"name\":\"How will the Gift Card be delivered?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Our Gift Cards are 100% digital and delivered by email. You can send it directly to the recipient, schedule it to arrive on a specific date, or send it to yourself so you can print it and give it in person.\"}},\n {\"@type\":\"Question\",\"name\":\"Can I personalise the Gift Card?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Of course. Add the recipient\u2019s name and a personal message to make the gift feel truly personal. You can also choose when the Gift Card should be delivered, making it easy to plan ahead for birthdays, Christmas, anniversaries or any special occasion.\"}},\n {\"@type\":\"Question\",\"name\":\"How long does the recipient have to use it?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The Gift Card is valid for 12 months from the date of purchase, so there\u2019s plenty of time to find the perfect experience. If they need a little longer, a one-time 12-month extension can be requested, subject to the applicable fee and conditions.\"}}\n ]\n }\n <\/script>\n <script>\n \/\/ Smooth scrolling for anchor links (same behaviour as the hero button)\n document.querySelectorAll('.ho-cta-wrap a[href^=\"#\"]').forEach(function (anchor) {\n anchor.addEventListener('click', function (e) {\n var target = document.querySelector(this.getAttribute('href'));\n if (target) {\n e.preventDefault();\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n });\n function closeAllFAQ() {\n document.querySelectorAll('.ho-faq-question').forEach(function (q) {\n q.classList.remove('active');\n q.setAttribute('aria-expanded', 'false');\n });\n document.querySelectorAll('.ho-faq-answer').forEach(function (a) {\n a.classList.remove('active');\n a.style.maxHeight = null;\n });\n }\n function toggleFAQ(element) {\n var answer = element.nextElementSibling;\n var wasOpen = element.classList.contains('active');\n closeAllFAQ();\n if (!wasOpen) {\n element.classList.add('active');\n element.setAttribute('aria-expanded', 'true');\n answer.classList.add('active');\n \/\/ Measured after the padding is applied, so nothing gets clipped\n \/\/ no matter how long the answer is.\n answer.style.maxHeight = (answer.scrollHeight + 20) + 'px';\n }\n }\n \/\/ Keep the open answer correctly sized if the viewport reflows.\n window.addEventListener('resize', function () {\n var open = document.querySelector('.ho-faq-answer.active');\n if (open) {\n open.style.maxHeight = 'none';\n open.style.maxHeight = (open.scrollHeight + 20) + 'px';\n }\n });\n <\/script>\n<\/body>\n<\/html>\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-3ebd315 e-flex e-con-boxed e-con e-parent\" data-id=\"3ebd315\" 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-2b7b34f elementor-widget elementor-widget-html\" data-id=\"2b7b34f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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, user-scalable=yes\">\n <title>Final CTA Section + Floating Button<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \/* The full-bleed CTA uses vw units, which ignore the scrollbar.\n This stops that from producing a horizontal scrollbar. *\/\n html,\n body {\n overflow-x: hidden;\n max-width: 100%;\n }\n html {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n }\n body {\n font-family: 'Afacad', sans-serif;\n line-height: 1.6;\n color: #333333;\n background: #FDFCF4;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n height: auto;\n min-height: 100vh;\n position: relative;\n }\n .ho-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0;\n }\n .ho-handmade-circle {\n display: inline-block;\n border: 3px solid currentColor;\n border-radius: 50px;\n padding: 8px 24px;\n transform: rotate(-2deg);\n margin: 0 8px;\n }\n \/* ===========================================\n FINAL CTA SECTION\n Full-bleed, matching the teal FAQ band exactly:\n same breakout technique, same paddings.\n =========================================== *\/\n section.ho-final-cta {\n background: #F25F34;\n color: white;\n text-align: center;\n position: relative;\n padding: 60px 40px 80px 40px;\n \/* Full-bleed: breaks out of the theme's max-width container so the\n orange reaches both edges of the viewport. *\/\n width: auto;\n margin-left: calc(50% - 50vw);\n margin-right: calc(50% - 50vw);\n }\n .ho-final-cta::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image\/svg+xml,<svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><g fill=\"%23ffffff\" fill-opacity=\"0.05\"><circle cx=\"30\" cy=\"30\" r=\"4\"\/><\/g><\/svg>') repeat;\n }\n .ho-final-cta-content {\n position: relative;\n z-index: 2;\n }\n .ho-final-cta-title {\n font-size: 48px;\n font-weight: 700;\n margin-bottom: 20px;\n color: white;\n line-height: 1.2;\n }\n .ho-final-cta-subtitle {\n font-size: 20px;\n margin-bottom: 40px;\n opacity: 0.95;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.5;\n }\n .ho-final-cta-buttons {\n display: flex;\n gap: 20px;\n justify-content: center;\n flex-wrap: wrap;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n padding: 18px 35px;\n border: none;\n border-radius: 50px;\n font-weight: 700;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 18px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: 'Afacad', sans-serif;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn .ho-btn-icon {\n width: 22px;\n height: 22px;\n display: inline-block;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn .ho-btn-icon svg {\n width: 100%;\n height: 100%;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn-primary {\n background: white;\n color: #F25F34;\n box-shadow: 0 8px 20px rgba(0,0,0,0.15);\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn-primary:hover {\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 12px 30px rgba(0,0,0,0.2);\n }\n \/* ===========================================\n FLOATING BUTTON\n =========================================== *\/\n a.ho-floating-btn {\n position: fixed;\n bottom: 30px;\n right: 30px;\n background: #F25F34;\n color: white;\n padding: 18px 30px;\n border-radius: 50px;\n text-decoration: none;\n font-weight: 700;\n font-size: 18px;\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4);\n z-index: 1000;\n opacity: 0;\n transform: translateY(100px);\n transition: all 0.5s ease;\n font-family: 'Afacad', sans-serif;\n display: flex;\n align-items: center;\n gap: 10px;\n border: 3px solid white;\n animation: pulse 2s infinite;\n min-width: 160px;\n justify-content: center;\n }\n a.ho-floating-btn .ho-btn-icon {\n width: 20px;\n height: 20px;\n display: inline-block;\n }\n a.ho-floating-btn .ho-btn-icon svg {\n width: 100%;\n height: 100%;\n }\n a.ho-floating-btn.visible {\n opacity: 1;\n transform: translateY(0);\n }\n a.ho-floating-btn:hover {\n background: #dc4e37;\n color: white;\n transform: translateY(-5px) scale(1.05);\n box-shadow: 0 12px 35px rgba(242, 95, 52, 0.5);\n animation-play-state: paused;\n }\n @keyframes pulse {\n 0% {\n transform: scale(1);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4), 0 0 0 0 rgba(242, 95, 52, 0.7);\n }\n 70% {\n transform: scale(1.05);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4), 0 0 0 10px rgba(242, 95, 52, 0);\n }\n 100% {\n transform: scale(1);\n box-shadow: 0 8px 25px rgba(242, 95, 52, 0.4), 0 0 0 0 rgba(242, 95, 52, 0);\n }\n }\n \/* Mobile Responsive \u2014 breakpoints mirror the FAQ band *\/\n @media (max-width: 768px) {\n section.ho-final-cta {\n padding: 40px 20px 60px 20px;\n }\n section.ho-final-cta .ho-final-cta-title {\n font-size: 36px;\n line-height: 1.2;\n }\n section.ho-final-cta .ho-final-cta-subtitle {\n font-size: 17px;\n margin-bottom: 30px;\n line-height: 1.5;\n }\n section.ho-final-cta .ho-final-cta-buttons {\n flex-direction: column;\n align-items: center;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n padding: 18px 35px;\n font-size: 18px;\n width: 90%;\n max-width: 320px;\n justify-content: center;\n }\n a.ho-floating-btn {\n bottom: 25px;\n right: 25px;\n padding: 16px 28px;\n font-size: 17px;\n min-width: 150px;\n }\n }\n @media (max-width: 480px) {\n section.ho-final-cta {\n padding: 35px 15px 50px 15px;\n }\n section.ho-final-cta .ho-final-cta-title {\n font-size: 32px;\n line-height: 1.2;\n }\n section.ho-final-cta .ho-final-cta-subtitle {\n font-size: 16px;\n line-height: 1.5;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n width: 95%;\n max-width: 300px;\n padding: 18px 30px;\n font-size: 17px;\n }\n a.ho-floating-btn {\n bottom: 20px;\n right: 20px;\n padding: 15px 25px;\n font-size: 16px;\n min-width: 140px;\n }\n }\n @media (max-width: 360px) {\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n width: 98%;\n max-width: 280px;\n font-size: 16px;\n }\n a.ho-floating-btn {\n bottom: 15px;\n right: 15px;\n padding: 14px 22px;\n font-size: 15px;\n min-width: 130px;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n a.ho-floating-btn {\n animation: none;\n transition: opacity 0.3s ease;\n }\n section.ho-final-cta .ho-final-cta-buttons .ho-btn {\n transition: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"ho-final-cta\" id=\"gift-cards\">\n <div class=\"ho-container\">\n <div class=\"ho-final-cta-content\">\n <h2 class=\"ho-final-cta-title\">Ready to Give the <span class=\"ho-handmade-circle\">Perfect<\/span> Gift?<\/h2>\n <p class=\"ho-final-cta-subtitle\">Join thousands of happy gift-givers who chose Hands On experiences. Give more than a gift – give a memory that lasts forever.<\/p>\n\n <div class=\"ho-final-cta-buttons\">\n <a href=\"#purchase\" class=\"ho-btn ho-btn-primary\">\n <span class=\"ho-btn-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"currentColor\"\/>\n <\/svg>\n <\/span>\n Offer a Gift Card\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <a href=\"#purchase\" class=\"ho-floating-btn\" id=\"floatingBtn\">\n <span class=\"ho-btn-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10V21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M4 14H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path d=\"M12 10C12 10 9 8 7 8C5 8 4 9 4 10C4 11 5 12 7 12C9 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M12 10C12 10 15 8 17 8C19 8 20 9 20 10C20 11 19 12 17 12C15 12 12 10 12 10Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"1.5\" fill=\"currentColor\"\/>\n <\/svg>\n <\/span>\n Gift Cards\n <\/a>\n <script>\n \/\/ Floating button functionality\n var floatingBtn = document.getElementById('floatingBtn');\n var hasScrolled = false;\n function checkScroll() {\n var scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n\n if (scrollTop > 100 && !hasScrolled) {\n hasScrolled = true;\n floatingBtn.classList.add('visible');\n } else if (scrollTop <= 100 && hasScrolled) {\n hasScrolled = false;\n floatingBtn.classList.remove('visible');\n }\n }\n \/\/ Listen for scroll events with passive option for better performance\n window.addEventListener('scroll', checkScroll, { passive: true });\n\n \/\/ Check initial position\n checkScroll();\n \/\/ Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(function(anchor) {\n anchor.addEventListener('click', function(e) {\n var target = document.querySelector(this.getAttribute('href'));\n if (target) {\n e.preventDefault();\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hero Section – Gift Cards Give the Gift of Discovery Choose from hundreds of unique hands-on workshops across Portugal and offer the joy of learning directly with passionate local artisans and skilled teachers Buy a Gift Card Valid for 12 months \u00b7 Any amount How It Works Section – Gift Cards How It Works 1 […]<\/p>\n","protected":false},"author":138,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15769","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/15769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/comments?post=15769"}],"version-history":[{"count":108,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/15769\/revisions"}],"predecessor-version":[{"id":59253,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/15769\/revisions\/59253"}],"wp:attachment":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/media?parent=15769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}