/*!modern-normalize v0.6.0 | MIT License | https://github.com/sindresorhus/modern-normalize*/

*,
*::before,
*::after {
    box-sizing: border-box
}


/* header-center-image */

.mobile-big-img {
    display: none;
}

:root {
    -moz-tab-size: 4;
    tab-size: 4
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
}

body {
    font-family: system-ui, -apple-system, segoe ui, Roboto, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji
}

hr {
    height: 0
}

abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp,
pre {
    font-family: SFMono-Regular, Consolas, liberation mono, Menlo, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    padding: 0
}

progress {
    vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

*,
*::before,
*::after {
    box-sizing: inherit
}

address,
details,
blockquote,
p,
pre,
dl,
ol,
ul,
figure,
hr,
table,
fieldset {
    margin-top: 0;
    margin-bottom: 1rem
}

img {
    max-width: 100%;
    height: auto
}

body:not(.is-tabbing) a:focus,
body:not(.is-tabbing) button:focus {
    outline: none
}

figure>video {
    display: block;
    width: 100%
}

:root {
    --container-gutter: 20px;
    --section-padding-top: 38px;
    --section-padding-bottom: 40px
}

@media(min-width:768px) {
     :root {
        --container-gutter: 40px
    }
}

@media(min-width:992px) {
     :root {
        --container-gutter: 60px
    }
}

@media(min-width:1280px) {
     :root {
        --container-gutter: 80px
    }
}

@media(min-width:768px) {
     :root {
        --section-padding-top: 28px
    }
}

@media(min-width:992px) {
     :root {
        --section-padding-top: 38px
    }
}

@media(min-width:1280px) {
     :root {
        --section-padding-top: 38px
    }
}

@media(min-width:992px) {
     :root {
        --section-padding-bottom: 60px
    }
}

@media(min-width:1280px) {
     :root {
        --section-padding-bottom: 80px
    }
}

body {
    font-family: proxima-nova, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5666;
    color: #161618;
    background-color: #fff
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.15
}

h1,
.h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 45px;
    font-weight: 400;
    line-height: 1.1666
}

@media(min-width:370px) {
    h1,
    .h1 {
        font-size: 45px
    }
    /* .hero-tagline{
        font-size: 28px
    } */
}

@media(min-width:479px) {
    h1,
    .h1 {
        font-size: 52px
    }
    .cs-1-hero-content {
        padding: 80px var(--container-gutter);
        font-size: 24px;
        line-height: 1.34;
        letter-spacing: -.01em;
        background-color: #161618;
    }
}

@media(min-width:992px) {
    h1,
    .h1 {
        font-size: 70px
    }
}

h2,
.h2 {
    font-size: 30px;
    font-weight: 300;
    line-height: 1.34
}

@media(min-width:992px) {
    h2,
    .h2 {
        font-size: 45px
    }
}

h3,
.h3 {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.34
}

@media(min-width:992px) {
    h3,
    .h3 {
        font-size: 30px
    }
}

h4,
.h4 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.34
}

h5,
.h5 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.34;
    text-transform: uppercase;
    letter-spacing: .02em
}

p {
    margin-bottom: 1rem
}

blockquote {
    margin-left: 0;
    padding-left: 8px;
    font-style: italic;
    color: #252227;
    border-left: 2px solid #252227
}

a {
    color: inherit;
    text-decoration: none
}

ul,
ol {
    margin-left: 2rem;
    padding: 0
}

hr {
    margin: 0 1rem
}

.container {
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter)
}

.container--limited {
    max-width: 1440px
}

@media(min-width:1280px) {
    .container--limited {
        margin-left: auto;
        margin-right: auto
    }
}

:root {
    --grid-gap: 20px
}

@media(min-width:768px) {
     :root {
        --grid-gap: 30px
    }
}

@media(min-width:1280px) {
     :root {
        --grid-gap: 40px
    }
}

@media(min-width:768px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: var(--grid-gap)
    }
}

.link-underline {
    position: relative
}

.link-underline::after {
    position: absolute;
    left: 0;
    top: 1em;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform-origin: 0 0;
    transform: scale(.1, 1);
    opacity: 0;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    content: ''
}

.link-underline:hover::after {
    transform: scale(1, 1);
    opacity: 1
}

.link-underline.is-active::after {
    transform: scale(1, 1);
    opacity: 1
}

.button-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    padding: 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    line-height: 1.1;
    text-align: center;
    background-color: rgba(0, 176, 187, .9);
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out
}

.button-cta:hover {
    background-color: rgba(0, 176, 187, .7)
}

@media(min-width:992px) {
    .button-cta {
        width: 100px;
        height: 100px;
        padding: 12px
    }
}

@media screen and (max-width:420px) {
    .button-cta {
        width: 65px;
        height: 65px;
        font-size: 11px
    }
    .Mobile-Img-42Nite2 {
        position: absolute;
        width: 350px !important;
        right: 2.3rem !important;
        bottom: 29vh !important;
    }
    .aboutIncraftiv {
        width: 100% !important;
        display: grid !important;
        justify-content: center !important;
        position: absolute !important;
        margin-top: 21% !important;
        right: 26px;
    }
    .weListen {
        width: 96% !important;
        padding: 0% 6% !important;
    }
    .encouragedBy {
        margin-bottom: -15px !important;
    }
}

.button-cta--large {
    width: 100px;
    height: 100px;
    padding: 12px
}

.button-cta--outline {
    background-color: transparent;
    border-color: #00b0bb;
    color: #00b0bb;
    background-clip: padding-box
}

.button-cta--outline:hover {
    border-color: rgba(0, 176, 187, .7);
    color: #fff
}

.button-cta--cursor {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 100
}

body.hide-native-cursor {
    cursor: none
}

body.hide-native-cursor a,
body.hide-native-cursor button {
    cursor: none !important
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    width: 18px;
    height: 18px;
    opacity: 0
}

.cursor-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.18);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(0, 176, 187, .75);
    border: 2px solid transparent;
    transition: all .3s ease;
    padding: 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    line-height: 1.1;
    text-align: center
}

.custom-cursor.is-active .cursor-content {
    transform: translate(-50%, -50%) scale(1)
}

.custom-cursor.is-active.is-outline .cursor-content {
    transform: translate(-50%, -50%) scale(1);
    background-color: transparent;
    border-color: #00b0bb;
    color: #00b0bb
}

.custom-cursor.is-active.is-hidden .cursor-content {
    transform: translate(-50%, -50%) scale(.01);
    opacity: 0
}

.custom-cursor.is-active .cursor-content:empty {
    transform: translate(-50%, -50%) scale(.3)
}

.link-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #00b0bb;
    font-weight: 400
}

.link-cta .icon {
    margin-left: 20px;
    transition: margin .4s
}

.link-cta::after {
    position: absolute;
    left: 0;
    top: calc(1.2em + 1px);
    width: calc(100% - 44px);
    height: 1px;
    background-color: currentColor;
    transform-origin: 0 0;
    transform: scale(.1, 1);
    opacity: 0;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    content: ''
}

.link-cta:hover::after {
    transform: scale(1, 1);
    opacity: 1
}

button.link-cta {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
    cursor: pointer
}

.input,
textarea {
    display: block;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.34;
    border: 1px solid transparent;
    border-bottom-color: #161618;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0
}

.input::placeholder,
textarea::placeholder {
    /* color: #ffffff; */
}

.input {
    padding: 2px 0
}

.textarea {
    height: 100px
}

.label {
    color: rgba(37, 34, 39, .7);
    display: block;
    margin-bottom: .5em
}

.select {
    display: block;
    width: 100%;
    height: 30px;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: rgba(37, 34, 39, .7);
    vertical-align: middle;
    background-color: transparent;
    padding: 0;
    border: 0;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    border-bottom: 1px solid #161618;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgOSA1JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J001LjAyNTg4MDg5LDQuNzkyMjk2NzggQzQuNzU5NjQ3OSw1LjA0NjE1NjI3IDQuMzQxNzgzNTgsNS4wNjczMTEyMyA0LjA1MDI3ODcsNC44NTU3NjE2NiBMMy45NzQxMTkxMSw0Ljc5MjI5Njc4IEwwLjIxNzgyNjk5OSwxLjIxMDU4MzA2IEMtMC4wNzI2MDg5OTk2LDAuOTMzNjQ1NDM4IC0wLjA3MjYwODk5OTYsMC40ODQ2NDA4MzggMC4yMTc4MjY5OTksMC4yMDc3MDMyMTYgQzAuNDg0MDU5OTk3LC0wLjA0NjE1NjI3MDMgMC45MDE5MjQzMDksLTAuMDY3MzExMjI3NSAxLjE5MzQyOTE5LDAuMTQ0MjM4MzQ1IEwxLjI2OTU4ODc5LDAuMjA3NzAzMjE2IEw0LjUsMy4yODc5NzcwMiBMNy43MzA0MTEyMSwwLjIwNzcwMzIxNiBDNy45OTY2NDQyMSwtMC4wNDYxNTYyNzAzIDguNDE0NTA4NTIsLTAuMDY3MzExMjI3NSA4LjcwNjAxMzQxLDAuMTQ0MjM4MzQ1IEw4Ljc4MjE3MywwLjIwNzcwMzIxNiBDOS4wNDg0MDYsMC40NjE1NjI3MDMgOS4wNzA1OTIwOCwwLjg2MDAwNjI0NyA4Ljg0ODczMTI1LDEuMTM3OTYzMDggTDguNzgyMTczLDEuMjEwNTgzMDYgTDUuMDI1ODgwODksNC43OTIyOTY3OCBaJy8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 9px 5px
}

.select--caps {
    height: 24px;
    font-size: 16px;
    color: #161618
}

.custom-checkbox-input {
    position: absolute;
    z-index: -1;
    opacity: 0
}

.custom-checkbox-label {
    display: block;
    position: relative;
    color: rgba(37, 34, 39, .8);
    padding-left: 24px !important;
    line-height: 20px !important
}

.custom-checkbox-label::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #161618;
    content: ''
}

.custom-checkbox-label::after {
    position: absolute;
    left: 4px;
    top: 50%;
    margin-top: -4px;
    display: block;
    width: 8px;
    height: 8px;
    transform: scale(.2);
    opacity: 0;
    transition: all .2s ease;
    background-color: #00b0bb;
    content: ''
}

.custom-checkbox-input:checked~.custom-checkbox-label {
    font-weight: inherit !important
}

.custom-checkbox-input:checked~.custom-checkbox-label::after {
    transform: scale(1);
    opacity: 1
}

body.is-tabbing .custom-checkbox-input:focus~.custom-checkbox-label::before {
    outline: 1px solid #00b0bb;
    outline-offset: 2px
}

.custom-checkbox-label--small {
    font-size: 14px;
    font-weight: 400;
    color: #252227
}

.custom-radio+.custom-radio {
    margin-left: 20px !important
}

.custom-radio-input {
    position: absolute;
    z-index: -1;
    opacity: 0
}

.custom-radio-label {
    display: block;
    position: relative;
    color: rgba(37, 34, 39, .8);
    margin: 0 !important;
    padding-left: 24px !important;
    line-height: 20px
}

.custom-radio-label::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #161618;
    border-radius: 50%;
    content: ''
}

.custom-radio-label::after {
    position: absolute;
    left: 4px;
    top: 50%;
    margin-top: -4px;
    display: block;
    width: 8px;
    height: 8px;
    transform: scale(.2);
    opacity: 0;
    transition: all .2s ease;
    background-color: #00b0bb;
    border-radius: 50%;
    content: ''
}

.custom-radio-input:checked~.custom-radio-label {
    font-weight: inherit !important
}

.custom-radio-input:checked~.custom-radio-label::after {
    transform: scale(1);
    opacity: 1
}

body.is-tabbing .custom-radio-input:focus~.custom-radio-label::before {
    outline: 1px solid #00b0bb;
    outline-offset: 2px
}

.custom-radio-label--small {
    font-size: 14px;
    font-weight: 400;
    color: #252227
}

.custom-file-input {
    position: absolute;
    opacity: 0;
    z-index: -1
}

.custom-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid #161618;
    padding: 8px 20px;
    color: #161618;
    font-size: 14px;
    text-align: center;
    opacity: .3;
    transition: opacity .2s ease;
    cursor: pointer
}

.custom-file-label:hover,
.custom-file-label.has-file {
    opacity: .6
}

.custom-file-label::after {
    display: inline-block;
    width: 10px;
    height: 12px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAgMTInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTguODkgNi4zNTFsLTMuNTk4IDMuNzhhMi4zOSAyLjM5IDAgMDEtMy4zOTMtLjEwNGMtLjkyNi0uOTcyLS45Ny0yLjUzMy0uMS0zLjU2bDQuNjU3LTQuODg2YTEuNDQ2IDEuNDQ2IDAgMDEyLjA2IDBjLjU2NS41OTkuNTY1IDEuNTYyIDAgMi4xNjJMNC41IDcuOTVhLjQzMi40MzIgMCAwMS0uNDI1LjEzOC40NTQuNDU0IDAgMDEtLjMyNi0uMzE4LjQ4NC40ODQgMCAwMS4xLS40NTVMNi44MzQgNC4xOWEuNjM1LjYzNSAwIDAwMC0uODY4LjU2NS41NjUgMCAwMC0uODI3IDBsLTIuOTg2IDMuMTRhMS43MTYgMS43MTYgMCAwMC0uNDcyIDEuMTg4YzAgLjQ0Ni4xNy44NzQuNDcyIDEuMTg4LjYzNC42MzQgMS42My42MzQgMi4yNjQgMGw0LjAxMS00LjIxNWMuOTYyLTEuMDgzLjkzMy0yLjc3LS4wNjQtMy44MTdBMi41MzIgMi41MzIgMCAwMDUuNTk1LjczOEwuOTM4IDUuNjI0Qy0uMzY3IDcuMTQtLjMwMiA5LjQ2NiAxLjA4MyAxMC45YTMuNTE2IDMuNTE2IDAgMDA1LjAzLjA4bDMuNjAzLTMuNzc0YS42MzQuNjM0IDAgMDAuMTUxLS41OTIuNi42IDAgMDAtLjQxMy0uNDM0LjU2Ni41NjYgMCAwMC0uNTY1LjE1OXYuMDEyeicvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-size: 10px 12px;
    background-position: center;
    margin-left: 4px;
    content: ''
}

.icon {
    fill: currentColor
}

@media screen and (prefers-reduced-motion:no-preference) {
    html.js .text-reveal-line-holder--to-top {
        overflow: hidden
    }
    html.js .text-reveal-line-holder--to-top .text-reveal-line {
        display: block;
        transform: translate(0, 100%)
    }
    html.js .text-reveal-line-holder--fade .text-reveal-line {
        opacity: 0;
        transition: transform 3.5s cubic-bezier(.22, .61, .36, 1), opacity 3.5s cubic-bezier(.22, .61, .36, 1)
    }
    html.js .text-reveal-line-holder--fade .text-reveal-line--1 {
        transition-delay: .25s
    }
    html.js .text-reveal-line-holder--fade .text-reveal-line--2 {
        transition-delay: .5s
    }
    html.js .text-reveal-line-holder--fade .text-reveal-line--3 {
        transition-delay: .75s
    }
    html.js .text-reveal-line {
        display: block;
        transition: transform 1.5s cubic-bezier(.22, .61, .36, 1), opacity 1.5s cubic-bezier(.22, .61, .36, 1)
    }
    html.js .text-reveal-animate .text-reveal-line-holder--to-top .text-reveal-line {
        transform: translate(0, 0)
    }
    html.js .text-reveal-animate .text-reveal-line-holder--fade .text-reveal-line {
        opacity: 1
    }
    html.js .text-reveal-line--1 {
        transition-delay: .1s
    }
    html.js .text-reveal-line--2 {
        transition-delay: .2s
    }
    html.js .text-reveal-line--3 {
        transition-delay: .3s
    }
}

.load-more-holder {
    text-align: center;
    padding: 40px 0
}

@media(min-width:992px) {
    .load-more-holder {
        padding: 80px 0
    }
}

.btn-load-more {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    color: #00b0bb;
    cursor: pointer
}

.btn-load-more svg {
    transform: rotate(90deg);
    margin-left: 20px
}

.btn-load-more .btn-load-more-text {
    display: inline-flex
}

.btn-load-more:hover .btn-load-more-text {
    display: inline-block;
    background-image: linear-gradient(to right, currentColor 100%, currentColor 0);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 calc(1em + 1px)
}

.back-to-top {
    float: right;
    border: none;
    border-radius: 50%;
    display: block;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
    padding: 0;
    position: fixed;
    right: -40px;
    bottom: 40px;
    z-index: 99;
    transition: all ease-in-out .6s;
    opacity: 0
}

@media screen and (max-width:767px) {
    .back-to-top {
        transition: all ease-in-out .3s;
        right: -10px;
        bottom: 10px
    }
}

.back-to-top.active {
    opacity: 1;
    right: 40px
}

@media screen and (max-width:767px) {
    .back-to-top.active {
        right: 10px
    }
}

.back-to-top span {
    font-size: 0;
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjQgMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTE3LjM3NzE2NzIsNS4xMjk1MDU5NyBMMTcuNDYzMTM2MSw1LjIwMjM1MzA3IEwyMy43OTY4NTgsMTEuNTExNDc2NSBDMjQuMDQwNjI4NCwxMS43NTQzMDAyIDI0LjA2NTAwNTQsMTIuMTMyOTA4IDIzLjg2OTk4OTEsMTIuNDAyODg4NSBMMjMuNzk2ODU4LDEyLjQ4ODUyMzUgTDE3LjQ2MzEzNjEsMTguNzk3NjQ2OSBDMTcuMTkyMjgwMSwxOS4wNjc0NTEgMTYuNzUzMTM1NywxOS4wNjc0NTEgMTYuNDgyMjc5NywxOC43OTc2NDY5IEMxNi4yMzg1MDkyLDE4LjU1NDgyMzIgMTYuMjE0MTMyMiwxOC4xNzYyMTU0IDE2LjQwOTE0ODUsMTcuOTA2MjM0OSBMMTYuNDgyMjc5NywxNy44MjA1OTk5IEwyMS42MzIsMTIuNjkgTDAuNjkzNTcwMjQ2LDEyLjY5MDg3NjYgQzAuMzEwNTIxOTc2LDEyLjY5MDg3NjYgLTQuMDUwMDkzNTllLTEzLDEyLjM4MTU2MDYgLTQuMDUwMDkzNTllLTEzLDEyIEMtNC4wNTAwOTM1OWUtMTMsMTEuNjUwMjM2MSAwLjI2MDkyNDcxNiwxMS4zNjExNzc4IDAuNTk5NDU2ODcyLDExLjMxNTQzMDMgTDAuNjkzNTcwMjQ2LDExLjMwOTEyMzQgTDIxLjYzMSwxMS4zMDkgTDE2LjQ4MjI3OTcsNi4xNzk0MDAxNCBDMTYuMjM4NTA5Miw1LjkzNjU3NjQ1IDE2LjIxNDEzMjIsNS41NTc5Njg2IDE2LjQwOTE0ODUsNS4yODc5ODgwOCBMMTYuNDgyMjc5Nyw1LjIwMjM1MzA3IEMxNi43MjYwNTAxLDQuOTU5NTI5MzkgMTcuMTA2MTM0MSw0LjkzNTI0NzAyIDE3LjM3NzE2NzIsNS4xMjk1MDU5NyBaJyBmaWxsPScjZmZmZmZmJy8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    transform: rotate(-90deg)
}

#wpadminbar {
    cursor: default !important
}

#wpadminbar a {
    cursor: default !important
}

#wpadminbar a:hover {
    cursor: pointer !important
}

body div#hs-eu-cookie-confirmation {
    z-index: -10 !important;
    display: none !important;
}

.site-header {
    position: absolute;
    top: var(--section-padding-top);
    right: 0;
    left: 0;
    display: flex;
    align-items: center
}

@media screen and (max-width:767px) {
    .site-header {
        top: 0;
        padding-top: var(--section-padding-top)
    }
    .site-header:after {
        content: '';
        display: block;
        background-color: #161618;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        transition: opacity .6s ease-in-out;
        opacity: 0
    }
}

.site-header #page_nav {
    position: absolute;
    right: calc(var(--container-gutter) + 100px);
    top: 11px;
    z-index: 10
}

.site-header #page_nav img {
    height: 15px;
    width: auto
}

.site-header #page_nav img.page_nav_all {
    padding: 0 10px
}

.site-header #page_nav.hide_page_nav {
    display: none
}

@media screen and (max-width:1690px) {
    .site-header #page_nav {
        right: px !important;
        top: 14px !important;
    }
}

@media screen and (max-width:1280px) {
    .site-header #page_nav {
        right: 110px !important
    }
}

@media screen and (max-width:991px) {
    .site-header #page_nav {
        right: 90px !important;
        top: 15px !important;
    }
}

@media screen and (max-width:767px) {
    .site-header #page_nav {
        right: 66px !important;
        top: 34px !important
    }
}

@media screen and (max-width:300px) {
    .site-header #page_nav {
        display: none !important
    }
}

.site-branding {
    position: relative;
    z-index: 30;
}

.custom-logo-link {
    display: block;
    transition: transform 1s
}

.custom-logo-link:hover {
    /* transition: transform 15s;
    transform: scale(1.15) */
}

.site-logo {
    /* transition: filter .6s ease; */
    display: block
}

.site-header--light .site-logo {
    filter: invert(1)
}

.site-logo .str-d,
.site-logo .str-u {
    transition: transform .5s cubic-bezier(.25, .46, .45, .94);
    transform-origin: 40% 100%
}

.site-logo:hover .str-d {
    transform: translate(0%, 100%)
}

.site-logo:hover .str-u {
    transform: translate(0%, 0%) scale(1.08) !important
}

#inCraftiv_loader {
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 99999999 !important;
    position: fixed
}

#inCraftiv_loader.inCraftiv_center img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@keyframes inCraftiv_loader_spin {
    100% {
        transform: rotate(360deg)
    }
}

html.has-open-dialog {
    height: 100vh
}

html.has-open-dialog body {
    height: 100vh;
    overflow: hidden
}

.site-menu-toggle {
    position: absolute;
    right: var(--container-gutter);
    top: 40%;
    transform: translate(0, -50%);
    z-index: 40;
    width: 24px;
    height: 2px;
    padding: 20px 12px;
    margin-right: -12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    box-sizing: content-box;
    color: #fff;
    transition: color .6s ease
}

@media screen and (max-width:767px) {
    .site-menu-toggle {
        /* top: 25px; */
        transform: translate(0, 0)
    }
}

.site-header--light .site-menu-toggle {
    color: #161618
}

.site-menu-toggle::before,
.site-menu-toggle::after {
    position: absolute;
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform .3s cubic-bezier(.65, .05, .36, 1);
    content: ''
}

.site-menu-toggle::before {
    transform: translate(0, -4px)
}

.site-menu-toggle::after {
    transform: translate(0, 4px)
}

.site-menu-toggle.is-active::before {
    transform: translate(0, 0) rotate(45deg)
}

.site-menu-toggle.is-active::after {
    transform: translate(0, 0) rotate(-45deg)
}


/* .site-menu {
    display: none
} */

.site-menu-body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background-color: #161618;
    color: #fff
}

@media screen and (min-width:10px) {
    .site-menu-body {
        padding-top: 95px;
    }
}

@media screen and (min-width:767px) {
    .site-menu-body {
        padding-top: 0
    }
}

.site-menu-secondary-nav {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.site-menu-main-nav-list,
.site-menu-secondary-nav-list {
    margin: 0;
    padding: 0;
    list-style: none
}

@media screen and (max-width:767px) {
    .site-menu-body {
        display: flex;
        flex-direction: column
    }
}

@media screen and (max-width:767px) {
    .site-menu-secondary-nav {
        justify-content: flex-start;
        flex-grow: 1;
        margin-left: calc(-1 * var(--container-gutter));
        margin-right: calc(-1 * var(--container-gutter));
        padding: var(--section-padding-top) var(--container-gutter);
        background-color: rgba(255, 255, 255, .05)
    }
}

@media(min-width:768px) {
    .site-menu-secondary-nav {
        height: 100vh;
        grid-column: 2/span 7
    }
}

nav.site-menu-main-nav {
    position: relative;
    overflow: auto;
    height: 100%;
}

nav.site-menu-main-nav ul {
    position: relative
}

nav.site-menu-main-nav ul #menu-item-search {
    position: absolute;
    bottom: -160px;
    right: 0
}

nav.site-menu-main-nav ul #menu-item-search img {
    width: 30px;
    height: 30px
}

@media screen and (max-width:767px) {
    nav.site-menu-main-nav {
        flex-shrink: 0;
        order: -1;
    }
    nav.site-menu-main-nav ul {
        position: relative
    }
    nav.site-menu-main-nav ul #menu-item-search {
        position: relative;
        bottom: 0;
        right: 0
    }
    nav.site-menu-main-nav ul #menu-item-search img {
        width: 30px;
        height: 30px
    }
}

@media(min-width:768px) {
    nav.site-menu-main-nav {
        background-color: rgba(255, 255, 255, .05);
        grid-column: span 4;
        padding-left: calc((1 * (100% - 3 * var(--grid-gap))/4) + 1 * var(--grid-gap))
    }
    nav.site-menu-main-nav::after {
        position: absolute;
        top: 0;
        left: 100%;
        bottom: 0;
        width: var(--container-gutter);
        display: block;
        background-color: rgba(255, 255, 255, .05);
        content: ''
    }
}

.nav-main-heading {
    text-transform: capitalize;
    font-weight: 900;
}

.site-menu-body {
    opacity: 0;
    transition: opacity .6s ease-in-out
}

.site-menu.is-active .site-menu-body {
    opacity: 1
}

@media screen and (max-width:767px) {
    .site-menu.is-active .site-menu-body {
        overflow-y: none;
        -webkit-overflow-scrolling: touch
    }
}

@media screen and (max-width:767px) {
    .site-menu.is-active+.site .site-header:after {
        opacity: 1
    }
}

.site-menu-main-nav {
    font-weight: 600;
    font-size: 40px;
    padding-bottom: 20px
}

@media screen and (min-width:370px) {
    .site-menu-main-nav {
        font-size: 40px
    }
}

@media(min-width:768px) {
    .site-menu-main-nav {
        text-align: right;
        font-size: 45px
    }
}

@media only screen and (min-width:768px) and (min-width:768px) {
    .site-menu-main-nav {
        font-size: calc(45px + 25 * (100vw - 768px)/(1440 - 768))
    }
}

@media only screen and (min-width:768px) and (min-width:1440px) {
    .site-menu-main-nav {
        font-size: 70px
    }
}

.site-menu-main-nav .menu-item+.menu-item {
    margin-top: .15em
}

.site-menu-main-nav .menu-item:last-child {
    margin-top: .2em
}

.site-menu-secondary-nav {
    font-size: 24px
}

@media(min-width:992px) {
    .site-menu-secondary-nav {
        font-size: 30px
    }
}

.site-menu-secondary-nav .menu-item+.menu-item {
    margin-top: 4px
}

.site-menu-main-nav-list a,
.site-menu-secondary-nav-list a {
    transition: opacity .2s cubic-bezier(.47, 0, .75, .72)
}

.site-menu-main-nav-list.has-hover-within a,
.site-menu-secondary-nav-list.has-hover-within a {
    opacity: .2
}

.site-menu-main-nav-list.has-hover-within a:hover,
.site-menu-secondary-nav-list.has-hover-within a:hover {
    opacity: 1
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100
}

html.has-open-dialog .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(22, 22, 24, .75)
}

.modal-dialog {
    position: relative;
    background-color: #fff;
    min-height: 100vh;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter)
}

@media(min-width:768px) {
    .modal-dialog {
        min-height: auto;
        max-width: 720px;
        margin: 60px auto
    }
}

.modal-header {
    padding-top: 48px;
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid #e6e6e6
}

.modal-title {
    margin-bottom: 0
}

.modal-body {
    padding-bottom: 48px
}

.modal-close {
    position: absolute;
    display: block;
    right: 8px;
    top: 8px;
    width: 48px;
    height: 48px;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTEzLjY1NyAyLjM0M2ExIDEgMCAwMTAgMS40MTRMOS40MTQgOGw0LjI0MyA0LjI0M2ExIDEgMCAwMS4wNzggMS4zMjdsLS4wNzguMDg3YTEgMSAwIDAxLTEuNDE0IDBMOCA5LjQxNGwtNC4yNDMgNC4yNDNhMSAxIDAgMDEtMS4zMjcuMDc4bC0uMDg3LS4wNzhhMSAxIDAgMDEwLTEuNDE0bDQuMjQyLTQuMjQ0LTQuMjQyLTQuMjQyYTEgMSAwIDAxLS4wNzgtMS4zMjdsLjA3OC0uMDg3YTEgMSAwIDAxMS40MTQgMEw4IDYuNTg2bDQuMjQzLTQuMjQzYTEgMSAwIDAxMS4zMjctLjA3OHonLz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
    cursor: pointer
}

.modal-overlay {
    opacity: 0;
    transition: all .5s cubic-bezier(.65, .05, .36, 1)
}

.modal-dialog {
    opacity: 0;
    transform: scale(.75);
    transition: all .5s cubic-bezier(.54, .4, .36, 1)
}

.modal.is-visible .modal-overlay {
    opacity: 1
}

.modal.is-visible .modal-dialog {
    opacity: 1;
    transform: scale(1)
}

.modal-body .gform_fields {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between
}

.modal-body .gfield {
    padding: 0 !important;
    margin: 0 0 24px !important;
    flex: 0 0 100%;
    max-width: 100%
}

@media(min-width:768px) {
    .modal-body .gfield--half {
        flex: 0 0 calc(50% - var(--grid-gap)/2);
        max-width: calc(50% - var(--grid-gap)/2)
    }
}

.modal-body .ginput_container {
    margin: 0 !important
}

.modal-body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
    width: 100%;
    margin: 0;
    padding: 2px 0;
    display: block;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.34;
    border: 1px solid transparent;
    border-bottom-color: #161618;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0
}

.modal-body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file])::placeholder {
    color: rgba(37, 34, 39, .7)
}

.modal-body .gfield_label {
    color: rgba(37, 34, 39, .7);
    display: block;
    margin-bottom: .5em;
    font-weight: 300 !important
}

.modal-body .gform_wrapper .gfield_required {
    color: currentColor !important;
    margin-left: 4px
}

.modal-body .job-posting-attachment,
.modal-body .job-posting-prior-experience {
    display: block;
    margin-top: 24px !important;
    margin-bottom: 28px !important
}

.modal-body .gform-contact-textarea {
    margin-top: 24px !important;
    margin-bottom: 40px !important
}

.modal-body .gform-contact-cover-letter {
    margin-top: 0 !important;
    margin-bottom: 40px !important
}

.modal-body .gform_wrapper ul.gfield_checkbox li,
.modal-body .gform_wrapper ul.gfield_radio li {
    overflow: visible
}

.modal-body .textarea {
    padding: 0;
    height: 120px !important;
    margin: 0 0 24px
}

.modal-body .gform_footer {
    padding: 0 !important
}

.modal-body .gform_button {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 40px 0 0;
    background-color: transparent;
    border: 0;
    color: #00b0bb;
    font-family: inherit;
    font-size: inherit;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjQgMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTE3LjM3NzE2NzIsNS4xMjk1MDU5NyBMMTcuNDYzMTM2MSw1LjIwMjM1MzA3IEwyMy43OTY4NTgsMTEuNTExNDc2NSBDMjQuMDQwNjI4NCwxMS43NTQzMDAyIDI0LjA2NTAwNTQsMTIuMTMyOTA4IDIzLjg2OTk4OTEsMTIuNDAyODg4NSBMMjMuNzk2ODU4LDEyLjQ4ODUyMzUgTDE3LjQ2MzEzNjEsMTguNzk3NjQ2OSBDMTcuMTkyMjgwMSwxOS4wNjc0NTEgMTYuNzUzMTM1NywxOS4wNjc0NTEgMTYuNDgyMjc5NywxOC43OTc2NDY5IEMxNi4yMzg1MDkyLDE4LjU1NDgyMzIgMTYuMjE0MTMyMiwxOC4xNzYyMTU0IDE2LjQwOTE0ODUsMTcuOTA2MjM0OSBMMTYuNDgyMjc5NywxNy44MjA1OTk5IEwyMS42MzIsMTIuNjkgTDAuNjkzNTcwMjQ2LDEyLjY5MDg3NjYgQzAuMzEwNTIxOTc2LDEyLjY5MDg3NjYgLTQuMDUwMDkzNTllLTEzLDEyLjM4MTU2MDYgLTQuMDUwMDkzNTllLTEzLDEyIEMtNC4wNTAwOTM1OWUtMTMsMTEuNjUwMjM2MSAwLjI2MDkyNDcxNiwxMS4zNjExNzc4IDAuNTk5NDU2ODcyLDExLjMxNTQzMDMgTDAuNjkzNTcwMjQ2LDExLjMwOTEyMzQgTDIxLjYzMSwxMS4zMDkgTDE2LjQ4MjI3OTcsNi4xNzk0MDAxNCBDMTYuMjM4NTA5Miw1LjkzNjU3NjQ1IDE2LjIxNDEzMjIsNS41NTc5Njg2IDE2LjQwOTE0ODUsNS4yODc5ODgwOCBMMTYuNDgyMjc5Nyw1LjIwMjM1MzA3IEMxNi43MjYwNTAxLDQuOTU5NTI5MzkgMTcuMTA2MTM0MSw0LjkzNTI0NzAyIDE3LjM3NzE2NzIsNS4xMjk1MDU5NyBaJyBmaWxsPScjZmZmZmZmJy8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 24px 24px;
    cursor: pointer
}

.modal-body .gfield_radio {
    display: flex;
    align-items: center
}

.modal-body .gform_wrapper .gfield_checkbox li label,
.modal-body .gform_wrapper .gfield_radio li label {
    max-width: none
}

.modal-body .gform-custom-radio-button {
    margin-bottom: 40px !important
}

.modal-body .gform-custom-radio-button .gfield_radio {
    margin: 12px 0 0 !important
}

.modal-body .gform-custom-radio-button li {
    overflow: visible !important
}

.modal-body .gform-custom-radio-button li [type=radio] {
    opacity: 0;
    position: absolute;
    z-index: -1
}

.modal-body .gform-custom-radio-button li label {
    display: block;
    font-size: 14px !important;
    line-height: 20px !important;
    border: 1px solid #e6e6e6;
    padding: 8px 20px !important;
    font-weight: 400 !important;
    cursor: pointer;
    transition: all .25s ease;
    margin: 0 8px 0 0 !important
}

.modal-body .gform-custom-radio-button li [type=radio]:checked~label {
    border-color: #00b0bb;
    background-color: #00b0bb;
    color: #fff
}

body.is-tabbing .modal-body .gform-custom-radio-button li [type=radio]:focus~label {
    outline: 2px solid #00b0bb;
    outline-offset: 2px
}

.modal-body .gform_wrapper div.validation_error {
    color: #a0121d;
    font-weight: 400;
    text-align: left;
    border: 0;
    padding: 0 0 16px
}

.modal-body .gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.modal-body .gform_wrapper li.gfield_error textarea {
    border: 0;
    border-bottom: 1px solid #a0121d
}

.modal-body .gform_wrapper li.gfield.gfield_error,
.modal-body .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
    border: 0;
    background-color: transparent
}

.modal-body .gform_wrapper .validation_message {
    padding: 0;
    margin: 8px 0 16px;
    font-weight: 400;
    color: #a0121d;
    background-color: #00b0bb;
    padding: 10px
}

