/* =========================================================
   ECUBE PROJECTS PAGE
   ========================================================= */

.ecube-projects-page {
    background: #ffffff;
    width: 100%;
}

.ecube-projects-section {
    padding: 122px 0 100px;
}

.ecube-projects-section .container-fluid {
    padding-left: 45px;
    padding-right: 45px;
}


/* =========================================================
   PAGE HEADING
   ========================================================= */

.ecube-projects-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 42px;
}

.ecube-projects-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ecube-projects-heading h1 {
    margin: 0;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -1px;
}

.ecube-projects-count {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-bottom: 7px;
}


/* =========================================================
   CATEGORY FILTER
   ========================================================= */

.ecube-project-filter-wrapper {
    width: 100%;
    margin-bottom: 42px;
    border-bottom: 1px solid #dedede;
}

.ecube-project-filter {
    display: flex;
    align-items: center;
    gap: 30px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ecube-project-filter::-webkit-scrollbar {
    display: none;
}

.ecube-filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 45px;
    padding: 0 0 14px;

    border: 0;
    background: transparent;

    color: #777777;

    font-family: inherit;
    font-size: 13px;
    line-height: 1;

    cursor: pointer;
    white-space: nowrap;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

.ecube-filter-btn:hover {
    color: #111111;
}

.ecube-filter-btn.active {
    color: #111111;
}

.ecube-filter-btn.active:after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: #111111;
}


/* =========================================================
   PROJECT GRID
   ========================================================= */

.ecube-project-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 24px;
    row-gap: 55px;

    width: 100%;
}


/* =========================================================
   PROJECT CARD
   ========================================================= */

.ecube-project-card {
    min-width: 0;

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.ecube-project-card.is-filtered {
    opacity: 0;
    transform: translateY(8px);
}

.ecube-project-card.is-hidden {
    display: none;
}

.ecube-project-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ecube-project-link:hover {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   PROJECT IMAGE
   ========================================================= */

.ecube-project-image {
    position: relative;

    width: 100%;

    /*
     * Architecture portfolio ratio.
     * Can be changed later if actual project image ratio
     * needs to be preserved.
     */
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #f2f2f2;
}

.ecube-project-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.ecube-project-link:hover .ecube-project-image img {
    transform: scale(1.035);
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

.ecube-project-hover {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 25px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.48),
            rgba(0, 0, 0, 0) 55%
        );

    opacity: 0;

    transition: opacity 0.3s ease;
}

.ecube-project-link:hover .ecube-project-hover {
    opacity: 1;
}

.ecube-project-view {
    color: #ffffff;

    font-size: 12px;
    line-height: 1;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.ecube-project-arrow {
    display: inline-block;

    margin-left: 7px;

    transition: transform 0.25s ease;
}

.ecube-project-link:hover .ecube-project-arrow {
    transform: translateX(5px);
}


/* =========================================================
   PROJECT INFORMATION
   ========================================================= */

.ecube-project-info {
    padding-top: 17px;
}

.ecube-project-title {
    margin: 0;

    color: #111111;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 500;
}

.ecube-project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    margin-top: 7px;

    color: #777777;

    font-size: 12px;
    line-height: 1.4;
}

.ecube-project-meta-separator {
    color: #aaaaaa;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.ecube-project-empty {
    padding: 80px 20px;
    text-align: center;
}

.ecube-project-empty p {
    margin: 0;
    color: #777777;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .ecube-projects-section {
        padding: 70px 0 80px;
    }

    .ecube-projects-section .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }

    .ecube-projects-heading h1 {
        font-size: 40px;
    }

    .ecube-project-filter {
        gap: 24px;
    }

    .ecube-project-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 20px;
        row-gap: 42px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ecube-projects-section {
        padding: 50px 0 60px;
    }

    .ecube-projects-section .container-fluid {
        padding-left: 18px;
        padding-right: 18px;
    }


    /* Heading */

    .ecube-projects-heading {
        display: block;
        margin-bottom: 28px;
    }

    .ecube-projects-eyebrow {
        margin-bottom: 8px;
        font-size: 10px;
        letter-spacing: 1.7px;
    }

    .ecube-projects-heading h1 {
        font-size: 34px;
        letter-spacing: -0.5px;
    }

    .ecube-projects-count {
        margin-top: 12px;
        padding-bottom: 0;

        font-size: 11px;
    }


    /* Filter */

    .ecube-project-filter-wrapper {
        margin-bottom: 30px;
    }

    .ecube-project-filter {
        gap: 22px;
    }

    .ecube-filter-btn {
        min-height: 40px;
        padding-bottom: 12px;

        font-size: 12px;
    }


    /* One project per row */

    .ecube-project-grid {
        display: grid;

        grid-template-columns: 1fr;

        row-gap: 36px;
    }


    /* =====================================================
       IMPORTANT MOBILE REQUIREMENT

       Image first
       Project name below image
       NO text overlay
       ===================================================== */

    .ecube-project-image {
        aspect-ratio: 16 / 11;
    }

    .ecube-project-hover {
        display: none;
    }

    .ecube-project-link:hover .ecube-project-image img {
        transform: none;
    }

    .ecube-project-info {
        padding-top: 13px;
    }

    .ecube-project-title {
        font-size: 19px;
        line-height: 1.3;
        font-weight: 500;
    }

    .ecube-project-meta {
        margin-top: 5px;

        font-size: 11px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .ecube-projects-section .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ecube-projects-heading h1 {
        font-size: 30px;
    }

    .ecube-project-grid {
        row-gap: 32px;
    }

    .ecube-project-title {
        font-size: 18px;
    }

}

