/* hero section style */
.hero-bk {
  padding: 20px 30px;
  border-radius: 30px;

}

.background-video{
  position: relative;
  width: 100%;
  height: 80vh;
 
  /* overflow: hidden; */
}

.background-video video {
  position: absolute;
  top: 43%;
  left: 50%;
  width: 75%; /* Matches your background-size: 75% */
  height: 80vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
}



.carousel-1 {
  height: 80vh;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
    url("../src/photos/new-home-page/1.jpg");
  background-repeat: no-repeat;
  background-size: cover; /* Ensures the image fills the container */
  background-blend-mode: multiply;
  background-position: center top; /* Centers image while keeping it at the top */
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  border-radius: 30px;
}

.carousel-1 h1 {
  width: 65%;
}

.transparent-border-button {
  color: white;
  font-size: 18px;
  border: 2px solid #a2c801;
  padding: 10px 20px;
  border-radius: 30px;
}

.transparent-border-button:hover {
  color: white;
  background-color: #a2c801;
  transition: ease-in-out 0.3s;
}

.carousel-2 {
  height: 80vh;
  background: url("../src/photos/new-home-page/4.jpg"),
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
  background-position: center;
  /* background-position-x: left; */
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  border-radius: 30px;
}

.carousel-2 h1 {
  width: 65%;
}




.carousel-3 {
  height: 80vh;
  background: url("../src/photos/new-home-page/2.jpg"),
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
  background-position: center;
  /* background-position-x: left; */
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  border-radius: 30px;
}

.carousel-3 h1 {
  width: 65%;
}

.carousel-4 {
  height: 80vh;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
    url("../src/photos/new-home-page/5.jpg");
  background-repeat: no-repeat;
  background-size: cover; /* Ensures the image fills the container */
  background-blend-mode: multiply;
  background-position: center top; /* Centers image while keeping it at the top */
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  border-radius: 30px;
}

.carousel-4 h1 {
  width: 65%;
}

.carousel-item {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out !important;
}
/* hero section style end*/




/* second section */
.our-solutions-carousel{
  font-family: poppins, sans-serif;
  height:55vh;
  display: flex;
  justify-content: center;
  position: relative;
}
.link-text {
  text-decoration: none;
}
.carousel-container {
  position: relative;
  width: 79%;
  /* max-width: 1200px; */
  
}

.custom-swiper {
  /* transform: translateX(96px); */
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  margin:10px !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: start !important;
  width:280px !important;
  height:320px !important;
  padding: 30px;
  background: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  transition: transform 0.3s ease-in-out;
}
.swiper-slide svg{
  /* margin-left:10px; */
  height: 30px;
  width: 30px;
  fill: #014380;
  margin-left: 5px;
}

.swiper-slide img{
  width:200px !important;
  height:100px !important;
  object-fit: cover;
}

.swiper-slide:hover {
  transform: translateY(-5px);
}


.solutions-heading {
  font-size: 22px;
  font-weight: 600;
  color: #014380;
  margin: 10px 5px ;
}

.text-black-small {
  font-size: 16px;
  color: #666;
}

/* Custom Navigation */
.custom-button-next,
.custom-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  z-index: 100;
}

.custom-button-prev {
  left: -50px;
}

.custom-button-next {
  right: -50px;
}

/* Pagination */
.swiper-pagination {
  position: absolute;
  /* display: none; */
  top: 380px !important;
}

.swiper-pagination-bullet {
  background-color: #e6e5e5 !important;
  /* Change to your desired color */
  opacity: 1;
  /* Make dots fully visible */
}

/* Change the active pagination dot color */
.swiper-pagination-bullet-active {
  background-color: rgb(0, 0, 0) !important;
  /* Change to your desired color */
}


.microsoftimg{
  height:450px;
  width:450px;
  object-fit: cover;
  border-radius: 20px;
}

.ul{
  border-left:3px solid black;
  margin-left:20px;
}

.li{
  margin-top: 10px;
  margin-left: -15px;
  font-size: 18px;
  line-height: 1.3em;  
}

.svg-green{
  fill:#A2C801;

}
.svg-green :hover{
  fill:#014380;

}
.svg-blue{
  fill:#014380;

}
.svg-blue :hover{
  fill:#A2C801;

}
.microsoft-row{
  display: flex;
  align-items: center;
  justify-content: start;
}


  
 
