.bgrd {
    background-color: #000000;
    /*background-color: #106f8e;*/
    padding-top: 2%;
    padding-left: 4%;
}
.service-page-imgback {
    position: relative;
    z-index: 0;
    margin-top: 6%;
}
.service-back-img {
    width: 100%;
    height: 100%;
}
.out-sourcing-circle-div{
  padding: 08% 0;
}
/* circles css */
:root {
  --orange: #fea500;
  --platinum: #e5e5e5;
  --black: #000000;
  --white: #ffffff;
  --back-white: #f6f1f16a;
  --thumb: #edf2f4;
}
.service-page-cicle {
    position: absolute;
    width: 100%;
    top: 0;
    /*background-color: #00000030;*/
    /* background: linear-gradient(360deg, black, transparent); */
    padding-bottom: 3%;
    z-index: 1;
    margin-top: 6%;
}
.circles {
  margin-top: 1% !important;
}
.padding-all {
    padding: 17px 0;
}
.service-title {
    font-family: "Roboto", sans-serif;
    font-size: 40px;
    color: white;
    font-weight: 600;
    margin: 0;
    padding-top: 13px;
    text-shadow: 0px 0px 12px rgb(0 0 0);
}
u {
  text-decoration-color: #fea500;
  text-underline-offset: 15%;
}
.card-title {
  font-family: "Roboto", sans-serif;
  color: white !important;
  text-align: center;
  font-weight: 700;
}
.card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgb(0 0 0 / 55% ) !important; /* Set the alpha value to control transparency */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 15%);
  transition: all 0.2s;
  border-radius: 50% !important;
  height: 142px !important;
  padding: 0 10px;
  border: 3px solid rgb(255 255 255) !important;
  width : 142px;
}

.card:hover {
  color: var(--black) !important;
  background: var(--orange) !important;
}

.card .card-content {
  margin: 20px 0;
  max-width: 85%;
}

.card .card-link-wrapper {
  margin-top: auto;
}

.card:hover .card-link {
  background: var(--darkorange);
}
.zoom-effect {
  transition: transform 0.2s;
}
.zoom-effect:hover {
  transform: scale(1.1);
}
.service-sub-title {
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  color: white;
}
/* when view chnages to desktop to mobile then this will work */
.my-div {
  /* Set the initial height */
  background-color: #000000;
}

/* Media query for mobile devices with a maximum width of 768px (adjust this value as needed) */
@media screen and (max-width: 768px) {
  .service-back-img {
    display: none;
  }
    .service-page-imgback {
        margin-top: 15%;
    }
    .card {
        height: 210px !important;
        /*height: 205px !important;*/
        width: 210px !important; 
    }
    .service-page-cicle {
        padding-bottom: 7%;
        margin-top: 15%;
    }
  .mobile-img {
    height: 2255px;
    width: 100%;
  }
  .outsourse-mobile-img{
    height: 1178px;
    width: 100%;
  }
  .it-service-mobile-img {
    height: 2302px;
    width: 100%;
  }
    .service-title{
        font-size: 29px;
    }
    .padding-all {
        padding-left: 42px !important;
        padding-top: 29px !important;
        padding-bottom: 29px !important;
    }
}
/* Media query for devices with a minimum width of 769px (desktop view) */
@media screen and (min-width: 769px) {
  .mobile-img {
    display: none; /* Hide the mobile image on desktop */
  }
  .outsourse-mobile-img{
    display: none;
  }
  .it-service-mobile-img {
    display: none;
  }
}

@media (min-width: 500px) {
  .cards {
    grid-auto-columns: calc(50% - 10px);
    grid-column-gap: 20px;
  }
}

@media (min-width: 700px) {
  .cards {
    grid-auto-columns: calc(calc(100% / 3) - 20px);
    grid-column-gap: 30px;
  }
}

@media (min-width: 1100px) {
  .cards {
    grid-auto-columns: calc(25% - 30px);
    grid-column-gap: 40px;
  }
}

.servicepage-row {
   /*background-color: #106f8e;*/
  background-color: #000000;
  padding: 4% 4%;
  padding-top: 3%;
  margin: 0 !important;
}

.img-fluid {
  max-height: 370px;
  width: auto;
}

.lst {
  margin-top: 4%;
}
.bullet-font {
  font-family: "Roboto", sans-serif;
  font-size: 130%;
  color: white;
}
.col-md-6 {
  height: 100%;
}

/* zoom effect */
.zoom-effect {
  transition: transform 0.2s;
}

.zoom-effect:hover {
  transform: scale(1.1);
}