.ecube-project-detail-page {
    width: 100%;
    background: #fff;
}

.ecube-detail-hero {
    width: 100%;
}

.ecube-detail-hero-image {
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.ecube-detail-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* More project-detail CSS here */

@media (max-width: 767px) {
    .ecube-detail-hero-image {
        height: 50vh;
    }
}


/* =========================================================
   Studio Ecube - Project Listing / Detail Overrides
   Loaded after custom.css so project-specific rules win.
   ========================================================= */

.ecube-project-container {
  /* width: min(1380px, calc(100% - 80px)); */
  width: auto;
  margin-left: 27px !important;
  margin-right: auto;
  padding-left:0px !important;
}

/* Detail hero / existing Bootstrap carousel */
.ecube-project-detail {
  background: #fff;
  color: #1b1b1b;
  overflow: hidden;
}

.ecube-project-hero {
  width: 100%;
  background: #111;
}

.ecube-project-carousel,
.ecube-project-carousel .carousel-inner,
.ecube-project-carousel .carousel-item {
  width: 100%;
}

.ecube-project-slide {
  width: 100%;
  height: min(78vh, 820px);
  min-height: 460px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ecube-project-carousel .carousel-indicators {
  z-index: 4;
  bottom: 24px;
  margin-bottom: 0;
}

.ecube-project-carousel .carousel-indicators li {
  width: 34px;
  height: 2px;
  margin: 0 4px;
  border: 0;
  border-radius: 0;
  opacity: .55;
}

.ecube-project-carousel .carousel-indicators li.active {
  opacity: 1;
}

.ecube-carousel-control {
  width: 9%;
  opacity: .9;
}

/* Intro */
.ecube-project-intro {
  padding: 0px 0 42px;
}

.ecube-project-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 38px;
  border-bottom: 1px solid #dedede;
}

.ecube-project-heading-main {
  min-width: 0;
}

.ecube-project-eyebrow,
.ecube-description-label,
.ecube-meta-label,
.ecube-section-heading {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ecube-project-eyebrow {
  margin: 0 0 14px;
  color: #777;
}

.ecube-project-heading h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 45px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.035em;
  color: #111;
}

.ecube-project-area {
  flex: 0 0 180px;
  padding-bottom: 5px;
}

.ecube-project-area span {
  display: block;
  margin-bottom: 7px;
  color: #777;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ecube-project-area strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.ecube-project-description {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 60px;
  padding-top: 42px;
}

.ecube-description-label {
  color: #555;
  white-space: nowrap;
}

.ecube-description-label span {
  color: #aaa;
  padding: 0 4px;
}

.ecube-description-copy {
  max-width: auto;
}

.ecube-description-copy p {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.9;
  font-weight: 300;
  color: #4b4b4b;
}

.ecube-description-copy p:last-child {
  margin-bottom: 0;
}

/* Project information */
.ecube-project-information {
  padding: 58px 0 82px;
  background: #f7f7f5;
}

.ecube-section-heading {
  margin-bottom: 32px;
  color: #111;
  font-weight: 600;
}

.ecube-section-heading:after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  margin-top: 13px;
  background: #111;
}

.ecube-project-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 90px;
}

.ecube-meta-column {
  min-width: 0;
}

.ecube-meta-item {
  display: grid;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  gap: 24px;
  padding: 19px 0;
  border-bottom: 1px solid #ddd;
}

.ecube-meta-label {
  color: #777;
}

.ecube-meta-value {
  min-width: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #242424;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.ecube-meta-multiline {
  white-space: normal;
}

/* Existing gallery, cleaned up without changing the source images */
.ecube-project-gallery {
  padding: 90px 0 40px;
}

.ecube-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.ecube-gallery-item {
  min-width: 0;
}

