/*
Theme Name: Juniper
Version: 1.0.0
*/

html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  max-width: 100%;
}

.customizer-content {
  font-family: var(--primary-font) !important;
  font-size: var(--default-size, 16px);
}

.customizer-content h1 {
  font-size: var(--h1-size, 36px);
  font-family: var(--hedings-font, --primary-font);
}

.customizer-content h2 {
  font-size: var(--h2-size, 30px);
  font-family: var(--hedings-font, --primary-font);
}

.customizer-content h3 {
  font-size: var(--h3-size, 24px);
  font-family: var(--hedings-font, --primary-font);
}

.customizer-content h4 {
  font-size: var(--h4-size, 18px);
  font-family: var(--hedings-font, --primary-font);
}

.customizer-content h5 {
  font-size: var(--h5-size, 14px);
  font-family: var(--hedings-font, --primary-font);
}

.customizer-content h6 {
  font-size: var(--h6-size, 12px);
  font-family: var(--hedings-font, --primary-font);
}

.customizer-content a {
  font-size: var(--a-size, 12px);
  color: var(--a-color, --primary-color);
}

p {
  font-family: var(--primary-font);
  font-size: var(--default-size, 16px);
}

h1 {
  font-size: var(--h1-size, 36px);
  font-family: var(--hedings-font, --primary-font);
}

h2 {
  font-size: var(--h2-size, 30px);
  font-family: var(--hedings-font, --primary-font);
}

h3 {
  font-size: var(--h3-size, 24px);
  font-family: var(--hedings-font, --primary-font);
}

h4 {
  font-size: var(--h4-size, 18px);
  font-family: var(--hedings-font, --primary-font);
}

h5 {
  font-size: var(--h5-size, 14px);
  font-family: var(--hedings-font, --primary-font);
}

h6 {
  font-size: var(--h6-size, 12px);
  font-family: var(--hedings-font, --primary-font);
}

body a {
  font-size: var(--a-size, 12px);
  color: var(--a-color, --primary-color);
}

.tw-bg-secondary {
  background: var(--secondary-color);
  background-color: var(--secondary-color);
}

.tw-bg-primary {
  background: var(--primary-color);
  background-color: var(--primary-color);
}

.tw-bg-tertiary {
  background: var(--tertiary-color);
  background-color: var(--tertiary-color);
}

.tw-secondary {
  color: var(--secondary-color);
}

.tw-primary {
  color: var(--primary-color);
}

.tw-tertiary {
  color: var(--tertiary-color);
}

.tw-primary-dark {
  color: #293b6d;
}
.tw-fb-color {
  color: #1877f2;
}
.tw-fb-twitter {
  color: #1da1f2;
}
.tw-fb-instagram {
  color: #f00073;
}
.tw-fb-youtube {
  color: #ff0000;
}

.tw-btn {
  padding: 10px 35px;
  background: #decb53;
  border-radius: 8px;
  transition: unset;
  border-bottom: none;
  font-size: 17px;
  font-weight: 700;
  color: #07483d;
  display: inline-block;
}
.has-error {
  border: 2px solid #c0392b !important;
}
a.tw-btn {
  text-decoration: none;
}
a.tw-btn:hover {
  color: #07483d;
}
#back-to-top {
  display: none;
  position: fixed;
  right: 27px;
  bottom: 10px;
  cursor: pointer;
  width: 60px;
  height: 60px;
  background: var(--primary-color);
  opacity: 0.5;
  border-radius: 50%;
  z-index: 1000;
  text-align: center;
  transition: 1s;
  box-shadow: 0 16px 32px rgb(0 0 0 / 100%);
  -webkit-text-stroke: 3px var(--primary-color);
}

#back-to-top:hover {
  opacity: 0.8;
}

#back-to-top i {
  color: #ffffff;
  font-size: 35px;
  padding-top: 19%;
  background: transparent;
}
/*-------------------- Top Header --------------------*/

.top-header {
}

.top-header .top-header-content {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 10px;
  color: #ffffff;
}

.top-header .top-header-content .ticker-bar {
  flex: 1; /* uzima sav preostali prostor */
  overflow: hidden; /* sprečava izlazak teksta van */
  white-space: nowrap;
}

.top-header .top-header-content .weather {
  flex: 0 0 auto;
}

.bottom-header-content {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 10px;
}

.bottom-header .bottom-header-content .header-logo {
  flex: 0 0 auto;
  margin-right: 20px;
  position: relative;
}

.bottom-header .bottom-header-content .menu {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  overflow: visible !important;
}

.menu-primary .nav-item.menu-level-one {
  margin-right: 40px;
}

.header-logo {
  left: auto;
  transition: 0.8s;
  padding-top: 0.5rem;
  height: 67px;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  z-index: 1001;
}

.fixed-side-menu {
  position: fixed;
  right: 0;
  z-index: 999;
}

.fixed-side-menu ul li {
  /*transition: .2s;*/
  width: 160px !important;
  padding-right: 0 !important;
  /*margin-right: 0 !important;*/
  /*width: 50px;*/
}

.fixed-side-menu a span {
  display: none !important;
}

.fixed-side-menu a i:first-child {
  transition: 0.2s;
  display: flex !important;
}

.fixed-side-menu a i:last-child {
  transition: 0.2s;
  display: none;
}

.absolute-side-menu {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

@keyframes appear {
  0% {
    transform: translatex(-200px);
    /*left: 0;*/
  }
  100% {
    transform: translatex(0px) translatey(0px) translateZ(0px);
    /*left: 0;*/
  }
}

@keyframes disappear {
  0% {
    transform: translatex(0px) translatey(0px) translateZ(0px);
    /*left: 0;*/
  }
  100% {
    transform: translatex(-200px);
    /*left: 0;*/
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .fixed-navbar {
    padding-left: 150px;
  }
}
article .wp-post-image {
  width: 100%;
  height: auto;
  border-radius: 3px 3px 0 0;
}

/*=====================================
  =            HEADER STYLES            =
  =====================================*/

@media (max-width: 998px) {
  #menuPrimary .container,
  #menuPrimaryLanding .container {
    justify-content: right;
  }
}

#menuPrimary button.navbar-toggler,
#menuPrimaryLanding button.navbar-toggler {
  height: 40px;
  width: 50px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  background-color: var(--primary-color);
}

#menuPrimary button.navbar-toggler:focus,
#menuPrimaryLanding button.navbar-toggler:focus {
  box-shadow: none;
}
#menuPrimary button.navbar-toggler:focus-visible,
#menuPrimaryLanding button.navbar-toggler:focus-visible {
  outline: 2px solid var(--secondary-color, #002447);
  outline-offset: 2px;
}
/*----------  hamburger animated  ----------*/
#menuPrimary button.navbar-toggler .tw-hamburger-animated-icon,
#menuPrimaryLanding button.navbar-toggler .tw-hamburger-animated-icon {
  width: 30px;
  height: 23px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#menuPrimary button.navbar-toggler .tw-hamburger-animated-icon span,
