:root {
    --primary-color: #0033A0;
    --secondary-color: #D64309;
    --top-banner-bg-color: #D64309; /*NEW*/
    --accent-color: #E4f6ff; /*NEW*/
    --topic-menu-bg-color-hover: #F0F0F0; /*NEW*/
    /* LINK COLORS */
    --primary-links-color-hover: #D64309;
    --secondary-links-color-hover: #D64309;
    --footer-link-color: #fff;
    --footer-link-color-hover: #b3c8ff;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #0033A0; /*NEW*/
    --primary-button-color-hover: #002E47;
    --primary-button-text-color: #FEFEFE; /*NEW*/
    --primary-button-text-color-hover: #FEFEFE; /*NEW*/
    --primary-button-border-color: #0033A0; /*NEW*/
    --primary-button-border-color-hover: #002E47; /*NEW*/
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #0033A0; /*NEW*/
    --secondary-button-text-color-hover: #FEFEFE; /*NEW*/
    --secondary-button-border-color: #0033A0; /*NEW*/
    --secondary-button-border-color-hover: #0033A0; /*NEW*/
    /* NAVIGATION COLORS */
    --nav-bg-color: #0033A0; /*NEW*/
    --nav-tab-color: #FEFEFE; /*NEW*/
    --nav-tab-color-hover: #C8C9C7; /*NEW*/
    --nav-link-color: #0033A0;
    --nav-link-color-hover: #D64309;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #0033A0;
    --bg-color-2: #0033A0;
    --bg-color-3: #D64309;
    /* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
    --rgba-color-1: rgb(6 147 178 / .5);
    --rgba-color-2: rgb(212 128 0 / .5);
    --rgba-color-3: rgb(145 197 0 / .5);
    /* FONT FAMILY */
    --font-family-heading: 'Gotham-Bold', sans-serif;
    --font-family-body: 'Gotham-Book', 'Roboto', sans-serif;
    /*BUTTONS*/
    --button-radius: 0;
    /*BORDER RADIUS*/
    --border-radius-sm: 0;
    --border-radius-md: 0;
    --border-radius-lg: 0;
    /*FOOTER COLOR*/
    --footer-font-color: #0033A0;
}

.home-announcements h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25rem;
}
.product-feature h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25rem;
}
   
a:hover {
      text-decoration: underline !important;
    }

a.button:focus,a.button:hover {
      text-decoration: underline !important;
    }



.retail-price ~ .product-price {
     color: #D64309 !important;
}

.on-sale {
border-color: #D64309 !important;

}

.new {
    border-color: #0033A0  !important;
}

.additional-colors {
    border-color: #97999B !important;
}


.caption .button.hollow,
.caption .button.hollow.disabled,
.caption .button.hollow.disabled:focus,
.caption .button.hollow.disabled:hover,
.caption .button.hollow[disabled],
.caption .button.hollow[disabled]:focus,
.caption .button.hollow[disabled]:hover {
    border: 2px solid #FFF;
    color: #FFF;
}

footer .open-text {
    color: #FF8501;
}

span#also-bought-heading {
    color: #fff;
}

/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 64em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR X-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 75em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR XX-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 90em) {
}



.countdown {
  font-size: 2rem;
}

#timer span {
  font-weight: bold;
  color: #D64309;
}

.chart-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  height: 350px;
  padding-bottom: 20px;
  max-width: 100%;
  white-space: nowrap; /* 🔥 This is what actually prevents wrapping */
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  flex-shrink: 0;
  min-width: 80px;
}

.bar {
      width: 100%;
      background-color: #007BC1;
      border-radius: 5px 5px 0 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      color: white;
      font-size: 14px;
      padding-bottom: 5px;
      transition: height 0.3s ease;
      min-height: 30px;
      box-sizing: border-box;
    }

.ialabel {
  margin-top: 8px;
  font-size: 0.85em;
  text-align: center;
  width: 100%;
  height: 2.5em; /* Fixed height for label */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* Prevent line breaks in labels */
}

.ialabel span {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  font-size: 0.85em;
  text-align: center;
  transform-origin: left center;
  transform: scale(1);
}