.ecube-gallery-link,
.ecube-gallery-image-wrap {
  display: block;
  position: relative;
}

.ecube-gallery-link {
  color: inherit;
  text-decoration: none !important;
}

.ecube-gallery-image-wrap {
  overflow: hidden;
  background: #f0f0ee;
}

.ecube-gallery-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
}

.ecube-gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity .3s ease;
}

.ecube-gallery-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #fff;
  transform: translateY(8px);
  transition: transform .3s ease;
}

.ecube-gallery-link:hover .ecube-gallery-image-wrap img {
  transform: scale(1.035);
}

.ecube-gallery-link:hover .ecube-gallery-overlay {
  opacity: 1;
}

.ecube-gallery-link:hover .ecube-gallery-zoom {
  transform: translateY(0);
}



/* =========================================================
   Project detail navigation + responsive layout
   Clean single-source rules. These rules intentionally avoid
   changing the existing project URLs, gallery or description.
   ========================================================= */

.ecube-project-detail,
.ecube-project-detail * {
  box-sizing: border-box;
}

/* The site's global header is positioned independently. Reserve only
   the amount of space actually needed before the breadcrumb. */
.ecube-project-detail > .ecube-project-breadcrumb {
  position: relative;
  z-index: 2;
  margin-top: 108px;
}

.ecube-project-breadcrumb {
  background: #fff;
  border-bottom: 1px solid #ededeb;
}

.ecube-project-breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  padding: 13px 0;
  list-style: none;
  color: #888;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ecube-project-breadcrumb a {
  color: #555 !important;
  text-decoration: none !important;
}

.ecube-project-breadcrumb li[aria-hidden="true"] {
  color: #c5c5c5;
}

.ecube-project-breadcrumb li[aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.ecube-project-slide {
  width: 100%;
  height: min(72vh, 760px);
  min-height: 500px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* The legacy global stylesheet forces every Bootstrap carousel item to 100vh.
   Override that rule for the project detail carousel so the slide height is
   controlled by the responsive project styles below. */
.ecube-project-carousel .carousel-inner .carousel-item {
  height: min(72vh, 760px) !important;
  min-height: 500px;
}

.ecube-project-carousel .carousel-inner .carousel-item .ecube-project-slide {
  height: 100% !important;
  min-height: 0;
}

/* ---------------------------------------------------------
   Project navigation
   --------------------------------------------------------- */
.ecube-project-navigation {
  padding: 46px 0 82px;
  background: #fff;
}

.ecube-project-nav-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 36px;
  width: 100%;
  border-top: 1px solid #dedede;
  padding-top: 42px;
}

.ecube-project-nav-slot {
  min-width: 0;
}

.ecube-project-nav-slot-prev {
  justify-self: start;
}

.ecube-project-nav-slot-all {
  justify-self: center;
}

.ecube-project-nav-slot-next {
  justify-self: end;
}

.ecube-project-nav-card {
  display: flex;
  align-items: center;
  width: min(100%, 430px);
  gap: 20px;
  color: #222 !important;
  text-decoration: none !important;
}

.ecube-project-nav-card-next {
  justify-content: flex-end;
  text-align: right;
}

.ecube-project-nav-thumb {
  display: block;
  flex: 0 0 96px;
  width: 96px;
  height: 78px;
  overflow: hidden;
  background: #eee;
}

.ecube-project-nav-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ecube-project-nav-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

.ecube-project-nav-label {
  display: block;
  margin-bottom: 7px;
  color: #777;
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ecube-project-nav-arrow {
  color: #222;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
}

.ecube-project-nav-copy strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  color: #222;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecube-project-nav-copy small {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #999;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ecube-project-nav-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  color: #555 !important;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   Tablet / iPad: balanced 2-column composition
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .ecube-project-container {
  width: auto;
	
    max-width: none;
	margin-left:0px !important;
  }

  .ecube-project-detail > .ecube-project-breadcrumb {
    margin-top: 96px;
	padding: 18px 30px !important;
  }

  .ecube-project-breadcrumb ol {
    padding: 11px 0;
    font-size: 8px;
  }

  .ecube-project-slide {
    height: clamp(430px, 54vw, 610px);
    min-height: 430px;
    max-height: 610px;
  }

  .ecube-project-carousel .carousel-inner .carousel-item {
    height: clamp(430px, 54vw, 610px) !important;
    min-height: 430px;
  }

  .ecube-project-intro {
    padding: 0px 0 44px;
    padding-left: 30px;
  }

  .ecube-project-heading {
    gap: 28px;
    padding-bottom: 28px;
  }

  .ecube-project-heading h1 {
    font-size: clamp(40px, 5vw, 58px);
  }

  .ecube-project-description {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 32px;
    padding-top: 32px;
  }

  .ecube-description-copy p {
    font-size: 14px;
    line-height: 1.75;
  }

  .ecube-project-information {
    padding: 52px 0 60px;
	    padding-left: 30px;

  }

  .ecube-project-meta-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
  }

  .ecube-meta-item {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    padding: 15px 0;
  }

  .ecube-meta-value {
    font-size: 13px;
    line-height: 1.55;
  }

  .ecube-project-gallery {
    padding: 68px 0 28px;
	    padding-left: 30px;

  }

  .ecube-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .ecube-project-navigation {
    padding: 34px 0 64px;
	    padding-left: 30px;

  }

  .ecube-project-nav-inner {
    gap: 20px;
    padding-top: 34px;
  }

  .ecube-project-nav-card {
    width: min(100%, 350px);
    gap: 14px;
  }

  .ecube-project-nav-thumb {
    flex-basis: 72px;
    width: 72px;
    height: 60px;
  }

  .ecube-project-nav-copy strong {
    max-width: 180px;
    font-size: 13px;
  }

  .ecube-project-nav-copy small {
    font-size: 8px;
  }
}

