/*Dec-2025*/
 /* Annual report Styles */
 /**/
/* Tagged Header Styles */
.tagged-header {
  display: inline-block;
  padding: 0.675rem 1.5rem;
  background: #fff !important; /* Replace with the value of $black */
  border: 1px solid #8e6f3e;
  color:#555960 !important;
  letter-spacing: 2.8px;
  line-height: 1 !important;
  text-transform: uppercase;
  z-index:  1;
  position: relative; 
    }
 .tagged-header-container {
    position: relative;
    margin-bottom: 0 !important; 
   /*border-top: 2px solid #000; black is the default*/
    margin-left: 10px;
    line-height:1.5;
    margin-top: -35px;  
}

/* Skew effect for the background */
.tagged-header:before {
  position: absolute;
  top: -2px;
  left: -8px;
  height: 100%;
  content: "";
  background: inherit;
  border: inherit;
  z-index: -1;
  width: calc(100% + 17px);
  transform: skewX(-13deg);
  height: calc(100% + 4px);
}

/* program impact fonts and background colors*/
.prg-impact {
   font-family: United Sans; 
   font-weight: 500; /*medium*/
   /*font size would be the defaul=18px consider large*/
}
.prg-impact .prg-impact-gray {
    text-transform: uppercase;
    color: #555960; 
    font-weight: bold; 
}
.prg-impact .prg-impact-aged {
   text-transform: uppercase;
    color: #8e6f3e !important;   
    font-weight: bold; 
}
.bground-gold
{
    background-color: rgba(244, 234, 215, 0.6); 
    margin-bottom: 40px;
}
.bg-lt-gray {		 
    background-color: #e0e0e0;
    margin-bottom: 40px;
}
 
/* ///////////   /////////////// */
/****************** overlay on image *******************/
 /********/
/*********************** *********************/
/**********HEADING H2 AND P WHITE WITH IMAGE IN THE BACKGROUND*********/
 /********Apply overlay class to the image background to add contrast and make text readable.  ********/
 /***The text will be on the left or right column and it's full-width centered on mobile screens.  *******/
/******************  *******************/
 /***                               ****/
/******************  *******************/

.showcase {
  width: 100%;
  height: auto;  
  max-height: 650px; /* Set a max-height for the container */
  position: relative;
  color: white;
  text-align: right;
  overflow: hidden;
}
 
/**/

/* Parent wrapper to contain the image and overlay */
.image-overlay-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: 40px;
}

/* Image styling for responsive behavior */
.image-overlay-wrapper img {
 /* width: 100%;*/
  height: auto;
  display: block; /* Ensures no inline spaces affect layout */
  object-fit: cover; /* Maintains aspect ratio and ensures full coverage */
}


/*top heading */ 
/* subheading with a border in the banner*/
   .sub-heading-border { 
    font-family: "United Sans Condensed", Impact, "Arial Black", "sans-serif";
    font-size: min(5.5vw, 24px) !important;
    font-weight: 700 !important;
    letter-spacing: 7px;
    background-color: #cfb991;
    color:#555960;
    padding: 0;
    font-style: normal;
    font-weight:500;
    text-transform: uppercase !important;
    white-space: normal;
    text-align: center;
    width: 100%;
    word-wrap: break-word;
    margin-top: 5% !important; 
}
/* white sub-heading */
.sub-heading-border.sub-heading-white { 
    background-color: inherit !important;
    font-size: min(5.5vw, 1.2em) !important;
    letter-spacing: 3px;
    color:#fff;
    text-align: right; 
    margin-top: 0 !important; 
    padding: 0 important;
 }
/**/

.showcase h2 {
  margin-top: 20px !important;
  font-size: min(10vw, 5rem) !important;
  color: #fff !important;
  font-style: italic !important;
  /*font-weight: 700 !important;*/
  letter-spacing: 2px;
  line-height: 1 !important;
  width: 100%;
  text-align: center;
}

.showcase h2 .second-part {
  padding-left: 20%;  
}
/* small description of the article*/
 .credits {
  font-weight: 400;
  padding:.8rem 0;
}
/**/
.showcase .credits {
 /* margin-top: 8px;*/
  font-size: 1.2em;  
  font-size: min(5vw, 1.1em);  /* Make text responsive */
  margin-top: 2em;   
  text-align: right;
}
/* credits body will show on the body for very small screens*/ 
.credits-body {
  display:none; 
}

