:root {
    /* global scope */
  --brand-yellow: #fcf860;
  --brand-buff: #ebeacb;
  --brand-light-buff: #F5F5E5;
  --brand-eucalyptus: #C7CAA6;
  --brand-dark-green: #94967D;
  --brand-red: #7F3634;
  --brand-black: #1d1d1d;
  --primary-font-family: 'ABCMarfa', sans-serif;
  --shadow-sm: 8 0 0px #1D1D1D1A;
  --shadow-md: 8px 0px 0px #1D1D1D33;
  --shadow-lg: 16px 0px 0px #1D1D1D4D;
}

@font-face {
  font-family: 'ABCMarfa'; 
  src: url('/ABCMarfa-Regular-Trial.woff2') format('woff2'), 
       url('/ABCMarfa-Regular-Trial.woff') format('woff');   
}

@font-face {
  font-family: 'ABCMarfa-Bold'; 
  src: url('/ABCMarfa-Bold-Trial.woff2') format('woff2'), 
       url('/ABCMarfa-Bold-Trial.woff') format('woff');   
}

.custom-flex-section {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  margin: 0;
  min-height: 400px;
}

.custom-flex-container {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.custom-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
}

.experience-programs h2 {
  margin: 0;
  font-weight: bold;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  flex-direction: column;
}

.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 20px;
  overflow: hidden;
  padding: 2px;
  margin-top: 5px;
}

.search-bar input {
  border: none;
  border-radius: 20px;
  padding: 8px 12px;
  outline: none;
}

.search-bar button {
  border: none;
  background-color: transparent;
  padding: 5px;
  cursor: pointer;
}

.filter-options {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.filter-group {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.filter-group label {
  font-weight: bold;
  margin-bottom: 5px;
}

.filter-options select {
  border-radius: 20px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.program-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  gap: 30px;
}

.program-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  border: none;
  border-left: solid 2px black;
  height: 70%;
  min-height: 250px;
  background: var(--brand-buff);
}

.program-image {
  background-size: cover;
  background-position: center;
  height: 40%;
}

.program-card:hover {
  box-shadow: var(--shadow-lg); 
  background-color: var(--brand-yellow);
  cursor: pointer;
}

.program-details {
  padding: 5px;
  position: relative;
  /* Keep details in front of image */
  z-index: 1;
  /* Ensures details are above the image */
  font-family: var(--primary-font-family);
}

.program-details h3 {
  font-family: var(--primary-font-family);
  font-size: 1.5rem;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}


.program-details h4 {
  font-family: var(--primary-font-family);
  font-size: 1.3rem;
  font-weight: bold;
  overflow: hidden;
}

.header-row h2,
.header-row .filter-group label {
  font-family: var(--primary-font-family);
}

/* Specific styling for the header */
.header-row h2 {
  font-weight: 700;
  /* Bold weight for the header */
  font-size: 24px;
  /* Adjust font size as needed */
}

/* Specific styling for labels */
.header-row .filter-group label {
  font-weight: 400;
  /* Regular weight for labels */
  font-size: 16px;
  /* Adjust font size as needed */
}

/* Optionally, style the select dropdowns */
.header-row select {
  font-family: var(--primary-font-family);
  font-size: 16px;
  /* Match font size with labels */
}

/* Dimming effect and overlay for completed items */
.dimmed {
  filter: brightness(0.5);
  /* Dim the image */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  /* Change text color as needed */
  font-size: 24px;
  /* Adjust font size */
  font-weight: bold;
  /* Bold text */
  background: rgba(0, 0, 0, 0.5);
  /* Optional background for better visibility */
  z-index: 2;
  /* Ensure overlay is above other elements */
}

.carousel-container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  margin: auto;
}

.carousel-track {
  display: flex;
  /* Align slides in a row */
  transition: transform 0.5s ease-in-out;
  /* Smooth transition for sliding */
}

.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  height: 300px;
  /* Adjust as needed */
  background-position: center;
  background-size: cover;
}


.carousel-control {
  position: absolute;
  top: 50%;
  font-size: 24px;
  font-weight: bold;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 10px;
  cursor: pointer;
  transform: translateY(-50%);
}

.carousel-control.prev {
  left: 10px;
}

.carousel-control.next {
  right: 10px;
}

.carousel-dots {
  text-align: center;
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: white;
}

/*Experience Landing page*/
body {
  font-family: var(--primary-font-family);
  /*text-align: center;*/
  margin: 0;
  padding: 0;
  height: 100vh;
  /* Full height of the viewport */
}

/* body.no-scroll {
  overflow: hidden;  
} */

h1 {
  font-size: 2.5rem;
  /* Increased font size */
  margin: 20px 0;
}

p,
h2 {
  font-size: 1.4rem;
  /* Increased description font size */
  color: #333;
}

.home-top {
  color: white;
  height: 50vh;
  background-image: url('/PortalDefaultHomeHeroImage');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;

}

.home-top-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* behaves like background-size: cover */
  z-index: 0;
  pointer-events: none;
  /* clicks go to your content */
}

.home-top>*:not(.home-top-bg) {
  position: relative;
  z-index: 1;
  /* keep content above the video */
}


.home-bottom {
  /* color: white; */
  height: 35vh;
  padding-top: 5px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  overflow-y: auto;
  background-color: var(--brand-buff);
}

.home-top.full-screen {
  height: 100vh;
  /* Make it full screen */
}

.home-bottom.hidden {
  display: none;
  /* Hide the element */
}

.header-space {
  width: 95%;
  text-align: center;
  padding-top: 50px;
  color: white;
}

.header-space h1 {
  font-size: 3.5rem;
  font-family: var(--primary-font-family);
  text-align: left;
  font-weight: bold;
}

.header-space h3 {
  font-size: 1.8rem;
  font-family: var(--primary-font-family);
  text-align: left;
}

.home-header-row {
  height: 60vh;
}

.home-header-space {
    width: 95%;
    text-align: center;
    padding-top: 5%;
    transform: translateY(50%);    
}

.home-header-space h1 {
  font-size: 5rem;
  font-family: var(--primary-font-family);
  text-align: left;
  font-weight: bold;
  color: var(--brand-yellow);
}

.home-header-space h3 {
  font-size: 1.5rem;
  font-family: var(--primary-font-family);
  text-align: left;
  color: white;
  line-height: 1.4;
}

.home-top-left {
  width: 45%;
  padding: 50px;
}

.home-top-right {
  width: 50%;
}

.icon-container {
  width: 80%;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  /* Stacks child elements vertically */
  justify-content: center;
}

.icon-section {
  display: flex;
  justify-content: space-evenly;
  margin: 30px 0;
  flex-wrap: wrap;
  min-height: 300px;
  gap: 15px;
}

.icon-section-new {
  display: flex;
  /*justify-content: space-evenly; 
  min-height: 300px;*/
  margin: 30px 0;
  flex-wrap: wrap;
  gap: 10px;
}


.icon-section-new> :first-child {
  align-self: flex-start;
  /* Ensure it aligns to the start */
  margin-left: 0;
  /* Optional: Reset left margin if needed */
}

.icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: 0 1 calc(20% - 5px);
  aspect-ratio: 2 / 1.2;
  background-color: var(--brand-light-buff);
  color: white; 
  position: relative;
  max-width: 250px;
  min-width: 200px;
}

.icon a {
  text-decoration: none;
}

.icon[data-status="0"]:hover,
.icon:hover:not([data-status]) {
  box-shadow: var(--shadow-md); 
  background-color: var(--brand-yellow);
}

.icon[data-status="3"]:hover,
.icon:hover:not([data-status]) {
   box-shadow: var(--shadow-md); 
  background-color: var(--brand-yellow);
}

