/*   Scroll Page - based on code by Can Özcan   */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  scroll-behavior: smooth;
}

.scroll-snap-vertical {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.scene {
  scroll-snap-align: start;
  height: 100vh;
  display: grid;
  place-items: center;
/*  text-align: center; */
  padding: 2rem;
  color: white;
  transition: background 0.8s ease;
  
}

.scene .content {
  max-width: 60%;
  padding: 20px;
}

.scene h1, .scene h2 {
  font-family: "Cabin", sans-serif;
  font-weight: 300;
  font-style: normal;
 /* text-align: center; */
  color: #ffffff;
  margin-bottom: 1rem;
}

.scene p {
/*  font-size: clamp(1rem, 2vw, 1.25rem);  */
  margin: 20px 0;
  font-family: "Cabin", sans-serif;
  line-height: 1.6;
  opacity: 0.85;
}

/* Unique gradient transitions per section */
.scene--intro {
/*  background: linear-gradient(160deg, #0f2027, #203a43, #2c5364);   */
/*  Leave this empty for the video background */
}

.scene--mid {
/*  background: linear-gradient(145deg, #373b44, #4286f4); */
  background-image:url("../../content/images/parallax_001.jpg");
}

.scene--focus {
/*  background: linear-gradient(170deg, #42275a, #734b6d); */
  background-image:url("../../content/images/parallax_002.jpg");
}

.scene--pen {
/*  background: linear-gradient(170deg, #42275a, #734b6d); */
  background-image:url("../../content/images/parallax_003.jpg");
}

.scene--cgi {
/*  background: linear-gradient(155deg, #134e5e, #71b280); */
  background-image:url("../../content/images/parallax_004.jpg");
}

.scene--and {
/*  background: linear-gradient(155deg, #134e5e, #71b280); */
  background-image:url("../../content/images/parallax_005.jpg");
}

.scene--end {
  background: linear-gradient(155deg, #181818, #1F1F1F); 
  
}

.scene--aerial {
/*  background: linear-gradient(155deg, #134e5e, #71b280); */
  background-image:url("../../content/images/parallax_006.jpg");
}


/* Full page background image and video */

.scene, img {
  position: relative; 
  top:0; 
  left:0; 
  width: 100%; 
  height: 100%; 
  bottom: 0; 
  right: 0; 
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;
}

scene, video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  filter:brightness(70%);  /* video effect control */
  z-index: -999;
}


/* Scrollbar aesthetics */
.scroll-snap-vertical::-webkit-scrollbar {
  width: 12px;
}
.scroll-snap-vertical::-webkit-scrollbar-thumb {
  background: rgb(49, 49, 49);
  border-radius: 10px;
}
.scroll-snap-vertical::-webkit-scrollbar-track {
  background: rgb(15, 15, 15);
}


/* All Links, Hovers etc go here  */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    font-family: Arial, sans-serif;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
}

.nav-links a {
    text-decoration: none;
    color: #FFF;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #CCC;
}

#footer {
   position:absolute; /* Use fixed if the footer needs to be on everypage */
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
/*   background: #757170;  Remove background colour of blur does not work 
   opacity: 0.65; */
   backdrop-filter: blur(10px) saturate(80%) brightness(50%); /*  Blur background to enhance text */
}

/*   Sticky Logo - Keeps the n-vizage logo on top of everything  */
.sticky-logo {
    position: sticky;
    width: 200px;
    top: 15px;
    left: 15px;
    align-items: left;
    text-align: left;
    z-index: 1000;
/*    background: #ffffff; */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}