/* GENERAL */
*:not(p, b, span) {    
    display: flex;

    margin: 0;
    padding: 0;
	
    color: #fff;
	font-family: "Alexandria", sans-serif;
	
	justify-content: center;
	align-items: center;
	text-align: center;
	
	scroll-behavior: smooth;
    transition: all 0.33s ease-in-out;
    
    text-decoration: none;
    text-shadow: rgba(0,0,0,.5)  3px 3px 6px;
    
    list-style-type: none;
    
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */     
}

img, video {pointer-events: none;}

title, script { display: none;}

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body > * {
  width: 100vw; /* 100% of viewport width */
  background: #000 url(../medias/background/blackorchid.webp);;
}

header {
    position: fixed;
    justify-content: space-around !important;
    background: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0));
    height: 200px;
    top: 0;
    z-index: 999;
}

footer {
	padding-bottom: 2.5vh;
}

section {
	position: relative;
	min-height: 100vh;
	padding: 5vh 0;
}

section:nth-child(even) {}

section > *:not(#demoreel, #banner), form {
	width: 95vw;
	max-width: 1280px;
}

h1 {
	font-size: 4.5rem;
	line-height: 5rem;
	font-weight: 500;
	padding: .5rem 0;
}
h2 {
	font-weight: 350;
	font-size: 2.25rem;
	padding: .5rem 0;
	/*text-align: justify;*/
}

h3 {
	font-size: 2.5rem;
	font-weight: 400;
	padding: 1rem;
}

h4 {
	font-size: 1.4rem;
}

h5 {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
}

h6 {
	font-size: 1rem !important;
	font-weight: 300 !important;
}

p {
	font-size: 1.4rem;
	font-weight: 275;
	margin: 0;
}

button, .button {
	align-self: center;
	background-color: rgba(0,0,0,0);
	/*background-image: none;
	background-position: 0 90%;
	background-repeat: repeat no-repeat;*/
	background-size: 4px 3px;
	border-radius: 40px;
	/*border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;*/
	border-style: solid;
	border-width: 2px;
	border-color: #fff;
	box-shadow: rgba(1, 1, 1, .2) 15px 28px 25px -18px;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	/*font-family: Neucha, sans-serif;*/
	font-size: 1rem;
	line-height: 23px;
	outline: none;
	padding: .75rem;
	/*border-bottom-left-radius: 15px 255px;
	border-bottom-right-radius: 225px 15px;
	border-top-left-radius: 255px 15px;
	border-top-right-radius: 15px 225px;*/
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transform: scale(.9);
}

button:hover {
  background-color: #fff;
  color: #000;
  transform: scale(.8);
}

button:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
  background-color: #fff;
  color: #000;
}

/*default button*/

.btn {
  color: #fff;
  cursor: pointer;
  /*display: block;*/
  font-size: 1.25rem;
  font-weight: 250;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px; 
  position: relative;
  text-transform: uppercase;
  width: 100%; 
  
/*   @media(min-width: 400px) {
     display: inline-block;
     margin-right: 2.5em;
  
     &:nth-of-type(even) {
       margin-right: 0;
     }
   }*/
  
  &:hover { text-decoration: none; font-weight: 350;}
  
}
.btn-2 {
    letter-spacing: 0;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: .1rem;
}

.btn-2:after,
.btn-2:before {
  backface-visibility: hidden;
  border: 1px solid rgba(#fff, 0);
  top: 0;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  border-color: #fff;
  transition: width 350ms ease-in-out;
  width: 70%;
}

.btn-2:hover:before {
  bottom: 0;
  top: auto;
  width: 70%;
}


/* LOGO */
.logo > a > img {
	height: 200px;
	}
	
/* MENU */

ul > li {
    margin: 0 10px;
}

/*nav > ul > li > a {
    font-size: 1.25rem;
    font-weight: 250;
    text-transform: uppercase;
    transform: scale(1);
    opacity: 1;
}*/

/*nav > ul > li > a:hover,*/ .logo:hover {
	transform: scale(.95);
	opacity: .75;
	/*border-bottom: solid 2px #fff;*/
}

/* CSS for hiding the menu icon by default */
.menu-icon {
    display: none;
    font-size: 1.5rem;
}

/* DEMOREEL */

#demoreel, #banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the video covers the entire container */
    opacity:.85;
}

#banner { filter: brightness(1.15);}

#services > * {
	margin-bottom: 2.5vh;
}

#services-infos {
	justify-content: space-evenly;
}

.services-box {
	
	/*border: solid .1rem #fff;
	border-radius: 40px;
	background: rgba(0,0,0,.75);
	*/
}

#services-infos > div {
	height: 90%;
	margin: 2.5vh;
	transform: scale(.975);
	opacity: .7;
}

