/* ----------------------------------------------------------------

	CSS for products page:
	prolux.php, tyretech.php

-----------------------------------------------------------------*/

/*PULSANTI*/
.btn-group {
  display: flex;
  justify-content: center;
  gap: 0rem;
  flex-wrap: wrap;
}

.btn-group .btn {
  padding: 0.75rem 1.5rem;
  min-width: 180px;
  text-align: center;
}

.btn-filter{
	margin-top: 15px;
	min-width: 200px;
	padding: 0.8em 2.5em;
	background-color: transparent;
	border: 1px solid #023F87;
	color: #023F87;
	font-size: 1em;
}
.btn-filter.active,.btn-filter:hover{
	background-color: #023F87;
	border: 1px solid #023F87;
	color: #FFF;
}

@media (max-width: 767px) {
  .btn-group {
	align-items: center;
  }

  .btn-group .btn {
	width: 100%;
	max-width: 250px;
  }

  .btn-filter{
	  margin-bottom: 10px;
		min-width: 100%;
		max-width: 100%;
	}
}


/*GRID*/
.code{
	font-size: 0.5em;
	color: #6C6D6E;
}
.code-p{margin-bottom: 0;}

.card {
	position: relative;
	overflow: hidden;
}

.card:hover{
	box-shadow: 0px 0px 10px #00000021;
	border: 1px solid #FFF;
}

.card-body h5,
.card-body p.card-text,
.card-body small.text-muted {
	transition: color 0.3s ease;
}

@media (min-width: 768px) {
	.card:hover .card-body h5,
	.card:hover .card-body p.card-text,
	.card:hover .card-body small.text-muted {
	  color: #e98202;
	}
  }

  .more-btn {
	position: absolute;
	font-family: 'Lato';
	height: 80px;
	place-content: center;
	align-content: center;
	font-weight: 700;
	text-transform: uppercase;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	z-index: 2;
	background-color: #023F87;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s ease, background-color 0.3s ease;
  }

  .more-btn:hover{
	  background-color: #01234a;
  }

  .card img {
	transition: opacity 0.3s ease;
  }

  @media (max-width: 767.98px) {
	.more-btn {
		display: none;
	  transform: translateY(0);
	}
  }

  @media (min-width: 768px) {
	.card:hover .more-btn {
	  transform: translateY(0);
	}
	.card:hover img {
	  opacity: 0.5;
	}
  }