/* General Reset */
body {
  font-family: Arial, sans-serif;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding-top: 55px;
}

.responsive-container {
  width: 100vw;
  max-width: 640px; /* Utilize more space for larger screens */
  height: auto;
  aspect-ratio: 1;
}

.circle-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Dashed Outer Circle */
.outer-circle {
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  transform-origin: center;
  border: 2px dashed #666666;
  border-radius: 50%;
  animation: rotate-dash 60s linear infinite; /* Ensure this is working */
  z-index: 1; /* Lower z-index for the dashed circle */
}

@keyframes rotate-dash {
  0% {
    transform: rotate(0deg); /* Start position */
  }
  100% {
    transform: rotate(360deg); /* Full rotation */
  }
}

/* Central Logo */
.center-logo {
  position: absolute;
  width: 15%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Ensure central logo is above other logos */
}

.center-logo img {
  width: 100%;
  height: auto;
}

/* Logos */
.logo {
  position: absolute;
  width: 30%;
  height: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth animation for zoom and opacity */
  opacity: 0.6; /* Default opacity for logos */
  z-index: 5; /* Ensure all logos are above the dashed circle */
}

.logo:hover {
  transform: translate(-50%, -50%) scale(1.2); /* Zoom on hover */
  opacity: 1; /* Full opacity on hover */
}

.logo img {
  width: 100%;
  height: auto;
}

/* Correctly Positioned Logos - 9 evenly spaced */
.logo:nth-child(3) { top: 5%; left: 50%; z-index: 6; }  /* 12 o'clock */
.logo:nth-child(4) { top: 17.5%; left: 85%; z-index: 6; } /* 1:30 o'clock */
.logo:nth-child(5) { top: 37.5%; left: 100%; z-index: 6; } /* 3 o'clock */
.logo:nth-child(6) { top: 62.5%; left: 100%; z-index: 6; } /* 4:30 o'clock */
.logo:nth-child(7) { top: 82.5%; left: 85%; z-index: 6; } /* 6 o'clock */
.logo:nth-child(8) { top: 95%; left: 50%; z-index: 6; } /* 7:30 o'clock */
.logo:nth-child(9) { top: 82.5%; left: 15%; z-index: 6; }  /* 9 o'clock */
.logo:nth-child(10) { top: 62.5%; left: 5%; z-index: 6; } /* 10:30 o'clock */
.logo:nth-child(11) { top: 37.5%; left: 5%; z-index: 6; } /* 11:30 o'clock */
.logo:nth-child(12) { top: 17.5%; left: 15%; z-index: 6; }  /* Slightly above center */

/* Container for Small Green Circles */
.small-circles-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Styling for Small Green Circles */
.small-circle {
  position: absolute;
  width: 20px; /* Diameter of the circle */
  height: 20px; /* Diameter of the circle */
  background-color: #b2df7a; /* Green color */
  border-radius: 50%; /* Makes it a perfect circle */
  transform: translate(-50%, -50%); /* Centers the circle */
  z-index: 4; /* Ensure circles are below the logos but above the dashed circle */
}

/* Arrows between logos */
.arrow {
  position: absolute;
  width: 0; /* No width for a triangle */
  height: 0; /* No height for a triangle */
  border-left: 10px solid transparent; /* Left side of triangle */
  border-right: 10px solid transparent; /* Right side of triangle */
  border-bottom: 10px solid #b2df7a; /* Bottom side of triangle for the arrow (darker color) */
  transform-origin: center; /* Ensures proper rotation */
  z-index: 3; /* Arrows are below logos but above circles */
}

/* General Reset */
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling */
  background-color: black; /* Optional, to make the trail more visible */
}

.trail {
  position: absolute;
  width: 15px; /* Size of the trail */
  height: 15px;
  background-color: rgba(255, 255, 255, 0.8); /* White color, can be adjusted */
  border-radius: 50%; /* Make it circular */
  pointer-events: none; /* Prevent the trail from interfering with other elements */
  transform: translate(-50%, -50%); /* Center the trail at the mouse pointer */
  animation: trail-animation 1s ease-out forwards;
}

@keyframes trail-animation {
  0% {
    transform: translate(-50%, -50%) scale(1); /* Start normal size */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.5); /* Shrink as it fades */
    opacity: 0; /* Fade out */
  }
}