/* ---------------------------------------------------------
   Mobile: single-column reading flow
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .ecube-project-container {
  width: auto;
    max-width: none;
	margin-left:0px!important;
  }

  .ecube-project-detail > .ecube-project-breadcrumb {
    margin-top: 55px;
	padding: 18px 30px !important;
  }

  .ecube-project-breadcrumb ol {
    padding: 9px 0;
    gap: 5px;
    font-size: 7px;
    letter-spacing: .1em;
  }

  .ecube-project-breadcrumb li[aria-current="page"] {
    max-width: 46vw;
  }

  .ecube-project-slide {
    height: clamp(280px, 78vw, 390px);
    min-height: 280px;
    max-height: 390px;
    background-position: center center;
  }

  .ecube-project-carousel .carousel-inner .carousel-item {
    height: clamp(280px, 78vw, 390px) !important;
    min-height: 280px;
  }

  .ecube-project-carousel .carousel-indicators {
    bottom: 10px;
  }

  .ecube-project-carousel .carousel-indicators li {
    width: 20px;
    height: 2px;
    margin: 0 2px;
  }

  .ecube-project-intro {
    padding: 0px 0 30px;
	padding-left:30px;
  }

  .ecube-project-heading {
    display: block;
    padding-bottom: 22px;
  }

  .ecube-project-eyebrow {
    margin-bottom: 9px;
    font-size: 8px;
  }

  .ecube-project-heading h1 {
    font-size: clamp(29px, 8.8vw, 40px);
    line-height: 1.04;
  }

  .ecube-project-area {
    margin-top: 20px;
    padding: 0;
  }

  .ecube-project-area span {
    margin-bottom: 4px;
    font-size: 8px;
  }

  .ecube-project-area strong {
    font-size: 12px;
  }

  .ecube-project-description {
    display: block;
    padding-top: 22px;
  }

  .ecube-description-label {
    margin-bottom: 14px;
    font-size: 8px;
  }

  .ecube-description-copy p {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.7;
  }

  .ecube-project-information {
    padding: 38px 0 42px;
	padding-left: 30px;
  }

  .ecube-section-heading {
    margin-bottom: 20px;
    font-size: 8px;
  }

  .ecube-section-heading:after {
    width: 34px;
    margin-top: 9px;
  }

  .ecube-project-meta-grid {
    display: block;
  }

  .ecube-meta-item {
    display: block;
    padding: 12px 0;
  }

  .ecube-meta-label {
    display: block;
    margin-bottom: 4px;
    font-size: 8px;
  }

  .ecube-meta-value {
    display: block;
    font-size: 11px;
    line-height: 1.5;
  }

  .ecube-project-gallery {
    padding: 46px 0 18px;
	padding-left: 30px;
  }

  .ecube-gallery-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ecube-gallery-image-wrap img {
    aspect-ratio: 4 / 3;
  }

  .ecube-project-navigation {
    padding: 24px 0 44px;
		padding-left: 30px;

  }

  .ecube-project-nav-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 20px;
  }

  .ecube-project-nav-slot-prev,
  .ecube-project-nav-slot-next,
  .ecube-project-nav-slot-all {
    width: 100%;
    justify-self: auto;
  }

  .ecube-project-nav-card,
  .ecube-project-nav-card-next {
    width: 100%;
    max-width: none;
    gap: 12px;
    padding: 8px 0;
    text-align: left;
    justify-content: flex-start;
  }

  .ecube-project-nav-card-next {
    text-align: left;
  }

  .ecube-project-nav-card-next .ecube-project-nav-thumb {
    order: 2;
  }

  .ecube-project-nav-thumb {
    flex-basis: 62px;
    width: 62px;
    height: 54px;
  }

  .ecube-project-nav-copy strong {
    max-width: calc(100vw - 120px);
    font-size: 12px;
  }

  .ecube-project-nav-copy small {
    margin-top: 5px;
    font-size: 8px;
  }

  .ecube-project-nav-label {
    margin-bottom: 6px;
    font-size: 8px;
  }

  .ecube-project-nav-slot-all {
    display: flex;
    justify-content: center;
    padding-top: 8px;
  }

  .ecube-project-nav-all {
    min-height: 36px;
    padding: 0 14px;
    font-size: 8px;
  }

  .ecube-gallery-overlay {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecube-gallery-image-wrap img {
    transition: none;
  }
}

/* ==========================================================
   Share menu - v8
   Uses the existing green share button but gives it real
   current-page sharing actions instead of profile placeholders.
   ========================================================== */
