/* Style for our header texts
* --------------------------------------- */

.fp-watermark {
	visibility: hidden;
}

.navbar-brand {
	z-index:100;
}

h1{
	font-size: 4rem;
	font-family: "bebas-neue", sans-serif;
	color:#F0DFCC!important;
	margin:0;
	padding:0;
	font-weight: normal;
}

h2 {
	font-family: "bebas-neue", sans-serif;
}

a { outline: none; }

/* Base animation setup */
.intro {
	width:90%;
	margin:0 auto;
	opacity: 0; /* Start fully hidden */
	transform: translateY(50px) scale(0.9) rotateX(10deg); /* Further down, smaller, and slight tilt */
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
				transform 1s cubic-bezier(0.16, 1, 0.3, 1); /* Stronger easing for a more dramatic feel */
}

.intro.in-view {
	opacity: 1; /* Fully visible */
	transform: translateY(0) scale(1) rotateX(0); /* Slide up, grow, and straighten */
}

/* Adjusted animation for mobile devices */
@media (max-width: 768px) {
	.intro {
		transform: translateY(30px) scale(0.95); /* Smaller slide and scale */
		transition: opacity 0.8s ease-out, 
					transform 0.8s ease-out;
	}

	.intro.in-view {
		transform: translateY(0) scale(1);
	}
}

.emphasized {
	text-decoration: underline;
}

.intro p{
	text-align: left;
	font-family: "bebas-neue", sans-serif;
	color:#F0DFCC!important;
	font-size:2rem;
	margin-bottom:0px;
}

.intro h1 {
	font-size: 4rem;
	text-align: left;
	color:#F0DFCC!important;
}

/* Centered texts in each section
* --------------------------------------- */
.section{
	text-align:center;
}

/* Fixed header and footer.
* --------------------------------------- */
#header {
	position:fixed;
	height: 50px;
	display:block;
	width: 100%;
	z-index:9;
	text-align:right;
	color: #f2f2f2;
	padding: 20px 0 0 0;
}

#header{
	top:0px;
}

/* Bottom menu
* --------------------------------------- */

#myVideo{
	position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	 background-color: black; /* in case the video doesn't fit the whole page*/
	  background-image: /* our video */;
	  background-position: center center;
	  background-size: contain;
	   object-fit: cover; /*cover video background */
	   z-index:3;
}

.text-overlay {
	z-index:100!important;
	position:relative;
	text-align: right;
	margin-top:35%;
	width: 30%;
	margin-left:auto;
	padding-right:5%;
	color:#F0DFCC!important;
}

.work-desc {
	z-index:10!important;
	position:absolute;
	text-align: right;
	width: 30%;
	margin-left:auto;
	padding-right:20px;
	color:#F0DFCC!important;
	right:0px;
	bottom:0px;
}

.arrows {
  width: 60px;
  height: 72px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 20px;
  z-index: 100;
}

.arrows path {
  stroke: #F0DFCC;
  fill: transparent;
  stroke-width: 1px;  
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
  animation-delay:-1s;
  -webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
  animation-delay:-0.5s;
  -webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 { 
  animation-delay:0s;
  -webkit-animation-delay:0s; /* Safari 和 Chrome */
}

.text-cream {
  color:#F0DFCC!important;
}

/* .text-white {
color:#F0DFCC!important;
} */

.navbar-toggler {
	border:none!important;
}

.bebas-font {
	font-family: "bebas-neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 28px;
}

#section0 {
	background-image: url(../images/home/IMG_3448.jpg);
	background-size: cover;
}

#section1 {
	background-image: url(../images/home/netflix-slam-dark.jpg);
	background-size: cover;
}

/* #section1 {
	background-image: url(../images/home/IMG_5439.png);
	background-size: cover;
} */

#section2 {
	background-image: url(../images/home/rover.jpg);
	background-size: cover;
}

#section3 {
	background-image: url(../images/home/car-image.jpg);
	background-size: cover;
}

#section4 {
	background-image: url(../images/home/everest.jpg);
	background-size: cover;
}

#section5 {
	background-image: url(../images/home/chris-rock.jpg);
	background-size: cover;
}

#section6 { 
	background-image: url(../images/home/blue.jpg);
	background-size: cover;
}