#menuPrimaryLanding button.navbar-toggler .tw-hamburger-animated-icon span {
  display: block;
  position: absolute;
  background: #fff;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#menuPrimary button.navbar-toggler .tw-hamburger-animated-icon span:nth-child(1),
#menuPrimaryLanding button.navbar-toggler .tw-hamburger-animated-icon span:nth-child(1) {
  top: 0px;
}

#menuPrimary button.navbar-toggler .tw-hamburger-animated-icon span:nth-child(2),
#menuPrimaryLanding button.navbar-toggler .tw-hamburger-animated-icon span:nth-child(2) {
  top: 10px;
}

#menuPrimary button.navbar-toggler .tw-hamburger-animated-icon span:nth-child(3),
#menuPrimaryLanding button.navbar-toggler .tw-hamburger-animated-icon span:nth-child(3) {
  top: 20px;
}

#menuPrimary button[aria-expanded="true"] .tw-hamburger-animated-icon span:nth-child(1),
#menuPrimaryLanding button[aria-expanded="true"] .tw-hamburger-animated-icon span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#menuPrimary button[aria-expanded="true"] .tw-hamburger-animated-icon span:nth-child(2),
#menuPrimaryLanding button[aria-expanded="true"] .tw-hamburger-animated-icon span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#menuPrimary button[aria-expanded="true"] .tw-hamburger-animated-icon span:nth-child(3),
#menuPrimaryLanding button[aria-expanded="true"] .tw-hamburger-animated-icon span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#menuPrimary #mainMenuWrapper ul,
#menuPrimaryLanding #mainMenuWrapper ul {
  padding-top: 40px;
}
#menuPrimary #mainMenuWrapper ul li,
#menuPrimaryLanding #mainMenuWrapper ul li {
  border-bottom: 0.5px solid rgba(234, 234, 234, 0.2);
}
/*---------------------------------------------------------------------------*/
header#defaultHeader li {
  position: relative;
}
header#defaultHeader ul.menu-primary > li > a {
  height: 100%;
}
header#defaultHeader a {
  font-size: 18px;
  font-weight: normal;
  color: #fff;
  text-align: center;
  transition: 0.2s;
}
header#defaultHeader ul.menu-primary ul.dropdown-menu {
  width: 100%;
  margin-top: 0;
  background-clip: unset;
  border: none;
  border-radius: 0;
}
header#defaultHeader ul.menu-primary ul.dropdown-menu a {
  font-weight: 400;
}
header#defaultHeader.fixed-header #top a.navbar-brand {
  position: absolute;
  top: 67%;
  left: 0;
}
@media (min-width: 768px) {
  header#defaultHeader nav.navbar a.navbar-brand {
    position: relative;
    top: 0;
    left: 0;
  }
  header#defaultHeader div#tw-header-menus-wrapper {
    margin-top: 0;
    z-index: 1;
  }
  header#defaultHeader nav.navbar #mainMenuWrapper ul {
    padding-top: 0;
  }
  header#defaultHeader nav.navbar #mainMenuWrapper ul li {
    border-bottom: none;
  }
}
@media (max-width: 991.99px) {
  header#defaultHeader .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  header#defaultHeader div#bottomHeader li {
    margin-right: 30px;
  }
}
@media (max-width: 991.99px) {
  #menuPrimary button.navbar-toggler,
  #menuPrimaryLanding button.navbar-toggler {
    display: flex;
  }
}

