/*
 * ui.css - TABLE OF CONTENTS  (search "[SNN]" to jump to a section)
 *
 *   [S01] BASE - html, body, typography, early utilities
 *   [S02] COMMENTS - blog comment form & list
 *   [S03] GALLERY / VIDEO / SHARE ROW
 *   [S04] ICONS & BLOG CARDS
 *   [S05] BUTTONS (.btn family)
 *   [S06] GLOBAL UTILITIES (bg, headings, hr, alignment, z-index)
 *   [S07] NAVBAR - desktop, dropdowns, responsive
 *   [S08] HOMEPAGE - bg animation, hero block, border-box
 *   [S09] HOMEPAGE - BIG-3 buttons
 *   [S10] BLOG POST PREVIEW / DATE
 *   [S11] FOOTER, HEADER, BREADCRUMBS, CONTACT MAP/FORM
 *   [S12] SELECT2 - custom dropdown
 *   [S13] PRODUCT CATEGORY NAV (category-link, menu-categories)
 *   [S14] SHOW-MORE / PARAMS / VERTICAL BOOKMARKS / page404
 *   [S15] PAGINATION / POST CONTENT / FORMS (wpcf7) / bg-fields
 *   [S16] GRID HELPERS / SCROLLBAR / DESCRIPTION BLOCKS
 *   [S17] PRODUCT CARDS - glass-card & modern-product-card
 *   [S18] MOBILE MENU - toggler / burger / offcanvas
 *   [S19] CATEGORY CARDS - modern-cat-card / subcat-card
 *   [S20] PARAMETRIC SEARCH TABLE
 *   [S21] 3D STEP-VIEWER MODAL
 *   [S22] *** DARK-THEME OVERRIDE LAYER 1 - single-product / tax-pcategory (!important)
 *   [S23] *** DARK-THEME OVERRIDE LAYER 2 - global body/type/links/cards/forms/select2
 *   [S24] *** DARK-THEME OVERRIDE LAYER 3 - navbar/footer/offcanvas/misc (override graveyard)
 *   [S25] PAGE-SPECIFIC - Technical Resources / Circuit Emulator
 *   [S26] PAGE-SPECIFIC - Custom Development landing
 *   [S27] LANGUAGE SWITCHER (desktop + mobile) + responsive nav fixes
 *
 * NOTE: sections [S22]-[S24] are 'override layers' that re-skin earlier
 * rules with !important. If a style refuses to change, check those too.
 *
 * Refactor 2026-06-19 (safe surgery): added these comment markers only -
 * NO rules were moved or merged - plus fixed 2 transition typos
 * (.smooth-hover, .big-3 a). Original backup: css/ui.css_bckp_26.06.19
 */

/* ========== [S01] BASE - html, body, typography, early utilities ========== */

html
html.html-homepage-bg body {
  background: #011c37;
}

body,
html {
  font-family:
    Noto Sans,
    sans-serif;
  font-size: 17px;
  font-weight: 300;
  scroll-behavior: smooth !important;
}

#homepage-slogan {
  font-family: Poppins, sans-serif;
}

.video-block-link {
  display: block;
  width: 100%;
  cursor: pointer;
}

.contact-email {
  font-size: 24px !important;
}

.contact-box {
  background-color: rgba(0, 45, 88, 0.75);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border-radius: 16px;
}

#contact-form .btn {
  border-radius: 16px;
}

.contact-wrapper {
  background-size: cover;
}

@media (max-width: 992px) {
  .text-center.pt-5.contact-headline-shadow {
    color: #fff;
  }

  .contact-wrapper {
    background-image: url(https://www.aeps-group.com/wp-content/uploads/contact-back-mobile.webp);
  }
}

@media (min-width: 993px) {
  .contact-wrapper {
    background-image: url(https://www.aeps-group.com/wp-content/uploads/contact-back-desktop.webp);
  }
}

.smooth-hover {
  transition: border-color 0.3s, background 0.3s;
}

.col-4-social {
  flex: 0 0 auto;
  width: 16.66666667%;
}

@media (min-width: 992px) {
  .col-lg-2-social {
    flex: 0 0 auto;
    width: 8.3333333%;
  }
}

@media (min-width: 1200px) {
  a.nav-link {
    font-size: 15px !important;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  a.nav-link {
    font-size: 11px !important;
  }
}

@media (min-width: 1400px) {
  .distr-list {
    margin-left: 148px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1400px) {
  .distr-list {
    margin-left: 57px !important;
  }
}

.middle-link {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  color: #212529;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

@media (max-width: 991px) {
  .middle-link {
    font-weight: 800;
    font-size: 18px;
  }
}

@media (min-width: 992px) {
  .middle-link {
    font-weight: 400;
    font-size: 16px;
  }
}

/* ========== [S02] COMMENTS - blog comment form & list ========== */

.comments-area {
  background: #032f5e !important;
  border-radius: 5px;
  position: relative;
  margin-bottom: 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.comments-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-left: auto;
  margin-bottom: 20px;
  margin-right: auto;
  max-width: 1000px;
}

.comments-title span {
  color: #007bff;
}

.comments-title .count {
  font-size: 18px;
  color: #888;
}

.comment-list {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.comment {
  color: #ddd;
  margin-bottom: 30px;
  padding: 15px;
  border: 2px solid #ddd;
  border-radius: 5px;
}

.comment-form {
  margin-top: 30px;
}

.comment-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.comment-form input[type="submit"] {
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

.comment-form input[type="submit"]:hover {
  background-color: #0056b3;
}

.comment a {
  color: #007bff;
}

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

  .comment-form input,
  .comment-form textarea {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .comments-area {
    max-width: 540px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .comments-area {
    max-width: 720px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .comments-area {
    max-width: 960px;
  }
}

@media (max-width: 1200px) {
  .comments-area {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* ========== [S03] GALLERY / VIDEO / SHARE ROW ========== */

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.gallery figure {
  margin: 5px;
}

@media screen and (max-width: 536px) {
  .content-block-min-height {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media screen and (max-width: 768px) {
  .content-block-min-height {
    max-width: 100% !important;
  }
}

@media screen and (max-width: 992px) {
  .responsive-header {
    font-size: 1.3rem;
  }
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slides-iframe {
  display: block;
  width: 100%;
  aspect-ratio: 1295/468;
  object-fit: contain;
  background: #000;
}

.row-share {
  flex-wrap: nowrap !important;
  margin-top: 7vh;
}

@media (max-width: 768px) {
  .slides-iframe {
    height: auto;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .slides-iframe {
    height: auto;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .slides-iframe {
    height: auto;
  }
}

@media (min-width: 1201px) {
  .slides-iframe {
    height: auto;
  }
}

.first-seat {
  z-index: 1;
}

/* ========== [S04] ICONS & BLOG CARDS ========== */

/* inline SVG icons from aeps_icon() (replacement for the Font Awesome kit) */
.aeps-svg-icon {
  display: inline-block;
  height: 1em;
  width: auto;
  overflow: visible;
  vertical-align: -0.125em;
  fill: currentColor;
}

.aeps-svg-icon.fa-2x {
  font-size: 2em;
}

.aeps-svg-icon.fa-4x {
  font-size: 4em;
}

.aeps-icon {
  color: #2665a8;
  size: 50px;
  transition: 0.3s;
}

.aeps-icon:hover {
  color: #fff;
}

.share-icon {
  color: #fff;
  size: 50px;
  transition: 0.3s;
}

.share-icon:hover {
  color: #fcb900;
}

.card-text {
  color: #889bae;
}

.cover-container {
  width: 100%;
  height: 100%;
}

.cover-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.blog-cards {
  transition: 0.2s;
  border: none;
  background-color: rgba(2, 33, 66, 0.84);
  color: #fff !important;
}

.blog-cards:hover {
  transform: scale(0.98);
}

.blog-cards>img {
  object-fit: cover;
}

.blog-cards .card-title {
  letter-spacing: 0.5px;
  font-size: 1.15rem !important;
}

.blog-cols {
  margin-bottom: 22.5px;
}

.blog-cols>a:active,
.blog-cols>a:hover,
.blog-cols>a:link,
.blog-cols>a:visited {
  text-decoration: none;
  color: inherit;
}

.flex-grow-1 {
  -webkit-box-flex: 1 !important;
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

/* ========== [S05] BUTTONS (.btn family) ========== */

.btn {
  border-radius: 0;
  padding: 15px 25px;
}

.btn.btn-sm {
  padding: 8px 15px;
}

.btn-primary {
  background-color: var(--color-accent);
  border: 0;
}

.btn-primary:hover {
  background-color: #d89100;
}

.btn-secondary {
  background-color: #244997;
  border: 0;
  margin-right: 4px;
}

.btn-secondary:hover {
  background-color: #143985;
}

.btn-secondary.btn-arrow span.arrow {
  background-color: #3c85cb;
}

.btn-secondary.btn-arrow span.arrow svg {
  fill: #fff;
}

.btn-outline-secondary {
  border-color: #b7c4d2;
  color: #244997;
  padding-top: 14px;
  padding-bottom: 14px;
}

.btn-outline-secondary:hover {
  border-color: #8293a7;
  background-color: #8293a7;
}

.btn-outline-secondary.btn-arrow span.arrow {
  background-color: #fff;
  border-left: 1px solid #b7c4d2;
}

.btn-outline-secondary.btn-arrow span.arrow svg * {
  fill: #244997;
}

.btn-outline-light {
  border-color: #fff;
}

.btn-outline-light:hover {
  background-color: #fff;
  color: #244997;
}

.btn-outline-light.btn-arrow span.arrow {
  background-color: transparent;
  border-left: 1px solid #fff;
}

.btn-outline-light.btn-arrow span.arrow svg {
  fill: #fff;
}

.btn-outline-light.btn-arrow span.arrow {
  -webkit-transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
  -o-transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
}

.btn-outline-light.btn-arrow:hover span.arrow {
  background-color: #fff;
}

.btn-outline-light.btn-arrow:hover span.arrow svg {
  fill: #244997;
}

.btn-arrow {
  position: relative;
  padding-right: 60px;
}

.btn-arrow span.arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 35px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* ========== [S06] GLOBAL UTILITIES (bg, headings, hr, alignment, z-index) ========== */

.shadow {
  -webkit-box-shadow: 0 0.5em 2rem rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 0.5em 2rem rgba(0, 0, 0, 0.75) !important;
}

.bg-blue-1 {
  background-color: #103961;
}

.bg-blue-2 {
  background-color: #0b2e51;
}

.line-height-16 {
  line-height: 1.6em;
}

.font-size-20 {
  font-size: 20px;
}

.heading-orange {
  background: var(--color-accent);
  color: #fff;
  font-size: 30px;
  text-align: center;
  font-weight: 700;
}

.alert {
  border-radius: 0;
}

.form-control[required] {
  background: url(../../../../../../../themes/aeps/img/required.png) 100% 0 no-repeat;
}

.bg-navy {
  background-color: #021529;
}

.z-index-1 {
  z-index: 1 !important;
}

hr {
  width: 100%;
}

img.alignleft {
  float: left;
  margin: 0 2rem 1rem 0;
}

img.alignright {
  float: left;
  margin: 0 0 1rem 2rem;
}

@media (max-width: 991px) {

  .h2,
  h2 {
    font-size: 30px;
  }
}

/* ========== [S07] NAVBAR - desktop, dropdowns, responsive ========== */

nav#navbar {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.18);
  font-size: 13px;
  background: #021529;
  -webkit-transition: background-color 0.3s linear 0.3s;
  -o-transition: background-color 0.3s linear 0.3s;
  transition: background-color 0.3s linear 0.3s;
  backface-visibility: hidden;
}

body.scrolled nav#navbar {
  background-color: rgba(2, 21, 41, 0.7) !important;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  height: 59px;
}

nav#navbar .navbar-brand {
  padding: 0.75rem 0;
}

nav#navbar .navbar-brand img {
  will-change: height;
}

body.scrolled nav#navbar .navbar-brand img {
  height: 35px;
}

.navbar-nav a {
  color: #fff !important;
}

.navbar-nav li {
  background-image: none;
  padding-left: 0;
}

.navbar-nav>li>a {
  text-transform: uppercase;
}

.lang-switcher a img.flag {
  border: 2px solid #fff;
  border-radius: 50%;
}

.navbar-nav>li div.dropdown-menu li {
  background-image: none;
  position: relative;
}

.navbar-nav>li:not(.lang-switcher) div.dropdown-menu a:focus,
.navbar-nav>li:not(.lang-switcher) div.dropdown-menu a:hover {
  background: #325278;
}

li.current-menu-parent>a,
li.current_page_item>a {
  text-decoration: underline;
}

@media (min-width: 992px) {
  .navbar-nav li {
    margin-bottom: 0;
  }

  nav#navbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .navbar-nav>li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    background-image: none;
  }

  .navbar-nav>li>a {
    border-bottom: 2px solid transparent;
  }

  .navbar-nav>li.menu-item-has-children>a:after {
    content: "";
    width: 13px;
    height: 13px;
    background: url(../../../../../../../themes/aeps/img/icon-expand.svg) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 0.5rem;
  }

  .navbar-nav>li>a:hover {
    border-bottom: 2px solid var(--color-accent);
  }

  .navbar-nav>li div.dropdown-menu {
    border: 0;
  }

  .navbar-nav div.dropdown-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
    pointer-events: none;
  }

  .navbar-nav>li:hover {
    background: rgba(33, 61, 92, 0.68);
  }

  .navbar-nav>li:hover>div.dropdown-menu {
    position: absolute;
    top: 100%;
    margin-top: -2px;
    left: 0;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    background: #234163;
    border-top: 2px solid var(--color-accent);
    pointer-events: auto;
  }

  .navbar-nav>li:hover>div.dropdown-menu>ul>li:hover>a {
    background: #325278;
  }

  .navbar-nav>li li div.dropdown-menu {
    transform: translateX(-10px);
  }

  .navbar-nav>li li:hover>div.dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    background: #1d3a5b;
    margin-top: 0;
    pointer-events: auto;
  }

  .navbar-nav>li.lang-switcher:hover div.dropdown-menu {
    border: 0;
    background: rgba(33, 61, 92, 0.68);
    width: 100%;
  }

  .navbar-nav>li:not(.lang-switcher) div.dropdown-menu a {
    position: relative;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  .navbar-nav>li:not(.lang-switcher)>div.dropdown-menu>a:not(:last-child):after {
    background: #3b5674;
    content: "";
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    position: absolute;
    bottom: 0;
    left: 10px;
  }

  .navbar-nav>li:not(.lang-switcher)>a.nav-link {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 2em !important;
  }

  .lang-switcher>a {
    cursor: default;
    border-color: transparent !important;
  }

  .lang-switcher a {
    padding: 15px 2em !important;
  }

  .lang-switcher .dropdown-menu {
    min-width: auto;
    display: none;
    margin-top: 0 !important;
  }

  .lang-switcher .dropdown-menu a:hover {
    background: rgba(33, 61, 92, 0.6);
  }

}

body:not(.admin-bar) nav#navbar {
  position: fixed;
}

body.admin-bar #menu-placeholder {
  display: none !important;
}

@media (max-width: 991px) {
  #navbarSupportedContent {
    background: rgba(33, 61, 92, 0.98);
    position: fixed;
    left: 0;
    right: 0;
    top: 94px;
    z-index: 90;
    overflow: auto;
  }

  .navbar-nav>li:not(.lang-switcher)>a.nav-link {
    padding: 5px 16px !important;
    display: block;
    text-align: left;
    width: 100%;
    font-size: 22px;
  }

  .navbar-nav>li {
    padding: 0;
    background: none;
  }

  .dropdown-menu {
    display: block;
    background: none;
    text-align: left;
    font-size: 14px;
  }

  .navbar-nav>li.lang-switcher a {
    display: inline-block;
    width: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .navbar-nav>li.lang-switcher>a {
    display: none;
  }

  .navbar-nav>li.lang-switcher .dropdown-menu {
    border: 0;
    margin-bottom: 1rem;
  }

  .navbar-nav>li:not(.lang-switcher) div.dropdown-menu a:after {
    display: none !important;
  }

  .navbar-nav>li.lang-switcher .dropdown-menu a:active,
  .navbar-nav>li.lang-switcher .dropdown-menu a:focus,
  .navbar-nav>li.lang-switcher .dropdown-menu a:hover {
    background: none;
  }

  .navbar-toggler-icon {
    padding-top: 3px;
  }

  .navbar-toggler-icon span,
  .navbar-toggler-icon:after,
  .navbar-toggler-icon:before {
    height: 4px;
    background: #fff;
    content: "";
    display: block;
    width: 30px;
    -webkit-transition:
      opacity 0.3s,
      top 0.3s,
      -webkit-transform 0.3s;
    transition:
      opacity 0.3s,
      top 0.3s,
      -webkit-transform 0.3s;
    -o-transition:
      opacity 0.3s,
      transform 0.3s,
      top 0.3s;
    transition:
      opacity 0.3s,
      transform 0.3s,
      top 0.3s;
    transition:
      opacity 0.3s,
      transform 0.3s,
      top 0.3s,
      -webkit-transform 0.3s;
    position: relative;
  }

  .navbar-toggler-icon span,
  .navbar-toggler-icon:after {
    margin-top: 5px;
  }

  .navbar-toggler:not(.collapsed) .navbar-toggler-icon span {
    opacity: 0;
  }

  .navbar-toggler:not(.collapsed) .navbar-toggler-icon:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -7px;
  }

  .navbar-toggler:not(.collapsed) .navbar-toggler-icon:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 11px;
  }
}

/* ========== [S08] HOMEPAGE - bg animation, hero block, border-box ========== */

#homepage-bg {
  background: #021d3a url(../../../../../../../themes/aeps/img/homepage-bg.jpg) 0 no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  -webkit-animation: bgAnim 50s linear;
  animation: bgAnim 50s linear;
  background-size: cover;
}

@-webkit-keyframes bgAnim {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bgAnim {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

#homepage-block {
  color: #fff;
}

#homepage-block>* {
  position: relative;
  z-index: 1;
}

#homepage-block .border-box {
  border: 2px solid hsla(0, 0%, 100%, 0.18);
  border-bottom: 0;
  border-top: 0;
  position: relative;
}

#homepage-block .border-box .display-1 {
  font-size: 79px;
  font-weight: 700;
  line-height: 1.1;
  padding: 35px 0 30px;
}

#homepage-block .border-box .display-1 small {
  font-weight: 700;
  display: block;
}

#homepage-block .btn-primary {
  background-color: rgba(255, 171, 0, 0.9);
}

#homepage-block .btn-primary:hover {
  background-color: rgba(216, 145, 0, 0.9);
}

