@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@200;600&display=swap');


html{
  background-color: #1D192F;
}


.container1{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: 3em auto auto auto;
  place-items: center;
  /* transform: scale(90%); */
}


.circle1 {
  grid-column: 1/-1;
  grid-row: 2/2;
  position: relative;
  height: 40em;
  width: 40em;
  background-image: linear-gradient(to bottom right, #7A251F 25%, #DCD4D2, #2D4746 75%);
  border-radius: 50%;
  z-index: 1;
  margin-bottom: 1em;
}

.circle2 {
  grid-column: 1/-1;
  grid-row: 2/2;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 38.5em;
  width: 38.5em;
  background-image: linear-gradient(to bottom right, #B83F28 25%, #E2DDD7, #4A726F 75%);
  border-radius: 50%;
  z-index: 2;
}

.circle3 {
  grid-column: 1/-1;
  grid-row: 2/2;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 37em;
  width: 37em;
  background-image: linear-gradient(to bottom right, #C2743E 25%, #E0DAD8, #8F9F98 75%);
  border-radius: 50%;
  z-index: 3;
}

.circle4 {
  grid-column: 1/-1;
  grid-row: 2/2;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 35.5em;
  width: 35.5em;
  background-color: #E8E7E4;
  border-radius: 50%;
  z-index: 4;
}

.circle5 {
  grid-column: 1/-1;
  grid-row: 2/2;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 34em;
  width: 34em;
  background-image: linear-gradient(to bottom right, #C2743E 25%, #E0DAD8, #8F9F98 75%);
  border-radius: 50%;
  z-index: 5;
}

 .circle6 {
  grid-column: 1/-1;
  grid-row: 2/2;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 32.5em;
  width: 32.5em;
  background-image: linear-gradient(to bottom right, #B83F28 25%, #E2DDD7, #4A726F 75%);
  border-radius: 50%;
  z-index: 6;
}

.circle7 {
  grid-column: 1/-1;
  grid-row: 2/2;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 31em;
  width: 31em;
  background-image: linear-gradient(to bottom right, #7A251F 25%, #DCD4D2, #2D4746 75%);
  border-radius: 50%;
  z-index: 7;
}

.circle8 {
  grid-column: 1/-1;
  grid-row: 2/2;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 29.5em;
  width: 29.5em;
  background-color: #1D192F;
  border-radius: 50%;
  z-index: 8;
}


.text1 {
  grid-column: 1/5;
  grid-row: 3/3;
  position: relative;
  color: #E8E7E4;
  font-size: 0.2em;
  font-family: 'Public Sans', sans-serif;
}

.text2 {
  grid-column: 4/7;
  grid-row: 3/3;
  position: relative;
  color: #E8E7E4;
  font-size: 5em;
  /* margin-left: 40%; */
  font-family: 'Public Sans', sans-serif;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-align: right;
  margin: oem;
}

.text3 {
  grid-column: 6/10;
  grid-row: 3/3;
  position: relative;
  color: #E8E7E4;
  font-size: 0.2em;
  font-family: 'Public Sans', sans-serif;
}

.text4 {
  grid-column: 8/12;
  grid-row: 3/3;
  position: relative;
  color: #E8E7E4;
  font-size: 0.2em;
  font-family: 'Public Sans', sans-serif;
}

.text5 {
  grid-column: 10/12;
  grid-row: 3/3;
  position: relative;
  color: #E8E7E4;
  font-size: 0.2em;
  font-family: 'Public Sans', sans-serif;
}



.circle1-2 {
  grid-column: 1/-1;
  grid-row: 4/4;
  position: relative;
  height: 14em;
  width: 40em;
  background-image: linear-gradient(to bottom right, #7A251F 25%, #DCD4D2, #2D4746 75%);
  border-radius: 50%;
  z-index: 1;
  margin-top: 1em;
}

.circle2-2 {
  grid-column: 1/-1;
  grid-row: 4/4;
  position: relative;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 13.5em;
  width: 38.5em;
  background-image: linear-gradient(to bottom right, #B83F28 25%, #E2DDD7, #4A726F 75%);
  border-radius: 50%;
  z-index: 2;
}

.circle3-2 {
  grid-column: 1/-1;
  grid-row: 4/4;
  position: relative;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 13em;
  width: 37em;
  background-image: linear-gradient(to bottom right, #C2743E 25%, #E0DAD8, #8F9F98 75%);
  border-radius: 50%;
  z-index: 3;
}

.circle4-2 {
  grid-column: 1/-1;
  grid-row: 4/4;
  position: relative;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 12.5em;
  width: 35.5em;
  background-color: #E8E7E4;
  border-radius: 50%;
  z-index: 4;
}

.circle5-2 {
  grid-column: 1/-1;
  grid-row: 4/4;
  position: relative;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 12em;
  width: 34em;
  background-image: linear-gradient(to bottom right, #C2743E 25%, #E0DAD8, #8F9F98 75%);
  border-radius: 50%;
  z-index: 5;
}

 .circle6-2 {
  grid-column: 1/-1;
  grid-row: 4/4;
  position: relative;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 11.5em;
  width: 32.5em;
  background-image: linear-gradient(to bottom right, #B83F28 25%, #E2DDD7, #4A726F 75%);
  border-radius: 50%;
  z-index: 6;
}

.circle7-2 {
  grid-column: 1/-1;
  grid-row: 4/4;
  position: relative;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 11em;
  width: 31em;
  background-image: linear-gradient(to bottom right, #7A251F 25%, #DCD4D2, #2D4746 75%);
  border-radius: 50%;
  z-index: 7;
}

.circle8-2 {
  grid-column: 1/-1;
  grid-row: 4/4;
  position: relative;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 10.5em;
  width: 29.5em;
  background-color: #1D192F;
  border-radius: 50%;
  z-index: 8;
}





@media screen and (max-width: 1150px) {
  html{
    background-color: #1D192F;
  }

  .container1{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: 3em auto auto auto auto auto;
    place-items: center;
  }
  
  
  .circle1 {
    grid-column: 1/-1;
    grid-row: 2/2;
    position: relative;
    height: 35em;
    width: 35em;
    background-image: linear-gradient(to bottom right, #7A251F 25%, #DCD4D2, #2D4746 75%);
    border-radius: 50%;
    z-index: 1;
    margin-bottom: 1em;
  }
  
  .circle2 {
    grid-column: 1/-1;
    grid-row: 2/2;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 33.5em;
    width: 33.5em;
    background-image: linear-gradient(to bottom right, #B83F28 25%, #E2DDD7, #4A726F 75%);
    border-radius: 50%;
    z-index: 2;
  }
  
  .circle3 {
    grid-column: 1/-1;
    grid-row: 2/2;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 32em;
    width: 32em;
    background-image: linear-gradient(to bottom right, #C2743E 25%, #E0DAD8, #8F9F98 75%);
    border-radius: 50%;
    z-index: 3;
  }
  
  .circle4 {
    grid-column: 1/-1;
    grid-row: 2/2;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 30.5em;
    width: 30.5em;
    background-color: #E8E7E4;
    border-radius: 50%;
    z-index: 4;
  }
  
  .circle5 {
    grid-column: 1/-1;
    grid-row: 2/2;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 29em;
    width: 29em;
    background-image: linear-gradient(to bottom right, #C2743E 25%, #E0DAD8, #8F9F98 75%);
    border-radius: 50%;
    z-index: 5;
  }
  
   .circle6 {
    grid-column: 1/-1;
    grid-row: 2/2;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 27.5em;
    width: 27.5em;
    background-image: linear-gradient(to bottom right, #B83F28 25%, #E2DDD7, #4A726F 75%);
    border-radius: 50%;
    z-index: 6;
  }
  
  .circle7 {
    grid-column: 1/-1;
    grid-row: 2/2;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 26em;
    width: 26em;
    background-image: linear-gradient(to bottom right, #7A251F 25%, #DCD4D2, #2D4746 75%);
    border-radius: 50%;
    z-index: 7;
  }
  
  .circle8 {
    grid-column: 1/-1;
    grid-row: 2/2;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 24.5em;
    width: 24.5em;
    background-color: #1D192F;
    border-radius: 50%;
    z-index: 8;
  }
  
  
  .text1 {
    grid-column: 4/5;
    grid-row: 5/5;
    position: relative;
    color: #E8E7E4;
    font-size: 0.2em;
    font-family: 'Public Sans', sans-serif;
    padding: 4em;
    text-align: right;
    margin-top: 1em;
  }
  
  .text2 {
    grid-column: 1/-1;
    grid-row: 3/3;
    position: relative;
    color: #E8E7E4;
    font-size: 5em;
    /* margin-left: 40%; */
    font-family: 'Public Sans', sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-align: right;
  }
  
  .text3 {
    grid-column: 5/7;
    grid-row: 5/5;
    position: relative;
    color: #E8E7E4;
    font-size: 0.2em;
    font-family: 'Public Sans', sans-serif;
    padding: 4em;
    text-align: left;
    margin-top: 1em;
  }
  
  .text4 {
    grid-column: 7/9;
    grid-row: 5/5;
    position: relative;
    color: #E8E7E4;
    font-size: 0.2em;
    font-family: 'Public Sans', sans-serif;
    padding: 4em;
    text-align: right;
    margin-top: 1em;
  }
  
  .text5 {
    grid-column: 8/11;
    grid-row: 5/5;
    position: relative;
    color: #E8E7E4;
    font-size: 0.2em;
    font-family: 'Public Sans', sans-serif;
    padding: 4em;
    text-align: left;
    margin-top: 1em;
  }

  .circle1-2 {
    grid-column: 1/-1;
    grid-row: 4/4;
    position: relative;
    height: 14em;
    width: 35em;
    background-image: linear-gradient(to bottom right, #7A251F 25%, #DCD4D2, #2D4746 75%);
    border-radius: 50%;
    z-index: 1;
    margin-top: 1em;
  }
  
  .circle2-2 {
    grid-column: 1/-1;
    grid-row: 4/4;
    position: relative;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 13.5em;
    width: 33.5em;
    background-image: linear-gradient(to bottom right, #B83F28 25%, #E2DDD7, #4A726F 75%);
    border-radius: 50%;
    z-index: 2;
  }
  
  .circle3-2 {
    grid-column: 1/-1;
    grid-row: 4/4;
    position: relative;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 13em;
    width: 32em;
    background-image: linear-gradient(to bottom right, #C2743E 25%, #E0DAD8, #8F9F98 75%);
    border-radius: 50%;
    z-index: 3;
  }
  
  .circle4-2 {
    grid-column: 1/-1;
    grid-row: 4/4;
    position: relative;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 12.5em;
    width: 30.5em;
    background-color: #E8E7E4;
    border-radius: 50%;
    z-index: 4;
  }
  
  .circle5-2 {
    grid-column: 1/-1;
    grid-row: 4/4;
    position: relative;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 12em;
    width: 29em;
    background-image: linear-gradient(to bottom right, #C2743E 25%, #E0DAD8, #8F9F98 75%);
    border-radius: 50%;
    z-index: 5;
  }
  
   .circle6-2 {
    grid-column: 1/-1;
    grid-row: 4/4;
    position: relative;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 11.5em;
    width: 27.5em;
    background-image: linear-gradient(to bottom right, #B83F28 25%, #E2DDD7, #4A726F 75%);
    border-radius: 50%;
    z-index: 6;
  }
  
  .circle7-2 {
    grid-column: 1/-1;
    grid-row: 4/4;
    position: relative;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 11em;
    width: 26em;
    background-image: linear-gradient(to bottom right, #7A251F 25%, #DCD4D2, #2D4746 75%);
    border-radius: 50%;
    z-index: 7;
  }
  
  .circle8-2 {
    grid-column: 1/-1;
    grid-row: 4/4;
    position: relative;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 10.5em;
    width: 24.5em;
    background-color: #1D192F;
    border-radius: 50%;
    z-index: 8;
  }

}