@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');

/* General body styling */
body {
  
  font-family: 'Poppins';
  background-color: #000;
  margin: 0;
  padding: 0;
}







/* Outer circle styling */
.outer-circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer-circle::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  opacity: 0.2; /* Adjust transparency */
  background: linear-gradient(90deg, #00B000, #23A1EA);
  transition: transform 0.5s ease, opacity 0.3s ease; /* Add scale and opacity transition */
  transform: scale(1); /* Initial state */
}

.outer-circle:hover::before {
  opacity: 0; /* Fades out */
  transform: scale(0); /* Zoom-in effect to close */
}


/* Inner circle styling */
.inner-circle {
  width: 150%;
  height: 150%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  justify-content: center; /* Centers image horizontally */
  align-items: center;
}
.inner-circle img {
  padding-top: 5%;
  width: 100%; /* Ensures the image scales properly */
  height: 100%; /* Prevents overflow */
  object-fit: contain; /* Maintains aspect ratio */
}
/* Dot styling */
/* Keep dots fully visible */
.dot {
  width: 20px;
  height: 20px;
  background-color: #0EAA5F;
  border-radius: 50%;
  position: absolute;
  transform-origin: center;
  cursor: pointer;
  z-index: 999; /* Ensure dots are above everything */
}


      
      .content span{
        color: #00B000;
      }

      .content-images p{
        padding-left: 3%;
        color: #00B000;
      }

      .content-images img{
        padding-left: 3%;
        width: 30%;
      }
      .content-images{
        border-left: 3px solid gray;
        margin-top: 70%;
      }
      .content p{
        font-size: 16px;
      }
      

      .tooltip-content {
        display: inline-flex;
        align-items: center;
      }
      
      .tooltip-content img {
        border-radius: 0% !important;
      }
      
      .tooltip-content span {
        font-size: 16px; /* Adjust text size */
        color: white; /* Adjust text color */
        font-weight: 600;
      }
      
      .content {
        margin-top: 5%;
        border-left: 3px solid gray;
        padding-left: 15px; /* Optional: Add padding for better spacing */
      }
      


      //

      .image-container {
        display: inline-block;
        
        border: 5px solid #000; /* Adjust the border color and size */
        margin: 10px;
      }
      
    /* Position dots around the circle */
    .dot:nth-child(1) { top: 91%; left: 74%; }  /* Center dot */
    .dot:nth-child(2) { top: 9%;
      left: 80%; }  /* Top */
    .dot:nth-child(3) { top: 30%; left: 95%; }  /* Top-right */
    .dot:nth-child(4) { top: 53%; left: 98%; }  /* Right */
    .dot:nth-child(5) { top: 74%; left: 91%; }  /* Bottom-right */
    .dot:nth-child(6) { top: 90%; left: 21%; }  /* Bottom */
    .dot:nth-child(7) { top: 68%; left: 2%; }  /* Bottom-left */
    .dot:nth-child(8) { top: 39%; left: -1%; }  /* Left */
    .dot:nth-child(9) { top: 12%; left: 13%; }  /* Top-left */

    .dot:nth-child(2)::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30px;
      height: 30px;
      background-color: #AAF6AA;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
      animation: blink 1.0s infinite alternate;
    }
    
    @keyframes blink {
      0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
      100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
    }
    

/* Hide all content items by default */
.content-item {
  display: none;
}

.content-item.active {
  display: block;
  color: white;
}

.hero-section {
  background-image: url('./images/bgcolor.webp');
  background-size: cover; /* Ensures the image fully covers the section */
  background-position: center; /* Keeps it centered */
  background-repeat: no-repeat; /* Prevents tiling */
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh ; /* Ensures it fills the viewport */
  height: auto; /* Allows flexibility */
}


/* When navbar toggle is active */
.hero-section.expanded {
  min-height: 150vh; /* Increase height when menu opens */
}




.second-column {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}



/* Tooltip styling */




/* Optional: Adjust the arrow positioning */
.tooltip-arrow {
  display: none !important; /* Hides the arrow if not needed */
}

.tooltip-inner {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #242323; /* Black background for the tooltip */
  color: white; /* White text for better readability */
  text-align: left;
  max-width: 100%; /* Optional: limit the tooltip width */
  border: 2px solid transparent; /* Transparent border to allow the gradient to show */
  border-image: linear-gradient(70deg, #FFFFFF, #242323) 1; /* Gradient from black to white */
}




.tooltip-inner img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  border-radius: 50%; /* Circular image */
}

.tooltip-inner p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

#content-display {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start; /* Ensures left alignment if needed */
}
#content-display h2{
  color:#23A1EA ;
}
.logowidth{
  width: 15% !important;
}
.logowidth1{
  width: 44% !important;
}



/* Default styles (for large screens) are already defined */
@media (min-width: 1024px) and (max-width: 1440px) {

  .circle {
    margin-top: 5%;
  }
}

