@charset "utf-8";
/* CSS Document */

.containerbg{
background-color:#f3f3f3;
padding-bottom:2em;
padding-top:8em;
padding-left:2em;
padding-right:2em;
}

.carousel-container {
      width: 100%; /* 3 images x 340 + 2 gaps x 30 */
      overflow: hidden;
      border-radius: 16px;
      /*box-shadow: 0 0 20px rgba(204,204,204,0.3);*/
    }

    .carousel-track {
      display: flex;
      align-items: center;
      gap: 50px;
      animation: scroll 28s linear infinite;
    }

    /* Pause animation on hover */
    .carousel-container:hover .carousel-track {
      animation-play-state: paused;
    }

    .carousel-slide {
      flex: 0 0 280px;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .carousel-slide img {
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: 14px;
      display: block;
	  margin-left:auto;
	  margin-right:auto;
    }

    .carousel-slide:hover {
      transform: scale(1.08);
      z-index: 1;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    }

    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-2220px); } /* (340 + 30) * 6 = 2220px */
    }
	
	 @media (max-width: 767px) {
	 
	   .carousel-slide {
      flex: 0 0 280px;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .carousel-slide img {
      width: 90%;
      height: auto;
      object-fit: cover;
      border-radius: 14px;
      display: block;
	  margin-left:auto;
	  margin-right:auto;
    }
	 
	 }