.intro {
	height:100vh;
    text-align: center;
    place-items: center;
    display: grid;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
}


/* problem section start*/
.problem-section {
	height: 100%;
	display: grid;
	grid-template-areas: "... container ...";
	grid-template-columns: 1fr 100% 1fr;
	align-items: center;
	justify-items: center;
	margin: 50vh 0;
}

.problem-container {
	grid-area: container;
	padding: 2rem;
	/* background-color: #e93f33; */
}

.brand-name {
	font-family: var(--headfont);
	font-variation-settings: "wdth" 140, "wght" 300;
	font-weight: bold;
	background: var(--color-title);
	padding: 5px;
}

.overview, .statement {
	display: grid;
	grid-template-areas: "heading content img";
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	align-items: center;
	height: 50vh;
	backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(0, 0, 0, 0.75);
}

.overview h3, .statement h3 {
	text-align: center;
}

.overview-img {
	height: 100%;
	background: url('../img/overview-img.webp');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
  }
.statement-img {
	height: 100%;
	background: url('../img/project-overview-img.webp');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
  }


  .overiew-wrapper {
	background: url('../img/overview-img.webp');
  }
  .statement-wrapper {
	background: url('../img/project-overview-img.webp');
  }
/* problem section ends */

/* footer */
footer {
	height: 30vh;
	padding: 2rem;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-item {
	  text-align: center;
	  display: flex;
	  align-items: center;
	  justify-content: center;
}

.footer-icon {
	width: 2rem;
	height: 2rem;
	color: #fff;
	margin: 10px;
}

.footer-icon > svg:hover {
	color: var(--color-title);
}