.icon::after{
  --sz:24px;
  content:"";
  position:absolute; top:6px; right:6px;
  width:var(--sz); height:var(--sz);
  pointer-events:none;
  display:none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='258 415 24 24'><path id='Primary_6' d='M270 417.25C272.586 417.25 275.066 418.277 276.894 420.106C278.723 421.934 279.75 424.414 279.75 427C279.75 429.586 278.723 432.066 276.894 433.894C275.066 435.723 272.586 436.75 270 436.75C267.414 436.75 264.934 435.723 263.106 433.894C261.277 432.066 260.25 429.586 260.25 427C260.25 424.414 261.277 421.934 263.106 420.106C264.934 418.277 267.414 417.25 270 417.25ZM270 439C273.183 439 276.235 437.736 278.485 435.485C280.736 433.235 282 430.183 282 427C282 423.817 280.736 420.765 278.485 418.515C276.235 416.264 273.183 415 270 415C266.817 415 263.765 416.264 261.515 418.515C259.264 420.765 258 423.817 258 427C258 430.183 259.264 433.235 261.515 435.485C263.765 437.736 266.817 439 270 439ZM273.956 424.97C274.284 424.445 274.125 423.752 273.6 423.419C273.075 423.086 272.381 423.25 272.048 423.775L269.17 428.383L267.905 426.695C267.53 426.198 266.827 426.095 266.33 426.47C265.833 426.845 265.73 427.548 266.105 428.045L268.355 431.045C268.575 431.341 268.931 431.509 269.302 431.495C269.672 431.481 270.009 431.284 270.206 430.966L273.956 424.966V424.97Z' fill='currentColor'/></svg>") no-repeat center/100% 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='258 415 24 24'><path id='Primary_6' d='M270 417.25C272.586 417.25 275.066 418.277 276.894 420.106C278.723 421.934 279.75 424.414 279.75 427C279.75 429.586 278.723 432.066 276.894 433.894C275.066 435.723 272.586 436.75 270 436.75C267.414 436.75 264.934 435.723 263.106 433.894C261.277 432.066 260.25 429.586 260.25 427C260.25 424.414 261.277 421.934 263.106 420.106C264.934 418.277 267.414 417.25 270 417.25ZM270 439C273.183 439 276.235 437.736 278.485 435.485C280.736 433.235 282 430.183 282 427C282 423.817 280.736 420.765 278.485 418.515C276.235 416.264 273.183 415 270 415C266.817 415 263.765 416.264 261.515 418.515C259.264 420.765 258 423.817 258 427C258 430.183 259.264 433.235 261.515 435.485C263.765 437.736 266.817 439 270 439ZM273.956 424.97C274.284 424.445 274.125 423.752 273.6 423.419C273.075 423.086 272.381 423.25 272.048 423.775L269.17 428.383L267.905 426.695C267.53 426.198 266.827 426.095 266.33 426.47C265.833 426.845 265.73 427.548 266.105 428.045L268.355 431.045C268.575 431.341 268.931 431.509 269.302 431.495C269.672 431.481 270.009 431.284 270.206 430.966L273.956 424.966V424.97Z' fill='currentColor'/></svg>") no-repeat center/100% 100%;
}

.icon[data-status="3"]::after{
  display:block;
  background-color: var(--brand-yellow); /* color of the icon */
}


.icon[data-status="1"] {
  background-color: var(--brand-black);
  pointer-events: none;
  cursor: default;
}

.icon[data-status="3"] {
  background-color: var(--brand-black);
  pointer-events: none;
  cursor: default;
}

.icon[data-status="1"]::after {
  content: "✔";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--brand-yellow);
  border-radius: 50%;
  background: transparent;
  color: var(--brand-yellow);
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.icon-text {
  flex: 0.5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--brand-black);
  padding: 5px;
}

.icon-text[data-status="1"] {
  /* flex: 1;
  display: flex; */
  justify-content: center;
  align-items: flex-start;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--brand-yellow);
  padding: 5px;
}

.icon-text[data-status="3"] {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--brand-yellow);
  padding: 5px;
}

.icon-text:hover {
  text-decoration: none;
}


.experience-header-space {
  width: 70%;
  color: white;
}

.region-section h1 {
  font-size: 2.5em;
  font-family: var(--primary-font-family);
  text-align: left;
  font-weight: bold;
}

.region-section h2 {
  font-size: 2em;
  font-family: var(--primary-font-family);
  text-align: left;
  font-weight: bold;
  margin-top: 2px;
  padding-bottom: 10px;
}

.region-section h3 {
  font-size: 1.5em;
  font-family: var(--primary-font-family);
  text-align: left;
  font-weight: bold;
}

