/* Our projects */

main#our-projects {
  height: 100%;
  width: 100%;
  gap: 2rem;
}

main section#our-projects-hero {
  min-height: 30vh;
}

section#our-projects-hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

#our-projects-hero .our-projects-hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2rem;
  display: grid;
  justify-items: center;
  border-radius: 1rem;
}

#our-projects-hero .our-projects-hero-title {
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.75rem;
  text-shadow: 0px 0px 9px black;
  text-align: center;
}

#our-projects-hero .our-projects-hero-content hr {
  margin-bottom: 1rem;
  animation: underlineHeroTitle 2s linear;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

#our-projects {
  background-color: #000000;
  width: 100%;
}
#our-projects .project-carousel {
  overflow-x: hidden;
  padding: 1rem;
}

#our-projects .projects1 {
  border-radius: 1rem;
  display: grid;
  gap: 2rem;
}

#our-projects .projects2 {
  border-radius: 1rem;
  display: grid;
  gap: 2rem;
}

.project-carousel .project-nav {
  position: absolute;
  border: none;
  border-radius: 50%;
  display: grid;
  height: 3rem;
  width: 3rem;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000000;
  font-size: 1.5rem;
  text-align: center;
  align-items: center;
  box-shadow: 0px 1px 11px 10px rgba(255, 255, 255, 0.5);
  font-weight: 800;
  cursor: pointer;
}
.project-carousel .project-nav.left {
  left: 0.5rem;
  top: 50%;
  transform: translate(0, -50%);
}
.project-carousel .project-nav.right {
  right: 0.5rem;
  top: 50%;
  transform: translate(0, -50%);
}

.projects1 .project img,
.projects1 .project svg {
  object-fit: cover;
  object-position: center;
  width: var(--project-slider-width);
  height: var(--project-slider-height);
}

.projects2 .project img,
.projects2 .project svg {
  object-fit: cover;
  object-position: center;
  width: var(--project-slider-width);
  height: var(--project-slider-height);
}

#our-projects .projects1 .project {
  position: relative;
  min-height: var(--project-slider-height);
  animation-name: projects1;
  animation-iteration-count: infinite;
  animation-duration: 15s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1rem solid #ffffff;
  box-sizing: border-box;
  border-radius: 1rem;
}

#our-projects .projects2 .project {
  position: relative;
  min-height: var(--project-slider-height);
  animation-name: projects2;
  animation-iteration-count: infinite;
  animation-duration: 40s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1rem solid #ffffff;
  box-sizing: border-box;
  border-radius: 1rem;
}

@keyframes projects1 {
  0% {
    background-image: url("./asset/projects/project1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  20% {
    background-image: url("./asset/projects/project2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  40% {
    background-image: url("./asset/projects/project3.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  60% {
    background-image: url("./asset/projects/project4.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  80% {
    background-image: url("./asset/projects/project5.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  100% {
    background-image: url("./asset/projects/project1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}

@keyframes projects2 {
  0% {
    background-image: url("./asset/projects/Antaryami/1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  10% {
    background-image: url("./asset/projects/Antaryami/2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  20% {
    background-image: url("./asset/projects/Antaryami/3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  30% {
    background-image: url("./asset/projects/Antaryami/4.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  40% {
    background-image: url("./asset/projects/Antaryami/5.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  50% {
    background-image: url("./asset/projects/Antaryami/6.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  60% {
    background-image: url("./asset/projects/Antaryami/7.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  70% {
    background-image: url("./asset/projects/Antaryami/8.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  80% {
    background-image: url("./asset/projects/Antaryami/9.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  90% {
    background-image: url("./asset/projects/Antaryami/10.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  100% {
    background-image: url("./asset/projects/Antaryami/1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}

.projects1 p,
.projects1 h3 {
  text-align: justify;
  padding: 0 3rem;
}

.projects2 p,
.projects2 h3 {
  text-align: justify;
  padding: 0 3rem;
}

@media screen and (max-width: 431px) {
  .projects1 p,
  .projects1 h3 {
    text-align: justify;
    padding: 0 1rem;
  }
}

@media screen and (max-width: 431px) {
  .projects2 p,
  .projects2 h3 {
    text-align: justify;
    padding: 0 1rem;
  }
}

/* Our project ends */