@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://dbrekalo.github.io/simpleLightbox/dist/simpleLightbox.min.css");
@import url('https://fonts.googleapis.com/css2?family=Edu+QLD+Hand:wght@400..700&display=swap');

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	top: 0;
	background-color: #1f1f1f;
}

/** Paragraph Styles **/
p {
	font-family: "Noto Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
}

/** Header Styles **/

h1 {
	font-family: "Be Vietnam Pro", sans-serif;
  	font-weight: 900;
  	font-style: normal;
}

.hero-copy h2 {
	font-family: "Be Vietnam Pro", sans-serif;
  	font-weight: 900;
  	font-style: normal;
  	filter: drop-shadow(0 0 5px #1f1f1f);
}

/** Special class only for centering certain h1 **/
.centered-h1 {
	text-align: center;
}

/** Special class for changing specific text color **/
.color-blue {
	color: #4ea6fc;
}

/** Wrapper Style **/
.wrapper {
	font-family: "Noto Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;

	width: 100%;
	height: auto;
	margin: auto;
	color: white;
}

.background-grey {
	width: 100%;
	height: auto;
	background-color: #3d3d3d;
	padding: 20px;
}

/**********************************/
/** Navigation Styles **/
.nav {
	position: fixed;
	width: 100%;
	padding-top: 10px;
	height: auto;
	z-index: 9999;

	display: flex;
	justify-content: flex-end;
}

/** Navigation Style **/
.nav-pages {
	min-width: 60%;
	max-height: 100%;
	border-radius: 20px;
	background-color: #474747;
	
	display: flex;
	justify-content: center;
	filter: drop-shadow(0 0 5px #1f1f1f);
	z-index: 9999;

	font-family: "Be Vietnam Pro", sans-serif;
  	font-weight: 300;
  	font-style: normal;
  	text-transform: uppercase;
}

.nav ul {
 	display: flex;
 	justify-content: center;
 	align-items: center;
    gap: 30px;
    list-style: none;
    margin: 5px 0 5px 0;
    padding: 0;
}


.nav a {
	text-decoration: none;
	color: #bababa;
}

.nav a:hover {
	color: white;
}

a.current {
	font-weight: 400;
	color: #ffffff;
}

/** Nav-socials styles **/
.nav-socials {
	width: 20%;
	height: 100%;
	padding-left: 15px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.nav-socials img {
	max-height: 30px;
	filter: drop-shadow(0 0 5px #1f1f1f);
}

/** Mobile Nav Hamburger Menu **/
.mobile-nav {
	display: none;
}

/**********************************/
/** Hero-banner **/
.hero-banner {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 600px;
	overflow: hidden;
	border-bottom: solid 2px #000000;
}

.hero-copy {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: auto;
	margin: auto;
	z-index: 1;
	color: white;
}

.hero-copy img {
	max-width: 60%;
	margin-left: -30px;
	height: auto;
	filter: drop-shadow(0 0 30px #1f1f1f);
}

.hero-banner video {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

#shop-banner-img {
	width: 90%;
	margin: auto;
	border-radius: 10px;
	height: 500px;
	background-image: url('../images/shopbanner.jpg');
	background-size: cover;
	background-position: 30% 30%;
	text-align: center;
}

.spacer {
	width: 100%;
	height: 75px;
}

/**********************************/
/** Brand Overview **/
.brand-overview {
	width: 85%;
	height: auto;
	margin: auto;
	color: white;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: center;
	padding: 20px;
}

.brand-overview video {
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

/** Copy Style **/
.copy {
	width: 60%;
	height: 100%;
	padding: 0 35px 0 35px;
}

/** book-appointment **/
.book-appointment {
	max-width: 150px;
	height: 50px;
	border-radius: 20px;
	margin-bottom: 15px;
	background-color: #0080ff;
	text-transform: uppercase;
	color: #ffffff;

	display: flex;
	justify-content: center;
	align-items: center;
}

.book-appointment a {
	color: #ffffff;
	text-decoration: none;
}

.book-appointment:hover {
	background-color: #4ea6fc;
}

/** Image Style **/
.span-img {
	width: 40%;
	height: 100%;
}

.span-img img {
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

/**********************************/
/** Testimonials **/
.testimonials {
	width: 80%;
	height: 500px;
	margin: auto;

	display: flex;
	justify-content: space-around;
	align-items: flex-start;
}

.review {
	width: 20%;
	height: auto;
	margin-top: 15px;
}

.review p {
	font-family: "Edu QLD Hand", cursive;
  	font-weight: 300;
  	font-style: normal;
  	font-size: 15px;
}

.review img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 5px #1f1f1f);
}


/** Contact Section **/
.contact {
	width: 100%;
	height: auto;
	

	display: flex;
	justify-content: center;
	align-items: center;
}

form {
	width: 30%;
	margin: auto;

	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

label {
	font-size: 20px;
}

input {
	background-color: #828282;
	border-radius: 10px;
	margin: 15px 0 15px 0;
	padding: 10px;
	height: 40px;
	color: #ffffff;
}

textarea {
	background-color: #828282;
	border-radius: 10px;
	margin: 15px 0 15px 0;
	color: #ffffff;
}

.contact button {
	width: 40%;
	height: 30px;
	background-color: #0080ff;
	border-radius: 20px;
	color: white;
}

.contact-info {
	width: 30%;
	height: 500px;
	background-color: #0080ff;
	padding: 10px;

	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


/**********************************/
/** Portfolio Page **/
.portfolio-container {
	width: 100%;
	height: auto;
	padding: 20px;
	text-align: center;
}

/** Portfolio Grid **/
.portfolio-grid {
	display: grid;
	width: 80%;
	margin: auto;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	grid-gap: 1rem;
}

.portfolio-grid + .portfolio-grid {
	margin-top: 1rem;
}

span {
	border-radius: 10px;
}

@keyframes grow {
	0% {
		transform: scale(1.0);
	}

	100% {
		transform: scale(1.1);
	}
}


span:hover {
	animation: grow;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	filter: drop-shadow(0 0 20px #1f1f1f);
}

span img {
	object-fit: cover;
	width: 100%;
	height: 250px;
}

span video {
	object-fit: cover;
	width: 100%;
	height: 250px;
}


/************************************/
/** Services Page Styles **/

#creative-process {
	flex-direction: column;
	text-align: center;
}

#creative-process img {
	width: 70%;
	margin: auto;
	filter: drop-shadow(0 0 5px #1f1f1f);
}

.service {
	margin-top: 20px;
	width: 100%;
	height: 300px;
	border: solid 2px white;
}

.package-container {
	max-width: 80%;
	margin: auto;
	height: auto;
	padding: 20px;
	color: #ffffff;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.package-item {
	width: 250px;
	max-height: 500px;
	border: solid 3px #0080ff;
	border-radius: 20px;
	text-align: center;
	padding-bottom: 10px;
	flex-shrink: 1;
	flex-grow: 1;
	flex-basis: 30%;
}

.package-item:hover {
	background-color: #2e2e2e;
}

#shop {
	max-width: 300px;
	height: auto;
	border-radius: 20px;
	overflow: hidden;
	background-color: #303030;
	border: none;
}

.package-item img, video {
	width: 100%;
	height: auto;
}

.package-disc {
	width: 100%;
	height: auto;
	text-align: left;
	padding: 0 25px 0 25px;
	line-height: 20px;
}

.learnmore {
	width: 80%;
	margin: auto;
	height: auto;
	background-color: #0080ff;
	border-radius: 70px;

	display: flex;
	justify-content: center;
	text-align: center;
}

.learnmore:hover {
	background-color: #4ea6fc;
}

/************************************/
/** Blog Page Styles **/
.blog-hero {
	width: 100%;
	height: auto;

	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
}

.blog-hero iframe {
	width: 50%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	margin-bottom: 30px;
}

.company-news {
	width: 100%;
	height: auto;
	padding: 30px;
	margin: auto;

	display: flex;
	justify-content: space-around;
}

.article {
	max-width: 400px;
	max-height: 600px;
	border-radius: 20px;
	overflow: hidden;
	background-color: #1f1f1f;
	filter: drop-shadow(0 0 5px #1f1f1f);
}


.article-img {
	max-width: 100%;
	max-height: 100%;
}

.article-img img {
	width: 100%;
	height: 100%;
	top: 0;
}

.article-desc {
	width: 100%;
	height: auto;
	border-radius: 10px 10px 0 0;
	padding: 15px 15px 0 15px;
}

.article-desc h4 {
	margin: 0px;
	padding: 0px;
	color: #4ea6fc;
}

.latest-socials {
	width: 100%;
	height: auto;

	display: flex;
	justify-content: space-around;
}

.latest-socials iframe {
	background-color: #ffffff;
	border-radius: 5px;
	filter: drop-shadow(0 0 5px #3d3d3d);
	transform: scale(0.8);
}

/************************************/
/** About Page Styles **/
#about {
	width: 100%;
}

.team {
	width: 80%;
	height: auto;
	margin: auto;
	text-align: center;

	display: flex;
	justify-content: space-around;
	align-items: flex-start;
}

.value-item {
	width: 300px;
	height: 300px;
	border: solid 2px #0080ff;
	border-radius: 20px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.value-item h1 {
	color: #4ea6fc;
}


/** Footer Styles **/
footer {
	padding: 10px;
	background-color: #003b73;
	color: #ffffff;
	text-align: center;

	display: flex;
	justify-content: space-between;
}


@media only screen and (max-width: 1200px) {

.background-grey {
	margin-bottom: 20px;
}

/** Special class only for indenting **/
.indent {
	margin: auto;
	text-align: center;
}

/** Mobile Nav/Hamburger Menu **/
.nav {
	width: 50%;
	justify-content: center;
	float: left;
}

.mobile-nav {
	display: block;
	margin: auto;
	color: white;
	text-decoration: none;
}

.nav-pages ul {
	display: none; 
	flex-direction: column;
	width: 100%;
	background-color: #474747;
	position: absolute;
	border-radius: 20px;
	gap: 20px;
	padding: 5px;
}

.nav-pages ul.open {
	display: flex;
}

/** nav-socials **/
.nav-socials {
	width: 30%;
	height: 100%;
}

.hero-banner {
	height: 200px;
}

/** Hero Banner **/
.hero-copy img {
	margin: auto;
}

/** Brand Overview **/
.brand-overview {
	width: 100%;
	flex-wrap: wrap;
	flex-direction: column;
}

.copy {
	width: 90%;
	margin: auto;
	padding: 0px;
}

.span-img {
	width: 90%;
	margin: auto;
}

.testimonials {
	width: 100%;
	height: auto;
	flex-direction: column;
}

.review {
	width: 90%;
	margin: 10px;
}

/** Contact Section **/
.contact {
	flex-direction: column;
}

form {
	width: 80%;
}

.contact-info {
	height: 300px;
	margin-top: 15px;
	width: 100%;
}

#creative-process img {
	width: 95%;
}

#shop-banner-img {
	height: 150px;
}

.blog-hero {
	width: 90%;
	margin: auto;
	text-align: center;
}

.blog-hero iframe {
	width: 80%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.company-news {
	flex-direction: column;
}

.article {
	width: 100%;
	margin: 10px 0 10px 0;
}

.team {
	width: 100%;
	flex-direction: column;
}

.value-item {
	margin: auto;
	margin-bottom: 10px;
}

.latest-socials {
	flex-direction: column;
	width: 100%;
	margin: auto;
	justify-content: center;
	align-items: center;
}

.latest-socials iframe {
	transform: scale(0.7);
}

.package-item {
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: 100%;
}

footer {
	padding: 5px;
	flex-direction: column;
}

}