.hero {
    position: relative;
    background-color: #161618;
    color: #fff
}

.hero-video,
.hero-background {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1
}

.hero--has-overlay::before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%), linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    content: ''
}

.hero--light {
    background-color: #fff;
    color: #161618
}

.hero--dark {
    background-color: #161618
}

.hero-content {
    position: relative;
    z-index: 3;
    min-height: 430px;
    padding-top: calc(var(--section-padding-top) + 180px);
    padding-bottom: var(--section-padding-bottom);
    display: flex;
    flex-direction: column
}

.hero-content .hero-tagline h1 {
    font-size: 65px;
    line-height: 1;
    margin: 40px 0px;
    font-weight: 800;
    min-height: 130px;
}

.hero-content .hero-tagline p {
    margin: 40px 0px;
    font-size: 22px;
    color: #ffffffd1;
    line-height: 1.2;
}

.hero-content .hero-tagline .hero-div {
    background: #4D4D4D;
    width: 200px;
    padding: 3px 11px;
    border-radius: 5px;
}

.text-gradiant {
    font-weight: bold;
    background: linear-gradient(to right, #6bb9f0, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media(max-width:1600px) {
    .hero-content .hero-tagline h1 {
        font-size: 58px;
    }
}

@media(max-width:1398px) {
    .hero-content .hero-tagline h1 {
        font-size: 50px;
        min-height: 100px;
    }
}

@media(max-width:1000px) {
    .hero-content .hero-tagline h1 {
        font-size: 45px;
    }
    .hero-content .hero-tagline .hero-div {
        background: #4D4D4D;
        width: 30%;
        padding: 3px 11px;
        border-radius: 5px;
        font-size: 2vw;
    }
}

@media(max-width:500px) {
    .hero-content .hero-tagline h1 {
        font-size: 35px !important;
        font-weight: 700;
    }
    .hero-content .hero-tagline .hero-div {
        width: 50%;
        font-size: 4vw;
    }
}

@media(min-width:768px) {
    .hero-content {
        min-height: 460px
    }
}

.hero--light .hero-content::after {
    position: absolute;
    left: var(--container-gutter);
    right: var(--container-gutter);
    bottom: 0;
    height: 1px;
    background-color: #e6e6e6;
    content: ''
}

.hero-title {
    margin-top: auto;
    margin-bottom: 40px;
    word-break: break-word
}

@media screen and (max-width:479px) {
    .hero-title {
        font-size: 50px
    }
    .page-nav {
        font-size: 20px !important;
        line-height: 2 !important;
        font-weight: 400 !important;
        padding-top: 25px !important;
        padding-bottom: 40px !important;
    }
    .cs-1-screenshot {
        display: none !important;
    }
    .cs-intro {
        padding-bottom: 160px;
    }
    .body {
        scroll-snap-type: none;
    }
    /* NEW CSS ADD FOR SLIDER ---mobile*/
    .img-slider {
        position: relative;
        width: 100vw;
        height: 220px;
        display: block !important;
    }
    .img-slider .slider-container {
        position: absolute;
        width: 400%;
        top: 0;
        left: 0;
        overflow: hidden !important;
        /* animation: slider 10s infinite; */
    }
    .img-slider .slider-container .slide {
        position: relative;
        width: 33.33333333%;
        height: 100%;
        float: left;
        overflow: hidden!important;
        padding: 20px;
    }
    .img-slider .slider-container .slide img {
        display: block;
        width: 100%;
        height: 100%
    }
    @keyframes slider {
        0%,
        25%,
        100% {
            left: 0
        }
        30%,
        55% {
            left: -100%
        }
        60%,
        85% {
            left: -200%
        }
    }
    /* End --NEW CSS ADD FOR SLIDER ---Mobile*/
    .Mobile-Img-42Nite2 {
        position: absolute;
        width: 350px !important;
        right: 2.3rem !important;
        bottom: 29vh !important;
    }
    .aboutIncraftiv {
        width: 100% !important;
        display: grid !important;
        justify-content: center !important;
        margin-top: 21% !important;
        right: 26px;
    }
    .weListen {
        width: 96% !important;
        padding: 0% 6% !important;
    }
    .encouragedBy {
        margin-bottom: -15px !important;
    }
}

.hero-breadcrumbs+.hero-title {
    margin-top: 0
}

.hero-title.no-tagline {
    margin-bottom: 40px
}

@media screen and (max-width:991px) {
    .hero-title.no-tagline {
        margin-bottom: 80px
    }
    .hero-tagline {
        font-size: 30px
    }
}

@media(min-width:768px) {
    .hero-title {
        max-width: 840px
    }
}

@media(min-width:1280px) {
    .hero-title {
        max-width: 1140px
    }
}

.hero-tagline {
    margin-right: 80px
}

@media(min-width:992px) {
    .hero-tagline {
        margin-right: 0;
        max-width: 100%;
    }
}

@media(min-width:1280px) {
    .hero-tagline {
        max-width: 80%;
    }
}

.hero-tag {
    position: absolute;
    left: var(--container-gutter);
    top: var(--section-padding-top);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em
}

.hero:first-child .hero-tag {
    display: none
}

.hero-button-cta {
    position: absolute;
    bottom: var(--section-padding-bottom);
    right: var(--container-gutter)
}

.hero--fullscreen .hero-content {
    min-height: 100vh
}

.hero--fullscreen .hero-content::after {
    display: none
}

@media(min-width:768px) {
    .hero--fullscreen .hero-content {
        padding-top: calc(var(--section-padding-top) * 2 + 22px);
        padding-bottom: var(--section-padding-bottom);
        justify-content: center
    }
}

.hero--fullscreen .hero-breadcrumbs {
    margin-top: 0
}

@media(min-width:768px) {
    .hero--fullscreen .hero-title {
        margin-top: auto;
        margin-bottom: auto
    }
}

.hero--fullscreen .hero-tagline {
    margin-top: auto
}

@media(min-width:768px) {
    .hero--fullscreen .hero-tagline {
        margin-top: 40px
    }
}

@media(min-width:768px) {
    [lang=ar] .hero--fullscreen .hero-content {
        padding-top: calc(var(--section-padding-top)/2 + 22px)
    }
}

@supports not (-webkit-touch-callout:none) {
    .hero--fixed-content {
        overflow: hidden;
        min-height: 100vh
    }
    .hero--fixed-content .hero-content-holder {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        clip: rect(auto, auto, auto, auto)
    }
    .hero--fixed-content .hero-content {
        position: fixed;
        width: 100vw
    }
}

@media screen and (prefers-reduced-motion:no-preference) {
    html.js .hero--animated .hero-background,
    html.js .hero--animated .hero-tagline,
    html.js .hero--animated .hero-button-cta,
    html.js .hero--animated .hero-video {
        opacity: 0;
        transition: opacity 1s ease-in-out
    }
    html.js .hero--animated.is-animating .hero-background,
    html.js .hero--animated.is-animating .hero-tagline,
    html.js .hero--animated.is-animating .hero-button-cta,
    html.js .hero--animated.is-animating .hero-video {
        opacity: 1
    }
    html.js .hero--animated .hero-content {
        opacity: 0
    }
    html.js .hero--animated.is-animating .hero-content {
        opacity: 1
    }
}


/* .hero-breadcrumbs {
    display: flex;
    margin-top: auto;
    margin-bottom: 32px;
    margin-left: .25ch
} */

.hero-breadcrumbs {
    display: flex;
    position: absolute;
    top: var(--section-padding-top);
    left: 50%;
    transform: translate(-50%);
    margin-bottom: 0;
    z-index: 40
}

@media(max-width:768px) {
    .hero-breadcrumbs .hero-breadcrumb {
        white-space: nowrap;
        font-size: 10px;
    }
}

@media(min-width:768px) {
    .hero-breadcrumbs {
        display: flex;
        position: absolute;
        top: var(--section-padding-top);
        left: 50%;
        transform: translate(-50%);
        margin-bottom: 0;
        z-index: 40
    }
}

@media screen and (max-width:479px) {
    .hero-breadcrumbs {
        display: inline;
        top: 100px;
    }
    .hero-breadcrumbs .hero-breadcrumb {
        white-space: nowrap;
        font-size: 6px;
    }
}

@media screen and (max-width:373px) {
    .hero-breadcrumbs .hero-breadcrumb {
        white-space: nowrap;
        font-size: 5px;
    }
}

.hide-breadcrumb .hero-breadcrumbs {
    display: none
}

.hero:not(:first-child) .hero-breadcrumbs {
    display: none
}

.hero-breadcrumb {
    position: relative;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 30px
}

.hero-breadcrumb:not(:last-child) {
    margin-right: 24px
}

.hero-breadcrumb:not(:last-child)::after {
    position: absolute;
    content: '|';
    left: calc(100% + 12px);
    transform: translate(-50%)
}

@media(min-width:768px) {
    .hero-breadcrumbs--mobile {
        display: none
    }
}

.hero-breadcrumbs--desktop {
    display: none
}

@media(min-width:768px) {
    .hero-breadcrumbs--desktop {
        display: flex
    }
}

.parallax-hero {
    position: relative;
    padding-top: 1px;
    min-height: 100vh;
    color: #fff
}

.parallax-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    background-color: #161618;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

.parallax-hero-title {
    max-width: 75%;
    margin-top: calc(45vh - 50px);
    mix-blend-mode: difference;
    font-size: 60px;
    line-height: .9
}

@media only screen and (min-width:768px) {
    .parallax-hero-title {
        font-size: calc(60px + 110 * (100vw - 768px)/(1440 - 768))
    }
}

@media only screen and (min-width:1440px) {
    .parallax-hero-title {
        font-size: 170px
    }
}

.parallax-hero-tagline {
    display: none;
    position: absolute;
    right: var(--container-gutter);
    top: calc(45vh);
    width: 20%;
    font-size: 16px;
    font-weight: 400
}

@media(min-width:1280px) {
    .parallax-hero-tagline {
        display: block
    }
}

.page-subheader {
    grid-row-gap: 0
}

.page-subheader-image {
    display: block;
    width: 100%;
    margin-bottom: var(--section-padding-bottom)
}

@media(min-width:768px) {
    .page-subheader-image {
        grid-column: span 12
    }
}

.page-subheader-content {
    padding-bottom: var(--section-padding-bottom);
    border-bottom: 1px solid #e6e6e6;
    color: rgba(37, 34, 39, .7);
    line-height: 1.6667
}

@media(min-width:768px) {
    .page-subheader-content {
        grid-column: 2/span 10
    }
}

.page-subheader-content a {
    background-image: linear-gradient(to right, currentColor 100%, currentColor 0);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 calc(1.05em + 1px)
}

.page-subheader-title {
    color: #161618;
    margin-bottom: 40px
}

.page-nav {
    font-size: 24px;
    line-height: 1.34;
    font-weight: 400;
    padding-top: 40px;
    padding-bottom: 40px
}

@media(min-width:992px) {
    .page-nav {
        padding-top: 80px;
        padding-bottom: 80px;
        font-size: 30px;
        font-weight: 300
    }
}

@media(min-width:992px) {
    .page-nav--large {
        font-size: 45px
    }
}

.page-nav--narrow {
    padding-top: 40px;
    padding-bottom: 40px
}

.page-nav--bottom-border {
    border-bottom: 1px solid #e6e6e6
}

.page-nav-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none
}

.page-nav-list-item {
    position: relative;
    --gap: 40px
}

.page-nav--large .page-nav-list-item {
    --gap: 24px
}

@media(min-width:992px) {
    .page-nav--large .page-nav-list-item {
        --gap: 48px
    }
}

.page-nav-list-item:not(:last-child) {
    margin-right: var(--gap)
}

.page-nav-list-item:not(:last-child)::after {
    position: absolute;
    top: 0;
    left: calc(100% + var(--gap)/2);
    transform: translate(-50%);
    content: '/'
}

.banner {
    display: block;
    position: relative;
    min-height: 600px;
    overflow: hidden;
    background-color: transparent;
    color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

@media(min-width:992px) {
    .banner {
        min-height: 810px
    }
}

.banner p:last-child {
    margin-bottom: 0
}

.banner--fullscreen {
    min-height: auto;
    height: 100vh
}

.banner--dark {
    background-color: #161618
}

.banner--light {
    background-color: #fff;
    color: #161618
}

.banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.banner-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform
}

.banner-content-holder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block
}

.banner-content-holder.cursor-in-progress {
    cursor: none
}

.banner-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom)
}

@media screen and (prefers-reduced-motion:no-preference) {
    .home .banner--fixed-content .banner-content-holder,
    .page-landing-page .banner--fixed-content .banner-content-holder {
        clip: rect(auto, auto, auto, auto)
    }
    .home .banner--fixed-content .banner-content,
    .page-landing-page .banner--fixed-content .banner-content {
        position: fixed
    }
}

.banner-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    height: 40px;
    align-items: start;
}

.banner-logo {
    margin-left: auto;
    width: 75px
}

@media(min-width:768px) {
    .banner-logo {
        width: 160px
    }
}

.banner-copy {
    margin-top: auto
}

.banner-title--inline {
    display: inline-block
}

.banner-tagline {
    color: rgba(255, 255, 255, .7)
}

.banner-tagline .banner--light {
    color: rgba(22, 22, 24, .7)
}

.banner-tagline .lead {
    font-size: 24px;
    color: #fff
}

.banner-tagline .lead .banner--light {
    color: #161618
}

@media(min-width:768px) {
    .banner-tagline .lead {
        font-size: 30px
    }
}

@media screen and (min-width:1280px) and (min-height:600px) {
    .banner-tagline .lead {
        font-size: 45px
    }
}

@media(min-width:768px) {
    .banner-tagline--half-width {
        max-width: 60%
    }
}

.banner--has-side-picture {
    background-color: transparent;
    min-height: auto;
    overflow: visible
}

@media screen and (max-width:767px) {
    .banner--has-side-picture {
        height: auto
    }
    .banner--has-side-picture .banner-content-holder,
    .banner--has-side-picture .banner-content {
        position: relative
    }
}

.banner--has-side-picture .banner--has-side-picture-bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: -1;
    left: 0;
    background-color: #161618
}

@media screen and (prefers-reduced-motion:no-preference) {
    html.js .banner--has-side-picture .banner--has-side-picture-bg {
        height: 140vh
    }
}

.banner--has-side-picture .banner-header {
    margin-bottom: 40px
}

@media(min-width:768px) {
    .banner--has-side-picture .banner-header {
        position: absolute;
        left: var(--container-gutter);
        right: var(--container-gutter)
    }
}

@media(min-width:768px) {
    .banner--has-side-picture .banner-logo {
        position: absolute;
        right: 0;
        max-width: 100px;
        margin-top: 24px;
        margin-right: 24px
    }
}

@media(min-width:1280px) {
    .banner--has-side-picture .banner-logo {
        max-width: 120px;
        margin-top: 32px;
        margin-right: 32px
    }
}

.banner--has-side-picture .banner-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0
}

@media screen and (max-width:767px) {
    .banner--has-side-picture .banner-copy {
        margin-bottom: 60px
    }
}

@media(min-width:768px) {
    .banner--has-side-picture .banner-copy {
        height: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end
    }
}

@media screen and (min-width:768px) and (max-aspect-ratio:3 / 2) {
    .banner--has-side-picture .banner-copy {
        align-items: center
    }
}

.banner--has-side-picture .banner-tagline--half-width {
    width: auto
}

.banner--has-side-picture .banner-side-picture {
    order: -1;
    margin-bottom: 24px;
    width: 100%
}

@media(min-width:768px) {
    .banner--has-side-picture .banner-side-picture {
        order: initial;
        margin-bottom: 0;
        margin-left: 40px;
        max-width: 43%;
        height: 100%;
        object-fit: cover
    }
}

@media screen and (min-width:768px) and (max-aspect-ratio:3 / 2) {
    .banner--has-side-picture .banner-side-picture {
        height: auto
    }
}

@media screen and (prefers-reduced-motion:no-preference) {
    .home .hero {
        z-index: 5
    }
    .home .banner:nth-child(2) {
        z-index: 4
    }
    .home .banner:nth-child(3) {
        z-index: 3
    }
    .home .banner:nth-child(4) {
        z-index: 2
    }
    .home .banner--stick-to-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0
    }
    html.js .home .banner--stick-to-top {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0
    }
}

.let-us-take-care {
    height: 100vh;
}

.let-us-take-care-bottom {
    margin-top: 100%;
}

.banner-portfolio-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 24px;
    line-height: 1.34
}

@media(min-width:768px) {
    .banner-portfolio-list {
        font-size: 24px
    }
}

.banner-portfolio-list li:not(:last-child)::after {
    content: ', ';
    margin-right: .7ch
}

[data-custom-cursor].cursor-in-progress {
    cursor: none
}

@media screen and (max-width:767px) {
    .home .banner--links-list,
    .page-landing-page .banner--links-list {
        height: auto;
        position: relative;
        bottom: auto
    }
    .home .banner--links-list .banner-content-holder,
    .home .banner--links-list .banner-content,
    .page-landing-page .banner--links-list .banner-content-holder,
    .page-landing-page .banner--links-list .banner-content {
        position: static
    }
    .home .banner--links-list .banner-portfolio-list,
    .page-landing-page .banner--links-list .banner-portfolio-list {
        display: inline-block;
        letter-spacing: 0.5px;
        line-height: 2;
        font-size: 22px;
    }
    .home .banner--links-list li,
    .home .banner--links-list a,
    .page-landing-page .banner--links-list li,
    .page-landing-page .banner--links-list a {
        display: inline;
        white-space: normal
    }
    .Window-Image {
        display: none !important;
    }
}

.services-banner {
    padding-top: 80px;
    padding-bottom: 48px
}

@media(min-width:1280px) {
    .services-banner {
        padding-top: 200px;
        padding-bottom: 80px
    }
}

.services-banner-title {
    margin-left: -.1ch;
    margin-bottom: 80px
}

@media(min-width:768px) {
    .services-banner-title {
        margin-bottom: 120px
    }
}

@media(min-width:1280px) {
    .services-banner-title {
        margin-bottom: 208px
    }
}

.services-banner-nav-list {
    margin: 0 0 92px;
    padding: 0;
    list-style: none
}

@media(min-width:768px) {
    .services-banner-nav-list {
        display: grid
    }
}

.services-banner-nav-list-item+.services-banner-nav-list-item {
    margin-top: 32px
}

@media(min-width:768px) {
    .services-banner-nav-list-item {
        grid-column: span 4;
        padding-right: 20px
    }
    .services-banner-nav-list-item+.services-banner-nav-list-item {
        margin-top: 0
    }
}

@media(min-width:1280px) {
    .services-banner-nav-list-item {
        padding-right: calc(var(--grid-gap) + (100% - 3 * var(--grid-gap))/4)
    }
}

@media screen and (max-width:767px) {
    .services-banner-nav-list-item {
        position: relative;
        z-index: 10
    }
    .cs-1-screenshot {
        display: none !important;
    }
    /* NEW CSS ADD FOR SLIDER ---mobile*/
    .img-slider {
        position: relative;
        width: 100vw;
        height: 220px;
        display: block !important;
    }
    .img-slider .slider-container {
        position: absolute;
        width: 300%!important;
        top: 0;
        left: 0;
        overflow: hidden!important;
        animation: slider 10s infinite;
    }
    .img-slider .slider-container .slide {
        position: relative;
        width: 33.33333333%;
        height: 100%;
        float: left;
        overflow: hidden;
        padding: 20px !important;
    }
    .img-slider .slider-container .slide img {
        display: block;
        width: 100%;
        height: 100%
    }
    @keyframes slider {
        0%,
        25%,
        100% {
            left: 0
        }
        30%,
        55% {
            left: -100%
        }
        60%,
        85% {
            left: -200%
        }
    }
    /* End --NEW CSS ADD FOR SLIDER ---Mobile*/
}

.services-banner-nav-title {
    margin-bottom: 16px
}

.services-banner-nav-link {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-size: 24px;
    line-height: 1.34
}

@media(min-width:992px) {
    .services-banner-nav-link {
        font-size: 30px
    }
}

.services-banner-nav-link .icon {
    position: relative;
    top: -20px;
    transform: translate(0, 50%);
    transition: transform .5s .1s cubic-bezier(.39, .58, .57, 1)
}

.services-banner-nav-link:hover .icon {
    transform: translate(15px, 50%)
}

.service-banner-nav-link-text {
    display: block
}

@media(min-width:768px) {
    .service-banner-nav-link-text {
        max-width: 8ch
    }
}

.office-slider {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    overflow: hidden;
    font-size: 24px
}

@media only screen and (min-width:768px) {
    .office-slider {
        font-size: calc(24px + 21 * (100vw - 768px)/(1440 - 768))
    }
}

@media only screen and (min-width:1440px) {
    .office-slider {
        font-size: 45px
    }
}

.office-slider-list {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    will-change: transform
}

.office-slider-list li {
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -.01em;
    color: #252227;
    margin-left: 2vw;
    margin-right: 2vw;
    line-height: 1.2;
    cursor: pointer
}

.office-slider-list li .button-cta {
    white-space: normal
}

.office-slider-list+.office-slider-list {
    margin-top: 2.4vw
}

@media screen and (max-width:767px) {
    .office-slider {
        padding: 8px 16px;
        font-size: 30px;
        height: 256px;
        overflow-y: scroll
    }
    .office-slider-list {
        display: block
    }
    .office-slider-list+.office-slider-list {
        margin: 0
    }
    .office-slider-list li {
        padding-top: 14px;
        padding-bottom: 14px;
        border: 0
    }
    li[aria-hidden=true] {
        display: none
    }
    .office_r_1 {
        display: none !important
    }
}

.metric-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 44px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em
}

@media(min-width:768px) {
    .metric-tags {
        margin-top: 40px
    }
}

.metric-tag-item {
    position: relative
}

.metric-tag-item:not(:last-child) {
    margin-right: 24px
}

.metric-tag-item:not(:last-child)::after {
    position: absolute;
    content: '|';
    left: calc(100% + 12px);
    transform: translate(-50%)
}

.about-section {
    background-color: #161618;
}

.about-section:nth-of-type(2n) {
    background-color: #161618;
}

.about-section-header {
    padding-top: var(--section-padding-top);
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media screen and (max-width:300px) {
    .about-section-header {
        display: block !important
    }
}

@media(min-width:768px) {
    .about-section-header {
        padding-bottom: var(--section-padding-top)
    }
}

.about-section-header h2 {
    margin-bottom: 0
}

@media screen and (max-width:300px) {
    .about-section-header h2 {
        margin-bottom: 10px
    }
}

.about-section-body {
    position: relative;
    padding-top: var(--section-padding-top);
    padding-bottom: calc(var(--section-padding-bottom) * 1.5);
    display: grid
}

@media(min-width:768px) {
    .about-section-body {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-gap: var(--grid-gap);
        padding-left: 0%;
    }
}

@media screen and (min-width:1200px) {
    .about-section-body {
        padding-left: calc(((100% - 11 * var(--grid-gap))/12) * 3 + (3 * var(--grid-gap)));
        padding-left: 0px;
    }
}

.about-section-body ul {
    margin: 0;
    list-style: none
}

.about-section-column {
    position: relative;
    padding-bottom: 8px
}

.about-section-column+.about-section-column {
    margin-top: 40px
}

@media screen and (max-width:767px) {
    .about-section-column+.about-section-column {
        margin-top: 0 !important
    }
}

@media(min-width:768px) {
    .about-section-column {
        grid-column: span 3
    }
    .about-section-column+.about-section-column {
        margin-top: 0
    }
}

.about-section-column .about-section-picture-container {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 75px;
    line-height: 1
}

@media screen and (max-width:150px) {
    .about-section-column .about-section-picture-container {
        margin-bottom: 120px !important
    }
    .about-section-column .about-section-picture-container .about-section-person-position {
        line-height: 1.2
    }
}

.about-section-column .about-section-picture-container .about-section-linkedin {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    display: none
}

.about-section-column .about-section-picture-container .about-section-linkedin .linkedin {
    position: absolute;
    height: 30px;
    width: 30px;
    bottom: 20px;
    right: 20px
}

.about-section-column .about-section-picture-container:hover img.about-section-person-image {
    display: block;
    filter: brightness(80%)
}

.about-section-column .about-section-picture-container:hover .about-section-linkedin {
    display: block;
    position: absolute;
    z-index: 10;
    bottom: 0
}

.about-section-column .about-person-info {
    position: absolute;
    bottom: 0
}

.about-section-column-title {
    margin-bottom: 12px
}

@media(min-width:768px) {
    .about-section-column-title {
        margin-bottom: 40px
    }
}

.about-section-list-item+.about-section-list-item {
    margin-top: 8px
}

.about-section-link:hover {
    background-image: linear-gradient(to right, currentColor 100%, currentColor 0);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 calc(1em + 1px)
}

.about-section-award-link {
    display: none
}

@media(min-width:768px) {
    .about-section-award-link {
        display: inline-flex
    }
}

.about-section-service-cta-button {
    position: absolute;
    right: 16px;
    bottom: 28px
}

@media(min-width:768px) {
    .about-section-service-cta-button {
        display: none
    }
}

@media screen and (max-width:479px) {
    .about-section-service-cta-button {
        position: static;
        margin-right: 0;
        margin-left: auto
    }
    .Window-Image {
        display: none !important;
    }
}

.about-section-award-logo {
    margin-bottom: 0
}

@media(min-width:768px) {
    .about-section-award-logo {
        margin-bottom: 0
    }
}

@media(min-width:1280px) {
    .about-section-award-logo {
        margin-bottom: 0
    }
}

.about-section-award-name {
    font-size: 18px;
    line-height: 1.5666;
    margin-bottom: 4px
}

.about-section-client-link {
    display: none
}

@media(min-width:768px) {
    .about-section-client-link {
        display: inline-flex
    }
}

#about-section-type-clients .about-section-body-type-clients {
    padding-bottom: 200px;
    display: block !important
}

#about-section-type-clients .about-section-body-type-clients .slide {
    height: 10vh;
    display: inline-flex !important;
    justify-content: center;
    align-items: normal;
    margin-bottom: 80px
}

#about-section-type-clients .about-section-body-type-clients .slide img {
    max-width: 150px;
    max-height: 100%;
    width: 100%;
    height: auto
}

@media screen and (max-width:600px) {
    #about-section-type-clients .about-section-body-type-clients {
        padding-top: 50px
    }
    #about-section-type-clients .about-section-body-type-clients .slide {
        display: flex !important;
        margin: 0 auto;
        align-items: center;
        justify-content: center
    }
}

#about-section-type-clients .slick-slider .slider_prev {
    position: absolute;
    bottom: 80px;
    right: 100px
}

#about-section-type-clients .slick-slider .slider_next {
    position: absolute;
    bottom: 80px;
    right: 50px
}

#about-section-type-clients .slick-slider img {
    width: 26px;
    margin: 0 auto
}

@media screen and (max-width:767px) {
    .about-section-body--people {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 40px var(--grid-gap)
    }
}

.about-section-column--person {
    grid-column: span 2
}

@media screen and (max-width:767px) {
    .about-section-column--person+.about-section-column--person {
        margin-top: 0
    }
}

@media(min-width:768px) {
    .about-section-column--person {
        grid-column: span 3
    }
}

@media screen and (max-width:500px) {
    .about-section-column--person {
        grid-column: span 4
    }
}

.about-section-portrait {
    display: block;
    width: 100%;
    margin-bottom: 28px
}

@media(min-width:768px) {
    .about-section-portrait {
        margin-bottom: 40px
    }
}

.about-section-person-name {
    line-height: 1.34
}

.about-section-people-filter {
    display: flex;
    font-size: 24px
}

.about-section-people-filter-list {
    display: none;
    margin: 0;
    list-style: none
}

@media(min-width:768px) {
    .about-section-people-filter-list {
        display: flex
    }
}

.about-section-people-filter-list li {
    margin-left: 3vw
}

@media(min-width:1280px) {
    .about-section-people-filter-list li {
        margin-left: 96px
    }
}

.about-section-people-filter-list a {
    position: relative;
    display: inline-flex
}

.about-section-people-filter-list a::after {
    position: absolute;
    left: 0;
    top: calc(1.2em + 1px);
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform-origin: 0 0;
    transform: scale(.1, 1);
    opacity: 0;
    content: ''
}

.about-section-people-filter-list a.is-active::after,
.about-section-people-filter-list a:hover::after {
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transform: scale(1, 1);
    opacity: 1
}

.about-section-people-filter-dropdown {
    max-width: 150px
}

@media(min-width:768px) {
    .about-section-people-filter-dropdown {
        display: none
    }
}

.about-section-colum-copy {
    margin-bottom: 24px
}

@media(min-width:768px) {
    .about-section-colum-copy {
        padding-right: 24px
    }
}

.about-section-column--more {
    display: flex;
    flex-direction: column
}

.about-arrow-link {
    display: block;
    margin-top: auto
}

.arrow-link--left .icon {
    transform: rotate(-180deg)
}

@media screen and (max-width:767px) {
    .about-section-body-type-industries {
        grid-template-columns: repeat(6, 1fr)
    }
    .about-section-body-type-industries .about-section-column {
        grid-column: span 3
    }
}

@media screen and (max-width:580px) {
    .about-section-body-type-industries {
        grid-template-columns: repeat(4, 1fr)
    }
    .about-section-body-type-industries .about-section-column {
        grid-column: span 2
    }
}

@media screen and (max-width:370px) {
    .about-section-body-type-industries {
        display: block !important;
        height: 500px !important;
        overflow-x: auto !important
    }
    .about-section-body-type-industries .about-section-column {
        display: block !important
    }
}

@media screen and (max-width:400px) {
    .slick-slide div:nth-child(1) {
        float: left
    }
    .slick-slide div:nth-child(2) {
        float: right
    }
}

.tech-mahindra-content {
    padding-top: var(--section-padding-top)
}

.tech-mahindra-title {
    margin-bottom: 0
}

@media(min-width:992px) {
    .tech-mahindra-title {
        margin-bottom: 0
    }
}

.tech-mahindra-copy {
    font-size: 24px
}

@media(min-width:992px) {
    .tech-mahindra-copy {
        font-size: 30px;
        max-width: 840px
    }
}

.tech-mahindra-copy p {
    margin-bottom: 1em
}

.award-header {
    display: none
}

@media(min-width:768px) {
    .award-header {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        margin-bottom: 24px;
        margin-top: 96px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: var(--grid-gap)
    }
}

.award-header-name {
    grid-column: span 7
}

.award-header-project {
    grid-column: span 3
}

.award-header-year {
    grid-column: span 2
}

.award-item {
    font-size: 30px;
    line-height: 1.34;
    padding: 40px 0;
    border-bottom: 1px solid #e6e6e6
}

.award-item:last-child {
    border-bottom: 0
}

@media(min-width:768px) {
    .award-item {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: var(--grid-gap);
        padding: 44px 0;
        font-size: 24px
    }
}

@media(min-width:1280px) {
    .award-item {
        font-size: 30px
    }
}

@media screen and (max-width:767px) {
    .award-name::before,
    .award-project::before,
    .award-year::before {
        display: block;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em
    }
    .award-name {
        margin-bottom: 40px
    }
    .award-name::before {
        content: 'Award'
    }
    .award-project {
        margin-bottom: 40px
    }
    .award-project::before {
        content: 'Project'
    }
    .award-year::before {
        content: 'Year'
    }
}

@media(min-width:768px) {
    .award-name {
        padding-right: 40px;
        grid-column: span 7
    }
}

@media(min-width:768px) {
    .award-project {
        grid-column: span 3
    }
}

@media(min-width:768px) {
    .award-year {
        grid-column: span 2
    }
}

.award-table.show-first-10 .award-item:nth-child(10)~.award-item {
    display: none
}

#client-single-page-listing {
    display: grid;
    grid-gap: 80px;
    padding: 80px 0;
    grid-template-columns: repeat(7, auto);
    grid-template-rows: repeat(1, 110px);
    align-content: space-around;
    justify-content: space-between
}

#client-single-page-listing .client {
    display: flex;
    align-items: center
}

#client-single-page-listing .client .clients-section-logo {
    max-height: 110px;
    margin: 0 auto
}

@media screen and (max-width:1600px) {
    #client-single-page-listing {
        grid-template-columns: repeat(6, auto) !important
    }
}

@media screen and (max-width:1400px) {
    #client-single-page-listing {
        grid-template-columns: repeat(5, auto) !important
    }
}

@media screen and (max-width:950px) {
    #client-single-page-listing {
        grid-template-columns: repeat(auto-fit, minmax(127px, 1fr)) !important
    }
}

@media screen and (max-width:373px) {
    #client-single-page-listing {
        display: block !important
    }
    #client-single-page-listing .client {
        display: block !important;
        text-align: center !important;
        margin: 0 auto 50px !important;
        max-width: 70% !important
    }
    #client-single-page-listing .client .clients-section-logo {
        max-height: 110px !important;
        margin: 0 auto
    }
}

.video-section {
    position: relative
}

.video-section video {
    display: block;
    width: 100%
}

.video-section--autoplay {
    height: 100vh
}

.video-section--autoplay video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
    object-position: center
}

@media(any-hover:none) {
    .video-section--controlled::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(22, 22, 24, .25);
        content: ''
    }
}

.video-overlay {
    display: none
}

@media screen and (hover:hover) {
    .video-overlay {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(22, 22, 24, .25);
        padding: 0;
        border: 0;
        transition: opacity 1s ease
    }
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 80px;
    height: 80px;
    padding: 0;
    border-radius: 50%;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #fff;
    transition: opacity 1s ease, transform .3s ease
}

.video-play-button::after {
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -5px;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    content: ''
}

.video-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1)
}

.video-copy {
    position: absolute;
    right: var(--container-gutter);
    bottom: var(--section-padding-bottom);
    color: #fff;
    transition: opacity 1s ease;
    display: none
}

@media(min-width:768px) {
    .video-copy {
        display: block;
        width: 32%
    }
}

@media(min-width:1280px) {
    .video-copy {
        width: 27.77%
    }
}

.video-section.is-playing .video-play-button,
.video-section.is-playing .video-overlay,
.video-section.is-playing .video-copy {
    opacity: 0;
    pointer-events: none
}

.wp-block-video {
    marign-botton: 0
}

.stella-hero {
    background-color: #161618;
    color: #fff;
    padding-top: calc(var(--section-padding-top) + 60px);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center
}

@media(min-width:768px) {
    .stella-hero {
        min-height: auto;
        height: 100vh;
        padding-top: calc(var(--section-padding-top) + 22px);
        overflow: hidden;
        flex-direction: row;
        justify-content: space-between
    }
}

@media screen and (max-width:767px) {
    .stella-hero .hero-breadcrumbs {
        order: -2
    }
}

@media(min-width:768px) {
    .stella-hero-content,
    .stella-hero-gooey-holder {
        flex: 0 0 calc(50% - var(--grid-gap)/2);
        max-width: calc(50% - var(--grid-gap)/2)
    }
}

.stella-hero-content {
    position: relative;
    will-change: transform;
    transition: transform 1s ease
}

.stella-hero-content .hero-breadcrumbs {
    margin-bottom: 16px
}

.stella-hero-title {
    margin-bottom: 0;
    line-height: 1.05
}

@media(min-width:768px) {
    .stella-hero-title {
        line-height: 1.1666;
        font-size: 42px
    }
}

@media only screen and (min-width:768px) and (min-width:768px) {
    .stella-hero-title {
        font-size: calc(42px + 28 * (100vw - 768px)/(1440 - 768))
    }
}

@media only screen and (min-width:768px) and (min-width:1440px) {
    .stella-hero-title {
        font-size: 70px
    }
}

