/*  */

 :root {
     --gap: 5px;
     /* gap between items */
     --speed: 60;
     /* px per second (adjust to change speed) */
     --duration: 20s;
     /* will be overridden by JS */
     --item-bg: linear-gradient(135deg, #6ee7b7, #3b82f6);
 }

 * {
     box-sizing: border-box;
 }


 .c-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     z-index: 1000;
 }

 .c-modal img {
     max-width: 80%;
     max-height: 80%;
     object-fit: contain;
     /* fit inside modal without cropping */
     border-radius: 10px;
     background: #000;
     /* optional background behind letterboxed images */
 }


 .c-modal #c-modal-caption {
     margin-top: 10px;
     color: #fff;
     font-size: 18px;
     text-align: center;
 }

 .c-modal .close {
     position: absolute;
     top: 20px;
     right: 30px;
     font-size: 36px;
     color: #fff;
     cursor: pointer;
 }

 .hidden {
     display: none;
 }

 .viewport {
     width: min(1100px, 95vw);
     border-radius: 12px;
     padding: 14px;
     background: rgba(255, 255, 255, 0.04);
     /* box-shadow: 0 6px 30px rgba(2, 6, 23, 0.6); */
     overflow: hidden;
 }

 /* Track that will be animated. We set it as flex row and duplicate its children in JS */
 .track {
     display: flex;
     gap: var(--gap);
     align-items: stretch;
     /* make it wide enough for transform using width:auto / max-content */
     width: max-content;
     will-change: transform;
     animation: scroll var(--duration) linear infinite;
 }

 /* pause on hover */
 .viewport:hover .track {
     animation-play-state: paused;
 }

 .item {
     min-width: 240px;
     height: 160px;
     border-radius: 10px;
     padding: 14px;
     display: flex;
     position: relative;
     overflow: hidden;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     gap: 8px;
     /* background: var(--item-bg); */
     color: #021025;
     /* box-shadow: 0 6px 18px rgba(2, 6, 23, 0.25),
         inset 0 -6px 12px rgba(255, 255, 255, 0.06); */
     flex-shrink: 0;
     /* important: prevent shrinking so width stays consistent */
 }

 .item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* crop and fill box */
     border-radius: 8px;
     display: block;
 }



 .nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.5);
     border: none;
     color: #fff;
     font-size: 30px;
     padding: 10px 16px;
     cursor: pointer;
     border-radius: 50%;
     transition: background 0.3s;
 }

 .nav-btn:hover {
     background: rgba(0, 0, 0, 0.8);
 }

 #prevBtn {
     left: 20px;
 }

 #nextBtn {
     right: 20px;
 }

 /* Keyframes: move by -50% of the track (because we duplicate content) */
 @keyframes scroll {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 /* small screens: make items narrower */
 @media (max-width: 640px) {
     .item {
         min-width: 180px;
         height: 120px;
     }
 }