
@media (max-width: 374px) {

    .featured-p {
        padding-top: 25px !important;
    }

    .further-sec h2 {
        font-size: 18px !important;
        letter-spacing: -0.72px !important;
    }

    .further-sec h6 {
        font-size: 12px !important;
      }

      .further-sec .acf-header-btn {
        font-size: 10px !important;
      }

      .height-fix {
        height: 180px !important;
      }
         

}

@media (min-width: 375px) and  (max-width: 399px) {

    .featured-p {
        padding-top: 25px !important;
    }

    .height-fix{
        height: 200px !important;
      }


.further-sec h2 {
    font-size: 23px !important;
    letter-spacing: -0.72px !important;
}

.further-sec h6 {
    font-size: 14px !important;
  }
   
  .further-sec .acf-header-btn {
    font-size: 11px !important;
  }

}

@media (min-width: 400px) and  (max-width: 575px) {

    .featured-p {
        padding-top: 25px !important;
    }

    .height-fix{
        height: 200px !important;
      }

    .further-sec h2 {
        font-size: 23px !important;
    }

    .further-sec h6 {
        font-size: 15px !important;
      }

      .further-sec .acf-header-btn {
        font-size: 10px !important;
      }

}


@media (min-width: 576px) and  (max-width: 767px) {

    .featured-p{
        padding-top: 50px !important;
      }

    .height-fix{
        height: 200px !important;
      }

    .further-sec h2{
        font-size: 23px !important;
    }

    .further-sec h6 {
        font-size: 11px !important;
    }

    .further-sec .acf-header-btn{
        font-size: 12px !important;
      }
}


@media (min-width: 768px) and  (max-width: 991px) {

    .featured-p{
        padding-top: 50px !important;
      }

    .height-fix{
        height: 200px !important;
      }

    .further-sec h2{
        font-size: 25px !important;
    }
  
    .further-sec h6{
      font-size: 13px !important;
  }
  
  .further-sec .acf-header-btn{
    font-size: 12px !important;
  }

}

@media (min-width: 992px) and  (max-width: 1199px) {

    .featured-p{
        padding-top: 50px !important;
      }

    .height-fix{
        height: 250px !important;
      }
    

    .further-sec h2{
        font-size: 35px !important;
    }
  
    .further-sec h6{
      font-size: 16px !important;
  }
  
  .further-sec .acf-header-btn{
    font-size: 15px !important;
  }

}

@media (min-width: 1200px) and  (max-width: 1399px) {

    .featured-p{
        padding-top: 50px !important;
      }

    .height-fix{
        height: 250px !important;
      }

    .further-sec h2{
        font-size: 39px !important;
    }
  
    .further-sec h6{
      font-size: 19px !important;
  }
  
  .further-sec .acf-header-btn{
    font-size: 19px !important;
  }

}

@media (min-width: 1400px) and  (max-width: 1800px) {

    .featured-p{
        padding-top: 50px !important;
      }

    .height-fix{
        height: 270px !important;
      }

    .further-sec h2{
        font-size: 39px !important;
    }
   
    .further-sec h6{
      font-size: 19px !important;
   }
   
   .further-sec .acf-header-btn{
    font-size: 19px !important;
   }
}

@media (min-width: 1801px) and  (max-width: 2599px) {

    .further-sec h6{
        font-size: 28px !important;
      }
      
      .further-sec button{
        font-size: 28px !important;
      }

}

@media (min-width: 2560px) and  (max-width: 3880px) {
    .featured-p{
        padding-top: 100px !important;
      }

    .height-fix{
        height: 470px !important;
      }

    .further-sec h2{
        font-size: 69px !important;
    }
  
    .further-sec h6{
      font-size: 39px !important;
  }
  
  .further-sec .acf-header-btn{
    font-size: 39px !important;
  }

}




.synergys .arrow-text{
  margin-bottom: 30px !important;
}