/* Mobile: keep logo fixed, open menu below header full width */
@media (max-width: 991.99px) {
  header#defaultHeader {
    position: relative;
    z-index: 1040;
  }

  /* Ensure brand/logo stays above the opened menu */
  header#defaultHeader .navbar-brand,
  header#defaultHeader .header-logo {
    position: relative;
    z-index: 30;
  }

  header#defaultHeader .bottom-header-content .header-logo {
    margin-left: 15px;
  }
  header#defaultHeader .bottom-header-content > .menu {
    margin-right: 10px;
  }

  /* Bootstrap's .navbar defaults to position:relative — that makes <nav> the
     anchor for the absolutely-positioned .navbar-collapse, which traps the
     menu inside the narrow .menu flex column. Reset to static + neutralize
     the inner Bootstrap container so the collapse anchors on <header>. */
  header#defaultHeader nav#menuPrimary,
  header#defaultHeader nav#menuPrimaryLanding {
    position: static !important;
  }
  header#defaultHeader nav#menuPrimary > .container,
  header#defaultHeader nav#menuPrimaryLanding > .container {
    position: static !important;
    padding-left: 0;
    padding-right: 0;
  }
  header#defaultHeader .bottom-header,
  header#defaultHeader .bottom-header-content,
  header#defaultHeader .bottom-header-content > .menu {
    position: static !important;
  }

  /* Take the collapse OUT of the .menu flex container's right side and
     span it across the full header width below the bottom-header row.
     Use left:0;right:0 (NOT width:100%) to derive width from positioning —
     prevents iOS Safari from inflating width past viewport when combined
     with margin/padding on ancestors. */
  #menuPrimary #mainMenuWrapper,
  #menuPrimary .navbar-collapse,
  #menuPrimaryLanding #mainMenuWrapper,
  #menuPrimaryLanding .navbar-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-width: 100vw;
    background: var(--primary-color, #ffffff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 300ms ease, opacity 300ms ease, visibility 300ms ease;
    z-index: 1050;
  }

  /* When bootstrap toggles the collapse to show, reveal with transition */
  #menuPrimary #mainMenuWrapper.show,
  #menuPrimary .navbar-collapse.show,
  #menuPrimaryLanding #mainMenuWrapper.show,
  #menuPrimaryLanding .navbar-collapse.show {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    visibility: visible;
  }

  /* Force left alignment on mobile — overrides the "Menu Position" customizer
     field (justify-content: flex-end / center) which is intended for the
     desktop nav. Also defeats Bootstrap's default align-items: center on
     .navbar-collapse that would otherwise center the ul.navbar-nav. */
  #menuPrimary #menuPrimaryContent,
  #menuPrimaryLanding #menuPrimaryLandingContent,
  #menuPrimary .navbar-collapse,
  #menuPrimaryLanding .navbar-collapse {
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
  }

  /* Make menu items full width and readable on primary-color background */
  #menuPrimary #mainMenuWrapper ul,
  #menuPrimary .navbar-collapse ul,
  #menuPrimaryLanding #mainMenuWrapper ul,
  #menuPrimaryLanding .navbar-collapse ul {
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    align-items: stretch;
    text-align: left;
  }

  #menuPrimary .navbar-nav .nav-item,
  #menuPrimaryLanding .navbar-nav .nav-item {
    text-align: left;
    width: 100%;
  }

  #menuPrimary #mainMenuWrapper ul li a,
  #menuPrimary .navbar-collapse ul li a,
  #menuPrimaryLanding #mainMenuWrapper ul li a,
  #menuPrimaryLanding .navbar-collapse ul li a {
    display: block;
    padding: 0.6rem 1.25rem;
    color: #fff;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
  }

  /* Submenu (dropdown) on mobile — click to open, white inline block */
  #menuPrimary .navbar-collapse .dropdown-menu,
  #menuPrimaryLanding .navbar-collapse .dropdown-menu {
    background: #ffffff;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    padding: 0;
  }
  /* Specificity bumped (3 classes + 2 elements) so it beats the general
     `#menuPrimary .navbar-collapse ul li a` (1 class + 3 elements) which
     would otherwise force uppercase + 700 onto sub-items. */
  #menuPrimary .navbar-collapse .dropdown-menu li a,
  #menuPrimaryLanding .navbar-collapse .dropdown-menu li a,
  #menuPrimary .navbar-collapse .dropdown-menu .dropdown-item,
  #menuPrimaryLanding .navbar-collapse .dropdown-menu .dropdown-item {
    color: #1a1a1a;
    text-transform: none;
    font-weight: 400;
    padding: 0.5rem 1.5rem;
    text-align: left;
  }
  #menuPrimary .navbar-collapse .dropdown-menu .dropdown-item:hover,
  #menuPrimaryLanding .navbar-collapse .dropdown-menu .dropdown-item:hover {
    background-color: var(--tertiary-color, #f1f1f1);
  }

  /* Mega menu on mobile — force 2 columns regardless of generated col-* classes
     so the submenu items don't stack in one long list. Bootstrap by default
     gives col-12 below 576px and col-sm-6 between 576-768; we override both. */
  #menuPrimary .dropdown-mega-menu,
  #menuPrimaryLanding .dropdown-mega-menu {
    background: transparent;
  }
  #menuPrimary .dropdown-mega-menu .mega-content,
  #menuPrimaryLanding .dropdown-mega-menu .mega-content {
    padding: 0;
  }
  #menuPrimary .dropdown-mega-menu .mega-menu-columns,
  #menuPrimaryLanding .dropdown-mega-menu .mega-menu-columns {
    padding-left: 0;
    padding-right: 0;
  }
  #menuPrimary .dropdown-mega-menu .mega-menu-column,
  #menuPrimaryLanding .dropdown-mega-menu .mega-menu-column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  /* Make sk-megamenu links readable inside the white inline mega-menu block.
     Specificity matters here too — base selector needs enough classes to
     outrank the general `#menuPrimary .navbar-collapse ul li a` uppercase rule. */
  #menuPrimary .navbar-collapse .dropdown-mega-menu .sk-megamenu-column-item-link,
  #menuPrimaryLanding .navbar-collapse .dropdown-mega-menu .sk-megamenu-column-item-link {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: normal;
    padding: 0.35rem 1rem;
    text-transform: none;
    text-align: left;
  }
  #menuPrimary .navbar-collapse .dropdown-mega-menu .sk-megamenu-column-item-submenu-link,
  #menuPrimaryLanding .navbar-collapse .dropdown-mega-menu .sk-megamenu-column-item-submenu-link {
    color: #444;
    font-size: 13px;
    font-weight: normal;
    margin-left: 1rem;
    text-transform: none;
    text-align: left;
  }

  /* Keep dropdowns inside the mobile menu as normal stacked blocks */
  #menuPrimary .dropdown .dropdown-menu,
  #menuPrimaryLanding .dropdown .dropdown-menu {
    position: relative;
    top: 0;
    left: 0;
    box-shadow: none;
    background: transparent;
  }

  #menuPrimary .mega-menu-column,
  #menuPrimaryLanding .mega-menu-column {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  .menu-primary .nav-item.menu-level-one {
    margin-right: 0px;
  }

  #menuPrimary .nav-link.first-level-link,
  #menuPrimaryLanding .nav-link.first-level-link {
    padding: 10px;
  }

  #menuPrimary .nav-link.first-level-link:hover,
  #menuPrimaryLanding .nav-link.first-level-link:hover {
    box-shadow: none;
    border-radius: 0;
  }

  #menuPrimary .mega-menu-columns,
  #menuPrimaryLanding .mega-menu-columns {
    border-width: 0 !important;
  }

  #menuPrimary .dropdown-menu,
  #menuPrimaryLanding .dropdown-menu {
    border: none;
  }
}
/*=====  End of HEADER STYLES  ======*/

/*------MENU PRIMARY------*/

#menuPrimary,
#menuPrimaryLanding {
  color: white;
}

#menuPrimary a,
#menuPrimaryLanding a {
  font-size: 16px;
}

#menuPrimary .nav-link,
#menuPrimaryLanding .nav-link {
  color: white;
}

#menuPrimaryContent,
#menuPrimaryLandingContent {
  justify-content: end;
}

#menuPrimary .nav-item.menu-level-one .nav-link,
#menuPrimaryLanding .nav-item.menu-level-one .nav-link {
  text-transform: unset;
}

#menuPrimary .nav-item.menu-level-one .nav-item.dropend.menu-two .nav-link,
#menuPrimaryLanding .nav-item.menu-level-one .nav-item.dropend.menu-two .nav-link {
  text-transform: none;
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  text-decoration: none;
  word-wrap: break-word;
  white-space: normal;
  background-color: transparent;
  border: 0;
}

#menuPrimary .nav-item.menu-level-one .nav-item.dropend.menu-two .nav-link:hover,
#menuPrimaryLanding .nav-item.menu-level-one .nav-item.dropend.menu-two .nav-link:hover {
  background-color: var(--tertiary-color);
  color: var(--secondary-color);
}

#menuPrimary .navbar-nav .nav-link,
#menuPrimaryLanding .navbar-nav .nav-link {
  color: black;
}

@media (max-width: 991.99px) {
  #menuPrimary .navbar-nav .nav-link,
  #menuPrimaryLanding .navbar-nav .nav-link {
    color: white;
  }
}

#menuPrimary .dropdown-menu,
#menuPrimaryLanding .dropdown-menu {
  position: absolute;
  max-width: 250px;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(34, 41, 47, 0.15);
  border-radius: 0rem;
  margin-top: -5px;
}

#menuPrimary .dropdown-menu.dropdown-mega-menu,
#menuPrimaryLanding .dropdown-menu.dropdown-mega-menu {
  max-width: 100%;
  width: 100%;
  top: auto;
  left: 0%;
  margin-top: -3px;
  box-shadow: none;
}

#menuPrimary .dropdown-item,
#menuPrimaryLanding .dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  text-decoration: none;
  word-wrap: break-word;
  white-space: normal;
  background-color: transparent;
  border: 0;
}

#menuPrimary .dropdown-item:hover,
#menuPrimaryLanding .dropdown-item:hover {
  background-color: var(--tertiary-color);
  color: var(--secondary-color);
}

#menuPrimary .dropdown .dropdown-menu,
#menuPrimaryLanding .dropdown .dropdown-menu {
  display: none;
}

