﻿@import url(../../../css2);
@font-face {
    font-family: Autograf;
    src: url("../font/Autograf_PersonalUseOnly.ttf");
    src: url("../font/Autograf_PersonalUseOnly.woff") format("woff"), url("../font/Autograf_PersonalUseOnly.otf") format("opentype"), url("../font/Autograf_PersonalUseOnly.svg") format("svg");
    font-display: swap
}

.p-btn,
body,
html {
    transition: .7s ease-in-out
}

.autograph {
    font-family: Autograf
}

.w-88 {
    width: 88%
}

.f-w-700,
.p-btn {
    font-weight: 700
}

.f-w-900 {
    font-weight: 900
}

.f-w-800 {
    font-weight: 800
}

.f-w,
.p-btn {
    color: var(--w-color)
}

.fold--four ul li::before,
.hero--section::after {
    content: "";
    background-size: contain;
    display: block
}

.f-center,
.fold--four .p-btn,
.logo--slider .slick-slide {
    text-align: center
}

.f-justify,
.justify,
.justifycm {
    text-align: justify
}

:root {
    --p-f-family: "Inter", sans-serif;
    --w-color: #ffffff;
    --b-color: #181818;
    --y-color: #deaf22;
    --g-color: #828282
}

*,
::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none
}

a,
button {
    cursor: pointer
}

body,
html {
    font-family: var(--p-f-family)
}

li {
    list-style: none
}

