.card-portfolio {
  position: relative;
  transition: 0.4s ease;
  overflow: hidden;
}
.card-portfolio__image-container {
  position: relative;
  width: 100%;
  display: block;
}
.card-portfolio__image-container:before {
  content: "";
  display: block;
  padding-top: 116.6666666667%;
}
.card-portfolio__image-container .ratio-item {
  -o-object-fit: cover;
     object-fit: cover;
}
.card-portfolio__image-container {
  display: block;
  overflow: hidden;
}
.card-portfolio__image {
  transition: 1s ease;
}
.card-portfolio__info-container {
  padding: 16px;
  position: absolute;
  top: 50%;
  left: -100%;
  transform: translateY(-50%);
  width: 80%;
  background-color: #1C1C1C;
  transition: 0.4s ease;
}
.card-portfolio__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.card-portfolio__title {
  margin-bottom: 0px;
  font-size: 22px;
  letter-spacing: 1.5px;
  font-weight: 300;
  text-transform: uppercase;
  color: white;
  line-height: 1;
}
.card-portfolio__category {
  font-size: 12px;
  color: white;
}
.card-portfolio:hover .card-portfolio__image {
  transform: scale(1.1);
}
.card-portfolio:hover .card-portfolio__info-container {
  left: 0px;
}

.navbar-custom {
  background: rgba(0, 0, 0, 0.5);
}
.navbar-custom .navbar-brand {
  max-width: 60px;
  height: auto;
}

.project-header {
  position: relative;
  background-color: #E2DED2;
  height: 100vh;
}
.project-header__image-container {
  position: relative;
  width: 100%;
  display: block;
}
.project-header__image-container:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.project-header__image-container .ratio-item {
  -o-object-fit: cover;
     object-fit: cover;
}
.project-header__container {
  position: absolute;
  bottom: 100px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #252525;
}
.project-header__title {
  margin-bottom: 80px;
  font-size: 72px;
  font-weight: 400;
  letter-spacing: 1.5px;
}
@media only screen and (max-width: 767.98px) {
  .project-header__title {
    margin-bottom: 40px;
    font-size: 50px;
  }
}
.project-header__info {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  justify-content: space-between;
  align-items: end;
}
@media only screen and (max-width: 991.98px) {
  .project-header__info {
    grid-template-columns: 2fr 1fr;
    gap: 32px;
  }
}
@media only screen and (max-width: 575.98px) {
  .project-header__info {
    grid-template-columns: 1fr;
  }
}
.project-header__services {
  margin-bottom: 64px;
}
@media only screen and (max-width: 767.98px) {
  .project-header__services {
    margin-bottom: 42px;
  }
}
.project-header__service-title {
  margin-bottom: 4px;
  font-size: 14px;
}
.project-header__service-item {
  position: relative;
  font-size: 24px;
  padding-right: 14px;
  margin-right: 10px;
}
.project-header__service-item:last-child::before {
  display: none;
}
.project-header__service-item::before {
  position: absolute;
  content: "";
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: #252525;
}
.project-header__detail-title, .project-header__studio-name, .project-header__photographer-title {
  font-size: 20px;
  margin-bottom: 4px;
}
.project-header__creator-list {
  margin: 0px;
  list-style: none;
  padding: 0px;
}
.project-header__creator-item {
  margin-bottom: 0px;
  margin-right: 8px;
  display: inline-block;
}
.project-header__right {
  text-align: right;
}
@media only screen and (max-width: 991.98px) {
  .project-header__right {
    text-align: left;
  }
}
.project-header__photographer-name {
  margin-bottom: 0px;
  font-weight: 500;
}
.project-header__detail-list {
  max-width: 50%;
}
@media only screen and (max-width: 991.98px) {
  .project-header__detail-list {
    max-width: 80%;
  }
}
@media only screen and (max-width: 767.98px) {
  .project-header__detail-list {
    max-width: 100%;
  }
}
.project-header__detail-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.project-header__detail-item-title, .project-header__detail-item-value {
  margin: 0px;
}
.project-header__detail-item-value {
  font-weight: 500;
}
.project-header__image-container {
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 50%;
  width: 50%;
}
.project-header__overlay {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #000000;
  opacity: 0;
  z-index: 1;
}

