/* ****************  Custom Propertys **************** */
:root {
  --first-color: rgb(174, 228, 255);
  --first-alpha-color: rgba(174, 228, 255, 0.75);
  --second-color: rgb(253, 11, 55);
  --second-alpha-color: rgba(253, 11, 55, 0.75);
  --third-color: rgb(174, 7, 7);
  --third-color: rgba(174, 7, 7, 0.75);

  --link-color: rgb(108, 145, 231);
  --link-alpha-color: rgba(108, 145, 231, 0.65);

  --bg-color: rgb(171, 213, 247);
  --bg-color: rgba(171, 213, 247, 0.75);
}
/* ****************  Reset Styles **************** */
body {
  font-family: "Raleway", sans-serif;
}
/* ****************  Bootstrap Styles **************** */
.bg-light {
  background-color: var(--bg-color) !important;
}
.btn-danger {
  background-color: var(--third-color) !important;
}
.accordion-button:hover {
  background-color: rgb(72, 112, 221) !important;
  transition: all 0.3 ease-out;
}
.accordion-body {
  background-color: var(--first-alpha-color) !important;
}
a {
  color: var(--link-color);
  transition: all 0.3 ease-out;
}
a:hover {
  color: var(--link-color);
}

.content {
    position: relative; /* Asegura que el contenido esté en el flujo de la página */
    z-index: 10; /* Coloca el contenido por encima de la imagen de fondo */
    /* Añade cualquier otro estilo que necesites para el contenido */
}
.navbar-brand img {
  width: auto;
  height: 4.4rem;
}
.navbar-light .navbar-toggler {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28108, 145, 231, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  transition: all 0.3s ease-out;
}
.navbar-light .navbar-toggler:hover {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0 , 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  opacity: 0.75;
}
.nav-item {
  padding-left: 0.5rem;
  transition: all 0.3s ease-out;
}
.nav-item :hover {
  background-color: var(--first-alpha-color);
  border-radius: 0.3rem;
  color: blue !important;
}
.nav-link {
  color: var(--first-color);
  font-size: 1.15rem;
}
/* ****************  My StylesS **************** */
.bg-imported {
  background-image: url(../img/5594016.jpg);
   background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.bg-extralight{
  background-color: var(--first-color);
}
mark {
  background-color: yellow;
}
colored {
  color: rgb(207, 5, 5);
  font-weight: bold;
  letter-spacing: 0.13rem;
}
.triangle {
  position: relative;
  background: #2c3e50;
  height: 5vh;
}

.triangle::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 30px 0 30px;
  border-color: #2c3e50 transparent transparent transparent;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
}
.hero-img {
  top: 50px;
  position: absolute;
  width: 90%;
  height: 100vh;
  background-image: url(../img/LOGO_transparente_4_grande__1_-removebg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.07;
  z-index: 1;
}

/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/*  Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}