/***** Fuentes custom *****/

.robocop-h1 {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size: 3.5rem;
}

.robocop-p {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 1.2rem;
}

.robocop-a {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 1.2rem;
}

/***** Colores custom *****/

.bg-custom1 {
  background-image: linear-gradient(90deg, rgba(2, 94, 211, 1) 0%, rgb(65, 139, 236) 100%) !important;
}

.bg-custom2 {
  background-color: rgba(2, 94, 211, 1);
}

/***** Navbar *****/

.nav-link {
  color: white !important;
  font-size: larger;
}

.nav-link:hover, .nav-link:focus{
  color: rgb(2, 255, 14) !important;
}

.dropdown-menu {
  display: block;
  opacity: 0;
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  visibility: hidden;
}

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(35px) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.dropdown-item:hover {
  color: rgb(2, 255, 14);
}

.form-select {
  background-color: rgba(255, 255, 255, 0.2)  !important;
  color: white !important;
  border: 0px !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.form-select:hover {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(20, 18, 18) !important;
}
.form-select:focus {
  background-color: rgba(255, 255, 255, 0.4) !important;
  color: rgb(0, 0, 0) !important;
}

.navbar .dropdown-toggle::after {
  transition: transform 0.18s ease;
}
.navbar .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.navbar-collapse .nav-item .form-select {
  width: auto !important;
  flex: 0 0 auto;
}

.btn-shopcart {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 0px !important;
}
.btn-shopcart:hover {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
}

/***** Cards de los carros *****/

.card-img-top {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.card {
  width: 85%;
  margin: auto;
  border: 2px solid rgba(124, 124, 124, 0.1);
}

.btn-price, .btn-price:hover, .btn-price:focus, .btn-price:active {
  background-color: rgba(125, 227, 0, 0.6) !important;
  color: rgb(69, 69, 69);
  font-weight: bold;
  border: none !important;
  border-radius: 20px;
  border-bottom-right-radius: 0px;
  font-size: x-large;
}

.btn-select-car {
  background-color: rgba(2, 94, 211, 1);
  font-weight: bold;
  font-size: larger;
  border: none;
  border-radius: 30px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
}

.btn-select-car:hover {
  background-color: rgb(115, 209, 0);
  box-shadow: 0px 10px 0px 0px rgb(86, 86, 86);
}

.btn-select-car:active {
  background-color: rgb(72, 131, 0) !important;
  transform: translateY(10px);
  box-shadow: 0px 0px 0px 0px rgb(86, 86, 86);
}

/***** Carrusel *****/

.carousel {
  margin-top: -4rem !important;
}

.carousel-indicators button{
  background-color: rgba(2, 94, 211, 1) !important;
  border-radius: 50%;
  width: 12px !important;
  height: 12px !important;
}

/***** Footer *****/

.custom-links li a {
  text-decoration: none;
  transition: color 0.18s ease;
}
.custom-links li a:hover {
  color: rgb(2, 255, 14) !important;
}