.region-highlights {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.region-content {
  display: flex;
  width: 100%;
}

.region-links {
  font-family: var(--primary-font-family);
  display: flex;
  width: 100%;
  padding-top: 10px;
   flex-wrap:wrap;   
}

.region-image {
  flex-shrink: 0;
  width: 40%;
  margin-right: 20px;
}

.region-image img {
  width: 100%;
}

.region-info {
  width: 60%;
  text-align: left;
}

.form-control {
  border-radius: 10px;
  border: none !important;
  background-color: var(--brand-yellow) !important;
  outline: none !important;
  font-family: var(--primary-font-family);
      flex-wrap: wrap;
}

.field-label {
  font-family: var(--primary-font-family);
  font-weight: bold;
}

.region-more-info {
  text-align: center;
  background-color: var(--brand-yellow);
  padding: 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.region-more-info:hover {
  color: var(--brand-yellow);
  background-color: var(--brand-black);
}

.region-links-left {
  font-family: var(--primary-font-family);
  display: flex;
  justify-content: space-between;
  /* width: 40%; */
}

.region-links-right {  
    font-family: var(--primary-font-family);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.regionClimate-title {
  font-family: var(--primary-font-family);
  font-weight: bold;
  padding-left: 10px;
  padding-top: 10px;
  font-size: 1.3em;
  display: inline-flex;   
  align-items: center;  
}

.regionClimate-details {
  font-family: var(--primary-font-family);
  padding-left: 10px;
  padding-bottom: 10px;
}

.regionClimate {
  font-family: var(--primary-font-family);
  width: 48%;
  background: #C7CAA6;
}

.region-seasonclimatedetail{
  font-family: var(--primary-font-family);
  background: #C7CAA6;
}

.region-climate-season-name {
    font-family: var(--primary-font-family);
    padding-left: 15px;
    font-weight: normal;
}
.region-seasonclimate {
  font-family: var(--primary-font-family);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px;
  border-radius: 50%;
  gap: 20px;
  justify-content: space-between;
  padding-bottom: 10px;
}

.region-more-info a {
  font-size: 1em;
  color: var(--brand-black);
  font-family: var(--primary-font-family);
  text-align: center;
  padding: 10px;
  font-weight: bold;
}


.region-more-info a:hover {
  font-size: 1em;
  color: var(--brand-yellow);
  background-color: var(--brand-black);
}

.region-info h5 {
  font-weight: bold;
  font-size: 1.5em;
  text-align: left;
}

.social-links {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  /* Distributes items with equal space between them */
}

.social-links a {
  margin: 0 5px;
  color: var(--brand-yellow);
  font-size: 1.0em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.social-links svg {
  background-color: transparent;
  fill: #000;
  width: 20px;
  height: 20px;
}


.info-link a {
  color: #0066cc;
  font-size: 1.1em;
  text-decoration: underline;
}

.row.sectionBlockLayout {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
  min-height: auto;
  padding: 8px;
}

.container {
  max-width: 900px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: 120px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}

.col-lg-12.columnBlockLayout {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
}

/* Changes to Header and Footer templates*/

.footer-blurb a:active,
.footer-blurb a:link,
.footer-blurb a:visited {
  color: var(--portalThemeColor7);
  font-size: 12px;
}

footer[role="contentinfo"] {
  width: 100%;
  /* Makes footer full width of the browser */
  text-align: center;
  box-sizing: border-box;
  /* Ensures padding doesn’t add to width */
}

.footer-blurb small {
  color: var(--portalThemeColor7);
  text-align: left;
  display: flex;
  padding-top: 30px;
  color: var(--brand-yellow);
}


.row.list-unstyled li {
  display: inline;
  padding: 10;
}

footer .container {
  max-width: 1440px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}

.footer-logos {
    display: flex;
    padding: 10px;
    gap: calc(10%);
}

.footer-social {
    display: flex;
    padding: 10px;
    gap: calc(10%);   
}


.footer-logos img {
  height: auto;
  width: 50%;
}

footer.static {
  position: static;
  display: block;
  /* Make it visible when adjusted */
}

footer.fixed {
  position: fixed;
  display: block;
  /* Ensure visibility for the fixed state */
}

footer .footer-bottom {
  background-color: var(--brand-black);
  padding-left: 10px;
  padding-right: 10px;
  margin-top: auto;
  padding: 5px 0;
  min-height: 160px;
}

footer .footer-bottom ul {
    display: contents;
    align-items: flex-start;
    width: 100%;
}

.row.list-unstyled svg {
  background-color: transparent;
  fill: var(--brand-yellow);
  width: 20px;
  height: 20px;
  margin: 10px;
}

.row.sectionBlockLayout.sectionFixedStyle {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.row.sectionBlockLayout .container {
  display: flex;
  flex-wrap: wrap;
}

.col-md-12.columnBlockLayout {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body,
label,
p,
span,
li,
.navbar a {
  font-family: var(--primary-font-family);
  font-weight: normal;  
  font-size: 1.4rem;
  justify-content: space-between;
}

h1,
h2,
h3,
h4,
ul,
.navbar a {
  font-family: var(--primary-font-family);
  color: var(--brand-black);
  text-transform: uppercase;
}

/* Styling for .username (profile name) */
.username {
  font-family: var(--primary-font-family);
  font-size: 1.5em;
  font-weight: bold;
  /* Bold weight */
  color: white;
  
}

/* Initial transparent header */
.navbar {
  display: flex;
  align-items: center;
  /* Vertically align all child elements */
  background-color: var(--brand-yellow);
  /*background-color: rgba(0, 0, 0, 0.4);  Slightly dark with transparency */
  transition: background-color 0.3s ease;
  /* Smooth transition */
  border-bottom: none;
  flex-wrap: wrap;
}

/* Solid header background for scrolled state */
.navbar.scrolled {
  /* background-color: #333; Replace with your preferred solid color */
  background-color: var(--brand-yellow);
}

.navbar.bottommargin {
  margin-bottom: 50px;
}


/* Profile dropdown menu */
.navbar .dropdown-menu {
  background-color: rgba(0, 0, 0, 0.4) !important;
  /* Same transparent background as navbar */
  color: white !important;
  /* Set font color to white */
  border: none;
  /* Remove border */
  border-radius: 0;
  /* Optional: remove any border radius */
}

/* Ensure the text color for links is white */
.navbar .dropdown-menu li a {
  /* color: white !important;  */
  font-family: var(--primary-font-family);
  font-weight: normal;
  /* Use regular font weight */
  text-decoration: none;
  /* Remove underline (if any) */
}

.navbar .dropdown-menu li a:hover {
  background-color: #fff;  
}

/* Ensure the profile dropdown's caret also blends in */
.navbar .dropdown-toggle .caret {
  border-top-color: white;
  /* White caret on the dropdown toggle */
}

/* Header styling for headings */
.navbar-header .header-label {
  display: flex;
  font-family: var(--primary-font-family);
  font-weight: bold;
  /* Bold weight for headings */
  font-size: 1.2em;
  color: white;
  margin-left: 10px;
  justify-content: flex-start;
}

@media screen and (min-width: 640px) {
  .nav-builder__logo .logo__desktop svg {
    fill: var(--brand-black);
    height: 40px;
    width: 404px;
  }

  .nav-builder__logo .logo__mobile {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .nav-builder__logo .logo__desktop {
    display: none;
  }
}

.nav-builder__logo .logo__mobile img,
.nav-builder__logo .logo__mobile svg {
  max-height: 50px;
  max-width: 58vw;
  min-height: 40px;
}

.nav-builder__logo .logo__desktop img,
.nav-builder__logo .logo__desktop svg {
  max-width: 300px;
  min-height: 20px;
  min-width: 20px;
  padding-left: 10px;
  padding-top: 10px;
}

.experience-portal-label {
  font-family: var(--primary-font-family);
  font-weight: 700;
  /* Bold weight for heading */
  font-size: 28px;
  /* Adjust font size for the header */
  color: white;
  /* Ensure font color is white */
}

/* Additional styling for body copy */
.navbar-right .username,
.navbar .navbar-toggle {
  font-family: var(--primary-font-family);
  font-weight: normal;
  /* Regular weight */
}

.navbar-nav {
  margin-right: 20px;
}

.navbar-profile {
  margin-left: auto;
}


.navbar-toggle.collapsed .child.override {
  font-family: var(--primary-font-family);
  font-weight: normal;
  /* Regular weight */
}

.navbar-inverse .navbar-toggle:focus {
  background-color: rgb(0, 129, 125);
}

/* Ensure vertical alignment and proper spacing for menu-bar */
.navbar-right.menu-bar {
  display: flex;
  justify-content: flex-end;
  /* Align items to the right */
  align-items: center;
  /* Vertically align items */
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--primary-font-family);
  font-weight: normal;
  /* Normal font weight */
}

/* Styling for list items in menu-bar */
.navbar-right.menu-bar .nav li {
  display: inline-block;
  /* Display list items inline */
  font-family: var(--primary-font-family);
  font-weight: normal;
  /* Ensure normal font weight */
  vertical-align: middle;
  /* Align items vertically in the middle */
}

/* Styling for links in menu-bar */
.navbar-right.menu-bar .nav a {
  text-decoration: none;
  color: var(--brand-black);  
  font-weight: bold;  
  padding: 8px 5px;
  transition: color 0.3s ease, background 0.3s ease;
  font-family: var(--primary-font-family);
  vertical-align: middle;  
  will-change: transform;
}
.navbar-right.menu-bar .nav a:hover,
.navbar-right.menu-bar .nav a:focus{
  transform: translateY(-2px); 
  color: var(--brand-black);
}

.wrapper-body.nonhome {
  padding-top: calc(60px + 3rem);
}

.wrapper-body {
  min-height: calc(100% - 160px);
  margin-bottom: 0px;
}



.navbar-inverse .navbar-brand {
  align-content: center;
}


.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 15px;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: var(--brand-yellow);
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
}

.navbar-right.menu-bar .nav li {
  display: inline-block;
  /* margin-right: 15px; */
  font-family: var(--primary-font-family);
  font-weight: normal;
  vertical-align: middle;
}

.header-row h2 {
  font-weight: 700;
  font-size: 16px;
}

#backToTop {
  position: fixed;
  /* Fixed position so it floats */
  bottom: 20px;
  /* Distance from the bottom of the viewport */
  right: 20px;
  /* Distance from the right side of the viewport */
  background-color: var(--brand-yellow);
  /* Button background color */
  color: white;
  /* Text color */
  border-radius: 30%;
  border: none;
  display: flex;
  justify-content: space-around;
  padding-left: 5px;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
  /* Cursor changes to pointer on hover */
  display: none;
  /* Hidden by default */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  /* Button shadow */
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 1000;
  /* Ensure it stays above other elements */
}


#backToTop:hover {
  transform: scale(1.1);
  /* Slightly enlarges the button on hover */
}

.columnBlockLayout {
  margin-top: 1px;
  /* to override default css */
  margin-bottom: 60px;
  padding: 16px;
}


.floating-button {
  position: fixed;
  top: 70px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--brand-yellow);
  color: white;
  border-radius: 40%;
  border: none;
  display: flex;
  justify-content: space-around;
  padding-left: 5px;
  align-items: center;
  font-size: 12px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 1000;
}

.floating-button:hover {
  color: white;
  background-color: var(--brand-yellow);
  transform: scale(1.1);
  /* Slightly enlarges the button on hover */
}

.floating-button:active {
  transform: scale(0.95);
  /* Shrinks slightly when clicked */
}

.fade.show {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.3);
}

/*Registration*/
.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  color: var(--brand-yellow);
  text-align: center;
  background-color: var(--brand-black);
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
  transition: width .6s ease;
  border-radius: 0px 0px 0px 0px;
}