/* Desktop: Hover behavior for dropdowns with smooth animation */
@media screen and (min-width: 992px) {
  /* Default (hidden) state for desktop dropdowns — use opacity/transform so transitions work */
  #menuPrimary .dropdown .dropdown-menu,
  #menuPrimaryLanding .dropdown .dropdown-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
    pointer-events: none;
    will-change: opacity, transform;
    z-index: 1000;
  }

  /* Visible state on hover */
  #menuPrimary .dropdown:hover > .dropdown-menu,
  #menuPrimary .dropend:hover > .dropdown-menu,
  #menuPrimaryLanding .dropdown:hover > .dropdown-menu,
  #menuPrimaryLanding .dropend:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Keep dropend positioning for nested flyouts */
  #menuPrimary .dropend:hover > .dropdown-menu,
  #menuPrimaryLanding .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
  }

  #menuPrimary .dropend .dropdown-toggle,
  #menuPrimaryLanding .dropend .dropdown-toggle {
    padding-left: 0.5em;
  }
}

/* Mobile + tablet: Click behavior with Bootstrap collapse */
@media screen and (max-width: 991.99px) {
  #menuPrimary .dropdown-menu,
  #menuPrimaryLanding .dropdown-menu {
    position: relative;
    display: none;
  }
  /* Bootstrap .show class controls visibility on mobile */
  #menuPrimary .dropdown-menu.show,
  #menuPrimaryLanding .dropdown-menu.show {
    display: block !important;
  }

  .faq-item:first-child {
    display: block !important;
  }
}

/* MEEGA MENU*/
/* Desktop animation handled in media query above using opacity/transform transitions */

#menuPrimary .nav-item.dropdown.dropdown-mega,
#menuPrimaryLanding .nav-item.dropdown.dropdown-mega {
  position: static;
}

#menuPrimary .nav-item.dropdown.dropdown-mega .dropdown-menu,
#menuPrimaryLanding .nav-item.dropdown.dropdown-mega .dropdown-menu {
  width: 100%;
  top: auto;
  left: 0%;
  margin-top: -3px;
  border-bottom: none;
  background-color: transparent;
  z-index: 9999;
}

/*Customizer Option*/
#menuPrimary .mega-menu-columns,
#menuPrimaryLanding .mega-menu-columns {
  background-color: var(--primary-color);
  border: 1px solid white;
  color: white;
}

#menuPrimary .sk-megamenu-column-item-link,
#menuPrimaryLanding .sk-megamenu-column-item-link {
  text-decoration: none;
  color: white;
  font-size: 14px;
  font-weight: 800;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
#menuPrimary .sk-megamenu-column-item-link:hover,
#menuPrimaryLanding .sk-megamenu-column-item-link:hover {
  color: white;
}

#menuPrimary .sk-megamenu-column-item-submenu,
#menuPrimaryLanding .sk-megamenu-column-item-submenu {
  list-style: none;
  padding-left: 0px;
}

#menuPrimary .sk-megamenu-column-item-submenu-link,
#menuPrimaryLanding .sk-megamenu-column-item-submenu-link {
  font-size: 14px;
  color: white;
  text-decoration: none;
  margin-left: 20px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#menuPrimary .sk-megamenu-column-item-submenu-link:hover,
#menuPrimaryLanding .sk-megamenu-column-item-submenu-link:hover {
  text-decoration: underline;
}

/*------END MEGA MENU---------*/

/*------END MENU PRIMARY------*/

/*------SECTION HERO------*/

section#sectionHero,
section[id^="sectionHero_"] {
  position: relative;
  min-height: 480px;
  overflow: hidden;
}
section#sectionHero::after,
section#sectionHero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
section#sectionHero::before {
  background-size: cover;
  background-position: center;
}
section#sectionHero::after {
  background: #1a1a1b;
  opacity: 0.5;
}

section#sectionHero #hero {
  position: relative;
}

section#sectionHero .hero-overlay {
  position: absolute;
  inset: 0;
  background-color: #000000;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

section#sectionHero .carousel-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 1.25rem;
  color: #fff;
  text-align: center;
  width: 100%;
  right: 0;
  left: 0;
  padding: 0;
}

section#sectionHero .ticker-bar {
  padding: 0.85rem;
  color: white;
}

section#sectionHero .ticker-bar div {
  display: flex;
}

section#sectionHero .ticker-bar p {
  margin: 0;
  padding: 0;
}

section#sectionHero .carousel-caption {
  z-index: 3;
}

section#sectionHero .carousel-control-prev {
  z-index: 3;
}

section#sectionHero .carousel-control-next {
  z-index: 3;
}

/* Pause/Play button for carousel - WCAG 2.1 Level A (2.2.2) */
/* Hidden by default, visible only on focus (keyboard navigation) */
.carousel-play-pause-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  /* Hidden until focus */
  opacity: 0;
  pointer-events: none;
}

.carousel-play-pause-btn:focus,
.carousel-play-pause-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.9);
  border-color: #fff;
  transform: scale(1.1);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.carousel-play-pause-btn i {
  font-size: 16px;
}

section#sectionHero .carousel-indicators {
  z-index: 3;
  margin-bottom: 0px;
}

section#sectionHero #heroSlider .slider-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.01);
  z-index: 1;
}

section#sectionHero #heroSlider h1 {
  font-size: 5rem;
}
section#sectionHero #heroSlider h2 {
  font-size: 3.5rem;
}
section#sectionHero #heroSlider h3 {
  font-size: 2.5rem;
}
section#sectionHero #heroSlider h4 {
  font-size: 2rem;
}
section#sectionHero #heroSlider pre {
  font-size: 1.5rem;
}

section#sectionHero #heroSlider {
  position: relative;
}

section#sectionHero #heroSlider .carousel-control-prev,
section#sectionHero #heroSlider .carousel-control-next,
section#sectionHero #heroSlider .carousel-play-pause-btn {
  z-index: 4;
}

section#sectionHero .hero-quick-access {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 30px;
}

section#sectionHero .hero-quick-access-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  padding: 0 16px 0;
  width: 100%;
}

section#sectionHero .hero-search-form {
  width: min(740px, 90%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.35);
}

section#sectionHero .hero-search-form input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  outline: none;
}

section#sectionHero .hero-search-form input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

section#sectionHero .hero-search-form input::placeholder {
  color: rgba(255, 255, 255, 0.95);
}

section#sectionHero .hero-search-form button {
  border: none;
  background: transparent;
  color: #fff;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 0.2s ease;
}

section#sectionHero .hero-search-form button:hover,
section#sectionHero .hero-search-form button:focus {
  background: rgba(255, 255, 255, 0.2);
}

section#sectionHero .hero-links-carousel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  overflow: visible;
}

section#sectionHero .hero-links-carousel .owl-stage {
  display: flex;
  align-items: center;
  overflow: visible;
}

section#sectionHero .hero-links-carousel .owl-stage-outer {
  overflow: visible !important;
  padding: 12px 0;
}

section#sectionHero .hero-links-carousel .owl-item {
  overflow: visible;
}

section#sectionHero .hero-link-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

section#sectionHero .hero-link-circle {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: #fff;
  color: #222;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-align: center;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  position: relative;
  text-decoration: none;
  transition: transform 0.2s ease;
}
section#sectionHero .hero-link-circle > i {
  font-size: 28px;
  color: #429453;
  line-height: 1;
}
section#sectionHero .hero-link-circle__label {
  display: block;
}

