.accordion-button::after {
    font-family: "bootstrap-icons";
    background-image: none !important;
    content: "\f286"; /* plus-circle */
    color: #C4B27D;
    font-size: 2rem;
    margin-left: auto;
    transition: transform .2s;
    padding: 10px 20px;
  }
  .accordion-button:not(.collapsed)::after {
    content: "\f2ea"; /* dash-circle */
    transform: rotate(0deg);
  }
  .accordion-button {
    padding: 15px 25px;
    border-radius: 10px;
  }
  .accordion-body {
    font-weight: 400;
    font-size: 16px;
  }

  .accordion-button {
  line-height: 24px !important;
}

.prod-nav {
  border-bottom: 1px solid rgba(255,255,255,0.25)!important;
  background-color: #1c2b4b!important;
  z-index: 99!important;
}

.prod-hero-title {
  color: white;
}

.prod-desc {
  font-size: 20px;
  line-height: 30px;
  color: white;
  font-weight: 400;
}

.hero-section-product {
  min-height: 90vh;
}

.video-tabs-container {
  /* Make video block responsive and centered */
  max-width: 1140px;
  background-color: #FAFAFA;
  width: 100%;
  margin: 0 auto;
}

.video-tabs-container iframe {
    left: 0!important;
}

.video-tabs-container .numbers {
    font-weight:700;
    color:#C4B27D;
    font-size:2rem;
}

.lefter {
    border-left: 1px solid #C4B27D!important;
}

.prod-hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
}

/* Visual hero image if used */
.prod-hero-bg-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Section that contains the video + stats */
.video-tabs-section {
  position: relative;
}

/* Pull the video section up to overlap the hero bottom on larger screens */
@media (min-width: 992px) {
  .video-tabs-section {
    margin-top: -60px;
    z-index: 2;
  }
}

/* Card-like responsive video with rounded corners */
.video-card {
  position: relative;
  /* border-radius: 16px; */
  overflow: hidden;
  aspect-ratio: 16 / 9; /* keep 16:9 */
  background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.video-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Spacing around the video */

/* Numbers styling */
.numbers {
  font-weight: 700;
  color: #C4B27D;
  font-size: 1.25rem;
}

/* Subtle separators on desktop between stats */
@media (min-width: 768px) {
  .lefter {
    border-left: 1px solid rgba(196, 178, 125, 0.6);
  }
}

/* Ensure no overflow from Bootstrap row negative margins */
.video-tabs-container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.video-tabs-container .row {
  margin-left: 0;
  margin-right: 0;
}

.video-tabs-section {
    position: absolute;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 5vh;
}

.why-cbc {
    margin-top: 17%;
}

.wu-card p {
    color: #535862!important;
    font-size: 16px;
    font-weight: 400;
}

.wu-card h3 {
    font-weight: 600;
    font-size: 18px;
    color: #000000!important;
}

#accordionExample2 .show {
    background-color: #445D7B;
    color: white;
    text-align: start;
    font-size: 16px!important;
    font-weight: 400!important;
    border:none;
}

#accordionExample2 .accordion-button {
    background-color: transparent!important;
    border: none;
    color: white!important;
    text-decoration: none;
}

#accordionExample2 .accordion-item {
    background-color: transparent!important;
    color: white;
    border:none;
}

#accordionExample2 .accordion-button:not(.collapsed) {
    border-radius: 0px!important;
    background-color: #445D7B!important;;
    box-shadow: none!important;
}




@media(max-width: 640px) {
    .prod-nav {
        background-color: #1B2B4B;
    }

    .why-cbc {
        margin-top: 75%;
    }

    .prod-hero-title {
        font-size: 36px!important;
        margin-top: 12px!important;
    }

    .lefter {
        border-left: none!important;
    }

    .mob-left-border {
        border-left: 1px solid #C4B27D!important;
    }



    .prod-secondary {
        font-size: 30px!important;
        line-height: 34px!important;;
    }

    .video-tabs-container {
        /* Make video block responsive and centered */
        max-width: 960px!important;
        background-color: #FAFAFA;
        width: 100%;
        margin: 0 auto;
    }

    .video-tabs-section {
        width: 90vw;
    }
}

@media screen and (min-width: 1400px) {
  .why-cbc {
    margin-top: 45vh;
  }

  .hero-section-product {
      min-height: 70vh!important;
  }
}

@media screen and (min-width: 1500px) and (max-width: 2100px) {
  .why-cbc {
    margin-top: 55vh;
  }
}

/* Prevent Bootstrap row negative margins from pushing content outside */