.progress.top {  
  border-radius: 2px;
}

div.progress {
  background-color: var(--brand-eucalyptus);
}

.floating-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  /* Ensure it's above other elements */
}

.round-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px; /* Adjustable size */
  height: 40px; /* Adjustable size */
  border-radius: 50%; /* Makes it a circle */
  background-color: var(--brand-yellow); /* Yellow for Default */
  color: var(--brand-black); /* Black for Default + */
  border: none;
  cursor: pointer;
  font-size: 20px; /* Size of the + */
  line-height: 1;
  position: relative;
}

.round-button svg {
  display: block;              /* Removes inline spacing */
  width: 50%;                  /* Adjust the size to fit nicely */
  height: 50%;                 /* Keeps it centered and proportional */ 
  fill:var(--brand-black)
}
/* Pressed state (black background, yellow +) */
.round-button:active {
  background-color: var(--brand-black);
  color: var(--brand-yellow); 
}

.round-button:hover {
  background-color: var(--brand-black);
  color: var(--brand-yellow); 
  fill:var(--brand-yellow);
}

.round-button:hover svg {
  fill: var(--brand-yellow);  
}

/* Focus state (yellow background, white +, with focus ring) */
.round-button:focus {
  background-color: var(--brand-yellow); 
  color: #FFFFFF;
  outline: 2px solid var(--brand-black); /* Focus ring */
  outline-offset: 2px;
}

.floating-home {
  position: fixed;
  right: 20px;
  z-index: 1000;
}

.crmEntityFormView .tab-title {
  border-bottom: 1px solid #eee;
  -ms-text-rendering: optimizelegibility;
  text-rendering: optimizelegibility;
  display: none;
}

a:not(.btn):not(.round-button):not(.footer-Link):not(.header-link):not(.explore-button):not(.icon) {
  text-decoration: underline;
  color: var(--brand-black);
}

.fBody {
  min-height: calc(100dvh - 224px);
}

.confirmation-page {
  padding-top: 50px;
}

.homehero-image {
  position: fixed;
  /* Makes the image stay fixed relative to the viewport */
  top: 0;
  /* Aligns the top of the image with the top of the viewport */
  left: 0;
  /* Aligns the left of the image with the left of the viewport */
  width: 100vw;
  /* Sets the width to 100% of the viewport width */
  height: 50vh;
  /* Sets the height to 100% of the viewport height */
  object-fit: cover;
  /* Ensures the image covers the entire area without distortion */
  z-index: -1;
  /* Moves the image behind other content */
}

.teq-vertical-divider {
  display: block;
  width: 1px;
  height: 41px;
  background: linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.9) 15%, rgba(255, 255, 255, 0.9) 85%, rgba(255, 255, 255, 0.1) 100%);
  margin: 0px 0.43rem;
  background-color: white;
  padding: 1px;
  height: auto;
}

.cardIcon {
  display: block;
}

.iconTop {
  height: 50%;
  padding-top: 50px;
}

.iconBottom {
  height: 50%;
  padding-bottom: 50px;
}


.card-icon {
  flex: 1;
  /* Top half */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: var(--brand-black);
  /* Align icon close to the middle */
}

.card-icon[data-status="1"] {
  color: var(--brand-yellow);
  pointer-events: none;
  cursor: default;
}

/* .social-links a {
  display: inline-block;
 
} */

.footer-container {
  /* max-width: 1440px; */
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding: 0px;
  /* display: flex
; */
  flex-wrap: wrap;
  /* justify-content: space-evenly; */
  align-content: flex-start;
  width: 100%;
}

.experience-header-space p {
  text-align: left;
  font-size: 1.6rem;
}

.experience-header-space h3 {
  text-align: left;
  font-weight: bold;
}

.secondarySet-226 {
  display: none;
}

@media (max-width: 1289px) and (min-width: 769px) {
  .home-top-left {
    width: 65%;
  }
}

@media (max-width: 769px) and (min-width: 391px) {
  .icon-text {
    font-size: clamp(0.5rem, 3.5vw, 10rem);
  }

}

/* For general mobile; */
@media (max-width: 768px),
(pointer: coarse) and (max-width: 768px) {
  .icon-container {
    width: 90%;
  }

  .region-content {
    flex-direction: column;
    gap: 10px;
  }

  .region-image,
  .region-info {
    width: 100%;
    word-wrap: break-word;
  }

  .familLandingSocialLinkText {
    display: none;
  }

  .icon-section-new {
    gap: 5px;
  }

  .icon {
    flex: 1 0 100%;      
    max-width: none;
  }

  .home-top-left {
    width: 100%;
  }

  .program-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60%, 1fr));
    gap: 10px;
  }

  .home-header-space {    
    transform: translateY(0);
  }

  .home-bottom {
    padding: 10px;
    overflow-y: auto;
    height: auto;
  }

  .home-top {
    height: auto;
  }

  .navbar-profile {
    margin-left: auto;
  }

  .navbar-inverse .navbar-brand {
    display: none;
  }

  .footer-followus {
    display: none;
  }

  .footer-bottom {
    padding: 10px 0;
  }

  .footer-social {  
    max-width: none;
    width: 100%;    
    justify-content: space-between;
  }


  .region-links-left {
    font-family: var(--primary-font-family);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

    .region-links-right {
      order: 2;
      /* ensure CTA remains above socials */
      flex: 1 1 100%;
      /* take full width on the new line */
      justify-content: flex-start;
    }
  
    .social-links {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 0;
      padding-top: 10px;
    }
  
    .experience-header-space {
      width: 100%;
    }

  .program-card {
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .program-details h3 {
    margin-top: 5px;
  }

  .row {
    margin-left: auto;
    margin-right: auto;
  }

  .row list-unstyled{
    width: 100%;
  }

}

.btn {
  color: var(--brand-black);
  border-radius: 15px;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 20px;
  width: fit-content;
  background-color: var(--brand-yellow);
  margin: 2px;
  border-color: var(--brand-black);
}

.btn:hover {
  color: var(--brand-yellow) !important;
  background-color: var(--brand-black) !important;
  border-style: solid;
  border-width: 2px;
  border-color: var(--brand-black);
}

.btn:hover:active {
  color: var(--brand-yellow);
  background-color: var(--brand-black);
  border-style: solid;
  border-width: 2px;
  border-color: var(--brand-black);
}


/* Style the checkbox itself */
.checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--brand-yellow);
  border-radius: 4px;
  background-color: var(--brand-yellow);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
}

/* Checked state */
.checkbox input[type="checkbox"]:checked {
  background-color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="20 6 9 17 4 12"%3E%3C/polyline%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
}

/* Optional: Add spacing between checkbox and label text */
.checkbox input[type="checkbox"]+label {
  margin-left: 10px;
  font-size: 16px;
  color: #2F3E46;
  /* Dark gray text */
  cursor: pointer;
}

input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* base */
input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--brand-black);   /* inner dark ring */
  background: var(--brand-buff);            /* default fill */
  vertical-align: middle;
  cursor: pointer;
  /* transition: box-shadow .15s ease, background .15s ease, filter .15s ease; */
}