.border-box-text {
  color: #fdab00;
  position: absolute;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 25px;
  font-weight: 300;
}

.border-box-text b {
  font-weight: 700;
}

.border-box-text:after,
.border-box-text:before {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: block;
  height: 2px;
  background: hsla(0, 0%, 100%, 0.18);
  content: "";
}

.border-box-text:before {
  margin: 0 15px 0 -2px;
}

.border-box-text:after {
  margin: 0 -2px 0 15px;
}

#homepage-block .border-box-text-top {
  top: -2px;
  left: 0;
}

.border-box-text span {
  position: relative;
  top: -19px;
}

@media (max-width: 1100px) {
  #homepage-bg {
    background-position: right 0;
  }
}

@media (min-width: 992px) {
  body:not(.logged-in) .homepage-margintop {
    margin-top: 94px !important;
  }
}

@media (max-width: 991px) {
  #homepage-bg {
    background-image: url(../../../../../../../themes/aeps/img/homepage-bg-mobile.jpg);
  }

  .homepage-margintop {
    margin-top: 0 !important;
  }

  #homepage-block .border-box .display-1 {
    font-size: 60px;
  }
}

@media (max-width: 500px) {
  #homepage-block {
    min-height: 400px;
  }

  #homepage-block .border-box .display-1 {
    font-size: 40px;
  }

  .navbar-brand img {
    height: 2rem;
  }

  .border-box-text {
    font-size: 18px;
  }

  .border-box-text span {
    top: -13px;
  }
}

@media (max-width: 400px) {
  #homepage-bg {
    background-image: url(../../../../../../../themes/aeps/img/homepage-bg-mobile-xs.jpg);
  }
}

/* ========== [S09] HOMEPAGE - BIG-3 buttons ========== */

.big-3 {
  z-index: 3;
}

.big-3 a {
  border-top: 2px solid transparent;
  background: #032f5e86;
  color: #fff;
  text-decoration: none;
  height: 100%;
  padding: 30px 35px;
  position: relative;
  min-height: 144px;
}

.big-3 a:hover {
  border-color: var(--color-accent);
  background: #032f5e;
}

.big-3 a span.button {
  content: "Go";
  display: block;
  min-width: 53px;
  height: 53px;
  background: #3c85cb;
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
  -webkit-transition:
    all 0.3s,
    color 0.1s;
  -o-transition:
    all 0.3s,
    color 0.1s;
  transition:
    all 0.3s,
    color 0.1s;
  z-index: 1;
  font-size: 23px;
  line-height: 53px;
  text-align: right;
  padding: 0 15px 0 12px;
  color: transparent;
}

.big-3 a:hover span.button {
  background-color: var(--color-accent);
  color: #fff;
}

.big-3 a span.button span {
  max-width: 0;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}

.big-3 a:hover span.button span {
  max-width: 200px;
  padding: 0 5px;
}

.big-3 a span.button img {
  display: inline-block;
  margin: 0 3px;
}

.big-3 a h2 {
  border-bottom: 1px solid #4c75b1;
  padding: 0 0 20px;
  font-size: 26px;
  margin-bottom: 20px;
  font-weight: 400;
}

.big-3 a p {
  line-height: 1.7;
}

.big-3 a {
  transition: border-color 0.3s, background 0.3s;
}

@media (max-width: 991px) {
  .big-3 a {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .big-3 a h2 {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .big-3 a {
    border-top-width: 1px;
  }
}

@media only screen and (max-device-width: 800px) and (orientation: landscape) {
  .big-3 {
    margin-top: 30px;
  }

  #homepage-slogan {
    margin-top: 50px;
  }
}

/* ========== [S10] BLOG POST PREVIEW / DATE ========== */

.date {
  color: #889bae;
  font-weight: 500;
  font-size: 18px;
}

.date img {
  position: relative;
  top: -2px;
  margin-right: 5px;
}

.blog-post-preview {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  position: relative;
}

.latest-post-label {
  background: var(--color-accent);
  color: #fff;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
  border-radius: 16px;
}

.post-body {
  background: rgba(2, 33, 66, 0.95);
  padding-bottom: 7.5px;
  padding-left: 15px;
  padding-right: 15px;
}

.post-body h2 a {
  display: block;
}

@media (min-width: 992px) {
  .post-body {
    padding: 60px 0 50px !important;
  }

  .post-body h2 a:after,
  .post-body h2 a:before {
    background: var(--color-accent);
    content: "";
    display: block;
    min-width: 10px;
    max-width: 10px;
  }

  .post-body h2 a:before {
    margin-right: 55px;
  }

  .post-body h2 a:after {
    margin-left: 55px;
  }

  .post-body-content {
    padding: 0 65px !important;
  }
}

/* ========== [S11] FOOTER, HEADER, BREADCRUMBS, CONTACT MAP/FORM ========== */

#footer {
  background: #011c37;
  color: #fff;
  font-size: 13px;
  line-height: 1.7;
}

#footer a {
  color: #9aafc4;
}

#footer hr {
  border-color: #2f455b;
}

#footer ul li {
  margin-bottom: 0.3em;
}

.bg-blue-wide-rectangles {
  background: url(../../../../../../../themes/aeps/img/bg-blue-wide-rectangles-transparent.png) top no-repeat;
  background-size: cover;
}

.img-shadow-orange {
  display: inline-block;
  position: relative;
}

.img-shadow-orange:after {
  content: "";
  display: block;
  top: 15px;
  left: -15px;
  bottom: -15px;
  right: 15px;
  position: absolute;
  background: var(--color-accent);
}

.img-shadow-orange img {
  position: relative;
  z-index: 1;
}

.image-move-down {
  position: relative;
  top: 4em;
}

#header {
  background-color: #021529;
}

.breadcrumbs {
  background: #112741;
  font-size: 13px;
}

.breadcrumbs.semitransparent {
  background: rgba(17, 39, 65, 0.71);
}

