.portfolio-section {
  width: 100%;
  position: relative;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(3.125rem, 5.637vw + 1.74rem, 6.25rem) 0 clamp(1.25rem, 21.333vw - 3.99rem, 6.25rem);
  background-color: #cfd3dc;
}
.portfolio-section .swiper-container:not(:last-child) {
  padding-bottom: clamp(4.375rem, 3.382vw + 3.544rem, 6.25rem);
}

.portfolio-main-title {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: clamp(1.875rem, 2.255vw + 1.321rem, 3.125rem);
  line-height: clamp(2.25rem, 0.451vw + 2.139rem, 2.5rem);
  text-transform: uppercase;
  text-align: center;
  color: var(--black-default);
  margin-bottom: clamp(1.25rem, 4.51vw + 0.142rem, 3.75rem);
}

.portfolio-text {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: clamp(1rem, 1.804vw + 0.557rem, 2rem);
  line-height: clamp(1.4rem, 1.804vw + 0.957rem, 2.4rem);
  color: var(--black-default);
  margin-bottom: clamp(0.75rem, -0.902vw + 1.472rem, 1.25rem);
}

.swiper-container {
  width: 99%;
  overflow: hidden;
  margin: 0 auto;
}

.swiper-wrapper {
  width: 100%;
}

.swiper-slide {
  width: 100%;
  border-radius: 32px;
}

.portfolio-item {
  position: relative;
}

.portfolio-item img {
  width: 100%;
  height: auto;
  border-radius: clamp(0.625rem, 2.292vw + 0.167rem, 2rem);
}

.portfolio-list {
  margin-bottom: clamp(1.25rem, 1.353vw + 0.918rem, 2rem);
}

.swiper-pagination {
  top: 50% !important;
  transform: translateY(-50%);
}
.swiper-pagination .swiper-pagination-bullet {
  width: clamp(0.5rem, 0.902vw + 0.278rem, 1rem);
  height: clamp(0.5rem, 0.902vw + 0.278rem, 1rem);
  background-color: transparent;
  border-radius: 100px;
  border: 2px solid var(--green-hover);
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--green-hover);
}

.navigation {
  height: 44px;
  position: relative;
}

.swiper-navigation {
  display: flex;
  gap: clamp(7.875rem, 6.99vw + 6.158rem, 11.75rem);
  justify-content: center;
}

.btn-prev,
.btn-next {
  position: relative;
  z-index: 11;
  border-radius: 12px;
  background-color: var(--green-hover);
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--time-function), stroke var(--time-function);
}

.btn-prev:hover,
.btn-next:hover {
  background-color: var(--green-default);
}
.btn-prev:hover .arrow-icon,
.btn-next:hover .arrow-icon {
  stroke: var(--black-default);
}

.btn-prev .arrow-icon {
  rotate: 180deg;
}

.btn-prev[disabled],
.btn-next[disabled] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.img-before-text {
  display: none;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 24px;
  line-height: 110%;
  color: #202833;
  position: absolute;
  bottom: 20px;
  right: calc(50% + 20px);
}
@media screen and (max-width: 767px) {
  .img-before-text {
    bottom: calc(50% + 20px);
    right: 20px;
  }
}
@media screen and (min-width: 768px) {
  .img-before-text {
    display: none;
  }
}

.img-after-text {
  display: none;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 24px;
  line-height: 110%;
  color: #202833;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
@media screen and (min-width: 768px) {
  .img-after-text {
    display: none;
  }
}
/*# sourceMappingURL=portfolio.css.map */