/* BPL Starter Kit – small styling glue so Elementor widgets match the BPL theme */

/* Elementor Button widgets: put these classes on the *widget* (Advanced -> CSS Classes). */
.btn-primary .elementor-button,
.btn-secondary .elementor-button {
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary .elementor-button {
  background: linear-gradient(135deg, rgba(76, 146, 255, 0.95), rgba(120, 76, 255, 0.85));
  border: 1px solid rgba(120, 160, 255, 0.35);
  color: #061022;
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
}

.btn-secondary .elementor-button {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(233, 240, 255, 0.92);
}

.btn-primary .elementor-button:hover,
.btn-secondary .elementor-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Make images round-cornered when placed inside a container/column with class bpl-media */
.bpl-media img {
  border-radius: 18px;
}

/* Safer default widths for hero splits (avoids the "thin tube" look if a section inherits odd widths) */
.elementor-section.bpl-hero .elementor-container,
.elementor-section.bpl-section .elementor-container {
  width: 100%;
}

/* Give hero columns room on small screens */
@media (max-width: 1024px) {
  .elementor-section.bpl-hero .elementor-column {
    width: 100% !important;
  }
}