/* Logo styling with higher specificity and !important */
.logo-image,
header .logo-image,
header a .logo-image,
header .flex-shrink-0 .logo-image,
.site-header .logo-image,
#site-header .logo-image {
  height: 1.5rem !important;
  width: auto !important;
  max-height: 1.5rem !important;
  max-width: none !important;
  aspect-ratio: 300 / 74 !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* Adjust logo size for different screen sizes with higher specificity */
@media (min-width: 640px) {
  .logo-image,
  header .logo-image,
  header a .logo-image,
  header .flex-shrink-0 .logo-image,
  .site-header .logo-image,
  #site-header .logo-image {
    height: 1.6rem !important;
    max-height: 1.6rem !important;
  }
}

@media (min-width: 768px) {
  .logo-image,
  header .logo-image,
  header a .logo-image,
  header .flex-shrink-0 .logo-image,
  .site-header .logo-image,
  #site-header .logo-image {
    height: 1.7rem !important;
    max-height: 1.7rem !important;
  }
}

@media (min-width: 1024px) {
  .logo-image,
  header .logo-image,
  header a .logo-image,
  header .flex-shrink-0 .logo-image,
  .site-header .logo-image,
  #site-header .logo-image {
    height: 1.8rem !important;
    max-height: 1.8rem !important;
  }
}

/* Adjust header padding to accommodate smaller logo */
header .flex.justify-between.items-center {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

@media (min-width: 768px) {
  header .flex.justify-between.items-center {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}