.project-content {
  padding: 5vw 0vw 0vw 0vw;
}
@media screen and (max-width: 1199px) {
  .project-content {
    padding: 8.0066722269vw 0vw 0vw 0vw;
  }
}
@media screen and (max-width: 767px) {
  .project-content {
    padding: 7.8226857888vw 0vw 0vw 0vw;
  }
}
@media screen and (max-width: 480px) {
  .project-content {
    padding: 12.5vw 0vw 0vw 0vw;
  }
}
.project-content__inner {
  max-width: 80%;
  margin: 0 auto;
  font-size: 16px;
  line-height: 2;
}
@media only screen and (max-width: 767.98px) {
  .project-content__inner {
    max-width: 100%;
  }
}

/* ---- grid ---- */
.grid {
  margin-top: 64px;
}
.grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
  width: 23.9%;
  margin-bottom: 12px;
}
@media only screen and (max-width: 1399.98px) {
  .grid-sizer,
  .grid-item {
    width: 23.5%;
  }
}
@media only screen and (max-width: 991.98px) {
  .grid-sizer,
  .grid-item {
    width: 31.9%;
  }
}
@media only screen and (max-width: 575.98px) {
  .grid-sizer,
  .grid-item {
    width: 47%;
  }
}

.grid-item {
  float: left;
  overflow: hidden;
}
.grid-item img {
  display: block;
  max-width: 100%;
  transition: 1s ease;
}
.grid-item:hover img {
  cursor: pointer;
  transform: scale(1.1);
}

