.contacto-section{

	background: url('../img/pages/background-about.jpg') center center / cover no-repeat;
    padding-top: 200px;
    padding-bottom: 80px;
}

.contenido-contacto{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bg-color-primary{
	background-color: var(--primary-color);
	padding: 3px !important;
}


.card-header-contacto{

/*	width: 120px;
	height: 120px;*/
	position: relative;
}


.body-contacto p{
	text-align: justify;
}

.card-header-contacto i{

	background-color: var(--primary-color);
	padding: 5px;
	border-radius: 50%;
	border: 0;
	color: #fff;
	font-size: 20px;
	height: 50px;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	text-align: center;
	top: -30px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.color-oficina{

	color: var(--primary-color);
	text-align: center !important;
	font-weight: 400;
}



/* Estilos para móviles (por defecto, hasta 480px) */
body {
  font-size: 14px;

  


}
/* Breakpoint para tabletas (hasta 768px) */
@media (max-width: 480px) {

	.contacto-section{
		padding-top: 120px;

	}

	.item-contacto-image img{

		width: 80%;
		padding: 20px 0px;
	}

	.item-contacto-card{

		padding: 30px 30px;
		text-align: center;
		display: flex;
		justify-content: center;

	}

	.card-items{
		height: 200px !important;
	}

}


/* Breakpoint para tabletas (hasta 768px) */
@media (max-width: 768px) {

  body {
    font-size: 16px;
  }

  .contacto-contenedor{
  	display: flex;
  	/*flex-direction: column;*/
  	justify-content: center;
  	align-content: center;
  }

	.contacto-section{
		padding-top: 120px;

	}

	.item-contacto-image img{

		width: 100%;
		padding: 20px 0px;
	}

	.item-contacto-card{

		padding: 30px 10px;
		text-align: center;
		display: flex;
		justify-content: center;
		width: 450px;
	}

	.contacto-section{
		padding-top: 120px;

	}

	.contenido-contacto{
		width: 90%;
		display: flex;
		align-items: center;
	}


	.card-items{
		height: 200px !important;
	}

	.contenedor-card{
		display: flex;
		justify-content: center;
	}


}

/* Breakpoint para pantallas medianas (hasta 1024px) */
@media (max-width: 1024px) {

  body {
    font-size: 13px;
  }

  .contenido-contacto{

  }
  .card-items{
  	height: 280px;
  }

  .item-contacto-image img{

  	width: 90%;
  	padding: 20px 0px;
  }







}

/* Breakpoint para pantallas grandes (más de 1024px) */
@media (min-width: 1025px) {
  body {
    font-size: 14px;
  }
}

/* Breakpoint para pantallas extra grandes (mayores a 1200px) */
@media (min-width: 1201px) {
  body {
    font-size: 14px;
  }
}