.breadcrumbs svg {
  fill: #9aafc4;
  height: 12px;
  margin: 0 8px;
}

.breadcrumbs a {
  color: #9aafc4 !important;
  text-decoration: underline;
}

.breadcrumbs a:hover {
  text-decoration: none;
}

.breadcrumbs a.current-item {
  color: #fff !important;
  text-decoration: none;
}

.circle-blue {
  background-size: contain;
  min-width: 67px;
  height: 67px;
}

.map-wrapper {
  border-top: 3px solid rgba(239, 244, 248, 0.36);
  border-bottom: 3px solid rgba(239, 244, 248, 0.36);
  padding: 0px !important;
}

#contact-map {
  height: 300px;
}

#contact-form {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

#contact-form .heading-orange {
  margin-top: 0;
}

#contact-form .wpcf7-form {
  padding-left: 40px;
  padding-right: 40px;
}

@media (min-width: 992px) {
  #contact-map {
    height: 783px;
  }

  .contact-border-left {
    border-left: 2px solid rgba(222, 237, 255, 0.25);
  }

  #contact-form {
    position: absolute;
    top: -40px;
    left: 50%;
    max-width: 560px;
  }
}

@media (max-width: 991px) {
  #contact-form {
    border-radius: 12px;
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  #contact-form .wpcf7-form {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ========== [S12] SELECT2 - custom dropdown ========== */

.btn.btn-secondary svg {
  fill: #fff;
}

.select2-container {
  width: 100% !important;
  max-width: 100% !important;
}

.select2-container .select2-selection--single {
  border: 1px solid #ced4da !important;
  border-radius: 0.25rem !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  color: #495057 !important;
  padding-left: 12px !important;
  padding-right: 30px !important;
  width: 100% !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
  width: 30px !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.select2-dropdown {
  border: 1px solid #ced4da !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  border-radius: 0.25rem !important;
  left: 0 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

.select2-dropdown.select2-dropdown--above {
  top: -2px;
}

.select2-dropdown.select2-dropdown--below {
  top: 2px;
}

.select2-dropdown li {
  background-image: none;
}

/* ========== [S13] PRODUCT CATEGORY NAV (category-link, menu-categories) ========== */

.category-link {
  color: #fff !important;
  text-decoration: none !important;
  height: 100%;
  background: #00000050;
  border-top: 2px solid transparent;
}

.category-link:active,
.category-link:focus,
.category-link:hover {
  background: rgba(2, 33, 66, 0.84);
  border-color: var(--color-accent);
}

.category-link .category-name-line {
  text-align: center;
}

.category-link .category-name {
  padding: 0.6em 0;
  margin: 0 1em;
  font-size: 15px;
  border-top: 1px solid #4c75b1;
}

.category-link .category-arrow {
  min-width: 53px;
  background: #3c85cb;
}

.category-link:active .category-arrow,
.category-link:focus .category-arrow,
.category-link:hover .category-arrow {
  background-color: var(--color-accent);
}

.category-link .category-img {
  position: relative;
}

.category-link .category-img img {
  max-height: 95%;
}

.menu-categories .category-link .category-img img {
  max-width: 90%;
}

.category-link .category-img .category-desc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow: auto;
}

.category-link:active .category-img .category-desc,
.category-link:focus .category-img .category-desc,
.category-link:hover .category-img .category-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.category-link .category-img .category-desc p {
  margin: 5px 0;
}

.category-link .category-img .category-desc>div> :last-child {
  margin-bottom: 0 !important;
}

.category-link .category-img .category-desc>div>div,
.category-link .category-img .category-desc>div>ol,
.category-link .category-img .category-desc>div>p,
.category-link .category-img .category-desc>div>table,
.category-link .category-img .category-desc>div>ul {
  width: 100%;
}

.custom-cat-desc,
.main-cat-desc-column {
  max-width: none !important;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(100% - 15px);
  flex: 0 0 calc(100% - 15px);
}

@media (min-width: 1200px) {

  .custom-cat-desc,
  .main-cat-desc-column {
    max-width: none !important;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(60% - 15px);
    flex: 0 0 calc(60% - 15px);
  }

  .show-more-link {
    right: calc(40% + 15px) !important;
  }
}

.description-top,
.main-cat-desc {
  background: #00000050;
}

.main-cat-desc h2 {
  color: #fff;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.main-cat-desc-row {
  width: calc(100% - 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.menu-categories {
  margin-left: -15px;
  margin-right: -15px;
}

.menu-categories .col {
  min-width: 200px;
  padding-left: 0;
}

@media (max-width: 429px) {
  .menu-categories .col {
    padding-right: 0;
  }
}

/* ========== [S14] SHOW-MORE / PARAMS / VERTICAL BOOKMARKS / page404 ========== */

.show-more-link {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 15px;
}

.show-more-link:not(.expanded-link) {
  background: -webkit-linear-gradient(top,
      transparent,
      rgba(1, 7, 14, 0.6) 33%,
      rgba(2, 21, 41, 0.8));
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(transparent),
      color-stop(33%, rgba(1, 7, 14, 0.6)),
      to(rgba(2, 21, 41, 0.8)));
  background: -o-linear-gradient(top,
      transparent 0,
      rgba(1, 7, 14, 0.6) 33%,
      rgba(2, 21, 41, 0.8) 100%);
  background: linear-gradient(180deg,
      transparent 0,
      rgba(1, 7, 14, 0.6) 33%,
      rgba(2, 21, 41, 0.8));
}

.expanded-block .description-top,
.expanded-block .main-cat-desc {
  padding-bottom: 3em !important;
}

.description-top.collapsed.no-scrollbar,
.main-cat-desc.collapsed.no-scrollbar {
  height: 250px;
  overflow: hidden;
}

.product-list h2 {
  font-size: 28px;
}

.params .param {
  padding-left: 30px;
  position: relative;
}

.params .param:before {
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 0;
  left: 0;
}

.param-power-density:before {
  background: url(../../../../../../../themes/aeps/img/param-icons/icon-power.svg) center center no-repeat;
}

.param-profile:before {
  background: url(../../../../../../../themes/aeps/img/param-icons/icon-profile.svg) center center no-repeat;
}

.param-temperature:before {
  background: url(../../../../../../../themes/aeps/img/param-icons/icon-temperature.svg) center center no-repeat;
}

.param-output:before {
  background: url(../../../../../../../themes/aeps/img/param-icons/icon-output.svg) center center no-repeat;
}

.param-efficiency:before {
  background: url(../../../../../../../themes/aeps/img/param-icons/icon-efficiency.svg) center center no-repeat;
}

#menu-placeholder {
  height: 95px;
  background: #021529;
}

body.scrolled #menu-placeholder {
  height: 4rem !important;
}

.fancybox-content {
  background-color: #fff !important;
}

.other-images img {
  max-width: 120px;
  max-height: 100px;
  height: auto;
  width: auto;
}

.page404 {
  min-height: 300px;
}

@media (max-width: 767px) {
  .page404 .display-3 {
    font-size: 3rem;
  }
}

.vertical-bookmark {
  margin-bottom: 1px;
}

.vertical-bookmark a {
  display: block;
  background: #225a9a;
  color: #fff;
  text-decoration: none;
  padding: 1rem 1.5rem;
}

.vertical-bookmark a.active,
.vertical-bookmark a:hover {
  background: var(--color-accent);
}

.vertical-bookmark svg {
  fill: #fff;
  margin-left: 0.4rem;
  position: relative;
  top: -1px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  left: 0;
}

.vertical-bookmark a.active svg,
.vertical-bookmark a:hover svg {
  left: 5px;
}

.vertical-bookmark-content {
  display: none;
}

@media (max-width: 575px) {
  .vertical-bookmarks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .vertical-bookmark {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
  }

  .vertical-bookmark a {
    margin-right: 1px;
    padding: 0.6rem 1rem;
  }

  .vertical-bookmark a svg {
    display: none;
  }

  .vertical-bookmark-content {
    text-align: center;
    width: auto;
    max-width: 100%;
    height: auto;
  }
}

/* ========== [S15] PAGINATION / POST CONTENT / FORMS (wpcf7) / bg-fields ========== */

.pagination .btn {
  font-size: 18px;
}

.pagination .btn.current {
  background-color: #d89100;
}

.post-thumbnail img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.post-content.collapsed {
  overflow-y: hidden;
}

.post-content {
  max-height: none;
}

.show-long-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  background: url(../../../../../../../themes/aeps/img/white-shadow.png) repeat-x;
  height: 136px;
  background-size: 100% 100%;
  font-size: 17px;
  padding-top: 30px;
}

.show-long-content img {
  position: relative;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.show-long-content:hover img {
  margin-top: 5px;
}

.show-long-content:hover svg polygon {
  fill: #e69a00;
}

.content-block-min-height {
  min-height: calc(100vh - 400px);
}

.list-product-image img {
  max-height: 300px;
}

form .wpcf7-response-output {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin: 1rem 0;
  border-width: 1px;
}

form .wpcf7-mail-sent-ok {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

form .wpcf7-validation-errors {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

#contact-form .wpcf7-response-output {
  margin: 1rem 3rem;
}

.bg-fields {
  min-height: 370px;
  overflow: hidden;
}

.bg-fields:before {
  position: absolute;
  left: -100px;
  bottom: 0;
  top: 0;
  width: 100%;
  background-size: cover;
  content: "";
  display: block;
  background-position: 50%;
  background-repeat: no-repeat;
}

.bg-fields.even:before {
  left: auto;
  right: 0;
}

@media (max-width: 992px) {
  .bg-fields:before {
    left: 0;
    background-size: auto 100%;
    width: 200%;
    opacity: 0.2;
  }
}

.col-lg-5ths,
.col-md-5ths,
.col-sm-5ths,
/* ========== [S16] GRID HELPERS / SCROLLBAR / DESCRIPTION BLOCKS ========== */

.col-xs-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5ths {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%;
    float: left;
  }
}

@media (max-width: 768px) {
  .responsive-headline {
    font-size: 30px;
  }
}

@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left;
  }
}

.page-template-page-technical-res {
  background: transparent !important;
}

@media (min-width: 992px) {
  .template-technical-res.content-wrapper>.content {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left;
  }
}

.scrollbar-inner>.scroll-element .scroll-bar,
.scrollbar-inner>.scroll-element .scroll-element_track {
  opacity: 0 !important;
}

.scroll-wrapper.scrollbar-inner:hover>.scroll-element .scroll-bar,
.scroll-wrapper.scrollbar-inner:hover>.scroll-element .scroll-element_track {
  opacity: 0.3 !important;
}

.full-content-blue-bg {
  background: rgba(2, 33, 66, 0.84);
  color: #fff;
}

.no-opacity {
  background: #032f5e !important;
}

.full-content-blue-bg h1,
.full-content-blue-bg h2,
.full-content-blue-bg h3,
.full-content-blue-bg h4 {
  color: #fff;
}

.postline {
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(2, 33, 66, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.post-body-content {
  text-align: left;
}

.categoryname {
  text-align: left;
  font-size: 1.4em;
  color: #fff;
}

.description-bottom,
.description-top {
  color: #fff;
  text-align: left;
  width: 100%;
  background: #00000050;
  padding: 10px 100px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.description-bottom h2,
.description-bottom h3,
.description-bottom h4,
.description-bottom h5,
.description-bottom h6 {
  color: var(--color-accent);
  padding: 10px;
}

.description-bottom strong,
.description-top strong {
  color: var(--color-accent);
}

.description-bottom p,
.description-top p {
  padding: 10px;
}

.border-box-text h1 {
  font-size: 30px;
  float: left;
  position: relative;
  padding-right: 5px;
  color: var(--color-accent);
}

.description-bottom table {
  width: 100%;
  border: 1px solid #fff;
}

.description-bottom table td {
  border: 1px solid #fff;
}

@media only screen and (max-width: 600px) {
  .border-box-text h1 {
    font-size: 23px;
  }
}

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

  .description-bottom,
  .description-top {
    padding: 0 10px;
  }
}

@media (min-width: 1200px) {

  .side-bg-after,
  .side-bg-before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(50vw - 660px);
    background: fixed url(../../../../../../../themes/aeps/img/bg-subpage/01-left.jpg) 0 0 no-repeat;
    background-size: auto 100%;
  }

  .side-bg-after {
    left: auto;
    right: 0;
    background-image: url(../../../../../../../themes/aeps/img/bg-subpage/01-right.jpg);
    background-position: 100% 0;
  }

  .side {
    position: relative;
  }

  .custom_bg_after,
  .custom_bg_before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(50vw - 660px);
  }

  .custom_bg_after {
    left: auto;
    right: 0;
  }
}

