:root {
  --first-color: rgb(255, 255, 255);
  --second-color: rgb(43, 42, 42);
  --third-color: rgb(80, 20, 100);

  --first-alpha-color: rgba(0, 0, 0, 0);
  --second-alpha-color: rgba(55, 63, 97, 0.452);
  --third-alpha-color: rgba(0, 113, 219, 0.75);

  --link-color: rgb(80, 158, 227);

  --bg-color: rgb(245, 245, 245);
  --bg-alpha-color: rgba(245, 245, 245, 0.75);
}

body {
  font-family: "Raleway", sans-serif;
}

a {
  color: var(--link-color);
  transition: all 0.3s ease-out;
}

a:hover {
  color: var(--first-color);
}

.bg-dark {
  background-color: var(--second-color) !important;
}

.bg-alpha-dark {
  background-color: var(--second-alpha-color) !important;
}

/*  el espacio en blanco es el selector descendiente aplica la regla al segundo selector que se encuentra dentro del primero, sin importar su anidación*/
.navbar-brand img {
  width: auto;
  height: 48px;
}

.nav-item:hover {
  background-color: var(--first-alpha-color);
  transition: all 0.3s ease-out;
}

.nav-item:hover .nav-link.dropdown-toggle {
  color: var(--white) !important;
}

.nav-link {
  margin-left: 0.5rem;
  color: var(--first-color) !important;
  font-weight: bold;
}

.nav-link:hover {
  color: var(--white) !important;
}

.dropdown-item {
  color: var(--first-alpha-color);
  font-weight: bold;
}

.dropdown-item:hover {
  color: var(--third-alpha-color);
}

.font-120 {
  font-size: 120%;
}

.font-150 {
  font-size: 150%;
}

.gradient-blue-green {
  background-color: rgba(32, 25, 26, 0);
  /*background-image: linear-gradient(
    135deg,
    rgba(47, 145, 224, 0.91),
    rgba(7, 31, 51, 0.97) 79%
  );*/
  background-image: linear-gradient(
    131deg,
    rgba(32, 25, 26, 0),
    rgb(255, 255, 255)
  );
}

.services img {
  background-color: var(--third-color);
}

.card-img-overlay {
  background-color: var(--second-alpha-color);
}

.card-img-overlay:hover {
  background-color: var(--first-alpha-color);
  transition: all 0.3s ease-out;
}

.bg-alpha-color {
  background-color: var(--bg-alpha-color);
}

.single-page {
  background-image: url("../img/site-singlepage.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.multi-page {
  background-image: url("../img/site-multipage.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* // 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) {
  .nav-item:hover {
    background-color: transparent;
  }

  .nav-link {
    margin-left: 0;
  }
}

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