/* ECO Panels frontend: theme-matched, page-scoped presentation. */
.eco-panels-page .eco-intro { padding: 110px 0 20px; }
.eco-panels-page .eco-intro p { max-width: 850px; margin: 0 auto; font-size: 16px; line-height: 1.8; text-align: center; }
.eco-panels-page .eco-section { padding: 95px 0; }
.eco-panels-page .eco-section .main_c_b_title { margin-bottom: 70px; }
.eco-panels-page .eco-section .main_c_b_title h2 { max-width: 900px; margin: 0 auto; line-height: 1.2; }
.eco-panels-page .eco-panel-row { display: flex; align-items: center; flex-wrap: wrap; }
.eco-panels-page .eco-panel-copy { font-size: 16px; line-height: 1.8; }
.eco-panels-page .eco-panel-copy p:last-child { margin-bottom: 0; }
.eco-panels-page figure { margin: 0; }
.eco-panels-page figcaption { padding-top: 12px; color: #666; font-size: 14px; line-height: 1.5; }
.eco-panels-page .eco-section-text { max-width: 850px; margin: 0 auto 36px; font-size: 16px; line-height: 1.8; text-align: center; }
.eco-panels-page .eco-examples-note { max-width: 850px; margin: 0 auto 16px; color: #3f649c; font-weight: 600; text-align: center; }

/* A fixed 520 x 500 media window; every slide occupies the same frame. */
.eco-panels-page .eco-panel-slider { width: min(100%, 520px); margin: 0 auto; text-align: center; }
.eco-panels-page .eco-panel-viewport { width: 100%; aspect-ratio: 26 / 25; overflow: hidden; background: #e9eef2; }
.eco-panels-page .eco-panel-track { display: flex; height: 100%; transform: translate3d(0, 0, 0); will-change: transform; }
.eco-panels-page .eco-panel-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.eco-panels-page .eco-panel-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.eco-panels-page .eco-panel-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #e9eef2; cursor: pointer; }
.eco-panels-page .eco-panel-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.eco-panels-page .eco-panel-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; padding-left: 4px; border: 2px solid #4EBDED; background: rgba(18, 31, 43, .75); color: #fff; font-size: 24px; line-height: 1; transform: translate(-50%, -50%); pointer-events: none; }
.eco-panels-page .eco-panel-play-mp4 { width: 42px; height: 42px; font-size: 16px; opacity: .85; }

.eco-panels-page .eco-panel-slide figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 34px 14px 12px; background: linear-gradient(transparent, rgba(18, 31, 43, .7)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); pointer-events: none; }
.eco-panels-page .eco-panel-slider-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.eco-panels-page .eco-panel-slider-controls button { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid #4EBDED; border-radius: 0; background: #fff; color: #4EBDED; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.eco-panels-page .eco-panel-slider-controls button svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.eco-panels-page .eco-panel-slider-controls button:hover { background: #4EBDED; color: #fff; }
.eco-panels-page .eco-panel-count { min-width: 52px; color: #31353d; font: 600 13px/1 "Montserrat", sans-serif; }

/* Services and Projects share the theme's blue inset frame and reveal. */
.eco-panels-page .eco-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.eco-panels-page .eco-card { min-width: 0; height: 304px; }
.eco-panels-page .eco-example-card { height: 350px; }
.eco-panels-page .eco-gallery-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; background: #31353d; text-align: center; cursor: pointer; }
.eco-panels-page .eco-gallery-photo { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.eco-panels-page .eco-process-gallery .eco-card:nth-child(3) .eco-gallery-photo { object-position: center 65%; }
.eco-panels-page .eco-gallery-open:hover .eco-gallery-photo,
.eco-panels-page .eco-gallery-open:focus-visible .eco-gallery-photo { transform: scale(1.035); }
.eco-panels-page .eco-card-frame { position: absolute; z-index: 1; inset: 18px; border: 2px solid rgba(94, 202, 249, .8); background: transparent; transition: background-color 400ms ease, border-color 400ms ease; }
.eco-panels-page .eco-process-card .eco-card-frame { border-color: transparent; }
.eco-panels-page .eco-process-card .eco-gallery-open::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(transparent 35%, rgba(13, 25, 39, .72)); }
.eco-panels-page .eco-card-default-title { position: absolute; z-index: 2; right: 25px; bottom: 25px; left: 25px; color: #e8e8e8; font: 600 18px/1.25 "Montserrat", sans-serif; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); transition: opacity 300ms ease; }
.eco-panels-page .eco-card-content { position: absolute; z-index: 2; inset: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 24px; opacity: 0; transform: translateY(1.5rem); transition: opacity 450ms ease, transform 450ms ease; }
.eco-panels-page .eco-card-title { color: #e8e8e8; font: 700 16px/1.3 "Montserrat", sans-serif; text-transform: uppercase; }
.eco-panels-page .eco-card-meta { margin-top: 7px; color: #263a4e; font: 600 12px/1.4 "Montserrat", sans-serif; }
.eco-panels-page .eco-card-excerpt { display: -webkit-box; max-height: 5em; margin: 13px 0 17px; overflow: hidden; color: #31353d; font: 13px/1.55 "Montserrat", sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.eco-panels-page .eco-card-more.view_btn { flex: none; background: #31353d; color: #fff; text-transform: uppercase; pointer-events: none; }
.eco-panels-page .eco-gallery-open:hover .eco-card-frame,
.eco-panels-page .eco-gallery-open:focus-visible .eco-card-frame { background: rgba(94, 202, 249, .9); border-color: rgba(94, 202, 249, .8); }
.eco-panels-page .eco-gallery-open:hover .eco-card-default-title,
.eco-panels-page .eco-gallery-open:focus-visible .eco-card-default-title { opacity: 0; }
.eco-panels-page .eco-gallery-open:hover .eco-card-content,
.eco-panels-page .eco-gallery-open:focus-visible .eco-card-content { opacity: 1; transform: translateY(0); }

/* ECO lightbox follows the white surface, blue title and x of the cost modal. */
.eco-panels-page .eco-media-dialog { width: min(920px, calc(100% - 24px)); height: min(820px, calc(100dvh - 24px)); max-width: none; max-height: none; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(0, 0, 0, .2); border-radius: 0; background: #fff; color: #444; box-shadow: 0 5px 15px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(10px) scale(.985); transition: opacity 240ms ease, transform 240ms ease; }
.eco-panels-page .eco-media-dialog:not([open]) { display: none; }
.eco-panels-page .eco-media-dialog.is-open { opacity: 1; transform: translateY(0) scale(1); }
.eco-panels-page .eco-media-dialog::backdrop { background: rgba(0, 0, 0, 0); transition: background-color 240ms ease; }
.eco-panels-page .eco-media-dialog.is-open::backdrop { background: rgba(0, 0, 0, .55); }
.eco-panels-page .eco-modal-header { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 61px; padding: 12px 20px; border-bottom: 1px solid #e5e5e5; background: #fff; }
.eco-panels-page .eco-modal-title { margin: 0; color: #092C60; font: bold 20px/1.3 "PT Sans", sans-serif; }
.eco-panels-page .eco-modal-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: #000; font: bold 30px/1 Arial, sans-serif; opacity: .3; cursor: pointer; transition: opacity 200ms ease; }
.eco-panels-page .eco-modal-close:hover { opacity: .6; }
.eco-panels-page .eco-modal-body { padding: 20px 24px 26px; }
.eco-panels-page .eco-modal-meta { margin: 0 0 8px; color: #3f649c; font-weight: 600; }
.eco-panels-page .eco-modal-meta:empty { display: none; }
.eco-panels-page .eco-modal-description { margin: 0 0 14px; line-height: 1.65; white-space: pre-line; }
.eco-panels-page .eco-modal-media { display: flex; align-items: center; justify-content: center; width: 100%; height: min(46vh, 440px); overflow: hidden; background: #f3f5f6; }
.eco-panels-page .eco-modal-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.eco-panels-page .eco-modal-video { display: block; width: 100%; height: 100%; object-fit: contain; }
.eco-panels-page .eco-modal-youtube { display: block; width: min(100%, 782px); height: auto; max-height: 100%; aspect-ratio: 16 / 9; border: 0; }
.eco-panels-page .eco-modal-media [hidden] { display: none; }

.eco-panels-page .eco-modal-caption { min-height: 22px; text-align: center; }
.eco-panels-page .eco-modal-photo-controls,
.eco-panels-page .eco-modal-item-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.eco-panels-page .eco-modal-photo-controls button { width: 40px; height: 40px; border: 1px solid #4EBDED; background: #fff; color: #4EBDED; font-size: 26px; line-height: 1; cursor: pointer; }
.eco-panels-page .eco-modal-photo-controls button:hover { border-color: #4EBDED; color: #3f649c; }
.eco-panels-page .eco-modal-photo-controls[hidden],
.eco-panels-page .eco-modal-item-controls[hidden] { display: none; }
.eco-panels-page .eco-modal-source { margin: 20px 0 0; color: #666; font-size: 13px; text-align: center; }
.eco-panels-page .eco-modal-item-controls { justify-content: space-between; padding-top: 17px; border-top: 1px solid #e5e5e5; }
.eco-panels-page .eco-modal-item-controls button { border: 0; background: transparent; color: #3f649c; cursor: pointer; font-weight: 600; }
.eco-panels-page .eco-modal-dynamic,
.eco-panels-page .eco-modal-title { transition: opacity 170ms ease, transform 170ms ease; }
.eco-panels-page .eco-media-dialog.is-exit-next .eco-modal-dynamic,
.eco-panels-page .eco-media-dialog.is-exit-next .eco-modal-title { opacity: 0; transform: translateX(-24px); }
.eco-panels-page .eco-media-dialog.is-exit-prev .eco-modal-dynamic,
.eco-panels-page .eco-media-dialog.is-exit-prev .eco-modal-title { opacity: 0; transform: translateX(24px); }
.eco-panels-page .eco-media-dialog.is-enter-next .eco-modal-dynamic,
.eco-panels-page .eco-media-dialog.is-enter-next .eco-modal-title { opacity: 0; transform: translateX(24px); transition: none; }
.eco-panels-page .eco-media-dialog.is-enter-prev .eco-modal-dynamic,
.eco-panels-page .eco-media-dialog.is-enter-prev .eco-modal-title { opacity: 0; transform: translateX(-24px); transition: none; }
.eco-panels-page .eco-panel-slider-controls button:focus-visible,
.eco-panels-page .eco-gallery-open:focus-visible,
.eco-panels-page .eco-panel-open:focus-visible,
.eco-panels-page .eco-media-dialog button:focus-visible { outline: 3px solid #092C60; outline-offset: 3px; }
.eco-panels-page .eco-gallery-open:focus-visible,
.eco-panels-page .eco-panel-open:focus-visible { outline-offset: -5px; }

.eco-panels-page .eco-contact-section .container { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.eco-panels-page .eco-contact-section .pull-left,
.eco-panels-page .eco-contact-section .pull-right { float: none !important; }
.eco-panels-page .eco-contact-section p { max-width: 700px; margin: 8px 0 0; font-size: 16px; line-height: 1.6; }
.eco-panels-page .eco-contact-section .get_btn_black { white-space: nowrap; }

@media (max-width: 991px) {
  .eco-panels-page .eco-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .eco-panels-page .eco-intro { padding: 65px 0 20px; }
  .eco-panels-page .eco-section { padding: 70px 0; }
  .eco-panels-page .eco-section .main_c_b_title { margin-bottom: 40px; }
  .eco-panels-page .eco-panel-slider { margin-top: 28px; }
  .eco-panels-page .eco-contact-section .container { display: block; text-align: center; }
  .eco-panels-page .eco-contact-section p { margin: 12px auto 18px; }
  .eco-panels-page .eco-contact-section .get_btn_black { white-space: normal; }
}
@media (max-width: 575px) {
  .eco-panels-page .eco-section { padding: 55px 0; }
  .eco-panels-page .eco-section .main_c_b_title { margin-bottom: 25px; }
  .eco-panels-page .eco-gallery { grid-template-columns: minmax(0, 1fr); }
  .eco-panels-page .eco-section .main_c_b_title h2 { font-size: 28px; }
  .eco-panels-page .eco-modal-header { padding: 10px 14px; }
  .eco-panels-page .eco-modal-body { padding: 16px 14px 22px; }
  .eco-panels-page .eco-modal-media { height: min(40vh, 340px); }
  .eco-panels-page .eco-modal-item-controls { gap: 8px; font-size: 13px; }
  .get_quote_area.project_contact.eco-contact-section { padding: 40px 0 32px 0px; }
  .get_quote_area.project_contact.eco-contact-section .get_btn_black { font-size: 16px; }
  .get_quote_area.project_contact .pull-left h3 { font-size: 26px; }
}
@media (hover: none), (max-width: 575px) {
  .eco-panels-page .eco-card { height: 360px; }
  .eco-panels-page .eco-card-frame { inset: 0; border: 0; }
  .eco-panels-page .eco-gallery-open:hover .eco-card-frame,
  .eco-panels-page .eco-gallery-open:focus-visible .eco-card-frame { border: 0; background: transparent; }
  .eco-panels-page .eco-card-default-title { display: none; }
  .eco-panels-page .eco-card-content { inset: auto 0 0; justify-content: flex-end; min-height: 150px; padding: 14px 18px; background: rgba(94, 202, 249, .96); opacity: 1; transform: none; transition: none; }
  .eco-panels-page .eco-card-title { font-size: 14px; }
  .eco-panels-page .eco-card-excerpt { margin: 7px 0 9px; -webkit-line-clamp: 2; max-height: 3.1em; }
  .eco-panels-page .eco-process-card .eco-gallery-open::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-panels-page .eco-panel-track,
  .eco-panels-page .eco-panel-slider-controls button,
  .eco-panels-page .eco-gallery-photo,
  .eco-panels-page .eco-card-frame,
  .eco-panels-page .eco-card-default-title,
  .eco-panels-page .eco-card-content,
  .eco-panels-page .eco-media-dialog,
  .eco-panels-page .eco-media-dialog::backdrop,
  .eco-panels-page .eco-modal-title,
  .eco-panels-page .eco-modal-dynamic { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}