/* === Red Barn Media Group - Global Styles - Revolution Upfitting === */
:root {
  --ru-navy: #001f39;
  --ru-blue: #00abea;
  --ru-blue-mid: #008dce; /* darkest brand blue that passes 3:1 on white — use for headings/accents on light backgrounds where --ru-blue fails contrast */
  --ru-red: #d50400;
  --ru-red-hover: #ff3733;
  --ru-white: #fff;
  --ru-explorer-stage: #e9ebee;   /* homepage vehicle explorer — left/stage panel + unselected tiles */
  --ru-explorer-options: #cfd8df; /* homepage vehicle explorer — right/option accordion panel */
}

/* A .row with gx-5 sets --bs-gutter-x: 3rem, giving the row -24px side margins —
   but .container only pads 12px, so the row hangs 12px past each edge. At >=576px
   the container's max-width leaves enough slack to absorb it; below that it
   becomes 12px of horizontal page scroll. Drop those rows to the default gutter
   on the smallest screens (columns are stacked there anyway, so nothing shifts). */
@media (max-width: 575.98px) {
  .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
}

body {
  width: 100%;
  /* min-height, NOT height: a fixed 100% caps body's height at one viewport, which
     ends the sticky nav's containing block and un-sticks it past the first block. */
  min-height: 100%;
  color: var(--ru-navy);
  font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  background-color: #fff;
}

