@media (max-width: 1080px) {
    .connect-ai-img img {
        width: 50%;
    }
    .ai-item-1 {
        left: 27%;
        top: 0%;
    }
    .ai-item-2 {
        left: 16%;
        top: 33%;
        text-align: right;
    }
    .ai-item-3 {
        left: 16%;
        bottom: 13%;
        text-align: right;
    }
    .ai-item-4 {
        right: 26%;
        top: -4%;
    }
    .ai-item-5 {
        right: 15%;
        top: 30%;
        text-align: left;
    }
    .ai-item-6 {
        right: 16%;
        bottom: 19%;
        text-align: left;
    }
    .connect-ai-item {
        font-size: 18px;
        max-width: 124px;
    }
    .ai-item-1::after {
        top: 2px;
        left: 10px;
    }
    .ai-item-2::after,
    .ai-item-3::after {
        top: 2px;
        right: -20px;
    }
    .connect-ai-item,
    .connect-ai-item p {
        font-size: 16px;
    }
    nav.ai-services .pagination .page-item {
        font-family: 'Gilroy-Medium';
    }
}

@media (max-width: 970px) {
    .info-page-heading-h1,
    .info-page-heading-h2 {
        font-size: 35px;
        line-height: 40px;
    }
    h6 {
        font-size: 18px;
        font-family: 'Gilroy-Bold';
    }
    .banner-img1 {
        right: 0;
        padding-right: 0;
    }
    .banner-img1 img {
        margin-right: -6px;
    }
    .deliver-list.w-75 {
        width: 100% !important;
    }
    .pt-5,
    .py-5,
    .pb {
        padding-top: 2rem !important;
    }
    .pb-3,
    .py-3 {
        padding-bottom: .5rem !important;
    }
    h2,
    .infinity-service h2 {
        font-size: 34px;
    }
    .info-page-heading-h2,
    .info-page-heading-h3 {
        font-size: 34px;
    }
    .sub-title h4 {
        font-size: 24px;
        padding: 7px 28px;
    }
    .service-outcome-box h3 {
        font-size: 64px;
    }
    .customer-wants h6 {
        font-size: 18px;
        margin-bottom: 0;
    }
    .customer-expect-list .expect-list-item p,
    .slid-text,
    .inner-content p {
        font-size: 18px;
    }
    .services-agents-types>.section h2 {
        font-size: 26px;
    }
    .download-btn .btn {
        font-size: 18px;
        padding: 15px 34px;
    }
    .infinity-img {
        background-size: contain;
    }
    .innefficient-list h3 {
        font-size: 45px;
    }
    .role-play {
        padding: 10rem 15px;
    }
    .role1 {
        left: 20%;
    }
    .role2 {
        right: 22%;
        top: 0%;
    }
    .role3 {
        left: 25%;
    }
    .role4 {
        right: 10%;
        top: 77%;
    }
    .connect-ai-img img {
        width: 43%;
    }
    .connect-ai-item,
    .connect-ai-item p {
        font-size: 14px;
    }
    .ai-item-1::after,
    .ai-item-2::after,
    .ai-item-3::after,
    .ai-item-4::before,
    .ai-item-5::before,
    .ai-item-6::before {
        width: 15px;
        height: 15px;
    }
    .ai-item-4::before,
    .ai-item-5::before,
    .ai-item-6::before {
        margin-right: 10px;
        left: -25px;
        top: 0px;
    }
}

@media (max-width: 897px) {
    .title-star::after {
        right: -4%;
        top: 30%;
    }
    .infinity-service {
        display: inline-block;
    }
    .connect-ai-img img {
        width: 36%;
    }
    .ai-item-1 {
        left: 34%;
    }
    .ai-item-2 {
        left: 22%;
        top: 27%;
    }
    .ai-item-3 {
        left: 23%;
    }
    .ai-item-4 {
        right: 32%;
    }
    .ai-item-5 {
        right: 16%;
        top: 23%;
    }
    .ai-item-6 {
        right: 22%;
        bottom: 11%;
    }
    .connect-ai-item,
    .connect-ai-item p {
        font-size: 84%;
        line-height: 1;
    }
    .ai-item-1::after,
    .ai-item-2::after,
    .ai-item-3::after,
    .ai-item-4::before,
    .ai-item-5::before,
    .ai-item-6::before {
        width: 10px;
        height: 11px;
    }
}

@media (max-width: 867px) {
    .innefficient-list h3 {
        font-size: 38px;
    }
    .customer-expect-list .expect-list-item p,
    .slid-text,
    .inner-content p {
        font-size: 16px;
    }
    .innefficient-list {
        padding: 10px 20px;
    }
}

