#tablaServicios_wrapper {
  margin-top: 20px;
}

#tablaServicios_filter input[type="search"] {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  width: 250px;
}

.dataTables_length {
  margin-bottom: 20px;
}

.progress {
  margin-bottom: 0;
}

.progress-container {
  position: relative;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.progress-bar {
  background-color: #007bff;
  border-radius: 5px;
  height: 100%;
  transition: width 0.3s ease-in-out;
}

.progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: bold;
}

.menubar {
  text-align: center;
}

.menubar li {
  display: inline-block;
  width: 15%;
  min-width: 120px;
  cursor: pointer;
  position: relative;
  text-align: center;
  background: #096b65;
  border-radius: 4px;
  margin-top: 10px;
  padding: 0.5rem 0;
}

.menubar li a {
  color: white;
  text-decoration: none;
  display: block;
  font-family: "Montserrat", sans-serif;
}

.menubar li:hover {
  opacity: 0.8;
  transition: 0.3s;
  background: purple;
}

.menubar li:hover a {
  color: white;
}

.menubar li ul {
  display: none;
  position: absolute;
  margin-top: 0.5rem;
  z-index: 100;
}

.menubar li:hover ul {
  display: block;
}

.menubar li ul li:hover a {
  color: white;
}

.menubar li ul li {
  width: 100%;
  min-width: 120px;
  margin-top: 2px;
}

.card-header {
  background-color: rgba(0, 0, 0, 0);
}

.bg-propio {
  color: white;
  transition: all 1s ease-in-out;
  background: linear-gradient(
    90deg,
    rgba(2, 26, 24, 1) 3%,
    rgba(9, 103, 97, 1) 37%,
    rgba(3, 33, 31, 1) 80%,
    hsl(176, 84%, 22%) 100%
  );
}



.card1 {
  font-size: medium;
  text-align: center;
  border-radius: 20%;
  width: 200px;
  height: 250px;
  margin: 30px auto 0;
  

  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);

  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out;
}

.card1:hover {
  box-shadow: 0px 0px 15px rgb(3, 255, 238);
  transform: scale(1.1);
}

.img1 {
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out;
}

.img1:hover {
  transform: scale(1.2);
}

.btn-success1 {
  color: white;
  transition: all 0.1s ease-in-out;
  background: linear-gradient(
    90deg,
    rgba(2, 26, 24, 1) 3%,
    #096761 37%,
    rgba(3, 33, 31, 1) 80%,
    rgba(9, 103, 97, 1) 100%
  );
}

.btn-success1:hover {
  font-weight: bold;
  color: yellow;
  transition: all 0.1s ease-in-out;
  background: linear-gradient(
    90deg,
    rgba(9, 103, 97, 1) 3%,
    rgba(2, 26, 24, 1) 22%,
    rgba(0, 255, 241, 1) 75%,
    rgba(0, 0, 0, 1) 98%
  );
}

/* ✅ DESPUÉS */
.contenedor {
  border: solid 1px #d8d8d8;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    var(--pos-color) 51%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: 5px;
  transition: background 0.4s ease;
}

.navbar-custom {
  background: linear-gradient(
    31deg,
    rgba(14, 48, 46, 1) 18%,
    rgba(2, 26, 24, 1) 40%,
    rgba(2, 26, 24, 1) 57%,
    rgba(7, 65, 60, 1) 89%
  ) !important;
}

.navbar-nav {
  width: 100%;
  text-align: center;
}

.navbar-nav .nav-item {
  padding: 0;
  margin: 0;
  display: inline-block;
  /* Asegura que los elementos sean inline para aplicar mx-auto */
  float: none;
  /* Evita que se floten los elementos */
}

.navbar-nav .nav-item:hover {
  opacity: 1;
  margin: 0;
  transition: 1s;
  background: purple;
}

.nav-link {
  color: #ffffff !important;
}

.blur-background {
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(25px);
  z-index: -1;
}

.content-inside {
  border-radius: 25px;
  position: relative;
  z-index: 1;
  padding: 40px;
}

.prueba22::before {
  transform: scaleX(0);
  transform-origin: bottom right;
}

.prueba22:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.prueba22:hover{
    color: white;
    
    border-radius: 25px;
}

.prueba22::before {
  content: " ";
  display: block;
  position: absolute;
  border-radius: 25px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0 0 0 0;
  
  background: linear-gradient(75deg, rgba(2, 26, 24, 1) 22%, rgb(2, 73, 69) 65%, rgba(0, 0, 0, 1) 98%);
  backdrop-filter: blur(5px);
  z-index: -1;
  transition: transform 0.5s ease;
}

.prueba22 {
  position: relative;
  font-size: 3rem;
}