Timeline<\/title>\r\n <style>\r\n body {\r\n margin: 0;\r\n padding: 40px 20px;\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n min-height: 100vh;\r\n }\r\n\r\n .timeline-wrapper {\r\n position: relative;\r\n padding: 0 60px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .timeline-wrapper::before,\r\n .timeline-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n width: 2px;\r\n background: #2c3e50;\r\n z-index: 1;\r\n }\r\n\r\n .timeline-wrapper::before {\r\n left: 0;\r\n }\r\n\r\n .timeline-wrapper::after {\r\n right: 0;\r\n }\r\n\r\n .timeline-box {\r\n position: relative;\r\n margin-bottom: 80px;\r\n background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);\r\n padding: 40px;\r\n border-radius: 20px;\r\n box-shadow: 0 15px 35px rgba(74, 144, 226, 0.3);\r\n color: white;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 30px;\r\n min-height: 300px;\r\n z-index: 3; \/* Higher z-index than connecting lines *\/\r\n }\r\n\r\n .timeline-box::before,\r\n .timeline-box::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 32px;\r\n height: 32px;\r\n background: #4a90e2;\r\n border: 4px solid white;\r\n border-radius: 50%;\r\n z-index: 4; \/* Higher than the box itself *\/\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .timeline-box::before {\r\n left: -76px;\r\n }\r\n\r\n .timeline-box::after {\r\n right: -76px;\r\n }\r\n\r\n \/* Left connecting line - from left circle to box *\/\r\n .timeline-box::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: -76px;\r\n width: 32px;\r\n height: 32px;\r\n background: #4a90e2;\r\n border: 4px solid white;\r\n border-radius: 50%;\r\n z-index: 4;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n transform: translateY(-50%);\r\n }\r\n\r\n .timeline-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: -76px;\r\n width: 32px;\r\n height: 32px;\r\n background: #4a90e2;\r\n border: 4px solid white;\r\n border-radius: 50%;\r\n z-index: 4;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n transform: translateY(-50%);\r\n }\r\n\r\n \/* Small connecting lines *\/\r\n .timeline-box .connecting-line-left,\r\n .timeline-box .connecting-line-right {\r\n position: absolute;\r\n top: 50%;\r\n height: 0;\r\n border: 2px solid #000000;\r\n opacity: 1;\r\n transform: translateY(-50%);\r\n z-index: 2;\r\n }\r\n\r\n .timeline-box .connecting-line-left {\r\n left: -44px;\r\n width: 24px; \/* From left circle to box edge *\/\r\n }\r\n\r\n .timeline-box .connecting-line-right {\r\n right: -44px;\r\n width: 24px; \/* From box edge to right circle *\/\r\n }\r\n\r\n .logo-circle {\r\n flex-shrink: 0;\r\n width: 180px;\r\n height: 180px;\r\n background: white;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n overflow: hidden;\r\n margin-top: 10px;\r\n }\r\n\r\n .logo-placeholder {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n text-align: center;\r\n line-height: 1.2;\r\n color: white;\r\n }\r\n\r\n .megalopolis {\r\n background: linear-gradient(45deg, #2c3e50, #34495e);\r\n font-size: 12px;\r\n }\r\n\r\n .ime {\r\n background: linear-gradient(45deg, #e74c3c, #c0392b);\r\n font-size: 10px;\r\n }\r\n\r\n .talent {\r\n background: linear-gradient(45deg, #3498db, #2980b9);\r\n font-size: 18px;\r\n }\r\n\r\n .content-text {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n min-height: 250px;\r\n }\r\n\r\n .org-title {\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n line-height: 1.3;\r\n flex-shrink: 0;\r\n }\r\n\r\n .scrollable-content {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding-right: 15px;\r\n margin-bottom: 20px;\r\n max-height: 180px;\r\n }\r\n\r\n .scrollable-content::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n .scrollable-content::-webkit-scrollbar-track {\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 4px;\r\n }\r\n\r\n .scrollable-content::-webkit-scrollbar-thumb {\r\n background: rgba(255, 255, 255, 0.6);\r\n border-radius: 4px;\r\n }\r\n\r\n .scrollable-content::-webkit-scrollbar-thumb:hover {\r\n background: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .org-desc {\r\n font-size: 16px;\r\n line-height: 1.6;\r\n opacity: 0.95;\r\n }\r\n\r\n .visit-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: rgba(255, 255, 255, 0.2);\r\n color: white;\r\n text-decoration: none;\r\n padding: 12px 20px;\r\n border-radius: 25px;\r\n font-weight: 500;\r\n transition: all 0.3s ease;\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n align-self: flex-start;\r\n flex-shrink: 0;\r\n }\r\n\r\n .visit-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .visit-btn::after {\r\n content: '\u2192';\r\n font-size: 18px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .visit-btn:hover::after {\r\n transform: translateX(3px);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .timeline-wrapper {\r\n padding: 0 40px;\r\n }\r\n \r\n .timeline-box {\r\n flex-direction: column;\r\n text-align: center;\r\n padding: 30px 20px;\r\n gap: 20px;\r\n margin-bottom: 60px;\r\n align-items: center;\r\n }\r\n \r\n .timeline-box::before,\r\n .timeline-box::after {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n \r\n .timeline-box::before {\r\n left: -52px;\r\n }\r\n \r\n .timeline-box::after {\r\n right: -52px;\r\n }\r\n \r\n .connecting-line {\r\n left: -28px;\r\n right: -28px;\r\n }\r\n \r\n .logo-circle {\r\n width: 120px;\r\n height: 120px;\r\n margin-top: 0;\r\n }\r\n \r\n .logo-placeholder {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n \r\n .content-text {\r\n min-height: auto;\r\n align-items: center;\r\n }\r\n \r\n .org-title {\r\n font-size: 24px;\r\n }\r\n \r\n .org-desc {\r\n font-size: 14px;\r\n }\r\n \r\n .scrollable-content {\r\n max-height: 150px;\r\n text-align: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"timeline-wrapper\">\r\n <div class=\"timeline-box\">\r\n <div class=\"connecting-line-left\"><\/div>\r\n <div class=\"connecting-line-right\"><\/div>\r\n <div class=\"logo-circle\">\r\n <div class=\"logo-placeholder megalopolis\">\r\n \u0394\u0397\u039c\u039f\u03a3<br>\u039c\u0395\u0393\u0391\u039b\u039f\u03a0\u039f\u039b\u0397\u03a3\r\n <\/div>\r\n <\/div>\r\n <div class=\"content-text\">\r\n <h2 class=\"org-title\">\u0394\u03ae\u03bc\u03bf\u03c2 \u039c\u03b5\u03b3\u03b1\u03bb\u03cc\u03c0\u03bf\u03bb\u03b7\u03c2 :<br>\u0391\u03bd\u03b1\u03b8\u03ad\u03c4\u03bf\u03c5\u03c3\u03b1 \u0391\u03c1\u03c7\u03ae<\/h2>\r\n <div class=\"scrollable-content\">\r\n <p class=\"org-desc\">\r\n Suspendisse imperdiet elit at purus mattis, euismod eleifend mi rutrum. Ut porta vitae ligula fermentum mattis. Aliquam quam sem, porttitor et pharetra a, suscipit sed odio. Etiam imperdiet at diam et faucibus. Cras ermentum sem est, a hendrerit ligula bibendum quis. Aliquam quam sem, porttitor et pharetra a, suscipit sed odio. Etiam imperdiet at diam et faucibus. Cras fermentum lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\r\n <\/p>\r\n <\/div>\r\n <a href=\"#\" class=\"visit-btn\">\u039c\u03b5\u03c4\u03ac\u03b2\u03b1\u03c3\u03b7 \u03c3\u03c4\u03bf\u03bd \u03b9\u03c3\u03c4\u03cc\u03c4\u03bf\u03c0\u03bf<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-box\">\r\n <div class=\"connecting-line-left\"><\/div>\r\n <div class=\"connecting-line-right\"><\/div>\r\n <div class=\"logo-circle\">\r\n <div class=\"logo-placeholder ime\">\r\n \u0399\u0394\u03a1\u03a5\u039c\u0391<br>\u039c\u0395\u0399\u0396\u039f\u039d\u039f\u03a3<br>\u0395\u039b\u039b\u0397\u039d\u0399\u03a3\u039c\u039f\u03a5\r\n <\/div>\r\n <\/div>\r\n <div class=\"content-text\">\r\n <h2 class=\"org-title\">\u038a\u03b4\u03c1\u03c5\u03bc\u03b1 \u039c\u03b5\u03af\u03b6\u03bf\u03bd\u03bf\u03c2 \u0395\u03bb\u03bb\u03b7\u03bd\u03b9\u03c3\u03bc\u03bf\u03cd:<br>\u0391\u03bd\u03ac\u03b4\u03bf\u03c7\u03bf\u03c2 \u0388\u03c1\u03b3\u03bf\u03c5<\/h2>\r\n <div class=\"scrollable-content\">\r\n <p class=\"org-desc\">\r\n Suspendisse imperdiet elit at purus mattis, euismod eleifend mi rutrum. Ut porta vitae ligula fermentum mattis. Aliquam quam sem, porttitor et pharetra a, suscipit sed odio. Etiam imperdiet at diam et faucibus. Cras ermentum sem est, a hendrerit ligula bibendum quis. Aliquam quam sem, porttitor et pharetra a, suscipit sed odio. Etiam imperdiet at diam et faucibus. Cras fermentum lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum.\r\n <\/p>\r\n <\/div>\r\n <a href=\"#\" class=\"visit-btn\">\u039c\u03b5\u03c4\u03ac\u03b2\u03b1\u03c3\u03b7 \u03c3\u03c4\u03bf\u03bd \u03b9\u03c3\u03c4\u03cc\u03c4\u03bf\u03c0\u03bf<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-box\">\r\n <div class=\"connecting-line-left\"><\/div>\r\n <div class=\"connecting-line-right\"><\/div>\r\n <div class=\"logo-circle\">\r\n <div class=\"logo-placeholder talent\">\r\n talent\r\n <\/div>\r\n <\/div>\r\n <div class=\"content-text\">\r\n <h2 class=\"org-title\">Talent Group:<br>\u03a4\u03b5\u03c7\u03bd\u03b9\u03ba\u03cc\u03c2 \u03a3\u03cd\u03bc\u03b2\u03bf\u03c5\u03bb\u03bf\u03c2<\/h2>\r\n <div class=\"scrollable-content\">\r\n <p class=\"org-desc\">\r\n Suspendisse imperdiet elit at purus mattis, euismod eleifend mi rutrum. Ut porta vitae ligula fermentum mattis. Aliquam quam sem, porttitor et pharetra a, suscipit sed odio. Etiam imperdiet at diam et faucibus. Cras ermentum sem est, a hendrerit ligula bibendum quis. Aliquam quam sem, porttitor et pharetra a, suscipit sed odio. Etiam imperdiet at diam et faucibus. Cras fermentum lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.\r\n <\/p>\r\n <\/div>\r\n <a href=\"#\" class=\"visit-btn\">\u039c\u03b5\u03c4\u03ac\u03b2\u03b1\u03c3\u03b7 \u03c3\u03c4\u03bf\u03bd \u03b9\u03c3\u03c4\u03cc\u03c4\u03bf\u03c0\u03bf<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-35d71d3 e-flex e-con-boxed e-con e-parent\" data-id=\"35d71d3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u039f\u03b9 \u03a6\u03bf\u03c1\u03b5\u03af\u03c2 \u03c0\u03bf\u03c5 \u03c3\u03c5\u03bd\u03ad\u03b2\u03b1\u03bb\u03b1\u03bd \u03c3\u03c4\u03bf \u03ad\u03c1\u03b3\u03bf Timeline \u0394\u0397\u039c\u039f\u03a3\u039c\u0395\u0393\u0391\u039b\u039f\u03a0\u039f\u039b\u0397\u03a3 \u0394\u03ae\u03bc\u03bf\u03c2 \u039c\u03b5\u03b3\u03b1\u03bb\u03cc\u03c0\u03bf\u03bb\u03b7\u03c2 :\u0391\u03bd\u03b1\u03b8\u03ad\u03c4\u03bf\u03c5\u03c3\u03b1 \u0391\u03c1\u03c7\u03ae Suspendisse imperdiet elit at purus mattis, euismod eleifend mi rutrum. Ut porta vitae ligula fermentum mattis. Aliquam quam sem, porttitor et pharetra a, suscipit sed odio. Etiam imperdiet at diam et faucibus. Cras ermentum sem est, a hendrerit ligula bibendum quis. Aliquam quam […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-982","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/megalopoli1821.gr\/en\/wp-json\/wp\/v2\/pages\/982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megalopoli1821.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/megalopoli1821.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/megalopoli1821.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/megalopoli1821.gr\/en\/wp-json\/wp\/v2\/comments?post=982"}],"version-history":[{"count":0,"href":"https:\/\/megalopoli1821.gr\/en\/wp-json\/wp\/v2\/pages\/982\/revisions"}],"wp:attachment":[{"href":"https:\/\/megalopoli1821.gr\/en\/wp-json\/wp\/v2\/media?parent=982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}