html {
  width: 100%;
  min-height: 100%;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {font-weight: 800;text-transform:uppercase}
.bold,b {font-weight: 800;}
.semibold {font-weight: 700;}
.medium {font-weight: 500;}
.regular {font-weight: 400;}
.light {font-weight: 300;}

.xsmall {font-size: 12px;}

.semibold.h2{
  font-size: 42px!important;
}
.h3{
  font-size: 36px!important;
}
/* === Menu Styles :: BEGIN === */
.menu-container {
  background: var(--ru-navy);
  margin-top: 0rem !important;
  transition-duration: 0.25s;
  padding-top:1.5rem;
  padding-right:1rem;
  padding-bottom:1.5rem;
  padding-left:1rem;
}
/* xxl logo carries width/height (391x120, the SVG's viewBox ratio) so its box is
   reserved before the SVG loads — but a width attribute would also CAP it, where
   it used to stretch to its column (611px at 4K). Restore the fill. */
.ru-menu-logo {
  width: 100%;
}
.menu-container.shrink-menu {
  margin-top: 0rem !important;
  transition-duration: 0.25s;
  padding-top:1rem;
  padding-bottom:1rem;
}

.menu-container .container .row .col-12 nav.navbar-light {
  background: transparent !important;
  padding: 1rem;
}


.navbar-light .navbar-nav .nav-link {
  color: #fff !important;
  font-size: 1rem;
  font-weight:600;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:active {
  color: var(--ru-blue) !important;
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: #eee!important;
}
.dropdown-item:active {
    color: var(--ru-blue)!important;
    background-color: #eee!important;
}
.dropdown-toggle::after {
  display: none;
}
.menu-container .container-fluid.ru-logo-row {
  transition-duration: 0.25s;
}
.menu-container.shrink-menu .container-fluid.ru-logo-row {
  transition-duration: 0.25s;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*height: 125px;*/
    transition-duration: 0.25s;
}
.shrink-menu .navbar-nav {
    /*height: 100px;*/
    transition-duration: 0.25s;
}
.dropend .dropdown-item::after {
  display: none;
}
.nav-fill .nav-item .dropdown-item {
  text-align: left!important;
    font-weight: 400;
}
.ru-mega-dropdown-menu a.list-group-item{
    border-left: 3px solid var(--ru-blue) !important;
    border-radius: 0.125rem;
}
.ru-mega-dropdown-menu a.list-group-item:hover {
    background: rgb(0,31,57);
    background: linear-gradient(45deg, rgba(0,31,57,1) 0%, rgba(32,68,130,1) 100%);
}
.ru-mega-dropdown-menu a.list-group-item h6 {color:var(--ru-navy)!important;}
.ru-mega-dropdown-menu a.list-group-item:hover h6 {color:#fff!important;}
.ru-mega-dropdown-menu a.list-group-item:hover p {color:#fff!important;}
/* Laptop widths (desktop menu, below 1920): the narrower columns wrap each
   description to 3+ lines and push the dropdown past short screens. Cap each at two
   lines, and cap the dropdown to the viewport as a safety net. */
@media (min-width: 1400px) {
  /* Anchor the mega dropdown to the sticky header (not the <nav>) so it opens
     at the header's bottom edge at every width and in the shrunk state.
     left/width reproduce the nav column: container padding 1rem + gutter
     0.75rem, col-2 / col-10 of the row (100% - 2rem). */
  .menu-container nav.navbar {
    position: static;
  }
  .menu-container .navbar-nav .dropdown-menu {
    top: 100%;
    left: calc(1.75rem + (100% - 2rem) / 6);
    width: calc((100% - 2rem) * 5 / 6 - 1.5rem) !important;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
  }
}
@media (min-width: 1400px) and (max-width: 1919.98px) {
  .ru-mega-dropdown-menu a.list-group-item h6 {
    font-size: 0.875rem;
  }
  .ru-mega-dropdown-menu a.list-group-item p {
    font-size: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

li.nav-item .btn {
      padding: 0.75rem 1rem !important;
      font-weight: 600;
      transition-duration: 0.25s;
      border-radius: 0.625rem;
      font-size: 1rem;
  }
/* === Menu Styles :: END === */
/* === Button Styles :: BEGIN === */
.btn {
  padding: 0.75rem 1.25rem !important;
    font-weight: 700;
  transition-duration: 0.25s;
  border-radius: 0.625rem;
}
.btn.btn-sm {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.85rem !important;
}
.btn.btn-lg {
  padding: 1rem 1.5rem !important;
  font-size: 1rem !important;
}
.btn.btn-xl {
  padding: 1.25rem 1.75rem !important;
  font-size: 1.75rem !important;
}
.btn-danger {
  color: #fff;
  background: var(--ru-red);
  border-color: var(--ru-red);
}
.btn-danger:hover {
  color: #fff;
  background: var(--ru-red-hover);
  border-color: var(--ru-red);
}
.btn-outline-danger {
  color: var(--ru-red);
  background: transparent;
  border-color: var(--ru-red);
}
.btn-outline-danger:hover {
  color: #fff;
  background: var(--ru-red-hover);
  border-color: #fff;
}

.btn-navy {
  color: #fff;
  background: var(--ru-navy);
  border-color: var(--ru-navy);
}
/* navy hover goes light-blue with NAVY text — white on #00abea is only 2.6:1 */
.btn-navy:hover {
  color: var(--ru-navy);
  background: var(--ru-blue);
  border-color: var(--ru-blue);
}
/* brand light-blue button (overrides Bootstrap's default teal .btn-info).
   Navy label, not white: navy on #00abea is 6.3:1, white would be 2.6:1. */
.btn-info {
  color: var(--ru-navy);
  background: var(--ru-blue);
  border-color: var(--ru-blue);
}
.btn-info:hover {
  color: var(--ru-navy);
  background: #fff;
  border-color: #fff;
}
.btn-outline-info {
  color: var(--ru-blue);
  background: transparent;
  border-color: var(--ru-blue);
}
.btn-outline-info:hover {
  color: var(--ru-navy);
  background: var(--ru-blue);
  border-color: var(--ru-blue);
}
.btn-outline-navy {
  color: var(--ru-navy);
  background: transparent;
  border-color: var(--ru-navy);
}
.btn-outline-navy:hover {
  color: #fff;
  background: var(--ru-navy);
  border-color: var(--ru-navy);
}
.btn-outline-light {
  color: #fff;
  background: transparent;
  border-color: #fff;
}
.btn-outline-light:hover {
  color: var(--ru-navy);
  background: #fff;
  border-color: #fff;
}
/* === Button Styles :: END === */
/* === Link Styles :: BEGIN === */
/* brand default for unclassed body links — overrides Bootstrap's blue */
a {
    color: var(--ru-blue-mid);
}
a:hover {
    color: var(--ru-navy);
}
/* links on dark surfaces inherit a light-blue that clears WCAG AA on navy (6.3:1),
   and go white on hover — the page-level navy hover would be invisible here */
.ru-banner-process-bg a:not(.btn),
.ru-banner-navy-rect-bg a:not(.btn),
.bg-gradient-navy-red a:not(.btn),
.bg-dark a:not(.btn) {
    color: var(--ru-blue);
}
.ru-banner-process-bg a:not(.btn):hover,
.ru-banner-navy-rect-bg a:not(.btn):hover,
.bg-gradient-navy-red a:not(.btn):hover,
.bg-dark a:not(.btn):hover {
    color: #fff;
}
/* ...but a white card sitting inside a dark band is a LIGHT surface again,
   so links inside it revert to the on-white treatment */
.ru-banner-process-bg .card a:not(.btn),
.ru-banner-navy-rect-bg .card a:not(.btn),
.bg-gradient-navy-red .card a:not(.btn),
.bg-dark .card a:not(.btn) {
    color: var(--ru-blue-mid);
}
.ru-banner-process-bg .card a:not(.btn):hover,
.ru-banner-navy-rect-bg .card a:not(.btn):hover,
.bg-gradient-navy-red .card a:not(.btn):hover,
.bg-dark .card a:not(.btn):hover {
    color: var(--ru-navy);
}
a.link-body {
    color: var(--ru-navy);
    text-decoration: none !important;
}
a.link-body:hover {
    color: var(--ru-blue);
    text-decoration: underline;
}
/* === Link Styles :: END === */
/* === Color Styles :: BEGIN === */
.text-danger {color:var(--ru-red)!important}
.bg-danger {background: var(--ru-red)!important}
.border-danger {border-color:var(--ru-red)!important}

.text-info {color:var(--ru-blue)!important}
.bg-info {background:var(--ru-blue)!important}
.border-info {border-color:var(--ru-blue)!important}

.text-blue {color:var(--ru-blue-mid)!important}

.text-dark {color:var(--ru-navy)!important}
.bg-dark {background: var(--ru-navy)!important}
.border-dark {border-color:var(--ru-navy)!important}

.text-666 {color:#666!important}
/* === Color Styles :: END === */
/* === Footer Styles :: BEGIN === */
footer {
    background: #000;
}
/* === Footer Styles :: END === */
/* === Lightbox Gallery :: BEGIN === */
section.photo-gallery .gallery-img {
    display: none;
}
section.photo-gallery .gallery-img.show {
    display: block;
}
:root {
  --lightbox: rgb(0 0 0 / 0.75);
  --carousel-text: #fff;
}

@keyframes zoomin {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.gallery-item {
  display: block;
}

.gallery-item img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s;
}

.gallery-item:hover img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}

.lightbox-modal .modal-content {
  background-color: var(--lightbox);
}

.lightbox-modal .btn-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.25rem;
  z-index: 10;
  filter: invert(1) grayscale(100);
}

.lightbox-modal .modal-body {
  display: flex;
  align-items: center;
  padding: 0;
}

.lightbox-modal .lightbox-content {
  width: 100%;
}

.lightbox-modal .carousel-indicators {
  margin-bottom: 0;
}

.lightbox-modal .carousel-indicators [data-bs-target] {
  background-color: var(--carousel-text) !important;
}

.lightbox-modal .carousel-inner {
  width: 75%;
}

.lightbox-modal .carousel-inner img {
  animation: zoomin 10s linear infinite;
}

.lightbox-modal .carousel-item .carousel-caption {
  right: 0;
  bottom: 0;
  left: 0;
  padding-bottom: 2rem;
  background-color: var(--lightbox);
  color: var(--carousel-text) !important;
}

.lightbox-modal .carousel-control-prev,
.lightbox-modal .carousel-control-next {
  width: auto;
}

.lightbox-modal .carousel-control-prev {
  left: 1.25rem;
}

.lightbox-modal .carousel-control-next {
  right: 1.25rem;
}

@media (min-width: 1400px) {
  .lightbox-modal .carousel-inner {
    max-width: 60%;
  }
}
/*
[data-bs-theme = "dark"] .lightbox-modal .carousel-control-next-icon,
[data-bs-theme = "dark"] .lightbox-modal .carousel-control-prev-icon {
    filter: none;
}
*/
.btn-fullscreen-enlarge,
.btn-fullscreen-exit {
  position: absolute;
  top: 1.25rem;
  right: 3.5rem;
  z-index: 10;
  border: 0;
  background: transparent;
  opacity: .6;
  font-size: 1.25rem;
}

.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.035em;
  fill: currentcolor;
}
/* === Lightbox Gallery :: END === */
/* === Utility Styles :: BEGIN === */
.card.underline-hover-effect h4::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background-color: var(--ru-blue);
  transition: width ease .5s;
}
.card.underline-hover-effect.ru-gradient-card h4::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background-color: rgba(255,255,255,0.5);
  transition: width ease .5s;
}
.card.underline-hover-effect:hover h4::after {
  width: 100%;
}
a img.shadow {
    transition-duration: 0.25s;
}
a:hover img.shadow {
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25)!important;
    transition-duration: 0.25s;
}
/* === Logo Scroll Styles :: BEGIN === */
.logo-slider {
height: fit-content;
position: relative;
width: 100%;
display: grid;
place-items: center;
overflow: hidden;
}
.logo-slider::before{
left:0;
top:0;
}
.logo-slider::after{
right:0;
top:0;
transform:rotateZ(180deg);
}
/* IMPORTANT CODE BELOW */
/* 18 slides = 3 sets of 6 brands; loop shifts exactly one set (6 x 250px) for a seamless repeat */
.logo-slide-track {
width: calc(250px * 18);
display: flex;
animation: scroll 25s linear infinite;
justify-content: flex-start;
}
.logo-slide {
width: 250px;
height: 100px;
display: grid;
place-items: center;
transition:0.5s;}
.logo-slide img {
width: auto;
height: auto;
max-width: 200px;
max-height: 85px;
object-fit: contain;}
.logo-slide:hover{transform:scale(1.1)}
@keyframes scroll {
0% {transform: translateX(0px);}
100% {transform: translateX(calc(-250px * 6));}
}
/* === Logo Scroll Styles :: END === */
.carousel-indicators .active {
    opacity: 1;
    background-color: var(--ru-blue) !important;
}
/* === Utility Styles :: END === */
@media (max-width:1550px) {
    .navbar-light .navbar-nav .nav-link {
        color: #fff !important;
        font-size: 0.85rem;
        font-weight: 600;
    }
    li.nav-item .btn {
          padding: 0.5rem 1rem !important;
          font-size: 0.85rem;
     }
}
@media (max-width:1400px) {
    .menu-container {
      transition-duration: 0.25s;
      padding-left: 3rem;
      padding-right:3rem;
    }

  .navbar-light .navbar-nav .nav-link {
      font-size: 1.25rem;
      color: var(--ru-navy) !important;
  }
  
  .offcanvas {
      width: 75vw !important;
  }
  .offcanvas-body{padding:1.5rem;}
  
  .nav-fill .nav-item, .nav-fill>.nav-link {
      text-align: left;
  }
  
}
@media (max-width:1200px) {
    .menu-container {
      margin-top: 0rem !important;
      transition-duration: 0.25s;
    }
    
  .navbar-nav {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: fit-content;
      transition-duration: 0.25s;
  }
  .shrink-menu .navbar-nav {
      height: fit-content;
      transition-duration: 0.25s;
  }
  
  .rotate-at-mobile {
      transform: rotate(90deg);
  }
}

@media (max-width:991px) {
    .offcanvas {
          width: 90vw !important;
      }
      
}

@media (max-width:767px) {
    .menu-container {
        transition-duration: 0.25s;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width:576px) {
    
}

@media (max-width:450px) {
    
}