.ecube-share-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ecube-share-trigger {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #6daa2d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  box-shadow: none;
}

.ecube-share-trigger:focus-visible {
  outline: 2px solid #6daa2d;
  outline-offset: 3px;
}

.ecube-share-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 9999;
  width: 190px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 14px 35px rgba(0,0,0,.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.ecube-share-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ecube-share-panel-title {
  padding: 5px 9px 9px;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #777;
}

.ecube-share-action {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ecube-share-action:hover,
.ecube-share-action:focus-visible {
  background: #f5f5f5;
  color: #6daa2d;
  outline: 0;
}

.ecube-share-action i {
  width: 17px;
  text-align: center;
  font-size: 14px;
}

.ecube-share-copied {
  display: block;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 9px;
  color: #6daa2d;
  font-size: 10px;
  transition: opacity .15s ease;
}

.ecube-share-copied.is-visible {
  height: auto;
  padding-top: 5px;
  padding-bottom: 4px;
  opacity: 1;
}

@media (max-width: 767px) {
  .ecube-share-trigger {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .ecube-share-panel {
    position: fixed;
    top: 58px;
    right: 12px;
    width: min(210px, calc(100vw - 24px));
  }
}


/* ==========================================================
   v9 - Project page header/share positioning
   The legacy theme header is absolute initially and only becomes
   fixed after scrolling. Keep project pages visually stable from
   the first paint, so titles/content never sit underneath the header
   and the share panel does not jump when the sticky header activates.
   ========================================================== */
body.ecube-project-listing-page,
body.ecube-project-detail-page {
  position: relative;
}

/* Project listing: do not add a second header-height spacer.
   The legacy header already occupies its own layout space. */
body.ecube-project-listing-page {
  padding-top: 0;
}

body.ecube-project-listing-page .main-content.popup-gallery > .overview-block-ptb {
  padding-top: 48px;
}

body.ecube-project-listing-page header.header-01 .mega-menu > section.menu-list-items,
body.ecube-project-detail-page header.header-01 .mega-menu > section.menu-list-items {
  /* background: #fff !important; */
  /* box-shadow: 0 8px 22px rgba(0,0,0,.08); */
}

body.ecube-project-listing-page header.header-01 .mega-menu .menu-links > li > a {
  color: #111 !important;
}

/* Keep the share panel in the viewport. JavaScript positions it directly
   under the actual share button, so its position remains correct both
   before and after the legacy sticky-header script changes the header. */
body.ecube-project-listing-page .ecube-share-panel,
body.ecube-project-detail-page .ecube-share-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10050;
  width: 220px;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.ecube-project-listing-page .ecube-share-panel.is-open,
body.ecube-project-detail-page .ecube-share-panel.is-open {
  transform: translateY(0);
}

/* Don't let the legacy menu wrapper clip the share panel. */
body.ecube-project-listing-page .menu-list-items,
body.ecube-project-detail-page .menu-list-items,
body.ecube-project-listing-page .menu-list-items .container-fluid,
body.ecube-project-detail-page .menu-list-items .container-fluid,
body.ecube-project-listing-page .menu-list-items .row,
body.ecube-project-detail-page .menu-list-items .row,
body.ecube-project-listing-page .menu-list-items .col-sm-12,
body.ecube-project-detail-page .menu-list-items .col-sm-12 {
  overflow: visible !important;
}

@media (max-width: 991px) {
  body.ecube-project-listing-page {
    padding-top: 0;
  }

  body.ecube-project-listing-page .main-content.popup-gallery > .overview-block-ptb {
    padding-top: 30px;
  }

  body.ecube-project-listing-page .ecube-share-panel,
  body.ecube-project-detail-page .ecube-share-panel {
    width: min(220px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
  }
}

@media (max-width: 767px) {
  body.ecube-project-listing-page {
    padding-top: 0;
  }

  body.ecube-project-listing-page .main-content.popup-gallery > .overview-block-ptb {
    padding-top: 18px;
  }

  body.ecube-project-listing-page .ecube-share-panel,
  body.ecube-project-detail-page .ecube-share-panel {
    width: min(220px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
  }
}


/* v11: active-menu and share-position helpers */

/* ==========================================================
   v12 - Consistent active navigation state on desktop/tablet
   The legacy menu stylesheet gives the active state different
   treatment depending on header/sticky state. These project-page
   overrides make the PHP/URL-derived .active state visibly active
   from the first paint and after scrolling.
   ========================================================== */
@media (min-width: 993px) {
  body.ecube-project-listing-page header.header-01 .mega-menu .menu-links > li.active,
  body.ecube-project-detail-page header.header-01 .mega-menu .menu-links > li.active {
    background: transparent !important;
  }

  body.ecube-project-listing-page header.header-01 .mega-menu .menu-links > li.active > a {
    color: #6fa533 !important;
    background: transparent !important;
  }
  
  body.ecube-project-detail-page header.header-01 .mega-menu .menu-links > li.active > a {
    color: #888888 !important;
    background: transparent !important;
  }

  body.ecube-project-listing-page header.header-01 .mega-menu .menu-links > li.active > a::after{
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    height: 2px;
    background: #6fa533;
  }
body.ecube-project-detail-page header.header-01 .mega-menu .menu-links > li.active > a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0px;
    height: 2px;
    background: #888888 !important;
  }
  body.ecube-project-listing-page header.header-01 .mega-menu .menu-links > li:hover,
  body.ecube-project-detail-page header.header-01 .mega-menu .menu-links > li:hover {
    background: transparent !important;
  }

  body.ecube-project-listing-page header.header-01 .mega-menu .menu-links > li:hover > a {
    color: #6fa533 !important;
    background: transparent !important;
  }
  body.ecube-project-detail-page header.header-01 .mega-menu .menu-links > li a, body.ecube-project-detail-page header.header-01 .mega-menu .menu-links > li:hover > a {
    color: #888888 !important;
    background: transparent !important;
  }
}

@media (min-width: 1199px) {

body.ecube-project-detail-page header.header-01 .mega-menu .menu-links > li.active > a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 25px !important;
    height: 2px;
    background: #888888 !important;
  }
  
      body.home .ecube-site-header .mega-menu .menu-links > li.active > a::after, body.ecube-project-detail-page .ecube-site-header .mega-menu .menu-links > li.active > a::after, body.ecube-hero-present .ecube-site-header .mega-menu .menu-links > li.active > a::after {
        color: #888888 !important;
        background: #888888 !important;
        bottom: 18px !important;
    }
}
  
@media (min-width: 768px) and (max-width: 992px) {
  body.ecube-project-listing-page header.header-01 .mega-menu .menu-links > li.active,
  body.ecube-project-detail-page header.header-01 .mega-menu .menu-links > li.active {
    background: #6fa533 !important;
  }

  body.ecube-project-listing-page header.header-01 .mega-menu .menu-links > li.active > a,
  body.ecube-project-detail-page header.header-01 .mega-menu .menu-links > li.active > a {
    color: #fff !important;
    background: #6fa533 !important;
  }
}


/* ==========================================================
   v13 - Global Ecube navigation active state
   header2.php is shared by the site pages, so active navigation
   styling must not depend on the project-page body class.
   ========================================================== */
.ecube-site-header .mega-menu .menu-links > li.active {
  background: transparent !important;
}



body:not(.home):not(.ecube-hero-present):not(.ecube-project-detail-page)
.ecube-site-header .mega-menu .menu-links > li.active > a {
    color: #111  !important;
    background: transparent !important;
}


body.home .ecube-site-header .mega-menu .menu-links > li.active > a {
    color: #888888 !important;
    background: transparent !important;
}

.ecube-site-header .mega-menu .menu-links > li.active > a::after {
  content: none;
}
@media (min-width: 1199px) {
 body:not(.home):not(.ecube-hero-present):not(.ecube-project-detail-page) .ecube-site-header .mega-menu .menu-links > li.active > a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 30px !important;
    height: 2px;
    background: #6fa533;
  }
  body.home .ecube-site-header .mega-menu .menu-links > li.active > a::after,body.ecube-project-detail-page .ecube-site-header .mega-menu .menu-links > li.active > a::after , body.ecube-hero-present .ecube-site-header .mega-menu .menu-links > li.active > a::after {
	      color: #888888 !important;
    background: #888888 !important;
	bottom:25px !important;
  }
}

@media (min-width: 993px) {
  .ecube-site-header .mega-menu .menu-links > li {
    position: relative;
  }

 
  
    body:not(.home):not(.ecube-hero-present):not(.ecube-project-detail-page) .ecube-site-header .mega-menu .menu-links > li.active > a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0px;
    height: 2px;
    background: #6fa533;
  }
  
  
    body.home .ecube-site-header .mega-menu .menu-links > li.active > a::after,body.ecube-project-detail-page .ecube-site-header .mega-menu .menu-links > li.active > a::after {
	      color: #888888 !important;
    background: #888888 !important;
	bottom:0px !important;
  }

	
  
  .ecube-site-header .mega-menu .menu-links > li:hover {
    background: transparent !important;
  }

  .ecube-site-header .mega-menu .menu-links > li:hover > a {
    color: #888888 !important;
    background: transparent !important;
  }
  

}

@media (min-width: 768px) and (max-width: 992px) {
  .ecube-site-header .mega-menu .menu-links > li.active {
    background: #6fa533 !important;
  }

  .ecube-site-header .mega-menu .menu-links > li.active > a {
    color: #fff !important;
    background: #6fa533 !important;
  }
}

@media (max-width: 767px) {
  .ecube-site-header .mega-menu .menu-links > li.active {
    background: #6fa533 !important;
  }

  .ecube-site-header .mega-menu .menu-links > li.active > a {
    color: #fff !important;
    background: #6fa533 !important;
  }
}

/* ==========================================================
   v14 - Final responsive header spacing + global navigation
   ========================================================== */
.ecube-site-header .mega-menu .menu-links > li.ecube-active-page {
  background: transparent !important;
}
.ecube-site-header .mega-menu .menu-links > li.ecube-active-page > a {
  color: #6fa533 !important;
  background: transparent !important;
}

@media (min-width: 993px) {
  .ecube-site-header .mega-menu .menu-links > li.ecube-active-page {
    position: relative;
  }
  .ecube-site-header .mega-menu .menu-links > li.ecube-active-page > a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 8px;
    height: 2px;
    background: #6fa533;
  }
}

