/* ── Wrapper ── */
  #Carousel,
  #Carousel.carousel,
  #Carousel.slide {
    position: relative  !important;
    overflow: hidden    !important;
    width: 100%         !important;
    padding: 0          !important;
    margin: 0 auto      !important;
    max-width: 1920px   !important;
  }
 
  /* ── carousel-inner must match slide height ── */
  #Carousel .carousel-inner {
    position: relative  !important;
    width: 100%         !important;
    overflow: hidden    !important;
    height: 580px       !important;   /* explicit height — critical */
  }
 
  /* ══════════════════════════════════════
     CAROUSEL-FADE — full Bootstrap 3 fix
  ══════════════════════════════════════ */
  #Carousel.carousel-fade .carousel-inner > .item {
    opacity: 0                  !important;
    visibility: hidden          !important;
    position: absolute          !important;
    top: 0                      !important;
    left: 0                     !important;
    width: 100%                 !important;
    height: 100%                !important;
    -webkit-transition: opacity 1s ease-in-out, visibility 1s ease-in-out !important;
    transition:         opacity 1s ease-in-out, visibility 1s ease-in-out !important;
    z-index: 1                  !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform:         translate3d(0, 0, 0) !important;
  }
 
  #Carousel.carousel-fade .carousel-inner > .item.active {
    opacity: 1     !important;
    visibility: visible !important;
    position: relative  !important;   /* holds wrapper height */
    z-index: 2     !important;
  }
 
  #Carousel.carousel-fade .carousel-inner > .item.next,
  #Carousel.carousel-fade .carousel-inner > .item.prev {
    opacity: 0          !important;
    visibility: hidden  !important;
    z-index: 2          !important;
    left: 0             !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform:         translate3d(0, 0, 0) !important;
  }
 
  #Carousel.carousel-fade .carousel-inner > .item.next.left,
  #Carousel.carousel-fade .carousel-inner > .item.prev.right {
    opacity: 1          !important;
    visibility: visible !important;
  }
 
  #Carousel.carousel-fade .carousel-inner > .item.active.left,
  #Carousel.carousel-fade .carousel-inner > .item.active.right {
    opacity: 0          !important;
    visibility: hidden  !important;
    z-index: 1          !important;
    left: 0             !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform:         translate3d(0, 0, 0) !important;
  }
 
  /* ── Each slide item ── */
  #Carousel .carousel-inner > .item {
    height: 580px   !important;
    overflow: hidden !important;
    display: flex   !important;
    align-items: center     !important;
    justify-content: center !important;
  }
 
  /* ── Background image ── */
  #Carousel .carousel-inner > .item > img.animate-show,
  #Carousel .carousel-inner > .item .img-responsive.animate-show {
    position: absolute  !important;
    top: 0      !important;
    left: 0     !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover       !important;
    object-position: center !important;
    display: block          !important;
    max-width: none         !important;  /* override .img-responsive max-width */
    -webkit-transform: scale(1.0) !important;
    transform:         scale(1.0) !important;
    -webkit-transition: -webkit-transform 7s ease !important;
    transition:         transform 7s ease         !important;
    z-index: 0 !important;
  }
 
  #Carousel .carousel-inner > .item.active > img.animate-show,
  #Carousel .carousel-inner > .item.active .img-responsive.animate-show {
    -webkit-transform: scale(1.07) !important;
    transform:         scale(1.07) !important;
  }
 
  /* ── Gradient overlay ── */
  #Carousel .carousel-inner > .item::before {
    content: '' !important;
    position: absolute  !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(5, 16, 26, 0.28) 0%,
      rgba(5, 16, 26, 0.72) 100%
    ) !important;
    z-index: 1  !important;
  }
 
  /* ── Container overlay (text holder) ── */
  #Carousel .carousel-inner > .item > .container {
    position: absolute  !important;
    top: 0      !important;
    left: 50%   !important;
    right: auto !important;
    bottom: 0   !important;
    width: 100% !important;
    max-width: 1170px   !important;
    -webkit-transform: translateX(-50%) !important;
    transform:         translateX(-50%) !important;
    display: flex       !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2  !important;
    padding: 0 15px !important;
  }
 
  /* ══════════════════════════════════════
     CAPTION
  ══════════════════════════════════════ */
  #Carousel .carousel-caption {
    position: static    !important;
    float: none         !important;
    left: auto          !important;
    right: auto         !important;
    bottom: auto        !important;
    text-align: center  !important;
    padding: 0          !important;
    text-shadow: none   !important;
    width: 100%         !important;
    max-width: 820px    !important;
  }
 
  /* Decorative line */
  #Carousel .carousel-caption .caption-line {
    display: inline-flex    !important;
    align-items: center     !important;
    gap: 12px               !important;
    margin-bottom: 16px     !important;
    opacity: 0;
    visibility: hidden;
  }
 
  #Carousel .carousel-caption .caption-line span {
    display: inline-block   !important;
    width: 46px             !important;
    height: 2px             !important;
    background: #b94a32     !important;
    border-radius: 2px      !important;
  }
 
  #Carousel .carousel-caption .caption-line em {
    font-family: 'Lato', sans-serif !important;
    font-style: normal      !important;
    font-size: 11px         !important;
    font-weight: 700        !important;
    letter-spacing: 3px     !important;
    text-transform: uppercase !important;
    color: #f5a898          !important;
  }
 
  /* H1 heading */
  #Carousel .carousel-caption h1.tagline-animate {
    font-family: 'Oswald', sans-serif !important;
    font-size: 64px         !important;
    font-weight: 700        !important;
    color: #ffffff          !important;
    line-height: 1.1        !important;
    letter-spacing: 2px     !important;
    text-transform: uppercase !important;
    margin: 0 0 20px 0      !important;
    padding: 0              !important;
    text-shadow: 0 3px 24px rgba(0,0,0,0.5) !important;
    opacity: 0;
    visibility: hidden;
  }
 
  /* H2 sub-heading */
  #Carousel .carousel-caption h2.tagline-animate2 {
    font-family: 'Lato', sans-serif !important;
    font-size: 17px         !important;
    font-weight: 300        !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 1.8        !important;
    margin: 0 auto          !important;
    padding: 0              !important;
    max-width: 600px        !important;
    white-space: pre-line   !important;
    text-shadow: none       !important;
    opacity: 0;
    visibility: hidden;
  }
 
  /* Animated state */
  #Carousel .caption-line.anim-in,
  #Carousel .tagline-animate.anim-in,
  #Carousel .tagline-animate2.anim-in {
    opacity: 1      !important;
    visibility: visible !important;
  }
 
  /* ══════════════════════════════════════
     CONTROLS
  ══════════════════════════════════════ */
  #Carousel .carousel-control {
    width: 56px     !important;
    height: 56px    !important;
    background: none !important;
    background-image: none !important;
    filter: none    !important;
    opacity: 1      !important;
    top: 50%        !important;
    bottom: auto    !important;
    -webkit-transform: translateY(-50%) !important;
    transform:         translateY(-50%) !important;
    display: flex   !important;
    align-items: center     !important;
    justify-content: center !important;
    z-index: 10     !important;
  }
 
  #Carousel .carousel-control.left  { left: 24px  !important; }
  #Carousel .carousel-control.right { right: 24px !important; }
 
  #Carousel .ctrl-icon {
    width: 50px     !important;
    height: 50px    !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    border-radius: 50%  !important;
    display: flex       !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff         !important;
    font-size: 16px     !important;
    background: rgba(255,255,255,0.08) !important;
    -webkit-transition: background 0.25s, border-color 0.25s !important;
    transition:         background 0.25s, border-color 0.25s !important;
  }
 
  #Carousel .carousel-control:hover .ctrl-icon {
    background: #b94a32     !important;
    border-color: #b94a32   !important;
  }
 
  /* ══════════════════════════════════════
     INDICATORS
  ══════════════════════════════════════ */
  #Carousel .carousel-indicators {
    bottom: 22px    !important;
    margin-bottom: 0 !important;
    z-index: 10     !important;
  }
 
  #Carousel .carousel-indicators li {
    width: 10px     !important;
    height: 10px    !important;
    border-radius: 50% !important;
    background-color: rgba(255,255,255,0.30) !important;
    border: 2px solid rgba(255,255,255,0.30) !important;
    margin: 0 5px   !important;
    -webkit-transition: width 0.35s ease, border-radius 0.35s ease, background 0.3s !important;
    transition:         width 0.35s ease, border-radius 0.35s ease, background 0.3s !important;
    cursor: pointer !important;
  }
 
  #Carousel .carousel-indicators .active {
    width: 28px     !important;
    border-radius: 6px  !important;
    background-color: #b94a32 !important;
    border-color: #b94a32     !important;
  }
 
  /* ══════════════════════════════════════
     RESPONSIVE
  ══════════════════════════════════════ */
  @media (max-width: 991px) {
    #Carousel .carousel-inner            { height: 460px !important; }
    #Carousel .carousel-inner > .item   { height: 460px !important; }
    #Carousel .carousel-caption h1.tagline-animate  { font-size: 40px !important; }
    #Carousel .carousel-caption h2.tagline-animate2 { font-size: 15px !important; }
  }
 
  @media (max-width: 767px) {
    #Carousel .carousel-inner            { height: 360px !important; }
    #Carousel .carousel-inner > .item   { height: 360px !important; }
    #Carousel .carousel-caption h1.tagline-animate  { font-size: 28px !important; letter-spacing: 1px !important; }
    #Carousel .carousel-caption h2.tagline-animate2 { font-size: 13px !important; }
    #Carousel .carousel-control.left    { left: 6px  !important; }
    #Carousel .carousel-control.right   { right: 6px !important; }
    #Carousel .ctrl-icon                { width: 38px !important; height: 38px !important; font-size: 13px !important; }
  }



  /* Hidden state uses a class — avoids inline style specificity fights */
  #Carousel .hb-hidden {
    opacity: 0        !important;
    visibility: hidden !important;
    animation: none   !important;
  }