/* Container & Header */ .ss-carousel-header-title { font-size: 1.5rem; font-weight: 600; } .ss-custom-carousel-buttons .btn { height: 48px; width: 48px; padding: 0; background: transparent; border: none; color: #fff; } /* Slider */ .ss-custom-carousel { position: relative; overflow: hidden; padding-bottom: 32px; } .swiper-container { width: 100%; padding: 16px 0; border-top: 1px solid #4d4d4d; border-bottom: 1px solid #4d4d4d; } .swiper-slide { width: 450px; /* can be adjusted */ margin-right: 16px; } .ss-carousel-slide { gap: 16px; } /* Image & Title */ .ss-carousel-image-container { width: 72px; flex-shrink: 0; } .ss-carousel-slide img { width: 100%; height: auto; display: block; } /* base */ .ss-carousel-slide-title { margin:0; font-size:1rem; font-weight:500; letter-spacing: 0.5px; } .ss-carousel-slide-title a { color:#f6f6f6; text-decoration:none; } /* link order: LVHFA */ .ss-carousel-slide-title a:link { color:#f6f6f6; } .ss-carousel-slide-title a:visited { color:#f6f6f6; } /* :visited works only on <a>*/ .ss-carousel-slide-title a:hover, .ss-carousel-slide-title a:focus-visible { text-decoration:underline; } .ss-carousel-slide-title a:active { text-decoration:underline; } /* responsive size */ @media (min-width:480px){ .ss-carousel-slide-title { font-size:1.125rem; } } /* Responsive Title width - adjust as needed */ @media screen and (min-width: 480px) { .ss-carousel-slide-title { font-size: 1.125rem; } } /* Pagination (Custom Bullets) */ .ss-carousel-swiper-pagination { display: flex; gap: 12px; bottom: 0 !important; transform: none; pointer-events: none; } .swiper-pagination-bullet { position: relative; margin: 0 !important; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.25); border-radius: 50px; overflow: hidden; opacity: 1; transition: width 0.3s linear; } .swiper-pagination-bullet-active { width: 16px; } .swiper-pagination-bullet .fill { position: absolute; top: 0; left: 0; height: 8px; width: 8px; background: white; opacity: 0; border-radius: 50px; transition: width 0.1s linear; } .swiper-pagination-bullet-active .fill { opacity: 1; } /* =============================== DARK & LIGHT VARIANTS =============================== */ /* Dark variant */ .ss-custom-carousel-dark { background-color: #151515; margin-left: auto; margin-right: auto; padding:45px; } .ss-custom-carousel-dark .ss-carousel-header-title, .ss-custom-carousel-dark .ss-custom-carousel-buttons .btn { color: #fff; } /* Light variant */ .ss-custom-carousel-light { background-color: #fff; color: #000; } .ss-custom-carousel-light .ss-carousel-header-title, .ss-custom-carousel-light .ss-custom-carousel-buttons .btn { color: #000; } .ss-custom-carousel-light .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.25); } .ss-custom-carousel-light .swiper-pagination-bullet .fill { background: black; }