/* Hero Section */
.page-hero {
  position:relative;
  height:520px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}

.hero__img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero__overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1;
}

.hero__content {
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
}

.page-hero__title {
  	margin:0;
  	font-size: clamp(80px,12vw,180px);
	font-weight: 400;
}

.page-hero p {
  margin:0;
  max-width:600px;
  font-size:clamp(24px,3vw,48px);
  line-height:1.1;
  text-align:right;
}

/* Categories Projects */

.projects-section {
  width:100%;
}

.cta {
  position:relative;
  display:flex;
  align-items:center;
  height:180px;
  padding:0 5vw;
  text-decoration:none;
  overflow:hidden;
  transition:var(--transition);
}

.cta span{
  position:relative;
  z-index:2;
  font-size:clamp(36px,5vw,72px);
  font-weight:300;
  letter-spacing:.05em;
  color:#fff;
  transition:var(--transition);
}

/* HOVER TEXT */
.cta::before{
  content:attr(data-hover);
  position:absolute;
  left:5vw;
  top:50%;
  transform:translateY(100%);
  font-size:clamp(36px,5vw,72px);
  font-weight:300;
  letter-spacing:.05em;
  color:#fff;
  opacity:0;
  transition:var(--transition);
  z-index:2;
}

.cta:hover span{
  transform:translateY(-100%);
  opacity:0;
}

.cta:hover::before{
  transform:translateY(-50%);
  opacity:1;
}

/* COLORS */

.cta--grey{
  background:#9c9c9c;
}

.cta--grey:hover{
  background:#7b5a46;
}

@media (max-width: 768px) {
    .hero__content {
	 	align-items: flex-start;
    	flex-direction: column;
		margin-bottom: 25px;
	}
	.page-hero p {
		text-align: left;
	}
}