/* Bar */
.top-gradient-bar_modal {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;

  background: linear-gradient(
    to bottom,
    rgba(0, 90, 200, 0),
    rgba(0, 90, 200, 0.9)
  );

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.3s ease, transform 1.5s ease;
  z-index: 999;
}

.top-gradient-bar_modal.visible {
  opacity: 1;
  transform: translateY(0);
}

.logo-modal{
  z-index: 2;
  position: absolute;
  width: 90px;
  top: 15px;
  left: 20px;
}

.top-gradient-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;

  background: linear-gradient(
    to bottom,
    rgba(0, 90, 200, 0.9),
    rgba(0, 90, 200, 0)
  );

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 1.3s ease, transform 1.5s ease;
  z-index: 999;
}

.top-gradient-bar.visible {
  opacity: 1;
  transform: translateY(0);
}

.logo{
  z-index: 2;
  position: absolute;
  width: 90px;
  top: 10px;
  left: 20px;
}

.top-gradient-bar_products {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;

  background: linear-gradient(
    to bottom,
    rgba(0, 90, 200, 0.9),
    rgba(0, 90, 200, 0)
  );

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 1.3s ease, transform 1.5s ease;
  z-index: 999;
}

.top-gradient-bar_products.visible{
  opacity: 1;
  transform: translateY(0);
}

.logo_go_back{
  z-index: 2;
  position: absolute;
  color: white;
  width: 90px;
  top: 10px;
  left: 20px;
}

@media (max-width: 768px) {
  .logo {
    right: 20px;
    width: 50px;
  }
}