/* Landing Page */

body {
  overflow-x: hidden !important;
}

.ourservices-title {
  color: #d21d52 !important;
  font-size: calc(0.35rem + 1.5vw) !important;
}

.ourservices-text {
  color: #6c757d !important;
  font-size: calc(0.15rem + 1.5vw) !important;
}

.ourservices-icon {
  width: 3.6rem;
  height: 3.6rem;
}

@media (max-width: 700px) {
  .ourservices-icon {
    width: 2.6rem;
    height: 2.6rem;
  }
}

@media (max-width: 400px) {
  .ourservices-icon {
    width: 2rem;
    height: 2rem;
  }
}

@media (min-width: 1200px) {
  .ourservices-text {
    font-size: 0.8rem !important;
  }

  .ourservices-title {
    font-size: 1.4rem !important;
  }
}

/* CAROUSEL */
.projects-background {
  background: #fff !important;
}

.projects-carousel {
  width: calc(100% - 25%);
  height: 100%;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: grayscale(0.5) brightness(50%) blur(1px);

  position: relative;
}

.project-image-box {
  font-family: "Khand", sans-serif;
  color: #fff;
}

.project-image-box:hover {
  color: #fff !important;
}

.project-image-text-1::after {
  content: "Jelly Roll";

  position: absolute;
  top: 45%;
  left: 50%;

  font-size: calc(1rem + 2vw);
  font-weight: 600;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-1::before {
  content: "Design de embalagens";

  position: absolute;
  top: 51.5%;
  left: 50%;

  font-size: calc(0.2rem + 2vw);
  font-weight: 400;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-2::after {
  content: "Niruma Móveis";

  position: absolute;
  top: 45%;
  left: 50%;

  font-size: calc(1rem + 2vw);
  font-weight: 600;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-2::before {
  content: "Design editorial";

  position: absolute;
  top: 51.5%;
  left: 50%;

  font-size: calc(0.2rem + 2vw);
  font-weight: 400;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-3::after {
  content: "Dame Mini Menswear";

  position: absolute;
  top: 45%;
  left: 50%;

  font-size: calc(1rem + 2vw);
  font-weight: 600;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-3::before {
  content: "Produção audiovisual";

  position: absolute;
  top: 51.5%;
  left: 50%;

  font-size: calc(0.2rem + 2vw);
  font-weight: 400;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-4::after {
  content: "Natal Tramontina";

  position: absolute;
  top: 45%;
  left: 50%;

  font-size: calc(1rem + 2vw);
  font-weight: 600;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-4::before {
  content: "produção executiva e pós produção";

  position: absolute;
  top: 51.5%;
  left: 50%;

  font-size: calc(0.2rem + 2vw);
  font-weight: 400;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-5::after {
  content: "Tramontina Eletrik";

  position: absolute;
  top: 45%;
  left: 50%;

  font-size: calc(1rem + 2vw);
  font-weight: 600;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-5::before {
  content: "Criação de conteúdo e design gráfico";

  position: absolute;
  top: 51.5%;
  left: 50%;

  font-size: calc(0.2rem + 2vw);
  font-weight: 400;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-6::after {
  content: "Serra Gaúcha Estofados";

  position: absolute;
  top: 45%;
  left: 50%;

  font-size: calc(1rem + 2vw);
  font-weight: 600;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

.project-image-text-6::before {
  content: "Comunicação Integrada";

  position: absolute;
  top: 51.5%;
  left: 50%;

  font-size: calc(0.2rem + 2vw);
  font-weight: 400;

  transform: translate(-50%, -50%);

  z-index: 9999;
}

/* swiper buttons */

.swiper-button {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgb(75, 75, 75);
  display: flex;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.swiper-button-prev::after {
  display: none;
}

.swiper-button-next::after {
  display: none;
}

/* .projects-left-nav_prev {
  position: absolute;
  top: 45%;
  left: 10%;

  transform: translate(0%, -45%);
} */

.swiper-buttons-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  top: 50%;
  left: 9%;
  transform: translate(-9%, -50%);
  padding: 1rem;
  background-color: #ddd;
}

.swiper-buttons-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  top: 50%;
  right: 9%;
  transform: translate(9%, -50%);
  padding: 1rem;
  background-color: #ddd;
}

@media (max-width: 1500px) {
  .swiper-buttons-left {
    top: 50%;
    left: 5%;
    transform: translate(-5%, -50%);
  }
  .swiper-buttons-right {
    top: 50%;
    right: 5%;
    transform: translate(5%, -50%);
  }
}

@media (max-width: 900px) {
  .swiper-buttons-left {
    top: 50%;
    left: 3%;
    transform: translate(-3%, -50%);
    padding: 0.8rem;
    gap: 0.6rem;
  }
  .swiper-buttons-right {
    top: 50%;
    right: 3%;
    transform: translate(3%, -50%);
    padding: 0.8rem;
    gap: 0.6rem;
  }
}

@media (max-width: 650px) {
  .swiper-buttons-left {
    top: 50%;
    left: 2%;
    transform: translate(-2%, -50%);
    padding: 0.6rem;
    gap: 0.4rem;

    z-index: 887;
  }
  .swiper-buttons-right {
    top: 50%;
    right: 2%;
    transform: translate(2%, -50%);
    padding: 0.6rem;
    gap: 0.4rem;

    z-index: 888;
  }
  .swiper-button {
    width: 1.8rem;
    height: 1.8rem;
  }
}

@media (max-width: 450px) {
  .swiper-buttons-left {
    top: 50%;
    left: 0%;
    transform: translate(-0%, -50%);
    padding: 0.5rem;
    gap: 0.3rem;

    z-index: 887;
  }
  .swiper-buttons-right {
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    padding: 0.5rem;
    gap: 0.3rem;

    z-index: 888;
  }
  .swiper-button {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.25rem;
  }
}