/* 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: 3px dashed #bbb;
  border-radius: 50%;
  animation: rotate-dash 60s linear infinite; /* Ensure this is working */
}

@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: 5; /* Ensure it stays above other elements */
}

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

/* Logos */
.logo {
  position: absolute;
  width: 30%;
  height: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease; /* Smooth animation */
}

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

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

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


/* 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 */
}


/* 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 #666; /* Bottom side of triangle for the arrow (darker color) */
  transform-origin: center; /* Ensures proper rotation */
  z-index: 3; /* Make sure it appears above the dashed circle but below logos */
}