/* 2) default checked */
input[type="radio"]:checked{
  background:
    radial-gradient(circle,
      var(--brand-black) 0 50%,      /* center dot */
      var(--brand-yellow) 50% 80%,  /* yellow ring */
      var(--brand-buff) 80% 100%       /* fill to border */
    );
}

/* 3) hover (unchecked) – add outer ring with a light gap */
input[type="radio"]:hover{
  box-shadow:
    0 0 0 1px var(--brand-buff),   /* light gap */
    0 0 0 2px var(--brand-black);
}

/* 4) hover + checked – keep the checked art + outer ring */
/* input[type="radio"]:checked:hover{
  box-shadow:
    0 0 0 1px var(--brand-buff),
    0 0 0 2px var(--brand-black);
} */


a:not(.btn):hover {
  text-decoration: none !important;
}

.input-group-addon {
  color: var(--brand-yellow);
  border-radius: 0 10px 10px 0;
  background-color: var(--brand-black);
}

/* For very small screen width */
@media (max-width: 390px) {

  .col-xs-12,
  .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
  }

  .icon {
    flex: 0 1 calc(50% - 5px);
    aspect-ratio: 2 / 1;
  }

  .home-top {
    height: auto;
  }

  .home-top-left {
    padding: 20px;
  }

}

ul li.login-link a {
  color: var(--brand-black) !important;
  text-decoration: none !important;
}

.social {
  position: relative;
}

.qr-pop {
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  display: none;
  z-index: 1000;
}

.qr-pop img {
  width: 160px;
  height: 160px;
  display: block;
}

.social:hover .qr-pop,
.social:focus-within .qr-pop {
  display: block;
}

html,
body {
  background-color: var(--brand-buff);
  /* your color */
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-yellow);
}


.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
  background-color: var(--brand-buff);
}

.crmEntityFormView label {
  background-color: var(--brand-buff);
  color: #000000;
}


.accordion {
  /* width: 60vw; */
  margin: 0;
}

.accordion details {
  border-bottom: 1px solid var(--brand-black);
  padding: .5rem 0;
}

/* Header */
.accordion summary {
  cursor: pointer;
  list-style: none;
  /* hide default marker */
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

/* Chevron */
.accordion summary::before {
  content: "▾";
  /* down triangle */
  font-size: 3rem;
  line-height: 1;
  transition: transform .2s ease;
}

.accordion details[open] summary::before {
  transform: rotate(-180deg);
  /* point up when open */
}

/* Panel body */
.accordion .panel {
  padding: .75rem 0 1rem 1.6rem;
  /* indent body text */
  color: #222;
  background-color: var(--brand-buff);
}

 .weblinks-list {
    margin-top: 5px;
    margin-bottom: 5px;
    border-style: none;
 }

 .weblinksHeader {
    padding: 10px;
    text-align: center;
    color: var(--brand-black);
    background-color: var(--brand-yellow);
 }

 .informationBox {
    margin: 10px;
    padding-bottom: 30px;
}

.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
  border: none;
}

.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
  z-index: 2;
  margin-left: -1px;
  background-color: var(--brand-black);
  color: var(--brand-yellow);
}

.pp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: none;
  z-index: 1050
}

.pp-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1060;
  align-items: center;
  justify-content: center
}

.pp-modal[aria-hidden="false"],
.pp-modal-backdrop[aria-hidden="false"] {
  display: flex
}

.pp-modal__dialog {
  background: #fff;
  max-width: 900px;
  width: 92vw;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.pp-modal__header,
.pp-modal__footer {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
}

.pp-modal__footer {
  border-top: 1px solid #eee;
  border-bottom: 0
}

.pp-modal__title {
  margin: 0;
  font-size: 18px
}

.pp-modal__body {
    padding: 12px 16px;
    overflow: auto;
    display: flex;
    justify-content: center;
}

.pp-close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  margin-left: auto
}

.btn:hover,
.btn.focus {    
    text-decoration: none
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {
    background-color: var(--brand-yellow) !important;
}

.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
    color: #777;
    background-color: var(--brand-buff);
    border-color: #ddd;
    cursor: not-allowed;
  }


  /* base */
a.explore-button {
  text-decoration: none;
  color: var(--brand-black);
  text-align: center;
  background-color: var(--brand-yellow);
  padding: 10px 20px;
  border-radius: 15px;
  white-space: nowrap;
  font-family: var(--primary-font-family);
}

/* keep order: link → visited → hover/active/focus */
a.explore-button:link,
a.explore-button:visited {
  color: var(--brand-black);
  background-color: var(--brand-yellow);
}

/* hover/active/focus visible states */
a.explore-button:hover,
a.explore-button:active,
a.explore-button:focus-visible,
a.explore-button:visited:hover {
  color: var(--brand-yellow);
  background-color: var(--brand-black);  
}

/* Widget background */
.bootstrap-datetimepicker-widget {
  background-color: var(--brand-light-buff) !important;
}

/* Day cells act as the positioning context for the ring */
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day {
  position: relative;
}

/* Make the inner button transparent in all states */
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day > button {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  position: relative; /* sits above the ring */
  z-index: 1;
}
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day > button:hover,
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day > button:focus,
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day > button:active {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day > button::before,
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day > button::after {
  content: none !important;
}
/* HOVER: draw the ring on the TD, not the button */
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day:hover::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 2px;
  bottom: 2px;
  left: 3px;
  background-color: var(--brand-light-buff);
  border-radius: 50%;
  border: 1px solid var(--brand-black);
  pointer-events: none;
  z-index: 0;  
}

/* SELECTED day (the library adds .active on the TD) */
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day.active>button,
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed td.day.active:hover>button {

  color: var(--brand-black) !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: var(--brand-dark-green);
  color: var(--brand-black);
  border-bottom: solid 2px;
  border-radius: 0px;
}

/* Tidy spacing so icons sit closer to the text */
.btn.btn-primary{
  padding-left: 42px;                    /* space for dots */
  padding-right: 40px;                   /* space for arrow */
  background-repeat: no-repeat, no-repeat;
  /* background-position: 16px center, calc(100% - 16px) center; */
  background-size: 16px 17px, 18px 12px; /* your dots size, shorter arrow */
}

