.img-wrapper{
  max-width: 100%;
  height: 65vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

img{
  max-width: 100%;
  max-height: 100%;
}

@media screen and (min-width:576px){
  .carousel-inner{
      display: flex;
  }
  .carousel-item{
      display: block;
      margin-right: 0;
      flex: 0 0 calc(100%/3);
  }

  .img-wrapper{
      height: 15vw;
  }

  .card-text{
    min-height:12em !important;
    color:#17252a;
  }

.bannerLogo{
    height:54px !important;
    width:128px !important;
}

.eventBanner {
  top: 70px !important;
}

.footerImg{
    height:77px !important;
    width:144px !important;
}

.footerlink{
    font-size:16px !important;
}

.calendarBanner{
    padding-top:4.4em !important;
}

.nav-links{
  display: inline-flex !important;
}

}

.carousel-inner{
  padding: 1em;
}

.card{
  margin: 0 .5em;
  border-radius: 0;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, .18);
}

.carousel-control-prev, .carousel-control-next{
  width: 6vh;
  height: 6vh;
  background-color: #e1e1e1;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: .5;
}

.carousel-control-prev:hover, .carousel-control-next:hover{
  opacity: .8;
}

.card-img-top{
  width:57px;
}
.card {
    border-radius: 12px;      /* match your existing radius */

}

.card-header{
  display: flex;
  align-items: center;
  background-color: #def2f1;
   border-top-left-radius: 12px;
      border-top-right-radius: 12px;
}

.card-header p{
  padding-left:.5em;
}

.card-title{
  font-weight: bold;
  color:#2b7a78;
}


