/* ================= */
/* DEBUG CLASSES */
.w50 {
	width: 50%;
	height: 5em;
	background-color: darkred;
	position: fixed;
	top: 20em;
	left: 0;
	right: 0;
}

/* ================= */

h1,
h2,
h3,
h4,
h5 {
	color: var(--cream);
	text-transform: uppercase;
}

h1 {}

h2 {
	/* font-size: 6em; */
	font-size: clamp(3em, 7vw, 6em);
	/* border: 3px solid green; */
}

h3 {
	font-size: 5em;
	/* font-size: clamp(2em, 6vw, 5em); */
	/* font-size: clamp(2.2em, 5.5vw, 5em); */
	font-size: clamp(2.1em, 5.5vw, 5em);
}

h4 {
	font-size: 1.4em;
}

p,
a {
	color: var(--cream);
	font-size: 1.2em;
}

.slogan {
	font-size: clamp(1.1em, 0.9em + 0.5vw, 1.2em);
}

/* .slogan {
	width: 95%;
}

@media (min-width:480) {
	#studio .slogan {
		width: 85%;
	}
} */

.main-logo img {
	height: 23em;
}

.logo-container {
	/* background: rebeccapurple; */
	height: 100svh;
	width: 100svw;
	width: -moz-available;
	/* WebKit-based browsers will ignore this. */
	width: -webkit-fill-available;
	/* Mozilla-based browsers will ignore this. */
	width: fill-available;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-logo {
	display: flex;
	flex-direction: column;
	width: fit-content;
	position: relative;
	font-size: min(1em, 0.3em + 0.7vw);
	cursor: pointer;
}

.logo-container:first-of-type {
	position: relative;
	top: 0;
	left: 0;
}

.logo-container:last-of-type {
	position: absolute;
	top: 0;
	/* it moves a few pixels to the right if left: 0 is active, at least previous to using fill available at logo-container*/
	/* left: 0; */
	background-color: var(--cream);
}

.studio-title {
	font-size: 3em;
	font-weight: 300;
	letter-spacing: 1em;
	/* text-indent: 1em; */
	text-align: right;
	color: var(--blue);
	/* background-color: rebeccapurple; */
}

header .studio-title {
	/* margin-top: .5em; */
	margin-right: -.5em;
}

#services .studio-title {
	font-size: clamp(2.2em, 7vw, 4.5em);
	/* font-size: clamp(2.2em, 7vw, 6em); */
	font-weight: 200;
	letter-spacing: .4em;
	text-indent: .4em;
	/* margin-right: -1.07em; */
	/* margin-right: -0.25em; */
	/* font-weight: 200; */
	font-weight: 400;
	text-align: center;
}

@media (min-width:600px) {

	#services .studio-title {
		font-weight: 300;
	}
}

@media (min-width:800px) {

	#services .studio-title {
		/* font-weight: 300; */
		/* font-weight: 200; */
	}
}

a {
	text-decoration: none;
}

#services .content {
	/* width: 67em; */
	/* width: min(90%, 36em + 30vw); */
	width: min(90%, 20em + 44vw);
	margin: auto 0;
	/* border: 3px solid green; */
	padding: 4em 0;
}

#services a:nth-of-type(2),
#services a:nth-of-type(3) {
	/* margin-top: 1em; */
	margin-top: max(3em - 6vw, -2.2em);
}

#services a:nth-of-type(2),
#services a:nth-of-type(4) {
	align-self: end;
}

#services a:nth-of-type(4) {
	margin-top: max(3em - 4vw, 0em);
}

.contact-form {
	width: 70%;
	width: 90%;
	min-height: 32em;
	background-color: var(--black);
	/* box-shadow: inset 0 0 0 1em var(--cream); */
	box-shadow: inset 0 0 0 clamp(0.5em, 2vw, 1em) var(--cream);
	padding: 2em;
}

.google-map {
	width: 90%;
	height: 25em;
	margin-bottom: 4em;
}

@media (min-width:1260px) {
	.google-map {
		width: 70%;
	}
}

.google-map iframe {
	height: 100%;
	width: 100%;
}

#contact>h4 {
	padding: 2em 0;
	max-width: 90%;
}

.contact-form {
	display: flex;
	flex-direction: column;
}

.contact-info {
	min-width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-bottom: 1em;
}


.contact-info img {
	/* height: 13em; */
	height: clamp(8em, 15vw, 13em);

}

.contact-icons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 2em 1em;
	font-size: clamp(0.6em, 1.5vw, 1em);
	padding: 1em 0;
}

@media (min-width:618px) {
	.contact-icons {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width:1303px) {
	.contact-icons {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width:2290px) {
	.contact-icons {
		grid-template-columns: repeat(4, 1fr);
	}
}

.contact-icons svg {
	fill: var(--cream);
	height: 2em;
}

.contact-icons a {
	font-size: 1.2em;
	min-width: max-content;
}

.contact-icons .item:hover a {
	color: var(--blue);
}

.contact-icons .item:hover svg {
	/* fill: var(--blue); */
}

.contact-icons .item {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.contact-form .fields {
	min-width: 60%;
	/* background: rebeccapurple; */
}

.contact-form p {
	font-weight: 600;
}

.contact-form form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 1em 3em;
	padding: 1em 0;
	margin-top: 1em;
}

@media (min-width:1303px) {
	.contact-form {
		flex-direction: row;
		width: min(80%, 110em);
	}

	.contact-info {
		padding-right: 2em;
		margin-bottom: 0;
	}

	.contact-icons {
		padding: 0;
	}

	.contact-form form {
		margin-top: 0;
	}
}

#studio .container {
	height: 100%;
	width: 90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2em;
	margin: 3em 0;
	padding: 2em 0;
}

#studio .container>div {
	height: 30em !important;
	display: flex;
	align-items: center;
	width: 100%;
}