section#sectionHero .hero-link-circle:hover,
section#sectionHero .hero-link-circle:focus {
  color: #222;
  text-decoration: underline;
  transform: translateY(-2px);
}

section#sectionHero .hero-link-circle::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

section#sectionHero .hero-link-circle:hover::after,
section#sectionHero .hero-link-circle:focus::after {
  border-color: #ffffff;
  transform: scale(1.02);
}

/* Desktop (>=992px): show all quick-link groups in a wrapping grid, no arrows.
   Owl carousel still initializes (theme.js), but we neutralize its transform
   and per-item widths so every group renders side-by-side. */
@media (min-width: 992px) {
  section#sectionHero .hero-links-carousel .owl-stage-outer {
    overflow: visible !important;
  }
  section#sectionHero .hero-links-carousel .owl-stage {
    transform: none !important;
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 56px;
  }
  section#sectionHero .hero-links-carousel .owl-item {
    width: auto !important;
    flex: 0 0 auto;
    margin: 0 !important;
  }
  section#sectionHero .hero-links-carousel .owl-nav {
    display: none !important;
  }
}

/* Mobile/tablet (<992px): keep carousel, show arrows inside the viewport. */
@media (max-width: 991.98px) {
  section#sectionHero .hero-links-carousel .owl-nav {
    position: static;
    display: block;
    pointer-events: none;
  }
  section#sectionHero .hero-links-carousel .owl-nav .owl-prev,
  section#sectionHero .hero-links-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    background: transparent;
    border: none;
    color: #fff;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  section#sectionHero .hero-links-carousel .owl-nav .owl-prev {
    left: -16px;
    margin-right: 12px !important;
    margin-left: 0;
  }
  section#sectionHero .hero-links-carousel .owl-nav .owl-next {
    right: -16px;
    margin-left: 12px !important;
    margin-right: 0;
  }
  section#sectionHero .hero-links-carousel .owl-nav button:hover,
  section#sectionHero .hero-links-carousel .owl-nav button:focus {
    color: #fff;
  }
  /* Hide each arrow individually when its boundary is reached. Owl adds
     .disabled to .owl-prev at first slide, .owl-next at last slide. */
  section#sectionHero .hero-links-carousel .owl-nav .owl-prev.disabled,
  section#sectionHero .hero-links-carousel .owl-nav .owl-next.disabled {
    display: none;
  }

  section#sectionHero .hero-quick-access-inner {
    gap: 50px;
    padding-bottom: 50px;
  }

  section#sectionHero .hero-link-circle {
    width: 120px;
    height: 120px;
    font-size: 11px;
  }
}

@media (max-width: 575px) {
  section#sectionHero .hero-quick-access-inner {
    gap: 36px;
    padding-bottom: 40px;
  }

  section#sectionHero .hero-search-form {
    padding: 6px 10px 6px 16px;
  }

  section#sectionHero .hero-link-group {
    flex-direction: row;
    gap: 14px;
    justify-content: center;
    width: 100%;
  }

  section#sectionHero .hero-links-carousel .owl-item {
    display: flex;
    justify-content: center;
  }
}

/*------END SECTION HERO------*/

/* ------MENU HERO------*/
div#menuHero {
  transition: 0.1s;
  z-index: 999;
}
div#menuHero ul {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 16px 32px rgb(0 0 0 / 30%);
}
div#menuHero ul li {
  position: relative;
  margin-bottom: 5px;
  background: var(--primary-color);
  width: 300px;
  margin-right: -100px;
  padding-right: 100px;
  margin-left: -5px;
  white-space: nowrap;
  transition: margin-left 0.1s, width 0.2s;
}
div#menuHero ul li:last-child {
  margin-bottom: 5px;
}
div#menuHero ul li:first-child {
  margin-top: 5px;
}

div#menuHero ul li:hover {
  color: #fff;
  margin-left: -20px;
  box-shadow: 0 0 4px 1px #000;
}
div#menuHero ul li:active {
  transform: translateY(4px);
}

div#menuHero ul li a i:first-child {
  display: none;
  transition: 0.1s;
  font-size: 30px;
  top: calc(50% - 15px);
  left: 0;
  width: 30px;
  justify-content: center;
  align-items: center;
}

div#menuHero.fixed-side-menu ul li a {
  justify-content: space-between;
}

div#menuHero ul li:hover a i:first-child {
  display: flex;
}

div#menuHero ul li:hover a i:last-child {
  font-size: 12px;
  padding-left: 60px;
}

div#menuHero ul li a {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: font-size 0.1s;
  color: white;
  text-transform: uppercase;
}

.absolute-side-menu {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

/*------END MENU HERO------*/

/*------HEADER DEFAULT------*/

.default-header {
  color: #000000;
}

.default-header .bottom-header {
  z-index: 998;
  background-color: #ffffff;
  color: #000000;
}

/*------END HEADER DEFAULT------*/

/*------ Footer Section ------*/

footer#footerSection {
  background-color: #ffffff;
  color: #000000;
}

footer#footerSection h2.footer-default-heading {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 30px;
}

footer#footerSection ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer#footerSection a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 16px;
}

footer#footerSection a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

footer#footerSection a.nav-link {
  padding: 7px 0px;
}

/*------End Footer Section -----*/

/*------                Homepage Section: News Notices               ------*/
.news-notices-section {
  background-color: var(--primary-color, #0d7d3f);
  padding-top: 48px;
  padding-bottom: 48px;
}

.news-notices-section h2.section-title {
  font-size: 36px;
  font-weight: 800;
  color: #ffffff;
}

.news-notices-section article {
  display: flex;
  justify-content: start;
  align-items: stretch;
  background: #fff !important;
  min-height: 191px;
  margin-bottom: 20px;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  margin-top: 1.5rem;
}

.news-notices-section article .article-thumbnail {
  display: block;
  width: 48%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  flex-shrink: 0;
  text-decoration: none;
}

.news-notices-section article .article-content {
  display: flex;
  flex-direction: column;
  width: 52%;
  padding: 20px 20px;
  min-width: 0;
}

.news-notices-section article .article-content .article-title h3 {
  color: #000;
  font-size: 16px;
  font-weight: 900;
  text-transform: none;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.news-notices-section article .article-content .article-title h3 a {
  color: inherit;
  text-decoration: none;
}

.news-notices-section article .article-content .article-title h3 a:hover,
.news-notices-section article .article-content .article-title h3 a:focus-visible {
  text-decoration: underline;
}

.news-notices-section article .article-content .article-excerpt {
  color: #56627a;
  font-size: 14px;
  line-height: 1.5;
}

.news-notices-section article .article-content .article-excerpt p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.news-notices-section article .article-content .article-read-more {
  margin-top: auto;
  padding-top: 8px;
  flex-shrink: 0;
}

.news-notices-section article .article-content .article-read-more a {
  color: #2d6b3a;
  font-size: 14px;
  font-weight: 900;
  text-decoration: underline;
}
.news-notices-section article .article-content .article-read-more a:hover,
.news-notices-section article .article-content .article-read-more a:focus-visible {
  color: #1f4d27;
  text-decoration: underline;
}

.news-notices-section .read-more-articles {
  display: inline-block;
  background: #4a7c59;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 12px 32px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.news-notices-section .read-more-articles:hover,
.news-notices-section .read-more-articles:focus-visible {
  background: #3a6147;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 920px) {
  .news-notices-section article {
    min-height: 160px;
  }
  .news-notices-section article .article-content {
    padding: 14px 14px;
  }
  .news-notices-section article .article-content .article-title h3 {
    font-size: 15px;
    -webkit-line-clamp: 2;
    margin-bottom: 6px;
  }
  .news-notices-section article .article-content .article-excerpt p {
    -webkit-line-clamp: 2;
    font-size: 13px;
  }
  .news-notices-section article .article-content .article-read-more {
    padding-top: 6px;
  }
}

/*------END SECTION NEWS DEFAULT------*/

/*------MENU HERO MOBILE------*/
#menuHeroMobile ul {
  list-style: none;
  width: 100%;
}

#menuHeroMobile ul li {
  margin-bottom: 26px;
}

#menuHeroMobile ul li a {
  background: var(--secondary-color);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: 0.2s;
}