#section0::before, #section1::before, #section2::before, #section3::before, #section4::before, #section5::before, #section6::before {
  content: "";  /* This is necessary for the pseudo-element to work */
  position: absolute;  /* This positions it directly over the parent element */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);  /* This is a black background with 50% opacity */
  z-index: 1;  /* Make sure this is below the text and other content */
}

/* Ensure text and other content appear above the darkened layer */
#section0 > *, #section1 > *, #section2 > *, #section3 > *, #section4 > *, #section5 > *, #section6 > *  {
  /* position: relative; */
  z-index: 2;
}

.section {
	background-color: black;
}

.nav-link {
	font-size:20px;
	z-index:200;
	color:#F0DFCC!important;
}

.nav-link:hover {
	color:#6b6b6b!important;
}

.logos {
	width: 650px;
	margin-right: 350px;
	top:100px;
}

.work {
	z-index:100;
	display: block;
	position: relative;
	text-align: left;
	top:90%;
	padding-left:5%;
	color:#F0DFCC!important;
	font-weight: bold;
}

.work a {
	color:#F0DFCC!important;
	text-decoration: none;
}

.work a:hover {
	color:#666!important;

}

.embed-container {
  --video--width: 1296;
  --video--height: 540;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
  overflow: hidden;
  max-width: 100%;
  background: black;
}

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

.btn-close {
	color:#F0DFCC!important;
	opacity: 1!important;
}


.title {
	/* margin-top:100px; */
}

.footer-social {
	display: -webkit-inline-flex;
}

.footer-social i {
	padding:0 10px;
}

.work-item img {
	width:100%;
	cursor: pointer;
}

.img-wrapper {
  position: relative;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index:5;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 40%;
}

.modal-title {
	font-family: "bebas-neue", sans-serif;
	text-transform: uppercase;
}

.text-uppercase {
	text-transform: uppercase;
}

.bg-transparent {
	background-color: transparent!important;
}

.artist-img {
	float:left;
	padding: 0 15px 5px 0;
	width: 300px;
}

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff; /* Change this if you want a different background color */
	z-index: 9999; /* Ensuring it sits on top of everything else */
}

.loader {
	width: 50px;
	height: 50px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 6px solid #f3f3f3; 
	border-top: 6px solid #3498db; /* Blue */
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/*--------------------------------------------------------------
## MEDIA QUERIES
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## iPad Pro Landscape
--------------------------------------------------------------*/

@media only screen and (max-width : 1199px) {
	
	.intro h1 {
		font-size: 4rem;
	}


}

@media only screen and (max-width : 1163px) {
	
	.intro h1 {
		font-size: 3.9rem;
	}


}

@media only screen and (max-width : 1131px) {
	
	.intro h1 {
		font-size: 3.9rem;
	}


}

@media only screen and (max-width : 1126px) {
	
	.intro h1 {
		font-size: 3.9rem;
	}


}

@media only screen and (max-width : 1112px) {
	
	.intro h1 {
		font-size: 3.8rem;
	}


}


/*--------------------------------------------------------------
## iPad Landscape
--------------------------------------------------------------*/

@media only screen and (max-width : 1024px) {
	
	.intro h1 {
		font-size: 3.7rem;
	}

	
}

/*--------------------------------------------------------------
## iPad Portrait
--------------------------------------------------------------*/

@media only screen and (max-width : 768px) {
	
	.intro h1 {
		font-size: 3.6rem;
	}
	
}

/*--------------------------------------------------------------
## In Between
--------------------------------------------------------------*/

@media only screen and (max-width : 568px) {
	
	.logos {
		margin-right:0;
	}
	
	.intro h1 {
		font-size: 2rem;
	}
	
	.hide-on-mobile {
		display: none!important
	}
	
	.artist-img {
		padding: 0 15px 5px 0;
		width: 100%;
		padding:0 0 15px 0;
	}
	
}

/*--------------------------------------------------------------
## iPhone 8 Plus
--------------------------------------------------------------*/

@media only screen and (max-width : 414px) {
	
	.text-overlay p {
		font-size:14px;
	}
	
}

/*--------------------------------------------------------------
## iPhone 8
--------------------------------------------------------------*/

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

}

/*--------------------------------------------------------------
## iPhone SE
--------------------------------------------------------------*/

@media only screen and (max-width : 320px) {
 
 .intro h1 {
	 font-size: 1.5rem;
 }
 
}