.projects {

  width: 100%;
  height: fit-content;
  background-image: url('../image/projects-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  /* background-color: aqua; */
}

.right>div a:hover span {
  color: var(--dark-blue);
}

.right>div a:hover svg path {
  fill: var(--dark-blue);
}

.mySwiper2 .swiper-wrapper {
  padding-bottom: 60px;
}

.pagination-group {
  margin-top: 80px !important;
}

.projects h2 {
  margin-bottom: 10px;
}

.project-details-section h3.pdb-h3 {
  margin-bottom: 12px;
}

.project-details-section h4 {
  margin-bottom: 20px;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}


.project-box-img {
  width: 100%;
  height: 100%;
}

.project-box-img img {
  max-width: 100%;
  height: 100%;
}

.projects-section,
.project-details-section {
  width: 100%;
  height: 100%;
  background-image: url('../image/projects-bg.png');
  background-size: cover;
}

ul.pagination {
  gap: 15px;
}

ul.pagination .page-item {
  width: 50px;
  height: 50px;
}

ul.pagination .page-item>.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(236, 246, 235, 1);
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 7px;
  color: var(--green);
  box-shadow: none;
}

ul.pagination .page-item>.page-link:hover,
ul.pagination .page-item>.page-link.active {
  background-color: var(--green);
  color: #fff;
}


._left-box>div {
  width: 100%;
  height: 490px;
}

._left-box>div>img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.project_group .project_box:nth-child(even) ._right-box {
  margin-right: -100px;
}

.project_group .project_box:nth-child(even) {
  flex-direction: row-reverse;
}

._right-box {
  background-color: #fff;
  padding: 30px;
  margin-left: -100px;
  position: relative;
  z-index: 99;
}

._right-box a:hover span {
  color: var(--dark-blue);
}

._right-box a:hover svg path {
  fill: var(--dark-blue);
}

.box .right a span {
  color: var(--green);
}

.swiper-pagination-bullet-active {
  background-color: var(--green) !important;
}

/* .projects .swiper-slide{width: fit-content !important;} */
.projects .swiper-pagination-bullets {
  /* background-color: black !important; */
  position: absolute !important;
}

.projects .swiper-pagination {
  margin-bottom: 5px !important;
  left: 50% !important;
  transform: translate(-50%);
  width: fit-content !important;
  height: fit-content !important;
}

.project-details-ul ul {
  list-style: inside;
}

.project-details-section p,
.project-details-section ul {
  color: var(--grey);
}

.project-details-box-right {
  background: #EDF7EC;
  width: 100%;
  height: fit-content;
  padding: 30px;

}

.project-info-img {
  width: 42px;
  height: 42px;
  background-color: #4AAB3D1A;
}

.project-info-des span {
  font-weight: var(--semi-bold);
  color: var(--grey);
}

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.project_group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.project-card {
  width: 100%;
}

.right {
  background-color: #fff;
  padding: 30px;
  width: 515px;
  height: fit-content;
  margin-left: -100px;
}

.right p {
  color: var(--grey);
}

.left img {
  object-fit: cover;
}

.project-right-box img {
  object-fit: cover;
}

.box {
  margin-top: 30px;
}

@media (max-width:1199px) {
  .right {
    margin-left: 0;
  }
}

.project-right-box {
  background-color: #fff;
  padding: 30px;
  width: 515px;
  height: fit-content;
  margin-right: -120px;
  z-index: 999;
}

@media (max-width:1199px) {

  .box {
    flex-direction: column;
  }

  .right {
    margin-left: 0;
    width: 50%;
    margin-top: -200px;
  }
}

@media (max-width:1024px) {
  .left {
    height: 400px;
  }

  .project-right-box {
    height: 400px;
  }

  .left img {
    height: 100%;
  }

  .project-right-box img {
    height: 100%;
  }

  /* .project-right-box{margin-right: 0; width: 50%; margin-bottom:0;} */
}

@media (max-width:991px) {
  .projects {
    margin-top: 0;
    /* padding: 50px 0; */
  }

  .slider {
    top: 0%;
    left: 0;
    transform: translate(0%, 0%);
    padding: 15px 15px;
    width: 100%;
    height: fit-content;
  }

  /* .left{} */
  .left img {
    width: 100%;
  }

  /* .projects{margin-top: 0; height: fit-content;} */
  .project_box {
    flex-direction: column;
  }

  .project_group .project_box:nth-child(even) ._left-box img {
    margin-left: 0px;
    width: 100%;
  }

  .project_group .project_box:nth-child(even) ._right-box {
    margin-right: 0;
  }

  ._right-box {
    margin-left: 0;
    margin-top: -100px;
  }

  .project_group .project_box:nth-child(even) {
    flex-direction: column;
  }

}

@media (max-width:860px) {
  .box {
    flex-direction: column;
  }

  /* .left{} */
  .left img {
    width: 100%;
  }

  .right {
    margin-left: 0;
  }

  /* .project-right-box{margin-right: 0;} */
}


@media (max-width:767px) {
  .project-details-group {
    flex-direction: column;
  }

  .project-details-box-left p,
  .project-details-box-left h3,
  .project-details-box-left h4 {
    text-align: center;
  }

  .project-details-ul {
    flex-direction: column;
    justify-self: center;
  }
}

._right-box a span {
  color: var(--green);
}

@media (max-width:575px) {
  .right {
    justify-items: center;
    text-align: center;
  }

  .right a {
    justify-content: center;
  }

  .project-right-box {
    justify-items: center;
    text-align: center;
  }

  .right h3 {
    font-size: 23px !important;
    line-height: 30px !important;
  }

  ._right-box h3 {
    font-size: 23px !important;
    line-height: 30px !important;
  }

  ._right-box {
    justify-items: center;
    text-align: center;
  }

  ._right-box a {
    justify-content: center;
  }

}