/*border: 1px solid blue;
*/
.service-main {
  position: relative;
  padding: 15px;
}
@media only screen and (max-width: 767px) {
  .service-main .about-title {
    font-size: 2rem;
    line-height: 2.8rem;
 }
}
.service-main:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--white);
  height: 100%;
  width: 100%;
  z-index: -100;
  transition: var(--transition);
}
.service-main .new-about-title {
  font-size: 2.8rem;
  letter-spacing: -0.1rem;
  line-height: 3.6rem;
  color: var(--secondary);
}
@media only screen and (min-width: 576px) {
  .service-main .new-about-title {
    font-size: 3.2rem;
    line-height: 3.8rem;
 }
}
@media only screen and (min-width: 768px) {
  .service-main .new-about-title {
    font-size: 3.6vw;
    line-height: 5vw;
    letter-spacing: -0.2vw;
 }
}
@media only screen and (min-width: 992px) {
  .service-main .new-about-title {
    font-size: 2.5vw;
    line-height: 3.3vw;
    letter-spacing: -0.2vw;
 }
}
/*-----*/
.services-new-title {
  width: 100%;
  display: block;
  position: sticky;
  top: 90px;
}
.services-title-main {
  z-index: 2;
}
.services-title-main .services-title {
  position: sticky;
  left: 0;
}
.services-title-main .services-title .services-title-ui {
  padding: 0;
 /*margin-top: 9vw;
 */
 /* @media only screen and (min-width: 1500px) and (max-width: 1799px) {
    margin-top: 10vw;
 }
  @media only screen and (min-width: 1200px) and (max-width: 1499px) {
    margin-top: 12vw;
 }
 */
}
.services-title-main .services-title .services-title-ui .service-header {
  margin: 2.8vw 0 6vw;
}
@media only screen and (max-width: 1500px) and (max-width: 1699px) {
  .services-title-main .services-title .services-title-ui .service-header {
    margin: 4vw 0 7.5vw;
 }
}
@media only screen and (max-width: 1367px) and (max-width: 1499px) {
  .services-title-main .services-title .services-title-ui .service-header {
    margin: 4.5vw 0 7vw;
 }
}
@media only screen and (max-width: 1200px) and (max-width: 1366px) {
  .services-title-main .services-title .services-title-ui .service-header {
    margin: 4.2vw 0 8vw;
 }
}
@media only screen and (max-width: 1199px) {
  .services-title-main .services-title .services-title-ui .service-header {
    margin: 2.6vw 0 3vw;
 }
}
@media only screen and (max-width: 991px) {
  .services-title-main .services-title .services-title-ui .service-header {
    margin: 0vw 0 3vw;
 }
}
@media only screen and (max-width: 767px) {
  .services-title-main .services-title .services-title-ui .service-header .section-title {
    margin-bottom: 3rem !important;
 }
}
.services-title-main .services-title .services-title-ui span.active .down-arrow:before {
  transform: rotate(225deg);
  transition: 300ms ease;
  top: 1.25rem;
}
.services-title-main .services-title .services-title-ui span:nth-child(2) .services-title-a {
  // background: linear-gradient(90deg, #1d2671 0%, #c33764 100%);
  background: linear-gradient(94.12deg, #9945FF -2.78%, #00E0FF 76.3%, #00FF77 103.32%);
}
.services-title-main .services-title .services-title-ui span:nth-child(3) .services-title-a {
  background: linear-gradient(90deg, #185a9d 0%, #43cea2 100%);
}
.services-title-main .services-title .services-title-ui span:nth-child(4) .services-title-a {
  background: linear-gradient(to left, #4b0082, #9400d3);
}
.services-title-main .services-title .services-title-ui span:nth-child(5) .services-title-a {
  background: linear-gradient(90deg, #2d9ee0 0%, #2f80ed 50%, #091e3a 100%);
}
.services-title-main .services-title .services-title-ui span:nth-child(6) .services-title-a {
  background: linear-gradient(90deg, #00467f, #a5cc82);
}
.services-title-main .services-title .services-title-ui span:nth-child(7) .services-title-a {
  background: linear-gradient(90deg, #1d2671 0%, #c33764 100%);
}
.services-title-main .services-title .services-title-ui span:nth-child(8) .services-title-a {
  background: linear-gradient(to left, #29d6d5, #c6bf2c, #df870a, #d66706);
}
.services-title-main .services-title .services-title-ui span:nth-child(9) .services-title-a {
  background:linear-gradient(to left, #4b0082, #9400d3);
}
.services-title-main .services-title .services-title-ui span:nth-child(2).active .services-title-a:before {
  background: linear-gradient(90deg, #1d2671 0%, #c33764 100%);
  transition: 2s all;
  z-index: -1;
}
.services-title-main .services-title .services-title-ui span:nth-child(3).active .services-title-a:before {
  background: linear-gradient(90deg, #185a9d 0%, #43cea2 100%);
  transition: 2s all;
}
.services-title-main .services-title .services-title-ui span:nth-child(4).active .services-title-a:before {
  background: linear-gradient(to left, #4b0082, #9400d3);
  transition: 2s all;

}
.services-title-main .services-title .services-title-ui span:nth-child(5).active .services-title-a:before {
  background: linear-gradient(90deg, #2d9ee0 0%, #2f80ed 50%, #091e3a 100%);
  transition: 2s all;

}
.services-title-main .services-title .services-title-ui span:nth-child(6).active .services-title-a:before {
  background: linear-gradient(90deg, #00467f, #a5cc82);
  transition: 2s all;

}
.services-title-main .services-title .services-title-ui .d-active {
  height: 100% !important;
  transition: 1000ms ease;
}
.services-title-main .services-title .services-title-ui .details {
  height: 0;
  overflow: hidden;
}
.services-title-main .services-title .services-title-ui .details h1 {
  color: #fff;
}
.services-title-main .services-title .services-title-ui span {
  margin-bottom: 3rem;
  display: block;
  position: relative;
}
.services-title-main .services-title .services-title-ui span:last-child {
  margin-bottom: 11rem;
}
@media only screen and (max-width: 1199px) {
  .services-title-main .services-title .services-title-ui span:last-child {
    margin-bottom: 0rem;
 }
}
.services-title-main .services-title .services-title-ui span .services-title-a {
  display: block;
  width: 136%;
  height: 100%;
  padding: 4.5rem 5rem;
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  cursor: pointer;
}
@media only screen and (min-width: 1500px) and (max-width: 1799px) {
  .services-title-main .services-title .services-title-ui span .services-title-a {
    padding: 2rem 1.3rem;
    border-radius: 1.5rem;
 }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .services-title-main .services-title .services-title-ui span .services-title-a {
    padding: 2.5rem 3rem;
    border-radius: 1rem;
 }
}
@media only screen and (max-width: 1199px) {
  .services-title-main .services-title .services-title-ui span .services-title-a {
    border-radius: 0;
 }
}
@media only screen and (max-width: 1199px) {
  .services-title-main .services-title .services-title-ui span .services-title-a {
    width: 100%;
    padding: 3.5rem;
 }
}
@media only screen and (max-width: 991px) {
  .services-title-main .services-title .services-title-ui span .services-title-a {
    width: 100%;
    padding: 2.5rem;
 }
}
@media only screen and (max-width: 575px) {
  .services-title-main .services-title .services-title-ui span .services-title-a {
    width: 100%;
    padding: 20px 15px;
 }
 .mobiledisplay {
  flex-direction: column;
  text-align: center;
}
.cardp {
  padding-left: 0px;
}

}

.services-title-main .services-title .services-title-ui span .services-title-a .icon-box {
  z-index: 2;
}
.services-title-main .services-title .services-title-ui span .services-title-a .title {
  padding: 0 2rem;
  font-size: 2.4rem;
  line-height: 3.4rem;
  color: var(--secondary);
  margin: 0;
  z-index: 2;
  color: #fff;
}
@media only screen and (min-width: 1500px) and (max-width: 1799px) {
  .services-title-main .services-title .services-title-ui span .services-title-a .title {
    padding: 0 0 0 2rem;
    font-size: 20px;
    line-height: 1.8rem;
    font-weight: 600;
 }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .services-title-main .services-title .services-title-ui span .services-title-a .title {
    padding: 0 0 0 2rem;
    font-size: 1.6rem;
    line-height: 2.4rem;
 }
}
@media only screen and (max-width: 1199px) {
  .services-title-main .services-title .services-title-ui span .services-title-a .title {
    font-size: 1.6rem;
    line-height: 3rem;
    padding-left: 1.5rem;
 }
}
@media only screen and (max-width: 767px) {
  .services-title-main .services-title .services-title-ui span .services-title-a .title {
    font-size: 1.6rem;
    line-height: 2.6rem;
    padding: 0 1rem 0 1.6rem;
 }
}
@media only screen and (max-width: 575px) {
  .services-title-main .services-title .services-title-ui span .services-title-a .title {
    font-size: 1.3rem;
    line-height: 2rem;
    padding: 20px 0px 0px;
 }
}
.services-title-main .services-title .services-title-ui span .services-title-a:before {
  top: 1px;
  left: 1px;
  margin: 0;
  content: '';
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  // background-color: #160A2D;
  border-radius: 2.1rem;
 /*@media only screen and (max-width: 991px) {
    border-radius: 1.2rem;
 }
  @media only screen and (max-width: 575px) {
    border-radius: 1rem;
 }
 */
}
@media only screen and (min-width: 1500px) and (max-width: 1799px) {
  .services-title-main .services-title .services-title-ui span .services-title-a:before {
    border-radius: 1.5rem;
 }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .services-title-main .services-title .services-title-ui span .services-title-a:before {
    border-radius: 1rem;
 }
}
@media only screen and (max-width: 1199px) {
  .services-title-main .services-title .services-title-ui span .services-title-a:before {
    border-radius: 0;
 }
}
.services-title-main .services-title .services-title-ui span .services-title-a:after {
  content: '';
  margin: 0;
  top: -20px;
  right: -40px;
  position: absolute;
  height: 236px;
  width: 236px;
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.05;
  z-index: 1;
  border-radius: 2rem;
}
@media only screen and (min-width: 1500px) and (max-width: 1799px) {
  .services-title-main .services-title .services-title-ui span .services-title-a:after {
    border-radius: 1.5rem;
 }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .services-title-main .services-title .services-title-ui span .services-title-a:after {
    border-radius: 1rem;
 }
}
@media only screen and (max-width: 1199px) {
  .services-title-main .services-title .services-title-ui span .services-title-a:after {
    border-radius: 0;
 }
}
@media only screen and (max-width: 575px) {
  .services-title-main .services-title .services-title-ui span .services-title-a:after {
    border-radius: 0;
 }
}
.services-title-main .services-title .services-title-ui span .down-arrow {
  position: absolute;
  right: 18px;
  top: calc(50% - 17px);
  height: 34px;
  width: 34px;
  color: #fff;
  background-color: #1d1d1d;
  border: 1px solid #444;
  z-index: 2;
}
.services-title-main .services-title .services-title-ui span .down-arrow:before {
  content: '';
  position: absolute;
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 0.7rem;
  left: 1rem;
  transition: 300ms ease;
}
.services-title-main .services-title .services-title-ui span .services-title-a.ui-ux-design:before {
 /*background: linear-gradient(90deg, #1D2671 0%, #C33764 100%);
 */
}
.services-title-main .services-title .services-title-ui span .services-title-a.ui-ux-design:after {
  background-image: url("./services-shapes/triangle.png");
}
.services-title-main .services-title .services-title-ui span .services-title-a.game-development:before {
 /* background: linear-gradient(90deg, #185A9D 0%, #43CEA2 100%);
 */
}
.services-title-main .services-title .services-title-ui span .services-title-a.game-development:after {
  background-image: url("./services-shapes/cross.png");
}
.services-title-main .services-title .services-title-ui span .services-title-a.devops-app-services:before {
 /*background: linear-gradient(90deg, #00467f, #a5cc82);
 */
}
.services-title-main .services-title .services-title-ui span .services-title-a.devops-app-services:after {
  background-image: url("./services-shapes/penta.png");
}
.services-title-main .services-title .services-title-ui span .services-title-a.devops-app-services.active:before {
  background: linear-gradient(90deg, #00467f, #a5cc82);
}
.services-title-main .services-title .services-title-ui span .services-title-a.web-app-services:before {
 /*background: linear-gradient(90deg, #2D9EE0 0%, #2F80ED 50%, #091E3A 100%);
 */
}
.services-title-main .services-title .services-title-ui span .services-title-a.web-app-services:after {
  background-image: url("./services-shapes/square.png");
}
.services-title-main .services-title .services-title-ui span .services-title-a.mobile-app-services:before {
 /*background: linear-gradient(to left, #4B0082, #9400D3);
 */
}
.services-title-main .services-title .services-title-ui span .services-title-a.mobile-app-services:after {
  background-image: url("./services-shapes/circle.png");
}
.responsive-services-main-div {
  background: #1d1d1d;
  padding: 2.5rem 1.5rem;
}
@media only screen and (max-width: 1199px) {
  .responsive-services-main-div {
    padding: 2.5rem 1.5rem 3.5rem;
 }
}
.responsive-services-main-div h3 {
  color: #fff;
}
@media only screen and (max-width: 1199px) {
  .responsive-services-main-div h3 {
    font-size: 3rem;
    line-height: 3.6rem;
 }
}
@media only screen and (max-width: 767px) {
  .responsive-services-main-div h3 {
    font-size: 2.4rem;
    line-height: 3.6rem;
 }
}
@media only screen and (max-width: 575px) {
  .responsive-services-main-div h3 {
    font-size: 2rem;
    line-height: 3rem;
 }
}
.responsive-services-main-div ul {
  flex-direction: column;
  min-width: 100%;
}
@media only screen and (max-width: 1199px) {
  .responsive-services-main-div ul li {
    width: 25%;
    float: left;
    margin: 1rem 0;
 }
}
@media only screen and (max-width: 991px) {
  .responsive-services-main-div ul li {
    width: 33.33%;
    float: left;
    margin: 1rem 0 2rem;
 }
}
@media only screen and (max-width: 575px) {
  .responsive-services-main-div ul li {
    width: 50%;
    float: left;
    margin: 0.5rem 0 1.5rem;
 }
}
.responsive-services-main-div ul li .img-box {
  flex-direction: column;
}
.responsive-services-main-div ul li .img-box {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem 0;
  display: inline-block;
}
@media only screen and (max-width: 1199px) {
  .responsive-services-main-div ul li .img-box {
    margin: 0 auto 1rem;
 }
}
.responsive-services-main-div ul li .img-box .service-icon {
  width: 54px;
  aspect-ratio: auto 1;
  max-width: 100%;
}
@media only screen and (max-width: 1199px) {
  .responsive-services-main-div ul li .img-box .service-icon {
    width: 44px;
    aspect-ratio: auto 1;
 }
}
.responsive-services-main-div h4 {
  margin-top: 1.2rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #b2b2b2;
}
@media only screen and (max-width: 991px) {
  .responsive-services-main-div h4 {
    font-size: 1.5rem;
    line-height: 2rem;
 }
}
@media only screen and (max-width: 575px) {
  .responsive-services-main-div h4 {
    font-size: 1.3rem;
    line-height: 2rem;
 }
}
@media only screen and (max-width: 1199px) {
  .responsive-services-main-div .arrow-with-text {
    margin: 0 auto;
    display: flex;
    max-width: 130px;
    height: auto;
 }
}
@media only screen and (max-width: 1199px) {
  .responsive-services-main-div .title {
    margin-bottom: 0 !important;
 }
}
@media only screen and (max-width: 1199px) {
  .responsive-services-main-div .icons {
    display: contents !important;
 }
}
@media only screen and (max-width: 1199px) {
  .responsive-services-main-div .icons .icon-right-arrow {
    margin-bottom: 0 !important;
 }
}
.services-content.active {
  z-index: 2;
}
.home-services-inners {
  position: sticky;
  top: 7.2vw;
  left: 0;
  height: 60vh;
  margin: 6rem 0;
  background-color:#1F1238;
  overflow: hidden;
  border-radius: 30px;
}
.home-services-inners .services-new {
  transition: 1s ease;
  height: 80vh;
}
.home-services-inners .service-title {
  height: 65px;
  background-color:#110222;
  position: relative;
  z-index: 3;
}
.home-services-inners .service-title .section-title {
  margin-top: 14px;
  margin-bottom: 0;
}
.home-services-inners .collapse-active-service {
  height: 100%;
  transition: 1000ms ease-in;
}
.home-services-inners .services-new {
 /*padding: 8vw 2vw 5vw 8vw;
 */
  flex-direction: column;
  display: flex;
  justify-content: center;
  text-align: left;
  width: 100%;
  position: relative;
}
.home-services-inners .services-content {
  padding: 12% 8% 10% 25%;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
 /*transition: 800ms ease;
 */
  -o-transition: opacity 0.25s linear;
  -moz-transition: opacity 0.25s linear;
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
  opacity: 0;
  top: 0;
}
@media only screen and (min-width: 1600px) {
  .home-services-inners .services-content {
    padding: 11% 5.5% 5% 15%;
 }
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .home-services-inners .services-content .font-24 {
    font-size: 1.8rem;
    line-height: 3rem;
 }
}
.home-services-inners .services-content h3 {
  font-size: 3.6rem;
  line-height: 4.3rem;
  letter-spacing: -0.15rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}
@media only screen and (min-width: 1201px) and (max-width: 1599px) {
  .home-services-inners .services-content h3 {
    font-size: 3rem;
    line-height: 3.2rem;
 }
}
@media screen and (max-width: 1200px) {
  .home-services-inners .services-content h3 {
    font-size: 3.2rem;
    line-height: 3.8rem;
 }
}
@media screen and (max-width: 1024px) {
  .home-services-inners .services-content h3 {
    font-size: 3rem;
    line-height: 3.8rem;
 }
}
@media screen and (max-width: 576px) {
  .home-services-inners .services-content h3 {
    font-size: 2.2rem;
    line-height: 3rem;
 }
}
.home-services-inners .services-content ul li {
  display: inline-block;
  width: 20%;
  opacity: 0.7;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.home-services-inners .services-content ul li:hover {
  opacity: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.home-services-inners .services-content ul li .img-box {
  width: 60px;
  height: 60px;
  margin: 0 0 1rem 0;
  display: inline-block;
}
@media only screen and (max-width: 1199px) {
  .home-services-inners .services-content ul li .img-box {
    margin: 0 auto 1rem;
 }
}
.home-services-inners .services-content ul li .img-box .service-icon {
  width: 54px;
  aspect-ratio: auto 1;
  max-width: 100%;
}
@media only screen and (max-width: 1599px) {
  .home-services-inners .services-content ul li .img-box .service-icon {
    width: 44px;
    aspect-ratio: auto 1;
 }
}
.home-services-inners .services-content ul li h4 {
  font-size: 14px;
  line-height: 1.5rem;
  color: #b2b2b2;
  text-align: left;
}
.home-services-inners .services-content a {
  max-width: 120px;
}
.home-services-inners .services-content.active {
  opacity: 1;
 /*transform: translateY(-100%);
 */
 /*-webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
  transition: 800ms ease;
 */
  -o-transition: opacity 0.45s linear;
  -moz-transition: opacity 0.45s linear;
  -webkit-transition: opacity 0.45s linear;
  transition: opacity 0.45s linear;
}
@keyframes fadein {
  from {
    opacity: 0;
 }
  to {
    opacity: 1;
 }
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
 }
  to {
    opacity: 1;
 }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
 }
  to {
    opacity: 1;
 }
}
@-ms-keyframes fadein {
  from {
    opacity: 0;
 }
  to {
    opacity: 1;
 }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
 }
  to {
    opacity: 1;
 }
}

.arrow-with-text {
  height: 3rem;
  min-width: 11.5rem;
  border: 1px solid #fff;
  text-align: center;
  border-radius: 99px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  -webkit-transition: all .5s;
  transition: all .5s;
  color: #fff;
}
.arrow-with-text .title {
  font-family: var(--robotoLight);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2.2rem;
  color: #fff;
  -webkit-transition: all 1.4s;
  transition: all 1.4s;
  white-space: nowrap;
  padding: 1rem 2rem 1rem 3rem;
  min-width: calc(100% - 4.4rem);
}
.arrow-with-text .icons {
  right: 0;
  height: 4.4rem;
  width: 4.4rem;
  margin-top: -0.05vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  text-align: left;
}

.section-title {
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1rem;
  margin-bottom: 1.5rem;
}
.home-services-inners .services-content.active {
  opacity: 1;
  -webkit-transition: opacity .45s linear;
  transition: opacity .45s linear;
  text-align: center;
}
.home-services-inners .services-content, .home-services-inners .services-new {
  -ms-flex-direction: column;
  flex-direction: column;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
}
.services-content.active {
  z-index: 2;
}
.home-services-inners .services-content h3 {
  font-size: 2rem;
  line-height: 3rem;
  letter-spacing: -.15rem;
  color: #fff;
  margin-bottom: 1rem;
}
.next-text-white {
  color: #b2b2b2;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px){
  .home-services-inners .services-content .font-24 {
      font-size: 1rem;
      line-height: 2rem;
  }
}
.arrow-with-text.pinkbg {
    background:linear-gradient(to left, #1fffc4, #22a0d1, #6b77db, #8b5ce0);
    border-color: #fff;
}