.circle .line-before{

	text-align: left;

}

.circle {

    width: 70vh;

    height: 70vh;

    position: relative;

    border-radius: 50%;

    overflow: hidden;

}





@media only screen and (min-width: 300px) and (max-width: 767px) {

	

		.circle {

		width: 100%;

		height:100%; 

		}

	

	

	.hr-header{

	display: flex;

	justify-content: space-between;

	align-items: center;

		flex-direction: column;

}

	

	.hr-header img{

	width: 45px

}

	.hr-header h3 {

		padding: 10px 0;

		font-size: 2rem !important;

    line-height: 2rem !important;

	}

	.circle-container { 

    width: 93vw;

    height: 93vw;

}

}



.segment {

    position: absolute;

    width: 100%;

    height: 100%;

    clip-path: polygon(50% 50%, 100% 0, 100% 100%);

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    transition: transform 0.3s, background-color 0.3s;

    color: white;

    transform-origin: 50% 50%;

    padding: 10px;  /* Add padding to position content inside the segment */

 

}



.hr-services { 

    background: rgb(121,185,77);

    background: linear-gradient(90deg, rgba(121,185,77,1) 0%, rgba(100,185,77,1) 100%);

    transform: rotate(314deg);

    z-index: 4;



}

 



.governance-services {

    background: rgb(100,236,214);

    background: linear-gradient(309deg, rgba(100,236,214,1) 0%, rgba(100,236,214,1) 100%);

    transform: rotate(26deg);

    z-index: 6;

    color: #000;

}

 



.revenue-services {

    background: rgb(253,241,88);

    background: linear-gradient(165deg, rgba(253,241,88,1) 0%, rgba(252,236,87,1) 24%, rgba(250,224,85,1) 36%, rgba(246,203,82,1) 69%, rgba(241,174,78,1) 83%, rgba(239,162,77,1) 100%);

    color: #000;

    transform: rotate(92deg);

    z-index: 8;



}

 



.digital-services {

    background: rgb(0,88,135);

    background: linear-gradient(309deg, rgba(0,88,135,1) 15%, rgba(0,142,195,1) 70%);

    transform: rotate(155deg);

    z-index: 7;

}

 

.cfo-services {

    background: rgb(0,0,0);

    background: linear-gradient(149deg, rgba(0,0,0,1) 0%, rgba(42,98,136,1) 36%, rgba(42,97,134,1) 36%, rgba(51,144,137,1) 92%, rgba(50,145,135,1) 92%, rgba(0,0,0,1) 92%);

    transform: rotate(237deg);

    z-index: 3;

}

 

.center {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 200px;

    height: 200px;

    background: white;

    border-radius: 50%;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    transform: translate(-50%, -50%);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 10;

}



.center p {

    font-weight: bold;

    margin: 0;

}



.hr-services-position{

    transform: rotate(46deg);

    position: absolute;

    right: 58px;

    top: 31%;

	font-weight: bold;

    text-transform: uppercase;

}



 .hr-services-position p{

    margin:0;

    padding: 5px 0;

 }

.governance-services-position{



        transform: rotate(334deg);

        position: absolute;

        right: 63px;

        top: 35%;

	font-weight: bold;

        text-transform: uppercase;

}

.governance-services-position p{

    margin:0;

    padding: 5px 0;

 }



.revenue-services-position{

    

    transform: rotate(268deg);

    position: absolute;

    right: 49px;

    top: 39%;

	font-weight: bold;

    text-transform: uppercase;

}

.revenue-services-position p{

    margin:0;

    padding: 5px 0;

 }

.digital-services-position{

    transform: rotate(205deg);

    position: absolute;

    right: 75px;

    top: 49%;

	font-weight: bold;

    text-transform: uppercase;

}

.digital-services-position p{

    margin:0;

    padding: 5px 0;

 }

.cfo-services-position{

    transform: rotate(123deg);

    position: absolute;

    right: 52px;

    top: 40%;

	font-weight: bold;

    text-transform: uppercase;

}

.cfo-services-position p{

    margin:0;

    padding: 5px 0;

}



/* animationSection */

 

