/* === FIX: Make the header background white and visible === */
.header {
  background-color: #ffffff !important; /* Solid white background */
  position: fixed;                      /* Keep it on top while scrolling */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;                        /* Stay above all content */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Optional soft shadow */
}

/* === FIX: Add padding to body to prevent content from hiding under header === */
body {
  padding-top: 100px; /* Adjust if your header is taller or shorter */
}

/* === Optional: Menu dropdown fix === */
.menu-inner {
  background-color: #ffffff !important; /* Ensure dropdowns are also white */
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
/* === MODERN TECHY IMAGE TRANSITIONS === */
img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.6s ease, 
              filter 0.4s ease-in-out;
  display: block;
  transform-style: preserve-3d;
  perspective: 1000px;
}
/* === 3D Look and Border for Website Images === */
img {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border 0.3s ease;
  border: 2px solid transparent;
  border-radius: 10px;
  display: block;
  transform-style: preserve-3d;
}

/* Hover effect for 3D pop and neon border */
img:hover {
  transform: scale(1.05) rotateY(4deg) rotateX(2deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  border: 2px solid #00ffff; /* Neon cyan border */
}