@media (min-width: 1600px) and (max-width: 2560px) {


  .circle {
    margin-top: 10%;
    max-width: 600px !important;
    max-height: 600px !important;
  }
  .right-video {
    width: 131% !important;
    height: 122% !important;
  }
  
  .content-item{
    padding-left: 17% !important;
    padding-top: 50%;
    padding-left: 15%;
  }
.navbar img{
  width: 20%;
}
.nav-links a{
  font-size: 20px;
}
.navbar{
  margin:10px 10px 10px 155px ;
}
.inner-circle img{
  height: 98vh;
  width: 110% !important;
}




  

  .outer-circle::before {
    width: 500px !important;
    height: 500px !important;
  }
  #content-display{
    justify-content: center;
    align-items: center;
  }

}


/* Medium devices (tablets, 768px and up) */
@media (max-width: 1439px) {
  .circle {
    height: 450px;
    width: 450px;
  }

  .outer-circle {
    width: 260px;
    height: 260px;
  }

  .outer-circle::before {
    width: 320px;
    height: 320px;
  }

  .inner-circle {
    width: 120%;
    height: 125%;
  }

  .dot {
    width: 16px;
    height: 16px;
  }

  .tooltip-inner img {
    width: 20px;
    height: 20px;
  }



  .content-images img {
    width: 30%;
  }

  .logowidth {
    width: 20% !important;
  }
  .content-images {
    border-left: 3px solid gray;
    margin-top: 35%;
  }
  .content-item{
    margin-top: 5%;
  }


}

/* Small devices (phones, 576px and up) */
@media (max-width: 768px) {
  .circle {
    height: 350px;
    width: 350px;
    margin: 0 auto; /* Center the circle */
  }

  .outer-circle {
    width: 180px;
    height: 180px;
  }

  .outer-circle::before {
    width: 300px;
    height: 300px;
  }

  .inner-circle {
    width: 85%;
    height: 85%;
  }

  .dot {
    width: 12px;
    height: 12px;
  }

  .tooltip-inner img {
    width: 15px;
    height: 15px;
  }

  #content-display {
    margin-top: 20px; /* Add space between the circle and content */
    padding-left: 5px;
    text-align: center; /* Center-align content */
  }

  .content {
    margin-top: 20px;
    padding-left: 5px;
  }

  .content-images img {
    width: 60%;
  }

  .logowidth {
    width: 25% !important;
  }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 576px) {
  .circle {
    height: 250px;
    width: 250px;
    margin: 0 auto; /* Center the circle */
  }

  .outer-circle {
    width: 150px;
    height: 150px;
  }

  .outer-circle::before {
    width: 250px;
    height: 250px;
  }

  .inner-circle {
    width: 80%;
    height: 80%;
  }

  .dot {
    width: 10px;
    height: 10px;
  }

  .tooltip-inner img {
    width: 12px;
    height: 12px;
  }

  #content-display {
    margin-top: 30px; /* Add more space for smaller screens */
    text-align: center;
  }

  .content {
    margin-top: 30px;
    padding-left: 5px;
    text-align: center; /* Align content to center for mobile */
  }

  .content-images img {
    width: 70%;
  }

  .logowidth {
    width: 30% !important;
  }
 
  .navbar-toggler-icon {
    width: 2.5em !important;
    height: 0% !important;
  }
}



/* Maintain specific space for the bars */
#bars-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px; /* Fixed space for the bars */
  overflow: hidden; /* Prevents layout shift */
}

/* Bars animation applies ONLY inside #bars-container */
#bars {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bar {
  background: white;
  height: 5px;
  width: 3px;
  margin: 0px 4px;
  border-radius: 5px;
  animation: sound 0ms -600ms linear infinite alternate;
}

/* Animation Keyframes */
@keyframes sound {
  0% { opacity: .35; height: 5px; }
  100% { opacity: 1; height: 20px; }
}

/* Different durations for a dynamic effect */
.bar:nth-child(1)  { animation-duration: 474ms; }
.bar:nth-child(2)  { animation-duration: 433ms; }
.bar:nth-child(3)  { animation-duration: 407ms; }
.bar:nth-child(4)  { animation-duration: 458ms; }
.bar:nth-child(5)  { animation-duration: 400ms; }
.bar:nth-child(6)  { animation-duration: 427ms; }
.bar:nth-child(7)  { animation-duration: 441ms; }
.bar:nth-child(8)  { animation-duration: 419ms; }
.bar:nth-child(9)  { animation-duration: 487ms; }
.bar:nth-child(10) { animation-duration: 442ms; }

/* Ensuring <a> tag is unaffected */
.jbgpt {
  display: block;
  text-align: center;
}
.jbgpt {
  border-right: 2px solid black; /* Cursor effect */
}
#dynamic-text{
  font-weight: 600;
  color:  #00B000;
}