/* third section */
.third-bk {
padding: 50px 75px 100px 75px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 30px;
}
.third-bk-1 {
  padding: 50px 75px 50px 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  }
.solutions {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row !important; 
gap: 30px;
}
.sevices-card {
background-color: #f6f6f6;
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: start;
padding: 0px;
}
.sevices-card img {
width: 100%;
border-radius: 20px;
}
.service-heading {
padding: 0px 20px;
font-family: poppins;
font-size: 24px;
font-weight: 500;
line-height: 30px;
}
.transparent-button-1{
display:flex;
align-items: center;
justify-content: start;
margin-bottom: 10px;
width:100%;

}
.transparent-button-1 a{
padding:0px 5px 5px 20px;
color: black;
font-size: 18px;
text-decoration: none;
transition: transform 0.7s ease-in-out; /* Transition effect */
text-transform: capitalize;

}

.transparent-button-1 i{
height: 18px;
width:18px !important;
margin-top: -5px;
}
/* third section end*/
/* fourth section */
.fourth-bk {
width: 100%;
background-color: #f7f9fe;
padding: 80px 75px 80px 75px;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 30px;
overflow: hidden !important;
}
.swiper-container {
width: 100%;
padding: 20px 0;
overflow: hidden !important;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
width: 150px;
height: auto;
}
.swiper-wrapper {
transition-timing-function: ease-in-out !important;
}
/* fourth section end*/
/* fifth section */
.fifth-bk {
padding: 40px 75px 100px 75px;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 30px;
margin-top:70px;
}
.vertical-solutions {
display: flex;
justify-content: center;
flex-direction: row;
gap: 30px;
}



.vertical-solutions-card {
background-color: #fff;
border: 2px solid #a2c801;
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
justify-content: center;
padding: 20px;
height: fit-content;
}

.vertical-solutions-card:hover{
  border: 2px solid #0671d8;
}


.vertical-solutions-card svg{
width: 15%;
height: 15%;
fill: #A2C801;
margin-bottom: 20px;
margin-top: 20px;
}
.vertical-solutions-card:hover svg{

fill: #0671d8;


}



.transparent-button-2{
display:flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
width:100%;


}
.transparent-button-2 a{
padding:0px 5px 5px 0px;
color: black;
font-size: 18px;
text-decoration: none;
text-transform: capitalize;
}
.transparent-button-2 i{
height: 18px;
width:18px !important;
margin-top: -10px;
}
/* fifth section end */





/* sixth section */
/* sixth section start */
.sixth-bk {
background-color: #f7f9fe;
padding: 80px 75px 80px 75px;
display: flex;
justify-content: space-between;
flex-direction: column;
/* gap: 20px; */
margin-top: 70px;
margin-bottom: 50px;
}
.sixth-para {
display: flex;

justify-content:center;
flex-direction: column;
padding-left: 60px;
padding-top: 0px;
}
.sixth-heading {
padding-right: 60px;
}
.sixth-button {
padding-top: 0px;
}





.microsoft-services-row{
  margin-top: 30px;
display:flex;
flex-direction: row;
gap:30px;
}



.microsoft-services {
  width: 24% !important;
  background-color: #f3f3f3;
  padding: 25px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-direction: column;
  border-radius: 20px;
  /* gap: 0px; */
  position: relative;
  overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
  z-index: 1; /* Ensure the text is above the pseudo-element */
  color: black; /* Default text color */
  transition: color 0.3s ease; /* Smooth color transition */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.microsoft-services::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%; /* Start with a large width */
  height: 300%; /* Start with a large height */
  background: linear-gradient(45deg, rgba(162, 200, 1, 0.8), rgba(162, 200, 1, 0.5)); /* Gradient background */
  border-radius: 50%; /* Make it circular */
  transform: translate(-50%, -50%) scale(0); /* Center it and scale down */
  transition: transform 0.7s ease-in-out, background 0.7s ease-in-out; /* Transition effect */
  z-index: -1; /* Place it behind the text */
}

.microsoft-services:hover {
  color: white; /* Change text color on hover */
}

.microsoft-services:hover::before {
  transform: translate(-50%, -50%) scale(1); /* Scale it up on hover */
  background: linear-gradient(45deg, rgba(162, 200, 1, 1), rgba(162, 200, 1, 0.8)); /* Darker gradient on hover */
}
.microsoft-services:hover .hovercolorwhite{
 
  color: white;
}

