:root {
    --card-header-bgcolorCyan: #93F0E6;
    --card-header-bgcolorRose: #F0939D;
    --card-header-bgcolorLemon: #F0E693;
    --card-header-bgcolorBrown: #E6CCB2;
    --card-header-bgcolorSilver: #E0E0E0;
    --card-header-bgcolorGold: #D4A373;
    --card-header-bgcolorBlue: #93CBF0;
    --card-header-bgcolorIceBlue: #93D9F0;
    --card-header-bgcolorIceGreen: #ADF093;
    --main-padding: 15px;
}
html,
body{
    font-family: "Roboto";
    background: #F5F5F5;
    color:  #333;
    background-image: url('../assets/images/bg2.png');
    background-attachment: fixed;
    background-color: rgba(0, 0, 0, 0.2); /* White overlay */
    background-blend-mode: darken; /* Blends color into image */
    margin-top: 5x;
}
.standoutContent{
    background: #e91e63;
    color: white;
    padding:20px;
    border-radius: 10px;
}
hr{
    border-color:  silver;
}

ul{
    margin-left:  20px !important;
}
.est-Text{
    font-style: italic;
    letter-spacing:  1px;
}
.social-media{
    color: #fafafa;
    padding:5px;
    text-align:  right;
}
.social-media-text{
    font-size: 100%;
}
.social-media a{
    font-size: 24px;
    color: #FFF;
}
.header-content{
    background: #F5F5F5;
    padding-bottom:20px;
    padding-top:20px;
    border-radius: 10px 10px 0 0;
}
.header-content img{
   max-width: 100%;
}
.shim-5{
    height:  5px;
}
.shim-10{
    height:  10px;
}
.shim-20{
    height:  20px;
}
.flex-shrink-0{
    background-color: #F5F5F5;
    min-height: 100vh;
}
.flex-shrink-0 div.container{
    padding:0 !important;
}
.footer{
    background: #333;
    color: white;
    border-radius: 0 0 10px 10px;
    margin-bottom: 20px;
}
.footer div.container{
     padding:10px;
     font-size: 85%;
}
.social-media-foot{
    color: #fafafa;
    text-align: center;
}
.social-media-foot a{
     font-size: 26px;
     color: #FFF;
}

/**************** Headers, subheaders and misc text **************/
p, form{
    padding: 0px 15px;
}
.StdPageText{
    padding-left: 40px;
    margin-right: 40px;
}
.subHeaderPanel{
    background:#E0E0E0;
    padding:10px;
    border-radius: 0px;
    border-bottom:  silver;
}
.subHeaderTab{
    border-bottom: 1px solid #C5BD79;
    margin-left: 10px;
    margin-right:  10px;
    margin-top:  20px;
    margin-bottom:  10px;
}
.subHeaderTab div{
   background: #F0E693;
   display: inline-block;
   padding:5px 20px;
   font-family: "RacingSans";
   font-size: 20px;
   border-radius: 7px 7px 0 0;
}
.subHeaderTab div:before{
  content: "\25B7 \00A0 \00A0";
  font-size: 16px;
}
h5.subHeader1:before{
  content: "\25B7";
  font-size: 22px;
  color: #e91e63;
}
h5.subHeader1, h5.subHeader2{
    color:  #111;
    font-family: "RacingSans";
    font-size: 26px;
    letter-spacing:  2px;
    text-transform: none;
    margin-left:  10px;
    margin-top:  10px;
}
h5.subHeader2 i{
    color:  #C2185B;
    font-size: 20px;
}
.bSubheader{
     margin-left:  20px;
}
.headerText{
    color:  #111;
    font-family: "RacingSans";
    font-size: 48px;
    letter-spacing:  2px;
    text-transform: uppercase;

}
.headerText2{
    color:  #111;
    font-family: "RacingSans";
    font-size: 20px;
    letter-spacing:  2px;
    /*text-transform: uppercase;*/
}
.headerText3{
    color:  #111;
    font-family: "RacingSans";
    font-size: 18px;
    letter-spacing:  2px;
    /*text-transform: uppercase;*/
}
.smallTxt{
     font-size: 12px;
     font-style: italic;
     font-weight:  bold;
}

