{"id":1821,"date":"2025-09-30T21:14:43","date_gmt":"2025-09-30T21:14:43","guid":{"rendered":"https:\/\/bekocapital.com\/?page_id=1821"},"modified":"2025-11-13T03:13:23","modified_gmt":"2025-11-13T03:13:23","slug":"testing-dyn-img","status":"publish","type":"page","link":"https:\/\/bekocapital.com\/fr\/testing-dyn-img\/","title":{"rendered":"testing dyn img"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Beko Capital - Interactive Hexagons<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #ffffff;\n font-family: Arial, sans-serif;\n }\n\n .hexagon-container {\n position: relative;\n width: 800px;\n height: 600px;\n }\n\n \/* Connector lines *\/\n .connector-lines {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n .connector-line {\n position: absolute;\n background-color: #e0e0e0;\n height: 20px;\n transform-origin: left center;\n }\n\n \/* Clockwise arrow animation *\/\n @keyframes moveArrow {\n 0% {\n opacity: 0;\n transform: translateX(0) scale(0.5);\n }\n 50% {\n opacity: 1;\n transform: translateX(10px) scale(1);\n }\n 100% {\n opacity: 0;\n transform: translateX(20px) scale(0.5);\n }\n }\n\n .connector-arrow {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: #1e73be;\n border-radius: 50%;\n animation: moveArrow 2s infinite;\n }\n\n .hexagon {\n position: absolute;\n width: 180px;\n height: 156px;\n background-color: #003087;\n clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n color: white;\n transition: all 0.3s ease;\n cursor: pointer;\n padding: 20px;\n }\n\n \/* Center hexagon - Beko Capital *\/\n .hexagon.center {\n top: 50%;\n left: 50%;\n width: 220px;\n height: 190px;\n background-color: #4169E1;\n font-size: 24px;\n font-weight: bold;\n z-index: 2;\n }\n\n \/* Top hexagons *\/\n .hexagon.experienced-team {\n top: 35%;\n left: 25%;\n background-color: #003087;\n }\n\n .hexagon.authorised-custodian {\n top: 15%;\n left: 50%;\n background-color: #003087;\n }\n\n .hexagon.safety {\n top: 35%;\n left: 75%;\n background-color: #808080;\n }\n\n \/* Bottom hexagons *\/\n .hexagon.flexible-pricing {\n bottom: 35%;\n left: 25%;\n background-color: #808080;\n }\n\n .hexagon.monthly-reporting {\n bottom: 15%;\n left: 50%;\n background-color: #4682B4;\n }\n\n .hexagon.online-access {\n bottom: 35%;\n left: 75%;\n background-color: #FFA500;\n }\n\n .hexagon-text {\n font-size: 18px;\n line-height: 1.2;\n font-weight: 500;\n }\n\n \/* Positioning classes *\/\n .hexagon:not(.center) {\n transform: translate(-50%, -50%);\n }\n\n .hexagon.center {\n transform: translate(-50%, -50%);\n }\n\n \/* Hover effects *\/\n .hexagon:hover {\n z-index: 10;\n filter: brightness(1.2);\n }\n\n .hexagon:not(.center):hover {\n transform: translate(-50%, -50%) scale(1.1);\n }\n\n .hexagon.center:hover {\n transform: translate(-50%, -50%) scale(1.1);\n }\n\n \/* Bottom row positioning override *\/\n .hexagon.flexible-pricing,\n .hexagon.monthly-reporting,\n .hexagon.online-access {\n transform: translate(-50%, 50%);\n }\n\n .hexagon.flexible-pricing:hover,\n .hexagon.monthly-reporting:hover,\n .hexagon.online-access:hover {\n transform: translate(-50%, 50%) scale(1.1);\n }\n\n \/* Responsive design *\/\n @media (max-width: 900px) {\n .hexagon-container {\n width: 100%;\n height: auto;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n padding: 20px;\n }\n\n .hexagon {\n position: relative;\n width: 150px;\n height: 130px;\n margin: 10px auto;\n font-size: 16px;\n transform: none !important;\n left: auto;\n top: auto;\n bottom: auto;\n }\n\n .hexagon.center {\n grid-column: span 2;\n width: 180px;\n height: 156px;\n margin: 20px auto;\n }\n\n .hexagon:hover {\n transform: scale(1.1) !important;\n }\n\n .connector-lines {\n display: none;\n }\n }\n\n @media (max-width: 500px) {\n .hexagon-container {\n grid-template-columns: 1fr;\n }\n\n .hexagon.center {\n grid-column: 1;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"hexagon-container\">\n <!-- Connector lines container -->\n <div class=\"connector-lines\">\n <!-- Lines will be added by JavaScript -->\n <\/div>\n\n <!-- Top row -->\n <div class=\"hexagon experienced-team\">\n <div class=\"hexagon-text\">Experienced team<\/div>\n <\/div>\n <div class=\"hexagon authorised-custodian\">\n <div class=\"hexagon-text\">Authorised custodian<\/div>\n <\/div>\n <div class=\"hexagon safety\">\n <div class=\"hexagon-text\">Safety<\/div>\n <\/div>\n\n <!-- Center -->\n <div class=\"hexagon center\">\n <div class=\"hexagon-text\">Beko<br>Capital<\/div>\n <\/div>\n\n <!-- Bottom row -->\n <div class=\"hexagon flexible-pricing\">\n <div class=\"hexagon-text\">Flexible pricing<\/div>\n <\/div>\n <div class=\"hexagon monthly-reporting\">\n <div class=\"hexagon-text\">Monthly reporting<\/div>\n <\/div>\n <div class=\"hexagon online-access\">\n <div class=\"hexagon-text\">Online access<\/div>\n <\/div>\n <\/div>\n\n <script>\n function createConnectorLines() {\n const container = document.querySelector('.connector-lines');\n const hexagons = document.querySelectorAll('.hexagon:not(.center)');\n const center = document.querySelector('.hexagon.center');\n const centerRect = center.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n \/\/ Create connecting lines in clockwise order\n const hexagonOrder = [\n 'experienced-team',\n 'authorised-custodian',\n 'safety',\n 'online-access',\n 'monthly-reporting',\n 'flexible-pricing'\n ];\n\n for (let i = 0; i < hexagonOrder.length; i++) {\n const currentHexagon = document.querySelector(`.${hexagonOrder[i]}`);\n const nextHexagon = document.querySelector(`.${hexagonOrder[(i + 1) % hexagonOrder.length]}`);\n \n const currentRect = currentHexagon.getBoundingClientRect();\n const nextRect = nextHexagon.getBoundingClientRect();\n \n \/\/ Calculate line position and rotation\n const x1 = currentRect.left + currentRect.width \/ 2 - containerRect.left;\n const y1 = currentRect.top + currentRect.height \/ 2 - containerRect.top;\n const x2 = nextRect.left + nextRect.width \/ 2 - containerRect.left;\n const y2 = nextRect.top + nextRect.height \/ 2 - containerRect.top;\n \n const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));\n const angle = Math.atan2(y2 - y1, x2 - x1) * 180 \/ Math.PI;\n \n \/\/ Create line\n const line = document.createElement('div');\n line.className = 'connector-line';\n line.style.width = `${length}px`;\n line.style.left = `${x1}px`;\n line.style.top = `${y1}px`;\n line.style.transform = `rotate(${angle}deg)`;\n \n \/\/ Create animated arrow\n const arrow = document.createElement('div');\n arrow.className = 'connector-arrow';\n line.appendChild(arrow);\n \n container.appendChild(line);\n }\n }\n\n \/\/ Create connector lines when the page loads\n window.addEventListener('load', createConnectorLines);\n window.addEventListener('resize', () => {\n const container = document.querySelector('.connector-lines');\n container.innerHTML = '';\n createConnectorLines();\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-42e52d0 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"42e52d0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a7166b6 elementor-widget elementor-widget-html\" data-id=\"a7166b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Interactive Country Timeline<\/title>\n <style>\n .timeline-container {\n max-width: 1200px;\n margin: 100px auto;\n padding: 20px;\n font-family: Arial, sans-serif;\n position: relative;\n }\n\n .timeline {\n display: flex;\n justify-content: space-between;\n position: relative;\n margin: 80px 0;\n padding: 0 40px;\n }\n\n .timeline::after {\n content: '';\n position: absolute;\n width: calc(100% - 80px);\n height: 40px;\n background: #c0d4e6;\n top: 50%;\n left: 40px;\n transform: translateY(-50%);\n z-index: 1;\n }\n\n \/* Arrow at the end of timeline *\/\n \n\n .month {\n position: relative;\n cursor: pointer;\n text-align: center;\n z-index: 3;\n min-width: 60px;\n height: 30px; \/* Added fixed height for month container *\/\n }\n\n .month-label {\n background: #1e73be;\n color: white;\n padding: 4px 10px;\n border-radius: 12px;\n font-size: 12px;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 50%;\n margin-top: -10px;\n white-space: nowrap;\n transition: all 0.3s ease;\n z-index: 4;\n }\n\n .images-top, .images-bottom {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n gap: 5px;\n align-items: center;\n transition: all 0.3s ease;\n }\n\n .images-top {\n bottom: calc(100% + 15px);\n margin-bottom: 10px;\n }\n\n .images-bottom {\n top: calc(100% + 15px);\n margin-top: 10px;\n }\n\n .month-image {\n max-width: 500px;\n height: 500PX;\n transition: all 0.3s ease;\n opacity: 0.9;\n }\n\n \/* Hover effects *\/\n .month:hover .month-label {\n background: #135293;\n transform: translateX(-50%) scale(1.1);\n }\n\n .month:hover .images-top,\n .month:hover .images-bottom {\n transform: translateX(-50%) scale(2.4);\n }\n\n .month:hover .month-image {\n opacity: 1;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n }\n\n \/* Responsive design *\/\n @media (max-width: 768px) {\n .timeline {\n flex-direction: column;\n margin: 40px 0;\n padding: 0;\n align-items: flex-start;\n }\n\n .timeline::after {\n width: 4px;\n height: calc(100% - 40px);\n left: 50%;\n top: 20px;\n transform: translateX(-50%);\n }\n\n .timeline::before {\n top: auto;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%) rotate(90deg);\n }\n\n .month {\n width: 100%;\n margin: 30px 0;\n min-height: 160px;\n height: auto;\n }\n\n .month-label {\n position: relative;\n transform: none;\n left: auto;\n display: inline-block;\n margin-top: 0;\n }\n\n .images-top, .images-bottom {\n position: relative;\n transform: none;\n left: auto;\n margin: 10px 0;\n }\n\n .month-image {\n max-width: 60px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"timeline-container\">\n <div class=\"timeline\">\n \n <!-- Months will be dynamically populated by JavaScript -->\n <\/div>\n <\/div>\n\n <script>\n const timelineData = {\n 'Jan': {\n top: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/JANVIER.png'],\n bottom: [],\n hasMarker: true\n },\n 'Feb': {\n top: [],\n bottom: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/FEVRIER.png'],\n hasMarker: true\n },\n 'Mar': {\n top: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/MARS.png'],\n bottom: [],\n hasMarker: true\n },\n 'Apr': {\n top: [],\n bottom: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/AVRIL.png'],\n hasMarker: true\n },\n 'May': {\n top: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/MAI.png'],\n bottom: [],\n hasMarker: true\n },\n 'Jun': {\n top: [],\n bottom: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/JUIN.png'],\n hasMarker: true\n },\n 'Jul': {\n top: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/JUILLET.png'],\n bottom: [],\n hasMarker: true\n },\n 'Aug': {\n top: [],\n bottom: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/AOUT.png'],\n hasMarker: true\n },\n 'Sep': {\n top: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/SEPTEMBRE.png'],\n bottom: [],\n hasMarker: true\n },\n 'Oct': {\n top: [],\n bottom: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/OCTOBER.png'],\n hasMarker: true\n },\n 'Nov': {\n top: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/NOVEMBRE.png'],\n bottom: [],\n hasMarker: true\n },\n 'Dec': {\n top: [],\n bottom: ['https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/DECEMBER.png'],\n hasMarker: true\n }\n };\n\n function createTimeline() {\n const timeline = document.querySelector('.timeline');\n \n Object.entries(timelineData).forEach(([month, data]) => {\n const monthElement = document.createElement('div');\n monthElement.className = 'month';\n\n \/\/ Create top images\n const imagesTop = document.createElement('div');\n imagesTop.className = 'images-top';\n data.top.forEach(imagePath => {\n const img = document.createElement('img');\n img.className = 'month-image';\n img.src = imagePath;\n img.alt = `${month} top image`;\n imagesTop.appendChild(img);\n });\n monthElement.appendChild(imagesTop);\n \n \/\/ Add month label\n const monthLabel = document.createElement('div');\n monthLabel.className = 'month-label';\n monthLabel.textContent = month;\n monthElement.appendChild(monthLabel);\n \n \/\/ Create bottom images\n const imagesBottom = document.createElement('div');\n imagesBottom.className = 'images-bottom';\n data.bottom.forEach(imagePath => {\n const img = document.createElement('img');\n img.className = 'month-image';\n img.src = imagePath;\n img.alt = `${month} bottom image`;\n imagesBottom.appendChild(img);\n });\n monthElement.appendChild(imagesBottom);\n \n timeline.appendChild(monthElement);\n });\n }\n\n \/\/ Initialize the timeline when the document is loaded\n window.addEventListener('load', createTimeline);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-524157a elementor-widget elementor-widget-eael-interactive-circle\" data-id=\"524157a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"eael-interactive-circle.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t <div id=\"eael-interactive-circle-524157a\" class=\"eael-interactive-circle\" data-tabid=\"524157a\">\n\t\t\t <div class=\"eael-circle-wrapper eael-interactive-circle-preset-1 eael-interactive-circle-event-click eael-circle-responsive-view\" data-appearance=\"eael-interactive-circle-animation-0\" data-autoplay=\"0\" data-autoplay-interval=\"2000\">\n <div class=\"eael-circle-info\" data-items=\"6\">\n <div class=\"eael-circle-inner\">\n\t\t\t\t\t\t\t <div class=\"eael-circle-item elementor-repeater-item-e0b45e5\">\n <div aria-controls=\"eael-interactive-1\" tabindex=\"0\" class=\"eael-circle-btn active\" id=\"eael-circle-item-1\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<!-- Start URL support -->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-btn-icon \">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-icon-inner\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fas-leaf\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M546.2 9.7c-5.6-12.5-21.6-13-28.3-1.2C486.9 62.4 431.4 96 368 96h-80C182 96 96 182 96 288c0 7 .8 13.7 1.5 20.5C161.3 262.8 253.4 224 384 224c8.8 0 16 7.2 16 16s-7.2 16-16 16C132.6 256 26 410.1 2.4 468c-6.6 16.3 1.2 34.9 17.5 41.6 16.4 6.8 35-1.1 41.8-17.3 1.5-3.6 20.9-47.9 71.9-90.6 32.4 43.9 94 85.8 174.9 77.2C465.5 467.5 576 326.7 576 154.3c0-50.2-10.8-102.2-29.8-144.6z\"><\/path><\/svg><span class=\"eael-circle-btn-txt\">Item 1<\/span>\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n \t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<!-- End URL support -->\n \n <\/div>\n <div id=\"eael-interactive-1\" aria-labelledby=\"eael-circle-item-1\" class=\"eael-circle-btn-content eael-circle-item-1 active\">\n <div class=\"eael-circle-content\">\n\t\t\t\t\t\t\t\t\t\t\tPresent your content in an attractive Circle layout item 1. You can highlight key information with click or hover effects and style it as per your preference. <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t\t <div class=\"eael-circle-item elementor-repeater-item-97709c4\">\n <div aria-controls=\"eael-interactive-2\" tabindex=\"0\" class=\"eael-circle-btn \" id=\"eael-circle-item-2\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<!-- Start URL support -->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-btn-icon \">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-icon-inner\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fas-comment\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z\"><\/path><\/svg><span class=\"eael-circle-btn-txt\">Item 2<\/span>\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n \t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<!-- End URL support -->\n \n <\/div>\n <div id=\"eael-interactive-2\" aria-labelledby=\"eael-circle-item-2\" class=\"eael-circle-btn-content eael-circle-item-2 \">\n <div class=\"eael-circle-content\">\n\t\t\t\t\t\t\t\t\t\t\tPresent your content in an attractive Circle layout item 2. You can highlight key information with click or hover effects and style it as per your preference. <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t\t <div class=\"eael-circle-item elementor-repeater-item-129e88c\">\n <div aria-controls=\"eael-interactive-3\" tabindex=\"0\" class=\"eael-circle-btn \" id=\"eael-circle-item-3\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<!-- Start URL support -->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-btn-icon \">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-icon-inner\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fas-map-marker-alt\" viewBox=\"0 0 384 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z\"><\/path><\/svg><span class=\"eael-circle-btn-txt\">Item 3<\/span>\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n \t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<!-- End URL support -->\n \n <\/div>\n <div id=\"eael-interactive-3\" aria-labelledby=\"eael-circle-item-3\" class=\"eael-circle-btn-content eael-circle-item-3 \">\n <div class=\"eael-circle-content\">\n\t\t\t\t\t\t\t\t\t\t\tPresent your content in an attractive Circle layout item 3. You can highlight key information with click or hover effects and style it as per your preference. <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t\t <div class=\"eael-circle-item elementor-repeater-item-8477a60\">\n <div aria-controls=\"eael-interactive-4\" tabindex=\"0\" class=\"eael-circle-btn \" id=\"eael-circle-item-4\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<!-- Start URL support -->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-btn-icon \">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-icon-inner\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fas-rocket\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z\"><\/path><\/svg><span class=\"eael-circle-btn-txt\">Item 4<\/span>\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n \t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<!-- End URL support -->\n \n <\/div>\n <div id=\"eael-interactive-4\" aria-labelledby=\"eael-circle-item-4\" class=\"eael-circle-btn-content eael-circle-item-4 \">\n <div class=\"eael-circle-content\">\n\t\t\t\t\t\t\t\t\t\t\tPresent your content in an attractive Circle layout item 4. You can highlight key information with click or hover effects and style it as per your preference. <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t\t <div class=\"eael-circle-item elementor-repeater-item-0da6f73\">\n <div aria-controls=\"eael-interactive-5\" tabindex=\"0\" class=\"eael-circle-btn \" id=\"eael-circle-item-5\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<!-- Start URL support -->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-btn-icon \">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-icon-inner\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fas-hourglass-half\" viewBox=\"0 0 384 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M360 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24 0 90.965 51.016 167.734 120.842 192C75.016 280.266 24 357.035 24 448c-13.255 0-24 10.745-24 24v16c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24v-16c0-13.255-10.745-24-24-24 0-90.965-51.016-167.734-120.842-192C308.984 231.734 360 154.965 360 64c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24zm-75.078 384H99.08c17.059-46.797 52.096-80 92.92-80 40.821 0 75.862 33.196 92.922 80zm.019-256H99.078C91.988 108.548 88 86.748 88 64h208c0 22.805-3.987 44.587-11.059 64z\"><\/path><\/svg><span class=\"eael-circle-btn-txt\">Item 5<\/span>\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n \t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<!-- End URL support -->\n \n <\/div>\n <div id=\"eael-interactive-5\" aria-labelledby=\"eael-circle-item-5\" class=\"eael-circle-btn-content eael-circle-item-5 \">\n <div class=\"eael-circle-content\">\n\t\t\t\t\t\t\t\t\t\t\tPresent your content in an attractive Circle layout item 5. You can highlight key information with click or hover effects and style it as per your preference. <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t\t <div class=\"eael-circle-item elementor-repeater-item-b1b65e7\">\n <div aria-controls=\"eael-interactive-6\" tabindex=\"0\" class=\"eael-circle-btn \" id=\"eael-circle-item-6\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<!-- Start URL support -->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-btn-icon \">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"eael-circle-icon-inner\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fas-tag\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z\"><\/path><\/svg><span class=\"eael-circle-btn-txt\">Item 6<\/span>\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n \t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<!-- End URL support -->\n \n <\/div>\n <div id=\"eael-interactive-6\" aria-labelledby=\"eael-circle-item-6\" class=\"eael-circle-btn-content eael-circle-item-6 \">\n <div class=\"eael-circle-content\">\n\t\t\t\t\t\t\t\t\t\t\tPresent your content in an attractive Circle layout item 6. You can highlight key information with click or hover effects and style it as per your preference. <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t\t\n <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\n <\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e2b0ba elementor-widget elementor-widget-html\" data-id=\"2e2b0ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\n\n<!-- French video -->\n<iframe width=\"560\" height=\"315\"\n src=\"https:\/\/www.youtube.com\/embed\/your-French-video-ID\"\n title=\"Vid\u00e9o Fran\u00e7aise\"\n frameborder=\"0\"\n allowfullscreen><\/iframe>\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-4cdf075 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"4cdf075\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-036d309 elementor-widget-laptop__width-initial elementor-widget elementor-widget-image\" data-id=\"036d309\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1790\" height=\"1007\" src=\"https:\/\/bekocapital.com\/wp-content\/uploads\/2025\/10\/gift-4.gif\" class=\"elementor-animation-hang attachment-full size-full wp-image-2308\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Beko Capital – Interactive Hexagons Experienced team Authorised custodian Safety BekoCapital Flexible pricing Monthly reporting Online access Interactive Country Timeline Item 1 Present your content in an attractive Circle layout item 1. You can highlight key information with click or hover effects and style it as per your preference. Item 2 Present your content in an attractive Circle layout item 2. You can highlight key information with click or hover effects and style it as per your preference. Item 3 Present your content in an attractive Circle layout item 3. You can highlight key information with click or hover effects and style it as per your preference. Item 4 Present your content in an attractive Circle layout item 4. You can highlight key information with click or hover effects and style it as per your preference. Item 5 Present your content in an attractive Circle layout item 5. You can highlight key information with click or hover effects and style it as per your preference. Item 6 Present your content in an attractive Circle layout item 6. You can highlight key information with click or hover effects and style it as per your preference.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-1821","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bekocapital.com\/fr\/wp-json\/wp\/v2\/pages\/1821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bekocapital.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bekocapital.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bekocapital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bekocapital.com\/fr\/wp-json\/wp\/v2\/comments?post=1821"}],"version-history":[{"count":0,"href":"https:\/\/bekocapital.com\/fr\/wp-json\/wp\/v2\/pages\/1821\/revisions"}],"wp:attachment":[{"href":"https:\/\/bekocapital.com\/fr\/wp-json\/wp\/v2\/media?parent=1821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}