#course-info { 
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1570px;
    /* width: fit-content; */
    /* height: 9vh; */
    margin: 0 auto;
    background-color: #f5c35c !important;
    border-radius: 0 0 15px 15px;
    color: #20313d /* Texto negro */ !important;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3);
}

#course-info .detail-item { 
  display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0 15px;
    margin-top: -0.5vh;
    max-width: 30%;
}

#course-info .detail-item .item-value { 
  display: flex; 
  align-items: center; 
  color: #20313d /* Texto negro */ !important;
  font-family: 'AncizarSans-Bold', sans-serif; 
  font-size: 1.6em;
}

#course-info .detail-item .icon { 
  background-size: contain;
  width: 28px;
  height: 28px;
  margin-right: 10px; /* Espacio entre el icono y el texto */
  background-color: #20313d; /* Icono negro */
  
}


#course-info .data { 
  font-size: 2rem;
    max-width: 80%;
    margin-left: -5%;
  
}

.icon-calendar, .icon-clock, .icon-computer-hand, .icon-coin {
  width: 11vh;  
  height: 11vh; 
  /* margin-left: -25px; */
   
  display: inline-block;
  background-size: contain; /* Asegura que el ícono ocupe todo el contenedor */
  background-repeat: no-repeat;
  background-position: center;
   /* Elimina bordes adicionales */
}

 .icon-regalo {
  width: 10vh;  
  height: 10vh; 
  /* margin-left: -25px; */
   border-radius: 50%;
  display: inline-block;
  background-size: contain; /* Asegura que el ícono ocupe todo el contenedor */
  background-repeat: no-repeat;
  background-position: center;
   /* Elimina bordes adicionales */
}


#course-info .icon-calendar {
  background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos informacion cursos bloque 2024/Calendar.png');
}

#course-info .icon-clock {
  background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos informacion cursos bloque 2024/Clock.png');
}

#course-info .icon-computer-hand {
  background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos informacion cursos bloque 2024/ComputerHand.png');
}

#course-info .icon-coin {
  background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos informacion cursos bloque 2024/Coin.png');
}

#course-info .icon-regalo {
  background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos informacion cursos bloque 2024/regalo.png');
}

@media screen and (min-width: 90em) { 
  #course-info .detail-item { 
      width: auto; /* Ajusta el ancho según el contenido en pantallas grandes */
      
  }
}

@media screen and (max-width: 40em) { 
  #course-info { 
      flex-direction: column; /* Muestra una entrada sobre la otra en pantallas pequeñas */
      align-items: center; 
      height: auto;
      border-radius: 0%;
        max-width: 100%;
        width: 100%; /* Asegura que ocupe todo el ancho en dispositivos móviles */
    
    
  }





  #course-info .detail-item { 
    border-top: 1px solid #20313d;
        width: 100%;
        justify-content: flex-start;
        display: flex;
        /* margin-left: 5% !important; */
        color: #20313d;
        height: 65px;
        margin: 0;
        max-width: 100% !important;
  }

  .icon-calendar, .icon-clock, .icon-computer-hand, .icon-coin {
    width: 70px;  
    height: 70px; 
    margin-left: 3%;
    margin-right: 3%;
     
  
  }
  
  
   .icon-regalo {
        width: 60px;
        height: 50px;
        margin-left: 4%;
        margin-right: 3%;
        border-radius: 50%;
  
  }
  
  #course-info .data { 
    font-size: 1.2em;
    /* width: 200px; */
    color: #20313d;
    font-weight: 100 !important;
    
    
  }




}

/* Efecto hover en el texto de la clase .data */
#course-info .data:hover { 
  color: #3f5563; /* Cambia al nuevo color */
  transition: color 0.4s ease-in-out; /* Transición más suave */
}


/* Efecto hover en los iconos (background-image) usando opacidad */
#course-info .detail-item:hover, .icon-calendar:hover, .icon-clock:hover, .icon-computer-hand:hover, .icon-coin:hover {
  opacity: 0.9; /* Reduce ligeramente la opacidad para un efecto transparente */
  transition: opacity 0.4s ease-in-out; /* Misma velocidad que el texto */
}