:root {
  --homebg: #22092c;
  --aboutbg: #232d3f;
  --projectsbg: #005b41;
  --contactbg: #008170;
  --description: rgb(183, 185, 183);
  --calculation: 1;
  --w-column: 200px;
}
.project-mother-container {
  background-color: var(--aboutbg);
  padding: 3rem 0rem 2rem;
}

.project-mother-container .projects-text {
  margin-bottom: 3rem;
  color: #fff;
}
.project-mother-container .projects-text img {
  height: 1.5rem;
}

.carousel {
  height: 30rem;
  overflow: hidden;
  position: relative;
  padding-right: 10rem;
}

.carousel .list {
  width: 100%;
  height: max-content;
  position: relative;
}

.carousel .list .items {
  position: absolute;
  height: max-content;
  top: 0rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 2rem;
  inset: 0;
}

.carousel .list .items figure {
  align-self: self-start;
  width: 70%;
  height: 25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel .list .items figure img {
  width: 100%;
  height: 100%;
}

.carousel .list .items .content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  gap: 2rem;
  color: #fff;
  top: -15rem;
}
.carousel .list .items .content .category {
  font-weight: 500;
}
.carousel .list .items .content h2 {
  font-size: 5em;
  line-height: 1;
}
.carousel .list .items .content .description {
  color: var(--description);
  max-width: 400px;
  font-size: small;
  font-weight: 600;
  text-align: right;
}
.carousel .list .items .content .description strong {
  color: var(--contactbg);
}

