/* =========================================================
   Studio Ecube shared frontend overrides
   Font: Raleway
   ========================================================= */

html,
body,
button,
input,
textarea,
select,
.menu-links,
.menu-links a,
.menu-logo,
.ecube-share-panel,
.ecube-share-action {
  font-family: 'Raleway', Arial, sans-serif !important;
}

body {
  font-weight: 400;
}

.ecube-site-header .menu-links > li > a {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* Desktop/tablet active state: clean green text + underline. */
@media (min-width: 992px) {
  .ecube-site-header .menu-links > li.ecube-active-page > a,
  .ecube-site-header .menu-links > li.active > a {
    color: #6da82c !important;
    background: transparent !important;
  }

  .ecube-site-header .menu-links > li.ecube-active-page > a:after,
  .ecube-site-header .menu-links > li.active > a:after {
    background: #6da82c !important;
    opacity: 1 !important;
  }
}

/* Mobile/tablet menu: one active item only. */
@media (max-width: 991px) {
  .ecube-site-header .menu-links > li.ecube-active-page > a,
  .ecube-site-header .menu-links > li.active > a {
    color: #fff !important;
    background: #70ad2e !important;
  }

  .ecube-site-header .menu-links > li:not(.ecube-active-page) > a {
    background: #fff !important;
    color: #222 !important;
  }
}


/* =========================================================
   v17 - Shared transparent hero header
   Home, About Us and Project Detail use the same overlay header.
   The header does not reserve vertical space above the hero.
   ========================================================= */
body.ecube-home-page .ecube-hero-overlay-header,
body.ecube-about-page .ecube-hero-overlay-header,
body.ecube-project-detail-page .ecube-hero-overlay-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10020 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ecube-home-page .ecube-hero-overlay-header .menu-list-items,
body.ecube-about-page .ecube-hero-overlay-header .menu-list-items,
body.ecube-project-detail-page .ecube-hero-overlay-header .menu-list-items {
  background: transparent !important;
  box-shadow: none !important;
}

body.ecube-home-page .ecube-hero-overlay-header .menu-links > li > a,
body.ecube-about-page .ecube-hero-overlay-header .menu-links > li > a,
body.ecube-project-detail-page .ecube-hero-overlay-header .menu-links > li > a {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

body.ecube-home-page .ecube-hero-overlay-header .menu-links > li.active > a,
body.ecube-about-page .ecube-hero-overlay-header .menu-links > li.active > a,
body.ecube-project-detail-page .ecube-hero-overlay-header .menu-links > li.active > a,
body.ecube-home-page .ecube-hero-overlay-header .menu-links > li.ecube-active-page > a,
body.ecube-about-page .ecube-hero-overlay-header .menu-links > li.ecube-active-page > a,
body.ecube-project-detail-page .ecube-hero-overlay-header .menu-links > li.ecube-active-page > a {
  color: #fff !important;
  background: transparent !important;
}

body.ecube-home-page .ecube-hero-overlay-header #logo_img,
body.ecube-about-page .ecube-hero-overlay-header #logo_img,
body.ecube-project-detail-page .ecube-hero-overlay-header #logo_img {
    filter: none !important;
}

body.ecube-home-page .ecube-hero-overlay-header .ecube-share-trigger,
body.ecube-about-page .ecube-hero-overlay-header .ecube-share-trigger,
body.ecube-project-detail-page .ecube-hero-overlay-header .ecube-share-trigger {
  background: #fff !important;
  color: #6daa2d !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.12);
}

/* Active underline remains visible but does not create a colored block. */
@media (min-width: 993px) {
  body.ecube-home-page .ecube-hero-overlay-header .menu-links > li.active > a::after,
  body.ecube-about-page .ecube-hero-overlay-header .menu-links > li.active > a::after,
  body.ecube-project-detail-page .ecube-hero-overlay-header .menu-links > li.active > a::after {
    background: #fff !important;
  }
}

/* Mobile/tablet menu becomes a solid panel only when it is opened. */
@media (max-width: 992px) {
  body.ecube-home-page .ecube-hero-overlay-header .menu-links > li.active > a,
  body.ecube-about-page .ecube-hero-overlay-header .menu-links > li.active > a,
  body.ecube-project-detail-page .ecube-hero-overlay-header .menu-links > li.active > a {
    background: #6fa533 !important;
    color: #fff !important;
  }
}

/* Avoid the legacy header transition from flashing a white bar over the hero. */
body.ecube-home-page .ecube-hero-overlay-header.sticky,
body.ecube-about-page .ecube-hero-overlay-header.sticky,
body.ecube-project-detail-page .ecube-hero-overlay-header.sticky,
body.ecube-home-page .ecube-hero-overlay-header.is-sticky,
body.ecube-about-page .ecube-hero-overlay-header.is-sticky,
body.ecube-project-detail-page .ecube-hero-overlay-header.is-sticky {
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   Hero Image module - Project and Blog pages
   Home remains exclusively driven by the Banners/Home module.
   ========================================================= */
body.ecube-project-listing-page .ecube-hero-overlay-header,
body.ecube-blog-page .ecube-hero-overlay-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10020 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ecube-project-listing-page .ecube-hero-overlay-header .menu-list-items,
body.ecube-blog-page .ecube-hero-overlay-header .menu-list-items {
  background: transparent !important;
  box-shadow: none !important;
}

body.ecube-project-listing-page .ecube-hero-overlay-header .menu-links > li > a,
body.ecube-blog-page .ecube-hero-overlay-header .menu-links > li > a {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

body.ecube-project-listing-page .ecube-hero-overlay-header #logo_img,
body.ecube-blog-page .ecube-hero-overlay-header #logo_img {
    filter: none !important;
}

body.ecube-project-listing-page .ecube-hero-overlay-header .ecube-share-trigger,
body.ecube-blog-page .ecube-hero-overlay-header .ecube-share-trigger {
  background: #fff !important;
  color: #6daa2d !important;
}

.ecube-page-hero {
  position: relative;
  width: 100%;
  height: min(72vh, 760px);
  min-height: 480px;
  overflow: hidden;
  background: #111;
}

.ecube-page-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.ecube-page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.04) 45%, rgba(0,0,0,.32) 100%);
  pointer-events: none;
}

