/*Inner Wrapper*/
.cs-circles {
position: relative;
}

/**circle center - The middle circle**/
.cs-circle-center {
width: 310px;
height: 310px;
border: 2px solid #81BE41;
position: absolute;
border-radius: 50%;
left: calc(50% - (310px / 2));
top: calc(50% - (310px / 2));
background-image: url("../../images/specialised-services/Specialised-Services-1.jpg");
}

/*surrounding circular line container*/
.circle-container {
border: solid 5px #81BE41;
border-bottom-color: transparent;
border-left-color: transparent;
width: 500px;
height: 500px;
border-radius: 50%;
padding: 0;
list-style: none;
margin: 15px auto;
position: relative;
}
/*surrounding (small) circle dimensions and font sizes*/
.circle-container * {
width: 140px;
height: 140px;
font-size: 12px;
}
.circle-text {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}

/***
hover | Global
***/
/*transition time for circle hover animations*/
.circle-container li,.circle-container li *{
transition: transform 0.4s;
}
/*change surrounding (small) circle dimensions and color */
.circle-container li:hover {
background-color: #81BE41!important;
width: 160px;
height: 160px;
}
/*make surrounding (small) circle text larger on hover*/
.circle-container li:hover .circle-text {
font-size: 24px;
line-height: 24px;
color: #81BE41;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/*************
END GLOBAL STYLES
*************/

/***
SPECIALISED SERVICES
***/
/*top margin for section*/
.circle-section:nth-of-type(3) {
margin-top: 150px;
}
/**inner circle rotation**/
#circle-container-5 {
transform: rotate(206deg);
border: unset;
}

/**all surrounding circles**/
#circle-container-5 > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -70px;
border: 1px solid;
border-radius: 50%;
text-align: center;
background:white;
}
#circle-container-5 * {
width: 100px;
height: 100px;
font-size: 12px;
}
#circle-container-5 li:hover{
width: 110px;
height: 110px;
}
#circle-container-5 li:hover .circle-text {
font-size: 24px;
line-height: 24px;
}

/**Circle 1**/
#circle-container-5 > *:nth-of-type(1) {
transform: rotate(0deg) translate(265px) rotate(155deg);
}
#circle-container-5 li:hover #circle-5-1 {
transform: translate(237px, 102px);
}

/**Circle 2**/
#circle-container-5 > *:nth-of-type(2) {
transform: rotate(25deg) translate(265px) rotate(130deg);
}
#circle-container-5 li:hover #circle-5-2 {
transform: translate(166px, 187px);
}

/**Circle 3**/
#circle-container-5 > *:nth-of-type(3) {
transform: rotate(50deg) translate(265px) rotate(105deg);
}
#circle-container-5 li:hover #circle-5-3 {
transform: translate(67px, 238px);
}

/**Circle 4**/
#circle-container-5 > *:nth-of-type(4) {
transform: rotate(75deg) translate(265px) rotate(80deg);
}
#circle-container-5 li:hover #circle-5-4 {
transform: translate(-48px, 247px);
}

/**Circle 5**/
#circle-container-5 > *:nth-of-type(5) {
transform: rotate(100deg) translate(265px) rotate(55deg);
}
#circle-container-5 li:hover #circle-5-5 {
transform: translate(-161px, 203px);
}

/**Circle 6**/
#circle-container-5 > *:nth-of-type(6) {
transform: rotate(125deg) translate(265px) rotate(30deg);
}
#circle-container-5 li:hover #circle-5-6 {
transform: translate(-236px, 118px);
}