/*==========================================================================
=> Global Styles
========================================================================== */
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

small {
    font-size: 80%;
}

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

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

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

button,
input {
    line-height: normal;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button,
input,
select[multiple],
textarea {
    background-image: none;
}

a {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active,
a:hover,
a:focus {
    outline: 0;
    text-decoration: none;
}

img {
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

img.obj-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

img.obj-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul,
ol,
dl {
    -webkit-margin-after: 0;
    -webkit-margin-before: 0;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #CFD1D4;
}




/* Fonts */

/*@font-face {*/
/*    font-family: 'Satoshi';*/
/*    src: url('./fonts/Satoshi-Light.woff2') format('woff2'),*/
/*        url('./fonts/Satoshi-Light.woff') format('woff'),*/
/*        url('./fonts/Satoshi-Light.ttf') format('truetype');*/
/*    font-weight: 300;*/
/*    font-display: swap;*/
/*    font-style: normal;*/
/*}*/


/*@font-face {*/
/*    font-family: 'Satoshi';*/
/*    src: url('./fonts/Satoshi-Regular.woff2') format('woff2'),*/
/*        url('./fonts/Satoshi-Regular.woff') format('woff'),*/
/*        url('./fonts/Satoshi-Regular.ttf') format('truetype');*/
/*    font-weight: 400;*/
/*    font-display: swap;*/
/*    font-style: normal;*/
/*}*/


/*@font-face {*/
/*    font-family: 'Satoshi';*/
/*    src: url('./fonts/Satoshi-Medium.woff2') format('woff2'),*/
/*        url('./fonts/Satoshi-Medium.woff') format('woff'),*/
/*        url('./fonts/Satoshi-Medium.ttf') format('truetype');*/
/*    font-weight: 500;*/
/*    font-display: swap;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'Satoshi';*/
/*    src: url('./fonts/Satoshi-Bold.woff2') format('woff2'),*/
/*        url('./fonts/Satoshi-Bold.woff') format('woff'),*/
/*        url('./fonts/Satoshi-Bold.ttf') format('truetype');*/
/*    font-weight: 700;*/
/*    font-display: swap;*/
/*    font-style: normal;*/
/*}*/


/*@font-face {*/
/*    font-family: 'Satoshi';*/
/*    src: url('./fonts/Satoshi-Black.woff2') format('woff2'),*/
/*        url('./fonts/Satoshi-Black.woff') format('woff'),*/
/*        url('./fonts/Satoshi-Black.ttf') format('truetype');*/
/*    font-weight: 900;*/
/*    font-display: swap;*/
/*    font-style: normal;*/
/*}*/


h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
a,
p,
button,
span {
    font-family: 'Satoshi';
     /*will-change: transform; */
}

html,
body {
    /* overflow: hidden; */
    /* width: 100%; */
    /* height: 100vh; */

    /* &::-webkit-scrollbar {
        display: none;
        width: 0;
    } */
}

/* 
#main-scrollbar {
    width: auto;
    height: 100vh;
    margin: 0;
    position: relative;
} */


#popup .button {
    color: #FFF;
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    text-transform: capitalize;
    border-radius: 28px;
    background: #000;
    height: 52px;
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    box-shadow: none;
    border: none;
    transition: 0.5s;
    border: 1px solid transparent;
    /* background-size: 200% 100%;- */
    /* background: linear-gradient(to right, #F95359, #575EF4, #9A3FEB, #9A3FEB, #575EF4, #F95359); */
}

#popup .button:hover {
    background: #fff;
    color: #000;
    border: 1px solid #000;
}

.button,
.hs-button {
    color: #FFF;
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    text-transform: capitalize;
    border-radius: 28px;
    background: #000;
    height: 52px;
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    box-shadow: none;
    border: none;
    transition: 0.5s;
    /* background-size: 200% 100%;- */
    /* background: linear-gradient(to right, #F95359, #575EF4, #9A3FEB, #9A3FEB, #575EF4, #F95359); */
}

.button:hover {
    /* background-size: 500% 100%; */
}


.button.line {
    border: 1px solid #CCD4D6;
    background: transparent;
    color: #000;
}

:root {
    --header-height: 80px
}



.main-head {
    color: #000;
    text-align: center;
    font-size: 70px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -0.7px;
    margin-bottom: 40px;
    will-change: transform;
}

.container {
    max-width: 1280px;
    width: 100%;
    margin: auto;
}

.header-box {
    height: var(--header-height);
    display: flex;
    align-items: center;
    width: 100%;

}

.header-box .container {
    height: 100%;
    display: flex;
    align-items: center;
}

.header-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border-bottom: 1px solid #000; */
    height: 100%;
}

