#contact {
	display: flex;
	justify-content: center;
	margin-top: 2%;
	height: 20vh;
}

.cardsocial {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 5px;
	gap: 20px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
}

/* for all social containers*/
.socialContainer {
	width: 52px;
	height: 52px;
	border-radius: 10%;
	background-color: rgb(44, 44, 44);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition-duration: .3s;
}

/* instagram*/
.containerOne:hover {
	background-color: #d62976;
	transition-duration: .3s;
	box-shadow: 0px 2px 5px 2px #d6297780, 0px -2px 5px 2px #d6297680, 2px 0px 5px 2px #d6297780, -2px 0px 5px 2px #d6297680;
}

/* twitter*/
.containerTwo:hover {
	background-color: #616161;
	transition-duration: .3s;
	box-shadow: 0px 2px 5px 2px #a7a7a7, 0px -2px 5px 2px #a7a7a7, 2px 0px 5px 2px #a7a7a7, -2px 0px 5px 2px #a7a7a7;
}

/* linkdin*/
.containerThree:hover {
	background-color: #0072b1;
	transition-duration: .3s;
	box-shadow: 0px 2px 5px 2px #0072b280, 0px -2px 5px 2px #0072b280, 2px 0px 5px 2px #0072b280, -2px 0px 5px 2px #0072b280;
}

/* Whatsapp*/
.containerFour:hover {
	background-color: #128C7E;
	transition-duration: .3s;
	box-shadow: 0px 2px 5px 2px #128C7F80, 0 -2px 5px 2px #128C7F80, 2px 0px 5px 2px #128C7F80, -2px 0px 5px 2px #128C7F80;
}

.socialContainer:active {
	transform: scale(0.9);
	transition-duration: .3s;
}

.socialSvg {
	width: 17px;
}

.socialSvg path {
	fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
	animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
	0% {
		transform: translateY(-50px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}