.timeline-row{display:flex;justify-content:center;align-items:center;gap:50px;lex-wrap:wrap}.circle-column{position:relative;width:400px;height:400px}.circle-container{position:relative;width:400px;height:400px;border:2px dashed #ccc;border-radius:50%;display:flex;justify-content:center;align-items:center}.circle-image img{width:200px;height:120px;object-fit:cover}.timeline-dots{position:absolute;width:100%;height:100%}.dot{position:absolute;width:5px;height:30px;background:red;top:50%;left:50%;transform-origin:0 0;transform:rotate(var(--angle)) translate(0,-215px);cursor:pointer}.dot.active .dot-title{visibility:visible;width:max-content;position:absolute;top:-30px;left:50%;transform:translateX(-50%) rotate(calc(var(--angle) * -1));font-size:12px;font-weight:700;text-align:center;color:#333}.dot .dot-title{visibility:hidden}.content-column{width:400px;max-width:400px}.timeline-content{display:none}.timeline-content.active{display:block}.timeline-content h3{font-size:24px;margin-bottom:10px;color:#333}.timeline-content p{font-size:16px;color:#666}script.js document.addEventListener("DOMContentLoaded",function (){const dots=document.querySelectorAll(".dot");const contentItems=document.querySelectorAll(".timeline-content");const circleImage=document.querySelector(".circle-image img");dots.forEach((dot,index)=>{dot.addEventListener("click",()=>{//Remove active class from all dots and content dots.forEach((d)=>d.classList.remove("active"));contentItems.forEach((content)=>content.classList.remove("active"));//Add active class to clicked dot and corresponding content dot.classList.add("active");document.querySelector(.timeline-content[data-index="${index}"]).classList.add("active");//Update center image based on clicked dot const thumbnail=dot.getAttribute("data-thumbnail");if (thumbnail){circleImage.src=thumbnail}});});});.timeline-row{display:flex;justify-content:center;align-items:center;gap:50px;flex-wrap:wrap;margin:20px}.circle-column{position:relative;width:400px;height:400px}.circle-container{position:relative;width:100%;height:100%;border:2px dashed #ccc;border-radius:50%;display:flex;justify-content:center;align-items:center}.circle-image img{width:150px;height:150px;object-fit:cover;border-radius:50%;box-shadow:0px 4px 8px rgba(0,0,0,.2)}.timeline-dots{position:absolute;width:100%;height:100%}.dot{position:absolute;width:10px;height:10px;background:red;border-radius:50%;top:50%;left:50%;transform-origin:0 0;transform:rotate(var(--angle)) translate(0,-215px);cursor:pointer}.dot.active .dot-title{visibility:visible;width:max-content;position:absolute;top:-30px;left:50%;transform:translateX(-50%) rotate(calc(var(--angle) * -1));font-size:12px;font-weight:700;text-align:center;color:#333}.dot .dot-title{visibility:hidden}.content-column{width:400px;max-width:100%;padding:10px}.timeline-content{display:none;text-align:left}.timeline-content.active{display:block}.timeline-content h3{font-size:24px;margin-bottom:10px;color:#333}.timeline-content p{font-size:16px;color:#666}@media screen and (max-width:768px){.timeline-row{flex-direction:column;align-items:center;gap:30px}.circle-column{width:300px;height:300px}.circle-container{width:300px;height:300px}.circle-image img{width:100px;height:100px}.dot{transform:rotate(var(--angle)) translate(0,-165px)}.dot.active .dot-title{font-size:10px}.content-column{width:100%;padding:10px}.timeline-content h3{font-size:20px}.timeline-content p{font-size:14px}}@media screen and (max-width:480px){.circle-column{width:250px;height:250px}.circle-container{width:250px;height:250px}.circle-image img{width:80px;height:80px}.dot{transform:rotate(var(--angle)) translate(0,-135px)}.dot.active .dot-title{font-size:9px}.timeline-content h3{font-size:18px}.timeline-content p{font-size:12px}}