.elementor-36 .elementor-element.elementor-element-1fc0410{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-30px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:2147483646;}.elementor-36 .elementor-element.elementor-element-8eea050 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-36 .elementor-element.elementor-element-0016ca1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-30px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:2147483646;}.elementor-36 .elementor-element.elementor-element-0984dab{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-36 .elementor-element.elementor-element-fe25c4c{--display:flex;}.elementor-36 .elementor-element.elementor-element-e1a6071{--display:flex;}.elementor-36 .elementor-element.elementor-element-2f6e71c{--display:flex;}.elementor-36 .elementor-element.elementor-element-15323a0{--display:flex;}.elementor-36 .elementor-element.elementor-element-aae6736{--display:flex;}.elementor-36 .elementor-element.elementor-element-6b59480{--display:flex;}.elementor-36 .elementor-element.elementor-element-40c5e81{--display:flex;}.elementor-36 .elementor-element.elementor-element-4ff20ff{--display:flex;}.elementor-36 .elementor-element.elementor-element-17d4792{--display:flex;}.elementor-36 .elementor-element.elementor-element-eea2b78{--display:flex;}.elementor-36 .elementor-element.elementor-element-e6ea6da{--display:flex;}.elementor-36 .elementor-element.elementor-element-6c55f25{--display:flex;}.elementor-36 .elementor-element.elementor-element-b3c9898{--display:flex;}.elementor-36 .elementor-element.elementor-element-fc56ec3{--display:flex;}.elementor-36 .elementor-element.elementor-element-c6fc6b7{--display:flex;}.elementor-36 .elementor-element.elementor-element-f7d0d64{--display:flex;}.elementor-36 .elementor-element.elementor-element-6b12d92{--display:flex;}.elementor-36 .elementor-element.elementor-element-cb2b08f{--display:flex;}.elementor-36 .elementor-element.elementor-element-c5beb73{--display:flex;}.elementor-36 .elementor-element.elementor-element-8528691{--display:flex;}@media(max-width:767px){.elementor-36 .elementor-element.elementor-element-0016ca1{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-36 .elementor-element.elementor-element-1fc0410{--width:100%;}.elementor-36 .elementor-element.elementor-element-0016ca1{--width:100%;}}/* Start custom CSS for tp-full-screen-interactive-links-slider, class: .elementor-element-8eea050 *//* =========================================================
   FULL-SCREEN INTERACTIVE PORTFOLIO
   PAGE ID: 36
   Complete replacement CSS
========================================================= */


/* =========================================================
   1. WORDPRESS ADMIN-BAR OFFSET
========================================================= */

body.page-id-36 {
  --portfolio-admin-offset: 0px;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  background: #000000 !important;
}

body.page-id-36.admin-bar {
  --portfolio-admin-offset: 32px;
}

@media screen and (max-width: 782px) {
  body.page-id-36.admin-bar {
    --portfolio-admin-offset: 46px;
  }
}


/* =========================================================
   2. LOCK THE ELEMENTOR PAGE TO THE VISIBLE SCREEN
========================================================= */

body.page-id-36:not(.elementor-editor-active) .elementor-36 {
  position: fixed !important;

  top: var(--portfolio-admin-offset) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  background: #000000 !important;
}


/* =========================================================
   3. ELEMENTOR CONTAINER AND WIDGET
========================================================= */

body.page-id-36 .elementor-element-1fc0410,
body.page-id-36 .elementor-element-8eea050,
body.page-id-36
  .elementor-element-8eea050
  > .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 0 !important;
  overflow: hidden !important;

  box-sizing: border-box !important;
}


/* Remove Elementor container variables that may create gaps */
body.page-id-36 .elementor-element-1fc0410 {
  --min-height: 100% !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  --gap: 0px !important;
}


/* =========================================================
   4. MAIN PORTFOLIO SECTION
========================================================= */

body.page-id-36
.tp-porfolio-10-area.tp-porfolio-10-height {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  background: #000000 !important;

  box-sizing: border-box !important;
}


/* =========================================================
   5. BACKGROUND IMAGE AREA
========================================================= */

body.page-id-36 .tp-porfolio-10-bg-wrap,
body.page-id-36 #tp-porfolio-10-bg-box {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/* Keep the image box behind the text */
body.page-id-36 .tp-porfolio-10-bg-wrap {
  z-index: 1 !important;
}

body.page-id-36 #tp-porfolio-10-bg-box {
  z-index: 1 !important;
}


/* Make every project image cover the screen */
body.page-id-36 .tp-porfolio-10-bg-css {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center center !important;

  border: 0 !important;
}