#services-infos > div h4 { opacity: 0; }

#portfolio-infos {
	margin: 10vh 0 5vh 0;
}

#filters {
	padding-top: 3vh;
}

#filters > ul > li{
	opacity: .5;
	font-size: 1.25rem;
}

#filters > ul > li:hover {
	transform: scale(1.1);
	cursor: pointer;
}
#filters > ul > li.activeFilter {
	opacity: 1 !important;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(4, 25vh);
	/*grid-gap: .1rem;*/
}

.gallery-item{
	position: relative;
    width: 100%; /* Ensure each item takes the full width of its container */
    padding-top: 100%; /* Set the height of each item equal to its width */
	/*border-radius: 10px;*/
	position: relative;
	overflow: hidden;
	filter: grayscale(1);
}

.gallery-item.hideItem {
	/*width: 0;
	padding-top: 0;
	display: none;*/
	transform: scale(0);
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute; /* Position the image absolutely within the container */
  	top: 0; /* Position from the top */
  	left: 0; /* Position from the left */
  	opacity: .75;
  	
}

.gallery-item:hover {
	filter: grayscale(0);
}
.gallery-item:hover > .gallery-image {
	transform: scale(1.1);
}

.hover-alt-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 40%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
    color: white;
    padding: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    font-size: 14px; /* Adjust font size */
}

/* Show alt text on hover */
.gallery-item:hover .hover-alt-text {
    opacity: 1;
}


#contact .fab {
	font-size: 3rem;
	padding: 2.5rem 0;
	opacity: .75;
}

#contact .fab:hover {
	transform: scale(1.33);
	opacity: 1;
}

form {
	max-height: 60vh;
	width: 50%;
	border: solid .1rem #fff;
	border-radius: 40px;
	padding: 2rem 6rem;
}

#socials {
	width: 30%;
}

form > div{
	width: 100%;
	max-width: 100%;
	min-height: 4rem;
	padding: .5rem 0;
	justify-content: left;
	text-align: left;
}

#submit-btn-container {

	justify-content: center !important;
}


form label {
	width: 100%;
	text-align: left;
	justify-content: left;
	align-items: start;
	
	font-weight: 350;
	font-size: 1.2rem;
	
	padding-bottom: .1rem;
	
	flex-direction: column;
}

form input, textarea, select{
	background-color: rgba(0,0,0,0);
	border: none;
	min-height: 3rem;
	width: 100%;
	
	text-align: left;
	
	border-bottom: solid .1rem #fff;
	
	font-size: 1.2rem;
	font-weight: 250;
}


form option{
	background-color: #000;
	font-size: 1.2rem;
	font-weight: 250;
}

form option:hover, form option:hover {
	box-shadow: 0 0 10px 100px #000 inset;
}

#socials > ul {
	flex-direction: column;
}

/* CSS ANIMATIONS */

.hidden {
  opacity: 0;
  transform: translateY(-8vh);
  transition: transform .75s ease-in-out, opacity 1.25s ease-in-out !important;
}

[data-animation="slide-in"].appear {
  opacity: 1;
  transform: translateY(0);
}

#full_logo_mobile {
	transition: transform 0.1s linear;
}

.sticky-header {
  position: relative;
  top: 200px;
  height: 8vh;
  z-index: 1000; /* Ensure it's above other content */
  opacity: 0;
  transition: top, opacity 0s;
}

.sticky-header.sticky {
	position: fixed;
	top: 0;
	background-color: rgba(255, 255, 255, 0.9);
	/*opacity: 1; /* Semi-transparent background */
}

.hidden2 {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
}

.slide {
	display: none;
	width: 100%;
	opacity: 0;
}

@keyframes slideAnimationIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideAnimationOut {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}


.active {
  display: flex;
  opacity: 1 !important;
}

/* WIPE */
  .wipe-container {
    position: relative;
    display: block;
    height: 0;
	width: 100%;
	padding-top: 56.25%;
    border-radius: 40px;
    overflow: hidden;
    margin: 100px;
    opacity: .8;
    transition : none;
  }

  .wipe-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .wipe-img-1 {
    background-image: url('../medias/work/NavetStudio_UDNDT_before.png');
  }

  .wipe-img-2 {
    background-image: url('../medias/work/NavetStudio_UDNDT_after.png');
    width: 60%; /* Initially set width to 60% */
    transition: none;
  }

  .wipe-divider {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #fff;
    cursor: ew-resize; /* Change cursor to horizontal resize */
    left: calc(60% - 1.5px); /* Initially position the divider at 60% */
    pointer-events: none; /* Prevent divider from capturing hover events */
    transition: none;
  }
  
/* UTILS */
.col { flex-direction : column; }
.landscape { display: flex; }
.portrait { display: none; }
.even { flex: 1 0 !important; }
.twice { flex: 2 !important; }
.blur {
    filter: blur(10px);
}