@media (max-width: 992px) {
  .ecube-site-header .mega-menu .menu-links > li.ecube-active-page,
  .ecube-site-header .mega-menu .menu-links > li.ecube-active-page > a {
    background: #6fa533 !important;
    color: #fff !important;
  }
  
  body.home .ecube-site-header .mega-menu .menu-links > li.active > a,body.home .ecube-site-header .mega-menu .menu-links > li:hover > a, body.home .mega-menu .menu-links>li>a {
    color: #111 !important;
    background: transparent !important;
}
/* White navigation */
body.ecube-project-detail-page header.ecube-site-header .menu-links > li > a {
    color: #111 !important;
}
}

/* The header is absolute on desktop, so the project listing needs a
   measured reserve. This prevents the title/facets from sitting behind
   the header without creating the excessive gap seen in earlier versions. */
@media (min-width: 993px) {
  body.ecube-project-listing-page .main-content.popup-gallery {
    padding-top: 88px;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  body.ecube-project-listing-page .main-content.popup-gallery {
    padding-top: 52px;
  }
}

@media (max-width: 767px) {
  body.ecube-project-listing-page .main-content.popup-gallery {
    padding-top: 18px;
  }
}

/* Keep share panels consistently attached to their trigger on all pages
   using the new share component. */
.ecube-share-panel {
  z-index: 10050 !important;
}
.footer-menu li a {
  font-size: 17px;
    color: #878787;
    font-weight: 600;
    font-family: 'Raleway', sans-serif !important; 

  }
  
  @media (max-width: 992px) {

body.ecube-hero-present .ecube-site-header .menu-links > li > a {
  color: #000 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.28) !important;
}
	}
	
	/* =========================================================
   PROJECT DETAIL - HEADER OVER HERO
   ========================================================= */ 

/* Put the actual project-detail header over the slideshow */
body.ecube-project-detail-page header.ecube-site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;

    background: transparent !important;
    box-shadow: none !important;
}

