/* Font family */

@font-face {
    font-family: 'Gilroy-Black';
    src: local('Gilroy-Black'), url('/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/fonts/gilroy/Gilroy-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy-Bold';
    src: local('Gilroy-Bold'), url('/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy-Extrabold';
    src: local('Gilroy-Extrabold'), url('/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/fonts/gilroy/Gilroy-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy-Heavy';
    src: local('Gilroy-Heavy'), url('/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/fonts/gilroy/Gilroy-Heavy.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy-Light';
    src: local('Gilroy-Light'), url('/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/fonts/gilroy/Gilroy-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy-Medium';
    src: local('Gilroy-Medium'), url('/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy-Regular';
    src: local('Gilroy-Medium'), url('/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy-Semibold';
    src: local('Gilroy-Semibold'), url('/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/fonts/gilroy/Gilroy-SemiBold.ttf') format('truetype');
}

html {
    scroll-behavior: smooth;
}

:root {
    --primery-color: #022233;
    --backup-primery: #032D42;
    --secondary-color: #62D84E;
    --title-green: #4EAD3E;
    --title-blue: #1D94A5;
    --text-blue: #24B9CE;
    --thin-blue: #5273FF;
    --white: #ffffff;
    --black: #000000;
    --hr-color: #388390;
    --border-line: #355869;
    --bg-breadcrumb: #103a4e;
    --body-bg: #033045;
    /* font */
    --Font-Weight-Light: 300;
    --Font-Weight-Normal: 400;
    --Font-Weight-Medium: 500;
    --Font-Weight-Semibold: 600;
    --Font-Weight-Bold: 700;
    --Font-Weight-Extra-Bold: 800;
    --Font-Weight-Extra-Heavy: 900;
}

.info-page-wapper {
    background-color: var(--body-bg);
    color: var(--white);
}

a {
    color: var(--secondary-color);
}

.info-page-para-style {
    font-size: 16px;
    line-height: 21px;
    font-family: 'Gilroy-Medium';
}

.info-page-heading-h1 {
    font-size: 55px;
    font-family: 'Gilroy-Extrabold';
    line-height: 55px;
    background: linear-gradient( 90deg, rgba(98, 216, 78, 1) 6.39%, rgba(36, 185, 206, 1) 70.98%);
    border-color: transparent;
    /* background: linear-gradient(to bottom, #62D84E, #24B9CE) border-box; */
    mask: /*4*/
    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;
}

.info-page-heading-h2 {
    font-size: 55px;
    line-height: 55px;
    font-family: 'Gilroy-Extrabold';
    color: var(--white);
    text-transform: uppercase;
}

.info-page-heading-h3 {
    font-family: 'Gilroy-Extrabold';
    color: var(--white);
    font-size: 47px;
    font-weight: 700;
    line-height: normal;
}

.info-page-heading-h4 {
    font-family: 'Gilroy-bold';
    color: var(--white);
    font-size: 23px;
    font-weight: 700;
    line-height: normal;
}


/* Header */


/* End Header */

.banner-text h2 {
    font-size: 55px;
    font-family: 'Gilroy-Extrabold';
    line-height: 59px;
    color: var(--white);
}

.info-container {
    max-width: 1080px;
    width: 100%;
}

.body-container {
    max-width: 970px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.info-container,
.info-container-fluid {
    padding-top: 35px;
    padding-bottom: 35px;
}

.customer-service-banner {
    border-radius: 24px;
    position: relative;
}

.customer-service-banner:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    background: linear-gradient(90deg, var(--title-green), var(--title-blue));
    border-radius: inherit;
    mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
}

.customer-content-para h5 {
    font-size: 20px;
    font-family: 'Gilroy-Bold';
    color: var(--secondary-color);
    display: inline;
}

.heading-h6 {
    font-family: 'Gilroy-Bold';
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    /* 131.25% */
}

.customer-content-para h6 {
    font-size: 20px;
    font-family: 'Gilroy-Bold';
    color: var(--white);
    display: inline;
}

.banner-img1 {
    position: absolute;
    right: -7px;
    bottom: 0px;
    /* top: -14px; */
    transform: translate(-2%, 0%);
    max-width: 49%;
}

.banner-img {
    position: relative;
    right: 0px;
    width: 100%;
    bottom: 3px;
    z-index: 99;
    text-align: right;
}

.banner-img img {
    width: 100%;
}

.info-page-heading-h6 {
    font-size: 23px;
    line-height: normal;
    font-family: 'Gilroy-Bold';
}

.sub-title {
    border-top: 2px solid var(--secondary-color);
    width: 100%;
}

.sub-title h4 {
    border-top: 2px solid var(--secondary-color);
    background-color: var(--secondary-color);
    font-size: 30px;
    font-family: 'Gilroy-Bold';
    color: #000000;
    padding: 8px 35px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
}

.service-outcome {
    flex: 1 1 auto;
}

.service-outcome.col-md-6 {
    border-left: solid 1px white;
}

.service-outcome-box p {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.service-outcome-box h3 {
    font-size: 80px;
    font-family: 'Gilroy-Extrabold';
    background: linear-gradient( 90deg, #62D84E 6.39%, #24B9CE 70.98%);
    border-color: transparent;
    /* background: linear-gradient(to bottom, #62D84E, #24B9CE) border-box; */
    mask: /*4*/
    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;
}

.customer-wants h6 {
    font-size: 20px;
    line-height: auto;
    font-family: 'Gilroy-Bold';
}

.customer-wants .col-md-3 {
    flex: 1;
    height: 90%;
    text-align: center;
}

.customer-wants img {
    width: max-content;
}

.circle-img02 {
    position: relative;
}

.circle-img01 {
    position: relative;
}

span.circle-text1 {
    position: absolute;
    content: "";
    font-size: 50px;
    font-family: 'Gilroy-Bold';
    top: 21%;
    left: 0%;
    transform: translate(50%, 50%);
    line-height: 1;
}

span.circle-text2 {
    position: absolute;
    content: "";
    font-size: 50px;
    font-family: 'Gilroy-Bold';
    top: 30%;
    left: 3%;
    transform: translate(50%, 50%);
    line-height: 1;
}

span.circle-text1 {
    color: var(--text-blue);
    top: 30%;
}

span.circle-text2 {
    color: var(--secondary-color);
}

.deliver-prgoress h6 {
    font-size: 23px;
    font-family: 'Gilroy-Bold';
}

.deliver-prgoress h6 {
    font-size: 20px;
    font-family: 'Gilroy-Bold';
}

.deliver-prgoress .progress {
    height: 10px;
    border-radius: 50px;
}

.deliver-prgoress .progress .progress-bar {
    border-radius: 50px;
}

.deliver-prgoress:first-child .progress .progress-bar {
    background-color: var(--text-blue);
}

.deliver-prgoress:nth-child(2) .progress .progress-bar {
    background-color: var(--secondary-color);
}

.deliver-prgoress:nth-child(3) .progress .progress-bar {
    background-color: var(--thin-blue);
}

h6>div.text-blue {
    color: var(--text-blue);
    font-size: 24px;
}

h6>div.text-green {
    color: var(--secondary-color);
    font-size: 24px;
}

h6>div.thin-blue {
    color: var(--thin-blue);
    font-size: 24px;
}

.deliver-list .list-group .list-group-item {
    background-color: transparent;
    border: none;
}

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

.deliver-list h6 {
    font-size: 20px;
    font-family: 'Gilroy-Bold';
    padding-left: 30px;
    max-width: 75%;
    margin-bottom: 22px;
}

.deliver-list-item h3 {
    font-size: 50px;
    font-family: 'Gilroy-Bold';
    color: var(--secondary-color);
    margin-bottom: 0;
}

.deliver-list-item p {
    font-family: 'Gilroy-Bold';
    line-height: 23px;
    max-width: 175px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    /* 112.5% */
}

.deliver-list .list-group .list-group-item {
    column-gap: 2rem;
}

.deliver-list .list-group .list-group-item span {
    min-width: 75px;
}

.role-play {
    content: " ";
}

.role1 {
    left: 4%;
    top: 0;
    content: " ";
}

.role2 {
    right: 4%;
    top: -4%;
    content: " ";
}

.role3 {
    left: 4%;
    bottom: 0;
    content: " ";
}

.role4 {
    right: 4%;
    bottom: 0;
    top: 83%;
    content: " ";
}

.role-play h4 {
    font-size: 50px;
    font-family: 'Gilroy-Bold';
}

.role-play p {
    font-family: 'Gilroy-Regular';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.role-to-play-img {
    width: 60%;
}

.role-play .role4 p {
    font-size: 23px;
    line-height: 28px;
}

.role-play .role4 p>span.text-bold {
    font-family: 'Gilroy-Bold';
}

.role-play .role1,
.role-play .role2,
.role-play .role3 {
    max-width: 160px;
}

.role-play .role4 {
    max-width: 270px;
}

.infinity-box-text {
    background-image: url(/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/images/section_connect_bg.svg);
    background-color: var(--primery-color);
    border-radius: 20px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
    /* 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; */
}

.infinity-service {
    display: inline-flex;
    flex-wrap: wrap;
}

.title-star {
    position: relative;
}

.infinity-service h2 {
    font-size: 35px;
    font-family: 'Gilroy-Black';
    color: var(--white);
    text-transform: uppercase;
}

.infinity-service h2:first-child {
    background: linear-gradient( 90deg, #62D84E 6.39%, #24B9CE 33.98%);
    border-color: transparent;
    /* background: linear-gradient(to bottom, #62D84E, #24B9CE) border-box; */
    mask: /*4*/
    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;
}

.infinity-service h2:last-child {
    color: var(--white);
}

.infinity-service p,
.inifinit-content p {
    font-family: 'Gilroy-Regular';
}

.inifinit-content h3 {
    font-size: 27px;
    font-family: 'Gilroy-Extrabold';
    margin-bottom: 10px;
}

.title-star::after {
    position: absolute;
    background: url(/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/images/gradient-star.png);
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    content: " ";
    position: absolute;
    margin-left: 10px;
    right: -2%;
    top: -32%;
}

.bottom-ai-cont h2 {
    font-size: 42px;
    line-height: auto;
    font-family: 'Gilroy-Extrabold';
    color: var(--white);
    text-transform: uppercase;
}

.inifinit-content h3:first-child,
.bottom-ai-cont h2:first-child {
    background: linear-gradient( 90deg, #62D84E 6.39%, #24B9CE 70.98%);
    border-color: transparent;
    /* background: linear-gradient(to bottom, #62D84E, #24B9CE) border-box; */
    mask: /*4*/
    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;
    /* line-height: 40px; */
}

nav.ai-services {
    background: var(--bg-breadcrumb);
    border-radius: 15px;
}

nav.ai-services .pagination .page-item {
    padding: 6px 30px;
    /* border-right: 2px solid var(--border-line); */
    font-family: 'Gilroy-Medium';
}

.line-border {
    color: var(--border-line);
}

.connect-ai-item {
    font-family: 'Gilroy-Bold';
    font-size: 20px;
}

.pos-right {
    right: 0;
}

.infinity-img {
    background-origin: content-box;
    height: 232px;
    background-origin: content-box;
    background-color: transparent;
    background-image: url(/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/images/Infinite-loop.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: auto;
}

.center-img {
    padding: 0;
}

.ai-item-1 {
    position: absolute;
    left: 18%;
    top: 13%;
}

.ai-item-1::after,
.ai-item-2::after,
.ai-item-3::after {
    background-image: url(/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/images/white-star-bullet.png);
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 29px;
    content: " ";
    position: absolute;
    margin-left: 10px;
    top: 5px;
}

.ai-item-4::before,
.ai-item-5::before,
.ai-item-6::before {
    background-image: url(/content/dam/servicenow-assets/public/en-us/info-graphics/customer-service/sg/images/white-star-bullet.png);
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 29px;
    content: " ";
    position: absolute;
    margin-right: 10px;
    left: -30px;
    top: 5px;
}

.ai-item-2 {
    position: absolute;
    left: 3%;
    top: 33%;
}

.ai-item-3 {
    position: absolute;
    left: 3%;
    bottom: 38%;
}

.ai-item-4 {
    position: absolute;
    right: 16%;
    top: 14%;
}

.ai-item-5 {
    position: absolute;
    right: -4%;
    top: 35%;
}

.ai-item-6 {
    position: absolute;
    right: 4%;
    bottom: 36%;
}

hr {
    border-top: 1px solid var(--hr-color);
}

.customer-expect-list .expect-list-item {
    background-color: transparent;
    border: none;
}

.cutomer-expect h5 {
    font-size: 34px;
    line-height: 40px;
    font-family: 'Gilroy-Extrabold';
}

.cutomer-expect h5:first-child {
    color: var(--secondary-color);
}

.customer-expect-list .expect-list-item h3 {
    font-size: 50px;
    line-height: 32px;
    font-family: 'Gilroy-Extrabold';
    padding: 8px 40px 12px 20px;
    background: linear-gradient( 90deg, #62D84E 6.39%, #24B9CE 70.98%);
    border-color: transparent;
    /* background: linear-gradient(to bottom, #62D84E, #24B9CE) border-box; */
    mask: /*4*/
    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;
}

.customer-expect-list .expect-list-item p,
.slid-text,
.inner-content p {
    font-size: 20px;
    font-family: 'Gilroy-Regular';
}

.inefficiency-inner-cont {
    row-gap: 30px;
}

.resolve-list-item {
    margin-bottom: 15px;
}

.innefficient-list {
    row-gap: 1rem;
    max-width: 265px;
    margin-left: 3rem;
}

.innefficient-list h3 {
    font-size: 80px;
    font-family: 'Gilroy-Extrabold';
    background: linear-gradient( 90deg, #62D84E 6.39%, #24B9CE 70.98%);
    border-color: transparent;
    /* background: linear-gradient(to bottom, #62D84E, #24B9CE) border-box; */
    mask: /*4*/
    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;
    margin-bottom: 0;
}

.innefficient-list p {
    font-family: 'Gilroy-Regular';
    line-height: 1.2;
    margin-bottom: 0;
}

.copy-bold {
    font-family: 'Gilroy-Bold';
}

.inner-content-right {
    padding-left: 50px;
}

.inner-content-right h6 {
    font-size: 20px;
    font-family: 'Gilroy-Bold';
}

.inner-content-right .ine-right-copy-01 {
    font-family: 'Gilroy-Regular';
    font-size: 12px;
    padding-top: 15px;
}

.inner-content-right .ine-right-copy-02 {
    font-family: 'Gilroy-Bold';
    font-size: 12px;
    padding-top: 20px;
}

.inner-content-right .ine-right-copy-03 {
    font-family: 'Gilroy-Regular';
    font-size: 12px;
    padding-top: 3px;
}

.resolve-list-item h4 {
    font-size: 30px;
    font-family: 'Gilroy-Bold';
    color: var(--secondary-color);
    margin-right: 10px;
    margin-bottom: 0;
}

.resolve-list-item p {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 0;
}

.download-btn .btn {
    background-color: var(--secondary-color);
    color: var(--primery-color);
    font-size: 18px;
    font-family: 'Gilroy-Bold';
    padding: 15px 40px;
    border-radius: 30px;
    /* transform:scale(0.9); */
    will-change: transform;
}

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

.row-gap {
    row-gap: 3rem;
}


/* Final design for holding customer services */

.service-agents-para {
    font-size: 20px;
    font-family: 'Gilroy-Regular';
}

.services-agents-types>.section:last-child {
    border: none;
}

.services-agents-types>.section {
    margin-bottom: 30px;
    border-left: 1px dotted var(--border-line);
    padding-left: 28px;
    position: relative;
}

.content-list {
    padding-left: 20px;
}

.services-agents-types {
    padding-left: 50px;
}

.services-agents-types>.section h2 {
    font-size: 30px;
    margin-bottom: 10px;
    color: #21e6c1;
    font-family: 'Gilroy-Bold';
    color: var(--secondary-color);
    margin-left: -82px;
    margin-top: -30px;
    text-transform: none;
}

.services-agents-types>.section:first-child h2 {
    margin-left: -63px;
}

.services-agents-types>.section h2 span {
    border: 2px solid var(--secondary-color);
    background-color: var(--body-bg);
    width: 62px;
    height: 62px;
    border-radius: 50px;
    text-align: center;
    padding: 15px;
    display: inline-flex;
    line-height: 1;
    justify-content: center;
    align-items: center;
    margin-right: 18px;
}

.inner-content {
    margin-left: 4px;
    padding-left: 1px;
}

.inner-content .customer-wants .customer-wants-content p {
    font-family: 'Gilroy-Bold';
    font-size: 20px;
}

.inner-content .customer-wants span.circle-text1 {
    top: 16%;
    left: -11%;
}

.inner-content .customer-wants span.circle-text2 {
    top: 15%;
    left: 0;
    right: 56%;
}

.grap-img-mask {
    position: relative;
    left: -100px;
}

.button-bottom {
    padding-top: 27px;
}

.graph-list ul {
    margin-left: 0px;
    padding-left: 15px;
}

.too-many-system-para {
    margin-left: 4px;
}

.circle-img02 {
    min-height: 160px;
}

.circle-img01 {
    min-height: 240px;
}

.top-header-padding {
    padding-top: 45px;
    padding-left: 50px;
    padding-bottom: 3px;
}

.top-header-py-3 {
    padding-bottom: 20px;
    padding-top: 12px;
}

.top-header-my-4 {
    margin-bottom: 48px;
}