@font-face {
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
    font-style: normal;
    src: url(../font/Poppins-Thin.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    src: url(../font/Poppins-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-style: normal;
    src: url(../font/Poppins-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins-Regular';
    font-style: normal;
    src: url(../font/Poppins-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-style: normal;
    src: url(../font/Poppins-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-style: normal;
    src: url(../font/Poppins-Black.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins-ThinItalic';
    font-style: normal;
    src: url(../font/Poppins-ThinItalic.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
    font-style: normal;
    src: url(../font/Poppins-ExtraLightItalic.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;

    font-style: normal;
    src: url(../font/Poppins-ExtraBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    src: url(../font/Poppins-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-style: normal;
    src: url(../font/Poppins-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    src: url(../font/Poppins-SemiBoldItalic.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins-ExtraLight.ttf';
    font-style: normal;
    src: url(../font/Poppins-ExtraLight.ttf) format('truetype');
}

/* body.light-mode {
    background: #ffffff;
    color: #000000;
} */

body.dark-mode {
    background-color: #000;
    color: #ffffff;
}

.theme-toggle {
    /* position: fixed;
    top: 20px;
    right: 20px; */
    background: #fff;
    border: 1px solid #000 !important;
    border: none;
    margin-left: 27px;
    height: 37px;
    color: #000;
    width: 38px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    font-size: 17px;
}

.theme-toggle i {
    line-height: 34px;
    transition: opacity 0.3s;
}

/* .theme-toggle:hover {
    transform: scale(0.9);
    color: #0a70f6;
    border: 1px solid #0a70f6 !important;
} */

.theme-toggle .moon {
    display: none;
}

body.dark-mode .theme-toggle .sun {
    display: none;
}

body.dark-mode .theme-toggle .moon {
    display: inline;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    /* cursor: url('/images/icons/cursor-icon.png') 0 0, auto; */
    /* background-image: url('/images/body/body-banner.png');
    background-attachment: fixed; */
}

.light-video {
    display: block;
}

.dark-video {
    display: none;
}

body.dark-mode .light-video {
    display: none;
}

body.dark-mode .dark-video {
    display: block;
}

.navbar-brand img {
    height: 65px;
}

/* .loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99999;
}
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    font-size: 0;
    color: #00c9d0;
    display: inline-block;
    margin: -25px 0 0 -25px;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.lead {
    font-size: 13px;
}
.loader div {
    background-color: #327dbc;
    display: inline-block;
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    opacity: .5;
    border-radius: 50%;
    -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
    animation: ballPulseDouble 2s ease-in-out infinite;
}
.loader div:last-child {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
@-webkit-keyframes ballPulseDouble {

    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes ballPulseDouble {

    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
} */

/*------FOR NAVIGATION LINKS-------*/
.nav-item .nav-link {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin-top: 20px;
}

.nav-item .nav-link:hover {
    color: #0d6efd;
}

.navbar-nav li a {
    text-decoration: none;
    margin-left: 10px;
    font-weight: 500;
}

/**********HOME PAGE START**********/
/*----------FOR SECION-1-----------*/
.home-content {
    padding-top: 13%;
}

.section-1 {
    overflow: hidden;
}

.section-1 h2 {
    font-size: 55px;
    margin-left: 80px;
}

.section-1 .banner-1 {
    margin-top: 70px;
}

.section-1 .firstSection {
    text-transform: uppercase;
    font-size: 165px;
    text-align: left;
    margin-left: 150px;
    color: rgb(3, 3, 3);
    line-height: 133px;
    animation-duration: 2s;
    animation-delay: .5s;
    animation-name: bounceInLeft;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.section-1 .secondSection {
    text-transform: uppercase;
    font-size: 165px;
    text-align: left;
    margin-left: 150px;
    color: rgb(3, 3, 3);
    line-height: 143px;
    animation-duration: 7s;
    animation-delay: 800ms;
    animation-name: bounceInLeft;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.code-img {
    height: 160px;
}

.img-responsive {
    height: 160px;
}

.code-img {
    animation-duration: 3s;
    animation-delay: .5s;
    animation-name: bounce-InRight;
}

.future-img {
    animation-duration: 7s;
    animation-delay: 800ms;
    animation-name: bounce-InRight;
}

@keyframes bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: 4s;
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    100% {
        transform: none;
    }
}

.banner-digital {
    padding-top: 200px;
}

@keyframes fadeInUpbanner {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/*----------FOR SECION-2----------*/
.section-2 {
    padding: 200px 0;
    overflow: hidden;
}

/* .section-2 .about-text {
    margin-left: -160px;
} */

.section-2 h1 {
    font-size: 127px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 114px;
    padding-top: 10px;
    /* margin-top: 65px;
    margin-bottom: 55px; */
    color: rgb(9, 9, 9);
    /* margin-right: -18px; */
}

.section-2 .text-2 p {
    font-weight: 200;
    font-size: 65px;
    /* margin-top: 57px; */
    line-height: 84px;
    text-transform: uppercase;
    /* margin-left: -518px; */
    letter-spacing: 12px;
}

.section-2 .text-2 p .text-space {
    letter-spacing: 21px;
}

.section-2 .text-space {
    text-align: left;
    color: rgb(3, 3, 3);
}

/* .text-how {
    margin-right: 33px;
} */

.text-1-heading {
    /* margin-right: 28px; */
    font-size: 140px;
}

.head {
    font-size: 147px;
}

@keyframes zoomIn {
    from {
        transform: scale(0%);
    }

    to {
        transform: scale(100%);
    }
}

.animation-zoom {
    animation: zoomIn 7s ease forwards;
}

/* #subheading {
    overflow: hidden;
    white-space: nowrap;
    animation: typeWriter 4s steps(100, end) forwards;
    margin-left: -656px;
}  */

@keyframes typeWriter {
    from {
        width: 95%;
    }

    to {
        width: 100%;
    }
}

.animate-p {
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.zoom-out {
    animation: zoomOut 5s ease forwards;
    animation-delay: 8s;
}

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.5);
        opacity: 0;
    }
}

.about-text.visible {
    display: block;
}

.para-text.visible {
    display: block;
}

/*----------FOR SECION-3----------*/
.section-3 {
    overflow: hidden;
}

.img-1-section-3 {
    text-align: center;
}

.img-1-section-3 .show-on-scroll {
    max-width: 100%;
    height: 700px;
}

.img-2-section-3 {
    text-align: right;
}

/* .img-2-section-3 {
    position: absolute;
    animation: ongrid 5s infinite;
    right: -319px;
    bottom: -112px; */

.img-2-section-3 {
    position: absolute;
    right: -303px;
    bottom: 58px;
    animation: ongrid 5s infinite;
    height: 182px;
}

@keyframes ongrid {
    0% {
        transform: translateX(-28%);
    }

    100% {
        transform: translateX(0);
    }
}

.section-3 h2 {
    text-transform: uppercase;
}

/*----------FOR SECION-4----------*/
.section-4 {
    overflow: hidden;
}

.section-4 h1 {
    font-size: 70px;

    color: rgb(9, 9, 9);
    text-transform: uppercase;
    padding: 125px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.section-4 .services h3 {
    text-transform: uppercase;
    padding-bottom: 5px;
    text-align: left;
    font-size: 50px;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.section-4 .services p {
    text-align: left;
    font-size: 30px;
    font-weight: 500;
    color: rgb(3, 3, 3);
    width: 100%;
    text-transform: capitalize;
    font-family: 'Poppins', sans-serif;
}

.section-4 .services .card-body {
    color: rgb(12, 12, 12);
    border-radius: 12px;
}

.arrow-button {
    display: flex;
    align-items: center;
}

.section-4 h2 {
    padding: 24px;
}

.service-btn img {
    width: 100%;
}

.service-section {
    border-radius: 10px;
}

.service-section .card {
    border: none;
    background-color: transparent;
}

.service-section .card .card-body {
    margin-bottom: 0;
}

.text-center {
    text-align: center !important;
}

.section-4 .service-bg {
    background-image: url('../images/service-name-theme.png');
    padding: 49px;
    background-position: right;
    border-radius: 20px;
    margin-bottom: 15px;
}

.section-4 .service-img {
    height: 180px;
    /* margin-top: 20px;
    margin-left: 27px; */
}

/* .section-4 .service-img-4 {
    margin-top: 60px;
} */

/* .section-4 .service-img-1 {
    margin-top: 45px;
} */

.p-service {
    text-transform: lowercase;
}

.number {
    margin-left: 12px;
    margin-right: 4px;
}

/* .typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 3s steps(40, end) infinite;
} */

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/*----------SECTION-MAP-----------*/
/* .section-map {
    margin-top: 80px;
} */

.section-map .map-text .map-heading {
    font-size: 54px;
    font-weight: 900;
    text-transform: uppercase;
    color: rgb(3, 3, 3);
    padding-top: 5px;
    border-bottom: 4px solid #828181;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.over {
    font-weight: 600;
    font-size: 34px;
}

.section-map .map-text {
    text-align: center;
    color: rgb(3, 3, 3);
}

.section-map .map-text h3 {
    font-size: 31px;
    font-weight: 300;
}

.section-map .map-text h2 {
    font-size: 35px;
    font-weight: 600;
    border-bottom: 4px solid #828181;
    margin-left: -20px;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 7px;
}

.colorChange #counter {
    display: inline-block;
}

.card-fixed-align {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.card-fixed-align.animate {
    opacity: 1;
    transform: translateY(0);
}

/*----------FOR SECION-5----------*/
.section-5 {
    padding: 75px 0;
    overflow: hidden;
}

.portfolio-section {
    max-width: 1350px;
}

.portfolio-text {
    max-width: 80%;
    margin: 0 0 60px;
    color: rgb(7, 7, 7);
}

.portfolio-text h2 {
    font-size: 62px;
    font-weight: 700;
    color: rgb(3, 3, 3);
    text-transform: uppercase;
    padding-top: 59px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.portfolio-text p {
    font-weight: 400;
    font-size: 27px;
    color: rgb(3, 3, 3);
    margin-top: 0;
    margin-bottom: 1rem;
}

#page1,
#page2,
#page3,
#page4 {
    position: relative;
}

/* #page1 {
    background-image: url(../images/portf1.png);
} */

#page2 {
    background-image: url(../images/portf2.png);
}

#page3 {
    background-image: url(../images/portf3.png);
}

#page4 {
    background-image: url(../images/portf4.jpg);
}

#page1::before,
#page2::before,
#page3::before,
#page4::before {
    content: '';
    height: 100%;
    width: 100%;
    background-color: #15151521;
    position: absolute;
    top: 0;
    left: 0;
}

.page-content {
    width: 100vw;
    height: 80vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    box-sizing: border-box;
    background-size: cover;
}

.page-content h1 {
    font-weight: 700;
    font-size: 54px;
    line-height: 67px;
    align-items: center;
    color: #fff;
    position: relative;
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 4px solid #fff;
    padding-top: 44px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.page-content p {
    font-weight: 400;
    font-size: 28px;
    line-height: 55px;
    color: #fff;
}

.btn-view {
    text-align: center;
    background-color: #cde7f9;
    padding: 100px 0;
}

.btn-view a:hover {
    background-color: rgb(3, 3, 3);
    color: #fff;
    transform: scale(1.1);
}

.btn-linkss {
    background: #fff;
    border-radius: 0;
    padding: 15px 30px;
    border: none;
    font-weight: 600;
}

.btn-view a {
    background-color: #fff;
    color: black;
    padding: 13px 28px;
    font-size: 20px;
    font-weight: 600;
}

.btn-view a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #222220;
}

.btn-view svg {
    vertical-align: middle;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.btn-view .btn:hover svg path {
    stroke: #fff;
}

.btn-view a:hover svg {
    transform: translateX(5px);
}

/*---------------------FOR SECTION-6---------------------*/
.section-6 {
    width: 100%;
}

.section-6 .faq-list strong {
    color: rgb(10, 10, 10);
}

.faq-title {
    font-size: 47px;
    margin: -1.6em 0;
    color: rgb(3, 3, 3);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
    margin-top: -190px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

div.seperator {
    height: 0.17em;
    margin-left: -1.8em;
}

.faq-list>div {
    border-bottom: 0.07em solid #ededed;
    padding: 1.5em 0em;
}

.faq-list>div:last-child {
    border: unset;
}

details>summary {
    list-style: none;
    color: rgb(3, 3, 3);
}

details>summary::-webkit-details-marker {
    display: none;
}

summary {
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all 0.3s ease;
}

details[open] summary~* {
    animation: sweep .5s ease-in-out;
}

@keyframes sweep {
    0% {
        opacity: 0;
        margin-left: -10px
    }

    100% {
        opacity: 1;
        margin-left: 55px
    }
}

details[open] p {
    margin-left: 20px;
    padding-left: 10px;
    opacity: 100;
    transition: all 3s ease;
}

details[open] summary:after {
    content: "-";
    font-size: 48px !important;
    margin: -31px 0.35em 0 0 !important;
    font-weight: 100;
}

.faq-list {
    margin: 1em auto;
    padding: 2em 0;
}

.faq-list p {
    text-align: justify;
    hyphens: auto;
}

summary::-webkit-details-marker {
    display: none;
}

summary:after {
    background: transparent;
    border-radius: 0.3em;
    content: "+";
    float: left;
    font-size: 1.8em;
    font-weight: 100;
    margin: -16px 0.65em 0 0 !important;
    padding: 0;
    text-align: center;
}

/*---------FOR SECTION FACTS-------------*/
.section-facts {
    padding: 50px 0px 90px;
    overflow: hidden;
}

.section-facts .content-facts h2 {
    font-size: 49px;
    text-transform: uppercase;
    color: rgb(3, 3, 3);
    margin-bottom: -8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.company {
    margin-bottom: 25px;
}

.section-facts .content-facts h6 {

    margin-bottom: 16px;
    line-height: 48px;
    color: rgb(3, 3, 3);
}

.section-facts .page-facts h1 {
    font-size: 71px;
    color: rgb(3, 3, 3);
    line-height: 61px;
    /* margin-left: -11px; */
    /* margin-bottom: 25px; */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.page-facts {
    padding-top: 76px;
}

.section-facts .page-facts h4 {
    /* position: relative; */
    font-size: 41px;
    top: -175px;
    left: 11px;
    color: rgb(3, 3, 3);
    /* margin-bottom: 0; */
    /* margin-left: -5px; */
    /* margin-top: 147px; */
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.section-facts .content-facts p {
    color: #7a7878;
    margin-top: 20px;
    font-size: 22px;
    line-height: 34px;
    width: 100%;
    margin-right: -21px;
}

.section-facts .content-facts {
    border: 5px solid #ebeded;
    padding: 7px 26px;
    border-radius: 26px;
    background-color: #ebeded;
    height: 100%;
}

.section-facts .content-facts:hover {
    background-color: #0093e5;
    border: 5px solid #0093e5;
}

.section-facts .content-facts:hover h2 {
    color: #fff;
}

.section-facts .content-facts:hover h6 {
    color: #fff;
}

.section-facts .content-facts:hover p {
    color: #fff;
}

/* .section-facts .content-facts:hover {
    background-color: #0093e5;
    border: 5px solid #0093e5;
    color: #fff;
}

.section-facts .content-facts:hover p, h2, h6 {
    color: #fff;
} */

.heading-2 {
    text-align: right;
}

.facts-video {
    top: -144px;
    right: -61px;
    /* margin-top: -24px; */
}

/* .perf-text {
    margin-top: -155px;
}

.performance-- {
    height: 267px;
}

.cloud-- {
    height: 321px;
}

.cloud-text {
    margin-top: -329px;
} */

/* .cgi-text {
    margin-left: 40px;
} */

/*-------FOR SECTION-7---------*/
.section-7 img {
    width: 100%;
}

@keyframes blink-caret {

    0%,
    100% {
        border-color: transparent;
    }

    50% {
        border-color: #fff;
    }
}

@keyframes textAnimation {
    0% {
        width: 0;
        color: transparent;
    }

    100% {
        width: 100%;
        color: #fff;
    }
}

.section-7 {
    /* position: relative;
    overflow: hidden; */
    background-image: url(../images/design-quote-bg.jpg);
    padding: 100px;
}

.text-7 {
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    text-align: center;
}

.text-7 h1 {
    font-size: 58px;
    font-weight: bold;
    color: black;
    overflow: hidden;
    padding-bottom: 14px;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.colorChange .text-7 h1 {
    animation: textAnimation 5s, blink-caret .75s;
}

.text-7 .text-7-h1-2 {
    animation: textAnimation 10s, blink-caret .75s;
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: #fff;
    }
}

.text-7 button {
    margin-top: 5px;
    padding: 17px;
}

.text-7 .btn {
    display: inline-block;
    padding: 16px 55px;
    font-size: 23px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    background-color: #2a83bd;
    color: #fff;
    transition: background-color 0.3s, transform 0.3s;
}

.text-7 .btn:hover {
    background-color: rgb(3, 3, 3);
    color: #fff;
    transform: scale(1.1);
}

/*-------FOR SECTION-8---------*/
.section-8 {
    overflow: hidden;
}

/* footer .container {
    padding-bottom: 11px;
    border-bottom: 1px solid #090909;
} */

.footerhead {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    color: #04D0CD;
}

.footerlink {
    padding: 0 0 8px;
    margin-bottom: 2px;
}

.section-8 .col-md-2 ul {
    margin-bottom: 2px;
}

.footerlink li {
    display: flex;
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 7px;
}

.footerlink li:hover {
    color: #0d6efd;
}

.footerlink li a {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
}

.footerlink li a:hover {
    color: #fff;
}

.footer-text {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    color: #fff;
    width: 93%;
}

ul.social-links {
    padding: 8px 0 0;
    list-style-type: none;
    display: inline-flex;
}

.sociallinks li {
    padding: 5px 10px 0 0;
}

.social-links li a {
    color: #090909;
    font-size: 22px;
    display: inline-block;
}

.footerlogo {
    padding: 0px 0 0;
}

.footer_logo {
    margin-bottom: 25px;
}

.footer-logo img {
    max-height: 67px;
}

.copyright p {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    color: #fff;
    margin-bottom: 0;
}

.social-links li a i {
    padding: 1px;
    font-size: 26px;
    margin-right: 23px;
}

.footerlink li i {
    height: 30px;
    width: 30px;
    background: rgb(3, 3, 3);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 15px;
    font-size: 14px;
}

.footerlink li i:hover {
    background-color: #3498db;
}

.address p {
    margin-left: 6px;
    font-size: 16px;
    font-style: normal;
    font-weight: 4 00;
    line-height: 30px;
    color: #fff;
    width: 81%;
}

.location-icon {
    height: 30px;
    width: 30px;
    background: rgb(3, 3, 3);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 12px;
    font-size: 14px;
    margin-left: 4px;
}

.location-icon:hover {
    background-color: #3498db;
}

.sector {
    margin-left: 50px;
}

.fa-facebook:hover {
    color: #0866ff;
}

.fa-linkedin:hover {
    color: #0a66c2;
}

.fa-square-x-twitter:hover {
    color: rgb(0, 0, 0);
}

.fa-square-instagram:hover {
    color: #952759;
}

/*----------FOR CONTACT BUTTON------------*/
#fixed-btn {
    position: fixed;
    right: -62px;
    top: 50%;
    transform: rotate(-90deg);
    z-index: 500;
}

#fixed-btn .btn-contact {
    background-color: #3498db;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 35px;
    border: none;
    border-radius: 15px 15px 0 0;
    cursor: pointer;
    text-decoration: none;
}

#fixed-btn .btn-contact:hover {
    background-color: #4baef0;
}

/*-------FOR CLIENT PAGE-------*/
/*---------CLIENT SEC-1-------*/
.client-sec-1 {
    height: 100vh;
}

.client-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 25%;
    margin: auto;
}

.client-content h1 {
    font-size: 68px;
    text-align: center;
    color: rgb(3, 3, 3);
    margin-bottom: 11px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.client-content h2 {
    font-size: 50px;
    font-weight: 500;
    text-align: center;
    color: rgb(3, 3, 3);
    text-transform: uppercase;
}

/*--------CLIENT SEC-2-------*/
.client-2 h1 {
    text-align: center;
    padding-bottom: 150px;
    font-size: 75px;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.client-img {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 20px;
    background: #ededed87;
    box-shadow: inset 0 0 15px rgb(230 227 227);
    border-radius: 10px;
    border: 1px solid #00000030;
}

body.dark-mode .client-img {
    background-color: #ffffffcf;
    box-shadow: none;
    border: none;
}

.client-img img {
    display: block;
    width: auto;
    height: 90px;
    /* padding: 28px 22px; */
    transition: 0.5s ease-in-out;
}

/* .client-img .hover-image {
    position: absolute;
    top: 0;
    left: auto;
    right: auto;
    opacity: 0;
    transform: scale(1.2);
    display: flex;
    justify-content: center;
    max-width: 92%;
} */

/* .client-img:hover img {
    opacity: 0;
} */

details[open] summary {
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ebedf3;
}

.client-img:hover .hover-image {
    opacity: 1;
    transform: scale(1.1);
}

/*--------CLIENT SEC-3-------*/
.client-sec-3 h1 {
    padding-top: 150px;
    text-align: center;
    font-size: 90px;

    padding-bottom: 60px;
}

.testy-border {
    border: 2px solid #e7f0f7;
    ;
    border-radius: 35px;
    padding: 5px 28px;
    margin: 80px auto;
    width: 80%;
    position: relative;
    background-color: #e7f0f7;
}

.client-sec-3 h1 {
    font-size: 70px;
    font-weight: bold;
    margin-left: 27px;
    margin-top: 25px;
}

.client-sec-3 h3 {

    padding-top: 25px;
    text-align: left;
    font-size: 52px;
    margin-bottom: 30px;
}

.text-test p {
    margin-top: 9px;
    margin-bottom: 2rem;
    margin-left: 3px;
    margin-right: 10px;
    text-align: justify;
    hyphens: auto;
    font-size: 27px;
    text-transform: uppercase;
}

.stars-symbol {
    text-align: left;
    font-size: 60px;
}

.carousel-item {
    padding: 0px 20px 0 50px;
}

.arrow-symbol {
    margin-top: -46px;
    margin-left: 847px;
}

/*----CLIIENT-SEC-4-----*/
.client-sec-4 {
    padding-bottom: 100px;
}

.client-sec-4 .indus-text h1 {
    padding-top: 89px;
    text-align: center;
    padding-bottom: 90px;
    font-size: 75px;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.indus-img {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.indus-img .indus-img-1 {
    margin-top: 77px;
    margin-bottom: 77px;
}

.indus-img .indus-img-2 {
    margin-top: 55px;
    margin-bottom: 55px;
}

.indus-img .indus-img-3 {
    margin-top: 35px;
    margin-bottom: 35px;
}

.indus-img .indus-img-4 {
    margin-top: 17px;
    margin-bottom: 17px;
}

.zoom-img {
    margin: 0;
}

.zoom-img {
    transition: transform 0.2s ease;
}

.zoom-img:hover {
    transform: scale(1.5);
    width: 10%;
    margin-top: 70px;
    margin-bottom: 70px;
}

/*----CLIIENT-SEC-5-----*/
.client-sec-5 {
    padding-top: 220px;
    padding-bottom: 150px;
    margin-left: 80px;
}

.bulb-section {
    justify-content: center;
}

.bulb-section .bulb-content .your {
    font-size: 94px;
    text-transform: uppercase;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.bulb-section .bulb-content h2 {
    font-size: 100px;
    line-height: 94px;
    margin-top: 60px;
    text-align: right;
    color: rgb(3, 3, 3);
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.bulb-img {
    position: relative;
}

.bulb-img h2 {
    font-size: 330px;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.bulb-img .f {
    padding-right: 150px;
}

.bulb-img img {
    position: absolute;
    right: 37%;
    bottom: 11%;
}

.reality-content h3 {
    font-size: 67px;
    line-height: 71px;
    text-align: center;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;

}

.reality-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/*--------FOR TEAM PAGE--------*/
.team-section {
    padding: 300px 0;
    background-color: #d0e5ee;
}

.team-text h1 {
    font-size: 65px;

}

.team-text p {
    font-size: 27px;
    font-weight: 500;
    margin-bottom: 0;
}

.team-section {
    position: relative;
    overflow: hidden;
}

.team-text {
    position: relative;
}

.team-h,
.team-p {
    transition: opacity 0.5s ease-in-out;
}

.team-h {
    opacity: 1;
}

.team-p {
    opacity: 0;
}

.team-section:hover .team-h {
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.team-section:hover .team-p {
    opacity: 1;
    animation: fadeIn 2s ease-in-out;
}

/*
.accordion-body[data-font-style="popping-regular"] {
    transition: max-height 3s ease-in-out;
} */

/*-----TESTIMONIAL SECTION STARTS-----*/
.section-tes {
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 68px 41px 9px 0;
    margin: 80px auto;
    width: 80%;
    position: relative;
    margin-top: 90px;
}

.section-tes h1 {
    /* font-size: 49px; */
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 20px 0 20px;
    letter-spacing: 1px;
    width: 92%;
    line-height: 46px;
    padding: 0 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


    /* text-shadow: -.01em -.01em .01em #b5b3b3; */
}

@keyframes textAnimate {
    0% {
        color: #3498db;
        ;
    }

    50% {
        color: #03dddc;
    }

    100% {
        color: #3498db;
        ;
    }

    100% {
        text-shadow: 0em .01em #3d3d3b, 0em .02em #262623, 0em .02em .03em #1a1a18, -.01em .01em #333, -.02em .02em #333, -.03em .03em #333, -.04em .04em #333, -.01em -.01em .03em #000, -.02em -.02em .03em #000, -.03em -.03em .03em #000;
        transform: translateY(-.025em) translate(.04em);
    }
}

.ready {
    font-size: 51px;
    color: black;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;

}

.happy {
    font-size: 68px;
    line-height: 50px;
    color: black;
}

.family {
    font-size: 62px;
    color: black;
}

.section-tes h3 {
    font-weight: 600;
    text-align: left;
    color: rgb(3, 3, 3);
}

.text-tes p {
    margin-top: 9px;
    margin-bottom: 1rem;
    margin-left: 3px;
    font-weight: 500;
    margin-right: 10px;
    text-align: justify;
    hyphens: auto;
    color: #5a5757;
}

.stars {
    text-align: left;
    display: flex;
}

.carousel-control-prev-icon {
    margin-right: 82px;
}

.carousel-control-next-icon {
    margin-left: 82px;
}

.container-fluid.banner {
    padding: 150px;
    background-color: #fff;
}

.carousel-item {
    text-align: center;
}

.brand-logo {
    max-width: 100%;
    height: 100%;
    padding: 56px 25px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #605e5e;
}

.carousel-control-prev-icon,
.carousel-control-next-icon:hover {
    background-color: #8b8686;
}

.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 100%;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*---------------SERVICE PAGE STARTS--------------*/
/*------TECHNOLOGY SECTION-1-----*/
.service-sec-1 {
    height: 85vh;
    padding-top: 53px;
    overflow: hidden;
}

.service-content {
    display: flex;
    justify-content: end;
}

.service-sec-1 .service-content h1 {
    font-size: 132px;

    text-transform: uppercase;
    color: rgb(3, 3, 3);
    line-height: 123px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;

}

.service-sec-1 .service-content-2 h2 {
    font-size: 100px;

    text-transform: uppercase;
    color: #3498db;
    line-height: 29px;
    margin-top: -137px;
    display: flex;
    align-items: center;
    padding-left: 189px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;

}

.service-sec-1 .service-content-2 .for {
    font-size: 165px;

}

.service-sec-1 .service-content-2 .code {
    display: flex;
    color: #3498db;
}

.service-sec-1 .service-content-3 p {
    line-height: 15px;
    font-size: 37px;
    color: rgb(3, 3, 3);
    padding-left: 189px;
}

.system-image img {
    position: relative;
    bottom: 85px;
    right: 201px;
}

/*.system-image img {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}*/

/*---------------TECHNOLOGY SECTION-2-----------------*/
.service-sec-2 {
    background-image: url('../images/');
}

.service-sec-2 .text-service h1 {

    text-transform: uppercase;
    font-size: 111px;
    color: rgb(3, 3, 3);
    padding-bottom: 30px;
    line-height: 105px;
    padding-top: 200px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.service-sec-2 .text-service .service-p {
    font-size: 43px;
    font-weight: 200;
    color: rgb(3, 3, 3);
    padding-bottom: 90px;
    line-height: 62px;
    width: 100%;
}

.service-sec-2 .text-service h3 {
    font-size: 47px;

    text-transform: uppercase;
    color: #3498db;
    margin-bottom: 40px;
    padding-top: 35px;
}

.service-sec-2 .text-service .text-p {
    font-size: 16px;
}

ul {
    display: flex;
    padding-bottom: 25px;
}

.li-tech {
    font-size: 27px;
    margin-right: 35px;
}

.software-list li {
    padding: 3px 8px;
}

/*----------------TECHNOLOGY SECTION-3-------------------*/
.service-sec-3 {
    overflow: hidden;
}

.service-sec-3 .text-3 h1 {
    font-size: 93px;

    text-transform: uppercase;
    color: #3498db;
    padding-top: 90px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.service-sec-3 .text-3 h3 {
    line-height: 57px;
    padding-bottom: 60px;
    font-size: 48px;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.service-sec-3 .text-3 p {
    font-size: 35px;
    color: rgb(3, 3, 3);
}

.service-sec-3 p strong {
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.text-3>img {
    float: right;
    margin-left: 1rem;
    margin-top: 500px;
    margin-right: -112px;
    shape-outside: polygon(100% 0, 100% 100%, 0 100%, 0 47%, 100% 0);
}

/*----------------TECHNOLOGY SECTION-4-------------------*/
.ser-sec-4 h3 {
    font-size: 37px;
    margin-bottom: 70px;
    text-transform: uppercase;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;

}

.ser-sec-4 .services-4 h1 {
    font-size: 65px;

    text-align: center;
    color: rgb(3, 3, 3);
    padding: 100px 0 80px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.technology-images {
    align-items: center;
    padding-bottom: 50px;
}

.technology-images img {
    max-width: 100%;
    height: auto;
    display: block;
}

@keyframes zoomIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

.ser-sec-4 img {
    transition: transform 0.5s ease;
}

.ser-sec-4 img:hover {
    transform: scale(1.1);
}

/*----------------TECHNOLOGY SECTION-5-------------------*/
.ser-sec-5 h4 {
    font-size: 44px;

    text-transform: uppercase;
    color: #3498db;
    margin-top: 70px;
    margin-bottom: 26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.ser-sec-5 img {
    animation: zoomInOut 5s ease-in-out infinite;
}

/*----------------TECHNOLOGY SECTION-6-------------------*/
.ser-sec-6 {
    overflow: hidden;
}

.ser-sec-6 h2 {
    font-size: 65px;

    text-align: center;
    text-transform: uppercase;
    padding-bottom: 115px;
    padding-top: 180px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.btn-digital {
    background-color: #f9d4aa;
    padding: 27px 41px;
    margin-left: 59px;
    border-radius: 35px;
}

.btn-digital:hover {
    background-color: #f1dabf;
}

.btn-marketing {
    background-color: #b4cafc;
    padding: 24px 64px;
    border-radius: 35px;
    margin-left: 59px;
}

.btn-marketing:hover {
    background-color: #c3d1f2;
}

.btn-digital .btn {
    font-size: 74px;
    text-transform: uppercase;

}

.btn-marketing .btn {
    font-size: 59px;
    text-transform: uppercase;

}

/****DESIGN PAGE STARTS****/
/*----design-section-1---*/
.design-sec-1 {
    height: 100vh;
}

.design-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    margin: auto;
}

.design-content h1 {
    font-size: 65px;

    text-align: center;
    color: rgb(3, 3, 3);
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.design-content h2 {
    font-size: 46px;
    font-weight: 500;
    text-align: center;
    line-height: 55px;
    color: rgb(3, 3, 3);
}

.imag-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
}

/*----design-section-2----*/
.design-sec-2 .text-design h1 {

    text-transform: uppercase;
    font-size: 111px;
    color: rgb(3, 3, 3);
    padding-bottom: 30px;
    line-height: 105px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.design-sec-2 .text-design .design-p {
    font-size: 43px;
    font-weight: 200;
    color: rgb(3, 3, 3);
    padding-bottom: 4px;
    line-height: 60px;
    width: 100%;
}

/*------design-sec-3-------*/
.design-sec-3 .design-text-text h3 {
    font-size: 43px;

    text-transform: uppercase;
    color: #3498db;
    margin-bottom: 40px;
    padding-top: 60px;
}

.design-sec-3 .text-p {
    font-size: 16px;
}

ul {
    display: flex;
    padding-bottom: 25px;
}

.li-design {
    font-size: 28px;
    margin-right: 35px;
}

/*------design-sec-4-------*/
.design-sec-4 .design-text-4 h1 {
    font-size: 90px;

    text-transform: uppercase;
    color: #3498db;
    text-align: center;
    padding-top: 85px;
    padding-bottom: 16px;
    margin-left: 150px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.design-sec-4 .design-text-4 h3 {
    /* line-height: 4px; */
    padding-bottom: 110px;
    font-size: 50px;
    text-align: center;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-left: 169px;
}

.design-sec-4 .design-text-4 p {
    font-size: 35px;
    margin-left: 150px;
    color: rgb(3, 3, 3);
}

.design-sec-4 p strong {
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.design-text-4>img {
    float: right;
    margin-left: 1rem;
    margin-top: 150px;
    shape-outside: polygon(100% 0, 100% 100%, 0 100%, 0 47%, 100% 0);
}

/*------design-sec-5-------*/
.design-sec-5 {
    background-image: url('');
    margin-right: 50px;
}

.design-5 h1 {
    font-size: 80px;

    text-align: center;
    color: rgb(3, 3, 3);
    padding: 90px 0 70px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.design-img img {
    margin-left: 57px;
    margin-bottom: 57px;
    margin-right: 4px;
}

@keyframes zoomIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

.design-sec-5 img {
    transition: transform 0.5s ease;
}

.design-sec-5 img:hover {
    transform: scale(1.3);
}

/*--design-sec-6---*/
.design-sec-6 h4 {
    font-size: 44px;

    text-transform: uppercase;
    color: #3498db;
    margin-top: 70px;
    margin-bottom: 26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.design-sec-6 img {
    animation: zoomInOut 5s ease-in-out infinite;
}

/*---design-sec-7---*/
.design-sec-7 {
    overflow: hidden;
}

.design-sec-7 h2 {
    font-size: 65px;

    text-align: center;
    text-transform: uppercase;
    color: rgb(3, 3, 3);
    padding-bottom: 115px;
    padding-top: 180px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.logic a {
    list-style-type: none;
}

.btn-technology {
    background-color: #ebd6fd;
    padding: 26px 52px;
    margin-left: 54px;
    border-radius: 40px;
}

.btn-technology:hover {
    background-color: #d7bfec;
}

.btn-marketing {
    background-color: #b4cafc;
    padding: 13px 64px;
    border-radius: 40px;
    margin-left: 63px;
}

.btn-marketing:hover {
    background-color: #9eb7f0;
}

.btn-technology .btn {
    font-size: 74px;
    text-transform: uppercase;

}

.btn-marketing .btn {
    font-size: 76px;
    text-transform: uppercase;

    color: rgb(3, 3, 3);
}

.p-btns {
    font-size: 24px;
    color: rgb(3, 3, 3);
    margin-left: 20px;
    margin-bottom: 17px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;

}

/*******MARKETING PAGE********/
/*---marketing-section-1---*/
.marketing-sec-1 {
    height: 100vh;
    padding-top: 120px;
}

.marketing-sec-1 .marketing-content h1 {
    font-size: 229px;

    color: #3498db;
    margin-top: -85px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;

}

.marketing-content h2 {
    font-size: 40px;
    font-weight: 500;
    text-align: left;
    color: black;
    margin-left: 164px;
    margin-top: -55px;
}

.marketing-content h3 {
    font-size: 44px;
    color: black;
    text-align: left;
    margin-left: 143px;
    margin-bottom: 27px;
}

.rock-text {
    color: black;
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
}

.brand-img {
    position: absolute;
    bottom: -43px;
    right: -64px;
}

.heart-1 img {
    position: relative;
    bottom: 251px;
    left: 887px;
}

.heart-2 img {
    position: relative;
    bottom: 336px;
    left: 930px;
}

.heart-3 img {
    position: relative;
    bottom: 389px;
    left: 876px;
}

/*----marketing-section-2---*/
.marketings-sec-2 {
    background-image: url('../images/');
}

.marketing-sec-2 .text-marketing h1 {

    text-transform: uppercase;
    font-size: 111px;
    color: black;
    padding-bottom: 30px;
    line-height: 105px;
    padding-top: 100px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.marketing-sec-2 .text-marketing .marketing-p {
    font-size: 43px;
    font-weight: 200;
    color: black;
    padding-bottom: 45px;
    line-height: 62px;
    width: 106%;
}

/*------marketing-sec-3-------*/
.marketing-sec-3 .marketing-text h3 {
    font-size: 47px;

    text-transform: uppercase;
    color: #3498db;
    margin-bottom: 40px;
    padding-top: 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;

}

.marketing-sec-3 .marketing-p {
    font-size: 16px;
}

ul {
    display: block;
    padding-bottom: 25px;
}

.li-mark {
    font-size: 30px;
    margin-right: 35px;
}

.software-list li:hover {
    background-color: rgb(3, 3, 3);
    color: #fff;
    padding: 9px 14px 8px 14px;
    border-radius: 8px;
}

.software-list li {
    padding: 9px 14px 8px 14px;
}

/*------marketing-sec-4-------*/
.marketing-sec-4 {
    overflow: hidden;
}

.marketing-sec-4 .marketing-text-4 h1 {
    font-size: 83px;

    text-transform: uppercase;
    color: #3498db;
    padding-top: 70px;
    margin-left: 150px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.marketing-sec-4 .marketing-text-4 h3 {
    padding-bottom: 65px;
    font-size: 42px;
    color: rgb(3, 3, 3);
    margin-left: 150px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.marketing-sec-4 .marketing-text-4 p {
    font-size: 35px;
    color: rgb(3, 3, 3);
    margin-left: 150px;
}

.marketing-sec-4 p strong {
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.marketing-text-4>img {
    float: right;
    margin-left: 1rem;
    margin-top: 700px;
    margin-right: -12px;
    shape-outside: polygon(100% 0, 100% 100%, 0 100%, 0 47%, 100% 0);
}

/*------marketing-sec-5-------*/
.marketing-5 h1 {
    font-size: 75px;

    text-align: center;
    color: rgb(3, 3, 3);
    padding: 90px 0 70px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.marketing-img img {
    margin-left: 44px;
    margin-bottom: 57px;
    margin-right: 4px;
}

@keyframes zoomIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

.marketing-sec-5 img {
    transition: transform 0.5s ease;
}

.marketing-sec-5 img:hover {
    transform: scale(1.3);
}

/*--marketing-sec-6---*/
.marketing-sec-6 h4 {
    font-size: 44px;

    text-transform: uppercase;
    color: #3498db;
    margin-top: 70px;
    margin-bottom: 26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.marketing-sec-6 img {
    animation: zoomInOut 5s ease-in-out infinite;
}

/*--marketing-sec-7---*/
.marketing-sec-7 {
    overflow: hidden;
}

.marketing-sec-7 h2 {
    font-size: 65px;
    text-align: center;
    color: rgb(3, 3, 3);
    text-transform: uppercase;
    padding-bottom: 115px;
    padding-top: 180px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.btn-technology {
    background-color: #ebd6fd;
    padding: 15px 52px;
    margin-left: 37px;
    border-radius: 40px;
}

.btn-technology:hover {
    background-color: #d7bfec;
}

.btn-technology .btn {
    font-size: 70px;
    text-transform: uppercase;

    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.btn-digital {
    background-color: #f9d4aa;
    padding: 11px 41px;
    margin-left: 36px;
    border-radius: 35px;
}

.btn-digital:hover {
    background-color: #f1dabf;
}

.btn-digital .btn {
    font-size: 74px;
    text-transform: uppercase;
    color: rgb(3, 3, 3);

    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.buttons {
    padding-bottom: 100px;
}

.right-arrow {
    font-size: 74px;
    margin-top: -38px;
}

.service-box {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 20px;
}

/*----NAVBAR SERVICE----*/
.service-link {
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    position: relative;
    top: 28px;
    left: 11px;
}

.drop-box,
.mobdrop-box {
    position: initial !important;
    padding-right: 20px;
    cursor: pointer;
}

.drop-box a,
.mobdrop-box a {
    position: relative;
}

.drop-box .downarrow::before,
.mobdrop-box .downarrow::before,
.drop-box .downarrow::after,
.mobdrop-box .downarrow::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    background: var(--myClrDark);
    border-radius: 50%;
    position: absolute;
    right: -14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.drop-box:hover .downarrow::before,
.mobMenuTrigger.active .downarrow::before,
.drop-box:hover .downarrow::after,
.mobMenuTrigger.active .downarrow::after {
    width: 2px;
    height: 7px;
    border-radius: 0;
    top: 50%;
    right: -10px;
}

.drop-box:hover .downarrow::before,
.mobMenuTrigger.active .downarrow::before {
    -webkit-transform: rotate(-45deg) translateY(-50%);
    transform: rotate(-45deg) translateY(-50%);
}

.drop-box:hover .downarrow::after,
.mobMenuTrigger.active .downarrow::after {
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
}

.drop {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--myClrLight);
    width: 100%;
    padding: 5px 0 16px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    border-bottom: 1px solid var(--myClrDark);
    z-index: 1000;
}

.drop .f-col {
    padding: 0 8px;
    list-style-type: none;
}

.drop ul {
    padding-left: 0;
}

.drop ul li {
    margin-right: 0;
    list-style-type: none;
    margin-top: -80px;
}

.drop-box:hover:after {
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: 10;
    display: block;
    width: 100%;
    height: 37px;
    content: "";
}

.fixHeader .drop-box:hover:after {
    height: 30px;
}

.fixHeader .navigation {
    height: var(--headerHeightFixed);
}

.fixHeader .navigation li {
    line-height: var(--headerHeightFixed);
}

.drop-box:hover .drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    top: 142%
}

/* .col1 {
    background: #f9d4aa;
}

.col2 {
    background: #ebd6fd;
}

.col3 {
    background: #b4cafc;
} */

.col1 {
    padding: 23px 26px;
}

.col2 {
    padding: 23px 26px;
}

.col3 {
    padding: 23px 26px;
}

.dropbox-cont {
    height: 100%;
    border-radius: 14px;
    text-transform: initial;
    position: relative;
    overflow: hidden;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

body.dark-mode .dropbox-cont h6,
body.dark-mode .dropFlex p {
    color: #fff;
}

.dropbox-cont>div {
    position: relative;
    z-index: 1;
}

.dropbox-cont:after {
    content: "";
    background-size: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% + 30px);
    opacity: .1;
    transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
}

.dropbox-cont.col1 {
    position: relative;
    background-repeat: round;
    /* background-color: #0fa1f5; */
    overflow: hidden;
    background-color: #fff;
}

.dropbox-cont.col1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/images/services/header-blue-bg.png");
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
    background-repeat: round;
    background-color: #fff;
    z-index: 0;
}

.dropbox-cont.col1>* {
    position: relative;
    z-index: 1;
}


.dropbox-cont.col2 {
    background-repeat: round;
    /* background-color: #fff; */
    /* background-size: 120%; */
    background-color: #fff;
}

.dropbox-cont.col2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/images/services/header-green-bg.png");
    background-repeat: round;
    /* background-color: #09d7f2; */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
    z-index: 0;
}

.dropbox-cont.col2>* {
    position: relative;
    z-index: 1;
}

.dropbox-cont.col3 {
    background-repeat: round;
    /* background-color: #0db2e7; */
    /* background-size: 120%; */
    background-color: #fff;
}

.dropbox-cont.col3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/images/services/header-blue-bg.png");
    background-repeat: round;
    background-color: #fff;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
    z-index: 0;
}

.dropbox-cont.col3>* {
    position: relative;
    z-index: 1;
}

.dropbox-cont:hover:after {
    background-position: 100% 180%;
    top: -100%;
    background-size: 200%;
}

.dropbox-cont:hover .dropFlex img {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/* navbar service */
.dropbox-cont h6 {
    font-weight: 600;
    font-size: 37px;
    color: #000;
    font-family: 'Poppins';
    margin-top: 13px;
}

.dropbox-cont p {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin-top: 17px;
    margin-bottom: 0;
}

.dropFlex {
    display: flex;
    align-items: center;
}

.dropFlex p {
    width: 100%;
}

.dropFlex img {
    /* position: absolute; */
    width: 30px;
    margin-top: 12px;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.frontback {
    -webkit-animation: movefrom 1s infinite;
    animation: movefrom 1s infinite;
}

@keyframes movefrom {
    from {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes movefrom {
    from {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.downarrow {
    color: #333;
    font-size: 12px;
    margin-left: -4px;
    display: inline-block;
}

.text-tes {
    margin-top: 67px;
    margin-right: 30px;
}

/* section tes */
.founder-pagination {
    text-align: center;
    margin-top: 20px;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3498db;
    display: inline-block;
    margin: 0 4px;
    opacity: .4;
    transition: all .2s ease in ease-in-out;
    -webkit-transition: all .2s ease in ease-in-out;
}

/*********ABOUT PAGE*********/
/*about-sec-1*/
.about-sec-1 {
    height: 78vh;
}

.about-text-page h1 {
    text-transform: uppercase;
    font-size: 73px;

    color: #3498db;
    line-height: 40px;
    width: 103%;
}

.about-text-page h2 {
    font-size: 60px;
    margin-bottom: 21px;
    color: black;
    line-height: 77px;
    font-weight: lighter;
}

.about-text-page h3 {
    font-size: 34px;
    margin-top: 6px;
    color: black;
}

.about-text-page hr {
    color: black;
}

.hr {
    margin: 1rem 0;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 1 !important;
    color: black;
    font-weight: 900;
    border-color: black;
    border-top-width: 3px;
    margin-left: 237px;
    margin-right: 222px;
    margin-top: 150px;
}

.about-img-1 img {
    position: relative;
    top: 37px;
    left: 26%;
    animation: moveUp 1s ease-out;
    display: flex;
    justify-content: end;
}

@keyframes moveUp {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

.about-img-2 img {
    position: relative;
    left: -8px;
    top: 41px;
    animation: moveRight 1s ease-out;
    display: flex;
    justify-content: end;
}

@keyframes moveRight {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

.about-img-3 img {
    position: relative;
    top: 43px;
    left: -26px;
    animation: moveDown 1s ease-out;
}

.about-img-3,
.about-img-2,
.about-img-1 {
    display: flex;
    justify-content: end;
}

@keyframes moveDown {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

.about-sec-2 {
    background-image: url('../images/');
}

.about-description {
    padding-top: 70px;
}

.about-description p {
    font-size: 40px;
    font-weight: 500;
    padding-bottom: 85px;
    width: 100%;
    color: black;
    text-align: center;
}

.bold-hr {
    margin: 1rem 0;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 1 !important;
    color: black;
    font-weight: 900;
    border-color: black;
    border-top-width: 3px;
}

.ab-text {
    padding-top: 50px;
}

.about-sec-3 {
    overflow: hidden;
}

.collage-about-us img {
    /* width: 918px; */
    width: 100%;
    /* height: 700px; */
}

/*---about-sec-4---*/
.about-sec-4 h1 {
    font-size: 64px;
    text-transform: uppercase;

    text-align: center;
    color: black;
    padding-top: 150px;
}

/*---about-sec-5---*/
.about-us-images img {
    margin-right: 20px;
    width: 100%;
    margin-bottom: 20px;
}

.about-us-images {
    overflow: hidden;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-us-images.show {
    opacity: 1;
    transform: translateY(0);
}

.about-us-images img {
    transition: transform 0.3s ease;
}

.about-us-images img:hover {
    transform: scale(1.1);
}

/*---about-sec-6---*/
.about-sec-6 {
    padding-top: 40px;
}

/*---about-sec-7---*/
.about-sec-7 {
    padding-top: 90px;
    padding-bottom: 90px;
}

#home-tab {
    font-size: 60px;

    color: black;
    margin-left: -49px;
}

#profile-tab {
    font-size: 60px;

    color: grey;
    line-height: 1px;
    margin-left: -49px;
}

.cont-1 {
    font-size: 75px;

    color: black;
    padding-top: 10px;
    margin-left: -67px;
}

.cont-2 {
    font-size: 77px;

    color: grey;
    padding-top: 9px;
}

/* SECTION VERTICAL TABS */
#experienceTab.nav-pills .nav-link.active {
    color: #3498db !important;
    background-color: transparent;
    border-radius: 0px;
    border-left: 3px solid var(--theme-yellow);
}

#experienceTab.nav-pills .nav-link {
    border-radius: 0px;
    border-left: 2px solid var(--theme-gray);
}

.nav-pills {
    flex-direction: column;
}

.date-range {
    letter-spacing: 0.01em;
    color: var(--theme-gray);
}

a {
    color: var(--theme-gray);
    transition: 0.3s eas-in-out;
    text-decoration: none;
}

a:hover {
    color: #0d6efd;
}

/*---about-sec-8---*/
.about-8-img {
    margin-left: 60px;
    margin-top: 80px;
    padding-bottom: 100px;
}

.about-8-img .img-1 {
    border-top-left-radius: 36px;
    border-bottom-left-radius: 36px;
}

.about-8-img .img-2 {
    border-radius: 36px;
}

.about-8-img .img-3 {
    border-top-right-radius: 36px;
    border-bottom-right-radius: 36px;
}

/******CAREER PAGE*******/
/*---career-sec-1---*/
.career-sec {
    overflow: hidden;
}

.career-text-2 p {
    font-size: 50px;
    line-height: 59px;
    color: rgb(3, 3, 3);
    padding-top: 50px;
    padding-bottom: 110px;
}

.carrier-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
}

.carrier-data h2 {
    font-size: 101px;
}

.ord {
    font-size: 90px;
}

/*---career-sec-2---*/
.career-sec-2 {
    background-image: url('../images/');
    padding-top: 0;
}

.carrier-data-2 p {
    font-size: 50px;
    line-height: 59px;
    color: rgb(3, 3, 3);
    padding-top: 50px;
    padding-bottom: 110px;
}

.page-1 {
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.page-2 {
    display: inline-block;
    background-color: #0080eb;
    color: #fff;
    padding: 15px 16px;
    border: 2px solid #0080eb;
    border-radius: 15px;
    margin-top: 16px;
    font-size: 57px;
    transform: rotate(-1deg);
    position: relative;
    top: 9px;
    transform-origin: left center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.page-2 {
    display: inline-block;
    animation: moveUpDown 1s ease-in-out infinite alternate;
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-25px);
    }
}

/*---career-sec-3---*/
.career-sec-3 {
    overflow: hidden;
    padding: 91px 0;
}

.boxes {
    border: 1px solid #eaeaea;
    border-radius: 38px;
    padding: 50px;
    width: 100%;
    background-color: #eaeaea;
    text-align: center;
    height: 90vh;
    position: relative;
}

.boxes h2 {
    font-size: 75px;
    color: #0080eb;
    text-transform: uppercase;
    margin: 0;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.boxes h4 {
    font-size: 33px;
    line-height: 21px;
    color: grey;
    text-align: left;
    margin: 0;
}

.seo-btn {
    text-align: center;
}

.seo-btn .btn {
    border: 1px solid #0080eb;
    background-color: #0080eb;
    color: #fff;
    border-radius: 29px;
    padding: 15px 96px;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 66px;
    font-weight: 500;
    display: inline-block;
    text-decoration: none;
}

.btn-apply:focus,
.btn-apply:active {
    outline: none;
    border: none;
}

/* .career-img-1 img,
.career-img-2 img {
    max-width: 100%;
    height: auto;
} */

.career-img-1 img {
    position: absolute;
    bottom: 1%;
    right: 17%;
}

.career-img-2 img {
    position: absolute;
    bottom: 0%;
    right: 1%;
}

/*****PORTFOLIO PAGE*****/
/*---portfolio-sec-1---*/
.portfolio-sec-1 {
    height: 100vh;
}

.portfolio-content {
    position: absolute;
    top: 40%;
    left: 50%;
    color: black;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
}

.portfolio-content h1 {
    font-size: 61px;

    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.portfolio-content .port-heading {
    font-size: 63px;

    text-align: center;
    text-transform: uppercase;
    line-height: 78px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;

}

#counter {
    width: 107px;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.port-img {
    position: relative;
    overflow: hidden;
}

.image-container {
    position: relative;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

/* .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1;
} */

.overlay-img {
    display: none;
}

.port-img:hover .overlay-img,
.port-img-2:hover .overlay-img {
    display: flex;
    position: relative;
    position: absolute;
    top: 50%;
    margin: auto;
    max-width: 55%;
    left: 20%;
    right: auto;
    transform: translateY(-50%);
}

.port-img:hover .image-container::before,
.port-img-2:hover .image-container::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
}

.port-img.overlay-1:hover .image-container::before {
    background-color: #36663cc4;
    opacity: 0.8;
}

.port-img-2.overlay-2:hover .image-container::before {
    background-color: rgb(195 48 48 / 71%);
    opacity: 0.8;
}

.port-img.overlay-3:hover .image-container::before {
    background-color: #0198cfb5;
    opacity: 0.8;
}

.port-img-2.overlay-4:hover .image-container::before {
    background-color: #e0e0e094;
    opacity: 0.8;
}

.port-img.overlay-5:hover .image-container::before {
    background-color: #8e2a9c94;
    opacity: 0.8;
}

.port-img-2.overlay-6:hover .image-container::before {
    background-color: #1f9cc3a1;
    opacity: 0.8;
}

.port-img.overlay-7:hover .image-container::before {
    background-color: #081d3bb8;
    opacity: 0.8;
}

.port-img-2.overlay-8:hover .image-container::before {
    background-color: #a89a97ad;
    opacity: 0.8;
}

.port-img.overlay-9:hover .image-container::before {
    background-color: #d99c31ab;
    opacity: 0.8;
}

.port-img-2.overlay-10:hover .image-container::before {
    background-color: #cc1122b0;
    opacity: 0.8;
}

.port-img.overlay-11:hover .image-container::before {
    background-color: #e1b03aa8;
    opacity: 0.8;
}

.port-img-2.overlay-12:hover .image-container::before {
    background-color: #ebbe65ba;
    opacity: 0.8;
}

.port-img.overlay-13:hover .image-container::before {
    background-color: #2e2e2ebd;
    opacity: 0.8;
}

.port-img-2.overlay-14:hover .image-container::before {
    background-color: #575ee0c2;
    opacity: 0.8;
}

.port-img.overlay-15:hover .image-container::before {
    background-color: #e8e8e8bd;
    opacity: 0.8;
}

.port-img-2.overlay-16:hover .image-container::before {
    background-color: #d3d3d3c7;
    opacity: 0.8;
}

.overlay img {
    max-width: 40%;
    max-height: 40%;
}

.over-10 {
    max-width: 40%;
    max-height: 40%;
}

.image-container:hover .overlay {
    opacity: 1;
}

/*----portfolio-sec-2----*/
.portfolio-sec-2 {
    overflow: hidden;
}

.port-text h3 {
    font-size: 40px;

    margin-top: 135px;
    text-align: right;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.port-text p {
    font-size: 26px;
    text-align: right;
    color: #686666;
}

.port-text .port-heading {
    margin-top: 148px;
    text-align: left;
    color: rgb(3, 3, 3);
    margin-left: 32px;
}

.port-text .port-p {
    text-align: left;
    margin-left: 32px;
    margin-bottom: 80px;
}

.port-img-2 {
    margin-left: 36px;
    margin-top: 91px;
}

.portfolio-sec-3 {
    overflow: hidden;
}

/*---portfolio-sec-4---*/
.portfolio-sec-4 {
    padding-bottom: 130px;
}

@keyframes enter-animation {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .imgs-animation {
        animation: enter-animation 0.8s 1;
    }
}

.portfolio-sec-1,
.portfolio-sec-2,
.portfolio-sec-3,
.portfolio-sec-4,
.portfolio-sec-5,
.portfolio-sec-6,
.portfolio-sec-7,
.portfolio-sec-8,
.portfolio-sec-9 {
    overflow: hidden;
}

/* contact page */
.contact .heading h1 {
    font-size: 55px;
    margin: 0;
    padding-top: 18px;

    color: rgb(3, 3, 3);
    text-transform: uppercase;
    font-family: Poppins-Bold;
}

.contact .heading h1 span {
    color: #3498db;
}

.contact .heading p {
    font-size: 21px;
    font-weight: 400;
    line-height: 28px;
    color: #847f7f;
    margin: 20px 0 60px;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.contact .form-control {
    padding: 25px;
    font-size: 14px;
    margin-bottom: 10px;
    background: #f9f9f9;
    border: 0;
    border-radius: 10px;
}

.contact button.btn {
    padding: 10px;
    text-transform: uppercase;
    border-radius: 10px;
    font-size: 18px;
    background: #3498db;
    color: #ffffff;
    border: 1px solid #3498db;
    width: 100%;
}

.contact button.btn:hover {
    background-color: #3d9fe1;
    color: #fff;
}

.contact .title h3 {
    font-size: 35px;

    text-transform: uppercase;
    color: rgb(3, 3, 3);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.contact .title p {
    font-size: 15px;
    font-weight: 400;
    color: #847f7f;
    line-height: 1.6;
    margin: 0 0 40px;
}

.contact .content .info {
    margin-top: 30px;
    display: flex;
    align-items: center;
}

/* .contact .content .info i {
    font-size: 40px;
    padding: 0;
    margin: 0;
    color: black;
    margin-right: 20px;
    text-align: center;
    width: 20px;
    margin-right: 31px;
} */

.contact .content .info h4 {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
}

.contact .content .info h4 span {
    font-size: 15px;
    font-weight: 300;
    color: #847f7f;
}

/*----*/
.block {
    height: 5em;
    line-height: 5em;
    width: 10em;
    background: #464646;
    color: #fdfdfd;
    text-align: center;
    margin: 1em auto;
    text-shadow: 0 0 1px #333;
}

.animatable {
    visibility: hidden;
    animation-play-state: paused;
}

.animated {
    visibility: visible;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-play-state: running;
}

@keyframes bounce-InLeft {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }

    60% {
        transform: translateX(20px);
    }

    80% {
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounce-InRight {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    60% {
        transform: translateX(-20px);
    }

    80% {
        transform: translateX(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animated.animationDelay {
    animation-delay: 0.4s;
}

.animated.animationDelayMed {
    animation-delay: 1.2s;
}

.animated.animationDelayLong {
    animation-delay: 1.6s;
}

.animated.bounce-InRight {
    animation-name: bounce-sInRight;
}

.animated.bounce-InLeft {
    animation-name: bounceInLeft;
}

/*section-facts animation*/
.animatable {
    visibility: hidden;
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animated {
    visibility: visible;
    animation-fill-mode: both;
}

.animatable {
    animation-delay: 2s;
}

/*TEAM PAGE*/
.team-sec-1 {
    height: 100vh;
}

.team-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: auto;
}

.team-content h1 {
    font-size: 53px;

    text-align: center;
    margin-bottom: 11px;
    color: black;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;

}

.team-content .minds {
    color: black;
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
    font-style: italic;
}

.team-image img {
    /* width: 484px; */
    width: 100%;
    height: 469px;
}

.team-description p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 23px;
    text-align: justify;
    hyphens: auto;
}

.team-description {
    margin-right: 50px;
}

.client-content {
    text-align: center;
}

.animate-from-center {
    opacity: 0;
    transform: translateY(-50px) scale(0.7);
    animation-fill-mode: forwards;
}

.delay-0 {
    animation: animateFromCenter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation-delay: 0.3s;
}

.delay-2 {
    animation: animateFromCenter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation-delay: 1.3s;
}

.delay-4 {
    animation: animateFromCenter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation-delay: 2.3s;
}

.delay-6 {
    animation: animateFromCenter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation-delay: 3.3s;
}

@keyframes animateFromCenter {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.7);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.carrier-data {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.carrier-data h2 {
    position: relative;
    text-align: center;
    color: rgb(3, 3, 3);
}

.carrier-data .first-part {
    display: inline-block;
    animation: bounceInLeft 1.5s ease-out forwards;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.carrier-data .ord {
    display: inline-block;
    animation: bounceInRight 1.5s ease-out forwards;
    font-family: 'Poppins-ExtraLight.ttf';
}

@keyframes bounceInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes bounceInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-in-from-left {
    opacity: 0;
    transform: translateX(-100%);
    animation: fadeInFromLeftAnimation 4s ease-out forwards;
}

@keyframes fadeInFromLeftAnimation {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.heading {
    font-size: 2em;
    /* opacity: 0; */
    /* transform: scale(0); */
    transition: opacity 0.5s ease, transform 0.5s ease;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
}

.paragraph {
    font-size: 23px;
    position: absolute;
    top: 0;
    left: auto;
    opacity: 0;
    right: auto;
    width: 100%;
    margin: auto;
    text-align: justify;
    hyphens: auto;
    /* padding-top: 80px; */
}

.text-paragraph {
    width: 70%;
    display: flex;
    margin: auto;
    text-align: center;
}

.text-hover {
    transition: transform 3s ease-in-out;
}

.text-hover:hover {
    animation: text 3s ease-in-out forwards;
}

@keyframes text {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(1.2);
        opacity: 1;
    }
}

.container:hover .heading {
    opacity: 0;
}

.container:hover .contact-page {
    opacity: 1
}

.container:hover .paragraph {
    left: 0;
    opacity: 1;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#subheading {
    color: rgb(3, 3, 3);
    margin-left: 17px !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
}

/* .section-2 .typewriter {
    position: absolute !important;
    top: 0;
} */

.toggal-btn {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.career-img-1 img {
    display: block;
    transition: transform 0.3s ease;
}

.career-img-1:hover img {
    transform: scale(1.1);
}

.career-img-2 img {
    display: block;
    transition: transform 0.3s ease;
}

.career-img-2:hover img {
    transform: scale(1.1);
}

.contact {
    overflow: hidden;
    padding-bottom: 60px;
}

.word {
    perspective: 1000px;
    margin-left: 44px;
}

.word span {
    cursor: pointer;
    display: inline-block;
    font-size: 190px;

    user-select: none;
    line-height: 125px;
    letter-spacing: -17px;
}

.word span:nth-child(1).active {
    animation: balance 1.5s ease-out;
    transform-origin: bottom left;
}

@keyframes balance {

    0%,
    100% {
        transform: rotate(0deg);
    }

    30%,
    60% {
        transform: rotate(-45deg);
    }
}

.word span:nth-child(2).active {
    animation: shrinkjump 1s ease-in-out;
    transform-origin: bottom center;
}

@keyframes shrinkjump {

    10%,
    35% {
        transform: scale(2, .2) translate(0, 0);
    }

    45%,
    50% {
        transform: scale(1) translate(0, -150px);
    }

    80% {
        transform: scale(1) translate(0, 0);
    }
}

.word span:nth-child(3).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
}

@keyframes falling {
    12% {
        transform: rotateX(240deg);
    }

    24% {
        transform: rotateX(150deg);
    }

    36% {
        transform: rotateX(200deg);
    }

    48% {
        transform: rotateX(175deg);
    }

    60%,
    85% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

.word span:nth-child(4).active {
    animation: rotate 1s ease-out;
}

@keyframes rotate {

    20%,
    80% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.word span:nth-child(5).active {
    animation: toplong 1.5s infinite;
}

@keyframes toplong {

    10%,
    40% {
        transform: translateY(-48vh) scaleY(1);
    }

    90% {
        transform: translateY(-48vh) scaleY(4);
    }
}

.fixed {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.center {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.char {
    font-size: 40px;
    height: 40px;
    display: inline-block;
}

.team-sec-2.active .char {
    animation: an 1s ease-out 1 both;
}

@keyframes an {
    from {
        opacity: 0;
        transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
    }

    to {
        opacity: 1;
        transform: perspective(500px) translate3d(0, 0, 0);
    }
}

@keyframes showTopText {
    0% {
        transform: translate3d(0, 100%, 0);
    }

    40%,
    60% {
        transform: translate3d(0, 50%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes showBottomText {
    0% {
        transform: translate3d(0, -100%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.animated-title {
    color: #222;
    /* height: 90vmin; */
    /* left: 50%;
    position: absolute;
    top: 0;
    transform: translate(-68%, -105%); */
    /* width: 90vmin; */
}

.animated-title>div {
    /* height: 50%; */
    overflow: hidden;
    /* position: absolute;*/
    width: 100%;
}

.animated-title>div div {
    font-size: 12vmin;
    padding: 2vmin 0;
}

.animated-title>div div span {
    display: block;
}

.animated-title>div.text-top {
    border-bottom: 3px solid #000;
    top: 0;
    width: 78%;
}

.animated-title>div.text-top div {
    animation: showTopText 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    bottom: 0;
    transform: translate(0, 100%);
}

.animated-title>div.text-top div span:first-child {
    color: #767676;
}

.animated-title>div.text-bottom {
    bottom: 0;
}

.animated-title>div.text-bottom div {
    animation: showBottomText 0.5s;
    animation-delay: 1.75s;
    animation-fill-mode: forwards;
    top: 0;
    transform: translate(0, -100%);
}

/*--reveal--*/
.reveal {
    position: relative;
    opacity: 0;
}

.reveal.active {
    opacity: 1;
}

.active.fade-bottom {
    animation: fade-bottom 1s ease-in;
}

.active.fade-left {
    animation: fade-left 1s ease-in;
}

.active.fade-right {
    animation: fade-right 1s ease-in;
}

@keyframes fade-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.career-sec {
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat;
}

.fixed-top {
    padding: 0px;
}

.navbar-brand {
    display: block;
}

/* .navbar-brand img {
    width: 15%;
} */

/* .open {
    position: sticky;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #f0efef;
    z-index: 10000;
    transition:  0.5s ease-in-out;
} */

header {
    display: block !important;
}

.hash-list {
    list-style-type: none;
    padding-left: 0;
}

.hash-list li {
    position: relative;
    padding-left: 15px;
    color: black;
}

.hash-list li::before {
    content: "#";
    position: absolute;
    left: -8px;

    top: 9px;
}

.hash-list li:hover::before {
    opacity: 0;
}

.scroll-area .go-top {
    position: fixed;
    cursor: pointer;
    top: 88%;
    right: 1px;
    color: #ffffff;
    background-image: -moz-linear-gradient(0deg, #3498db 0%, #3498db 100%);
    background-image: -webkit-linear-gradient(0deg, #3498db 0%, #3498db 100%);
    z-index: 9999;
    width: 37px;
    text-align: center;
    height: 37px;
    line-height: 42px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.9s ease-out;
    border-radius: 10px;
}

.scroll-area .go-top i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    transition: all 0.5s ease-out;
}

.scroll-area .go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%;
}

.scroll-area .go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(to right, #00132b 0%, #00132b 100%);
    background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-out;
    border-radius: 50%;
}

.scroll-area .go-top:focus,
.scroll-area .go-top:hover {
    color: #fff;
}

.scroll-area .go-top:focus::before,
.scroll-area .go-top:hover::before {
    opacity: 1;
    visibility: visible;
}

.scroll-area .go-top:focus i:first-child,
.scroll-area .go-top:hover i:first-child {
    opacity: 0;
    top: 0;
    visibility: hidden;
}

.scroll-area .go-top:focus i:last-child,
.scroll-area .go-top:hover i:last-child {
    opacity: 1;
    visibility: visible;
    top: 50%;
}

.scroll-area .go-top.active {
    opacity: 1;
    visibility: visible;
    border-radius: 50%;
}

.marketing-sec-7 a {
    text-decoration: none !important;
}

.design-sec-7 a {
    text-decoration: none !important;
}

.ser-sec-6 a {
    text-decoration: none !important;
}

.btn-digital .btn-des:focus,
.btn-digital .btn-des:hover,
.btn-digital .btn-des:active {
    border: none;
    outline: none;
}

.btn-technology .btn-tech:focus,
.btn-technology .btn-tech:hover,
.btn-technology .btn-tech:active {
    border: none;
    outline: none;
}

.btn-marketing .btn-mark:focus,
.btn-marketing .btn-mark:hover,
.btn-marketing .btn-mark:active {
    border: none;
    outline: none;
}

.plus {

    cursor: pointer;
    margin-right: 10px;
}

.services-task {
    display: none;
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0px;
    padding-left: 10px;
}

.services-task li {
    margin-bottom: 5px;
}

.footerlink li .services-task {
    transition: 2s ease-in-out;
}

.footerlink li:hover .services-task {
    display: block;
    transition: 2s ease;
}

.country {
    text-transform: uppercase;
}

/* team carousel */
.marquee {
    overflow-x: clip;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.marquee-inner {
    display: flex;
    align-items: center;
    will-change: transform;
}

.marquee-inner img {
    height: 100%;
    transition: transform 0.5s;
    flex-shrink: 0;
    border-radius: 10px;
    width: 327px;
    height: 300px;
    margin-right: 11px;
}

.marquee-inner img:hover {
    transform: scale(1.3);
    padding: 20px;
}

/****APP DEVELOPMENT PAGE STARTS****/
/*----app-section-1---*/
.app-sec-1 {
    height: 100vh;
}

.app-content h1 {
    font-size: 107px;
    line-height: 202px;
    color: #3498db;
    margin-top: -80px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.app-content h2 {
    line-height: 105px;
}

.app-content .innovation {
    font-size: 60px;
    font-weight: 500;
    color: black;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.app-content .every {
    font-size: 62px;
    font-weight: 500;
    color: black;
    text-transform: uppercase;
}

.app-image img {
    /* height: 665px; */
    width: 100%;
}

.app-design {
    height: 80%;
}

/*----app-section-2---*/
.app-description h2 {
    font-size: 70px;
    color: black;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.app-paragraph-1 p {
    font-size: 43px;
    padding-top: 60px;
    line-height: 54px;
    color: black;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.app-image-2 {
    position: relative;
    height: 600px;
    background: rgba(0, 0, 0, 0);
    transform: rotate(-30deg) skew(25deg) scale(0.8);
    transition: 0.5s;
    display: flex;
    justify-content: center;
}

.app-image-2 img {
    padding-top: 40px;
    width: 100%;
    display: flex;
    margin: auto;
    position: absolute;
    transition: 0.5s;
}

.app-image-2:hover img:nth-child(4) {
    transform: translate(160px, -160px);
    opacity: 1;
}

.app-image-2:hover img:nth-child(3) {
    transform: translate(120px, -120px);
    opacity: 0.8;
}

.app-image-2:hover img:nth-child(2) {
    transform: translate(80px, -80px);
    opacity: 0.6;
}

.app-image-2:hover img:nth-child(1) {
    transform: translate(40px, -40px);
    opacity: 0.4;
}

.app-paragraph-2 h2 {
    padding-top: 150px;
    padding-bottom: 28px;
    font-size: 54px;
    color: black;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.app-paragraph-2 p {
    font-size: 35px;
    padding-top: 25px;
    line-height: 48px;
    color: black;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.app-paragraph-2 ul li {
    font-size: 35px;
    padding-top: 25px;
    line-height: 48px;
    color: black;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.app-description-2 h2 {
    font-size: 60px;
    padding-top: 160px;
    padding-bottom: 45px;
    color: black;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

/*----app-section-3---*/
.mobile-1 h1 {
    font-size: 83px;
    line-height: 88px;
    text-align: center;
    color: black;
    padding-top: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.mobile-1 p {
    font-size: 40px;
    text-align: center;
    line-height: 56px;
    /* color: #dbdbdb; */
    padding-bottom: 50px;
    padding-top: 20px;
    font-family: 'Poppins', sans-serif;
    background: rgb(150, 149, 149);
    /* background: -webkit-linear-gradient(#f1eeee, #000000); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-1 p:hover {
    color: black;
    background: -webkit-linear-gradient(#0b0b0b, #080808);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ui-ux {
    display: inherit;
}

/*----app-section-4---*/
.app-sec-text-4 h1 {
    text-align: center;
    font-size: 55px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.app-sec-text-4 .amazing {
    /* text-transform: uppercase; */
    font-size: 60px;
    line-height: 30px;
    font-weight: 600;
    font-family: Poppins;
    color: #0a70f6;
    text-align: center;
}

.app-sec-text-4 .accomplish {
    font-size: 34px;
    line-height: 34px;
    font-weight: 600;
    font-family: Poppins;
    color: #000;
    text-align: center;
}

.app-para p {
    font-size: 16px;
    line-height: 24px;
    font-family: Poppins;
    color: #000;
    text-align: justify;
    hyphens: auto;
    padding-top: 8px;
    margin-bottom: 0;
}

.app-para .idea {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.design-service-sec-1 {
    height: 81vh;
}

.design-service-content {
    text-align: center;
}

.design-service-content .wows {
    font-size: 56px;
    text-align: center;
    color: black;
}

.design-service-content .design {
    font-size: 56px;
    text-align: center;
    color: black;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;

}

/***software-page***/
.software-sec-1 {
    height: 100vh;
    overflow: hidden;
}

.software-content h1 {
    font-size: 95px;
    line-height: 75px;
    color: #3498db;
    position: relative;
    z-index: 800;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.software-content h2 {
    font-size: 57px;
    color: black;
    font-family: 'Poppins', sans-serif;
}

.big {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

    font-size: 50px;
}

.software-image img {
    height: 511px;
    width: 475px;
    position: relative;
    top: 0;
    left: -94px;
}

.software-design {
    height: 100%;
}

/***cyber-page***/
.cyber-sec-1 {
    height: 83vh;
}

.cyber-content h1 {
    font-size: 155px;

    line-height: 112px;
    color: #3498db;
    position: relative;
    z-index: 800;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.cyber-content h2 {
    font-size: 63px;
    color: black;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;

}

.big-1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

    font-size: 55px;
}

.cyber-image img {
    position: relative;
    top: 0;
    left: -70px;
    width: 100%;
}

.cyber-design {
    height: 100%;
}

.digital-marketing {
    font-size: 42px;
    line-height: 53px;
    text-align: center;
    color: black;
    padding-top: 40px;
}


/***digital-page***/
.digital-sec-1 {
    height: 100vh;
}

.digital-content h1 {
    font-size: 107px;

    line-height: 75px;
    color: #3498db;
    position: relative;
    z-index: 800;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.digital-content h2 {
    font-size: 50px;
    color: black;
    font-family: 'Poppins', sans-serif;
}

.big-3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

    font-size: 47px;
}

.digital-image img {
    position: relative;
    top: -18px;
    left: -34px;
}

.digital-design {
    height: 100%;
}

.cloud-devops {
    font-size: 42px;
    line-height: 53px;
    text-align: center;
    color: black;
    padding-top: 40px;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-15deg);
    }

    40% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-5deg);
    }

    80% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.wows img {
    display: inline-block;
    animation: swing 1s ease-in-out infinite;
}

.design-service-content h1 {
    text-align: center;
    transform: scale(0.94);
    animation: scale 2s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

@keyframes scale {
    100% {
        transform: scale(1);
    }
}

.design-service-content span {
    display: inline-block;
    opacity: 0;
    filter: blur(13px);
}

.design-service-content span:nth-child(1) {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(2) {
    animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(3) {
    animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(4) {
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(5) {
    animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(6) {
    animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(7) {
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(8) {
    animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(9) {
    animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(10) {
    animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(11) {
    animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(12) {
    animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(13) {
    animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(14) {
    animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(15) {
    animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(16) {
    animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(17) {
    animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.design-service-content span:nth-child(18) {
    animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
    100% {
        opacity: 1;
        filter: blur(0);
    }
}


.waviy {
    position: relative;
}

.waviy h1 span {
    position: relative;
    font-size: 107px;

    letter-spacing: -28px;
    line-height: 101px;
    color: #3498db;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    display: inline-block;
    animation: flip 4s infinite;
    animation-delay: calc(.4s * var(--i))
}

@keyframes flip {

    0%,
    80% {
        transform: rotateY(360deg)
    }
}


/* .coding h2 {
    position: absolute;
    left: 0;
    font-size: 57px;
    color: black;
    font-family: 'Poppins', sans-serif;
  }
  .coding h1 {
    position: absolute;
    left: 0;
    font-size: 95px;

    line-height: 75px;
    color: #3498db;
    position:relative;
    z-index: 800;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
font-weight: 700;


  }
  .upper {
    top: 0;
    height: 52.5%;
    color: #0e0e0e;
    overflow: hidden;
    z-index: 3;
    animation: moveUp 1.5s ease-in-out 1;
    background-color: #f5efef;
  }

  .lower {
    bottom: 0;
    height: 100%;
    background: linear-gradient(180deg, #121212 52.5%, #fff 52.5%); */
/* color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    z-index: 1;
    animation: moveDown 1.5s ease-in-out 1;
  }

  .inside {
    position: absolute;
    top: 40%;
    transform: translateY(-40%);
    text-align: center;
    z-index: 2;
    font-size: 1rem;
    color: #dc143c;
  }

  @keyframes moveUp {
    0%,
    100% {
      top: 0;
    }

    50%,
    70% {
      top: -45px;
    }
  }

  @keyframes moveDown {
    0%,
    100% {
      top: 0;
    }

    50%,
    70% {
      top: 30px;
    }
  }

  @media (max-width: 424px) {
    .container {
      font-size: 2.5rem;
    }

    .inside {
      font-size: 0.75rem;
    }
  }

  @media (max-width: 320px) {
    .container {
      font-size: 2rem;
    }

    .inside {
      font-size: 0.5rem;
    }
  }
   */

/*
   .yellow{
    color: #484848;
    font-size: 50px;
    font-weight: bold;
    font-family: monospace;
    letter-spacing: 7px;
    cursor: pointer
  }
  .yellow span{
    transition: .5s linear
  }
  .yellow:hover span:nth-child(1){
    margin-right: 5px
  }
  .yellow:hover span:nth-child(1):after{
    content: "'";
  }
  .yellow:hover span:nth-child(2){
    margin-left: 30px
  }
  .yellow:hover span{
    color: #fff;
    text-shadow: 0 0 10px #fff,
                 0 0 20px #fff,
                 0 0 40px #fff;
  } */

/*----cloud-section-1---*/
.cloud-sec-1 {
    height: 100vh;
    overflow: hidden;
}

.cloud-content h1 {
    font-size: 75px;

    line-height: 31px;
    color: #3498db;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.cloud-content h2 {
    font-size: 43px;
    line-height: 80px;
    color: rgb(3, 3, 3);
}

.cloud-image img {
    height: 447px;
    width: 680px;
    position: relative;
    top: 25px;
    right: 394px;
}

.cloud-design {
    height: 80%;
}

.team-content h1 {
    text-align: center;
    transform: scale(0.94);
    animation: scale 2s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

@keyframes scale {
    100% {
        transform: scale(1);
    }
}

.team-content h1 {
    display: inline-block;
    opacity: 0;
    filter: blur(13px);
}

.team-content h1:nth-child(1) {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(2) {
    animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(3) {
    animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(4) {
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(5) {
    animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(6) {
    animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(7) {
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(8) {
    animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(9) {
    animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(10) {
    animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(11) {
    animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(12) {
    animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(13) {
    animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(14) {
    animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(15) {
    animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(16) {
    animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(17) {
    animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.team-content h1:nth-child(18) {
    animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/********************/
:root {
    --background-color: #fff;
    --animation-props: 4s linear infinite alternate;
    --component-size: 1083px;
    --mask-size: 80px;
    --border-offset: -14px;
}

@keyframes mask-move {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(var(--component-size) - var(--mask-size)));
    }
}

@keyframes mask-inner-move {
    0% {
        transform: translateX(98px);
    }

    100% {
        transform: translateX(calc(-1 * (var(--component-size) - var(--mask-size))));
    }
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

.focus {
    font-size: 60px;
    line-height: 60px;
    font-weight: 600;
    font-family: Poppins;
    color: #0a70f6;
    text-align: center;
    position: relative;
    text-transform: uppercase;
}

.focus:before {
    content: 'as Your Software Development Company';
    filter: blur(3px);
}

.focus:after {
    content: '';
    position: absolute;
    width: var(--mask-size);
    height: calc(100% + var(--border-offset));
    top: 7px;
    left: 1%;
    border-top: 2px solid;
    border-bottom: 2px solid;
    animation: mask-move var(--animation-props);
}

.focus--mask {
    overflow: hidden;
    position: absolute;
    width: var(--mask-size);
    height: 100%;
    top: 0;
    left: 1%;
    background: #fff;
    animation: mask-move var(--animation-props);
}

.focus--mask-inner {
    animation: mask-inner-move var(--animation-props);
    text-wrap: nowrap;
}

/*,
:before,
:after {
    box-sizing: border-box;
}
#wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 80em;
}
#wrapper-2 {
    display: flex;
    flex-direction: column;
    float: left;
    justify-content: center;
    min-height: 100vh;
    padding: 1em;
    width: 100%;
}
.app-content h1 {
    animation: text-shadow 1.5s ease-in-out;
}
.app-content h1:hover {
    animation-play-state: paused;
}
@keyframes text-shadow {
    0% {
        transform: translateY(0);
        text-shadow:
            0 0 0 #0c2ffb,
            0 0 0 #2cfcfd,
            0 0 0 #338aee,
            0 0 0 #08ebf4;
    }

    20% {
        transform: translateY(-1em);
        text-shadow:
            0 0.125em 0 #0c2ffb,
            0 0.25em 0 #2cfcfd,
            0 -0.125em 0 #338aee,
            0 -0.25em 0 #08ebf4;
    }

    40% {
        transform: translateY(0.5em);
        text-shadow:
            0 -0.0625em 0 #0c2ffb,
            0 -0.125em 0 #2cfcfd,
            0 0.0625em 0 #338aee,
            0 0.125em 0 #08ebf4;
    }

   60% {
        transform: translateY(-0.25em);
        text-shadow:
            0 0.03125em 0 #0c2ffb,
            0 0.0625em 0 #2cfcfd,
            0 -0.03125em 0 #338aee,
            0 -0.0625em 0 #08ebf4;
    }

    80% {
        transform: translateY(0);
        text-shadow:
            0 0 0 #0c2ffb,
            0 0 0 #2cfcfd,
            0 0 0 #338aee,
            0 0 0 #08ebf4;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
}
 */

.service-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.service-link:hover {
    color: #0d6efd;
}

.service-link .icon {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.service-link:hover .icon-path {
    d: path("M1 5H9");
}

.service-link:hover .icon {
    transform: rotate(360deg);
}

.foot .icon {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.foot:hover .icon-path {
    d: path("M1 5H9");
}

.foot:hover .icon {
    transform: rotate(360deg);
}

/*---on click---*/
/* .drop {
    display: none;
}
.plus-symbol::after {
    content: '+';
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 5px;
}
.plus-symbol.minus::after {
    content: '-';
} */

.bounce {
    display: inline-block;
    animation: bounce 1s infinite;
}

@keyframes bounce {

    0%,
    40%,
    100% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-20px)
    }
}

/*
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.code-img {
    animation: heartbeat 1.5s infinite;
} */

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.2);
    }

    40% {
        transform: scale(1);
    }

    60% {
        transform: scale(1.2);
    }

    80% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

.heartbeat {
    display: inline-block;
    animation: heartbeat 1.5s infinite;
}

@keyframes pop-word {
    to {
        transform: rotateX(0);
    }
}

@keyframes show {
    to {
        opacity: 1;
    }
}

@keyframes bar-scale {
    to {
        transform: scaleY(1);
    }
}

@keyframes sparkle {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1) translate(4px, 1px) rotate(8deg);
    }

    100% {
        transform: scale(0) translate(4px, 1px) rotate(8deg);
    }
}

.wordings {
    display: block;
    animation: show 0.01s forwards, pop-word 1.5s forwards;
    animation-timing-function: cubic-bezier(0.14, 1.23, 0.33, 1.16);
    opacity: 0;
    transform: rotateX(120deg);
    transform-origin: 50% 100%;
}

.wordings:nth-of-type(2) {
    padding: 0 2rem;
    animation-delay: 2s;
    color: rgb(3, 3, 3);
}

.tool-1 img {
    position: absolute;
    top: 48px;
    right: 165px;
}

.tool-2 img {
    position: absolute;
    top: -49px;
    left: 20px;
}

.tool-3 img {
    position: absolute;
    top: -12px;
    left: 24%;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.tool-2 img {
    animation: rotate360 5s linear infinite;
}

.tool-1 img {
    animation: rotate360 5s linear infinite;
}

@keyframes shakeX {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

.tool-3 img {
    animation: shakeX 2s ease-in-out infinite;
}

.service-buttons {
    transition: transform 0.3s ease;
}

.service-buttons:hover {
    transform: scale(1.2);
}

.heart-1 {
    animation: moveUp 2s infinite;
}

.heart-2 {
    animation: moveUp 2s infinite 0.5s;
}

.heart-3 {
    animation: moveUp 2s infinite 1s;
}

@keyframes moveUp {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

.mark-one {
    position: absolute;
    top: 23%;
    right: 18%;
}

.mark-one .mark-parts {
    display: flex;
}

.mark-part-1 img {
    margin-right: 32px;
    margin-top: 106px;
}

.mark-part-4 img {
    margin-top: 36px;
}

.mark-part-7 img {
    margin-top: 63px;
}

.mark-part-3 {
    margin-top: 37px;
}

.mark-part-1 {
    animation: moveUp 4s infinite;
}

.mark-part-2 {
    animation: moveUp 4s infinite 0.5s;
}

.mark-part-3 {
    animation: moveUp 4s infinite 1s;
}

.mark-part-4 {
    animation: moveUp 4s infinite 1.5s;
}

.mark-part-6 {
    animation: moveUp 4s infinite 2s;
}

.mark-part-7 {
    animation: moveUp 4s infinite 2.5s;
}

.mark-part-8 {
    animation: moveUp 4s infinite 3s;
}

@keyframes moveUp {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-50px);
    }

    100% {
        transform: translateY(0);
    }
}


@keyframes bubbles {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translate(0, -20%);
    }

    100% {
        opacity: 0;
        transform: translate(0, -1000%);
    }
}

@keyframes hearts {
    0% {
        opacity: 0;
        transform: translate(0, 0%) rotate(45deg);
    }

    20% {
        opacity: 0.8;
        transform: translate(0, -20%) rotate(45deg);
    }

    100% {
        opacity: 0;
        transform: translate(0, -700%) rotate(45deg);
    }
}

@keyframes lines {

    0%,
    50%,
    100% {
        transform: translateY(0%);
    }

    25% {
        transform: translateY(100%);
    }

    75% {
        transform: translateY(-100%);
    }
}

@keyframes confetti {
    0% {
        opacity: 0;
        transform: translateY(0%) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    35% {
        transform: translateY(-800%) rotate(270deg);
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(2000%) rotate(1440deg);
    }
}

@keyframes fires {
    0% {
        transform: rotate(-70deg) translateY(0%);
    }

    25% {
        transform: rotate(-20deg) translateY(-5%);
        opacity: 1;
    }

    50% {
        transform: rotate(-70deg) translateY(-10%);
    }

    75% {
        transform: rotate(-20deg) translateY(-20%);
    }

    100% {
        transform: rotate(-70deg) translateY(-40%);
        opacity: 1;
    }
}

@keyframes sunbeams {
    0% {
        transform: translateY(40%) rotate(0deg);
    }

    50% {
        transform: translateY(-40%) rotate(180deg);
    }

    100% {
        transform: translateY(40%) rotate(360deg);
    }

    0%,
    14%,
    17%,
    43%,
    53%,
    71%,
    80%,
    94%,
    100% {
        opacity: 0;
    }

    6%,
    15%,
    24%,
    28%,
    48%,
    55%,
    78%,
    82%,
    99% {
        opacity: 1;
    }
}

/* #rocketButton {
    position: fixed;
    bottom: 36px;
    right: 32px;
    z-index: 9999;
    background-color: transparent;
    border: none;
    font-size: 15px;
    cursor: pointer;
    color: #fff;
     transition: all 0.4s ease;
    border: 1px solid #fff;
    border-radius: 22px;
    padding: 9px 22px;

} */

/* Hide the button initially */
/* #rocketButton {
    display: none;
} */

/* Animation for the rocket flying */
@keyframes rocketLaunch {
    0% {
        bottom: 20px;
    }

    100% {
        bottom: 100%;
    }
}

.contact_us {
    margin-top: 49px;
}

.is-invalid {
    border-color: red;
}

.is-valid {
    border-color: green;
}

.invalid-feedback {
    display: none;
}

.is-invalid~.invalid-feedback {
    display: block;
}

.input_field {
    width: 139%;
}

@media (max-width: 768px) {
    .input_field {
        width: 155%;
    }
}

@media (max-width: 768px) {
    .input_field1 {
        margin-top: 10px;
    }
}

.iti__country-list {
    display: inherit;
}


/* FAQ Section CSS Start */

/* .accordion {
    display: flex;
    flex-direction: column;
    font-family: "Sora", sans-serif;
    max-width: 991px;
    min-width: 320px;
    margin: 50px auto;
    padding: 0 50px;
    transition: all 0.5s ease-in-out;
}

.accordion h1 {
    font-size: 32px;
    text-align: center;
    color: #222;
    letter-spacing: 1px;
    margin-bottom: 20px;
    animation: fadeInDown 1s ease-out;
}

.accordion-item {
    margin-top: 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

.accordion-item:hover {
    transform: translateY(-4px);
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15);
} */

/* .accordion-item .accordion-item-title {
    position: relative;
    display: flex;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
    justify-content: flex-start;
    padding: 18px 24px;
    box-sizing: border-box;
    align-items: center;
    background-color: #f9f9f9;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.accordion-item .accordion-item-title:hover {
    background-color: #e0f7fa;
    color: #00796b;
}

.accordion-item .accordion-item-desc {
    display: none;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 300;
    color: #444;
    border-top: 1px dashed #ddd;
    padding: 15px 24px;
    box-sizing: border-box;
    opacity: 0;
    max-height: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.1s ease-in-out;
}

.accordion-item input[type="checkbox"] {
    position: absolute;
    height: 0;
    width: 0;
    opacity: 0;
}

.accordion-item input[type="checkbox"]:checked~.accordion-item-desc {
    display: block;
    opacity: 1;
    max-height: 500px;
    transform: scaleY(1);
}

.accordion-item input[type="checkbox"]:checked~.accordion-item-title .icon:after {
    content: "-";
    font-size: 22px;
    color: #00796b;
    transform: rotate(180deg);
    transition: transform 0.1s ease;
}

.accordion-item input[type="checkbox"]~.accordion-item-title .icon:after {
    content: "+";
    font-size: 22px;
    color: #555;
    transition: transform 0.4s ease;
}

.accordion-item .icon {
    margin-right: 14px;
    font-weight: bold;
}

.accordion-item:first-child {
    margin-top: 0;
}

.accordion-item .accordion-item-title .icon {
    transition: transform 0.4s ease-in-out;
}

.accordion-item input[type="checkbox"]:checked~.accordion-item-title .icon {
    transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
    .accordion {
        padding: 0 16px;
    }

    .accordion h1 {
        font-size: 24px;
    }

    .accordion-item .accordion-item-title {
        font-size: 14px;
    }

    .accordion-item .accordion-item-desc {
        font-size: 13px;
    }
}*/

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FAQ SECTION CSS END */

.footernav {
    display: flex;
    justify-content: end;
}

@media screen and (max-width: 767px) {
    .footertext {
        display: flex;
        justify-content: center;
    }
}

.footernav1 {
    font-weight: 500 !important;
}

.footernav1 a {
    color: #000;
}

.footernav1 a:hover {
    color: #0d6efd;
}

.section_class {
    overflow: hidden;
}

.heading_class1 {
    font-weight: 500;
    font-size: 20px;
}

.heading_class2 {
    font-size: 26px;
    font-weight: 600;
    color: #000;
}

.text-design {
    text-align: justify;
    hyphens: auto;
}

.tool_image {
    width: 83%;
}

/*--- blog ---*/
.section-blog {
    padding-bottom: 35px;
}

.blog-heading h2 {
    font-size: 62px;
    font-weight: 700;
    color: rgb(3, 3, 3);
    text-transform: uppercase;
    padding-top: 50px;
    padding-bottom: 62px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.blog-image img {
    /* width: 441px;
    height: 291px; */
    width: 100%;
    height: auto;
    border-radius: 50px;
    transition: transform 0.3s ease;
}

.blog-content h5 {
    color: black;
    line-height: 36px;
    text-transform: capitalize;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 13px;
    text-align: left;
    letter-spacing: normal;
    font-family: 'Poppins-Regular';
}

.blog-content h4 {
    display: flex;
    flex-wrap: nowrap;
    font-size: 25px;
    line-height: 33px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 20px;
    color: #000;
    text-decoration: none;
}

.blog-content a {
    text-decoration-line: none;
}

.blog-content p {
    font-size: 13px;
    line-height: 24px;
    font-weight: 400;
    color: #030303;
    margin-top: 18px;
    /* text-align: justify; */
    margin-top: 0;
    width: 63%;
    font-family: 'Poppins-Regular';
}

.blog-btn {
    background-color: transparent;
    border: 1px solid #fff;
    display: inline-block;
    padding: 12px 30px;
    color: #fff;
    font-weight: 700;
    width: auto;
    position: relative;
    z-index: 1;
}

a.blog-btn {
    padding: 8px 23px;
    border: 1px solid #000;
    color: #000;
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 30px !important;
    margin-bottom: 44px !important;
    text-decoration: none;
}

a.blog-btn:hover {
    color: #fff;
    background-color: #000;
    text-decoration: none;
}

.pagination-dots {
    margin-top: 20px;
}

.dot {
    height: 9px;
    width: 9px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
    cursor: pointer;
}

.dot.active {
    background-color: #878686;
}

.dot:hover {
    background-color: #444;
}

/* .blog-image:hover img {
    transform: scale(1.1);
    transition-duration: 2s;
} */

.blog-update {
    overflow: hidden;
    padding: 13px;
}

.blog-image {
    position: relative;
}

.blog-image h6 {
    font-size: 12px;
    display: inline;
    position: absolute;
    padding: 15px 18px;
    left: 0;
    bottom: 10px;
    line-height: 0;
    font-weight: 700;
    color: #fff;
    background-color: #13a5f5;
    margin-bottom: 0;
}

.blog-image h6 a {
    color: #fff;
}

.blog-content a h4:hover {
    color: #000;
}

.blog-image h6 a:hover {
    color: #fff;
    text-decoration: none;
}

.owl-dots {
    margin-top: 25px;
    text-align: center;
}

.owl-dot {
    height: 9px;
    width: 9px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
    cursor: pointer;
}

.owl-dot.active {
    background-color: #878686;
}

.owl-dot:hover {
    background-color: #444;
}

.owl-nav .owl-prev {
    height: 9px;
    width: 9px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
    cursor: pointer;
}

.blog-arrow-img {
    width: 37px;
    height: 37px;
    margin: 19px 21px;
}

.blog-content h1 {
    text-transform: uppercase;
    color: #0170d2;
    font-size: 205px;
    line-height: 82px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.blog-content h2 {
    text-transform: uppercase;
    font-size: 144px;
    font-family: 'Poppins-Regular';
    text-align: left;
    color: #000;
}

.innovate-blog {
    font-size: 92px !important;
    background-color: #fff;
    margin-top: 25px;
    margin-left: -75px;
}

.card-blog {
    border: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-bottom: 35px;
    background-image: url(../images/blog-detail-image.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
}

.card-blog:hover {
    transform: scale(1.15);
}

.blog-list-section {
    padding: 50px 0 50px 0;
}

.bz-content h4 {
    width: 45%;
    margin-top: 0;
    line-height: 27px;
    font-size: 28px;
}

.bz-content {
    padding: 42px;
}

.bz-h5 {
    font-size: 16px !important;
}

.blog-para p {
    width: 31%;
    font-size: 14px;
    color: #000;
    margin-bottom: 0;
}

.blogg {
    margin: 13px 21px;
}

.blog-para {
    margin-top: 0;
    margin-right: -30px;
    margin-bottom: 20px;
}

.blog-details {
    text-align: center;
}

.blog-details h1 {
    font-size: 86px;
    color: #000;
    line-height: 80px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.mobile {
    color: #0170d2;
}

.content-h4 {
    font-size: 22px !important;
}

.combined-- {
    flex-wrap: nowrap;
}

.think-text {
    margin-left: 183px;
    display: flex;
    flex-wrap: nowrap;
}

.read-text {
    display: flex;
    flex-wrap: nowrap;
}

.blog-content {
    margin-left: 20px;
}

.blog-description {
    padding-top: 20px;
}

.blog-description p {
    color: #000;
    text-align: justify;
    hyphens: auto;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 35px;
}

.blog-description h2 {
    color: #0A70F6;
    font-family: Poppins;
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: 46px;
    margin-bottom: 32px;
}

.blog-description h3 {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}

.blog-sec-text h6 {
    font-size: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.important-text {
    color: #000 !important;
    font-family: 'Poppins-SemiBold.ttf' !important;
}

.blog-one ul li {
    font-size: 18px;
    font-weight: 500;
    color: #6c6c6c;
    text-align: justify;
    hyphens: auto;
    line-height: 30px;
}

.blogsss h1 {
    font-size: 67px !important;
    line-height: 85px !important;
    color: #000;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;


}

.blog-digital h1 {
    font-size: 76px !important;
    line-height: 76px !important;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-align: center;
}

.erp-blog h1 {
    font-size: 64px !important;
    line-height: 68px !important;
    color: #000;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.user-- {
    margin-top: -74px !important;
}

.diff-- {
    margin-top: -35px !important;
}

.long-term {
    margin-top: -74px !important;
}

.svg-1 {
    width: 56% !important;
}

.svg-1 text {
    animation: stroke 5s infinite alternate;
    stroke-width: 2;
    stroke: #0170d2 !important;
    font-size: 66px !important;
    line-height: 85px !important;
    font-family: 'Poppins-Bold' !important;
}

.svg-mobile {
    width: 58% !important;
}

.svg-mobile text {
    animation: stroke 5s infinite alternate;
    stroke-width: 2;
    stroke: #0170d2 !important;
    font-size: 86px !important;
    /* line-height: 90px !important; */
    font-family: 'Poppins-Bold' !important;
}

.svg-digital {
    width: 87% !important;
}

.svg-digital text {
    animation: stroke 5s infinite alternate;
    stroke-width: 2;
    stroke: #0170d2 !important;
    font-size: 76px !important;
    line-height: 90px !important;
    font-family: 'Poppins-Bold' !important;
}

.svg-erp {
    width: 100% !important;
}

.svg-erp text {
    animation: stroke 5s infinite alternate;
    stroke-width: 2;
    stroke: #0170d2 !important;
    font-size: 64px !important;
    line-height: 80px !important;
    font-family: 'Poppins-Bold' !important;
}

@keyframes stroke {
    0% {
        fill: rgba(72, 138, 20, 0);
        stroke: #0170d2;
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 2;
    }

    70% {
        fill: rgba(72, 138, 20, 0);
        stroke: #0170d2;
    }

    80% {
        fill: rgba(72, 138, 20, 0);
        stroke: #0170d2;
        stroke-width: 3;
    }

    100% {
        fill: rgba(72, 138, 204, 1);
        stroke: rgba(54, 95, 160, 0);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 0;
    }
}

header {
    position: relative;
    z-index: 3;
}

.banner-background {
    background: url('../images/mobile-app-banner.png') no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cyber-sec-1 .blog-details {
    position: relative;
    z-index: 2;
}

.mobile-banner img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* .navbar-collapse {
    transition: none !important;
} */
.navbar-toggler {
    z-index: 1050 !important;
    border: none !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.nav-item .nav-link {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

#contactForm input:focus,
.form-group textarea:focus {
    box-shadow: none;
}

.footernav a {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0.08px;
    color: #fff;
}

.footernav a:hover {
    text-decoration: none;
    color: #0d6efd;
}

.footernav .separator {
    margin: 0 8px;
    color: #fff;
}

.separator-one {
    color: #333 !important;
}

.app-mobile {
    color: #0170d2 !important
}

.blog-details.blog-details-two {
    display: none;
}

.blogsss.blogs-two {
    display: none;
}

.card-title {
    color: #000;
}

.divider {
    display: none;
    height: 4px;
    background-color: #a5cbed;
    width: 100%;
    margin: 8px 0px 27px 0px;
    border-radius: 4px;
}

.divider::before {
    background-color: #3498db !important;
}

.post-title {
    color: #000000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    width: 88%;

}

.post-date {
    color: #6c757d;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;

}

.icon-link {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    align-items: center;
    display: flex;
    width: 38px;
    height: 35px;
    justify-content: center;
    border-radius: 50%;
    background-color: #F8F8F8;
    transform: rotate(404deg);
    transition: transform 1s ease, background-color 0.5s ease, color 0.5s ease;
    margin-top: -11px;
}

.icon-link:hover {
    transform: rotate(448deg);
    background-color: #3498db !important;
    color: #fff !important;
}

.post-select {
    font-size: 13px;
}

.post-select:focus {
    box-shadow: none;
    border: 1px solid #ccc !important;
}

.post-select:focus-visible {
    outline: 0 !important;
}

.divider::before {
    content: '';
    position: absolute;
    height: 4px;
    width: 150px;
    background-color: #000;
    left: 26px;
    border-radius: 4px;
}

.card-custom h6 {
    color: #0A70F6;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 13px;
}

.list-group-item:hover .icon-link {
    transform: rotate(448deg);
    background-color: #3498db !important;
    color: #fff !important;
}

.list-border {
    position: relative;
    padding: 16px 0px 2px 0px !important;
}

.list-border::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgb(179 175 175 / 50%), rgba(0, 0, 0, 0.1));
}

.post-img {
    height: 87px;
    width: 72px;
    border-radius: 5px;
}

/* .newsletter-section {
    padding: 50px 0;
    color: #000;
    text-align: center;
} */
.newsletter-box {
    max-width: 468px;
    margin-bottom: 20px;
    position: initial;
}

.newsletter-box input {
    max-width: 342px;
    padding: 8px 15px;
    border: 1px solid #ffffffb0;
    border-radius: 5px;
    background: transparent;
    color: #000;
    font-size: 14px;
    line-height: 26px;
}

.newsletter-box input::placeholder {
    color: #ffffffb0;
}

.newsletter-box button {
    position: absolute;
    left: 27%;
    transform: translateY(-125%);
    background: transparent;
    border: none;
    color: #000;
    font-size: 17px;
}

.cdkl h3 {
    font-size: 19px;
    /* font-family: 'Poppins', sans-serif;
    font-weight: 500;*/
    margin: 35px 0 10px 0;
    font-weight: 600;
    color: #fff;
}

.cdkl p {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.newsletter-box button:hover {
    color: #3498db;
}

.newsletter-box input:hover {
    color: #3498db;
}

.contactlink i {
    height: 42px;
    width: 42px;
    background: rgb(3, 3, 3);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin-right: 15px;
    font-size: 19px;
}

.contactlink i:hover {
    background-color: #3498db;
}

.table-content {
    border-radius: 10px;
    /* border: 1px solid #459CF3;
    background: rgba(255, 255, 255, 0.40); */
    padding: 22px;
}

.table-top {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 10px !important;
}

.blog-description.blog-y {
    overflow-y: auto;
    max-height: calc(100vh - 20px);
}

.blog-y p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    margin-bottom: 9px;
}

.table-cont-1 {
    align-self: flex-start;
    max-width: 320px;
}

/*
.table-content::-webkit-scrollbar {
    width: 8px;
    background-color: #ccccccd4;
    border-radius: 4px;
} */

.bg-o p {
    font-size: 17px;
}

.bgc-1 .bg-o p {
    margin-bottom: 6px !important;
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.bg-o p span {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.blog-o {
    border-bottom: 1px solid #000;
    margin-bottom: 35px;
}

.bgc-1 {
    margin-bottom: 35px;
}

.blog-faq.faq-title {
    font-size: 37px !important;
}

.body.faq-body {
    padding-top: 150px;
}

.faq-list-1.faq-list {
    margin: 1em auto;
    padding-top: 10px;
}

/* .bgc-1 {
    background-color: #fff;
    padding: 19px 39px;
    border-radius: 1rem;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
} */

.separator-one.two {
    margin-bottom: 15px;
}

.bg-o .bg-o-1 {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    margin-bottom: 15px;
}

.bg-o i {
    color: #000;
    font-size: 14px;
    margin-right: 6px;
}

.bg-o {
    margin-bottom: 15px;
}

.modal-content {
    border-radius: 10px;
    text-align: center;
    padding: 11px;
    border: none;
}

.modal-header {
    border-bottom: none;
}

.modal-title {
    font-size: 32px;
    font-weight: 700;
    color: #3498db;
}

.modal-body p {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    line-height: 27px;
}

.modal-body small {
    color: #252525d1;
    font-size: 14px;
    font-weight: 400;
}

.btn-csg {
    background-color: #3498db;
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    padding: 10px;
}

.btn-csg:hover {
    background-color: #289ae6;
    color: #fff;
}

.btn-csg-2 {
    background-color: white;
    color: #3498db;
    font-weight: 600;
    width: 100%;
    padding: 10px;
    border: 1px solid #3498db;
}

.btn-csg-2:hover {
    background-color: #3498db;
    border: 1px solid #fff;
    color: #fff;
}

.modal-body {
    padding: 10px;
}

.btn-close {
    padding: 13px !important;
    color: #000 !important;
    font-size: 18px;
}

.btn-close:focus:not(:focus-visible) {
    box-shadow: none !important;
}

.modal.fade {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.modal.fade.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.modal-backdrop.fade {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.modal-backdrop.fade.show {
    opacity: 0.5;
    pointer-events: auto;
}

.pagination {
    display: flex;
    justify-content: end;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pagination .page-link,
.pagination .page-item span,
.pagination .page-item a {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 6px;
    text-decoration: none;
    background-color: #fff;
    transition: 0.3s;
}

.pagination .page-item.active span {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination .page-item.disabled span,
.pagination .page-item.disabled a {
    color: #aaa;
    pointer-events: none;
    background-color: #f9f9f9;
}

.pagination .page-item a:hover {
    background-color: #e9f0ff;
    color: #007bff;
}

@media (min-width: 1600px) {
    .container {
        max-width: 1400px;
    }
}

/* home-section-1 */
.hero-section {
    height: calc(100vh - 101px);
}

.hero-title {
    color: #000;
    font-family: Poppins;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 50px;
    margin-bottom: 10px;
}

.hero-highlight {
    color: #0A70F6;
    font-family: Poppins;
    font-size: 98px;
    font-style: normal;
    font-weight: 600;
    line-height: 100px;
}

.hero-btn {
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 500;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.hero-btn:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary-custom {
    border-radius: 80px;
    border: 1px solid var(#1A70A6, #1A70A6);
    background: #fff;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
    color: #1a73e8;
}

.btn-outline-custom {
    border: 2px solid #1a73e8;
    color: #1a73e8;
    background: #fff;
}

.btn-outline-custom:hover {
    background: #1a73e8;
    color: #fff;
}

.hero-img {
    max-width: 100%;
}

.hero-btn.btn-primary-custom {
    border-radius: 80px;
    border: 1px solid #0a70f6;
    background: #fff;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.hero-btn.btn-primary-custom {
    display: flex;
    height: 59px;
    padding: 27px 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: #0a70f6;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.hero-btns {
    display: flex;
    gap: 14px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.bg-hero-home {
    /* position: relative; */
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* display: flex; */
    align-items: center;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}

.hero-section {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}


/*home-service-section*/
.services-section {
    position: relative;
}

.section-title {
    color: #0A70F6;
    font-family: Poppins;
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 60px;
    margin-bottom: 31px;
    /* margin-bottom: 12px; */
}

.section-subtitle {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 65px;
}



.service-card-inner {
    /* background: #fff; */
    border-radius: 36px;
    border: 1px solid transparent !important;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    min-height: 383px;
}

body.dark-mode .service-card-inner {
    background: #141414;
    border-radius: 36px;
    border: 1px solid transparent !important;
    background-image:
        linear-gradient(rgba(20, 20, 20, 1), rgba(20, 20, 20, 1)),
        linear-gradient(to bottom right, #459CF3, rgba(20, 20, 20, 1), #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    min-height: 420px;
}

/* body.dark-mode .service-card {
    border: 1px solid transparent !important;
    background-image:
        linear-gradient(#141414, #141414),
        linear-gradient(to bottom right, #459CF3, #141414, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
} */

/* .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(10, 112, 246, 0.15);
} */

.service-title {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
}

body.dark-mode .service-title {
    color: #fff;
}

.service-col {
    padding: 27px;
}

.service-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    border-radius: 36px;
    transition: transform 0.3s ease;
}

.service-card:hover {
    /* transform: translateY(-5px); */
    padding: 0 !important;
}

.service-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: #0A70F6;
    color: #fff;
    text-align: center;
    transition: bottom 0.4s ease;
}

.service-card:hover .service-overlay {
    height: 101vh;
}

.service-overlay p {
    padding: 41px 26px 10px 26px;
    font-size: 18px;
    text-align: center;
    padding-bottom: 0;
}

.exp-service-btn {
    border-radius: 32px;
    color: #fff;
}

.port-bg {
    border-radius: 14px;
    background: linear-gradient(0deg, rgb(10 112 246 / 30%) 0%, rgb(4 208 205 / 32%) 100%);
    margin-bottom: 30px;
}

section {
    padding: 60px 0;
    overflow: hidden;
}

.section-8 {
    border-radius: 35px 35px 0 0;
    background: linear-gradient(180deg, #004AAC 0%, #000 100%);
    padding-top: 60px;
}

.fas.fa-paper-plane.motion {
    color: #fff;
    font-size: 15px;
}

.copy-row {
    border-top: 1px solid #fff;
    padding: 40px 0;
    display: flex;
    align-items: center;
}

.logo-marquee img {
    height: 130px;
    width: auto;
    transition: filter 0.3s;
    padding: 17px;
    border-radius: 10px;
    margin-right: 0;
}

body.dark-mode .logo-marquee img {
    padding: 19px 40px;
    background-color: #ffffffba;
}

.logo-marquee img:hover {
    filter: grayscale(0%);
}

.swiper-slide {
    height: 100%;
}

.testimonial-card {
    /* padding: 34px 24px;
    position: relative;
    transition: 0.3s;
    border: 1px solid #FFF; */
    background: rgba(69, 156, 243, 0.20);
}

/* .testimonial-card:hover {
    transform: translateY(-5px);
} */

.testimonial-card .profile {
    display: flex;
    align-items: center;
}

.testimonial-card h5 {
    font-weight: 600;
    margin: 0;
}

.testimonial-card .test-img img {
    height: 75px;
    margin-bottom: 30px;
    padding: 0;
}

.testimonial-card p.position {
    font-size: 14px;
    color: #555;
    margin-bottom: 17px;
}

.testimonial-card .quote {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 48px;
    color: #00c2ff;
    opacity: 0.8;
}

.testimonial-card hr {
    margin: 26px 0;
    border: none;
    border-top: 1px solid #fff;
}

.testimonial-card p {
    font-size: 14px;
    color: #000;
}

.video-background {
    position: inherit;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-container {
    padding: 0 0 0 60px;
}

.testimonial-container .col-md-3 {
    padding: 2px;
}

.carousel-item-one {
    display: flex;
    margin-bottom: 10px;
}

.owl-dot.active,
.owl-dot:hover {
    background-color: #3498db !important;
}

.owl-dot {
    background-color: #8fcbf3 !important;
}

.custom-card {
    display: flex;
    align-items: center;
    border-radius: 23px;
    background: #EEF7FF;
    border-radius: 23px;
    padding: 15px;
    transition: all 0.3s ease;
}

/* .custom-blog.border-blue {
    border: 1px solid transparent !important;
    background-image:
        linear-gradient(#f5faff, #f5faff),
        linear-gradient(to right, #00000008, #0A84FF) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 23px !important;
} */

/* .custom-blog.border-green {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#f5faff, #f5faff), linear-gradient(to right, #00000012, #2EC4B6) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 23px !important;
} */
/*
body.dark-mode .custom-blog.border-green {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#000, #000), linear-gradient(to right, #00000012, #2EC4B6) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 23px !important;
} */

.read-btn-blog {
    color: #2EC4B6 !important;
}

/* .custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
} */

.custom-card img {
    width: 201px;
    height: 244px;
    border-radius: 12px;
    margin-right: 20px;
    background: #ccc;
    object-fit: cover;
}

.card-content p {
    color: #000;
    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
}

.card-content h5 {
    color: #000;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 23px;
}

/* .card-content p {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
} */

.read-more-green {
    color: #00c4cc;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.36px;
}

.read-more:hover {
    text-decoration: underline;
}

.custom-blog {
    margin-right: 25px;
    margin-bottom: 18px;
}

.card-content .blue {
    color: #000;
    font-family: Poppins;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    margin-bottom: 22px;
}

.read-more {
    color: #0A70F6;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.36px;
}

.read-more.green {
    color: #04D0CD;
}

/* css for dark mode screen */
body.dark-mode .nav-link,
body.dark-mode .service-link,
body.dark-mode .hero-title {
    color: #fff;
}

.logo-header .logo-black {
    display: block;
}

.logo-header .logo-white {
    display: none;
}

body.dark-mode .logo-header .logo-black {
    display: none;
}

body.dark-mode .logo-header .logo-white {
    display: block;
}

body.dark-mode .service-card {
    background-color: #141414;
}

body.dark-mode .hero-highlight {
    background: linear-gradient(90deg, #126EEE 0%, #0DD2FC 30%, #02E1E1 70%, #1B79EE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.dark-mode .port-bg,
body.dark-mode .port-bg-2 {
    background: rgba(30, 30, 32, 0.60);
}

.body.dark-mode .testimonial-card {
    border: 1px solid #FFF;
    background: rgba(69, 156, 243, 0.20);
    backdrop-filter: blur(15px);
}

/* body.dark-mode .testimonial-card .profile {
    background-color: #fff;
} */

body.dark-mode .testimonial-card p.position,
body.dark-mode .testimonial-card p,
body.dark-mode .section-subtitle,
body.dark-mode .card-content h5,
body.dark-mode .card-content p,
body.dark-mode .about-banner h3,
body.dark-mode .about-content-two p,
body.dark-mode .counter-text h4,
body.dark-mode .counter-text p,
body.dark-mode .expert-content h4,
body.dark-mode .expert-content p {
    color: #fff;
}


body.dark-mode .section-8 {
    border-radius: 35px 35px 0 0;
    background: linear-gradient(180deg, rgba(10, 132, 255, 0.20) 0%, rgba(22, 94, 87, 0.20) 100%);
}

body.dark-mode .custom-card {
    background: #000;
}

/* body.dark-mode .custom-blog.border-blue {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#000, #000), linear-gradient(to right, #00000012, #0A84FF) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 23px !important;
} */

body.dark-mode .section-map .map-text .map-heading,
body.dark-mode .section-map .map-text h2 {
    color: #fff;
    border-bottom: 4px solid #fff;
}

body.dark-mode #counter,
body.dark-mode .over {
    color: #fff;
}

/* body.dark-mode .theme-toggle {
    border: 1px solid #fff !important;
} */

.map-video {
    display: flex;
    justify-content: center;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.sticky-header-container {
    justify-content: center;
    /* transition: background-color 3s ease,
        padding 3s ease,
        box-shadow 3s ease,
        transform 3s ease,
        backdrop-filter 3s ease; */
}

body.dark-mode .sticky-header.scrolled .sticky-header-container {
    position: relative;
    top: 8px;
    left: 0;
    border-radius: 14px;
    padding: 0;
    justify-content: center;
}

body.dark-mode .sticky-header.scrolled .sticky-header-container .nav-link,
body.dark-mode .sticky-header.scrolled .sticky-header-container .service-link {
    color: #000;
}

body.dark-mode .sticky-header.scrolled .sticky-header-container .header-below-div {
    background: #ffffffcf;
    backdrop-filter: blur(139px);
    border-radius: 14px !important;
    /* box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.00) inset, -1px -1px 2px 0 rgba(0, 0, 0, 0.10) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.00) inset; */
    height: 65px;
}

body.dark-mode .sticky-header.scrolled .sticky-header-container .plus-symbol::after {
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
}

body.light-mode .sticky-header.scrolled .sticky-header-container {
    position: relative;
    top: 8px;
    left: 0;
    border-radius: 14px;
    padding: 0;
    width: 900px;
    background: linear-gradient(180deg, rgba(10, 112, 246, 0.04) 0%, rgba(4, 208, 205, 0.04) 100%);
    backdrop-filter: blur(5px);
    border-radius: 14px !important;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.00) inset, -1px -1px 2px 0 rgba(0, 0, 0, 0.10) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.00) inset;
    height: 65px;
    justify-content: center;
    background-color: #fff;
    border: 1px solid transparent !important;
    /* background-image: linear-gradient(#fff, #fff), linear-gradient(to right, rgb(10 112 246 / 33%), rgb(4 208 205 / 41%)) !important; */
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.00) inset, -1px -1px 2px 0 rgba(0, 0, 0, 0.10) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.00) inset;
}

.sticky-header.scrolled .sticky-header-container .plus-symbol::after {
    width: 7px;
    height: 7px;
    top: 3px;
}

.sticky-header.scrolled .sticky-header-container .navbar-brand img {
    height: 43px;
}

.sticky-header.scrolled .sticky-header-container .nav-item .nav-link {
    font-size: 13px;
    margin-top: 15px;
}

.sticky-header.scrolled .sticky-header-container .toggle-switch {
    width: 38px;
    height: 21px;
    margin-left: 18px;
    margin-bottom: 10px;
    margin-right: 14px;
}

.sticky-header.scrolled .sticky-header-container .service-link {
    font-size: 13px;
}

.sticky-header.scrolled .sticky-header-container .service-link {
    top: 21px;
}

.sticky-header.scrolled .sticky-header-container .slider::before {
    height: 22px;
    width: 22px;
    left: 23px;
    bottom: -1px;
}

.sticky-header.scrolled .sticky-header-container .navbar-nav li a {
    margin-left: 4px;
}

.sticky-header.scrolled .sticky-header-container .navbar-brand {
    margin-bottom: 12px;
}

/* .service-card {
    perspective: 1000px;
    position: relative;
    width: 100%;
    height: 100%;
} */

.service-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1s ease-in-out;
    transform-style: preserve-3d;
}

.service-card:hover .service-card-inner {
    transform: rotateY(180deg);
}

.service-card-front,
.service-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 36px;
    backface-visibility: hidden;
    top: 0;
    left: 0;
}

/* .service-card-front {
    background: #fff;
    z-index: 2;
} */

.service-card-back {
    background: #0a70f6;
    color: #fff;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 23px;
}

.service-card-back p {
    font-size: 18px;
    text-align: justify;
    hyphens: auto;
}

/*
body.light-mode .video-background video {
    border-right: 1px solid #fff;
} */

.port-bg img {
    width: 100%;
    padding: 11px;
}

.port-bg-2 img {
    width: 100%;
}

.port-bg,
.port-bg-2 {
    position: relative;
    overflow: hidden;
}

.port-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a70f6;
    color: #fff;
    padding: 0 16px;
    text-align: center;
    transform: translateY(100%);
    transition: transform 1s ease;
}

body.dark-mode .port-content {
    background: #0a70f6;
}

.port-bg:hover .port-content,
.port-bg-2:hover .port-content {
    transform: translateY(0);
    border-radius: 12px;
}

.port-content p,
.port-content h3 {
    color: #fff;
}

.port-content p {
    font-size: 16px;
    text-align: justify;
    hyphens: auto;
}

.port-content h3 {
    font-size: 23px;
    font-weight: 600;
    margin-top: 20px;
}

body.dark-mode .service-card-front {
    background: #141414;
}

body.dark-mode .service-title {
    color: #fff;
}

.social-icons {
    display: flex;
    justify-content: start;
    gap: 23px;
    padding: 14px 0 45px 0;
}

.social-icons img {
    height: 42px;
}

.social-icons a {
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.social-icons a:hover {
    transform: scale(1.1);
}

.plus-symbol {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    position: relative;
    line-height: -122px !important;
    bottom: 4px;
}

.plus-symbol::after {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(-45deg);
    position: absolute;
    top: 2px;
    left: 0;
}

.drop-box a svg {
    display: none;
}

body.dark-mode .plus-symbol::after {
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.make-difference h3 {
    font-size: 60px;
    line-height: 60px;
    font-weight: 600;
    margin-bottom: 40px;
    font-family: Poppins;
    text-align: left;
    width: 100%;
    display: inline-block;
}

.make-difference h3 .black-text {
    color: #000;
}

.make-difference h3 .blue-text {
    color: #0a70f6;
}

.make-difference p {
    font-size: 16px;
    line-height: 24px;
    font-family: Poppins;
    color: #000;
    margin-bottom: 26px;
    text-align: justify;
}

/* .make-diff-container {
    position: relative;
} */

.bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    z-index: 1;
    border-radius: 50px;
}

.make-difference {
    /* position: relative;
    z-index: 2; */
    color: #000;
    text-align: center;
    /* padding: 70px 70px;
    box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.25) inset, 0px 4px 4px rgba(0, 0, 0, 0.25) inset;
    border-radius: 50px; */
}

body.dark-mode .make-difference p,
body.dark-mode .make-difference h3 .black-text {
    color: #fff;
}

.dark-img {
    display: none;
}

body.dark-mode .light-img {
    display: none;
}

body.dark-mode .dark-img {
    display: block;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 169px;
    height: 60px;
    border-radius: 30px;
    padding: 0 3px;
    border: 0 !important;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

.day {
    background: #f6f6f6;
    color: #000;
    font-size: 15px;
    font-weight: 500;
}

.night {
    background: #000;
    color: #fff;
}

.theme-toggle i {
    font-size: 27px;
    line-height: 52px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    height: 53px;
    width: 53px;
    box-shadow: 0px 8px 20px rgb(0 0 0 / 2%);
}

.theme-toggle span {
    margin-left: 12px;
    font-size: 14px;
    margin-right: 11px;
}

.theme-toggle.night i {
    color: #000;
}

.accordion-item {
    border: none;
    margin-bottom: 19px;
    border-radius: 12px;
    overflow: hidden;
    background-color: transparent;
}

.accordion-button {
    display: flex;
    align-items: center;
    background: #fff;
    border: none;
    box-shadow: none !important;
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 20px;
    font-weight: 600;
    font-family: Poppins;
    color: #000;
    text-align: left;
    padding: 0;
    border-radius: 12px;
    background-color: transparent;
}

.accordion-button::before {
    content: attr(data-number);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #dfdfdf, rgba(223, 223, 223, 0));
    border: 1px solid #dfdfdf;
    box-sizing: border-box;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    color: #000;
    font-family: Poppins;
}

.accordion-button:not(.collapsed) {
    background: none !important;
    color: #0a84ff;
    box-shadow: none !important;
    padding: 0 !important;
}

.accordion-button:not(.collapsed)::before {
    background: linear-gradient(180deg, #0a70f6, rgba(10, 112, 246, 0));
    color: #fff;
    border: none;
}



.accordion-button::after {
    content: '\002B';
    font-size: 37px;
    font-weight: 400;
    color: #000;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    content: '\00D7';
    transform: rotate(180deg);
    color: #0a84ff;
    font-size: 37px;
    background: none !important;
    border: none !important;
}

.accordion-body {
    font-size: 16px;
    line-height: 24px;
    font-family: Poppins;
    padding-left: 87px;
    color: rgba(0, 0, 0, 0.8);
    text-align: left;
}

.accordion-header {
    border-radius: 0;
    background-color: #fff;
    /* border: 0.2px solid #0a84ff; */
    box-sizing: border-box;
    align-items: center;
    padding: 20px 50px;
    margin-bottom: 10px;
    gap: 30px;
}

.accordion-item {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to top, #0a84ffc9, #0a84ff3d) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 12px !important;
}

.accordion-button::after {
    background-image: none;
}

.accordion-header:not(.collapsed)::before {
    background: linear-gradient(92.62deg, rgba(10, 112, 246, 0.4), rgba(255, 255, 255, 0) 50%, rgba(10, 112, 246, 0.4)) !important;
    border-bottom: 0.5px solid #04d0cd;
}

.testimonial-card p {
    margin-bottom: 0;
}

.accordion-header {
    margin: 0;
}

.marquee-inner.logo-marquee {
    gap: 2vw;
    padding: 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 57px;
    height: 28px;
    /* box-shadow: -0.8px -0.8px 0.85px rgba(0, 0, 0, 0.25),
        0.8px 0.8px 0.85px rgba(0, 0, 0, 0.25); */
    border-radius: 24px;
    background-color: #0a70f6;
    margin-left: 20px;
    box-sizing: border-box;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0a70f6;
    border-radius: 50px;
    transition: 0.4s;
}

.slider::before {
    position: absolute;
    content: "\f1d1";
    font-family: "bootstrap-icons";
    height: 28px;
    width: 28px;
    left: 31px;
    bottom: 0px;
    background-color: white;
    color: #0a70f6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.4s;
    font-size: 15px;
    box-shadow: -0.8px -0.8px 0.85px rgba(0, 0, 0, 0.25);
}

input:checked+.slider {
    background-color: #0a70f6;
}

input:checked+.slider::before {
    transform: translateX(-31px);
    content: "\F495";
}

body.dark-mode :checked+.slider {
    background-color: #fff;
}

body.dark-mode .slider::before {
    background-color: #0a70f6;
    color: #fff;
}

.ask-quote h2 {
    font-size: 60px;
    letter-spacing: 0.04em;
    line-height: 80px;
    font-weight: 600;
    font-family: Poppins;
    color: #0a70f6;
    text-align: center;
}

.ask-quote-bg {
    position: relative;
}

.ask-container {
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    text-align: center;
    width: 100%;
}

.banner-img {
    width: 100%;
}

.banner-img.dark {
    display: none;
}

body.dark-mode .banner-img.light {
    display: none;
}

body.dark-mode .banner-img.dark {
    display: block;
}

.accordion-button:not(.collapsed)::after,
.accordion-header {
    background: linear-gradient(92.62deg, rgba(10, 112, 246, 0.4), rgba(255, 255, 255, 0) 50%, rgba(10, 112, 246, 0.4));
    /* border-bottom: 0.5px solid #04d0cd; */
}

.accordion-button:not(.collapsed)::after,
.accordion-item {
    border-radius: none !important;
}

.accordion-header:has(.accordion-button.collapsed) {
    background: none;
    /* border-bottom: 0.2px solid #0a84ff; */
}

body.dark-mode .accordion-header:has(.accordion-button.collapsed),
body.dark-mode .accordion-button,
body.dark-mode .accordion-item {
    background: #141414;
}

body.dark-mode .accordion-button::before {
    background: linear-gradient(180deg, #242424, rgba(36, 36, 36, 0));
    border: 1px solid #2e2e2e;
    color: #fff;
}

body.dark-mode .accordion-button,
body.dark-mode .accordion-button::after,
body.dark-mode .software-two p,
body.dark-mode .app-sec-text-4 .accomplish,
body.dark-mode .app-para p,
body.dark-mode .requirements-div h4,
body.dark-mode .requirements-div p,
body.dark-mode .method-card h3,
body.dark-mode .method-card p,
body.dark-mode .team-description p {
    color: #fff;
}

body.dark-mode .accordion-body {
    color: rgba(255, 255, 255, 0.8);
}

.glass-bg {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.software-two h2 {
    font-size: 60px;
    line-height: 60px;
    font-weight: 600;
    font-family: Poppins;
    color: #0a70f6;
    text-align: left;
    margin-bottom: 29px;
}

.software-two p {
    font-size: 16px;
    line-height: 24px;
    font-family: Poppins;
    color: #000;
    text-align: justify;
}

/* .software-two .image-box {
    background: #c4c4c4;
    width: 100%;
    height: 299px;
    border-radius: 15px;
} */

.requirements-div {
    border-radius: 10px;
    background-color: rgba(10, 112, 246, 0.25);
    height: 100%;
    padding: 25px 21px !important;
}

.requirements-div h4 {
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 20px;
    font-weight: 600;
    font-family: Poppins;
    color: #000;
    text-align: left;
    margin-bottom: 20px;
}

.requirements-div p {
    font-size: 14px;
    line-height: 18px;
    font-family: Poppins;
    color: rgba(0, 0, 0, 0.8);
    text-align: left;
}

.requirements-div.shade-green {
    background-color: rgba(4, 208, 205, 0.25);
}

.method-card {
    border-radius: 20px;
    padding: 20px;
    display: block;
    background: #fff;
    position: relative;
}

.method-card.two::before {
    content: "02";
    position: absolute;
    top: -1px;
    left: -2px;
    font-size: 34px;
    line-height: 34px;
    font-weight: 600;
    font-family: Poppins;
    color: #000;
    text-align: left;
    background: #fff;
    padding: 6px 12px;
    border-radius: 20px 0 20px 0;
    border: 1px solid #0A84FF;
    border-left: none;
    border-top: none;
}

.method-card.three::before {
    content: "03";
    position: absolute;
    top: -1px;
    left: -2px;
    font-size: 34px;
    line-height: 34px;
    font-weight: 600;
    font-family: Poppins;
    color: #000;
    text-align: left;
    background: #fff;
    padding: 6px 12px;
    border-radius: 20px 0 20px 0;
    border: 1px solid #0A84FF;
    border-left: none;
    border-top: none;
}

.method-card.four::before {
    content: "04";
    position: absolute;
    top: -1px;
    left: -2px;
    font-size: 34px;
    line-height: 34px;
    font-weight: 600;
    font-family: Poppins;
    color: #000;
    text-align: left;
    background: #fff;
    padding: 6px 12px;
    border-radius: 20px 0 20px 0;
    border: 1px solid #0A84FF;
    border-left: none;
    border-top: none;
}

.method-card.five::before {
    content: "05";
    position: absolute;
    top: -1px;
    left: -2px;
    font-size: 34px;
    line-height: 34px;
    font-weight: 600;
    font-family: Poppins;
    color: #000;
    text-align: left;
    background: #fff;
    padding: 6px 12px;
    border-radius: 20px 0 20px 0;
    border: 1px solid #0A84FF;
    border-left: none;
    border-top: none;
}

.method-card.six::before {
    content: "06";
    position: absolute;
    top: -1px;
    left: -2px;
    font-size: 34px;
    line-height: 34px;
    font-weight: 600;
    font-family: Poppins;
    color: #000;
    text-align: left;
    background: #fff;
    padding: 6px 12px;
    border-radius: 20px 0 20px 0;
    border: 1px solid #0A84FF;
    border-left: none;
    border-top: none;
}

.method-card h3 {
    font-size: 34px;
    line-height: 42px;
    font-weight: 600;
    font-family: Poppins;
    color: #000;
    text-align: left;
}

.method-card p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
    font-family: Poppins;
    color: #000;
    text-align: left;
}

.method-card.more {
    height: auto;
    margin: 0;
    background: linear-gradient(134.4deg, rgba(69, 156, 243, 0.1), rgba(255, 255, 255, 0) 50%, rgba(69, 156, 243, 0.1));
    /* border: 0.5px solid #0a70f6;
    border-radius: 10px; */
}

body.dark-mode .method-card.one::before,
body.dark-mode .method-card.two::before,
body.dark-mode .method-card.three::before,
body.dark-mode .method-card.four::before,
body.dark-mode .method-card.five::before,
body.dark-mode .method-card.six::before {
    background: #000;
    color: #fff;
}

body.dark-mode .focus--mask {
    background: none;
}

.about-banner h3 {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
}

.about-banner h1 {
    text-align: center;
    font-family: Poppins;
    font-size: 96px;
    font-style: normal;
    font-weight: 600;
    line-height: 121px;
    background: linear-gradient(90deg, #126EEE 0%, #0DD2FC 30%, #02E1E1 70%, #1B79EE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.about-content-two {
    color: #000;
    text-align: justify;
    hyphens: auto;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.counter-div {
    display: flex;
    gap: 20px;
    border-radius: 20px;
    /* align-items: center; */
    padding: 23px;
    background-color: transparent;
    box-shadow: 1px 6px 8.8px 0 rgba(255, 255, 255, 0.12) inset;
}

body.dark-mode .counter-div {
    background-color: #3c3d3d;
}

.counter-text h4 {
    color: #000;
    font-family: Poppins;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
}

.counter-text p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
}

.banner-img img {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
}

.content-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding-top: 45px;
}

.navbar.navbar-expand-lg {
    position: fixed;
    width: 100%;
}

.about-content-two p {
    margin-bottom: 1.6rem;
}

.counter-icon img {
    border-radius: 6.667px;
    border: 0.694px solid var(--Colors-Neutral-300, #F1F2F9);
    background: var(--Colors-Primary-Purple-200, #EDECFF);
    box-shadow: 0 1.25px 1.667px 0 rgba(255, 255, 255, 0.40) inset, 0 -2.5px 4.167px 0 rgba(103, 96, 181, 0.20) inset;
}

.card-box {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    height: 100%;
    position: relative;
}

.expert-box {
    padding: 27px 40px 26px 50px;
    background-color: #fff;
}

body.dark-mode .expert-box {
    background-color: #000;
}

.expert-icon {
    margin-bottom: 50px;
}

/* .expert-icon img {
    background-color: #000;
    height: 84px;
    padding: 18px;
} */

.expert-content h4 {
    color: #000;
    font-family: Poppins;
    font-size: 34px;
    font-style: normal;
    font-weight: 500;
    line-height: 34px;
    margin-bottom: 20px;
}

.expert-content p {
    color: #000;
    text-align: justify;
    hyphens: auto;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.border-right {
    border-right: 1px solid #459cf39e !important
}

.border-bottom {
    border-bottom: 1px solid #459cf39e !important
}

.section-subtitle.choose-us {
    text-align: justify;
    hyphens: auto;
}

.requirements-div.about {
    height: 100%;
    width: 100%;
    justify-content: center;
    padding: 31px 30px;
    max-width: 270px;
    clip-path: polygon(-9% 0, 269% 0, 117% 100%, 0% 97%);
}

.requirements-div.about.shade-green {
    position: relative;
    top: 99px;
    z-index: 9999;

}

.requirements-div.about h4 {
    color: #000;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.requirements-div.about p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    width: 100%;
    margin-bottom: 0;
}



@media (max-width: 991px) {
    .border-right {
        border-right: none;
    }

    .border-bottom {
        border-bottom: none;
    }
}

.section-why-choose-us {
    overflow: visible;
    /* padding-bottom: 88px !important; */
}

.method-card {
    position: relative;
    background: url("/images/icons/light-methodology-cards.png");
    background-repeat: round;
    background-size: cover;
    display: flex;
    width: auto;
    height: 100%;
}

body.dark-mode .method-card.one {
    position: relative;
    background: url("/images/icons/dark-methodology-card.png");
    background-repeat: round;
    background-size: cover;
    display: flex;
    width: auto;
    height: 100%;
}

body.dark-mode .step-number.two {
    color: #fff;
}

body.dark-mode .meth-cards {
    background: rgba(255, 255, 255, 0.20) !important;
    border: 1px solid transparent !important;
    background-image: linear-gradient(#333333, #333333), linear-gradient(to bottom right, #459cf387, #ffffff8a, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
}

body.dark-mode .method-card {
    background: none;
}

body.dark-mode .method-card.more {
    background: none;
}

.step-number {
    position: absolute;
    top: -11px;
    left: 2px;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
}

.step-number.two {
    position: absolute;
    top: 4px;
    left: 17px;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
    color: #000;
}

.card-overlay {
    margin-top: 44px;
}

.marquee-inner.logo-marquee img:hover {
    transform: none;
}

.footerlink li img {
    margin-right: 6px;
}

.vision-icon {
    font-size: 45px;
    color: #00e5ff;
    margin-bottom: 20px;
}

.vision-title {
    color: #000;
    font-family: Poppins;
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 60px;
}

.vision-title span {
    color: #02E1E1;
    font-family: Poppins;
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 60px;
}

.vision-text {
    color: #000;
    text-align: justify;
    hyphens: auto;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-top: 23px;
    margin-bottom: 0;
}

.our-values {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.app-sec-text-4 h2 {
    text-align: left;
    line-height: 67px;
}

/* wp */
.whatsapp-icon {
    position: fixed;
    bottom: -10px;
    left: -8px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    z-index: 9999;
}

.whatsapp-icon img {
    position: inherit;
    margin-top: -132px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulse 2s infinite; */
}

.whatsapp-icon:hover img {
    transform: scale(1.1);
    /* box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); */
}

.wwwa__pulse {
    position: absolute;
    width: 50px;
    top: -78px;
    height: 51px;
    border: 10px solid #6ebd403d;
    border-radius: 50%;
    animation: wwwax--pulse 1.5s infinite;
}

.wwwa__cta__text {
    z-index: 9999;
    max-width: 142px;
    height: 38px;
    padding: 0px 15px;
    background-color: #fff;
    color: #333;
    border-radius: 6px;
    font-size: 14px;
    position: relative;
    top: -102px;
    right: -110px;
    text-align: center;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes wwwax--pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

.mission-span {
    color: #0e72f7 !important;
}

.tool-gradient.gitlab {
    background: linear-gradient(0deg, #FFC02F 10.15%, #FFC133 30.4%, #FFC53F 52.15%, #FFCB54 73.15%, #FFD063 85.15%);
    width: 212px;
    height: 212px;
    border-radius: 20px;
    transform: rotate(45deg);
}

.tool-gradient.docker {
    background-color: #1D63ED;
    width: 212px;
    height: 212px;
    border-radius: 20px;
    transform: rotate(45deg);
}

.tool-gradient.vscode {
    background-color: #fff;
    width: 212px;
    height: 212px;
    border-radius: 20px;
    transform: rotate(45deg);
}

.tool-gradient.ij {
    background: linear-gradient(134deg, #D83571 19.28%, #0A7CF8 79.78%);
    width: 212px;
    height: 212px;
    border-radius: 20px;
    transform: rotate(45deg);
}

.tool-gradient.op {
    background-color: #FF6C37;
    width: 212px;
    height: 212px;
    border-radius: 20px;
    transform: rotate(45deg);
}

.tool-gradient img {
    width: 138px;
    height: 138px;
}

.kit {
    transform: rotate(-47deg);
    padding: 22px;
}

.toolkits-section .class-main:nth-of-type(even)>* {
    position: absolute;
    top: 40px;
}

.toolkits-section .class-main:nth-of-type(odd)>* {
    position: relative;
    top: 230px;
}

.tookits-- {
    margin-bottom: 230px;
    overflow: visible;
}

.tags-all h3 {
    color: #000;
    font-family: Poppins;
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.tags-all p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.tags-all {
    position: relative;
    padding: 85px 43px;
    margin-right: 20px;
}

.tags-all.blue {
    background: url("/images/services/tech-bg-blue.png");
    background-size: cover;
    background-repeat: round;
}

.tags-all.green {
    background: url("/images/services/tech-bg-green.png");
    background-size: cover;
    background-repeat: round;
}

.tag-title {
    color: #0A70F6;
    text-align: left;
    font-family: Poppins;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    margin-bottom: 30px;
}

.tags-main {
    display: flex;
    flex-wrap: wrap;
}

.tags-main span {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.25) inset, 0 2px 4px 0 rgba(0, 0, 0, 0.25) inset;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-align: left;
    line-height: 24px;
    margin-right: 10px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.tags-main span:hover {
    background-color: #0A70F6;
}

.tags-main span:hover a {
    color: #fff;
}

body.dark-mode .tags-main span {
    background-color: #333333;
    color: #fff;
}

/* .tag-gap {
    display: flex;
    gap: 18px;
} */

.tag:hover {
    background-color: #176BEB;
    color: #fff;
}

.section-wrapper {
    margin-bottom: 46px;
}

@media (max-width: 768px) {
    .tag {
        font-size: 13px;
        padding: 7px 16px;
    }
}

body.dark-mode .tag {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.25) inset, 0 2px 4px 0 rgba(0, 0, 0, 0.25) inset;
}

body.dark-mode .company-title h4,
body.dark-mode .company--- p {
    color: #fff;
}

body.dark-mode .company-card {
    border-top: 1px solid rgba(255, 255, 255, 0.40);
}

.company-card {
    color: #000;
    border-top: 1px solid rgba(0, 0, 0, 0.40);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.3s ease;
}

.company-title h4 {
    color: #000;
    font-family: Poppins;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
}

.company--- {
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.company--- p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
}

/* .img-grid img {
    width: 100%;
    height: 300px;
    border-radius: 0 0 10px 10px;
} */
.img-grid {
    overflow: hidden;
    height: 300px;
    position: relative;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 45px;
}

.img-grid img {
    width: 100%;
    transition: transform 6s linear;
    transform: translateY(0);
}

.company-card:hover .img-grid img {
    transform: translateY(-84%);
}

.company-card {
    position: relative;
    border-top: 1px solid #b5b4b4;
}

.company-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #126EEE 0%, #0DD2FC 30%, #02E1E1 70%, #1B79EE 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.company-card:hover::before {
    opacity: 1;
}

.company-card:hover .company-title h4 {
    color: #0a70f6;
}

.company-title {
    display: flex;
    justify-content: space-between;
}

.company-title img {
    height: 26px;
}

.footerlink li svg {
    display: none;
}

.plus-symbol.white::after {
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}














.infographic {
    position: relative;
}

.circle-border {
    border: 25px solid #109bf46b;
    border-radius: 50%;
}

.center-circle {
    background: #fff;
    border-radius: 50%;
    width: 250px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin: auto; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.info-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.info-box:hover {
    transform: translateY(-5px);
}

.info-icon {
    font-size: 30px;
    color: #007bff;
    margin-bottom: 10px;
}

.info-number {
    position: absolute;
    top: 15px;
    right: 20px;
    font-weight: bold;
    color: #e5e5e5;
    font-size: 2rem;
}

.center-circle h4 {
    font-size: 28px;
    line-height: 28px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Poppins';
    color: #000;
    letter-spacing: 2px;
}

.center-circle p {
    margin-bottom: 0;
    text-transform: uppercase;
    color: #000;
}

.exp-btn {
    display: flex;
    align-items: center;
    justify-content: end;
}

.explore--- {
    margin-top: 40px;
}

/* .how-we {
    padding: 0;
} */

.services-it {
    row-gap: 24px;
}

.border-line-bottom {
    border-bottom: 2px solid #000;
    width: 100%;
    align-self: center;
    margin-top: 20px;
}

body.dark-mode .border-line-bottom {
    border-bottom: 2px solid #fff;
}

.company-policies {
    padding-top: 100px;
    font-size: 60px;
    font-weight: 600;
    line-height: 60px;
    color: #000;
    text-align: center;
    color: #0A70F6;
}

.csg-tech a {
    font-weight: 600;
    color: #0a70f6;
}

.text-design span {
    font-weight: 500;
    color: #000;
}

.int {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 11px;
    color: #000;
}

.noted {
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    /* border: 1px solid #0a70f6; */
    padding: 10px;
    border-radius: 11px;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

.conditions {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 10px !important;
    margin-top: 33px;
}

body.dark-mode .conditions {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#000, #000), linear-gradient(to bottom right, #459CF3, #0000000c, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 10px !important;
    margin-top: 33px;
}

.noted i {
    font-size: 16px;
}

.csg-tech hr {
    margin: 35px 0;
    color: #0a70f5;
}

.csg-tech ul {
    padding: 0;
    padding-left: 20px;
}

body.dark-mode .text-design span,
body.dark-mode .noted,
body.dark-mode .csg-tech hr,
body.dark-mode .job-card h4,
body.dark-mode .badge,
body.dark-mode .job-card h5,
body.dark-mode .job-card ul li {
    color: #fff;
}

.job-card {
    padding: 32px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.job-icon {
    border-radius: 10px;
    border: 1px solid var(--Dark-20, #333);
    background: var(--Dark-12, #1F1F1F);
    display: flex;
    padding: 20px;
    align-items: flex-start;
    gap: 10px;
}

.job-card h4 {
    color: var(--Black, #000);
    font-family: Poppins;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
}

.badge {
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 45px;
    background: rgba(0, 0, 0, 0.10);
    color: var(--Black, #000);
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.job-card h5 {
    color: #000;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.job-card ul li {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.job-card-button {
    display: flex;
    padding: 14px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 40px;
    background-color: #0A70F6;
    color: var(--White, #FFF);
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.job-card-button:hover {
    background-color: transparent;
    color: #0A70F6;
    border: 1px solid #0A70F6;
}

body.dark-mode .job-card {
    background-color: #141414;
}

body.dark-mode .badge {
    background: var(--Dark-12, #1F1F1F);
}

body.dark-mode .job-card-button:hover {
    color: #fff;
    border: 1px solid #fff;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #0d6efd;
    text-shadow: 0 4px 4px rgb(0 0 0 / 9%);
}

.space-contact {
    padding-top: 33px;
}

.space-contact form {
    padding: 50px 50px 50px 23px;
}

.contact-info {
    padding-top: 38px;
}

.contact-card p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    max-width: 435px;
}

.contact-info p {
    color: #000;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.contact-info i {
    color: #000;
    margin-right: 15px;
    font-size: 18px;
}

.contact-info h6 {
    font-weight: 600;
}

.form-control {
    border: none;
    border-radius: 0;
    font-family: Poppins;
    background-color: transparent;
    font-size: 16px;
    padding: 0;
    font-style: normal;
    line-height: 115px;
    border-bottom: 1px solid #000;
}

.contact-target h6 {
    color: #000;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.form-control:focus {
    background-color: transparent;
}

.contact-target p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.fa-location-dot {
    font-size: 22px !important;
}

.form-control:focus {
    box-shadow: none;
    border-bottom: 1px solid #0066ff;
}

.btn-custom {
    padding: 14px 50px;
    border-radius: 40px;
    margin-top: 42px;
    background: #0A70F6;
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.btn-custom:hover {
    background-color: #fff;
    color: #0A70F6;
    border: 1px solid #0A70F6;
}

@media (max-width: 768px) {
    .contact-card {
        padding: 25px;
    }

    .btn-custom {
        width: 100%;
    }
}

.contact-flex {
    display: flex;
    align-items: start;
    margin-bottom: 10px;
}

.contact-card ::placeholder {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.contact-border-gradient {
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 20px;
}

body.dark-mode .contact-border-gradient {
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent !important;
    background-image: linear-gradient(#000, #000), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 20px;
}

.padding-form {
    padding: 40px;
    border-radius: 20px;
    border-radius: 20px;
    background: rgb(10 112 246 / 5%);
    height: 100%;
}

body.dark-mode .padding-form {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    height: 100%;
}

body.dark-mode .contact-card p,
body.dark-mode .contact-target h6,
body.dark-mode .contact-info i,
body.dark-mode .job-description p,
body.dark-mode .job-description ul li,
body.dark-mode .drag,
body.dark-mode .bi-upload,
body.dark-mode .thankyou-content h4,
body.dark-mode .popup-subtitle,
body.dark-mode .popup-text,
body.dark-mode .btn-close {
    color: #fff;
}

body.dark-mode .upload-box:hover {
    background-color: transparent;
}

body.dark-mode .form-control {
    border-bottom: 1px solid #fff;
}

body.dark-mode .apply-box .form-control {
    border-bottom: none;
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .apply-box .form-control::placeholder {
    color: #fff;
}

body.dark-mode .contact-card ::placeholder {
    color: #fff;
}

.bg-contact img {
    position: absolute;
    left: 23px;
    margin-top: -129px;
    border-radius: 20px;
}

.section-title-h4 {
    color: #0A70F6;
    font-family: Poppins;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
    margin-bottom: 15px;
}

.job-description p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 22px;
    text-align: justify;
    hyphens: auto;
}

.job-description {
    margin-right: 20px;
}

.job-description ul li {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 10px;
    list-style-type: disc;
}

.job-description ul {
    padding-left: 20px;
}

.job-card.career-detail {
    background-color: transparent;
}

.career-detail-web {
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

.job-icon.career {
    padding: 13px;
}

.apply-box {
    padding: 40px;
    border: 1px solid #459CF3;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.40);
}

.form-title {
    color: #0072ff;
    font-weight: 600;
}

.form-control.apply,
.form-select {
    display: flex;
    height: 50px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    line-height: 32px;
    border: 0;
}

.form-control.apply::placeholder {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.country-code {
    max-width: 90px;
    border-radius: 8px;
}

.upload-box {
    /* background-color: #fff; */
    border: 1px dashed #000;
    border-radius: 5px;
    padding: 20px;
    transition: 0.3s;
}

body.dark-mode .upload-box {
    border: 1px dashed #fff;
}

.form-control.phone-input.apply,
.form-control.phone-input {
    padding-left: 91px !important;
}

.iti {
    width: 100%;
}

.bi-upload {
    font-size: 21px;
    color: #000;
}

.upload-box:hover {
    border-color: #0072ff;
    background-color: #f0f7ff;
}

.apply-btn {
    background: linear-gradient(to right, #0072ff, #00c6ff);
    border: none;
    border-radius: 25px;
    font-weight: 500;
    color: #fff;
    padding: 12px 0;
    font-size: 16px;
    transition: 0.3s;
}

.apply-btn:hover {
    background: linear-gradient(to right, #00c6ff, #0072ff);
}

.drag {
    color: #000;
    font-family: Barlow;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.14px;
}

.browse {
    color: #0A70F6;
    font-family: Barlow;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.14px;
}

body.dark-mode .apply-box {
    background: rgba(255, 255, 255, 0.10);
}

.app-btn {
    margin-top: 45px;
}

.dark-theme .dark-img {
    display: block;
}

.dark-theme .light-img {
    display: none;
}

.light-theme .light-img {
    display: block;
}

.light-theme .dark-img {
    display: none;
}

body.dark-mode .iti__arrow {
    border-top: 4px solid #fff;
}

.thankyou-content h1 {
    color: #0A70F6;
    text-align: center;
    font-family: "DM Sans";
    font-size: 96px;
    font-style: normal;
    font-weight: 700;
    line-height: 2px;
}

.thankyou-content h4 {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 44px;
}

.back-home-btn {
    display: inline-flex;
    padding: 14px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: #0A70F6;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.back-home-btn:hover {
    color: #0A70F6;
    border: 1px solid #0A70F6;
    background-color: #fff;

}

.back-- {
    display: flex;
    justify-content: center;
}


.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(10, 112, 246, 0.10);
    backdrop-filter: blur(4px);
}

.popup-box {
    background: #fff;
    max-width: 550px;
    border-radius: 10px;
    background: #FFF;
    padding: 30px;
    border: 9px solid #ddd;
}

.popup-title {
    color: #0A70F6;
    text-align: center;
    font-family: Poppins;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
    margin-top: 43px;
}

.popup-subtitle {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin-top: 23px;
    margin-bottom: 23px;
}

.popup-text {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 37px;
}

body.dark-mode .popup-box {
    background-color: #000;
}

.card.card-custom {
    border-radius: 10px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.40);
    border: none;
}

.list-group {
    border: none !important;
    background-color: transparent !important;
    margin-top: 10px;
}

.post-title.blog-post {
    color: #000;
    width: 100%;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}

.blog-ul ul {
    padding: 0;
    padding-left: 20px;
    margin-bottom: 9px;
}

.card.whole {
    border: 0.5px solid #000;
    border-radius: 5px;
    padding: 5px;
}

.card.card-custom .form-select.post-select {
    border-radius: 5px;
    border: 1px solid #000;
    background: #FFF;
    padding: 4px 13px;
    height: 40px;
}

.form-select.post-select::placeholder {
    color: #000 !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 30px;
}

/*
.vision-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 130px 77px;
}

.vision-border {
    background-image: url('/csg/images/about/vision-card-bg.png');
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}





.vision-border {
  position: relative;
  overflow: visible;
  border-radius: 22px;
}

.vision-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px 77px;
  background: transparent;
  border-radius: 18px;
  position: relative;
  z-index: 2;
}

.moving-border {
 position: absolute;

    top: 6px;

    pointer-events: none;
    z-index: 1;
    display: block;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
}

.moving-border .dash-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.moving-border .dash-path {
  fill: none;
  stroke: #007bff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 8;
  stroke-dashoffset: 0;
  animation: dash-move 1s linear infinite;
}

@keyframes dash-move {
  to { stroke-dashoffset: -14; }
}

@media (min-width: 992px) {
  .moving-border .dash-path { stroke-width: 3.2; stroke-dasharray: 8 10; }
}

 */



/* .mission-border {
    background-image: url('/csg/images/about/mission-card-bg.png');
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.vis-- {
    display: flex;
    justify-content: center;
} */

.casestudy-highlight {
    font-family: Poppins;
    font-size: 96px;
    font-style: normal;
    font-weight: 600;
    line-height: 100px;
    background: linear-gradient(90deg, #126EEE 0%, #0DD2FC 30%, #02E1E1 70%, #1B79EE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-btn.bg-none {
    background-color: transparent;
}

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

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

body.loading .content {
    display: none;
}

body.dark-mode .dropbox-cont.col1,
body.dark-mode .dropbox-cont.col1::before,
body.dark-mode .dropbox-cont.col2,
body.dark-mode .dropbox-cont.col2::before,
body.dark-mode .dropbox-cont.col3,
body.dark-mode .dropbox-cont.col3::before {
    background-color: #000;
}

/* === Back to top button === */
/* #rocketButton {
    position: fixed;
    bottom: 59px;
    right: 36px;
    z-index: 9999;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 28px;
    width: 161px;
    height: 51px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.4s ease;
    display: none;
    transform: translateY(30px);
    overflow: hidden;
    white-space: nowrap;
}

#rocketButton.show {
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.6s ease forwards;
}

#rocketButton i {
    color: #fff;
    font-size: 15px;
    transition: transform 0.4s ease, color 0.4s ease, font-size 0.3s ease;
}

#rocketButton span {
    display: inline-block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#rocketButton:hover span {
    opacity: 0;
    display: none;
}

#rocketButton:hover {
    border-radius: 50%;
    width: 55px;
    height: 55px;
    border-color: #00e5ff;
    animation: borderAnimation 1.5s infinite linear;
    transition: all 0.4s ease;
    padding: 0;
}

#rocketButton:hover i {
    animation: bounceArrow 1s infinite alternate ease-in-out;
    color: #00c4cc;
    font-size: 19px;
    margin-left: 8px;
}

#rocketButton i,
#rocketButton span {
    vertical-align: middle;
}

@keyframes borderAnimation {
    0% {
        border-color: #00e5ff;
    }

    25% {
        border-color: #ff007b;
    }

    50% {
        border-color: #007bff;
    }

    75% {
        border-color: #00ffa3;
    }

    100% {
        border-color: #00e5ff;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceArrow {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5px);
    }
} */

#rocketButton {
    position: fixed;
    bottom: 117px !important;
    right: 36px;
    z-index: 9999;
    animation: borderAnimation 1.5s infinite linear !important;
    background-color: transparent;
    transition: all 0.4s ease;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.4s ease;
    display: none;
    transform: translateY(30px);
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

#rocketButton.show {
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.6s ease forwards;
}

#rocketButton i {
    color: #00c4cc;
    font-size: 19px;
    transition: transform 0.4s ease, color 0.4s ease, font-size 0.3s ease;
    line-height: 55px;
    animation: bounceArrow 1s infinite alternate ease-in-out;
}

#rocketButton span {
    display: none;
    color: #00c4cc;
    opacity: 0;
    margin-left: 8px;
    transition: opacity 0.4s ease;
}

#rocketButton:hover {
    border-radius: 28px;
    width: 169px;
    height: 55px;
    border-color: #00e5ff;
    animation: borderAnimation 1.5s infinite linear;
    transition: all 0.4s ease;
    padding: 0 12px;
}

#rocketButton:hover span {
    display: inline-block;
    opacity: 1;
}

#rocketButton:hover i {
    color: #00c4cc;
    font-size: 15px;
    margin-right: 6px;
    /* animation: bounceArrow 1s infinite alternate ease-in-out; */
}

@keyframes borderAnimation {
    0% {
        border-color: #00e5ff;
    }

    25% {
        border-color: #2c79e2;
    }

    50% {
        border-color: #007bff;
    }

    75% {
        border-color: #1df7f7;
    }

    100% {
        border-color: #00e5ff;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceArrow {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5px);
    }
}

/*--end--*/

.detail-heading {
    margin-top: 10px;
    color: #000;
    font-family: Poppins;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
}

.detail-item {
    color: #000;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 31px;
}

.detail-list {
    list-style-type: none;
    margin-top: 10px;
    padding-left: 0;
}

.detail-heading {
    position: relative;
    display: inline-block;
}

.detail-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 78px;
    height: 5px;
    background-color: #0A70F6;
    border-radius: 6px;
}

.client-test {
    display: flex;
    align-items: center;
}

.insight-list li {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    hyphens: auto;
}

.insights-subtitle {
    margin-bottom: 50px;
    text-align: left;
    hyphens: auto;
}

.client-name {
    color: #0A70F6;
    font-family: Poppins;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
}

.client-position {
    color: #0A70F6;
    font-family: Poppins;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
}

.client-feedback {
    text-align: justify;
    hyphens: auto;
}

.timeline-item p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-align: justify;
    hyphens: auto;
}

.timeline-item {
    display: flex;
    gap: 26px;
    align-items: center;
}

.timeline-icon i {
    margin-bottom: 22px;
    color: #0a70f6;
    font-size: 18px;
    position: relative;
    background-color: #fff;
}

.detail-list li::after {
    content: "";
    position: absolute;
    left: -27px;
    bottom: 14px;
    width: 18px;
    height: 4px;
    background-color: #0A70F6;
    border-radius: 6px;
}

.detail-list li {
    position: relative;
    display: inline-block;
    margin-left: 28px;
}

.client-test img {
    height: 75px;
    margin-right: 22px;
    margin-bottom: 9px;
}

/* .mob-- img {
    width: 270px;
    height: 559px;
    border-radius: 10px;
    border: 5px solid #000;
} */

.casestudy-imgs img {
    width: 100%;
    /* border-radius: 14px; */
}

/* .casestudy-imgs-2 img {
    height: 400px;
    width: 467px;
} */

.foot-row-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.service-card-front img {
    margin-top: 7px;
    margin-bottom: 30px;
}

/* .swiper {
  width: 100%;
  height: 500px;
} */

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dark-mode .swiper-slide.home-clients img {
    height: 116px;
    width: auto;
    transition: filter 0.3s;
    padding: 12px 28px;
    border-radius: 10px;
}

.swiper-slide.home-clients img {
    height: 116px;
    width: auto;
    transition: filter 0.3s;
    padding: 12px 28px;
    border-radius: 10px;
    position: relative;
}

.swiper-slide.home-clients {
    display: flex !important;
    width: 283px !important;
    background: #ededed87;
    box-shadow: inset 0 0 15px rgb(230 227 227);
    border-radius: 10px;
    border: 1px solid #00000030;
    margin-right: 27px !important;
}

body.dark-mode .swiper-slide.home-clients {
    background-color: #fff;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: visible;
    list-style: none;
    padding: 0;
    z-index: 9999;
    display: block;
}

/* #preloader img {
    height: 250px;
    width: auto;
} */

.how-about {
    margin-top: 24px;
}

.swiper-pagination-bullet {
    background-color: #0a70f6 !important;
}

body.dark-mode .swiper-pagination-bullet {
    background-color: #fff !important;
}

.pr-img img {
    height: 33px;
    width: 45px;
    padding: 0;
    border-radius: 0;
}

.swiper-pagination {
    position: inherit !important;
    top: 6px !important;
}

.collage-box {
    position: relative;
    overflow: hidden;
}

.collage-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
    transform: scale(1.05);
}

.collage-box img:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

.swiper-slide.test-slide {
    width: 100% !important;
}

.testimonial-card {
    /* border: 1px solid var(--linear, #459CF3); */
    background: #CFE4FF;
    clip-path: polygon(32% 0, 100% 0, 71% 100%, 0% 100%);
    position: relative;
    overflow: hidden;
    transform: rotate(0deg);
    overflow: hidden;
    height: 100%;
    padding: 166px 270px;
}

.quote-icon {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.5);
}

.testimonial-card h3 {
    color: #000;
    font-family: Poppins;
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    margin-bottom: 24px;
}

.testimonial-card p {
    color: #000;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: justify;
    hyphens: auto;
}

.testimonial-text {
    color: #000;
    font-family: Poppins;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 20px;
}

.swiper-button-prev,
.swiper-button-next {
    background-color: #0A70F6 !important;
    color: #fff !important;
    border-radius: 50%;
    width: 50px !important;
    height: 50px !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 25px !important;
}

body.dark-mode .testimonial-card h3,
body.dark-mode .testimonial-card p,
body.dark-mode .testimonial-text {
    color: #fff;
}

.testimonial-quote-div {
    display: flex;
    gap: 70px;
    align-items: center;
}

.test-logo {
    height: 100px;
    position: relative;
    left: 70px;
}

.about-banner.line-space h1 {
    line-height: 121px !important;
}

.swiper-button-next {
    position: absolute !important;
    right: 142px !important;
}

.swiper-button-prev {
    position: absolute !important;
    left: 121px !important;
}

.testimonial-home-row {
    background: rgba(207, 228, 255, 0.20);
}

body.dark-mode .testimonial-home-row {
    background: rgba(207, 228, 255, 0.10);
}

.swiper-wrapper.home-client-wrapper {
    margin-bottom: 30px;
}

/* body.dark-mode .testimonial-card {
    background-color: #004AAC;
} */

.address span img {
    margin-right: 6px;
    height: 22px;
    width: 20px;
}

body.dark-mode .accordion-item {
    background: linear-gradient(93deg, rgba(10, 112, 246, 0.40) 0%, rgba(0, 0, 0, 0.00) 50%, rgba(10, 112, 246, 0.40) 100%) !important;
}

.accordion-button:not(.collapsed)::after,
.accordion-item {
    border-bottom: 0.5px solid var(--Sky-Blue, #04D0CD);
}


.career-card {
    /* border: 1px solid var(--White-Gradient, #459CF3); */
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 23px;
    height: 100%;
}

.meth-cards {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 20px;
}

.contact-del {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 20px;
}

.banner-counter {
    padding-top: 55px;
}

/* body.dark-mode .counter-about {
    background: linear-gradient(#000000ed, #000000ed), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    border: 1px solid transparent !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 20px !important;
} */

.visible-boost-bg {
    background-image: url("/csg/images/banner/visible-boost-banner.png");
    background-repeat: no-repeat;
    height: 100%;
    padding: 172px 0;
}

/* .sticky-header.scrolled .sticky-header-container .header-below-div {
    background: linear-gradient(180deg, rgba(10, 112, 246, 0.04) 0%, rgba(4, 208, 205, 0.04) 100%);
    backdrop-filter: blur(5px);
    border-radius: 14px !important;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.00) inset, -1px -1px 2px 0 rgba(0, 0, 0, 0.10) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.00) inset;
    height: 90px;
    padding: 0 20px;
} */

.sticky-header.scrolled .sticky-header-container .header-below-div {
    /* background: linear-gradient(180deg, rgba(10, 112, 246, 0.04) 0%, rgba(4, 208, 205, 0.04) 100%); */
    /* backdrop-filter: blur(5px); */
    /* border-radius: 14px !important; */
    /* box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.00) inset, -1px -1px 2px 0 rgba(0, 0, 0, 0.10) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.00) inset; */
    height: 65px;
    padding: 0 3px;
    /* background: linear-gradient(180deg, rgba(10, 112, 246, 0.04) 0%, rgba(4, 208, 205, 0.04) 100%); */
    /* backdrop-filter: blur(5px); */
    /* border-radius: 14px !important; */
    /* box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.00) inset, -1px -1px 2px 0 rgba(0, 0, 0, 0.10) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.00) inset; */
    width: 900px !important;
}

body.dark-mode .testimonial-card {
    background-color: #083663;
}

/* body.light-mode .video-background video {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
} */

body.dark-mode .tags-all h3,
body.dark-mode .tags-all p {
    color: #fff;
}

.port-content.or-- {
    display: none;
}

.theme-icon .dark-img {
    display: none;
}

body.dark-mode .theme-icon .light-img {
    display: none;
}

body.dark-mode .theme-icon .dark-img {
    display: block;
}

body.dark-mode .career-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid transparent !important;
    background-image: linear-gradient(#747474, #747474), linear-gradient(to bottom right, #459CF3, #747474, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 20px;
}

.contact-space-div {
    padding: 10px;
    height: 100%;
}

body.dark-mode .iti__flag-container {
    background-color: #1a1a1a;
}

.error-container {
    text-align: center;
    padding: 40px 20px;
}

.error-heading {
    font-size: 55px;
    font-weight: 800;
    color: #1e90ff;
    letter-spacing: 2px;
    margin: 20px 0 0;
}

.error-heading span {
    color: #09c4b7;
}

.error-text {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 43px;
}

.about-banner.lineheight h1 {
    line-height: 100px !important;
}

.outline-heading {
    width: 100%;
    display: flex;
    justify-content: center;
}

.outline-heading svg {
    width: 100%;
    max-width: 1200px;
    height: 121px;
    margin-bottom: 16px;
}

.content-banner.about-onee {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding-top: 99px;
}

.port-bg-2 {
    height: 667px;
    overflow: hidden;
    position: relative;
}

.port-bg-2 img {
    position: absolute;
    top: 0;
    width: 100%;
    animation: scrollImage 12s linear infinite;
}

@keyframes scrollImage {
    0% {
        top: 0;
    }

    100% {
        top: -162%;
    }
}

.content-banner.contact-page {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    padding-top: 45px;
}

.swiper.myMethodology {
    height: 100%;
}





















.c-clients {
    position: relative;
    text-align: left;
}

.b-clients li.c-client {
    width: 25%;
}

/* .b-clients li.c-client {
    width: 33.33%;
} */

.c-client,
.c-clients_all {
    height: 17em;
}

.c-client,
.c-clients_all {
    position: relative;
    display: inline-block;
    width: 25%;
    vertical-align: middle;
}

.c-client,
.c-clients_all {
    position: relative;
    display: inline-block;
    width: 19%;
    vertical-align: middle;
    margin-right: 8px;
}

.c-clients {
    position: relative;
    text-align: left;
}

.l-column {
    font-size: 1em;
    margin: 0 auto;
}

.b-clients {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    min-height: 100vh;
    text-align: center;
}

.b-clients {
    position: relative;
    text-align: center;
    color: white;
}

/* .c-client_link {
    -webkit-transition: background-color .3s ease;
    -o-transition: background-color .3s ease;
    transition: background-color .3s ease;
} */

.c-client_wrap {
    padding-bottom: 0;
}

.c-client_wrap {
    padding-bottom: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.c-client_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 0;
    /* width: 100%; */
    height: 100%;
}

/*
.c-client_link {
    -webkit-transition: background-color .3s ease;
    -o-transition: background-color .3s ease;
    transition: background-color .3s ease;
} */

.c-client_wrap {
    padding-bottom: 0;
}

.c-client_wrap {
    padding-bottom: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* padding: 32px; */
}

.c-clients {
    position: relative;
    text-align: left;
}

.b-clients {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    min-height: 100vh;
    text-align: center;
}

/* .c-client_logo {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
} */

.c-clients {
    position: relative;
    text-align: left;
}

.c-clients {
    position: relative;
    text-align: left;
}


.l-column {
    font-size: 1em;
    margin: 0 auto;
}

.b-clients {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    min-height: 100vh;
    text-align: center;
}

.b-clients {
    position: relative;
    text-align: center;
    color: white;
}











.c-client_logo .before {
    z-index: 1;
}

.c-client_logo .before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.c-client_logo .before {
    z-index: 1;
}

.c-client_logo .before {
    background-image: url("/images/client/alkauser-grey.png");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.c-clients {
    position: relative;
    text-align: left;
}

.c-clients {
    position: relative;
    text-align: left;
}


.b-clients {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    min-height: 100vh;
    text-align: center;
}

.b-clients {
    position: relative;
    text-align: center;
    color: white;
}


.c-client_logo .after {
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.c-client_logo .after {
    background-image: url("/images/client/alkauser-colored.png");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 2;
    opacity: 0;
}

.c-client_logo .after {
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.c-client_logo .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 2;
    opacity: 0;
}

.c-clients {
    position: relative;
    text-align: left;
}

.c-clients {
    position: relative;
    text-align: left;
}

.l-column {
    font-size: 1em;
    margin: 0 auto;
}

.b-clients {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    min-height: 100vh;
    text-align: center;
}

.b-clients {
    position: relative;
    text-align: center;
    color: white;
}






/* .c-client_link .c-client__shield {
        bottom: 25px;
    } */

.c-client_link .c-client__shield {
    bottom: 8px;
}

.c-client_link .c-client__shield {
    position: absolute;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 120px;
    -ms-flex: 0 0 120px;
    flex: 0 0 120px;
}

.c-client_link .c-client__shield {
    bottom: 25px;
}

.c-client_link .c-client__shield {
    bottom: 25px;
}

.c-client_link .c-client__shield {
    position: absolute;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 120px;
    -ms-flex: 0 0 120px;
    flex: 0 0 120px;
}

.c-clients {
    position: relative;
    text-align: left;
}

.c-clients {
    position: relative;
    text-align: left;
}

.l-column {
    font-size: 1em;
    margin: 0 auto;
}

.b-clients {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    min-height: 100vh;
    text-align: center;
}

.b-clients {
    position: relative;
    text-align: center;
    color: white;
}

.c-client:hover {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
}

.body.dark-mode .c-client:hover {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    background: rgba(255, 255, 255, 0.60);
}

.c-client_link:hover .c-client_logo .before {
    opacity: 0;
}

.c-client_link:hover .c-client_logo .after {
    opacity: 1;
}

.c-client_logo .before,
.c-client_logo .after {
    height: 240px;
    width: 240px;
}

.services_dark_image {
    display: none;
}

body.dark-mode .services_dark_image {
    padding-left: 71px;
    display: block;
}

body.dark-mode .services_white_image {
    display: none;
}


body.dark-mode .white-logo-img {
    display: none;
}

.white-dark-img {
    display: none;
}

body.dark-mode .white-dark-img {
    display: block;
}

.portfolio-orient {
    background: linear-gradient(0deg, rgb(10 112 246 / 30%) 0%, rgb(4 208 205 / 32%) 100%);
    border-radius: 14px;
    height: 699px;
    margin-top: 30px;
}

.p-home {
    padding: 30px;
}

body.dark-mode .portfolio-orient {
    background: rgba(30, 30, 32, 0.60);
}

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

.swiper-slide:nth-child(even) .testimonial-card {
    background-color: #C7FFFE;
}

body.dark-mode .swiper-slide:nth-child(even) .testimonial-card {
    background-color: #266463;
}

.explore-btn {
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.45s ease;
}

.explore-btn>* {
    position: relative;
    z-index: 1;
}

.explore-btn img {
    filter: brightness(0) invert(1);
    transition: filter 0.45s ease;
    display: inline-block;
}

.explore-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -20%;
    transform: translateX(-50%) scale(1);
    transform-origin: 50% 0%;
    width: 250%;
    height: 250%;
    visibility: hidden;
    background: #fff;
    border-radius: 50%;
    transition: transform 1s cubic-bezier(.2, .9, .2, 1);
    pointer-events: none;
    z-index: 0;
}

.explore-btn:hover::before {
    transform: translateX(-50%) scale(0);
    visibility: visible;
}

.explore-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 40px;
    background-color: #0A70F6;
    border: 1px solid #0A70F6;
    padding: 9px 14px;
    line-height: 31px;
}


.icon-circle {
    width: 20px;
    height: 20px;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transform: rotate(-41deg);
    margin-top: 8px;
}

body.dark-mode .icon-circle {
    border: 2px solid #fff;
}

body.dark-mode .icon-circle i {
    color: #fff;
}

.company-card:hover .icon-circle {
    border: 2px solid #0a70f6;
}

.company-card:hover .icon-circle i {
    color: #0a70f6;
}

/* .company-card:hover .company--- p {
    display: none;
} */

.company-card {
    --p-h: 169px;
}

.company--- p {
    overflow: hidden;
    max-height: var(--p-h);
    margin: 0 0 16px 0;
    padding: 0;
    transform-origin: bottom;
    transition:
        max-height 3s ease,
        transform 3s ease,
        opacity 3s ease,
        margin 3s ease;
    opacity: 1;
}

.company-card:hover .company--- p {
    max-height: 0;
    transform: scaleY(3s);
    opacity: 0;
    margin-bottom: 0;
    padding: 0;
}

.img-grid {
    overflow: hidden;
    height: 300px;
    margin-top: 25px;
    transition: height 4s ease, margin-top 4s ease;
}

.company-card:hover .img-grid {
    margin-top: 0 !important;
    height: calc(300px + var(--p-h));
}

.img-grid img {
    width: 100%;
    transition: transform 3s linear;
    transform: translateY(0);
}

.company-card:hover .img-grid img {
    transform: translateY(-84%);
}

.about-banner.long-text h1 {
    line-height: 100px !important;
}



.blog-ul li {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.blog-card {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 10px !important;
}

.blog-description.blogging ul li {
    color: #000;
    text-align: justify;
    hyphens: auto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

.small-ul li {
    text-align: left !important;
}

.small-ul {
    padding-left: 20px;
    list-style-type: disc;
}

.blog-view-more {
    color: #1A70A6;
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.recent-post {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.blog-view-more i {
    transform: rotate(-45deg);
}

.blog-large-image img {
    width: 1055px;
    height: 465px;
    border-radius: 20px;
    margin-bottom: 38px;
}

body.dark-mode .bgc-1 .bg-o p,
body.dark-mode .bg-o i,
body.dark-mode .bg-o p span,
body.dark-mode .blog-description p,
body.dark-mode .blog-description.blogging ul li,
body.dark-mode .blog-ul li {
    color: #fff;
}

body.dark-mode .table-top,
body.dark-mode .blog-card {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#141414, #141414), linear-gradient(to bottom right, #459cf385, #ffffff4d, #459cf385) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 10px !important;
}

body.dark-mode .card.card-custom {
    background-color: #141414;
}

body.dark-mode .list-group a {
    background-color: #141414;
}

body.dark-mode .blog-o {
    border-bottom: 1px solid #fff;
}

.blog-sticky-sidemenu {
    position: sticky;
    top: 10px;
}

.blog-section {
    overflow: visible;
}

.table-top {
    position: sticky;
    top: 126px;
}

.read-more-green:hover {
    color: #00c4cc;
    text-decoration: underline;
}

.read-service-btn {
    display: flex;
    justify-content: end;
    width: 100%;
}

.exp-service-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #fff;
    background: transparent;
    justify-content: end;
    overflow: hidden;
    transition: color 0.5s ease, border-radius 0.4s ease;
    border-radius: 32px;
    width: 175px;
    height: 49px;
}

.exp-service-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 32px;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.6s ease, border-radius 0.6s ease;
    z-index: 0;
}

.exp-service-btn>* {
    position: relative;
    z-index: 1;
}

.exp-service-btn i {
    border: 1px solid #fff;
    border-radius: 50%;
    font-size: 15px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    margin-left: 12px;
    transition: all 0.4s ease;
}

.exp-service-btn:hover {
    color: #0A70F6;
    border-radius: 42px;
}

.exp-service-btn:hover::before {
    transform: scaleX(1);
    border-radius: 42px;
}

.exp-service-btn:hover i {
    border-color: transparent;
    background: transparent;
    line-height: 40px;
    color: #0A70F6;
    margin-left: 0;
}

.logo-grid {
    gap: var(--gap);
}

.logo-card {
    position: relative;
    text-align: center;
    background: transparent;
    cursor: pointer;
    transition: transform .28s ease;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.logo-card:focus,
.logo-card:hover {
    transform: translateY(-6px);
    outline: none;
}

.logo-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.logo-wrap img {
    max-width: 100%;
    max-height: 80px;
    display: block;
    user-select: none;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease, filter .35s ease;
}

.logo--gray {
    filter: grayscale(100%) brightness(.85) contrast(.95);
    opacity: 1;
}

.logo--color {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.logo-card:hover .logo--gray,
.logo-card:focus .logo--gray,
.logo-card:hover .logo--gray-dark-theme,
.logo-card:focus .logo--gray-dark-theme {
    opacity: 0;
    transform: scale(.98);
}

.logo-card:hover .logo--color,
.logo-card:focus .logo--color {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.01);
}

.logo-card {
    opacity: 0;
    transform: translateY(8px);
    animation: appear .45s ease forwards;
}

@keyframes appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-card:nth-child(5n+1) {
    animation-delay: .04s;
}

.logo-card:nth-child(5n+2) {
    animation-delay: .08s;
}

.logo-card:nth-child(5n+3) {
    animation-delay: .12s;
}

.logo-card:nth-child(5n+4) {
    animation-delay: .16s;
}

.logo-card:nth-child(5n+5) {
    animation-delay: .20s;
}

.dot {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: 13px;
    height: 13px;
    background: #0b74ff;
    border-radius: 50%;
    transition:
        width .45s cubic-bezier(.2, .9, .2, 1),
        height .35s ease,
        border-radius .35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dot-label {
    color: white;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .25s ease .1s,
        transform .35s ease .1s;
    pointer-events: none;
    z-index: 2;
}

.dot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, .18),
            rgba(255, 255, 255, 0));
    transform: translateX(-100%);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.2, .9, .2, 1);
    z-index: 1;
}

.logo-card:hover .dot,
.logo-card:focus .dot {
    width: 107px;
    height: 25px;
    border-radius: 50px;
}

.logo-card:hover .dot::before,
.logo-card:focus .dot::before {
    transform: translateX(0%);
}


.logo-card:hover .dot-label,
.logo-card:focus .dot-label {
    opacity: 1;
    transform: translateX(0);
}

.logo-card:hover {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#f9f8f8, #f9f8f8), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 0 !important;
}

body.light-mode .logo--gray-dark-theme {
    display: none;
}

body.dark-mode .logo--gray-dark-theme {
    display: block;
}

body.dark-mode .logo--gray {
    display: none;
}

body.dark-mode .logo-card:hover {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#6b6a6a, #6b6a6a), linear-gradient(to bottom right, #459CF3, #6b6a6a, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 0 !important;
}

.logo-card {
    position: relative;
    transition: background 0.4s ease;
}

.expert-grid {
    position: relative;
    width: 100%;
    min-height: 640px;
    overflow: visible;
}

.expert-row {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.expert-row>.col-lg-6 {
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    transition:
        transform 2s cubic-bezier(.2, .9, .3, 1),
        left 2s cubic-bezier(.2, .9, .3, 1),
        top 2s cubic-bezier(.2, .9, .3, 1),
        opacity 570ms ease;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}

.expert-row>.col-lg-6:nth-child(1) {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
    transform: translate(-50%, -50%) scale(1);
}

.expert-grid:hover .expert-row>.col-lg-6,
.expert-row>.col-lg-6:nth-child(1):hover~.col-lg-6,
.expert-row>.col-lg-6:nth-child(1):hover {
    pointer-events: auto;
}

.expert-grid:hover .expert-row>.col-lg-6:nth-child(1) {
    left: 0;
    top: 0;
    transform: translate(0, 0) scale(1);
    opacity: 1;
    z-index: 4;
    transition-delay: 0ms;
}

.expert-grid:hover .expert-row>.col-lg-6:nth-child(2) {
    left: 50%;
    top: 0;
    transform: translate(0, 0) scale(1);
    opacity: 1;
    z-index: 2;
    transition-delay: 160ms;
}

.expert-grid:hover .expert-row>.col-lg-6:nth-child(3) {
    left: 0;
    top: 50%;
    transform: translate(0, 0) scale(1);
    opacity: 1;
    z-index: 2;
    transition-delay: 240ms;
}

.expert-grid:hover .expert-row>.col-lg-6:nth-child(4) {
    left: 50%;
    top: 50%;
    transform: translate(0, 0) scale(1);
    opacity: 1;
    z-index: 2;
    transition-delay: 320ms;
}


.col-xxl-2,
.col-xl-3,
.col-lg-3,
.col-md-4,
.col-sm-6,
.col-12 {
    perspective: 600px;
}

.requirements-div.service-page {
    transform: rotateY(-180deg);
    opacity: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: center;
    /* transition: transform 2s cubic-bezier(.2,.9,.2,1), opacity 2s ease; */
    will-change: transform, opacity;
    transition: transform 2s ease-in-out;
}

.requirements-div.service-page.visible {
    transform: rotateY(0deg);
    opacity: 1;
}















/* container perspective */
.section-why-choose-us {
    position: relative;
    height: 100%;
    /* adjust container height */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    perspective: 900px;
    padding: 40px 0;
}

body.dark-mode .card {
    border: 1px solid #000;
    background-color: #000;
}

body.dark-mode .card-content h3 {
    color: #fff;
}

.card-ab {
    position: absolute;
    width: 261px;
    height: 266px;
    border-radius: 10px;
    border: 1px solid #fff;
    overflow: visible;
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease, height .6s ease;
}

.card-ab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    z-index: 0;
    display: block;
    background-size: 94% auto;
    background-position: center top;
    background-repeat: no-repeat;
    clip-path: polygon(8% 0, 94% 0, 133% 101%, -1% 98%);
    filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.08));
}

.card-ab .card-content {
    position: relative;
    z-index: 2;
    padding: 46px 39px 10px 38px;
    color: #000;
    font-family: "Poppins", sans-serif;
}

.card-ab h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 600;
}

.card-ab p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

.card1 {
    left: -19px;
    transform: rotateX(54deg) translateY(-120px) translateZ(120px);
}

.card1::before {
    background-image: url('/csg/images/about/why-choose-1.png');
}

.card2 {
    left: 314px;
    transform: rotateX(54deg) translateY(-120px) translateZ(29px);
}

.card2::before {
    background-image: url('/csg/images/about/why-choose-2.png');
}

.card3 {
    left: 691px;
    transform: rotateX(54deg) translateY(-120px) translateZ(120px);
}

.card3::before {
    background-image: url('/csg/images/about/why-choose-1.png');
}

.card4 {
    left: 1115px;
    transform: rotateX(54deg) translateY(-120px) translateZ(27px);
}

.card4::before {
    background-image: url('/csg/images/about/why-choose-2.png');
}

.section-why-choose-us .card-ab:hover {
    transform: rotateX(0deg) translateY(0) translateZ(0);
    height: 256px;
}

.section-why-choose-us .card-ab:hover::before {
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@keyframes subtleFloat {
    0% {
        transform: rotateX(58deg) translateY(-122px) translateZ(80px);
    }

    50% {
        transform: rotateX(58deg) translateY(-118px) translateZ(82px);
    }

    100% {
        transform: rotateX(58deg) translateY(-122px) translateZ(80px);
    }
}

/* @media (max-width: 1200px) {
    .section-why-choose-us {
        height: 900px;
    }

    .card {
        left: initial;
        transform: none;
        position: relative;
        margin: 20px auto;
        display: block;
    }

    .card:hover {
        height: auto;
    }
} */

.iti__country-list {
    max-width: 325px;
}

.visible-boost-bg.about-visible-boost {
    padding: 300px 0 172px 0;
}

.section-subtitle.choose-us {
    margin-bottom: 95px;
}

.blue-dot {
    color: #0A84FF;
}

.job-card.career-detail {
    display: block;
}

.job-border-card {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom right, #459CF3, #FFFFFF, #459CF3) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 10px !important;
}

body.dark-mode .job-border-card {
    border: 1px solid transparent !important;
    background-image: linear-gradient(#141414, #141414), linear-gradient(to bottom right, #459cf375, #141414, #459cf375) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border-radius: 10px !important;
}

.contact-flex a {
    color: #000;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 23px;
}

.fa-solid.fa-mobile-screen-button {
    font-size: 22px;
}

body.dark-mode .contact-flex a {
    color: #fff;
}

.example-2 {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-all.example-2 {
    width: auto !important;
    height: auto !important;
    padding: 1px;
    border-radius: 20px;
}

.example-2.border-green::before {
    content: "";
    display: block;
    background: linear-gradient(73deg, rgba(4, 208, 205, 1) 0%, rgb(102 102 102 / 0%) 50%, rgba(255, 255, 255, 0) 55%);
    height: 100%;
    width: 100%;
    transform: translate(0);
    position: absolute;
    animation: rotate 6s linear forwards infinite;
    z-index: 0;
    top: 50%;
    transform-origin: top center;
}

@keyframes rotate {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(260deg);
    }
}

.example-2 .inner {
    margin: 2px;
}

.example-2 .inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.card-all .inner {
    padding: 25px;
    /* background: #222; */
    color: #fff;
    border-radius: 20px;
}

.example-2.border-blue::before {
    content: "";
    display: block;
    background: linear-gradient(73deg, rgba(10, 112, 246, 1) 0%, rgb(102 102 102 / 0%) 50%, rgba(255, 255, 255, 0) 55%);
    height: 100%;
    width: 100%;
    transform: translate(0);
    position: absolute;
    animation: rotate 6s linear forwards infinite;
    z-index: 0;
    top: 50%;
    transform-origin: top center;
}

#preloader img {
    height: 100px;
    max-width: 100%;
}















.example-3 {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.counter-card.example-3 {
    width: auto !important;
    height: auto !important;
    padding: 1px;
    border-radius: 20px;
}

.example-3::before {
    content: "";
    display: block;
    background: linear-gradient(73deg, rgba(10, 112, 246, 1) 0%, rgb(102 102 102 / 0%) 50%, rgba(255, 255, 255, 0) 55%);
    height: 100%;
    width: 100%;
    transform: translate(0);
    position: absolute;
    animation: rotate 6s linear forwards infinite;
    z-index: 0;
    top: 50%;
    transform-origin: top center;
}

@keyframes rotate {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(260deg);
    }
}

.example-3 .outer {
    margin: 2px;
}

.example-3 .outer {
    position: relative;
    z-index: 1;
    width: 100%;
}

.counter-card .outer {
    padding: 25px;
    background-color: #fff;
    color: #fff;
    border-radius: 20px;
}






.moving-border {
    width: 100%;
    height: 6px;
    border-bottom: 6px dashed #1EEBF4;
    border-radius: 50px;
    animation: moveBorder 4s linear infinite;
}

@keyframes moveBorder {
    from {
        border-bottom-style: dashed;
        border-bottom-color: #1EEBF4;
        border-bottom-width: 6px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        border-image-slice: 1;
        border-image-source: repeating-linear-gradient(to right,
                #1EEBF4 0,
                #1EEBF4 10px,
                transparent 10px,
                transparent 20px);
        border-image-width: 6;
        border-image-outset: 0;
        border-image-repeat: round;
        border-image-source: repeating-linear-gradient(to right,
                #1EEBF4 0,
                #1EEBF4 10px,
                transparent 10px,
                transparent 20px);
        border-image-outset: 0;
    }

    to {
        border-image-source: repeating-linear-gradient(to right,
                transparent 0,
                transparent 10px,
                #1EEBF4 10px,
                #1EEBF4 20px);
    }
}



























:root {
    --card-radius: 56px;
    --inner-radius: 56px;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.outer-frame {
    position: absolute;
    top: -1px;
    bottom: 0px;
    width: 117px;
    pointer-events: none;
}

.outer-frame.left {
    /* top: 5px; */
    left: 66px;
    border-radius: 56px 0 0 56px;
    background-color: #02E1E1;
    box-sizing: border-box;
    align-items: flex-start;
}

.outer-frame.right {
    right: 63px;
    border-radius: 0 56px 56px 0;
    background-color: #0A70F6;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
}

.outer-frame::before,
.outer-frame::after {
    content: "";
    display: block;
    height: 26px;
    width: 100%;
    background: transparent;
}

.card-outer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-box {
    position: relative;
    /* width: 100%; */
    height: 100%;
    border-radius: var(--card-radius);
    overflow: visible;
    background-color: #fff;
    padding: 35px 32px 66px 35px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    background-size: cover;
    background-position: center;
}

.inner-card {
    background: #fff;
    border-radius: 18px;
    padding: 29px 23px;
    max-width: 361px;
    position: relative;
    z-index: 3;
}

.inner-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -11px;
    right: -10px;
    bottom: -32px;
    border-radius: 48px;
    border: 2px solid #02E1E1;
    box-shadow: 14px 15px 0 rgb(2 225 225 / 34%);
    z-index: -1;
}

.inner-card.blue-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -11px;
    right: -10px;
    bottom: -10px;
    border-radius: 48px;
    border: 2px solid #0A70F6;
    box-shadow: -18px 15px 0 rgb(10 112 246 / 25%);
    z-index: -1;
}

.k-icon {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.h-title {
    color: #000;
    font-family: Poppins;
    font-size: 51px;
    font-style: normal;
    font-weight: 600;
    line-height: 60px;
    margin-bottom: 12px;
    text-align: center;
}

.h-title .accent {
    color: #02E1E1;
    font-family: Poppins;
    font-size: 51px;
    font-style: normal;
    font-weight: 600;
    line-height: 60px;
}

.desc {
    color: #000;
    text-align: justify;
    hyphens: auto;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
}

.dashess-all {
    position: relative;
    padding: 20px;
    border-radius: 56px;
    border: 3px solid transparent;
}

.dashess-all::before {
    content: "";
    position: absolute;
    inset: 0;
    top: 7px;
    height: 542px;
    border-radius: 56px;
    padding: 4px;
    pointer-events: none;
    background: repeating-linear-gradient(
        138deg,
        #02e1e1 0 14px,
        transparent 10px 20px
    );

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    animation: moveDashes 0.6s linear infinite;
}

@keyframes moveDashes {
    from {
        background-position: -108px 0;
    }
    to {
        background-position: 20px 0;
    }
}

.dashess-all.blue::before {
    content: "";
    position: absolute;
    inset: 0;
    top: 7px;
    height: 542px;
    border-radius: 56px;
    padding: 4px;
    pointer-events: none;
    background: repeating-linear-gradient(138deg,
            #0A70F6 0 16px,
            transparent 13px 24px);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    animation: moveDashes 0.4s forwards infinite;
}

/* @keyframes moveDashes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 20px 0;
    }
} */

.accent-mission {
    color: #0A70F6;
}

.bg-box.blue-box {
    padding: 35px 35px 45px 35px !important;
}

body.dark-mode .bg-box,
body.dark-mode .inner-card {
    background-color: #000;
}

body.dark-mode .h-title,
body.dark-mode .desc {
    color: #fff;
}

body.light-mode .banner-img.banner-dark {
    display: none;
}

body.dark-mode .banner-img.banner-light {
    display: none;
}

body.dark-mode .banner-img.banner-dark {
    display: block;
}

.detail-list li a {
    color: #000;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 31px;
}

body.dark-mode .detail-list li a,
body.dark-mode .detail-heading,
body.dark-mode .timeline-item p,
body.dark-mode .insight-list li,
body.dark-mode .int,
body.dark-mode .heading_class2 {
    color: #fff;
}

body.dark-mode .hero-btn.bg-none {
    background-color: #fff;
}

.timeline {
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: #000;
}

.logo-circle {
    width: 28px;
    height: 25px;
    left: -12px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    border: 4px solid #0A70F6;
    border-right-color: transparent;
}

/* .logo-circle::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 6px solid white;
    border-right-color: transparent;
    border-bottom-color: transparent;
} */

.logo-circle::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background-color: #0A70F6;
    border-radius: 50%;
}

body.dark-mode .card-ab {
    border: 1px solid #000;
}

body.dark-mode .timeline::before {
    background-color: #fff;
}

body.dark-mode .logo-circle {
    background-color: #000;
}

.casestudy-testimonial p {
    text-align: justify;
}

.image-box img {
    width: 100%;
}

.fluid-padding {
    padding: 3rem;
}

.banner-img.about-banner-img {
    height: 100vh;
}


.services-dark-image{
    display: none;
}

body.dark-mode .services-image{
    display: none;
}
body.dark-mode .services-dark-image{
    display: block;
}










.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  will-change: transform;
}

.sticky-header-container {
  width: 1300px;
  max-width: 100%;
  margin: 0 auto;
  transition: width 0.8s ease-in-out, padding 0.6s ease-in-out;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}


.sticky-header .header-below-div {
  /* padding: 20px 0;      */
  transition: padding 0.6s ease-in-out;
  align-items: center;
}

.sticky-header .navbar-brand img {
  transition: max-width 0.8s ease-in-out, transform 0.6s ease-in-out;
}

.sticky-header.scrolled .sticky-header-container {
  width: 900px;
}

.sticky-header.scrolled .header-below-div {
  padding: 8px 0;
}

.sticky-header.scrolled .navbar-brand img {
  transform: translateY(0);
}

@media (max-width: 1200px) {
  .sticky-header-container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .sticky-header.scrolled .sticky-header-container {
    width: 100%;
  }
}

.sticky-header.scrolled {
  box-shadow: 0 6px 18px rgba(22, 36, 66, 0.06);
}