/**/
/* description on the top of the body of the page*/
.subheading-top{
  /* font-family: Source serif pro !important; 
   font-style: italic; */
   font-size: 1.25em;
   border-top: 1px solid #cfb991 ;
   border-bottom: 1px solid #cfb991 ;
   padding:1em 0;
   color:#52555B;
   font-weight: 500 !important;
}
/* */
/* Keyframes for sliding in for animation*/
@keyframes slideIn {
  from {
    transform: translateX(-200%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* */
/* Initial state */
.tagged-header {
  transform: translateX(-200%);
  opacity: 0;
  transition: none;
}

/* When visible, apply the animation */
.tagged-header.visible {
  animation: slideIn 0.9s ease-out forwards;
}
 
/*******MEDIA QUERY*******/
/* Ensure columns stack on mobile */
@media screen and (max-width: 900px) {
      .tagged-header-container h2{ /*ADJUST HEADING SIZE*/
   font-size: min(6.5vw, 2em) !important;
  }
}

 @media (min-width: 813px) and (max-height: 1240px) {
  .sub-heading-border { 
   line-height: 1.5 !important;
  }
}

@media screen and (max-width: 812px) {
 .showcase {
   width: 100%; 
   height:auto;
   max-height:100% ;
  }
 /*.showcase .overlay {*/
  .showcase {
    flex-direction: column;
    /*text-align: left;*/
    padding: 1em; 
  }
  .showcase h2 {
    font-size: min(10vw, 2.5rem);
    margin-top: 1em;  
 
   }
  .showcase h2 .second-part {
    padding-left:0; 
  }
  /* */
  .showcase .credits {
    font-size: min(6vw, 1rem) !important; /* Smaller font size for readability */
    padding-bottom:1em;  
    margin-top: 0; 
   
  } 
  .sub-heading-border {
    font-size: min(6vw, 20px); /* Smaller font size */
    padding: 5px; 
    letter-spacing: 4px;
    line-height: 1.2 !important;
  }
  .sub-heading-border.sub-heading-white {
   /*text-align: left;*/
  }
} /* End media query 812px */


/*   mobile  tagged-header */
@media screen and (max-width: 768px) {
  .tagged-header {
    transform: translateX(-20%); /* Adjust to move less off-screen */
  }
  .tagged-header.slide-in {
    transform: translateX(0); /* Move to normal position */
  }
  /* Skew effect for the heading on PROGRAM IMPACT  */
 .tagged-header:before {
  left: -12px;
  width: calc(100% + 24px);
  }
  /* align text left to keep accessibility contrast*/
   .showcase h2 {
    text-align: left;
   }
   .sub-heading-border.sub-heading-white {
   text-align:left;
  }
}

 
/*   For very small screens   */
@media screen and (max-width: 480px) {
      .tagged-header {
        padding: 0.675rem 1.2rem; /* Reduce padding */
      }
  .showcase h2 .first-part {
    font-size: min(8vw, 1.7em);  
    color: #fff; 
  }
 .showcase h2 {
    font-size: min(8vw, 2em);  
    padding-bottom:15px !important;
    margin-bottom: 0 !important;
   }
 
  .sub-heading-border {
    font-size: min(7vw, 18px) !important;
    padding: 5px 0 !important;
    line-height: 1.2 !important;  
    max-width: 320px;
    width: 100%;
  }

  .showcase .credits {
      display: none;    
  }
 .credits-body { 
    padding-bottom: 1em;
    display:block;
    font-size: min(7vw, 1em);
    font-style: italic;
  }
  /* Skew effect for the heading on PROGRAM IMPACT  */
 .tagged-header:before {
  left: -17px;
  width: calc(100% + 30px);
  }
} 
  
/***** title display none *****/
    .hh-module .row.title {
         display:none;
    }
   .hh-module.section {
         padding-top: 0 !important;
    }
   /*  .page-section{
         margin-bottom: 0 !important;
    }*/
     @media (min-width: 992px) {
         .section.hh-news.hh-module.page-section {
             margin-top: 0;
             margin-bottom: 0;
        }
         .page-section {
             margin-top: 0;
             margin-bottom: 0;
        }
    }
    
/****** ******/
/*2026 styles*/
 .showcase h2 .first-part {
    font-style: normal !important; 
    color: #fff; 
    font-size: min(10vw, 3.5rem) !important;
    font-weight: 400;
 }
 .sub-heading-bottom {
    letter-spacing: 2px !important;
    border: solid 1px #cfb991;
    background-color: transparent;
    color: #fff !important;
    text-align: center !important;
    font-size: 24px !important;
    
  /*padding: 10px !important; */
  display: inline-block;
 
 }
.section-row.page-section.wysiwyg-full-width {
 padding: 0 !important;
}
 
@media (max-width: 576px) {
  .sub-heading-bottom {
    font-size: 18px !important;
    letter-spacing: 1px !important;
  }
.showcase h2 {
   text-align: left !important;
  }
.credits {
  /* text-align: left !important;*/
  }
}
.bg-steel {
   background-color: #555960;
    color:#fff;
}
.bg-steel h4 {
  color:#cfb991 !important;
}
.bg-steel p{
  font-size: 20px !important;
}
.section-row.page-section.wysiwyg-full-width.bg-steel {
overflow: visible !important;
}