.microsoft-services i{
width:20%;
}
.microsoft-services img{
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}
/* sixth section end */

/* seventh section start */
.seventh-bk {
padding: 80px 75px 80px 75px;
display: flex;
justify-content:center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.seventh-row {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}



.clients {
background-color: #f6f6f6;
border-radius: 20px;
padding: 20px;
/* width: 50%; */
height:60vh;
display: flex;
align-items: start;
justify-content: start;
gap: 20px;
flex-direction: column;
}

.clients-role {
margin-top: -20px;
}
/* seventh section end */
/* eight section start */
.eight-bk {
padding: 0px 75px 60px 75px;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 20px;

}
.grdient {
background-color: #A2C801;
/* background-color: ; */
border-radius: 20px;
padding: 60px;
color: white;
}

.microsoft-services h4{
font-size: 24px;
}

/* eight section end */

@media only screen and (max-width: 800px) {
  .hero-bk {
    padding: 0px 20px;
    border-radius: 20px;
  
  }
.carousel-1 {
height: 50vh;
padding:15px;
}
.carousel-1 h1 {
  width: 100%;
}
.carousel-2 {
height: 50vh;
padding:15px;
}
.carousel-2 h1 {
  width: 100%;
}
.carousel-3 {
  height: 50vh;
  padding:15px;
  }
  .carousel-3 h1 {
    width: 100%;
  }
  .carousel-4 {
    height: 50vh;
    padding:15px;
    }
    .carousel-4 h1 {
      width: 100%;
    }

/* second section */
.second-bk{
  padding:60px 20px 30px 20px;
}
.second-bk p{
  width:100%;
}

/* second section end */
/* third section */
.third-bk{
padding: 0px 20px 60px 20px;
}
.third-bk-1 {
  padding: 60px 20px 60px 20px;
}
.transparent-button-1 a{

font-size: 16px;
}  
.transparent-button-1 i{
height: 16px;
width:16px !important;
}
.service-heading {
padding: 0px 20px;
font-family: poppins;
font-size: 20px;
font-weight: 500;
line-height: 25px;

}
/* third section end*/

/* row section start */

/* row section end */


/* fourth section start*/
.swiper-container {
overflow: hidden;
}
/* fourth section End*/




/* fifth section */
.fifth-bk {
  padding: 0px 20px 60px 20px;
}
.transparent-button-2 a{
font-size: 16px;
}
.transparent-button-2 i{
height: 16px;
width:16px !important;
margin-top: -10px;

}
/* fifth section */

/* sixth section */
.sixth-bk {
padding: 60px 20px 60px 20px;

}
.sixth-para {
padding-left: 0px;
padding-top: 0px;
}
.sixth-heading {
padding-right: 0px;
margin-left: -15px;
}
.sixth-button {
padding-top: 0px;
}
.microsoft-services-row{
display:flex;
flex-direction: column;
}
.microsoft-services{
width:100% !important;
}
/* seventh section */
.seventh-bk {
padding: 60px 20px 60px 20px;
align-items: start;
justify-content:start;
}
.clients {
height:fit-content;
}
/* seventh section end */
/* eight section */
.eight-bk {
padding: 0px 20px 60px 20px;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 20px;
}
.grdient {
padding:20px;
}
.white-button {
background-color: #ffffff;
color: black;
padding: 10px 30px 15px 30px;
border: 0px solid black;
border-radius: 30px;
font-size: 16px;
}







/* circle mobile start  */



.containerfull{
  flex-direction: column;
  justify-content: space-between;
padding: 0px 20px;
gap: 40px
;
}


.head-text-circle {
font-size: 18px;
font-weight: 500;
font-family: poppins;
color: #A2C801;
padding-bottom: 20px;

}

.head-text-circle-small {
font-size: 10px;
font-weight: 500;
font-family: poppins;
color: black;
}

.para-text-circle {
font-size: 10px;
font-weight: 500;
font-family: poppins;
color: black;

}

.pie-chart {
position: relative;
width: 350px;
height: 350px;
border-radius: 50%;
overflow: hidden;
transform: rotate(0deg);
background: rgb(255, 255, 255);
/* border: 2px solid rgb(255, 255, 255); */
transition: transform 0.5s ease-in-out;
}
.slice {
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; /* Smooth transition for slice rotation */
}

.rotate-text {
position: absolute;
text-align: center;
font-size: 10px;
font-weight: 500;
color: rgb(0, 0, 0);
transform-origin: center; /* Ensure the rotation is around the center */
transition: transform 0.5s ease-in-out; /* Smooth transition for text rotation */
}
.pie-chart-container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.line-image {
position: absolute;
width: 50px; /* Adjust as needed */
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.slice span {
position: absolute;
text-align: center;
font-size: 10px;
font-weight: 500;
color: rgb(0, 0, 0);
transform-origin: center; /* Ensure the rotation is around the center */
}

.slice::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
/* border: 3px solid rgb(103, 98, 98); */
clip-path: polygon(50% 50%, 100% 0, 100% 9%);

}

.slice[data-id="1"] span {
position: absolute;
top: 45%;
left: 62%;
text-align: center;
font-size: 12px;
font-weight: 500;
color: rgb(255, 255, 255);

}

.slice[data-id="2"] span {
position: absolute;
top: 45%;
left: 60%;
text-align: center;
font-size: 12px;
font-weight: 500;

color: rgb(255, 255, 255);
transform: rotate(-90deg);

}

.slice[data-id="3"] span {
position: absolute;
top: 41%;
left: 64%;
text-align: center;
font-size: 12px;
font-weight: 500;
color: rgb(255, 255, 255);
transform: rotate(-180deg);


}

.slice[data-id="4"] span {
position: absolute;
top: 45%;
left: 65%;
text-align: center;
font-size: 12px;
font-weight: 500;

color: rgb(255, 255, 255);
transform: rotate(90deg);


}

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

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

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

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



.center-circle {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
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;
}

.center-circle img{
width:50%;
height:50%;
}

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



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



.content div.active {
  width: 110%;

display: block;
transform: rotate(0);
}


.slice.active {
background: #A2C801;
}

.slice.active  span {
background: #A2C801;
color: white !important;
transform: rotate(0) !important;
text-decoration: none !important;
}


.list-unorder {
  margin-left: -22px;
  gap: 20px;
  width: 100%;
  margin-top: 20px;
  list-style: none;
  display: flex;
  height: fit-content;
  align-items: center;
  justify-content: space-between;
}

.list-unorder li {
width: 100%;
border-right: 2px solid #A2C801;
font-family: poppins;
font-size: 10px;
font-weight: 500;
color: black;
cursor: pointer;
padding: 5px;
height: max-content;

}

.list-unorder a li {

width: 172px;
border-right: 2px solid #A2C801;
cursor: pointer;
padding: 5px;
height: max-content;
text-align: start;

}

.list-unorder a {
/* list-style: none; */
text-decoration: none;
color: black;
font-family: poppins;
font-size: 14px;
font-weight: 500;
color: black;
padding-left: 6px;
}

/* circle mobile End */

.vertical-solutions-card svg{
  width: 15%;
  height: 15%;
  fill: #A2C801;
  margin-bottom: 20px;
  margin-top: 20px;
  }

  .microsoftimg{
    height:300px;
    width:400px;
    object-fit: cover;
  }
  .li{
    margin-top: 10px;
    margin-left: -15px;
    font-size: 16px;
    line-height: 1.3em;  
  }
  .text-center-1{
    text-align: center;
    margin-left: 0%;
  }
  .scalable{
    flex-direction: column;
    display:flex;
    align-items: center !important;
  }
.microsoft-logo{
  display: flex;
  align-items: center;

}
.microsoft-row{
 margin-top: 20px;
padding-left: 30px;
}

.microsoft-logo-1{
 margin-bottom:10px;
 margin-left: 10px;
}
.microsoft-logo-2{
  margin-left:0px !important;
 }



 /* Existing styles remain unchanged, adding mobile-specific fixes */

  .carousel-container {
    width: 100%; /* Full width to contain exactly one slide */
    max-width: 300px; /* Optional: cap the width for consistency */
    margin: 0 auto; /* Center it */
  }
  .custom-swiper {
    overflow: hidden; /* Ensure no overflow */
  }
  .swiper-slide {
    width: 100% !important; /* Full width of the container */
    margin: 0 !important; /* Remove margins that might push slides */
    padding: 15px;
    box-sizing: border-box; /* Include padding in width */
  }
  .swiper-slide img {
    width: 100% !important;
    height: auto !important;
  }
  .custom-button-prev {
    left: 5px;
     display: none;
  }
  .custom-button-next {
    right: 5px;
    display: none;

  }
  
}







/* circle start */

.containerfull {
margin-top: -50px;
display: flex;
align-items: center;
padding-top: 30px;
justify-content: space-between;
padding: 0px 80px;
background-color: transparent;

position: relative;
}

.head-text-circle {
font-size: 30px;
font-weight: 500;
font-family: poppins;
color: #A2C801;
padding-bottom: 20px;

}

.head-text-circle-small {
font-size: 20px;
font-weight: 500;
font-family: poppins;
color: black;
}

.para-text-circle {
font-size: 15px;
font-weight: 500;
font-family: poppins;
color: black;

}

.pie-chart {
position: relative;
width: 500px;
height: 500px;
border-radius: 50%;
overflow: hidden;
transform: rotate(0deg);
background: rgb(255, 255, 255);
/* border: 2px solid rgb(255, 255, 255); */
transition: transform 0.5s ease-in-out;
}
.slice {
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; /* Smooth transition for slice rotation */
}

.rotate-text {
position: absolute;
text-align: center;
font-size: 16px;
font-weight: 500;
color: rgb(0, 0, 0);
transform-origin: center; /* Ensure the rotation is around the center */
transition: transform 0.5s ease-in-out; /* Smooth transition for text rotation */
}
.pie-chart-container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.line-image {
position: absolute;
width: 50px; /* Adjust as needed */
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.slice span {
position: absolute;
text-align: center;
font-size: 16px;
font-weight: 500;
color: rgb(0, 0, 0);
transform-origin: center; /* Ensure the rotation is around the center */
}

.slice::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 3px solid rgb(103, 98, 98);
clip-path: polygon(50% 50%, 100% 0, 100% 9%);

}

.slice[data-id="1"] span {
position: absolute;
top: 46%;
left: 65%;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #ffffff;
/* text-decoration: underline; */

}
.slice[data-id="1"]:hover span{
  text-decoration: none;
}

.slice[data-id="2"] span {
position: absolute;
top: 45%;
left: 65%;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #ffffff;
/* text-decoration: underline; */
transform: rotate(-90deg);

}
.slice[data-id="2"]:hover span{
  text-decoration: none;
}

.slice[data-id="3"] span {
position: absolute;
top: 41%;
left: 63%;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #ffffff;
/* text-decoration: underline; */
transform: rotate(-180deg);


}
.slice[data-id="3"]:hover span{
  text-decoration: none;
}

.slice[data-id="4"] span {
position: absolute;
top: 46%;
left: 65%;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #ffffff;
/* text-decoration: underline; */
transform: rotate(90deg);


}
.slice[data-id="4"]:hover span{
  text-decoration: none;
}

/* Positioning each slice */
.slice[data-id="1"] {
background: #0a4783;
transform: rotate(0deg);
cursor: pointer;
}

.slice[data-id="2"] {
background: #0a4783;
transform: rotate(90deg);
cursor: pointer;
}

.slice[data-id="3"] {
background: #0a4783;
transform: rotate(180deg);
cursor: pointer;
}

.slice[data-id="4"] {
background: #0a4783;
transform: rotate(270deg);
cursor: pointer;
}

.slice:hover {
  background-color: #A2C801;
  cursor: url('../src/photos/svg/Click-here-cursour.png'), auto;

/* opacity: 0.8; */
}


.center-circle {
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;
}

.center-circle img{
width:50%;
height:50%;
}

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



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



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




.slice.active {
background: #A2C801;
}


.slice.active  span {
background: #A2C801;
color: white !important;
transform: rotate(0) !important;
text-decoration: none;
}


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

.list-unorder 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;

}

.list-unorder a li {

width: 172px;
border-right: 2px solid #A2C801;
cursor: pointer;
padding: 5px;
height: max-content;
text-align: start;

}

.list-unorder a {
/* list-style: none; */
text-decoration: none;
color: black;
font-family: poppins;
font-size: 14px;
font-weight: 500;
color: black;
padding-left: 6px;
}

/* circle End */