/* ========== [S17] PRODUCT CARDS - glass-card & modern-product-card ========== */

.faq-section .accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.125);
}

body.tax-pcategory {
  background-color: #f4f8fa;
  background-image:
    radial-gradient(at 85% 20%, rgba(255, 218, 185, 0.4) 0, transparent 50%),
    radial-gradient(at 10% 50%, rgba(173, 216, 230, 0.4) 0, transparent 50%);
  background-attachment: fixed;
}

.glass-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #eef2f5;
  padding: 35px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.18);
}

.glass-card .product-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}

.glass-card .product-title a {
  color: #2c3e50;
  text-decoration: none;
}

.glass-card .product-title a:hover {
  color: #345a82;
}

.glass-card .product-actions {
  gap: 15px;
}

.glass-card .btn {
  border-radius: 30px !important;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  line-height: 1;
  min-height: 46px;
  margin: 0 !important;
}

.glass-card .btn-primary {
  background-color: #345a82;
  color: #fff;
  border: 2px solid #345a82;
  gap: 12px;
}

.glass-card .btn-primary:hover {
  background-color: #243f5c;
  border-color: #243f5c;
}

.glass-card .btn-outline-secondary {
  background-color: transparent;
  color: #666;
  border: 2px solid #dcdcdc;
  gap: 12px !important;
}

.glass-card .btn-outline-secondary:hover {
  background-color: #f8f9fa;
  color: #222;
  border-color: #bbb;
}

.glass-card .btn-outline-secondary span {
  margin-right: 0 !important;
}

.glass-card .btn img.svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.glass-card .arrow img {
  filter: brightness(0) invert(1);
}

.glass-card .btn-primary .arrow {
  margin-left: 8px !important;
}

.glass-card .image-col img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .glass-card .image-col {
    padding-right: 50px !important;
  }
}

.modern-product-card {
  background-color: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  padding: 40px;
  border: 1px solid #f0f0f0;
}

@media (max-width: 768px) {
  .modern-product-card {
    padding: 20px;
  }
}

.modern-product-card .btn {
  border-radius: 30px !important;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  line-height: 1;
  min-height: 46px;
  margin: 0 !important;
}

.modern-product-card .btn-primary {
  background-color: #345a82;
  color: #fff;
  border: 2px solid #345a82;
  gap: 12px;
}

.modern-product-card .btn-primary:hover {
  background-color: #243f5c;
  border-color: #243f5c;
}

.modern-product-card .btn-outline-secondary {
  background-color: transparent;
  color: #666;
  border: 2px solid #dcdcdc;
  gap: 12px !important;
}

.modern-product-card .btn-outline-secondary:hover {
  background-color: #f8f9fa;
  color: #222;
  border-color: #bbb;
}

.modern-product-card .btn-outline-secondary span {
  margin-right: 0 !important;
}

.modern-product-card .btn img.svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.modern-product-card .arrow img {
  filter: brightness(0) invert(1);
}

.glass-card {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}

.glass-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-5px) !important;
}

.glass-card .btn-primary {
  padding: 4px 4px 4px 24px !important;
  border: none !important;
  background-color: #345a82 !important;
  gap: 15px !important;
}

.glass-card .btn-primary:hover {
  background-color: #284768 !important;
}

.glass-card .btn-primary .arrow {
  background-color: #1c3147 !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
  transition: all 0.3s ease;
}

.glass-card .btn-primary .arrow img {
  width: 10px !important;
  filter: brightness(0) invert(1) !important;
  margin: 0 !important;
}

.glass-card .btn-primary:hover .arrow {
  background-color: #101c29 !important;
  transform: translateX(2px);
}

.glass-card .btn-primary .arrow img,
.glass-card .btn-primary .arrow svg {
  width: 10px !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
  margin: 0 !important;
}

.glass-card .btn-primary .arrow svg,
.glass-card .btn-primary .arrow svg path,
.glass-card .btn-primary .arrow svg polygon {
  fill: #fff !important;
}

.modern-product-card .btn-primary {
  padding: 4px 4px 4px 24px !important;
  border: none !important;
  background-color: #345a82 !important;
  gap: 15px !important;
}

.modern-product-card .btn-primary:hover {
  background-color: #284768 !important;
}

.modern-product-card .btn-primary .arrow {
  background-color: #1c3147 !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
  transition: all 0.3s ease;
}

.modern-product-card .btn-primary .arrow img,
.modern-product-card .btn-primary .arrow svg {
  width: 10px !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
  margin: 0 !important;
}

.modern-product-card .btn-primary .arrow svg,
.modern-product-card .btn-primary .arrow svg path,
.modern-product-card .btn-primary .arrow svg polygon {
  fill: #fff !important;
}

.modern-product-card .btn-primary:hover .arrow {
  background-color: #101c29 !important;
  transform: translateX(2px);
}

.modern-product-card .col-md-5>a>img {
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.modern-product-card .lead.text-muted {
  margin-bottom: 15px !important;
}

.modern-product-card .params .param {
  font-size: 17px !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  padding-left: 32px !important;
}

.modern-product-card .params .param:before {
  top: 2px !important;
}

@media (max-width: 1199px) {

  .glass-card.d-flex,
  .modern-product-card.d-flex,
  .modern-product-card.row {
    flex-direction: column !important;
  }

  .glass-card>.col-md-5,
  .glass-card>.col-md-7,
  .glass-card>.image-col,
  .glass-card>.info-col,
  .modern-product-card>.col-md-5,
  .modern-product-card>.col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .glass-card>.image-col,
  .modern-product-card>.col-md-5 {
    margin-bottom: 25px !important;
  }

  .glass-card,
  .modern-product-card {
    padding: 25px !important;
  }
}

@media (max-width: 575px) {
  .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .select2-dropdown {
    width: auto !important;
    max-width: 100vw !important;
  }

  .wpcf7-form-control-wrap {
    max-width: 100% !important;
    display: block !important;
  }
}

/* ========== [S18] MOBILE MENU - toggler / burger / offcanvas ========== */

.modern-toggler {
  background-color: rgba(33, 61, 92, 0.98) !important;
  border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
  border-radius: 12px;
  padding: 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 1050;
}

.modern-toggler:active {
  transform: scale(0.9);
}

.modern-burger {
  width: 24px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.modern-burger span {
  display: block;
  height: 2px;
  background-color: #fff;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.modern-burger span:first-child {
  width: 100%;
}

.modern-burger span:nth-child(2) {
  width: 70%;
}

.modern-burger span:nth-child(3) {
  width: 100%;
}

.offcanvas {
  background-color: rgba(33, 61, 92, 0.98) !important;
  color: #fff;
  border-left: none !important;
}

.offcanvas .nav-link {
  color: hsla(0, 0%, 100%, 0.8) !important;
  font-size: 1.1rem;
  padding: 15px 0;
}

.offcanvas .nav-link:hover {
  color: #fff !important;
}

.offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

@media (min-width: 992px) {

  .navbar-nav .nav-item.active .nav-link,
  .navbar-nav .nav-link:focus,
  .navbar-nav .nav-link:hover {
    color: #fff !important;
    opacity: 0.7;
  }
}

.offcanvas .nav-link:active,
.offcanvas .nav-link:focus {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

#offcanvasMenu .dropdown-menu,
#offcanvasMenu .dropdown-menu>li,
#offcanvasMenu .dropdown-menu>li>a,
#offcanvasMenu .navbar-nav>li,
#offcanvasMenu .navbar-nav>li>a {
  border: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#offcanvasMenu .navbar-nav a:after,
#offcanvasMenu .navbar-nav a:before {
  background-color: transparent !important;
  border: none !important;
}

#offcanvasMenu .navbar-nav li:after,
#offcanvasMenu .navbar-nav li:before {
  display: none !important;
}

@media (max-width: 767px) {
  .mobile-collapse-wrapper .mobile-collapsed-text {
    max-height: 120px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
  }

  .mobile-collapse-wrapper:not(.expanded) .mobile-collapsed-text:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg,
        hsla(0, 0%, 100%, 0) 0,
        hsla(0, 0%, 100%, 0.9));
    pointer-events: none;
  }

  .mobile-collapse-wrapper.expanded .mobile-collapsed-text {
    max-height: 3000px;
  }

  .mobile-show-more-btn {
    display: block;
  }

  .mobile-show-more-btn .btn {
    border-radius: 30px !important;
    font-size: 14px;
    padding: 8px 20px;
    background-color: transparent !important;
    color: #345a82 !important;
    border: 2px solid #345a82 !important;
    transition: all 0.3s ease;
  }

  .mobile-show-more-btn .btn:hover {
    background-color: #f4f8fa !important;
  }
}

@media (min-width: 768px) {
  .mobile-collapse-wrapper .mobile-collapsed-text {
    max-height: none !important;
    overflow: visible !important;
  }

  .mobile-collapse-wrapper .mobile-collapsed-text:after,
  .mobile-show-more-btn {
    display: none !important;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 27px !important;
  }
}

@media (max-width: 630px) {

  .glass-card .product-actions,
  .modern-product-card .product-actions {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  .glass-card .btn-primary,
  .modern-product-card .btn-primary {
    flex: 0 1 auto !important;
    justify-content: center !important;
    padding: 4px 4px 4px 16px !important;
    font-size: 14px !important;
    width: auto !important;
  }

  .glass-card .btn-primary .arrow,
  .modern-product-card .btn-primary .arrow {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin-left: 12px !important;
  }

  .glass-card .btn-outline-secondary,
  .modern-product-card .btn-outline-secondary {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .glass-card .btn-outline-secondary span,
  .modern-product-card .btn-outline-secondary span {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
  }

  .glass-card .btn-outline-secondary img.svg,
  .glass-card .btn-outline-secondary svg,
  .modern-product-card .btn-outline-secondary img.svg,
  .modern-product-card .btn-outline-secondary svg {
    width: 22px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }
}

/* ========== [S19] CATEGORY CARDS - modern-cat-card / subcat-card ========== */

.button-3d {
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(0, 0, 0, 0.25);
}

.level-up-1 {
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
}

.level-down-1 {
  box-shadow: 0 0 6px rgba(255, 171, 0, 0.25), inset 0 0 6px rgba(255, 171, 0, 0.2) !important;
}

.level-down-1:hover {
  box-shadow: 0 0 12px rgba(255, 171, 0, 0.45), inset 0 0 8px rgba(255, 171, 0, 0.35) !important;
}

.modern-cat-grid .col-12 {
  padding-left: 10px;
  padding-right: 10px;
}

.modern-cat-card {
  position: relative;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.modern-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.modern-cat-card .cat-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%;
  transition: transform 0.5s ease;
  z-index: 0;
}

.modern-cat-card:hover .cat-bg-image {
  transform: scale(1.05);
}

.modern-cat-card .cat-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.9));
  z-index: 1;
}

.modern-cat-card .cat-content {
  z-index: 2;
}