/* =========================================================
   6. BACKGROUND OVERLAY
   Darker in the centre where the titles appear
========================================================= */

body.page-id-36 .tp-porfolio-10-bg-wrap::after {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  z-index: 20 !important;

  pointer-events: none !important;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, 0.56) 0%,
      rgba(0, 0, 0, 0.46) 32%,
      rgba(0, 0, 0, 0.29) 62%,
      rgba(0, 0, 0, 0.14) 100%
    ) !important;
}


/* =========================================================
   7. RESTORE ORIGINAL HORIZONTAL POSITION
   AND CENTRE TITLES VERTICALLY
========================================================= */

body.page-id-36
.tp-porfolio-10-area
> .container.container-1380 {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  z-index: 50 !important;

  display: block !important;

  width: 100% !important;
  max-width: 1380px !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;

  transform: translate(-50%, -50%) !important;

  box-sizing: border-box !important;
}


/*
   Do not force the Bootstrap row to full width.
   Let its original gutters and alignment remain.
*/
body.page-id-36
.tp-porfolio-10-area
> .container.container-1380
> .row {
  position: relative !important;

  width: auto !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  transform: none !important;
}


/* Preserve the original title-wrapper alignment */
body.page-id-36 .tp-porfolio-10-title-wrap {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: auto !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  transform: none !important;
}


/* Remove unwanted list spacing without shifting it horizontally */
body.page-id-36 .tp-porfolio-10-title-wrap ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* Keep each link above the image overlay */
body.page-id-36 .tp-porfolio-10-title-wrap li,
body.page-id-36 .tp-porfolio-10-link,
body.page-id-36 .tp-porfolio-10-title-box {
  position: relative !important;
  z-index: 51 !important;
}


/* Prevent the theme from hiding the entire inactive list item */
body.page-id-36
.tp-porfolio-10-title-wrap
ul
li {
  opacity: 1 !important;
}


/* =========================================================
   8. INACTIVE TITLES
   Quiet outline, transparent centre
========================================================= */

body.page-id-36
.tp-porfolio-10-title-wrap
ul
li:not(.active)
.tp-porfolio-10-title {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  -webkit-text-stroke-width: 1.25px !important;
  -webkit-text-stroke-color:
    rgba(255, 255, 255, 0.22) !important;

  opacity: 1 !important;
  mix-blend-mode: normal !important;

  text-shadow: none !important;

  transition:
    color 0.3s ease,
    -webkit-text-fill-color 0.3s ease,
    -webkit-text-stroke-color 0.3s ease,
    text-shadow 0.3s ease !important;
}


/* Inactive category text */
body.page-id-36
.tp-porfolio-10-title-wrap
ul
li:not(.active)
.tp-porfolio-10-category {
  color: rgba(255, 255, 255, 0.26) !important;
  -webkit-text-fill-color:
    rgba(255, 255, 255, 0.26) !important;

  -webkit-text-stroke: 0 transparent !important;

  opacity: 1 !important;
  mix-blend-mode: normal !important;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.24) !important;

  transition:
    color 0.3s ease,
    -webkit-text-fill-color 0.3s ease,
    text-shadow 0.3s ease !important;
}


/* =========================================================
   9. INACTIVE TITLE HOVER
========================================================= */

body.page-id-36
.tp-porfolio-10-title-wrap
ul
li:not(.active):hover
.tp-porfolio-10-title {
  color: rgba(255, 255, 255, 0.08) !important;
  -webkit-text-fill-color:
    rgba(255, 255, 255, 0.08) !important;

  -webkit-text-stroke-color:
    rgba(255, 255, 255, 0.68) !important;

  text-shadow:
    0 4px 22px rgba(0, 0, 0, 0.32) !important;
}


body.page-id-36
.tp-porfolio-10-title-wrap
ul
li:not(.active):hover
.tp-porfolio-10-category {
  color: rgba(255, 255, 255, 0.72) !important;
  -webkit-text-fill-color:
    rgba(255, 255, 255, 0.72) !important;

  text-shadow:
    0 3px 16px rgba(0, 0, 0, 0.35) !important;
}


/* =========================================================
   10. ACTIVE TITLE
========================================================= */

body.page-id-36
.tp-porfolio-10-title-wrap
ul
li.active
.tp-porfolio-10-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  -webkit-text-stroke: 0 transparent !important;

  opacity: 1 !important;
  mix-blend-mode: normal !important;

  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.24),
    0 9px 32px rgba(0, 0, 0, 0.46) !important;
}