/* Styles for non-mobile devices */
@media (hover: hover) {
  /* Add your hover effect styles here */
	#services-infos > div:hover {
		transform: scale(1);
		opacity: 1;
	}

	#services-infos > div:hover p{
		opacity: .25;
	}

	#services-infos > div:hover > h3 {
		letter-spacing: .2rem;
		transform: scale(1.05);
	}

	#services-infos > div:hover h4 {
		opacity: 1;
	}
}

.iframe-container {
  position: relative;
  margin-top: 50px;
  padding-bottom: 800px;
  height: 0;
  overflow: hidden;
  width: 100%;
}


.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media only screen and (max-width: 768px) {
    
    h1 {
		font-size: 2.5rem;
		line-height: 2.5rem;
		font-weight: 500;
		padding: 0;
	}
	
	h2 {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 300;
		padding: 1rem 0 0 0;
	}
	
	h3 {
		font-size: 2.4rem;
		font-weight: 400;
	}
	
	h5 {
		font-size: .75rem !important;
		font-weight: 600 !important;
	}

	h6 {
		font-size: .5rem !important;
		font-weight: 300 !important;
	}

	p {
		font-size: 1.4rem;
		font-weight: 250;
	}
	
	.btn {
		font-size: 1.125em;
		line-height: 0;
		margin: 0;
}
    
	.landscape { display:none; }
	.portrait { display: flex; }
	
	.overlay {
		font-size: 1rem;
	}
	
	section {
		transform: translateY(-10vh);
	}
	
	nav > ul > li {
		margin: 0 10px;
	}
	
	#demoreel{
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
	}
	
	@keyframes slideBanner {
	  from {
		transform: translateX(0);
	  }
	  to {
		transform: translateX(-80%);
	  }
	}
	
	#banner {
		width: auto;
		object-fit: cover;
		animation: slideBanner 120s linear infinite alternate ;
	}

	#services-infos {
		/*flex-direction: column;*/
		position: relative;
	}

	#services-infos > div {
		width: 50% !important;
		flex:1;
	
		margin: 0; 
		padding: 0;
	}
		
	.marker {
		margin: 0 5px;
		height: 5px;
		width: 20px;
		border-radius: 20px;
		background-color: #555 !important;
		/*border-bottom: solid .1rem #fff;*/
	}
	.marker.active2 {
		background-color: #fff !important;
	}
	
	#filters {
		padding-top: 2vh;
	}
	
	#filters > ul > li{
		font-size: .85rem;
		font-weight: 300;
	}
	
	.gallery {
		grid-template-columns: repeat(3, 1fr);
		/*grid-gap: .05rem;*/
	}
	
	#contact .fab {
		font-size: 2rem;
		padding: .5rem;
	}
	
	#contact h1 {
		font-size: 1.5rem;
	}
	#contact p {
		font-size: 1rem;
	}
	
	.contact-container, .dropdown {
		flex-direction: column;
	}
	
	#socials > ul {
		flex-direction: row;
	}

	form {
		max-height: 75vh;
		width: 95vw;
		padding: 0;
		transform: scale(.95);
	}

	#socials {
		width: 30%;
	}

	form > div{
		max-width: 90%;
		padding: 0;
	}

	#submit-btn-container {
		justify-content: center !important;
	}


	form label {
		width: 100%;
		text-align: left;
		justify-content: left;
		align-items: start;
		
		font-weight: 350;
		font-size: 1rem;
		
		padding: .5rem 0 .25rem 0;
		
		flex-direction: column;
	}

	form input, textarea, select{
		background-color: rgba(0,0,0,0);
		border: none;
		min-height: 1.5rem;
		width: 100%;
		
		text-align: left;
		
		border-bottom: solid .1rem #fff;
		
		font-size: 1rem;
		font-weight: 250;
	}

	form option{
		background-color: #000;
		font-size: 1rem;
		font-weight: 250;
	}

	form option:hover, form option:hover {
		box-shadow: 0 0 10px 100px #000 inset;
	}
	
	form button {
	font-size: 1.5rem;
	line-height: 23px;
	outline: none;
	margin-top: 1rem;
	padding: 1rem;
	/*border-bottom-left-radius: 15px 255px;
	border-bottom-right-radius: 225px 15px;
	border-top-left-radius: 255px 15px;
	border-top-right-radius: 15px 225px;*/
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transform: scale(.66);
}

	.iframe-container {
	  position: relative;
	  margin: 5vh 0;
	  padding-bottom: 0;
	  height: 25vh;
}

	.iframe-container iframe {
	  position: absolute;
	  top: 0;
	  left: auto;
	  width: 100%;
	  height: 100%;
	  border: 0;
	}