.modern-cat-card .category-name {
  display: block;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.subcat-card {
  height: 420px !important;
}

.subcat-card .subcat-desc {
  font-size: 15px;
  line-height: 1.4;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: all 0.4s ease;
  transform: translateY(15px);
}

.subcat-card:hover .subcat-desc {
  max-height: 100px;
  opacity: 1;
  margin-top: 10px;
  transform: translateY(0);
}

.modern-cat-card {
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.modern-cat-card:hover {
  transform: translate3d(0, -5px, 0) !important;
}

.modern-cat-card .cat-bg-image {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 102% !important;
  height: 102% !important;
  top: -1% !important;
  left: -1% !important;
  transform: scale(1) translateZ(0);
}

.modern-cat-card:hover .cat-bg-image {
  transform: scale(1.05) translateZ(0) !important;
}

.modern-cat-card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  border: 2px solid #4a5261;
  pointer-events: none;
  z-index: 10;
}

/* ========== [S20] PARAMETRIC SEARCH TABLE ========== */

.parametric-wrapper {
  background-color: #021529;
  border-radius: 16px;
  padding: 35px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

@media (min-width: 576px) {
  .parametric-wrapper {
    width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .parametric-wrapper .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .parametric-wrapper .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  .parametric-wrapper .col-12,
  .parametric-wrapper .col-lg-3,
  .parametric-wrapper .col-lg-9 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.parametric-title {
  position: relative;
  padding-bottom: 15px;
}

.parametric-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #f39c12;
}

.parametric-dark-panel {
  background-color: #031e3a;
  border: 1px solid #053055;
  border-radius: 16px;
  padding: 1.5rem;
}

.parametric-dark-panel label {
  color: #cbd5e1;
}

.parametric-dark-panel input,
.parametric-dark-panel select {
  background-color: #021529;
  color: #fff;
  border: 1px solid #053055;
}

.parametric-dark-panel input:focus,
.parametric-dark-panel select:focus {
  background-color: #011122;
  color: #fff;
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.parametric-dark-panel input::placeholder {
  color: #7b8ea3 !important;
  opacity: 1;
}

.parametric-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0 !important;
  background-color: #031e3a !important;
}

.parametric-table thead th {
  background-color: #011122 !important;
  color: #fff !important;
  border-bottom: 2px solid #053055 !important;
  font-weight: 700;
  white-space: nowrap !important;
}

.parametric-table tbody tr {
  border-bottom: 1px solid #053055 !important;
  transition: background-color 0.2s ease;
}

.parametric-table tbody td {
  color: #fff !important;
  background-color: transparent !important;
  border: none !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

.parametric-table tbody tr:hover td {
  background-color: #052a4f !important;
}

.parametric-table-link {
  color: #60a5fa !important;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.parametric-table-link:hover {
  color: #93c5fd !important;
}

.parametric-table tbody td .btn {
  white-space: nowrap !important;
  min-width: 50px;
}

.parametric-dark-panel.h-100 {
  height: 100% !important;
}

.parametric-table-scroll {
  max-height: 480px;
  overflow-y: auto !important;
}

.parametric-table thead th {
  position: sticky !important;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.parametric-table-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.parametric-table-scroll::-webkit-scrollbar-track {
  background: #011122;
}

.parametric-table-scroll::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 4px;
}

.parametric-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

@media (min-width: 992px) {
  .parametric-table {
    table-layout: fixed;
  }

  .parametric-dark-panel .table-responsive {
    overflow-x: hidden !important;
  }

  .parametric-table th:first-child {
    width: 18%;
  }

  .parametric-table th:nth-child(2) {
    width: 14%;
  }

  .parametric-table th:nth-child(3),
  .parametric-table th:nth-child(4) {
    width: 29%;
  }

  .parametric-table th:nth-child(5) {
    width: 10%;
  }

  .parametric-table thead th {
    font-size: 14px;
    padding: 12px 10px !important;
  }

  .parametric-table tbody td {
    font-size: 14px;
    padding: 10px 8px !important;
  }
}

@media (max-width: 991px) {
  .parametric-table {
    table-layout: fixed;
    min-width: 550px !important;
  }

  .parametric-table th:first-child {
    width: 100px;
  }

  .parametric-table th:nth-child(2) {
    width: 85px;
  }

  .parametric-table th:nth-child(3) {
    width: 135px;
  }

  .parametric-table th:nth-child(4) {
    width: 150px;
  }

  .parametric-table th:nth-child(5) {
    width: 80px;
  }

  .parametric-table thead th {
    font-size: 12px !important;
    padding: 8px 4px !important;
    letter-spacing: -0.3px;
  }

  .parametric-table tbody td {
    font-size: 13px !important;
    padding: 8px 4px !important;
  }

  .parametric-dark-panel .table-responsive {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 575px) {

  body,
  html {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  .parametric-wrapper {
    padding: 15px !important;
    width: calc(100% - 20px) !important;
  }

  .parametric-wrapper,
  .parametric-wrapper .container {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .parametric-wrapper .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .parametric-wrapper .col-12,
  .parametric-wrapper .col-lg-3,
  .parametric-wrapper .col-lg-9 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .parametric-dark-panel {
    max-width: 100% !important;
    padding: 1rem !important;
  }

  .parametric-dark-panel .table-responsive {
    display: block !important;
    width: 100% !important;
  }
}

.parametric-dark-panel input[type="number"]::-webkit-inner-spin-button,
.parametric-dark-panel input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.parametric-dark-panel input[type="number"] {
  -moz-appearance: textfield !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  text-align: left;
}

.form-item-icon {
  display: flex;
  justify-content: center;
  margin-right: 12px;
  margin-top: 10px;
  width: 24px;
  min-width: 24px;
}

.form-item-icon svg path,
.form-item-icon svg polygon,
.form-item-icon svg rect,
.form-item-icon svg circle {
  fill: var(--color-accent) !important;
}


.form-item-icon svg .cls-1 {
  stroke: var(--color-accent) !important;
}


.form-item-icon svg .cls-1 {
  fill: none !important;
}

.form-elements {
  flex: 1;
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* STEP 3D viewer modal                                                */
/* ------------------------------------------------------------------ */
/* ========== [S21] 3D STEP-VIEWER MODAL ========== */

.step-viewer-trigger {
  cursor: pointer;
}

.step-viewer-modal .modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-viewer-modal .modal-header .close {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
  border-radius: 4px;
}

.step-viewer-modal .modal-header .close:hover,
.step-viewer-modal .modal-header .close:focus {
  opacity: 1;
  color: #000;
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

.step-viewer-modal .modal-header .close>span {
  display: block;
  line-height: 1;
}

.step-viewer-modal .modal-content {
  border: none;
  border-radius: 8px;
  overflow: hidden;
}

.step-viewer-modal .modal-body {
  background: #f4f5f7;
}

.step-viewer-stage {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 420px;
}

.step-viewer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.step-viewer-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.step-viewer-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(244, 245, 247, 0.92);
  color: #333;
  font-size: 15px;
  text-align: center;
  padding: 16px;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.step-viewer-status.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.step-viewer-status[data-kind="error"] {
  color: #b00020;
  background: rgba(255, 240, 240, 0.95);
}

.step-viewer-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: #555;
  border-radius: 50%;
  animation: step-viewer-spin 0.8s linear infinite;
}

.step-viewer-status[data-kind="error"] .step-viewer-spinner {
  display: none;
}

@keyframes step-viewer-spin {
  to {
    transform: rotate(360deg);
  }
}

.step-viewer-modal .modal-footer .step-viewer-hint {
  font-size: 12px;
  line-height: 1.3;
}

.step-viewer-modal .modal-footer .btn {
  border-radius: 999px;
  padding-left: 22px;
  padding-right: 22px;
}

@media (max-width: 575px) {
  .step-viewer-stage {
    height: 60vh;
    min-height: 320px;
  }

  .step-viewer-modal .modal-footer .step-viewer-hint {
    display: none;
  }
}

/* ================================================================= */
/* DARK THEME RESTORATION                                           */
/* ================================================================= */

/* ========== [S22] *** DARK-THEME OVERRIDE LAYER 1 - single-product / tax-pcategory (!important) ========== */

body.tax-pcategory {
  background-color: #011c37 !important;
  background-image: none !important;
}

body.single-product {
  background-color: #011c37 !important;
}

body.tax-pcategory,
body.single-product,
body.tax-pcategory p,
body.single-product p,
body.tax-pcategory .content,
body.single-product .content {
  color: #cbd5e1 !important;
}

body.tax-pcategory h1,
body.tax-pcategory h2,
body.tax-pcategory h3,
body.tax-pcategory h4,
body.single-product h1,
body.single-product h2,
body.single-product h3,
body.single-product h4 {
  color: #fff !important;
}

/* Glass Card & Modern Product Card Dark Theme */
.glass-card {
  background: rgba(2, 33, 66, 0.4) !important;
  border: 1px solid rgba(222, 237, 255, 0.15) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
  /* color: #fff !important; */
}

.modern-product-card {
  background-color: rgba(2, 33, 66, 0.4) !important;
  border: 1px solid rgba(222, 237, 255, 0.15) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;
}

.glass-card .product-title a {
  color: #fff !important;
}

.glass-card .product-title a:hover {
  color: var(--color-accent) !important;
}

.glass-card .text-muted,
.modern-product-card .text-muted,
.modern-product-card .lead.text-muted {
  color: #cbd5e1 !important;
}

.modern-product-card .params .param {
  color: #fff !important;
}

/* Form Inputs inside Dark Cards */
.modern-product-card input,
.modern-product-card textarea,
.modern-product-card select {
  background-color: rgba(2, 21, 41, 0.6) !important;
  color: #fff !important;
  border: 1px solid rgba(222, 237, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
}

.modern-product-card input:focus,
.modern-product-card textarea:focus,
.modern-product-card select:focus {
  background-color: rgba(1, 17, 34, 0.8) !important;
  color: #fff !important;
  border-color: #345a82 !important;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(52, 90, 130, 0.25) !important;
}

.modern-product-card input::placeholder,
.modern-product-card textarea::placeholder {
  color: #9aafc4 !important;
  opacity: 1 !important;
}

.modern-product-card .wpcf7-submit {
  background-color: #1c3147 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 12px 35px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.modern-product-card .wpcf7-submit:hover {
  background-color: #101c29 !important;
}

/* Outline Buttons */
.modern-product-card .btn-outline-secondary,
.glass-card .btn-outline-secondary {
  background-color: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.modern-product-card .btn-outline-secondary:hover,
.glass-card .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: #fff !important;
}

.modern-product-card .btn-outline-secondary svg,
.modern-product-card .btn-outline-secondary svg path,
.glass-card .btn-outline-secondary svg,
.glass-card .btn-outline-secondary svg path {
  fill: #fff !important;
}

/* Dark Accordion / FAQ Section */
.faq-section {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

.faq-section h2 {
  color: #fff !important;
}

.faq-section .accordion-item {
  background-color: rgba(2, 33, 66, 0.4) !important;
  border: 1px solid rgba(222, 237, 255, 0.1) !important;
  margin-bottom: 10px;
  border-radius: 8px !important;
  overflow: hidden;
}

.faq-section .accordion-button {
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
}

.faq-section .accordion-button:not(.collapsed) {
  background-color: rgba(2, 33, 66, 0.8) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.faq-section .accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

.faq-section .accordion-button:after {
  filter: brightness(0) invert(1) !important;
}

.faq-section .accordion-body {
  background-color: rgba(2, 21, 41, 0.3) !important;
  color: #cbd5e1 !important;
}

/* Tables inside Post Content */
.post-content table,
.wysiwyg-content table {
  color: #fff !important;
  border-collapse: collapse !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background-color: transparent !important;
}

.post-content table th,
.wysiwyg-content table th {
  background-color: rgba(2, 33, 66, 0.8) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 12px 15px !important;
}

.post-content table td,
.wysiwyg-content table td {
  background-color: rgba(2, 21, 41, 0.5) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 12px 15px !important;
}

/* Select2 Dropdown Dark Theme Overrides for single-product and category pages */
body.single-product .select2-container .select2-selection--single,
body.tax-pcategory .select2-container .select2-selection--single {
  background-color: rgba(2, 21, 41, 0.6) !important;
  border: 1px solid rgba(222, 237, 255, 0.15) !important;
  height: 46px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
}

body.single-product .select2-container .select2-selection--single .select2-selection__rendered,
body.tax-pcategory .select2-container .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
  line-height: 44px !important;
  padding-left: 15px !important;
}

body.single-product .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.tax-pcategory .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #fff transparent transparent transparent !important;
}

body.single-product .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
body.tax-pcategory .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #fff transparent !important;
}

body.single-product .select2-dropdown,
body.tax-pcategory .select2-dropdown {
  background-color: #021529 !important;
  border: 1px solid rgba(222, 237, 255, 0.15) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
}

body.single-product .select2-results__option,
body.tax-pcategory .select2-results__option {
  color: #cbd5e1 !important;
  background-color: transparent !important;
  padding: 8px 15px !important;
}

body.single-product .select2-container--default .select2-results__option--highlighted[aria-selected],
body.tax-pcategory .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #345a82 !important;
  color: #fff !important;
}

body.single-product .select2-container--default .select2-results__option[aria-selected="true"],
body.tax-pcategory .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(52, 90, 130, 0.3) !important;
  color: #fff !important;
}

/* Select2 Dropdown Search Box and Scrollbar styling */
body.single-product .select2-search--dropdown,
body.tax-pcategory .select2-search--dropdown {
  background-color: #021529 !important;
  padding: 8px 10px !important;
}

body.single-product .select2-search--dropdown .select2-search__field,
body.tax-pcategory .select2-search--dropdown .select2-search__field {
  background-color: rgba(2, 21, 41, 0.6) !important;
  color: #fff !important;
  border: 1px solid rgba(222, 237, 255, 0.15) !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
}

body.single-product .select2-search--dropdown .select2-search__field:focus,
body.tax-pcategory .select2-search--dropdown .select2-search__field:focus {
  background-color: rgba(1, 17, 34, 0.8) !important;
  border-color: #345a82 !important;
  outline: none !important;
}

body.single-product .select2-results__options::-webkit-scrollbar,
body.tax-pcategory .select2-results__options::-webkit-scrollbar {
  width: 6px !important;
}

body.single-product .select2-results__options::-webkit-scrollbar-track,
body.tax-pcategory .select2-results__options::-webkit-scrollbar-track {
  background: rgba(2, 21, 41, 0.5) !important;
}

body.single-product .select2-results__options::-webkit-scrollbar-thumb,
body.tax-pcategory .select2-results__options::-webkit-scrollbar-thumb {
  background: #112741 !important;
  border-radius: 3px !important;
}

body.single-product .select2-results__options::-webkit-scrollbar-thumb:hover,
body.tax-pcategory .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #1c3147 !important;
}

/* Hide side background images on taxonomy-pcategory.php to keep background uniform dark */
body.tax-pcategory .side-bg-before,
body.tax-pcategory .side-bg-after,
body.tax-pcategory .custom_bg_before,
body.tax-pcategory .custom_bg_after {
  display: none !important;
}

/* ================================================================= */
/* GLOBAL CARBON & NEON ORANGE DESIGN SYSTEM                         */
/* ================================================================= */

:root {
  --bg-primary: #060709;
  --bg-card: rgba(18, 19, 24, 0.42);
  --bg-card-glass: rgba(18, 19, 24, 0.22);
  --bg-input: rgba(14, 15, 19, 0.7);
  --bg-input-focus: rgba(8, 9, 11, 0.9);
  --text-primary: #ffffff;
  --text-muted: #ffffff;
  --text-placeholder: #606470;

  --color-accent: #ffab00;
  /* Unified warm amber orange */
  --color-accent-hover: #ffc43d;
  /* Amber orange hover state */
  --color-accent-glow: rgba(255, 171, 0, 0.25);
  --color-accent-glow-strong: rgba(255, 171, 0, 0.6);

  --color-danger: #d14747;
  /* Unified pleasant toned-down red */
  --color-danger-hover: #e55c5c;

  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-muted: rgba(255, 255, 255, 0.06);
  --border-color-outline: rgba(224, 83, 0, 0.35);

  --btn-primary-text: #ffffff;
  --btn-arrow-filter: brightness(0) invert(1);
  --btn-outline-hover-bg: rgba(224, 83, 0, 0.06);

  --shadow-primary: 0 4px 12px rgba(224, 83, 0, 0.2);
  --shadow-glow: 0 0 15px rgba(224, 83, 0, 0.45);
  --shadow-glow-outline: 0 0 10px rgba(224, 83, 0, 0.25);
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.5);

  --navbar-bg: rgba(6, 7, 9, 0.5);
  --dropdown-bg: #121318;
  --dropdown-hover-bg: #1e1f26;

  --footer-bg: #060709;
  --footer-block-bg-1: #121318;
  --footer-block-bg-2: #1a1b22;

  --table-th-bg: rgba(25, 26, 32, 0.8);
  --table-th-text: #ffab00;
  --table-td-bg: rgba(14, 15, 19, 0.5);

  --scrollbar-thumb: #252630;
  --scrollbar-thumb-hover: #393b4a;

  --accordion-body-bg: rgba(14, 15, 19, 0.3);
}

/* Global Body Styling */
/* ========== [S23] *** DARK-THEME OVERRIDE LAYER 2 - global body/type/links/cards/forms/select2 ========== */

html {
  background-color: var(--bg-primary) !important;
}

body,
html.html-homepage-bg body,
body.tax-pcategory,
body.single-product {
  background-color: transparent !important;
  background-image: none !important;
}

body,
p,
.content,
body.tax-pcategory p,
body.single-product p,
body.tax-pcategory .content,
body.single-product .content {
  color: var(--text-muted) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
body.tax-pcategory h1,
body.tax-pcategory h2,
body.tax-pcategory h3,
body.tax-pcategory h4,
body.single-product h1,
body.single-product h2,
body.single-product h3,
body.single-product h4 {
  color: var(--text-primary) !important;
}

/* Text links */
.post-content a,
.wysiwyg-content a,
p a,
.card-body a {
  color: var(--color-accent) !important;
  transition: all 0.2s ease !important;
}

.post-content a:hover,
.wysiwyg-content a:hover,
p a:hover,
.card-body a:hover {
  color: var(--color-accent-hover) !important;
  text-shadow: 0 0 8px var(--color-accent-glow) !important;
}

/* Red alerts and highlight colors */
.wpcf7-not-valid-tip,
.wpcf7-validation-errors,
.text-danger,
.btn-outline-danger {
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}

.btn-outline-danger:hover {
  background-color: var(--color-danger) !important;
  color: #ffffff !important;
}

/* Homepage Background quiet animating blue/purple gradient */
#homepage-bg {
  background: radial-gradient(circle at 15% 20%, rgba(16, 28, 64, 0.45), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(20, 36, 80, 0.38), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(12, 20, 48, 0.25), transparent 50%),
    #060709 !important;
  background-size: 200% 200% !important;
  animation: subtleGradient 25s ease infinite !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1 !important;
}

#custom_bg {
  z-index: -1 !important;
}

@keyframes subtleGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Glass & Modern Cards */
.glass-card {
  background: var(--bg-card-glass) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary) !important;
}

.modern-product-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary) !important;
}

