/* ... BEGINNING OF BACKGROUND SECTION ... */
/* ... BEGINNING OF BACKGROUND SECTION ... */
.background-section {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100vw;
  min-height: 240vh;
}

/* Bubbles */
.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 1; /* Vary opacity */
  filter: blur(30px); /* Blurry effect */
  animation: move 10s infinite alternate; /* Animation for movement */
  mix-blend-mode: hard-light; /* Hard light effect */
  z-index: 1; /* Set a lower z-index for bubbles */
  max-width: 80vw; /* Restrict width to 20% of viewport width */
  max-height: 80vh; /* Restrict height to 20% of viewport height */
}

/* Keyframes for bubble movement */
@keyframes move {
  0% {
    transform: translate(0, 0); /* Original position */
  }
  100% {
    transform: translate(
      calc(10px * (random() - 0.5)),
      calc(10px * (random() - 0.5))
    ); /* Slight movement */
  }
}

/* Fixed position and size bubbles */
.bubble.bubble1 {
  /*1ST RED BUBBLE ON 1ST EXPLANATION*/
  background: linear-gradient(
    135deg,
    rgba(128, 74, 237, 0.9),
    rgb(102, 48, 138)
  ); /* Diagonal gradient */
  width: 150px; /* Fixed size */
  height: 150px; /* Fixed size */
  opacity: 0.4;
  top: 30px; /* Updated Y position */
  left: 160 px; /* Updated X position */
  animation: float 20s infinite alternate; /* Animation for gentle movement */
}

/* Keyframes for bubble movement */
@keyframes float {
  0% {
    transform: translate(0, 0); /* Original position */
  }
  100% {
    transform: translate(200px, 100px); /* Slight movement */
  }
}

.bubble.bubble2 { /*middle text block*/
  background: radial-gradient(
    circle,
    #f05454 10%,
    #dfc492 100%
  ); /* Added a new color between yellow and coral red */
  width: 300px; /* Kept size for better visibility */
  height: 300px; /* Kept size for better visibility */
  mix-blend-mode: hard-light; /* Hard light effect */
  top: 15%;
  left: 25%;
  opacity: 0.7; /* Set opacity to 100% */
  z-index: 1; /* Ensure it appears above other elements */
}

.bubble.bubble3 { /*h1 purple gradient*/
  background: conic-gradient(
    rgba(0, 162, 232, 1) 0%,
    rgba(99, 44, 253, 1) 36%,
    rgba(59, 97, 212, 1) 52%,
    rgba(134, 174, 226, 1) 100%
  ); /* Angular gradient */
  width: 250px; /* Fixed size */
  height: 250px; /* Fixed size */
  opacity: 0.5; /* Set opacity */
  top: 10%; /* Positioning */
  left: 62%; /* Positioning */
  z-index: 1; /* Ensure it appears above other elements */
}

.bubble.bubble4 { /*tricolor bubble*/
  background: conic-gradient(
    rgb(62, 205, 253) 10%,
    rgb(125, 199, 23) 30%,
    rgb(238, 66, 209) 90%
  ); /* Purplish-pinkish angular gradient */
  width: 200px; /* Fixed size */
  height: 200px; /* Fixed size */
  opacity: 0.6; /* Set opacity */
  top: 24%; /* Positioning */
  left: 60%; /* Positioning */
  z-index: 1; /* Ensure it appears above other elements */
}

.bubble.bubble5 {
  background: conic-gradient(
    rgba(255, 105, 180, 1) 0%,
    rgb(20, 251, 255) 50%,
    rgb(0, 100, 128) 100%
  ); /* Purplish-pinkish angular gradient */
  width: 15px; /* Fixed size */
  height: 15px; /* Fixed size */
  opacity: 0.6; /* Set opacity */
  top: 10%; /* Positioning */
  left: 5%; /* Positioning */
  z-index: 1; /* Ensure it appears above other elements */
}

.bubble.bubble6 {
  background: conic-gradient(
    #f7b50f 100%,
    #f7b50f 100%,
    #86aee2 100%
  ); /* Corrected background color */
  width: 350px; /* Fixed size */
  height: 350px; /* Fixed size */
  opacity: 0.3; /* Set opacity */
  mix-blend-mode: hard-light; /* Hard light effect */
  top: 1%; /* Adjusted to move the bubble even higher */
  left: 90%; /* Positioning */
  z-index: 10; /* Increased z-index to ensure it appears above the header */
}

.bubble.bubble7 {
  background: conic-gradient(
    rgba(0, 162, 232, 1) 0%,
    rgba(99, 44, 253, 1) 36%,
    rgba(59, 97, 212, 1) 52%,
    rgba(134, 174, 226, 1) 100%
  ); /* Angular gradient */
  width: 800px; /* Fixed size */
  height: 800px; /* Fixed size */
  opacity: 0.5; /* Set opacity */
  top: 5%; /* Positioning */
  left: 90%; /* Positioning */
  z-index: 10; /* Ensure it appears above other elements */
}

/*ABOUT.HTML*/
.bubble.bubble8 {
  /* 1ST RED BUBBLE ON 2ND EXPLANATION - about the project */
  background: conic-gradient(
    rgba(0, 162, 232, 1) 0%,
    rgba(0, 255, 127, 1) 50%,
    rgba(0, 100, 255, 1) 100%
  );
  width: 200px;
  height: 200px;
  opacity: 0.15;
  top: 1%;
  left: 1%;
  z-index: 1;
}