.header-right {
    display: flex;
    gap: 16px;
}

#header {
    width: 100%;
    position: fixed;
    z-index: 111;
    transition: 0.5s;
}

#header.fixHeader {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.5);
}

.main-container {
    padding-top: var(--header-height);
    position: relative;
}

.banner-wrap {
    max-width: 920px;
    margin: auto;
    padding-top: 80px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.banner-wrap p {
    color: #333;
    text-align: center;
    font-family: Satoshi;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    margin-top: 8px;
    will-change: transform;
}

.email-wrap {
    max-width: 396px;
    margin: auto;
    will-change: transform;
}

.email-wrap .glow-button {
    position: absolute;
    right: 0;
}

.email-field {
    border-radius: 72px;
    background: #FFF;
    width: 100%;
    height: 53px;
    border: none;
    outline: none;
    box-shadow: none;
    padding-left: 20px;
    color: #666;
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 139.5%;
    padding-right: 120px;
    border: 1px solid #aaa;
}

.email-wrap {
    position: relative;
    margin-top: 40px;
}

.email-wrap form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.email-wrap .button {
    position: absolute;
    right: 8px;
    padding: 15px 18px;
    font-size: 14px;
    height: 40px;
}

:root {
    --ball-variable: 650px
}

.ball {
    width: calc(var(--ball-variable) / 1.9);
    height: calc(var(--ball-variable) / 1.9);
    border-radius: 50%;
    position: absolute;

}

.ball-1 {
    background: rgba(88, 87, 249, 0.55);
    position: absolute;
    top: 0;
}

.ball-2 {
    background: rgba(251, 84, 87, 0.57);
    position: absolute;
    left: 0;
    bottom: 0;
}

.ball-3 {
    background: rgba(156, 52, 240, 0.52);
    right: 0;
    bottom: 0;
}


.animating-balls {
    position: fixed;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    filter: blur(140px);
    -moz-filter: blur(140px);
    -webkit-filter: blur(140px);
    -o-filter: blur(140px);
}

.balls-wrap {
    position: relative;
    max-width: var(--ball-variable);
    width: 100%;
    height: var(--ball-variable);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-60%);
}

.banner-numbers {
    display: flex;
    max-width: 550px;
    margin: auto;
    width: 100%;
    margin-top: 80px;
    justify-content: space-between;
}

.banner-num h3 {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 139.5%;
    text-align: center;
}

.banner-num p {
    color: #000;
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 139.5%;
    text-align: center;
}

.num-divider {
    height: auto;
    width: 1px;
    background: #D0D0D0;
}

.banner-screens-wrap {
    display: flex;
    gap: 34px;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
}

.banner-screen-1 {
    transform: translateY(-36%);
}

.banner-screen-2 {
    transform: translateY(-8%);
}

.banner-screen-4 {
    transform: translateY(-14%);
}

.banner-screen-5 {
    transform: translateY(-36%);
}













.text-wrap {
    padding: 100px 0;
}

.big-txt {
    max-width: 1053px;
    margin: auto;
}

.big-txt p {
    color: #000;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: -0.48px;
    max-width: 1053px;
    margin: auto;
}

.big-txt h2 {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 160%;
    letter-spacing: 0.5px;
    max-width: 1053px;
    margin: auto;
    margin-bottom: 20px;
    text-transform: capitalize;
    opacity: 0.7;
}