.hide{

    display:none; 

    transition-timing-function: ease-out;

    animation-name: animation;

    animation-duration:10s;  

    animation-delay: 5s; 

    animation-fill-mode: none;transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;

}

 

.shows{display: block;   transition-timing-function: ease-in;

    animation-name: animation;

    animation-duration:0.5s;  

    animation-delay: 0s; 

    animation-fill-mode: none;transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;

  }



  

  @keyframes animation{

     

    

    0%{

      width:100%;

      height:100%; 

      transform: scale(0.5);

      transform: translate(0 600px)

    }

    100%{

      height:100%;

      width:100%; 

  

    } }



 



  .forshow-pane {

    opacity: 0;

    max-height: 0;

    overflow: hidden;

    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;

}



 

.forshow-pane.shows {

    opacity: 1;

    max-height: 100%; 

}









.knowMoreBtn{

    color: #fff;

    border: solid 1px #fff;

    padding: 5px;

    border-radius: 10px;

    font-weight: bold;

    text-decoration: none;

}

.knowMoreBtn2{

    color: #000;

    border: solid 1px #fff;

    padding: 5px;

    border-radius: 10px;

    font-weight: bold;

    text-decoration: none;

}



/* bottom details sections */



.hr-service-inner-section {

    background: rgb(43,100,134);

    background: linear-gradient(180deg, rgba(43,100,134,1) 0%, rgba(52,147,137,1) 100%); 

    border-radius: 40px;  

    z-index: 1;

    position: relative;

  }

.hr-service-bottom-section{

    background: #9BE6E4;

    border-radius: 40px;  

    margin-top: -64px;

    z-index: 0;

    position: static;

}

.firstCard {

    background-color: #a4dee8;

    color: #000000;

}



.secondCard {

    background-color: #94d7bd;

    color: #000000;

}



.governance-inner-section{

    background: #3242a2;  

    border-radius: 40px;  

    position: relative;

    z-index: 1;

}

.governance-inner-section >.line-before::before{
  background-color: #fff;
}

.governance-bottom-section{

    background: #707dc8;color:#fff;

    border-radius: 40px;  

    margin-top: -64px;

    position: static;

    z-index: 0;}

.thirdCard {

    background-color: #bbc6ff;

    color: #000000;

}



.fourthCard {

    background-color: #dde2ff;

    color: #000000;

}

.cfo-bottom-section h5, .revenue-bottom-section h5{text-align:left;}

.title-black{

    color: #000000 !important;

}

.revenue-inner-section{

    background: #64ECD6;  

    border-radius: 40px;  

    position: relative;

    z-index: 1;

}

.revenue-bottom-section{

    background: #AFFFF2;

    border-radius: 40px;  

    margin-top: -64px;

    position: static;

    z-index: 0;}

.fifthCard {

    background-color: #afffff;

    color: #000000;

}



.sixthCard {

    background-color: #9bfff6;

    color: #000000;

}

 



.digital-inner-section{

    background: #F9DA55;  

    border-radius: 40px;  

    position: relative;

    z-index: 1;

}

.digital-bottom-section{

    background: #ffe98d;

    border-radius: 40px;  

    margin-top: -64px;

    position: static;

    z-index: 0;}

.sevenCard {

    background-color: #ffffa3;

    color: #000000;

}



.eightCard {

    background-color: #FFB936;

    color: #000000;

    border-radius: 40px;  

    margin-top:25px;

    margin-bottom: 50px;

}



.digital-bottom-sectionCard{

    display: flex !important;

    align-content: flex-start;

    justify-content: center;

}

.card2 {

    background-color: #ffe736; /* lighter yellow card background */

    border: none;

    border-radius: 30px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  }





