/* HERO */

.hero {
	width: 100%;
	height: 95vh;
	background-image: url('../img/hero.jpg');
	background-size: cover;
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.hero h1 {
	color: #FFF;
	font-size: 73px;
	text-align: center;
}

/*.hero h1 .hero-title-effect {
  animation: color-change 10s infinite;
}*/

.hero .hero-img {
	margin-top: 70px;
	width: 250px;
	height: 250px;
	clip-path: circle(50%);
}

.hero .hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ABOUT */

.about {
	width: 80%;
	margin: 80px auto;
	height: auto;
}

.about p {
	font-size: 24px;
	color:#1f1f1f;
}

.about p b {
	font-weight: 500;
}

.about p a {
	color: #f0544f;
}


/* MINI BANNER */

.mini-about {
	margin-top: 50px;
	margin-bottom: 70px;
	display: flex;
	justify-content: center;
} 

/* PROJECTS */

.projects {
	width:100%;
	height: auto;
}
.projects .project {
	width: 100%;
	height: auto;
	display: flex;
	margin-bottom: 150px;
}

.projects .project .project-image {
	width: 60%;
	height: 100%;
}
.projects .project .project-image img {
	width: 100%;
	height: auto;
}
.projects .project .project-description {
	width: 40%;
	height: 100%;
	padding: 0px 40px;
}
.projects .project .project-description h2 {
	text-transform: uppercase;
}
.projects .project .project-description p {
	margin-bottom: 20px;
}
.projects .project .project-description .category {
	margin-top: 8px;
	font-weight: 400;
}
.projects .project .project-description .button {
	border:1px solid #000;
	padding:9px 18px;
	border-radius: 100px;
	background:#000;
	color:#FFF;
	font-weight: 600;
}
.projects .project .project-description hr {
	margin-top: 30px;
	color:#7a7a7a;
}
.projects .project .project-description .technologies {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
}

.projects .project .project-description .technologies .tech {
	border:1px solid #7a7a7a;
	padding:4px 16px;
	border-radius: 100px;
	margin:10px;
	transition:0.2s ease;
}

.projects .project .project-description .technologies .tech:hover {
	background:#102542;
	color:#FFF;
	border:1px solid transparent;
}

@keyframes color-change {
  0% { color: #fff; }
  25% { color: #2cda9d; }
  50% { color: #1b98e0; }
  100% { color: #ff5154; }
}


@media screen and (max-width: 830px) {
	.projects .project {
		flex-direction: column;
		height: auto;
	}
	.projects .project .project-image {
		width: 100%;
		height: auto;
	}
	.projects .project .project-description {
		width: 100%;
		padding:30px 0px;
	}
}

@media screen and (max-width: 730px) {
	header{
		flex-direction: column;
	}
	header .flex-der {
		width: 100%;
		border-top: 1px solid #7a7a7a;
		padding-top: 20px;
	}
	header .title {
		text-align: center;
	}
	.hero h1 {
		font-size: 50px;
	}
}

@media screen and (max-width: 571px) {
	.about {
		width: 95%;
		margin: 50px auto;
	}
	.about p {
		font-size: 18px;
	}
}