#menuHeroMobile ul li a:hover {
  background: var(--primary-color);
  color: var(--tertiary-color);
}

/*------MENU NEWS DEFAULT------*/
#menuNewsDefault ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menuNewsDefault ul li {
  margin-bottom: 26px;
  position: relative;
}

#menuNewsDefault ul li a {
  --menu-news-icon-size: 120px;
  --menu-news-icon-overlap: 16px;
  background: transparent;
  border-radius: 999px;
  color: #111;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 32px 12px calc(var(--menu-news-icon-size) + 24px);
  min-height: var(--menu-news-icon-size);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  position: relative;
}

#menuNewsDefault ul li a::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: calc(var(--menu-news-icon-size) - var(--menu-news-icon-overlap) - 15px);
  right: 16px;
  background: #fff;
  border-radius: 20px;
  z-index: 0;
}

#menuNewsDefault ul li a:hover {
  background: transparent;
  color: #111;
}

#menuNewsDefault ul li a:hover::after {
  background: #f2f4f0;
}

#menuNewsDefault ul li a > span {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: none;
  color: #111;
  position: relative;
  z-index: 1;
}

#menuNewsDefault ul li a > span::after {
  content: "See Details";
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
}

#menuNewsDefault ul li a:hover > span::after {
  text-decoration: underline;
}

#menuNewsDefault ul li a i {
  width: var(--menu-news-icon-size);
  height: var(--menu-news-icon-size);
  min-width: var(--menu-news-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #429453;
  color: #fff;
  border-radius: 50%;
  font-size: 48px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/*------END MENU NEWS DEFAULT------*/

@media (max-width: 767px) {
  #menuNewsDefault ul li a {
    --menu-news-icon-size: 78px;
    --menu-news-icon-overlap: 12px;
    min-height: var(--menu-news-icon-size);
    gap: 16px;
    padding: 10px 18px 10px calc(var(--menu-news-icon-size) + 18px);
  }

  #menuNewsDefault ul li a::after {
    top: 8px;
    bottom: 8px;
    right: 8px;
  }

  #menuNewsDefault ul li a > span {
    font-size: 20px;
  }

  #menuNewsDefault ul li a > span::after {
    font-size: 16px;
  }
}

/*------NEWS SINGLE DEFAULT------*/
.juniper-news-single-default {
  min-height: 600px;
}

.juniper-news-single-default .title {
  color: var(--secondary-color);
}
/*------END NEWS SINGLE DEFAULT------*/

/*---------- Homepage Sections: FAQ ----------*/
#homepageFaqsSection {
  background-color: var(--primary-color);
  padding: 48px 0px;
}

#homepageFaqsSection .section-title {
  font-size: 36px;
  font-weight: 800;
  color: white;
  margin-bottom: 48px;
}

#homepageFaqsSection .tw-faq-wrapper {
  z-index: 1;
  height: 171px;
  margin-top: 10px;
  box-shadow: 0px 2px 12px rgba(223, 223, 223, 0.5);
  border-radius: 4px;
}
#homepageFaqsSection .tw-faq-wrapper a.tw-collapse-btn,
#homepageFaqsSection .tw-faq-wrapper button.tw-collapse-btn {
  width: 64px;
  height: 48px;
  bottom: -24px;
  left: calc(50% - 60px / 2);
  cursor: pointer;
  box-shadow: 0px 1px 6px var(--secondary-color);
  -webkit-text-stroke: 1px var(--secondary-color);
  z-index: 2;
  border-radius: 4px;
  border: none;
}
#homepageFaqsSection .tw-faq-wrapper a.tw-collapse-btn i,
#homepageFaqsSection .tw-faq-wrapper button.tw-collapse-btn i {
  transition: 0.3s transform ease-in-out;
}
#homepageFaqsSection .tw-faq-wrapper.tw-faq-wrapper-middle {
  height: 192px;
  margin-top: 0;
  box-shadow: 0px 1px 12px var(--secondary-color);
}
#homepageFaqsSection .faqs-wrapper .faq-item:nth-child(2):nth-last-child(2) .tw-faq-wrapper {
  height: 192px;
  margin-top: 0;
  box-shadow: 0px 1px 12px var(--secondary-color);
}
#homepageFaqsSection .faqs-wrapper .faq-item:nth-child(2):nth-last-child(2) .tw-faq-wrapper .col-12 {
  background-color: var(--secondary-color) !important;
  color: #ffffff;
}
#homepageFaqsSection .faqs-wrapper .faq-item:nth-child(2):nth-last-child(2) .tw-collapse-btn {
  background: #ffffff !important;
  color: var(--secondary-color) !important;
}
#homepageFaqsSection .faqs-wrapper .faq-item:nth-child(2):nth-last-child(2) .tw-collapse-btn i {
  color: var(--secondary-color);
}
#homepageFaqsSection .tw-faq-wrapper a[aria-expanded="true"] i,
#homepageFaqsSection .tw-faq-wrapper button[aria-expanded="true"] i {
  transform: rotate(180deg);
}
#homepageFaqsSection .tw-faq-wrapper.tw-faq-wrapper-middle a.tw-collapse-btn,
#homepageFaqsSection .tw-faq-wrapper.tw-faq-wrapper-middle button.tw-collapse-btn {
  box-shadow: 0px 1px 10px var(--secondary-color);
  -webkit-text-stroke: 1px #fff;
}
#homepageFaqsSection .card-body {
  border-radius: 0;
  font-size: 16px;
}
#homepageFaqsSection .tw-faq-wrapper .col-12,
#homepageFaqsSection .card-body {
  border-radius: 4px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

#homepageFaqsSection .card-body {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

#homepageFaqsSection .more-items-link {
  display: inline-block;
  background: #4a7c59;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 12px 32px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

