/* Margin changes the actual layout.*/
/* Padding adds space inside the element. */

@font-face {
    font-family: "BeauRivage";
    src: url("Fonts/BeauRivage-Regular.woff2") format('woff2');
	font-display: swap;
}

@font-face{
    font-family: "MuseoModerno";
    src: url("Fonts/MuseoModerno-Variable.woff2") format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
}


:root{
	--white-bg-color: #D9D9D9;
	--black-bg-color: #0a0a0a;
	--museo-moderno : "MuseoModerno";
	--beau-rivage : "BeauRivage";
	--white : #FFFFFF;

	--font-weight-big: 170;
	--font-size-big: 9vw;
	--font-size-big-899: 6rem;
	--font-size-big-699: 12vw;
	--font-size-big-599: 12vw;
	--font-size-big-499: 13vw;
	--font-size-big-399: 14vw;
	--font-size-big-299: 15.6vw;

	--font-color-big: #FFFFFF;
	--letter-spacing-big: .8px;
	--letter-spacing-big-hover: 8px;
	--text-shadow-big:   
					  8px 4px 30px black,      /* original: right + down */
					  -8px 4px 30px black,     /* left + down */
					  8px -4px 30px black,     /* right + up */
					  -8px -4px 30px black;    /* left + up (opposite of original) */
	--text-shadow-big-whitebg:
						2px 2px 20px rgba(0, 0, 0, 0.3),      /* original: right + down */
					  	-2px 2px 20px rgba(0, 0, 0, 0.3),     /* left + down */
					  	2px -2px 20px rgba(0, 0, 0, 0.3),     /* right + up */
					  	-2px -2px 20px rgba(0, 0, 0, 0.3);    /* left + up (opposite of original) */

	--font-size-hairstudio:1.8vw;
	--letter-spacing-hairstudio:2vw;

	--font-size-hairstudio-699: 3.2vw;
	--letter-spacing-hairstudio-699: 3.5vw;

	--font-size-small-beau-rivage: 3.2rem;
	--font-weight-small-beau-rivage:150;
	--letter-spacing-small-beau-rivage:6px;
	--letter-spacing-small-beau-rivage-hover:8px;
	
	--text-shadow-small:
						2px 1px 15px black,      /* original: right + down */
					   -2px 1px 15px black,     /* left + down */
					    2px -1px 15px black,     /* right + up */
					   -2px -1px 15px black;    /* left + up (opposite of original) */

	--text-shadow-small-quote-haircuts:
						1px 1px 10px rgba(0, 0, 0, 0.35),
					   -1px 1px 10px rgba(0, 0, 0, 0.35),
					    1px -1px 10px rgba(0, 0, 0, 0.35),
					   -1px -1px 10px rgba(0, 0, 0, 0.35);
					
	--text-shadow-small-image-haircuts:
						1px 1px 10px rgba(0, 0, 0, 0.25),
					   -1px 1px 10px rgba(0, 0, 0, 0.25),
					    1px -1px 10px rgba(0, 0, 0, 0.25),
					   -1px -1px 10px rgba(0, 0, 0, 0.25);		

	--showcase-stroke-color: #9B9C9B;
	--showcase-vertical-padding: 2rem;
}

@keyframes fade-out {
	0%   { opacity: 0; }
	40%  { opacity: 0.4; }
	70%  { opacity: 0.8; }
	100% { opacity: 1; }
}

@keyframes reveal-left {
    from {
		opacity: 0; 
		clip-path: inset(0 0 0 100%); }
    to   { 
		opacity: 1;
		clip-path: inset(0 0 0 0); }
}

@keyframes reveal-right {
    from {
		opacity: 0; 
		clip-path: inset(0 100% 0 0); }
    to   { 
		opacity: 1;
		clip-path: inset(0 0 0 0); }
}