/* Auto-shrink long labels using scale */
.ialabel span {
  font-size: 1em;
  text-align: center;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-container::-webkit-scrollbar {
  height: 8px;
}
.chart-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.chart-container::-webkit-scrollbar-track {
  background: #f0f0f0;
}

    /* Responsive scaling */
    @media (max-width: 600px) {
      .bar-group {
        width: 60px;
      }

      .ialabel {
        font-size: 0.75em;
      }
    }

.container {
      max-width: 960px;
      margin: 0 auto;
      padding: 2rem;
      background: #fff;

          a {
      color: #005ea2;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    .contact {
      background: #eef4fa;
      padding: 1rem;
      border-left: 5px solid #003366;
      margin-top: 2rem;
    }
    .screenshot {
      background: #f0f0f0;
      padding: 1rem;
      margin: 1rem 0;
      border-left: 5px solid #999;

    }
}

.publisherc {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background: #fff;
  box-sizing: border-box;
}

.publisherc h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #003366;
}

.publisherc p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

/* Grid layout: 4 columns */
.grid-fixed-publisher {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Individual cards */
.card-publisher {
  background: #fff;
  border: 1px solid #ddd;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
  padding: 1rem;
}

.card-publisher:hover {
  transform: translateY(-4px);
}

.card-publisher a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card-publisher img {
  max-width: 100%;
  height: 80px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.card-pulbisher p {
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0;
}

/* 2 columns on medium screens */
@media (max-width: 960px) {
  .grid-fixed-publisher {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 column on small screens */
@media (max-width: 600px) {
  .grid-fixed-publisher {
    grid-template-columns: 1fr;
  }

  .card-publisher img {
    height: 60px;
  }
}




.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.support-card {
  text-align: center;
  padding: 1rem;
  border: 1px solid #eee;
  background: #f9f9f9;
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

.support-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

details {
  margin-bottom: 1rem;
  background: #f4f8fb;
  padding: 1rem;
  border-left: 4px solid #003300;
  border-radius: 4px;
}

.ia-faqs h3 {
  color: #003366;
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.ia-faqs p {
  margin-bottom: 1rem;
}


.captionsorangeow {
	position: absolute;
    left: .5rem;
	bottom: 2rem;
	width: calc(100% - 1rem);
	background: rgb(214,67,9);
	color: #fefefe;
	padding: 1rem;
	display: inline-block;
    outline: 1px solid #fefefe;
    outline-offset: -10px;
	font-size:h5;
}

.captionsblueow {
	position: absolute;
    left: .5rem;
	bottom: 2rem;
	width: calc(100% - 1rem);
	background: rgb(0,51,160);
	color: #fefefe !important;
	padding: 1rem;
	display: inline-block;
    outline: 1px solid #fefefe !important;
    outline-offset: -10px;
	font-size: .825rem;
}

.captionsblackow {
	position: absolute;
    left: .5rem;
	bottom: 2rem;
	width: calc(100% - 1rem);
	background: rgb(0,0,0);
	color: #fefefe;
	padding: 1rem;
	display: inline-block;
    outline: 1px solid #fefefe;
    outline-offset: -10px;
	font-size: .825rem;
}

.captionswhiteow {
	position: absolute;
    left: .5rem;
	bottom: 2rem;
	width: calc(100% - 1rem);
	background: #fefefe;
	color: #0033A0;
	padding: 1rem;
	display: inline-block;
    outline: 1px solid #0033A0;
    outline-offset: -10px;
	font-size: .825rem;
}

.captionsbuttononlyow {
	position: absolute;
    text-align: center;
	bottom: 2rem;
	width: calc(100% - 1rem);
	padding: 1rem;
}


.buttonblueow {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    padding: .85em 1em;
    border-radius: var(--button-radius);
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--primary-button-color);
    color: var(--primary-button-text-color);
    border: 1px solid var(--primary-button-border-color);
    -webkit-transition: background-color .25s ease-out, color .25s ease-out;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-family: inherit;
    font-size: .9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.buttonorangeow {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    padding: .85em 1em;
    border-radius: var(--button-radius);
    text-transform: uppercase;
    letter-spacing: .5px;
    -webkit-transition: background-color .25s ease-out, color .25s ease-out;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-family: inherit;
    font-size: .9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    
}

.buttonblackow {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    padding: .85em 1em;
    border-radius: var(--button-radius);
    text-transform: uppercase;
    letter-spacing: .5px;
    -webkit-transition: background-color .25s ease-out, color .25s ease-out;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-family: inherit;
    font-size: .9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.buttonwhiteow {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    padding: .85em 1em;
    border-radius: var(--button-radius);
    text-transform: uppercase;
    letter-spacing: .5px;
    -webkit-transition: background-color .25s ease-out, color .25s ease-out;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-family: inherit;
    font-size: .9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    font-weight: bolder;
}

.home-block a:after {
        display: block;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: none;
        content: ' ';
    }

a.buttonorangeow,
input.button {
   background: #D64309;
    color: var(--primary-button-text-color);
    border: 1px solid #D64309;
}

    .buttonorangeow:focus-visible,
    .buttonorangeow:focus,
    .buttonorangeow:hover,
    .buttonorangeow.primary:focus-visible,
    .buttonorangeow.primary:focus,
    .buttonorangeow.primary:hover,
    .caption .buttonorangeow.primary:focus-visible,
    .caption .buttonorangeow.primary:focus,
    .caption .buttonorangeow.primary:hover {
        background-color: var(--primary-button-color-hover);
        color: var(--primary-button-text-color-hover);
        border-color: var(--primary-button-border-color-hover);
    }

a.buttonblackow,
input.button {
    background: #000;
    color: var(--primary-button-text-color);
    border: 1px solid #000;
}

    .buttonblackow:focus-visible,
    .buttonblackow:focus,
    .buttonblackow:hover,
    .buttonblackow.primary:focus-visible,
    .buttonblackow.primary:focus,
    .buttonblackow.primary:hover,
    .caption .buttonblackow.primary:focus-visible,
    .caption .buttonblackow.primary:focus,
    .caption .buttonblackow.primary:hover {
            background: #fefefe;
            color: #0033A0;
            border: 1px solid var(--primary-button-border-color);
    }

a.buttonwhiteow,
input.button {
    background: #fefefe;
    color: #0033A0;
    border: 1px solid var(--primary-button-border-color);
}

    .buttonwhiteow:focus-visible,
    .buttonwhiteow:focus,
    .buttonwhiteow:hover,
    .buttonwhiteow.primary:focus-visible,
    .buttonwhiteow.primary:focus,
    .buttonwhiteow.primary:hover,
    .caption .buttonwhiteow.primary:focus-visible,
    .caption .buttonwhiteow.primary:focus,
    .caption .buttonwhiteow.primary:hover {
        background-color: var(--primary-button-color-hover);
        color: var(--primary-button-text-color-hover);
        border-color: var(--primary-button-border-color-hover);
    }


/* General styling for both desktop and mobile images */
.desktop-image, .mobile-image {
    position: relative;
    display: inline-block;
    width: 100%;  /* Ensure the container takes up full width */
    height: 100%;  /* Ensure the container takes up full height */
}

.desktop-image img, .mobile-image img {
    width: 100%;
    height: 100%;  /* Ensure the image fills its container's height */
    object-fit: cover;  /* Maintain aspect ratio while covering the entire container */
    display: block;
}

/* Desktop-specific styles */
.desktop-image {
    display: block;
    position: relative;
    width: 100%;
}

.desktop-image .captionsflankorangeow {
    position: absolute;
    top: 65%;  /* Space from the bottom of the image */
    max-width: 382px;
    max-height: 110px;
    text-align: center;
    background: rgb(214,67,9); /* Orange background */
    color: #fefefe; /* White text */
    display: inline-block;
    padding: 2.4rem 1.5rem 2.2rem 1.5rem;
    outline: 1px solid #fefefe; /* White outline */
    outline-offset: -20px;
    font-size: x-large;
    font-weight: bolder;
    box-shadow: none; /* Drop shadow for depth */
    text-shadow: none;
    transition: all 0.3s ease;
    font-family:'Gotham-Bold', sans-serif;
    translate: none;
    left: 0;
    right: 0;
    z-index: 10;
    line-height: 1.2;  /* Adjust line height for wrapping */

}

@media (max-width:1200px) {
   .desktop-image .captionsflankorangeow {
    padding: 1.6rem 1.5rem 2.9rem 1.5rem;
   }
}

.desktop-image .captionsflankbluebroncotecow {
    position: absolute;
    top: 65%;  /* Space from the bottom of the image */
    max-width: 382px;
    max-height: 110px;
    text-align: center;
    display: inline-block;
    padding: 3rem 3rem 3rem 3rem;
    background: #0033A0;
    translate: none;
    left: 0;
    right: 0;
    z-index: 10;
}

.caption-icon {
    object-fit: contain !important;
    aspect-ratio: auto !important;
    position:relative;
    left: -5px;
    right: 20px;
    bottom: 20px;
    top: -30px;
}

@media (max-width:1200px) {
   .desktop-image .caption-icon {
    position:relative;
    max-width: 350px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    left: -5px;
    right: 20px;
    bottom: 20px;
    top: -15px;
   }
}

/* Responsive styles */
@media (max-width: 999px) {
    .desktop-image {
        display: none; /* Hide desktop version on mobile */
    }

    .mobile-image {
        display: block;
    }

    .mobile-image img {
        width: 100%; /* Ensure mobile image takes up full width */
        object-fit: contain !important;
        height: auto;
        text-align: center;

    }
}

@media (min-width: 1000px) {
    .mobile-image {
        display: none; /* Hide mobile version on desktop */
    }
}

@media (max-width: 999px) {
    .desktop-image {
        display: none; /* Hide desktop version on mobile */
    }


    .mobile-image-catalog-block {
        display: block;
    }

    .mobile-image-catalog-block img {
        width: 100%; /* Ensure mobile image takes up full width */
        object-fit: contain !important;
        height: auto;
        text-align: center;

    }
}

@media (min-width: 1000px) {
    .mobile-image-catalog-block {
        display: none; /* Hide mobile version on desktop */
    }
}



.captionsbuttononlycatalogblockow {
	position: absolute;
    text-align: center;
    left: 27.5%;  /* Move to the center horizontally */
    transform: translateX(-50%); /* Offset by 50% of its own width to truly center */
	bottom: 2rem;
	width: calc(100% - 1rem);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}


.buttonbluecatalogblockow {
    vertical-align: middle;
    padding: 1em;
    border-radius: var(--button-radius);
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--primary-button-color);
    color: var(--primary-button-text-color);
    border: 1px solid var(--primary-button-border-color);
    -webkit-transition: background-color .25s ease-out, color .25s ease-out;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-family: inherit;
    font-size: .9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.buttonorangecatalogblockow {
    display: block !important;
    vertical-align: middle;
    padding: .85em 1em;
    border-radius: var(--button-radius);
    text-transform: uppercase;
    letter-spacing: .5px;
    -webkit-transition: background-color .25s ease-out, color .25s ease-out !important;
    transition: background-color .25s ease-out, color .25s ease-out !important;
    font-family: inherit;
    font-size: .9rem;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    white-space: normal;        /* ✅ Allow wrapping */
    word-break: break-word;     /* ✅ Prevent long words from breaking layout */
    box-sizing: border-box;     /* ✅ Respect padding and width */
    max-width: 100%;            /* ✅ Prevent overflow */
    min-height: 3em;
}

.buttonblackcatalogblockow {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    padding: .85em 1em;
    border-radius: var(--button-radius);
    text-transform: uppercase;
    letter-spacing: .5px;
    -webkit-transition: background-color .25s ease-out, color .25s ease-out;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-family: inherit;
    font-size: .9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.buttonwhitecatalogblockow {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    padding: .85em 1em;
    border-radius: var(--button-radius);
    text-transform: uppercase;
    letter-spacing: .5px;
    -webkit-transition: background-color .25s ease-out, color .25s ease-out;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-family: inherit;
    font-size: .9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    font-weight: bolder;
}

a.buttonorangecatalogblockow,
input.button {
   background: #D64309;
    color: var(--primary-button-text-color);
    border: 1px solid #D64309;
}

    .buttonorangeow:focus-visible,
    .buttonorangeow:focus,
    .buttonorangeow:hover,
    .buttonorangeow.primary:focus-visible,
    .buttonorangeow.primary:focus,
    .buttonorangeow.primary:hover,
    .caption .buttonorangeow.primary:focus-visible,
    .caption .buttonorangeow.primary:focus,
    .caption .buttonorangeow.primary:hover {
        background-color: var(--primary-button-color-hover);
        color: var(--primary-button-text-color-hover);
        border-color: var(--primary-button-border-color-hover);
    }

a.buttonblackcatalogblockow,
input.button {
    background: #000;
    color: var(--primary-button-text-color);
    border: 1px solid #000;
}

    .buttonblackow:focus-visible,
    .buttonblackow:focus,
    .buttonblackow:hover,
    .buttonblackow.primary:focus-visible,
    .buttonblackow.primary:focus,
    .buttonblackow.primary:hover,
    .caption .buttonblackow.primary:focus-visible,
    .caption .buttonblackow.primary:focus,
    .caption .buttonblackow.primary:hover {
            background: #fefefe;
            color: #0033A0;
            border: 1px solid var(--primary-button-border-color);
    }

a.buttonwhitecatalogblockow,
input.button {
    background: #fefefe;
    color: #0033A0;
    border: 1px solid var(--primary-button-border-color);
}

    .buttonwhiteow:focus-visible,
    .buttonwhiteow:focus,
    .buttonwhiteow:hover,
    .buttonwhiteow.primary:focus-visible,
    .buttonwhiteow.primary:focus,
    .buttonwhiteow.primary:hover,
    .caption .buttonwhiteow.primary:focus-visible,
    .caption .buttonwhiteow.primary:focus,
    .caption .buttonwhiteow.primary:hover {
        background-color: var(--primary-button-color-hover);
        color: var(--primary-button-text-color-hover);
        border-color: var(--primary-button-border-color-hover);
    }


    @media (max-width: 600px) {
    .buttonorangecatalogblockow {
        padding: 0.6em 0.8em;
        font-size: clamp(0.6rem, 2vw, 0.9rem);
    }
}


.team-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

.team-member {
    display: flex;
    align-items: center; /* Vertically center-align the content */
    background-color: white;
    border-radius: 10px;
    width: 100%;
    max-width: 1618px; /* Limit the max width of each container */
    margin: 20px 0;
    padding: 20px;
    text-align: left; /* Align text to the left */
}

.team-member-photo {
    flex-shrink: 0; /* Prevent the photo from shrinking */
    margin-right: 20px; /* Space between the photo and text */
}

.team-member-photo img {
    width: 200px; /* Rectangular width */
    height: 250px; /* Rectangular height */
    object-fit: cover; /* Ensure the image covers the area */
}

.team-member-details {
    flex: 1; /* Take up the remaining space */
}

.team-member-details h2 {
    font-weight: bolder;

}

.title {
    font-size: 1.1rem;
    color: #777;
    margin-bottom: 10px;
    font-weight: bolder;
}

.email {
    font-size: 1rem;
    color: #0033A0;
    text-decoration: none;
    font-weight: bolder;
}

.email:hover {
    text-decoration: underline;
}

.ask-me-about {
    width: 450px; /* Fixed width for Ask Me About section */
    margin-top: 20px;
}

.ask-me-about h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: bolder;
}

.ask-me-about ul {
    list-style-type: disc; /* Ensures default bullet points are used */
    margin-top: 0;

}

.ask-me-about li {
    font-size: 1rem;
    color: #555;
    margin-bottom: 5px;
    font-weight: bolder;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .team-member {
        flex-direction: column; /* Stack items vertically on small screens */
        text-align: center; /* Center-align the text */
    }

    .team-member-photo {
        margin-right: 0;
        margin-bottom: 20px; /* Space below the photo */
    }

    .ask-me-about {
        width: 100%; /* Allow the "Ask Me About" section to take full width */
        margin-left: 0;
    }

    .ask-me-about ul {
    list-style: none;
    margin-top: 0;
}
}

/* Container styling */
#new-employee-bundle {
    max-width: 1200px; /* or whatever matches your main container */
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    text-align: center !important;
}

#new-employee-bundle p {
    max-width: 85ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

/* Center headings */
#new-employee-bundle h1,
#new-employee-bundle h2,
#new-employee-bundle h3 {
  text-align: center !important;
}

/* Center images */
#new-employee-bundle img {
  display: block;
  margin: 0 auto !important;
  max-width: 100%;
  height: auto;
}

/* Lists: keep left aligned but scoped to this section */
#new-employee-bundle ul {
  display: inline-block;
  text-align: left !important;
  list-style-position: inside;
  padding-left: 0;
  margin: 0 auto 1.5em auto; /* center the block but keep list items left aligned */
}

/* Headings – Boise State Brand Style */
#new-employee-bundle h1,
#new-employee-bundle h2,
#new-employee-bundle h3 {
  text-align: center;
  font-weight: bold;
  color: #0033A0;               /* Boise State Blue */
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* Subtle accent line below headings */
#new-employee-bundle h2,
#new-employee-bundle h3 {
  position: relative;
}

#new-employee-bundle h2:after,
#new-employee-bundle h3:after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #D64309;    /* Boise State Orange */
  margin: 8px auto 0 auto;
  border-radius: 2px;
}

#club-colors-title h2:after,
#club-colors-title h3:after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #D64309;    /* Boise State Orange */
  margin: 8px auto 0 auto;
  border-radius: 2px;
}

