html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}
.header-area-2 {
  background-color: transparent;
}
.projects-page-container {
  background: linear-gradient(180deg, #000 0.5%, #00000000 500px);
}
.projects-page-container .project-nav-area {
  background: none;
}
.projects-page-container .project-nav-area.fixed {
  background-color: #fff !important;
}
.project-nav-area .project-nav-list {
  box-shadow: none;
}
.project-nav-list .nav-tabs .nav-link {
  display: flex;
  align-items: center;
  border: none;
  color: #3d3d3d;
  height: 36px;
  background-color: #fff;
  gap: 10px;
  border-radius: 50px;
}
.project-nav-area.fixed .project-nav-list .nav-tabs .nav-link {
  border: 1px solid #ccc;
}
.project-nav-list .nav-tabs .nav-link svg {
  height: 16px;
}
.project-nav-list .nav-tabs .nav-link.active {
  background-color: #000;
  color: #fff;
}
.project-nav-list .nav-tabs .nav-link.active svg path {
  fill: #fff;
}
.project-nav-area .project-nav-list .nav-tabs {
  column-gap: 5px;
}
.project-nav-area .project-nav-list .nav-tabs li {
  height: auto;
}
.projects-page-container .project-page-heading {
  font-family: "Noir Noir Regular", sans-serif;
  font-size: 100px;
  text-transform: uppercase;
  text-align: center;
  padding-block: 170px 90px;
  background: linear-gradient(100deg, #ffffff 15%, #ffd56a 65%);
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bannerAnimation 5s linear infinite;
}

@keyframes bannerAnimation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.projects-section-container {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 25px;
}

.projects-section-sidebar {
  width: 280px;
  background-color: #fff;
  position: sticky;
  top: 70px;
  margin-bottom: 90px;
  padding: 40px 26px;
  border-radius: 0;
  box-shadow: none;
  /* border: 1px solid #8E8E8E; */
}
.projects-section-sidebar .sidebar {
  display: flex;
  flex-direction: column;
  gap: 50px;
  position: relative;
}
.projects-section-sidebar .sidebar a {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 18px;
  cursor: pointer;
}
/* hover state */
.projects-section-sidebar .sidebar a:nth-child(1):hover span {
  color: #017c76;
}
.projects-section-sidebar .sidebar a:nth-child(2):hover span {
  color: #0b9a8a;
}
.projects-section-sidebar .sidebar a:nth-child(3):hover span {
  color: #48a367;
}
.projects-section-sidebar .sidebar a:nth-child(4):hover span {
  color: #f18f01;
}
.projects-section-sidebar .sidebar a:nth-child(5):hover span {
  color: #e54135;
}
.projects-section-sidebar .sidebar a:nth-child(1):hover svg path {
  fill: #017c76;
}
.projects-section-sidebar .sidebar a:nth-child(2):hover svg path {
  fill: #128d59;
}
.projects-section-sidebar .sidebar a:nth-child(3):hover svg path {
  fill: #7aad44;
}
.projects-section-sidebar .sidebar a:nth-child(4):hover svg path {
  fill: #f18f01;
}
.projects-section-sidebar .sidebar a:nth-child(5):hover svg path {
  fill: #e54135;
}

/* Active state */
.projects-section-sidebar .sidebar a:nth-child(1).active span {
  color: #017c76;
}
.projects-section-sidebar .sidebar a:nth-child(2).active span {
  color: #0b9a8a;
}
.projects-section-sidebar .sidebar a:nth-child(3).active span {
  color: #48a367;
}
.projects-section-sidebar .sidebar a:nth-child(4).active span {
  color: #f18f01;
}
.projects-section-sidebar .sidebar a:nth-child(5).active span {
  color: #e54135;
}
.projects-section-sidebar .sidebar a:nth-child(1).active svg path {
  fill: #017c76;
}
.projects-section-sidebar .sidebar a:nth-child(2).active svg path {
  fill: #128d59;
}
.projects-section-sidebar .sidebar a:nth-child(3).active svg path {
  fill: #7aad44;
}
.projects-section-sidebar .sidebar a:nth-child(4).active svg path {
  fill: #f18f01;
}
.projects-section-sidebar .sidebar a:nth-child(5).active svg path {
  fill: #e54135;
}

/* active indicator */
.projects-section-sidebar .sidebar a.active::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #128d59;
  position: absolute;
  right: 0;
  margin-left: 4px;
}
.projects-section-sidebar .sidebar a .sidebar-active-icon {
  display: none;
}
.projects-section-sidebar .sidebar a.active .sidebar-icon {
  display: none;
}
.projects-section-sidebar .sidebar a.active .sidebar-active-icon {
  display: block;
}
.projects-section-sidebar .sidebar a:hover .sidebar-icon {
  display: none;
}
.projects-section-sidebar .sidebar a:hover .sidebar-active-icon {
  display: block;
}
.projects-section-sidebar .sidebar a:nth-child(1).active::after {
  border-color: #017c76;
}
.projects-section-sidebar .sidebar a:nth-child(2).active::after {
  border-color: #0b9a8a;
}
.projects-section-sidebar .sidebar a:nth-child(3).active::after {
  border-color: #48a367;
}
.projects-section-sidebar .sidebar a:nth-child(4).active::after {
  border-color: #f18f01;
}
.projects-section-sidebar .sidebar a:nth-child(5).active::after {
  border-color: #e54135;
}

.project-body-area.projects-page {
  flex: 1;
  padding-top: 0;
}
.project-img::before {
  display: none;
}
.project-content.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.content-wrapper .see-details-button {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-transform: uppercase;
}
.content-wrapper .see-details-button:hover span {
  color: #2d995e;
  text-decoration: underline;
}
.content-wrapper .see-details-button:hover svg path {
  fill: #2d995e;
}

/* responsive codes */
@media (max-width: 1440px) {
  .projects-page-container .project-page-heading {
    font-size: 80px;
  }
  .projects-page-container .project-page-heading {
    padding-block: 140px 60px;
  }
}
@media (max-width: 992px) {
  .projects-section-sidebar {
    display: none;
  }
  .projects-page-container .project-page-heading {
    font-size: 60px;
    padding-block: 150px 0px;
  }
  .project-nav-area {
    padding: 85px 0 25px;
  }
  .projects-page-container .project-nav-area.fixed {
    background-color: #000;
    top: 0;
    padding-block: 5px;
  }
}

@media (max-width: 768px) {
  .projects-page-container .project-page-heading {
    font-size: 40px;
    padding-block: 100px 10px;
  }
  .project-nav-area {
    padding: 30px 0 20px;
  }
  .project-name h2 {
    font-size: 14px;
  }
  .content-wrapper .see-details-button span {
    display: none;
  }
}

@media (max-width: 576px) {
  .projects-page-container {
    background: linear-gradient(180deg, #000 0.1%, #00000000 300px);
  }
  .projects-page-container .project-page-heading {
    font-size: 25px;
    padding-block: 90px 0px;
  }
  .project-nav-list .nav-tabs .nav-item .nav-link {
    gap: 5px;
  }
  .project-content .project-tags .sidebar a span {
    font-size: 10px;
  }
  .project-content .project-name h2 {
    font-size: 14px;
  }
}