/*----------------------------------------*/
/*  Production Project (akel-html project grid)
/*  Mirrors assets/css/main.css "7.6 Project Css"
/*----------------------------------------*/
.tp-project-area {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-project-area {
    padding-top: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-area {
    padding-top: 120px;
    padding-bottom: 0;
  }
}
@media (max-width: 767px) {
  .tp-project-area {
    padding-top: 80px;
    padding-bottom: 0px;
  }
}
.tp-project-title {
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 13px;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: var(--tp-common-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-title {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .tp-project-title {
    font-size: 25px;
  }
}
.tp-project-category span {
  padding: 7px 17px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  transition: 0.3s;
  margin-right: 5px;
  margin-bottom: 8px;
  border-radius: 20px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-black);
  border: 1px solid rgba(19, 22, 13, 0.1);
}
.tp-project-category span:hover {
  border-color: #F6F6F9;
  background-color: #F6F6F9;
  color: var(--tp-common-black);
}
.tp-project-thumb {
  margin-bottom: 25px;
  position: relative;
}
.tp-project-thumb .tp--hover-img {
  overflow: hidden;
  display: block;
}
.tp-project-thumb .tp--hover-img img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.tp-project-thumb .tp--hover-img canvas {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.tp-project-subtitle-wrap .tp-section-subtitle {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-item {
    margin-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .tp-project-item {
    margin-bottom: 40px;
  }
}

/*------------------------------------------------------------------
    Thumb -> Hero page transition (production-project.js morph engine)
    Ported from akel-html/assets/css/ajax-transition.css
-------------------------------------------------------------------*/

/* ---- see-through dim backdrop behind the popped image ----
   A SEMI-TRANSPARENT dark overlay (not a solid colour) so the surrounding page
   content (the other project images) stays visible but darkened for depth,
   while the active image rides sharp above it. Faded in smoothly via GSAP, so
   no hard cut. Raise/lower the alpha (0.5) to dim more/less. */
#pd-morph-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(8, 9, 11, 0.5);
  pointer-events: none;
}

/* NOTE: the portfolio hero (.tp-pd-3-hero-area .des-portfolio-thumb) 16/9 sizing
   moved to portfolio.css (agntix-el-portfolio) — the stylesheet the hero widget
   (portfolio-thumb-card) actually loads — so the hero is sized correctly on a
   normal reload too, not only when this widget's CSS happens to be present. */

/* ---- the morphing image clone (rides above the backdrop) ---- */
#pd-morph-clone {
  position: fixed;
  z-index: 99992;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
  background: transparent;
}
#pd-morph-clone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- misc ---- */
body.pd-morphing {
  cursor: progress;
}
body.pd-morphing #smooth-content {
  pointer-events: none;
}

/* Keep the stage clean during the transition: hide the custom cursor ball and
   the back-to-top button so only the floating image is on screen. They sit
   above the backdrop (z-index), so they would otherwise show as leftovers. */
body.pd-morphing #magic-cursor,
body.pd-morphing .back-to-top-wrapper {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* The preloader belongs only to the first full load — never replay it
   during an AJAX swap. */
body.pd-morphing #preloader,
body.ajax-navigated #preloader {
  display: none !important;
}