/* CSS Document */

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    .slider {
      width: 100%;
      max-width: 1920px;
      height: 480px;
      margin: 0 auto; /* centers horizontally but stays at top */
      position: relative;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      animation: fadeZoom 20s infinite;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
	
    .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.6); /* dark strip at bottom */
      color: #fff;
      font-size: 1.3rem;
      font-weight: bold;
      text-align: center;
      padding: 12px;
    }
   /* Overlay content */
    .overlay {
      position: absolute;
      top: 91%;
      left: 40%;
      transform: translate(-28%, -30%);
      text-align: center;
      color: #fff;
      z-index: 2;
      padding: 20px;
    }

    .overlay h1 {
      font-size: 2.0rem; color: white;
      margin-bottom: 10px;
      text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); text-transform:uppercase;
    }

    .overlay p {
      font-size: 1.0rem;
      background: #F4F0EE;
      margin-bottom: 20px; padding-left:20px; 
    }

    .overlay a {
      display: inline-block;
      background: #F4F0EE;
      color: #333333;
      padding: 10px 25px;
      font-size: 1.1rem;
      text-decoration: none;
      border-radius: 5px;
      transition: background 0.3s;
    }

    .overlay a:hover {
      background: #fff;
	  color: #520933;
    }	

    /* Stagger animations */
    .slide:nth-child(1) { animation-delay: 0s; }
    .slide:nth-child(2) { animation-delay: 5s; }
    .slide:nth-child(3) { animation-delay: 10s; }
    .slide:nth-child(4) { animation-delay: 15s; }

    /* Fade + Zoom */
    @keyframes fadeZoom {
      0% { opacity: 0; transform: scale(1); }
      5% { opacity: 1; transform: scale(1.05); }
      25% { opacity: 1; transform: scale(1.1); }
      30% { opacity: 0; transform: scale(1.1); }
      100% { opacity: 0; }
    }

    @media (max-width: 600px) {
      .slider {
        height: 250px;
      }
	  .caption {
        font-size: 1rem;
      }
      .overlay h1 {
        font-size: 1.5rem; margin-top:75px;
      }
      .overlay p {
        font-size: 1rem;
      }
      .overlay a {
        font-size: 0.9rem;
        padding: 8px 18px;
      }
	  
    .overlay {
      position: absolute;
      top: 75%;
      left: 34%;
      transform: translate(-28%, -30%);
      text-align: center;
      color: #fff;
      z-index: 2;
      padding: 2px; font-size:.6em;
        }	
    .overlay p {
     opacity: 0.8;
	 margin-bottom: 20px; padding-left:10px; 
    }
	  
	  
    }
  </style>