body {
}

.section2 {
	margin: 10px;
}

.container2 {
	max-width: 1400px;
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	justify-content: center;
	display: flex;
	background-color: #f5f5f5;
	
	animation: showcontent 1.6s ease-in-out 1 forwards
}
.container2 .card2 {
		position: relative;
		padding: 5px;
		height: inherit;
		width: inherit;
	}

.container2.card2 .face {
			width: 200px;
			height: 100px;
			transition: 0.5s;
		}
.container2 .card2 .face.face1 {
				position: relative;
				background: #333;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 1;
				transform: translateY(100px);
			}

.container2 .card2 .face.face1 .content {
					opacity: 0.2;
					transition: 0.5s;
				}
.container2 .card2:hover .face.face1 .content {
			opacity: 1;
		}
.container2 .card2 .face.face2 {
			position: relative;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px;
			box-sizing: border-box;
			box-shadow: 0 20px 50px rgba(0,0,0,0.8);
			transform: translateY(-100px);
		}

.container2 .card2 .face.face2 .content p2 {
				margin: 0;
				padding: 0;
			}

.container2 .card2 .face.face2 .content a {
				margin: 15px 0 0;
				display: inline-block;
				text-decoration: none;
				font-weight: 900;
				color: #333;
				padding: 5px;
				border: 1px solid #333;
			}
.container2 .card2 .face.face2 .content a:hover {
					background: #333;
					color: #fff;
				}

.container2 .card2:hover .face.face1 {
			background: #ff0057;
			transform: translateY(0);
		}
.container2 .card2 .face.face1 .content img {
			max-width: 300px;
		}

.container2 .card2 .face.face1 .contenttwo img {
			max-width: 50px;
		}

.container2 .card2 .face.face1 .contentone {
			padding: 50px;
			max-width: 300px;
		}
.container2 .card2 .face.face1 .contenttwo img {
			max-width: 268px;
		}
.container2 .card2 .face.face1 .contentone {
			max-width: 500px;
		}

.container2 .card2 .face.face1 .content h3 {
			margin: 10px 0 0;
			padding: 0;
			color: #fff;
			text-align: center;
			font-size: 1.5em;
		}

.container2 .card2:hover .face.face2 {
			transform: translateY(0);
		}

.ourservices .h1 {
	padding: 10px;
}

.ourservices {
	padding: 50px;
	background-color: #f5f5f5;
	padding-bottom: 5px;
	padding-top: 50px;
}

.a {
	background-color: black;
	color: white;
	padding: 10px;
	text-decoration: none;
}

a:hover {
	transform: scale(1.1);
}

@keyframes showcontent {
	from {
		opacity: 0;
		transform: translate(0,100px);
		filter: blur(33px);
	}

	to {
		opacity: 1;
		transform: translate(0,0);
		filter: blur(0);
	}
}