Bandos Komar Timeline<\/title>\n <style>\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n background-color: #f8f8f8;\n }\n \/* Layout containers *\/\n .timeline-container {\n max-width: 1200px;\n margin: 0 auto;\n border-radius: 10px;\n overflow: hidden;\n }\n .timeline-header {\n text-align: center;\n padding: 40px 20px;\n }\n \/* Header text styles *\/\n .country-title {\n font-size: 1.8rem;\n font-weight: 400;\n color: #ff8c42;\n margin-bottom: 15px;\n letter-spacing: 0.5px;\n }\n .main-title {\n font-size: 3.2rem;\n font-weight: 700;\n color: #2c3e50;\n margin-bottom: 25px;\n letter-spacing: -1px;\n }\n .subtitle {\n font-size: 1rem;\n color: #7f8c8d;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n }\n \/* Timeline wrapper and viewport *\/\n .timeline-wrapper {\n position: relative;\n }\n .timeline-viewport {\n overflow: hidden;\n position: relative;\n height: 500px;\n margin: 0 80px;\n border-radius: 8px;\n }\n .timeline-track {\n position: relative;\n width: 200%;\n height: 100%;\n transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n }\n .timeline-line {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 4px;\n background: repeating-linear-gradient(\n to right,\n #ff8c42 0px,\n #ff8c42 10px,\n transparent 10px,\n transparent 20px\n );\n transform: translateY(-50%);\n z-index: 1;\n }\n \/* Timeline group and event styles *\/\n .timeline-group {\n width: 50%;\n flex-shrink: 0;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 40px;\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n .timeline-group.active {\n opacity: 1;\n }\n .timeline-event {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 22%;\n max-width: 280px;\n cursor: pointer;\n transition: transform 0.2s ease-in-out;\n }\n .timeline-event:hover {\n transform: translateY(-5px);\n }\n .timeline-event.top {\n justify-content: flex-start;\n padding-top: 0;\n }\n .timeline-event.bottom {\n justify-content: flex-end;\n padding-bottom: 0;\n flex-direction: column-reverse;\n }\n .event-image {\n margin-bottom: 15px;\n display: flex;\n justify-content: center;\n margin-top: 70px;\n }\n .timeline-event.bottom .event-image {\n margin-bottom: 0;\n margin-top: 15px;\n }\n .event-image img {\n width: 140px;\n height: 140px;\n border-radius: 50%;\n object-fit: cover;\n border: 3px solid #ff8c42;\n }\n .event-text {\n text-align: left;\n max-width: 250px;\n margin-top: 70px;\n }\n .event-description {\n font-size: 0.95rem;\n color: #555;\n line-height: 1.5;\n margin: 0;\n }\n \/* Highlight colors *\/\n .highlight-blue {\n color: #3498db;\n font-weight: 600;\n }\n .highlight-cyan {\n color: #1abc9c;\n font-weight: 600;\n }\n .highlight-orange {\n color: #ff8c42;\n font-weight: 600;\n }\n .event-year {\n font-size: 3rem;\n font-weight: 800;\n color: #2c3e50;\n margin: 15px 0;\n text-align: center;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n .timeline-dot {\n width: 16px;\n height: 16px;\n background: #ff8c42;\n border-radius: 50%;\n z-index: 2;\n position: relative;\n border: 2px solid white;\n }\n \/* Navigation buttons *\/\n .nav-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: #ff8c42;\n border: none;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.3s ease;\n z-index: 10;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n }\n .nav-btn:hover {\n background: #e07b39;\n transform: translateY(-50%) scale(1.1);\n }\n .nav-btn:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n transform: translateY(-50%);\n }\n .nav-btn:focus {\n outline: 2px solid #3498db;\n outline-offset: 2px;\n }\n .prev-btn {\n left: 20px;\n }\n .next-btn {\n right: 20px;\n }\n \/* Animation for smooth entrance *\/\n .timeline-event {\n opacity: 0;\n transform: translateY(30px);\n animation: fadeInUp 0.8s ease forwards;\n }\n @keyframes fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n .timeline-event:nth-child(1) { animation-delay: 0.2s; }\n .timeline-event:nth-child(2) { animation-delay: 0.4s; }\n .timeline-event:nth-child(3) { animation-delay: 0.6s; }\n .timeline-event:nth-child(4) { animation-delay: 0.8s; }\n \/* Detail Card (Modal) Styles *\/\n .detail-card-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n }\n .detail-card-overlay.open {\n opacity: 1;\n visibility: visible;\n }\n .detail-card-content {\n background: white;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\n max-width: 450px;\n width: 90%;\n text-align: center;\n position: relative;\n transform: translateY(20px);\n opacity: 0;\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n .detail-card-overlay.open .detail-card-content {\n transform: translateY(0);\n opacity: 1;\n }\n .detail-card-close-btn {\n position: absolute;\n top: 15px;\n right: 15px;\n background: none;\n border: none;\n font-size: 1.8rem;\n cursor: pointer;\n color: #7f8c8d;\n transition: color 0.2s ease;\n }\n .detail-card-close-btn:hover {\n color: #333;\n }\n .detail-card-image {\n width: 180px;\n height: 180px;\n border-radius: 50%;\n object-fit: cover;\n border: 4px solid #ff8c42;\n margin: 20px auto 25px;\n display: block;\n }\n .detail-card-title {\n font-size: 2rem;\n font-weight: 700;\n color: #2c3e50;\n margin-bottom: 10px;\n }\n .detail-card-year {\n font-size: 1.1rem;\n color: #7f8c8d;\n margin-bottom: 20px;\n }\n .detail-card-description {\n font-size: 1rem;\n color: #555;\n line-height: 1.6;\n text-align: center;\n }\n \n \/* Mobile Responsive *\/\n @media (max-width: 768px) {\n .timeline-viewport {\n margin: 0 60px;\n height: 550px;\n }\n .timeline-group {\n padding: 0 20px;\n }\n .timeline-event {\n width: 45%;\n max-width: 240px;\n }\n .event-image img {\n width: 120px;\n height: 120px;\n }\n .event-year {\n font-size: 2.5rem;\n }\n .event-description {\n font-size: 0.9rem;\n }\n .main-title {\n font-size: 2.5rem;\n }\n .nav-btn {\n width: 50px;\n height: 50px;\n }\n .legacy-section {\n padding: 30px 10px;\n }\n .legacy-card {\n width: 250px;\n }\n .legacy-title {\n font-size: 2rem;\n color: #242F65;\n }\n }\n @media (max-width: 480px) {\n .timeline-viewport {\n margin: 0 30px;\n height: 300px;\n }\n .timeline-header {\n padding: 20px 10px 30px;\n }\n .main-title {\n font-size: 2rem;\n }\n .country-title {\n font-size: 1.4rem;\n }\n .timeline-group {\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 0;\n gap: 0;\n }\n .timeline-event {\n width: 100%;\n max-width: 300px;\n align-items: center;\n text-align: center;\n display: none;\n }\n .timeline-event.active {\n display: flex;\n }\n .event-image {\n margin-top: 10px;\n margin-bottom: 10px;\n }\n .timeline-event.top .event-image {\n margin-bottom: 5px;\n }\n .timeline-event.bottom .event-image {\n margin-top: 5px;\n margin-bottom: 0;\n }\n .event-text {\n margin-top: 5px;\n text-align: center;\n }\n .event-year {\n font-size: 1.8rem;\n margin: 5px 0;\n }\n .timeline-event.top .timeline-dot {\n margin-top: 5px;\n }\n .timeline-event.bottom .timeline-dot {\n margin-bottom: 5px;\n }\n .nav-btn {\n width: 40px;\n height: 40px;\n }\n .nav-btn svg {\n width: 20px;\n height: 20px;\n }\n .prev-btn {\n left: 10px;\n }\n .next-btn {\n right: 10px;\n }\n .timeline-line {\n top: 50%;\n transform: translateY(-50%);\n height: 2px;\n }\n .detail-card-content {\n padding: 20px;\n max-width: 300px;\n }\n .detail-card-image {\n width: 120px;\n height: 120px;\n }\n .detail-card-title {\n font-size: 1.5rem;\n }\n .detail-card-year {\n font-size: 0.9rem;\n }\n .detail-card-description {\n font-size: 0.85rem;\n line-height: 1.4;\n }\n .detail-card-close-btn {\n font-size: 1.5rem;\n }\n \n }\n <\/style>\n<\/head>\n<body>\n <div class=\"timeline-container\">\n <div class=\"timeline-wrapper\">\n <button class=\"nav-btn prev-btn\" id=\"prevBtn\" aria-label=\"Previous event\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"15,18 9,12 15,6\"><\/polyline>\n <\/svg>\n <\/button>\n <div class=\"timeline-viewport\">\n <div class=\"timeline-track\" id=\"timelineTrack\">\n <div class=\"timeline-line\"><\/div>\n <\/div>\n <\/div>\n <button class=\"nav-btn next-btn\" id=\"nextBtn\" aria-label=\"Next event\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"9,18 15,12 9,6\"><\/polyline>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <div class=\"detail-card-overlay\" id=\"detailCardOverlay\">\n <div class=\"detail-card-content\">\n <button class=\"detail-card-close-btn\" id=\"detailCardCloseBtn\" aria-label=\"Close detail card\">×<\/button>\n <img decoding=\"async\" src=\"https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/komama.jpg\" id=\"detailCardImage\">\n <h3 class=\"detail-card-title\" id=\"detailCardTitle\"><\/h3>\n <p class=\"detail-card-year\" id=\"detailCardYear\"><\/p>\n <p class=\"detail-card-description\" id=\"detailCardDescription\"><\/p>\n <\/div>\n <\/div>\n \n <script>\n const timelineData = [\n {\n group: [\n {\n year: '1989',\n position: 'top',\n image: 'https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/komar.png',\n alt: '1989 Partage Education Programs',\n description: 'Partage began <span class=\"highlight-blue\">education programs<\/span> in Takeo, Kampong Speu, and Kandal provinces.',\n title: \"Partage Education Programs Begin\",\n longDescription: \"In 1989, Partage, a French NGO, initiated education programs in Cambodia, focusing on pre-schools and primary schools in the rural provinces of Takeo, Kampong Speu, and Kandal. This marked the beginning of efforts to improve educational access for Cambodian children.\"\n },\n {\n year: '1999',\n position: 'bottom',\n image: 'https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/komama.jpg',\n alt: '1999 Bandos Komar Launch',\n description: 'Localized as <span class=\"highlight-cyan\">Bandos Komar Association<\/span> and formally launched in August.',\n title: \"Localization and Formal Launch\",\n longDescription: \"In July 1999, Partage\u2019s programs were localized into the Bandos Komar Association, a fully Cambodian NGO. The official launch in August 1999 marked a significant step toward local ownership, continuing the mission to support education and child welfare.\"\n },\n {\n year: '2002',\n position: 'top',\n image: 'https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/Bandos-Komar-org_2-1.jpg',\n alt: '2002 Pursat Expansion',\n description: 'Expanded programs to <span class=\"highlight-orange\">Pursat Province<\/span>, reaching more rural communities.',\n title: \"Expansion to Pursat Province\",\n longDescription: \"In 2002, Bandos Komar extended its educational and community development programs to Pursat Province, broadening its impact to support more children in rural areas with access to quality education and early childhood care.\"\n }\n ]\n },\n {\n group: [\n {\n year: '2008',\n position: 'top',\n image: 'https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/Library.jpg',\n alt: '2008 Siem Reap Expansion',\n description: 'Extended programs to <span class=\"highlight-blue\">Siem Reap Province<\/span>, enhancing educational outreach.',\n title: \"Expansion to Siem Reap Province\",\n longDescription: \"In 2008, Bandos Komar further expanded its reach by launching programs in Siem Reap Province. This expansion strengthened the organization\u2019s commitment to improving access to education and child welfare in rural Cambodian communities.\"\n },\n {\n year: '2017',\n position: 'top',\n image: 'https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/image-7.png',\n alt: '2017 Target expansion strategy',\n description: 'The expansion strategy aims to <span class=\"highlight-cyan\">increase the number of locations<\/span>, to provide support to more children.',\n title: \"Target expansion strategy\",\n longDescription: \"In 2017, Bandos Komar expanded its reach from 5 to 10 provinces, extending support to children in need and those pursuing their education.\"\n },\n {\n year: '2023',\n position: 'top',\n image: 'https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/image-24.png',\n alt: 'Bandos Komar\u2019s Contributions to Education and Health in 2023',\n description: 'In 2023, Bandos Komar <span class=\"highlight-cyan\">supported schools and shared knowledge<\/span>, to improve education and health for children and mothers.',\n title: \"Bandos Komar\u2019s Contributions to Education and Health \",\n longDescription: \"In 2023, the Bandos Komar organization contributed to building educational facilities, such as school fences and classroom floor tiling for children. In addition, they also shared knowledge with teachers and parents about childcare. In the same year, they also took part in sharing knowledge on healthcare and prenatal care.\"\n },\n ]\n },\n \n ];\n\n class TimelineSlideshow {\n constructor() {\n this.currentGroup = 0;\n this.currentEvent = 0;\n this.timelineTrack = document.getElementById(\"timelineTrack\");\n this.prevBtn = document.getElementById(\"prevBtn\");\n this.nextBtn = document.getElementById(\"nextBtn\");\n this.timelineGroups = [];\n this.totalGroups = timelineData.length;\n this.eventsPerGroup = timelineData[0].group.length;\n this.autoPlayInterval = null;\n this.autoPlayDelay = 6000;\n this.isPlaying = true;\n this.isMobile = window.matchMedia(\"(max-width: 480px)\").matches;\n this.detailCardOverlay = document.getElementById(\"detailCardOverlay\");\n this.detailCardCloseBtn = document.getElementById(\"detailCardCloseBtn\");\n this.detailCardImage = document.getElementById(\"detailCardImage\");\n this.detailCardTitle = document.getElementById(\"detailCardTitle\");\n this.detailCardYear = document.getElementById(\"detailCardYear\");\n this.detailCardDescription = document.getElementById(\"detailCardDescription\");\n this.init();\n }\n\n init() {\n this.renderTimeline();\n this.bindEvents();\n this.updateSlideshow();\n this.startAutoPlay();\n window.addEventListener('resize', () => {\n this.isMobile = window.matchMedia(\"(max-width: 480px)\").matches;\n this.updateSlideshow();\n });\n }\n\n renderTimeline() {\n this.timelineTrack.innerHTML = '<div class=\"timeline-line\"><\/div>';\n this.timelineTrack.style.width = `${this.totalGroups * 100}%`;\n timelineData.forEach((groupData, groupIndex) => {\n const groupDiv = document.createElement('div');\n groupDiv.className = `timeline-group`;\n groupDiv.style.width = `${100 \/ this.totalGroups}%`;\n\n groupData.group.forEach((event, eventIndex) => {\n const eventDiv = document.createElement('div');\n eventDiv.className = `timeline-event ${event.position}`;\n eventDiv.setAttribute('role', 'article');\n eventDiv.setAttribute('aria-labelledby', `event-${event.year}-${groupIndex}-${eventIndex}`);\n eventDiv.style.animationDelay = `${eventIndex * 0.2}s`;\n eventDiv.dataset.event = JSON.stringify(event);\n eventDiv.innerHTML = `\n ${event.position === 'bottom' ? '<div class=\"timeline-dot\"><\/div>' : ''}\n ${event.position === 'bottom' ? `<div class=\"event-year\" id=\"event-${event.year}-${groupIndex}-${eventIndex}\">${event.year}<\/div>` : ''}\n <div class=\"event-content\">\n <div class=\"event-image\">\n <img decoding=\"async\" src=\"${event.image}\" alt=\"${event.alt}\" loading=\"lazy\">\n <\/div>\n <div class=\"event-text\">\n <p class=\"event-description\">${event.description}<\/p>\n <\/div>\n <\/div>\n ${event.position === 'top' ? `<div class=\"event-year\" id=\"event-${event.year}-${groupIndex}-${eventIndex}\">${event.year}<\/div>` : ''}\n ${event.position === 'top' ? '<div class=\"timeline-dot\"><\/div>' : ''}\n `;\n groupDiv.appendChild(eventDiv);\n eventDiv.addEventListener('click', () => this.showDetailCard(event));\n });\n this.timelineTrack.appendChild(groupDiv);\n });\n this.timelineGroups = Array.from(this.timelineTrack.querySelectorAll(\".timeline-group\"));\n this.updateEventVisibility();\n }\n\n updateEventVisibility() {\n this.timelineGroups.forEach((group, groupIndex) => {\n const events = group.querySelectorAll('.timeline-event');\n group.classList.toggle('active', groupIndex === this.currentGroup);\n if (this.isMobile) {\n events.forEach((event, eventIndex) => {\n event.classList.toggle('active', groupIndex === this.currentGroup && eventIndex === this.currentEvent);\n });\n } else {\n events.forEach(event => event.classList.remove('active'));\n }\n });\n }\n\n bindEvents() {\n this.prevBtn.addEventListener(\"click\", () => {\n this.goToPrevious();\n this.pauseAutoPlay();\n });\n this.nextBtn.addEventListener(\"click\", () => {\n this.goToNext();\n this.pauseAutoPlay();\n });\n document.addEventListener(\"keydown\", (e) => {\n if (e.key === \"ArrowLeft\") {\n this.goToPrevious();\n this.pauseAutoPlay();\n }\n if (e.key === \"ArrowRight\") {\n this.goToNext();\n this.pauseAutoPlay();\n }\n if (e.key === \" \") {\n e.preventDefault();\n this.toggleAutoPlay();\n }\n });\n const container = document.querySelector(\".timeline-container\");\n container.addEventListener(\"mouseenter\", () => this.pauseAutoPlay());\n container.addEventListener(\"mouseleave\", () => this.resumeAutoPlay());\n this.addTouchSupport();\n this.detailCardCloseBtn.addEventListener('click', () => this.hideDetailCard());\n this.detailCardOverlay.addEventListener('click', (e) => {\n if (e.target === this.detailCardOverlay) {\n this.hideDetailCard();\n }\n });\n }\n\n addTouchSupport() {\n let startX = 0;\n let endX = 0;\n this.timelineTrack.addEventListener(\"touchstart\", (e) => {\n startX = e.touches[0].clientX;\n this.pauseAutoPlay();\n }, { passive: true });\n this.timelineTrack.addEventListener(\"touchend\", (e) => {\n endX = e.changedTouches[0].clientX;\n this.handleSwipe(startX, endX);\n setTimeout(() => this.resumeAutoPlay(), 3000);\n }, { passive: true });\n }\n\n handleSwipe(startX, endX) {\n const threshold = 50;\n const diff = startX - endX;\n if (Math.abs(diff) > threshold) {\n if (diff > 0) {\n this.goToNext();\n } else {\n this.goToPrevious();\n }\n }\n }\n\n goToNext() {\n if (this.isMobile) {\n this.currentEvent++;\n if (this.currentEvent >= this.eventsPerGroup) {\n this.currentEvent = 0;\n this.currentGroup = (this.currentGroup + 1) % this.totalGroups;\n }\n } else {\n this.currentGroup = (this.currentGroup + 1) % this.totalGroups;\n }\n this.updateSlideshow();\n }\n\n goToPrevious() {\n if (this.isMobile) {\n this.currentEvent--;\n if (this.currentEvent < 0) {\n this.currentEvent = this.eventsPerGroup - 1;\n this.currentGroup = (this.currentGroup - 1 + this.totalGroups) % this.totalGroups;\n }\n } else {\n this.currentGroup = (this.currentGroup - 1 + this.totalGroups) % this.totalGroups;\n }\n this.updateSlideshow();\n }\n\n goToGroup(groupIndex) {\n this.currentGroup = groupIndex;\n this.currentEvent = 0;\n this.updateSlideshow();\n }\n\n updateSlideshow() {\n const translateX = -this.currentGroup * (100 \/ this.totalGroups);\n this.timelineTrack.style.transform = `translateX(${translateX}%)`;\n this.updateNavigationButtons();\n this.updateEventVisibility();\n }\n\n updateNavigationButtons() {\n this.prevBtn.disabled = false;\n this.nextBtn.disabled = false;\n }\n\n startAutoPlay() {\n if (this.isPlaying) {\n this.stopAutoPlay();\n this.autoPlayInterval = setInterval(() => {\n this.goToNext();\n }, this.autoPlayDelay);\n }\n }\n\n stopAutoPlay() {\n if (this.autoPlayInterval) {\n clearInterval(this.autoPlayInterval);\n this.autoPlayInterval = null;\n }\n }\n\n pauseAutoPlay() {\n this.isPlaying = false;\n this.stopAutoPlay();\n }\n\n resumeAutoPlay() {\n this.isPlaying = true;\n this.startAutoPlay();\n }\n\n toggleAutoPlay() {\n if (this.isPlaying) {\n this.pauseAutoPlay();\n } else {\n this.resumeAutoPlay();\n }\n }\n\n showDetailCard(eventData) {\n this.detailCardImage.src = eventData.image;\n this.detailCardImage.alt = eventData.alt;\n this.detailCardTitle.innerHTML = eventData.title;\n this.detailCardYear.textContent = `Year: ${eventData.year}`;\n this.detailCardDescription.innerHTML = eventData.longDescription || eventData.description;\n this.detailCardOverlay.classList.add('open');\n this.pauseAutoPlay();\n }\n\n hideDetailCard() {\n this.detailCardOverlay.classList.remove('open');\n this.resumeAutoPlay();\n }\n }\n\n document.addEventListener(\"DOMContentLoaded\", () => {\n window.timeline = new TimelineSlideshow();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!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>Bandos Komar Legacy<\/title>\n <style>\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n background-color: #f8f8f8;\n }\n \/* Legacy Section Styles *\/\n .legacy-section {\n max-width: 1200px;\n margin: 0 auto;\n padding: 10px 5px;\n }\n .legacy-title {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n font-size: 2.5rem;\n font-weight: 700;\n color: #242F65;\n text-align: center;\n margin-bottom: 10px;\n }\n .legacy-subtitle {\n font-size: 1.1rem;\n color: #000000;\n text-align: center;\n max-width: 600px;\n margin: 0 auto 20px;\n }\n .legacy-cards {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 24px;\n }\n .legacy-card {\n background: white;\n border-top: 4px solid;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n padding: 16px;\n width: 280px;\n text-align: center;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n }\n .legacy-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n }\n .legacy-card.blue {\n border-color: #3498db;\n }\n .legacy-card.green {\n border-color: #1abc9c;\n }\n .legacy-card.purple {\n border-color: #9b59b6;\n }\n .legacy-card h3 {\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: 4px;\n }\n .legacy-card.blue h3 {\n color: #3498db;\n }\n .legacy-card.green h3 {\n color: #1abc9c;\n }\n .legacy-card.purple h3 {\n color: #9b59b6;\n }\n .legacy-card strong {\n font-size: 1.1rem;\n color: #2c3e50;\n display: block;\n margin-bottom: 4px;\n }\n .legacy-card p {\n font-size: 0.95rem;\n color: #555;\n }\n \/* Mobile Responsive *\/\n @media (max-width: 768px) {\n .legacy-section {\n padding: 30px 10px;\n }\n .legacy-card {\n width: 250px;\n }\n .legacy-title {\n font-size: 2rem;\n color: #242F65;\n }\n }\n @media (max-width: 480px) {\n .legacy-section {\n padding: 20px 5px;\n }\n .legacy-card {\n width: 100%;\n max-width: 280px;\n }\n .legacy-title {\n font-size: 1.8rem;\n color: #242F65;\n }\n .legacy-subtitle {\n font-size: 0.9rem;\n color: #000000;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"legacy-section\">\n <div class=\"text-center mb-10 px-4\">\n <h2 class=\"legacy-title\">Our Legacy Today<\/h2>\n <p class=\"legacy-subtitle\">Three decades of dedication have built a foundation for lasting change in Cambodia.<\/p>\n <\/div>\n <div class=\"legacy-cards\">\n <div class=\"legacy-card blue\">\n <h3>10<\/h3>\n <strong>Provinces Served<\/strong>\n <p>Ta Keo, Kampong Speu, Kandal, Pursat, Siem Reap, Ratanakiri, Kampong Speu\u200b, Seihaknuk Ville, Kampong Thom, Kampont Chhnang<\/p>\n <\/div>\n \n <div class=\"legacy-card purple\">\n <h3>36<\/h3>\n <strong>Years of Service<\/strong>\n <p>Longstanding commitment to development<\/p>\n <\/div>\n <\/div>\n <\/section>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Bandos Komar History Bandos Komar has been empowering Cambodian children and communities through education and child rights programs since 1989. Bandos Komar Timeline × Bandos Komar Legacy Our Legacy Today Three decades of dedication have built a foundation for lasting change in Cambodia. 10 Provinces Served Ta Keo, Kampong Speu, Kandal, Pursat, Siem Reap, Ratanakiri, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_uag_custom_page_level_css":"","ub_ctt_via":"","footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"featured_image_src":null,"campaignId":"","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"rpg_gallery_admin_thumb":false,"rpg_gallery_thumb":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/www.bandoskomar.org\/en\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Bandos Komar History Bandos Komar has been empowering Cambodian children and communities through education and child rights programs since 1989. Bandos Komar Timeline × Bandos Komar Legacy Our Legacy Today Three decades of dedication have built a foundation for lasting change in Cambodia. 10 Provinces Served Ta Keo, Kampong Speu, Kandal, Pursat, Siem Reap, Ratanakiri,…","_links":{"self":[{"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":69,"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":1477,"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/1477"}],"wp:attachment":[{"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}