.stella-hero-content-frame {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.stella-hero-content-frame.frame-2 {
    position: absolute;
    top: 0;
    opacity: 0
}

.stella-hero-content-frame.frame-2 .stella-hero-title {
    margin-bottom: .6em
}

.stella-hero-tagline {
    opacity: 0
}

.stella-hero-gooey-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    order: -1;
    margin-bottom: 40px;
    filter: url(#goo)
}

@media(min-width:768px) {
    .stella-hero-gooey-holder {
        height: 100%;
        margin-bottom: 0;
        order: 0
    }
}

.stella-circle {
    color: #fff
}

@media screen and (max-width:767px) {
    .stella-circle {
        position: relative;
        width: 278px;
        height: 278px
    }
    .stella-circle:not(:last-child) {
        display: none
    }
}

@media(min-width:768px) {
    .stella-circle {
        position: absolute;
        width: 27.75vw;
        height: 27.75vw
    }
}

.stella-circle-body {
    background-color: #eb394a;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

@media screen and (max-width:479px) {
    .stella-circle-body {
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px
    }
}

.stella-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: 400
}

@media only screen and (min-width:768px) {
    .stella-circle-text {
        font-size: calc(30px + 50 * (100vw - 768px)/(1440 - 768))
    }
}

@media only screen and (min-width:1440px) {
    .stella-circle-text {
        font-size: 80px
    }
}

html.js .stella-hero-content-frame.frame-1 .stella-hero-title {
    opacity: 0
}

html.js .stella-hero-content-frame.frame-1 .stella-hero-title.text-reveal-animate {
    opacity: 1
}

html,
body {
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory
}

.js .stella-hero.is-snapped {
    scroll-snap-align: start
}

.js .stella-carousel.is-snapped {
    scroll-snap-align: start
}

.stella-carousel {
    position: relative;
    min-height: 100vh;
    outline: none;
    overflow: hidden
}

.stella-carousel .flickity-page-dots {
    position: absolute;
    left: var(--container-gutter);
    bottom: 20px;
    list-style: none;
    display: flex;
    margin: 60px 0 0;
    height: 40px;
    align-items: flex-end;
    z-index: 3
}

@media(min-width:768px) {
    .stella-carousel .flickity-page-dots {
        bottom: var(--section-padding-bottom)
    }
}

.stella-carousel .dot {
    position: relative;
    display: block;
    width: 60px;
    cursor: pointer;
    height: 40px;
    padding: 19px 0 20px;
    background-clip: content-box;
    background-color: rgba(255, 255, 255, .25)
}

.stella-carousel .dot::after {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #fff;
    content: '';
    transform: scale(.001, 1);
    transform-origin: 0 0
}

.stella-carousel.is-in-view .dot.is-selected::after {
    transition: transform 10s;
    transform: scale(1, 1)
}

.stella-carousel-item {
    width: 100%;
    min-height: 100vh;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: var(--section-padding-top) var(--container-gutter) var(--section-padding-bottom)
}

@media(min-width:768px) {
    .stella-carousel-item {
        min-height: auto;
        height: 100vh
    }
}

.stella-carousel-item-bx {
    background-color: #002e4d
}

.stella-carousel-item-br {
    background-color: #049785
}

.stella-carousel-item-br .link-cta {
    color: rgba(255, 255, 255, .7)
}

.stella-carousel-item-be {
    background-color: #067d8b
}

.stella-carousel-item-be .link-cta {
    color: rgba(255, 255, 255, .7)
}

.stella-carousel-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: 32px
}

@media(min-width:768px) {
    .stella-carousel-column {
        padding-bottom: 0;
        justify-content: center;
        flex: 0 0 calc(50% - var(--grid-gap)/2);
        max-width: calc(50% - var(--grid-gap)/2)
    }
}

.stella-carousel-item-type {
    margin-bottom: 24px
}

.stella-carouse-item-title {
    margin-bottom: 32px;
    line-height: 1.05;
    font-size: 55px
}

@media(min-width:768px) {
    .stella-carouse-item-title {
        margin-top: auto;
        font-size: 42px
    }
}

@media only screen and (min-width:768px) and (min-width:768px) {
    .stella-carouse-item-title {
        font-size: calc(42px + 28 * (100vw - 768px)/(1440 - 768))
    }
}

@media only screen and (min-width:768px) and (min-width:1440px) {
    .stella-carouse-item-title {
        font-size: 70px
    }
}

@media(min-width:768px) {
    .stella-carouse-item-cta {
        margin-bottom: auto
    }
}

.stella-carousel-circles {
    position: absolute;
    top: calc(var(--section-padding-top));
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 53vw;
    z-index: 2;
    border: 0 !important
}

@media screen and (max-width:767px) and (min-height:750px) {
    .stella-carousel-circles {
        top: calc(var(--section-padding-top) + 5vh)
    }
}

@media(min-width:768px) {
    .stella-carousel-circles {
        position: absolute;
        top: 0;
        left: auto;
        right: var(--container-gutter);
        width: calc((100vw - var(--container-gutter) * 2)/2 - var(--grid-gap)/2);
        height: 100vh
    }
}

.stella-carousel-circles-wrapper {
    margin-right: 53vw
}

@media(min-width:768px) {
    .stella-carousel-circles-wrapper {
        margin-right: 27vw
    }
}

.stella-carousel-circles-wrapper .stella-carousel-circle.is-current {
    opacity: 1;
    z-index: 3;
    pointer-events: auto
}

.stella-carousel-circles-wrapper .stella-carousel-circle-bx {
    background-color: #024b7b
}

.stella-carousel-circles-wrapper .stella-carousel-circle-be {
    background-color: #06a0b1
}

.stella-carousel-circles-wrapper .stella-carousel-circle-br {
    background-color: #03c0ad
}

.stella-carousel-circle {
    position: absolute;
    width: 53vw;
    height: 53vw;
    background-color: #064874;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 400;
    transition: transform .5s, opacity .5s, z-index 1ms .25s;
    opacity: .2;
    letter-spacing: .01em
}

@media(min-width:768px) {
    .stella-carousel-circle {
        width: 27vw;
        height: 27vw;
        font-size: 30px
    }
}

@media only screen and (min-width:768px) and (min-width:768px) {
    .stella-carousel-circle {
        font-size: calc(30px + 50 * (100vw - 768px)/(1440 - 768))
    }
}

@media only screen and (min-width:768px) and (min-width:1440px) {
    .stella-carousel-circle {
        font-size: 80px
    }
}

.stella-carousel-circle.is-previous {
    transform: translate(-50%) scale(.65)
}

.stella-carousel-circle.is-next {
    transform: translate(50%) scale(.65)
}

.stella-carousel-item-type {
    opacity: 0;
    transition: opacity .6s .35s ease-in-out
}

.stella-carouse-item-title {
    opacity: 0;
    transition: opacity .6s .35s ease-in-out
}

.stella-carouse-item-cta {
    opacity: 0;
    transition: opacity .6s .65s ease-in-out
}

.stella-carousel-item.is-selected .stella-carousel-item-type,
.stella-carousel-item.is-selected .stella-carouse-item-title,
.stella-carousel-item.is-selected .stella-carouse-item-cta {
    opacity: 1
}

.stella-carousel-item.has-active-modal .stella-carousel-item-type {
    transition-delay: 0s;
    opacity: 0
}

.stella-carousel-item.has-active-modal .stella-carouse-item-title {
    transition-delay: 0s;
    opacity: 0
}

.stella-carousel-item.has-active-modal .stella-carouse-item-cta {
    transition-delay: 0s;
    opacity: 0
}

.stella-carousel-circles {
    transition: opacity .6s .75s ease-in-out;
    opacity: 1;
    outline: 0
}

.stella-carousel-circles.has-active-modal {
    transition-delay: .25s;
    opacity: 0
}

.stella-modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100
}

html.has-open-dialog .stella-modal {
    overflow-x: hidden;
    overflow-y: auto
}

.stella-modal-dialog {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
    color: #fff
}

@media(min-width:768px) {
    .stella-modal-dialog {
        display: flex;
        flex-direction: column
    }
}

.stella-modal-header {
    position: relative;
    padding-top: var(--section-padding-top);
    margin-bottom: var(--section-padding-top)
}

.stella-modal-back-button {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    color: #fff;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer
}

.stella-modal-back-button .icon {
    transform: rotate(-180deg);
    margin-right: 16px
}

.stella-modal-body {
    padding-bottom: var(--section-padding-bottom)
}

@media(min-width:768px) {
    .stella-modal-body {
        margin-top: auto;
        margin-bottom: auto
    }
}

.stella-modal-content {
    position: relative;
    margin-bottom: 80px
}

@media(min-width:768px) {
    .stella-modal-content {
        grid-column: span 5;
        margin-bottom: 0
    }
}

@media(min-width:1280px) {
    .stella-modal-content {
        grid-column: span 4
    }
}

.stella-modal-content .link-cta {
    transition: -webkit-text-decoration .3s ease-in-out;
    transition: text-decoration .3s ease-in-out;
    transition: text-decoration .3s ease-in-out, -webkit-text-decoration .3s ease-in-out;
    color: #fff;
    -webkit-text-decoration: underline solid transparent;
    text-decoration: underline solid transparent;
    display: inline-block;
    padding-top: 20px
}

.stella-modal-content .link-cta .icon {
    position: relative;
    top: 6px
}

.stella-modal-content .link-cta:hover {
    -webkit-text-decoration: underline solid #fff;
    text-decoration: underline solid #fff
}

.stella-modal-content .link-cta:after {
    display: none
}

.stella-modal-title {
    margin-bottom: 40px
}

.stella-modal-list-holder {
    position: relative
}

@media(min-width:768px) {
    .stella-modal-list-holder {
        grid-column: span 7
    }
}

@media(min-width:1280px) {
    .stella-modal-list-holder {
        grid-column: span 7;
        padding-left: calc((1 * (100% - 6 * var(--grid-gap))/7) + 1 * var(--grid-gap))
    }
}

.stella-modal-list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: var(--grid-gap)
}

.stella-modal-list-item {
    position: relative;
    display: inline-block;
    width: 100%;
    color: rgba(255, 255, 255, .7);
    padding-top: 16px;
    padding-bottom: 16px;
    margin-top: -1px;
    page-break-inside: avoid;
    break-inside: avoid
}

.stella-modal-list-item::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    content: ''
}

.stella-modal-dialog {
    opacity: 1;
    overflow: hidden;
    transition: background-color 0s
}

.stella-modal-bx.is-visible .stella-modal-dialog {
    transition: background-color 0s .6s;
    background-color: #064874
}

.stella-modal-header,
.stella-modal-content,
.stella-modal-list-holder {
    opacity: 0;
    transition: opacity .6s
}

.stella-modal.is-visible .stella-modal-header,
.stella-modal.is-visible .stella-modal-content,
.stella-modal.is-visible .stella-modal-list-holder {
    transition: opacity .6s .2s;
    opacity: 1
}

.stella-modal-background {
    position: absolute;
    top: 50vh;
    left: 50vw;
    margin-top: -100vmax;
    margin-left: -100vmax;
    transform: scale(.001);
    transition: all .6s cubic-bezier(.52, .49, .6, .86);
    width: 200vmax;
    height: 200vmax;
    border-radius: 50%
}

.stella-modal-bx .stella-modal-background {
    background-color: #064874
}

.stella-modal-be .stella-modal-background {
    background-color: #0493a3
}

.stella-modal-br .stella-modal-background {
    background-color: #05ac9b
}

.stella-modal.is-visible .stella-modal-background {
    transform: scale(1) !important
}

.about-Technology-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    margin: 10vh auto;
}

.about-Technology-banner-header {
    padding-top: var(--section-padding-top);
    margin-bottom: 40px
}

@media(min-width:768px) {
    .about-Technology-banner-header {
        margin-bottom: 40px
    }
}

.about-Technology-banner-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 40px;
}

@media(min-width:768px) {
    .about-Technology-banner-content {
        flex-direction: row;
        justify-content: center;
        align-items: stretch
    }
}

.about-Technology-banner-copy {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    order: 1
}

@media(min-width:768px) {
    .about-Technology-banner-copy {
        margin-top: 0;
        flex: 0 0 52%;
        max-width: 52%;
        order: 0
    }
}

.about-Technology-banner-title {
    margin-bottom: 0
}

@media(min-width:768px) {
    .about-Technology-banner-title {
        margin-top: auto;
        margin-bottom: auto;
    }
}

.about-Technology-banner-cta-link {
    display: none
}

@media(min-width:768px) {
    .about-Technology-banner-cta-link {
        display: inline-flex
    }
}

.about-Technology-banner-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 36px
}

@media(min-width:768px) {
    .about-Technology-banner-aside {
        margin-bottom: 0;
        flex-shrink: 0;
        max-width: 42.8%
    }
}

.about-Technology-banner-aside .stella-circle {
    display: block !important
}

.about-Technology-banner-aside .stella-circle:not(:first-child) {
    position: absolute
}

.about-Technology-banner-aside .stella-circle .stella-circle-text {
    opacity: 1
}

.about-Technology-banner-aside .stella-circle-1 {
    transform: translate(0, -35%) scale(.65)
}

.about-Technology-banner-aside .stella-circle-1 .stella-circle-body {
    background-color: #024874
}

.about-Technology-banner-aside .stella-circle-2 {
    transform: translate(-36%, 31%) scale(.65)
}

.about-Technology-banner-aside .stella-circle-2 .stella-circle-body {
    background-color: #0396a6
}

.about-Technology-banner-aside .stella-circle-3 {
    transform: translate(36%, 31%) scale(.65)
}

.about-Technology-banner-aside .stella-circle-3 .stella-circle-body {
    background-color: #03c0ad
}

.services-section.no-slider {
    margin-top: 80px;
    margin-bottom: 120px
}

@media(min-width:768px) {
    .services-section.no-slider {
        margin-top: 0;
        margin-bottom: 0
    }
}

@media(min-width:768px) {
    .services-slider-item {
        padding-bottom: 80px;
        padding-top: 80px
    }
}

.services-slider-item+.services-slider-item {
    margin-top: 112px
}

@media(min-width:768px) {
    .services-slider-item+.services-slider-item {
        margin-top: 0
    }
}

@media(min-width:768px) {
    .no-slider .services-slider-item:nth-child(2n) {
        background-color: #161618;
        color: #fff
    }
}

.services-slider-item-image {
    display: block;
    width: 100%;
    height: 425px;
    margin-bottom: 60px;
    object-fit: cover;
    object-position: right center
}

@media(min-width:768px) {
    .services-slider-item-image {
        height: 600px;
        margin-bottom: 0;
        grid-column: 7/span 6;
        order: 1
    }
}

@media(min-width:768px) {
    .services-slider-item-content {
        display: flex;
        flex-direction: column;
        grid-column: span 5
    }
}

.services-slider-item-title {
    font-size: 45px;
    margin-bottom: 20px
}

@media(min-width:992px) {
    .services-slider-item-title {
        margin-top: 40px
    }
}

.service-slider-item-description {
    opacity: .7;
    margin-bottom: 60px
}

@media(min-width:992px) {
    .service-slider-item-description {
        margin-bottom: 80px
    }
}

.service-slider-item-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.service-slider-item-list.has-hover-within a {
    opacity: .3
}

.service-slider-item-list.has-hover-within a:hover {
    opacity: 1
}

@media(min-width:768px) {
    .service-slider-item-list {
        margin-top: auto
    }
}

.service-slider-item-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    line-height: 1.6667;
    padding: 16px 0;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    margin-top: -1px;
    transition: opacity .5s ease
}

.service-slider-item-link::before {
    display: block;
    position: absolute;
    top: -1px;
    right: 0;
    bottom: -1px;
    left: 0;
    border-bottom: 1px solid #161618;
    content: '';
    transform: scale(.001, 1);
    opacity: 0;
    transform-origin: 0 0;
    z-index: 100;
    transition: all .5s ease
}

.service-slider-item-link:hover::before {
    transform: scale(1, 1);
    opacity: 1
}

.service-slider-item-link:hover .icon {
    opacity: .7;
    transform: translate(2px)
}

.service-slider-item-link .icon {
    transition: all .6s ease;
    opacity: .2
}

.no-slider .services-slider-item:nth-child(2n) .service-slider-item-link {
    border-top: 1px solid rgba(230, 230, 230, .1);
    border-bottom: 1px solid rgba(230, 230, 230, .1)
}

.no-slider .services-slider-item:nth-child(2n) .service-slider-item-link::before {
    border-bottom: 1px solid #fff;
    content: '';
    transform-origin: 0 0;
    z-index: 100;
    transition: all .5s ease
}

.no-slider .services-slider-item:nth-child(2n) .service-slider-item-link .icon {
    transition: all .6s ease;
    opacity: .7
}

.services-slider {
    margin-top: 80px;
    margin-bottom: 120px;
    overflow: hidden;
    outline: none
}

@media(min-width:992px) {
    .services-slider {
        margin-bottom: 140px
    }
}

.services-slider::after {
    display: none
}

@media(min-width:768px) {
    .services-slider::after {
        content: 'flickity'
    }
}

.services-slider.cursor-in-progress {
    cursor: none
}

@media(min-width:768px) {
    .services-slider .services-slider-item {
        width: calc(100% - 2 * var(--container-gutter));
        padding-top: 0;
        padding-bottom: 0
    }
}

.services-slider .services-slider-item-image {
    order: 0;
    grid-column: span 7
}

.services-slider .flickity-page-dots {
    position: absolute;
    left: var(--container-gutter);
    list-style: none;
    display: flex;
    margin: 60px 0 0;
    height: 2px;
    align-items: flex-end;
    pointer-events: none
}

.services-slider .dot {
    display: block;
    width: 60px;
    height: 1px;
    opacity: .3;
    background-color: #161618
}

.services-slider .dot.is-selected {
    height: 2px;
    opacity: 1
}

@media screen and (max-width:991px) {
    .services-tabs {
        display: block;
        padding-top: 40px;
        padding-bottom: 80px
    }
    .services-tabs-title {
        margin-bottom: 40px
    }
    .service-tab {
        line-height: 1.34
    }
    .service-tab-title {
        position: relative;
        font-size: 18px;
        margin-bottom: 0;
        padding-top: 20px;
        padding-bottom: 20px
    }
    .service-tab-title::before {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        width: 12px;
        height: 2px;
        background-color: #161618;
        content: ''
    }
    .service-tab-title::after {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translate(0, -50%);
        width: 2px;
        height: 12px;
        background-color: #161618;
        content: ''
    }
    .service-tab-content {
        display: none;
        padding-bottom: 20px
    }
    .service-tab.is-active .service-tab-content {
        display: block
    }
    .contact-form {
        margin-top: 40px;
    }
}

@media(min-width:992px) {
    .services-tabs {
        padding-top: 80px;
        padding-bottom: 80px
    }
    .services-tabs-title {
        grid-column: span 3
    }
    .service-tab-list {
        position: relative;
        grid-column: span 9
    }
    .service-tab-title {
        display: inline-block;
        width: 40%;
        margin-bottom: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        border-right: 1px solid #e6e6e6;
        font-size: 18px
    }
    .service-tab-title.is-active {
        pointer-events: none
    }
    .service-tab-title span {
        transition: opacity .2s ease-in-out;
        opacity: .4
    }
    .service-tab-title:hover span {
        display: inline-block;
        background-image: linear-gradient(to right, currentColor 100%, currentColor 0);
        background-repeat: repeat-x;
        background-size: 1px 1px;
        background-position: 0 calc(1.2em + 1px);
        opacity: .7
    }
    .is-active .service-tab-title span {
        display: inline-block;
        opacity: 1;
        background-image: linear-gradient(to right, currentColor 100%, currentColor 0);
        background-repeat: repeat-x;
        background-size: 1px 1px;
        background-position: 0 calc(1.2em + 1px)
    }
    .is-active .service-tab-title {
        position: relative
    }
    .is-active .service-tab-title :after,
    .is-active .service-tab-title :before {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: ' ';
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none
    }
    .is-active .service-tab-title :after {
        border-color: transparent;
        border-left-color: #fff;
        border-width: 24px;
        margin-top: -24px
    }
    .is-active .service-tab-title :before {
        border-color: transparent;
        border-left-color: #e6e6e6;
        border-width: 25px;
        margin-top: -25px
    }
    .service-tab-content {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        max-width: 50%;
        opacity: 0;
        transition: all .5s ease-in-out
    }
    .service-tab.is-active .service-tab-content {
        opacity: 1
    }
}

.industries-section {
    padding-top: 80px;
    padding-bottom: 80px;
    grid-row-gap: 0
}

@media(min-width:768px) {
    .industries-section {
        padding-top: 208px
    }
}

.industries-description {
    margin-bottom: 40px
}

@media(min-width:768px) {
    .industries-description {
        grid-column: 2/span 10;
        margin-bottom: 48px
    }
}

@media(min-width:992px) {
    .industries-description {
        grid-column: 3/span 8;
        margin-bottom: 96px
    }
}

@media(min-width:1440px) {
    .industries-description {
        grid-column: 4/span 6
    }
}

@media(min-width:768px) {
    .industry-list {
        grid-column: 2/span 10
    }
}

@media(min-width:992px) {
    .industry-list {
        grid-column: 3/span 10
    }
}

@media(min-width:1440px) {
    .industry-list {
        grid-column: 4/span 9
    }
}

.industry-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.industry-list.has-hover-within .industry-link {
    opacity: .2
}

.industry-list.has-hover-within .industry-link:hover {
    opacity: 1
}

.industry-link {
    position: relative;
    display: inline-block;
    font-size: 30px;
    transition: opacity .5s ease;
    line-height: 1.1666
}

@media(min-width:768px) {
    .industry-link {
        font-size: 45px
    }
}

@media(min-width:1280px) {
    .industry-link {
        font-size: 70px
    }
}

.industry-link-title {
    position: relative;
    display: inline-block;
    font-size: 30px;
    line-height: 1.1666;
    letter-spacing: -.015em;
    white-space: nowrap
}


/* add Css for mobile  */

@media screen and (max-width:479px) {
    .industry-link-title {
        font-size: 25px
    }
    .site-branding {
        position: relative;
        z-index: 30;
    }
    /* about page */
    /* Footer copyright text */
    /* 42nite */
    .cs-fifty-fifty-column {
        font-size: 18px!important;
        display: flex!important;
        flex-direction: column!important;
    }
    .cs-showcase-content {
        position: absolute;
        top: 80px;
        font-size: 20px!important;
        line-height: 1.75!important;
        font-weight: 600;
    }
    .cs-intro-main {
        font-size: 22px!important;
        line-height: 1.34!important;
    }
    /* v2 start */
    .cs-fifty-fifty-column:last-child,
    .cs-fifty-fifty-screenshot-holder {
        align-self: center !important;
    }
    /* header-name big */
    .mobile-big-img {
        display: block;
        position: absolute;
        top: 50vh;
        left: 50vw;
        transform: translate(-50%, -50%);
        width: 62%;
        height: 100px;
    }
    .cs-grid-item-bg {
        height: 670px;
    }
    /* work page  */
    .cs-grid-item-content {
        margin-left: 3px !important;
        margin-right: -3px !important;
        padding-bottom: 5px !important;
    }
    /* stargyan text */
    .cs-1-hero-content {
        padding: 80px var(--container-gutter);
        font-size: 22px !important;
        line-height: 1.34 !important;
        letter-spacing: -.01em !important;
        background-color: #161618 !important;
    }
    /* .cs-1-hero-aside{
    height: 100vh;
    order:  !important;
} */
    .cs-intro-main {
        font-size: 20px !important;
        line-height: 1.60 !important;
    }
    .site-header #page_nav {
        right: 56px !important;
    }
    .cs-point {
        font-size: 20px!important;
        line-height: 1.65!important;
        text-align: center;
    }
    .cs-double-screenshot-title,
    h3 {
        font-size: 18px!important;
        font-weight: 500 !important;
        line-height: 1.34!important;
    }
    .cs-showcase-content p {
        font-size: 17px !important;
    }
}

@media(min-width:768px) {
    .industry-link-title {
        font-size: 45px
    }
}

@media(min-width:1280px) {
    .industry-link-title {
        font-size: 70px
    }
}

.industry-link-title::after {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    top: 1em;
    background-color: currentColor;
    opacity: 0;
    transition: opacity .5s .2s;
    content: ''
}

.industry-link:hover .industry-link-title::after {
    opacity: 1
}

.industry-link-description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1ch;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 18px;
    transition: all .5s .2s;
    opacity: 0;
    height: 40px
}

.industry-link-description .icon {
    margin-left: 24px;
    transform: translate(-12px);
    transition: all .5s .2s
}

.industry-link:hover .industry-link-description {
    margin-top: 10px;
    padding-top: 24px;
    padding-bottom: 44px;
    opacity: 1
}

.industry-link:hover .industry-link-description .icon {
    transform: translate(0)
}

.industry-link-description-text {
    max-width: 450px
}

.cs-1-hero {
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 420px;
    background-size: 100.1% 100%
}

@media(min-width:768px) {
    .cs-1-hero {
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 160px;
        background-size: 100.1% 100%;
        /* padding-bottom: calc((100vw - 2 * var(--container-gutter)) * 0.5625 - 128px); */
        background-image: linear-gradient(90deg, #161618 0%, #161618 50%, #fff 50%, #fff 100%)
    }
}

.cs-1-hero-content {
    padding: 10px ;
    font-size: 30px;
    line-height: 1.34;
    letter-spacing: -.01em;
    background-color: #161618
}

@media(min-width:768px) {
    .cs-1-hero-content {
        max-width: 60%;
        flex: 0 0 60%;
        padding-left: var(--container-gutter);
        padding-top: calc(20vh - (93.8px)/2);
      
    }
}
.site-main{
    background-color: #161618;
}
.cs-1-hero-section {
    margin-bottom: 64px
}

.cs-1-hero-section:last-of-type {
    margin-bottom: 48px
}

.cs-1-hero-section p {
    margin-bottom: .5em;
  

}

.cs-1-hero-section p:last-child {
    margin-bottom: 0
}

.cs-1-hero-section h5 {
    margin-bottom: 20px
}

.cs-1-hero-aside {
    height: 100vh;
    order: -1
}

@media(min-width:768px) {
    .cs-1-hero-aside {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 40%;
        height: calc(100vh + 50vw + 256px);
        flex: 0 0 40%;
        order: 0;
        background-color: #fff
    }
}

.cs-1-hero-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media(min-width:768px) {
    .cs-1-hero-bg {
        flex-shrink: 0;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        height: 100vh;
        object-fit: cover
    }
}

@media screen and (max-width:767px) {
    .cs-1-hero-logo {
        position: absolute;
        top: 50vh;
        left: 50vw;
        transform: translate(-50%, -50%)
    }
}

.cs-1-hero-screenshot-mobile {
    position: relative;
    display: block;
    width: 200px;
    border-radius: 24px;
    box-shadow: 0 52px 64px 0 rgba(22, 22, 24, .1)
}

@media screen and (max-width:767px) {
    .cs-1-hero-screenshot-mobile {
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -100px;
        margin-top: -80px
    }
}

@media(min-width:768px) {
    .cs-1-hero-screenshot-mobile {
        width: 300px;
        margin-top: -100px
    }
}

@media(min-width:992px) {
    .cs-1-hero-screenshot-mobile {
        width: 400px;
        margin-top: -105%;
    }
}

.cs-1-screenshot-desktop-holder {
    display: none;
    background-color: #161618;
}

@media(min-width:768px) {
    .cs-1-screenshot-desktop-holder {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -128px;
        display: block;
        max-width: 100%;
        flex: 0 0 100%
    }
}

.cs-1-hero-screenshot-desktop {
    display: block;
    width: 100%
}

.cs-2-hero {
    color: #fff;
    margin-bottom: 140px
}

.cs-2-hero-main {
    position: relative;
    height: 100vh
}

.cs-2-hero--dark .cs-2-hero-main {
    color: #161618
}

.cs-2-hero-bg {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover
}

.cs-2-hero-main-client-desktop {
    position: absolute;
    left: var(--container-gutter);
    top: 50%;
    transform: translate(0, -50%);
    display: none
}

@media(min-width:768px) {
    .cs-2-hero-main-client-desktop {
        display: block
    }
}

@media(min-width:768px) {
    .cs-2-hero-main-client-mobile {
        display: none
    }
}

.cs-2-hero-content {
    padding-top: 80px;
    font-size: 24px;
    line-height: 1.34;
    letter-spacing: -.01em;
    background-color: #161618
}

@media(min-width:992px) {
    .cs-2-hero-content {
        padding-top: 120px
    }
}

@media(min-width:1280px) {
    .cs-2-hero-content {
        font-size: 30px
    }
}

.cs-2-hero-details {
    margin-bottom: 48px
}

@media(min-width:992px) {
    .cs-2-hero-details {
        margin-bottom: 100px
    }
}

.cs-2-hero-section+.cs-2-hero-section {
    margin-top: 40px
}

@media(min-width:768px) {
    .cs-2-hero-section {
        grid-column: span 3
    }
    .cs-2-hero-section+.cs-2-hero-section {
        margin-top: 0
    }
}

.cs-2-hero-section--services {
    grid-column: span 4
}

.cs-2-hero-logo {
    display: block;
    position: absolute;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media(min-width:768px) {
    .cs-2-hero-logo {
        position: static;
        grid-column: span 2;
        transform: none
    }
}

@media screen and (max-width:767px) {
    .cs-2-hero-logo {
        max-width: calc(100% - 40px)
    }
}

.cs-2-hero-screenshot-desktop {
    width: 100%;
    margin-bottom: -100px
}

.cs-intro {
    min-height: 100vh;
    padding-top: 20px;
    padding-bottom: 80px;
    align-content: center
}

@media(min-width:768px) {
    .cs-intro {
        padding-top: 80px
    }
}

@media screen and (min-height:810px) {
    .cs-intro {
        grid-row-gap: 100px;
        padding-top: 160px;
        padding-bottom: 160px
    }
}

.cs-intro-main {
    font-size: 30px;
    line-height: 1.34;
    display: flex;
    color: #fff;
    
}
.cs-intro-content{
    margin-bottom: 15px;
}
.backgroundsection{
    width: 100vw;
    padding: 100px 30px;
}

@media(min-width:768px) {
    .textSize {
        font-size: 18px !important;
        grid-column: span 12 !important;
        font-weight: 600;
    }
}

@media(min-width:768px) {
    .cs-intro-main {
        font-size: 30px;
        grid-column: span 12
    }
}

.cs-intro-column {
    margin-top: 72px;
    line-height: 1.6667;
    color:#C6C6C6;
}

@media(min-width:768px) {
    .cs-intro-column {
        margin-top: 0;
        grid-column: span 6
    }
}

.cs-intro-title {
    margin-bottom: 32px;
    color: #fff;
}

@media(min-width:768px) {
    .cs-intro-title {
        margin-bottom: 44px
    }
}

.cs-point {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 24px;
    line-height: 1.34;
    text-align: center
}

@media(min-width:768px) {
    .cs-point {
        font-size: 30px;
        align-items: center
    }
}

.cs-point--fullscreen {
    min-height: 100vh
}

.cs-point--dark {
    background-color: #161618;
    color: #fff
}

.cs-point--light {
    background-color: #fff;
    color: #161618
}

@media(min-width:768px) {
    /* .cs-point-content {
        max-width: 900px
    } */
}

.cs-point-title {
    margin-bottom: 32px;
    color: #fff;
}

@media(min-width:768px) {
    .cs-point-title {
        margin-bottom: 40px;
    }
}

.cs-1-screenshot {
    overflow: hidden
}

.cs-1-screenshot-scroller {
    padding-top: var(--section-padding-top);
    display: inline-flex;
    align-items: flex-start
}

.cs-1-screenshot-scroller img {
    display: block;
    width: calc(100vw - 2 * var(--container-gutter));
    height: 100% !important;
    /* margin-left: var(--container-gutter) */
}

.cs-1-screenshot-scroller div {
    display: block;
    width: calc(100vw - 2 * var(--container-gutter));
    /* margin-left: var(--container-gutter) */
}

.cs-showcase {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px
}

@media(min-width:768px) {
    .cs-showcase {
        margin-top: 160px;
        padding-top: 0;
        padding-bottom: 160px
    }
}

.cs-showcase-content {
    position: absolute;
    top: 80px;
    font-size: 24px;
    line-height: 1.;
    color:#ffffff;
}

@media(min-width:768px) {
    .cs-showcase-content {
        font-size: 30px;
        max-width: 550px
    }
}

@media(min-width:992px) {
    .cs-showcase-content {
        top: 160px
    }
}

.cs-showcase-title {
    margin-bottom: 40px
}

.cs-showcase-screenshots-holder {
    display: flex;
    justify-content: center;
    overflow: hidden;
    margin-left: calc(-1 * var(--container-gutter));
    margin-right: calc(-1 * var(--container-gutter));
    padding-bottom: 5vw
}

.cs-showcase-thing {
    transform: rotate(-30deg);
    margin-top: 700px
}

@media screen and (min-width:300px) {
    .cs-showcase-thing {
        margin-top: 600px
    }
}

@media screen and (min-width:400px) {
    .cs-showcase-thing {
        margin-top: 550px
    }
}

@media screen and (min-width:768px) {
    .cs-showcase-thing {
        margin-top: 650px
    }
}

.cs-showcase-screenshots {
    display: grid;
    grid-template-columns: repeat(4, 60vw);
    grid-gap: 18vw;
    align-content: start
}

@media(min-width:768px) {
    .cs-showcase-screenshots {
        grid-gap: 10vw;
        grid-template-columns: repeat(4, 32vw);
        margin-bottom: 10vw
    }
}

.cs-showcase-screenshots:first-child {
    margin-bottom: 18vw
}

@media(min-width:768px) {
    .cs-showcase-screenshots:first-child {
        margin-bottom: 10vw
    }
}

.cs-showcase-screenshots img {
    border-radius: 24px;
    display: block;
    width: 100%
}

.cs-award {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden
}

@media(min-width:768px) {
    .cs-award {
        align-items: stretch
    }
}

@media(min-width:768px) {
    .cs-award-content {
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

.cs-award-tag {
    margin-bottom: 40px
}

.cs-award-logo {
    margin-top: 40px
}

@media(min-width:768px) {
    .cs-award-logo {
        margin-top: 0;
        margin-left: 16px
    }
}

.cs-fifty-fifty {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #161618;
    color: #fff
}

@media(min-width:992px) {
    .cs-fifty-fifty {
        padding-top: 160px;
        padding-bottom: 160px
    }
}

.cs-fifty-fifty-column {
    font-size: 24px;
    display: flex;
    flex-direction: column
}

@media(min-width:768px) {
    .cs-fifty-fifty-column {
        grid-column: span 5;
        font-size: 30px
    }
    .cs-fifty-fifty-column:first-child {
        grid-column: 2/span 5
    }
}

.cs-fifty-fifty-screenshot-holder {
    width: 200px;
    margin-top: 60px;
    border-radius: 24px;
    overflow: hidden;
    align-self: center
}

@media(min-width:768px) {
    .cs-fifty-fifty-screenshot-holder {
        margin-top: 0;
        width: 78.431372549%;
        align-self: flex-start
    }
}

@media screen and (max-width:767px) {
    .cs-fifty-fifty-screenshot-holder {
        padding-bottom: 60px
    }
}

.cs-fifty-fifty-screenshot-holder img {
    display: block;
    width: 100%
}

.cs-fifty-fifty-column:first-child .cs-fifty-fifty-screenshot-holder {
    order: -1
}

@media(min-width:768px) {
    .cs-fifty-fifty-column:first-child .cs-fifty-fifty-screenshot-holder {
        margin-bottom: 80px
    }
}

@media(min-width:992px) {
    .cs-fifty-fifty-column:first-child .cs-fifty-fifty-screenshot-holder {
        margin-bottom: 160px
    }
}

.cs-fifty-fifty-column:last-child .cs-fifty-fifty-screenshot-holder {
    align-self: flex-end
}

@media(min-width:768px) {
    .cs-fifty-fifty-column:last-child .cs-fifty-fifty-screenshot-holder {
        margin-top: 80px
    }
}

@media(min-width:992px) {
    .cs-fifty-fifty-column:last-child .cs-fifty-fifty-screenshot-holder {
        margin-top: 160px
    }
}

.cs-double-screenshot {
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: 100vh;
    align-items: center
}

@media(min-width:992px) {
    .cs-double-screenshot {
        padding-top: 140px;
        padding-bottom: 140px
    }
}

.cs-double-screenshot--dark {
    background-color: #161618;
    color: #fff
}

.cs-double-screenshot-content {
    margin-bottom: 48px
}

@media(min-width:768px) {
    .cs-double-screenshot-content {
        grid-column: span 5;
        margin-bottom: 0
    }
}

.cs-double-screenshot-subtitle {
    margin-bottom: 32px
}

.cs-double-screenshot-title {
    margin-bottom: 40px
}

@media(min-width:992px) {
    .cs-double-screenshot-title {
        margin-bottom: 56px
    }
}

.cs-double-screenshot-images {
    display: flex;
    justify-content: space-between;
    grid-column: 7/span 6
}

.cs-double-screenshot-image {
    flex: 0 0 calc(50% - var(--grid-gap)/2);
    max-width: calc(50% - var(--grid-gap)/2);
    width: calc(50% - var(--grid-gap)/2);
    height: intrinsic
}

.industries-screenshot-section--dark {
    background-color: #161618;
    color: #fff
}

.csss-screenshot-holder {
    background-color: #161618
}

.csss-screenshot {
    width: 100%;
    margin-bottom: 0
}

.cs-kpi {
    background-color: #161618;
    color: #fff;
    line-height: 1.1666
}

.cs-kpi-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 80px
}

@media(min-width:768px) {
    .cs-kpi-grid {
        display: grid;
        align-items: center
    }
}

@media screen and (min-width:768px) and (min-height:810px) {
    .cs-kpi-grid {
        padding-top: 160px;
        padding-bottom: 160px
    }
}

.cs-kpi-item {
    text-align: center
}

.cs-kpi-item+.cs-kpi-item {
    margin-top: 56px
}

@media(min-width:768px) {
    .cs-kpi-item {
        grid-column: span 4
    }
    .cs-kpi-item+.cs-kpi-item {
        margin-top: 0
    }
}

.cs-kpi-name {
    margin-bottom: 16px
}

.cs-kpi-value {
    display: inline-flex;
    align-items: center;
    font-size: 96px
}

.cs-kpi-value-number {
    margin: 0 16px
}

.cs-kpi-value-symbol {
    font-size: 40px
}

.cs-kpi-copy {
    display: none;
    font-size: 24px;
    text-align: center;
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto
}

@media(min-width:768px) {
    .cs-kpi-copy {
        font-size: 30px
    }
}

@media(min-width:768px) {
    .cs-kpi-copy {
        grid-column: 2/span 10;
        display: block
    }
}

.csi-kpi-title {
    text-align: center;
    margin-bottom: 40px
}

#team_stats .cs-team-stats .hero--dark {
    margin-bottom: 0 !important
}

#team_stats .cs-team-stats .hero--dark .hero-content {
    padding: 0 !important;
    min-height: 200px !important
}

@media(min-width:768px) {
    #team_stats .cs-team-stats .hero--dark .hero-content {
        min-height: 200px !important
    }
}

