/* Contacte */

.cont-contacte{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	max-width: 1440px;
	width: 100%;
	height: auto;
	margin: 40px 50px 0px 50px;
}

	.contacte-text{
		color: #124944;
		margin-bottom: 30px;
	}

	.contacte-formulari{
		color: #124944;
	}

		.nom-cognom, .correu-tel{
			display: flex;
			max-width: 1340px;
			width: 100%;
			gap: 20px;
		}

			.nom, .cognom, .correu, .tel{
				display: flex;
				flex-direction: column;
				width: 660px;
				height: auto;
			}

			.missatge{
				display: flex;
				flex-direction: column;
				max-width: 1340px;
				width: 100%;
			}

				.nom label, .cognom label, .correu label, .tel label, .missatge label{
					margin-bottom: 15px;
				}

				.nom input, .cognom input, .correu input, .tel input{
					border-radius: 100px;
					border: 1.5px solid #124944;
					padding: 11.2px 20px;
					font-family: Poppins;
					font-size: 16px;
					font-style: normal;
					font-weight: 300;
					line-height: 20px;
					margin-bottom: 20px;
				}

				.nom input::placeholder, .cognom input::placeholder, .correu input::placeholder, .tel input::placeholder, .missatge textarea::placeholder{
					color: rgba(20, 74, 69, 0.50);
					font-family: Poppins;
					font-size: 16px;
					font-style: normal;
					font-weight: 300;
					line-height: 20px;
				}

				.missatge textarea{
					border-radius: 20px;
					border: 1.5px solid #124944;
					padding: 11.2px 20px;
					height: 110px;
					font-family: Poppins;
					font-size: 16px;
					font-style: normal;
					font-weight: 300;
					line-height: 20px;
				}

		.info{
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			flex-direction: column;
		}

			.info p{
				margin: 20px 0px;
			}

		.contacte-formulari button{
			display: flex;
			justify-content: center;
			align-items: center;
			max-width: 433px;
			width: 100%;
			height: 40px;
			border-radius: 100px;
			background-color: #124944;
			color: #ffffff;
			text-align: center;
			font-family: Poppins;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 20px;
			text-decoration: none;
		}

		.contacte-formulari button:hover{
			background-color: #f2d606;
			color: #124944;
			border: none;
		}

/* Media query (768p) */

@media (max-width: 768px){

/* Contacte */

.cont-contacte{
	max-width: 668px;
	margin: 0px 50px 30px 50px;
}

	.contacte-text{
		margin-bottom: 20px;
	}

	.contacte-formulari{
	}

		.nom-cognom, .correu-tel{
			max-width: 668px;
		}

			.nom, .cognom, .correu, .tel{
				width: 324px;
			}

			.missatge{
				max-width: 668px;
			}

			.nom label, .cognom label, .correu label, .tel label, .missatge label{
					margin-bottom: 10px;
					font-size: 14px;
					line-height: 16px;
				}

				.nom input, .cognom input, .correu input, .tel input{
					border: 1px solid #124944;
					padding: 15px 15px;
					height: 30px;
					font-size: 14px;
					line-height: 16px;
				}

				.nom input::placeholder, .cognom input::placeholder, .correu input::placeholder, .tel input::placeholder, .missatge textarea::placeholder{
					font-size: 14px;
					line-height: 16px;
				}

				.missatge textarea{
					border: 1px solid #124944;
					padding: 15px 15px;
					height: 80px;
					font-size: 14px;
					line-height: 16px;
					border-radius: 15px;
				}

			.info p{
				margin: 10px 0px 15px 0px;
			}

		.contacte-formulari button{
			max-width: 324px;
			height: 30px;
			font-size: 14px;
			line-height: 16px;
		}
}

/* Media query (480p) */

@media (max-width: 480px){

/* Contacte */

.cont-contacte{
	max-width: 420px;
	width: 100%;
	height: auto;
	margin: 0px 30px 20px 30px;
}

	.contacte-text{
		margin-bottom: 10px;
	}

	.contacte-formulari{
	}

		.nom-cognom, .correu-tel{
			flex-direction: column;
			max-width: 420px;
			gap: 10px;
			margin-bottom: 10px;
		}

			.nom, .cognom, .correu, .tel{
				width: 420px;

			}

			.missatge{
				max-width: 668px;
			}

			.nom label, .cognom label, .correu label, .tel label, .missatge label{
					margin-bottom: 10px;
					font-size: 11px;
					line-height: 13px;
				}

				.nom input, .cognom input, .correu input, .tel input{
					padding: 10px 10px;
					height: 30px;
					font-size: 11px;
					line-height: 13px;
					margin-bottom: 0px;
				}

				.nom input::placeholder, .cognom input::placeholder, .correu input::placeholder, .tel input::placeholder, .missatge textarea::placeholder{
					font-size: 11px;
					line-height: 13px;
				}

				.missatge textarea{
					padding: 10px 10px;
					height: 70px;
					font-size: 11px;
					line-height: 13px;
					border-radius: 10px;
				}

			.info p{
				margin: 10px 0px 20px 0px;
			}

		.contacte-formulari button{
			max-width: 420px;
			height: 30px;
			font-size: 11px;
			line-height: 13px;
			margin-bottom: -30px;
		}
}