.glass-card .product-title a {
  color: var(--text-primary) !important;
  transition: all 0.3s ease !important;
}

.glass-card .product-title a:hover {
  color: var(--color-accent) !important;
  text-shadow: 0 0 8px var(--color-accent-glow) !important;
}

.glass-card .text-muted,
.modern-product-card .text-muted,
.modern-product-card .lead.text-muted {
  color: var(--text-muted) !important;
}

.modern-product-card .params .param {
  color: var(--text-primary) !important;
}

/* Homepage News body */
.post-body {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-card) !important;
}

/* Blog page cards */
.blog-cards {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-card) !important;
}

.blog-cards .card-title {
  color: var(--text-primary) !important;
}

/* Contact page styles */
.contact-wrapper {
  background-image: none !important;
  background-color: transparent !important;
}

.contact-box {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
}

.circle-blue {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.circle-blue:hover {
  border: none !important;
  box-shadow: none !important;
}

.circle-blue img {
  filter: brightness(0) invert(1) opacity(0.85) !important;
  transition: all 0.3s ease !important;
}

.circle-blue:hover img {
  filter: brightness(0) invert(1) opacity(1) !important;
}

/* Contact form wrapper */
#contact-form {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
}

#contact-form .heading-orange {
  background: var(--color-accent) !important;
  color: var(--btn-primary-text) !important;
}

/* Breadcrumbs bar styling */
.breadcrumbs,
.breadcrumbs.semitransparent {
  background-color: rgba(6, 7, 9, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.breadcrumbs svg {
  fill: var(--text-muted) !important;
}

.breadcrumbs a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
}

.breadcrumbs a:hover {
  color: var(--color-accent) !important;
}

.breadcrumbs a.current-item {
  color: var(--text-primary) !important;
}

/* Primary Buttons with Neon Glow */
.glass-card .btn-primary,
.modern-product-card .btn-primary,
.btn-primary {
  background-color: var(--color-accent) !important;
  color: var(--btn-primary-text) !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: var(--shadow-primary) !important;
  transition: all 0.3s ease !important;
}

.glass-card .btn-primary:hover,
.modern-product-card .btn-primary:hover,
.btn-primary:hover {
  background-color: var(--color-accent-hover) !important;
  box-shadow: var(--shadow-glow) !important;
  color: var(--btn-primary-text) !important;
}

.glass-card .btn-primary .arrow,
.modern-product-card .btn-primary .arrow,
.btn-primary .arrow {
  background-color: var(--color-accent-hover) !important;
}

.glass-card .btn-primary:hover .arrow,
.modern-product-card .btn-primary:hover .arrow,
.btn-primary:hover .arrow {
  background-color: var(--color-accent-hover) !important;
}

.glass-card .btn-primary .arrow img,
.glass-card .btn-primary .arrow svg,
.modern-product-card .btn-primary .arrow img,
.modern-product-card .btn-primary .arrow svg,
.btn-primary .arrow img,
.btn-primary .arrow svg {
  filter: var(--btn-arrow-filter) !important;
}

/* Outline Buttons */
.modern-product-card .btn-outline-secondary,
.glass-card .btn-outline-secondary,
.btn-outline-secondary {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  border: 2px solid var(--border-color-outline) !important;
  transition: all 0.3s ease !important;
}

.modern-product-card .btn-outline-secondary:hover,
.glass-card .btn-outline-secondary:hover,
.btn-outline-secondary:hover {
  background-color: var(--btn-outline-hover-bg) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-glow-outline) !important;
}

.modern-product-card .btn-outline-secondary svg,
.modern-product-card .btn-outline-secondary svg path,
.glass-card .btn-outline-secondary svg,
.glass-card .btn-outline-secondary svg path,
.btn-outline-secondary svg,
.btn-outline-secondary svg path {
  fill: var(--color-accent) !important;
}

/* Form Inputs */
input,
textarea,
select,
.modern-product-card input,
.modern-product-card textarea,
.modern-product-card select {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.modern-product-card input:focus,
.modern-product-card textarea:focus,
.modern-product-card select:focus {
  background-color: var(--bg-input-focus) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 8px var(--color-accent-glow) !important;
}

input::placeholder,
textarea::placeholder,
.modern-product-card input::placeholder,
.modern-product-card textarea::placeholder {
  color: var(--text-placeholder) !important;
}

/* Form Submit Button */
.wpcf7-submit,
.modern-product-card .wpcf7-submit {
  background-color: var(--color-accent) !important;
  color: var(--btn-primary-text) !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  box-shadow: var(--shadow-primary) !important;
  transition: all 0.3s ease !important;
}

.wpcf7-submit:hover,
.modern-product-card .wpcf7-submit:hover {
  background-color: var(--color-accent-hover) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Select2 dropdown */
.select2-container .select2-selection--single {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--color-accent) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--color-accent) transparent !important;
}

.select2-dropdown {
  background-color: var(--dropdown-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary) !important;
}

.select2-results__option {
  color: var(--text-muted) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-accent) !important;
  color: var(--btn-primary-text) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--color-accent-glow) !important;
  color: var(--color-accent) !important;
}

/* Select2 Search Box and Scrollbar */
.select2-search--dropdown {
  background-color: var(--dropdown-bg) !important;
}

.select2-search--dropdown .select2-search__field {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 8px var(--color-accent-glow) !important;
}

.select2-results__options::-webkit-scrollbar-track {
  background: var(--bg-input) !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}

/* FAQ Accordion */
.faq-section {
  border-top-color: var(--border-color) !important;
}

.faq-section .accordion-item {
  background-color: var(--bg-card-glass) !important;
  border: 1px solid var(--border-color) !important;
}

.faq-section .accordion-button {
  color: var(--text-primary) !important;
}

.faq-section .accordion-button:not(.collapsed) {
  background-color: var(--bg-card) !important;
  color: var(--color-accent) !important;
  text-shadow: 0 0 8px var(--color-accent-glow) !important;
}

.faq-section .accordion-body {
  background-color: var(--accordion-body-bg) !important;
  color: var(--text-muted) !important;
}

/* Table Style */
.post-content table th,
.wysiwyg-content table th {
  background-color: var(--table-th-bg) !important;
  color: var(--table-th-text) !important;
  border: 1px solid var(--border-color) !important;
}

.post-content table td,
.wysiwyg-content table td {
  background-color: var(--table-td-bg) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color-muted) !important;
}