.responsive.slick-slider.slick-dotted,
.responsive-feature.slick-slider.slick-dotted,
.responsive-popular.slick-slider.slick-dotted,
.announcement-feature.slick-slider.slick-dotted {
  height: 300px !important;
}

.looked-at-these{
  color:#FFF !important;
}

			#footer-store-info::before {
				box-shadow: 0 0 0 0 inset;
				content: " ";
				height: 100%;
				left: -10px;
				position: absolute;
				top: 0;
				width: 15px;
			}

			#footer-store-info::after {
				box-shadow: 0 0 0 0  inset;
				content: " ";
				height: 100%;
				position: absolute;
				top: 0;
				right: -15px;
				width: 15px;
      }
/* General Safari fixes for images */
.safari .desktop-image img,
.safari .mobile-image img,
.safari .mobile-image-catalog-block img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ----- LEFT FLANK ----- */
.safari .desktop-image.left-flank {
  position: relative;
  width: 100%;
  height: 400px;
  display: block;
}

.safari .caption-icon {
  display: block;
  max-width: 100%;
  max-height: 4rem;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  position: static;  /* Remove all positional offsets */
}

.safari .desktop-image.left-flank img{
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}

.safari .desktop-image.left-flank .captionsflankbluebroncotecow {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  padding: 0rem;
  background: #0033A0;
  color: #fefefe;
  font-weight: 700;
  text-align: center;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* LEFT FLANK mobile image */
.safari .mobile-image.left-flank {
  display: none;
}

/* ----- RIGHT FLANK ----- */
.safari .desktop-image.right-flank {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  display: block;
}

.safari .desktop-image.right-flank img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}

