* {
  margin: 0;
  padding: 0;
}

.project-container {
  padding: 3% 2% 0% 2%;
  font-family: var(--plus-jakarta);
}

.project-title {
  padding: 1% 1% 0% 19.8%;
  font-size: 14px;
  font-weight: 400;
  color: var(--TextColorAll);
}

.project-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text-part {
  display: flex;
  flex-direction: column;
  width: 45%;
  gap: 25px;
  font-size: 21.06px;
}

.item-for-project {
  display: flex;
  align-items: center;
  /* gap: 80px; */
  justify-content: space-between;
}

.black-font {
  color: black !important;
}

.for-text-header {
  font-size: 53px;
  font-family: var(--plus-jakarta);
  color: var(--TextColorAll);
}

.image-part {
  width: 45%;
  object-fit: contain;
}

.animationFromLeft {
  animation: animationLeft 2.5s ease forwards;

}

@keyframes animationLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

.animationFromRight {
  animation: animationRight 2.5s ease forwards;

}

@keyframes animationRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

.pd-top {
  padding-top: 5%;
}

.items-main-container {
  padding: 2% 0% 4% 0%;
}

.service-page-contactUS {
  background-image: url("../image/service-page-last-part.svg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 547px;
}

.Services-top-container {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--TextColorAll);
  margin: 0rem auto;
  padding-top: 4rem;
}

.Services-middle-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0rem auto;
  border-radius: 10px;
  object-fit: fill;
}

.font-size-for-contact {
  font-size: 70px;
}

.button-container {
  display: flex;
}

.button-container {
  padding: 2%;
}

.contact-us-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.service-page-contactUS {
  display: flex;
}

.background-for-project {
  background-color: var(--teambackground);
}

.button-for-contact {
  padding: 16px 30px;
  background-color: var(--primaryTextColor);
  color: var(--primary);
  font-size: 17px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  line-height: 23px;
  cursor: pointer;
}

.width-for-project {
  width: 50%;
  margin: 0px auto;
}

@media (max-width: 980px) {
  .font77px {
    font-size: 48px;
    margin: 21px auto;
  }

  .width80per {
    width: 73%;
    line-height: 25px;
  }

  .font19px {
    font-size: 17px;
  }

  .button-for-contact {
    padding: 11px 23px;
    background-color: var(--primaryTextColor);
    color: var(--primary);
    font-size: 16px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    line-height: 23px;
    cursor: pointer;
    margin: 25px auto;
  }

  .for-text-header {
    font-size: 35px;
  }

  .project-title {
    padding: 1% 1% 0% 16.8%;
  }

  .item-for-project {
    gap: 51px;
    width: 95%;
    margin: 0px auto;
  }

  .image-part {
    width: 80%;
    object-fit: contain;
  }

  .text-part {
    display: flex;
    flex-direction: column;
    width: 80%;
    gap: 25px;
    margin-top: 5%;
    font-size: 17.06px;
    text-align: center;
  }

  .footerBG {
    display: none;
  }
}

@media (max-width: 468px) {
  .font77px {
    font-size: 24px;
    margin: 51px auto;
    text-align: center;
    line-height: 30.24px;
    align-items: center;
    font-weight: 600;
  }

  .width80per {
    width: 106%;
    margin-left: -3%;
    text-align: center;
    line-height: 31px;
  }

  .font19px {
    font-size: 17px;
  }

  .for-text-header {
    font-size: 24px;
  }

  .width-for-project {
    width: 76%;
  }

  .project-title {
    padding: 1% 1% 0% 3%;
  }

  .project-container {
    padding: 13% 2% 0% 2%;
  }

  .item-for-project {
    flex-direction: column;
  }

  .pd-top {
    padding-top: 10%;
  }

  .image-part {
    width: 93%;
    object-fit: contain;
  }

  .text-part {
    display: flex;
    flex-direction: column;
    width: 93%;
    gap: 25px;
    margin-top: 5%;
    font-size: 17.06px;
    text-align: center;
  }

  .items-main-container {
    padding: 2% 0% 13% 0%;
    width: 100%;
    overflow: hidden;
  }

  .font-size-14px {
    font-size: 14px;
  }
}