/* CSS Document */

       .carousel { 
      position: relative; 
      max-width: 1300px; 
      margin: 20px auto; 
      overflow: hidden; 
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .slides { 
      display: flex; 
      transition: transform 0.4s ease; 
    }
    .slide { 
      min-width: 100%; 
      text-align: center; 
      padding: 0px; 
      background: #f8f9fa;
    }
    .slide a { 
      text-decoration: none; 
      color: #333; 
      display: block; 
    }
    .slide img { 
      width: 100%; 
      max-height: 500px; 
      object-fit: cover; 
      border-radius: 4px;
      display: block;
    }
    .slide h3 { 
      margin-top: 10px; 
      font-size: 14px; 
      font-weight: 600;
		height: 32px;
    }
    .dots { 
      position: absolute; 
      bottom: 18px; 
      left: 90%; 
      transform: translateX(-50%); 
      display: flex; 
      gap: 8px;
    }
    .dot { 
      width: 10px; 
      height: 10px; 
       
      background: rgba(171,37,36,1); 
      cursor: pointer;
    }
    .dot.active { 
      background: rgba(31,71,100,1); 
      transform: scale(1.2);
    }
    @media (max-width: 600px) {
      .slide img { max-height: 250px; }
      .slide h3 { font-size: 16px; }
    }