.premier-badge {
    position: absolute;
    top: -20px;
    right: -25px;

    height: 100px !important;
    width: auto !important;

    max-width: none !important;
    max-height: none !important;

    display: block;
    object-fit: contain;

    z-index: 20;
    pointer-events: none;

    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

@media (max-width: 576px) {
    .premier-badge {
        height: 80px !important;
        top: -15px;
        right: -10px;
    }
}

.premier-title{
    font-weight: bold;
    color:#17252a !important;
}

.premier-header{
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #3AAFA9 0%, #DEF2F1 100%);
}

.card-title-city{
  width:35%;
  text-align: right;
  font-style: italic;
}

.card-multiple-cols{
  display: flex;
  align-items: center;
}

.card-2cols-col1{
  width:50%;
  text-align: left;
}

.card-2cols-col2{
  width:50%;
  text-align: right;
}


.card-title-company{
  width:65%;
  text-align: left;
}

.card-dates{
  width:90%;
  text-align: right;
}

.card-text{
  min-height:17em;
  color:#17252a;
}

.list-group-item{
  color:#17252a;
}

.btn-outline-primary{
  width:7em;
}

.category{
  padding-top:.5em;
  margin-bottom: 0em;
  font-style: italic;
  color:#2b7a78;
}

.darkBlue{
  color:#2b7a78;
  margin-bottom: .25rem;
}

.navbar{
  background-color: #17252a important!;
  background-image: linear-gradient(160deg, #17252a 0%, #2b7a78 100%);
}

.navbar-brand{
  color: #def2f1;
}

.nav-link{
  color: #17252a !important;
}

.offcanvas-header{
  background-color: #17252a;
  color:#def2f1;
}

.text-bg-offcanvas{
  background-color: #feffff;
}

.categorybtn{
  color: #17252a;
  border-color: #17252a;
}

.agebtn{
  color: #17252a;
  border-color: #17252a;
  width:3em;
}

.btn-check:not(:checked) + .btn {
  min-height:2.5em !important;
  min-width:9.5em !important;
  font-size:12px !important;
}

.btn-check + .btn:hover{
  color: #17252a;
  border-color: #17252a;
  min-height:2.5em !important;
  min-width:9.5em !important;
  font-size:12px !important;
}

.btn-check:checked + .btn{
  color: white;
  background-color: #3aafa9 !important;
  border-color: #17252a;
  min-height:2.5em !important;
  min-width:9.5em !important;
  font-size:12px !important;
}

.categoryselectall, .categoryselectall:hover, .categoryselectall:visited{
  color:#17252a !important;
  text-decoration-color: rgba(2, 102, 112, 1);
}

.categorydeselectall, .categorydeselectall:hover, .categorydeselectall:visited{
  color:#17252a !important;
  text-decoration-color: rgba(2, 102, 112, 1);
}

.icon-link, .icon-link:hover, .icon-link:visited{
    color: #3aafa9 !important;
    text-decoration-color: rgba(58, 175, 169, 1);
  }

.light-link, .light-link:hover, .light-link:visited{
  color:#3aafa9 !important;
}

.btn-primary{
  border-color: #2b7a78;
  background-color: #3aafa9;
}

.btn-primary:hover, .btn-primary:visited,.btn-primary:active, .btn-primary:focus{
  border-color: #2b7a78 !important;
  background-color: #2b7a78 !important;
}

.btn-secondary{
  background-color: #def2f1;
  color:#17252a;
  border-color: #17252a;
}

.btn-secondary:hover,.btn-secondary:active{
  background-color: #17252a !important;
  border-color: #17252a !important;
}

table.childProfileTable > :not(caption) > * > * {
  padding: .2rem .2rem
}

.modal-body {
  padding-left: .1rem;
  padding-right: .25rem;
}

.form-check-input:checked {
  background-color: #2b7a78;
  border-color: #2b7a78;
}

.form-check-input:focus, .form-check-label::before {
  box-shadow: 0 0 0 0.2rem rgba(58, 175, 169,.25);
}

.spinner {
  display: none;
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 18px;
  font-weight: bold;
  color: #feffff;
}
.ribbon {
  --f: .5em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */
  width:50%;
  max-height: 34%;
  position: absolute;
  bottom: 20px;
  right: calc(-1*var(--f));
  padding-inline: .25em;
  line-height: 1.8;
  background: #3aafa9;
  border-top: var(--f) solid #0005;
  border-left: var(--r) solid #0000;
  clip-path:
    polygon(0 100%,100% 100%,100% var(--f),calc(100% - var(--f)) 0,
      calc(100% - var(--f)) var(--f),0 var(--f),
      var(--r) calc(50% + var(--f)/2));
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.main {
  width: 100%;
  max-width: 500px;
  padding-top: 5em;
  margin: auto;
}

.active > .page-link, .page-link.active {
  background-color: rgb(43, 122, 120) !important;
  border-color: rgb(43, 122, 120) !important;
}

.page-link {
  color: rgb(43, 122, 120);
}

table.table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgba(43, 122, 120, 0.975);
}

table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > * {
  box-shadow: inset 0 0 0 9999px rgba(43, 122, 120, 0.975);
}

table.table.dataTable.table-hover > tbody >  tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(43, 122, 120, 0.975);
}

body.busy .spinner { display:block !important; }

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

.req{
    color:red;
}

.filter{
    border-color: #2B7A78;
    background-color:#FEFFFF;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.4em; }
h1 { font-size: 1.65em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.35em; }
h4 { font-size: 1.11em; }

/* ASPECT RATIO
-------------------------------------------------- */
.ar, .ar-1x1, .ar-2x1, .ar-4x3, .ar-16x9, .ar-6x5, .ar-300x250, .ar-468x60, .ar-24x5 {
	position:relative;
	top:0;
	padding:0;
	margin:0;
	display: block;
	-webkit-print-color-adjust: exact;
}
.ar > div, .ar-1x1 > div, .ar-2x1 > div, .ar-4x3 > div, .ar-16x9 > div, .ar-6x5 > div, .ar-24x5 > div,
.ar-300x250 > div, .ar-468x60 > div,
.ar-2x1 > img, .ar-4x3 > img, .ar-16x9 > img, .ar-16x9 > iframe
{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	display: block;
}
.ar-1x1  { padding-bottom:100%;  }
.ar-4x3  { padding-bottom:75%;   }
.ar-16x9 { padding-bottom:56.25%; }
.ar-2x1 { padding-bottom:50%; }
.ar-24x5 { padding-bottom:20.8333333%; } /* 1920x400 */
/* Ad sizes */
.ar-6x5, .ar-300x250 { padding-bottom:83.3333333%; }
.ar-468x60           { padding-bottom:12.8205128%; }

div.expand > div {
	width: 100%;
	height: 100%;
}
div.expand > div > iframe {
	width: 100%;
	height: 100%;
}

img.fill-container {
	width:100%;
	height:100%;
	object-fit: contain;
	overflow: hidden;
}

.calendarBanner{
    padding-top:3.4em;
}

.bannerLogo{
    height:30px;
    width:71px;
}

.footerImg{
    height:38px;
    width:72px;
}

.footerlink{
    font-size:10px;
}

.nav-links{
  display: none;
}

.nav-links li{
  list-style: none;
  padding-left:1em;
  padding-right:1em;
  padding-top: 12px;
}
.nav-links li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.nav-links li a:hover{
  background: #17252A;
}

.is-invalid-custom{
  border-color: var(--bs-form-invalid-border-color) !important;
  padding-right: calc(1.5em + 0.75rem)!important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(0.375em + 0.1875rem) center !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;

}

.eventBanner {
  top: 64px;
}

.my-checkbox-btn {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.my-checkbox-btn .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #17252A;
  color: white;
  border-radius: 50%;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  min-width: 20px;
  text-align: center;
  z-index:5;
}

.card-list {
    columns: 2;                 /* auto flows into columns */
    column-gap: 1.5rem;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.card-list li {
    break-inside: avoid;
    margin-bottom: 0.35rem;
    padding-left: 1.2rem;
    position: relative;
    font-size: 0.95rem;
}

.card-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #2aa198;             /* match your teal */
    font-weight: bold;
}

  .card-text-volunteer-desc{
    color:#17252a;
  }

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    accent-color: #3aafa9;
}

@media (max-width: 576px) {
    .card-list {
        columns: 1;
    }
}