/* Transparent header inner area */
body.ecube-project-detail-page header.ecube-site-header .menu-list-items,
body.ecube-project-detail-page header.ecube-site-header .menu-list-items.innerbannermenu {
    background: transparent !important;
    box-shadow: none !important;
}



/* White logo */
body.ecube-project-detail-page header.ecube-site-header #logo_img {
    filter: none;
}

/* Share button */
body.ecube-project-detail-page header.ecube-site-header .ecube-share-trigger {
    background: #fff !important;
    color: #6daa2d !important;
}

/* Remove breadcrumb from normal document flow */
/* body.ecube-project-detail-page .ecube-project-breadcrumb { */
    /* position: absolute !important; */
    /* top: 0 !important; */
    /* left: 0 !important; */
    /* right: 0 !important; */
    /* z-index: 9998 !important; */
    /* margin: 0 !important; */
/* } */

/* Project detail: transparent header over slideshow */
body.ecube-project-detail-page header.ecube-site-header.ecube-project-hero-header .mega-menu,
body.ecube-project-detail-page header.ecube-site-header.ecube-project-hero-header .mega-menu > section.menu-list-items,
body.ecube-project-detail-page header.ecube-site-header.ecube-project-hero-header .menu-list-items.innerbannermenu {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* White navigation over slideshow */
body.ecube-project-detail-page header.ecube-site-header.ecube-project-hero-header .menu-links > li > a {
    color: #fff !important;
}

/* White logo */
body.ecube-project-detail-page header.ecube-site-header.ecube-project-hero-header #logo_img {
    filter: none !important;
}

