style.scss

// Sobrescribe las variables de color
$primary: #5265E1;
$secondary: #FA5959;

// Actualiza los colores temáticos de Bootstrap con tus propios valores
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary
);

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

#hoverA:hover{
  color: #FA5959;
}

#hover-bp:hover{
  background-color: white;
  border-color: #5265E1;
  color: #5265E1;
}



.deco{
  position: relative;
}
.deco::after {
  content: "";
  top: 0;
  left: 10rem;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #5265E1;
  border-radius: 10rem 0px 0px 10rem;
  margin-top: 300rem;

}

.margenTop {
margin-top: 5rem;
}

#home-tab {
  border: none;
  color: rgb(23, 32, 42);
}

#home-tab:active, #home-tab:focus{
  border-bottom: 0.3rem solid #FA5959;
  font-weight: bold;
}

#profile-tab{
  border: none;
  color: rgb(23, 32, 42);
}

#profile-tab:active, #profile-tab:focus{
  border-bottom: 0.3rem solid #FA5959;
  font-weight: bold;
}
#contact-tab{
  border: none;
  color: rgb(23, 32, 42);
}

#contact-tab:active, #contact-tab:focus{
  border-bottom: 0.3rem solid #FA5959;
  font-weight: bold;
}

// Importa el archivo principal de Bootstrap después de tus modificaciones
@import "./node_modules/bootstrap/scss/bootstrap";