body{font-family:Arial;margin:0;background-color: black;}nav{background: orange; color:#fff;padding:15px;display:flex;justify-content:space-between}
nav ul{list-style:none;display:flex;gap:15px}nav a{color:#fff;text-decoration:none}
.section{background-color: white; margin-left: 20%; padding-top: 5%; margin-right: 20%; border-radius: 15px; padding-left: 10px; padding-right: 10px;}
.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;
  margin-top: -2%;
}
.project1 .project3 .pr{
  font-style: italic;
}
.cookie-notice {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #111;
  color: white;
  padding: 15px;
  text-align: center;
}
.cookie-notice button {
  margin-left: 10px;
  padding: 8px 15px;
}
.project1 .pr{
  width: 55%;
  line-height: 1.2;
  margin-left: 24%;
}
.project1 .pro{
  margin-left: 25%;
}
.project1{
  background-color: pink;
}
body{
  background-color: pink;
}
.project2{
  margin-left: 6%;
  margin-right: 6%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  background-color: white;
  padding-bottom: 20px;
  padding-top: 20px;
}
.project3 .tnt{
  padding-left: 15%;
  width: 90%;
}
.project3 .nt{
  padding-left: 30%;
}
.project3{
  background-color: rgb(209, 209, 204);
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 15px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }
  nav ul {
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }
  .section {
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 5px;
    padding-right: 5px;
  }
  .project1 .pr {
    width: 90%;
    margin-left: 5%;
  }
  .project1 .pro {
    margin-left: 5%;
  }
  .project2 {
    margin-left: 2%;
    margin-right: 2%;
  }
  .project3 {
    margin-left: 5%;
    margin-right: 5%;
  }
  .project3 .tnt {
    padding-left: 5%;
    width: 90%;
  }
  .project3 .nt {
    padding-left: 5%;
    margin-bottom: 10px;
  }
  .project2 img {
    width: 90% !important;
    padding-left: 5% !important;
  }

  .hero {
    height: 300px;
  }
}

@media (max-width: 480px) {
  nav ul {
    gap: 5px;
  }
  .section {
    margin-left: 2%;
    margin-right: 2%;
  }
  .project1 .pr {
    width: 95%;
    margin-left: 2%;
  }
  .project1 .pro {
    margin-left: 2%;
  }
  .project2 {
    margin-left: 1%;
    margin-right: 1%;
  }
  .project3 {
    margin-left: 2%;
    margin-right: 2%;
  }
  .project2 img {
    width: 95% !important;
    padding-left: 2.5% !important;
  }
  input, textarea {
    width: 95% !important;
  }
  .hero {
    height: 250px;
  }
}

/* Hamburger menu */
#nav-menu {
  position: fixed;
  top: 0;
  left: -150px;
  width: 100px;
  height: 65vh;
  background: orange;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 80px;
  padding-left: 15px;
  transition: left 0.3s ease;
  z-index: 900;
  box-shadow: 2px 0 5px rgba(0,0,0,0.3);
}
.nava{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background: orange;
  color: white;
  z-index: 900;
}
#nav-menu.show {
  left: 0;
}
#nav-menu li {
  margin: 10px 0;
}
.hamburger {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 1001;
}
.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  margin-bottom: 20px;
}

.project2 img {
  width: 50%;
  height: 30%;
  /* margin-top: 10%; */
  margin-left: 15%;
  border-radius: 10px;
  transition: opacity 0.8s ease-in-out;
  user-select: none; /* Prevent image selection during swipe */
  touch-action: pan-y; /* Allow vertical scroll while swiping horizontally */
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .project2 img {
    width: 60%;
    margin-left: 5%;
  }
}