.animated-diagram{padding:50px 20px;background-color:transparent;width:100%;overflow:hidden}.animated-diagram__container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.animated-diagram__heading{font-family:var(--heading-font-family, "Poppins"),sans-serif;font-size:36px;font-weight:600;line-height:1.2;margin:0 0 15px;color:rgba(var(--color-heading))}.animated-diagram__subheading{font-family:var(--body-font-family, "Poppins"),sans-serif;font-size:14px;font-weight:300;line-height:1.6;margin:0 0 30px;color:rgba(var(--color-text));opacity:.8}.diagram-wrapper.style-2{width:100%}.skill-element{margin-bottom:25px;width:100%}.skill-title{margin-bottom:8px;font-family:var(--body-font-family, "Poppins"),sans-serif;font-size:16px;font-weight:500;color:rgba(var(--color-heading));line-height:1.4}.skill-progress{display:flex;align-items:center;gap:15px;width:100%}.skill-amount{min-width:50px;font-family:var(--heading-font-family, "Poppins"),sans-serif;font-size:18px;font-weight:600;color:rgba(var(--color-heading));text-align:right}.skill-line{flex:1;height:10px;background-color:var(--diagram-bar-bg, rgba(var(--color-text-no-alpha) / .1));border-radius:5px;overflow:hidden;position:relative}.dark .skill-line{background-color:var(--diagram-bar-bg, rgba(255, 255, 255, .1))}.skill-line-fill{height:100%;background-color:var(--diagram-bar-color, #48194D);border-radius:5px;width:0;transition:width 1.5s cubic-bezier(.2,.9,.3,1);position:relative;z-index:1}.animated-diagram.visible .skill-line-fill{width:var(--target-width)!important}.animated-diagram__image-wrapper{width:100%;height:auto;border-radius:10px;overflow:hidden}.animated-diagram__image{width:100%;height:auto;display:block;object-fit:cover;transition:transform .3s ease}.animated-diagram__image:hover{transform:scale(1.02)}.animated-diagram__image-placeholder{background:rgba(var(--color-text-no-alpha) / .05);min-height:300px;display:flex;align-items:center;justify-content:center;border-radius:10px}.animated-diagram__image-placeholder .placeholder-svg{width:100%;height:100%;max-height:300px;fill:rgba(var(--color-text-no-alpha) / .2)}.dark .animated-diagram__image-placeholder{background:#ffffff0d}.dark .animated-diagram__image-placeholder .placeholder-svg{fill:#fff3}@media screen and (max-width:768px){.animated-diagram{padding:40px 15px}.animated-diagram__container{grid-template-columns:1fr;gap:30px}.animated-diagram__heading{font-size:28px;text-align:center}.animated-diagram__subheading{font-size:14px;text-align:center}.skill-progress{gap:10px}.animated-diagram__image-wrapper{order:-1;max-width:100%}}@media screen and (max-width:480px){.animated-diagram__heading{font-size:24px}.skill-title{font-size:15px}.skill-amount{font-size:16px;min-width:45px}.skill-progress{flex-direction:column;align-items:flex-start;gap:5px}.skill-amount{text-align:left;margin-bottom:5px}.skill-line{width:100%}}.animated-diagram__container.image-left{direction:ltr}.animated-diagram__container.image-left .animated-diagram__image-wrapper{order:0}.animated-diagram__container.image-left .animated-diagram__content{order:1}
/*# sourceMappingURL=/cdn/shop/t/10/assets/section-animated-diagram.css.map */