{"id":754,"date":"2024-08-15T11:31:11","date_gmt":"2024-08-15T11:31:11","guid":{"rendered":"https:\/\/rootsinbetween.gr\/?page_id=754"},"modified":"2026-06-14T15:37:48","modified_gmt":"2026-06-14T15:37:48","slug":"animated-gradient-background-with-blob-shapes","status":"publish","type":"page","link":"https:\/\/rootsinbetween.gr\/?page_id=754","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"754\" class=\"elementor elementor-754\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71744f4 e-con-full e-flex e-con e-parent\" data-id=\"71744f4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d066a41 elementor-widget elementor-widget-html\" data-id=\"d066a41\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  ELEMENTOR\r\n  1. Upload the MP4 to WordPress Media Library.\r\n  2. Add an HTML widget to a full-width Elementor section\/container.\r\n  3. Paste this entire snippet into the widget.\r\n  4. Upload video-scroll-optimized.mp4 and replace the relative src below\r\n     with its direct Media Library URL.\r\n-->\r\n\r\n<div class=\"scroll-video\" data-scroll-video>\r\n  <!-- \u03a4\u03bf sticky \u03c0\u03bb\u03b1\u03af\u03c3\u03b9\u03bf \u03bc\u03ad\u03bd\u03b5\u03b9 \u03c3\u03c4\u03b1\u03b8\u03b5\u03c1\u03cc \u03c3\u03c4\u03b7\u03bd \u03bf\u03b8\u03cc\u03bd\u03b7 \u03cc\u03c3\u03bf \u03b3\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03c4\u03bf scroll. -->\r\n  <div class=\"scroll-video__sticky\">\r\n    <!--\r\n      \u03a4\u039f \u0392\u0399\u039d\u03a4\u0395\u039f\r\n      \u0386\u03bb\u03bb\u03b1\u03be\u03b5 \u03bc\u03cc\u03bd\u03bf \u03c4\u03bf src \u03bc\u03b5 \u03c4\u03bf direct URL \u03c4\u03bf\u03c5 MP4 \u03b1\u03c0\u03cc \u03c4\u03bf WordPress Media Library.\r\n      preload=\"auto\": \u03b6\u03b7\u03c4\u03ac \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd browser \u03bd\u03b1 \u03c6\u03bf\u03c1\u03c4\u03ce\u03c3\u03b5\u03b9 \u03c4\u03bf \u03b2\u03af\u03bd\u03c4\u03b5\u03bf \u03bd\u03c9\u03c1\u03af\u03c2.\r\n      muted\/playsinline: \u03b1\u03c0\u03b1\u03c1\u03b1\u03af\u03c4\u03b7\u03c4\u03b1 \u03b3\u03b9\u03b1 \u03c3\u03c9\u03c3\u03c4\u03ae \u03bb\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 \u03c3\u03b5 \u03ba\u03b9\u03bd\u03b7\u03c4\u03ac.\r\n    -->\r\n    <video\r\n      class=\"scroll-video__media\"\r\n      data-scroll-video-media\r\n      src=\"https:\/\/rootsinbetween.gr\/wp-content\/uploads\/2026\/06\/video-scroll-optimized.mp4\"\r\n      preload=\"auto\"\r\n      muted\r\n      playsinline\r\n      webkit-playsinline\r\n    ><\/video>\r\n\r\n    <!-- \u03a3\u03ba\u03bf\u03cd\u03c1\u03bf gradient \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc \u03c4\u03bf \u03b2\u03af\u03bd\u03c4\u03b5\u03bf \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b9\u03b1\u03b2\u03ac\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c4\u03bf \u03bb\u03b5\u03c5\u03ba\u03cc \u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03bf. -->\r\n    <div class=\"scroll-video__shade\" aria-hidden=\"true\"><\/div>\r\n\r\n    <!-- \u039f \u03bc\u03b5\u03b3\u03ac\u03bb\u03bf\u03c2 \u03c4\u03af\u03c4\u03bb\u03bf\u03c2 \u03c0\u03bf\u03c5 \u03b5\u03bc\u03c6\u03b1\u03bd\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c0\u03c1\u03bf\u03c2 \u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2 \u03c4\u03bf\u03c5 \u03b2\u03af\u03bd\u03c4\u03b5\u03bf. -->\r\n    <div class=\"scroll-video__services\">\r\n        <h3 class=\"scroll-down\">Scroll Down \u25bd <\/h3>\r\n      <span class=\"scroll-video__eyebrow\">What we do<\/span>\r\n      <h2 class=\"scroll-video__title\">Services<\/h2>\r\n      <span class=\"scroll-video__line\" aria-hidden=\"true\"><\/span>\r\n    <\/div>\r\n\r\n    <!-- \u03a4\u03bf panel \u03bc\u03b5 \u03c4\u03b7\u03bd \u03c0\u03b5\u03c1\u03b9\u03b3\u03c1\u03b1\u03c6\u03ae \u03ba\u03b1\u03b9 \u03c4\u03b7 \u03bb\u03af\u03c3\u03c4\u03b1 \u03c4\u03c9\u03bd \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03b9\u03ce\u03bd. -->\r\n    <div class=\"scroll-video__content\" data-services-content>\r\n      <!-- \u039a\u03ac\u03b8\u03b5 \u03c3\u03c4\u03bf\u03b9\u03c7\u03b5\u03af\u03bf \u03bc\u03b5 data-service-item \u03b5\u03bc\u03c6\u03b1\u03bd\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03b4\u03b9\u03b1\u03b4\u03bf\u03c7\u03b9\u03ba\u03ac. -->\r\n      <p class=\"scroll-video__intro\" data-service-item>\r\n        Our organisation offers high-quality services with a focus on ensuring optimal\r\n        collaboration between our clients and partners. Our multidisciplinary team brings\r\n        together expertise in key sectors to achieve shared goals and resolve critical issues.\r\n      <\/p>\r\n\r\n      <p class=\"scroll-video__intro scroll-video__intro--secondary\" data-service-item>\r\n        We build partnerships with public and private entities at national and international\r\n        level to advance our vision. Our services include, among others:\r\n      <\/p>\r\n\r\n      <ol class=\"scroll-video__list\">\r\n        <li data-service-item><span>01<\/span>Project design, implementation, and management<\/li>\r\n        <li data-service-item><span>02<\/span>Support and guidance for participation in European and national projects<\/li>\r\n        <li data-service-item><span>03<\/span>Research, studies, and analysis in social, environmental, cultural, and economic fields<\/li>\r\n        <li data-service-item><span>04<\/span>Consulting on sustainable practices and the use of technical tools<\/li>\r\n        <li data-service-item><span>05<\/span>Educational initiatives<\/li>\r\n      <\/ol>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  \/* ================================================================\r\n     1. \u039a\u03a5\u03a1\u0399\u039f SECTION \u039a\u0391\u0399 \u0391\u03a0\u039f\u03a3\u03a4\u0391\u03a3\u0397 SCROLL\r\n     ================================================================ *\/\r\n  .scroll-video {\r\n    position: relative;\r\n    \/*\r\n      900vh = \u03c3\u03c5\u03bd\u03bf\u03bb\u03b9\u03ba\u03ae \u03b4\u03b9\u03ac\u03c1\u03ba\u03b5\u03b9\u03b1 \u03c4\u03bf\u03c5 scroll animation.\r\n      \u039c\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03b7 \u03c4\u03b9\u03bc\u03ae: \u03c0\u03b9\u03bf \u03b1\u03c1\u03b3\u03cc \u03ba\u03b1\u03b9 \u03bb\u03b5\u03c0\u03c4\u03bf\u03bc\u03b5\u03c1\u03ad\u03c2 animation.\r\n      \u039c\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b7 \u03c4\u03b9\u03bc\u03ae: \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03bf animation.\r\n    *\/\r\n    height: 900vh;\r\n    background: #000;\r\n  }\r\n\r\n  .scroll-video__sticky {\r\n    \/* \u039a\u03c1\u03b1\u03c4\u03ac \u03c4\u03bf \u03c0\u03b5\u03c1\u03b9\u03b5\u03c7\u03cc\u03bc\u03b5\u03bd\u03bf \u03c3\u03c4\u03b1\u03b8\u03b5\u03c1\u03cc \u03cc\u03c3\u03bf \u03bf \u03c7\u03c1\u03ae\u03c3\u03c4\u03b7\u03c2 \u03ba\u03b9\u03bd\u03b5\u03af\u03c4\u03b1\u03b9 \u03bc\u03ad\u03c3\u03b1 \u03c3\u03c4\u03bf section. *\/\r\n    position: sticky;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100vh;\r\n    height: 100svh;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .scroll-video__media {\r\n    \/* \u03a4\u03bf \u03b2\u03af\u03bd\u03c4\u03b5\u03bf \u03b3\u03b5\u03bc\u03af\u03b6\u03b5\u03b9 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7 \u03c4\u03b7\u03bd \u03bf\u03b8\u03cc\u03bd\u03b7. *\/\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    \/* \u0386\u03bb\u03bb\u03b1\u03be\u03b5 \u03c3\u03b5 contain \u03b1\u03bd \u03b8\u03ad\u03bb\u03b5\u03b9\u03c2 \u03bd\u03b1 \u03c6\u03b1\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03bf \u03c7\u03c9\u03c1\u03af\u03c2 crop. *\/\r\n    will-change: contents;\r\n  }\r\n\r\n  .scroll-video__shade {\r\n    \/* \u0397 \u03ad\u03bd\u03c4\u03b1\u03c3\u03b7 \u03c4\u03bf\u03c5 \u03c3\u03ba\u03bf\u03c4\u03b5\u03b9\u03bd\u03b9\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2 \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03b5\u03af \u03c4\u03b7\u03bd \u03b5\u03bc\u03c6\u03ac\u03bd\u03b9\u03c3\u03b7 \u03c4\u03bf\u03c5 Services. *\/\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.72));\r\n    opacity: calc(var(--services-progress, 0) * 0.95);\r\n    pointer-events: none;\r\n  }\r\n  \r\n  \r\n  \r\n  .scroll-down {\r\n      position: absolute;\r\n      left: clamp(34px, 50vw, 420px);\r\n      top: 190px;\r\n      color: #fff;\r\n      \r\n  }\r\n\r\n  .scroll-video__services {\r\n    \/* ================================================================\r\n       2. \u039c\u0395\u0393\u0391\u039b\u039f\u03a3 \u03a4\u0399\u03a4\u039b\u039f\u03a3 SERVICES\r\n       ================================================================ *\/\r\n    position: absolute;\r\n    left: clamp(24px, 7vw, 120px);\r\n    bottom: clamp(48px, 10vh, 120px);\r\n    z-index: 2;\r\n    color: #fff;\r\n    opacity: var(--services-progress, 0);\r\n    transform: translate3d(\r\n      0,\r\n      calc(((1 - var(--services-progress, 0)) * 70px) - (var(--content-progress, 0) * 52vh)),\r\n      0\r\n    ) scale(calc(1 - (var(--content-progress, 0) * 0.34)));\r\n    transform-origin: left bottom;\r\n    filter: blur(calc((1 - var(--services-progress, 0)) * 12px));\r\n    will-change: opacity, transform, filter;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .scroll-video__eyebrow {\r\n    \/* \u039c\u03b9\u03ba\u03c1\u03cc\u03c2 \u03c4\u03af\u03c4\u03bb\u03bf\u03c2 \"What we do\". *\/\r\n    display: block;\r\n    margin-bottom: 10px;\r\n    font: 500 clamp(11px, 0.9vw, 14px)\/1.2 Arial, sans-serif;\r\n    letter-spacing: calc(0.18em + ((1 - var(--services-progress, 0)) * 0.2em));\r\n    text-transform: uppercase;\r\n    opacity: 0.75;\r\n  }\r\n\r\n  .scroll-video__title {\r\n    \/* \u039c\u03b5\u03b3\u03ac\u03bb\u03bf\u03c2 responsive \u03c4\u03af\u03c4\u03bb\u03bf\u03c2. \u0386\u03bb\u03bb\u03b1\u03be\u03b5 Arial \u03bc\u03b5 \u03c4\u03b7 \u03b3\u03c1\u03b1\u03bc\u03bc\u03b1\u03c4\u03bf\u03c3\u03b5\u03b9\u03c1\u03ac \u03c4\u03bf\u03c5 site. *\/\r\n    margin: 0;\r\n    font: 600 clamp(64px, 13vw, 190px)\/0.82 Arial, sans-serif;\r\n    color: #E9DCCD;\r\n    letter-spacing: -0.065em;\r\n  }\r\n\r\n  .scroll-video__line {\r\n    \/* \u0397 \u03bb\u03b5\u03c0\u03c4\u03ae \u03b3\u03c1\u03b1\u03bc\u03bc\u03ae \u03b1\u03bd\u03bf\u03af\u03b3\u03b5\u03b9 \u03b1\u03c0\u03cc \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b1 \u03b4\u03b5\u03be\u03b9\u03ac. *\/\r\n    display: block;\r\n    width: clamp(120px, 26vw, 420px);\r\n    height: 1px;\r\n    margin-top: clamp(24px, 4vh, 48px);\r\n    background: rgba(255, 255, 255, 0.8);\r\n    transform: scaleX(var(--services-progress, 0));\r\n    transform-origin: left center;\r\n  }\r\n\r\n  .scroll-video__content {\r\n    \/* ================================================================\r\n       3. PANEL \u03a0\u0395\u03a1\u0399\u0393\u03a1\u0391\u03a6\u0397\u03a3 \u039a\u0391\u0399 \u03a5\u03a0\u0397\u03a1\u0395\u03a3\u0399\u03a9\u039d\r\n       ================================================================ *\/\r\n    position: absolute;\r\n    z-index: 3;\r\n    top: clamp(150px, 25vh, 260px);\r\n    right: clamp(24px, 7vw, 120px);\r\n    width: min(760px, 53vw); \/* \u039c\u03ad\u03b3\u03b9\u03c3\u03c4\u03bf \u03c0\u03bb\u03ac\u03c4\u03bf\u03c2 panel: 760px. *\/\r\n    max-height: calc(100svh - 190px);\r\n    padding: clamp(24px, 3vw, 48px);\r\n    overflow: hidden;\r\n    color: #fff;\r\n    background: rgba(7, 9, 12, 0.62); \/* \u03a4\u03bf 0.62 \u03b5\u03bb\u03ad\u03b3\u03c7\u03b5\u03b9 \u03c4\u03b7 \u03b4\u03b9\u03b1\u03c6\u03ac\u03bd\u03b5\u03b9\u03b1. *\/\r\n    border: 1px solid rgba(255, 255, 255, 0.16);\r\n    border-radius: 2px;\r\n    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);\r\n    backdrop-filter: blur(18px); \/* Glass effect \u03c3\u03c4\u03bf \u03b2\u03af\u03bd\u03c4\u03b5\u03bf \u03c0\u03af\u03c3\u03c9 \u03b1\u03c0\u03cc \u03c4\u03bf panel. *\/\r\n    -webkit-backdrop-filter: blur(18px);\r\n    opacity: var(--content-progress, 0);\r\n    transform: translate3d(calc((1 - var(--content-progress, 0)) * 80px), 0, 0);\r\n    will-change: opacity, transform;\r\n  }\r\n\r\n  .scroll-video__intro {\r\n    \/* \u0392\u03b1\u03c3\u03b9\u03ba\u03cc \u03b5\u03b9\u03c3\u03b1\u03b3\u03c9\u03b3\u03b9\u03ba\u03cc \u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03bf. *\/\r\n    margin: 0;\r\n    max-width: 68ch;\r\n    font: 400 clamp(14px, 1.05vw, 18px)\/1.6 Arial, sans-serif;\r\n    color: rgba(255, 255, 255, 0.9);\r\n  }\r\n\r\n  .scroll-video__intro--secondary {\r\n    \/* \u0394\u03b5\u03cd\u03c4\u03b5\u03c1\u03b7 \u03c0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2 \u03bc\u03b5 \u03c7\u03b1\u03bc\u03b7\u03bb\u03cc\u03c4\u03b5\u03c1\u03b7 \u03c6\u03c9\u03c4\u03b5\u03b9\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1. *\/\r\n    margin-top: 12px;\r\n    color: rgba(255, 255, 255, 0.66);\r\n  }\r\n\r\n  .scroll-video__list {\r\n    \/* \u0391\u03c6\u03b1\u03b9\u03c1\u03b5\u03af \u03c4\u03b7\u03bd \u03b1\u03c5\u03c4\u03cc\u03bc\u03b1\u03c4\u03b7 \u03b1\u03c1\u03af\u03b8\u03bc\u03b7\u03c3\u03b7 \u03c4\u03bf\u03c5 browser. *\/\r\n    margin: clamp(22px, 3vh, 36px) 0 0;\r\n    padding: 0;\r\n    list-style: none;\r\n  }\r\n\r\n  .scroll-video__list li {\r\n    \/* \u039a\u03ac\u03b8\u03b5 \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b1 \u03ad\u03c7\u03b5\u03b9 \u03c3\u03c4\u03ae\u03bb\u03b7 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd \u03ba\u03b1\u03b9 \u03c3\u03c4\u03ae\u03bb\u03b7 \u03ba\u03b5\u03b9\u03bc\u03ad\u03bd\u03bf\u03c5. *\/\r\n    display: grid;\r\n    grid-template-columns: 42px 1fr;\r\n    gap: 14px;\r\n    padding: clamp(12px, 1.6vh, 20px) 0;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.15);\r\n    font: 500 clamp(15px, 1.15vw, 20px)\/1.35 Arial, sans-serif;\r\n  }\r\n\r\n  .scroll-video__list li span {\r\n    \/* \u03a3\u03c4\u03c5\u03bb \u03b3\u03b9\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 01, 02, 03 \u03ba\u03c4\u03bb. *\/\r\n    padding-top: 3px;\r\n    font: 500 11px\/1 Arial, sans-serif;\r\n    letter-spacing: 0.12em;\r\n    color: rgba(255, 255, 255, 0.45);\r\n  }\r\n\r\n  [data-service-item] {\r\n    \/* \u0391\u03c1\u03c7\u03b9\u03ba\u03ae \u03ba\u03b1\u03c4\u03ac\u03c3\u03c4\u03b1\u03c3\u03b7 \u03c0\u03c1\u03b9\u03bd \u03b5\u03bc\u03c6\u03b1\u03bd\u03b9\u03c3\u03c4\u03bf\u03cd\u03bd \u03c3\u03c4\u03b1\u03b4\u03b9\u03b1\u03ba\u03ac \u03c4\u03b1 \u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03b1. *\/\r\n    opacity: 0;\r\n    transform: translate3d(0, 30px, 0);\r\n    filter: blur(7px);\r\n    will-change: opacity, transform, filter;\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    \/* ================================================================\r\n       4. \u03a1\u03a5\u0398\u039c\u0399\u03a3\u0395\u0399\u03a3 \u039a\u0399\u039d\u0397\u03a4\u039f\u03a5 \/ TABLET\r\n       ================================================================ *\/\r\n    .scroll-video {\r\n      height: 850vh;\r\n    }\r\n\r\n    .scroll-video__services {\r\n      left: 20px;\r\n    }\r\n\r\n    .scroll-video__content {\r\n      top: 25vh;\r\n      right: 16px;\r\n      left: 16px;\r\n      width: auto;\r\n      max-height: 70svh;\r\n      padding: 22px;\r\n      overflow-y: auto;\r\n    }\r\n\r\n    .scroll-video__list li {\r\n      grid-template-columns: 34px 1fr;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  \/* \u0392\u03c1\u03af\u03c3\u03ba\u03b5\u03b9 \u03cc\u03bb\u03b1 \u03c4\u03b1 scroll-video sections, \u03b1\u03bd \u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1 \u03b1\u03c0\u03cc \u03ad\u03bd\u03b1. *\/\r\n  const sections = document.querySelectorAll('[data-scroll-video]');\r\n\r\n  sections.forEach((section) => {\r\n    \/* \u0391\u03c0\u03bf\u03c4\u03c1\u03ad\u03c0\u03b5\u03b9 \u03c4\u03b7 \u03b4\u03b9\u03c0\u03bb\u03ae \u03b5\u03bd\u03b5\u03c1\u03b3\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7 \u03c4\u03bf\u03c5 script \u03bc\u03ad\u03c3\u03b1 \u03c3\u03c4\u03bf\u03bd Elementor editor. *\/\r\n    if (section.dataset.initialized === 'true') return;\r\n    section.dataset.initialized = 'true';\r\n\r\n    const video = section.querySelector('[data-scroll-video-media]');\r\n    \/* \u038c\u03bb\u03b1 \u03c4\u03b1 \u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03b1 \u03c0\u03bf\u03c5 \u03b8\u03b1 \u03b5\u03bc\u03c6\u03b1\u03bd\u03b9\u03c3\u03c4\u03bf\u03cd\u03bd \u03ad\u03bd\u03b1-\u03ad\u03bd\u03b1. *\/\r\n    const serviceItems = [...section.querySelectorAll('[data-service-item]')];\r\n    if (!video) return;\r\n\r\n    \/* target = \u03c0\u03bf\u03cd \u03b8\u03ad\u03bb\u03b5\u03b9 \u03bd\u03b1 \u03c0\u03ac\u03b5\u03b9 \u03c4\u03bf scroll, displayed = \u03c4\u03b9 \u03b2\u03bb\u03ad\u03c0\u03bf\u03c5\u03bc\u03b5 \u03c4\u03ce\u03c1\u03b1. *\/\r\n    let targetTime = 0;\r\n    let displayedTime = 0;\r\n    let targetServices = 0;\r\n    let displayedServices = 0;\r\n    let targetContent = 0;\r\n    let displayedContent = 0;\r\n    let duration = 0;\r\n    let ticking = false;\r\n    \/*\r\n      \u03a1\u03a5\u0398\u039c\u0399\u03a3\u0395\u0399\u03a3 SMOOTHNESS\r\n      \u039c\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 = \u03c0\u03b9\u03bf \u03b1\u03c1\u03b3\u03ae\/\u03b1\u03c0\u03b1\u03bb\u03ae \u03ba\u03af\u03bd\u03b7\u03c3\u03b7 \u03bc\u03b5 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b7 \u03ba\u03b1\u03b8\u03c5\u03c3\u03c4\u03ad\u03c1\u03b7\u03c3\u03b7.\r\n      \u039c\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 = \u03c0\u03b9\u03bf \u03ac\u03bc\u03b5\u03c3\u03b7 \u03b1\u03bd\u03c4\u03af\u03b4\u03c1\u03b1\u03c3\u03b7 \u03c3\u03c4\u03bf scroll.\r\n    *\/\r\n    const smoothing = 0.08;         \/\/ \u039f\u03bc\u03b1\u03bb\u03cc\u03c4\u03b7\u03c4\u03b1 \u03c4\u03bf\u03c5 \u03b2\u03af\u03bd\u03c4\u03b5\u03bf.\r\n    const servicesSmoothing = 0.055; \/\/ \u039f\u03bc\u03b1\u03bb\u03cc\u03c4\u03b7\u03c4\u03b1 \u03c4\u03bf\u03c5 \u03c4\u03af\u03c4\u03bb\u03bf\u03c5 Services.\r\n    const contentSmoothing = 0.05;   \/\/ \u039f\u03bc\u03b1\u03bb\u03cc\u03c4\u03b7\u03c4\u03b1 \u03c4\u03bf\u03c5 panel \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03b9\u03ce\u03bd.\r\n\r\n    video.pause();\r\n\r\n    const updateTarget = () => {\r\n      \/* \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03af\u03b6\u03b5\u03b9 \u03c0\u03cc\u03c3\u03bf \u03ad\u03c7\u03b5\u03b9 \u03c0\u03c1\u03bf\u03c7\u03c9\u03c1\u03ae\u03c3\u03b5\u03b9 \u03bf \u03c7\u03c1\u03ae\u03c3\u03c4\u03b7\u03c2 \u03bc\u03ad\u03c3\u03b1 \u03c3\u03c4\u03bf section: 0 \u03ad\u03c9\u03c2 1. *\/\r\n      const rect = section.getBoundingClientRect();\r\n      const scrollDistance = Math.max(1, section.offsetHeight - window.innerHeight);\r\n      const progress = Math.min(1, Math.max(0, -rect.top \/ scrollDistance));\r\n\r\n      \/*\r\n        \u039f \u03c4\u03af\u03c4\u03bb\u03bf\u03c2 \u03be\u03b5\u03ba\u03b9\u03bd\u03ac \u03c3\u03c4\u03bf 0% \u03c4\u03bf\u03c5 \u03c3\u03c5\u03bd\u03bf\u03bb\u03b9\u03ba\u03bf\u03cd scroll \u03ba\u03b1\u03b9 \u03bf\u03bb\u03bf\u03ba\u03bb\u03b7\u03c1\u03ce\u03bd\u03b5\u03c4\u03b1\u03b9 \u03c3\u03c4\u03bf 80%.\r\n        \u0386\u03bb\u03bb\u03b1\u03be\u03b5 \u03c4\u03bf 0.64 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03be\u03b5\u03ba\u03b9\u03bd\u03ac \u03bd\u03c9\u03c1\u03af\u03c4\u03b5\u03c1\u03b1 \u03ae \u03b1\u03c1\u03b3\u03cc\u03c4\u03b5\u03c1\u03b1.\r\n      *\/\r\n      const servicesProgress = Math.min(1, Math.max(0, (progress - 0.1) \/ 0));\r\n      targetServices = 1 - Math.pow(1 - servicesProgress, 3);\r\n\r\n      \/* \u03a4\u03bf panel \u03be\u03b5\u03ba\u03b9\u03bd\u03ac \u03c3\u03c4\u03bf 78% \u03ba\u03b1\u03b9 \u03bf\u03bb\u03bf\u03ba\u03bb\u03b7\u03c1\u03ce\u03bd\u03b5\u03c4\u03b1\u03b9 \u03c3\u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2 \u03c4\u03bf\u03c5 section. *\/\r\n      const contentProgress = Math.min(1, Math.max(0, (progress - 0.38) \/ 0.22));\r\n      targetContent = 1 - Math.pow(1 - contentProgress, 3);\r\n\r\n      \/* \u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03ad\u03c0\u03b5\u03b9 \u03c4\u03b7 \u03b8\u03ad\u03c3\u03b7 scroll \u03c3\u03c4\u03bf\u03bd \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03bf\u03b9\u03c7\u03bf \u03c7\u03c1\u03cc\u03bd\u03bf \u03c4\u03bf\u03c5 \u03b2\u03af\u03bd\u03c4\u03b5\u03bf. *\/\r\n      targetTime = progress * duration;\r\n\r\n      if (!ticking) {\r\n        ticking = true;\r\n        requestAnimationFrame(render);\r\n      }\r\n    };\r\n\r\n    const render = () => {\r\n      \/* \u03a0\u03bb\u03b7\u03c3\u03b9\u03ac\u03b6\u03b5\u03b9 \u03c3\u03c4\u03b1\u03b4\u03b9\u03b1\u03ba\u03ac \u03c4\u03b9\u03c2 target \u03c4\u03b9\u03bc\u03ad\u03c2 \u03b1\u03bd\u03c4\u03af \u03bd\u03b1 \u03ba\u03ac\u03bd\u03b5\u03b9 \u03b1\u03c0\u03cc\u03c4\u03bf\u03bc\u03bf \u03ac\u03bb\u03bc\u03b1. *\/\r\n      displayedTime += (targetTime - displayedTime) * smoothing;\r\n      displayedServices += (targetServices - displayedServices) * servicesSmoothing;\r\n      displayedContent += (targetContent - displayedContent) * contentSmoothing;\r\n      section.style.setProperty('--services-progress', displayedServices.toFixed(4));\r\n      section.style.setProperty('--content-progress', displayedContent.toFixed(4));\r\n\r\n      serviceItems.forEach((item, index) => {\r\n        \/*\r\n          Stagger: \u03ba\u03ac\u03b8\u03b5 \u03b5\u03c0\u03cc\u03bc\u03b5\u03bd\u03bf \u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03bf \u03be\u03b5\u03ba\u03b9\u03bd\u03ac \u03bb\u03af\u03b3\u03bf \u03b1\u03c1\u03b3\u03cc\u03c4\u03b5\u03c1\u03b1.\r\n          \u039c\u03b5\u03af\u03c9\u03c3\u03b5 \u03c4\u03bf 0.095 \u03b3\u03b9\u03b1 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b7 \u03b1\u03c0\u03cc\u03c3\u03c4\u03b1\u03c3\u03b7 \u03bc\u03b5\u03c4\u03b1\u03be\u03cd \u03c4\u03c9\u03bd \u03b5\u03bc\u03c6\u03b1\u03bd\u03af\u03c3\u03b5\u03c9\u03bd.\r\n        *\/\r\n        const start = index * 0.095;\r\n        const itemProgress = Math.min(1, Math.max(0, (displayedContent - start) \/ 0.3));\r\n        const eased = 1 - Math.pow(1 - itemProgress, 3);\r\n        item.style.opacity = eased.toFixed(4);\r\n        item.style.transform = `translate3d(0, ${(1 - eased) * 30}px, 0)`;\r\n        item.style.filter = `blur(${(1 - eased) * 7}px)`;\r\n      });\r\n\r\n      if (Number.isFinite(displayedTime) && Math.abs(video.currentTime - displayedTime) > 0.016) {\r\n        \/* \u0395\u03bd\u03b7\u03bc\u03b5\u03c1\u03ce\u03bd\u03b5\u03b9 \u03c4\u03bf\u03bd \u03c7\u03c1\u03cc\u03bd\u03bf \u03c4\u03bf\u03c5 \u03b2\u03af\u03bd\u03c4\u03b5\u03bf \u03bc\u03cc\u03bd\u03bf \u03cc\u03c4\u03b1\u03bd \u03c5\u03c0\u03ac\u03c1\u03c7\u03b5\u03b9 \u03bf\u03c1\u03b1\u03c4\u03ae \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03ac. *\/\r\n        video.currentTime = displayedTime;\r\n      }\r\n\r\n      if (\r\n        Math.abs(targetTime - displayedTime) > 0.01 ||\r\n        Math.abs(targetServices - displayedServices) > 0.002 ||\r\n        Math.abs(targetContent - displayedContent) > 0.002\r\n      ) {\r\n        \/* \u03a3\u03c5\u03bd\u03b5\u03c7\u03af\u03b6\u03b5\u03b9 \u03c4\u03b1 frames \u03bc\u03ad\u03c7\u03c1\u03b9 \u03cc\u03bb\u03b1 \u03c4\u03b1 \u03c3\u03c4\u03bf\u03b9\u03c7\u03b5\u03af\u03b1 \u03bd\u03b1 \u03c6\u03c4\u03ac\u03c3\u03bf\u03c5\u03bd \u03c3\u03c4\u03bf\u03bd \u03c3\u03c4\u03cc\u03c7\u03bf \u03c4\u03bf\u03c5\u03c2. *\/\r\n        requestAnimationFrame(render);\r\n      } else {\r\n        displayedTime = targetTime;\r\n        displayedServices = targetServices;\r\n        displayedContent = targetContent;\r\n        video.currentTime = targetTime;\r\n        section.style.setProperty('--services-progress', displayedServices.toFixed(4));\r\n        section.style.setProperty('--content-progress', displayedContent.toFixed(4));\r\n        ticking = false;\r\n      }\r\n    };\r\n\r\n    const initialize = () => {\r\n      \/* \u0394\u03b9\u03b1\u03b2\u03ac\u03b6\u03b5\u03b9 \u03c4\u03b7 \u03b4\u03b9\u03ac\u03c1\u03ba\u03b5\u03b9\u03b1 \u03c4\u03bf\u03c5 MP4 \u03cc\u03c4\u03b1\u03bd \u03c6\u03bf\u03c1\u03c4\u03c9\u03b8\u03bf\u03cd\u03bd \u03c4\u03b1 metadata. *\/\r\n      duration = Math.max(0, video.duration - 0.04);\r\n      displayedTime = Math.min(video.currentTime, duration);\r\n      updateTarget();\r\n    };\r\n\r\n    if (video.readyState >= 1) initialize();\r\n    else video.addEventListener('loadedmetadata', initialize, { once: true });\r\n\r\n    \/* passive:true \u03b2\u03bf\u03b7\u03b8\u03ac \u03ce\u03c3\u03c4\u03b5 \u03c4\u03bf \u03ba\u03b1\u03bd\u03bf\u03bd\u03b9\u03ba\u03cc page scroll \u03bd\u03b1 \u03bc\u03b7 \u03bc\u03c0\u03bb\u03bf\u03ba\u03ac\u03c1\u03b5\u03b9. *\/\r\n    window.addEventListener('scroll', updateTarget, { passive: true });\r\n    window.addEventListener('resize', updateTarget, { passive: true });\r\n  });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-efa9bc5 elementor-widget elementor-widget-ucaddon_custom_cursor\" data-id=\"efa9bc5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_custom_cursor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Custom Cursor -->\n\t\t<link id='font-awesome-css' href='https:\/\/rootsinbetween.gr\/wp-content\/plugins\/unlimited-elements-for-elementor-premium\/assets_libraries\/font-awesome6\/fontawesome-all.min.css' type='text\/css' rel='stylesheet' >\n\t\t<link id='font-awesome-4-shim-css' href='https:\/\/rootsinbetween.gr\/wp-content\/plugins\/unlimited-elements-for-elementor-premium\/assets_libraries\/font-awesome6\/fontawesome-v4-shims.min.css' type='text\/css' rel='stylesheet' >\n\t\t<link id='uc_ac_assets_file_ms_cursor_css_1200-css' href='https:\/\/rootsinbetween.gr\/wp-content\/uploads\/ac_assets\/ue-custom-cursor\/ms-cursor.css' type='text\/css' rel='stylesheet' >\n\n<style>\/* widget: Custom Cursor *\/\n\n#uc_custom_cursor_elementor_efa9bc5{\n  min-height: 1px;\n}\n\n#uc_custom_cursor_elementor_efa9bc5 .ue-message{\n  padding: 10px;\n  border: 1px solid grey;\n  background-color: lightgrey;\n  border-radius: 5px;\n  font-size: 12px;\n}\n\n\/* should be written without #uc_custom_cursor_elementor_efa9bc5 *\/\n.uc-mscursor-hidden{\n  display:none !important;\n}\n\n\/* cursor 2: custom cursor *\/\n\n\/* attention grabber  *\/\n\/* end attention grabber *\/\n\/* end cursor 2: custom cursor *\/\n\n<\/style>\n\n<div id=\"uc_custom_cursor_elementor_efa9bc5\" class=\"ue_cursor-wrap\" data-cursor=\"cursor-1\">\n  \n    \n      <div class=\"ue-custom-cursor\"\n        size=\"1\"\n        pause-animation=\"enable\"\n        difference=\"disable\"\n        cursor=\"enable\"\n        color=\"#ffffff\"\n        color-outline=\"#00000000\"\n        aria-hidden=\"true\"\n        gradient=\"#613A43, #284D4C\"    >\n    <\/div>\n  \n  <\/div>\n<!-- end Custom Cursor -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Scroll Down \u25bd What we do Services Our organisation offers high-quality services with a focus on ensuring optimal collaboration between our clients and partners. Our multidisciplinary<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-754","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rootsinbetween.gr\/index.php?rest_route=\/wp\/v2\/pages\/754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rootsinbetween.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rootsinbetween.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rootsinbetween.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rootsinbetween.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=754"}],"version-history":[{"count":53,"href":"https:\/\/rootsinbetween.gr\/index.php?rest_route=\/wp\/v2\/pages\/754\/revisions"}],"predecessor-version":[{"id":927,"href":"https:\/\/rootsinbetween.gr\/index.php?rest_route=\/wp\/v2\/pages\/754\/revisions\/927"}],"wp:attachment":[{"href":"https:\/\/rootsinbetween.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}