@media (max-width: 767px) {
    .sub-title h4 {
        font-size: 24px;
        padding: 7px 28px;
    }
    .vr-line {
        border-right: 0px solid transparent;
        border-bottom: 1px solid var(--hr-color);
        margin-bottom: 2rem;
    }
    .inefficiency-inner-cont {
        margin-bottom: 2rem;
    }
    .role4 {
        right: 1%;
    }
    .role-play .role4 p {
        font-size: 18px;
        line-height: 22px;
    }
    nav.ai-services .pagination .page-item {
        padding: 6px 5px;
    }
    .ai-item-2 {
        left: 20%;
    }
    .ai-item-3 {
        left: 20%;
    }
    .ai-item-5 {
        right: 15%;
    }
    .ai-item-6 {
        right: 19%;
    }
    .infinity-box-text {
        background-size: contain;
           background-color: linear-gradient(
        90deg,
        #62D84E 6.39%,
        #24B9CE 70.98%
      );



    }
    .vr {
        border-right: 0px solid var(--border-line);
    }
}

@media (max-width: 670px) {
    .ai-item-5 {
        right: 13%;
    }
    .ai-item-2 {
        left: 18%;
    }
    .ai-item-3 {
        left: 19%;
    }
    .ai-item-4 {
        right: 30%;
    }
}

@media (max-width: 574px) {
    .inefficiency-inner-cont img {
 width: 30%;
    }
    .innefficient-list h3 {
        font-size: 32px;
        column-gap: 1rem;
        padding-left: 1rem;
    }
    .innefficient-list {
        width: 90%;
        margin-left:0rem;
        padding: 5px 5px;
    }
    .sub-title h4 {
        font-size: 24px;
        text-align: center;
    }
    .services-agents-types>.section h2 {
        font-size: 20px;
    }
    .page-item {
        font-size: 18px;
    }
    .info-page-heading-h2 {
        font-size: 24px;
    }

    h2,
    .infinity-service h2,
    .bottom-ai-cont h2 {
        font-size: 22px;
    }
    .role1 {
        left: 0%;
    }
    .role2 {
        right: 0%;
        top: 0%;
    }
    .role3 {
        left: 0%;
    }
    .role4 {
        right: 0%;
        top: 77%;
    }
    .role-play p {
        font-size: 12px;
    }
    .role-play .role4 p {
        font-size: 12px;
        line-height: 16px;
    }
    .role-play .role4 {
        max-width: 130px;
    }
    .cutomer-expect h5 {
        font-size: 24px;
        line-height: 28px;
    }
    .ai-item-1 {
        left: 26%;
    }
    .ai-item-2 {
        left: 2%;
    }
    .ai-item-3 {
        left: 1%;
        bottom: -21%;
    }
    .ai-item-4 {
        right: 21%;
    }
    .ai-item-5 {
        right: 0%;
    }
    .ai-item-6 {
        right: -1%;
        bottom: -26%;
    }
    .info-container, .info-container-fluid {
     padding-top: 10px; 
    padding-bottom: 10px;
    }

    .info-page-wapper {
        padding-left: 5%;
        padding-right: 5%;
    }
    .list-group-item {
        padding: .75rem 0rem;
    }
    .service-outcome-box p {
        max-width: 300px;
    }
    .services-agents-types {
            padding-left: 20px;
    }
    .inner-content-right {
        padding-left: 0px;
 
    }
    .inner-content-right h6 {
        padding-top: 10px;
        padding-bottom: 10px;
        display: block;
    }
    .infinity-box-text {
        background-image: url(/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/images/section_connect_bg_MOB.svg);
        background-color: var(--primery-color);
        border-radius: 20px;
        background-repeat: no-repeat;
        background-position: right top;
        background-size: contain;
        background-color: #061620;
        /* background: linear-gradient(
            90deg,
            #62D84E 6.39%,
            #24B9CE 70.98%
          );
          border-color: transparent;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          -webkit-background-clip: text !important;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          text-fill-color: transparent; */
    }
    
}

@media (max-width: 400px) {
    .download-btn .btn {
        font-size: 14px;
    }

}

@media (max-width: 360px) {
    .innefficient-list {
        width: 100%;
    }
    .role-play p {
        font-size: 0.6em;
    }
    .role-play .role4 p {
        font-size: 0.6em;
    }
    .role-play .role4 {
        max-width: 90px;
    }
    .download-btn .btn {
        font-size: 14px;
    }
}