.s-logo-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.logos-wrap {
    padding: 100px 0;
}

.view-all {
    display: flex;
}

.cards-wrap {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.card {
    height: 430px;
    /* padding: 40px 32px; */
    background: #FFF;
    border-radius: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    width: calc(33% - 25px);
}

.card h3 {
    color: #000;
    font-family: Satoshi;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 35px;
    /* 125% */
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.card-ball-1 {
    position: absolute;
    border-radius: 50%;
    width: 140px;
    height: 170px;
    right: 0;
    background: #FB5457;
    opacity: 0.5;
    top: -40px;
    filter: blur(152px);
}

.card-ball-2 {
    position: absolute;
    border-radius: 50%;
    width: 140px;
    height: 170px;
    left: 0;
    top: -40px;
    background: #5857F9;
    opacity: 0.8;
    filter: blur(150px);
}

.card-bottom {
    border-radius: 36px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 7.24%, #F6F7FB 28.97%);
    padding: 50px 36px 24px 36px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.card-bottom p {
    color: #666;
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.6px;
}

.view-all {
    color: #000;
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 25.2px;
    letter-spacing: -0.28px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.view-icon {
    display: flex;
    width: 48px;
    height: 48px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    border: 1px solid #E0E0E0;
}



.black-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.black-img {
    width: 50%;
    display: flex;
    justify-content: center;
    width: calc(50% - 20px);
}

.black-img img {
    object-fit: contain;
}

.black-image-section {
    padding: 100px 0;
}


.cards-section {
    padding: 100px 0;
}

.big-txt.white p {
    color: #fff;
}

/* .black-section {
    background: #0D0D0D;
} */

.clients-box {
    padding: 20px 20px 30px 30px;
    border-radius: 27px;
    border: 1px solid #F1F1F1;
    background: #FFF;
    flex: 1;
}

.clients-section {
    padding: 100px 0;
}

.comm-title h3 {
    color: #000;
    font-family: Satoshi;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.48px;
    text-align: center;
    margin-bottom: 40px;
}

.clients-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}

.client-name {
    margin-bottom: 24px;
}

.client-img {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    overflow: hidden;
}

.client-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-name h3 {
    color: #3D3D3D;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.27px;
    margin-bottom: 8px;
}

.client-name h4 {
    color: #3D3D3D;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.2px;
    letter-spacing: 0px;
}

.client-txt p {
    color: #3D3D3D;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
}

.clients-wrap {
    display: flex;
    gap: 40px;
}


.clients-logos-wrap .s-logo {
    height: auto;
    width: auto;
    max-width: 120px;
}

.plans-wrap {
    display: flex;
    gap: 40px;
}

.pricing-section {
    padding: 100px 0;
}

.plan-box {
    border-radius: 29px;
    border: 1px solid #000;
    background: #FFF;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 26px 32px;
    position: relative;
    overflow: hidden;
}

.plan-gradient {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(40%) translateY(-50%) rotate(-41.872deg);
    width: 176.432px;
    height: 131.889px;
    filter: blur(42px);
}

.plan-box.blue .plan-gradient {
    background: radial-gradient(50.82% 50.61% at 50% 50%, rgba(24, 61, 244, 0.57) 0%, rgba(24, 61, 244, 0.00) 100%);
}

.plan-box.pur .plan-gradient {
    background: radial-gradient(50.82% 50.61% at 50% 50%, rgba(154, 63, 235, 0.57) 0%, rgba(154, 63, 235, 0.00) 100%);
}

.plan-box.red .plan-gradient {
    background: radial-gradient(50.82% 50.61% at 50% 50%, rgba(251, 84, 87, 0.54) 0%, rgba(24, 61, 244, 0.00) 100%);
}


.plan-head {
    display: flex;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 30px;
    justify-content: space-between;
    align-items: center;
}

.plan-head-right h2 {
    color: #1C2122;
    font-family: Satoshi;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -2.24px;
}

.plan-head-right h2 span {
    color: #49575A;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.5px;
    text-transform: capitalize;
}

.plan-head-left h4 {
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.22px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.plan-box.blue .plan-head-left h4 {
    color: #5857F9;
}

.plan-box.pur .plan-head-left h4 {
    color: #7202BB;
}

.plan-box.red .plan-head-left h4 {
    color: #FB5457;
}

.plan-head-left p {
    color: #323C3E;
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.plan-list li {
    color: #1C2122;
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.plan-list-1 li::before {
    content: url(./img/blue-tick.svg);
}

.plan-list-2 li::before {
    content: url(./img/pur-tick.svg);
}

.plan-list-3 li::before {
    content: url(./img/red-tick.svg);
}

.plan-list li::before {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 99px;
    border: 1px solid #E9ECED;
    padding: 6.5px;
    background: #FFF;
    margin-right: 16px;
}

.plan-bottom-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.plan-bottom {
    margin-top: 40px;
}

.plan-bottom .button {
    width: 100%;
    margin-top: 28px;
}




.faq-wrap {
    display: flex;
}

.faq-left {
    width: 50%;
}

.faq-title {
    max-width: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.faq-title p {
    color: #000;
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 162.5%;
}

.faq-title a {
    font-weight: 500;
    color: #000;
}

.faq-title .comm-title h3 {
    text-align: left;
}

.faq-right {
    width: 50%;
}

.faqAcc {
    padding: 32px 28px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    border-bottom: 1px solid #eee;
}



.faqQus {
    position: relative;
    padding-right: 80px;
}

.faqQus h4 {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
}


.faqQus:after {
    content: url(./img/carret-down.svg);
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.3s;
}

.faqAcc.active .faqQus:after {
    transform: rotate(180deg);
}

.faqpara {
    display: none;
    padding-right: 10px;
}

.faqAcc.active {
    border-radius: 25px;
    /* background: #F6F7F9; */
    border: 1px solid #141414;
    /* border-bottom: 0; */
}

.faqpara p {
    color: #666;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
    padding-top: 32px;
}

.faqpara ul li {
    font-size: 18px;
    line-height: 1.6;
    color: #5c77b0;
    font-weight: 500;
    margin-bottom: 10px;
    list-style-type: disc;
}

.faqpara .upload-if {
    padding: 10px;
}

.faqpara .upload-if li {
    list-style-type: none;
}

.faq-head p {
    color: #5c77b0;
    font-size: 18px;
    margin-bottom: 50px;
}

.faq-head p a {
    color: var(--clr);
}

.faq-section {
    padding: 100px 0;
}

.need-wrap {
    display: flex;
}

.need-left {
    width: 50%;
}

.need-right {
    width: 50%;
}



.need-left h3 {
    color: #000;
    font-family: Satoshi;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 113.4px;
    /* 162% */
    letter-spacing: -1px;
    margin-bottom: 48px;
}

.need-left h3 span {
    display: block;
    color: #000;
    font-family: Satoshi;
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 0.6;
    /* 148.5% */
    letter-spacing: -1px;
}

.need-left p {
    color: #000;
    font-family: Satoshi;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 30.24px;
}


.need-left a {
    color: #000;
    text-decoration-line: underline;
    text-underline-position: under;
}

.need-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.need-section {
    padding: 100px 0;
}

footer {
    padding: 50px 0;
    position: relative;
    z-index: 1
}

footer h2 {
    font-size: 30px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900
}

footer h4 {
    font-size: 18px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 900;
    margin-bottom: 10px
}

footer ul li {
    margin-bottom: 10px
}

footer ul li:last-of-type {
    margin: 0
}

footer ul li a {
    font-size: 16px;
    line-height: 1;
    color: var(--myClrDark)
}

footer ul li a:hover {
    color: var(--clr1)
}


.copy {
    font-size: 14px;
    line-height: 1;
    color: var(--myClrDark);
    font-family: 'Satoshi';
    font-weight: 700;
    line-height: 1.6;
    margin: 20px 0 0
}

ul.f-social {
    display: flex
}

ul.f-social li {
    margin-right: 15px;
    margin-bottom: 0
}

ul.f-social li:last-of-type {
    margin-right: 0
}

.footer-row {
    display: flex;
    justify-content: space-between;
}

.footer-col {
    width: 20%;
}

.innerFooter {
    background: #fff;
}

.footer-col span {
    display: none
}


.header-btn {
    /* border-radius: 28px;
    border: 1px solid #000;
    background: #FFF; */
    display: flex;
    align-items: center;
    padding: 0 24px;
    color: #000;
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    text-transform: capitalize;
}

.header-btn img {
    height: 24px;
    width: 24px;
    margin-right: 8px;
}

.case-study-section {
    padding: 200px 0 100px;
    overflow: hidden;
}

.swiper-case-study {
    overflow: visible;
}


.case-study-box {
    position: relative;
    height: 470px;
    overflow: hidden;
    border-radius: 26px;
    background: #FFF;
}

.case-study-txt {
    height: 102%;
    width: 102%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    padding: 40px 36px;
    padding-bottom: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cst-bg {
    width: 100%;
    height: 80%;
    border-radius: 50%;
    opacity: 0.4;
    background: rgba(88, 87, 249, 0.55);
    filter: blur(141px);
    position: absolute;
}

.case-study-toggle {
    z-index: 11;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    bottom: 20px;
    right: 20px;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    background: #fff;
    transition: 0.5s;
}

.case-study-head {
    color: #5857F9;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 116%;
    /* 16.24px */
    letter-spacing: 1.96px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.case-study-txt h4 {
    color: #000;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
}

.case-study-txt p {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.case-study-txt {
    /* opacity: 0;
    visibility: hidden; */
    transform: translateY(100%);
    transition: 0.5s;
}

.case-study-img {
    height: 100%;
    width: 100%;
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.case-study-img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
}


.case-study-img img {
    transition: 0.5s;
}

.case-study-img:hover img {
    transform: scale(1.1);
}


.case-study-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.case-study-box.active .case-study-txt {
    /* opacity: 1;
    visibility: visible; */
    transform: translateY(0);
}


.case-study-box.active .case-study-img {
    transform: scale(0.8);
}

.case-study-box.active .case-study-toggle {
    transform: rotate(45deg);
}

.case-study-section .comm-title h3 {
    text-align: left;
}

.black-img-2 img {
    transform: translateY(15%)
}

.black-img-4 img {
    transform: translateY(20%)
}

.black-img-6 img {
    transform: translateY(25%)
}

.black-img-8 img {
    transform: translateY(30%)
}


.white-popup {
    position: relative;
    padding: 32px;
    width: auto;
    max-width: 700px;
    margin: 0 auto;
    border-radius: 26px;
    background: #FFF;
}

.white-popup h3 {
    color: #000;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -1px;
    margin-bottom: 30px;
}



.mfp-zoom-in .mfp-with-anim {
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: scale(0.8);
}

.mfp-zoom-in.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.mfp-zoom-in.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: scale(1);
}

.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-zoom-in.mfp-removing .mfp-with-anim {
    transform: scale(0.8);
    opacity: 0;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}

.mfp-bg {
    background: rgba(0, 0, 0, 0.21);
    backdrop-filter: blur(30px);
}

.form-wrap {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

#popup .form-wrap .form-group,
.hs-form-field {
    width: calc(50% - 20px);
}

#popup .form-wrap .form-group input,
.hs-form-field input {
    border: none;
    outline: none;
    border-bottom: 1px solid #525252;
    width: 100%;
    font-family: Satoshi;
    font-size: 20px;
    line-height: 122%;
    padding: 0;
    color: #000;
}

#popup .form-wrap .form-group label,
.hs-form-field label {
    display: block;
    color: #000;
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    text-transform: capitalize;
    margin-bottom: 10px;
}

#popup .form-wrap .form-group input:focus {
    border-bottom: 1px solid #000;
    box-shadow: none;
}

.hs-form-field label.hs-error-msg {
    font-size: 16px;
    margin-top: 8px;
    color: red;
}

.hbspt-form form {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}



.w100 {
    width: 100%;
}

.mfp-close-btn-in .mfp-close {
    font-size: 40px;
    color: #000;
    opacity: 1;
    top: 34px;
    right: 32px;
}


#header {
    opacity: 0;
    transform: translateY(-100%);
}


.card-img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.header-right .button {
    padding: 0 36px;
}

/* .s-logo {
    height: 100px;
    max-width: 150px;
} */

.s-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.clients-img {
    height: 75px;
    width: 75px;
    border-radius: 50%;
    overflow: hidden;
}

.clients-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}










.lottie {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

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

.need-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

.need-blur {
    overflow: hidden;
    border-radius: 30px;
}

.need-bg .container {
    width: 100%;
    height: 100%;
}

.need-bg img {
    width: 100%;
    height: 100%;
}

.need-blur {
    width: 100%;
    height: 100%;
    position: relative;
}

.nb-bg {
    position: absolute;
    height: 100%;
    width: 100%;
}

.need-wrap {
    padding: 0 80px;
    align-items: center;
}






































.glow-button {
    --button-background: rgba(0, 0, 0, 0.8);
    --button-color: #fff;
    --button-shadow: rgba(33, 4, 104, 0.1);
    --button-shine-left: #F95359;
    --button-shine-right: #575EF4;
    --button-glow-start: #F95359;
    --button-glow-end: #575EF4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    font-family: Satoshi;
    font-size: 16px;
    font-weight: 500;
    border-radius: 11px;
    position: relative;
    line-height: 24px;
    cursor: pointer;
    color: var(--button-color);
    padding: 0;
    margin: 0;
    border-radius: 50px;
    background: none;
    z-index: 1;
    box-shadow: 0 8px 20px var(--button-shadow);

    /* font-style: normal;
    font-weight: 500;
    line-height: 122%;
    text-transform: capitalize;
    border-radius: 28px;
    background: #000;
    height: 52px;
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    box-shadow: none;
    border: none;
    transition: 0.5s; */
}

.glow-button .gradient {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: scaleY(1.02) scaleX(1.005) rotate(-0.35deg);
}

.glow-button .gradient:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: scale(1.05) translateY(-44px) rotate(0deg) translateZ(0);
    padding-bottom: 100%;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--button-shine-left), var(--button-shine-right));
    -webkit-animation: rotate linear 2s infinite;
    animation: rotate linear 2s infinite;
}

.glow-button span {
    z-index: 1;
    position: relative;
    display: block;
    padding: 0px 22px;
    box-sizing: border-box;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 52px;
    background-color: var(--button-background);
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glow-button span:before {
    content: "";
    position: absolute;
    left: -16px;
    top: -16px;
    transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px)) translateZ(0);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--button-glow, transparent);
    opacity: var(--button-glow-opacity, 0);
    transition: opacity var(--button-glow-duration, 0.5s);
    filter: blur(20px);
}

.glow-button:hover {
    --button-glow-opacity: 1;
    --button-glow-duration: .25s;
}

.glow-button.line {
    background: transparent;
    color: #000;
}

.glow-button.line span {
    background: transparent;
    border: 1px solid #000;
    width: 100%;
}

.glow-button.line .gradient {
    display: none;
}

.plan-bottom .glow-button span {
    width: 100%;
}

.plan-bottom .glow-button .gradient:before {
    display: none;
}

.plan-bottom .glow-button {
    --button-background: rgba(0, 0, 0, 1);
}

.plan-bottom p {
    margin-bottom: 20px;
}

@-webkit-keyframes rotate {
    to {
        transform: scale(1.05) translateY(-44px) rotate(360deg) translateZ(0);
    }
}

@keyframes rotate {
    to {
        transform: scale(1.05) translateY(-44px) rotate(360deg) translateZ(0);
    }
}


.header-right .glow-button span {
    padding: 0 36px;
}

.header-right .glow-button {
    font-size: 18px;
}

.white-popup h3 {
    padding-right: 40px;
}


/* *:not(.main-container) {
    -webkit-transform: translate3d(0, 0, 0);
} */

/**:not(#header, body, html, .banner-wrap, .animating-balls, .banner-num, .banner-screen img, .banner-screen, .case-study-img, .case-study-txt, .section-padding.contact .container, .case-study-toggle) {*/
/*    -webkit-transform: translate3d(0, 0, 0);*/
/*}*/

.animating-balls,
.balls-wrap,
.ball,
.card {
    -webkit-transform: translate3d(0, 0, 0);
}

.submitted-message {
    font-family: 'Satoshi';
    font-size: 20px;
    color: #000;
    font-weight: 500;
}



.banner-wrap {
    /* filter: blur(5px); */
    /* transform: translate3d(0px, 100px, 0px); */
    opacity: 0;
    position: relative;
    top: 100px;
    /* transform: translateY(100px); */
}

/* .animating-balls {
    opacity: 0.5;
    transform: scale(2) translateY(50%);
    z-index: -11;
} */

.banner-num {
    /* transform: translateY(50px); */
}

.banner-screen img {
    /* filter: blur(5px); */
    opacity: 0;
    transform: translateY(100px);
}

.logo-section-1 .s-logo {
    filter: grayscale(1);
}


.wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
}

.wpforms-validate .wpforms-field-container .form-group {
    width: calc(50% - 20px)
}

.wpforms-container input.wpforms-field-medium,
.wpforms-container select.wpforms-field-medium,
.wpforms-container .wpforms-field-row.wpforms-field-medium {
    max-width: 100% !important;
}


div.wpforms-container-full .wpforms-form label.wpforms-error,
div.wpforms-container-full .wpforms-form em.wpforms-error {
    font-family: Satoshi !important;
    font-weight: 500 !important;
}







.section-padding.contact {
    height: 80vh;
    padding: 0;
}

.section-padding.contact .container {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 52%;
    position: relative;
}

.success-msg {
    font-family: 'Satoshi';
    font-weight: 900;
    font-size: 20px;
    color: var(--clr2);
    text-align: left;
    /* display: none; */
}

.massage {
    text-align: center;
}

.thank-you-msg .responseImg {
    height: 320px;
}

.responseImg {
    display: none;
    height: 220px;
}

.responseBox {
    top: 0;
    opacity: 0;
    position: relative;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}

.qt-box-5,
.responseBox {
    text-align: center;
}

.responseBox.in {
    top: -50px;
    opacity: 1;
}

.qt-box-5 h3,
.responseBox h3 {
    color: #ff3968;
    font-size: 36px;
    font-family: 'Satoshi';
    font-weight: 900;
}

.thank-you-msg .qt-box-5 h3,
.thank-you-msg .responseBox h3 {
    font-size: 56px;
    line-height: 1.5;
}


.qt-box-5 h4,
.responseBox h4 {
    color: var(--myClrDark);
    font-size: 24px;
    font-family: 'Satoshi';
    font-weight: 900;
    text-transform: none;
    margin: 0;
}

.thank-you-msg .qt-box-5 h4,
.thank-you-msg .responseBox h4 {
    font-size: 34px;
    line-height: 1.5;
}

#contResponseContainer p {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 400;
    color: #999;
    margin: 32px 0;
}

.logo-section-1 p {
    text-align: center;
    max-width: 990px;
    margin: auto;
    font-size: 36px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 48px;
    font-weight: 600;
}

.glow-cta {
    display: block;
    width: max-content;
    margin-top: 40px;
    font-size: 18px;
}

.glow-cta span {
    padding: 0 36px;
}

.big-txt p .glow-cta {
    max-width: 1053px;
}

.logo {
    width: 100px;
}