/* --- NORMAL (black pill, yellow icons) --- */
.btn-primary{
  background-color: var(--brand-black);
  color: var(--brand-yellow);
  border-color: var(--brand-black);

  /* background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'><path d='M1 3.0835C1 2.39287 1.55937 1.8335 2.25 1.8335H3.75C4.44062 1.8335 5 2.39287 5 3.0835V4.5835C5 5.27412 4.44062 5.8335 3.75 5.8335H2.25C1.55937 5.8335 1 5.27412 1 4.5835V3.0835ZM1 8.0835C1 7.39287 1.55937 6.8335 2.25 6.8335H3.75C4.44062 6.8335 5 7.39287 5 8.0835V9.5835C5 10.2741 4.44062 10.8335 3.75 10.8335H2.25C1.55937 10.8335 1 10.2741 1 9.5835V8.0835ZM5 13.0835V14.5835C5 15.2741 4.44062 15.8335 3.75 15.8335H2.25C1.55937 15.8335 1 15.2741 1 14.5835V13.0835C1 12.3929 1.55937 11.8335 2.25 11.8335H3.75C4.44062 11.8335 5 12.3929 5 13.0835ZM6 3.0835C6 2.39287 6.55937 1.8335 7.25 1.8335H8.75C9.44063 1.8335 10 2.39287 10 3.0835V4.5835C10 5.27412 9.44063 5.8335 8.75 5.8335H7.25C6.55937 5.8335 6 5.27412 6 4.5835V3.0835ZM10 8.0835V9.5835C10 10.2741 9.44063 10.8335 8.75 10.8335H7.25C6.55937 10.8335 6 10.2741 6 9.5835V8.0835C6 7.39287 6.55937 6.8335 7.25 6.8335H8.75C9.44063 6.8335 10 7.39287 10 8.0835ZM6 13.0835C6 12.3929 6.55937 11.8335 7.25 11.8335H8.75C9.44063 11.8335 10 12.3929 10 13.0835V14.5835C10 15.2741 9.44063 15.8335 8.75 15.8335H7.25C6.55937 15.8335 6 15.2741 6 14.5835V13.0835ZM15 3.0835V4.5835C15 5.27412 14.4406 5.8335 13.75 5.8335H12.25C11.5594 5.8335 11 5.27412 11 4.5835V3.0835C11 2.39287 11.5594 1.8335 12.25 1.8335H13.75C14.4406 1.8335 15 2.39287 15 3.0835ZM11 8.0835C11 7.39287 11.5594 6.8335 12.25 6.8335H13.75C14.4406 6.8335 15 7.39287 15 8.0835V9.5835C15 10.2741 14.4406 10.8335 13.75 10.8335H12.25C11.5594 10.8335 11 10.2741 11 9.5835V8.0835ZM15 13.0835V14.5835C15 15.2741 14.4406 15.8335 13.75 15.8335H12.25C11.5594 15.8335 11 15.2741 11 14.5835V13.0835C11 12.3929 11.5594 11.8335 12.25 11.8335H13.75C14.4406 11.8335 15 12.3929 15 13.0835Z' fill='%23fcf860'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none' ><path d='M14.7688 9.37708C14.9156 9.23645 15 9.03958 15 8.83333C15 8.62708 14.9156 8.43333 14.7688 8.28958L9.26875 3.03958C8.96875 2.75208 8.49375 2.76458 8.20937 3.06458C7.925 3.36458 7.93437 3.83958 8.23438 4.12395L12.3781 8.08333H1.75C1.33437 8.08333 1 8.4177 1 8.83333C1 9.24895 1.33437 9.58333 1.75 9.58333H12.3781L8.23125 13.5396C7.93125 13.8271 7.92188 14.299 8.20625 14.599C8.49063 14.899 8.96562 14.9083 9.26562 14.624L14.7656 9.37395L14.7688 9.37708Z' fill='%23fcf860'/></svg>"); */
}

/* --- HOVER (yellow pill, black icons) --- */
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--brand-yellow) !important;
  color: var(--brand-black)!important;
  border-color: var(--brand-yellow)!important;

  /* background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'><path d='M1 3.0835C1 2.39287 1.55937 1.8335 2.25 1.8335H3.75C4.44062 1.8335 5 2.39287 5 3.0835V4.5835C5 5.27412 4.44062 5.8335 3.75 5.8335H2.25C1.55937 5.8335 1 5.27412 1 4.5835V3.0835ZM1 8.0835C1 7.39287 1.55937 6.8335 2.25 6.8335H3.75C4.44062 6.8335 5 7.39287 5 8.0835V9.5835C5 10.2741 4.44062 10.8335 3.75 10.8335H2.25C1.55937 10.8335 1 10.2741 1 9.5835V8.0835ZM5 13.0835V14.5835C5 15.2741 4.44062 15.8335 3.75 15.8335H2.25C1.55937 15.8335 1 15.2741 1 14.5835V13.0835C1 12.3929 1.55937 11.8335 2.25 11.8335H3.75C4.44062 11.8335 5 12.3929 5 13.0835ZM6 3.0835C6 2.39287 6.55937 1.8335 7.25 1.8335H8.75C9.44063 1.8335 10 2.39287 10 3.0835V4.5835C10 5.27412 9.44063 5.8335 8.75 5.8335H7.25C6.55937 5.8335 6 5.27412 6 4.5835V3.0835ZM10 8.0835V9.5835C10 10.2741 9.44063 10.8335 8.75 10.8335H7.25C6.55937 10.8335 6 10.2741 6 9.5835V8.0835C6 7.39287 6.55937 6.8335 7.25 6.8335H8.75C9.44063 6.8335 10 7.39287 10 8.0835ZM6 13.0835C6 12.3929 6.55937 11.8335 7.25 11.8335H8.75C9.44063 11.8335 10 12.3929 10 13.0835V14.5835C10 15.2741 9.44063 15.8335 8.75 15.8335H7.25C6.55937 15.8335 6 15.2741 6 14.5835V13.0835ZM15 3.0835V4.5835C15 5.27412 14.4406 5.8335 13.75 5.8335H12.25C11.5594 5.8335 11 5.27412 11 4.5835V3.0835C11 2.39287 11.5594 1.8335 12.25 1.8335H13.75C14.4406 1.8335 15 2.39287 15 3.0835ZM11 8.0835C11 7.39287 11.5594 6.8335 12.25 6.8335H13.75C14.4406 6.8335 15 7.39287 15 8.0835V9.5835C15 10.2741 14.4406 10.8335 13.75 10.8335H12.25C11.5594 10.8335 11 10.2741 11 9.5835V8.0835ZM15 13.0835V14.5835C15 15.2741 14.4406 15.8335 13.75 15.8335H12.25C11.5594 15.8335 11 15.2741 11 14.5835V13.0835C11 12.3929 11.5594 11.8335 12.25 11.8335H13.75C14.4406 11.8335 15 12.3929 15 13.0835Z' fill='%231D1D1D'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none' ><path d='M14.7688 9.37708C14.9156 9.23645 15 9.03958 15 8.83333C15 8.62708 14.9156 8.43333 14.7688 8.28958L9.26875 3.03958C8.96875 2.75208 8.49375 2.76458 8.20937 3.06458C7.925 3.36458 7.93437 3.83958 8.23438 4.12395L12.3781 8.08333H1.75C1.33437 8.08333 1 8.4177 1 8.83333C1 9.24895 1.33437 9.58333 1.75 9.58333H12.3781L8.23125 13.5396C7.93125 13.8271 7.92188 14.299 8.20625 14.599C8.49063 14.899 8.96562 14.9083 9.26562 14.624L14.7656 9.37395L14.7688 9.37708Z' fill='%231D1D1D'/></svg>"); */
}

.btn-primary:active,
.btn-primary.is-pressed,
.btn-primary[aria-pressed="true"]
.btn-primary:focus-visible{
  /* keep black pill + yellow text/icons */
  background-color: var(--brand-black) !important;
  color: var(--brand-yellow) !important;
  border-color: var(--brand-black) !important;

  /* double white ring with a thin black gap between */
  box-shadow:
    0 0 0 2px #fff,                  /* inner white ring */
    0 0 0 4px var(--brand-black),    /* separator (matches pill) */
    0 0 0 6px #fff;                  /* outer white ring */
}


.btn.btn-secondary
{
  padding-left: 42px;                    /* space for dots */
  padding-right: 40px;                   /* space for arrow */
  background-repeat: no-repeat, no-repeat;
  /* background-position: 16px center, calc(100% - 16px) center; */
  background-size: 16px 17px, 18px 12px; /* your dots size, shorter arrow */
}