/* White share circle / green icon */
body.ecube-project-detail-page header.ecube-site-header.ecube-project-hero-header .ecube-share-trigger {
    background: #fff !important;
    color: #6daa2d !important;
}

/* Project detail breadcrumb: overlay the hero instead of taking space */
/* body.ecube-project-detail-page .ecube-project-breadcrumb { */
    /* position: absolute !important; */
    /* top: 105px !important; */
    /* left: 0 !important; */
    /* right: 0 !important; */
    /* width: 100% !important; */
    /* z-index: 10001 !important; */

    /* margin: 0 !important; */
    /* padding: 0 30px !important; */

    /* background: transparent !important; */
    /* box-shadow: none !important; */
/* } */

/* Project detail breadcrumb - place BELOW slideshow */
body.ecube-project-detail-page .ecube-project-breadcrumb {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 10 !important;
	border: 0px !important;
    margin: 0 !important;
    /* padding: 18px 30px !important; */
    background: #fff !important;
    box-shadow: none !important;
}

body.ecube-project-detail-page .ecube-project-slide {
    background-size: contain !important;
    background-position: top !important;
    background-repeat: no-repeat !important;
    /* background-color: #111 !important; */
}

@media (min-width: 1199px) {
body.ecube-project-detail-page .ecube-project-breadcrumb {
        padding-top: 18px !important;
        padding-right: 30px !important;
        padding-bottom: 18px !important;

padding:left:0px !important;
}

}

/* Project Detail – mobile header: same pattern as other pages */
@media (max-width: 767px) {

    /* White header in normal document flow */
    body.ecube-project-detail-page header.ecube-site-header,
    body.ecube-project-detail-page header.ecube-project-hero-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        transform: none !important;
        background: #fff !important;
        box-shadow: none !important;
        margin: 0 !important;
        z-index: 1000 !important;
    }

    /* Remove transparent/dark strip behind the header */
    body.ecube-project-detail-page .menu-list-items.innerbannermenu {
        background: #fff !important;
    }

    /* Keep the logo and menu visible on white */
    body.ecube-project-detail-page .menu-list-items.innerbannermenu a {
        color: #333 !important;
    }

    /* Slideshow starts below the header */
    body.ecube-project-detail-page .ecube-project-hero {
        margin-top: 0 !important;
    }

    body.ecube-project-detail-page .ecube-project-carousel {
        margin-top: 0 !important;
    }
}

/* =========================================
   MOBILE: PROJECT DETAIL HEADER + SLIDESHOW
   Header first, slideshow immediately after
========================================= */
@media (max-width: 767px) {

    /* Remove excess height/spacing from header */
    body.ecube-project-detail-page header.ecube-site-header,
    body.ecube-project-detail-page .menu-list-items {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    body.ecube-project-detail-page header.ecube-site-header {
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    /* Remove spacing before the slideshow */
    body.ecube-project-detail-page .ecube-project-hero {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    body.ecube-project-detail-page .ecube-project-carousel,
    body.ecube-project-detail-page .ecube-project-carousel .carousel-inner,
    body.ecube-project-detail-page .ecube-project-carousel .carousel-item {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Prevent fixed-height slide backgrounds */
    body.ecube-project-detail-page .ecube-project-slide {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        background-color: transparent !important;
    }
}
/* Mobile: remove excess height below project slideshow */
@media (max-width: 767px) {

    body.ecube-project-detail-page .ecube-project-hero,
    body.ecube-project-detail-page .ecube-project-carousel,
    body.ecube-project-detail-page .ecube-project-carousel .carousel-inner,
    body.ecube-project-detail-page .ecube-project-carousel .carousel-item {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.ecube-project-detail-page .ecube-project-slide {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 9;
        background-size: contain !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
    }
}