.circle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 65px;
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.circle {
  display: flex;
  width: 148px;
  height: 148px;
  padding: 46px 28px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 150px;
  opacity: 0.85;
  background: var(--Light-Gray, #F5F5F5);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);  
  position: relative;
}

.circle-text {
  color: var(--Dark-Gray, #161A1B);
  text-align: center;
  font-family: Manrope;
  font-size: 19.2px;
  font-style: normal;
  font-weight: 500;
  line-height: 100.401%; /* 19.277px */
  letter-spacing: -0.384px;
}

@media (max-width: 1199px) {
  .circle-container {
    gap: 50px 100px;
  }
}

@media (max-width: 991px) {
  .circle-container {
    gap: 30px 60px;
  }
}

@media (max-width: 767px) {
  .circle-container {
    gap: 20px 40px;
  }
}

@media (min-width: 768px) {
  .circle-container {
    justify-content: flex-start;
  }
}

.connected-circle {
  border-radius: 150px;
  border: 10px solid var(--Acufore-Green, #2BA88A);
  background: var(--Light-Gray, #F5F5F5);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}


#circle4:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #81C9E0;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#circle4:hover::before {
  content: "Electronics Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #81C9E0;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}

#circle2:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #ffae00;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#circle2:hover::before {
  content: "Mechanical Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #ffae00;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}



#circle1:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #E08181;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#circle1:hover::before {
  content: "Software Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #E08181;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}


#circle3:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #E08181;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#circle3:hover::before {
  content: "Plant Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #E08181;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}


/*  */





.acircle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 65px;
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.acircle {
  display: flex;
  width: 148px;
  height: 148px;
  padding: 46px 28px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 150px;
  opacity: 0.85;
  background: var(--Light-Gray, #F5F5F5);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);  
  position: relative;
}

.acircle-text {
  color: var(--Dark-Gray, #161A1B);
  text-align: center;
  font-family: Manrope;
  font-size: 19.2px;
  font-style: normal;
  font-weight: 500;
  line-height: 100.401%; /* 19.277px */
  letter-spacing: -0.384px;
}

@media (max-width: 1199px) {
  .acircle-container {
    gap: 50px 100px;
  }
}

@media (max-width: 991px) {
  .acircle-container {
    gap: 30px 60px;
  }
}

@media (max-width: 767px) {
  .acircle-container {
    gap: 20px 40px;
  }
}

@media (min-width: 768px) {
  .acircle-container {
    justify-content: flex-start;
  }
}

.aconnected-circle {
  border-radius: 150px;
  border: 10px solid var(--Acufore-Green, #2BA88A);
  background: var(--Light-Gray, #F5F5F5);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}


#acircle4:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #81C9E0;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#acircle4:hover::before {
  content: "Electronics Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #81C9E0;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}

#acircle2:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #ffae00;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#acircle2:hover::before {
  content: "Mechanical Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #ffae00;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}



#acircle1:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #E08181;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#acircle1:hover::before {
  content: "Software Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #E08181;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}


#acircle3:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #E08181;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#acircle3:hover::before {
  content: "Plant Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #E08181;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}





/*  */





.bcircle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 65px;
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.bcircle {
  display: flex;
  width: 148px;
  height: 148px;
  padding: 46px 28px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 150px;
  opacity: 0.85;
  background: var(--Light-Gray, #F5F5F5);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);  
  position: relative;
}

.bcircle-text {
  color: var(--Dark-Gray, #161A1B);
  text-align: center;
  font-family: Manrope;
  font-size: 19.2px;
  font-style: normal;
  font-weight: 500;
  line-height: 100.401%; /* 19.277px */
  letter-spacing: -0.384px;
}

@media (max-width: 1199px) {
  .bcircle-container {
    gap: 50px 100px;
  }
}

@media (max-width: 991px) {
  .bcircle-container {
    gap: 30px 60px;
  }
}

@media (max-width: 767px) {
  .bcircle-container {
    gap: 20px 40px;
  }
}

@media (min-width: 768px) {
  .bcircle-container {
    justify-content: flex-start;
  }
}

.bconnected-circle {
  border-radius: 150px;
  border: 10px solid var(--Acufore-Green, #2BA88A);
  background: var(--Light-Gray, #F5F5F5);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}


#bcircle4:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #81C9E0;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#bcircle4:hover::before {
  content: "Electronics Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #81C9E0;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}

#bcircle2:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #ffae00;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#bcircle2:hover::before {
  content: "Mechanical Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #ffae00;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}



#bcircle1:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #E08181;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#bcircle1:hover::before {
  content: "Software Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #E08181;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}


#bcircle3:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #E08181;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#bcircle3:hover::before {
  content: "Plant Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #E08181;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}


/*  */


.ccircle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 65px;
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.ccircle {
  display: flex;
  width: 148px;
  height: 148px;
  padding: 46px 28px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 150px;
  opacity: 0.85;
  background: var(--Light-Gray, #F5F5F5);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);  
  position: relative;
}

.ccircle-text {
  color: var(--Dark-Gray, #161A1B);
  text-align: center;
  font-family: Manrope;
  font-size: 19.2px;
  font-style: normal;
  font-weight: 500;
  line-height: 100.401%; /* 19.277px */
  letter-spacing: -0.384px;
}

@media (max-width: 1199px) {
  .ccircle-container {
    gap: 50px 100px;
  }
}

@media (max-width: 991px) {
  .bcircle-container {
    gap: 30px 60px;
  }
}

@media (max-width: 767px) {
  .ccircle-container {
    gap: 20px 40px;
  }
}

@media (min-width: 768px) {
  .ccircle-container {
    justify-content: flex-start;
  }
}

.cconnected-circle {
  border-radius: 150px;
  border: 10px solid var(--Acufore-Green, #2BA88A);
  background: var(--Light-Gray, #F5F5F5);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}


#ccircle4:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #81C9E0;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#ccircle4:hover::before {
  content: "Electronics Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #81C9E0;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}

#ccircle2:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #ffae00;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#ccircle2:hover::before {
  content: "Mechanical Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #ffae00;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}



#ccircle1:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #E08181;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#ccircle1:hover::before {
  content: "Software Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #E08181;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}


#ccircle3:hover::after {
  content: "";
  width: 286px;
  height: calc(128px * 3 + 70px * 2); /* Height of 3 rows of circles with gap */
  position: absolute;
  top: -30%; /* Position at the bottom of the circle */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  border-radius: 50px;
  border: 7px dashed #E08181;
  z-index: 1; /* Ensure it's above the circles */
  cursor: pointer;
}


#ccircle3:hover::before {
  content: "Plant Engineering";
  display: inline-flex;
  padding: 8px 60px;
  align-items: center;
  gap: 60px;
  border-radius: 15px;
  background: #E08181;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 23.04px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: -50%; /* Adjust this value to position it properly */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure it's above the dashed line */
}


@media (min-width: 0px) and (max-width: 1199px){
  #medical-device{
    display: none;
  }
}


@media (min-width: 1200px){
  .md-mobile{
    display: none;
  }

}

.synergys.hidden {
  display: none;
}

.synergys.active {
  display: block;
}




.active {
  display: block;
}







@media (min-width: 0px) and (max-width: 767px) {

.syn-lap{
    display:none;
}

}


@media (min-width: 768px) {

.syn-mob{
    display:none;
}

}
