@import "https://fonts.cdnfonts.com/css/ica-rubrik-black";@import "https://fonts.cdnfonts.com/css/poppins";.banner-3d .banner{text-align:center;background-image:linear-gradient(135deg,#111 0%,#1a1a2e 50%,#0d0d0d 100%);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;width:100%;height:100vh;position:relative;overflow:hidden}.banner-3d .slider{width:400px;height:500px;transform-style:preserve-3d;z-index:2;transition:transform 1s ease-out;animation:40s linear infinite autoRun;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)perspective(1200px)}.banner-3d .item{transform:rotateY(calc((var(--position) - 1) * 360deg / var(--quantity))) translateZ(700px);position:absolute;inset:0}.banner-3d .item img{object-fit:contain;width:100%;height:100%;box-shadow:none;filter:drop-shadow(0 8px 24px #0000008c);background:0 0;border-radius:0;transition:transform .5s}.banner-3d .item:hover img{filter:drop-shadow(0 12px 32px #000000b3);transform:scale(1.06)}.banner-3d .info-popup{color:#fff;z-index:3;opacity:0;visibility:hidden;max-width:400px;font-family:var(--font-body,"Poppins", sans-serif);background-color:#000c;border-radius:12px;padding:25px;transition:opacity .5s,transform .5s;position:absolute;top:10%;left:50%;transform:translate(-50%);box-shadow:0 6px 15px #000000b3}.banner-3d .info-popup.active{opacity:1;visibility:visible;transform:translate(-50%)scale(1.05)}.banner-3d .info-content h3{font-size:1.8em;font-family:var(--font-accent,"ICA Rubrik Black", sans-serif);margin-bottom:12px}.banner-3d .info-content p{color:#ccc;font-size:1.2em}@keyframes autoRun{0%{transform:translate(-50%,-50%)perspective(1200px)rotateY(0)}to{transform:translate(-50%,-50%)perspective(1200px)rotateY(360deg)}}@media screen and (width<=1023px){.banner-3d .slider{width:280px;height:350px}.banner-3d .item{transform:rotateY(calc((var(--position) - 1) * 360deg / var(--quantity))) translateZ(450px)}}@media screen and (width<=767px){.banner-3d .banner{background-position:50%;background-size:cover;background-attachment:scroll;height:75vh}.banner-3d .slider{width:160px;height:200px;top:55%}.banner-3d .item{transform:rotateY(calc((var(--position) - 1) * 360deg / var(--quantity))) translateZ(210px)}}@media screen and (width<=480px){.banner-3d .banner{background-position:50%;background-size:cover;height:70vh}.banner-3d .slider{width:120px;height:155px;top:55%}.banner-3d .item{transform:rotateY(calc((var(--position) - 1) * 360deg / var(--quantity))) translateZ(160px)}}