#studio .photocard {
	box-shadow: inset 1.45em 1.5em 0px .25em var(--cream), inset -1.45em -1.5em 0px .25em var(--cream);
}

#studio .photocard p {
	font-size: 2.2em;
	font-weight: 900;
	text-transform: uppercase;
	padding: 2em;
}

#studio .items {
	background-color: var(--cream);
	justify-content: center;
	padding: 2em;
}

#studio .items ul {
	list-style: none;
	text-align: start;
	gap: 2em;
	display: flex;
	flex-direction: column;
	padding: 0;
}

#studio .items ul li {
	display: flex;
	align-items: center;
}

#studio .items ul img {
	height: clamp(2em, 5.2vw, 4em);
}

#studio .items span {
	padding-left: 1em;
	font-size: clamp(1.2rem, 0.3em + 3vw, 2rem);
	font-weight: 800;
}

@media (min-width:550px) {
	#studio .container {
		width: min(85%);
	}
}

@media (min-width:730px) {
	#studio .container {
		width: min(80%);
	}
}

@media (min-width:900px) {
	#studio .container {
		width: min(75%);
	}
}

@media (min-width:1400px) {
	#studio .container {
		width: 75%;
		flex-direction: row;
	}

	#studio .photocard {
		flex: .8;

	}

	#studio .items {
		flex: 1;
	}

}

#clients .display {
	display: flex;
	flex-direction: column;
	gap: 4em;
	width: min(40em + 35vw, 100%);
	/* width: min(40em + 35vw, 90%); */
	max-width: 123em;
	margin: auto 0;
	padding: 4em 0;
	/* background-color: rebeccapurple; */
}

.display .client {
	--size: clamp(6.5em, 5em + 5vw, 9em);
	/* --size: 9em; */
	/* --size: 6.5em; */
	height: var(--size);
	width: var(--size);
	background-color: var(--cream);
	border-radius: 15em;
	text-transform: uppercase;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.display .client img,
.display img.client {
	object-fit: contain;
}

/* general styles */

:root {
	--clr-neutral-100: hsl(0, 0%, 100%);
	--clr-primary-100: hsl(205, 15%, 58%);
	--clr-primary-400: hsl(215, 25%, 27%);
	--clr-primary-800: hsl(217, 33%, 17%);
	--clr-primary-900: hsl(218, 33%, 9%);
}

.tag-list {
	margin: 0;
	padding-inline: 0;
	list-style: none;
}

/* .tag-list li { */
.tag-list>* {
	padding: 1rem;
	background: var(--clr-primary-400);
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 1rem -0.25rem black;
}

/* for testing purposed to ensure the animation lined up correctly */
/* .test {
  background: red !important;
}

.test:first-of-type {
	background: greenyellow !important;
} */


.img-xflip img {
	transform: scaleX(-1);
}

#main-header,
section {
	margin-bottom: 5em;
}


#team .galery-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 2em;
	row-gap: 4em;
	margin: auto 0;
	padding: 4em 0;
	/* border: 3px solid green; */
}

@media (min-width:990px) {
	#team .galery-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 2em;
		row-gap: 4em;
		margin: auto 0;
		padding: 4em 0;
		/* border: 3px solid green; */
	}
}

#team .galery-row div img {
	width: 93%;
	/* width: 100%; */
	height: 21em;
	/* height: 24em; */
	object-fit: cover;
	filter: grayscale(100%);
	z-index: 1;
	position: relative;
	bottom: 1.3em;
	/* bottom: 3.3em; */
}

#team .galery-row div .img-hover {
	/* display: none; */
	opacity: 0;
	position: absolute;
	filter: grayscale(0);
	bottom: 0.65em;
	/* bottom: 1.1em; */
	z-index: 1;
	/* transition: opacity .2s, transform .2s; */
}

#team .galery-row .photocard:hover .img-hover {
	/* display: inline; */
	opacity: 1;
	bottom: .9em;
}

#team .galery-row .photocard:hover img:not(.img-hover) {
	bottom: 1.5em;
}

#team .galery-row div .text-hover {
	display: none;
	position: absolute;
	font-size: 1.2em;
	width: 90%;
	/* width: 92%; */
	/* width: 80%; */
	bottom: .9em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999 !important;
}

/* #team .galery-row .photocard .text-hover { */
#team .galery-row .photocard:hover .text-hover {
	display: block;
}

#team .text-hover * {
	color: var(--cream);
}

#team .text-hover h4 {
	font-size: 2.2em;
	font-weight: 900;
	text-transform: capitalize;
	line-height: 1;
	margin-bottom: 0.3em;
}

#team .text-hover p {
	font-size: 1.3em;
	font-weight: 600;
}


@media (min-width:750px) {
	#team .text-hover * {
		color: var(--black);
	}

	#team .text-hover p {
		font-size: .8em;
		font-weight: 300;
	}
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	/* font-size: 18px; */
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	/* display: block; */
	/* width: 100%; */
	/* height: 100%; */
	/* object-fit: cover; */
}

.swiper {
	margin-left: auto;
	margin-right: auto;
}

/* .swiper-free-mode>.swiper-wrapper {
	transition-timing-function: linear !important;
} */