/* Additional custom styles beyond Tailwind CSS */

/* Custom blue color override #0047ab */
.text-blue-600 {
  color: #0047ab !important;
}

.hover\:text-blue-600:hover {
  color: #0047ab !important;
}

.bg-blue-600 {
  background-color: #0047ab !important;
}

.hover\:bg-blue-700:hover {
  background-color: #003580 !important;
}

.bg-blue-50 {
  background-color: #e6eef7 !important;
}

/* Grey accent color from logo #a5abb0 */
.text-grey-accent {
  color: #a5abb0 !important;
}

.bg-grey-accent {
  background-color: #a5abb0 !important;
}

.border-grey-accent {
  border-color: #a5abb0 !important;
}

/* Industrial texture backgrounds */
.texture-concrete {
  background-color: #f5f5f5;
  background-image: 
    repeating-linear-gradient(90deg, rgba(165, 171, 176, 0.03) 0px, transparent 1px, transparent 40px, rgba(165, 171, 176, 0.03) 41px),
    repeating-linear-gradient(0deg, rgba(165, 171, 176, 0.03) 0px, transparent 1px, transparent 40px, rgba(165, 171, 176, 0.03) 41px);
}

.texture-steel {
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  background-image: 
    linear-gradient(90deg, rgba(165, 171, 176, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(165, 171, 176, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

.texture-brushed {
  background: linear-gradient(to right, 
    #f8f9fa 0%, 
    #f1f3f5 25%, 
    #f8f9fa 50%, 
    #f1f3f5 75%, 
    #f8f9fa 100%);
  background-size: 200px 100%;
}

.hero-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/hero-background.gif?v=2');
  background-size: cover;
  background-position: center;
}

.service-card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

/* Mobile menu styles */
.mobile-menu {
  display: none;
}

.mobile-menu.active {
  display: block !important;
}

@media (max-width: 768px) {
  .mobile-menu {
    display: none;
  }
  
  .mobile-menu.active {
    display: block !important;
  }
  
}