/* ===============================
   Sub Banner Component
================================ */

.B_sub_banner {
  --heading-font-weight: 800;
}

/* ---------- Heading ---------- */
.B_sub_banner .heading {
  text-align: center;
  font-weight: var(--heading-font-weight);
  color: var(--title-color);

  /* Responsive font-size */
  font-size: clamp(14px, 4vw, 32px);
  line-height: 1.2;
}

/* ---------- Button ---------- */
.B_sub_banner .btn-shoppping a {
  display: inline-block;
  text-align: center;
  text-decoration: none;

  color: var(--btn-title-color);
  background-color: var(--btn-bg-color);
  box-shadow: 2px 2px var(--btn-border-color);

  /* Responsive spacing */
  padding: clamp(4px, 2vw, 8px) clamp(25px, 6vw, 36px);
  font-size: clamp(10px, 3vw, 18px);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.B_sub_banner .btn-shoppping a:hover {
  transform: translateY(-1px);
  box-shadow: 3px 3px var(--btn-border-color);
}

/* ---------- Image ---------- */
.B_sub_banner .image_bannar {
  width: 100%;
  height: 100%;
  min-height: 166px;
  max-height: 506px;
  object-fit: cover;
}

/* ---------- Content ---------- */
.B_sub_banner .content {
  display: flex;
  flex-direction: column;
  gap: clamp(25px, 5vw, 36px);
}