@charset "utf-8";

.single-wrap {
  padding-block: var(--space-60) var(--space-60);
  background-color: #F9F5FCCC;
  border-bottom: 1px solid var(--clr-border-600);
  border-top: 1px solid var(--clr-border-600);
}

.cmn-wrap {
  --cmn-wrap-padding: var(--space-80) var(--space-110) var(--space-40);
}

.single-ttl {
  margin-top: .75rem;
  font-size: 3rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: -1px;
}

.single-blog .post-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  margin-top: var(--space-10);
}

.single-content p+p {
  margin-top: var(--space-30);
}

.single-content .wp-block-image img {
  margin-inline: auto;
}

.single-content .wp-block-image,
.single-content .wp-block-gallery {
  max-width: 800px;
  margin-block: var(--space-40);
}

.single-content .wp-block-gallery.has-nested-images {
  --wp--style--gallery-gap-default: var(--space-60);
}

.single-content .wp-block-image figcaption {
  margin-top: var(--space-20);
  margin-bottom: unset;
  font-size: var(--fs-14);
  text-align: center;
}

.nav-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.nav-wrap a:hover {
  opacity: 0.7;
}

.back-to-list-wrap .btn-next-link {
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid var(--clr-neutral-600);
  padding-block: var(--space-30);
}

.back-to-list-wrap .btn-back-to-list {
  display: flex;
  justify-content: center;
  padding-top: var(--space-30);
  max-width: inherit;
  width: fit-content;
  margin-inline: auto;
}

@keyframes arrow-move-diagonal-reverse {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  40% {
    transform: translateY(10px);
    opacity: 0;
  }

  50% {
    transform: translateY(-10px);
    opacity: 0;
  }

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

.back-to-list-wrap a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-neutral-900);
  text-decoration: none;
  gap: var(--space-10);
}

.btn-back-to-list .btn.btn-primary span {
  transform: rotate(-135deg);
}

.back-to-list-wrap a:hover svg rect,
.back-to-list-wrap .btn-back-to-list:hover svg path {
  fill: var(--clr-primary);
}

.btn-back-to-list .btn.btn-primary:hover svg

.btn-back-to-list .btn.btn-primary:hover svg {
  animation: arrow-move-diagonal-reverse 0.5s;
}

.back-to-list-wrap a:hover {
  color: var(--clr-primary);
}

.back-to-portfolio a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-family: var(--font-secondary);
  font-size: var(--fs-18);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s;
  text-transform: capitalize;
}

.back-to-portfolio a:hover {
  color: var(--clr-primary);
}

.back-to-portfolio a:hover svg path {
  fill: var(--clr-primary);
}

.is-layout-flex.wp-block-group {
  column-gap: var(--space-40);
}

.single .sub-mv .single-blog {
  /* display: flex; */
  justify-content: space-between;
  column-gap: var(--space-100);
}

.project-detail,
.news-date {
  padding-block: .625rem;
}

.single-news .post-info {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.technology-terms p {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-10);
}

.technology-type-terms p {
  display: flex;
  align-items: center;
  position: relative;
  color: #1A1C21;
  font-family: var(--font-secondary);
}

.tech-type-name {
  font-size: var(--fs-32);
}

.single-blog .single-blog-detail {
  flex-grow: 1;
}

.back-to-portfolio {
  padding-bottom: var(--space-100);
}

@media (max-width: 64em) {
  .single-ttl {
    font-size: 2.5rem;
  }

  .single .sub-mv .single-blog {
    column-gap: 3.125rem;
  }

  .technology-type-terms p {
    font-size: 14px;
  }

  .blog-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 48em) {
  .single-ttl {
    font-size: var(--fs-24);
  }

  .single-content .wp-block-gallery.columns-2 {
    flex-direction: column;
  }

  .single-content .wp-block-gallery.columns-2>* {
    width: 100% !important;
  }

  .single-content .wp-block-image {
    margin-block: var(--space-30);
  }

  .single .sub-mv .single-blog {
    flex-direction: column;
    row-gap: var(--space-40);
  }

  .single-blog .single-blog-detail {
    width: 100%;
  }

  .single-wrap {
    padding-block: var(--space-40) var(--space-40);
  }
}