.p-gradient {
    background: #034971;
    background: -moz-linear-gradient(142deg, #034971 0, #006fb8 100%);
    background: -webkit-linear-gradient(142deg, #034971 0, #006fb8 100%);
    background: linear-gradient(142deg, #034971 0, #006fb8 100%)
}

.s-gradient {
    background-image: -moz-linear-gradient(180deg, #caa32d 0, #f3bc18 100%);
    background-image: -webkit-linear-gradient(180deg, #caa32d 0, #f3bc18 100%);
    background-image: -ms-linear-gradient(180deg, #caa32d 0, #f3bc18 100%)
}

.g-background {
    background-color: #707070
}

.p-gradient-f {
    background: #034971;
    background: linear-gradient(to right, #034971 0, #0071bc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.p-gradient-s {
    background: #034971;
    background: linear-gradient(to right, #caa32d 0, #f3bc18 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.--integration,
.fold--four ul li::before,
.fold--three,
.hero--section::after {
    background-repeat: no-repeat
}

.img-fluid {
    max-width: 100%;
    height: auto
}

.p-btn {
    display: inline-block;
    width: max-content;
    height: 40px;
    line-height: 40px;
    padding: 0 1rem;
    font-size: 15px
}

.f-s-50 {
    font-size: 50px;
    line-height: 60px
}

.f-s-40 {
    font-size: 40px;
    line-height: 50px
}

.f-s-24 {
    font-size: 24px;
    line-height: 34px
}

.f-s-18 {
    font-size: 18px;
    line-height: 26px
}

.f-s-13,
.f-s-14 {
    line-height: 20px
}

.f-s-14 {
    font-size: 14px
}

.f-s-13 {
    font-size: 13px
}

.f-s-12 {
    font-size: 12px;
    line-height: 18px
}

.f-w-500 {
    font-weight: 500
}

.f-w-400 {
    font-weight: 400
}

.f-b {
    color: var(--b-color)
}

.f-y {
    color: var(--y-color)
}

.f-g {
    color: var(--g-color)
}

.w-90 {
    width: 90%
}

.container-fluid {
    width: 95%
}

.hero--section {
    height: 118vh;
    position: relative;
    background-image: unset;
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 50px;
    background-size: cover;
    background-position: right;
    background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(3,80,126,1) 47%, rgba(0,212,255,1) 100%);
}

.--faqs,
.--industries,
.consult--form,
.fold--four,
.fold--three,
.integration--sliders,
.our--process,
.who--we {
    padding: 70px 0
}

.hero--section .success--counter {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    text-align: center
}

.hero--section .success--counter .--items {
    min-width: 240px
}

.hero--section .success--counter .--items>div {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center
}

.consult--form form .form--item {
    width: 19.5%
}

.consult--form form {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.consult--form form .form--item input {
    width: 100%;
    height: 50px;
    border-style: solid;
    border-width: 3px;
    border-image: linear-gradient(45deg, #025181, #006cb2) 1;
    padding: 0 1rem;
    font-size: 14px;
    font-weight: 400;
    color: var(--b-color)
}

.leftHoverBtn.yellow {
    background: linear-gradient(180deg, #CAA32D 0, #F3BC18 100%);
    background: -webkit-linear-gradient(180deg, #CAA32D 0, #F3BC18 100%);
    width: auto;
}

.leftHoverBtn.blue {
    background: linear-gradient(142deg, #034971 0, #006FB8 100%);
    background: -webkit-linear-gradient(142deg, #034971 0, #006FB8 100%);
    width: 100%;
}

.leftHoverBtn {
    width: 100%;
    height: 50px;
    padding: 0;
    border: inherit;
    font-size: 16px;
    color: var(--w-color);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 11;
    display: inline-block;
    line-height: 48px;
    padding: 0 25px;
    text-align: center;
}

.leftHoverBtn:before {
    z-index: -1;
    right: 0;
    bottom: 0;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}

.leftHoverBtn:hover::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    z-index: -1;
}

.leftHoverBtn::before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    background: #CAA32D;
    background: linear-gradient(180deg, #CAA32D 0, #F3BC18 100%);
    background: -webkit-linear-gradient(180deg, #CAA32D 0, #F3BC18 100%);
}

.leftHoverBtn.yellow {
    width: auto;
    padding: 0 30px;
    line-height: 49px;
    transition: 0.4s;
}

.leftHoverBtn.yellow:hover {
    color: #000;
}

.leftHoverBtn.yellow:hover::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    z-index: -1;
}

.leftHoverBtn.yellow::before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    background: #fff;
    background: linear-gradient(180deg, #fff 0, #fff 100%);
    background: -webkit-linear-gradient(180deg, #fff 0, #fff 100%);
}

.leftHoverBtn.blue:hover {
    color: #fff;
}

.leftHoverBtn.blue:hover::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    z-index: -1;
}

.leftHoverBtn.blue::before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    background: #CAA32D;
    background: linear-gradient(180deg, #CAA32D 0, #F3BC18 100%);
    background: -webkit-linear-gradient(180deg, #CAA32D 0, #F3BC18 100%);
}

.w-auto {
    width: auto !important;
}

.consult--form form .form--item input::placeholder {
    color: #938686
}

.consult--form form .form--item input:focus-visible {
    outline: inherit;
    background-color: #f2faff
}

.fold--three {
    background-image: url(../img/technology.jpg);
    background-size: auto;
    background-position: bottom right;
    background-color: #f2f2f2
}

.fold--four .p-btn {
    width: 100%;
    height: 45px;
    line-height: 45px
}

.--integration .p-btn:hover,
.hero--section .p-btn:hover {
    background: var(--w-color) !important;
    color: var(--b-color) !important
}

.fold--four ul li {
    position: relative;
    display: -webkit-inline-box;
    align-items: center;
    padding-left: 30px
}

.fold--four ul li::before {
    background-image: url(../../../nJwaBs__P2JfMUeYJ4vmjQ/cb9559ad-6bd4-42fc-25b1-60eb9a0dca00/public);
    background-position: center;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    content: "";
    position: absolute;
    top: 1px;
    left: 0
}

.--integration {
    background-image: url(../img/integration-banner.jpg);
    background-size: cover;
    height: 100vh !important;
    display: flex;
    align-items: center;
    padding-bottom: 70px
}

.logo--slider .slick-track {
    display: flex;
    align-items: baseline
}

.logo--slider .slick-slide img {
    display: block;
    margin: auto auto .5rem
}

.integration--sliders .logo--slider {
    margin-bottom: 2rem
}

.our--process {
    background-color: #f3f3f3
}

.logo--slider .slick-next:before {
    content: url(../../../nJwaBs__P2JfMUeYJ4vmjQ/71cadb08-ca19-4643-ef98-21181841d000/public);
    opacity: 1;
    filter: brightness(0) invert(0)
}

.logo--slider .slick-prev:before {
    content: url(../../../nJwaBs__P2JfMUeYJ4vmjQ/e155835d-f2db-4ef9-01f0-1fb27dbc5e00/public);
    opacity: 1;
    filter: brightness(0) invert(0)
}

.accordian--items .accordian--head {
    cursor: pointer;
    padding: 1rem;
    min-width: 100%;
    border: inherit;
    outline: inherit;
    transition: .5s ease-in-out;
    text-transform: capitalize;
    position: relative;
    text-align: left;
    background: #034971;
    background: -moz-linear-gradient(142deg, #034971 0, #006fb8 100%);
    background: -webkit-linear-gradient(142deg, #034971 0, #006fb8 100%);
    background: linear-gradient(142deg, #034971 0, #006fb8 100%);
    border-radius: 10px
}

.accordian--items .accordian--head h3 {
    color: var(--w-color);
    font-size: 15px;
    line-height: 25px;
    font-weight: 400
}

.accordian--items .accordian--body {
    background-color: var(--w-color);
    padding: 1rem;
    display: none;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    box-shadow: 0 0 20px 0 #ddd;
    margin-top: -2px;
    border-radius: 0 0 15px 15px
}

.accordian--items .accordian--body p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--g-color)
}

.accordian--items .accordian--head.active {
    border-color: var(--w-color)
}

.accordian--items .accordian--head.active h3 {
    color: var(--w-color)
}

.accordian--items .accordian--head::after,
.accordian--items .accordian--head::before {
    content: "";
    position: absolute;
    top: 50%;
    background-color: var(--w-color);
    transition: .5s ease-in-out
}

.accordian--items .accordian--head.active::after,
.accordian--items .accordian--head.active::before {
    background-color: var(--w-color)
}

.accordian--items .accordian--head::before {
    right: 30px;
    width: 3px;
    height: 20px;
    margin-top: -10px
}

.accordian--items .accordian--head::after {
    right: 21px;
    width: 20px;
    height: 3px;
    margin-top: -2px
}

.accordian--items .accordian--head.active::before {
    transform: rotate(90deg)
}

.accordian--items {
    margin-top: 1rem
}

[class^=tabs-] {
    display: none
}

[class^=tabs-].showfirst {
    display: block
}

.fold--four .p-btn.active,
.who--we .p-btn:hover {
    background: #034971;
    background: -moz-linear-gradient(142deg, #034971 0, #006fb8 100%);
    background: -webkit-linear-gradient(142deg, #034971 0, #006fb8 100%);
    background: linear-gradient(142deg, #034971 0, #006fb8 100%)
}

.fold--four .p-btn:hover,
.next-form-btn button:hover {
    background-image: -moz-linear-gradient(180deg, #caa32d 0, #f3bc18 100%);
    background-image: -webkit-linear-gradient(180deg, #caa32d 0, #f3bc18 100%);
    background-image: -ms-linear-gradient(180deg, #caa32d 0, #f3bc18 100%)
}

.--integration .f-justify,
.fold--three .f-justify {
    word-spacing: -1px
}

.card-counter .row {
    align-items: center;
    justify-content: center;
    row-gap: 25px
}

.counter-box {
    background-color: #2784be;
    width: 100%
}

.strategy .p-btn {
    max-width: 100%;
    text-align: center
}

.readmoreless-button1,
.readmoreless-button2,
.readmoreless-button3,
.readmoreless-button4,
.readmoreless-button5 {
    border: inherit;
    background-color: transparent;
    color: #e5b31d;
    text-transform: capitalize;
    font-weight: 500;
    text-decoration: double;
    padding: 0
}

.f-s-35 {
    font-size: 35px;
    line-height: 40px
}

body {
    overflow-x: hidden
}

.padding-top-100 {
    padding-top: 100px
}

.--industries .logo--slider_desktop img {
    margin-bottom: 12px
}

.ps100 {
    width: 100% !important
}

.text-white {
    color: #fff !important
}

.hero--section h1>.gradint-txt {
    background: -webkit-linear-gradient(180deg, #caa32d 0, #f3bc18 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.f-w-600 {
    font-weight: 600
}

.f-s-18s {
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    color: #f3bc18
}

.hero--section h1 {
    text-transform: capitalize
}

.z-index-1 {
    z-index: 1
}

.mobileView {
    border: double 0.5em transparent;
    border-radius: 30px;
    background-image: linear-gradient(white, white), linear-gradient(to right, #034971, #006FB8);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.mobileP {
    padding: 40px 70px;
}

.mobileView {
    position: relative;
    height: 360px;
    margin: 30px auto 50px;
}

.mobileView .tabsList {
    height: 70px;
    overflow-y: scroll;
}

.mobileView .tabsList::-webkit-scrollbar {
    width: 8px
}

.mobileView .tabsList::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #ccc;
    border-radius: 5px
}

.mobileView .tabsList::-webkit-scrollbar-thumb {
    background: rgba(0, 111, 184, .8799894957983193);
    border-radius: 5px
}

.mobileView .tabsList {
    height: 63px;
    overflow-y: scroll;
    margin: auto;
    padding-right: 15px;
}

.mobileView:before {
    content: '';
    display: block;
    background-image: url(../img/mobTopBtn.png);
    background-repeat: no-repeat;
    height: 10px;
    width: 94px;
    position: absolute;
    top: -15px;
    left: 30%;
    z-index: -1;
}

.mobileView:after {
    content: '';
    display: block;
    background-image: url('../img/mob-btm-btns.png');
    background-repeat: no-repeat;
    height: 10px;
    width: 100px;
    position: absolute;
    bottom: -15px;
    left: 30%;
    z-index: -1;
}

.mobileP:after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background: linear-gradient(142deg, #034971 0, #006FB8 100%);
    border-radius: 50%;
    background: -webkit-linear-gradient(142deg, #034971 0, #006FB8 100%);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 20px;
    border: 2px solid #034971;
}

.mobileP:before {
    content: '';
    display: block;
    margin: auto;
    left: 20px;
    background-image: url(../img/mobileTopLine.png);
    background-repeat: no-repeat;
    height: 112px;
    position: absolute;
    width: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.mobileP {
    position: relative;
}
.formpost {
    background-color: var(--w-color);
    width: 70%;
    height: auto;
    padding: 3rem 34px;
    box-shadow: #000 0 5px 15px;
    margin-left: auto;
}
.formpost input {
    width: 100%;
    height: 63px;
    border: inherit;
    border-bottom: 1px solid #80808096;
    margin-bottom: 10px;
    color: #000;
}
.coldform {
    align-items: center;
}
.formpost input:focus-visible{
         outline: unset;
}
.formpost .next-title{
    padding-top:0;
}