/* custom button for callout on CL pages*/
.btn-clmain {
  background: #BF0413;
  border: 1px solid #BF0413; /* Changed from 'inset' to 'solid' for consistency */
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 45px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.2;
  transition: all 0.2s ease-in-out; /* Smooth transitions */
  font-family: inherit; /* Inherit font family from parent */
  -webkit-font-smoothing: antialiased; /* Better font rendering */
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box; /* Ensure consistent sizing */
}

/* Hover state with better accessibility */
.btn-clmain:hover {
  background: #0F0C59; /* Deep blue for professional contrast */
  color: #ffffff;
  border: 1px solid #0F0C59;
  transform: translateY(-1px); /* Subtle lift effect instead of harsh repositioning */
  box-shadow: 0 4px 8px rgba(15, 12, 89, 0.3); /* Subtle shadow */
}

/* Focus state for keyboard navigation accessibility only */
.btn-clmain:focus-visible {
  outline: 3px solid #4A90E2; /* High contrast focus outline */
  outline-offset: 2px;
  background: #0F0C59;
  color: #ffffff;
}

/* Remove default focus outline for mouse clicks */
.btn-clmain:focus:not(:focus-visible) {
  outline: none;
}

/* Active state */
.btn-clmain:active {
  background: #660207; /* Even darker shade for active state */
  transform: translateY(0); /* Reset transform on click */
  box-shadow: 0 2px 4px rgba(191, 4, 19, 0.2);
}

/* Disabled state (if needed) */
.btn-clmain:disabled,
.btn-clmain.disabled {
  background: #cccccc;
  border-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Remove conflicting nested anchor styles */
.btn-clmain a {
  color: inherit;
  text-decoration: none;
}

.btn-clmain a:hover {
  color: inherit; /* Removed the conflicting color override */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .btn-clmain {
    font-size: 14px;
    padding: 12px 30px;
    letter-spacing: 0.5px;
  }
}





.logo-bg {
  background-image: linear-gradient(90deg, rgba(2, 40, 115, 0.9760978201631109) 19%, rgba(13, 13, 13, 0.8061261487750089) 99%);
  width: 100%;
  margin-bottom: 2rem;
  padding-top: 35px;
  max-height: 160px;
  padding-bottom: -15px;
}
@media (max-width: 768px) {
  .logo-bg {
    background-width: 90%;
    margin-bottom: 3em;
    padding-top: 35px;
  }
  .logo-img {
    width: 80%;
  }
}
.quote-large {
  font-size: 1em !important;
  font-weight: 700;
  color: #022873;
  line-height: 1.3em;
}
.custom-quote {
   width: 100%;
  font-style: italic;
  color: #556573;
  font-weight: 500;
  line-height: 1.1em;
  font-size: 0.9em;
}


@media (max-width: 768px) {
  .custom-quote {
    padding: 0 !important;
  }
}






.quote-symbol {
  font-weight: 800;
  color: #F2B90F;
  font-size: 1.8em;
}
.pull-quote {
  border: solid #2499A6;
  border-width: 2px 0;
}
.hr-custom hr {
  width: 80%;
  margin: auto;
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.bg-callout {
  min-height: 300px;
  background: #024873;
  margin: auto;
  padding: 50px 40px;
  color: #f5f5f5;
  font-weight: 500;
}
.bg-callout h3, .bg-callout h4, .bg-callout h5 {
  color: #f5f5f5;
}

@media (max-width: 768px) {
  .bg-callout  {
     padding: 50px 15px;
  }
}



@media (max-width: 768px) {
  .bg-callout h3, .bg-callout h4, .bg-callout h5, .bg-callout p {
    text-align: center;
  }
}
.hero-learn {
  min-height: 450px;
  background-image: url(https://www.ncra.org/images/default-source/uploadedimages/events/ncra-connect-virtual/connect-lady-coffee-patio-opt.jpg?Status=Temp&sfvrsn=389f5993_2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-grow: 1;
}





/*Ovveride main style sheet*/
.tabs--standard .tabs__tab {
  font-size: 1.1em !important;
  font-weight: 800 !important;
}
.tabs--standard .tabs__tab.is-active {
  background: #c1cbdd !important;
}
.tabs--standard .tabs__pane {
  border: #BF0413 solid 1px !important;
}
/*Custom styles*/
.intro-title {
  color: #BF0413;
  font-weight: 800;
  font-style: italic;
  text-align: center;
  font-size: 2.1em;
  line-height: 1.1em;
}
.accent-heading {
  color: #BF0413;
  font-weight: 800;
  letter-spacing: 1px;
}

.bg-neutral {
  background: #F5f5f5;
  padding: 50px 55px;
  margin: auto;
}
.box-highlight {
  border: 3px outset #022873;
  padding: 30px;
}
.btn-custom {
  background: #BF0413;
  border: 1px inset #BF0413;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 45px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.btn-custom:hover {
  background: #0d0d0d;
  color: #f2f2f2;
  border: 1px solid #0d0d0d;
}
.btn-custom:active {
  position: relative;
  top: 1px;
}
.btn-custom a:hover {
  color: #BF0413 !important;
}
.btn-blk {
  background: #0d0d0d;
  border: 1px solid #0d0d0d;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 45px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.btn-blk:hover {
  background: #BF0413;
  ;
  color: #fff;
  border: 1px solid #BF0413;
  ;
}
.btn-blk:active {
  position: relative;
  top: 1px;
}
.btn-blk a:hover {
  color: #fff !important;
}
@media (max-width: 768px) {
  .btn-custom {
    padding: 14px 20px;
    font-size: 14px;
  }
  .btn-blk {
    padding: 14px 30px;
    font-size: 14px;
  }
}
.why-attend-stats {
  background: rgb(13, 13, 13);
  background: linear-gradient(90deg, rgba(13, 13, 13, 1) 0%, rgba(32, 60, 115, 0.6739946466867996) 100%);
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 300px;
  align-items: center;
}
@media (max-width: 768px) {
  .why-attend-stats {
    min-height: 900px;
  }
}
.stats-wrapper {
  width: 80%;
  padding-top: 2.8em;
}
.why-attend-stats h3 {
  color: #F2B90F;
  font-size: 1.8em;
  text-align: center;
}
.why-attend-stats h4, .why-attend-stats h6 {
  color: #f2f2f2;
  text-align: center;
}
.wrapperA {
  width: 80%;
  margin: auto;
  padding: 20px 5px;
}
.wrapperB {
  width: 90%;
  margin: auto;
  padding-top: 1.6em;
}