.safari .desktop-image.right-flank .captionsflankorangeow {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  padding: 2rem;
  background: rgb(214, 67, 9);
  color: #fefefe;
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
  z-index: 10;
  line-height: 1.2;
  font-family: 'Gotham-Bold', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* RIGHT FLANK mobile image */
.safari .mobile-image.right-flank {
  display: none;
}

/* ----- NIL IMAGE ----- */
.safari .desktop-image.nil-image {
  position: relative;
  width: 100%;
  height: auto; /* NIL banner varies in height */
  overflow: visible;
  display: block;
}

.safari .desktop-image.nil-image img {
  width: 100%;
  height: auto;
  object-fit: contain !important;
  display: block;
}

.safari .mobile-image.nil-image {
  display: none;
}

/* ----- SLIDESHOW ----- */
.safari .slider-wrapper,
.safari .slideshow {
  width: 100%;
  max-width: 794px; /* Keep slideshow max width */
  max-height: 450px;
  margin: 0 auto;
  position: relative;
}

.safari .slideshow .slide-item img {
  width: 100%;
  height: auto;
  object-fit: contain !important;
  display: block;
}

.safari .slideshow .captionsorangeowsafari1{
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: auto;
  max-width: 60%;
  background: rgb(214, 67, 9);
  color: #fefefe;
  font-weight: 700;
  padding: 1rem;
  font-family: 'Gotham-Bold', sans-serif;
  z-index: 10;
  box-sizing: border-box;
}

.safari .slideshow .safariocaption{
  background: rgb(214, 67, 9);
  color: #fefefe;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-family: 'Gotham-Bold', sans-serif;
  text-decoration: none;
  display: inline-block;
}

.safari .slideshow .captionsbuttononlyow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgb(214, 67, 9);
  color: #fefefe;
  font-family: 'Gotham-Bold', sans-serif;
  font-weight: 700;
  height: auto;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 10;

  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}


