body,
html {
  background-color: #1A4F7B;
}

body.active {
background: #ffffff;
}

.dot-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  grid-auto-rows: auto; /* Automatically size rows */
  gap: 24vw; /* Spacing between dots */
  width: 100%;
  height: 100%;
  justify-items: center; /* Center items horizontally within cells */
  align-items: center; /* Center items vertically within cells */
}

/* Place dots explicitly for 2-3-2 layout */
.dot:nth-child(1),
.dot:nth-child(2) {
  grid-column: span 2; /* Span two columns to center */
  justify-self: center; /* Center align within the spanning columns */
}

.dot:nth-child(3),
.dot:nth-child(4),
.dot:nth-child(5) {
  grid-column: auto; /* Take one column each in the middle row */
}

.dot:nth-child(6),
.dot:nth-child(7) {
  grid-column: span 2; /* Span two columns to center */
  justify-self: center; /* Center align within the spanning columns */
}

/* Dot styling */
.dot {
  width: 250px;
  height: 250px;
  background-color: #1A4F7B;
  border-radius: 4em;
  transition: transform 0.55s ease-in-out, opacity 0.75s ease-in-out;
  transform: rotate(-45deg);
  opacity: 0;

}

/* Grow effect for the transition circle */
.dot.transition-circle:not(.shrink) {
  transform: scale(50) rotate(-45deg) !important; /* Expands to fill the screen */
  z-index: 9999;
  opacity: 1;
}

/* Shrink effect */
.transition-circle.shrink {
  transform: scale(1) rotate(-45deg); /* Returns to original size */
}


.menu-section {
/* opacity: 0;*/
position: relative;
  transition: z-index 0.85s; /* Smooth fade in/out */
  z-index: 9999;
}

.menu-section.active {
  opacity: 1;
  z-index: 1;
  position: relative;
}

/* Initial positions for visual variation */
/*
.dot1 { top: -100px; left: -150px; }
.dot2 { top: 50px; left: 100px; }
.dot3 { top: 200px; left: -50px; }*/