@media(min-width:1280px) {
    #team_stats .cs-team-stats .hero--dark .hero-content {
        min-height: 200px !important
    }
}

#team_stats .cs-team-stats .hero--dark .hero-content .hero-title {
    margin-top: 160px !important;
    text-align: center
}

@media(min-width:768px) {
    #team_stats .cs-team-stats .hero--dark .hero-content .hero-title {
        max-width: none
    }
}

@media(min-width:1280px) {
    #team_stats .cs-team-stats .hero--dark .hero-content .hero-title {
        max-width: none
    }
}

#team_stats .cs-team-stats .cs-team-stats-grid {
    min-height: 40vh !important
}

.cs-split-screen-banner {
    display: flex;
    flex-direction: column
}

@media(min-width:768px) {
    .cs-split-screen-banner {
        flex-direction: row
    }
}

.cs-split-screen-column {
    background-color: #161618;
    display: flex;
    justify-content: center;
    align-items: center
}

@media(min-width:768px) {
    .cs-split-screen-column {
        max-width: 50%;
        flex: 0 0 50%
    }
}

@media screen and (max-width:767px) {
    .cs-split-screen-column:nth-child(2n) {
        height: 100vw;
        padding: 48px 0
    }
}

.cs-split-screen-image {
    display: block;
    width: 100%
}

.cs-split-screen-mobile-screenshot {
    max-width: 42%;
    margin-left: auto;
    margin-right: auto
}

.cs-grid {
    padding: 0 0 40px !important
}

.cs-grid.container {
    grid-gap: 0 !important;
    height: 100% !important
}

.cs-grid.container .cs-grid-item {
    height: 100% !important
}

@media(min-width:768px) {
    .cs-grid {
        padding-bottom: 80px
    }
}

.cs-grid-item {
    display: block;
    position: relative;
    height: 0;
    color: #fff;
    overflow: hidden
}

@media screen and (max-width:767px) {
    .cs-grid-item {
        margin-left: calc(-1 * var(--container-gutter));
        margin-right: calc(-1 * var(--container-gutter))
    }
}

.cs-grid-item::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    content: '';
    z-index: 1
}

.cs-grid-item-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center center
}

.cs-grid-item--single {
    grid-column: span 4;
    padding: 0 0 157.5%
}

.cs-grid-item--double {
    grid-column: span 8;
    padding: 0 0 157.5%
}

@media(min-width:768px) {
    .cs-grid-item--double {
        padding: 0 0 75%
    }
}

.cs-grid-item-content {
    --padding: 40px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--padding);
    z-index: 3
}

@media(min-width:768px) {
    .cs-grid-item-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        --padding: 40px
    }
}

.cs-grid-item-header {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .5)
}

.cs-grid-item-project-name {
    margin-bottom: 8px
}

.cs-grid-item-title {
    margin-bottom: 0
}

.cs-grid-item-result {
    margin-bottom: 20px
}

.cs-grid-item-description {
    display: none
}

.contact-form {
    margin: 0px auto;
    width: 100%;
}

@media(min-width:1280px) {
    .cs-grid-item-description {
        display: block
    }
}

.page-work .cs-grid.container {
    background-color: #000;
    padding-bottom: 0 !important
}

@media screen and (prefers-reduced-motion:no-preference) {
    .cs-grid-item::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(22, 22, 24, .5);
        transition: opacity .85s .2s, transform .85s .2s;
        opacity: 0;
        content: ''
    }
    .cs-grid-item-bg {
        transition: transform .85s .2s
    }
    .cs-grid-item-content {
        transition: transform .85s .2s;
        transform: translate(0, calc(100% - var(--padding)))
    }
    .cs-grid-item:hover::after {
        opacity: 1
    }
    .cs-grid-item:hover .cs-grid-item-bg {
        transform: scale(1.2)
    }
    .cs-grid-item:hover .cs-grid-item-content {
        transform: scale(1)
    }
    .cs-grid-item.cursor-in-progress {
        cursor: none
    }
}

.contact {
    grid-row-gap: 0
}

.contact-header {
    grid-column: span 12
}

@media(min-width:992px) {
    .contact-header {
        grid-column: 2/span 10
    }
}

@media(min-width:1280px) {
    .contact-header {
        grid-column: 3/span 8
    }
}

@media(max-width:1300px) {
    .contact {
        grid-template-columns: auto;
    }
}

.contact-item {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    padding: 40px 0 72px;
    border: 1px solid #fff;
    align-content: flex-start;
    align-items: flex-start;
    padding: 50px;
}

@media(min-width:992px) {
    .contact-item {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media(min-width:1280px) {
    .contact-item {
        grid-column: 2/span 10
    }
}

@media(min-width:768px) {
    .contact-item-body,
    .contact-item-image {
        max-width: calc(50% - var(--grid-gap)/2);
        flex: 0 0 calc(50% - var(--grid-gap)/2)
    }
}

.contact-item-name {
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 12px;
    margin-left: -2px
}

.contact-item-address,
.contact-item-phone {
    line-height: 1.6667;
    color: #fff;
}

.contact-item-address {
    white-space: pre-line;
    margin-bottom: 1.5em
}

.contact-item-address .contact-all-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin: 30px auto;
}

.contact-item-address .contact-all-item a {
    margin-bottom: 0px;
}

.contact-item-phone {
    display: block;
    margin-bottom: 32px
}

.contact-item-image {
    display: block;
    margin-bottom: 40px;
    width: 100%
}

@media(min-width:768px) {
    .contact-item-image {
        margin-bottom: 0;
        order: 1
    }
}

.contact-form .input:disabled {
    display: none
}

.custom-radio-holder {
    display: flex;
    margin-top: 16px
}

.custom-radio-button-input {
    opacity: 0;
    position: absolute;
    z-index: -1
}

.custom-radio-button-label {
    display: block;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid #e6e6e6;
    padding: 8px 20px;
    font-weight: 400;
    cursor: pointer;
    transition: all .25s ease
}

.custom-radio-button-input:checked~.custom-radio-button-label {
    border-color: #00b0bb;
    background-color: #00b0bb;
    color: #fff
}

.custom-radio-button-input:focus~.custom-radio-button-label {
    outline: 2px solid #00b0bb;
    outline-offset: 2px
}

.custom-radio-button+.custom-radio-button {
    margin-left: 20px
}

.grecaptcha-badge {
    display: none
}

.careers {
    grid-row-gap: 0
}

.careers .page-nav {
    font-size: 18px;
    line-height: 1.6667
}

@media(min-width:768px) {
    .careers .page-nav {
        font-size: 24px;
        line-height: 1.5666
    }
}

@media(min-width:1280px) {
    .careers .page-nav {
        font-size: 30px
    }
}

@media(min-width:768px) {
    .careers-holder {
        grid-column: span 12
    }
}

@media(min-width:1280px) {
    .careers-holder {
        grid-column: 2/span 10
    }
}

.careers-grid {
    padding-top: 60px;
    padding-bottom: 80px
}

@media(min-width:768px) {
    .careers-grid {
        display: grid;
        grid-template-columns: 37% 37%;
        justify-content: space-between;
        grid-column-gap: var(--grid-gap);
        grid-row-gap: var(--section-padding-bottom)
    }
}

@media(min-width:992px) {
    .careers-grid {
        padding-top: 80px;
        padding-bottom: 112px
    }
}

.career-grid-item {
    display: block;
    font-weight: 400
}

.career-grid-item+.career-grid-item {
    margin-top: 60px
}

@media(min-width:768px) {
    .career-grid-item+.career-grid-item {
        margin-top: 0
    }
}

.career-grid-item-title {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 12px
}

.career-grid-item-cities {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 32px;
    padding: 0;
    font-weight: 300;
    list-style: none;
    opacity: .7
}

.careers-empty {
    padding-top: 80px;
    padding-bottom: 200px;
    font-weight: 400
}

@media(min-width:768px) {
    .careers-empty {
        font-size: 24px
    }
}

.careers-empty a {
    background-image: linear-gradient(to right, currentColor 100%, currentColor 0);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 calc(1.05em + 1px)
}

.job-posting {
    border-bottom: 1px solid #e6e6e6
}

.job-posting-header {
    border-bottom: 1px solid #e6e6e6
}

.job-posting-header-header {
    display: flex;
    justify-content: space-between;
    padding-top: 32px;
    padding-bottom: 20px
}

.job-posting-header-header:only-child {
    padding-bottom: 32px
}

@media(min-width:768px) {
    .job-posting-header-header {
        padding-top: 72px;
        padding-bottom: 48px
    }
    .job-posting-header-header:only-child {
        padding-top: 48px;
        padding-bottom: 48px
    }
}

.job-posting-description {
    margin-bottom: var(--section-padding-bottom)
}

.job-posting-cities {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em
}

.job-posting-city {
    position: relative
}

.job-posting-city:not(:last-child) {
    margin-right: 24px
}

.job-posting-city:not(:last-child)::after {
    position: absolute;
    content: '|';
    left: calc(100% + 12px);
    transform: translate(-50%)
}

.job-posting-body {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    color: rgba(37, 34, 39, .85);
    line-height: 1.6667
}

@media(min-width:992px) {
    .job-posting-body {
        max-width: 930px;
        margin-left: auto;
        margin-right: auto
    }
}

.job-posting-body h5 {
    margin-top: 3em;
    color: #161618
}

.job-posting-body ul {
    margin: 0 0 1em;
    list-style: none
}

.job-posting-body ul ul {
    margin-top: 1em;
    margin-left: 1em;
    margin-bottom: 1.5em
}

.job-posting-body li {
    position: relative;
    margin-bottom: 1em;
    padding-left: 16px
}

.job-posting-body li:before {
    position: absolute;
    left: 0;
    top: calc((1em * 1.6667)/2);
    display: block;
    width: 5px;
    height: 1px;
    background-color: #161618;
    content: ''
}

.job-posting-body strong,
.job-posting-body b {
    font-weight: 700
}

.job-posting-apply-button {
    margin-top: 20px;
    border-color: rgba(0, 176, 187, .7);
    color: #fff;
    background-color: rgba(0, 176, 187, .7);
    display: block;
    font-family: proxima-nova, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 25px
}

.job-posting-attachment-label {
    display: block;
    margin-top: 24px
}

.custom-file-job-posting {
    margin-bottom: 20px
}

.job-posting-radio-holder {
    display: flex;
    width: 100%;
    flex: 0 0 100%;
    margin-top: 8px;
    margin-bottom: 20px
}

.learn_more_form_wrapper {
    margin-top: 100px
}

.learn_more_form .gform_body .gfield_html h1 {
    margin-bottom: 0
}

.learn_more_form .gform_body .gfield_html h3 {
    margin-top: 0
}

.learn_more_form .gform_body .gfield label {
    display: none !important
}

.learn_more_form .gform_body .gfield .ginput_container input {
    border-color: #000;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    font-size: 18px
}

.learn_more_form .gform_body .gfield .ginput_container input::placeholder {
    color: #000;
    font-size: 18px;
    text-transform: uppercase
}

.learn_more_form .gform_body .gform_confirmation_message {
    color: red;
    font-weight: 600;
    font-size: 21px
}

.learn_more_form .gform_footer .gform_button {
    background-color: #00b0bb;
    color: #fff;
    font-size: 30px;
    border: #00b0bb;
    padding: 20px 80px 20px 30px;
    margin-top: 20px
}

.learn_more_form .gform_footer .gform_ajax_spinner {
    margin-left: 20px;
    height: 30px;
    width: 30px
}

.learn_more_form .gform_confirmation_message {
    color: red;
    font-weight: 600;
    font-size: 21px
}

.social-sharing {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.social-sharing li+li {
    margin-left: 12px
}

@media(min-width:992px) {
    .social-sharing li+li {
        margin-left: 32px
    }
}

.about-InCraftiv-footer {
    padding-top: 80px;
    padding-bottom: 80px;
    line-height: 1.6667
}

.about-InCraftiv-footer-title {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 40px
}

.article-featured-image {
    margin: 0 0 28px
}

@media(min-width:768px) {
    .article-featured-image {
        margin: 0 0 72px
    }
}

.article-featured-image img {
    display: block;
    width: 100%
}

.article-header {
    display: flex;
    align-items: center;
    margin-bottom: 60px
}

@media(min-width:768px) {
    .article-header {
        grid-column: span 12
    }
}

.article-categories {
    margin: 0 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    display: flex;
    align-items: center
}

.article-categories li {
    position: relative
}

.article-categories li:not(:last-child) {
    margin-right: 16px
}

.article-categories li:not(:last-child)::after {
    position: absolute;
    content: '・';
    left: calc(100% + 8px);
    transform: translate(-50%)
}

.article-social-sharing {
    margin-left: auto
}

.article {
    padding-bottom: 80px;
    border-bottom: 1px solid #e6e6e6
}

.article-lead {
    margin-bottom: 2em;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: -.01em;
    white-space: pre-line
}

@media(min-width:992px) {
    .article-lead {
        font-weight: 300
    }
}

@media(min-width:1440px) {
    .article-lead {
        font-size: 30px
    }
}

.article-body {
    color: rgba(22, 22, 24, .85)
}

.article {
    line-height: 1.6667;
    max-width: 860px
}

@media(min-width:768px) {
    .article {
        padding-left: 30px;
        padding-right: 30px;
        margin: 0 auto
    }
}

.article hr {
    margin: 2em 0
}

.article a {
    position: relative;
    transition: -webkit-text-decoration .3s ease-in-out;
    transition: text-decoration .3s ease-in-out;
    transition: text-decoration .3s ease-in-out, -webkit-text-decoration .3s ease-in-out;
    color: #161618;
    -webkit-text-decoration: underline solid transparent;
    text-decoration: underline solid transparent
}

.article a:hover {
    -webkit-text-decoration: underline solid #000;
    text-decoration: underline solid #000
}

.article p,
.article ul,
.article ol {
    margin-bottom: 1.33em
}

.article p:last-child,
.article ul:last-child,
.article ol:last-child {
    margin-bottom: 0
}

.article strong {
    font-weight: 600
}

.article blockquote {
    margin-top: 72px;
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    border: 0;
    padding: 0
}

.article blockquote:not(:last-child) {
    margin-bottom: 72px
}

.article blockquote cite {
    display: block;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.34
}

.article h2,
.article h3,
.article h4,
.article h5 {
    margin-top: 2em;
    margin-bottom: 1em
}

.article h2:first-child,
.article h3:first-child,
.article h4:first-child,
.article h5:first-child {
    margin-top: 0
}

.article h3 {
    color: #161618;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.34
}

.article+.about-InCraftiv-footer {
    max-width: 1000px
}

@media(min-width:768px) {
    .article+.about-InCraftiv-footer {
        padding-left: 30px;
        padding-right: 30px;
        margin: 0 auto
    }
}

.article-listing {
    padding-bottom: var(--section-padding-bottom)
}

.article-list-item {
    padding-top: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid #e6e6e6
}

.article-list-item:first-child {
    padding-top: 0
}

.article-list-item:last-child {
    border-bottom: 0
}

@media(min-width:768px) {
    .article-list-item {
        display: flex;
        justify-content: space-between
    }
}

@media(min-width:768px) {
    .article-list-item-figure-holder {
        max-width: 39.84375%;
        flex: 0 0 39.84375%
    }
}

.article-list-item-figure {
    position: relative;
    height: 0;
    padding: 0 0 68%;
    margin: 0
}

@media(min-width:768px) {
    .article-list-item-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 57%;
        flex: 0 0 57%
    }
}

.article-list-item-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.article-list-item-meta {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px
}

@media(min-width:768px) {
    .article-list-item-meta {
        margin-top: auto;
        margin-bottom: 0;
        order: 1
    }
}

.article-list-item-meta li:not(:last-child) {
    margin-right: 0
}

.article-list-item-meta li::after {
    display: none;
    content: ''
}

.article-list-item-meta li~li {
    display: none
}

.article-list-item-title {
    margin-bottom: 32px;
    font-size: 30px
}

@media(min-width:768px) {
    .article-list-item-title {
        margin-top: -.2em
    }
}

@media(min-width:1280px) {
    .article-list-item-title {
        font-size: 35px
    }
}

@media(min-width:1440px) {
    .article-list-item-title {
        font-size: 45px
    }
}

.article-pagination {
    display: flex;
    margin-top: 40px
}

.article-pagination-list {
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    line-height: 20px
}

.article-pagination-list li+li {
    margin-left: 20px
}

.article-pagination-list span {
    color: #00b0bb;
    font-weight: 400
}

.blog-teaser {
    padding-top: 40px;
    padding-bottom: 40px
}

@media(min-width:768px) {
    .blog-teaser {
        padding-top: var(--section-padding-top);
        padding-bottom: 96px
    }
    .blog-teaser+.blog-teaser {
        margin-top: 0
    }
}

.blog-teaser-item {
    display: block
}

@media(min-width:768px) {
    .blog-teaser-item {
        grid-column: span 6
    }
}

.blog-teaser-item+.blog-teaser-item {
    margin-top: 40px
}

@media(min-width:768px) {
    .blog-teaser-item+.blog-teaser-item {
        margin-top: 0
    }
}

.blog-teaser-item .article-categories {
    margin-bottom: 16px
}

.blog-teaser-item .article-categories li::after {
    display: none;
    content: ''
}

.blog-teaser-item .article-categories li~li {
    display: none
}

.blog-teaser-title {
    margin-bottom: 20px
}

@media(min-width:768px) {
    .blog-teaser-title {
        margin-bottom: var(--section-padding-bottom)
    }
}

.blog-teaser-item-figure {
    position: relative;
    height: 0;
    padding: 0 0 71%;
    margin: 0 0 32px
}

@media(min-width:768px) {
    .blog-teaser-item-figure {
        margin: 0 0 36px;
        padding: 0 0 56.45%
    }
}

.blog-teaser-item-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.blog-teaser-item-title {
    line-height: 1.5;
    margin-bottom: 0
}

@media(min-width:768px) {
    .blog-teaser-item-title {
        font-weight: 300;
        line-height: 1.34
    }
}

.summary {
    --spacing: 60px;
    margin-top: var(--spacing);
    margin-bottom: var(--spacing)
}

@media(min-width:768px) {
    .summary {
        margin-top: var(--spacing);
        margin-bottom: 30px
    }
    .summary+.summary {
        margin-top: 30px
    }
}

@media(min-width:992px) {
    .summary {
        --spacing: 80px
    }
}

@media(min-width:1280px) {
    .summary {
        --spacing: 120px
    }
}

.summary-title {
    margin-top: 80px;
    padding-top: var(--spacing);
    padding-bottom: var(--spacing);
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 40px
}

@media(min-width:768px) {
    .summary-title {
        grid-column: span 12
    }
}

@media(min-width:1280px) {
    .summary-title {
        font-size: 90px
    }
}

.summary-lead {
    margin-bottom: 80px;
    font-size: 30px;
    line-height: 1.34;
    margin-bottom: 10px !important
}

@media(min-width:768px) {
    .summary-lead {
        margin-bottom: 0;
        grid-column: span 5
    }
}

@media(min-width:1280px) {
    .summary-lead {
        font-size: 45px
    }
}

@media(min-width:768px) {
    .summary-copy {
        grid-column: span 7;
        padding-left: 40px
    }
}

.summary-copy {
    padding-left: 20px
}

.summary-copy h5 {
    margin-bottom: 40px
}

.summary-copy h5:not(:first-child) {
    margin-top: 80px
}

.summary-copy .stella-pera {
    position: relative;
}

.summary-copy .stella-pera::before {
    content: '';
    position: absolute;
    background: url(../../images/testimonial-slider-section-assets/blue-tick-icon.webp);
    background-repeat: no-repeat;
    background-size: cover;
    width: 15px;
    height: 15px;
    left: -25px;
    margin: auto;
    top: 12%;
}

.summary-copy strong {
    color: #41A7E9;
    margin-right: 5px;
}

.search_results .hero .hero-content {
    margin-bottom: 40px
}

.search_results .hero .results_count {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    font-family: proxima-nova, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, sans-serif;
    line-height: 1.5666;
    padding-left: 40px
}

.search_results .hero .search_box {
    width: 100%;
    max-width: 100% !important
}

.search_results .hero .search_box form {
    margin-bottom: 40px;
    position: relative
}

.search_results .hero .search_box form input[type=text] {
    max-width: 100%;
    font-family: big-caslon-fb, serif;
    font-size: 70px;
    line-height: 1.1666;
    color: #fff !important;
    padding: 0;
    width: 100%;
    background-color: transparent;
    padding-left: 40px;
    border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-bottom: 1px solid #fff;
    padding-bottom: 50px;
    min-width: 240px;
    margin: 0
}

.search_results .hero .search_box form input[type=text]::placeholder {
    color: #626262
}

.search_results .hero .search_box form input[type=text]:focus-visible {
    outline: none !important
}

.search_results .hero .search_box form .search_submit {
    display: block;
    position: absolute;
    bottom: 72px;
    right: 0
}

.search_results .hero .search_box form .search_submit input[type=image] {
    z-index: 9999
}

@media(max-width:550px) {
    .search_results .hero .search_box form input[type=text] {
        font-size: 50px !important
    }
}

@media(max-width:430px) {
    .search_results .hero .search_box form input[type=text] {
        font-size: 30px !important;
        padding-left: 10px !important;
        padding-bottom: 20px !important
    }
}

@media(max-width:767px) {
    .search_results .hero .search_box {
        margin-right: 0
    }
}

.search_results #search_container #search_results {
    flex-basis: 100%
}

.search_results #search_container #search_results .search_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 90px;
    justify-content: space-evenly;
    margin: 40px 80px
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container {
    grid-template-columns: 1fr;
    display: grid
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_category {
    color: #a8a8a8;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 6.4px;
    color: #a8a8a8;
    font-size: 16px;
    line-height: 20px
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_category .search_cat:not(:last-child)::after {
    content: ", "
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_title {
    line-height: 35px;
    margin-bottom: 16px
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_title a {
    color: #000;
    font-size: 28px;
    font-weight: 500
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_content {
    font-size: 17px;
    color: #000;
    line-height: 24px
}

.search_results #search_more {
    text-align: center;
    margin-top: 80px
}

.search_results #search_more .page-numbers {
    display: inline-block;
    padding: 0 4px;
    margin-right: 6px
}

.search_results #search_more .page-numbers.current {
    font-weight: 700
}

.tabbed-slideshow {
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: #fff
}

.tabbed-slideshow-item {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center
}

.tabbed-slideshow-item-content {
    position: absolute;
    left: var(--container-gutter);
    right: var(--container-gutter);
    bottom: var(--section-padding-bottom)
}

@media(min-width:768px) {
    .tabbed-slideshow-item-content {
        left: auto;
        width: 43%
    }
}

.tabbed-slideshow-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(var(--section-padding-top) + 16px) var(--container-gutter) 64px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1
}

.tabbed-slideshow-nav ol {
    counter-reset: slideshow-nav;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between
}

.tabbed-slideshow-nav li {
    position: relative;
    width: 100%;
    line-height: 1.1666;
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 16px;
    font-size: 0
}

.tabbed-slideshow-nav li:before {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em
}

@media(min-width:768px) {
    .tabbed-slideshow-nav li {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em
    }
}

.tabbed-slideshow-nav li+li {
    margin-left: var(--grid-gap)
}

.tabbed-slideshow-nav li::before {
    position: absolute;
    bottom: calc(100% + 16px);
    counter-increment: slideshow-nav;
    content: counter(slideshow-nav, decimal-leading-zero)
}

.tabbed-slideshow-nav li::after {
    position: absolute;
    bottom: 100%;
    display: block;
    width: 100%;
    height: 1px;
    transform: scale(.001, 1);
    transform-origin: 0 0;
    background-color: #fff;
    content: ''
}

.tabbed-slideshow-nav li.is-nav-selected::after {
    transition: transform 15s ease-in-out;
    transform: scale(1, 1)
}

.tabbed-slideshow-nav .flickity-enabled {
    display: block;
    outline: none
}

.tabbed-slideshow-nav .flickity-enabled .flickity-slider {
    display: flex
}

.tabbed-slideshow-nav .flickity-enabled .flickity-slider li {
    position: relative !important;
    left: 0 !important
}

.industry-landing-section-3 {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom)
}

@media(min-width:1280px) {
    .industry-landing-section-3 {
        padding-top: 160px
    }
}

.ils3-title {
    margin-bottom: 40px
}

@media(min-width:768px) {
    .ils3-title {
        margin-bottom: 60px
    }
}

.ils3-lead {
    font-size: 30px;
    margin-bottom: 80px
}

@media(min-width:768px) {
    .ils3-lead {
        margin-bottom: 160px;
        font-size: 45px
    }
}

.ils3-section {
    color: rgba(22, 22, 24, .75)
}

.ils3-section+.ils3-section {
    margin-top: 80px
}

.ils3-section-content {
    align-self: center
}

@media(min-width:768px) {
    .ils3-section-content {
        grid-column: span 4
    }
}

@media(min-width:1280px) {
    .ils3-section-content {
        grid-column: span 4;
        padding-left: calc((1 * (100% - 3 * var(--grid-gap))/4) + 1 * var(--grid-gap))
    }
}

.ils3-section-title {
    color: #161618;
    margin-bottom: 40px
}

.ils3-section-description {
    margin-bottom: 20px
}

.ils3-section-image {
    margin-top: 40px
}

@media(min-width:768px) {
    .ils3-section-image {
        margin-top: 0;
        grid-column: span 8
    }
}

@media(min-width:1280px) {
    .ils3-section-image {
        grid-column: span 8;
        padding-left: calc((1 * (100% - 7 * var(--grid-gap))/8) + 1 * var(--grid-gap))
    }
}

.stella-teaser {
    color: #fff;
    background-color: #000000;
    padding-top: 80px;
    padding-bottom: 40px;
    margin: 10vh auto;
    align-items: center;
    display: flex;
    flex-direction: column;
    overflow-x: hidden
}

.stella-teaser--blue {
    background-color: #08131A;
}

.stella-teaser~.stella-teaser {
    padding-top: 40px
}

@media(min-width:768px) {
    .stella-teaser {
        display: grid
    }
}

@media(min-width:992px) {
    .stella-teaser {
        padding-top: 80px;
        padding-bottom: 80px
    }
}

@media(min-width:768px) {
    .stella-teaser-content {
        grid-column: span 6
    }
}

.stella-teaser-title {
    font-size: 40px;
    margin-bottom: 30px !important;
    font-weight: bold;
}

@media(min-width:768px) {
    .stella-teaser-title {
        margin-bottom: 80px
    }
}

.stella-teaser-lead {
    font-size: 24px;
    line-height: 1.1666;
    margin-bottom: 32px
}

@media(min-width:768px) {
    .stella-teaser-lead {
        font-size: 30px
    }
}

.stella-teaser-copy {
    margin-bottom: 40px
}

@media(min-width:1280px) {
    .link-cta {
        margin-top: 60px !important
    }
}

.stella-teaser-image {
    order: -1;
    margin-bottom: 40px
}

@media(min-width:768px) {
    .stella-teaser-image {
        order: 0;
        grid-column: span 6;
        padding-left: calc((1 * (100% - 5 * var(--grid-gap))/6) + 1 * var(--grid-gap));
        margin-bottom: 0
    }
}

.four-column-section+.four-column-section {
    padding-top: 0
}

@media(min-width:1280px) {
    .four-column-section {
        padding-bottom: 144px
    }
}

@media(min-width:768px) {
    .four-column-section {
        padding-top: 80px;
        padding-bottom: 40px
    }
}

.four-column-section--dark {
    background-color: #161618;
    color: #fff
}

.four-column-section--light {
    background-color: #fff;
    color: #161618
}

.four-column-section-title {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.fcs-column+.fcs-column {
    margin-top: 40px
}

@media(min-width:768px) {
    .fcs-column+.fcs-column {
        margin-top: 0
    }
}

@media(min-width:768px) {
    .fcs-column {
        display: flex;
        flex-direction: column;
        grid-column: span 3;
        align-items: flex-start
    }
}

.fcs-column-title {
    margin-bottom: 20px
}

.fcs-column-image {
    margin-bottom: 32px
}

.fcs-column-description {
    margin-bottom: 16px
}

.fcs-link {
    margin-top: auto
}

.challenge-solution {
    padding-bottom: var(--section-padding-bottom)
}

@media(min-width:992px) {
    .challenge-solution {
        padding-bottom: 100px
    }
}

.challenge-solution-header {
    display: none
}

@media(min-width:768px) {
    .challenge-solution-header {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: var(--grid-gap);
        padding: 32px 0;
        border-bottom: 1px solid #e6e6e6
    }
}

.cs-header-name {
    grid-column: span 6
}

.cs-row {
    padding: 40px 0;
    border-bottom: 1px solid #e6e6e6
}

.cs-row:last-child {
    border-bottom: 0
}

@media(min-width:768px) {
    .cs-row {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: var(--grid-gap);
        padding: 44px 0
    }
}

.cs-challenge {
    font-size: 24px
}

.cs-solution {
    color: rgba(22, 22, 24, .75)
}

@media(min-width:768px) {
    .cs-challenge,
    .cs-solution {
        grid-column: span 6
    }
}

@media screen and (max-width:767px) {
    .cs-challenge::before,
    .cs-solution::before {
        display: block;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em
    }
    .cs-challenge {
        margin-bottom: 40px
    }
}

.legal {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    line-height: 1.6667
}

.legal hr {
    margin: 2em 0
}

.legal a {
    position: relative;
    transition: color .3s ease-in-out;
    color: #161618
}

.legal a::after {
    position: absolute;
    left: 0;
    top: calc(1em + 1px);
    width: 100%;
    height: 1px;
    background-color: rgba(22, 22, 24, .5);
    transform-origin: 0 0;
    transition: background-color .3s ease-in-out;
    content: ''
}

.legal a:hover::after {
    background-color: rgba(22, 22, 24, .9);
    opacity: 1
}

.legal p,
.legal ul,
.legal ol {
    margin-bottom: 1.33em
}

.legal p:last-child,
.legal ul:last-child,
.legal ol:last-child {
    margin-bottom: 0
}

.legal strong {
    font-weight: 600
}

.legal blockquote {
    margin-top: 72px;
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    border: 0;
    padding: 0
}

.legal blockquote:not(:last-child) {
    margin-bottom: 72px
}

.legal blockquote cite {
    display: block;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.34
}

.legal h2,
.legal h3,
.legal h4,
.legal h5 {
    margin-top: 2em;
    margin-bottom: 1em
}

.legal h2:first-child,
.legal h3:first-child,
.legal h4:first-child,
.legal h5:first-child {
    margin-top: 0
}

.legal h3 {
    color: #161618;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.34
}

@media(min-width:768px) {
    .legal-content {
        grid-column: 2/span 10
    }
}

@media(min-width:992px) {
    .legal-content {
        grid-column: 3/span 8
    }
}

.not-found {
    position: relative;
    min-height: 100vh;
    color: #fff
}

.not-found-background-video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1
}

.not-found-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--section-padding-top) * 3 + 22px)
}

@media(min-width:768px) {
    .not-found-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding-top: calc(var(--section-padding-top) * 2 + 22px)
    }
}

.not-found-tag {
    position: absolute;
    top: var(--section-padding-top);
    left: 50%;
    transform: translate(-50%);
    z-index: 4;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 36px;
    display: none
}

@media(min-width:768px) {
    .not-found-tag {
        display: block
    }
}

.not-found-title {
    margin-top: auto;
    margin-bottom: auto;
    font-size: 45px
}

@media(min-width:768px) {
    .not-found-title {
        font-size: 70px
    }
}

@media screen and (max-width:767px) {
    .not-found-title br {
        display: none
    }
}

.not-found-footer {
    padding-top: 40px;
    padding-bottom: 40px;
    background-image: linear-gradient(to bottom, transparent, rgba(22, 22, 24, 0.5))
}

@media(min-width:768px) {
    .not-found-footer {
        padding-top: 80px
    }
}