.ecube-page-hero-title {
  position: absolute;
  left: clamp(24px, 6vw, 90px);
  bottom: clamp(32px, 6vw, 82px);
  color: #fff;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: clamp(36px, 6vw, 82px);
  line-height: .95;
  font-weight: 400;
  letter-spacing: -.035em;
}

body.ecube-project-listing-page .ecube-page-with-hero > section:not(.ecube-page-hero),
body.ecube-blog-page .ecube-page-with-hero > section:not(.ecube-page-hero) {
  position: relative;
  padding-top: 10px !important;
}

@media (max-width: 992px) {
  .ecube-page-hero {
    height: min(62vh, 620px);
    min-height: 420px;
  }
}

@media (max-width: 767px) {
  .ecube-page-hero {
    height: 58vh;
    min-height: 360px;
  }

  .ecube-page-hero-title {
    left: 24px;
    bottom: 36px;
    font-size: clamp(34px, 12vw, 56px);
  }
}




body.ecube-hero-present .ecube-site-header .menu-list-items,
body.ecube-hero-present .ecube-site-header .menu-list-items.innerbannermenu {
  background: transparent !important; 
  box-shadow: none !important;
}

body.ecube-hero-present .ecube-site-header .menu-links > li > a {
  color: #fff ;
  text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

body.ecube-hero-present .ecube-site-header #logo_img {
    filter: none;
}

body.ecube-hero-present .ecube-site-header .ecube-share-trigger {
  background: #fff !important;
  color: #6daa2d !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.12);
}

@media (min-width: 993px) {
  body.ecube-hero-present .ecube-site-header .menu-links > li.active > a::after,
  body.ecube-hero-present .ecube-site-header .menu-links > li.ecube-active-page > a::after {
    /* background: #fff !important; */
  }
}

/* No hero: cancel all page-specific overlay rules from earlier versions. */
body:not(.ecube-hero-present) .ecube-site-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: 10020 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body:not(.ecube-hero-present) .ecube-site-header .menu-list-items,
body:not(.ecube-hero-present) .ecube-site-header .menu-list-items.innerbannermenu {
  background: #fff !important;
  box-shadow: none !important;
}

body:not(.ecube-hero-present) .ecube-site-header .menu-links > li > a {
  color: #111 !important;
  text-shadow: none !important;
}

body:not(.ecube-hero-present) .ecube-site-header #logo_img {
  filter: none !important;
}

/* Project detail always has the existing project slideshow, so it is
   treated as a hero even though it does not use the Hero Image module. */
