/* Site overrides */


h4 {
    color: --bs-primary;
    text-align: center;
}

h5 {
    color:#c5892f;
    font-weight: 900;
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
    margin-top: 10px;
  }

  h6 {
    color: #38761d;
    font-weight: bolder;
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
    margin-top: 10px;
  }

/* make <strong> stronger */
b, strong {
    font-weight: 700;
    font-family: sans-serif;
}
.badge {
    border-radius: 0;
}

/* flex grid*/
.tile-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  justify-content: center;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .tile-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.button-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Four columns */
  gap: 5px;
  justify-content: center;
}


@media (max-width: 768px) {
  .button-container {
    grid-template-columns: repeat(2, 2fr);
      /* Two columns for smaller screens */
  }
}




@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/* Styles for the sake of the demonstration */

#animated-text-strip {
  background: var(--bs-yellow);
  padding: 1rem 0;
}

/* Scrolling Marquee - end */

/* start - background youtube video */

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* end - background youtube video */


/* start - custom css for image blocks on front page */

.featuredBottom {
  position: absolute;
  text-align: center;
  bottom: -11px;
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.featuredImage {
  border-radius: 20px;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.featuredOverlayText {
  font-family: sans-serif;
  background: var(--bs-primary);
  width: 100%;
  font-weight: 900;
  font-size: clamp(12px, 1.2vw, 16px);
  text-transform: uppercase;
  padding: 5px 2px 10px 2px;
  color: var(--bs-tertiary-bg);
  z-index: 999;
}

.cta-button {
  font-size: 0.8rem;
  /* border-radius: 10px; */
}

.featuredImage:hover {
  opacity: .85;
  filter: alpha(opacity=100);
}

.overlayWrapper {
  position: relative;
  /* text-align: center; */
  /* min-height: 500px; */
  /* color: white; */
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.bottom-centred {
  position: absolute;
  bottom: 8px;
  /*right: 16px;*/
  left: 50%;
  transform: translate(-50%);
}

.top-centred {
  position: absolute;
  top: 8px;
  /*right: 16px;*/
  left: 50%;
  transform: translate(-50%);
}

.centered {
  object-fit: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  /* bottom: -238px; */
  /* left: 50%; */
  top: 10%;
  left:  0;
  /* transform: translate(-50%, -50%); */
}

/* end - custom css for image blocks on front page */

/* for the pricing matrix */
.price-border {
  border-right: 2px solid var(--bs-info-text-emphasis);
  border-left: 2px solid var(--bs-info-text-emphasis);
}


.sponsorimg {
  max-height: 150px;
  width: auto;        
}