/* Hide side background images on taxonomy-pcategory.php */
body.tax-pcategory .side-bg-before,
body.tax-pcategory .side-bg-after,
body.tax-pcategory .custom_bg_before,
body.tax-pcategory .custom_bg_after {
  display: none !important;
}

/* Global Navbar Theme overrides */
/* ========== [S24] *** DARK-THEME OVERRIDE LAYER 3 - navbar/footer/offcanvas/misc (override graveyard) ========== */

nav#navbar {
  background-color: var(--navbar-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.navbar-nav a {
  color: var(--text-primary) !important;
}

.navbar-nav>li:hover {
  background: var(--border-color) !important;
}

.navbar-nav>li:hover>div.dropdown-menu {
  background: var(--dropdown-bg) !important;
  border-top: 2px solid var(--color-accent) !important;
}

.navbar-nav>li div.dropdown-menu a {
  color: var(--text-muted) !important;
}

.navbar-nav>li:hover>div.dropdown-menu>ul>li:hover>a {
  background: var(--dropdown-hover-bg) !important;
}

.navbar-nav>li:not(.lang-switcher)>div.dropdown-menu>a:not(:last-child):after {
  background: var(--border-color) !important;
}

.navbar-nav>li:not(.lang-switcher) div.dropdown-menu a:focus,
.navbar-nav>li:not(.lang-switcher) div.dropdown-menu a:hover {
  background: var(--dropdown-hover-bg) !important;
}

/* Global Footer Theme overrides */
#footer {
  background-color: rgba(6, 7, 9, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
}

#footer hr {
  border-top-color: var(--border-color) !important;
}

#footer .bg-blue-1 {
  background-color: var(--footer-block-bg-1) !important;
}

#footer .bg-blue-2 {
  background-color: var(--footer-block-bg-2) !important;
}

#footer .text-secondary {
  color: var(--text-muted) !important;
}

#footer a {
  color: var(--color-accent) !important;
}

#footer a:hover {
  color: var(--color-accent-hover) !important;
}

/* Responsive Mobile Offcanvas menu theme overrides */
.offcanvas {
  background-color: var(--dropdown-bg) !important;
  color: var(--text-primary) !important;
}

.offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--border-color) !important;
}

.offcanvas .btn-close {
  filter: var(--btn-arrow-filter) !important;
}

/* Scrolled Navbar background override */
body.scrolled nav#navbar {
  background-color: rgba(6, 7, 9, 0.85) !important;
}

/* Homepage Call to Action rectangles override */
.bg-blue-wide-rectangles {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Accent color updates for icons and specific link classes */
.stripe-orange {
  background-color: var(--color-accent) !important;
}

.share-icon:hover {
  color: var(--color-accent) !important;
}

/* Content area links and meta text */
.post-content a,
.wysiwyg-content a,
p a,
.card-body a,
a.text-secondary,
a.underline,
a.text-warning {
  color: var(--color-accent) !important;
}

.post-content a:hover,
.wysiwyg-content a:hover,
p a:hover,
.card-body a:hover,
a.text-secondary:hover,
a.underline:hover,
a.text-warning:hover {
  color: var(--color-accent-hover) !important;
}

/* Additional Carbon Dark overrides to remove residual blue backgrounds */

/* Post news rows on homepage */
.postline {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: 16px !important;
}

/* Page content block wrappers */
.full-content-blue-bg,
.full-content-blue-bg.no-opacity,
.no-opacity {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: 16px !important;
  color: var(--text-primary) !important;
}

.full-content-blue-bg h1,
.full-content-blue-bg h2,
.full-content-blue-bg h3,
.full-content-blue-bg h4 {
  color: var(--text-primary) !important;
}

/* Blog comments section */
.comments-area {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Sidebar category link list hover & styling */
.category-link {
  background: var(--bg-input) !important;
  border-top-color: transparent !important;
}

.category-link:active,
.category-link:focus,
.category-link:hover {
  background: var(--bg-input-focus) !important;
  border-color: var(--color-accent) !important;
}

.category-link .category-arrow {
  background: var(--border-color) !important;
}

.category-link:active .category-arrow,
.category-link:focus .category-arrow,
.category-link:hover .category-arrow {
  background-color: var(--color-accent) !important;
}

.category-link .category-name {
  border-top: 1px solid var(--border-color) !important;
}

#header,
#menu-placeholder,
body.scrolled #menu-placeholder {
  background-color: var(--bg-primary) !important;
}

/* Parametric search widgets overrides */
.parametric-wrapper {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: 16px !important;
}

.parametric-dark-panel input,
.parametric-dark-panel select {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
}

.parametric-dark-panel input:focus,
.parametric-dark-panel select:focus {
  background-color: var(--bg-input-focus) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 8px var(--color-accent-glow) !important;
}

.parametric-table {
  background-color: var(--bg-input) !important;
}

.parametric-table thead th {
  background-color: var(--table-th-bg) !important;
  color: var(--color-accent) !important;
  border-bottom: 2px solid var(--border-color) !important;
}

.parametric-table tbody tr {
  border-bottom: 1px solid var(--border-color-muted) !important;
}

.parametric-table tbody tr:hover td {
  background-color: var(--dropdown-hover-bg) !important;
}

.parametric-table-link {
  color: var(--color-accent) !important;
}

.parametric-table-link:hover {
  color: var(--color-accent-hover) !important;
  text-shadow: 0 0 8px var(--color-accent-glow) !important;
}

.parametric-table-scroll::-webkit-scrollbar-track {
  background: var(--bg-input) !important;
}

.parametric-table-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
  border-radius: 4px !important;
}

.parametric-table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}

