/* maroon main nav */

.drop-holder {
    background: #9e1e46;
}

#header {
    background: #9e1e46;
}

.main-menu > ul > li .opener {
    color: #fff;
}

.main-menu > ul > li > a {
    color: #FFF;
}

    .main-menu .main-title {
        color:#FFF;

    }

/* mobile first */


.red-boxes, .content-info .red-boxes {
    top: 0px;
}

.description .title {
    text-align: center;
  	padding:6px;
}

.stcc-works .add-content {
    padding-top: 10px;
}

.red-boxes-holder:after {
    background: #faf2db;
}

.add-container {
    padding: 10px 20px 0px 20px;
}

.nav-opener:hover:before, .nav-opener:hover:after, .nav-opener:hover span {
    background: #FFF !important;
}

.search-opener {
    color: #FFF;
}

@media (max-width: 1023px) {
    .nav-active #header {
        background:#9e1e46;
    }
}

.sub-menu > ul > li > a {
    color:#FFF;
}

.nav-heading {
    color: #f5f1b4;
  	text-transform: uppercase;
}

.nav-heading-parent a {
    color: #FFF;
}

.nav-opener:before, .nav-opener:after {
    background: #FFF !important;
}

.nav-opener span {
    background: #FFF !important;
}

span.add-title {
    color: #FFF;
}

/*li.has-drop-down.active-item.main-title li.has-drop-down.active-item.add-title{
    color: #f1eb90;
}*/



.top-panel {
    background: #fcf8ec;
}

    .main-menu > ul > li:hover > a .main-title, .main-menu > ul > li:hover > a .add-title {
        color:#F5F1B4;
      transition:none
    }
 

/* main menu drop downs possible colors #ebe3c8, #f9f2db, #fcf8ec, #FFF*/

.sub-menu.slide.has-three.js-slide-hidden {
    background-color:#fcf8ec;
}

.sub-menu.slide.js-slide-hidden {
    background-color:#fcf8ec;
}

  @media (min-width: 1024px){
  .nav-heading {
    color:#9e1e46;
}

      .sub-menu > ul > li > a {
        color:#000;
    }
      .nav-heading-parent a {
    color:#9e1e46;
}
  }
  

  .nav-heading-parent:hover {
    color:#FFF;
}
  .nav-heading-parent a:hover {
	background: #891d3b;
  color: #fff;
}
}



      @media (min-width: 1024px) {
       /* .main-menu > ul > li.hover > a, .main-menu > ul > li:hover > a, .main-menu > ul > li.active > a {
          color: #f1eb90; } */}




    .description {
        background: #f9f2db;
    }
#mycarousel {
    margin-bottom: 0px;
}

.description .title {
    text-shadow: none;
}

div#mycarousel:hover {
    border: none;
}



/* top navigation new colors possible colors #ebe3c8, #f9f2db, #fcf8ec, #FFF*/

@media (min-width: 1024px) {
    .sub-etools {
        background: #fcf8ec;
    }
}

@media (min-width: 1024px) {
    .sub-etools > ul a {
        color: #000;
    }
}

@media (min-width: 1024px) {
    .etools-menu > ul > li.active-item > a:after {
        color: #000;
    }
}



/* main nav drop down link hover function*/

@media (min-width: 1024px) {
    .sub-menu > ul > li.hover > a, .sub-menu > ul > li:hover > a {
        color: #891d3b;
        background: #fcf8ec;
    }
  
  .nav-heading {
    color: #886F30;
}
  .nav-heading-parent a {
    color: #000;
}

.nav-heading-parent a:hover {
    background: none;
    color: #9e1e46;
}
  .nav-heading-parent:hover {
    background: none;
}
}

/* main nav drop down header colors*/

@media (min-width: 1024px) {
    .etools-menu > ul > li.active-item > a {
        color: #000;
        background:#E2D9B6;
    }
}

@media (min-width: 1024px) {
    .sub-etools > ul a.hover, .sub-etools > ul a:hover {
        color: #9e1e46;
        background:#fcf8ec;
    }
}

/*Ready to take next step gaps and background */


#wrapper {
    padding-bottom: 0px;
}


@media (min-width: 1024px) {
    .stcc-works {
        top: 0px;
    }
}

.stcc-works {
    background-size:contain;
}

@media (min-width: 1024px) {
    .stcc-works .add-content {
        padding-top: 36px;
        padding-bottom: 20px;
    }
}

.content-info .btn-primary:hover, .btn-primary:hover {
    background:#f9f2db;
}

@media (min-width: 1200px) {
    .red-boxes .title, .content-info .red-boxes .title {
        font-size: 25px;
    }
}



        
        @media (min-width: 1024px) {
  .top-panel {
      background: #ebe3c8;
  }
          
          .search-opener {
    color: #706346;
}
          
          .search-opener:hover {
    color: #000;
}
          
          .red-boxes, .content-info .red-boxes {
        padding-top: 0px;
            padding-bottom: 20px;
    }
        .add-container {
            padding: 10px 20px 20px 20px;
        }
}

        
        @media (max-width: 1023px) {
    .search-opener {
        background: #9e1e46;
    }
}

#hero-tablet-image img{
  width:100%;
    height:auto;
}

li.nav-heading {
    font-weight: 700;
}

.description {
    background: #faf2db;
  	padding-top: 30px;
}

#hero-mobile-image img{
  width:100%;
    height:auto;
}
        
        
        
        /* video styling*/

/* Container */
.hero {
  position: relative;
  width: 100%;
  height: auto; /* Full screen height (or use min-height) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #ffffff;
}

/* Background Video */
.hero-video {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video scales without distorting aspect ratio */
  z-index: 1;
  pointer-events: none; /* Allows user clicks to pass through to content */
}

/* Dark Overlay for Text Readability */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Adjust opacity (0.4) for contrast */
  z-index: 2;
}

/* Content Layer */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
}

/* Accessibility: Turn off video for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
  .hero {
    background: url('') center/cover no-repeat;
  }
}


/* Hide video on mobile phones */

/* Hide all hero versions by default */
#hero-mobile-image,
#hero-tablet-image,
.hero {
    display: none !important;
}

/* Desktop: 621px and above */
@media screen and (min-width: 621px) {
    .hero {
        display: block !important;
    }
}

/* Tablet: 426px–620px */
@media screen and (min-width: 426px) and (max-width: 620px) {
    #hero-tablet-image {
        display: block !important;
    }
}

/* Mobile: 425px and below */
@media screen and (max-width: 425px) {
    #hero-mobile-image {
        display: block !important;
    }
}

/* final mission padding */
  .description  {
    padding-top:15px;
  }
  .description .title {
    text-transform: none;
  }

/* Mobile and tablet mission padding */
@media screen and (max-width: 1024px) { 
  .description  {
    padding-top:10px;
  }
}