.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(42deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-39deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}

.triangle {
    width: 100%;
    height: 50px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.triangle-left {
    clip-path: polygon( 100% 100%, 0 100%, 0 0);
}

.dots .bg-zinc-700.bg-white {
    background-color: white;
}

.project-card {
  position: relative;
  background: #18181b;
  color: #f4f4f5;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.project-card::before,
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  transition: all 0.35s ease;
}

.project-card::before {
  border-top-color: #27272a;
  border-right-color: #27272a;
  transform: scaleX(0);
  transform-origin: right;
}

.project-card::after {
  border-bottom-color: #27272a;
  border-left-color: #27272a;
  transform: scaleY(0);
  transform-origin: bottom;
}

.project-card:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.project-card:hover::after {
  transform: scaleY(1);
  transform-origin: top;
}

.project-card:hover {
  box-shadow: 0 0 20px rgba(39, 39, 42, 0.4);
  /* transform: translateY(-4px); */
}
/* 
#home, #home * {
  border: 1px solid red;
} */