:root{
  --brand:#6d4cff;      /* violeta */
  --brand-dark:#5636ff;
  --hdr-bg:#111;
}

/* Quitar acentos/lineas rojas y cambiarlos a violeta */
.border-danger,.topbar,.red-line{border:none!important}
a, .link, .text-brand{color:var(--brand)!important}
.btn-brand{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.btn-brand:hover{background:var(--brand-dark)!important;border-color:var(--brand-dark)!important}

/* Header / Sub-header */
header,.menubar{background:var(--hdr-bg)!important}
.sub-header{background:#0f0f10!important;color:#bbb}
.sub-header a{color:#bbb!important}
.sub-header a:hover{color:#fff!important}

/* Hero: estilo ancho (sin reescribir tu HTML) */
.hero, .home-hero, .banner, .top-hero, .banner-area{
  min-height:520px;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.hero .container, .home-hero .container, .banner .container, .top-hero .container, .banner-area .container{
  padding-top:5rem; padding-bottom:4rem;
}

/* Ocultar buscador duplicado que aparece DENTRO del hero (dejamos el del header) */
.hero .search, .hero-search, .search-hero, .banner-search, .home-hero-form { display:none!important; }

/* Tarjetas existentes (no tocamos su HTML) */
.course-box, .course-card, .course-item{
  border-radius:16px; overflow:hidden;
  border:1px solid #26262b; background:#151517;
  transition:transform .15s ease, border-color .15s ease;
}
.course-box:hover, .course-card:hover, .course-item:hover{
  transform:translateY(-3px); border-color:var(--brand);
}
.course-box .title, .course-card .title, .course-item .title{color:#fff}
.price, .course-price{color:#c5c8ce}