:root {
  --brand-color: #000097;
  --brand-hover: #0033cc;
}
body {
  background-color: #f8f9fa;
}
.text-brand {
  color: var(--brand-color);
}
.bg-brand {
  background-color: var(--brand-color);
}
.btn-brand {
  background: linear-gradient(to right, var(--brand-color), #2563eb);
  color: white;
  border: none;
}
.btn-brand:hover {
  background: linear-gradient(to right, var(--brand-hover), #1d4ed8);
  color: white;
}
.navbar-custom {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  border-radius: 0.5rem;
}
.hero-section {
  background: linear-gradient(to bottom right, var(--brand-color), #1d4ed8, #1e3a8a);
  border-radius: 1rem;
  min-height: 500px;
}
.footer-section {
  background: linear-gradient(to bottom right, var(--brand-color), #1d4ed8, #1e3a8a);
  border-radius: 0.5rem;
}
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--brand-color);
  color: white;
}
/* --- Custom HTML/CSS Logo Styles --- */
.brand-logo {
  text-decoration: none !important;
  user-select: none;
  transition: transform 0.2s ease-in-out;
}
.brand-logo:hover {
  transform: scale(1.02);
}
/* Dynamic protection/car silhouette icon */
.logo-icon-wrapper {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-shape {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--brand-color) 0%, #2563eb 100%);
  border-radius: 8px 18px 8px 18px; /* Dynamic leaf/shield shape */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 151, 0.2);
  position: relative;
  transition: transform 0.3s ease;
}
.brand-logo:hover .logo-shape {
  transform: rotate(10deg);
}
/* Inner accent mark representing roads/protection */
.logo-inner-line {
  width: 14px;
  height: 14px;
  border-left: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: rotate(-45deg) translate(2px, -2px);
  opacity: 0.9;
}
/* Typography layout */
.logo-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-title {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--brand-color);
  letter-spacing: -0.5px;
}
.logo-subtitle {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #4b5563; /* Subtle slate gray for contrast */
  letter-spacing: 2px; /* Tracked out for a premium agency aesthetic */
  margin-top: 1px;
}
/* --- Custom HTML/CSS Logo Styles for Footer (Dark Background) --- */
.brand-logo-footer {
  user-select: none;
}
/* Crisp white icon base to cleanly contrast against the deep blue footer gradient */
.logo-shape-footer {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 8px 18px 8px 18px; /* Perfectly matches the header shape */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
/* Inverted internal line utilizing the main brand color */
.logo-inner-line-footer {
  width: 14px;
  height: 14px;
  border-left: 3px solid var(--brand-color);
  border-bottom: 3px solid var(--brand-color);
  transform: rotate(-45deg) translate(2px, -2px);
}
/* Bright white main brand text */
.logo-title-footer {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: -0.5px;
}
/* Soft, glowing light blue subtitle for high legibility */
.logo-subtitle-footer {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #93c5fd; /* Soft premium blue accent */
  letter-spacing: 2px;
  margin-top: 1px;
}