/* ----- CATALOG BLOCKS ----- */
.safari .desktop-image.catalog-block {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

.safari .desktop-image.catalog-block img {
  width: 100%;
  height: auto;
  object-fit: contain !important;
  display: block;
}

/* Catalog block caption button container */
.safari .desktop-image.catalog-block .captionsbuttononlycatalogblockow {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  text-align: center;
  z-index: 10;
}

/* Catalog block button */
.safari .desktop-image.catalog-block .buttonorangecatalogblockow {
  background: rgb(214, 67, 9);
  color: #fefefe;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-family: 'Gotham-Bold', sans-serif;
  text-decoration: none;
  display: inline-block;
}

/* Catalog block mobile image container */
.safari .mobile-image-catalog-block {
  display: none;
}

/* ----- MOBILE VIEWS ----- */
@media (max-width: 767px) {
  /* Hide desktop images */
  .safari .desktop-image.left-flank,
  .safari .desktop-image.right-flank,
  .safari .desktop-image.nil-image,
  .safari .desktop-image.catalog-block {
    display: none !important;
  }

  /* Show mobile images */
  .safari .mobile-image.left-flank,
  .safari .mobile-image.right-flank,
  .safari .mobile-image.nil-image {
    display: block !important;
  }

  .safari .mobile-image-catalog-block {
    display: block !important;
  }
}

/* Tablet / small desktops */
@media (max-width: 999px) {
  .safari .desktop-image.left-flank,
  .safari .desktop-image.right-flank,
  .safari .desktop-image.nil-image,
  .safari .desktop-image.catalog-block {
    display: none !important;
  }

  .safari .mobile-image.left-flank,
  .safari .mobile-image.right-flank,
  .safari .mobile-image.nil-image {
    display: block !important;
  }

  .safari .mobile-image-catalog-block {
    display: block !important;
  }
}

/* Large desktops: hide mobile */
@media (min-width: 1000px) {
  .safari .mobile-image.left-flank,
  .safari .mobile-image.right-flank,
  .safari .mobile-image.nil-image,
  .safari .mobile-image-catalog-block {
    display: none !important;
  }

  .safari .desktop-image.left-flank,
  .safari .desktop-image.right-flank,
  .safari .desktop-image.nil-image,
  .safari .desktop-image.catalog-block {
    display: block !important;
  }
}



/* Club Colors section */

.clubcolors-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
  font-family: inherit;
  color: inherit; /* inherit text color from site */
}

.clubcolors-banner {
  text-align: center;
  margin-bottom: 2rem;
}

.clubcolors-banner-image {
  max-width: 100%;
  height: auto;
}

.clubcolors-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: inherit; /* keep default text color */
}

.clubcolors-intro,
.clubcolors-paragraph,
.clubcolors-contact {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: inherit;
}

.clubcolors-subtitle {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: inherit;
  position: relative;
  padding-bottom: 0.5rem; /* space for the separator */
}

.clubcolors-title,
.clubcolors-subtitle {
  text-align: center;
  position: relative;
  padding-bottom: 0.5rem; /* space for the separator */
}

.clubcolors-subtitle::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #0033A0; /* Boise State Blue */
  margin: 8px auto 0 auto;
  border-radius: 2px;
}

.clubcolors-link {
  color: #D64309; /* Boise State orange */
  font-weight: 600;
  text-decoration: underline;
}

.clubcolors-link:hover,
.clubcolors-link:focus {
  color: #0033A0; /* Boise State blue accent on hover/focus */
  outline: none;
  text-decoration: none;
}