/* Hero slider styles */
        .hero-slider {
          position: relative;
          height: 360px;
          max-height: 60vh;
          overflow: hidden;
        }
        .hero-slide {
          position: absolute;
          inset: 0;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.6s ease;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .hero-slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .hero-slide.active {
          opacity: 1;
          visibility: visible;
        }

        .hero-overlay {
          position: absolute;
          left: 0;
          bottom: 0;
          padding: 28px 36px;
          color: #fff;
        }
        .hero-caption h2 {
          font-size: 34px;
          margin: 0 0 6px;
          text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
        }
        .hero-caption p {
          margin: 0;
          color: rgba(255, 255, 255, 0.92);
          max-width: 700px;
          text-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
        }

        .hero-prev,
        .hero-next {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(0, 0, 0, 0.36);
          color: #fff;
          border: 0;
          padding: 10px 14px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 22px;
        }
        .hero-prev {
          left: 18px;
        }
        .hero-next {
          right: 18px;
        }

        .hero-dots {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 12px;
          display: flex;
          gap: 8px;
        }
        .hero-dots button {
          width: 10px;
          height: 10px;
          border-radius: 999px;
          border: 0;
          background: rgba(255, 255, 255, 0.45);
          cursor: pointer;
        }
        .hero-dots button.active {
          background: #fff;
        }

        @media (max-width: 767px) {
          .hero-caption h2 {
            font-size: 24px;
          }
          .hero-caption p {
            font-size: 14px;
          }
          .hero-slider {
            height: 260px;
          }
        }