.not-found-footer .link-cta {
    display: flex
}

@media(min-width:768px) {
    .not-found-footer .link-cta {
        display: inline-flex
    }
}

.not-found-footer .link-cta+.link-cta {
    margin-top: 8px
}

@media(min-width:768px) {
    .not-found-footer .link-cta+.link-cta {
        margin-top: 0;
        margin-left: 40px
    }
}

.not-found-footer-title {
    margin-bottom: 16px
}

@media(min-width:768px) {
    .not-found-footer-title {
        margin-bottom: 28px
    }
}

.search_results .hero .hero-content {
    margin-bottom: 40px
}

.search_results .hero .results_count {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    font-family: proxima-nova, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, sans-serif;
    line-height: 1.5666;
    padding-left: 40px
}

.search_results .hero .search_box {
    width: 100%;
    max-width: 100% !important
}

.search_results .hero .search_box form {
    margin-bottom: 40px;
    position: relative
}

.search_results .hero .search_box form input[type=text] {
    max-width: 100%;
    font-family: big-caslon-fb, serif;
    font-size: 70px;
    line-height: 1.1666;
    color: #fff !important;
    padding: 0;
    width: 100%;
    background-color: transparent;
    padding-left: 40px;
    border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-bottom: 1px solid #fff;
    padding-bottom: 50px;
    min-width: 240px;
    margin: 0
}

.search_results .hero .search_box form input[type=text]::placeholder {
    color: #626262
}

.search_results .hero .search_box form input[type=text]:focus-visible {
    outline: none !important
}

.search_results .hero .search_box form .search_submit {
    display: block;
    position: absolute;
    bottom: 72px;
    right: 0
}

.search_results .hero .search_box form .search_submit input[type=image] {
    z-index: 9999
}

@media(max-width:550px) {
    .search_results .hero .search_box form input[type=text] {
        font-size: 50px !important
    }
}

@media(max-width:430px) {
    .search_results .hero .search_box form input[type=text] {
        font-size: 30px !important;
        padding-left: 10px !important;
        padding-bottom: 20px !important
    }
}

@media(max-width:767px) {
    .search_results .hero .search_box {
        margin-right: 0
    }
}

.search_results #search_container #search_results {
    flex-basis: 100%
}

.search_results #search_container #search_results .search_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 90px;
    justify-content: space-evenly;
    margin: 40px 80px
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container {
    grid-template-columns: 1fr;
    display: grid
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_category {
    color: #a8a8a8;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 6.4px;
    color: #a8a8a8;
    font-size: 16px;
    line-height: 20px
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_category .search_cat:not(:last-child)::after {
    content: ", "
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_title {
    line-height: 35px;
    margin-bottom: 16px
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_title a {
    color: #000;
    font-size: 28px;
    font-weight: 500
}

.search_results #search_container #search_results .search_grid .search_result .search_result_container .search_content {
    font-size: 17px;
    color: #000;
    line-height: 24px
}

.search_results #search_more {
    text-align: center;
    margin-top: 80px
}

.search_results #search_more .page-numbers {
    display: inline-block;
    padding: 0 4px;
    margin-right: 6px
}

.search_results #search_more .page-numbers.current {
    font-weight: 700
}

@media screen and (min-width:768px) {
    .smartling-ar .hero-tagline {
        right: initial;
        position: absolute;
        bottom: 80px
    }
}

.smartling-ar .hero-button-cta {
    left: var(--container-gutter);
    right: initial
}

@media(min-width:768px) {
    .smartling-ar .about-section-colum-copy {
        padding-right: 0
    }
}

.smartling-ar .site-branding {
    z-index: 40;
    position: absolute;
    left: var(--container-gutter);
    top: 50%;
    transform: translate(0, -50%)
}

@media screen and (max-width:767px) {
    .smartling-ar .site-branding {
        top: 25px;
        transform: translate(0, 0)
    }
}

.u-d-none {
    display: none !important
}

.u-d-inline {
    display: inline !important
}

.u-d-inline-block {
    display: inline-block !important
}

.u-d-block {
    display: block !important
}

.u-d-table {
    display: table !important
}

.u-d-table-row {
    display: table-row !important
}

.u-d-table-cell {
    display: table-cell !important
}

.u-d-flex {
    display: flex !important
}

.u-d-inline-flex {
    display: inline-flex !important
}

@media(min-width:576px) {
    .u\:sm-d-none {
        display: none !important
    }
    .u\:sm-d-inline {
        display: inline !important
    }
    .u\:sm-d-inline-block {
        display: inline-block !important
    }
    .u\:sm-d-block {
        display: block !important
    }
    .u\:sm-d-table {
        display: table !important
    }
    .u\:sm-d-table-row {
        display: table-row !important
    }
    .u\:sm-d-table-cell {
        display: table-cell !important
    }
    .u\:sm-d-flex {
        display: flex !important
    }
    .u\:sm-d-inline-flex {
        display: inline-flex !important
    }
}

@media(min-width:768px) {
    .u\:md-d-none {
        display: none !important
    }
    .u\:md-d-inline {
        display: inline !important
    }
    .u\:md-d-inline-block {
        display: inline-block !important
    }
    .u\:md-d-block {
        display: block !important
    }
    .u\:md-d-table {
        display: table !important
    }
    .u\:md-d-table-row {
        display: table-row !important
    }
    .u\:md-d-table-cell {
        display: table-cell !important
    }
    .u\:md-d-flex {
        display: flex !important
    }
    .u\:md-d-inline-flex {
        display: inline-flex !important
    }
}

@media(min-width:992px) {
    .u\:lg-d-none {
        display: none !important
    }
    .u\:lg-d-inline {
        display: inline !important
    }
    .u\:lg-d-inline-block {
        display: inline-block !important
    }
    .u\:lg-d-block {
        display: block !important
    }
    .u\:lg-d-table {
        display: table !important
    }
    .u\:lg-d-table-row {
        display: table-row !important
    }
    .u\:lg-d-table-cell {
        display: table-cell !important
    }
    .u\:lg-d-flex {
        display: flex !important
    }
    .u\:lg-d-inline-flex {
        display: inline-flex !important
    }
}

@media(min-width:1280px) {
    .u\:xl-d-none {
        display: none !important
    }
    .u\:xl-d-inline {
        display: inline !important
    }
    .u\:xl-d-inline-block {
        display: inline-block !important
    }
    .u\:xl-d-block {
        display: block !important
    }
    .u\:xl-d-table {
        display: table !important
    }
    .u\:xl-d-table-row {
        display: table-row !important
    }
    .u\:xl-d-table-cell {
        display: table-cell !important
    }
    .u\:xl-d-flex {
        display: flex !important
    }
    .u\:xl-d-inline-flex {
        display: inline-flex !important
    }
}

@media(min-width:1440px) {
    .u\:xxl-d-none {
        display: none !important
    }
    .u\:xxl-d-inline {
        display: inline !important
    }
    .u\:xxl-d-inline-block {
        display: inline-block !important
    }
    .u\:xxl-d-block {
        display: block !important
    }
    .u\:xxl-d-table {
        display: table !important
    }
    .u\:xxl-d-table-row {
        display: table-row !important
    }
    .u\:xxl-d-table-cell {
        display: table-cell !important
    }
    .u\:xxl-d-flex {
        display: flex !important
    }
    .u\:xxl-d-inline-flex {
        display: inline-flex !important
    }
}

.u-position-static {
    position: static !important
}

.u-position-relative {
    position: relative !important
}

.u-position-absolute {
    position: absolute !important
}

.u-position-fixed {
    position: fixed !important
}

.u-position-sticky {
    position: -webkit-sticky !important;
    position: sticky !important
}

.u-z-index-0 {
    z-index: 0 !important
}

.u-z-index-1 {
    z-index: 10 !important
}

.u-z-index-2 {
    z-index: 20 !important
}

.u-z-index-3 {
    z-index: 30 !important
}

.u-z-index-4 {
    z-index: 40 !important
}

.u-z-index-5 {
    z-index: 50 !important
}

.u-z-index-6 {
    z-index: 60 !important
}

.u-z-index-7 {
    z-index: 70 !important
}

.u-z-index-8 {
    z-index: 80 !important
}

.u-z-index-9 {
    z-index: 90 !important
}

.u-z-index-10 {
    z-index: 100 !important
}

.u-text-small-caps {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em
}

.u-text-small-caps-polycab {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
}

.u-text-small {
    font-size: 13px
}

.u-text-base {
    font-size: 18px
}

.u-text-large {
    font-size: 24px
}

.u-text-extra-large {
    font-size: 30px
}

.u-text-leading-normal {
    line-height: 1.34 !important
}

.u-text-leading-tight {
    line-height: 1.5666 !important
}

.u-text-leading-loose {
    line-height: 1.6667 !important
}

.u-text-left {
    text-align: left !important
}

.u-text-right {
    text-align: right !important
}

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

@media(min-width:576px) {
    .u-text-left\:sm {
        text-align: left !important
    }
    .u-text-right\:sm {
        text-align: right !important
    }
    .u-text-center\:sm {
        text-align: center !important
    }
}

@media(min-width:768px) {
    .u-text-left\:md {
        text-align: left !important
    }
    .u-text-right\:md {
        text-align: right !important
    }
    .u-text-center\:md {
        text-align: center !important
    }
}

@media(min-width:992px) {
    .u-text-left\:lg {
        text-align: left !important
    }
    .u-text-right\:lg {
        text-align: right !important
    }
    .u-text-center\:lg {
        text-align: center !important
    }
}

@media(min-width:1280px) {
    .u-text-left\:xl {
        text-align: left !important
    }
    .u-text-right\:xl {
        text-align: right !important
    }
    .u-text-center\:xl {
        text-align: center !important
    }
}

@media(min-width:1440px) {
    .u-text-left\:xxl {
        text-align: left !important
    }
    .u-text-right\:xxl {
        text-align: right !important
    }
    .u-text-center\:xxl {
        text-align: center !important
    }
}

.u-text-weight-light {
    font-weight: 300 !important
}

.u-text-weight-normal {
    font-weight: 400 !important
}

.u-text-weight-bold {
    font-weight: 700 !important
}

.u-text-lowercase {
    text-transform: lowercase !important
}

.u-text-uppercase {
    text-transform: uppercase !important
}

.u-text-capitalize {
    text-transform: capitalize !important
}

.u-text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.u-text-nowrap {
    white-space: nowrap !important
}

.u-color-primary {
    color: "orange" !important
}

.u-color-primary\:hover:hover {
    color: "orange" !important
}

.u-bg-color-primary {
    background-color: "orange" !important
}

.u-bg-color-primary\:hover:hover {
    background-color: "orange" !important
}

.u-color-accent {
    color: #00b0bb !important
}

.u-color-accent\:hover:hover {
    color: #00b0bb !important
}

.u-bg-color-accent {
    background-color: #00b0bb !important
}

.u-bg-color-accent\:hover:hover {
    background-color: #00b0bb !important
}

.u-color-neutral-10 {
    color: #161618 !important
}

.u-color-neutral-10\:hover:hover {
    color: #161618 !important
}

.u-bg-color-neutral-10 {
    background-color: #161618 !important
}

.u-bg-color-neutral-10\:hover:hover {
    background-color: #161618 !important
}

.u-color-neutral-20 {
    color: #252227 !important
}

.u-color-neutral-20\:hover:hover {
    color: #252227 !important
}

.u-bg-color-neutral-20 {
    background-color: #252227 !important
}

.u-bg-color-neutral-20\:hover:hover {
    background-color: #252227 !important
}

.u-color-neutral-100 {
    color: #e6e6e6 !important
}

.u-color-neutral-100\:hover:hover {
    color: #e6e6e6 !important
}

.u-bg-color-neutral-100 {
    background-color: #e6e6e6 !important
}

.u-bg-color-neutral-100\:hover:hover {
    background-color: #e6e6e6 !important
}

.u-color-neutral-120 {
    color: #fafafa !important
}

.u-color-neutral-120\:hover:hover {
    color: #fafafa !important
}

.u-bg-color-neutral-120 {
    background-color: #fafafa !important
}

.u-bg-color-neutral-120\:hover:hover {
    background-color: #fafafa !important
}

.u-color-white {
    color: #fff !important
}

.u-color-white\:hover:hover {
    color: #fff !important
}

.u-bg-color-white {
    background-color: #fff !important
}

.u-bg-color-white\:hover:hover {
    background-color: #fff !important
}

.u-color-black {
    color: #000 !important
}

.u-color-black\:hover:hover {
    color: #000 !important
}

.u-bg-color-black {
    background-color: #000 !important
}

.u-bg-color-black\:hover:hover {
    background-color: #000 !important
}

.u-flex-row {
    flex-direction: row !important
}

.u-flex-row-reverse {
    flex-direction: row-reverse !important
}

.u-flex-column {
    flex-direction: column !important
}

.u-flex-column-reverse {
    flex-direction: column-reverse !important
}

.u-flex-wrap {
    flex-wrap: wrap !important
}

.u-flex-nowrap {
    flex-wrap: nowrap !important
}

.u-flex-wrap-reverse {
    flex-wrap: wrap-reverse !important
}

.u-flex-fill {
    flex: 1 1 auto !important
}

.u-justify-content-start {
    justify-content: flex-start !important
}

.u-justify-content-end {
    justify-content: flex-end !important
}

.u-justify-content-center {
    justify-content: center !important
}

.u-justify-content-between {
    justify-content: space-between !important
}

.u-justify-content-around {
    justify-content: space-around !important
}

.u-align-items-start {
    align-items: flex-start !important
}

.u-align-items-end {
    align-items: flex-end !important
}

.u-align-items-center {
    align-items: center !important
}

.u-align-items-baseline {
    align-items: baseline !important
}

.u-align-items-stretch {
    align-items: stretch !important
}

.u-align-content-start {
    align-content: flex-start !important
}

.u-align-content-end {
    align-content: flex-end !important
}

.u-align-content-center {
    align-content: center !important
}

.u-align-content-between {
    align-content: space-between !important
}

.u-align-content-around {
    align-content: space-around !important
}

.u-align-content-stretch {
    align-content: stretch !important
}

.u-align-self-auto {
    align-self: auto !important
}

.u-align-self-start {
    align-self: flex-start !important
}

.u-align-self-end {
    align-self: flex-end !important
}

.u-align-self-center {
    align-self: center !important
}

.u-align-self-baseline {
    align-self: baseline !important
}

.u-align-self-stretch {
    align-self: stretch !important
}

@media(min-width:576px) {
    .u\:sm-flex-row {
        flex-direction: row !important
    }
    .u\:sm-flex-row-reverse {
        flex-direction: row-reverse !important
    }
    .u\:sm-flex-column {
        flex-direction: column !important
    }
    .u\:sm-flex-column-reverse {
        flex-direction: column-reverse !important
    }
    .u\:sm-flex-wrap {
        flex-wrap: wrap !important
    }
    .u\:sm-flex-nowrap {
        flex-wrap: nowrap !important
    }
    .u\:sm-flex-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .u\:sm-flex-fill {
        flex: 1 1 auto !important
    }
    .u\:sm-justify-content-start {
        justify-content: flex-start !important
    }
    .u\:sm-justify-content-end {
        justify-content: flex-end !important
    }
    .u\:sm-justify-content-center {
        justify-content: center !important
    }
    .u\:sm-justify-content-between {
        justify-content: space-between !important
    }
    .u\:sm-justify-content-around {
        justify-content: space-around !important
    }
    .u\:sm-align-items-start {
        align-items: flex-start !important
    }
    .u\:sm-align-items-end {
        align-items: flex-end !important
    }
    .u\:sm-align-items-center {
        align-items: center !important
    }
    .u\:sm-align-items-baseline {
        align-items: baseline !important
    }
    .u\:sm-align-items-stretch {
        align-items: stretch !important
    }
    .u\:sm-align-content-start {
        align-content: flex-start !important
    }
    .u\:sm-align-content-end {
        align-content: flex-end !important
    }
    .u\:sm-align-content-center {
        align-content: center !important
    }
    .u\:sm-align-content-between {
        align-content: space-between !important
    }
    .u\:sm-align-content-around {
        align-content: space-around !important
    }
    .u\:sm-align-content-stretch {
        align-content: stretch !important
    }
    .u\:sm-align-self-auto {
        align-self: auto !important
    }
    .u\:sm-align-self-start {
        align-self: flex-start !important
    }
    .u\:sm-align-self-end {
        align-self: flex-end !important
    }
    .u\:sm-align-self-center {
        align-self: center !important
    }
    .u\:sm-align-self-baseline {
        align-self: baseline !important
    }
    .u\:sm-align-self-stretch {
        align-self: stretch !important
    }
}

@media(min-width:768px) {
    .u\:md-flex-row {
        flex-direction: row !important
    }
    .u\:md-flex-row-reverse {
        flex-direction: row-reverse !important
    }
    .u\:md-flex-column {
        flex-direction: column !important
    }
    .u\:md-flex-column-reverse {
        flex-direction: column-reverse !important
    }
    .u\:md-flex-wrap {
        flex-wrap: wrap !important
    }
    .u\:md-flex-nowrap {
        flex-wrap: nowrap !important
    }
    .u\:md-flex-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .u\:md-flex-fill {
        flex: 1 1 auto !important
    }
    .u\:md-justify-content-start {
        justify-content: flex-start !important
    }
    .u\:md-justify-content-end {
        justify-content: flex-end !important
    }
    .u\:md-justify-content-center {
        justify-content: center !important
    }
    .u\:md-justify-content-between {
        justify-content: space-between !important
    }
    .u\:md-justify-content-around {
        justify-content: space-around !important
    }
    .u\:md-align-items-start {
        align-items: flex-start !important
    }
    .u\:md-align-items-end {
        align-items: flex-end !important
    }
    .u\:md-align-items-center {
        align-items: center !important
    }
    .u\:md-align-items-baseline {
        align-items: baseline !important
    }
    .u\:md-align-items-stretch {
        align-items: stretch !important
    }
    .u\:md-align-content-start {
        align-content: flex-start !important
    }
    .u\:md-align-content-end {
        align-content: flex-end !important
    }
    .u\:md-align-content-center {
        align-content: center !important
    }
    .u\:md-align-content-between {
        align-content: space-between !important
    }
    .u\:md-align-content-around {
        align-content: space-around !important
    }
    .u\:md-align-content-stretch {
        align-content: stretch !important
    }
    .u\:md-align-self-auto {
        align-self: auto !important
    }
    .u\:md-align-self-start {
        align-self: flex-start !important
    }
    .u\:md-align-self-end {
        align-self: flex-end !important
    }
    .u\:md-align-self-center {
        align-self: center !important
    }
    .u\:md-align-self-baseline {
        align-self: baseline !important
    }
    .u\:md-align-self-stretch {
        align-self: stretch !important
    }
}

@media(min-width:992px) {
    .u\:lg-flex-row {
        flex-direction: row !important
    }
    .u\:lg-flex-row-reverse {
        flex-direction: row-reverse !important
    }
    .u\:lg-flex-column {
        flex-direction: column !important
    }
    .u\:lg-flex-column-reverse {
        flex-direction: column-reverse !important
    }
    .u\:lg-flex-wrap {
        flex-wrap: wrap !important
    }
    .u\:lg-flex-nowrap {
        flex-wrap: nowrap !important
    }
    .u\:lg-flex-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .u\:lg-flex-fill {
        flex: 1 1 auto !important
    }
    .u\:lg-justify-content-start {
        justify-content: flex-start !important
    }
    .u\:lg-justify-content-end {
        justify-content: flex-end !important
    }
    .u\:lg-justify-content-center {
        justify-content: center !important
    }
    .u\:lg-justify-content-between {
        justify-content: space-between !important
    }
    .u\:lg-justify-content-around {
        justify-content: space-around !important
    }
    .u\:lg-align-items-start {
        align-items: flex-start !important
    }
    .u\:lg-align-items-end {
        align-items: flex-end !important
    }
    .u\:lg-align-items-center {
        align-items: center !important
    }
    .u\:lg-align-items-baseline {
        align-items: baseline !important
    }
    .u\:lg-align-items-stretch {
        align-items: stretch !important
    }
    .u\:lg-align-content-start {
        align-content: flex-start !important
    }
    .u\:lg-align-content-end {
        align-content: flex-end !important
    }
    .u\:lg-align-content-center {
        align-content: center !important
    }
    .u\:lg-align-content-between {
        align-content: space-between !important
    }
    .u\:lg-align-content-around {
        align-content: space-around !important
    }
    .u\:lg-align-content-stretch {
        align-content: stretch !important
    }
    .u\:lg-align-self-auto {
        align-self: auto !important
    }
    .u\:lg-align-self-start {
        align-self: flex-start !important
    }
    .u\:lg-align-self-end {
        align-self: flex-end !important
    }
    .u\:lg-align-self-center {
        align-self: center !important
    }
    .u\:lg-align-self-baseline {
        align-self: baseline !important
    }
    .u\:lg-align-self-stretch {
        align-self: stretch !important
    }
}

@media(min-width:1280px) {
    .u\:xl-flex-row {
        flex-direction: row !important
    }
    .u\:xl-flex-row-reverse {
        flex-direction: row-reverse !important
    }
    .u\:xl-flex-column {
        flex-direction: column !important
    }
    .u\:xl-flex-column-reverse {
        flex-direction: column-reverse !important
    }
    .u\:xl-flex-wrap {
        flex-wrap: wrap !important
    }
    .u\:xl-flex-nowrap {
        flex-wrap: nowrap !important
    }
    .u\:xl-flex-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .u\:xl-flex-fill {
        flex: 1 1 auto !important
    }
    .u\:xl-justify-content-start {
        justify-content: flex-start !important
    }
    .u\:xl-justify-content-end {
        justify-content: flex-end !important
    }
    .u\:xl-justify-content-center {
        justify-content: center !important
    }
    .u\:xl-justify-content-between {
        justify-content: space-between !important
    }
    .u\:xl-justify-content-around {
        justify-content: space-around !important
    }
    .u\:xl-align-items-start {
        align-items: flex-start !important
    }
    .u\:xl-align-items-end {
        align-items: flex-end !important
    }
    .u\:xl-align-items-center {
        align-items: center !important
    }
    .u\:xl-align-items-baseline {
        align-items: baseline !important
    }
    .u\:xl-align-items-stretch {
        align-items: stretch !important
    }
    .u\:xl-align-content-start {
        align-content: flex-start !important
    }
    .u\:xl-align-content-end {
        align-content: flex-end !important
    }
    .u\:xl-align-content-center {
        align-content: center !important
    }
    .u\:xl-align-content-between {
        align-content: space-between !important
    }
    .u\:xl-align-content-around {
        align-content: space-around !important
    }
    .u\:xl-align-content-stretch {
        align-content: stretch !important
    }
    .u\:xl-align-self-auto {
        align-self: auto !important
    }
    .u\:xl-align-self-start {
        align-self: flex-start !important
    }
    .u\:xl-align-self-end {
        align-self: flex-end !important
    }
    .u\:xl-align-self-center {
        align-self: center !important
    }
    .u\:xl-align-self-baseline {
        align-self: baseline !important
    }
    .u\:xl-align-self-stretch {
        align-self: stretch !important
    }
}

@media(min-width:1440px) {
    .u\:xxl-flex-row {
        flex-direction: row !important
    }
    .u\:xxl-flex-row-reverse {
        flex-direction: row-reverse !important
    }
    .u\:xxl-flex-column {
        flex-direction: column !important
    }
    .u\:xxl-flex-column-reverse {
        flex-direction: column-reverse !important
    }
    .u\:xxl-flex-wrap {
        flex-wrap: wrap !important
    }
    .u\:xxl-flex-nowrap {
        flex-wrap: nowrap !important
    }
    .u\:xxl-flex-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .u\:xxl-flex-fill {
        flex: 1 1 auto !important
    }
    .u\:xxl-justify-content-start {
        justify-content: flex-start !important
    }
    .u\:xxl-justify-content-end {
        justify-content: flex-end !important
    }
    .u\:xxl-justify-content-center {
        justify-content: center !important
    }
    .u\:xxl-justify-content-between {
        justify-content: space-between !important
    }
    .u\:xxl-justify-content-around {
        justify-content: space-around !important
    }
    .u\:xxl-align-items-start {
        align-items: flex-start !important
    }
    .u\:xxl-align-items-end {
        align-items: flex-end !important
    }
    .u\:xxl-align-items-center {
        align-items: center !important
    }
    .u\:xxl-align-items-baseline {
        align-items: baseline !important
    }
    .u\:xxl-align-items-stretch {
        align-items: stretch !important
    }
    .u\:xxl-align-content-start {
        align-content: flex-start !important
    }
    .u\:xxl-align-content-end {
        align-content: flex-end !important
    }
    .u\:xxl-align-content-center {
        align-content: center !important
    }
    .u\:xxl-align-content-between {
        align-content: space-between !important
    }
    .u\:xxl-align-content-around {
        align-content: space-around !important
    }
    .u\:xxl-align-content-stretch {
        align-content: stretch !important
    }
    .u\:xxl-align-self-auto {
        align-self: auto !important
    }
    .u\:xxl-align-self-start {
        align-self: flex-start !important
    }
    .u\:xxl-align-self-end {
        align-self: flex-end !important
    }
    .u\:xxl-align-self-center {
        align-self: center !important
    }
    .u\:xxl-align-self-baseline {
        align-self: baseline !important
    }
    .u\:xxl-align-self-stretch {
        align-self: stretch !important
    }
}

.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.u-sr-only-focusable:active,
.u-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal
}

.grid-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter)
}

.grid-overlay-item {
    height: 100%;
    background-color: rgba(255, 0, 0, .1)
}

.rotate-center {
    /* -webkit-animation: rotate-center 10s ease-in-out infinite both;
    animation: rotate-center 10s ease-in-out infinite both; */
}

@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.about-section-colum-copy>span {
    font-size: 40px;
}

.Mobile-Img-Rout {
    position: absolute;
    width: 330px;
    right: 12%;
    bottom: 20px;
}

.Mobile-Img-Star {
    position: absolute;
    width: 20%;
    right: 12%;
    bottom: 20px;
}


/* .Mobile-Img-42Nite {
    position: absolute;
    width: 262px;
    right: 18.59%;
    bottom: 114px;
} */


/* .Mobile-Img-42Nite-polycub {
    position: absolute;
    width: 266px;
    right: 18.70%;
    bottom: 114px;
} */

.set-text-bottom {
    position: absolute;
    bottom: 40px;
    left: 40px;
}

.Mobile-Img-42Nite2 {
    position: absolute;
    width: 302px;
    right: 18.59%;
    bottom: 110px;
}

.aboutIncraftiv {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    margin-top: 181px;
}

.weListen {
    width: 96%;
    padding: 0% 15%;
}

.Window-Image {
    width: 230px;
    margin-left: 212px;
    margin-bottom: 60px;
    display: block;
}

.address:hover {
    text-decoration: underline;
}

.submitButton {
    width: 128px;
    height: 38px;
    float: inline-end;
    background: white;
    margin-top: 2%;
    border: 1px solid black;
}

.submitButton:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