#homepageFaqsSection .more-items-link:hover,
#homepageFaqsSection .more-items-link:focus-visible {
  background: #3a6147;
  color: #ffffff;
  text-decoration: none;
}

/*=====  End of FAQ  ======*/

/*---------- Homepage Sections: Subscribe ----------*/
#homepageSubscribeSection {
  position: relative;
  padding-top: 10rem;
  padding-bottom: 9rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Conformant fallback background color behind the hero image. The image
     paints over it, so the look is unchanged, but it gives automated contrast
     checkers (WAVE/WCAG) a real, dark background to measure the white text
     against — which a background-image alone cannot provide. */
  background-color: #2d5a3d;
}

#homepageSubscribeSection .homepage-subscribe__overlay {
  position: absolute;
  inset: 0;
  background-color: #000000;
  opacity: 0.1;
  pointer-events: none;
  z-index: 1;
}

#homepageSubscribeSection > .container {
  position: relative;
  z-index: 2;
}

#homepageSubscribeSection .section-title {
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #ffffff;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.562363);
  margin-bottom: 12px;
}

#homepageSubscribeSection .section-subtitle {
  font-family: "Montserrat", sans-serif;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.562363);
  color: white;
  margin-bottom: 30px;
  font-weight: 400;
}

#homepageSubscribeSection .subscribe-btn {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  background: #4a7c59;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 12px 32px;
  text-decoration: none;
  border: none;
  transition: background 0.2s, color 0.2s;
}

#homepageSubscribeSection .subscribe-btn:hover,
#homepageSubscribeSection .subscribe-btn:focus-visible {
  background: #3a6147;
  color: #ffffff;
  text-decoration: none;
}

/*----------- Agendas and Minutes Page -------------*/
.tw-meeting-repo-table {
  width: 100%;
}

.twd-rep-form-holder label {
  float: left;
  margin: 0 10px;
}
.twd-rep-form-holder select {
  float: left;
}
.twd-rep-form-holder:after {
  content: "";
  display: block;
  clear: both;
}
.twd-rep-form-holder strong {
  font-width: bold;
  color: #000;
}
.twd-category-name {
  margin-top: 2.5rem !important;
}

.hide-element {
  display: none;
}

/*
  Responsive meeting tables
  */
@media only screen and (min-width: 1024px) {
  .twd-table td.meeting-date-column {
    width: 15%;
  }
  .twd-table td.agenda-column {
    width: 15%;
  }
  .twd-table td.agenda-packet-column {
    width: 10%;
  }
  .twd-table td.meeting-minutes-column {
    width: 15%;
  }
  .twd-table td.audio-column {
    width: 10%;
  }
  .twd-table td.video-column {
    width: 10%;
  }
  .twd-table td.additional-documents-column {
    width: 15%;
  }
}

@media only screen and (max-width: 1024px) {
  .twd-table,
  .twd-table thead,
  .twd-table tbody,
  .twd-table th,
  .twd-table td,
  .twd-table tr {
    display: block;
  }

  .twd-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .twd-table td {
    border: none;
    position: relative;
    padding-left: 50% !important;
    min-height: 40px;
  }

  .twd-table td.empty {
    display: none;
  }

  .twd-table td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  /*
      Label the data
      */
  .twd-table td.title-column:before {
    content: "Title";
  }
  .twd-table td.meeting-date-column:before {
    content: "Meeting Date";
  }
  .twd-table td.agenda-column:before {
    content: "Agenda";
  }
  .twd-table td.agenda-packet-column:before {
    content: "Packet";
  }
  .twd-table td.meeting-minutes-column:before {
    content: "Meeting Minutes";
  }
  .twd-table td.audio-column:before {
    content: "Audio";
  }
  .twd-table td.video-column:before {
    content: "Video";
  }
  .twd-table td.additional-documents-column:before {
    content: "Additional Docs";
  }
  .twd-table td.notes-column:before {
    content: "Notes";
  }
}

div.Tokenize {
  display: block;
  width: auto;
}
div.Tokenize ul.TokensContainer {
  height: auto;
}
div.Tokenize ul.TokensContainer .Close {
  box-shadow: none;
}

.load-more {
  cursor: pointer;
}
.rep_meeting_homepage #homepage-advanced-filter {
  background: #ffffff;
  border: 1px solid #d1d1d1;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 12px;
}
.rep_meeting_homepage th,
.rep_meeting_homepage td,
.rep_meeting_homepage #homepage-advanced-filter label {
  font-size: 14px !important;
}

/*=====  End of MEETINGS  ======*/

/*Juniper News and Notices Archive Page*/
.juniper-news-archive {
  padding-top: 50px;
}

.juniper-news-archive .archive-item {
  border-radius: 10px;
}

.juniper-news-archive .archive-item-image {
  border-radius: 10px;
}

.juniper-news-archive .archive-item-body {
  min-height: 170px;
}

.juniper-news-archive .archive-item-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.juniper-news-archive .archive-item-snippet {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.juniper-news-archive .archive-item-button {
  position: absolute;
  bottom: 15px;
  right: 15px;
}
/*END Juniper News and Notices Archive Page*/

/* Juniper Subscribe Page*/

.juniper-subscriber-title {
  display: block;
  margin-bottom: 15px;
}

.juniper-row {
  margin-bottom: 10px;
}

.juniper-row:after {
  content: "";
  display: block;
  clear: both;
}

#juniper-subscribe-topics-parent,
#juniper-subscribe-method-parent {
  padding: 1rem 2rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.juniper-subscriber-form-box .sub {
  margin-left: 30px;
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection {
  position: relative;
  display: inline-block;
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection input {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection label {
  border: 1px solid #c6c6c6;
  box-sizing: border-box;
  border-radius: 10px;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  padding: 10px;
  color: #4c4c4c;
  min-width: 100px;
  margin: 5px;
  padding-bottom: 1.5rem;
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection label i {
  display: block;
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection input:checked + label {
  border-color: #4245e7 !important;
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection input:checked + label i {
  color: #4245e7 !important;
}
.juniper-agendas-minutes-packets {
  display: none;
}

/*.heygov-widget-button {
    right: 60px !important;
    bottom: 16px !important;
  } */

/* Lightbox 2*/
.lb-image {
  max-width: inherit !important;
}

@media all and (min-width: 992px) {
  .dropdown-menu {
    width: 13rem;
  }
  .mega-submenu {
    left: 100%;
    top: 0;
    min-width: 25rem;
  }
  .ktm-mega-menu {
    position: static;
  }
  .mega-menu {
    left: 0;
    right: 0;
    width: 100%;
  }
  .dropdown-menu li {
    position: relative;
  }
  .dropdown-menu .submenu {
    display: none;
    left: 100%;
    top: 0;
  }
  .dropdown-menu > li:hover > .submenu,
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

/*---------- Homepage Sections: Events Calendar  ----------*/
#homepageEventsCalendar {
  padding-bottom: 40px;
}

#homepageEventsCalendar .section-title {
  color: var(--primary-color);
  font-size: 36px;
  padding: 48px 0px;
  font-weight: 900;
}

#homepageEventsCalendar .events-calendar th {
  color: #000000;
  font-weight: 800;
}

#homepageEventsCalendar .events-calendar td {
  color: var(--primary-color);
}

#homepageEventsCalendar #monthAndYearTitle {
  font-size: 24px;
  font-weight: 800;
  color: var(--secondary-color);
}

#homepageEventsCalendar .section-view-all {
  display: inline-block;
  background: #4a7c59;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 12px 32px;
  text-decoration: none;
  margin-bottom: 40px;
  transition: background 0.2s, color 0.2s;
}

#homepageEventsCalendar .section-view-all:hover,
#homepageEventsCalendar .section-view-all:focus-visible {
  background: #3a6147;
  color: #ffffff;
  text-decoration: none;
}

section#events-calendar h4#events-calendar-list-date,
section#events-calendar h5#events-calendar-list-date {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Calendar navigation buttons - make them look like spans */
.tw-calendar-title button.tw-month-processing-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--secondary-color);
  font: inherit;
  cursor: pointer;
  display: inline;
}

