* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
:root {
	--Soft-Red: hsl(7, 99%, 70%);
	--Yellow: hsl(51, 100%, 49%);
	--Bright-Blue: hsl(200, 100%, 62%);
	--Bright-Blue-Light: hsl(200, 100%, 72%);
	--Dark-Desaturated-Cyan: hsl(167, 40%, 24%); /* (graphic design text) */
	--Dark-Blue: hsl(198, 62%, 26%); /* (photography text) */
	--Dark-Moderate-Cyan: hsl(168, 34%, 41%); /* (footer) */
	--Very-Dark-Desaturated-Blue: hsl(212, 27%, 19%);
	--Very-Dark-Grayish-Blue: hsl(213, 9%, 39%);
	--Dark-Grayish-Blue: hsl(232, 10%, 55%);
	--Grayish-Blue: hsl(210, 4%, 67%);
	--White: hsl(0, 0%, 100%);
}
@font-face {
	font-family: Barlow Regular;
	src: url("../fonts/Barlow/Barlow-Regular.ttf");
}
@font-face {
	font-family: Fraunces;
	src: url("../fonts/Fraunces/Fraunces-VariableFont_SOFT\,WONK\,opsz\,wght.ttf");
}
body {
	font-size: 18px;
}
header {
	background-color: var(--Bright-Blue);
}
.navbar-container {
	font-family: Barlow Regular;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 4%;
	background-color: var(--Bright-Blue);
}
/* .logo-container {
} */
/* .navbar-logo-image {
} */
.navbar-links-container {
	display: flex;
	align-items: center;
	gap: 28px;
}
.navbar-links-container a {
	color: var(--White);
	text-decoration: none;
}
.contact-button {
	color: var(--Dark-Desaturated-Cyan);
	font-family: Fraunces;
	font-weight: 600;
	text-transform: uppercase;
	padding: 10px 25px;
	background-color: var(--White);
	border: none;
	border-radius: 20px;
	cursor: pointer;
	transition: 0.4s;
}
.contact-button:hover {
	color: var(--White);
	background-color: var(--Bright-Blue-Light);
}
.burger-icon-button {
	background-color: var(--Bright-Blue);
	border: none;
	outline: none;
	display: none;
}
/* .burger-icon-image{} */
main {
	display: flex;
	flex-direction: column;
}
.hero-section {
	font-family: Fraunces;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 5px;
	text-transform: uppercase;
	display: flex;
	justify-content: center;
	height: 100vh;
	background-image: url("../images/desktop/image-header.jpg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--Bright-Blue);
}
.hero-text {
	color: var(--White);
	margin: 60px 0 0 0;
}
.grid-section {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.grid-item {
	width: 50vw;
	height: 50vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.grid-item-1 {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.grid-item-2 {
	background-image: url("../images/desktop/image-transform.jpg");
	background-color: var(--Yellow);
}
.grid-item-3 {
	background-image: url("../images/desktop/image-stand-out.jpg");
	background-color: var(--Soft-Red);
}
.text-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 50%;
}
.grid-heading-text-1 {
	font-family: Fraunces;
}
.grid-description-text {
	font-family: Barlow Regular;
	line-height: 28px;
}
.learn-more-link {
	font-family: Fraunces;
	text-decoration: none;
	color: black;
}
.bottom-grid-item-1 {
	background-image: url("../images/desktop/image-graphic-design.jpg");
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: hsl(168, 45%, 69%);
}
.bottom-grid-item-2 {
	background-image: url("../images/desktop/image-photography.jpg");
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: hsl(197, 99%, 68%);
}
/* .bottom-grid-item {
} */
.bottom-grid-item .text-container {
	text-align: center;
	margin: 160px 0 0 0;
}
.grid-heading-text-2 {
	font-family: Fraunces;
}
.grid-description-text-2 {
	font-family: Barlow Regular;
	line-height: 28px;
}
.testimonials-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	margin: 0 15% 0;
	padding: 80px 0;
}
.testimonials-heading-text {
	color: var(--Grayish-Blue);
	font-family: Fraunces;
	text-transform: uppercase;
}
.testimonials-container {
	display: flex;
	justify-content: space-around;
}
.testimonial-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 290px;
	width: 30%;
}
.testimonial-image {
	width: 64px;
	border-radius: 50%;
	margin: 0 0 40px 0;
}
.testimonial-text {
	font-family: Barlow Regular;
	font-weight: 600;
	color: var(--Very-Dark-Grayish-Blue);
}
.details-container {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: auto 0 0 0;
}
.testimonial-name {
	color: var(--Very-Dark-Desaturated-Blue);
	font-family: Fraunces;
	font-weight: 800;
}
.testimonial-position {
	color: var(--Grayish-Blue);
	font-family: Barlow Regular;
	font-size: 14px;
	font-weight: 600;
}
.images-section {
	display: flex;
}
.image-container {
	height: 500px;
	width: 720px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.image-container-1 {
	background-image: url("../images/desktop/image-gallery-milkbottles.jpg");
}
.image-container-2 {
	background-image: url("../images/desktop/image-gallery-orange.jpg");
}
.image-container-3 {
	background-image: url("../images/desktop/image-gallery-cone.jpg");
}
.image-container-4 {
	background-image: url("../images/desktop/image-gallery-sugarcubes.jpg");
}
footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 0;
	background-color: hsl(167, 44%, 70%);
}
.footer-logo-image {
	width: 180px;
	margin: 0 0 20px 0;
}
.footer-links-container {
	display: flex;
	gap: 40px;
	margin: 0 0 60px 0;
}
.footer-link {
	font-family: Barlow Regular;
	font-size: 16px;
	font-weight: 600;
	color: #3c8071;
	text-decoration: none;
}
.social-icons {
	display: flex;
	gap: 15px;
}
.attribution {
	color: var(--White);
	font-size: 11px;
	text-align: center;
	background-color: hsl(167, 44%, 70%);
}
.attribution a {
	color: var(--Dark-Desaturated-Cyan);
}

@media (max-width: 475px) {
	.navbar-container {
		padding: 40px 7%;
	}
	.navbar-logo-image {
		width: 140px;
	}
	.burger-icon-button {
		display: block;
	}
	.navbar-links-container {
		position: absolute;
		top: 0;
		right: 5%;
		display: flex;
		flex-direction: column;
		width: 90%;
		padding: 40px 0;
		background-color: var(--White);
		margin: 100px 0 0 0;
		display: none;
	}
	.navbar-links-container a {
		font-weight: 600;
		color: var(--Dark-Grayish-Blue);
	}
	.contact-button {
		font-weight: 800;
		padding: 15px 30px;
		border-radius: 30px;
		background-color: var(--Yellow);
	}
	.hero-section {
		justify-content: center;
		height: 60vh;
		background-image: url("../images/mobile/image-header.jpg");
		background-size: cover;
		background-position: bottom;
	}
	.hero-text {
		font-size: 38px;
		text-align: center;
		margin: 50px auto 0;
		width: 300px;
		height: fit-content;
	}
	.grid-section {
		display: flex;
		flex-direction: column;
	}
	.grid-item {
		width: 100%;
		height: fit-content;
		background-size: cover;
	}
	.grid-item-1 {
		order: 2;
	}
	.grid-item-2 {
		height: 320px;
		background-image: url("../images/mobile/image-transform.jpg");
		order: -1;
	}
	.grid-item-3 {
		height: 320px;
		background-image: url("../images/mobile/image-stand-out.jpg");
		order: 3;
	}
	.grid-item-4 {
		order: 4;
	}
	.text-container {
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 24px;
		width: 85%;
		padding: 80px 0;
	}
	.grid-heading-text-1 {
		font-size: 28px;
	}
	.grid-description-text {
		font-family: Barlow Regular;
		line-height: 28px;
	}
	.learn-more-link {
		font-family: Fraunces;
		text-decoration: none;
		color: black;
	}
	.bottom-grid-item {
		height: 80vh;
		background-size: cover;
	}
	.bottom-grid-item-1 {
		background-image: url("../images/mobile/image-graphic-design.jpg");
		order: 5;
	}
	.bottom-grid-item-2 {
		background-image: url("../images/mobile/image-photography.jpg");
		order: 6;
	}
	.bottom-grid-item .text-container {
		gap: 30px;
		padding: 0 0 70px 0;
		margin: auto 0 0 0;
	}
	.grid-heading-text-2 {
		color: var(--Very-Dark-Desaturated-Blue);
		font-size: 28px;
	}
	.bottom-grid-item-1 .text-container .grid-heading-text-2 {
		color: #225449;
	}
	.bottom-grid-item-2 .text-container .grid-heading-text-2 {
		color: #21536c;
	}
	.grid-description-text-2 {
		line-height: 28px;
		font-weight: 600;
	}
	.bottom-grid-item-1 .text-container .grid-description-text-2 {
		color: #225c4e;
	}
	.bottom-grid-item-2 .text-container .grid-description-text-2 {
		color: #0f4865;
	}
	.testimonials-section {
		margin: 0;
	}
	.testimonials-heading-text {
		font-size: 18px;
		letter-spacing: 2px;
	}
	.testimonials-container {
		flex-direction: column;
		align-items: center;
		gap: 80px;
	}
	.testimonial-item {
		height: fit-content;
		width: 90%;
	}
	/* .testimonial-image {
	} */
	.testimonial-text {
		margin: 0 0 20px 0;
	}
	/* .details-container {
	} */
	/* .testimonial-name {
	} */
	/* .testimonial-position {
	} */
	.images-section {
		display: grid;
		grid-template-columns: repeat(2, 50vw);
	}
	.image-container {
		height: 50vw;
	}
	.image-container-1 {
		background-image: url("../images/mobile/image-gallery-milkbottles.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.image-container-2 {
		background-image: url("../images/mobile/image-gallery-orange.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.image-container-3 {
		background-image: url("../images/mobile/image-gallery-cone.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.image-container-4 {
		background-image: url("../images/mobile/image-gallery-sugar-cubes.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.attribution {
		display: none;
	}
}