* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  :root {
    --gap: -300px;
    --circle-size: 200px;
    --circle-size-small: 130px;
    --color-1: #2f2f2f;
    --color-2: #ffd300;
    --color-3: #ff6709;
    --color-4: #363636;
    --color-5: #ffd300;
    --color-6: #ff6709;
  }
  .graphic-container {
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    /* margin: 312px 0; */
    margin-top: 300px;
    margin-bottom: 200px;
  }
  .center-circles-container {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
    height: 100%;
    width: 100%;
  }
  
  .single {
    gap: 20px;
  }
  .double {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .double:nth-child(even) {
    flex-direction: column-reverse;
  }
  .circle {
    width: var(--circle-size);
    height: var(--circle-size);
    background: #fff;
    border-radius: 50%;
    
    display: grid;
    place-items: center;
    position: relative;
  }
  
  .icon i {
    font-size: 3rem;
  }
  .content-container {
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    width: 100%;
  }
  .content p {
    font-size: 12px;
  }
  .content-container h2 {
    position: relative;
    padding: 0 10px;
  }
  /* arrow heading border */
  .one .content-container h2::before, 
  .one .content-container h2::after,
  .two .content-container h2::before, 
  .two .content-container h2::after, 
  .five .content-container h2::before, 
  .five .content-container h2::after {
    position: absolute;
    content: '';
    width: 2px;
    height: 22px;
    background: teal;
    left: -6px;
  }
  .one .content-container h2::before, 
  .two .content-container h2::before, 
  .five .content-container h2::before {
    top: -2px;
    transform: rotate(30deg);
  }
  .one .content-container h2::after,
  .two .content-container h2::after, 
  .five .content-container h2::after {
    bottom: -2px;
    transform: rotate(-30deg);
  }
  .three .content-container h2::before, 
  .three .content-container h2::after,
  .four .content-container h2::before, 
  .four .content-container h2::after, 
  .six .content-container h2::before, 
  .six .content-container h2::after {
    position: absolute;
    content: '';
    width: 2px;
    height: 22px;
    background: teal;
    right: -6px;
  }
  .three .content-container h2::before, 
  .four .content-container h2::before, 
  .six .content-container h2::before {
    top: -2px;
    transform: rotate(-30deg);
  }
  .three .content-container h2::after,
  .four .content-container h2::after, 
  .six .content-container h2::after {
    bottom: -2px;
    transform: rotate(30deg);
  }
  
  /* different content elements */
  .two, .four {
    width: var(--circle-size-small);
    height: var(--circle-size-small);
  }
  .two i, .four i {
    color: #fff;
    font-size: 2.5rem;
  }
  .one .content-container {
    left: 0;
    bottom: var(--gap);
    text-align: left;
  }
  .two .content-container {
    left: 80px;
    bottom: var(--gap);
    text-align: left;
  }
  .three .content-container {
    right: 200px;
    top: var(--gap);
    text-align: right;
  }
  .four .content-container {
    right: 20px;
    top: var(--gap);
    text-align: right;
  }
  .five .content-container {
    left: 200px;
    bottom: var(--gap);
    text-align: left;
  }
  .six .content-container {
    left: 0;
    top: var(--gap);
    text-align: right;
  }
  
  /* lines */
  /* bottom layer */
  .one .line {
    position: absolute;
    width: 2px;
    height: 170px;
    background-color: var(--color-1);
    top: -150px;
    left: -30px;
  }
  .one .line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    height: 2px;
    background: var(--color-1);
  }
  .one .line::after, 
  .two .line::after,
  .five .line::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20px;
    height: 2px;
  }
  .one .line::after {
    background: var(--color-1);  
  }
  .two .line::after {
    background: var(--color-2);
  }
  .five .line::after {
    background: var(--color-5);
  }
  .two .line {
    position: absolute;
    width: 2px;
    height: 108px;
    background-color: var(--color-2);
    top: -89px;
    left: -30px;
  }
  .five .line {
position: absolute;
    width: 2px;
    height: 110px;
    background-color: var(--color-5);
    top: -97px;
    left: -58px;
  }
  /* top layer */
  .three .line {
    position: absolute;
    width: 2px;
    height: 311px;
    background-color: var(--color-3);
    bottom: -118px;
    right: -30px;
  }
  .three .line::after, 
  .four .line::after, 
  .six .line::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 2px;
  }
  .three .line::after {
    background: var(--color-3);  
  }
  .four .line::after {
    background: var(--color-4);  
  }
  .six .line::after {
    background: var(--color-6);  
  }
  .four .line {
    position: absolute;
    width: 2px;
    height: 313px;
    background-color: var(--color-4);
    bottom: -119px;
    right: -30px;
  }
  .four .line::before {
    content: '';
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 20px;
    height: 2px;
    background: var(--color-4);
  }
  .six .line {
    position: absolute;
    width: 2px;
    height: 353px;
    background-color: var(--color-6);
    bottom: -160px;
    right: -30px;
  }
  .six .line::before {
    content: '';
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 35px;
    height: 2px;
    background: var(--color-6);
  }
  
  /* dots */
  .one .dot {
    position: absolute;
    top: 110px;
    right: -30px;
    width: 20px;
    height: 20px;
    background: #ff6709;
    border-radius: 50%;
    box-shadow: -20px -110px 0 6px #ffd300, -30px 80px 0 4px var(--color-1);
  }
  .four .dot {
    position: absolute;
    top: 130px;
    left: 0px;
    width: 20px;
    height: 20px;
    background: var(--color-4);
    border-radius: 50%;
    box-shadow: -22px -138px 0 10px #ffd300, -70px 70px 0 0px #ff6709;
  }
  .six .dot {
    position: absolute;
    top: -30px;
    left: 10px;
    width: 10px;
    height: 10px;
    background: var(--color-6);
    border-radius: 50%;
    box-shadow: -50px 50px 0 25px #ffd300, 150px 250px 0 10px #363636;
  }
  /* circle colors */
  .one {
    box-shadow: inset 0 0 0 20px var(--color-1), inset 0px 0px 12px 20px #989898;
  }
  .two {
    background-color: var(--color-2);
    transform: translateX(-20px);
  }
  .three {
    box-shadow: inset 0 0 0 20px var(--color-3), inset 0px 0px 12px 20px #989898;
    transform: translateX(10px);
  }
  .four {
    background-color: var(--color-4);
    transform: translateX(-20px);
  }
  .five {
    box-shadow: inset 0 0 0 20px var(--color-5), inset 0px 0px 12px 20px #989898;
    transform: translateX(10px);
  }
  .six {
    box-shadow: inset 0 0 0 20px var(--color-6), inset 0px 0px 12px 20px #989898;
  }
  
  
  /* h2 border colors */
  .one .content-container h2 {
    border-top: 2px solid var(--color-1);
    border-bottom: 2px solid var(--color-1);
  }
  .two .content-container h2 {
    border-top: 2px solid var(--color-2);
    border-bottom: 2px solid var(--color-2);
  }
  .three .content-container h2 {
    border-top: 2px solid var(--color-3);
    border-bottom: 2px solid var(--color-3);
  }
  .four .content-container h2 {
    border-top: 2px solid var(--color-4);
    border-bottom: 2px solid var(--color-4);
  }
  .five .content-container h2 {
    border-top: 2px solid var(--color-5);
    border-bottom: 2px solid var(--color-5);
  }
  .six .content-container h2 {
    border-top: 2px solid var(--color-6);
    border-bottom: 2px solid var(--color-6);
  }
  
  .one .content-container h2::before, 
  .one .content-container h2::after {
    background: var(--color-1);
    
  }
  .two .content-container h2::before, 
  .two .content-container h2::after {
    background: var(--color-2);
    
  } 
  .five .content-container h2::before, 
  .five .content-container h2::after {
    background: var(--color-5);
  }
  
  .three .content-container h2::before,
  .three .content-container h2::after {
    background: var(--color-3);
    
  }
  .four .content-container h2::before, 
  .four .content-container h2::after {
    background: var(--color-4);
  } 
  .six .content-container h2::before, 
  .six .content-container h2::after {
   background: var(--color-6);
  }
  .content-container h2{
    font-size: 24px;
    line-height: 35px;
  }
  .content-container h3{
    font-size: 19px;
    margin: 0 0 0px;
  }
  /* media */
  @media (max-width: 992px) {
    .graphic-container {
      margin: 50px 0;
    }
    .center-circles-container {
      overflow: hidden;
      overflow-x: scroll;
      width: 1300px;
    }
    .double {
      flex-direction: row;
    }
    .double:nth-child(even) {
      flex-direction: row;
    }
    .two {
      transform: translateX(0px);
    }
    .three {
      transform: translateX(0px);
    }
    .four {
      transform: translateX(0px);
    }
    .five {
      transform: translateX(0px);
    }
  }