.tw-calendar-title button.tw-month-processing-btn:hover {
  opacity: 0.8;
}

/*simple*/

.tw-calendar-shortcode .tw-calendar-table-header th {
  width: 14.28%;
}

#homepageEventsCalendar .events-calendar td .tw-calendar-day span:first-child {
  width: 52px;
  height: 52px;
  top: calc(50% - 28px);
}
#homepageEventsCalendar .events-calendar td.date-picker,
#homepageEventsCalendar .events-calendar td .tw-calendar-day {
  cursor: pointer;
}
#homepageEventsCalendar .events-calendar td.has-events .tw-calendar-day span:first-child,
#homepageEventsCalendar .events-calendar td .tw-calendar-has-events-date span:first-child {
  background: var(--secondary-color);
}
#homepageEventsCalendar .events-calendar td.selected .tw-calendar-day span:first-child,
#homepageEventsCalendar .events-calendar td.selected.has-events .tw-calendar-day span:first-child,
#homepageEventsCalendar .events-calendar td .tw-calendar-current-date span:first-child {
  background: var(--primary-color);
}
#homepageEventsCalendar .events-calendar td .tw-calendar-current-date span:first-child {
  outline: 2px solid red;
  background: transparent;
}
#homepageEventsCalendar .events-calendar td:not(.selected) .tw-calendar-current-date span:last-child {
  color: #000000 !important;
}
#homepageEventsCalendar .events-calendar td.has-events .tw-calendar-day span:last-child,
#homepageEventsCalendar .events-calendar td .tw-calendar-has-events-date span:last-child {
  color: #ffffff !important;
  /* The visible circle is a sibling span (span:first-child), so the white day
     number has no real background for contrast checkers to read. Repeat the
     circle's color here — it blends with the circle (no visual change) but lets
     WAVE/WCAG measure the white text against the actual green, not the page white. */
  background-color: var(--secondary-color);
}
#homepageEventsCalendar .events-calendar td.selected .tw-calendar-day span:last-child,
#homepageEventsCalendar .events-calendar td .tw-calendar-current-date span:last-child {
  color: #ffffff !important;
}

#homepageEventsCalendar .events-calendar td {
  color: var(--primary-color);
}

@media (min-width: 768px) {
}
/*rich*/
.tw-calendar-shortcode.tw-calendar-shortcode-rich > div:first-child {
  background: #fff;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.07);
}
.tw-calendar-shortcode .tw-calendar-table-body.tw-calendar-table-body-rich td div {
  min-height: 85px;
}
.tw-calendar-shortcode .tw-calendar-table-body.tw-calendar-table-body-rich td div span.tw-calendar-day-event-title,
.tw-calendar-shortcode .tw-calendar-table-body.tw-calendar-table-body-rich td div span.tw-calendar-day-event-more {
  font-size: 12px;
}
.tw-calendar-shortcode .tw-calendar-table-body.tw-calendar-table-body-rich td div.tw-calendar-day.tw-calendar-day-active {
  background: #f5f4f3;
}

.cusrsor-pointer {
  cursor: pointer;
}

/*----------  EVENTS LIST  ----------*/

#homepageEventsCalendar .tw-calendar-events-cards article {
  border: 1px solid var(--secondary-color);
  border-left: 20px solid var(--secondary-color);
  min-height: 160px;
  position: relative;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  background: #fff;
  border-radius: 5px;
  margin-top: 1.5rem;
}

#homepageEventsCalendar .tw-calendar-events-cards article a {
  color: #ffffff;
  border-radius: 5px;
}

.tw-calendar-shortcode.tw-calendar-shortcode-rich .tw-calendar-events-cards {
  height: 565px;
}
.tw-calendar-shortcode .tw-calendar-events-cards .tw-event-list-scrollbar {
  height: 525px;
  top: 20px;
  bottom: 20px;
}
@media (min-width: 1200px) {
  .tw-calendar-shortcode.tw-calendar-shortcode-rich .tw-calendar-events-cards,
  .tw-calendar-shortcode .tw-calendar-events-cards .tw-event-list-scrollbar {
    height: auto;
  }
}

/*Calendar list scrollbar*/
/* width */
.tw-calendar-events-cards ::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.tw-calendar-events-cards ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--secondary-color);
  border-radius: 10px;
}

/* Handle */
.tw-calendar-events-cards ::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
  border-radius: 10px;
}

/*============================================
  =            SOCIAL NETWORKS MENU            =
  ============================================*/
ul.social-networks-menu li a {
  color: var(--secondary-color);
  font-size: 34px;
}
/*=====  End of SOCIAL NETWORKS MENU  ======*/

img[src=""] {
  display: none;
}

.heygov-vidget-button {
  right: 60px;
  bottom: 15px;
}

.juniper-news-single-default img {
  max-width: 100%;
}

/* highlight advanced search meatches */
#search-results em {
  background-color: darkkhaki;
}
#search-results {
  word-wrap: break-word;
}

.page-featured-image {
  margin-top: 50px;
}

.page-featured-image img {
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Skip to main content - accessible but hidden */
.skip-to-main {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

.skip-to-main:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ensure search button styling is not affected */
.search-button.searchbutton {
  border: none;
  cursor: pointer;
}

/* ── WCAG 2.4.7 Focus Visible — global fallback ──
   Any interactive element without explicit focus styling gets a visible ring.
   :focus-visible only fires on keyboard focus (not mouse click), so it doesn't
   distract sighted mouse users while still meeting AA. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #1f4d27;
  outline-offset: 2px;
  border-radius: 2px;
}
/* On dark backgrounds, switch focus ring to white */
header :focus-visible,
.hero :focus-visible,
.tw-bg-primary :focus-visible,
[class*="dark"] :focus-visible {
  outline-color: #fff;
}

/* WCAG 2.4.4 Link Purpose — give links a visual cue beyond color
   inside body content areas (skips menus/buttons that have own styling). */
.content a:not([class*="btn"]):not([class*="nav"]),
article a:not([class*="btn"]):not([class*="nav"]) {
  text-decoration: underline;
}