*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
}
:root {
  --primary-color: rgba(162, 110, 226, 1);
  --background-color: rgba(0, 0, 0, .9);
  --text-color: 255, 255, 255;
}
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}
nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
}
.nav-button {
  /* Remove border-radius and update styles */
  color: #222222;
  border: none;
  font-size: 20px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  text-align: center;
  width: 200px;  /* Set explicit width */
  padding: 30px;
  margin: 10px;
  cursor: pointer;
  backdrop-filter: blur(5px);

  /* Add clip-path for irregular shape */
  /*clip-path: path('M0,10 C5,0 15,0 20,10 S35,20 40,10 S55,0 60,10 S75,20 80,10 S95,0 100,10 L100,90 C95,100 85,100 80,90 S65,80 60,90 S45,100 40,90 S25,80 20,90 S5,100 0,90 Z');*/
}
.nav-button:hover {
  /*background: rgba(117, 249, 143, 0.8);*/
  /*color: white;*/
}
/* Create unique shapes for each button */
.nav-button:nth-child(1) {
  background: var(--primary-color);
  clip-path: path('M0.480114 37.65C4.59011 12.85 22.3501 2.78998 30.1001 1.49998C41.5601 -0.400018 48.5501 0.239983 55.3101 4.93998C58.1401 6.90998 61.9101 12.42 68.0901 12.42C74.2701 12.42 84.5301 5.66998 89.5301 3.06998C94.9701 0.239982 106.44 -1.67002 117.56 4.46998C125.69 8.95998 123.74 12.88 131.58 12.88C139.42 12.88 150.18 1.45998 158.37 0.259982C173.82 -1.99002 200.02 10.05 200 39.51C199.98 72.7 174.85 80.63 163.72 80.63C152.59 80.63 146.54 76.44 140.64 73.15C138.48 71.95 136.94 67.66 131.57 68.01C121.25 68.69 117.57 79.69 100.25 80.63C82.9301 81.56 76.7401 67.61 70.5601 67.55C58.3301 67.43 56.9601 81.19 35.9301 80.68C14.9101 80.17 -3.22989 60.07 0.480114 37.65Z');
}

.nav-button:nth-child(2) {
  background: rgba(134, 223, 151, 1);
  clip-path: path('M129.98 0V51.12C119.52 21.13 94.45 0 65.18 0V52.21C54.95 21.64 29.63 0 0 0V164.69C29.63 164.69 54.95 143.05 65.18 112.48V164.69C94.45 164.69 119.52 143.56 129.98 113.57V164.69C168.65 164.69 200 127.82 200 82.35C200 36.88 168.65 0 129.98 0Z');
  height: 165px;
}

.nav-button:nth-child(3) {
  background: rgba(137, 154, 248, 1);
  clip-path: path('M200 0V113.98L128.01 83.94L0 115.85V4.87L75.46 35.59L200 0Z');
  height: 116px;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  display: none;
  z-index: 1000;
  opacity: 0;
  overflow: auto;
}

/* Overlay section */

.overlay-content {
  color: white;
  padding: 50px;
  max-width: 100%;  /* Changed from 800px */
  margin: 0;        /* Changed from 50px auto */
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto; /* Allow scrolling if content overflows */
}

.projects-slider {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  touch-action: pan-y pinch-zoom; /* Allow vertical scroll but enable touch for horizontal */
}

.slider-wrapper {
  display: flex;
  height: 100%;
  cursor: grab;
  transform: translateX(0);
  gap: 40px;
  padding: 0 11.11vw;
  will-change: transform; /* Optimize performance */
}

/* Project slide hover effects */

.project-slide {
  width: 33.33vw;
  min-width: 33.33vw;
  flex: 0 0 auto;
  padding: 20px;
  box-sizing: border-box;
  transition: width 0.6s ease;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .project-slide {
    width: 80vw;
    min-width: 80vw;
  }
  
  .slider-wrapper {
    padding: 0 10vw;
    gap: 20px;
  }
  
  .slider-nav {
    width: 60px;
    height: 60px;
    bottom: 20px;
  }
  
  .prev {
    left: calc(50% - 70px);
  }
  
  .next {
    left: calc(50% + 10px);
  }
}

.project-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.project-preview:hover {
  border-color: #FCA086;
}

.project-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.project-slide:hover::before {
  display: none;
}

.project-slide .hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.project-slide:hover .hover-overlay {
  opacity: 1;
}



.hover-overlay .eyes-icon {
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
}

.hover-overlay .look-text {
  color: #FCA086;
  font-size: 24px;
  font-family: 'Courier New', Courier, monospace;
}

.project-slide img {
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.slider-nav {
  width: 90px;
  height: 90px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  position: fixed;
  bottom: 40px;  /* Changed from top: 50% */
  transform: none;  /* Remove translateY */
}

.prev {
  left: calc(50% - 110px);  /* Center with spacing */
}

.next {
  left: calc(50% + 20px);  /* Center with spacing */
}

.slider-nav svg {
  width: 100%;
  height: 100%;
}

.slider-nav:hover use {
  fill: #FCA086;
}
/* About overlay specific styles */
.about-content {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  /* width: 80%;
  max-width: 600px; */
}

@media (max-width: 768px) {
  .about-content {
  top: 0;
  left: 5%;
  transform: none;
  text-align: left;
}
}


@font-face {
  font-family: 'TT Bluescreens Bold';
  src: url('../fonts/TT-Bluescreens-Trial-Bold-BF63c60fd870656.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'TT Bluescreens Medium Italic';
  src: url('../fonts/TT-Bluescreens-Trial-Medium-Italic-BF63c60fd6502b8.otf') format('opentype');
  font-weight: 500; /* Medium */
  font-style: italic;
}
@font-face {
  font-family: 'TTB Italic';
  src: url('../fonts/TTB-Italic.otf') format('opentype');
  font-weight: 500; /* Medium */
  font-style: italic;
}
.about-content h1 {
  font-family: 'TT Bluescreens Bold', sans-serif;
  font-size: 10rem;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--primary-color);
}
.highlight {
  font-family: 'TTB Italic', sans-serif;
  font-size: 10rem;
}
@media (max-width: 1024px) {
  .about-content h1 {
 font-family: 'TT Bluescreens Bold', sans-serif;
  font-size: 5rem;
 
}
.highlight {
  font-family: 'TT Bluescreens Bold', sans-serif;
  font-size: 5rem;
}
}
.highlight.reload {
  font-family: 'TT Bluescreens Medium Italic', sans-serif;
  font-size: 1.5rem;
  color: #FCA086;
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: 0.2rem;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
  text-decoration-color: #FCA086;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2rem;
}
.about-content p {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 500; /* Medium */
  font-size: 1.5rem;
  line-height: 1.8;
}

/* Close overlay */
.button-wrapper {
    display: inline;
}

.text-close {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--primary-color);
    cursor: pointer;
    display: inline;
    text-decoration: underline;
}

.text-close:hover {
    text-decoration: underline;
}

/* Video  */