@charset "utf-8";
/* CSS Document */
.carousel-container {width: 100%;max-width: 100%;padding: 0 40px;text-align: center;box-sizing: border-box;overflow: hidden;}
.carousel {width: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;position: relative;}
.carousel-track-container {width: 100%;overflow: hidden;position: relative;text-align: center;}
ul.carousel-track {width: 100%;display: flex;margin: 0;padding: 0;transition: transform 0.5s ease-in-out;}
ul.carousel-track li {display: flex;padding: 0 20px;flex: 0 0 100%;justify-content: center;align-items: center;position: relative;box-sizing: border-box;opacity: 0.4;transform: scale(0.9);transition: transform 0.4s, opacity 0.4s;}
ul.carousel-track li img {max-width:100%;max-height:100%;width: auto;height: auto;object-fit: contain;border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.carousel-track li.is-active {opacity: 1;transform: scale(1);z-index: 2;}
ul.carousel-track .caption {padding: 5px 12px;background: rgba(0,0,0,0.6);color: #fff;border-radius: 5px;font-size: 14px;position: absolute;bottom: 20%;}
.carousel-btn {width: 40px;height: 40px;background: rgba(0,0,0,0.5);border: none;color: #fff;font-size: 24px;cursor: pointer;z-index: 2;border-radius: 50%;position: absolute;top: 50%;transform: translateY(-50%);}
.carousel-btn.prev {left: 10px;}
.carousel-btn.next {right: 10px;}
.carousel-btn:hover {background: rgba(0,0,0,0.8);}
@media (min-width: 600px) {
  ul.carousel-track li {flex: 0 0 50%;}}
@media (min-width: 960px) {
  ul.carousel-track li {flex: 0 0 33.3333%;}}