.btn.btn-secondary
{
  background-color: var(--brand-buff)!important;
  color: var(--brand-black)!important;
  border-color: var(--brand-black)!important;

  /* background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'><path d='M1 3.0835C1 2.39287 1.55937 1.8335 2.25 1.8335H3.75C4.44062 1.8335 5 2.39287 5 3.0835V4.5835C5 5.27412 4.44062 5.8335 3.75 5.8335H2.25C1.55937 5.8335 1 5.27412 1 4.5835V3.0835ZM1 8.0835C1 7.39287 1.55937 6.8335 2.25 6.8335H3.75C4.44062 6.8335 5 7.39287 5 8.0835V9.5835C5 10.2741 4.44062 10.8335 3.75 10.8335H2.25C1.55937 10.8335 1 10.2741 1 9.5835V8.0835ZM5 13.0835V14.5835C5 15.2741 4.44062 15.8335 3.75 15.8335H2.25C1.55937 15.8335 1 15.2741 1 14.5835V13.0835C1 12.3929 1.55937 11.8335 2.25 11.8335H3.75C4.44062 11.8335 5 12.3929 5 13.0835ZM6 3.0835C6 2.39287 6.55937 1.8335 7.25 1.8335H8.75C9.44063 1.8335 10 2.39287 10 3.0835V4.5835C10 5.27412 9.44063 5.8335 8.75 5.8335H7.25C6.55937 5.8335 6 5.27412 6 4.5835V3.0835ZM10 8.0835V9.5835C10 10.2741 9.44063 10.8335 8.75 10.8335H7.25C6.55937 10.8335 6 10.2741 6 9.5835V8.0835C6 7.39287 6.55937 6.8335 7.25 6.8335H8.75C9.44063 6.8335 10 7.39287 10 8.0835ZM6 13.0835C6 12.3929 6.55937 11.8335 7.25 11.8335H8.75C9.44063 11.8335 10 12.3929 10 13.0835V14.5835C10 15.2741 9.44063 15.8335 8.75 15.8335H7.25C6.55937 15.8335 6 15.2741 6 14.5835V13.0835ZM15 3.0835V4.5835C15 5.27412 14.4406 5.8335 13.75 5.8335H12.25C11.5594 5.8335 11 5.27412 11 4.5835V3.0835C11 2.39287 11.5594 1.8335 12.25 1.8335H13.75C14.4406 1.8335 15 2.39287 15 3.0835ZM11 8.0835C11 7.39287 11.5594 6.8335 12.25 6.8335H13.75C14.4406 6.8335 15 7.39287 15 8.0835V9.5835C15 10.2741 14.4406 10.8335 13.75 10.8335H12.25C11.5594 10.8335 11 10.2741 11 9.5835V8.0835ZM15 13.0835V14.5835C15 15.2741 14.4406 15.8335 13.75 15.8335H12.25C11.5594 15.8335 11 15.2741 11 14.5835V13.0835C11 12.3929 11.5594 11.8335 12.25 11.8335H13.75C14.4406 11.8335 15 12.3929 15 13.0835Z' fill='%231d1d1d'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none' ><path d='M14.7688 9.37708C14.9156 9.23645 15 9.03958 15 8.83333C15 8.62708 14.9156 8.43333 14.7688 8.28958L9.26875 3.03958C8.96875 2.75208 8.49375 2.76458 8.20937 3.06458C7.925 3.36458 7.93437 3.83958 8.23438 4.12395L12.3781 8.08333H1.75C1.33437 8.08333 1 8.4177 1 8.83333C1 9.24895 1.33437 9.58333 1.75 9.58333H12.3781L8.23125 13.5396C7.93125 13.8271 7.92188 14.299 8.20625 14.599C8.49063 14.899 8.96562 14.9083 9.26562 14.624L14.7656 9.37395L14.7688 9.37708Z' fill='%231d1d1d'/></svg>"); */
}

/* --- HOVER (yellow pill, black icons) --- */
.btn.btn-secondary:hover
{
  background-color: var(--brand-black) !important;
  color: var(--brand-yellow)!important;
  border-color: var(--brand-black)!important;

  /* background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'><path d='M1 3.0835C1 2.39287 1.55937 1.8335 2.25 1.8335H3.75C4.44062 1.8335 5 2.39287 5 3.0835V4.5835C5 5.27412 4.44062 5.8335 3.75 5.8335H2.25C1.55937 5.8335 1 5.27412 1 4.5835V3.0835ZM1 8.0835C1 7.39287 1.55937 6.8335 2.25 6.8335H3.75C4.44062 6.8335 5 7.39287 5 8.0835V9.5835C5 10.2741 4.44062 10.8335 3.75 10.8335H2.25C1.55937 10.8335 1 10.2741 1 9.5835V8.0835ZM5 13.0835V14.5835C5 15.2741 4.44062 15.8335 3.75 15.8335H2.25C1.55937 15.8335 1 15.2741 1 14.5835V13.0835C1 12.3929 1.55937 11.8335 2.25 11.8335H3.75C4.44062 11.8335 5 12.3929 5 13.0835ZM6 3.0835C6 2.39287 6.55937 1.8335 7.25 1.8335H8.75C9.44063 1.8335 10 2.39287 10 3.0835V4.5835C10 5.27412 9.44063 5.8335 8.75 5.8335H7.25C6.55937 5.8335 6 5.27412 6 4.5835V3.0835ZM10 8.0835V9.5835C10 10.2741 9.44063 10.8335 8.75 10.8335H7.25C6.55937 10.8335 6 10.2741 6 9.5835V8.0835C6 7.39287 6.55937 6.8335 7.25 6.8335H8.75C9.44063 6.8335 10 7.39287 10 8.0835ZM6 13.0835C6 12.3929 6.55937 11.8335 7.25 11.8335H8.75C9.44063 11.8335 10 12.3929 10 13.0835V14.5835C10 15.2741 9.44063 15.8335 8.75 15.8335H7.25C6.55937 15.8335 6 15.2741 6 14.5835V13.0835ZM15 3.0835V4.5835C15 5.27412 14.4406 5.8335 13.75 5.8335H12.25C11.5594 5.8335 11 5.27412 11 4.5835V3.0835C11 2.39287 11.5594 1.8335 12.25 1.8335H13.75C14.4406 1.8335 15 2.39287 15 3.0835ZM11 8.0835C11 7.39287 11.5594 6.8335 12.25 6.8335H13.75C14.4406 6.8335 15 7.39287 15 8.0835V9.5835C15 10.2741 14.4406 10.8335 13.75 10.8335H12.25C11.5594 10.8335 11 10.2741 11 9.5835V8.0835ZM15 13.0835V14.5835C15 15.2741 14.4406 15.8335 13.75 15.8335H12.25C11.5594 15.8335 11 15.2741 11 14.5835V13.0835C11 12.3929 11.5594 11.8335 12.25 11.8335H13.75C14.4406 11.8335 15 12.3929 15 13.0835Z' fill='%23fcf860'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none' ><path d='M14.7688 9.37708C14.9156 9.23645 15 9.03958 15 8.83333C15 8.62708 14.9156 8.43333 14.7688 8.28958L9.26875 3.03958C8.96875 2.75208 8.49375 2.76458 8.20937 3.06458C7.925 3.36458 7.93437 3.83958 8.23438 4.12395L12.3781 8.08333H1.75C1.33437 8.08333 1 8.4177 1 8.83333C1 9.24895 1.33437 9.58333 1.75 9.58333H12.3781L8.23125 13.5396C7.93125 13.8271 7.92188 14.299 8.20625 14.599C8.49063 14.899 8.96562 14.9083 9.26562 14.624L14.7656 9.37395L14.7688 9.37708Z' fill='%23fcf860'/></svg>"); */
}

.btn.btn-default.previous
{
  padding-left: 42px;                    /* space for dots */
  padding-right: 40px;                   /* space for arrow */
  background-repeat: no-repeat, no-repeat;
  background-position: 16px center, calc(100% - 16px) center;
  background-size: 16px 17px, 18px 12px; /* your dots size, shorter arrow */
}

