/* shop-hero.css */

.banner {
  position: relative;
  height: 340px; /* fixed height */
  overflow: hidden;
}

.banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 340px; /* match banner height */
  object-fit: cover;
  z-index: -1; /* Behind content */
  opacity: 0.8; /* Slight transparency */
}

.banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  color: white;
  padding-left: 20px; /* optional spacing from left */
}

.banner-content h1 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
}

.banner-content p a.btn {
  margin-right: 10px;
}

.banner .intro-excerpt {
    position: relative;
    z-index: 4; }
    @media (min-width: 992px) {
.hero .intro-excerpt {
        max-width: 450px; } }
.banner h1 {
    font-weight: 700;
    color: #151515;
    margin-bottom: 30px; }
    @media (min-width: 1400px) {
.banner h1 {
        font-size: 54px; } }
.banner p {
    color: rgba(45, 44, 44, 0.5);
    margin-bottom: 30px; }

.button {
  font-weight: 600;
  padding: 12px 30px;
  width: 200px;
  margin-top: 30px;
  border-radius: 30px;
  color: #ffffff;
  background: #2f2f2f;
  border-color: #2f2f2f; }

  .button:hover {
    color: #ffffff;
    background: #222222;
    border-color: #222222; }

    .button:active, .button:focus {
    outline: none !important;
    -webkit-box-shadow: none;
    box-shadow: none; }

  .button.white-outline {
    background: transparent;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.3); }
    .button.white-outline:hover {
      border-color: white;
      color: #ffffff; }