.project-related {
  padding: 5vw 0vw;
  position: relative;
}
@media screen and (max-width: 1199px) {
  .project-related {
    padding: 8.0066722269vw 0vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related {
    padding: 12.5162972621vw 0vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related {
    padding: 20vw 0vw;
  }
}
.project-related .swiper-button-prev,
.project-related .swiper-button-next {
  width: 2.7604166667vw;
  height: 2.7604166667vw;
  background-color: #af925e;
  border: 1px solid #af925e;
  border-radius: 100%;
  transition: 0.4s ease;
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    width: 4.4203502919vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    width: 5.2151238592vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    width: 8.3333333333vw;
  }
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    height: 4.4203502919vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    height: 5.2151238592vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    height: 8.3333333333vw;
  }
}
.project-related .swiper-button-prev svg,
.project-related .swiper-button-next svg {
  width: 1.09375vw;
  height: 1.09375vw;
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    width: 1.7514595496vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    width: 2.0860495437vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    width: 3.3333333333vw;
  }
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    height: 1.7514595496vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    height: 2.0860495437vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    height: 3.3333333333vw;
  }
}
.project-related .swiper-slide {
  overflow: hidden;
}
.project-related .swiper-button-prev {
  left: 0px;
}
.project-related .swiper-button-next {
  right: 0px;
}
.project-related .swiper-button-prev:after,
.project-related .swiper-button-next:after {
  display: none;
}
.project-related .swiper-pagination-progressbar.swiper-pagination-horizontal {
  height: 0.1041666667vw;
  background-color: #E3E3E3;
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-pagination-progressbar.swiper-pagination-horizontal {
    height: 0.1668056714vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-pagination-progressbar.swiper-pagination-horizontal {
    height: 0.260756193vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-pagination-progressbar.swiper-pagination-horizontal {
    height: 0.4166666667vw;
  }
}
.project-related .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #af925e;
  position: absolute;
}
.project-related .swiper-button-prev,
.project-related .swiper-button-next {
  width: 2.7604166667vw;
  height: 2.7604166667vw;
  background-color: #af925e;
  border: 1px solid #af925e;
  border-radius: 100%;
  transition: 0.4s ease;
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    width: 4.4203502919vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    width: 5.2151238592vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    width: 8.3333333333vw;
  }
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    height: 4.4203502919vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    height: 5.2151238592vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-button-prev,
  .project-related .swiper-button-next {
    height: 8.3333333333vw;
  }
}
.project-related .swiper-button-prev svg,
.project-related .swiper-button-next svg {
  width: 1.09375vw;
  height: 1.09375vw;
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    width: 1.7514595496vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    width: 2.0860495437vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    width: 3.3333333333vw;
  }
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    height: 1.7514595496vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    height: 2.0860495437vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-button-prev svg,
  .project-related .swiper-button-next svg {
    height: 3.3333333333vw;
  }
}
.project-related .swiper-button-prev {
  left: 0px;
}
.project-related .swiper-button-next {
  right: 0px;
}
.project-related .swiper-button-prev:after,
.project-related .swiper-button-next:after {
  display: none;
}
.project-related .swiper-pagination-progressbar.swiper-pagination-horizontal {
  height: 0.1041666667vw;
  background-color: #E3E3E3;
}
@media screen and (max-width: 1199px) {
  .project-related .swiper-pagination-progressbar.swiper-pagination-horizontal {
    height: 0.1668056714vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related .swiper-pagination-progressbar.swiper-pagination-horizontal {
    height: 0.260756193vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related .swiper-pagination-progressbar.swiper-pagination-horizontal {
    height: 0.4166666667vw;
  }
}
.project-related .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #af925e;
  position: absolute;
}
.project-related__inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.project-related__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.project-related__listing {
  margin-top: 3.125vw;
  width: 100%;
}
@media screen and (max-width: 1199px) {
  .project-related__listing {
    margin-top: 5.0041701418vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related__listing {
    margin-top: 4.1720990874vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related__listing {
    margin-top: 6.6666666667vw;
  }
}
@media only screen and (max-width: 575.98px) {
  .project-related__action {
    margin-top: 24px;
    width: 100%;
    display: grid;
    order: 3;
  }
}
.project-related__slider-action {
  margin-top: 4.1666666667vw;
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media screen and (max-width: 1199px) {
  .project-related__slider-action {
    margin-top: 6.6722268557vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related__slider-action {
    margin-top: 3.9113428944vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related__slider-action {
    margin-top: 6.25vw;
  }
}
.project-related__pagination-container {
  position: relative;
  flex: 1;
}
.project-related__slider-navigation {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 7.2916666667vw;
  height: 3.125vw;
}
@media screen and (max-width: 1199px) {
  .project-related__slider-navigation {
    width: 11.6763969975vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related__slider-navigation {
    width: 13.037809648vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related__slider-navigation {
    width: 20.8333333333vw;
  }
}
@media screen and (max-width: 1199px) {
  .project-related__slider-navigation {
    height: 5.0041701418vw;
  }
}
@media screen and (max-width: 767px) {
  .project-related__slider-navigation {
    height: 6.518904824vw;
  }
}
@media screen and (max-width: 480px) {
  .project-related__slider-navigation {
    height: 10.4166666667vw;
  }
}

.cta {
  padding: 0vw 0vw 5vw 0vw;
}
@media screen and (max-width: 1199px) {
  .cta {
    padding: 0vw 0vw 8.0066722269vw 0vw;
  }
}
@media screen and (max-width: 767px) {
  .cta {
    padding: 0vw 0vw 7.8226857888vw 0vw;
  }
}
@media screen and (max-width: 480px) {
  .cta {
    padding: 0vw 0vw 12.5vw 0vw;
  }
}
.cta__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
@media only screen and (max-width: 767.98px) {
  .cta__inner {
    display: grid;
    align-items: unset;
    justify-content: unset;
    gap: 24px;
  }
}
.cta__title {
  font-size: 2.6041666667vw;
  color: #111827;
}
@media screen and (max-width: 1199px) {
  .cta__title {
    font-size: 4.1701417848vw;
  }
}
@media screen and (max-width: 767px) {
  .cta__title {
    font-size: 5.4758800522vw;
  }
}
@media screen and (max-width: 480px) {
  .cta__title {
    font-size: 8.75vw;
  }
}
@media only screen and (max-width: 767.98px) {
  .cta__action {
    display: grid;
  }
}

/*# sourceMappingURL=single-project.css.map*/