@font-face {
  font-family: 'Augify Demo';
  src: url('fonts/AugifyDemo.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
* {margin:0; padding:0; box-sizing:border-box;}
body {
  font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;
  cursor:none;
  color:white;
  background-color:black;
}

/* ---- NAVBAR ---- */
/* --- NAVIGATION BAR --- */
.navbar.white-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: white;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.logo-outline {
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px #111;
  text-transform: uppercase;
  letter-spacing: 2px;
  user-select: none;
}

.navbar.white-nav nav {
  display: flex;
  gap: 40px;
}

.navbar.white-nav nav a {
  color: #111;
  text-decoration: none;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 1px;
  position: relative;
  transition: color 0.3s ease;
}

.navbar.white-nav nav a:hover {
  color: #00d084; /* subtle green accent */
}

/* small underline hover effect like relative.berlin */
/* --- NAVIGATION BAR --- */
.navbar.white-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: white;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.nav-left {
  flex: 1; /* empty spacer to balance the logo center */
}

.logo-outline {
  flex: 1;
  text-align: center;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px #111;
  text-transform: uppercase;
  letter-spacing: 2px;
  user-select: none;
}

.nav-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 40px;
}

.nav-right a {
  color: #111;
  text-decoration: none;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 1px;
  position: relative;
  transition: color 0.3s ease;
}

.nav-right a:hover {
  color: #00d084; /* subtle green accent */
}

.nav-right a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 1px;
  background: #111;
  transition: width 0.3s ease;
}

.nav-right a:hover::after {
  width: 100%;
}


/* ---- Sections ---- */
main,
section {
  padding-top: 100px; /* leaves space below the fixed navbar */
  padding-left: 5vw;
  padding-right: 5vw;
  padding-bottom: 80px;
}

.section {
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.video-section video {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(0.45);
}
/* About section font style */
#section2 .about-content h2,
#section2 .about-content p {
  font-family: 'Augify Demo', sans-serif;
  letter-spacing: 1px;
  color: white;
}
.about-content {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:2;
}
.about-content h2 {
  font-size:3rem;
  letter-spacing:2px;
  font-weight:500;
  color:white;
}
.about-content p {
  margin-top:1rem;
  font-size:1.5rem;
  opacity:0.9;
  color:white;
}

.center-title {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:2;
}
.center-title h1 {
  font-size:3rem;
  color:white;
  font-weight:500;
  text-transform:uppercase;
}

/* ---- Scroll Dots ---- */
.scroll-dots {
  position:fixed;
  right:40px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:15px;
  z-index:5;
}
.dot {
  width:12px; height:12px;
  border-radius:50%;
  background-color:rgba(255,255,255,0.4);
  transition:all 0.3s ease;
  cursor:pointer;
}
.dot.active {
  background-color:#00ff99;
  transform:scale(1.4);
}

/* ---- Cursor ---- */
.cursor {
  width:20px; height:20px;
  border-radius:50%;
  position:fixed;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,transform .25s;
  z-index:10000;
  background-color:#ff00cc;
  mix-blend-mode:difference;
}

a:hover ~ .cursor, video:hover ~ .cursor, .dot:hover ~ .cursor {
  width:50px; height:50px;
  transform:translate(-50%,-50%) scale(1.2);
}
#eye-follow {
  position: fixed;
  width: 120px;
  height: 60px;
  pointer-events: none;
  z-index: 10000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
  opacity: 0.8;
}

#eye-follow img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
}


.section.text-section.about .about-content h2,
.section.text-section.about .about-content p {
  font-family: 'Augify Demo', sans-serif;
}
.projects-page {
  background-color: black;
  color: white;
  min-height: 100vh;
  padding: 100px 5vw;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}

.projects-title {
  font-size: 3rem;
  margin-bottom: 60px;
  text-align: center;
  letter-spacing: 2px;
  color: white;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: scale(1.05);
}

.project-card video,
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card h2 {
  position: absolute;
  bottom: 15px;
  left: 20px;
  font-size: 1.5rem;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}