/* Fix for service icons to maintain consistent width */
.service-icon { 
  width: 100px !important; 
  height: 100px !important; 
  min-width: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.service-card:hover .service-icon {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
}

.service-icon img { 
  width: 60px !important; 
  height: 60px !important; 
  object-fit: contain !important;
  transition: transform 0.5s ease !important;
}

.service-card:hover .service-icon img {
  transform: rotate(5deg) scale(1.1) !important;
} 

/* Mobile menu overlay */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Ensure sidebar has proper z-index */
.sidebar {
  z-index: 999;
  transition: all 0.3s ease;
} 

/* Sidebar close button */
.sidebar-close {
  width: 40px;
  height: 40px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar-close:hover {
  background-color: var(--secondary);
  transform: rotate(90deg);
}

/* Keep toggle button visible above sidebar */
.toggle-sidebar {
  position: relative;
  z-index: 1000 !important;
}

/* Toggle button animation */
.toggle span {
  transition: all 0.3s ease !important;
  display: block !important;
}

/* Style for active toggle when menu is open */
.toggle-sidebar.active .toggle span:nth-child(1) {
  transform: rotate(45deg) translateY(6px) translateX(6px) !important;
}

.toggle-sidebar.active .toggle span:nth-child(2) {
  opacity: 0 !important;
}

.toggle-sidebar.active .toggle span:nth-child(3) {
  transform: rotate(-45deg) translateY(-6px) translateX(6px) !important;
}