.parametric-dark-panel {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.parametric-title:after {
  background-color: var(--color-accent) !important;
}

/* Custom styles for Bootstrap checkboxes inside filters to match carbon theme */
.parametric-dark-panel .form-check-input {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}

.parametric-dark-panel .form-check-input:checked {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.parametric-dark-panel .form-check-input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 8px var(--color-accent-glow) !important;
}

/* Clean, themed Clear Filters button */
.parametric-dark-panel .btn-outline-light {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease !important;
}

.parametric-dark-panel .btn-outline-light:hover {
  background-color: var(--color-accent) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 12px var(--color-accent-glow) !important;
}

/* Category description text styling overlay */
.main-cat-desc,
.description-top {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  color: var(--text-primary) !important;
}

/* Nested Sub-submenus and Language Switcher Theme Overrides */
.navbar-nav>li li:hover>div.dropdown-menu,
.navbar-nav>li.lang-switcher:hover div.dropdown-menu {
  background: var(--dropdown-bg) !important;
  border: 1px solid var(--border-color) !important;
}

.lang-switcher .dropdown-menu a:hover {
  background: var(--dropdown-hover-bg) !important;
}

/* Footer Phone Block Rounding & Stretches */
.footer-phone-block {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;
}


/* Breadcrumbs visibility & layout positioning on top of fixed WebGL background */
.breadcrumbs {
  position: relative !important;
  z-index: 2 !important;
}

/* Remove background from z-index-1 utility to let fixed WebGL canvas show through on content pages */
.z-index-1 {
  background: transparent !important;
  border-bottom: none !important;
}

/* Product and Category card backgrounds (Restored for readability) */
body.single-product .modern-product-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

body.tax-pcategory .glass-card {
  background: var(--bg-card) !important;
  /* Restored solid/readable card background instead of glass-transparent */
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

body.tax-pcategory .modern-product-card,
body.tax-pcategory .parametric-wrapper {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Solid black background for form containers and input fields */
body.single-product #product-contact-form .modern-product-card {
  background-color: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid var(--border-color) !important;
}

#contact-form {
  background-color: rgba(0, 0, 0, 0.85) !important;
  border: 1px solid var(--border-color) !important;
}

/* Make form inputs solid dark grey instead of transparent blue */
#product-contact-form input,
#product-contact-form textarea,
#product-contact-form select,
#contact-form input,
#contact-form textarea,
#contact-form select,
.modern-product-card input,
.modern-product-card textarea,
.modern-product-card select {
  background-color: #0c0d12 !important;
  color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
}

/* Force all form submit buttons to be in theme orange accent */
.wpcf7-submit,
input[type="submit"],
input[type="submit"].wpcf7-submit,
button[type="submit"],
.wpcf7-form-control.wpcf7-submit,
.modern-product-card .wpcf7-submit {
  background-color: var(--color-accent) !important;
  color: var(--btn-primary-text) !important;
  border: none !important;
  box-shadow: var(--shadow-primary) !important;
  transition: all 0.3s ease !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
}

.wpcf7-submit:hover,
input[type="submit"]:hover,
input[type="submit"].wpcf7-submit:hover,
button[type="submit"]:hover,
.wpcf7-form-control.wpcf7-submit:hover,
.modern-product-card .wpcf7-submit:hover {
  background-color: var(--color-accent-hover) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Force H1 heading on contact page to be visible with dark drop shadow */
.contact-headline-shadow,
body.page-template-kontakt h1.contact-headline-shadow,
.contact-wrapper h1 {
  color: #ffffff !important;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.95), 0 2px 5px rgba(0, 0, 0, 0.95) !important;
}


/* Vertical Bookmarks (Partners/Where to buy page) Carbon Theme Overrides */
.vertical-bookmarks {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
}

.vertical-bookmark {
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.vertical-bookmark:last-child {
  border-bottom: none !important;
}

.vertical-bookmark a {
  background: transparent !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease-in-out !important;
  padding: 1rem 1.5rem !important;
}

.vertical-bookmark a:hover {
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--color-accent) !important;
}

.vertical-bookmark a.active,
.vertical-bookmark a.active:hover {
  background-color: var(--color-accent) !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

.vertical-bookmark a svg {
  fill: var(--text-primary) !important;
}

.vertical-bookmark a:hover svg {
  fill: var(--color-accent) !important;
}

.vertical-bookmark a.active svg {
  fill: #000000 !important;
}

.vertical-bookmark-content {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 30px !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Round images in content and team sections on Our Story page */
.page-template-our-story .content img,
.page-template-our-story-php .content img {
  border-radius: 12px !important;
}

/* Dark theme skinning for 3D modal header & footer */
.step-viewer-modal .modal-content {
  background-color: #121318 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
}

.step-viewer-modal .modal-header {
  background-color: #121318 !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  padding: 1rem 1.5rem !important;
}

.step-viewer-modal .modal-header .modal-title {
  color: var(--text-primary) !important;
}

.step-viewer-modal .modal-header .close {
  color: var(--text-primary) !important;
  opacity: 0.8 !important;
}

.step-viewer-modal .modal-header .close:hover {
  opacity: 1 !important;
  background-color: var(--border-color) !important;
  color: var(--color-accent) !important;
}

.step-viewer-modal .modal-body {
  background-color: #f4f5f7 !important;
}

.step-viewer-modal .modal-footer {
  background-color: #121318 !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
  padding: 1rem 1.5rem !important;
}

.step-viewer-modal .modal-footer .step-viewer-hint {
  color: var(--text-muted) !important;
}

.step-viewer-modal .modal-footer .btn-outline-secondary {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  border: 2px solid var(--border-color-outline) !important;
  box-shadow: 0 0 6px rgba(255, 171, 0, 0.25), inset 0 0 6px rgba(255, 171, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

.step-viewer-modal .modal-footer .btn-outline-secondary:hover {
  background-color: var(--btn-outline-hover-bg) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 12px rgba(255, 171, 0, 0.45), inset 0 0 8px rgba(255, 171, 0, 0.35) !important;
}

/* Adjust 3D Viewer stage and loading states to match the dark charcoal background */
.step-viewer-modal .modal-body {
  background-color: #2a2b36 !important;
}

.step-viewer-status {
  background: rgba(42, 43, 54, 0.95) !important;
  color: var(--text-primary) !important;
}

.step-viewer-spinner {
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  border-top-color: var(--color-accent) !important;
}

/* Technical Resources Page Styles */
.template-technical-res .wysiwyg-content h1,
.template-technical-res .wysiwyg-content h2,
/* ========== [S25] PAGE-SPECIFIC - Technical Resources / Circuit Emulator ========== */

.template-technical-res .wysiwyg-content h3 {
  color: var(--text-primary) !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

.template-technical-res .wysiwyg-content h1:after,
.template-technical-res .wysiwyg-content h2:after {
  margin: 12px auto 0 auto !important; /* Center the underlines */
}

/* Beautiful PDF Download Links */
.template-technical-res .wysiwyg-content a[href*=".pdf"],
.template-technical-res .wysiwyg-content ul li a {
  display: flex !important;
  align-items: center;
  padding: 16px 24px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  margin: 12px 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.template-technical-res .wysiwyg-content a[href*=".pdf"]:hover,
.template-technical-res .wysiwyg-content ul li a:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 15px rgba(255, 171, 0, 0.25), inset 0 0 6px rgba(255, 171, 0, 0.15) !important;
  transform: translateY(-2px);
  color: var(--color-accent) !important;
}

/* Custom PDF Icon for Links */
.template-technical-res .wysiwyg-content a[href*=".pdf"]::before,
.template-technical-res .wysiwyg-content ul li a::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffab00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

.template-technical-res .wysiwyg-content a[href*=".pdf"]:hover::before,
.template-technical-res .wysiwyg-content ul li a:hover::before {
  transform: scale(1.15);
}

/* Layout for UL list of links */
.template-technical-res .wysiwyg-content ul {
  list-style: none !important;
  padding-left: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .template-technical-res .wysiwyg-content ul {
    grid-template-columns: 1fr 1fr; /* Two-column grid of pdf cards on tablet/desktop */
  }
}

.template-technical-res .wysiwyg-content ul li {
  margin: 0 !important;
  padding: 0 !important;
}

.template-technical-res .wysiwyg-content ul li a {
  margin: 0 !important; /* Override standard margin inside grid */
}

/* Circuit Emulator Page Layout and iframe Squeezing Fixes */
.page-template-circuit-app iframe,
.page-template-circuit-app-php iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 680px !important;
  display: block !important;
  clear: both !important;
  margin: 24px auto !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Make sure the narrow-content container is full-width on the circuit app template */
.page-template-circuit-app .narrow-content,
.page-template-circuit-app-php .narrow-content {
  max-width: 100% !important;
  width: 100% !important;
}

/* ================================================================= */
/* CUSTOM DEVELOPMENT PAGE STYLES                                   */
/* ================================================================= */
/* ========== [S26] PAGE-SPECIFIC - Custom Development landing ========== */

.custom-dev-page {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--text-primary) !important;
}

.custom-dev-page .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.custom-dev-hero {
  margin-top: 40px;
  margin-bottom: 50px;
}

.custom-dev-hero h1 {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
  letter-spacing: 1px;
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.custom-dev-accent-bar {
  width: 80px;
  height: 4px;
  background-color: var(--color-accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--color-accent-glow-strong);
}

.custom-dev-hero .lead {
  font-size: 1.25rem;
  opacity: 0.9;
}

.max-w-750 {
  max-width: 750px;
}

.max-w-600 {
  max-width: 600px;
}

.custom-dev-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.custom-dev-card:hover {
  border-color: rgba(255, 171, 0, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 15px rgba(255, 171, 0, 0.08) !important;
}

.custom-dev-card .lead-text {
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 400;
}

.custom-dev-card .desc-text {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.8;
}

/* Graphics container */
.custom-dev-graphic-container {
  position: relative;
  display: block;
  width: 100%;
}

.custom-dev-logo-graphic {
  height: 90px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 12px rgba(255, 171, 0, 0.2));
}

.custom-dev-module-graphic {
  max-height: 280px !important;
  width: auto !important;
  max-width: 100% !important;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.65));
  transition: transform 0.5s ease;
}

.custom-dev-module-graphic:hover {
  transform: scale(1.05);
}

/* Milestones */
@media (min-width: 992px) {
  .col-lg-2-custom {
    flex: 0 0 auto;
    width: 18.5%;
    position: relative;
  }
}

.milestones-stepper {
  position: relative;
  gap: 20px;
}

.milestone-step-wrapper {
  position: relative;
}

.milestone-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  z-index: 2;
}

.milestone-step-wrapper:hover .milestone-card {
  transform: translateY(-6px);
  border-color: var(--color-accent) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 171, 0, 0.18) !important;
}

.milestone-num {
  font-family: Poppins, sans-serif;
  font-size: 2rem;
  font-weight: 750;
  line-height: 1;
  color: var(--color-accent);
  text-shadow: 0 0 10px var(--color-accent-glow);
  opacity: 0.95;
}

.milestone-icon-wrapper {
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0.85;
}

.milestone-step-wrapper:hover .milestone-icon-wrapper {
  color: var(--color-accent);
  transform: scale(1.15);
  opacity: 1;
}

.milestone-svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
}

.milestone-step-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.milestone-step-desc {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Timeline Connectors */
@media (min-width: 992px) {
  .milestone-connector {
    position: absolute;
    top: 40px;
    right: -15px;
    width: 10px;
    height: 2px;
    background: linear-gradient(90deg, var(--border-color) 0%, rgba(255, 171, 0, 0.3) 100%);
    z-index: 1;
  }
}

/* Buttons and CTA */
.btn-custom-dev {
  display: inline-block !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 14px 32px !important;
  border-radius: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-custom-dev.btn-examples {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  border: 2px solid var(--border-color-outline) !important;
  box-shadow: 0 0 6px rgba(255, 171, 0, 0.25), inset 0 0 6px rgba(255, 171, 0, 0.2) !important;
}

.btn-custom-dev.btn-examples:hover {
  background-color: var(--btn-outline-hover-bg) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 16px rgba(255, 171, 0, 0.45), inset 0 0 10px rgba(255, 171, 0, 0.35) !important;
  transform: translateY(-2px);
}

.btn-custom-dev.btn-contact {
  background-color: var(--color-accent) !important;
  color: #060709 !important; /* Charcoal dark for high contrast text on orange */
  border: 2px solid var(--color-accent) !important;
  box-shadow: 0 0 6px rgba(255, 171, 0, 0.2) !important;
}

.btn-custom-dev.btn-contact:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  box-shadow: 0 0 16px rgba(255, 171, 0, 0.45) !important;
  transform: translateY(-2px);
  color: #000000 !important;
}

/* Extra utility classes */
.gap-3 {
  gap: 1rem;
}

/* Desktop Language Switcher - Styled Inline Flex Badge */
/* ========== [S27] LANGUAGE SWITCHER (desktop + mobile) + responsive nav fixes ========== */

@media (min-width: 992px) {
  .desktop-lang-container {
    margin: 0 0 0 32px !important; /* Large left margin to visually separate from menu */
    padding: 0 !important;
    /* Near-opaque dark chip. Was rgba(...,0.65) + backdrop-filter: blur(12px),
       but the blur layer recomposited every frame during the border-color
       transition -> the rounded border edge flickered on hover-out. Blur
       removed entirely; bumped opacity so it still reads clean over the hero. */
    background: rgba(18, 19, 24, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    /* Smooth, flicker-free now that there is no backdrop-filter on this element. */
    transition: border-color 0.25s ease !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important; /* Vertically center inside navbar flex container */
    height: 38px !important; /* Constrain height to match navbar items */
    position: relative !important;
    z-index: 1000 !important;
  }

  .desktop-lang-container:hover {
    /* Border-only highlight. No box-shadow glow -> no flicker (see note above). */
    border-color: var(--color-accent) !important;
  }

  .desktop-lang-container .lang-switcher > a {
    position: relative !important;
    z-index: 1010 !important;
    background: rgba(18, 19, 24, 1) !important;
    border-radius: 11px !important;
  }

  /* ---- Dropdown reveal: aligned with the site's native nav dropdowns ----
     The regular menu dropdowns (.navbar-nav div.dropdown-menu, ~L760) slide
     in via translateY(-10px)->0 + opacity over 0.25s and look smooth, so we
     use the SAME mechanism here instead of a bespoke one.
     The lang switcher's extra quirk is the bordered chip (.desktop-lang-container)
     whose :hover border highlight sits across the gap from the menu. To stop
     the border flickering when the cursor crosses the gap, both the border and
     the menu key off .desktop-lang-container:hover, and a STATIC transparent
     bridge (.desktop-lang-container::after, below) covers the gap so hover is
     never dropped mid-slide. The menu keeps a real gap so it reads as a
     separate floating card (no longer "cut off" behind the chip). */
  .desktop-lang-container .lang-switcher .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 8px !important;                /* visual gap -> floating card */
    min-width: 100% !important;
    width: 100% !important;
    background-color: #121318 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    padding: 0 !important;
    overflow: hidden !important;               /* clip item hover bg to the radius */
    display: block !important;                 /* absolutely positioned -> no layout impact */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s !important;
    z-index: 990 !important;
  }

  /* Static hover-bridge over the gap. Lives on the CHIP (not the moving menu),
     so it stays put while the menu slides -> crossing the gap never drops
     .desktop-lang-container:hover, so the border never flickers. */
  .desktop-lang-container::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 10px !important;                   /* covers the 8px gap + slack */
    background: transparent !important;
  }

  .desktop-lang-container .lang-switcher .dropdown-menu .dropdown-item {
    height: 36px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }

  .desktop-lang-container .lang-switcher .dropdown-menu .dropdown-item:first-child {
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
  }

  .desktop-lang-container .lang-switcher .dropdown-menu .dropdown-item:last-child {
    border-bottom-left-radius: 11px !important;
    border-bottom-right-radius: 11px !important;
  }

  .desktop-lang-container .lang-switcher .dropdown-menu .dropdown-item:hover {
    background: rgba(255, 171, 0, 0.12) !important;
    color: var(--color-accent) !important;
  }

  /* Open state keyed on the whole chip (so border + menu open/close together,
     and the ::after bridge keeps it alive across the gap). Slide + fade in,
     matching the native nav dropdowns. */
  .desktop-lang-container:hover .lang-switcher .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s !important;
  }
  
  .desktop-lang-container .lang-switcher .dropdown-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Custom circular flags styling for both Desktop and Mobile */
.lang-flag-circular {
  width: 18px !important;
  height: 18px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  margin-right: 8px !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25) !important;
}

/* Mobile Language Switcher Styles (Horizontal button row) */
.mobile-lang-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

.mobile-lang-btn {
  display: flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.mobile-lang-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--text-primary) !important;
}

.mobile-lang-btn.active {
  background: rgba(255, 171, 0, 0.12) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
  box-shadow: 0 0 8px rgba(255, 171, 0, 0.15) !important;
}

.mobile-lang-btn .lang-flag-circular {
  margin-right: 6px !important;
  width: 16px !important;
  height: 16px !important;
}

/* Offcanvas Header Specific Style (Compact Mobile Switcher) */
.mobile-lang-header-wrapper {
  display: flex !important;
  align-items: center !important;
  margin-left: 24px !important; /* Force a clear gap from the Menu text */
  margin-right: auto !important; /* Push the close button X to the far right */
}

.mobile-lang-header-wrapper .mobile-lang-row {
  margin-bottom: 0 !important;
  gap: 6px !important;
}

.mobile-lang-header-wrapper .mobile-lang-btn {
  padding: 4px 8px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

.mobile-lang-header-wrapper .mobile-lang-btn .lang-flag-circular {
  width: 14px !important;
  height: 14px !important;
  margin-right: 4px !important;
}

/* Bulletproof fix to hide any double caret dropdown triangles on the desktop switcher */
.desktop-lang-container .lang-switcher > a::after,
.desktop-lang-container .lang-switcher .dropdown-toggle::after {
  display: none !important;
  content: none !important;
}

/* Responsive Navigation Adjustments to prevent wrapping and overflow on smaller desktop screens */
@media (min-width: 992px) {
  .navbar-nav>li:not(.lang-switcher)>a.nav-link {
    white-space: nowrap !important;
  }
}

/* Slightly scale down the brand logo when not scrolled on medium screens to free up horizontal space */
@media (min-width: 992px) and (max-width: 1520px) {
  body:not(.scrolled) nav#navbar .navbar-brand img {
    height: 40px !important;
    width: auto !important;
  }
}

@media (min-width: 1200px) and (max-width: 1520px) {
  a.nav-link {
    font-size: 13px !important;
  }
  .navbar-nav>li:not(.lang-switcher)>a.nav-link {
    padding: 0 1.25em !important;
  }
  .desktop-lang-container {
    margin-left: 16px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  a.nav-link {
    font-size: 11px !important;
  }
  .navbar-nav>li:not(.lang-switcher)>a.nav-link {
    padding: 0 0.8em !important;
  }
  .desktop-lang-container {
    margin-left: 12px !important;
  }
}