.carousel .list .items .content .more {
  display: grid;
  grid-template-columns: repeat(2, 120px);
  gap: 20px;
  grid-template-rows: 35px;
}
.carousel .list .items .content .more button {
  border-radius: 30px;
  font-family: inherit;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.carousel .list .items .content .more button a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.carousel .list .items .content .more button:nth-child(1) {
  background-image: linear-gradient(to right, #81baa0, #46a39c);
}

.carousel .list .items .content .more button:nth-child(1):hover {
  border: 2px solid transparent;
  background: linear-gradient(#242745, #242745) padding-box,
    linear-gradient(to right, #81baa0, #46a39c) border-box;
}
.carousel .list .items .content .more button:nth-child(2) {
  border: 2px solid transparent;
  background: linear-gradient(#242745, #242745) padding-box,
    linear-gradient(to right, #81baa0, #46a39c) border-box;
}
.carousel .list .items .content .more button:nth-child(2):hover {
  background-image: linear-gradient(to right, #81baa0, #46a39c);
}
.carousel .arrows {
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: absolute;
  top: 0rem;
  right: 10rem;
}
.carousel .arrows button {
  width: 50px;
  height: 50px;
  break-before: 50%;
  border: 1px solid #659cdf55;
  background-color: #233442;
  color: #fff7;
  border-radius: 50%;
  font-family: monospace;
  font-size: large;
  pointer-events: auto;
  transition: 0.5s;
}
.carousel .arrows button:hover {
  border: 1px solid #659cdf;
  color: #fff;
}
.carousel .indicators {
  width: max-content;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  justify-content: end;
  gap: 10px;
  color: var(--contactbg);
  position: absolute;
  bottom: 0.5rem;
}
.carousel .indicators .cover-numbers {
  display: flex;
  gap: 0rem;
  align-items: baseline;
}

.carousel .indicators .cover-numbers strong {
  font-size: 1.2rem;
  display: none;
}

.carousel .indicators .number {
  font-size: 2rem;
}
.carousel .indicators ul {
  display: flex;
  gap: 10px;
}

.carousel .indicators ul li {
  width: 10px;
  height: 10px;
  background-color: #659cdf;
  border-radius: 10px;
  pointer-events: auto;
  cursor: pointer;
  transition: 0.5s;
  list-style: none;
}
.carousel .indicators ul li.activated {
  background-color: yellow;
}
/* ANIMATIONS */
.carousel .list .items {
  transition: 0.5s;
  transform: translateX(calc(100vw * var(--calculation)));
  opacity: 0;
}
.carousel .list .items figure img {
  transition: 0.5s;
  transition-delay: 0.3s;
}

.carousel .list .items .content .category,
.carousel .list .items .content h2,
.carousel .list .items .content .description,
.carousel .list .items .content .more {
  transform: translateX(calc(200px * var(--calculation)));
  transition: 0.7s;
  opacity: 0;
  transition-delay: 0.3s;
}
.carousel .list .items .content h2 {
  transition-delay: 0.5s;
}
.carousel .list .items .content .description {
  transition-delay: 0.7s;
}
.carousel .list .items .content .more {
  transition-delay: 0.9s;
}

.carousel .list .items.activated {
  opacity: 1;
  transform: translateX(0);
}

.carousel .list .items.activated .content .category,
.carousel .list .items.activated .content h2,
.carousel .list .items.activated .content .description,
.carousel .list .items.activated .content .more {
  transform: translateX(0);
  opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 1026px) {
  .project-mother-container .projects-text {
    padding: 0rem 2rem;
  }
  .carousel {
    padding: 0rem 2rem;
  }
  .carousel .list .items figure {
    align-self: self-start;
    width: 80%;
    height: 25rem;
  }
  .carousel .arrows {
    right: 2rem;
  }
}

@media (max-width: 830px) {
  .carousel .list .items .content h2 {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (max-width: 600px) {
  .project-mother-container {
    overflow: hidden;
  }
  .project-mother-container .projects-text {
    margin-bottom: 3rem;
    color: #fff;
    padding: 0rem 1rem;
    overflow: hidden;
  }
  .carousel {
    height: 31rem;
    padding: 0rem;
  }
  .carousel .list {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .carousel .list .items figure {
    align-self: center;
    width: 100%;
    height: 13rem;
  }
  .carousel .list .items .content {
    gap: 2rem;
    top: 0rem;
    padding: 0rem 1rem;
  }
  .carousel .list .items .content h2 {
    font-size: 2rem;
    line-height: 1;
  }
  .carousel .list .items .content .description {
    color: var(--description);
    max-width: 100%;
    font-size: small;
    text-align: right;
  }
  .carousel .arrows {
    gap: 1rem;
    position: absolute;
    top: 47%;
    right: 78%;
  }
  .carousel .arrows button {
    width: 2rem;
    height: 2rem;
    break-before: 50%;
  }
  .carousel .indicators {
    bottom: 0.5rem;
    left: 0.8rem;
  }
  .carousel .indicators ul {
    display: none;
  }
  .carousel .indicators .cover-numbers strong {
    display: flex;
  }
}

@media (max-width: 435px) {
  .carousel {
    height: 32.5rem;
    padding-right: 0rem;
  }
  .carousel .arrows {
    top: 46%;
    right: 77%;
  }
}

@media (max-width: 416px) {
  .carousel {
    height: 32.5rem;
    padding-right: 0rem;
  }
  .carousel .arrows {
    top: 45%;
    right: 77%;
  }
}

@media (max-width: 413px) {
  .carousel {
    height: 31.5rem;
    padding-right: 0rem;
  }
  .carousel .arrows {
    top: 46%;
    right: 77%;
  }
}

@media (max-width: 393px) {
  .carousel {
    height: 32.5rem;
    padding-right: 0rem;
  }
  .carousel .arrows {
    top: 45%;
    right: 76%;
  }
}

@media (max-width: 378px) {
  .carousel {
    height: 32.5rem;
    padding-right: 0rem;
  }
  .carousel .arrows {
    top: 45%;
    right: 75%;
  }
}
@media (max-width: 362px) {
  .carousel {
    height: 32.5rem;
    padding-right: 0rem;
  }
  .carousel .arrows {
    top: 44%;
    right: 74%;
  }
  .carousel .indicators {
    left: 0.4rem;
  }
}

@media (max-width: 346px) {
  .carousel {
    height: 33.5rem;
    padding-right: 0rem;
  }
  .carousel .arrows {
    top: 44%;
    right: 73%;
  }
  .carousel .indicators {
    left: 0.1rem;
    bottom: 0rem;
  }
}