/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
  padding-top: 0;
  padding-bottom: 3rem;
}

h1 {
  font-family: Optima, Helvetica;
  color: rgba(218, 184, 82,1) !important;
  text-shadow: 1.5px 1.5px rgba(56, 48, 24, 1) !important;
  font-weight: 900;
  font-size:  4em;
  text-transform:  uppercase;
}

h2 {
  margin-top:  2rem;
}



.fw-normal {
  color:  rgba(219, 238, 238, 1) !important;
}


.opacity-100 {
  display:  inline;
  background-color:  rgba(5, 11, 0, 0.75);
  font-family: Optima, Helvetica;
  font-weight: 900;
  font-size: 1.5em;
  color: rgba(218, 184, 82,0.75);
  padding-left:  1%;
  padding-right:  1%;
  padding-top:  0.5%;
  padding-bottom:  0.5%;

}


.feature  {
  color: rgba(218, 184, 82,1);
  font-size: 18px;
}

.leads {
  color: rgba(218, 184, 82,1);
  font-size: 1.5em;
}


.bd-placeholder-img-sml {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-radius: 50%;
}

.bg-dark {
--bs-bg-opacity: 1;
background-color: rgba(5, 11, 0, 1) !important;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  top:  0;
  margin-bottom: 4rem;
}


.text-center {
  text-align:  left !important;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: auto;
}

.text-body-secondary {
  color:  rgba(219, 238, 238, 0.5) !important;
}

:root { 
--bs-secondary-color: rgba(255, 219, 131,1) !important;
}




.float-end {
font-family:  Optima, Helvetica;
}

p {
margin-top:  1.5em;
margin-bottom:  1.5em;
font-family:  Optima, Helvetica;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 0rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin-bottom: 3rem; /* Space out the Bootstrap <hr> more */
  margin-top: 3rem;
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}


/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
    line-height: 1.25em;
  }


.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

.strip {
width:  10%;
overflow:  hidden;
text-align:  justify;
display:  table-cell;
vertical-align:  middle;
padding:  0.25%;
background-color: rgba(5, 11, 0, 0.75);
margin-top:  0;
margin-bottom:  0;
}

/* ===========================================
   FIXES FOR CAROUSEL CAPTION ALIGNMENT + TEXT SCALING
   =========================================== */

/* Center captions vertically with carousel arrows */
.carousel-caption {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width:  100%;
  max-width: 80%;
  padding: 0.5rem;
  z-index: 10;
  background-color: transparent !important; /* remove debug red */
}

/* Responsive scaling for heading inside carousel */
.carousel-caption h1 {
  font-size: clamp(1.25rem, 4vw + 0.5rem, 4rem) !important;
  line-height: 1.2 !important;
}

/* Responsive scaling for paragraph/subtext */
.carousel-caption p,
.carousel-caption .opacity-100 {
  font-size: clamp(0.9rem, 2vw + 0.25rem, 1.75rem) !important;
  line-height: 1.3 !important;
}

/* Adjust caption position slightly lower on small screens */
@media (max-width: 576px) {
  .carousel-caption {
    top: 55%;
  }
}

@media (max-width: 576px) {
  .featurette-divider {
    margin: 1.5rem 0;   /* default Bootstrap sets ~5rem, so this shrinks a lot */
  }

  .row.featurette {
    margin-top: 0.5rem; /* reduce top gap */
  }

  .featurette-heading {
    font-size: 1.5rem;   /* try 24px; adjust as you like */
    line-height: 1.2;
  }
}