.bubble.bubble9 {
  /* h1 gradient cyan - about the project */
  background: conic-gradient(
    rgba(255, 105, 180, 1) 0%,
    rgb(20, 173, 255) 50%,
    rgb(0, 100, 128) 100%
  );
  width: 200px;
  height: 200px;
  opacity: 0.6;
  top: 10%;
  left: 40%;
  z-index: 1;
}

.bubble.bubble10 {
  /* Blue BUBBLE ON EXPLANATION - about the project */
  background: linear-gradient(#ff5733 0%, #09adff 50%, #bf72f6 100%);
  width: 250px;
  height: 250px;
  opacity: 0.3;
  top: 25%;
  left: 15%;
  z-index: 1;
}

.bubble.bubble11 {
  /* 4TH RED BUBBLE ON 1ST EXPLANATION - about the project */
  background: radial-gradient(
    circle,
    #f05454 10%,
    #dfc492 100%
  ); /* Added a new color between yellow and coral red */
  width: 300px; /* Kept size for better visibility */
  height: 300px; /* Kept size for better visibility */
  mix-blend-mode: hard-light; /* Hard light effect */
  top: 18%;
  left: 13%;
  opacity: 0.6; /* Set opacity to 100% */
  z-index: 1; /* Ensure it appears above other elements */
}

/*MEMBERS.HTML*/
.bubble.bubble12 {
  /* 2ND RED BUBBLE ON 2ND EXPLANATION - about the project */
  background: conic-gradient(
    /* ... existing code ... */ rgb(3, 160, 53) 0%,
    /* Updated to a shade of #F05454 */ rgb(11, 213, 122) 50%,
    /* Lighter shade of #F05454 */ rgb(204, 255, 0) 100%
      /* Even lighter shade of #F05454 */
  );
  width: 150px;
  height: 150px;
  opacity: 0.4;
  top: 1%;
  left: 44%;
  z-index: 1;
}

.bubble.bubble13 {
  /* 4TH RED BUBBLE ON 1ST EXPLANATION - about the project */
  background: radial-gradient(circle, #f05454 10%, #dfc492 100%);
  width: 300px;
  height: 300px;
  mix-blend-mode: hard-light;
  top: 55%;
  left: 13%;
  opacity: 0.6;
  z-index: 1;
}

.bubble.bubble14 {
  /* 4TH RED BUBBLE ON 1ST EXPLANATION - about the project */
  background: radial-gradient(circle, #f05454 10%, #dfc492 100%);
  width: 280px;
  height: 280px;
  mix-blend-mode: hard-light;
  top: 85%;
  left: 13%;
  opacity: 0.6;
  z-index: 1;
}

/*RESEARCH-DETAILS.HTML*/
.bubble.bubble15 {
  /* 2ND RED BUBBLE ON 2ND EXPLANATION - about the project */
  background: conic-gradient(
    #de7ef1 0%,
    /* Updated to a shade of #F05454 */ rgb(1, 60, 111) 50%,
    /* Lighter shade of #F05454 */ rgb(158, 187, 42) 100%
      /* Even lighter shade of #F05454 */
  );
  width: 200px;
  height: 200px;
  opacity: 0.4;
  top: 10%;
  left: 43%;
  z-index: 1;
}

/*RESEARCH-PUBLICATIONS.HTML*/
.bubble.bubble17 {
  /* 2ND RED BUBBLE ON 2ND EXPLANATION - about the project */
  background: conic-gradient(
    rgb(188, 47, 176) 0%,
    rgba(168, 229, 37, 0.873) 50%,
    rgba(0, 100, 255, 1) 100%
  );
  width: 200px;
  height: 200px;
  opacity: 0.6;
  top: 10%;
  left: 40%;
  z-index: 1;
}

.bubble.bubble18 {
  /* 4TH RED BUBBLE ON 1ST EXPLANATION - about the project */
  background: radial-gradient(circle, #f05454 10%, #dfc492 100%);
  width: 300px;
  height: 300px;
  mix-blend-mode: hard-light;
  top: 18%;
  left: 11%;
  opacity: 0.6;
  z-index: 1;
}

/* BUBBLES FOR MOBILE ADJUSTMENTS */
@media screen and (max-width: 768px) {
  .bubble {
    max-width: 100vw;
    max-height: 100vh;
    overflow: visible;
  }

  /* Adjust background section height to be more reasonable */
  .background-section {
    min-height: 120vh;
    overflow: visible;
  }

  /* Reposition bubbles within the new height constraints */
  .bubble.bubble1 {
    top: 10%;
    left: 10%;
    width: 100px;
    height: 100px;
  }

  .bubble.bubble2 {
    top: 65%;
    left: 15%;
    width: 180px;
    height: 180px;
  }

  .bubble.bubble3 {
    top: 65%;
    left: 55%;
    width: 150px;
    height: 150px;
  }

  .bubble.bubble4 {
    top: 85%;
    left: 25%;
    width: 180px;
    height: 180px;
  }

  .bubble.bubble5 {
    top: 95%;
    left: 25%;
    width: 160px;
    height: 160px;
  }
  .bubble.bubble6{
    top: 135%;
    left: 45%;
    width: 160px;
    height: 160px;
  }
  .bubble.bubble7 {
    display: none; /* Hide on mobile */
  }
  /* Hide bubbles that would appear below the viewport */
  .bubble.bubble13,
  .bubble.bubble14,
  .bubble.bubble15,
  .bubble.bubble16,
  .bubble.bubble17,
  .bubble.bubble18 {
    display: none;
  }
}