@keyframes reveal-up {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes reveal-down {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes fade-down {
	from { opacity: 0; transform: translateY(-150px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-left {
	from { opacity: 0; transform: translateX(-150px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-right {
	from { opacity: 0; transform: translateX(150px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-up {
	from { opacity: 0; transform: translateY(150px); }
	to   { opacity: 1; transform: translateY(0); }
}

[data-animate] {
	opacity: 0;
}

[data-animate].in-view {
	opacity: 1;
	animation-fill-mode: forwards;
	animation-name: var(--animate-name);
	animation-duration: var(--animate-duration, 800ms);
	animation-delay: var(--animate-delay, 0ms);
	animation-timing-function: ease;
}

html{
	overflow-x: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

h1 , h2, h3, h4, h5 , h6, p{
	margin: 0;
	padding: 0;
}

.page{
    margin: 0;
    padding: 0;
    background-color:var(--black-bg-color);
}

/* -------- ARXIKH -------- */

.arxiki-container{
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 0;
}

.video-container{
	margin: 0;
	padding: 0;
	display: flex;
	height: 100dvh;
	width: 100%;
}

.video-container > div{
	margin: 0;
	padding: 0;
	filter: brightness(.4) contrast(1.1)
}

.video-container > div{
	flex: 1;
}

.video-left {animation: reveal-down 1s ease-in;}
.video-middle {animation: reveal-up 1s ease-in;}
.video-right {animation: reveal-down 1s ease-in;}

.hero-video{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.logo-container{
	margin:0;
	padding:0;
	display: flex;
	flex-direction: column;
	position: absolute;  /*removes the element from normal flow entirely It no longer counts as a flex item */
	z-index: 1;
	align-items: center;
	top:1vh;
	gap: .8rem;
}


.logo-container > * {
	display: flex;
	margin:0;
	padding:0;
	line-height: 1;
}

.logo-container:hover{
	cursor: default;

	.logo-papounidis{
		letter-spacing: var(--letter-spacing-big-hover);
	}

	.logo-hairstudio{
		letter-spacing: calc(var(--letter-spacing-hairstudio) + var(--letter-spacing-big-hover));
	}
}

.logo-papounidis{
	transition: all .4s ease;
	font-family: var(--museo-moderno);
	font-weight: var(--font-weight-big);
	font-size: var(--font-size-big);
	color: var(--font-color-big);
	letter-spacing: var(--letter-spacing-big);
	text-shadow: var(--text-shadow-big);
}

.logo-line{
	transition: all .4s ease;
	display: block;
	border: 1px solid;
	width: 98%;
	color:#FFFFFF;
	text-shadow: var(--text-shadow-small)
}

.logo-hairstudio{
	transition: all .4s ease;
	font-family: var(--museo-moderno);
	font-weight: var(--font-weight-big);
	font-size: var(--font-size-hairstudio);
	letter-spacing: var(--letter-spacing-hairstudio);
	color: var(--white);
	text-shadow: var(--text-shadow-small);
	margin-right: calc(-1 * var(--letter-spacing-hairstudio)); 
}

.navbar-container{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 5vh;
	gap: 1rem;
}

.navbar-container.scroll-hidden {
	opacity: 0;
	pointer-events: none;
	transition: all .1s ease;
}

.navbar-content-phone{
	display: none;
	transition: all .4s ease;
}

.navbar-content-right{
	display: none;
}

.navbar-options{
	transition: all .6s ease;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	gap: 38px;
}

.navbar-options > a {
	transition: all .6s ease;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid white;
	border-radius: 40px;
	width: 16rem;
	height: 4rem;
	font-size: 1.8rem;
	font-family: var(--museo-moderno);
	font-weight: 200;
	letter-spacing: 2px;
	color: var(--white);
	text-decoration: none;
}

.navbar-options > a:hover{
	transition: all .6s ease;
	cursor: pointer;
	background-color: white;
	color: black;
	letter-spacing: 8px;
}

.navbar-content-right.active {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid white;
	border-radius: 60px;
	padding: .4rem .4rem;
}


.navbar-content-left{
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid white;
	border-radius: 60px;
	padding: .4rem .4rem;
}

.menu-button{
	transition: all .6s ease;
	border: 1px solid white;
	border-radius: 40px;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	width: 16rem;
	height: 4rem;
	gap: 14px;
}

.menu-button:hover{

	transition: all .6s ease;
	cursor: pointer;
	/* width: 17rem;
	gap: 20px; */
	background-color: white;

	.menu-text-span{
		letter-spacing: 10px;
		color: black;
	}

	.line{
		width: 36px;
		background-color: black;
	}
}

.menu-button.active{
	transition: all .6s ease;
	border-radius: 100%;
	width: 4rem;
	height: 4rem;
}

.menu-button.active:hover{
	transition: all .6s ease;
	border-radius: 100%;
	width: 4rem;
	height: 4rem;

	.line{
		width: 40px;
	}
}

.menu-lines{
	transition: all .4s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	height: 100%;
}


.menu-lines.active{
	display: flex;
}

.menu-lines.active .line:nth-child(2){
	opacity: 0;
}

.menu-lines.active .line:nth-child(1){
	transform: translateY(8px) rotate(45deg);
}

.menu-lines.active .line:nth-child(3){
	transform: translateY(-8px) rotate(-45deg);
}

.line{
	transition: all .4s ease;
	display: block;;
	width: 32px;
	height: 2px;
	background-color: var(--white);
}

.menu-text-span{
	transition: all .4s ease;
	font-family: var(--museo-moderno);
	font-size: 1.8rem;
	color: var(--white);
	font-weight: 200;
	letter-spacing: 2px;
}

.menu-text.active{
	display: none;
}

.menu-text.active .menu-text-span{
	display: none;
}

@media(max-width:1299px){
	.navbar-options > a {
		width: 10rem;
		font-size: 1.6rem;
	}

	.menu-button{
		width: 15rem; /* 16rem */
		height: 3.6rem; /* 4rem */
	}

	.menu-text-span{
		font-size: 2rem;
	}
}

@media(max-width:899px) and (min-width:700px){
	/* .logo-papounidis{
		font-size: var(--font-size-big-899);
	}

	.logo-hairstudio{
		font-size: 1.4rem;
	} */

	.menu-button{
		width: 12rem; /* 16rem */
		height: 3.2rem; /* 4rem */
	}

	.menu-text-span{
		font-size: 1.8rem;
	}

	.navbar-options > a {
		width: 7rem;
		font-size: 1.2rem;
	}

	.logo-container{
		gap: .6rem;
	}
}

@media(max-width:699px){
	.navbar-content-right {
		display: none;
	}

	.navbar-container{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.navbar-content-left{
		order: 2;
		display: flex;
		border: 1px solid white;
		border-radius: 60px;
		padding: .3rem;
	}

	.menu-button{
		width: 5rem; /* 16rem */
		height: 3rem; /* 4rem */
	}

	.menu-button.active{
		transition: all .6s ease;
		border-radius: 60px;
		width: 5rem;
		height: 3rem;
	}

	.menu-button.active:hover{
		transition: all .6s ease;
		border-radius: 60px;
		width: 5rem;
		height: 3rem;

		.line{
			width: 40px;
		}
	}


	.menu-button .menu-text{
		display: none;
	}

	.menu-lines.active{
		display: none;
	}

	.navbar-content-right{
		display: none;
	}

	.navbar-options{
		transition: all .6s ease;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: transparent;
		gap: 10px;
	}

	.navbar-options > a {
		transition: all .6s ease;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid white;
		border-radius: 40px;
		width: 22rem;
		height: 4rem;
		font-family: var(--museo-moderno);
		font-size: 1.8rem;
		font-weight: 300;
		letter-spacing: 2px;
		color: var(--white);
		text-decoration: none;
	}

	.navbar-options > a:hover{
		transition: all .6s ease;
		cursor: pointer;
		background-color: white;
		color: black;
		letter-spacing: 8px;
	}

	.navbar-content-right.active {
		position: absolute;
		display: flex;
		bottom: 5.5rem;
		justify-content: center;
		align-items: center;
		border: 1px solid white;
		border-radius: 40px;
		padding: .4rem .4rem;
	}

	.menu-lines.active{
		display: flex;
	}

	.menu-lines.active .line:nth-child(2){
		opacity: 0;
	}

	.menu-lines.active .line:nth-child(1){
		transform: translateY(8px) rotate(45deg);
	}

	.menu-lines.active .line:nth-child(3){
		transform: translateY(-8px) rotate(-45deg);
	}

	.navbar-content-phone{
		transition: all .4s ease;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid white;
		border-radius: 60px;
		padding: .3rem;
	}

	.call-option{
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .4s ease;
		font-family: var(--museo-moderno);
		color: var(--white);
		font-size: 1.8rem;
		font-weight: 300;
		letter-spacing: 2px;
		border: 1px solid white;
		border-radius: 40px;
		width: 17rem;
		height: 3rem;
		text-decoration: none;
	}

	.call-option:hover{
		transition: all .4s ease;
		background-color: var(--white);
		color: black;
		letter-spacing: 6px;
	}

	.video-middle {animation: reveal-down 1s ease-in;}

	.video-left{
		display: none;
	}

	.video-right{
		display: none;
	}

	.logo-papounidis{
		font-size: var(--font-size-big-699);
	}

	.logo-hairstudio{
		font-size: var(--font-size-hairstudio-699);
		letter-spacing: var(--letter-spacing-hairstudio-699);
	}

	.logo-container{
		gap: 1.5vw;
	}

}


@media (max-width:429px) and (min-width:270px){
	
	.call-option{
		transition: all .4s ease;
		font-family: var(--museo-moderno);
		font-size: 1.5rem;
		font-weight: 300;
		letter-spacing: 2px;
		border-radius: 40px;
		width: 13rem;
		height: 2.6rem;
	}

	.navbar-content-left{
		order: 2;
		display: flex;
		border: 1px solid white;
		border-radius: 60px;
		padding: .3rem;
	}

	.navbar-options > a {
		transition: all .6s ease;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid white;
		border-radius: 40px;
		width: 19rem;
		height: 3.8rem;
		font-family: var(--museo-moderno);
		font-size: 1.5rem;
		font-weight: 300;
		letter-spacing: 2px;
		color: var(--white);
		text-decoration: none;
	}

	.menu-button{
		width: 3.6rem; /* 16rem */
		height: 2.6rem; /* 4rem */
	}

	.menu-button.active{
		transition: all .6s ease;
		border-radius: 60px;
		width: 3.6rem;
		height: 2.6rem;
	}

	.menu-button.active:hover{
		transition: all .6s ease;
		border-radius: 60px;
		width: 3.6rem;
		height: 2.6rem;

		.line{
			width: 35px;
		}
	}

	.line{
		width: 25px;
	}

	.logo-container{
		gap: .35rem;
	}

}

@media(max-width:329px){

	.call-option{
		transition: all .4s ease;
		font-family: var(--museo-moderno);
		font-size: 1.3rem;
		font-weight: 300;
		letter-spacing: 1px;
		border-radius: 40px;
		width: 10rem;
		height: 2.5rem;
	}

	.logo-container{
		gap: .2rem;
	}

	
	.navbar-content-left{
		order: 2;
		display: flex;
		border: 1px solid white;
		border-radius: 60px;
		padding: .3rem;
	}

	.navbar-options > a {
		transition: all .6s ease;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid white;
		border-radius: 40px;
		width: 14rem;
		height: 3.8rem;
		font-family: var(--museo-moderno);
		font-size: 1.3rem;
		font-weight: 300;
		letter-spacing: 1px;
		color: var(--white);
		text-decoration: none;
	}

	.menu-button{
		width: 2.5rem; /* 16rem */
		height: 2.5rem; /* 4rem */
	}

	.menu-button.active{
		transition: all .6s ease;
		border-radius: 60px;
		width: 2.5rem;
		height: 2.5rem;
	}

	.menu-button.active:hover{
		transition: all .6s ease;
		border-radius: 60px;
		width: 2.5rem;
		height: 2.5rem;

		.line{
			width: 33px;
		}
	}

	.menu-lines{
		gap: .35rem;
	}

	.line{
		width: 19px;
	}
}

/* -------- END ARXIKH -------- */

/* -------- SHOWCASE -------- */

.showcase-container{
	position: relative;
	top: 0;
	background-color: var(--black-bg-color);
	margin: 0;
	padding: 0 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 1;
}


.showcase-container.active .showcase-photos {
	transition: all 1s ease;
	grid-template-rows: repeat(6, 1fr);
}

.showcase-container.active #div7,
.showcase-container.active #div8,
.showcase-container.active #div9,
.showcase-container.active #div10,
.showcase-container.active #div11,
.showcase-container.active #div12 {
	transition: all 1s ease;
	height: 100%;
	visibility: visible;
	opacity: 1;
}

.showcase-title{
	margin: 0;
	padding: var(--showcase-vertical-padding) 0;
	display: flex;
	justify-content: left;
}

.showcase-title-h1{
	transition: all .4s ease;
	margin: 0;
	padding: 0;
	font-family: var(--museo-moderno);
	font-size: var(--font-size-big);
	font-weight: var(--font-weight-big);
	letter-spacing: var(--letter-spacing-big);
	color: var(--white);
	text-shadow: var(--text-shadow-big);
}

.showcase-title-h1:hover{
	cursor: default;
	transition: all .4s ease;
	letter-spacing: var(--letter-spacing-big-hover);
}

.showcase-photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.showcase-photos .showcase-div {
	transition: all .4s ease;
	box-sizing: border-box;
	transition: all .4s ease;
    /* border: solid 1px;
	border-color: var(--showcase-stroke-color); */
    border-radius: 0;
    overflow: hidden;
	/* filter: grayscale(1); */
	box-shadow: 0 0 60px 7px black;
}

.showcase-photos .showcase-div:hover{
	transition: all .8s ease;
	filter: grayscale(0);
}

.showcase-photos .showcase-div .showcase-div-img {
	transition: all .4s ease;
	display: block;
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#div1 { grid-area: 1 / 1 / 2 / 2; }
#div2 { grid-area: 1 / 2 / 2 / 3; }
#div3 { grid-area: 1 / 3 / 2 / 4; }
#div4 { grid-area: 2 / 1 / 3 / 2; }
#div5 { grid-area: 2 / 2 / 3 / 3; }
#div6 { grid-area: 2 / 3 / 3 / 4; }
#div7 { grid-area: 3 / 1 / 4 / 2; }
#div8 { grid-area: 3 / 2 / 4 / 3; }
#div9 { grid-area: 3 / 3 / 4 / 4; }

.showcase-footer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 0;
}

.showcase-quote{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-self: center;
}

.showcase-quote-h4{
	margin: 0;
	padding: 0;
	transition: all .4s ease;
	font-family: var(--museo-moderno);
	font-size: 2rem;
	font-style: italic;
	font-weight: 150;
	letter-spacing: 4px;
	color: var(--white);
	text-shadow: var(--text-shadow-big);
}

.showcase-quote-h4:hover{
	cursor: default;
	transition: all .4s ease;
	letter-spacing: 10px;
}

@media(max-width:1299px){

	.showcase-photos {
		grid-column-gap: 20px;
		grid-row-gap: 20px;
	}

}

@media(max-width:899px){

	.showcase-container{
		align-items: center;
	}

}

@media(max-width:899px) and (min-width:700px){

	.showcase-container{
		padding: 0 1.8rem; /* 0 3rem */
	}

	.showcase-photos {
		grid-column-gap: 15px;
		grid-row-gap: 15px;
	}

	.showcase-footer{
		padding: 3.4rem 0;
	}

	.showcase-quote-h4{
		font-size: 2.2rem; /* 2.6rem */
	}
}

@media (max-width:699px){

	#div9, #div10, #div11, #div12{
		display: none;
	}

	.showcase-title-h1{
		font-size: var(--font-size-big);
	}

	.showcase-photos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap:15px;
		grid-row-gap:15px;
	}

	#div1 { grid-area: 1 / 1 / 2 / 2; }
	#div2 { grid-area: 1 / 2 / 2 / 3; }
	#div3 { grid-area: 2 / 1 / 3 / 2; }
	#div4 { grid-area: 2 / 2 / 3 / 3; }
	#div5 { grid-area: 3 / 1 / 4 / 2; }
	#div6 { grid-area: 3 / 2 / 4 / 3; }
	#div7 { grid-area: 4 / 1 / 5 / 2; }
	#div8 { grid-area: 4 / 2 / 5 / 3; }

}

@media(max-width:699px) and (min-width:430px){

	.showcase-container{
		padding: 0 1.2rem; /* 0 3rem */
	}

	.showcase-title{
		padding: 1.6rem 0;
	}

	.showcase-photos {
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}

	.showcase-container.active .showcase-footer{
		padding: 3rem 0;
		gap: 20px;
	}

	.showcase-footer{
		padding: 3rem 0;
	}

	.showcase-quote-h4{
		font-size: 1.6rem; /* 2.6rem */
		letter-spacing: 6px;
	}
}

@media (max-width:429px) and (min-width:270px){

	.showcase-container{
		padding: 0 1rem
	}

	.showcase-title{
		padding: 1.4rem 0;
	}

	.showcase-footer{
		padding: 2.8rem 0;
	}

	.showcase-quote-h4{
		font-size: 1.2rem; /* 1.6rem */
		letter-spacing: 3px;
	}

}

@media(max-width:269px){

	.showcase-container{
		padding: 0 .8rem
	}

	.showcase-title{
		padding: 1.4rem 0;
	}

	.showcase-photos {
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}

	.showcase-footer{
		padding: 2.4rem 0;
	}

	.showcase-quote-h4{
		font-size: .8rem; /* 1rem */
		letter-spacing: 3px;
	}


}

/* -------- END SHOWCASE -------- */

/* -------- ABOUT -------- */

.about-container{
	display: flex;
	flex: 1;
	padding: 4rem 2rem;
	gap: 5rem;
}

.left-about{
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:1rem;
}

.right-about{
	display: flex;
	flex: 1;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
}

.info-about{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.title-about{
	align-self: flex-start;
}

.title-about-h2{
	transition: all .4s ease;
	margin: 0;
	padding: 0;
	font-family: var(--museo-moderno);
	font-size: var(--font-size-big);
	font-weight: var(--font-weight-big);
	letter-spacing: var(--letter-spacing-big);
	color: var(--white);
}

.info-about{
	align-self: start;
	gap: 2rem;
	padding-left: .4rem;
}

.info-p > p{
	font-family: var(--museo-moderno);
	font-size: 1.8rem;
	line-height: 48px;
	font-weight: 150;
	letter-spacing: 2px;
	word-spacing: 10%;
	color: var(--white);
}

.image-about{
	transition: all .4s ease;
	box-sizing: border-box;
	transition: all .4s ease;
    border-radius: 0;
    overflow: hidden;
	height: 90%;
	background-color: transparent;
}

.image-about > img{
	transition: all .4s ease;
	display: block;
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.image-about:nth-child(1){
	margin-top: 5.5rem;
}


@media (max-width:699px){

	.title-about-h2{
		font-size: var(--font-size-big-699);
	}

	.right-about{
		display: none;
	}

	.title-about{
		align-self: center;
	}

	.info-about{
		align-self: center;
		/* text-align: center; */
		gap: 1.4rem;
	}

	.info-p > p{
		font-family: var(--museo-moderno);
		font-size: 1.4rem;
		line-height: 42px;
		font-weight: 150;
		letter-spacing: 2px;
		word-spacing: 10%;
	}
}

@media (max-width:599px){

	.title-about-h2{
		font-size: var(--font-size-big-599);
	}

	.info-about{
		align-self: center;
		/* text-align: center; */
		gap: 1.4rem;
	}

	.info-p > p{
		font-family: var(--museo-moderno);
		font-size: 1.2rem;
		line-height: 36px;
		font-weight: 150;
		letter-spacing: 2px;
		word-spacing: 8%;
	}
}	

@media (max-width:499px){

	.title-about-h2{
		font-size: var(--font-size-big-499);
	}

	.info-about{
		align-self: center;
		/* text-align: center; */
		gap: 1.4rem;
	}

	.info-p > p{
		font-family: var(--museo-moderno);
		font-size: 1.2rem;
		line-height: 32px;
		font-weight: 150;
		letter-spacing: 2px;
		word-spacing: 8%;
	}
}

@media (max-width:399px){

	.title-about-h2{
		font-size: var(--font-size-big-399);
	}

	.info-about{
		align-self: center;
		/* text-align: center; */
		gap: 1.4rem;
	}

	.info-p > p{
		font-family: var(--museo-moderno);
		font-size: 1.1rem;
		line-height: 28px;
		font-weight: 150;
		letter-spacing: 2px;
		word-spacing: 7%;
	}
}

@media (max-width:299px){

	.title-about-h2{
		font-size: var(--font-size-big-299);
	}

	.info-about{
		align-self: center;
		/* text-align: center; */
		gap: 1.4rem;
	}

	.info-p > p{
		font-family: var(--museo-moderno);
		font-size: 1.1rem;
		line-height: 28px;
		font-weight: 150;
		letter-spacing: 2px;
		word-spacing: 7%;
	}
}


/* -------- END ABOUT -------- */

/* -------- BARBERS -------- */

/* 700px or more */

.barbers-container{
	background-color: var(--black-bg-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4rem 2rem;
	height: auto;
	z-index: -1;
}

.barbers-images{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2vw; /* horizontal card gap */
}

.barber-card{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 3vw; /* vertical card content gap */
}

.barbers-title{
	box-sizing: border-box;
	flex-shrink: 0;
	padding: 0;
	margin: 0;
	writing-mode: sideways-lr;
	text-orientation: mixed;
	position: relative;
	left: 3vw;
}

.barbers-title-h1{
	transition: all .4s ease;
	font-family: var(--museo-moderno);
	font-size: 10vw;
	font-weight: var(--font-weight-big);
	text-shadow: var(--text-shadow-big-whitebg);
	letter-spacing: var(--letter-spacing-big);
	color:var(--white);
}

.barbers-title-h1:hover{
	cursor: default;
	transition: all .4s ease;
	letter-spacing: var(--letter-spacing-big-hover);
}

.barber-image{
	transition: all .4s ease;
	box-sizing: border-box;
	transition: all .4s ease;
    overflow: hidden;
	filter: grayscale(0);
	box-shadow: 0 0 30px 1px black;
	/* border: solid 1px;
	border-color: var(--showcase-stroke-color); */
    border-radius: 0;
}

.barber-image-img{
	transition: all .4s ease;
	display: block;
	width: 25vw;
    height: 39vw;
    object-fit: cover;
    object-position: center;
}

.barber-name-h4{
	transition: all .4s ease;
	font-family: var(--museo-moderno);
	font-size: 2.8vw;
	font-weight: var(--font-weight-big);
	text-shadow: var(--text-shadow-small);
	letter-spacing: var(--letter-spacing-big);
	color:var(--white);
}

@media 	(min-width:1150px) and (min-height:600px){
	.barbers-container{
		height: 100vh;
	}
}

@media 	(max-width:1149px){
	.barbers-container{
		height: 54vw;
	}
}

@media 	(max-width:699px){

	.barbers-container{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 6.8vw;
		height: auto;
		padding: 1rem 0;
		padding-bottom: 2rem;
	}

	.barbers-title{
		order:1;
		writing-mode: horizontal-tb;
		left: 0;
	}

	.barbers-title-h1{
		font-size: var(--font-size-big);
	}
	
	.barber-name-h4{
		font-size: 7vw;
	}

	.barber-card{
		gap: 2vw; /* vertical content gap that each card contains */
	}

	.barbers-images{
		order:2;
		display: flex;
		flex-direction: column;
		gap: 11vw;
	}

	.barber-image-img{
		width:70vw;
		height:100vw;
	}

	#barber-1-id{
		order: 3;
	}
	#barber-2-id{
		order: 2;
	}
	#barber-3-id{
		order: 1;
	}

}

@media 	(max-width:599px){

	.barbers-container{
		gap: 7vw; /* 6.8vw */
		height: auto;
		padding: 1rem 0;
		padding-bottom: 2rem;
	}


	.barbers-title-h1{
		font-size: var(--font-size-big);
	}
	
	.barber-name-h4{
		font-size: 7vw;
	}

	.barber-card{
		gap: 3vw; /* 2vw vertical content gap that each card contains */
	}

	.barbers-images{
		gap: 10vw;
	}

	.barber-image-img{
		width:65vw;
		height:90vw;
	}
}

@media 	(max-width:499px){

	.barbers-container{
		gap: 7vw; /* 6.8vw */
		height: auto;
		padding: 1rem 0;
		padding-bottom: 2rem;
	}


	.barbers-title-h1{
		font-size: var(--font-size-big);
	}
	
	.barber-name-h4{
		font-size: 8vw; /* 7vw */
	}

	.barber-card{
		gap: 4vw; /* 2vw vertical content gap that each card contains */
	}

	.barbers-images{
		gap: 16vw;
	}

	.barber-image-img{
		width:72vw;
		height:100vw;
	}
}

@media 	(max-width:399px){

	.barbers-container{
		gap: 7vw; /* 7vw */
		height: auto;
		padding: 1rem 0;
		padding-bottom: 10vw;
	}


	.barbers-title-h1{
		font-size: var(--font-size-big);
	}
	
	.barber-name-h4{
		font-size: 8.5vw; /* 7vw */
	}

	.barber-card{
		gap: 6vw; /* 2vw vertical content gap that each card contains */
	}

	.barbers-images{
		gap: 16vw;
	}

	.barber-image-img{
		width:78vw;
		height:110vw;
	}
}

/* -------- END BARBERS -------- */

/* -------- VISIT -------- */

.visit-container{
	display:grid;
    padding: 4rem 2rem; /* Needs Change */
    margin: 0 0;
	gap:0;
	column-gap: 10vw;
	background-color: var(--black-bg-color);
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "visit map"
        "appointment map"
		"opening map"
		"social map"; 
}

.visit-title { grid-area: visit; }
.opening-content { grid-area: opening; }
.social-content { grid-area: social; }
.appointment-content { grid-area: appointment; }
.map-section { grid-area: map; }

.visit-title{
	position: relative;
	bottom: 3vw;
}

.map-section{
	display:flex;
    flex-direction: column;
    margin-left: 0rem;
	border: 1px solid white;
}

.map-section .leaflet-control-attribution{
    display:none;
}

.map-image{
    flex: 1;
	position: relative;
    min-height:0;
    overflow: hidden;
	box-shadow: var(--text-shadow-small-image-haircuts);
}

.visit-title-h1{
	display: flex;
	justify-content: start;
	align-items: start;
	transition: all .4s ease;
	margin: 0;
	padding: 0;
	font-family: var(--museo-moderno);
	font-size: var(--font-size-big);
	font-weight: var(--font-weight-big);
	letter-spacing: var(--letter-spacing-big);
	color: var(--white);
}

.visit-title-h1:hover{
	cursor: default;
	transition: all .4s ease;
	letter-spacing: var(--letter-spacing-big-hover);
}

.appointment-content , .opening-content , .social-content{
	display: flex;
	flex-direction: column;
	gap: .4vw;
	padding: 0 1vw;
}

.appointment-content {
	position: relative;
	bottom:2vw;
}

/* .appointment-title-h2 , .opening-title-h2{
	transition: all .4s ease;
	margin: 0;
	padding: 0;
	font-family: var(--museo-moderno);
	font-size: 2rem;
	font-weight: 280;
	letter-spacing: 3px;
	color: black;
	text-shadow: var(--text-shadow-big-whitebg);
} */

.appointment-info-h5 , .opening-info-p{
	transition: all .4s ease;
	margin: 0;
	padding: 0;
	font-family: var(--museo-moderno);
	font-size: 1.8rem;
	line-height: 48px;
	font-weight: 150;
	letter-spacing: 2px;
	word-spacing: 10%;
	color: var(--white);
}


.social-content{
	position: relative;
	top:2vw;
	gap: .15rem;
	width: fit-content;
}

.social-instagram , .social-facebook , .social-tiktok{
	transition: all .4s ease;
	padding: 0;
	margin: 0;
	width: fit-content;
	font-family: var(--museo-moderno);
	font-size: 1.8vw;
	font-weight: 280;
	color: black;
	text-decoration: none;
	letter-spacing: 2px;
	transition: transform .4s ease, font-weight .4s ease, letter-spacing .4s ease;
	transform-origin: left; /* or "left center" if you want it to grow rightward only */
}

.social-instagram:hover , .social-facebook:hover , .social-tiktok:hover{
	transform: scale(1.12);
	font-weight: 350;
	letter-spacing: 4px;
}

@media (max-width:1149px){

	/* .appointment-title-h2 , .opening-title-h2{
		font-size: 1.7rem;
		letter-spacing: 3px;
	} */

	.appointment-info-h5 , .opening-info-p{
		font-size: 1.3rem;
		letter-spacing: var(--letter-spacing-big);
	}

	.visit-container{
		column-gap: 8vw;
	}
}

@media (max-width:999px){

	/* .appointment-title-h2 , .opening-title-h2{
		font-size: 1.4rem;
		letter-spacing: 3px;
	} */

	.appointment-info-h5 , .opening-info-p{
		font-size: 1.2rem;
		letter-spacing: var(--letter-spacing-big);
	}
}

@media (max-width:899px){

	.visit-container{
		column-gap: 7vw;
	}

	/* .appointment-title-h2 , .opening-title-h2{
		font-size: 1.3rem;
		letter-spacing: 2px;
	} */

	.appointment-info-h5 , .opening-info-p{
		font-size: 1.1rem;
		letter-spacing: var(--letter-spacing-big);
	}
}

@media (max-width:799px){

	.visit-container{
		column-gap: 7vw;
	}

	/* .appointment-title-h2 , .opening-title-h2{
		font-size: 1.2rem;
		letter-spacing: 2px;
	} */

	.appointment-info-h5 , .opening-info-p{
		font-size: 1rem;
		letter-spacing: var(--letter-spacing-big);
	}
}


@media (max-width:699px){
	.visit-container{
		padding: 5vw 2rem;
		margin: 0;
		background-color: var(--black-bg-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap:0;
	}

	.visit-title{
		order: 1;
	}

	.map-section{
		order: 2;
		display:flex;
		flex-direction: column;
		width: 86vw;
		height: 68vw;
		padding-bottom: 8vw;
	}

	.appointment-content{
		order: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.opening-content{
		order: 4;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding-top: 3vw;
	}

	/* .social-content{
		order: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: .8rem;
	} */

	/* .social-content > a{
		font-size: 3vw;
		text-shadow: var(--text-shadow-small-image-haircuts);
		letter-spacing: 3px;
	} */
	
	.appointment-content , .opening-content{
		position: relative;
		display: flex;
		flex-direction: column;
		left: 0;
		gap: .6vw;
	}
}

@media (max-width:599px){
	.visit-container{
		padding: 4vw 2rem;
		margin: 0;
		background-color: var(--white-bg-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap:0;
	}

	.visit-title{
		order: 1;
	}

	.map-section{
		order: 2;
		display:flex;
		flex-direction: column;
		width: 90vw;
		height: 72vw;
		padding-bottom: 9vw;
	}

	.appointment-content{
		order: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.opening-content{
		order: 4;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding-top: 3vw;
	}
	
	.appointment-content , .opening-content{
		position: relative;
		display: flex;
		flex-direction: column;
		left: 0;
		gap: .2vw;
	}

	.appointment-title-h2 , .opening-title-h2{
		font-size: 1.2rem;
		letter-spacing: 2px;
	}

	.appointment-info-h5 , .opening-info-p{
		font-size: .95rem;
		letter-spacing: var(--letter-spacing-big);
	}

}

@media (max-width:499px){
	.visit-container{
		padding: 6vw 2rem;
		margin: 0;
		background-color: var(--white-bg-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap:0;
	}

	.visit-title{
		order: 1;
	}

	.map-section{
		order: 2;
		display:flex;
		flex-direction: column;
		width: 90vw;
		height: 72vw;
		padding-bottom: 8vw;
	}

	.appointment-content{
		order: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.opening-content{
		order: 4;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding-top: 2vw;
	}
	
	.appointment-content , .opening-content{
		position: relative;
		display: flex;
		flex-direction: column;
		left: 0;
		gap: .2vw;
	}

	.appointment-title-h2 , .opening-title-h2{
		font-size: 1.1rem;
		letter-spacing: 2px;
	}

	.appointment-info-h5 , .opening-info-h5{
		font-size: .85rem;
		letter-spacing: var(--letter-spacing-big);
	}

}

@media (max-width:399px){
	.visit-container{
		padding: 6vw 2rem;
		margin: 0;
		background-color: var(--white-bg-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap:0;
	}

	.visit-title{
		order: 1;
	}

	.map-section{
		order: 2;
		display:flex;
		flex-direction: column;
		width: 90vw;
		height: 72vw;
		padding-bottom: 10vw;
	}

	.appointment-content{
		order: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.opening-content{
		order: 4;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding-top: 4vw;
	}
	
	.appointment-content , .opening-content{
		position: relative;
		display: flex;
		flex-direction: column;
		left: 0;
		gap: .8vw;
	}

	.appointment-title-h2 , .opening-title-h2{
		font-size: .95rem;
		font-weight: 330;
		letter-spacing: 1px;
	}

	.appointment-info-h5 , .opening-info-p{
		font-size: .8rem;
		letter-spacing: var(--letter-spacing-big);
	}

}


@media (max-width:299px){
	.visit-container{
		padding: 6vw 2rem;
		margin: 0;
		background-color: var(--white-bg-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap:0;
	}

	.visit-title{
		order: 1;
	}

	.map-section{
		order: 2;
		display:flex;
		flex-direction: column;
		width: 90vw;
		height: 72vw;
		padding-bottom: 10vw;
	}

	.appointment-content{
		order: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.opening-content{
		order: 4;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding-top: 4vw;
	}
	
	.appointment-content , .opening-content{
		position: relative;
		display: flex;
		flex-direction: column;
		left: 0;
		gap: .8vw;
	}

	.appointment-title-h2 , .opening-title-h2{
		font-size: .8rem;
		font-weight: 330;
		letter-spacing: 1px;
	}

	.appointment-info-h5 , .opening-info-p{
		font-size: .6rem;
		letter-spacing: var(--letter-spacing-big);
	}

}

/* -------- END VISIT -------- */

/* -------- FOOTER -------- */

.footer{
	padding: 1rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	justify-content: center;
	background-color: var(--black-bg-color);
	border-top: 1px solid black;
	box-shadow: var(--text-shadow-small-image-haircuts);
	cursor: default;
	border-top: solid 1px white;
}

.logo-footer{
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
}

.logo-footer-papounidis{
	transition: all .4s ease;
	font-family: var(--museo-moderno);
	font-weight: var(--font-weight-big);
	font-size: 4rem;
	color: var(--white);
	letter-spacing: 3px;
	/* text-shadow: var(--text-shadow-small-image-haircuts); */
}

.logo-footer-line{
	transition: all .4s ease;
	display: block;
	border: 1px solid;
	width: 98%;
	color:white;
	box-shadow: var(--text-shadow-small-image-haircuts);
}

.logo-footer-hairstudio{
	padding-top: .5rem;
	transition: all .4s ease;
	font-family: var(--museo-moderno);
	font-weight: var(--font-weight-big);
	font-size: 1.3rem;
	letter-spacing: 10px;
	color: var(--white);
	/* text-shadow: var(--text-shadow-small-quote-haircuts); */
}

.copyright{
	align-self: end;
}

.copyright-p{
	font-family: var(--museo-moderno);
	font-size: .8rem;
	font-weight: 250;
	letter-spacing: 2px;
	color: var(--white);
}

.phone-strong{
	font-size: 1.5rem;
	font-weight: 370;
}

@media (max-width:999px){

	.footer{
		gap: 1.4rem;
	}

	.phone-strong{
		font-size: 1.2rem;
		font-weight: 360;
	}
	
	.logo-footer-papounidis{
		font-size: 2.8rem;
		letter-spacing: 2px;
	}

	.logo-footer-hairstudio{
		padding-top: .5rem;
		font-size: .8rem;
		letter-spacing: 10px;
	}

	.copyright{
		align-self: center;
	}

	.copyright-p{
		font-size: .4rem;
		letter-spacing: 1px;
	}
}

@media (max-width:699px){

	.footer{
		gap: 1.4rem;
	}

	.phone-strong{
		font-size: 1.2rem;
		font-weight: 360;
	}
	
	.logo-footer-papounidis{
		font-size: 2.8rem;
		letter-spacing: 2px;
	}

	.logo-footer-hairstudio{
		padding-top: .5rem;
		font-size: .8rem;
		letter-spacing: 10px;
	}

	.copyright{
		align-self: center;
	}

	.copyright-p{
		font-size: .4rem;
		letter-spacing: 1px;
	}
}

@media (max-width:599px){
	.phone-strong{
		font-size: 1rem;
		font-weight: 350;
	}
}

@media (max-width:499px){
	.phone-strong{
		font-size: .9rem;
		font-weight: 350;
	}
}

@media (max-width:399px){

	.footer{
		gap: 1rem;
	}

	.phone-strong{
		font-size: .85rem;
		font-weight: 350;
	}
	
	.logo-footer-papounidis{
		font-size: 2.2rem;
		letter-spacing: 2px;
	}

	.logo-footer-hairstudio{
		padding-top: .5rem;
		font-size: .6rem;
		letter-spacing: 7px;
	}

	.copyright{
		align-self: center;
	}

	.copyright-p{
		font-size: .4rem;
		letter-spacing: 1px;
	}
}

@media (max-width:299px){

	.footer{
		gap: 1rem;
	}

	.phone-strong{
		font-size: .6rem;
		font-weight: 350;
	}
	
	.logo-footer-papounidis{
		font-size: 1.8rem;
		letter-spacing: 2px;
	}

	.logo-footer-hairstudio{
		padding-top: .5rem;
		font-size: .4rem;
		letter-spacing: 5px;
	}

	.copyright{
		align-self: center;
	}

	.copyright-p{
		font-size: .4rem;
		letter-spacing: 1px;
	}
}



/* FINAL SETTINGS */

.arxiki-container {
  pointer-events: none;
}

.navbar-container,
.navbar-content-right a,
.logo-container,
.menu-button {
  pointer-events: auto;
}

@media (max-width:699px){
	.showcase-title-h1 , .haircuts-title-h1 , .barbers-title-h1 , .visit-title-h1{
		font-size: var(--font-size-big-599);
	}

	h1:hover{
		letter-spacing: 0;
	}

	.logo-papounidis{
		font-size: var(--font-size-big-699);
	}
}

@media (max-width:599px){
	.showcase-title-h1 , .haircuts-title-h1 , .barbers-title-h1 , .visit-title-h1{
		font-size: var(--font-size-big-599);
	}

	.logo-papounidis{
		font-size: var(--font-size-big-599);
	}
}

@media (max-width:499px){
	.showcase-title-h1 , .haircuts-title-h1 , .barbers-title-h1 , .visit-title-h1{
		font-size: 4rem;
	}

	.logo-papounidis{
		font-size: var(--font-size-big-499);
	}
}

@media (max-width:399px){
	.showcase-title-h1 , .haircuts-title-h1 , .barbers-title-h1 , .visit-title-h1{
		font-size: var(--font-size-big-399);
	}

	.logo-papounidis{
		font-size: var(--font-size-big-399);
	}
}

@media (max-width:299px){
	.haircuts-title-h1 , .barbers-title-h1 , .visit-title-h1{
		font-size: 2rem;
	}
}