/************* Navigation and Links ***************/
a{
    color: white;
}
a:hover{
    text-decoration: none;
}
.navbar-dark .navbar-nav .nav-link:link,
.navbar-dark .navbar-nav .nav-link:visited{
    color:  #FFF;
    font-family:  "Roboto";
    letter-spacing: 1px;
    padding: 5px 10px;
}
.navbar{
    background: #333 !important;
    padding:5px; border:0;
}
.navbar-collpase {
    background: #333;
}
div.container-fluid{
   background: #333;
    padding:  none;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:active,
.navbar-dark .navbar-nav .nav-link:focus
{
    color: white;
    background-color: yellow;
}
a.nav-link{
    color: #FFF;
}
a.nav-link:hover, a.nav-link:active, a.nav-link:focus{
    background: #F0E693;
    color: #333;
}
.mainContentContainer{
    background: white;
    padding: 10px;
    border-radius: 0;
    border: 1px solid gray;
    margin-top:  10px;
}
.dropdown:hover > .dropdown-menu {
  display: block;
  margin-top: 0;
   margin-left: -1px;
  background:  #333;
  border-radius: 0;
}
/* Optional: remove the small gap between the link and menu
   to prevent the menu from closing when moving the cursor down */
.dropdown-menu {
  margin-top: 0;
   margin-left: -1px;
  background:  #333;
  border-radius: 0;
}
a.dropdown-item{
  color:  white;
}
a.dropdown-item:hover{
  color:  black;
   background:  #F0939D;
   margin-top: 0;
  margin-left: -1px;
}
ul li.aBody a{
    color:  #333;
}
a.stdLink{
    color:  black;
}

/************** Cards **************/
.card{
    border-color:#F5F5F5;
    background-color:#F5F5F5;
    border-radius:0px;
}
.card-header{
    background: #00D1B2;
    border-radius:0  !important;
    background-color: #E6CCB2;
}
.card-body{
    padding:  5px;
    border-radius:0;
}
.card-body img.callOutImg{
    margin:  0 !important;
    width: 185px;
    max-width: 100%;
    float: left;
    padding-right: 12px;
    padding-bottom: 2px;
}
.card-body img.callOutImg2{
    margin:  0 !important;
    width: 400px;
    max-width: 100%;
    border:  1px solid white;
}
.card.callOutContainer{
    padding: 10px 10px 10px 10px;
    background: #405C56;
    border-radius:10px;
    color:  white;
}
div.callOutCard{
    border-radius:10px !important;
     background: #405C56;
    border:  none;
    color:  white;
}
cardHeaderBgCyan{
    background-color: var(--card-header-bgcolorCyan);
}
.cardHeaderBgRose{
    background-color: var(--card-header-bgcolorRose);
}
.cardHeaderBgLemon{
    background-color: var(--card-header-bgcolorLemon);
}
.cardHeaderBgBrown{
    background-color: var(--card-header-bgcolorBrown);
}
.cardHeaderBgSilver{
    background-color: var(--card-header-bgcolorSilver);
}
.cardHeaderBgGold{
    background-color: var(--card-header-bgcolorGold);
}
.cardHeaderBgBlue{
    background-color: var(--card-header-bgcolorBlue);
}
.cardHeaderBgIceBlue{
    background-color: var(--card-header-bgcolorIceBlue);
}
.cardHeaderIceGreen{
    background-color: var(--card-header-bgcolorIceGreen);
}
.cardHeaderDkGreen2{
    background-color: #37504B;
    color: #F0E693;
}
.cardHeaderDkGreen{
    background-color: #3F5751;
    color: #F0E693;
}

/************ forms **************/
label{
    font-weight: bold;
    margin-left: 5px;
}
input{
    margin-bottom: 10px;
}

/*
input[type="submit"] {
    margin-top: 10px;
    background: #2D4F4F;
    color:  #FFF;
}
input[type="submit"]:hover {
    margin-top: 10px;
    background: #333;
    color:  #FFF;
}*/

.form-hide{
    position:absolute;
    left:-2000px;
    visibility:hidden;
}
input[type="text"] {
    max-width:500px;
}
input[type="textarea"] {
    width:100px;
}
.donate-btn {
  background-color: #e91e63; /* Eye-catching pink/red */
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50px;
  transition: transform 0.2s, background-color 0.2s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  margin-top:25px;
  margin-right:20px;
  font-family:  RacingSans;
  letter-spacing:  3px;
  text-transform: uppercase;
}
.donate-btn:hover {
  background-color: #c2185b;
  transform: scale(1.05); /* Slight grow effect */
}
.callout-btn, input[type="submit"] {
    background-color: #e91e63; /* Eye-catching pink/red */
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50px;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin-bottom:10px;
    margin-right:10px;
    text-align: right;
    float:  right;
    font-family:  Roboto;
    letter-spacing:  2px;
}
.btn-centered{
    float: none;
}
.callout-btn:after{
  content: "\00A0 \25B7";
  font-size: 12px;
}
.callout-btn:hover, input[type="submit"]:hover{
  background-color: #c2185b;
  transform: scale(1.05); /* Slight grow effect */
}
input[type="submit"]{
    float:  left;
    border:  none;
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
}
input[type="submit"]:hover{
  background-color: #c2185b;
  transform: scale(1.05); /* Slight grow effect */
}
.carousel-caption {
    text-align: center;
    left: auto;
    right: 5%;
}
div.carousel-caption h5, div.carousel-caption p{
 background:  black;
 color:  white;
 padding: 5px;
}
.col-md-8{
    padding:0 20px;
}
.header-logo-text{
    color: #111;
    font-family: RacingSans;
    letter-spacing: 2px;
    font-size: 110%;
    padding:0 10px;
}
.offcanvas-header .btn-close{
    color: #333;
}
.triangle {
  width: 200px; height: 200px;
  clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
  background: #f5ebf4;
  transform: rotate(0deg);
}
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 50px;
    display: none; /* Hidden by default */
    background-color: #C2185B;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    text-decoration: none;
    z-index: 1000;
}
ul li.board-member{
    font-weight:  bold;
}
ul li.board-member ul li{
    font-weight:  normal;
    list-style-type: none;
}
ul.bod{
    margin-left: 0;
    padding-left:  0;
}
.scroll-div-body{
    height:750px;
    overflow: auto;
    border: 1px solid #C5BD79;
    margin: 0px 10px;
    text-align:  center;
    background:  #333;
}
.div-body{
    border: 1px solid #C5BD79;
    margin: 0px 10px;
}
/****************** Mobile breakpoint ******************/
@media (max-width: 991.98px) { /* Adjust breakpoint as needed (e.g., -md or -lg) */
    .navbar-collapse {
        position: absolute;
        top: 100%; /* Positions it directly below the navbar header */
        left: 0;
        z-index: 1000;
        width: 100%;
        background-color: #333; /* Ensure it has a solid background */
        color:  white;
    }
    .navbar-collapse li a{
        color: white;
        padding: 5px 5px;
    }
    .navbar-collapse li a:hover{
        color: black;
        background: #FF0000;
        padding: 5px 5px;
    }
    a.nav-link{
        color: white;
    }
    a.nav-link:hover, a.nav-link:active, a.nav-link:focus{
        background: white;
    }
    .navbar-toggler-icon {
        filter: invert(1);
         border: 0;
         padding: 0.25rem 0.5rem;
         color: white;
     }
    /* Removes the outline and shadow for the mobile menu button on focus/active */
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
        outline: none !important;
        box-shadow: none !important;
        border: none !important; /* Optional if a border utility was also applied */
        text-align:  right;
    }
    div.offcanvas-body ul li a:hover{
        background:  #F0E693;
    }
     div.offcanvas-body{
        background: #333;
        padding: 20px 50px;
    }
     div.offcanvas-header{
        background: #37504B;
        color:#FFF;
        font-weight:bold
    }
    .donate-btn {
      font-size: 16px !important;
      margin-top:15px;
      font-size: 14px;
      padding: 10px 20px;
    }
    .card-body img.callOutImg{
        /* need to add sm breakpoint for this one */
    }
    .subHeaderTab div{
       font-size: 16px;
    }
    h5.subHeader1{
        font-size: 20px;
    }
}

/*
@media (max-width: 767.98px) {

    .card-body img.callOutImg{

    }



}



@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {

}
*/