body.ecube-project-detail-page .ecube-project-hero {
  /* position: relative !important; */
  width: 100% !important;
  height: 100vh !important;
  min-height: 560px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !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 {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* body.ecube-project-detail-page .ecube-project-carousel .carousel-inner .carousel-item { */
  /* height: 100vh !important; */
  /* min-height: 225px !important; */
/* } */

body.ecube-project-detail-page .ecube-project-slide {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  /* background-position: center center !important; */
  /* background-repeat: no-repeat !important; */
  /* background-size: cover !important; */
}

/* Prevent the legacy header spacing from pushing the detail slideshow down. */
body.ecube-project-detail-page .ecube-project-hero-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ecube-project-detail-page .ecube-project-hero-header .menu-list-items {
  background: transparent !important;
  box-shadow: none !important;
}

@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: 37svh !important;
    min-height: 225px !important;
  }
}
/* Remove unwanted header border/background edge */
body.ecube-about-page header.ecube-site-header,
body.ecube-about-page header.ecube-site-header::before,
body.ecube-about-page header.ecube-site-header::after,
body.ecube-about-page header.ecube-site-header .menu-list-items,
body.ecube-about-page header.ecube-site-header .menu-list-items::before,
body.ecube-about-page header.ecube-site-header .menu-list-items::after {
    border: 0 !important;
    outline: 0 !important;
}

body.ecube-about-page header.ecube-site-header {
    background-image: none !important;
}

/* =========================================
   CONTACT - REDUCE TOP EMPTY SPACE
   ========================================= */

body:not(.ecube-hero-present) .iq-contact2 {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body:not(.ecube-hero-present) .iq-contact2 > .container,
body:not(.ecube-hero-present) .iq-contact2 .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body:not(.ecube-hero-present) .iq-contact2 .row {
    margin-top: 0 !important;
}

body:not(.ecube-hero-present) .iq-contact2 .iq-our-touch {
    padding-top: 0 !important;
    margin-top: 0 !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;
}
	}
	
	@media (min-width: 993px) {

	body.ecube-hero-present .ecube-site-header .menu-links > li > a {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.28) !important;
}
	}
	
	/* Mobile: header first, hero image below */
@media (max-width: 767px) {
   body.ecube-hero-present .ecube-site-header.ecube-header-overlay,
    .ecube-site-header.ecube-header-normal {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
        transform: none !important;
        background: #fff !important;
        z-index: 10;
    }
}

/* =========================================================
   v23 - Hero/header relationship
   The header overlays ONLY when the page has a real hero.
   If no Hero Image is configured, the header remains visible in
   normal document flow. Home is intentionally not touched here.
   ========================================================= */

/* Pages with a configured Hero Image: hero starts at the top and
   the shared header overlays the image. */
   @media (min-width: 768px) {

body.ecube-hero-present .ecube-site-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10020 !important;
  background: transparent !important;
  box-shadow: none !important;
}
}

/* =========================================================
   PROJECT DETAIL SLIDER
   Standard image: 1920 x 900
   Isolated from existing hero CSS
   ========================================================= */


/* ---------------------------------------------------------
   Main slider section
   --------------------------------------------------------- */

body.ecube-project-detail-page .ecube-project-image-natural {
    position: relative !important;

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

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

    overflow: visible !important;

    background: #fff !important;
}


/* ---------------------------------------------------------
   Carousel
   --------------------------------------------------------- */

body.ecube-project-detail-page
.ecube-project-image-natural
.ecube-project-carousel {
    position: relative !important;

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

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

    overflow: visible !important;

    background: #fff !important;
}


/* ---------------------------------------------------------
   Carousel inner
   --------------------------------------------------------- */

body.ecube-project-detail-page
.ecube-project-image-natural
.carousel-inner {
    position: relative !important;

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

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

    overflow: visible !important;

    background: #fff !important;
}


/* ---------------------------------------------------------
   Each carousel item
   --------------------------------------------------------- */

body.ecube-project-detail-page
.ecube-project-image-natural
.carousel-item {
    position: relative !important;

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

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

    overflow: visible !important;

    background: #fff !important;
}


/* ---------------------------------------------------------
   New isolated slide wrapper
   --------------------------------------------------------- */

body.ecube-project-detail-page
.ecube-project-image-natural
.ecube-project-natural-slide {
    position: relative !important;

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

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

    overflow: visible !important;

    background: #fff !important;
}