@property --num {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

.numbers {
    transition: --num 1s;
    counter-reset: num var(--num);
}

.numbers:hover {
    --num: 10000;
}

.numbers::after {
    content: counter(num);
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.counting {
    counter-reset: count;
    animation: count-up 2s forwards;
}

@keyframes count-up {
    from {
        counter-reset: count;
    }
    to {
        counter-increment: count;
    }
}


/* NEW CSS ADD FOR SLIDER ---mobile*/

.img-slider {
    position: relative;
    width: 100vw;
    height: 220px;
    display: none;
}


/* End --NEW CSS ADD FOR SLIDER ---Mobile*/

.sub-menu {
    font-size: 26px;
    display: none;
    overflow: hidden;
    text-align: left;
    transition: height 2s;
}

.more-sub-menu:hover .sub-menu {
    display: block;
}

.more-sub-menu .nav-main-heading {
    position: relative;
}

.more-sub-menu .nav-main-heading img {
    content: '';
    position: absolute;
    top: 55%;
    bottom: 50%;
    margin: auto;
    right: 0px;
    transition: all 0.5s ease;
}

.more-sub-menu:hover .nav-main-heading img {
    transform: rotate(90deg);
}


/* css for new nav bar  starts -- > */

.desktop-nav {
    position: fixed;
    top: 0px;
    z-index: 10;
    width: 100%;
    display: flex;
    color: rgb(255, 255, 255);
    align-items: center;
    padding: 5px 100px;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, .7);
}

.desktop-nav .logo-holder {
    flex-shrink: 0;
}

.desktop-nav .logo-holder img {
    width: 200px;
}

.desktop-nav .nav-link-holder {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: end;
}

.arrow-service {
    position: relative;
}



.arrow-service::after {
    content: "";
    box-sizing: border-box;
    display: none;
    width: 5px;
    height: 100px;
    background-color: transparent;
    position: absolute;
    top: 22px;
    left: 26px;
    z-index: -1;
    right: 0px;
    margin: 0px auto;
    transform: translateX(-34%);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #fff;
}

.drop-hover:hover .arrow-service::after {
    display: block;
}

.nav-link-holder ul {
    margin-bottom: 0px;
}

.desktop-nav .nav-link-holder ul li {
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
}

.drop-hover .new-drop-down-elm .service-hover-elm .main-service-link li a,
.drop-hover .new-drop-down-elm .service-hover-elm .service-element-container .main-nav-list a,
.drop-hover .new-drop-down-elm .service-hover-elm .child-service-link ul li a {
    display: flex;
    align-items: center;
}

.drop-hover .new-drop-down-elm .service-hover-elm .main-service-link li a img,
.drop-hover .new-drop-down-elm .service-hover-elm .service-element-container .main-nav-list a img,
.drop-hover .new-drop-down-elm .service-hover-elm .child-service-link ul li a img {
    width: 20px;
    margin-right: 5px;
}

.drop-hover:hover .more-nav-dropdown {
    display: flex;
    flex-wrap: wrap;
}

.drop-hover:hover .more-nav-dropdown-no-flex {
    display: flex;
    justify-content: right;
}

.more-nav-dropdown {
    position: absolute;
    width: 100%;
    right: 0px;
    top: 25px;
    padding: 15px;
    display: none;
    background-color: white;
}

.more-nav-dropdown .main-nav-list {
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    width: 400px;
    padding: 10px;
    padding-right: 10px;
    color: black;
    border-radius: 5px;
    margin: 5px;
    background: linear-gradient(to right, rgb(162, 211, 225) 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
    cursor: pointer;
    /* background-color: rgba(0, 0, 0, .7); */
}

.desktop-nav {
    transition: bottom 0.5s linear;
    transition: top 0.5s linear;
}

@media(max-width:1000px) {
    .more-nav-dropdown .main-nav-list {
        padding: 10px;
    }
    .desktop-nav .nav-link-holder ul li {
        font-weight: 600;
        font-size: 11px;
    }
    .desktop-nav {
        padding: 10px 50px;
    }
}

.site-header {
    display: none;
}

.site-menu-body {
    z-index: -1;
}

.is-active {
    z-index: 40;
}

.is-active .site-menu-body {
    z-index: 10;
}

@media (max-width:655px) {
    .site-header {
        display: block !important;
    }
    .desktop-nav {
        display: none !important;
    }
}

@media (max-width:850px) {
    .desktop-nav {
        padding: 10px 20px;
    }
    .desktop-nav .logo-holder img {
        width: 130px;
    }
    .desktop-nav .nav-link-holder ul {
        margin-left: 20px;
    }
}


/* <-- css for new nav bar  ends */


/* Portfolio nav 
---------------------------------------------------- */

.portfolio-nav-elm div:nth-child(1) {}

.portfolio-nav-elm div:nth-child(2) ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.portfolio-nav-elm div:nth-child(2) ul li {
    width: 350px;
    height: 200px;
    padding: 10px;
}

.portfolio-nav-elm div:nth-child(2) ul li h4 {
    font-weight: 600;
}

.portfolio-nav-elm div:nth-child(2) ul li p {
    font-size: 13px;
}


/*  Portfolio nav ends 
-----------------------------------------------------*/


/* css for service pages  */

.service-hero-section {
    text-align: center;
}

.service-hero-section>div {
    margin-bottom: 50px;
}

.service-hero-section>.service-hero-title {
    font-size: 2vw;
}

.service-hero-section>.service-hero-type-anim {
    margin: 20px auto;
}

.service-hero-section>.service-hero-type-anim>.typing-anim {
    padding: 8px 15px;
    font-weight: bold;
    font-size: 2.5vw;
    margin-bottom: 20px;
    position: relative;
}

.service-hero-section.h1 {
    font-weight: 700;
}

.service-hero-section>.service-hero-type-pera {
    width: 60%;
    font-size: 1.3vw;
    color: #C1C1C1;
    margin: 20px auto;
}

.typing-anim {
    transition: all 1s;
}

.typing-anim::after {
    content: '|';
    position: absolute;
    margin: auto;
    bottom: -8px;
    right: 2px;
}

.container-holder {
    margin: 50px 0px;
    padding-top: 30px;
}

.container-holder .h1 {
    border-top: 1px solid black;
    padding-top: 37px;
}

strong {
    font-weight: 700;
}

.intro-section {
    text-align: center;
    width: 900px;
    margin: 100px auto;
}

.intro-section .h1 {
    font-weight: 700;
    background: linear-gradient(140deg, #f9b300 0, #6f00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.intro-section p {
    margin-top: 40px;
}


/* flex card holder */

.flex-card-holder {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
    background: #eee;
    padding: 50px 0;
}

.flex-card-holder h2 {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 60px;
}

.flex-card-holder .card-holder {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 0px auto;
    margin-bottom: 50px;
}

.flex-card-holder .card-holder .content-card {
    width: 33%;
    margin: 30px 20px;
    border-radius: 30px;
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 25px;
    text-align: left;
}

.flex-card-holder .card-holder .content-card h3 {
    font-weight: 600;
    font-size: 20px;
}

.flex-card-holder .card-holder .content-card p {
    font-size: 17px;
}

.pera {
    padding: 0px 100px;
    font-size: 25px;
    font-weight: 600;
}

.drop-hover:hover .new-drop-down-elm {
    display: block;
}

.new-drop-down-elm:hover {
    display: block;
}

.new-drop-down-elm {
    position: fixed;
    width: 75%;
    top: 41px;
    right: 0px;
    /* background: transparent; */
    display: none;
}

.new-drop-down-elm .service-hover-elm,
.new-drop-down-elm .portfolio-nav-elm {
    margin: 25px auto;
    border-radius: 15px;
    width: 75%;
    color: #0000009d;
    background-color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    text-align: start;
    /* position: relative; */
}

.new-drop-down-elm .service-hover-elm .main-service-link {
    margin: 10px;
    border-bottom: 2px solid #0003;
}

.new-drop-down-elm .service-hover-elm .main-service-link ul {
    margin-left: 0px;
    font-size: 18px;
}

.new-drop-down-elm .service-hover-elm .main-service-link a:hover {
    font-weight: 600;
    color: #000;
}

.new-drop-down-elm .service-hover-elm a:hover {
    font-weight: 600;
    color: #65B9EF;
}

.new-drop-down-elm .service-hover-elm .child-service-link li {
    margin: 10px 0px;
    padding: 5px;
}

.new-drop-down-elm .service-hover-elm .child-service-link li a,
.new-drop-down-elm .service-hover-elm .service-element-container a {
    position: relative;
}

.new-drop-down-elm .service-hover-elm .child-service-link li a:after,
.new-drop-down-elm .service-hover-elm .service-element-container a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.new-drop-down-elm .service-hover-elm .child-service-link li a:after:hover,
.new-drop-down-elm .service-hover-elm .service-element-container a:after:hover {
    width: 100%;
    left: 0;
}


/* .new-drop-down-elm .service-hover-elm .child-service-link li,
.new-drop-down-elm .service-hover-elm .service-element-container li {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.793) 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
} */

.new-drop-down-elm .service-hover-elm li a svg {
    height: 1.5em;
    width: 1.5em;
    margin-right: 5px;
}

.new-drop-down-elm .service-hover-elm .child-service-link li:hover,
.new-drop-down-elm .service-hover-elm .service-element-container li:hover {
    background-position: left bottom;
    color: #65B9EF;
}

.new-drop-down-elm .service-hover-elm .child-service-link li a:hover,
.new-drop-down-elm .service-hover-elm .service-element-container li a:hover {
    /* color: #ffffff; */
}

.new-drop-down-elm .service-hover-elm .service-element-container li {
    margin: 10px 20px;
    padding: 5px;
}


/* .new-drop-down-elm .service-hover-elm>div:nth-child(1) {} */


/* .new-drop-down-elm .service-hover-elm>div:nth-child(2) {
} */

@media (max-width:1806px) {
    .new-drop-down-elm .service-hover-elm {
        width: 85%;
    }
    .desktop-nav .nav-link-holder ul li {
        font-size: 16px;
    }
    .industries-dropDown {
        width: 60%;
        margin: 15px auto;
    }
}

@media (max-width:1595px) {
    .new-drop-down-elm .service-hover-elm {
        width: 90%;
    }
    .desktop-nav .nav-link-holder ul li {
        font-size: 14px;
    }
    .industries-dropDown {
        width: 60%;
    }
}

@media (max-width:1300px) {
    .flex-card-holder .card-holder {
        flex-wrap: wrap;
    }
    .flex-card-holder .card-holder .content-card {
        margin-bottom: 20px;
    }
}

@media(max-width:900px) {
    .intro-section {
        width: auto;
        margin: 100px auto;
    }
    .pera {
        padding: 0px 50px;
        font-size: 20px;
        font-weight: 600;
    }
}

@media(max-width:500px) {
    .pera {
        padding: 0px 5px;
        font-size: 20px;
        font-weight: 600;
    }
}

@media (max-width:1400px) {
    .new-drop-down-elm .service-hover-elm {
        width: 95%;
        padding: 15px;
    }
    .desktop-nav .nav-link-holder ul li {
        font-size: 14px;
    }
    .industries-dropDown {
        width: 70%;
    }
}

@media (max-width:1265px) {
    .desktop-nav .nav-link-holder ul li {
        font-size: 12px;
    }
    .new-drop-down-elm .service-hover-elm {
        width: 100%;
    }
}

@media (max-width:1020px) {
    .desktop-nav .nav-link-holder ul li {
        font-size: 10px;
    }
}

@media (max-width:875px) {
    .desktop-nav .nav-link-holder ul li {
        font-size: 8px;
    }
}

@media (max-width:735px) {
    .desktop-nav .nav-link-holder ul li {
        font-size: 6px;
    }
}

@media (max-width:1100px) {
    .desktop-nav .nav-link-holder .child-service-link ul {
        margin-left: 10px;
    }
    .new-drop-down-elm .service-hover-elm>div:nth-child(2) {
        margin-left: 30px;
    }
    .new-drop-down-elm .service-hover-elm .service-element-container {
        margin-left: 10px;
    }
    .new-drop-down-elm .service-hover-elm .service-element-container li {
        margin: 10px 10px;
    }
}


/* Mobile nav responsive
_____________________________________ */

@media (max-width:770px) {
    .nav-services li {
        font-size: 16px;
        margin: 10px auto;
        margin-left: 5px;
    }
    .nav-services li a {
        display: flex;
        align-items: center;
        justify-content: start;
    }
    .nav-services li a svg {
        width: 18px;
        margin-right: 5px;
        filter: brightness(0) invert(1);
    }
}


/* image card holder 
------------------------------------- */

.stick-flex-heading {
    position: sticky;
    top: 5%;
}

.stick-flex-conteiner {
    position: sticky;
    top: 20%;
    background: #fff;
}

.new-card-section {
    padding: 50px 50px;
    text-align: center;
    background-color: #f5f9ff;
    margin-bottom: 60px;
}

.new-card-section .content-card-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: justify;
    width: 80%;
    margin: 60px auto;
    margin-bottom: 30px;
    flex: 0 1 calc(25% - 1em);
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 20px;
}

@media (max-width:1215px) {
    .content-card-flex {
        width: 90%;
        margin: 23px auto;
        padding: 20px;
    }
}

@media (max-width:800px) {
    .content-card-flex {
        width: 100%;
        margin: 23px auto;
        padding: 20px;
    }
}

@media (max-width:600px) {
    .content-card-flex {
        width: 100%;
        margin: 23px auto;
        padding: 20px;
        flex-wrap: wrap;
    }
}


/* side scroll container
---------------------------------------- */

.side-scroller-elm {
    display: flex;
    justify-content: space-between;
    /* flex-wrap: wrap; */
    margin-top: 50px;
}

.side-scroller-elm .content-wraper {
    text-align: left;
    margin: 0 auto;
    padding-right: 30px;
    margin-bottom: 30px;
}

.side-scroller-elm .first-div,
.second-div {
    padding: 30px;
}

.side-scroller-elm .first-div {
    width: 40%;
}

.side-scroller-elm .second-div {
    width: 60%;
}

.side-scroller-elm .second-div div {
    background-color: #f9f9f9;
    padding: 15px;
    margin: 20px auto;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.side-scroller-elm .second-div div:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.stick-container {
    position: sticky;
    top: 8rem;
}

.side-scroller-elm h2,
h3 {
    font-weight: 700;
}


/* .stick-flex-conteiner .img-holder-box {
    width: 100%;
} */

.stick-flex-conteiner .img-holder-box {
    margin: 0px auto;
}

.stick-flex-conteiner .img-holder-box img {
    max-width: 350px;
    width: 350px;
    margin: 0px auto;
}

.content-card-flex .img-holder-box {
    margin: 0px auto;
    width: 27%;
    flex-shrink: 0;
}

.content-card-flex .img-holder-box img {
    max-width: 100%;
    width: 300px;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:769px) {
    .side-scroller-elm {
        flex-wrap: wrap;
    }
    .side-scroller-elm .first-div {
        width: auto;
    }
    .side-scroller-elm .second-div {
        width: auto;
    }
}

@media (max-width:500px) {
    .side-scroller-elm .content-wraper {
        text-align: left;
        margin: 0 0;
    }
    .side-scroller-elm .first-div,
    .second-div {
        padding: 10px;
    }
    .side-scroller-elm h2,
    h3 {
        font-weight: 600;
    }
    .stick-flex-conteiner .img-holder-box img {
        max-width: 200px;
        width: 200px;
    }
    .new-card-section {
        padding: 50px 10px;
    }
    .content-card-flex .img-holder-box img {
        max-width: 200px;
        width: 200px;
        margin: 0px auto;
    }
}

.page-ending-content {
    background-color: #b1ade2;
    text-align: center;
    width: 100%;
    height: 60vh;
    margin: 50px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-ending-content .page-ending-container {
    width: 80%;
}

.page-ending-content .page-ending-container>p {
    margin: 50px 20px;
    color: #C1C1C1;
}

.page-ending-content .h2 {
    font-weight: 600;
}

@media(max-width:500px) {
    .page-ending-content {
        width: 100%;
    }
}

@media (max-width:700px) {
    .page-ending-content {
        height: 100vh;
    }
    .page-ending-content .page-ending-container {
        width: 100%;
        padding: 20px;
    }
    .page-ending-content .page-ending-container>p {
        margin-bottom: 30px;
    }
}


/* service page heading 
_________________________________ */

.summary-title-new {
    margin-top: 80px;
    padding-top: var(--spacing);
    padding-bottom: var(--spacing);
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 40px;
    color: black;
    background-color: #fff;
    padding: 10px;
    border-radius: 15px;
}


/* Service step by step element 
__________________________________________ */

.step-by-step-holder {
    text-align: center;
    margin-bottom: 20px;
    margin: 0px auto;
}

.step-by-step-holder div:first-child {
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
}

.main-flex-box-holder {
    display: flex;
    justify-content: space-between;
    margin: 10px auto;
}

.main-flex-box-holder .content-holder-box {
    width: 100%;
    padding: 10px;
    display: flex;
    color: #fff;

}

.main-flex-box-holder .content-holder-box p:first-child {
    font-size: 2vw;
    font-weight: 600;
    margin-bottom: 10px;
}

.main-flex-box-holder .content-holder-box p:last-child {
    color: #A7A7A7;
}

.main-flex-box-holder .content-holder-box .count-holder {
    margin-right: 20px;
}

.main-flex-box-holder .content-holder-box .count-holder .counting-circle {
    font-size: 2vw;
    font-weight: bold;
    text-align: center;
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* .main-flex-box-holder .content-holder-box .count-holder div {
    width: 30px;
    height: 30px;
} */

.main-flex-box-holder .content-holder-box .box-content-holder {
    text-align: left;
}

@media (max-width:600px) {
    .main-flex-box-holder {
        display: flex;
        justify-content: space-between;
        margin: 10px auto;
        flex-wrap: wrap;
    }
}


/* service page list element 
--------------------------------------------- */

.list-info-elm .h3 {}

.list-info-elm ul>li {
    margin: 15px 10px;
}


/* faq block 
-------------------------------------*/

.faq-section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    margin: 0px auto;
    margin-top: 30px;
    background-color: #161618;
    margin-bottom: 20vh;
}

.stick-faq-img {
    padding: 0px 20px;
}

.stick-faq-img img {
    width: 80%;
}

.stick-faq-img h2 {
    position: sticky;
    top: 30px;
}

.stick-faq-img {
    position: sticky;
    top: 30px;
}

.faq-section .faq-Block-holder {
    width: 100%;
}

.faq-section .faq-div {
    margin-top: 20px;
}

.faq-section .faq-div .faq-box {
    background-color: #222222;
    margin-bottom: 30px;
    border: 1px solid #3C3C3C !important;
    border-radius: 10px;
    color: #ffff;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.faq-section .faq-div .faq-box .faq-headding {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-section .faq-div .faq-box .faq-headding svg {
    transform: rotate(0deg);
    transition: transform 0.5s linear;
}

.faq-section .faq-div .active .faq-headding svg {
    transform: rotate(90deg);
    transition: transform 0.5s linear;
}

.faq-section .faq-div .faq-box .faq-headding h3 {
    margin: 0px;
    width: 95%;
    font-weight: 600;
}


/* .faq-section .faq-div .active .hide-show-qa::before {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #000c;
    display: block;
    margin: 15px 0px;
} */

.faq-section .faq-div .active .hide-show-qa {
    padding: 10px;
}

.faq-section .faq-div .faq-box .hide-show-qa,
.faq-section .faq-div .faq-box p,
.faq-section .faq-div .faq-box ul {
    overflow: hidden;
    margin: 0px;
    height: 0px;
    padding: 0px 10px;
    color: #CECECE;
    transition: all 0.5s;
}

.faq-section .faq-div .active .hide-show-qa,
.faq-section .faq-div .active p,
.faq-section .faq-div .active ul {
    /* display: block; */
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
.faq-section .faq-div .faq-box .hide-show-qa ul li  {
    color: #CECECE;
    list-style-position: inside;
}

.faq-section .faq-div .faq-box .hide-show-qa ul li a {
    color: #65B9EF;
   
}

.faq-section .faq-box .faq-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #41A7E9;  
    position: relative;
}

.faq-section .faq-box .faq-circle div:nth-child(1) {
    position: absolute;
    height: 4px;
    width: 70%;
    margin: 0px auto;
    background-color: #ffff;
    top: 47%;
    right: 0px;
    left: 0px;
    border-radius: 5px;
}

.faq-section .faq-box .faq-circle div:nth-child(1)::before,
.faq-section .faq-box .faq-circle div:nth-child(1)::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    display: block;
    width: 4px;
    background-color: #fff;
    margin: 0px auto;
    right: 0px;
    left: 0px;
    height: 15px;
    border-radius: 5px;
    transition: all 0.8s;
}

.faq-section .faq-box .faq-circle div:nth-child(1)::before {
    top: -10px;
}

.faq-section .active .faq-circle div:nth-child(1)::before {
    top: 0px;
    height: 0px;
    opacity: 0;
}

.faq-section .active .faq-circle div:nth-child(1)::after {
    height: 0px;
    opacity: 1;
}

@media (min-width:1501px) {
    .faq-section .faq-div {
        display: grid;
        grid-template-columns: auto auto;
        align-items: baseline;
    }
    .faq-box {
        margin: 5px;
    }
}

@media (max-width:1500px) {
    .faq-section .faq-Block-holder {
        width: 100%;
    }
}

@media (max-width:1300px) {
    .faq-section .faq-Block-holder {
        width: 100%;
    }
    .stick-faq-img img {
        width: 100%;
    }
}

@media (max-width:850px) {
    .faq-section .faq-Block-holder {
        width: 100%;
    }
    .stick-faq-img {
        display: none;
    }
    .faq-section {
        display: block;
    }
    .faq-section .faq-div .faq-box .faq-headding h3 {
        font-size: 22px;
    }
    .faq-section .faq-div .faq-box .hide-show-qa {
        font-size: 16px;
    }
}

@media (max-width:500px) {
    .faq-section .faq-div .faq-box .faq-headding h3 {
        font-size: 13px;
        width: 80%;
    }
    .faq-section .faq-div .faq-box .hide-show-qa {
        font-size: 9px;
    }
    .faq-section .faq-div .active .hide-show-qa {
        padding: 0px;
    }
    .faq-section .faq-div .active .hide-show-qa::before {
        margin: 5px 0px;
    }
    .faq-section .faq-div .faq-headding svg {
        width: 13px;
    }
}


/* Home page style
--------------------------------------- */

.banner-Mobile-img-holder {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-Mobile-img-holder div:nth-child(1) img {
    width: 250px;
    margin-bottom: 100px;
}


/* .banner-Mobile-img-holder div:nth-child(2) img {
    width: 420px;
} */

@media (max-width:1350px) {
    /* .banner-Mobile-img-holder div:nth-child(2) img {
        width: 400px;
        margin-bottom: 100px;
    } */
}

@media (max-width:1000px) {
    /* .banner-Mobile-img-holder div:nth-child(2) img {
        width: 380px;
        margin-bottom: 150px;
    } */
}

@media (max-width:600px) {
    /* .banner-Mobile-img-holder div:nth-child(2) img {
        width: 300px;
        margin-bottom: 150px;
    } */
    .banner-Mobile-img-holder {
        justify-content: center;
    }
}


/* contact form 
___________________________________ */

.contact {
    margin: 15vh 0px;
}

.contact-form form {
    padding: 20px;
    border-radius: 15px;
    margin: 10px;
    box-shadow: rgb(180 172 172 / 56%) 0px 0px 9px 0px, rgb(255 255 255) 0px 0px 2px 0px;
}

.contact-form .Form-heading {
    text-align: center;
    margin-bottom: 50px;
}

.contact-form .Form-heading h2 {
    font-weight: 700;
}

.custom-contact-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.custom-contact-form .elementor-button,
.custom-contact-form button {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-shadow: 0 0 0 rgba(0, 0, 0, .3);
    color: var(--e-global-color-35a500f);
    background-color: #fff;
    border-style: solid;
    border-width: 0;
    border-radius: 5px;
    padding: 15px;
    width: 95%;
}

.custom-contact-form input[type=submit] {
    border: 1px solid #3895D1;
    font-weight: 600;
    padding: 17px 25px;
    width: 95%;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}

.custom-contact-form input[type=submit]:hover {
    background-position: right bottom;
    color: #3895D1;
}

.custom-contact-form input {
    position: relative;
}

.form-control-wrap {
    position: relative;
}

.form-control-wrap img {
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: 15px;
    margin: auto;
}

.custom-contact-form .elementor-button:focus,
.custom-contact-form .elementor-button:hover,
.custom-contact-form button:focus,
.custom-contact-form button:hover,
.custom-contact-form input[type=submit]:focus,
.custom-contact-form input[type=submit]:hover {
    background-color: #fff;
    outline: none;
}

.custom-contact-form label {
    font-size: 16px;
    font-weight: 500
}

.custom-contact-form input:not([type=button]):not([type=submit]),
.custom-contact-form textarea {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    border: 1px solid #b5b1b1;
    border-width: 1px;
    border-color: #b5b1b1;
    border-radius: 5px;
    transition: .5s;
    background-color: #000;
    padding: 15px 10px;
    padding-right: 40px;
}

.custom-contact-form input:focus:not([type=button]):not([type=submit]),
.custom-contact-form textarea:focus {
    border-style: solid;
    border-width: 1px;
    border-color: #fff;
    border-radius: 5px;
    outline: none;
}

.custom-contact-form .form-control-wrap input,
.custom-contact-form .form-control-wrap select {
    padding: 10px
}

.custom-contact-form .form-control-wrap textarea {
    height: 70px
}

.custom-contact-form label:nth-child(odd) {
    padding-right: 10px;
    padding-left: 0
}

.custom-contact-form label:nth-child(even) {
    padding-left: 10px;
    padding-right: 0
}

.custom-contact-form label {
    margin-bottom: 25px;
    display: block;
    width: 100%;
}

.custom-contact-form label:nth-child(odd) {
    padding-left: 10px
}

.custom-contact-form label:nth-child(even) {
    padding-right: 10px
}

.custom-contact-form label.last-label {
    width: 100%;
    padding: 0px 13px;
}

.custom-contact-form .Form-label {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 600;
}

.popmake-content .custom-contact-form .Form-label {
    font-size: 18px;
    font-weight: 600;
}

.custom-contact-form .Form-label,
.custom-contact-form .form-control-wrap {
    width: 100%;
    display: inline-block
}

.custom-contact-form .form-control-wrap input,
.custom-contact-form .form-control-wrap select,
.custom-contact-form .form-control-wrap textarea {
    width: 100%
}

.custom-contact-form .form-control-wrap select {
    font-family: "Open Sans", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    border: 1px solid #ffffff9c;
    background-color: #000;
    border-radius: 5px;
    transition: .5s;
    padding: 15px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-contact-form .form-control-wrap select:focus {
    border-color: #ffffff;
}

.custom-contact-form .form-control-wrap textarea {
    height: 80px;
    resize: none
}

.custom-contact-form input[type=submit] {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-shadow: 0 0 0 rgba(0, 0, 0, .3);
    color: #fff;
    background-color: #00b2ff;
    border-style: solid;
    border-width: 0;
    border-radius: 5px;
    padding: 15px
}

.custom-contact-form .success-message,
.custom-contact-form .error-message {
    margin-left: 10px;
    padding: 10px;
    display: none;
}

.custom-contact-form .success-message {
    border: 1px solid #026202;
    background-color: #ccefcc;
}

.social-icon-holder {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.custom-contact-form .error-message {
    border: 1px solid #822703;
    background-color: #e9b99e;
}

@media (max-width:600px) {
    .custom-contact-form label {
        width: 100%
    }
    .contact-item-body {
        margin: 0px auto;
    }
    .contact-item {
        padding: 20px;
    }
}

@media (max-width:450px) {
    .contact-item {
        padding: 5px;
        border: none;
    }
    .contact {
        padding: 2px;
    }
    .contact-form form {
        padding: 10px;
    }
    .contact-item-body {
        margin: 0px 15px;
    }
    .contact {
        margin: 0vh 0px;
        margin-bottom: 20vh;
    }
}

.homePageContact {
    border: 1px solid #3895D1;
    font-weight: 600;
    padding: 17px 25px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}

.homePageContact:hover {
    background-position: right bottom;
    color: #3895D1;
}

.contact-item-address a {
    margin-bottom: 15px;
}


/* Portfolio style ------------------------------------
---------------------------------------------------------------------- */

.portFolio-page {
    background-image: linear-gradient(to right, #434343 0%, black 100%);
    scroll-behavior: smooth;
}

.main-section {
    /* background-image: linear-gradient(to right, #434343 0%, black 100%); */
    position: relative;
    margin-bottom: 30px;
    background: url('../../../../../portfolio/portfolio-assits/portfolio-background.webp') no-repeat;
    background-size: cover;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-section .hero-Section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #fff;
    position: relative;
    gap: 150px;
}

.main-section .hero-Section div {
    color: rgb(255, 255, 255);
    position: relative;
    z-index: 3;
}

.main-section .hero-Section h2 {
    font-size: 4em;
    font-weight: 600;
}

.flex-items-holder {
    display: flex;
    gap: 8rem;
    position: relative;
    z-index: 0;
    padding: 0px 10px;
    padding-bottom: 4rem;
    padding-top: 4rem;
    transition: all 0.2s;
    align-items: center;
    margin: 50px auto;
    width: 80%;
    min-height: 60vh;
    justify-content: center;
    /* background-image: linear-gradient(to right, #434343 0%, black 100%); */
}

.portoflio-page .flex-items-holder:hover {
    background-image: linear-gradient(to right, #434343 0%, #000000e8 100%);
    border-radius: 50px;
}

.portoflio-page .portFolio-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    /* flex-basis: 600px; */
}

.portoflio-page .portFolio-img-container .img-container-desktop {
    width: 600px;
}

.portoflio-page .portFolio-img-container .img-container-mobile {
    width: 130px;
    bottom: 300px;
    right: 20px;
    position: absolute;
    place-items: center;
}

.portoflio-page .portFolio-img-container .img-container-mobile img {
    transition: all 0.3s linear;
    position: absolute;
    margin: auto;
    transform-origin: bottom;
}

.portoflio-page .portFolio-content-container {
    color: white;
    flex-grow: 1;
}

.portoflio-page .flex-items-holder:hover .portFolio-img-container .img-container-mobile img:nth-child(1) {
    transform: rotate(-20deg);
}

.portoflio-page .flex-items-holder:hover .portFolio-img-container .img-container-mobile img:nth-child(2) {
    transform: rotate(20deg);
}

.portFolio-content-container .title {
    font-weight: 700;
    margin-bottom: 40px;
    font-size: 42px;
    position: relative;
}

.portFolio-content-container .title::after {
    content: "";
    position: absolute;
    left: 5px;
    bottom: -10px;
    width: 10%;
    height: 8px;
    background-color: #fff;
    transition: all .5s ease-out;
}

.flex-items-holder .routespring-title::after {
    background-color: #9d4bf6;
}

.exit-section .portfolio-exit-section .exit-section-content-holder .client-name .client-name-item:nth-child(1) {
    color: #9d4bf6;
}

.flex-items-holder .pixstory-title::after {
    background-color: #e9ff04;
}

.exit-section .portfolio-exit-section .exit-section-content-holder .client-name .client-name-item:nth-child(2) {
    color: #e9ff04;
}

.flex-items-holder .polycab-title::after {
    background-color: #ce2a2b;
}

.exit-section .portfolio-exit-section .exit-section-content-holder .client-name .client-name-item:nth-child(3) {
    color: #ce2a2b;
}

.flex-items-holder .v2kart-title::after {
    background-color: #da494b;
}

.exit-section .portfolio-exit-section .exit-section-content-holder .client-name .client-name-item:nth-child(4) {
    color: #da494b;
}

.flex-items-holder .nite-title::after {
    background-color: #03e9bb;
}

.exit-section .portfolio-exit-section .exit-section-content-holder .client-name .client-name-item:nth-child(5) {
    color: #03e9bb;
}

.flex-items-holder .starsgyan-title::after {
    background-color: #ad0042;
}

.exit-section .portfolio-exit-section .exit-section-content-holder .client-name .client-name-item:nth-child(6) {
    color: #ad0042;
}

.flex-items-holder:hover .title::after {
    width: 15%;
}

.portFolio-content-container .short-disc {
    font-weight: 600;
    font-size: 22px;
    background: #ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portFolio-content-container .long-disc {
    color: #C6C6C6;
    margin-bottom: 30px;
    font-size: 15px;
}

.portFolio-content-container .button-holder {
    border: 1px solid #3895D1;
    font-weight: 600;
    padding: 10px 30px;
    font-size: 22px;
    margin-top: 10px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}

.portFolio-content-container .button-holder:hover {
    background-position: right bottom;
    color: #3895D1;
}

.exit-section .portfolio-exit-section {
    width: 90%;
    margin: 100px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.exit-section-content-holder {
    flex-shrink: 0;
}

.exit-section-content-holder .exit-title {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 50px;
    overflow: hidden;
}

.exit-section-content-holder .portfolio-button {
    border: 1px solid #3895D1;
    font-weight: 600;
    padding: 10px 30px;
    font-size: 22px;
    color: white;
    margin-top: 10px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}

.exit-section-content-holder .portfolio-button:hover {
    background-position: right bottom;
    color: #3895D1;
}

.exit-section .portfolio-exit-section .desktop-img-holder {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 20px;
}

.exit-section .portfolio-exit-section .exit-section-content-holder .client-name,
.exit-section .portfolio-exit-section .desktop-img-holder .animate-img-holder {
    position: relative;
    width: 100%;
    height: 500px;
    margin-left: 10px;
}

.exit-section .portfolio-exit-section .exit-section-content-holder .client-name .client-name-item {
    position: absolute;
    width: 100%;
    bottom: -200px;
    transition: all 1s ease;
}

.exit-section .portfolio-exit-section .desktop-img-holder .animate-img-holder img {
    position: absolute;
    width: 100%;
    bottom: -600px;
    transition: all 2s ease;
}

.exit-section .portfolio-exit-section .exit-section-content-holder .exit-title .client-name .active {
    bottom: -7px;
}

.exit-section .portfolio-exit-section .desktop-img-holder .animate-img-holder .active {
    bottom: 0px;
}

.exit-section-content-holder .exit-title-another {
    display: none;
}

@media (max-width:1700px) {
    .exit-section-content-holder .exit-title {
        font-size: 40px;
    }
}

@media (max-width:1500px) {
    .exit-section-content-holder .exit-title {
        font-size: 35px;
        margin-top: 100px;
    }
    .portoflio-page .flex-items-holder {
        width: 90%;
        gap: 5rem;
    }
}

@media (max-width:1400px) {
    .main-section .hero-Section h2 {
        font-size: 2.8em;
    }
    .exit-section .portfolio-exit-section .desktop-img-holder .animate-img-holder .active {
        bottom: 65px;
    }
}

@media (max-width:1300px) {
    .portoflio-page .portFolio-img-container .img-container-desktop {
        width: 500px;
    }
    .portFolio-content-container .title {
        font-size: 40px;
    }
    .portFolio-content-container .short-disc {
        font-size: 20px;
    }
    .portFolio-content-container .long-disc {
        font-size: 14px;
    }
    .exit-section-content-holder .exit-title {
        font-size: 30px;
    }
    .exit-section-content-holder {
        width: 50%;
    }
    .exit-section .portfolio-exit-section .desktop-img-holder {
        width: 60%;
    }
}

@media (max-width:1200px) {
    .exit-section-content-holder .exit-title {
        font-size: 2vw;
    }
    .exit-section-content-holder {
        width: 40%;
    }
    .exit-section .portfolio-exit-section .desktop-img-holder {
        width: 60%;
    }
    .exit-section-content-holder .exit-title {
        margin-top: 70px;
    }
    .exit-section .portfolio-exit-section .exit-section-content-holder .client-name .active {
        bottom: -3px;
    }
    .exit-section-content-holder .portfolio-button {
        font-size: 2vw;
    }
}

@media (max-width:1000px) {
    .main-section .hero-Section h2 {
        font-size: 2em;
    }
    .portoflio-page .portFolio-img-container .img-container-desktop {
        width: 450px;
    }
    .portFolio-content-container .title {
        font-size: 40px;
    }
    .portFolio-content-container .short-disc {
        font-size: 20px;
    }
    .portoflio-page .flex-items-holder {
        width: 100%;
        margin: 0px;
    }
    .portoflio-page .portFolio-img-container .img-container-mobile img {
        width: 100px;
    }
    .portoflio-page .portFolio-img-container .img-container-mobile {
        width: 130px;
        bottom: 230px;
        right: 0px;
    }
    .portoflio-page .flex-items-holder {
        gap: 3rem;
    }
    .portFolio-content-container .title {
        margin-bottom: 30px;
    }
    .portFolio-content-container .title {
        margin-bottom: 20px;
    }
    .portFolio-content-container .button-holder {
        font-size: 16px;
    }
}

@media (max-width:900px) {
    .portoflio-page .flex-items-holder {
        flex-direction: column;
        width: 90%;
        margin: 0px auto;
    }
    .portoflio-page .portFolio-img-container .img-container-mobile {
        top: 16%;
        width: 110px;
        bottom: 0px;
        right: 35px;
    }
    .portoflio-page .portFolio-img-container .img-container-mobile img {
        width: 250px;
    }
    .portoflio-page .portFolio-img-container .img-container-desktop {
        width: 80%;
    }
    .exit-section .portfolio-exit-section {
        width: 95%;
        margin: 50px auto;
        flex-direction: column;
    }
    .exit-section-content-holder {
        width: 100%;
        text-align: center;
    }
    .exit-section-content-holder .exit-title {
        font-size: 4vw;
        display: none;
    }
    .exit-section-content-holder .exit-title-another {
        font-size: 4vw;
        display: block;
        color: #fff;
        font-weight: 700;
        margin-bottom: 20px;
    }
    .exit-section .portfolio-exit-section .exit-section-content-holder .client-name {
        position: relative;
        width: 100%;
        height: 50px;
        overflow: hidden;
        margin-left: 10px;
        margin: 0px auto;
    }
    .exit-section .portfolio-exit-section .exit-section-content-holder .client-name .client-name-item {
        margin-bottom: 10px;
    }
    .exit-section .portfolio-exit-section .desktop-img-holder {
        width: 100%;
    }
    .exit-section .portfolio-exit-section .desktop-img-holder .animate-img-holder {
        width: 80%;
        height: 500px;
        margin: 0px auto;
    }
}

@media (max-width:700px) {
    .main-section .hero-Section h2 {
        font-size: 24px;
        font-weight: 800;
        color: #fff;
        line-height: 32px;
    }
    .main-section .hero-Section::after {
        content: "";
        position: absolute;
        top: -40px;
        transform: translate(-50%, 0);
        left: 50%;
        background: url('../../../../../portfolio/portfolio-assits/porfolio-hero-background-mobile.webp') center / cover no-repeat;
        z-index: -1;
        width: 280px;
        height: 610px;
        opacity: 0.8;
    }
}

@media (max-width:650px) {
    .portoflio-page .portFolio-img-container .img-container-mobile {
        top: 12%;
        width: 80px;
        bottom: 0px;
        right: 48px;
    }
    .exit-section .portfolio-exit-section .desktop-img-holder .animate-img-holder {
        width: 100%;
        height: 430px;
        margin: 0px auto;
    }
}

@media (max-width:500px) {
    .portoflio-page .portFolio-img-container .img-container-mobile img {
        min-width: 80px;
        width: 80px;
    }
    .portoflio-page .portFolio-img-container .img-container-mobile {
        top: 14%;
    }
    .portoflio-page .flex-items-holder {
        flex-direction: column;
        width: 95%;
    }
    .main-section {
        margin-bottom: 0px;
    }
    .portFolio-content-container .button-holder img {
        width: 110px;
    }
    .portFolio-content-container .button-holder .visitWebsiteBtn {
        width: 150px;
    }
    .portFolio-content-container .button-holder .visitWebsiteBtn img {
        width: 25px;
        font-size: 16px;
    }
    .portoflio-page .flex-items-holder {
        width: 95%;
    }
    .hero-tagline {
        margin-right: 0px;
    }
    .homePageContact {
        padding: 8px 10px;
        font-size: 14px;
    }
    .hero-content .hero-tagline p {
        margin: 20px 0px;
    }
    .hero-content .hero-tagline h1 {
        font-size: 33px !important;
        margin: 25px 0px;
    }
    .exit-section .portfolio-exit-section .desktop-img-holder .animate-img-holder {
        height: 350px;
    }
}

@media (max-width:450px) {
    .portFolio-content-container .title {
        margin-bottom: 24px;
        font-size: 30px;
    }
    .portFolio-content-container .short-disc {
        font-size: 16px;
    }
}

@media (max-width:400px) {
    .portFolio-content-container .button-holder .visitWebsiteBtn {
        width: 170px;
    }
    .portoflio-page .flex-items-holder {
        gap: 3rem;
    }
    .portFolio-content-container .long-disc {
        font-size: 13px;
    }
    .portoflio-page .portFolio-img-container .img-container-desktop {
        width: 100%;
    }
    .exit-section .portfolio-exit-section .desktop-img-holder .animate-img-holder {
        width: 100%;
        height: 300px;
        margin: 0px auto;
    }
    .exit-section .portfolio-exit-section .exit-section-content-holder .client-name {
        height: 48px;
        font-size: 20px;
    }
}


/* About us new banner css
_______________________________________________*/

.about-us-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-content-holder {
    width: 60%;
}

.about-content-holder .about-pera-heading {
    color: #3895D1;
}

.about-content-holder h2 {
    font-size: 4.5rem;
    font-weight: 600px;
}

.about-content-holder .about-content-pera {
    font-size: 17px;
}

.about-content-holder .text-gradiant {
    font-weight: bold;
    background: linear-gradient(to right, #6bb9f0, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-content-holder button {
    border: 1px solid #3895D1;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 35px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}

.about-content-holder button:hover {
    background-position: right bottom;
    color: #3895D1;
}

.about-count-holder {
    background-color: #001928;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 60px 40px;
    margin-top: 50px;
}

.about-count-holder div {
    text-align: center;
}

.about-count-holder .pera-head {
    font-weight: 600;
    font-size: 28px;
}

.about-count-holder .pera-count {
    font-size: 54px;
    font-weight: 600;
    color: #5AB9F7;
}

.about-count-holder .pera-count:hover {
    color: #ffff;
}

.about-count-holder .pera-line {
    font-size: 16px;
    font-weight: 600;
}

.slide-left-elm {
    /* transform: translateX(-100%); */
    opacity: 0;
    transition: all 0.5s;
}

.slide-right-elm {
    opacity: 0;
    /* transform: translateX(100%); */
    transition: all 0.5s;
}

.slide-left-elm-true {
    opacity: 1;
    /* transform: translateX(0); */
}

.slide-left-elm-exit {
    opacity: 0;
    transform: translateX(100%);
}

.slide-right-elm-true {
    opacity: 1;
    transform: translateX(0);
}

.slide-left-elm-exit {
    opacity: 0;
    transform: translateX(-100%);
}

.text-zoom-and-animate {
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
    transition: all 1s;
    animation-delay: 2s;
    transform: scale(10);
}

.text-zoom-and-animate h2 {
    color: #fff;
}

.text-zoom-and-animate-true {
    transform: scale(1);
}

@media (max-width:1611px) {
    .about-content-holder h2 {
        font-size: 4rem;
    }
    .about-count-holder {
        padding: 35px 40px;
    }
}

@media (max-width:1449px) {
    .about-content-holder h2 {
        font-size: 3.3rem;
    }
    .about-content-holder button {
        font-size: 18px;
        padding: 8px 30px;
    }
}

@media (max-width:1395px) {
    .about-content-holder {
        width: 55%;
    }
    .about-content-holder h2 {
        font-size: 3rem;
    }
}

@media (max-width:1200px) {
    .about-content-holder {
        width: 50%;
    }
    .about-content-holder h2 {
        font-size: 2.5rem;
    }
    .about-content-holder .about-content-pera {
        font-size: 14px;
    }
}

@media (max-width:1090px) {
    .about-content-holder h2 {
        font-size: 2.0rem;
    }
    .about-content-holder .about-content-pera {
        font-size: 14px;
    }
    .about-content-holder {
        width: 55%;
    }
    .about-img-holder {
        width: 40%;
    }
    .about-count-holder .pera-head {
        font-size: 22px;
    }
    .about-count-holder .pera-count {
        font-size: 45px;
    }
    .about-count-holder .pera-line {
        font-size: 16px;
    }
}

@media (max-width:830px) {
    .about-count-holder .pera-head {
        font-size: 19px;
    }
    .about-count-holder .pera-count {
        font-size: 40px;
    }
    .about-count-holder .pera-line {
        font-size: 14px;
    }
    .about-count-holder {
        padding: 25px 30px;
    }
}

@media (max-width:750px) {
    .about-us-banner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .about-content-holder {
        width: 80%;
        text-align: center;
    }
    .about-img-holder {
        width: auto;
        margin: 35px auto;
    }
    .about-img-holder {
        display: flex;
        justify-content: center;
    }
    .about-img-holder img {
        width: 70%;
    }
    .about-count-holder {
        margin-top: 0px;
    }
}

@media (max-width:650px) {
    .about-count-holder .pera-head {
        font-size: 17px;
    }
    .about-count-holder .pera-count {
        font-size: 35px;
    }
    .about-count-holder .pera-line {
        font-size: 13px;
    }
    .about-count-holder {
        padding: 18px 20px;
    }
}

@media (max-width:650px) {
    .about-content-holder h2 {
        font-size: 2.0rem !important;
    }
    .about-content-holder {
        width: 100%;
        text-align: left;
    }
    .about-img-holder {
        display: none;
    }
    .about-count-holder {
        background-color: transparent;
        flex-direction: column;
        padding: 0px;
        margin: 20px;
    }
    .about-count-holder .about-count-box {
        background-color: #001928;
        width: 100%;
        margin-top: 15px;
        padding: 15px;
    }
    .about-content-holder .about-pera-heading,
    .about-content-holder h2,
    .about-content-holder button,
    .about-content-holder .about-content-pera,
    .about-count-holder .pera-head,
    .about-count-holder .pera-count,
    .about-count-holder .pera-head {
        margin-bottom: 5px;
    }
}

@media (max-width:422px) {
    .about-content-holder h2 {
        font-size: 1.5rem !important;
    }
    .about-count-holder .about-count-box {
        background-color: #001928;
        width: 100%;
        margin-top: 11px;
        padding: 10px;
    }
    .about-count-holder .pera-count {
        font-size: 25px;
    }
    .about-content-holder .about-pera-heading,
    .about-content-holder h2,
    .about-content-holder button,
    .about-content-holder .about-content-pera,
    .about-count-holder .pera-head,
    .about-count-holder .pera-count,
    .about-count-holder .pera-head {
        margin-bottom: 5px;
    }
    .about-content-holder button {
        font-size: 15px;
        padding: 8px 27px;
    }
    .about-count-holder .pera-head {
        font-size: 14px;
    }
    .about-content-holder button {
        font-size: 12px;
        padding: 5px 20px;
    }
    .about-count-holder {
        margin: 15px;
    }
    .about-content-holder .about-content-pera {
        font-size: 12px;
    }
    .about-count-holder .pera-line {
        font-size: 10px;
    }
}


/* portFolio section
______________________________________________ */

.Home-heading-section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh !important;
    margin-top: 15vh;
}

.Home-heading-section .Home-heading-div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Home-heading-section .Home-heading-div h2 {
    margin: 0px 15px;
    font-weight: 600;
}

.portFolio-content-holder {
    margin-top: 0px;
    width: 100%;
}

.portFolio-content-holder .banner-title {
    font-size: 3rem;
    text-wrap: pretty;
}

.portFolio-content-holder .banner-tagline--half-width {
    max-width: 100%;
}

.portFolio-content-holder .banner-Mobile-img-holder>div:nth-child(1) {
    width: 80%;
    padding-right: 50px;
}

.portFolio-content-holder .banner-Mobile-img-holder>div:nth-child(2) {
    width: 20%;
}

@media (max-width:1055px) {
    .portFolio-content-holder .banner-Mobile-img-holder>div:nth-child(1) {
        width: 75%;
        padding-right: 20px;
    }
    .portFolio-content-holder .banner-Mobile-img-holder>div:nth-child(2) {
        width: 25%;
    }
    .portFolio-content-holder .banner-title {
        font-size: 2.5rem;
        text-wrap: pretty;
    }
    .portFolio-content-holder .portFolio-banner-pera {
        font-size: 1rem;
    }
}

@media (max-width:750px) {
    .portFolio-content-holder .banner-title {
        font-size: 2rem;
    }
    .portFolio-content-holder .portFolio-banner-pera {
        font-size: 0.8rem;
    }
}

@media (max-width:550px) {
    .Home-heading-section .Home-heading-div h2 {
        margin: 0px 10px;
        text-align: center;
    }
    .banner-Mobile-img-holder {
        flex-direction: column;
    }
    .portFolio-content-holder .banner-Mobile-img-holder>div:nth-child(1) {
        width: 100%;
        padding-right: 0px;
        text-align: center;
        margin-bottom: 35px;
    }
    .portFolio-content-holder .banner-Mobile-img-holder>div:nth-child(2) {
        width: 50%;
    }
    .banner-header {
        align-items: center;
    }
    .u-text-small-caps {
        font-size: 12px;
    }
    .portFolio-content-holder .banner-title {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
    }
}


/* .banner--fullscreen::after {
    content: "";
    box-sizing: border-box;
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: white;
} */


/* custome animation 
_______________________________________ */

.scale-up-center-true {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.slide-top-true {
    -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}

@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}


/* .slide-top-exit {
    -webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
    }
}

@keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
    }
} */


/* homepage-our-services
___________________________________________ */

.homepage-our-services {
    background-color: #161618;
}

.homepage-our-services .about-section-body-type-more {
    grid-auto-rows: auto;
}

.homepage-our-services .about-section-column--more {
    background-size: 0 0;
    position: relative;
    background-color: #2a2a2a;
    color: #fff;
    padding: 35px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
    overflow: hidden;
    z-index: 3;
    border-radius: 15px;
}

.our-services-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition: all 0.5s;
    opacity: 0;
    border-radius: 15px;
}

.homepage-our-services .about-section-column--more:hover .our-services-background {
    opacity: 1;
}

.homepage-our-services .about-section-column--more .about-section-column-title {
    margin: 10px 0px;
    font-weight: 700;
    text-transform: capitalize;
}

.homepage-our-services .about-section-column--more:hover .about-section-column-title {
    margin-top: 0px;
}

.homepage-our-services .about-section-column--more .about-section-colum-copy {
    height: 100px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    color: #C1C1C1;
}

.our-service-button {
    border: 1px solid #3895D1;
    font-weight: 600;
    padding: 10px 15px;
    width: 150px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
    margin: 10px auto;
    opacity: 0;
}

.our-service-button:hover {
    background-position: right bottom;
    color: #3895D1;
}

.homepage-our-services .about-section-column--more:hover .our-service-button {
    opacity: 1;
}

.homepage-our-services .about-section-column--more:hover .about-section-colum-copy {
    height: auto;
}

.homepage-our-services .about-section-column--more .our-service-img {
    transition: all 0.5s;
    opacity: 1;
    height: 150px;
    width: 150px;
    margin-bottom: 10px;
}

.homepage-our-services .about-section-column--more:hover img {
    height: 0px;
    opacity: 0;
}

@media (max-width:1500px) {
    .homepage-our-services .about-section-column--more .our-service-img {
        height: 150px;
        width: 125px;
    }
}

@media (max-width:1100px) {
    .homepage-our-services .about-section-column--more .our-service-img {
        height: 130px;
        width: 110px;
    }
    .homepage-our-services .about-section-column--more .about-section-colum-copy {
        font-size: 12px;
    }
}

@media (max-width:850px) {
    .about-section-body {
        grid-template-columns: repeat(2, 1fr);
    }
    .homepage-our-services .about-section-body-type-more {
        column-gap: 20px;
        row-gap: 20px;
    }
}

@media (max-width:500px) {
    .about-section-body {
        grid-template-columns: repeat(1, 1fr);
    }
    .homepage-our-services .about-section-column--more {
        height: 400px;
    }
    .homepage-our-services .about-section-column--more .about-section-colum-copy {
        height: auto;
    }
}


/* Specialty Section 
---------------------------------------*/

.specialty-section {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-around;
    align-items: center;
    row-gap: 50px;
}

.specialty-section-item {
    width: 350px;
    height: 250px;
    max-height: 450px;
    padding: 15px;
}

.specialty-section-item:hover {
    background: #0F2B3E;
    box-shadow: 0 1px 1px 0 #145783;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.specialty-section-item h3 {
    font-size: 22px;
}

.specialty-section-item p {
    color: #B9B9B9;
}

.specialty-section-item svg {
    width: 3.5em;
    height: 3.5em;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 15px;
}

.specialty-section-item:nth-child(1) svg {
    background-color: #C99332;
}

.specialty-section-item:nth-child(2) svg {
    background-color: #0071BC;
}

.specialty-section-item:nth-child(3) svg {
    background-color: #954885;
}

.specialty-section-item:nth-child(4) svg {
    background-color: #320000;
}

.specialty-section-item:nth-child(5) svg {
    background-color: #495AAB;
}

.specialty-section-item:nth-child(6) svg {
    background-color: #313600;
}

.specialty-section-item:nth-child(7) svg {
    background-color: #DA7B43;
}

.specialty-section-item:nth-child(8) svg {
    background-color: #4F4F4F;
}

.specialty-section-item:nth-child(9) svg {
    background-color: #7573BC;
}

@media (max-width:1100px) {
    .specialty-section-item p {
        font-size: 14px;
    }
    .specialty-section-item svg {
        width: 3em;
        height: 3em;
    }
    .specialty-section-item {
        width: 300px;
        height: 240px;
        max-height: 400px;
        padding: 15px;
    }
    .specialty-section {
        gap: 40px;
    }
}

@media (max-width:1000px) {
    .specialty-section {
        gap: 15px;
    }
    .specialty-section-item {
        width: 270px;
        height: 250px;
    }
}

@media (max-width:900px) {
    .specialty-section {
        grid-template-columns: auto auto;
    }
    .specialty-section-item svg {
        width: 2em;
        height: 2em;
    }
    .specialty-section-item h3 {
        font-size: 18px;
    }
    .specialty-section-item {
        height: 210px;
    }
}

@media (max-width:600px) {
    .specialty-section {
        grid-template-columns: auto;
        gap: 0;
    }
    .specialty-section-item svg {
        width: 3em;
        height: 3em;
        flex-shrink: 0;
    }
    .specialty-section-item {
        width: auto;
        text-align: center;
        margin-bottom: 15px;
        padding: 10px;
        height: auto;
        display: flex;
        gap: 15px;
        overflow: hidden;
    }
    .specialty-section-item div {
        text-align: left;
    }
    .specialty-section-item h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .specialty-section-item p {
        font-size: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 40%;
    }
}


/* testimonial section
---------------------------------------*/

.testimonial-section {
    margin-top: 150px;
}

.testimonial-section .testimonial-section-title {
    text-align: center;
}

.testimonial-section .testimonial-section-title .testimonial-section-title-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-section .testimonial-section-title .testimonial-section-title-flex h2 {
    margin: 0px 10px;
    margin-bottom: 0px;
}

.testimonial-section .testimonial-slider-section-custom-button {
    float: right;
    margin: 35px 0px;
    display: flex;
    gap: 40px;
    margin-right: 100px;
}

.testimonial-slider-section .testimonial-slider {
    clear: both;
}

.testimonial-slider-section .testimonial-slider .testimonial-item-holder {
    background-color: #fff;
    border-radius: 15px;
    padding: 40px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 0px auto;
    gap: 50px;
}

.testimonial-slider-section .testimonial-slider .testimonial-item-holder .img-holder {
    position: relative;
    border-radius: 15px;
    z-index: 5;
    flex-shrink: 0;
}

.testimonial-slider-section .testimonial-slider .testimonial-item-holder .img-holder::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -9px;
    right: -10px;
    width: 70px;
    height: 70px;
    z-index: -1;
    background-color: #41A7E9;
}

.testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder {
    position: relative;
    margin: 0px auto;
    width: 60%;
    padding: 20px;
}

.testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder::before {
    content: "";
    display: block;
    position: absolute;
    top: -14px;
    left: -60px;
    width: 50px;
    height: 50px;
    background-image: url('../../images/testimonial-slider-section-assets/blockquote-before.webp');
    background-repeat: no-repeat;
}

.testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -10px;
    right: -50px;
    width: 50px;
    height: 50px;
    background-image: url('../../images/testimonial-slider-section-assets/blockquote-after.webp');
    background-repeat: no-repeat;
}

.testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .name {
    color: #0B0B0B;
    font-weight: 600;
    font-size: 26px;
}

.testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .title {
    color: #222222;
    font-weight: 600;
    font-size: 18px;
}

.testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .desc {
    color: #828282;
}

.testimonial-slider-section .testimonial-slider .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    gap: 10px;
}

.testimonial-slider-section .testimonial-slider .slick-dots li {
    list-style: none;
}

.testimonial-slider-section .testimonial-slider .slick-dots li button {
    color: transparent;
    border-radius: 50%;
    border: none;
}

.testimonial-slider-section .testimonial-slider .slick-dots .slick-active button {
    background-color: #2AA0EC;
}

@media (max-width:1200px) {
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder::before {
        top: 22px;
        left: -35px;
        width: 30px;
        height: 30px;
        background-size: 30px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder::after {
        bottom: 0px;
        right: -10px;
        width: 30px;
        height: 30px;
        background-size: 30px;
    }
    .testimonial-section .testimonial-slider-section-custom-button {
        margin: 25px 0px;
        margin-right: 70px;
    }
    .testimonial-section .testimonial-slider-section-custom-button img {
        width: 50px;
    }
}

@media (max-width:850px) {
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .img-holder {
        width: 200px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .name {
        font-size: 22px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .title {
        font-size: 17px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .desc {
        font-size: 14px;
    }
}

@media (max-width:750px) {
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder {
        padding: 30px;
    }
}

@media (max-width:650px) {
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder {
        padding: 20px;
    }
    .testimonial-section .testimonial-slider-section-custom-button img {
        width: 40px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder::before {
        top: 22px;
        left: -20px;
        width: 20px;
        height: 20px;
        background-size: 20px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder::after {
        bottom: 0px;
        right: -10px;
        width: 20px;
        height: 20px;
        background-size: 20px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder {
        gap: 40px
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder {
        padding: 15px;
    }
}

@media (max-width:600px) {
    .testimonial-section {
        margin-top: 100px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder {
        gap: 20px;
        flex-direction: column;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .name,
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .title,
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .desc {
        margin-bottom: 10px;
    }
    .testimonial-section .testimonial-slider-section-custom-button {
        margin: 15px 0px;
        margin-right: 70px;
    }
    .testimonial-slider-section .testimonial-slider .slick-dots {
        margin-top: 5px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder {
        width: 95%;
    }
}

@media (max-width:500px) {
    .testimonial-section .testimonial-slider-section-custom-button {
        top: -80px;
    }
    .testimonial-slider-section {
        position: relative;
    }
    .testimonial-section .testimonial-slider-section-custom-button {
        float: none;
        gap: 0px;
        justify-content: space-between;
        align-items: center;
        margin: 10px auto;
        width: 90%;
        left: 0px;
        right: 0px;
        bottom: 0px;
        position: absolute;
        z-index: 1;
        top: -50px;
        width: 100%;
        height: 100%;
    }
    .testimonial-slider-section .testimonial-slider .slick-dots {
        margin-left: 0px;
    }
    .testimonial-section .testimonial-section-title {
        margin-bottom: 10px;
    }
    .testimonial-section .testimonial-section-title .testimonial-section-title-flex img {
        width: 30px;
    }
    .testimonial-section .testimonial-section-title .testimonial-section-title-flex h2 {
        margin-bottom: 0px;
    }
}

@media (max-width:400px) {
    .testimonial-section .testimonial-section-title .testimonial-section-title-flex h2 {
        font-size: 22px;
        margin-bottom: 10px;
    }
    .slick-slide div:nth-child(1) {
        float: none;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .img-holder {
        width: 150px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder {
        gap: 10px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .name,
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .title,
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .desc {
        margin-bottom: 5px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .name {
        font-size: 18px;
    }
    .testimonial-slider-section .testimonial-slider .testimonial-item-holder .content-holder .title {
        font-size: 14px;
    }
    .testimonial-section {
        margin-top: 50px;
    }
    .testimonial-section .testimonial-slider-section-custom-button {
        top: -80px;
    }
}

.get-in-touch-button {
    border: 1px solid #3895D1;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all 0.5s ease-out;
}

.get-in-touch-button:hover {
    background-position: right bottom;
    color: #3895D1;
}


/* hookline section 
________________________________ */

.hookline-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.hookline-section-item {
    text-align: center;
    font-size: 2em;
    font-weight: 800;
    background: linear-gradient(to right, #00dbd9, #4284ff 50%, #fff 50%);
    position: relative;
    margin: 3vh auto;
    background-size: 200% 100%;
    background-position: 100%;
    color: transparent;
    opacity: .5;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.5s ease-in;
}

.hookline-section-item.active {
    background-position: 0;
    font-size: 4em;
    opacity: 1;
}

@media (max-width:1300px) {
    .hookline-section-item.active {
        font-size: 3em;
    }
}

@media (max-width:1000px) {
    .hookline-section-item {
        font-size: 1.5em;
    }
    .hookline-section-item.active {
        font-size: 2.3em;
    }
}

@media (max-width:752px) {
    .hookline-section-item {
        font-size: 1em;
    }
    .hookline-section-item.active {
        font-size: 1.8em;
    }
}

@media (max-width:752px) {
    .hookline-section-item {
        font-size: 0.5em;
    }
    .hookline-section-item.active {
        font-size: 1.3em;
    }
}

@media (max-width:550px) {
    .hookline-section {
        height: 60vh;
    }
}

@media (max-width:450px) {
    .hookline-section {
        height: 40vh !important;
    }
    .hookline-section-item {
        font-size: 0.5em;
    }
    .hookline-section-item.active {
        font-size: 1em;
    }
}


/* Branding-section
------------------------------ */

.Branding-section {
    margin-top: 20px;
    height: auto;
    margin-bottom: 20vh;
}

.Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box {
    list-style: none;
    width: 240px;
    height: 80px;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid #A3A3A3;
    border-radius: 10px;
}

.Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box img {
    width: 150px;
    margin: 0px auto;
}

@media (max-width:900px) {
    .Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box {
        width: 150px;
        height: 60px;
    }
    .Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box img {
        width: 100px;
    }
}

@media (max-width:550px) {
    .Branding-section {
        padding: 0px !important;
    }
    .Branding-section .Branding-logo-holder {
        margin: 0px;
    }
    .Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box {
        width: 150px;
        height: 60px;
    }
    .Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box img {
        width: 100px;
    }
}

@media (max-width:450px) {
    .Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box {
        width: 120px;
        height: 50px;
    }
    .Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box img {
        width: 70px;
    }
}

@media (max-width:380px) {
    .Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box {
        width: 100px;
        height: 40px;
    }
    .Branding-section .Branding-logo-holder .Branding-logo-items .Branding-logo-box img {
        width: 60px;
    }
}


/* site footer 
------------------------------------- */

.site-footer {
    background-color: #002741;
    color: #fff;
    padding: 130px 100px;
}

.site-footer hr {
    margin: 30px 0px;
    color: #FFFFFF !important;
}

.site-footer .site-footer-container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.site-footer .site-footer-container .footer-logo-container {
    width: 30%;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.site-footer .site-footer-container .footer-logo-container .site-logo {
    margin-bottom: 10px;
}

.site-footer .site-footer-container .footer-logo-container .site-logo img {
    width: 200px;
}

.site-footer .site-footer-container .footer-logo-container p {
    font-size: 14px;
}

.footer-links {
    flex-shrink: 0;
}

.footer-links h2 {
    margin: 5px 3px;
    font-size: 26px;
    font-weight: 700;
}

.footer-links ul {
    margin-left: 20px;
    margin-bottom: 0px;
}

.footer-links ul li {
    padding: 10px;
    font-size: 16px;
    color: #D8D8D8;
    list-style: url('../../images/footer-icons/double-arrow.webp');
}

.footer-links ul li:hover {
    color: #419CE9;
    list-style: url('../../images/footer-icons/double-arrow-blue.webp');
}

.footer-links-Industries {
    width: 220px;
}

.footer-links:last-child {
    width: 250px;
}

.site-footer-Contact li {
    list-style: none !important;
    position: relative;
}

.site-footer-Contact li img {
    position: absolute;
    width: 18px;
    top: 14px;
    left: -18px;
}

.social-links h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-left: 3px;
}

.social-links ul {
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.social-links ul li {
    list-style: none;
}

.site-footer-secondary {
    margin-top: 10vh;
}

.site-footer-secondary .site-footer-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 20px;
}

.site-footer-secondary .site-footer-copyright div:last-child {
    display: flex;
    gap: 20px;
}

.social-mobile {
    display: none;
}

.social-desktop {
    display: block;
}

@media (max-width:1500px) {
    .site-footer {
        padding: 80px 80px;
    }
}

@media(max-width:1263px) {
    .site-footer .site-footer-container {
        gap: 11px;
    }
    .site-footer .site-footer-container .footer-logo-container {
        width: 26%;
    }
}

@media (max-width:1200px) {
    .site-footer .site-footer-container {
        gap: 20px;
    }
    .site-footer .site-footer-container .footer-logo-container .site-logo img {
        width: 150px;
    }
    .site-footer hr {
        margin: 20px 0px;
    }
    .site-footer .site-footer-container .footer-logo-container {
        width: 20%;
    }
    .site-footer .site-footer-container .footer-logo-container p {
        font-size: 13px;
    }
    .social-links ul {
        gap: 18px;
    }
    .social-links ul img {
        width: 35px;
    }
    .footer-links ul li {
        font-size: 13px;
    }
    .footer-links:last-child {
        width: 200px;
    }
}

@media (max-width:1000px) {
    .site-footer .site-footer-container {
        flex-wrap: wrap;
    }
    .site-footer .site-footer-container .footer-logo-container {
        flex-basis: 100%;
        margin-bottom: 10px;
    }
    .flex-item {
        flex: 1;
    }
    .social-desktop {
        display: none;
    }
    .social-mobile {
        display: block;
    }
    .site-logo {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin: 0px 10px;
    }
    .site-footer .site-footer-container .footer-logo-container .site-logo .social-links img {
        width: 30px;
    }
    .site-footer-secondary .site-footer-copyright {
        font-size: 14px;
    }
}

@media (max-width:800px) {
    .site-footer .site-footer-container {
        flex-wrap: wrap;
        gap: 1px;
        justify-content: normal;
    }
    .site-footer-secondary .site-footer-copyright {
        font-size: 12px;
    }
    .footer-links {
        margin-top: 30px;
    }
    .site-footer {
        padding: 130px 50px;
    }
}

@media (max-width:650px) {
    .site-footer-secondary .site-footer-copyright {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width:500px) {
    .social-links h2 {
        font-size: 16px;
    }
    .site-footer .site-footer-container {
        flex-direction: column;
    }
    .site-footer .site-footer-container .footer-logo-container {
        width: 100%;
        margin-bottom: 10px;
    }
    .site-footer .site-footer-container .footer-logo-container p {
        font-size: 16px;
    }
    .footer-links:last-child {
        width: 100%;
    }
    .footer-links ul li {
        font-size: 16px;
    }
    .site-footer {
        padding: 130px 10px;
    }
}

@media (max-width:450px) {
    .site-logo {
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }
    .social-links ul {
        gap: 30px;
    }
    .social-links h2 {
        font-size: 26px;
    }
    .site-footer .site-footer-container .footer-logo-container .site-logo img {
        width: 250px;
    }
    .site-footer .site-footer-container .footer-logo-container .site-logo .social-links img {
        width: 50px;
    }
    .site-footer-secondary .site-footer-copyright {
        font-size: 10px;
    }
}


/* about page new css 
________________________________________ */

.about-hero-container {
    text-align: center;
}

.about-hero-container h2 {
    font-weight: 600;
    font-size: 4vw;
}

.about-hero-container p {
    font-size: 1.2vw;
    color: #CACACA;
}

.about-Technology-banner-copy .about-Technology-banner-title {
    font-size:2.5vw;
    font-weight: 600;
    margin-bottom: 20px;
}

.about-Technology-banner-copy p {
    margin: auto;
    color: #C1C1C1;
    font-size: 1.2vw;
    margin-bottom: 40px;
}

.about-Technology-banner-cta-button {
    border: 1px solid #3895D1;
    color: #fff;
    font-weight: 600;
    padding: 15px 30px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}

.about-Technology-banner-cta-button:hover {
    background-position: right bottom;
    color: #3895D1;
}

.about-misson-banner .about-Technology-banner-content {
    padding-top: var(--section-padding-top);
}

.about-misson-banner-copy .about-misson-banner-title {
    font-size: 1.8vw;
    font-weight: 600;
    margin-bottom: 40px;
    color: #fff;
}

.about-misson-banner-copy .about-misson-banner-pera {
    display: flex;
    gap: 20px;
    align-items: start;
    justify-content: start;
    margin-top: 20px;
}

.about-misson-banner-copy .about-misson-banner-pera div:nth-child(1) {
    width: 50px;
}

.about-misson-banner-copy .about-misson-banner-pera div:nth-child(2) p:nth-child(1) {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 5px;
}

.about-misson-banner-copy .about-misson-banner-pera div:nth-child(2) p:nth-child(2) {
    font-size: 16px;
    color: #CACACA
}

.our-goals-section {
    background: url('../../images/about-us/Our-goals.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 100px;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.our-goals-section .our-goals-body {
    width: 70%;
    text-align: center;
}

.our-goals-section .our-goals-body .our-goals-title h2 {
    font-size: 4.5vw;
    font-weight: 600;
    text-transform: capitalize;
}

.our-goals-section .our-goals-body .our-goals-title h2 span {
    background-color: #41A7E9;
    padding: 0px 10px;
    text-transform: uppercase;
}

.our-goals-section .our-goals-body p {
    font-size: 1.2vw;
    color: #CACACA;
}

.employer-review-section {
    text-align: center;
    margin: 20vh 0px;
}

.employer-review-section>div:nth-child(1) {
    margin-bottom: 50px;
}

.employer-review-section>div:nth-child(1)>h2>span {
    color: #41A7E9;
}

.employer-review-section>div:nth-child(2) {
    padding: 30px 60px;
}

.review-item-holder .review-item {
    background-color: #232222;
    border-radius: 10px;
    width: 400px;
    padding: 20px 30px;
    text-align: start;
    margin: 0px 10px;
    height: 400px;
    max-height: 400px;
}

.review-item-holder .review-item .review-starHolder {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.review-item-holder .review-item .review-item-pera {
    margin: 25px 0px;
    height: 200px;
    overflow: hidden;
}

.review-item-holder .review-item .review-starHolder img {
    width: 25px;
}

.review-user-info {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.review-user-info .review-img-holder img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
}

.review-user-info .review-info-holder h4 {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 600;
}

.review-user-info .review-info-holder p {
    color: #CACACA;
}

.employer-review-section .review-item-holder .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    gap: 10px;
    position: absolute;
    margin: auto;
    bottom: -68px;
    left: 0%;
    right: 0%;
}

.employer-review-section .review-item-holder .slick-dots li {
    list-style: none;
}

.employer-review-section .review-item-holder .slick-dots li button {
    color: transparent;
    border-radius: 50%;
    border: none;
    width: 9px;
    height: 11px;
    transition: all 0.5s ease;
}

.employer-review-section .review-item-holder .slick-dots .slick-active button {
    background-color: #2AA0EC;
    width: 20px;
    height: 20px;
    margin-bottom: 13px;
}

.portfolio-screenshot-scroller {
    padding-top: var(--section-padding-top);
    display: inline-flex;
    align-items: flex-start
}

.portfolio-screenshot-scroller img {
    display: block;
    width: calc(100vw - 2 * var(--container-gutter));
    /* margin-left: var(--container-gutter) */
}

.portfolio-screenshot-scroller .scroll-div-elm {
    display: block;
    width: calc(100vw - 2 * var(--container-gutter));
    position: relative;
    text-align: center;
    /* margin-left: var(--container-gutter) */
}

.portfolio-screenshot-scroller .scroll-div-elm h2 {
    position: absolute;
    margin: auto;
    top: 15%;
    left: 15%;
    font-size: 7vw;
    font-weight: 600;
}

.portfolio-screenshot-scroller .scroll-div-elm .scroll-number-holder {
    position: absolute;
    margin: auto;
    top: 70%;
    left: 38%;
    font-size: 4.5vw;
    font-weight: 600;
    background-color: #2AA0EC;
    padding: 0px 35px;
}

.portfolio-screenshot-scroller .scroll-div-elm .gif-playstore {
    position: absolute;
    top: 14%;
    right: 40px;
    transform: rotate(14deg);
    border-radius: 10px;
    background-color: #fff;
}

.portfolio-screenshot-scroller .scroll-div-elm .gif-playstore img {
    width: 140px;
}

.portfolio-screenshot-scroller .scroll-div-elm .gif-appStore {
    position: absolute;
    top: 14%;
    right: 50px;
    transform: rotate(14deg);
    border-radius: 10px;
}

.portfolio-screenshot-scroller .scroll-div-elm .gif-appStore img {
    width: 95px;
}

.portfolio-screenshot-scroller-section {
    margin: 50px auto;
}

@media (min-width:768px) {
    .portfolio-screenshot-scroller-section {
        display: none;
    }
}

@media (max-width:1350px) {
    .review-item-holder .review-item .review-item-pera {
        font-size: 16px;
    }
    .employer-review-section>div:nth-child(2) {
        padding: 30px 35px;
    }
    .review-user-info .review-img-holder img {
        width: 50px;
        height: 50px;
    }
    .review-user-info .review-info-holder h4 {
        margin-bottom: 5px;
        font-size: 18px;
    }
    .review-user-info .review-info-holder p {
        margin-bottom: 0px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-playstore {
        top: 14%;
        right: 10px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-playstore img {
        width: 110px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-appStore {
        top: 14%;
        right: 10px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-appStore img {
        width: 70px;
    }
}

@media (max-width:1000px) {
    .about-hero-container h2 {
        font-size: 5vw;
    }
    .about-hero-container p {
        font-size: 2.5vw;
    }
}

@media (max-width:780px) {
    .employer-review-section>div:nth-child(1) {
        margin: 0px 33px;
    }
    .review-item-holder .review-item {
        height: 350px;
        max-height: 350px;
    }
    .review-item-holder .review-item .review-starHolder img {
        width: 18px;
    }
    .review-item-holder .review-item .review-item-pera {
        font-size: 12px;
    }
    .review-item-holder .review-item .review-item-pera {
        height: 150px;
    }
    .review-user-info .review-info-holder h4 {
        font-size: 16px;
    }
    .review-user-info {
        gap: 11px;
    }
    .review-item-holder .review-item {
        padding: 20px;
    }
    .review-user-info .review-img-holder img {
        width: 45px;
        height: 45px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-playstore {
        top: 14%;
        right: 10%;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-playstore img {
        width: 95px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-appStore {
        top: 14%;
        right: 10%;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-appStore img {
        width: 70px;
    }
}

@media (max-width:750px) {
    .about-Technology-banner {
        min-height: 80vh;
        margin: 60px auto;
        padding: 30px 10px;
    }
    .about-Technology-banner-copy .about-Technology-banner-title {
        font-size: 6.5vw;
    }
    .about-Technology-banner-copy p {
        font-size: 2vw;
    }
    .our-goals-section .our-goals-body .our-goals-title h2 {
        font-size: 7.5vw;
    }
    .our-goals-section .our-goals-body p {
        font-size: 2.2vw;
    }
    .about-misson-banner-copy .about-misson-banner-title {
        font-size: 3.8vw;
    }
    .about-misson-banner-copy .about-misson-banner-pera div:nth-child(1) {
        width: 65px;
    }
    .about-misson-banner .about-Technology-banner-content {
        gap: 40px
    }
}

@media (max-width:600px) {
    .about-hero-container h2 {
        font-size: 6vw;
    }
    .about-hero-container p {
        font-size: 2.5vw;
    }
    .employer-review-section>div:nth-child(1)>h2 {
        font-size: 28px;
        font-weight: bold;
    }
    .employer-review-section>div:nth-child(1)>p {
        font-size: 16px;
    }
    .employer-review-section>div:nth-child(2) {
        padding: 30px 20px;
    }
    .review-item-holder .review-item .review-item-pera {
        font-size: 16px;
    }
    .employer-review-section>div:nth-child(2) {
        padding: 30px 35px;
    }
    .review-user-info .review-img-holder img {
        width: 50px;
        height: 50px;
    }
    .review-user-info .review-info-holder h4 {
        margin-bottom: 5px;
        font-size: 18px;
    }
    .review-user-info .review-info-holder p {
        margin-bottom: 0px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-playstore {
        top: 14%;
        right: 8%;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-playstore img {
        width: 80px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-appStore img {
        width: 60px;
    }
}

@media (max-width:500px) {
    .portfolio-screenshot-scroller .scroll-div-elm .gif-playstore {
        top: 14%;
        right: 6%;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-playstore img {
        width: 60px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-appStore img {
        width: 50px;
    }
    .portfolio-screenshot-scroller .scroll-div-elm .gif-appStore {
        right: 6%;
    }
}

@media (max-width:400px) {
    .about-hero-container h2 {
        font-size: 7vw;
    }
    .about-hero-container p {
        font-size: 2.5vw;
    }
    .review-item-holder .review-item .review-item-pera {
        font-size: 12px;
    }
    .our-goals-section .our-goals-body p {
        font-size: 3.2vw;
    }
}


/* New service css 
___________________________________ */

.service-page-hover-cards .about-section-column--more {
    height: 400px;
}

.service-page-hover-cards .about-section-column--more .our-service-img {
    height: 100px;
    width: 100px;
}

.service-page-heading-with-pera {
    height: 50vh !important;
    background-color: transparent;
}

.service-page-heading-with-pera .Home-heading-div h2 {
    margin: 0px 30px;
    text-align: center;
}

.service-page-heading-with-pera .heading-pera {
    width: 70%;
    margin: 30px auto;
    text-align: center;
    color: #CECECE;
}

.Service-slider-section {
    position: relative;
}

.Service-slider-section .Service-slider-section-custom-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    width: 93%;
    top: 50%;
    left: 0px;
    bottom: 50%;
    margin: auto;
    right: 0px;
}

.Service-slider-section .Service-slider-main {
    background-color: #1C1C1C;
    border-radius: 10px;
    padding: 30px 20px;
}

.Service-slider-section .Service-slider-main .service-slider-items {
    width: 300px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 20px;
    border: 1px solid #626161;
    border-radius: 10px;
    margin: 25px 25px;
    transition: all 1s;
    background-color: #2B2B2B;
    opacity: 0.5;
    height: 500px;
}

.Service-slider-section .Service-slider-main .slick-current {
    transform: scale(1.08);
    background-color: #0B0B0B;
    opacity: 1;
}

.Service-slider-section .Service-slider-main .service-slider-items .img-holder {
    border-radius: 10px;
    margin-bottom: 1rem;
}

.Service-slider-section .Service-slider-main .service-slider-items .img-holder img {
    border-radius: 10px;
    margin: 20px auto;
    width: 200px;
}

.Service-slider-section .Service-slider-main .service-slider-items .infoholder {
    overflow: hidden;
}

.Service-slider-section .Service-slider-main .service-slider-items .infoholder h3 {
    font-size: 1.5vw;
    font-weight: bold;
}

.Service-slider-section .Service-slider-main .service-slider-items .infoholder p {
    font-size: 0.9vw;
    color: #C4C4C4;
}

.Service-slider-section .Service-slider-main .service-slider-items .our-service-button {
    opacity: 1;
}

.Service-slider-main .slick-prev,
.Service-slider-main .slick-next {
    background-color: #fff;
    border-radius: 50%;
    padding: 10px;
    font-size: 20px;
}

@media (min-width:1300px) {
    .service-banner-side-Img {
        justify-content: space-around;
    }
}

@media (max-width: 768px) {
    .service-banner-side-Img {
        flex-direction: column-reverse;
        gap: 60px;
    }
    .service-banner-side-Img .about-Technology-banner-copy {
        text-align: center;
    }
}

.top-stick-section {
    margin: 20vh 0px;
}

.top-stick-section .top-stick-section-title {
    margin-bottom: 30px;
}

.top-stick-section .top-stick-section-title p {
    width: 70%;
    margin: 30px auto;
    text-align: center;
    color: #CECECE;
}

.top-stick-section .top-stick-section-title .top-stick-section-title-flex {
    display: flex;
    margin: 0px auto;
    justify-content: center;
    align-items: center;
}

.top-stick-section .top-stick-section-title .top-stick-section-title-flex h2 {
    margin: 0px 20px;
}

.top-stick-section .content-card-flex {
    width: 95%;
    background-color: #000;
}

.top-stick-section .stick-flex-conteiner {
    top: 25%;
    background-color: #1D1D1D;
    gap: 40px;
    padding: 40px 30px;
    height: 400px;
    min-width: 400px;
}

.top-stick-section .stick-flex-conteiner .content-holder-box {
    padding: 10px;
}

.top-stick-section .stick-flex-conteiner .content-holder-box p {
    color: #CECECE;
}

.top-stick-section .more-button {
    border: 1px solid #3895D1;
    width: 140px;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}

.more-button:hover {
    background-position: right bottom;
    color: #3895D1;
}

.service-icon-box {
    margin-bottom: 15vh;
}

.service-icon-box .specialty-section-item {
    height: 400px;
}

.service-step-by-step .content-holder-box-active:hover {
    box-shadow: 0 1px 1px 0 #145783;
    border-radius: 10px;
    background-color: #145783;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.service-page-step-slider {
    margin-bottom: 20vh;
}

.service-step-scroll {
    padding-top: 10vh;
    display: inline-flex;
    align-items: flex-start;
    margin-bottom: 0vh !important;
    margin-top: 0vh !important;
}

.service-step-scroll img {
    display: block;
    width: 250px;
    /* width: calc(100vw - 2 * var(--container-gutter)); */
    /* margin-left: var(--container-gutter) */
}

.service-step-scroll .text-down-up {
    writing-mode: tb-rl;
    transform: rotate(-180deg);
}

.section-side-scroll-card {
    position: relative;
    width: 90vw;
    border: none;
    border-radius: 10px;
    padding: 5px;
    margin: 0px 30px;
    background-color: #1D1D1D;
}

.cards-step-show {
    position: absolute;
    height: 450px;
    width: 100px;
    border: 1px solid white;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    margin: auto;
    top: 50%;
    bottom: 50%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    display: none;
    /* left: -100px; */
}

.step-div {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    width: 100%;
    gap: 50px;
}

.step-div .step-div-content-holder {
    width: 80%;
}

.step-div .step-div-content-holder h2 {
    font-size: 2.5vw;
    font-weight: 600;
}

.step-div-img img {
    height: 45vh;
    width: auto;
}

.stella-blue-background {
    background-color: #00263F;
}

@media (max-width:900px) {
    .step-div {
        margin-left: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }
    .service-step-scroll {
        margin-top: 0px !important;
    }
    .step-div-img {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .service-step-scroll img {
        width: 250px;
    }
    .step-div .step-div-content-holder {
        text-align: center;
    }
}

@media (max-width:500px) {
    .step-div {
        width: 100vw;
    }
    .step-div .step-div-content-holder h2 {
        font-size: 4vw;
        font-weight: bold;
    }
    .step-div .step-div-content-holder p {
        font-size: 4vw;
    }
    .service-hero-section>.service-hero-type-pera {
        font-size: 2.5vw;
    }
    .hero-breadcrumb {
        font-size: 10px;
    }
}

@media (max-width:767px) {
    .service-page-step-slider {
        display: block !important;
    }
}

@media (max-width:1200px) {
    .top-stick-section .stick-flex-conteiner {
        height: 500px;
    }
    .top-stick-section .content-card-flex {
        margin-bottom: 15px;
    }
    .top-stick-section .stick-flex-conteiner .content-holder-box p {
        font-size: 1.5vw;
    }
    .Service-slider-section .Service-slider-main .service-slider-items {
        height: 340px;
    }
}

@media (max-width:1000px) {
    .service-hero-section>.service-hero-title {
        font-size: 4vw;
    }
    .service-hero-section>.service-hero-type-anim>.typing-anim {
        font-size: 4vw;
    }
    .service-hero-section>.service-hero-type-pera {
        width: 80%;
        font-size: 1.5vw;
    }
    .main-flex-box-holder {
        flex-direction: column;
    }
    .main-flex-box-holder .content-holder-box {
        padding: 20px;
    }
    .main-flex-box-holder .content-holder-box p:first-child {
        font-size: 3vw;
    }
    .main-flex-box-holder .content-holder-box .count-holder .counting-circle {
        font-size: 3vw;
        height: auto;
    }
}

@media (max-width:900px) {
    .Service-slider-section .Service-slider-main .service-slider-items {
        margin: 25px 15px;
    }
    .Service-slider-section .Service-slider-main .service-slider-items {
        height: 390px;
    }
    .Service-slider-section .Service-slider-main .service-slider-items .infoholder h3 {
        font-size: 3vw;
    }
    .Service-slider-section .Service-slider-main .service-slider-items .infoholder p {
        font-size: 1.5vw;
    }
}

@media (max-width:800px) {
    .new-card-section .content-card-flex {
        flex-direction: column;
    }
    .top-stick-section .stick-flex-conteiner {
        top: 30%;
        gap: 10px;
    }
    .content-card-flex .img-holder-box {
        width: auto;
    }
    .top-stick-section .top-stick-section-title p {
        width: 90%;
        margin: 20px auto;
    }
    .content-card-flex .img-holder-box img {
        width: 240px;
    }
    .top-stick-section .content-holder-box-active h3 {
        font-size: 2vw;
    }
    .top-stick-section .stick-flex-conteiner .content-holder-box p {
        font-size: 2vw;
    }
}

@media (max-width:600px) {
    .content-card-flex {
        flex-wrap: nowrap;
    }
    .service-icon-box .specialty-section-item p {
        white-space: pre-wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: auto;
    }
    .service-icon-box .specialty-section-item {
        height: auto;
    }
    .top-stick-section .content-holder-box-active h3 {
        font-size: 3.5vw !important;
    }
    .top-stick-section .top-stick-section-title p {
        width: 100%;
        font-size: 2.5vw;
    }
    .top-stick-section .stick-flex-conteiner {
        height: auto;
    }
    .top-stick-section .top-stick-section-title .top-stick-section-title-flex h2 {
        font-size: 5vw;
    }
    .service-page-heading-with-pera .Home-heading-div h2 {
        font-size: 5vw;
    }
    .service-page-heading-with-pera .heading-pera {
        font-size: 3vw;
    }
    .hero-breadcrumbs {
        top: 100px;
        font-size: 2vw;
    }
    .main-flex-box-holder .content-holder-box p:first-child {
        font-size: 4vw;
    }
    .main-flex-box-holder .content-holder-box .count-holder .counting-circle {
        font-size: 4vw;
    }
}

@media (max-width:400px) {
    .top-stick-section .stick-flex-conteiner {
        min-width: 95%;
    }
}


/* our-portfolio-intro 
_____________________________________*/

.our-portfolio-intro-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.our-portfolio-intro-section .Home-heading-section {
    margin-top: 0px;
}

.our-portfolio-intro {
    width: 80%;
    margin: 0px auto;
    text-align: center;
}

.our-portfolio-intro h3 {
    font-size: 2vw;
    margin-bottom: 20px;
}

.our-portfolio-intro p {
    /* width: 60%; */
    margin: 0px auto;
    font-size: 1.5vw;
    color: #CDCDCD;
}

.our-portfolio-intro p span {
    color: #00ACFF;
    font-weight: bold;
}

@media (max-width:1000px) {
    .our-portfolio-intro h3 {
        font-size: 5vw;
        margin-bottom: 30px;
    }
    .our-portfolio-intro p {
        font-size: 3vw;
    }
}

@media (max-width:500px) {
    .our-portfolio-intro {
        width: 90%;
    }
    .our-portfolio-intro h3 {
        font-size: 6vw;
        margin-bottom: 30px;
    }
    .our-portfolio-intro p {
        font-size: 3.5vw;
    }
}


/* portFolio-intro-section
------------------------------------ */

.portFolio-intro-banner {
    margin: 10vh 0px;
}

.portFolio-intro-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.portFolio-intro-section .portFolio-intro-content {}

.portFolio-intro-section .portFolio-intro-content .number-hash {
    font-size: 5.5vw;
    font-weight: bold;
}

.portFolio-intro-section .portFolio-intro-content .titel {
    font-size: 38px;
}

.portFolio-intro-section .portFolio-intro-content .perafirst,
.portFolio-intro-section .portFolio-intro-content .peraSecond {
    color: #E1E1E1;
    margin-top: 10px;
}

.portFolio-intro-section .portFolio-intro-content .peraSecond {
    margin-bottom: 50px;
}

.portFolio-intro-section .portFolio-intro-content .more-details {
    border: 1px solid #3895D1;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 35px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}

.portFolio-intro-section .portFolio-intro-content .more-details:hover {
    background-position: right bottom;
    color: #3895D1;
}

.portFolio-intro-section .portFolio-intro-image {
    flex-shrink: 0;
    width: 50%;
}

.portFolio-intro-section .portFolio-intro-image .img-holder {
    width: 100%;
}

.portFolio-intro-section .portFolio-intro-image .img-holder img {
    width: 90%;
    margin: 0px auto;
}

.portFolio-intro-section .portFolio-intro-image .client-number {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 50px;
}

.portFolio-intro-section .portFolio-intro-image .client-number div {
    background-color: #0F0F0F;
    text-align: center;
    width: 200px;
    padding: 10px;
}

.portFolio-intro-section .portFolio-intro-image .client-number div>p:first-child {
    font-size: 30px;
    margin-bottom: 5px;
    font-weight: bold;
}

.portFolio-intro-section .portFolio-intro-image .client-number div>p:last-child {
    font-size: 14px;
    margin-bottom: 5px;
}

.text-color-Routespring {
    color: #B882FD;
}

.text-color-Pixstory {
    color: #E9FF07;
}

.text-color-Nite {
    color: #02DDA3;
}

.text-color-Vkart {
    color: #FE0000;
}

.text-color-polyCab {
    color: #E91B2C;
}

.text-color-StarsGyan {
    color: #C00D52;
}

@media (max-width:1500px) {
    .portFolio-intro-section .portFolio-intro-content .number-hash {
        font-size: 5vw;
        font-weight: bold;
    }
    .portFolio-intro-section .portFolio-intro-content .titel {
        font-size: 30px;
    }
    .portFolio-intro-section .portFolio-intro-image .client-number div {
        width: 150px;
    }
    .portFolio-intro-section .portFolio-intro-image .client-number div>p:first-child {
        font-size: 22px;
    }
    .portFolio-intro-section .portFolio-intro-image .client-number div>p:last-child {
        font-size: 12px;
    }
}

@media (max-width:1000px) {
    .portFolio-intro-section {
        flex-direction: column;
        margin: 15vh auto;
    }
    .portFolio-intro-section .portFolio-intro-image {
        width: 100%;
    }
}

@media (max-width:500px) {
    .portFolio-intro-section .portFolio-intro-content .number-hash {
        font-size: 15vw !important;
        font-weight: bold !important;
    }
    .portFolio-intro-section .portFolio-intro-content .titel {
        font-size: 28px !important;
    }
    .portFolio-intro-section .portFolio-intro-content .perafirst,
    .portFolio-intro-section .portFolio-intro-content .peraSecond {
        font-size: 16px;
    }
    .portFolio-intro-logo {
        width: 170px;
    }
    .portFolio-intro-section {
        margin-bottom: 20vh;
        margin-top: 5vh;
    }
    .portFolio-intro-section .portFolio-intro-image .client-number div {
        width: 150px;
    }
    .portFolio-intro-section .portFolio-intro-image .client-number div>p:first-child {
        font-size: 18px;
    }
    .portFolio-intro-section .portFolio-intro-image .client-number div>p:last-child {
        font-size: 10px;
    }
}


/* home page top-overlay-content
___________________________________ */

.top-overlay-content h2 {
    font-size: 4vw;
    font-weight: bold;
}

@media (max-width:1000px) {
    .top-overlay-content h2 {
        font-size: 4.5vw;
        font-weight: bold;
    }
}


/* service hover cards
_____________________________ */

.service-cards-container {
    height: 500px;
}

.service-cards {
    display: grid;
    align-items: baseline;
    grid-template-columns: auto auto auto;
    justify-content: space-around;
    row-gap: 150px;
}

.service-cards .service-cards-hover {
    position: relative;
    background-color: green;
    width: 300px;
}

.service-cards .service-cards-hover .inner-cards {
    border: 2px solid #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    width: 300px;
    height: 90px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    transition: all .5s;
    background-color: black;
}

.service-cards .service-cards-hover .heading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-cards .service-cards-hover .heading h4 {
    margin: 0px;
    margin-left: 25px;
}

.service-cards .service-cards-hover .content-holder {
    margin-top: 30px;
    text-align: center;
    color: #CECECE;
}

.service-cards .service-cards-hover:hover .inner-cards {
    height: 250px;
    z-index: 3;
}

@media (max-width:1100px) {
    .service-cards .service-cards-hover,
    .service-cards .service-cards-hover .inner-cards {
        width: 250px;
    }
    .service-cards .service-cards-hover .content-holder {
        font-size: 16px;
    }
}

@media (max-width:870px) {
    .service-cards .service-cards-hover,
    .service-cards .service-cards-hover .inner-cards {
        width: 220px;
    }
    .service-cards .service-cards-hover .heading img {
        width: 50px;
    }
    .service-cards .service-cards-hover .heading h4 {
        font-size: 20px;
    }
    .service-cards .service-cards-hover .inner-cards {
        padding: 15px;
    }
}

@media (max-width:790px) {
    .service-cards {
        display: grid;
        grid-template-columns: auto auto;
    }
    .service-cards .service-cards-hover,
    .service-cards .service-cards-hover .inner-cards {
        width: 250px;
    }
    .service-cards-container {
        height: 620px;
    }
}

@media (max-width:600px) {
    .service-cards .service-cards-hover,
    .service-cards .service-cards-hover .inner-cards {
        width: 200px;
    }
    .service-cards {
        column-gap: 20px;
    }
    .service-cards .service-cards-hover .heading h4 {
        font-size: 16px;
    }
    .service-cards .service-cards-hover .content-holder {
        font-size: 13px;
    }
}

@media (max-width:425px) {
    .service-cards {
        display: grid;
        grid-template-columns: auto;
    }
    .service-cards .service-cards-hover,
    .service-cards .service-cards-hover .inner-cards {
        width: 300px;
    }
    .service-cards .service-cards-hover .heading h4 {
        font-size: 18px;
    }
    .service-cards .service-cards-hover .content-holder {
        font-size: 16px;
    }
    .service-cards-container {
        height: 1050px;
    }
}


/* language section 
 __________________________________*/

.language-section {
    margin-bottom: 10vh;
    border: 1px solid #424242;
    padding-top: 80px;
    margin: 0px 50px;
    border-radius: 25px;
}

.language-section .language-section-conatiner {
    display: flex;
    align-items: start;
    justify-content: space-around;
}

.language-section .language-section-conatiner .language-section-item {
    width: 150px;
    height: 100px;
    background-color: #fff;
    color: #00A3F1;
    position: relative;
    padding: 10px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: end;
    z-index: 1;
}

.language-section .language-section-conatiner .language-section-item img {
    position: absolute;
    top: -60px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 100px;
}

.language-section .language-section-conatiner .active {
    background-color: #00A3F1;
    color: #fff;
    height: 125px;
}

.language-section .language-section-conatiner .active::after {
    content: "";
    box-sizing: border-box;
    width: 5px;
    height: 100px;
    background-color: transparent;
    position: absolute;
    bottom: -100px;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid #00A3F1;
}

.icon-box {
    margin: 30px auto;
    background-color: #0A0A0A;
    border-radius: 25px;
    box-shadow: rgb(248 248 248 / 10%) -1px 6px 12px 0px, rgba(100, 100, 100, 0.3) 0px 3px 7px -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.iconImage-holder {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 95%;
}

.icon-box .active {
    display: flex;
}

@media (max-width:1500px) {
    .language-section .language-section-conatiner .language-section-item {
        width: 150px;
        height: 80px;
        border-radius: 15px;
    }
    .language-section .language-section-conatiner .language-section-item img {
        position: absolute;
        top: -50px;
        left: 0px;
        right: 0px;
        margin: auto;
        width: 80px;
    }
    .iconImage-holder img {
        max-width: 110px;
    }
}

@media (max-width:1050px) {
    .language-section .language-section-conatiner .language-section-item {
        width: 130px;
    }
    .iconImage-holder img {
        max-width: 100px;
    }
}

@media (max-width:890px) {
    .language-section .language-section-conatiner .language-section-item {
        width: 110px;
    }
}

@media (max-width:768px) {
    .language-section .language-section-conatiner .language-section-item {
        width: 100px;
        height: 70px;
    }
    .language-section .language-section-conatiner .language-section-item img {
        position: absolute;
        top: -40px;
        left: 0px;
        right: 0px;
        margin: auto;
        width: 60px;
    }
    .language-section .language-section-conatiner .language-section-item p {
        font-size: 14px;
    }
    .iconImage-holder img {
        max-width: 80px;
    }
}

@media (max-width:680px) {
    .language-section {
        display: flex;
        flex-wrap: wrap;
        margin: 0px 30px;
    }
    .icon-box {
        flex: 30%;
        margin: 0px;
    }
    .language-section-conatiner {
        flex: 10%;
    }
    .language-section .language-section-conatiner {
        display: flex;
        flex-direction: column;
    }
    .language-section .language-section-conatiner .language-section-item {
        width: 130px;
        height: 70px;
        margin-top: 70px;
    }
    .language-section .language-section-conatiner .language-section-item img {
        margin: auto;
        width: 70px;
    }
    .language-section .language-section-conatiner .active::after {
        width: 12px;
        height: 12px;
        top: 28px;
        left: 130px;
        right: 0px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 15px solid #00A3F1;
    }
    .language-section {
        padding: 20px;
    }
    .iconImage-holder img {
        max-width: 130px;
    }
    .iconImage-holder img {
        margin: 5px 2px;
    }
    .iconImage-holder {
        justify-content: center;
    }
}

@media (max-width:475px) {
    .language-section .language-section-conatiner .language-section-item {
        width: 90px;
        height: 70px;
        margin-top: 50px;
    }
    .language-section .language-section-conatiner .language-section-item img {
        margin: auto;
        width: 50px;
    }
    .language-section .language-section-conatiner .language-section-item img {
        top: -30px;
    }
    .language-section .language-section-conatiner .active::after {
        left: 90px;
    }
    .iconImage-holder img {
        max-width: 100px;
    }
    .icon-box {
        flex: 25%;
    }
    .language-section-conatiner {
        flex: 10%;
    }
    .language-section {
        margin: 0px 10px;
    }
}


/* industry nav DropDown and portfolio nav DropDown
_____________________________________*/

.industries-dropDown .child-service-link>ul,
.Portfolio-dropDown .child-service-link>ul {
    display: grid;
    grid-template-columns: auto auto auto;
}

.industries-dropDown .service-hover-elm,
.Portfolio-dropDown .service-hover-elm {
    display: block;
}

.industries-dropDown .child-service-link ul .industries-image-icons {
    width: 35px !important;
}

.Portfolio-dropDown .child-service-link ul .portfolio-image-icons {
    width: 155px !important;
    height: 35px;
}

.Portfolio-dropDown .child-service-link ul .v2-image-icons {
    width: 55px !important;
    height: 35px;
}

.Portfolio-dropDown>.service-hover-elm .child-service-link ul li a {
    flex-direction: column;
}

.Portfolio-dropDown>.service-hover-elm .child-service-link ul li a p {
    margin-top: 10px;
    color: #000;
    text-transform: capitalize;
    font-weight: bold;
}

.Portfolio-dropDown {
    width: 60%;
}


/* industries hover cards
------------------------------------ */

.industries-hover-cards {
    margin-top: 10vh;
    margin-bottom: 30vh;
}

.industries-hover-cards .industries-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: auto auto auto;
    justify-content: space-around;
}

.industries-grid .industries-grid-items {
    width: 450px;
    height: 300px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.industries-grid .industries-grid-items img {
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    border-radius: 6px;
    transition: all 0.5s;
}

.industries-grid .industries-grid-items:hover img {
    scale: 1.3;
    opacity: 0.5;
}

.industries-grid .industries-grid-items .content-holder {
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 125px;
    padding: 0px 25px;
    transition: all 0.5s;
}

.industries-grid .industries-grid-items:hover .content-holder {
    bottom: 100px;
}

.industries-grid .industries-grid-items .content-holder h3 {
    padding: 5px 20px;
    border: 2px solid #fff;
    background-color: #000;
    width: fit-content;
    border-radius: 10px;
    font-size: 22px;
}

.industries-grid .industries-grid-items .content-holder p {
    font-size: 18px;
    color: #D9D9D9;
    margin-bottom: 30px;
}

.industries-grid .industries-grid-items .content-holder a {
    border: 1px solid #3895D1;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}

.industries-grid .industries-grid-items .content-holder a:hover {
    background-position: right bottom;
    color: #3895D1;
}

@media (max-width: 1540px) {
    .industries-hover-cards {
        padding: 20px;
    }
    .industries-grid .industries-grid-items {
        width: 350px;
    }
    .industries-grid .industries-grid-items .content-holder p {
        font-size: 16px;
        margin-bottom: 52px;
    }
    .industries-grid .industries-grid-items .content-holder h3 {
        font-size: 20px;
    }
}

@media (max-width: 1200px) {
    .industries-grid .industries-grid-items {
        width: 300px;
        height: 280px;
    }
    .industries-grid .industries-grid-items .content-holder p {
        margin-bottom: 50px;
        font-size: 14px;
    }
    .industries-grid .industries-grid-items .content-holder h3 {
        font-size: 18px;
    }
}

@media (max-width: 1050px) {
    .industries-grid .industries-grid-items {
        width: 280px;
        height: 250px;
    }
    .industries-grid .industries-grid-items .content-holder p {
        margin-bottom: 60px;
    }
    .industries-grid .industries-grid-items .content-holder h3 {
        font-size: 15px;
    }
    .industries-grid .industries-grid-items .content-holder a {
        font-size: 15px;
    }
}

@media (max-width: 940px) {
    .industries-grid .industries-grid-items {
        width: 240px;
        height: 200px;
    }
    .industries-grid .industries-grid-items .content-holder p {
        margin-bottom: 35px;
        font-size: 12px;
    }
    .industries-grid .industries-grid-items .content-holder h3 {
        font-size: 11px;
    }
    .industries-grid .industries-grid-items .content-holder a {
        font-size: 10px;
    }
    .industries-grid .industries-grid-items:hover .content-holder {
        bottom: 50px;
    }
}

@media (max-width:815px) {
    .industries-hover-cards .industries-grid {
        grid-template-columns: auto auto;
    }
    .industries-grid .industries-grid-items {
        width: 270px;
        height: 220px;
    }
    .industries-grid .industries-grid-items .content-holder h3 {
        font-size: 14px;
    }
    .industries-grid .industries-grid-items .content-holder p {
        font-size: 12px;
        margin-bottom: 50px;
    }
    .industries-grid .industries-grid-items:hover .content-holder {
        bottom: 80px;
    }
}

@media (max-width:615px) {
    .industries-hover-cards .industries-grid {
        grid-template-columns: auto;
    }
    .industries-grid .industries-grid-items {
        width: 350px;
        height: 280px;
    }
    .industries-grid .industries-grid-items .content-holder a {
        font-size: 8px;
    }
}

@media (max-width:615px) {
    .industries-grid .industries-grid-items {
        width: 320px;
        height: 250px;
    }
}

@media (max-width:330px) {
    .industries-grid .industries-grid-items {
        width: 250px;
        height: 200px;
    }
    .industries-grid .industries-grid-items .content-holder h3 {
        font-size: 12px !important;
    }
    .industries-grid .industries-grid-items .content-holder p {
        font-size: 10px;
        margin-bottom: 5px;
    }
    .industries-grid .industries-grid-items:hover .content-holder {
        bottom: 35px;
    }
}


/* about gallery
________________________________*/

.gallery-items {
    display: flex;
}



.gallery-items figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-items {
    display: flex;
    align-items: normal;
    justify-content: space-between;
}

.about-gallery-container .slick-initialized .slick-slide{
    margin: 54px 10px;
}




/* .back-to-top button code code  */

.BackToTop{
    display: none;
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 65px;
    z-index: 20;
    opacity: 0.5;
    transform: rotate(180deg);
    transition: all 0.4s;
}
#scrollTopButton {
    background: none;
    border: none;
}
.BackToTop:hover{
    opacity: 1;
    transform: rotate(360deg) scale(1.3) ;
}
@media (max-width:1200px ) {
    .BackToTop{
        right: 25px;
        bottom: 25px;
        width: 50px;
    }
    
}

@media (max-width:800px ) {
    .BackToTop{
        right: 20px;
        bottom: 30px;
        width: 40px;
    }
    
}
@media (max-width:500px ) {
    .BackToTop{
        right: 10px;
        bottom: 30px;
        width: 40px;
    }
    
}
/* careers page stats here  */

.job-type-section {
    display: grid;
    grid-template-columns: auto auto;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
    gap:60px;
    margin:100px 0px ;
}
.job-listing {
    display: flex;
    justify-content: center;
    
}
.job-listing-box {
    display: flex;
    justify-content: space-between;   
    width: 100%;
    padding: 20px 35px;
    border-radius: 15px;
    box-shadow: rgb(180 172 172 / 56%) 0px 0px 9px 0px, rgb(255 255 255) 0px 0px 2px 0px;

}
.apply-now-button-career-page {
    margin: auto 0px ;
}
.job-title h2 {
    margin: 10px 0px ;
    font-size: 30px;
    margin-bottom: 15px
}
.job-meta span {
    margin-right: 20px;
    color: #B5B5B5;
}

.apply-now-button-career-page-cta {
    border: 1px solid #3895D1;
    color: #fff;
    font-weight: 600;
    padding: 15px 30px;
    border-radius: 5px;
    background: linear-gradient(to left, #FFFFFF 50%, #3895D1 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
    font-size: 16px;
}

.apply-now-button-career-page-cta:hover {
    background-position: right bottom;
    color: #3895D1;
}
@media (max-width:1420px) {
    .job-title h2 {
        font-size: 24px;
    }
    .job-meta span {
        font-size: 14px;
    }
    .apply-now-button-career-page-cta {
        font-size: 12px;
    }
}

@media (max-width:1200px) {
    .job-title h2 {
        font-size: 22px;
    }
    .apply-now-button-career-page-cta {
        padding: 10px 22px ;
    }
}
@media (max-width:1120px) {
    .job-listing-box {
        padding: 10px 25px;
    }
}

@media (max-width:1090px) {
    .job-type-section {
        gap: 25px;
    }
    .apply-now-button-career-page {
        align-items: center;
        text-align: center;
    }
    .apply-now-button-career-page-cta {
        padding: 10px 14px;
    }
}


@media (max-width:1000px) {
    .job-type-section {
        display: block;
    }
    .job-title h2 {
        font-size: 36px;
        margin-bottom: 30px;
    }
    .job-meta span {
        font-size: 18px;
    }
    .apply-now-button-career-page-cta {
        font-size: 22px;
    }
    .job-listing-box {
        padding: 25px 45px;
    }
    .job-listing {
        display: flex;
        justify-content: center;
        margin: 30px 0px;
    }
    .service-hero-type-pera-career {
        font-size: 1.5vw !important;
    }
}

@media (max-width:780px) {
    .job-title h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }
    
    .job-meta span {
        font-size: 16px;
    }
    .job-listing-box {
        width: 90%;
    }
    .apply-now-button-career-page-cta {
        font-size: 18px;
    }
    .job-type-section {
        margin: 20px 0px;
    }
}
@media (max-width:675px) {
    .job-title h2 {
        font-size: 24px;
    }
    .apply-now-button-career-page-cta {
        font-size: 16px;
    }
}
@media (max-width:625px) {
    .job-listing-box {
        padding: 25px 35px;
    }    
}
@media (max-width:602px) {
    .job-listing-box {
        padding: 20px 30px;
    }    
    .job-title h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .job-meta span {
        font-size: 12px;
    }
    .apply-now-button-career-page-cta {
        font-size: 14px;
    }
}

@media (max-width:550px) {
    .job-title h2 {
        font-size: 18px;
        margin-bottom: 0px;
    }
    
    .job-meta span {
        font-size: 10px;
    }
    .apply-now-button-career-page-cta {
        font-size: 11px;
    }
    .job-listing-box {
        padding: 20px;
    }    
}

@media (max-width:480px) {
    .job-listing-box {
        width: 100%;
    }
    .job-title h2 {
        font-size: 16px;
    }
    .apply-now-button-career-page-cta {
        font-size: 10px;
        padding: 8px 11px;
    }
}
@media (max-width:380px) {
    .job-title h2 {
        font-size: 11px;
        margin: 2px;
    }
    .apply-now-button-career-page-cta {
        font-size: 8px;
        padding: 5px;
    }
    
    .job-meta span {
        font-size: 7px;
        margin-right: 2px;
    }
}


/* Industries pages starts from here  */



.Why-client-Trust-Ecommerece-container {
    display: grid;
    grid-template-columns: 1fr 1fr  ;
    column-gap: 40px ;
    row-gap: 50px;
    align-items: baseline;
 
   
}


.Why-client-Trust-Ecommerece-box {
    border: 1px solid #fff;
    border-radius: 10px;
    height: auto;
}
.header-ecommerce-box {
    display: flex;;
    padding: 20px 30px ;
    justify-content: space-between;
}
.Ecommerece-box-icon ,.Ecommerece-box-text{
    display: flex;
    align-items: center;
    justify-content: center;
    /* justify-content: flex-end; */
}
.Ecommerece-box-text h3{
    margin: 0;
   margin-left: 30px;
}
.Ecommerece-box-icon {
    transition: all 0.5s;
}

.description-ecommerce-box {
    height: 0px;
    margin: 0px;
    margin-left: 120px;
    margin-right: 40px;
    overflow: hidden;
    transition: all 0.5s;
}

.Why-client-Trust-Ecommerece-box.active .description-ecommerce-box{
    margin-bottom: 20px;
    height: auto;
    overflow: auto;
}
.Why-client-Trust-Ecommerece-box.active .Ecommerece-box-icon {
    transform: rotate(180deg);
    transition: all 0.5s;
}
.endsection-industry {
        margin: 30px 0px;
}
@media (max-width:1200px) {
    .Ecommerece-box-text h3 {
        font-size: 20px;
    }
    
}
@media (max-width:800px) {
    .Why-client-Trust-Ecommerece-container{
        display: block;
    }
    .Why-client-Trust-Ecommerece-box {
        margin: 20px 0px;
    }    
}

.for-highlight-blue{
    color: #41A7E9;
}
.for-highlight-white{
    color: #fefefe ;
}

.career-popup-section {
    position: fixed;
    z-index: 1000;
    width: 100%;
    display: none;
    height: 100%;
    margin: 0px auto;
    align-items: center;
    justify-content: center;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0;
    overflow: hidden;
    overflow-y: scroll;
    transition:opacity 0.5s ease-in, transform 0.5s ease-in;
}

.career-popup-section.show{
    transition:opacity 0.5s ease-in, transform 0.5s ease-in;
    opacity: 1;
    transform:scale(1);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.8px);
    -webkit-backdrop-filter: blur(5.8px);   
}



.career-popup-section .popup-form {
    background-color: #000;
    width: 60%;
    margin: 0px auto;
    padding: 30px;
     border-radius: 15px;
    box-shadow: rgb(180 172 172 / 56%) 0px 0px 9px 0px, rgb(255 255 255) 0px 0px 2px 0px;
}
.popup-contact-form {
    display: grid;
    grid-template-columns: auto auto ;

        justify-content: center;
        align-items: center;
        transition: all 100s ease;
}
#Formpopup {
      display: none;
      opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}
.close {
    position: relative;

}
.close .close-button {
    position: absolute;
    top: px;
    right: -15px;
    padding: 0px 15px;
    font-size:20px ;
}
.close :hover{
    border: none;
    border-radius: 20px;
    background-color: red;
    cursor: pointer ;
    transition: all 1s;
}
.applyhere {
    /* text-align: center; */
}

/* sweet alert style --------- */

.swal2-styled{
    cursor: pointer !important;
}

body.hide-native-cursor a, body.hide-native-cursor button  {
    cursor: pointer !important;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide number input spinners in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
  }

  
  /* switch screen with screen options start ----------------------------------------------- */
  
  .change-screen-on-click-holder {
    width:100%;
    background: #1D1D1D;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 12px;
    gap: 60px;
    height: 590px;
  }
  
  .change-screen-on-click-holder span.focus{
    color: #00ACFF;
  }
  
  .screen-change-background{
    width: 30%;
    flex-shrink: 1;
  }
  
  .screen-change-background img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
  
  .screen-change-background img.active{
    display: block;
  }
  
  .content-and-image-holder{
    width: 70%;
    display: flex;
    justify-content: start;
    flex-direction: column;
    row-gap: 40px;
  }
  
  .change-screen-content-holder{
    margin-top: 60px;
  }
  
  
  .content-and-image-holder .change-screen-content {
    width: 80%;
    display: none;
  }
  
  .content-and-image-holder .change-screen-content.active{
    display: block;
  }
  .change-screen-button{
    display: flex;
    align-items: center;
    justify-content: end;
    column-gap: 20px;
    margin-right: 60px;
  }
  
  .change-screen-button button{
    background-color: #A1A1A1;
        display: flex;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
    }

  

    
  .change-screen-button button.active{
    background-color: #00ACFF;
  }
  
  
  .change-screen-image-holder{
    display: flex;
        align-items: start;
        justify-content: start;
        gap: 20px;
        flex-grow: 1;
        overflow-x: auto;
        width: fit-content;
  }
  
  .change-screen-image-holder .change-screen-image-multi{
    position: relative;
    width: 400px;
    height: 240px;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  
  .change-screen-image-holder .change-screen-image-multi::before{
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 6;
    opacity: 0.5;
  }
  
  .change-screen-image-holder .change-screen-image-multi img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0px;
    z-index: 5;
    
  }
  
  .change-screen-image-holder .change-screen-image-multi p{
    position: absolute;
    top: 0px;
    z-index: 10;
    padding: 10px;
  }
  

  /* switch screen with screen options end ----------------------------------------------- */