.cfo-service-inner-section{

    background: #488e37;

    background: linear-gradient(180deg, #488e37 0%, #8cc86c 100%);

    border-radius: 40px;  

    position: relative;

    z-index: 1;

}

.cfo-bottom-section{

    background: #84DBFF;

    border-radius: 40px;  

    margin-top: -64px;

    position: static;

    z-index: 0;

}

.nineCard {

    background-color: #b0f19d;

    color: #000000;

}

.tenCard {

    background-color: #d5ffc2;

    color: #000000;

}



.line-before {

    position: relative;

    padding-left: 20px;

	text-align: left;

}

.line-before::before {

    content: '';

    position: absolute;

    left: 0;

    top: 12px;

    width: 8px;

    height: 1px;

    background-color: #000; /* Change this to the desired color */

}







  .w-90{

    width: 90%;

  }

  #greenMain{

    background-color: #72e074; /* light yellow background */

    border-radius: 50px;

  }  

  #blueMain{

    background-color: #6bbdff; /* light yellow background */

    border-radius: 50px;

  }    

  .card {

    border-radius: 25px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}





 

.card-body{

    padding: 25px ;

}

.cfo-service-inner-section .card-body, .digital-inner-section .card-bod{

	padding: 25px 50px ;

}

.card-title {

    font-weight: bold;

    margin-bottom: 16px;

	text-transform: uppercase;

}

.card-subtitle{

    color: #B99600;

    font-weight: bold;

 }

.card-text {



}





  .overlap-card {

    margin-top: -40px; /* Adjust this value as needed for the desired overlap on smaller screens */

    z-index: 20;

  }

   



.full-screen {

    width: 100vw !important;

    height: 100vh !important;

    border-radius: 0 !important;

}

.iconswidth{

    width: 50px;

    height: auto;

}



.hr-header h3{

   text-transform: uppercase;

   font-weight: bold;

   color: #fff;

   text-align: center;

   font-size: 2.5rem;line-height: 3.2rem;

	

}





.hr-header{

	display: flex;

	justify-content: space-between;

	align-items: center;

}





/* about cricle  */

.mainCircleWrap {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  background-color: #f4f4f4;

  margin: 0;

}



.circle-container {

  position: relative;

  width: 100vh;

  height: 100vh;

}



.mainCircle {

  position: absolute;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  color: white;

  text-align: center;

  cursor: pointer;

  transition: all 0.5s ease;

}



#circle1 {

  width: 30%;

  height: 30%;

  top: 35.5%;

  left: 35.5%;

  z-index: 4;

  background-color: #005D1A;

 

}

#circle1 h4{

  position: absolute;

  top: 43%;

}



#circle2 {

  width: 50%;

  height: 50%;

  top: 25%;

  left: 25%;

  z-index: 3;

  background-color: #009116;

  position: relative;

}

#circle2 h4{

  position: absolute;

  top: 9%;

}



#circle3 {

  width: 75%;

  height: 75%;

  top: 12.5%;

  left: 12.5%;

  z-index: 2;

  background-color: #00A32C;

  

}

#circle3 h4{

  position: absolute;

  top: 7%;

}

#circle4 {

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: 1;

  background-color: #00CC35;

}

#circle4 h4{

  position: absolute;

  top: 5%;

}

.circle-text {

  pointer-events: none;

  display: none; /* Hide all circle texts initially */

}



#circle1 .circle-text {

  display: block; /* Only display the first circle's text */

}



.active-circle {

  display: flex;

  justify-content: center;

  align-items: center;

  position: absolute;

  width: 0;

  height: 0;

  border-radius: 50%;

  color: white;

  text-align: center;

  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);

  overflow: hidden;

  z-index: 5;

  visibility: hidden;

  top: 50%; /* Center the active circle */

  left: 50%; /* Center the active circle */

  transform: translate(-50%, -50%);

 

}



.active-circle.active {

  width: 100vh;

  height: 100vh;

  visibility: visible;

  animation: expand 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);

}



@keyframes expand {

  0% {

      width: 0;

      height: 0;

  }

  100% {

      width: 100vh;

      height: 100vh;

  }

}

.active-circle-content {

  text-align: center;

  padding: 20px;

}



.active-circle-icon {

  width: 50px;

  height: 50px;

}



.active-circle-title {

  margin-top: 10px;

}



.active-circle-text {

  margin-top: 10px;

}







 #Path_907:hover{

        fill: #3b6a83

      }

 #Path_906:hover{

        fill: #3142a2

      }

 #Path_905:hover{

        fill: #488e37

      }

 #Path_903:hover{

        fill: #e8ae5f

      }

 #Path_904:hover{

        fill: #7AF2DF

      }