{"id":30616,"date":"2026-04-27T12:53:33","date_gmt":"2026-04-27T09:53:33","guid":{"rendered":"https:\/\/atheart.gr\/?page_id=30616"},"modified":"2026-05-08T16:01:42","modified_gmt":"2026-05-08T13:01:42","slug":"services","status":"publish","type":"page","link":"https:\/\/atheart.gr\/el\/services\/","title":{"rendered":"\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"30616\" class=\"elementor elementor-30616 elementor-30175\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cae09e1 e-con-full e-flex e-con e-parent\" data-id=\"cae09e1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76ba7f1 elementor-widget elementor-widget-html\" data-id=\"76ba7f1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \/services\/ \u2014 Widget 0 \/ 7 \u00b7 PHOTO HERO HEADER  (parallax)\n     Mirrors the \/about\/ header rhythm: full-bleed photo +\n     centred SVG with two-axis parallax (photo 0.35\u00d7, SVG 0.15\u00d7).\n     The \/services\/ SVG ships with two fill colours (#ffeec9 and\n     #459fff) so it loads as a regular <img> \u2014 no mask recolour.\n     This is the page's FIRST HTML widget on \/services\/, so it\n     carries the Konte `hide-header` crash fix. Remove that fix\n     from services-hero.html (or services-hero-parallax.html) when\n     you ship this.\n     Unique CSS prefix `.ath-shdr-*` (services-header).\n     ============================================================= -->\n<script>\nwindow.addEventListener('DOMContentLoaded', function () {\n  if (!document.getElementById('hide-header')) {\n    window.onscroll = null;\n  }\n});\n<\/script>\n\n<style>\n.ath-shdr,\n.ath-shdr *,\n.ath-shdr *::before,\n.ath-shdr *::after { box-sizing: border-box; }\n\n.ath-shdr {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  \/* Fixed heights: 830px desktop + tablet, 410px mobile. *\/\n  height: 830px;\n  overflow: hidden;\n  isolation: isolate;\n  background: #459fff;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n}\n\n\/* ----- Background photo layer (parallax, slower than scroll) -----\n   Pinned to the BOTTOM of the section: bottom:0 + height:120% means\n   the extra 20% of parallax travel sits *above* the visible area\n   (cropped by overflow:hidden), so the photo's bottom edge always\n   stays anchored at the section's bottom edge.\n   `background-position: center bottom` keeps the photo's subject\n   (the bucket) flush with the bottom of the frame regardless of\n   the bg div's height. *\/\n.ath-shdr__bg {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n  height: 120%;\n  background-image: url(\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_header2_new.jpg\");\n  background-size: cover;\n  background-position: center bottom;\n  background-repeat: no-repeat;\n  will-change: transform;\n  transform: translate3d(0, var(--ath-shdr-bg-y, 0px), 0);\n}\n\n\/* ----- SVG layer (parallax, faster than bg) -----\n   Loaded as <img> because the SVG file uses two fill colours\n   (#ffeec9 + #459fff) \u2014 masking would flatten to one. Widths are\n   FIXED per breakpoint and never scale proportionally. *\/\n.ath-shdr__stamp-wrap {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 2;\n  will-change: transform;\n  transform: translate3d(0, var(--ath-shdr-svg-y, 0px), 0);\n}\n.ath-shdr__stamp {\n  display: block;\n  width: 470px;\n  height: auto;\n  max-width: none !important;\n  \/* Offset 190px down from the section's vertical centre. *\/\n  transform: translateY(190px);\n  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.28));\n}\n\n\/* ----- Responsive -----\n   \u22651024px (desktop) : height 830px, stamp 470px (fixed)\n   768\u20131023px (tab)  : height 830px, stamp 470px (fixed)\n   \u2264767px  (mobile) : height 410px, stamp 230px (fixed) *\/\n@media (max-width: 767px) {\n  .ath-shdr { height: 410px; }\n  .ath-shdr__stamp {\n    width: 230px;\n    \/* Mobile: SVG sits 100px BELOW the section's vertical centre\n       (was -90, +190 down from there \u2192 +100). *\/\n    transform: translateY(100px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ath-shdr__bg,\n  .ath-shdr__stamp-wrap { transform: none !important; }\n}\n<\/style>\n\n<section class=\"ath-shdr\" aria-label=\"ATHEART \u00b7 Services\">\n  <div class=\"ath-shdr__bg\" aria-hidden=\"true\"><\/div>\n  <div class=\"ath-shdr__stamp-wrap\">\n    <img class=\"ath-shdr__stamp\"\n         src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_header.svg\"\n         alt=\"Services\"\n         loading=\"eager\"\n         decoding=\"async\">\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  var section = document.querySelector('.ath-shdr');\n  if (!section) return;\n  var bg = section.querySelector('.ath-shdr__bg');\n  var svgWrap = section.querySelector('.ath-shdr__stamp-wrap');\n  if (!bg || !svgWrap) return;\n\n  var mqReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n  if (mqReduce && mqReduce.matches) return;\n\n  var ticking = false;\n  function update() {\n    var rect = section.getBoundingClientRect();\n    var scrolled = -rect.top;\n    var maxRange = section.offsetHeight + window.innerHeight;\n    if (scrolled < -window.innerHeight) scrolled = -window.innerHeight;\n    if (scrolled > maxRange) scrolled = maxRange;\n    bg.style.setProperty('--ath-shdr-bg-y',  (scrolled * 0.35).toFixed(1) + 'px');\n    svgWrap.style.setProperty('--ath-shdr-svg-y', (scrolled * 0.15).toFixed(1) + 'px');\n    ticking = false;\n  }\n  function onScroll() {\n    if (!ticking) {\n      window.requestAnimationFrame(update);\n      ticking = true;\n    }\n  }\n  update();\n  window.addEventListener('scroll', onScroll, { passive: true });\n  window.addEventListener('resize', onScroll, { passive: true });\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a482a5 e-con-full e-flex e-con e-parent\" data-id=\"8a482a5\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdcf2b4 elementor-widget elementor-widget-html\" data-id=\"fdcf2b4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \/services\/ \u2014 Widget 1 \u00b7 INTRO  (was services-hero.html)\n     \"Let's create together.\" \u2014 Title + intro paragraph + a 4-link\n     anchor index of the services. Renamed from \"hero\" to \"intro\"\n     since the photo+SVG header (services-00-header.html) now leads\n     the page; the Konte hide-header crash fix lives there now.\n\n     Icons load from external SVG URLs (01-wholesale, 02-exclusive,\n     03-custom, 04-graphic) \u2014 colours are kept exactly as authored\n     in the source files; no recolour, no mask, no blend mode.\n     Unique CSS prefix `.ath-svh-*` (kept for parity with the\n     project_atheart_services memory note).\n     ============================================================= -->\n<style>\n.ath-svh,\n.ath-svh *,\n.ath-svh *::before,\n.ath-svh *::after { box-sizing: border-box; }\n\n.ath-svh {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  padding: clamp(80px, 10vw, 140px) clamp(1rem, 4vw, 3rem) clamp(60px, 7vw, 100px);\n  background: #459fff;\n  color: #fff;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n.ath-svh__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* ----- Top block: title left, paragraph right ----- *\/\n.ath-svh__top {\n  display: grid;\n  grid-template-columns: minmax(260px, 5fr) 7fr;\n  gap: clamp(2em, 6vw, 5em);\n  align-items: start;\n  margin-bottom: clamp(2.5em, 5vw, 4em);\n}\n\n\/* Chapter eyebrow lifted out of the title column, sitting on its\n   own line above the title+paragraph grid \u2014 same shape as the\n   \/services\/ white-surface widgets (20px \/ 800 \/ no letter-spacing).\n   Colour adapted from #459fff to #fff for the blue surface. *\/\n.ath-svh__eyebrow {\n  display: block;\n  margin: 0 0 1.4em;\n  font-size: 20px;\n  font-weight: 800;\n  line-height: 1.2;\n  color: #fff;\n}\n\n.ath-svh__title {\n  margin: 0;\n  font-size: 3rem !important;\n  font-weight: 800 !important;\n  line-height: 1.1 !important;\n  letter-spacing: -0.005em;\n  color: #fff;\n}\n\n.ath-svh__text {\n  margin: 0;\n  font-size: clamp(1rem, 1.2vw, 1.08rem);\n  line-height: 1.75;\n  color: rgba(255,255,255,0.92);\n  max-width: 62ch;\n}\n\n\/* ----- Numbered service index ----- *\/\n.ath-svh__index {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  \/* No column gap \u2014 the cards sit flush so the hover overlay\n     covers the full cell. Right-border on each link still draws\n     the column dividers. *\/\n  gap: 0;\n  border-top: 1px solid rgba(255,255,255,0.25);\n}\n\n.ath-svh__row {\n  position: relative;\n  opacity: 0;\n  transform: translateY(20px);\n  transition:\n    opacity 0.6s cubic-bezier(.22,.61,.36,1),\n    transform 0.6s cubic-bezier(.22,.61,.36,1);\n  transition-delay: calc(var(--i, 0) * 90ms);\n}\n.ath-svh__row.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.ath-svh__link {\n  display: flex;\n  flex-direction: column;\n  gap: 0.6em;\n  padding: 1.4em 1.2em 1.6em;\n  color: #fff;\n  text-decoration: none;\n  border-right: 1px solid rgba(255,255,255,0.18);\n  height: 100%;\n  transition: background 0.25s ease, padding 0.25s ease;\n}\n.ath-svh__row:last-child .ath-svh__link { border-right: 0; }\n.ath-svh__link:hover,\n.ath-svh__link:focus-visible {\n  color: #fff;\n  text-decoration: none;\n  background: rgba(255,255,255,0.08);\n  padding-left: 1.5em;\n}\n.ath-svh__link:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: -2px;\n}\n\n.ath-svh__icon {\n  \/* Fixed 64px across all viewports, like the original. *\/\n  display: block;\n  width: 64px;\n  height: 64px;\n  margin: 0 0 0.6em;\n  max-width: none !important;\n  flex-shrink: 0;\n}\n\n.ath-svh__name {\n  font-size: clamp(1.05rem, 1.4vw, 1.25rem);\n  font-weight: 800;\n  line-height: 1.2;\n  color: #fff;\n}\n\n.ath-svh__arrow {\n  margin-top: auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5em;\n  font-size: 0.7rem;\n  letter-spacing: 0.22em;\n  font-weight: 700;\n  color: rgba(255,255,255,0.85);\n  transition: transform 0.25s ease, color 0.25s ease;\n}\n.ath-svh__link:hover .ath-svh__arrow,\n.ath-svh__link:focus-visible .ath-svh__arrow {\n  color: #fff;\n  transform: translateX(4px);\n}\n.ath-svh__arrow svg { width: 18px; height: 18px; }\n\n\/* ----- Responsive ----- *\/\n@media (max-width: 64em) {\n  \/* Tablet keeps the 2-column top grid (title + paragraph) and the\n     full-size title \u2014 only the paragraph column gets narrower so\n     the text wraps tighter. The 4-up service index also stays. *\/\n  .ath-svh__top {\n    gap: clamp(1.5em, 4vw, 3em);\n  }\n  .ath-svh__link {\n    padding: 1.2em 0.9em 1.3em;\n    gap: 0.5em;\n  }\n  .ath-svh__name { font-size: 1.05rem; }\n}\n@media (max-width: 767px) {\n  .ath-svh { padding-top: clamp(50px, 12vw, 80px); }\n  .ath-svh__title { font-size: 44px !important; line-height: 1.1 !important; }\n  \/* Mobile: NOW the top grid stacks (title above paragraph) and\n     the paragraph drops its `max-width: 62ch` so it wraps to the\n     full viewport width. *\/\n  .ath-svh__top {\n    grid-template-columns: 1fr;\n    gap: 1.4em;\n  }\n  .ath-svh__text { max-width: none; }\n  .ath-svh__index {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0;\n  }\n  .ath-svh__row:nth-child(2n) .ath-svh__link { border-right: 0; }\n  .ath-svh__row:last-child .ath-svh__link { border-right: 0; }\n  .ath-svh__row:nth-child(-n+2) .ath-svh__link {\n    border-bottom: 1px solid rgba(255,255,255,0.18);\n  }\n  .ath-svh__link { padding: 1.1em 0.9em 1.2em; }\n  .ath-svh__name { font-size: 1rem; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ath-svh__row {\n    opacity: 1 !important;\n    transform: none !important;\n    transition: none !important;\n  }\n}\n<\/style>\n\n<section class=\"ath-svh\" aria-labelledby=\"ath-svh-heading\">\n  <div class=\"ath-svh__inner\">\n\n    <span class=\"ath-svh__eyebrow\">\u039f\u03b9 \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u03bc\u03b1\u03c2<\/span>\n\n    <div class=\"ath-svh__top\">\n      <h2 class=\"ath-svh__title\" id=\"ath-svh-heading\">\u0391\u03c2 \u03c6\u03c4\u03b9\u03ac\u03be\u03bf\u03c5\u03bc\u03b5<br>\u03bc\u03b1\u03b6\u03af.<\/h2>\n      <p class=\"ath-svh__text\">\n        \u03a0\u03c1\u03bf\u03c3\u03c6\u03ad\u03c1\u03bf\u03c5\u03bc\u03b5 \u03ad\u03bd\u03b1 \u03c6\u03ac\u03c3\u03bc\u03b1 \u03b1\u03c0\u03bf\u03ba\u03bb\u03b5\u03b9\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03b9\u03ce\u03bd,\n        \u03c0\u03c1\u03bf\u03c3\u03b1\u03c1\u03bc\u03bf\u03c3\u03bc\u03ad\u03bd\u03c9\u03bd \u03c3\u03c4\u03b9\u03c2 \u03b1\u03bd\u03ac\u03b3\u03ba\u03b5\u03c2 \u03c3\u03b1\u03c2. \u0395\u03af\u03c4\u03b5 \u03b8\u03ad\u03bb\u03b5\u03c4\u03b5 \u03bd\u03b1 \u03b5\u03ba\u03b8\u03ad\u03c3\u03b5\u03c4\u03b5 \u03c4\u03b1 \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1\n        \u03c4\u03b7\u03c2 ATHEART \u03c3\u03c4\u03bf \u03ba\u03b1\u03c4\u03ac\u03c3\u03c4\u03b7\u03bc\u03ac \u03c3\u03b1\u03c2, \u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03ae\u03c3\u03b5\u03c4\u03b5 custom \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1 \u03ae \u03bd\u03b1\n        \u03b1\u03bd\u03b1\u03c0\u03c4\u03cd\u03be\u03b5\u03c4\u03b5 \u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03ba\u03b1\u03b9 \u03b1\u03c0\u03bf\u03ba\u03bb\u03b5\u03b9\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03bb\u03cd\u03c3\u03b5\u03b9\u03c2,\n        \u03c6\u03ad\u03c1\u03bd\u03bf\u03c5\u03bc\u03b5 \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc 20 \u03c7\u03c1\u03cc\u03bd\u03b9\u03b1 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2.\n      <\/p>\n    <\/div>\n\n    <ol class=\"ath-svh__index\">\n\n      <li class=\"ath-svh__row\" style=\"--i:0\">\n        <a class=\"ath-svh__link\" href=\"#retail\">\n          <img decoding=\"async\" class=\"ath-svh__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/01-wholesale2.svg\" alt=\"\" aria-hidden=\"true\">\n          <span class=\"ath-svh__name\">\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b1<br>\u03c7\u03bf\u03bd\u03b4\u03c1\u03b9\u03ba\u03ae\u03c2<\/span>\n          <span class=\"ath-svh__arrow\">\n            \u03a0\u0395\u03a1\u0399\u03a3\u03a3\u039f\u03a4\u0395\u03a1\u0391\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\n          <\/span>\n        <\/a>\n      <\/li>\n\n      <li class=\"ath-svh__row\" style=\"--i:1\">\n        <a class=\"ath-svh__link\" href=\"#xclusive\">\n          <img decoding=\"async\" class=\"ath-svh__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/03-custom2.svg\" alt=\"\" aria-hidden=\"true\">\n          <span class=\"ath-svh__name\">\u039f\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7 \u03b7<br>\u03c3\u03c5\u03bb\u03bb\u03bf\u03b3\u03ae \u03c3\u03b1\u03c2<\/span>\n          <span class=\"ath-svh__arrow\">\n            \u03a0\u0395\u03a1\u0399\u03a3\u03a3\u039f\u03a4\u0395\u03a1\u0391\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\n          <\/span>\n        <\/a>\n      <\/li>\n\n      <li class=\"ath-svh__row\" style=\"--i:2\">\n        <a class=\"ath-svh__link\" href=\"#creations\">\n          <img decoding=\"async\" class=\"ath-svh__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/02-exclusive2.svg\" alt=\"\" aria-hidden=\"true\">\n          <span class=\"ath-svh__name\">\u0394\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b5\u03c2<br>\u03ba\u03b1\u03c4\u03ac \u03c0\u03b1\u03c1\u03b1\u03b3\u03b3\u03b5\u03bb\u03af\u03b1<\/span>\n          <span class=\"ath-svh__arrow\">\n            \u03a0\u0395\u03a1\u0399\u03a3\u03a3\u039f\u03a4\u0395\u03a1\u0391\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\n          <\/span>\n        <\/a>\n      <\/li>\n\n      <li class=\"ath-svh__row\" style=\"--i:3\">\n        <a class=\"ath-svh__link\" href=\"#designservices\">\n          <img decoding=\"async\" class=\"ath-svh__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/04-graphic2.svg\" alt=\"\" aria-hidden=\"true\">\n          <span class=\"ath-svh__name\">\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2<br>\u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2<\/span>\n          <span class=\"ath-svh__arrow\">\n            \u03a0\u0395\u03a1\u0399\u03a3\u03a3\u039f\u03a4\u0395\u03a1\u0391\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\n          <\/span>\n        <\/a>\n      <\/li>\n    <\/ol>\n\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  var section = document.querySelector('.ath-svh');\n  if (!section) return;\n  var rows = section.querySelectorAll('.ath-svh__row');\n  if (!rows.length) return;\n\n  var mqReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n  if ((mqReduce && mqReduce.matches) || !('IntersectionObserver' in window)) {\n    rows.forEach(function (r) { r.classList.add('is-visible'); });\n    return;\n  }\n\n  var io = new IntersectionObserver(function (entries) {\n    entries.forEach(function (e) {\n      if (e.isIntersecting) {\n        e.target.classList.add('is-visible');\n        io.unobserve(e.target);\n      }\n    });\n  }, { rootMargin: '0px 0px -10% 0px', threshold: 0.15 });\n  rows.forEach(function (r) { io.observe(r); });\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e786887 e-con-full e-flex e-con e-parent\" data-id=\"e786887\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20a2527 elementor-widget elementor-widget-html\" data-id=\"20a2527\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Services \u00b7 Widget 2 \/ 6 \u00b7 WHOLESALE PARTNERSHIP\n     \"Become Partner ATHEART\" \u2014 chapter eyebrow + full-bleed hero\n     image, two-column pitch + CTA. White surface, black text.\n     Anchor #retail. CSS prefix `.ath-whl-*` (wholesale).\n     ============================================================= -->\n<style>\n.ath-whl,\n.ath-whl *,\n.ath-whl *::before,\n.ath-whl *::after { box-sizing: border-box; }\n\n.ath-whl {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  \/* Section starts with the hero image \u2014 restored to the original\n     padding-top. Eyebrow now sits BELOW the image with normal\n     spacing. *\/\n  padding: clamp(80px, 10vw, 140px) clamp(1rem, 4vw, 3rem) 35px;\n  background: #fff;\n  color: #1a1a1a;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  scroll-margin-top: 0;\n}\n\n.ath-whl__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* Eyebrow sits BELOW the hero image, left-aligned. *\/\n.ath-whl__chapter {\n  display: block;\n  font-size: 20px;\n  font-weight: 800;\n  line-height: 1.2;\n  color: #459fff;\n  margin: 0 0 1.4em;\n}\n\n\/* ----- Hero image -----\n   Uses CSS background-image rather than <img> because WordPress\n   wraps <img> in <picture><source srcset> which can leave a gap\n   inside the rounded frame on some viewports (per the\n   wordpress_webp_picture_wrap memory note). background-image fills\n   the box reliably. *\/\n.ath-whl__hero {\n  position: relative;\n  width: 100%;\n  \/* Image is the FIRST element in the section \u2014 bottom margin\n     gives the gap before the eyebrow below it. *\/\n  margin: 0 0 clamp(2em, 4vw, 3em);\n  aspect-ratio: 16 \/ 9;\n  border-radius: 28px;\n  overflow: hidden;\n  background-color: rgba(0,0,0,0.05);\n  background-image: url(\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/02_services_retail_00_partner.jpg.webp\");\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.16), 0 8px 18px rgba(0,0,0,0.06);\n}\n\n\/* ----- Pitch block ----- below the hero image: title left,\n   body + CTA right (original 2-column layout). *\/\n.ath-whl__pitch {\n  display: grid;\n  grid-template-columns: minmax(260px, 5fr) 7fr;\n  gap: clamp(2em, 6vw, 5em);\n  align-items: start;\n}\n\n.ath-whl__title {\n  margin: 0 0 0.6em;\n  font-size: 3rem !important;\n  font-weight: 800 !important;\n  line-height: 1.1 !important;\n  letter-spacing: -0.005em;\n  color: #1a1a1a;\n}\n\n.ath-whl__text {\n  margin: 0 0 1.4em;\n  font-size: clamp(1rem, 1.2vw, 1.08rem);\n  line-height: 1.75;\n  color: #3a3a3a;\n  max-width: 62ch;\n}\n\n.ath-whl__cta {\n  display: inline-block;\n  padding: 1em 2em;\n  background: #459fff;\n  color: #fff;\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  font-weight: 700;\n  border-radius: 999px;\n  text-decoration: none;\n  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;\n}\n.ath-whl__cta:hover,\n.ath-whl__cta:focus-visible {\n  background: #000;\n  color: #fff;\n  text-decoration: none;\n  transform: translateY(-1px);\n}\n.ath-whl__cta:focus-visible {\n  outline: 2px solid #459fff;\n  outline-offset: 3px;\n}\n\n\/* Responsive *\/\n@media (max-width: 64em) {\n  \/* Tablet + mobile: stack the pitch grid AND fix the title-to-text\n     gap at exactly 40px (zero the title's margin-bottom and set the\n     stacked grid gap explicitly). *\/\n  .ath-whl__pitch { grid-template-columns: 1fr; gap: 40px; }\n  .ath-whl__title { margin-bottom: 0; }\n  \/* Body text fills the full column from tablet down to 320px *\/\n  .ath-whl__text { max-width: none; }\n}\n@media (max-width: 767px) {\n  .ath-whl__title { font-size: 44px !important; line-height: 1.1 !important; }\n  .ath-whl__hero { aspect-ratio: 4 \/ 3; border-radius: 22px; }\n}\n<\/style>\n\n<section class=\"ath-whl\" id=\"retail\" aria-labelledby=\"ath-whl-heading\">\n  <div class=\"ath-whl__inner\">\n\n    <div class=\"ath-whl__hero\" role=\"img\" aria-label=\"ATHEART wholesale partnership\"><\/div>\n\n    <span class=\"ath-whl__chapter\">\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b1 \u03bb\u03b9\u03b1\u03bd\u03b9\u03ba\u03ae\u03c2<\/span>\n\n    <div class=\"ath-whl__pitch\">\n      <div>\n        <h2 class=\"ath-whl__title\" id=\"ath-whl-heading\">\u0397 ATHEART<br>\u03c3\u03c4\u03b1 \u03c1\u03ac\u03c6\u03b9\u03b1 \u03c3\u03b1\u03c2.<\/h2>\n      <\/div>\n      <div>\n        <p class=\"ath-whl__text\">\n          \u03a6\u03ad\u03c1\u03c4\u03b5 \u03ad\u03bd\u03b1 \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9 \u03c4\u03b7\u03c2 \u0391\u03b8\u03ae\u03bd\u03b1\u03c2 \u03c3\u03c4\u03bf \u03ba\u03b1\u03c4\u03ac\u03c3\u03c4\u03b7\u03bc\u03ac \u03c3\u03b1\u03c2. \u0397 \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03b7\u03c2\n          \u03ad\u03ba\u03b4\u03bf\u03c3\u03b7\u03c2 \u03c3\u03c5\u03bb\u03bb\u03bf\u03b3\u03ae \u03bc\u03b1\u03c2 \u03b1\u03c0\u03cc \u03b1\u03bd\u03b1\u03b4\u03b9\u03c0\u03bb\u03bf\u03cd\u03bc\u03b5\u03bd\u03b5\u03c2 \u03c4\u03c3\u03ac\u03bd\u03c4\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03c0\u03b1\u03c1\u03b5\u03cc \u03b5\u03af\u03bd\u03b1\u03b9\n          \u03c0\u03bb\u03ad\u03bf\u03bd \u03b4\u03b9\u03b1\u03b8\u03ad\u03c3\u03b9\u03bc\u03b7 \u03c7\u03bf\u03bd\u03b4\u03c1\u03b9\u03ba\u03ac \u03c3\u03b5 boutique, museum shops, \u03be\u03b5\u03bd\u03bf\u03b4\u03bf\u03c7\u03b5\u03af\u03b1\n          \u03ba\u03b1\u03b9 \u03ba\u03b1\u03c4\u03b1\u03c3\u03c4\u03ae\u03bc\u03b1\u03c4\u03b1 design \u03c3\u03b5 \u03cc\u03bb\u03b7 \u03c4\u03b7\u03bd \u0395\u03bb\u03bb\u03ac\u03b4\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u0395\u03c5\u03c1\u03ce\u03c0\u03b7.\n        <\/p>\n        <a class=\"ath-whl__cta\" href=\"https:\/\/atheart.gr\/el\/contact\">\u0391\u03a3 \u03a3\u03a5\u039d\u0395\u03a1\u0393\u0391\u03a3\u03a4\u039f\u03a5\u039c\u0395<\/a>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1ed3cc4 e-con-full e-flex e-con e-parent\" data-id=\"1ed3cc4\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a8b4de3 elementor-widget elementor-widget-html\" data-id=\"a8b4de3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Services \u00b7 Widget 3 \/ 6 \u00b7 LARGE FOLDABLE TOTE BAGS\n     White surface, black text. Order:\n       1. Hero box with the ALLproductsPage bags photo as bg, the\n          BAGS SVG logo overlaid in the upper area, and a caption\n          \"Large foldable tote bags\" below the SVG\n       2. VIEW PRICES pill CTA\n     The 12-bag cutout grid was removed per user request. Section\n     starts flush at the top to continue the wholesale section's\n     rhythm without extra padding.\n     CSS prefix `.ath-tot-*` (totes).\n     ============================================================= -->\n<style>\n.ath-tot,\n.ath-tot *,\n.ath-tot *::before,\n.ath-tot *::after { box-sizing: border-box; }\n\n.ath-tot {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  \/* Top padding 0 \u2014 section starts flush with the wholesale\n     section above. Bottom keeps the usual breathing room. *\/\n  padding: 0 clamp(1rem, 4vw, 3rem) clamp(80px, 10vw, 140px);\n  background: #fff;\n  color: #1a1a1a;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  scroll-margin-top: 0;\n}\n\n.ath-tot__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* ----- Hero box -----\n   Same dimensions\/look as before (16\/9, rounded 28px, soft shadow,\n   bg-image cover). Now hosts an overlay (BAGS logo + caption) in\n   the upper-centre area. *\/\n.ath-tot__hero {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  border-radius: 28px;\n  overflow: hidden;\n  background-color: rgba(0,0,0,0.05);\n  background-image: url(\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/ALLproductsPage_bags_1300.jpg\");\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.16), 0 8px 18px rgba(0,0,0,0.06);\n}\n\n\/* Overlay sits absolutely centred horizontally in the upper area\n   of the hero box (above the hanging bags shown in the photo). *\/\n.ath-tot__hero-overlay {\n  position: absolute;\n  top: clamp(1.5em, 4vw, 3em);\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  z-index: 2;\n  pointer-events: none;\n}\n.ath-tot__hero-mark {\n  display: block;\n  width: clamp(180px, 22vw, 320px);\n  height: auto;\n  max-width: none !important;\n}\n.ath-tot__hero-caption {\n  margin-top: 0.3em;\n  font-size: clamp(0.95rem, 1.3vw, 1.15rem);\n  font-weight: 500;\n  line-height: 1.3;\n  color: #1a1a1a;\n  letter-spacing: 0.005em;\n}\n\n\/* Responsive *\/\n@media (max-width: 767px) {\n  .ath-tot__hero { aspect-ratio: 4 \/ 3; border-radius: 22px; }\n  \/* SVG 20% smaller than previous mobile sizing\n     (150\u2013260px \u00d7 0.8 = 120\u2013208px). *\/\n  .ath-tot__hero-mark { width: clamp(120px, 30.4vw, 208px); }\n  \/* Caption stays on a single line all the way down to 320px. *\/\n  .ath-tot__hero-caption {\n    font-size: clamp(0.85rem, 3vw, 1rem);\n    white-space: nowrap;\n  }\n}\n<\/style>\n\n<section class=\"ath-tot\" aria-labelledby=\"ath-tot-heading\">\n  <div class=\"ath-tot__inner\">\n\n    <!-- Hero box with bags photo + BAGS SVG overlay + caption -->\n    <div class=\"ath-tot__hero\" id=\"ath-tot-heading\"\n         role=\"img\"\n         aria-label=\"ATHEART foldable tote bags collection\">\n      <div class=\"ath-tot__hero-overlay\">\n        <img decoding=\"async\" class=\"ath-tot__hero-mark\"\n             src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/icon_homepage_bags_atheart_new2.svg\"\n             alt=\"\"\n             aria-hidden=\"true\">\n        <span class=\"ath-tot__hero-caption\">\u039c\u03b5\u03b3\u03ac\u03bb\u03b5\u03c2 \u03b1\u03bd\u03b1\u03b4\u03b9\u03c0\u03bb\u03bf\u03cd\u03bc\u03b5\u03bd\u03b5\u03c2 \u03c4\u03c3\u03ac\u03bd\u03c4\u03b5\u03c2<\/span>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-83d97ec e-con-full e-flex e-con e-parent\" data-id=\"83d97ec\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aea8d8d elementor-widget elementor-widget-html\" data-id=\"aea8d8d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Services \u00b7 Widget 4 \/ 6 \u00b7 EXCLUSIVE DESIGNS\n     Image-text-image rhythm with three numbered value props.\n     White surface, black text. Anchor #xclusive.\n     CSS prefix `.ath-xcl-*`.\n     ============================================================= -->\n<style>\n.ath-xcl, .ath-xcl *, .ath-xcl *::before, .ath-xcl *::after { box-sizing: border-box; }\n.ath-xcl {\n  position: relative; width: 100vw;\n  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);\n  padding: clamp(80px,10vw,140px) clamp(1rem,4vw,3rem);\n  background: #fff; color: #1a1a1a; overflow: hidden; isolation: isolate;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased; scroll-margin-top: 0;\n}\n.ath-xcl__inner { max-width: 1200px; margin: 0 auto; }\n.ath-xcl__chapter {\n  display: block;\n  font-size: 20px; font-weight: 800; line-height: 1.2;\n  color: #459fff; margin: 0 0 1.4em;\n}\n\n.ath-xcl__top {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: clamp(2em,4vw,3.5em);\n  \/* `start` (not `stretch`) so the image keeps its native 4:3\n     aspect-ratio at every desktop width \u2014 it just scales down with\n     the column. Text column is its natural content height; nothing\n     stretches into the other column. *\/\n  align-items: start;\n  margin-bottom: clamp(3em,6vw,5em);\n}\n\/* Hero + bottom image use CSS background-image (not <img>) so WP's\n   <picture>\/WebP wrap can't leave gaps inside the rounded frame\n   per the wordpress_webp_picture_wrap memory note. *\/\n.ath-xcl__hero {\n  position: relative; aspect-ratio: 4\/3;\n  border-radius: 28px; overflow: hidden;\n  background-color: rgba(0,0,0,0.05);\n  background-image: url(\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/03_services_whole_collection.jpg\");\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.16), 0 8px 18px rgba(0,0,0,0.06);\n}\n\n\/* Eyebrow + title + body sit at the top of the column; the CTA\n   button is pinned at the bottom (`justify-content: space-between`)\n   so the right-column content fills the same height as the image\n   on its left. *\/\n.ath-xcl__head {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1.6em;\n}\n.ath-xcl__head-top {\n  display: flex;\n  flex-direction: column;\n}\n.ath-xcl__title {\n  margin: 0 0 0.6em;\n  font-size: 3rem !important; font-weight: 800 !important;\n  line-height: 1.1 !important; letter-spacing: -0.005em; color: #1a1a1a;\n}\n.ath-xcl__text { margin: 0; font-size: clamp(1rem,1.2vw,1.08rem); line-height: 1.75; color: #3a3a3a; }\n\n.ath-xcl__props {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: clamp(1em,2vw,1.5em);\n  margin-bottom: clamp(3em,6vw,5em);\n}\n\/* Bullets sit as plain tick + text rows (no card background, no\n   border, no radius, no padding). Tick on the LEFT, text on the\n   right \u2014 checklist layout. align-items: flex-start so the tick\n   stays anchored at the top when the text wraps to multiple lines. *\/\n.ath-xcl__prop {\n  display: flex; flex-direction: row; align-items: flex-start;\n  gap: 0.9em;\n  opacity: 0; transform: translateY(20px);\n  transition:\n    opacity .6s cubic-bezier(.22,.61,.36,1),\n    transform .6s cubic-bezier(.22,.61,.36,1);\n  transition-delay: calc(var(--i,0) * 90ms);\n}\n.ath-xcl__prop.is-visible { opacity: 1; transform: translateY(0); }\n\/* Brand-blue badge with white check, inline-SVG. Trend-aligned\n   (filled circle + bold white tick \u2014 same shape Apple\/iOS uses for\n   verified states; reads instantly as \"yes, included\"). *\/\n.ath-xcl__prop-tick {\n  display: block;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n}\n.ath-xcl__prop-text {\n  margin: 0; font-size: clamp(1.05rem,1.4vw,1.2rem);\n  font-weight: 800; line-height: 1.3; color: #1a1a1a;\n}\n\n\/* Bottom image spans the full width of the inner container (was a\n   2-column grid alongside a CTA block; CTA + lead text moved up\n   into the top section so this is now a closing full-width banner).\n   Aspect-ratio matches the mobile box (4\/3) at every breakpoint\n   so the image displays consistently \u2014 no top\/bottom cropping. *\/\n.ath-xcl__bottom {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 4 \/ 3;\n  border-radius: 28px;\n  overflow: hidden;\n  background-color: rgba(0,0,0,0.05);\n  background-image: url(\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_your_fashion_collection.jpg\");\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.16), 0 8px 18px rgba(0,0,0,0.06);\n}\n.ath-xcl__cta {\n  display: inline-block; padding: 1em 2em;\n  background: #459fff; color: #fff;\n  font-size: 0.72rem; letter-spacing: 0.22em; font-weight: 700;\n  border-radius: 999px; text-decoration: none;\n  align-self: flex-start;\n  transition: background .2s ease, color .2s ease, transform .25s ease;\n}\n.ath-xcl__cta:hover, .ath-xcl__cta:focus-visible {\n  background: #000; color: #fff; text-decoration: none; transform: translateY(-1px);\n}\n.ath-xcl__cta:focus-visible { outline: 2px solid #459fff; outline-offset: 3px; }\n\n\/* Stack only at tablet (\u226464em). Above that the 2-column layout\n   stays \u2014 image scales proportionally as the columns narrow. *\/\n@media (max-width: 64em) {\n  .ath-xcl__top { grid-template-columns: 1fr; }\n  .ath-xcl__props { grid-template-columns: 1fr; }\n  \/* On stacked layout, push the hero image AFTER the head column\n     so the order becomes: eyebrow + title + body + CTA, then image. *\/\n  .ath-xcl__hero { order: 2; }\n  \/* Tablet + mobile: lock the title-to-text gap at 40px and let\n     the body text fill the full column width. *\/\n  .ath-xcl__title { margin-bottom: 40px; }\n  .ath-xcl__text { max-width: none; }\n}\n@media (max-width: 767px) {\n  .ath-xcl__title { font-size: 44px !important; line-height: 1.1 !important; }\n  \/* Bottom box already uses 4\/3 globally \u2014 only the mobile hero\n     needs the 4\/3 override + smaller radius. *\/\n  .ath-xcl__hero { aspect-ratio: 4\/3; }\n  .ath-xcl__hero, .ath-xcl__bottom { border-radius: 22px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .ath-xcl__prop { opacity: 1 !important; transform: none !important; transition: none !important; }\n}\n<\/style>\n\n<section class=\"ath-xcl\" id=\"xclusive\" aria-labelledby=\"ath-xcl-heading\">\n  <div class=\"ath-xcl__inner\">\n    <div class=\"ath-xcl__top\">\n      <div class=\"ath-xcl__hero\" role=\"img\" aria-label=\"ATHEART fashion collection design\"><\/div>\n      <div class=\"ath-xcl__head\">\n        <div class=\"ath-xcl__head-top\">\n          <span class=\"ath-xcl__chapter\">\u039f\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7 \u03b7 \u03c3\u03c5\u03bb\u03bb\u03bf\u03b3\u03ae \u03c3\u03b1\u03c2<\/span>\n          <h2 class=\"ath-xcl__title\" id=\"ath-xcl-heading\">\u039c\u03b9\u03b1 \u03c3\u03c5\u03bb\u03bb\u03bf\u03b3\u03ae<br>\u03bc\u03b5 \u03c4\u03bf \u03cc\u03bd\u03bf\u03bc\u03ac \u03c3\u03b1\u03c2.<\/h2>\n          <p class=\"ath-xcl__text\">\n            \u03a3\u03c7\u03b5\u03b4\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7 \u03c4\u03b7 \u03c3\u03c5\u03bb\u03bb\u03bf\u03b3\u03ae \u03bc\u03cc\u03b4\u03b1\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf brand \u03c3\u03b1\u03c2. \u0395\u03c0\u03bf\u03c7\u03b9\u03b1\u03ba\u03ae\n            \u03ae \u03b5\u03c4\u03ae\u03c3\u03b9\u03b1, \u03b7 \u03b4\u03bf\u03c5\u03bb\u03b5\u03b9\u03ac \u03ba\u03b1\u03bb\u03cd\u03c0\u03c4\u03b5\u03b9 \u03c3\u03b9\u03bb\u03bf\u03c5\u03ad\u03c4\u03b5\u03c2, \u03c7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1, \u03c5\u03bb\u03b9\u03ba\u03ac, all-over\n            patterns \u03ba\u03b1\u03b9 engineered placement prints, \u03ba\u03ac\u03b8\u03b5 \u03c3\u03c4\u03bf\u03b9\u03c7\u03b5\u03af\u03bf \u03c4\u03b7\u03c2\n            \u03c6\u03c4\u03b9\u03b1\u03b3\u03bc\u03ad\u03bd\u03bf \u03b3\u03cd\u03c1\u03c9 \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd \u03b4\u03b9\u03ba\u03cc \u03c3\u03b1\u03c2 \u03bf\u03c0\u03c4\u03b9\u03ba\u03cc \u03ba\u03cc\u03c3\u03bc\u03bf.\n          <\/p>\n        <\/div>\n        <a class=\"ath-xcl__cta\" href=\"https:\/\/atheart.gr\/el\/contact\">\u0391\u03a3 \u03a3\u03a7\u0395\u0394\u0399\u0391\u03a3\u039f\u03a5\u039c\u0395 \u039c\u0391\u0396\u0399<\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"ath-xcl__props\">\n      <div class=\"ath-xcl__prop\" style=\"--i:0\">\n        <svg class=\"ath-xcl__prop-tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n          <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n        <p class=\"ath-xcl__prop-text\">\u0395\u03c0\u03bf\u03c7\u03b9\u03b1\u03ba\u03ad\u03c2 \u03ae \u03b5\u03c4\u03ae\u03c3\u03b9\u03b5\u03c2 \u03c3\u03c5\u03bb\u03bb\u03bf\u03b3\u03ad\u03c2, \u03b1\u03c0\u03bf\u03ba\u03bb\u03b5\u03b9\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf brand \u03c3\u03b1\u03c2.<\/p>\n      <\/div>\n      <div class=\"ath-xcl__prop\" style=\"--i:1\">\n        <svg class=\"ath-xcl__prop-tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n          <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n        <p class=\"ath-xcl__prop-text\">\u0395\u03be\u03b5\u03b9\u03b4\u03af\u03ba\u03b5\u03c5\u03c3\u03b7 \u03c3\u03b5 \u03c4\u03ac\u03c3\u03b5\u03b9\u03c2, \u03c5\u03bb\u03b9\u03ba\u03ac &amp; \u03bb\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1 \u03b3\u03b9\u03b1 \u03c4\u03bf \u03ba\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b1\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1.<\/p>\n      <\/div>\n      <div class=\"ath-xcl__prop\" style=\"--i:2\">\n        <svg class=\"ath-xcl__prop-tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n          <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n        <p class=\"ath-xcl__prop-text\">\u0391\u03c0\u03cc \u03b5\u03c4\u03b9\u03ba\u03ad\u03c4\u03b5\u03c2 \u03bc\u03ad\u03c7\u03c1\u03b9 look book, \u03ba\u03ac\u03b8\u03b5 \u03bb\u03b5\u03c0\u03c4\u03bf\u03bc\u03ad\u03c1\u03b5\u03b9\u03b1 \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b7.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"ath-xcl__bottom\" role=\"img\" aria-label=\"ATHEART fashion collection detail\"><\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  var s = document.querySelector('.ath-xcl'); if (!s) return;\n  var items = s.querySelectorAll('.ath-xcl__prop'); if (!items.length) return;\n  var mqr = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n  if ((mqr && mqr.matches) || !('IntersectionObserver' in window)) {\n    items.forEach(function(i){ i.classList.add('is-visible'); }); return;\n  }\n  var io = new IntersectionObserver(function(entries){\n    entries.forEach(function(e){ if (e.isIntersecting){ e.target.classList.add('is-visible'); io.unobserve(e.target); } });\n  }, { rootMargin: '0px 0px -10% 0px', threshold: 0.15 });\n  items.forEach(function(i){ io.observe(i); });\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5aa0d4d e-con-full e-flex e-con e-parent\" data-id=\"5aa0d4d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e931a5 elementor-widget elementor-widget-html\" data-id=\"0e931a5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \/services\/ \u2014 Widget 5 \/ 7 \u00b7 CUSTOM BRANDED CREATIONS\n     White surface, black text. Chapter eyebrow + big hero photo +\n     intro\/3-bullet tick list + two-photo row + closing photo.\n     All images use background-image with `background-size: contain`\n     so nothing gets cropped \u2014 letterboxed against a soft neutral\n     frame (also avoids the WP <picture>\/WebP wrap gap).\n     CSS prefix `.svc-cus-*`.\n     ============================================================= -->\n<style>\n.svc-cus,\n.svc-cus *,\n.svc-cus *::before,\n.svc-cus *::after { box-sizing: border-box; }\n\n.svc-cus {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  padding: clamp(80px, 10vw, 140px) clamp(1rem, 4vw, 3rem);\n  background: #fff;\n  color: #1a1a1a;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  scroll-margin-top: 0;\n}\n\n\/* Chapter eyebrow *\/\n.svc-cus__chapter {\n  display: block;\n  font-size: 20px;\n  font-weight: 800;\n  line-height: 1.2;\n  color: #459fff;\n  margin: 0 0 1.4em;\n}\n\n.svc-cus__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* ----- Hero photo -----\n   Image is 2400\u00d71350 (16:9). Desktop box is 16:9 so cover\/contain\n   look identical there. On mobile the box is 4:3 \u2014 using `cover`\n   so the image fills with no letterbox (slight top\/bottom crop). *\/\n.svc-cus__hero {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  border-radius: 28px;\n  overflow: hidden;\n  background-color: rgba(0,0,0,0.05);\n  background-image: url(\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_frame.jpg\");\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.16), 0 8px 18px rgba(0,0,0,0.06);\n  margin: 0 0 clamp(3em, 6vw, 5em);\n}\n\n\/* Title + body block *\/\n.svc-cus__content {\n  display: grid;\n  grid-template-columns: minmax(260px, 5fr) 7fr;\n  gap: clamp(2em, 6vw, 5em);\n  align-items: start;\n  margin: 0 0 clamp(3em, 5vw, 4.5em);\n}\n\n.svc-cus__title {\n  margin: 0 0 0.6em;\n  font-size: 3rem !important;\n  font-weight: 800 !important;\n  line-height: 1.05 !important;\n  letter-spacing: -0.005em;\n  color: #1a1a1a;\n}\n\n.svc-cus__cta {\n  display: inline-block;\n  padding: 1em 2em;\n  background: #459fff;\n  color: #fff;\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  font-weight: 700;\n  border-radius: 999px;\n  text-decoration: none;\n  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;\n}\n.svc-cus__cta:hover,\n.svc-cus__cta:focus-visible {\n  background: #000;\n  color: #fff;\n  text-decoration: none;\n  transform: translateY(-1px);\n}\n.svc-cus__cta:focus-visible { outline: 2px solid #459fff; outline-offset: 3px; }\n\n.svc-cus__text {\n  margin: 0 0 1.4em;\n  font-size: clamp(1rem, 1.2vw, 1.08rem);\n  line-height: 1.75;\n  color: #3a3a3a;\n  max-width: 62ch;\n}\n\n\/* Tick-style bullet list (matches Your fashion collection section) *\/\n.svc-cus__list {\n  list-style: none;\n  margin: 0 0 1.8em;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.9em;\n}\n.svc-cus__list-item {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 0.9em;\n  font-size: clamp(1rem, 1.2vw, 1.08rem);\n  line-height: 1.55;\n  color: #1a1a1a;\n}\n.svc-cus__tick {\n  display: block;\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n}\n\n\/* Two-photo row \u2014 fill the frames (cover, no letterbox).\n   Tightly framed subjects can be slightly cropped; if that ever\n   bites, swap `cover` \u2192 `contain` and add background-color back. *\/\n.svc-cus__pair {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: clamp(1em, 2vw, 1.5em);\n  margin: 0 0 clamp(1em, 2vw, 1.5em);\n}\n.svc-cus__shot {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 3 \/ 2;\n  border-radius: 22px;\n  overflow: hidden;\n  background-color: rgba(0,0,0,0.05);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 18px 40px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.05);\n}\n\n\/* Responsive *\/\n@media (max-width: 64em) {\n  \/* Tablet + mobile: lock the title-to-text gap at exactly 40px\n     (zero the title's margin-bottom and set the stacked grid gap\n     to 40px) and let the body text fill the full column. Mirrors\n     the retail (wholesale) section. *\/\n  .svc-cus__title {\n    font-size: 44px !important;\n    margin-bottom: 0;\n  }\n  .svc-cus__content {\n    grid-template-columns: 1fr;\n    gap: 40px;\n  }\n  .svc-cus__text { max-width: none; }\n}\n@media (max-width: 767px) {\n  .svc-cus__title { font-size: 36px !important; }\n  .svc-cus__hero { aspect-ratio: 4 \/ 3; border-radius: 22px; }\n  .svc-cus__pair { grid-template-columns: 1fr; }\n  .svc-cus__shot { border-radius: 18px; }\n}\n<\/style>\n\n<section class=\"svc-cus\" id=\"creations\" aria-labelledby=\"svc-cus-heading\">\n  <div class=\"svc-cus__inner\">\n\n    <span class=\"svc-cus__chapter\">\u0394\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b5\u03c2 \u03ba\u03b1\u03c4\u03ac \u03c0\u03b1\u03c1\u03b1\u03b3\u03b3\u03b5\u03bb\u03af\u03b1<\/span>\n\n    <div class=\"svc-cus__content\">\n      <div class=\"svc-cus__head\">\n        <h2 class=\"svc-cus__title\" id=\"svc-cus-heading\">\u0391\u03c0\u03bf\u03ba\u03bb\u03b5\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac<br>\u03b3\u03b9\u03b1 \u03b5\u03c3\u03ac\u03c2.<\/h2>\n      <\/div>\n      <div>\n        <p class=\"svc-cus__text\">\n          \u03a3\u03c7\u03b5\u03b4\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 custom \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9\u03b1 \u03b3\u03b9\u03b1 \u03c4\u03bf brand \u03c3\u03b1\u03c2. \u0391\u03c0\u03cc \u03b5\u03c4\u03b1\u03b9\u03c1\u03b9\u03ba\u03ac \u03b4\u03ce\u03c1\u03b1\n          \u03ad\u03c9\u03c2 \u03bc\u03bf\u03bd\u03b1\u03b4\u03b9\u03ba\u03ac \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1, \u03ba\u03ac\u03b8\u03b5 \u03b1\u03bd\u03ac\u03b8\u03b5\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b7 \u03b3\u03cd\u03c1\u03c9 \u03b1\u03c0\u03cc\n          \u03c4\u03bf\u03bd \u03bf\u03c0\u03c4\u03b9\u03ba\u03cc \u03ba\u03cc\u03c3\u03bc\u03bf \u03c4\u03bf\u03c5 brand \u03c3\u03b1\u03c2.\n        <\/p>\n        <ul class=\"svc-cus__list\">\n          <li class=\"svc-cus__list-item\">\n            <svg class=\"svc-cus__tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n              <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n              <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n            <span>Custom \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1 \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b1 \u03b3\u03b9\u03b1 \u03c4\u03bf brand \u03c3\u03b1\u03c2.<\/span>\n          <\/li>\n          <li class=\"svc-cus__list-item\">\n            <svg class=\"svc-cus__tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n              <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n              <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n            <span>\u03a3\u03c7\u03ad\u03b4\u03b9\u03b1 \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03b7\u03c2 \u03ad\u03ba\u03b4\u03bf\u03c3\u03b7\u03c2 \u03ba\u03b1\u03b9 \u03b5\u03b9\u03b4\u03b9\u03ba\u03ce\u03bd \u03c0\u03b5\u03c1\u03b9\u03c3\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd.<\/span>\n          <\/li>\n          <li class=\"svc-cus__list-item\">\n            <svg class=\"svc-cus__tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n              <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n              <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n            <span>Branded merchandise \u03ba\u03b1\u03b9 \u03b5\u03c4\u03b1\u03b9\u03c1\u03b9\u03ba\u03ac \u03b4\u03ce\u03c1\u03b1.<\/span>\n          <\/li>\n        <\/ul>\n        <a class=\"svc-cus__cta\" href=\"https:\/\/atheart.gr\/el\/contact\/\">\u0391\u03a3 \u0394\u0397\u039c\u0399\u039f\u03a5\u03a1\u0393\u0397\u03a3\u039f\u03a5\u039c\u0395 \u039c\u0391\u0396\u0399<\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"svc-cus__hero\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"svc-cus__pair\">\n      <div class=\"svc-cus__shot\"\n           style=\"background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_custom_branded_creations2.jpg');\"\n           role=\"img\"\n           aria-label=\"\"><\/div>\n      <div class=\"svc-cus__shot\"\n           style=\"background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_custom_branded_creations.jpg');\"\n           role=\"img\"\n           aria-label=\"\"><\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-62543b8 e-con-full e-flex e-con e-parent\" data-id=\"62543b8\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-445f212 elementor-widget elementor-widget-html\" data-id=\"445f212\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Services \u00b7 Widget 5c \/ 6 \u00b7 GRAPHIC DESIGN \u2014 LIST\n     Six disciplines as a long editorial split list (number \/ name\n     \/ description) with hairline rules. White surface, black text.\n     CSS prefix `.ath-gdl-*`.\n     ============================================================= -->\n<style>\n.ath-gdl, .ath-gdl *, .ath-gdl *::before, .ath-gdl *::after { box-sizing: border-box; }\n.ath-gdl {\n  position: relative; width: 100vw;\n  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);\n  padding: clamp(80px,10vw,140px) clamp(1rem,4vw,3rem);\n  background: #fff; color: #1a1a1a; overflow: hidden; isolation: isolate;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased; scroll-margin-top: 0;\n}\n.ath-gdl__inner { max-width: 1200px; margin: 0 auto; }\n.ath-gdl__chapter { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; color: #459fff; margin: 0 0 1.4em; }\n\n.ath-gdl__top { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2em,6vw,5em); align-items: start; margin-bottom: clamp(2.5em,5vw,4em); }\n.ath-gdl__title { margin: 0; font-size: 3rem !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.005em; color: #1a1a1a; }\n.ath-gdl__text { margin: 0; font-size: clamp(1rem,1.2vw,1.08rem); line-height: 1.75; color: #3a3a3a; max-width: 62ch; }\n\n\/* Hero uses background-image (not <img>) so the photo fills the\n   rounded frame edge-to-edge \u2014 WP's <picture>\/WebP wrap can leave\n   a gap inside the frame on some viewports otherwise.\n   aspect-ratio matches the image's native dimensions (1400\u00d7960 \u2192\n   35:24) so the photo fills the box on both axes with no cropping\n   and no letterbox. *\/\n.ath-gdl__hero {\n  position: relative;\n  aspect-ratio: 35 \/ 24;\n  border-radius: 28px;\n  overflow: hidden;\n  margin-bottom: clamp(2em,4vw,3em);\n  background-color: rgba(0,0,0,0.05);\n  background-image: url(\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/05_services.jpg\");\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.16), 0 8px 18px rgba(0,0,0,0.06);\n}\n\n.ath-gdl__list { list-style: none; margin: 0 0 clamp(3em,5vw,4em); padding: 0; border-top: 1px solid rgba(0,0,0,0.12); }\n.ath-gdl__row {\n  display: grid;\n  grid-template-columns: 48px 4fr 6fr;\n  gap: clamp(1.2em,2vw,2em);\n  align-items: start;\n  padding: clamp(1.4em,2.4vw,2em) 0;\n  border-bottom: 1px solid rgba(0,0,0,0.10);\n  opacity: 0; transform: translateY(16px);\n  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1), padding .25s ease;\n  transition-delay: calc(var(--i,0) * 60ms);\n  cursor: default;\n}\n.ath-gdl__row.is-visible { opacity: 1; transform: translateY(0); }\n.ath-gdl__row:hover { padding-left: 0.6em; }\n\n\/* Brand-blue tick badge instead of the 01\u201306 numbers. Same shape\n   as the Your fashion collection \/ Custom branded creations\n   sections. *\/\n.ath-gdl__tick {\n  display: block;\n  width: 32px;\n  height: 32px;\n  margin-top: 0.2em;\n}\n.ath-gdl__name {\n  margin: 0; font-size: clamp(1.6rem,2.4vw,2.2rem); font-weight: 800;\n  line-height: 1.05; color: #1a1a1a; letter-spacing: -0.01em;\n}\n.ath-gdl__desc { margin: 0; font-size: clamp(1rem,1.15vw,1.05rem); line-height: 1.65; color: #3a3a3a; max-width: 52ch; }\n\n@media (max-width: 64em) {\n  \/* Tablet + mobile: stack the top grid with a 40px title-to-text\n     gap (matches the other widgets). Body text fills the column.\n     The discipline rows KEEP their 3-column desktop layout (tick \/\n     name \/ description) on tablet \u2014 only collapses to tick+text\n     stack at mobile. *\/\n  .ath-gdl__top { grid-template-columns: 1fr; gap: 40px; align-items: start; }\n  .ath-gdl__text { max-width: none; }\n}\n@media (max-width: 767px) {\n  .ath-gdl__title { font-size: 44px !important; line-height: 1.1 !important; }\n  \/* Hero keeps the 35\/24 native ratio on mobile too \u2014 only the\n     border-radius is dialed down. *\/\n  .ath-gdl__hero { border-radius: 22px; }\n  .ath-gdl__name { font-size: 1.6rem; }\n  \/* Mobile: discipline rows collapse to tick + name on top row,\n     description full-width underneath. Drop the desc's 52ch cap so\n     it wraps to the full browser width. *\/\n  .ath-gdl__row { grid-template-columns: 40px 1fr; }\n  .ath-gdl__desc { grid-column: 1 \/ -1; max-width: none; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .ath-gdl__row { opacity: 1 !important; transform: none !important; transition: none !important; }\n}\n<\/style>\n\n<section class=\"ath-gdl\" id=\"designservices\" aria-labelledby=\"ath-gdl-heading\">\n  <div class=\"ath-gdl__inner\">\n    <span class=\"ath-gdl__chapter\">\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2<\/span>\n\n    <div class=\"ath-gdl__top\">\n      <div>\n        <h2 class=\"ath-gdl__title\" id=\"ath-gdl-heading\">\u03a3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2, \u03b1\u03c0\u03cc<br>print \u03bc\u03ad\u03c7\u03c1\u03b9 web.<\/h2>\n      <\/div>\n      <p class=\"ath-gdl__text\">\n        \u03a0\u03ad\u03c1\u03b1 \u03b1\u03c0\u03cc \u03c4\u03b1 \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1, \u03b7 ATHEART \u03bb\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03b5\u03af \u03c9\u03c2 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc studio\n        \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd \u03b3\u03b9\u03b1 brands. \u03a3\u03c7\u03b5\u03b4\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b1 \u03c0\u03ac\u03bd\u03c4\u03b1: \u03c4\u03b1\u03c5\u03c4\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2, websites,\n        \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03b1\u03c3\u03af\u03b5\u03c2, \u03b5\u03b9\u03ba\u03bf\u03bd\u03bf\u03b3\u03c1\u03ac\u03c6\u03b7\u03c3\u03b7, motion \u03ba\u03b1\u03b9 branding, \u03c3\u03b5 print \u03ba\u03b1\u03b9\n        digital.\n      <\/p>\n    <\/div>\n\n    <div class=\"ath-gdl__hero\" role=\"img\" aria-label=\"ATHEART creative studio at work\"><\/div>\n\n    <ol class=\"ath-gdl__list\">\n      <li class=\"ath-gdl__row\" style=\"--i:0\">\n        <svg class=\"ath-gdl__tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n          <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n        <h3 class=\"ath-gdl__name\">\u0393\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae<\/h3>\n        <p class=\"ath-gdl__desc\">\u0395\u03be\u03b5\u03b9\u03b4\u03b9\u03ba\u03b5\u03c5\u03bc\u03ad\u03bd\u03bf \u03bf\u03c0\u03c4\u03b9\u03ba\u03cc \u03c5\u03bb\u03b9\u03ba\u03cc \u03cc\u03c0\u03c9\u03c2 layouts, \u03c4\u03c5\u03c0\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1, \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03c9\u03bd \u03ba\u03b1\u03b9 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03b1\u03c3\u03af\u03b5\u03c2.<\/p>\n      <\/li>\n      <li class=\"ath-gdl__row\" style=\"--i:1\">\n        <svg class=\"ath-gdl__tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n          <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n        <h3 class=\"ath-gdl__name\">UI \/ UX Design<\/h3>\n        <p class=\"ath-gdl__desc\">Websites \u03ba\u03b1\u03b9 mobile apps \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b1 \u03b3\u03b9\u03b1 \u03b5\u03c5\u03c7\u03ac\u03c1\u03b9\u03c3\u03c4\u03b7, \u03b1\u03c0\u03bf\u03c4\u03b5\u03bb\u03b5\u03c3\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1 \u03c3\u03b5 \u03cc\u03bb\u03b5\u03c2 \u03c4\u03b9\u03c2 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2.<\/p>\n      <\/li>\n      <li class=\"ath-gdl__row\" style=\"--i:2\">\n        <svg class=\"ath-gdl__tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n          <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n        <h3 class=\"ath-gdl__name\">Web Design<\/h3>\n        <p class=\"ath-gdl__desc\">\u03a3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2, \u03b1\u03bd\u03ac\u03c0\u03c4\u03c5\u03be\u03b7 \u03ba\u03b1\u03b9 \u03c5\u03c0\u03bf\u03c3\u03c4\u03ae\u03c1\u03b9\u03be\u03b7 e-shops \u03bc\u03b5 \u03ad\u03bc\u03c6\u03b1\u03c3\u03b7 \u03c3\u03c4\u03b7 \u03c7\u03c1\u03b7\u03c3\u03c4\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1, \u03c4\u03b7\u03bd \u03b1\u03b9\u03c3\u03b8\u03b7\u03c4\u03b9\u03ba\u03ae \u03ba\u03b1\u03b9 \u03c4\u03b7 \u03bb\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1.<\/p>\n      <\/li>\n      <li class=\"ath-gdl__row\" style=\"--i:3\">\n        <svg class=\"ath-gdl__tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n          <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n        <h3 class=\"ath-gdl__name\">\u0395\u03b9\u03ba\u03bf\u03bd\u03bf\u03b3\u03c1\u03ac\u03c6\u03b7\u03c3\u03b7<\/h3>\n        <p class=\"ath-gdl__desc\">2D \u03ba\u03b1\u03b9 3D \u03b5\u03b9\u03ba\u03bf\u03bd\u03bf\u03b3\u03c1\u03b1\u03c6\u03ae\u03c3\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 websites, marketing, \u03b2\u03b9\u03b2\u03bb\u03af\u03b1, \u03b5\u03ba\u03c0\u03b1\u03af\u03b4\u03b5\u03c5\u03c3\u03b7, media \u03ba\u03b1\u03b9 e-commerce.<\/p>\n      <\/li>\n      <li class=\"ath-gdl__row\" style=\"--i:4\">\n        <svg class=\"ath-gdl__tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n          <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n        <h3 class=\"ath-gdl__name\">Motion Design<\/h3>\n        <p class=\"ath-gdl__desc\">Animation \u03ba\u03b1\u03b9 \u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03ac \u03b3\u03b9\u03b1 social media, custom video assets, video editing \u03ba\u03b1\u03b9 post-production.<\/p>\n      <\/li>\n      <li class=\"ath-gdl__row\" style=\"--i:5\">\n        <svg class=\"ath-gdl__tick\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#459fff\"\/>\n          <path d=\"M7.5 12.5 L10.5 15.5 L16.5 9.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n        <h3 class=\"ath-gdl__name\">Branding<\/h3>\n        <p class=\"ath-gdl__desc\">\u039f\u03c0\u03c4\u03b9\u03ba\u03ae \u03c4\u03b1\u03c5\u03c4\u03cc\u03c4\u03b7\u03c4\u03b1, \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03bb\u03bf\u03b3\u03cc\u03c4\u03c5\u03c0\u03bf\u03c5, branding guidelines, \u03c0\u03b1\u03bb\u03ad\u03c4\u03b1 \u03c7\u03c1\u03c9\u03bc\u03ac\u03c4\u03c9\u03bd \u03ba\u03b1\u03b9 \u03c3\u03c5\u03c3\u03c4\u03ae\u03bc\u03b1\u03c4\u03b1 \u03c4\u03c5\u03c0\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1\u03c2.<\/p>\n      <\/li>\n    <\/ol>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  var s = document.querySelector('.ath-gdl'); if (!s) return;\n  var items = s.querySelectorAll('.ath-gdl__row'); if (!items.length) return;\n  var mqr = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n  if ((mqr && mqr.matches) || !('IntersectionObserver' in window)) { items.forEach(function(i){ i.classList.add('is-visible'); }); return; }\n  var io = new IntersectionObserver(function(entries){\n    entries.forEach(function(e){ if (e.isIntersecting){ e.target.classList.add('is-visible'); io.unobserve(e.target); } });\n  }, { rootMargin: '0px 0px -10% 0px', threshold: 0.12 });\n  items.forEach(function(i){ io.observe(i); });\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b55b990 e-con-full e-flex e-con e-parent\" data-id=\"b55b990\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-96a5453 elementor-widget elementor-widget-html\" data-id=\"96a5453\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \/services\/ \u2014 Widget 7 \/ 7 \u00b7 ABOUT TEASER\n     Blue surface closer with the same TREE_ATHEART_RETINA cutout\n     band as the homepage's `.ath-cut` widget at the top, then the\n     \"My Story, Our Story\" text + CTA pill below. CSS prefix\n     `.svc-abt-*`. The cutout's photo-sizing rules mirror the\n     homepage exactly (1920px fixed CSS width on desktop\/tablet,\n     1089px on mobile) so the visual is identical.\n     ============================================================= -->\n<style>\n.svc-abt,\n.svc-abt *,\n.svc-abt *::before,\n.svc-abt *::after { box-sizing: border-box; }\n\n.svc-abt {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  background: #459fff;\n  color: #fff;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n\/* ----- Tree cutout band (mirrors homepage `.ath-cut`) ----- *\/\n.svc-abt__cutout {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  contain: paint;\n  background: transparent;\n}\n.svc-abt__cutout-img {\n  display: block;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n  width: max(1920px, 100vw);\n  max-width: none !important;\n  height: auto !important;\n  user-select: none;\n  pointer-events: none;\n  filter: none !important;\n  opacity: 1 !important;\n  mix-blend-mode: normal !important;\n  transition: none !important;\n  animation: none !important;\n  image-rendering: auto !important;\n}\n@media (max-width: 767px) {\n  .svc-abt__cutout-img { width: 1089px; }\n}\n\n\/* ----- Text + CTA block above the cutout. Bottom padding 0 so the\n   tree cutout sits flush against the CTA pill (no blue gap). ----- *\/\n.svc-abt__textwrap {\n  padding: clamp(100px, 12vw, 160px) clamp(1rem, 4vw, 3rem) 0;\n}\n\n.svc-abt__inner {\n  max-width: 900px;\n  margin: 0 auto;\n  text-align: center;\n  \/* Flex column kills the inline-block baseline descent below the\n     CTA \u2014 the pill ends flush with the textwrap, no gap before the\n     tree cutout below. *\/\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  opacity: 0;\n  transform: translateY(24px);\n  transition: opacity 0.8s cubic-bezier(.22,.61,.36,1), transform 0.8s cubic-bezier(.22,.61,.36,1);\n}\n.svc-abt.is-visible .svc-abt__inner { opacity: 1; transform: translateY(0); }\n\n.svc-abt__eyebrow {\n  display: block;\n  margin: 0 0 1.2em;\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  font-weight: 700;\n  color: #fff;\n  opacity: 0.85;\n}\n\n.svc-abt__title {\n  margin: 0 0 0.9em;\n  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;\n  font-weight: 800 !important;\n  line-height: 1.1 !important;\n  letter-spacing: -0.005em;\n  color: #fff;\n}\n\n.svc-abt__text {\n  margin: 0 auto 2em;\n  max-width: 64ch;\n  font-size: clamp(1rem, 1.25vw, 1.15rem);\n  line-height: 1.75;\n  color: rgba(255,255,255,0.94);\n}\n\n.svc-abt__cta {\n  display: inline-block;\n  padding: 1em 2em;\n  background: #fff;\n  color: #459fff;\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  font-weight: 700;\n  border-radius: 999px;\n  text-decoration: none;\n  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;\n}\n.svc-abt__cta:hover,\n.svc-abt__cta:focus-visible {\n  background: #000;\n  color: #fff;\n  text-decoration: none;\n  transform: translateY(-1px);\n}\n.svc-abt__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }\n\n@media (max-width: 767px) {\n  .svc-abt__title { font-size: 2rem !important; }\n  .svc-abt__text { font-size: 1rem; line-height: 1.7; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .svc-abt__inner {\n    opacity: 1 !important;\n    transform: none !important;\n    transition: none !important;\n  }\n}\n<\/style>\n\n<section class=\"svc-abt\" data-svc-abt-reveal aria-labelledby=\"svc-abt-heading\">\n\n  <div class=\"svc-abt__textwrap\">\n    <div class=\"svc-abt__inner\">\n      <span class=\"svc-abt__eyebrow\">\u0397 \u0399\u03a3\u03a4\u039f\u03a1\u0399\u0391 \u039c\u039f\u03a5, \u0397 \u0399\u03a3\u03a4\u039f\u03a1\u0399\u0391 \u039c\u0391\u03a3<\/span>\n      <h2 class=\"svc-abt__title\" id=\"svc-abt-heading\">\u0388\u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc studio,<br>\u03b3\u03b9\u03b1 \u03c4\u03bf brand \u03c3\u03b1\u03c2.<\/h2>\n      <p class=\"svc-abt__text\">\n        \u03a3\u03c7\u03b5\u03b4\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b1 \u03c0\u03ac\u03bd\u03c4\u03b1 \u03b3\u03b9\u03b1 \u03c4\u03bf brand \u03c3\u03b1\u03c2. \u0397 ATHEART \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\n        \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc studio \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd \u03bc\u03b5 \u03b5\u03af\u03ba\u03bf\u03c3\u03b9 \u03c7\u03c1\u03cc\u03bd\u03b9\u03b1 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2: \u03b5\u03c4\u03b1\u03b9\u03c1\u03b9\u03ba\u03ae \u03c4\u03b1\u03c5\u03c4\u03cc\u03c4\u03b7\u03c4\u03b1, websites, \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03b1\u03c3\u03af\u03b5\u03c2, \u03b5\u03b9\u03ba\u03bf\u03bd\u03bf\u03b3\u03c1\u03ac\u03c6\u03b7\u03c3\u03b7, motion \u03ba\u03b1\u03b9 branding, \u03cc\u03bb\u03b1\n        \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b1 \u03bf\u03bb\u03bf\u03ba\u03bb\u03b7\u03c1\u03c9\u03bc\u03ad\u03bd\u03b1 \u03c3\u03b5 print \u03ba\u03b1\u03b9 digital.\n      <\/p>\n      <a class=\"svc-abt__cta\" href=\"https:\/\/atheart.gr\/el\/about\/\">\u0391\u039d\u0391\u039a\u0391\u039b\u03a5\u03a8\u03a4\u0395 \u03a4\u0397\u039d ATHEART<\/a>\n    <\/div>\n  <\/div>\n\n  <div class=\"svc-abt__cutout\" role=\"img\" aria-label=\"ATHEART cutout\">\n    <img class=\"svc-abt__cutout-img\"\n         src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/TREE_ATHEART_RETINA.jpg\"\n         alt=\"\"\n         aria-hidden=\"true\"\n         loading=\"lazy\"\n         decoding=\"async\">\n  <\/div>\n\n<\/section>\n\n<script>\n(function () {\n  var section = document.querySelector('[data-svc-abt-reveal]');\n  if (!section) return;\n  var mqReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n  if (mqReduce && mqReduce.matches || !('IntersectionObserver' in window)) {\n    section.classList.add('is-visible');\n    return;\n  }\n  var io = new IntersectionObserver(function (entries) {\n    entries.forEach(function (e) {\n      if (e.isIntersecting) {\n        e.target.classList.add('is-visible');\n        io.unobserve(e.target);\n      }\n    });\n  }, { rootMargin: '0px 0px -10% 0px', threshold: 0.15 });\n  io.observe(section);\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u039f\u03b9 \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u03bc\u03b1\u03c2 \u0391\u03c2 \u03c6\u03c4\u03b9\u03ac\u03be\u03bf\u03c5\u03bc\u03b5 \u03bc\u03b1\u03b6\u03af. \u03a0\u03c1\u03bf\u03c3\u03c6\u03ad\u03c1\u03bf\u03c5\u03bc\u03b5 \u03ad\u03bd\u03b1 \u03c6\u03ac\u03c3\u03bc\u03b1 \u03b1\u03c0\u03bf\u03ba\u03bb\u03b5\u03b9\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03b9\u03ce\u03bd, \u03c0\u03c1\u03bf\u03c3\u03b1\u03c1\u03bc\u03bf\u03c3\u03bc\u03ad\u03bd\u03c9\u03bd \u03c3\u03c4\u03b9\u03c2 \u03b1\u03bd\u03ac\u03b3\u03ba\u03b5\u03c2 \u03c3\u03b1\u03c2. \u0395\u03af\u03c4\u03b5 \u03b8\u03ad\u03bb\u03b5\u03c4\u03b5 \u03bd\u03b1 \u03b5\u03ba\u03b8\u03ad\u03c3\u03b5\u03c4\u03b5 \u03c4\u03b1 \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1 \u03c4\u03b7\u03c2 ATHEART \u03c3\u03c4\u03bf \u03ba\u03b1\u03c4\u03ac\u03c3\u03c4\u03b7\u03bc\u03ac \u03c3\u03b1\u03c2, \u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03ae\u03c3\u03b5\u03c4\u03b5 custom&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-30616","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u0393\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2 &amp; Limited Editions | ATHEART \u0391\u03b8\u03ae\u03bd\u03b1<\/title>\n<meta name=\"description\" content=\"\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b5\u03c2 \u03c7\u03bf\u03bd\u03b4\u03c1\u03b9\u03ba\u03ae\u03c2, \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03bb\u03cd\u03c3\u03b5\u03b9\u03c2, custom \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1 \u03ba\u03b1\u03b9 \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2. ATHEART \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1 \u03bc\u03b5 20+ \u03c7\u03c1\u03cc\u03bd\u03b9\u03b1 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atheart.gr\/el\/services\/\" \/>\n<meta property=\"og:locale\" content=\"el_GR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u0393\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2 &amp; Limited Editions | ATHEART \u0391\u03b8\u03ae\u03bd\u03b1\" \/>\n<meta property=\"og:description\" content=\"\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b5\u03c2 \u03c7\u03bf\u03bd\u03b4\u03c1\u03b9\u03ba\u03ae\u03c2, \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03bb\u03cd\u03c3\u03b5\u03b9\u03c2, custom \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1 \u03ba\u03b1\u03b9 \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2. ATHEART \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1 \u03bc\u03b5 20+ \u03c7\u03c1\u03cc\u03bd\u03b9\u03b1 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atheart.gr\/el\/services\/\" \/>\n<meta property=\"og:site_name\" content=\"ATHEART online shop\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-08T13:01:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/05\/atheart_social.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/05\/atheart_social.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"\u0395\u03ba\u03c4\u03b9\u03bc\u03ce\u03bc\u03b5\u03bd\u03bf\u03c2 \u03c7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03b1\u03bd\u03ac\u03b3\u03bd\u03c9\u03c3\u03b7\u03c2\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 \u03bb\u03b5\u03c0\u03c4\u03ac\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atheart.gr\/el\/services\/\",\"url\":\"https:\/\/atheart.gr\/el\/services\/\",\"name\":\"\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u0393\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2 & Limited Editions | ATHEART \u0391\u03b8\u03ae\u03bd\u03b1\",\"isPartOf\":{\"@id\":\"https:\/\/atheart.gr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/atheart.gr\/el\/services\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/atheart.gr\/el\/services\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_header.svg\",\"datePublished\":\"2026-04-27T09:53:33+00:00\",\"dateModified\":\"2026-05-08T13:01:42+00:00\",\"description\":\"\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b5\u03c2 \u03c7\u03bf\u03bd\u03b4\u03c1\u03b9\u03ba\u03ae\u03c2, \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03bb\u03cd\u03c3\u03b5\u03b9\u03c2, custom \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1 \u03ba\u03b1\u03b9 \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2. ATHEART \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1 \u03bc\u03b5 20+ \u03c7\u03c1\u03cc\u03bd\u03b9\u03b1 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2.\",\"breadcrumb\":{\"@id\":\"https:\/\/atheart.gr\/el\/services\/#breadcrumb\"},\"inLanguage\":\"el\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atheart.gr\/el\/services\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"el\",\"@id\":\"https:\/\/atheart.gr\/el\/services\/#primaryimage\",\"url\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_header.svg\",\"contentUrl\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_header.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atheart.gr\/el\/services\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/atheart.gr\/el\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atheart.gr\/#website\",\"url\":\"https:\/\/atheart.gr\/\",\"name\":\"ATHEART online shop\",\"description\":\"Carrying Stories, Crafting Style \u2013 A Creative Studio for Inspired Design\",\"publisher\":{\"@id\":\"https:\/\/atheart.gr\/#organization\"},\"alternateName\":\"ATHEART Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atheart.gr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"el\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atheart.gr\/#organization\",\"name\":\"ATHEART\",\"alternateName\":\"ATHEART Studio\",\"url\":\"https:\/\/atheart.gr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"el\",\"@id\":\"https:\/\/atheart.gr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/07\/cropped-fav2.png\",\"contentUrl\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/07\/cropped-fav2.png\",\"width\":512,\"height\":512,\"caption\":\"ATHEART\"},\"image\":{\"@id\":\"https:\/\/atheart.gr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/atheart_official\/\",\"https:\/\/www.tiktok.com\/@atheart_official\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u0393\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2 & Limited Editions | ATHEART \u0391\u03b8\u03ae\u03bd\u03b1","description":"\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b5\u03c2 \u03c7\u03bf\u03bd\u03b4\u03c1\u03b9\u03ba\u03ae\u03c2, \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03bb\u03cd\u03c3\u03b5\u03b9\u03c2, custom \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1 \u03ba\u03b1\u03b9 \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2. ATHEART \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1 \u03bc\u03b5 20+ \u03c7\u03c1\u03cc\u03bd\u03b9\u03b1 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atheart.gr\/el\/services\/","og_locale":"el_GR","og_type":"article","og_title":"\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u0393\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2 & Limited Editions | ATHEART \u0391\u03b8\u03ae\u03bd\u03b1","og_description":"\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b5\u03c2 \u03c7\u03bf\u03bd\u03b4\u03c1\u03b9\u03ba\u03ae\u03c2, \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03bb\u03cd\u03c3\u03b5\u03b9\u03c2, custom \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1 \u03ba\u03b1\u03b9 \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2. ATHEART \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1 \u03bc\u03b5 20+ \u03c7\u03c1\u03cc\u03bd\u03b9\u03b1 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2.","og_url":"https:\/\/atheart.gr\/el\/services\/","og_site_name":"ATHEART online shop","article_modified_time":"2026-05-08T13:01:42+00:00","og_image":[{"url":"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/05\/atheart_social.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/05\/atheart_social.jpg","twitter_misc":{"\u0395\u03ba\u03c4\u03b9\u03bc\u03ce\u03bc\u03b5\u03bd\u03bf\u03c2 \u03c7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03b1\u03bd\u03ac\u03b3\u03bd\u03c9\u03c3\u03b7\u03c2":"4 \u03bb\u03b5\u03c0\u03c4\u03ac"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/atheart.gr\/el\/services\/","url":"https:\/\/atheart.gr\/el\/services\/","name":"\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u0393\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2 & Limited Editions | ATHEART \u0391\u03b8\u03ae\u03bd\u03b1","isPartOf":{"@id":"https:\/\/atheart.gr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/atheart.gr\/el\/services\/#primaryimage"},"image":{"@id":"https:\/\/atheart.gr\/el\/services\/#primaryimage"},"thumbnailUrl":"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_header.svg","datePublished":"2026-04-27T09:53:33+00:00","dateModified":"2026-05-08T13:01:42+00:00","description":"\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b5\u03c2 \u03c7\u03bf\u03bd\u03b4\u03c1\u03b9\u03ba\u03ae\u03c2, \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03bb\u03cd\u03c3\u03b5\u03b9\u03c2, custom \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1 \u03ba\u03b1\u03b9 \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2 \u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2. ATHEART \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1 \u03bc\u03b5 20+ \u03c7\u03c1\u03cc\u03bd\u03b9\u03b1 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2.","breadcrumb":{"@id":"https:\/\/atheart.gr\/el\/services\/#breadcrumb"},"inLanguage":"el","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atheart.gr\/el\/services\/"]}]},{"@type":"ImageObject","inLanguage":"el","@id":"https:\/\/atheart.gr\/el\/services\/#primaryimage","url":"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_header.svg","contentUrl":"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/services_header.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/atheart.gr\/el\/services\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/atheart.gr\/el\/"},{"@type":"ListItem","position":2,"name":"\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2"}]},{"@type":"WebSite","@id":"https:\/\/atheart.gr\/#website","url":"https:\/\/atheart.gr\/","name":"ATHEART online shop","description":"Carrying Stories, Crafting Style \u2013 A Creative Studio for Inspired Design","publisher":{"@id":"https:\/\/atheart.gr\/#organization"},"alternateName":"ATHEART Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atheart.gr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"el"},{"@type":"Organization","@id":"https:\/\/atheart.gr\/#organization","name":"ATHEART","alternateName":"ATHEART Studio","url":"https:\/\/atheart.gr\/","logo":{"@type":"ImageObject","inLanguage":"el","@id":"https:\/\/atheart.gr\/#\/schema\/logo\/image\/","url":"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/07\/cropped-fav2.png","contentUrl":"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/07\/cropped-fav2.png","width":512,"height":512,"caption":"ATHEART"},"image":{"@id":"https:\/\/atheart.gr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/atheart_official\/","https:\/\/www.tiktok.com\/@atheart_official"]}]}},"_links":{"self":[{"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/pages\/30616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/comments?post=30616"}],"version-history":[{"count":23,"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/pages\/30616\/revisions"}],"predecessor-version":[{"id":30940,"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/pages\/30616\/revisions\/30940"}],"wp:attachment":[{"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/media?parent=30616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}