.outer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}


.title-box {
  position: absolute;
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5vw;
  color: #fff;
  letter-spacing: 0.1em;
  opacity: 0.2;
}
.title-inno {
  font-family: "Anton", sans-serif;
  font-size: 6.5vw;
  background: linear-gradient(180deg, #fff, #000000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}
.logo {
  position: absolute;
  width: 7vw;
  height: 7vw;
  top: 30%;
  opacity: 0.5;
  z-index: 10;
}
.logo:hover {
  animation: bigger 0.6s infinite ease-in-out; /* Override default animation on hover */
  cursor: pointer;
  z-index: 10;
}
.circle0 {
  position: absolute;
  width: 85vw; /* Adjusts based on viewport width */
  height: 85vw; /* Same value as width to keep it a perfect circle */
  border-radius: 50%;
  border: 3px solid rgba(169, 169, 169, 0.2);
  clip-path: ellipse(42% 140% at 50% 60%);
}
.circle01 {
  position: absolute;
  width: 85vw; /* Adjusts based on viewport width */
  height: 85vw; /* Same value as width to keep it a perfect circle */
  border-radius: 50%;
  border: 3px solid rgba(169, 169, 169, 0.2);
  clip-path: ellipse(6.5% 140% at 57% 60%);
  transform: rotate(90deg);
}

.circle02 {
  position: absolute;
  width: 85vw; /* Adjusts based on viewport width */
  height: 85vw; /* Same value as width to keep it a perfect circle */
  border-radius: 50%;
  border: 3px solid rgba(169, 169, 169, 0.2);
  clip-path: ellipse(8.55% 140% at 71.2% 60%);
  transform: rotate(-89.75deg);
}

.circle1 {
  position: absolute;
  /* bottom: 0px; */
  width: 85vw; /* Adjusts based on viewport width */
  height: 85vw; /* Same value as width to keep it a perfect circle */
  border-radius: 50%;
  /* border: 2px solid rgba(169, 169, 169, 0.2); */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}

.circle2 {
  position: absolute;
  flex-direction: column;
  width: 55vw; /* Adjusts based on viewport width */
  height: 55vw; /* Same value as width to keep it a perfect circle */
  border-radius: 50%;
  border: 3px solid rgba(169, 169, 169, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  clip-path: ellipse(32% 140% at 50% 60%);
}

.circle2-alias {
  position: absolute;
  flex-direction: column;
  width: 55vw; /* Adjusts based on viewport width */
  height: 55vw; /* Same value as width to keep it a perfect circle */
  border-radius: 50%;
  border: 3px solid rgba(169, 169, 169, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  clip-path: ellipse(34% 140% at 56.2% 60%);
  transform: rotate(91deg);
}

.circle3 {
  position: relative;
  width: 30vw; /* Adjusts based on viewport width */
  height: 30vw; /* Same value as width to keep it a perfect circle */
  border-radius: 50%;
  border: 3px solid rgba(169, 169, 169, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  clip-path: ellipse(47% 100% at 50% 40%);
}
/* .circle1, .circle2, .circle3 {
    overflow: hidden;
  } */

.sanga-box,
.abhivyakta-box,
.vidyut-box,
.kaaryavarta-box,
.saahitya-box,
.yantrika-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.sanga-box{
  top: 40%;
  left: -4%;
  width: 9.5vw;
}

.abhivyakta-box{
  bottom: 23%;
  left: 0%;
  width:10.5vw;
}

.vidyut-box{
  top: 38%;
  right: -4%;
  width: 7.5vw;
}

.kaaryavarta-box{
  bottom: 23%;
  right: 0%;
  width: 7.5vw;
}
.yantrika-box{
  top: 23%;
  left: 25%;
  width: 4.5vw;
}
.saahitya-box{
  top: 25%;
  right: 22%;
  width: 6.5vw;
}
.sanga {
  animation: hover 3s infinite ease-in-out;
  animation-delay: 0s; /* No delay */
}

.abhivyakta {
  animation: hover 3s infinite ease-in-out;
  animation-delay: 0.5s; /* Slight delay */
}

.vidyut {
  animation: hover 3s infinite ease-in-out;
  animation-delay: 1s; /* More delay */
}
.saahitya {
  animation: hover 3s infinite ease-in-out;
  animation-delay: 1.5s; /* More delay */
}
.kaaryavarta {
  animation: hover 3s infinite ease-in-out;
  animation-delay: 1.8s; /* More delay */
}
.yantrika {
  animation: hover 3s infinite ease-in-out;
  animation-delay: 2.2s; /* More delay */
}

@keyframes hover {
  0%,
  100% {
    transform: translateY(0); /* At rest */
  }
  50% {
    transform: translateY(-2vw); /* Hover upwards */
  }
}

.sanga:hover,
.abhivyakta:hover,
.vidyut:hover,
.saahitya:hover,
.kaaryavarta:hover,
.yantrika:hover {
  animation: vibrate 0.6s infinite ease-in-out !important; /* Override default animation on hover */
}
@keyframes vibrate {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

.text {
  font-family: "Anton", sans-serif;

  font-size: 1.5vw;
  color: #fff;
  /* letter-spacing: 0.1em; */
  opacity: 0.4;
  text-align: center;
  padding-top: 5px;
}

@keyframes bigger {
  0%,
  100% {
    transform: scale(1); /* At rest */
  }
  50% {
    transform: scale(1.1); /* Hover upwards */
  }
}

.semi-circle {
  position: absolute;
  top: -2%;
  width: 8vw;
  height: 2vw;
  background-color: #081120;
  background-color: #164b8d;
}

@media (max-width: 500px) {
  .circle0 {
    width: 135vw;
    height: 135vw;
    transform: rotate(90deg);
    clip-path: ellipse(49% 140% at 50% 60%);
  }
  .circle01 {
    width: 135vw;
    height: 135vw;
  }
  .circle02 {
    width: 135vw;
    height: 135vw;
  }
  .circle2 {
    width: 95vw;
    height: 95vw;
  }
  .circle2-alias {
    width: 95vw;
    height: 95vw;
    clip-path: ellipse(25% 140% at 50% 60%);
    transform: rotate(91deg);
  }
  .circle3 {
    width: 55vw;
    height: 55vw;
  }
  .semi-circle {
    width: 15vw;
  }
  .title-inno {
    font-size: 10.5vw;
  }
  .text {
    font-size: 3vw;
  }
  .subtitle {
    font-size: 4vw;
    font-weight: 500;
    opacity: 0.3;
  }
  .logo {
    width: 15vw;
    height: 15vw;
    top: 10%;
  }

  .yantrika-box {
    top: 2%;
    left: 5%;
    width: 10vw;
  }
  .saahitya-box {
    top: 7%;
    right: 3%;
    width: 12vw;
  }

  .abhivyakta-box {
    bottom: 2%;
    left: 0%;
    width: 17vw;
  }
  .kaaryavarta-box {
    bottom: 4%;
    right: 2%;
    width: 13vw;
  }
  .sanga-box {
    top: -35%;
    left: 40%;
    width: 18vw;
  }

  .vidyut-box {
    top: 118%;
    right: 40%;
    width: 14vw;
  }
}