.container-width{height:100%;position:relative;z-index:1;margin:0 50px}
@media(max-width:768px){.container-width{margin:0}
}
.desktop-feature-section{display:flex;margin-top:20px;background:#f4f4f4;height:70vh}
@media(max-width:1600px) and (min-width:1400px){.desktop-feature-section{height:90vh}
}
@media(max-width:768px){.desktop-feature-section{display:none}
}
.desktop-left-panel{width:30%;padding:60px 70px 110px;display:flex;flex-direction:column;gap:30px;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;scroll-padding-bottom:110px;scrollbar-width:none}
.desktop-left-panel::-webkit-scrollbar{display:none}
.desktop-feature-item{position:relative;opacity:.25;transition:all .4s ease;padding:12px;margin:19px 0}
.desktop-feature-item.active{opacity:1}
.desktop-feature-item:not(.active) h3,.desktop-feature-item:not(.active) p{color:#b5b5b5}
.desktop-feature-item.active h3,.desktop-feature-item.active p,.desktop-feature-item.active div{color:#000}
.desktop-feature-item h3{font-weight:700;margin:0 0 12px 0;line-height:1.3}
.desktop-feature-item div,.desktop-feature-item p{line-height:1.6;margin:0}
.desktop-line{position:absolute;left:0;top:0;width:3px;height:100%;background:#e5e5e5;border-radius:3px}
.desktop-line-fill{position:absolute;left:0;top:0;width:100%;height:0;background:#000;border-radius:3px}
.desktop-right-panel{width:70%;margin:1rem;position:relative;overflow:hidden;border-radius:12px}
.desktop-feature-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;transition:opacity .6s ease-out,transform .6s ease-out}
.desktop-feature-video.active{opacity:1;visibility:visible}
.desktop-timeline-nav{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:20px;z-index:100;background:#ddd;padding:5px;border-radius:30px}
.desktop-arrow{width:41px;height:41px;border:0;border-radius:50%;background:#000;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;padding:0;outline:0}
.desktop-arrow:hover{background:#333;transform:scale(1.05)}
.desktop-arrow:active{transform:scale(0.95)}
.desktop-dots-container{display:flex;flex-direction:column;gap:12px}
.desktop-dot{width:10px;height:10px;border-radius:50%;background:#959494;position:relative;overflow:hidden;cursor:pointer;transition:all .3s ease;border:0;padding:0}
.desktop-dot:hover{background:#999}
.desktop-dot-progress{position:absolute;left:0;top:0;width:100%;height:0;background:#000;border-radius:50%}
.desktop-dot.active{transform:scale(1.2);background:#000}
.mobile-feature-section{display:none;background:#f5f5f5;padding:20px 16px;position:relative}
@media(max-width:768px){.mobile-feature-section{display:block}
}
.mobile-content-wrapper{width:100%;height:100%;display:flex;flex-direction:column;gap:20px}
.mobile-text-card{width:100%;background:#fff;border-radius:16px;padding:24px 20px;box-shadow:0 2px 8px rgba(0,0,0,0.1);min-height:80px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mobile-text-content{display:none;text-align:center;width:100%;animation:fadeIn .4s ease}
.mobile-text-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}
to{opacity:1;transform:translateY(0)}
}
.mobile-text-content h3{font-weight:700;color:#000;margin:0 0 8px 0;line-height:1.3}
.mobile-text-content p{color:#666;margin:0;line-height:1.5}
.mobile-video-wrapper{position:relative;width:100%;flex:1;display:flex;align-items:center;justify-content:center;gap:12px}
.mobile-videos-container{position:relative;width:100%;max-width:400px;aspect-ratio:9 / 11;background:#000;border-radius:16px;overflow:hidden;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.mobile-feature-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;transition:opacity .4s ease;display:block}
.mobile-feature-video.active{opacity:1;visibility:visible}
.mobile-nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;min-width:48px;min-height:48px;border:0;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .3s ease;padding:0;outline:0;flex-shrink:0}
.mobile-nav-arrow:hover{background:rgba(0,0,0,0.8)}
.mobile-nav-arrow:active{transform:translateY(-50%) scale(0.9);background:rgba(0,0,0,0.9)}
.mobile-nav-arrow svg{width:24px;height:24px;fill:#fff;pointer-events:none}
.mobile-arrow-left{left:8px}
.mobile-arrow-right{right:8px}
@media(min-width:769px){.mobile-arrow-left{left:-60px}
.mobile-arrow-right{right:-60px}
}
.mobile-dots-nav{display:flex;justify-content:center;align-items:center;gap:10px;padding:20px 0;flex-wrap:wrap}
.mobile-dot-nav{width:10px;height:10px;border-radius:50%;background:#ccc;cursor:pointer;transition:all .3s ease;display:inline-block;border:0;padding:0;outline:0}
.mobile-dot-nav:hover{background:#999}
.mobile-dot-nav.active{background:#000;width:28px;border-radius:5px}
@media(max-width:480px){.mobile-content-wrapper{gap:16px}
.mobile-text-card{padding:16px 0;min-height:200px}
.mobile-text-content h3{font-size:18px;padding:10px}
.mobile-text-content p{font-size:13px;padding:2px 23px}
.mobile-video-wrapper{min-height:400px;gap:8px}
.mobile-videos-container{max-width:100%}
.mobile-nav-arrow{width:40px;height:40px}
.mobile-nav-arrow svg{width:20px;height:20px}
.mobile-dots-nav{padding:16px 0;gap:8px}
}
.desktop-left-panel::-webkit-scrollbar{width:6px}
.desktop-left-panel::-webkit-scrollbar-track{background:#e5e5e5;border-radius:3px}
.desktop-left-panel::-webkit-scrollbar-thumb{background:#999;border-radius:3px}
.desktop-left-panel::-webkit-scrollbar-thumb:hover{background:#666}
.desktop-video-wrapper,.mobile-video-wrapper-inner{width:100%;height:100%;overflow:hidden}
.desktop-feature-video,.mobile-feature-video{width:100%;height:100%;display:block;object-fit:cover}
.desktop-canvas-stage{position:relative;width:100%;height:100%;background:#000;overflow:hidden}
#desktop-feature-canvas{display:block;width:100%;height:100%;background:#000}
.video-toggle-btn{position:absolute;right:20px;bottom:20px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;transition:background .25s ease,transform .25s ease,opacity .25s ease}
.video-toggle-btn:hover{background:rgba(0,0,0,.8);transform:scale(1.08)}
.video-toggle-btn:active{transform:scale(.95)}
.video-toggle-btn:focus{outline:0}
video::-webkit-media-controls{display:none !important}
video::-webkit-media-controls-enclosure{display:none !important}
@media(max-width:768px){.video-toggle-btn{width:42px;height:42px;right:15px;bottom:15px;font-size:16px}
}
.video-toggle-btn.playing{background:rgba(0,0,0,.55)}
.video-toggle-btn.paused{background:rgba(0,0,0,.55)}
.desktop-video-preloader,.mobile-video-preloader{display:block !important;position:fixed !important;left:-9999px !important;top:0 !important;width:1px !important;height:1px !important;overflow:hidden !important;opacity:0 !important;visibility:visible !important;pointer-events:none !important}
.desktop-hidden-video,.mobile-hidden-video{display:block !important;position:static !important;width:1px !important;height:1px !important;visibility:visible !important}
.desktop-line-fill,.desktop-dot-progress{top:0 !important;bottom:auto !important;height:0}