/* hero banner */



.fullContainer {
  margin: 100px 0px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 75%;
  display: flex;
  align-items: center;
  padding-top: 30px;
  justify-content: space-between;
  padding: 0px 80px;
  position: relative;
}

.contentHeader {
  font-size: 30px;
  font-weight: 500;
  font-family: poppins;
  color: #A2C801;
  padding-bottom: 20px;
}

.contentSubHeader {
  font-size: 20px;
  font-weight: 500;
  font-family: poppins;
  color: black;
}

.contentParagraph {
  font-size: 15px;
  font-weight: 500;
  font-family: poppins;
  color: black;
}

.customPieChart {
  position: relative;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition: transform 0.5s ease-in-out;
}

.pieSlice {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 100% 0, 100% 99%);
  transform-origin: 50% 50%;
  transition: transform 0.5s ease-in-out;
}

.pieSlice[data-slice-id="1"] {
  background: #0a4783; /* Example color */
  transform: rotate(0deg);
}

.pieSlice[data-slice-id="2"] {
  background: #0a4783; /* Example color */
  transform: rotate(90deg);
}

.pieSlice[data-slice-id="3"] {
  background: #0a4783; /* Example color */
  transform: rotate(180deg);
}

.pieSlice[data-slice-id="4"] {
  background: #0a4783; /* Example color */
  transform: rotate(270deg);
}

.sliceLabel {
  position: absolute;
  text-align: center;
  font-size: 16px; /* Adjust font size as needed */
  font-weight: 500;
  color: rgb(255, 255, 255); /* Change to white or another contrasting color */
  transform-origin: center;
  transition: transform 0.5s ease-in-out;
}

/* Positioning for each slice's text */
.pieSlice[data-slice-id="1"] .sliceLabel {
  top: 40%; /* Adjust as needed */
  left: 60%; /* Adjust as needed */
 color: white;
}

.pieSlice[data-slice-id="2"] .sliceLabel {
  top: 40%; /* Adjust as needed */
  left: 60%; /* Adjust as needed */
  transform: rotate(-90deg); /* Rotate text to match slice */
  color: white;
}

.pieSlice[data-slice-id="3"] .sliceLabel {
  top: 40%; /* Adjust as needed */
  left: 60%; /* Adjust as needed */
  transform: rotate(-180deg); /* Rotate text to match slice */
  color: white;
}

.pieSlice[data-slice-id="4"] .sliceLabel {
  top: 40%; /* Adjust as needed */
  left: 60%; /* Adjust as needed */
  transform: rotate(90deg); /* Rotate text to match slice */
  color: white;
}



.centerCircle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  color: white;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.centerCircle img {
  width: 50%;
  height: 50%;
}

.contentContainer {
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  height: 70vh;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  border: 2px solid rgb(103, 98, 98);
}

.contentContainer div {
  display: none;
  width: -webkit-fill-available;
}

.contentContainer div.activeContent {
  width: -webkit-fill-available;
  display: block;
  transform: rotate(0);
}

.pieSlice.active {
  background: #A2C801;
}

.pieSlice.active span {
  background: #A2C801;
  color: white !important;
  transform: rotate(0) !important;
}

.techList {
  width: -webkit-fill-available;
  margin-top: 20px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.techList li {
  width: 28%;
  border-right: 2px solid #A2C801;
  font-family: poppins;
  font-size: 14px;
  font-weight: 500;
  color: black;
  cursor: pointer;
  padding: 5px;
  height: max-content;
}

.industryList {
  margin-left: -20px;
  width: 100% !important;
  margin-top: 20px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.industryList li {
  width: 28%;
  border-right: 2px solid #A2C801;
  font-family: poppins;
  font-size: 14px;
  font-weight: 500;
  color: black;
  cursor: pointer;
  padding: 5px;
  height: max-content;
}

.rotateIcon {
  transition: 0.5s ease-in-out;
}

.greenButton:hover .rotateIcon {
  transform: rotate(45deg);
}

@media only screen and (max-width: 800px) {
  .fullContainer {
    margin: 60px 0px;
      flex-direction: column;
      justify-content: space-between;
      padding: 0px 20px;
      margin-top: -40px;
      /* overflow: hidden !important; */
    
      
  }

  .contentHeader {
      font-size: 18px;
  }

  .contentSubHeader {
      font-size: 10px;
  }

  .contentParagraph {
      font-size: 10px;
  }

  .customPieChart {
      width: 350px;
      height: 350px;
      
  }

  .sliceLabel {
      font-size: 10px;
  }

  .centerCircle {
      width: 60px;
      height: 60px;
  }

  .contentContainer {
    margin-top: 50px;
      height: fit-content;
      width: 100%;
  }

  .techList, .industryList {
      gap: 20px;
      width: 100%;
  }

  .techList li, .industryList li {
      font-size: 10px;
  }


  .pieSlice[data-slice-id="1"] .sliceLabel {
    top: 45%; /* Adjust as needed */
    left: 64%; /* Adjust as needed */
   color: white;
  }
  
  .pieSlice[data-slice-id="2"] .sliceLabel {
    top: 47%; /* Adjust as needed */
    left: 60%; /* Adjust as needed */
    transform: rotate(-90deg); /* Rotate text to match slice */
    color: white;
  }
  
  .pieSlice[data-slice-id="3"] .sliceLabel {
    top: 40%; /* Adjust as needed */
    left: 65%; /* Adjust as needed */
    transform: rotate(-180deg); /* Rotate text to match slice */
    color: white;
  }
  
  .pieSlice[data-slice-id="4"] .sliceLabel {
    top: 46%; /* Adjust as needed */
    left: 66%; /* Adjust as needed */
    transform: rotate(90deg); /* Rotate text to match slice */
    color: white;
  }
  
}