/* ---------------------------------------------------------
   Actual image
   1920 x 900 keeps exact aspect ratio
   --------------------------------------------------------- */

body.ecube-project-detail-page
.ecube-project-image-natural
.ecube-project-natural-image {
    display: block !important;

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

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

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

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

    object-fit: contain !important;
}


/* ---------------------------------------------------------
   IMPORTANT:
   Override old 100vh / 560px / fixed-height rules
   --------------------------------------------------------- */

body.ecube-project-detail-page
.ecube-project-image-natural,
body.ecube-project-detail-page
.ecube-project-image-natural .carousel,
body.ecube-project-detail-page
.ecube-project-image-natural .carousel-inner,
body.ecube-project-detail-page
.ecube-project-image-natural .carousel-item,
body.ecube-project-detail-page
.ecube-project-image-natural .banner {
    min-height: 0 !important;
    height: auto !important;
}


/* ---------------------------------------------------------
   Arrows
   Keep arrows vertically centered on the IMAGE itself,
   not on the old 560px/100vh hero area.
   --------------------------------------------------------- */

body.ecube-project-detail-page
.ecube-project-image-natural
.carousel-control-prev,
body.ecube-project-detail-page
.ecube-project-image-natural
.carousel-control-next {
    top: 0 !important;
    bottom: auto !important;

    height: 100% !important;

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

    z-index: 20 !important;
}


/* ---------------------------------------------------------
   Make arrow position follow image height
   --------------------------------------------------------- */

body.ecube-project-detail-page
.ecube-project-image-natural
.carousel-control-prev {
    left: 0 !important;
}

body.ecube-project-detail-page
.ecube-project-image-natural
.carousel-control-next {
    right: 0 !important;
}


/* ---------------------------------------------------------
   Arrow icon itself
   --------------------------------------------------------- */

body.ecube-project-detail-page
.ecube-project-image-natural
.carousel-control-prev-icon,
body.ecube-project-detail-page
.ecube-project-image-natural
.carousel-control-next-icon {
    position: absolute !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;
}

/* =========================================================
   PROJECT DETAIL - NATURAL IMAGE HEIGHT
   Images uploaded at 1920 x 900
   ========================================================= */

body.ecube-project-detail-page .ecube-project-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

body.ecube-project-detail-page .ecube-project-natural-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Keep every project-detail slide aligned to the top */
body.ecube-project-detail-page section.ecube-project-hero
.carousel-inner {
    vertical-align: top !important;
}

body.ecube-project-detail-page section.ecube-project-hero
.carousel-item {
    vertical-align: top !important;
    top: 0 !important;
}

body.ecube-project-detail-page section.ecube-project-hero
.ecube-project-natural-slide {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
	    vertical-align: top !important;

}

body.ecube-project-detail-page section.ecube-project-hero
.ecube-project-natural-image {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
	    vertical-align: top !important;

}

body.ecube-project-detail-page section.ecube-project-hero
.carousel-item.active,
body.ecube-project-detail-page section.ecube-project-hero
.carousel-item-next,
body.ecube-project-detail-page section.ecube-project-hero
.carousel-item-prev {
    top: 0 !important;
}
/* =========================================================
   PROJECT DETAIL SLIDER - TOP-ANCHORED SLIDES
   Isolated fix - does not affect other sliders
   ========================================================= */

.ecube-project-hero.ecube-project-image-natural
.ecube-project-carousel {
    position: relative !important;
    width: 100% !important;
}

/* Keep carousel viewport at the top */
.ecube-project-hero.ecube-project-image-natural
.ecube-project-carousel .carousel-inner {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* IMPORTANT:
   Bootstrap's incoming/outgoing slides must start at top: 0 */
.ecube-project-hero.ecube-project-image-natural
.ecube-project-carousel .carousel-item {
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
}

/* During Bootstrap sliding, force both slides to use the
   exact same top position */
.ecube-project-hero.ecube-project-image-natural
.ecube-project-carousel .carousel-item-next,
.ecube-project-hero.ecube-project-image-natural
.ecube-project-carousel .carousel-item-prev {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Our own wrapper */
.ecube-project-hero.ecube-project-image-natural
.ecube-project-natural-slide {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    vertical-align: top !important;
}

/* Image always starts from the top */
.ecube-project-hero.ecube-project-image-natural
.ecube-project-natural-image {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: top center !important;
    vertical-align: top !important;
}