.btn.btn-default.previous
{
  background-color: var(--brand-buff)!important;
  color: var(--brand-black)!important;
  border-color: var(--brand-black)!important;

  /* background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'><path d='M1 3.0835C1 2.39287 1.55937 1.8335 2.25 1.8335H3.75C4.44062 1.8335 5 2.39287 5 3.0835V4.5835C5 5.27412 4.44062 5.8335 3.75 5.8335H2.25C1.55937 5.8335 1 5.27412 1 4.5835V3.0835ZM1 8.0835C1 7.39287 1.55937 6.8335 2.25 6.8335H3.75C4.44062 6.8335 5 7.39287 5 8.0835V9.5835C5 10.2741 4.44062 10.8335 3.75 10.8335H2.25C1.55937 10.8335 1 10.2741 1 9.5835V8.0835ZM5 13.0835V14.5835C5 15.2741 4.44062 15.8335 3.75 15.8335H2.25C1.55937 15.8335 1 15.2741 1 14.5835V13.0835C1 12.3929 1.55937 11.8335 2.25 11.8335H3.75C4.44062 11.8335 5 12.3929 5 13.0835ZM6 3.0835C6 2.39287 6.55937 1.8335 7.25 1.8335H8.75C9.44063 1.8335 10 2.39287 10 3.0835V4.5835C10 5.27412 9.44063 5.8335 8.75 5.8335H7.25C6.55937 5.8335 6 5.27412 6 4.5835V3.0835ZM10 8.0835V9.5835C10 10.2741 9.44063 10.8335 8.75 10.8335H7.25C6.55937 10.8335 6 10.2741 6 9.5835V8.0835C6 7.39287 6.55937 6.8335 7.25 6.8335H8.75C9.44063 6.8335 10 7.39287 10 8.0835ZM6 13.0835C6 12.3929 6.55937 11.8335 7.25 11.8335H8.75C9.44063 11.8335 10 12.3929 10 13.0835V14.5835C10 15.2741 9.44063 15.8335 8.75 15.8335H7.25C6.55937 15.8335 6 15.2741 6 14.5835V13.0835ZM15 3.0835V4.5835C15 5.27412 14.4406 5.8335 13.75 5.8335H12.25C11.5594 5.8335 11 5.27412 11 4.5835V3.0835C11 2.39287 11.5594 1.8335 12.25 1.8335H13.75C14.4406 1.8335 15 2.39287 15 3.0835ZM11 8.0835C11 7.39287 11.5594 6.8335 12.25 6.8335H13.75C14.4406 6.8335 15 7.39287 15 8.0835V9.5835C15 10.2741 14.4406 10.8335 13.75 10.8335H12.25C11.5594 10.8335 11 10.2741 11 9.5835V8.0835ZM15 13.0835V14.5835C15 15.2741 14.4406 15.8335 13.75 15.8335H12.25C11.5594 15.8335 11 15.2741 11 14.5835V13.0835C11 12.3929 11.5594 11.8335 12.25 11.8335H13.75C14.4406 11.8335 15 12.3929 15 13.0835Z' fill='%231d1d1d'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none' ><path d='M14.7688 9.37708C14.9156 9.23645 15 9.03958 15 8.83333C15 8.62708 14.9156 8.43333 14.7688 8.28958L9.26875 3.03958C8.96875 2.75208 8.49375 2.76458 8.20937 3.06458C7.925 3.36458 7.93437 3.83958 8.23438 4.12395L12.3781 8.08333H1.75C1.33437 8.08333 1 8.4177 1 8.83333C1 9.24895 1.33437 9.58333 1.75 9.58333H12.3781L8.23125 13.5396C7.93125 13.8271 7.92188 14.299 8.20625 14.599C8.49063 14.899 8.96562 14.9083 9.26562 14.624L14.7656 9.37395L14.7688 9.37708Z' fill='%231d1d1d'/></svg>"); */
}

/* --- HOVER (yellow pill, black icons) --- */
.btn.btn-default.previous:hover
{
  background-color: var(--brand-black) !important;
  color: var(--brand-yellow)!important;
  border-color: var(--brand-black)!important;

  /* background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'><path d='M1 3.0835C1 2.39287 1.55937 1.8335 2.25 1.8335H3.75C4.44062 1.8335 5 2.39287 5 3.0835V4.5835C5 5.27412 4.44062 5.8335 3.75 5.8335H2.25C1.55937 5.8335 1 5.27412 1 4.5835V3.0835ZM1 8.0835C1 7.39287 1.55937 6.8335 2.25 6.8335H3.75C4.44062 6.8335 5 7.39287 5 8.0835V9.5835C5 10.2741 4.44062 10.8335 3.75 10.8335H2.25C1.55937 10.8335 1 10.2741 1 9.5835V8.0835ZM5 13.0835V14.5835C5 15.2741 4.44062 15.8335 3.75 15.8335H2.25C1.55937 15.8335 1 15.2741 1 14.5835V13.0835C1 12.3929 1.55937 11.8335 2.25 11.8335H3.75C4.44062 11.8335 5 12.3929 5 13.0835ZM6 3.0835C6 2.39287 6.55937 1.8335 7.25 1.8335H8.75C9.44063 1.8335 10 2.39287 10 3.0835V4.5835C10 5.27412 9.44063 5.8335 8.75 5.8335H7.25C6.55937 5.8335 6 5.27412 6 4.5835V3.0835ZM10 8.0835V9.5835C10 10.2741 9.44063 10.8335 8.75 10.8335H7.25C6.55937 10.8335 6 10.2741 6 9.5835V8.0835C6 7.39287 6.55937 6.8335 7.25 6.8335H8.75C9.44063 6.8335 10 7.39287 10 8.0835ZM6 13.0835C6 12.3929 6.55937 11.8335 7.25 11.8335H8.75C9.44063 11.8335 10 12.3929 10 13.0835V14.5835C10 15.2741 9.44063 15.8335 8.75 15.8335H7.25C6.55937 15.8335 6 15.2741 6 14.5835V13.0835ZM15 3.0835V4.5835C15 5.27412 14.4406 5.8335 13.75 5.8335H12.25C11.5594 5.8335 11 5.27412 11 4.5835V3.0835C11 2.39287 11.5594 1.8335 12.25 1.8335H13.75C14.4406 1.8335 15 2.39287 15 3.0835ZM11 8.0835C11 7.39287 11.5594 6.8335 12.25 6.8335H13.75C14.4406 6.8335 15 7.39287 15 8.0835V9.5835C15 10.2741 14.4406 10.8335 13.75 10.8335H12.25C11.5594 10.8335 11 10.2741 11 9.5835V8.0835ZM15 13.0835V14.5835C15 15.2741 14.4406 15.8335 13.75 15.8335H12.25C11.5594 15.8335 11 15.2741 11 14.5835V13.0835C11 12.3929 11.5594 11.8335 12.25 11.8335H13.75C14.4406 11.8335 15 12.3929 15 13.0835Z' fill='%23fcf860'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none' ><path d='M14.7688 9.37708C14.9156 9.23645 15 9.03958 15 8.83333C15 8.62708 14.9156 8.43333 14.7688 8.28958L9.26875 3.03958C8.96875 2.75208 8.49375 2.76458 8.20937 3.06458C7.925 3.36458 7.93437 3.83958 8.23438 4.12395L12.3781 8.08333H1.75C1.33437 8.08333 1 8.4177 1 8.83333C1 9.24895 1.33437 9.58333 1.75 9.58333H12.3781L8.23125 13.5396C7.93125 13.8271 7.92188 14.299 8.20625 14.599C8.49063 14.899 8.96562 14.9083 9.26562 14.624L14.7656 9.37395L14.7688 9.37708Z' fill='%23fcf860'/></svg>"); */
}

.form-control:focus {
  border-color: var(--brand-black);
  outline: 0;
  box-shadow: var(--shadow-sm);
}


.btn-info:focus,
.btn-info.focus {
  color: var(var(--brand-black));
  background-color: var(--brand-yellow);
  border-color: var(var(--brand-black));
}

.dropdown-menu {
  background-color: var(--brand-yellow);
  border: 1px solid var(--brand-black);
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {

  background-color: var(--brand-yellow);
  color: #ffffff;
}

a,
.a {
  color: var(--brand-black);
  font-family: var(--primary-font-family);
}