/* =========================================================
   TOP HEADER BLOCK (LOGO & COMPONENTS)
   ========================================================= */
.rbk-top-header {
  background-color: #ffffff;
  /* Optional: Adds a subtle line to separate the header from the rest of the page */
  border-bottom: 1px solid #eaeaea; 
}

/* --- Logo Hover Animation --- */
.rbk-top-header img {
  transition: transform 0.3s ease;
  object-fit: contain;
}

.rbk-top-header a:hover img {
  transform: scale(1.02);
}

/* =========================================================
   MOBILE RESPONSIVENESS (Screens below 992px)
   ========================================================= */
@media (max-width: 991px) {
  
  /* Overrides the flex-row to stack the logo and components vertically */
  .rbk-top-header {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center;
    gap: 1.5rem;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Ensures the components (CTAs) sit side-by-side on mobile, but wrap if the screen gets too narrow */
  .rbk-top-header .d-flex.gap-3 {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap; 
  }
}