/* Base circle style: all circles share this shape and behavior */
.circle{
  border-radius: 50%;
  background-color: #e1d3b8;
  position: absolute;
  z-index: -2;
  overflow: hidden;
  aspect-ratio: 1;
}

/* --- MASTHEAD CIRCLES --- */
#circle_mast_1{
  width: 15%;
  left:50%;
  top:25%;
  background-color: #d9e0c9; /* Light pastel background */
}
#circle_mast_2{
  width: 30%;
  left:70%;
  top:100%;
  background-color: #cdd3bf;
}
#circle_mast_3{
  width: 38%;
  left:0%;
  top:25%;
  background-color: #e0e6cf;
}

/* --- BLOG PAGE CIRCLES --- */
#circle_blog1{
  width: 25%;
  left:5%;
  top:10%;
}
#circle_blog2{
  top:60%;
  left:35%;
  width: 15%;
}
#circle_blog3{
  top:80%;
  left:10%;
  width: 20%;
}

/* Ensures text appears above the circles */
.text_index{
  z-index: 2;
  position: relative;
}

/* --- FIRST SECTION CIRCLES --- */
#circle_first3{
  width: 20%;
  left:50%;
  top:0%;
  background-color: #d9e0c9;
}
#circle_first2{
  width: 15%;
  left:78%;
  top:100%;
  background-color: #cdd3bf;
}
#circle_first1{
  width: 40%;
  left:0%;
  top:25%;
  background-color: #e0e6cf;
}

/* --- NEWS PAGE CIRCLES --- */
#circle_news1{
  width: 10%;
  left:50%;
  top:25%;
  background-color: #d9e0c9;
}
#circle_news2{
  width: 18%;
  left:80%;
  top:100%;
  background-color: #cdd3bf;
}
#circle_news3{
  width: 30%;
  left:0%;
  top:25%;
  background-color: #e0e6cf;
}

/* --- HYDRA PAGE CIRCLES --- */
#circle_hydra1{
  width: 10%;
  left:85%;
  background-color: #a0aa86;
}
#circle_hydra2{
  width: 20%;
  left:70%;
  margin-top: 10%;
  background-color: #a0aa86;
}
#circle_hydra3{
  width: 12%;
  left:78%;
  margin-top: 25%;
  background-color: #e3e8d7;
}
#circle_hydra4{
  width: 22%;
  left:5%;
  margin-top: 30%;
}
#circle_hydra5{
  width: 10%;
  left:0%;
  margin-top: 45%;
  background-color: #d0d5c4;
}
#circle_hydra6{
  width: 25%;
  left:6%;
  margin-top: 56%;
  background-color: #eef3e0;
}
#circle_hydra7{
  width: 12%;
  left:70%;
  margin-top: 70%;
  background-color: #cad0bb;
}
#circle_hydra8{
  width: 25%;
  left:75%;
  margin-top: 80%;
  background-color: #c0d293;
}

/* --- FAQ PAGE CIRCLES --- */
#circle_faq1{
  width: 20%;
  left:6%;
  margin-top: -5%;
  background-color: #eef3e0;
}
#circle_faq2{
  width: 20%;
  left:60%;
  margin-top: 5%;
  background-color: #cad0bb;
}
#circle_faq3{
  width: 25%;
  left:70%;
  margin-top: 10%;
  background-color: #d4dbc0;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1160px) {
  #circle5{
    left:60%;
    width: 20%;
    aspect-ratio: 1;
  }
}

/* Mobile adjustments for Hydra circles */
@media (max-width: 500px) {
  #circle_hydra1{
    width: 50%;
    left: 50%;
  }
  #circle_hydra2{
    width: 15%;
  }
  #circle_hydra3{
    width: 18%;
  }
  #circle_hydra4{
    width: 20%;
  }
  #circle_hydra5{
    width: 10%;
  }
  #circle_hydra6{
    width: 12%;
  }
}