/* Reset margin and padding for all elements, set box-sizing to border-box */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styles for font and alignment */
body {
  font-family: 'Roboto', sans-serif;
}

/* Style for the gallery wrapper */
.gallery-wrapper {
  display: flex; /* Use flexbox layout */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  min-height: 65vh; /* Minimum height of the viewport */
  background: #000 url('Cwgf.gif') no-repeat center/cover; /* Set background with fallback color */
}

/* Style for the rotating box */
.weird-box {
  position: relative;
  width: 100%;
  max-width: 400px; /* Limit width for responsiveness */
  height: 400px; /* Height set to auto for better responsiveness */
  transform-style: preserve-3d;
  animation: rotate-3d 50s linear infinite; /* Rotate the box infinitely */
}

/* Keyframes for the 3D rotation */
@keyframes rotate-3d {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

/* Pause the animation on hover */
.weird-box:hover {
  animation-play-state: paused;
}

/* Style for each span inside the rotating box */
.weird-box span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 72deg)) translateZ(300px); /* Adjusted distance for better 3D effect */
}

/* Style for the images inside each span */
.weird-box span img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ensure the image covers the span */
  height: 100%; /* Ensure the image covers the span */
  object-fit: contain; /* Ensure the full image is displayed */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Adds subtle shadow */
}

/* Responsive media query for smaller screens */
@media (max-width: 768px) {
  .weird-box {
    max-width: 300px;
    height: 300px;
  }
}

/* Style for additional images with 3D hover effect */
.page-image {
  width: 200px; /* Adjust width if needed */
  height: auto;
  border-radius: 10px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  perspective: 1000px;
  margin: 10px;
  display: inline-block;
}

.page-image:hover {
  transform: rotateY(15deg) rotateX(10deg) scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.image-row {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

/* Navbar and footer styles for consistency */
.topnav, .main-nav, footer {
  background-color: #333;
  color: #fff;
  text-align: center;
}

.topnav a, .main-nav a, footer p {
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
}

.topnav .icon, .main-nav .icon {
  display: none;
}

/* Mobile menu */
@media (max-width: 600px) {
  .topnav a:not(:first-child), .main-nav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon, .main-nav a.icon {
    float: right;
    display: block;
  }
}




.footer-band {
  background-color: black;
  color: white;
  padding: 15px 0;
  text-align: center;
}