body.page-id-36
.tp-porfolio-10-title-wrap
ul
li.active
.tp-porfolio-10-category {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  -webkit-text-stroke: 0 transparent !important;

  opacity: 1 !important;
  mix-blend-mode: normal !important;

  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.24),
    0 8px 26px rgba(0, 0, 0, 0.44) !important;
}


/* =========================================================
   11. MOBILE ADJUSTMENTS
========================================================= */

@media screen and (max-width: 767px) {

  /* Slightly stronger mobile overlay */
  body.page-id-36 .tp-porfolio-10-bg-wrap::after {
    background:
      radial-gradient(
        ellipse at 50% 50%,
        rgba(0, 0, 0, 0.64) 0%,
        rgba(0, 0, 0, 0.52) 38%,
        rgba(0, 0, 0, 0.33) 70%,
        rgba(0, 0, 0, 0.18) 100%
      ) !important;
  }


  /* Make inactive titles slightly clearer on smaller screens */
  body.page-id-36
  .tp-porfolio-10-title-wrap
  ul
  li:not(.active)
  .tp-porfolio-10-title {
    -webkit-text-stroke-width: 1px !important;
    -webkit-text-stroke-color:
      rgba(255, 255, 255, 0.28) !important;
  }


  body.page-id-36
  .tp-porfolio-10-title-wrap
  ul
  li:not(.active)
  .tp-porfolio-10-category {
    color: rgba(255, 255, 255, 0.32) !important;
    -webkit-text-fill-color:
      rgba(255, 255, 255, 0.32) !important;
  }
}


/* =========================================================
   12. REMOVE FINAL BOTTOM GAP
========================================================= */

body.page-id-36,
body.page-id-36 .elementor-36,
body.page-id-36 .elementor-element-1fc0410,
body.page-id-36 .elementor-element-8eea050,
body.page-id-36
  .elementor-element-8eea050
  > .elementor-widget-container,
body.page-id-36 .tp-porfolio-10-area {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}/* End custom CSS */
/* Start custom CSS for tp-full-screen-wrapper-slider, class: .elementor-element-463b455 *//* =========================================================
   MOBILE POSITION FIX
   Restore original text position and avoid arrow overlap
========================================================= */

@media screen and (max-width: 767px) {

  .tp-portfolio-11-slider-bg {
    position: relative !important;
    isolation: isolate !important;

    /* Restore the original theme spacing */
    padding-top: 170px !important;
    padding-bottom: 150px !important;

    min-height: 100svh !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    overflow: hidden !important;
  }


  /* Dark overlay only, without changing layout */
  .tp-portfolio-11-slider-bg::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;
    pointer-events: none;

    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.20) 0%,
        rgba(0, 0, 0, 0.25) 32%,
        rgba(0, 0, 0, 0.45) 62%,
        rgba(0, 0, 0, 0.78) 100%
      ) !important;
  }


  /* Keep content in its original theme position */
  .tp-portfolio-11-slider-content {
    position: relative !important;
    z-index: 2 !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
  }


  /* Do not add extra spacing around the title */
  .tp-portfolio-11-slider-title {
    width: auto !important;

    margin-top: 18px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* Smaller title, same original position */
  .tp-portfolio-11-slider-title,
  .tp-portfolio-11-slider-title a {
    font-size: clamp(42px, 12vw, 52px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.045em !important;

    color: #ffffff !important;

    white-space: nowrap !important;
    word-break: normal !important;

    text-shadow:
      0 3px 10px rgba(0, 0, 0, 0.30),
      0 10px 28px rgba(0, 0, 0, 0.44) !important;
  }


  .tp-portfolio-11-slider-subtitle {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    text-shadow:
      0 2px 10px rgba(0, 0, 0, 0.45) !important;
  }


  .tp-portfolio-11-slider-subtitle br {
    display: none !important;
  }


  /* Restore link spacing instead of pushing the full content down */
  .tp-portfolio-11-slider-link {
    margin-bottom: 55px !important;
  }


  /* Keep everything above the overlay */
  .tp-portfolio-11-slider-link,
  .tp-portfolio-11-slider-subtitle,
  .tp-portfolio-11-slider-title,
  .tp-portfolio-11-slider-title a {
    position: relative !important;
    z-index: 3 !important;
  }
}

@media screen and (max-width: 767px) {

  .tp-portfolio-11-slider-content {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 24px !important;
    padding-right: 18px !important;

    box-sizing: border-box !important;
  }

  .tp-portfolio-11-slider-title {
    max-width: calc(100vw - 42px) !important;
  }
}/* End custom CSS */