.main-container{
	max-width:1000px;
	margin:auto
}

.circle-wrapper{
	text-align:center;
	margin-top: 50px;
}

.circle-container {
      position: relative;
      width: 80%;
      max-width:600px;
      aspect-ratio:1;
      margin: auto;
      border-radius: 50%;
      overflow: hidden;
    }

    .circle-container .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      background: #ebebeb;
      border-radius: 50%;
      /* border: 2px solid #ccc; */
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
      padding: 10px;
      z-index:9;
      flex-direction: column;
    }

	.circle-container .center svg{width:50%;height:auto}

    .circle-container .segment {position: absolute;width: 65%;height: 50%;clip-path: polygon(100% 100%, 41% 23%, 0 100%, 0 100%);transform-origin: 100% 100%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 12px;text-align: center;display: flex;align-items: end;margin-left: -15%;/* padding-left: 20%; */box-sizing: border-box;background: #f3b21c;}
	.circle-container .segment::after{content:"";position: absolute;bottom: -5px;left: 0;right: 0;z-index: 1;height: 10px;display: block;background: #ebebeb;}
    .circle-container .seg1 { transform: rotate(-45deg); }
    .circle-container .seg2 {  transform: rotate(0deg); }
    .circle-container .seg3 {  transform: rotate(45deg); }
    .circle-container .seg4 { transform: rotate(90deg); }
    .circle-container .seg5 {  transform: rotate(135deg); }
    .circle-container .seg6 { transform: rotate(180deg); }
	
	.circle-container .seg1 span, .circle-container .seg1 img{ transform: rotate(45deg); }
    .circle-container .seg2 span, .circle-container .seg2 img { transform: rotate(0deg); }
    .circle-container .seg3 span, .circle-container .seg3 img { transform: rotate(-45deg); }
    .circle-container .seg4 span, .circle-container .seg4 img { transform: rotate(-90deg); }
    .circle-container .seg5 span, .circle-container .seg5 img { transform: rotate(-135deg); }
    .circle-container .seg6 span, .circle-container .seg6 img { transform: rotate(-180deg); }
	.circle-container .segment img {position:absolute;width: 120%;bottom: -10%;left: -10%;height: 120%;object-fit: cover;opacity: 0.2;filter: blur(3px);}


    .circle-container .segment span {
	  /* position:absolute; */
	  display: block;
	  max-width: 100px;
	  margin-bottom: 17%;
	  z-index: 99;
	  font-size: 17px;
	  color: black;
	  text-shadow: 0 0 2px white;
	  font-weight: bold;
	  }