*,
:after,
:before {
    -webkit-tap-highlight-color: transparent;
    list-style-position: inside;
    list-style-type: none;
    color: inherit;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: 0;
    position: relative;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: Poppins !important;

}

body,
button,
dd,
div,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
input,
li,
p,
td,
textarea,
th,
ul {
    font-size: inherit;
    color: inherit;
    background: 0 0;
}

header,
nav,
section {
    display: block
}

code,
input,
table,
td,
textarea {
    max-width: 100%
}

button,
input,
textarea {
    resize: none;
    -webkit-appearance: none;
    font-family: inherit
}

img {
    height: auto;
    vertical-align: bottom
}

i {
    font-style: normal
}

a,
button {
    touch-action: manipulation;
    border: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: .25s
}

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

strong {
    font-weight: 700
}

[data-link] {
    cursor: pointer
}

[data-bg] {
    background-position: center center;
    background-size: cover
}

.fx {
    margin-top: 0 !important
}

.js-color-bg {
    fill: #000
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    transition: background-color 5000s ease-in-out 0s;
    background-color: inherit !important
}

::-moz-selection {
    background-color: #1A73E8;
    color: #fff
}

::selection {
    background-color: #1A73E8;
    color: #fff
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .5
}

::-moz-placeholder {
    color: inherit;
    opacity: .5
}

::-ms-input-placeholder {
    color: inherit;
    opacity: .5
}

.fa:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300
}

.phone:before {
    content: '\f095'
}

.marker:before {
    content: '\f041'
}

.at:before {
    content: '\f1fa'
}

.times:before {
    content: '\f00d'
}

.check:before {
    content: '\f00c'
}

[data-cursor] {
    mix-blend-mode: difference;
    display: none;
    pointer-events: none;
    width: 0;
    height: 0;
    margin-top: 2px;
    margin-left: 2px;
    z-index: 99999999;
    position: absolute;
    top: 0;
    left: 0
}

html:hover [data-cursor] {
    display: block
}

html.ie [data-cursor],
html.mob [data-cursor] {
    display: none !important
}

[data-cursor] .cur1 {
    width: 5px;
    height: 5px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    z-index: 5
}

[data-cursor] .cur1>* {
    opacity: 0;
    transition: .4s;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    text-align: center
}

[data-cursor] .cur2 {
    transition: opacity .4s, transform .4s;
    opacity: .3;
    width: 15px;
    height: 15px;
    background-color: #fff;
    margin: -11px 0 0 -10px;
    border-radius: 50%
}

.drag [data-cursor] .cur2,
.hover [data-cursor] .cur2 {
    transform: scale(4);
    opacity: .1
}

.swiper-slide {
    overflow: hidden;
    flex: 1 0 auto;
    height: 100%
}

.swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    height: 100%
}

@font-face {
    font-display: swap;
    font-family: icomoon;
    src: url(../../lib/icomoon/icomoon.eot);
    src: url(../../lib/icomoon/icomoon.eot?#iefix) format('embedded-opentype'), url(../../lib/icomoon/icomoon.woff2) format('woff2'), url(../../lib/icomoon/icomoon.woff) format('woff'), url(../../lib/icomoon/icomoon.ttf) format('truetype'), url(../../lib/icomoon/icomoon.svg#icomoon) format('svg');
    font-weight: 400;
    font-style: normal
}

[class*=" i_"]:before,
[class^=i_]:before {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1
}

.i_comm-digi:before {
    content: "\e902"
}

.i_conversion:before {
    content: "\e904"
}

.i_creation:before {
    content: "\e905"
}

.i_dev:before {
    content: "\e906"
}

.i_ecommerce:before {
    content: "\e907"
}

.i_graphique:before {
    content: "\e909"
}

.i_graphisme:before {
    content: "\e90a"
}

.i_identite:before {
    content: "\e90b"
}

.i_image:before {
    content: "\e90c"
}

.i_logo:before {
    content: "\e90d"
}

.i_marketing:before {
    content: "\e90e"
}

.i_print:before {
    content: "\e912"
}

.i_projet-global:before {
    content: "\e913"
}

.i_refonte:before {
    content: "\e914"
}

.i_rs:before {
    content: "\e916"
}

.i_site:before {
    content: "\e917"
}

.i_vitrine:before {
    content: "\e919"
}

.i_app-pwa:before {
    content: "\e91b"
}

.i_art-digi:before {
    content: "\e91c"
}

body,
html {
    font-size: calc(13px + 2 * (100vw - 320px)/ 1080);
    background-color: #fff;
    color: #061A2E;
    line-height: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Gilroy, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

* {
    scrollbar-color: rgba(0, 0, 0, .1) transparent;
    scrollbar-width: thin
}

::-webkit-scrollbar {
    width: 3px;
    background-color: rgba(0, 0, 0, 0)
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .1)
}

.scrollbar-track {
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s, background .3s;
    position: absolute;
    z-index: 9999;
    background-color: #eee;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.scrollbar-track.show,
.scrollbar-track:hover {
    opacity: 1
}

.landh .scrollbar-track,
.scrollbar-track.show {
    opacity: 1
}

.scrollbar-track-y {
    height: 100%;
    width: 3px;
    top: 0;
    right: 0;
    margin: 0 auto;
    background: rgba(0, 0, 0, .1)
}

.scrollbar-track-y .scrollbar-thumb {
    cursor: pointer;
    pointer-events: auto;
    width: 8px;
    left: -2px;
    border-radius: 5px 0 0 5px
}

.scrollbar-track-y .scrollbar-thumb:before {
    content: '';
    width: 4px;
    height: 100%;
    left: 1px;
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, .15);
    border-radius: 5px 0 0 5px
}

.landh .scrollbar-track-y .scrollbar-thumb:before {
    background: #061A2E !important;
    border-radius: 5px 0 0 5px
}

#ck {
    overflow: hidden;
    background-color: #008aff;
    color: #fff;
    box-shadow: 0 15px 20px rgba(0, 0, 0, .3);
    border-radius: 30px;
    transition: transform .6s, opacity .6s, visibility .6s;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    max-width: calc(99vw - 20px);
    position: fixed;
    bottom: calc(10px + .5vw);
    left: calc(10px + .5vw);
    z-index: 9990;
    width: 400px;
    font-size: 11px;
    line-height: 1.3
}

.cks.fix #ck {
    transform: translateY(0);
    opacity: 1;
    visibility: visible
}

#ck p strong {
    display: block;
    margin-bottom: 10px;
    font-size: 130%;
    line-height: 1
}

#ck a {
    font-weight: 700;
    text-decoration: underline
}

#ck a:hover {
    color: #222
}

#ck i {
    color: #fff;
    font-size: 35px;
    margin-right: 15px;
    top: -8px
}

#ck i:before {
    animation: cookies 1s infinite linear
}

@keyframes cookies {
    0% {
        content: '\f563'
    }

    100% {
        content: '\f564'
    }
}

.ct {
    width: 70vw;
    margin: auto
}

.tc {
    color: #061A2E;
    pointer-events: none;
    font-weight: 700;
    user-select: none;
    -moz-user-select: none;
    width: calc(90px + 25 * (100vw - 320px)/ 1080);
    height: calc(90px + 25 * (100vw - 320px)/ 1080);
    pointer-events: none
}

.tc svg {
    fill: #061A2E;
    animation: rotate 8s infinite linear;
    position: absolute;
    width: 150%;
    height: 150%;
    left: -25%;
    top: -25%
}

.tc i {
    font-size: calc(20px + 10 * (100vw - 320px)/ 1080);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.tc i.is {
    font-size: calc(25px + 10 * (100vw - 320px)/ 1080)
}

@keyframes arrow {
    0% {
        margin-left: -5px
    }

    50% {
        margin-left: 5px
    }

    100% {
        margin-left: -5px
    }
}

@keyframes arrowd {
    0% {
        margin-top: -5px
    }

    50% {
        margin-top: 5px
    }

    100% {
        margin-top: -5px
    }
}

@keyframes rotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}

.btn {
    transition: 0s;
    padding: 0 0 calc(20px + 3 * (100vw - 320px)/ 1080);
    font-size: calc(10px + 1 * (100vw - 320px)/ 1080);
    font-weight: 400;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: calc(2px + 3 * (100vw - 320px)/ 1080)
}

.btn span {
    transition: .2s;
    z-index: 5;
    display: block
}

.btn:active span {
    transform: scale(.95)
}

.btn:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, .05);
    height: 1px;
    left: calc(-1px - 1.5 * (100vw - 320px)/ 1080)
}

.btn.blck-ln:after,
.btn.blck:after {
    background: rgba(0, 0, 0, .1)
}

/* .btn:before {
    transition: .8s;
    z-index: 3;
    content: '';
    position: absolute;
    bottom: -1px;
    width: 40px;
    height: 3px;
    border-radius: 0;
    left: calc(-1px - 1.5 * (100vw - 320px)/ 1080)
} */
/* play store */
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-btn {
    width: 100%;
    max-width: 160px;
    color: #fdfdfd;
    margin: 20px 10px;
    text-align: left;
    border-radius: 8px;
    text-decoration: none;
    font-family: "Lucida Grande", sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    padding: 8px 0;
}

.app-btn.blu {
    background-color: #101010;
    border: 1px solid #fdfdfd;
    transition: background-color 0.25s linear;
}

.app-btn.blu:hover {
    background-color: #454545;
    color: #fdfdfd;
}

.app-btn img {
    width: 20%;
    text-align: center;
    font-size: 50px;
    margin-right: 7px;
}

.app-btn p {
    margin: 0
}

.app-btn .big-txt {
    font-size: 17px;
    text-transform: capitalize;
}



.btn.blck:before {
    background: linear-gradient(to left, #061A2E, #09080b)
}

.btn:hover:before {
    width: 100%;
    border-radius: 50% 0 0 50%
}

.scroll {
    position: absolute;
    bottom: calc(25px + 2%);
    left: calc(15px + 2%);
    height: calc(40px + 15 * (100vw - 320px)/ 1080)
}

.scroll>div {
    width: 3px;
    background-color: #fff;
    height: 100%
}

.scroll>div:after,
.scroll>div:before {
    content: '';
    bottom: -2px;
    position: absolute;
    background: inherit;
    height: 25%;
    width: inherit
}

.scroll>div:before {
    transform: rotate(-40deg);
    transform-origin: bottom left;
    border-bottom-left-radius: 3px
}

.scroll>div:after {
    transform: rotate(40deg);
    transform-origin: bottom right;
    border-bottom-right-radius: 3px
}

#app {
    box-shadow: 0 0 100px rgba(0, 0, 0, .1);
    overflow: hidden
}

html:not(.horiz) #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3
}

html:not(.horiz) #app>.scroll-content {
    width: 100%;
    height: 100%;
    z-index: 5
}

html:not(.horiz) #app main {
    width: 100%;
    z-index: 6000;
    /* background-color: #fff; */
}

html:not(.horiz) #app .app-c {
    overflow: hidden
}

#sc .h1 {
    margin-top: calc(25px + 10 * (100vw - 320px)/ 1080);
    margin-bottom: -10px;
    text-transform: uppercase;
    font-size: calc(12px + 1 * (100vw - 320px)/ 1080);
    letter-spacing: calc(2px + 1 * (100vw - 320px)/ 1080)
}

#sc .h1 h1 {
    font-weight: 300
}

.cirbc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center
}

.cirbc .cirb,
.cirbc .cirbr {
    width: 150vw;
    height: 150vw;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.cirbc .cirbr {
    background-color: #061A2E;
    width: 0;
    height: 0
}

.cirbc svg {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 0 999;
    opacity: 0;
    width: 100px;
    fill: transparent;
    stroke-width: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100
}

.cirbc .ico {
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #fff
}

.cirbc .ico i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0
}

.sp {
    height: 100vh;
    pointer-events: none
}

.sp-3 {
    height: 30vh
}

#e {
    color: #fff;
    text-align: left;
    padding-top: 50vh;
    pointer-events: none
}

#e h2 span {
    display: block
}

.eavl {
    color: #fff;
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    text-align: right
}

.eavl>* {
    flex: 1;
    margin: auto
}

.eavl h2 {
    font-size: calc(25px + 15 * (100vw - 320px)/ 1080);
    font-weight: 200;
    width: 50%;
    left: calc(-80px - 30 * (100vw - 320px)/ 1080)
}

.eavl h2 span {
    display: block
}

.eavl h2 strong {
    font-weight: 800
}

#h {
    pointer-events: none;
    position: absolute;
    width: 100%;
    display: flex;
    pointer-events: none;
    align-items: center;
    justify-content: space-between;
    padding: calc(15px + 2%) calc(15px + 2%) calc(15px + 2%) calc(25px + 2%);
    z-index: 9997
}

#h .h1 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-110%)
}

#h.mixb {
    z-index: 500;
    mix-blend-mode: difference
}

#h.mixb .bn {
    pointer-events: none
}

#h.hcl {
    mix-blend-mode: difference
}

#h>:not(#n) {
    pointer-events: auto;
    z-index: 10
}

#h>.r {
    margin-left: auto;
    display: flex;
    align-items: center
}

#h .lg {
    width: calc(160px + 30 * (100vw - 320px)/ 1080);
    display: block;
    transition: .4s
}

#h .logo {
    width: 100%;
    overflow: hidden;
    transition: width .4s, opacity .2s
}

html:not(.creaOpen) .fix:not(.onav) #h:not(:hover) .logo,
.signIN {
    width: 100%
}

#h .logo svg {
    fill: #fff;
    transition: fill .4s;
    width: calc(160px + 30 * (100vw - 320px)/ 1080)
}

body:not(.onav) #h.blck-1 .logo svg,
body[class*=blck-]:not(.onav) #h .logo svg {
    fill: #061A2E
}

body[class*=whte-]:not(.onav) #h .logo svg {
    fill: #fff !important
}

.bn {
    transition: opacity .2s;
    cursor: pointer;
    width: calc(55px + 7 * (100vw - 320px)/ 1080);
    height: calc(55px + 7 * (100vw - 320px)/ 1080);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.bn>div {
    width: calc(22px + 4 * (100vw - 320px)/ 1080);
    height: 10px
}

.bn>div>span {
    transition: background .4s;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff
}

body:not(.onav) #h.blck-1 .bn>div>span,
body[class*=blck-]:not(.onav) .bn>div>span {
    background-color: #061A2E
}

body[class*=whte-]:not(.onav) .bn>div>span {
    background-color: #fff
}

.bn>div>span:nth-child(1) {
    top: 0;
    transition: background .4s, top .2s .2s, transform .2s
}

html.creaOpen .bn>div>span:nth-child(1) {
    top: 4px;
    transform: rotate(45deg)
}

.bn.closH>div>span:nth-child(1),
.onav .bn>div>span:nth-child(1) {
    top: 4px;
    transform: rotate(45deg);
    transition: background .4s, bottom .2s, transform .2s .2s
}

.onav:not(.fonav) .bn:hover>div>span:nth-child(1) {
    transform: rotate(0);
    transition: background .4s, transform .2s
}

.bn>div>span:nth-child(2) {
    bottom: 0;
    transition: background .4s, bottom .2s .2s, transform .2s
}

html.creaOpen .bn>div>span:nth-child(2) {
    bottom: 4px;
    transform: rotate(-45deg)
}

.bn.closH>div>span:nth-child(2),
.onav .bn>div>span:nth-child(2) {
    bottom: 4px;
    transform: rotate(-45deg);
    transition: background .4s, bottom .2s, transform .2s .2s
}

.onav:not(.fonav) .bn:hover>div>span:nth-child(2) {
    transform: rotate(0);
    transition: background .4s, transform .2s
}

.bn svg {
    mix-blend-mode: normal;
    pointer-events: none;
    transition: all .8s, opacity 0s .8s;
    stroke-linecap: round;
    stroke-dasharray: 0 999;
    fill: transparent;
    stroke-width: 4px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.bn:hover svg,
.onav .bn svg {
    stroke-dasharray: 300 999;
    opacity: 1;
    transition: all .8s, opacity 0s;
    transform: rotate(90deg)
}

#we:not(.r) {
    z-index: 100;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    /* background: linear-gradient(120deg, #061A2E, #09080b); */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(50px + 5%) 0
}

#we .wec {
    width: 70%;
    z-index: 10
}

#we .wec .h1 {
    margin-top: calc(25px + 15 * (100vw - 320px)/ 1080);
    margin-bottom: calc(-5px - 10 * (100vw - 320px)/ 1080);
    text-transform: uppercase;
    font-size: calc(12px + 1 * (100vw - 320px)/ 1080);
    letter-spacing: calc(2px + 1 * (100vw - 320px)/ 1080)
}

#we .wec .h1 h1 {
    font-weight: 300
}

#we .wem {
    font-size: calc(25px + 50 * (100vw - 320px)/ 1080);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    margin-top: calc(15px + 2%);
    margin-bottom: calc(30px + 4%)
}

#we .wem>div {
    overflow: hidden;
    margin-bottom: calc(0px - 15 * (100vw - 320px)/ 1080)
}

#we .wem>div>div {
    display: flex;
    align-items: center
}

#we .wem .wew {
    display: inline-block;
    width: 100%;
    color: transparent;
    height: 100%;
    overflow: hidden
}

#we .wem .wew>div {
    transform: translateY(0);
    position: absolute;
    top: 0
}

#we .wem .wew>div.active {
    transform: translateY(0)
}

#we .tc svg {
    fill: #fff
}

#we .screen {
    pointer-events: none;
    position: absolute;
    right: calc(-25px - 30 * (100vw - 320px)/ 1080);
    width: calc(500px + 300 * (100vw - 320px)/ 1080);
    top: 47%;
    transform: translateY(-50%);
    z-index: 0
}

#we .screen .sc {
    width: 100%
}

#we .screen .kb {
    width: 60%;
    position: absolute;
    bottom: -2%;
    left: 3%
}

#we .screen .ms {
    width: 17%;
    position: absolute;
    bottom: -8%;
    left: 55%
}

#we .sm {
    overflow: hidden;
    padding: 10px;
    z-index: 100;
    width: 65.6%;
    height: 57%;
    background-color: #110f16;
    position: absolute;
    top: 22.7%;
    left: 21%;
    transform: rotateY(6deg) skewY(26.4deg) skewX(-10.5deg);
    border-radius: 3px
}

#we .sm:before {
    z-index: 100;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: ''
}

#we .sm * {
    position: absolute;
    border-radius: 3px
}

#we .smc {
    height: calc(100% - 30px);
    top: 15px;
    width: calc(100% - 30px);
    left: 15px
}

#we .smc .smc_h {
    background-color: #061A2E;
    width: 100%;
    top: 0;
    height: 13%
}

#we .smc .smc_lg1 {
    left: 3.5%;
    height: 8%;
    top: 5%
}

#we .smc .smc_lg>div {
    width: calc(7px + 5 * (100vw - 320px)/ 1080);
    height: calc(10px + 5 * (100vw - 320px)/ 1080);
    border-radius: 50%
}

#we .smc .smc_lg>div:nth-child(2) {
    left: calc(10px + 5 * (100vw - 320px)/ 1080)
}

#we .smc .smc_lg>div:nth-child(3) {
    left: calc(20px + 10 * (100vw - 320px)/ 1080)
}

#we .smc .smc_u {
    height: 1.3%;
    top: 6%;
    right: 5%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

#we .smc .smc_u li {
    position: relative;
    width: 20%;
    height: 100%
}

#we .smc .smc_u div {
    width: 100%;
    height: 100%;
    background-color: #24212d;
    right: 0;
    top: 0
}

#we .smc .smc_h {
    background-color: #061A2E;
    width: 100%;
    top: 0;
    height: 13%;
    display: flex;
    align-items: center
}

#we .smc .smc_s {
    width: 100%;
    top: 15%;
    height: 50%;
    display: flex;
    align-items: center
}

#we .smc .smc_s>div {
    width: 80%;
    height: 30%;
    left: 10%
}

#we .smc .smc_s-sub {
    background-color: #24212d;
    width: 30%;
    top: 0;
    height: 6%;
    display: flex;
    align-items: center
}

#we .smc .smc_s-tit {
    width: 50%;
    top: 30%;
    height: 20%;
    display: flex;
    align-items: center
}

#we .smc .smc_s-tit.t2 {
    width: 40%;
    top: 60%;
    height: 20%;
    display: flex;
    align-items: center
}

#we .smc .smc_a {
    width: 20%;
    left: 0;
    height: 42%;
    background-color: #061A2E;
    top: 65%
}

#we .smc .smc_a-c {
    width: 18%;
    left: 1%;
    height: 40%;
    top: 65%;
    z-index: 5;
    padding: 10px
}

#we .smc .smc_a-c li {
    width: 80%;
    height: 2%;
    background-color: #24212d;
    position: relative;
    margin-top: 10%
}

#we .smc .smc_c4 {
    width: 41%;
    right: 50%;
    height: 30%;
    background-color: #061A2E;
    top: 135%
}

#we .smc .smc_c1 {
    width: 78%;
    height: 42%;
    background-color: #061A2E;
    top: 65%
}

#we .smc .smc_c4 div {
    transform: translate(-50%, -50%) rotate(30deg)
}

#we .smc .smc_c4 div:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-30deg)
}

#we .smc .smc_c2 {
    width: 50%;
    height: 20%;
    left: 5%;
    background-color: #110f16;
    top: 95%
}

#we .smc .smc_c3 {
    width: 40%;
    height: 50%;
    left: 10%;
    top: 100%
}

#we .smc .smc_c3 div {
    position: relative;
    margin-top: 3%;
    width: 100%;
    height: 1%;
    position: relative;
    background-color: #24212d
}

#we .smc .smc_ul {
    display: flex;
    top: 175%;
    width: 100%;
    height: 35%;
    left: 1%
}

#we .smc .smc_ul div {
    position: relative;
    height: 100%;
    width: 33.33%;
    max-width: 33.33%;
    flex-basis: 33.33%
}

#we .smc .smc_ul div>span {
    display: block;
    width: 0;
    height: 100%;
    background-color: #061A2E;
    position: relative
}

#we .smc .smc_ul span>span {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: block;
    border: 2px solid #fff;
    width: calc(30px + 20 * (100vw - 320px)/ 1080);
    height: calc(35px + 20 * (100vw - 320px)/ 1080)
}

#we .smc .smc_f {
    width: 100%;
    height: 1px;
    top: 226%;
    left: 0
}

#we .smc .smc_f>div {
    width: 40%;
    height: 3px;
    background-color: #24212d;
    left: 48%;
    transform: translateX(-50%)
}

#we .smc .smc_f>div:nth-child(2) {
    width: 25%;
    top: calc(7px + 3 * (100vw - 320px)/ 1080)
}

#we .smc .smc_lg2 {
    left: 44%;
    height: 8%;
    top: 218%
}

#we .down {
    height: 70px;
    width: 2px;
    background-color: #fff;
    margin-top: calc(30px + 3%)
}

[data-work] {
    pointer-events: auto;
    cursor: pointer
}

#wr {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 8888;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center
}

#wr .bg {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 100%;
    opacity: 1;
    background: linear-gradient(120deg, #061A2E, #09080b);
    border-radius: 3px
}

#cl {
    color: #061A2E;
    transition: color .8s .3s;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.wcl #cl {
    color: #fff;
    pointer-events: none
}

#cl .clc {
    z-index: 5;
    display: none
}

#cl .tit {
    z-index: 10;
    overflow: hidden;
    font-weight: 800;
    font-size: calc(18px + 30 * (100vw - 320px)/ 1080);
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: calc(10px + 5 * (100vw - 320px)/ 1080)
}

#cl .tit>* {
    display: inline-block
}

#cl .tit .s2 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    transform: translateY(100%)
}

#cl p {
    font-size: calc(13px + 4 * (100vw - 320px)/ 1080)
}

#cl .logo {
    display: none;
    z-index: 5;
    width: calc(100px + 20 * (100vw - 320px)/ 1080);
    position: absolute;
    bottom: calc(15px + 10 * (100vw - 320px)/ 1080);
    left: 50%;
    transform: translateX(-50%)
}

#cl .logo svg {
    transition: fill .8s .2s;
    fill: #061A2E
}

html:not(.ie) #cl .logo svg {
    height: 20px
}

.wcl #cl .logo svg {
    fill: #fff
}

#cl .bg {
    z-index: 1;
    background-color: red;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    left: 0;
    overflow: hidden
}

#cl .bg>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh
}

#cl [data-color] {
    transition: 0s !important;
    width: calc(30px + 5 * (100vw - 320px)/ 1080);
    height: calc(30px + 5 * (100vw - 320px)/ 1080);
    background-color: #061A2E;
    display: inline-block;
    margin: 0 6px;
    border-radius: 50%;
    cursor: pointer
}

#cl [data-color]:before {
    opacity: 0;
    transition: .2s;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #061A2E;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    left: -4px;
    top: -4px;
    content: ''
}

#cl [data-color]:hover:before {
    opacity: 1
}

#ld {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center
}

#ld .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

#ld .logo {
    width: calc(180px + 100 * (100vw - 320px)/ 1080);
    z-index: 5;
    overflow: hidden
}

#ld .logo svg {
    fill: #fff
}

#n {
    color: #fff;
    display: none;
    position: absolute;
    height: 100vh;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 5
}

.onav #n {
    pointer-events: auto
}

#n>* {
    width: 50%;
    height: 100%
}

#n>*>* {
    z-index: 5
}

#n .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    z-index: 0
}

#n .nr .bg {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0
}

#n .nr .bg {
    background: linear-gradient(to top, #061A2E, #09080b)
}

#n .nl .bg {
    background: linear-gradient(to top, #061A2E, #09080b)
}

#n .nl {
    display: flex;
    align-items: center;
    justify-content: center
}

#n .nl nav li {
    overflow: hidden;
    margin-top: calc(10px + 5 * (100vw - 320px)/ 1080)
}

#n .nl nav li:nth-child(4) {
    display: none
}

#n .nl nav a {
    transition: color .3s;
    display: inline-block;
    transform: translateY(0)
}

#n .nl nav a:hover {
    color: #061A2E
}

#n .ms {
    transform: translateY(50px);
    opacity: 0;
    flex-wrap: wrap;
    padding: 0 calc(15px + 1%);
    display: flex;
    font-weight: 400;
    font-size: calc(11px + 2 * (100vw - 320px)/ 1080);
    position: absolute;
    bottom: calc(10px + 10 * (100vw - 320px)/ 1080);
    left: 0;
    text-align: center;
    justify-content: center;
    width: 100%
}

#n .ms li {
    margin-bottom: 10px
}

#n .ms li:not(:last-child):after {
    content: '';
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, .5);
    display: inline-block;
    margin: 0 10px;
    border-radius: 50%;
    top: -2px
}

#n .ms a:hover {
    color: #061A2E
}

#n .nr {
    display: flex;
    align-items: center
}

#n .nr .art li {
    margin-top: calc(25px + 5%)
}

#n .nr .art a {
    transition: color .4s;
    line-height: 1.2;
    display: inline-block;
    font-size: calc(16px + 8 * (100vw - 320px)/ 1080);
    font-weight: 800
}

#n .nr .art a span {
    display: inline-block
}

#n .nr .art time {
    color: #888;
    opacity: .6;
    font-size: calc(12px + 2 * (100vw - 320px)/ 1080);
    display: block;
    margin-bottom: calc(15px + 1%)
}

#n .nr .tc svg {
    fill: #fff
}

#n .nr .rs {
    display: flex;
    font-size: calc(18px + 5 * (100vw - 320px)/ 1080);
    margin-top: calc(30px + 5%)
}

#n .nr .rs li+li {
    margin-left: 20px
}

#sv {
    min-height: 100vh
}

#sv .rg {
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    padding-left: 65%
}

#sv .cir {
    width: 76vh;
    height: 76vh;
    border-radius: 50%;
    top: 12vh
}

#sv .circ {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #cdcccf
}

#sv .circm {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%
}

#sv .rnd {
    width: 1px;
    height: 1px;
    position: absolute
}

#sv .rnd>div {
    width: calc(120px + 50 * (100vw - 320px)/ 1080);
    height: calc(120px + 50 * (100vw - 320px)/ 1080);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#sv .rnd>div>div {
    transform-origin: center center;
    box-shadow: 0 1px 3px 1px rgba(99, 0, 243, .2);
    width: 5%;
    height: 5%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#sv .rnd i {
    font-size: calc(50px + 30 * (100vw - 320px)/ 1080);
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

#sv .crc {
    position: absolute
}

#sv .crc>div {
    position: absolute;
    width: 100%;
    height: 100%
}

#sv .crc:nth-child(1) {
    height: 1px;
    width: 38vh;
    right: 0
}

#sv .crc:nth-child(1)>div {
    right: 0
}

#sv .crc:nth-child(1) .rnd {
    left: 0
}

#sv .crc:nth-child(2) {
    height: 38vh;
    width: 1px;
    bottom: 0
}

#sv .crc:nth-child(2)>div {
    bottom: 0
}

#sv .crc:nth-child(2) .rnd {
    top: 0
}

#sv .crc:nth-child(3) {
    height: 1px;
    width: 38vh;
    left: 0
}

#sv .crc:nth-child(3)>div {
    left: 0
}

#sv .crc:nth-child(3) .rnd {
    right: 0
}

#sv .crc:nth-child(4) {
    height: 38vh;
    width: 1px;
    top: 0
}

#sv .crc:nth-child(4)>div {
    top: 0
}

#sv .crc:nth-child(4) .rnd {
    bottom: 0
}

#sv .lgt {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    padding-right: 50%;
    padding-left: 15%
}

#sv .lgt h3 {
    font-weight: 200;
    font-size: calc(18px + 10 * (100vw - 320px)/ 1080);
    line-height: 1.3
}

#sv .lgt h3 strong {
    font-weight: 800;
    display: block;
    font-size: 130%
}

#sv .lgt .tx {
    font-size: calc(13px + 2 * (100vw - 320px)/ 1080);
    width: 80%;
    line-height: 1.8;
    margin: calc(20px + 5%) 0;
    color: #666;
    letter-spacing: .25px
}

.sp-5 {
    position: absolute;
    top: 0
}

.lgtxc {
    text-align: left;
    height: 80vh;
    min-height: 600px;
    max-height: 950px;
    display: flex;
    align-items: center
}

.lgtxc .ct>div {
    width: calc(50% - 100px);
    left: calc(50% + 100px)
}

.lgtxc h3 {
    font-size: 18px;
    font-weight: 200;
}

.lgtxc h3>* {
    display: block
}

.lgtxc h3>strong {
    font-weight: 800
}

.lgtxc .txt {
    font-size: calc(12px + 2 * (100vw - 320px)/ 1080);
    width: 100%;
    font-weight: 200;
    line-height: 1.8;
    margin: calc(25px + 2%) auto 0;
    color: #fff
}

.lgtxc .txt strong {
    font-weight: 800
}

#co {
    padding: calc(30px + 8%) 0;
    text-align: center;
    color: #fff;
    z-index: 5000
}

#co .ct {
    z-index: 1
}

#co h2 {
    font-weight: 800;
    margin-bottom: calc(20px + 3%);
    line-height: 1.3
}

#co h2 small {
    font-size: calc(20px + 10 * (100vw - 320px)/ 1080)
}

#co h2 span {
    display: inline-block
}

#co h2 strong {
    font-weight: 200;
    overflow: hidden;
    font-size: calc(30px + 30 * (100vw - 320px)/ 1080);
    display: block;
    margin-bottom: 5px
}

#co fieldset {
    background: #fff;
    width: calc(300px + 100 * (100vw - 320px)/ 1080);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 50px
}

#co fieldset+fieldset {
    margin-top: 27px
}

#co fieldset.txt {
    overflow: hidden;
    width: calc(400px + 100 * (100vw - 320px)/ 1080)
}

#co fieldset>label {
    padding-top: 18px
}

#co fieldset.act>label {
    color: #fff;
    top: -15px;
    padding-top: 0;
    font-weight: 800;
    font-size: 12px
}

#co fieldset.act>textarea {
    color: #000;
    max-height: 250px;
    overflow: visible
}

#co fieldset.act>input {
    color: #000
}

#co fieldset+.btfb button {
    top: 10px !important
}

#co span.svg {
    position: absolute;
    width: 100%;
    left: 0;
    pointer-events: none
}

#co span.svg svg {
    width: 200px;
    height: 200px;
    max-width: 200px;
    margin: auto
}

@keyframes fireworkone {
    0% {
        opacity: 0
    }

    25% {
        opacity: .15
    }

    50% {
        opacity: .3
    }

    75% {
        opacity: .15
    }

    100% {
        opacity: 0
    }
}

@keyframes fireworktwo {
    0% {
        opacity: 0
    }

    25% {
        opacity: .45
    }

    50% {
        opacity: .8
    }

    75% {
        opacity: .45
    }

    100% {
        opacity: 0
    }
}

@keyframes fireworthree {
    0% {
        opacity: 0
    }

    25% {
        opacity: .55
    }

    50% {
        opacity: 1
    }

    75% {
        opacity: .55
    }

    100% {
        opacity: 0
    }
}

@keyframes elastic-pulse {
    0% {
        transform: scale(.2)
    }

    100% {
        transform: scale(1)
    }
}

#cof {
    padding: 0 calc(20px + 200 * (100vw - 320px)/ 1080);
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.whte-99 #cof {
    pointer-events: auto
}

#cof form {
    width: 100%;
    padding: calc(25px + 10 * (100vw - 320px)/ 1080) 0;
    text-align: center
}

#cof .times {
    top: -100px;
    opacity: 0;
    margin-bottom: calc(15px + 1%)
}

#cof .times:hover {
    transform: rotate(-90deg)
}

#cof .times:active {
    transform: scale(.8) rotate(-90deg)
}

#cof .btfb {
    display: flex;
    justify-content: center;
    margin-top: calc(15px + 1%);
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(100% + 15px))
}

#cof .tit {
    font-weight: 800;
    font-size: calc(18px + 18 * (100vw - 320px)/ 1080);
    overflow: hidden;
    line-height: 1.2
}

#cof .tit>div:not(.t1) {
    position: absolute;
    transform: translateY(100%);
    top: 0;
    width: 100%
}

#cof .fc {
    margin-top: calc(20px + 1%)
}

#cof .fm1 {
    z-index: 1
}

#cof .fm1>div {
    transition: height 1s !important
}

#cof .fc>div:not(.fm1) {
    z-index: 1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

#cof .fm2 {
    z-index: 0
}

#cof .slc {
    margin: 0 -5px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

#cof .slc li {
    padding: 5px
}

#cof .slc3 li {
    width: 33.33%;
    max-width: 33.33%;
    flex-basis: 33.33%
}

#cof .slc li>div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, .05);
    box-shadow: 0 15px 50px transparent;
    transition: all .4s, transform .2s;
    padding: calc(25px + 10 * (100vw - 320px)/ 1080) calc(20px + 10 * (100vw - 320px)/ 1080);
    cursor: pointer;
    border-radius: 30px
}

html:not(.mob) #cof .slc li>div:hover {
    background-color: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, .2)
}

#cof .slc li>div:active {
    transform: scale(.9)
}

#cof .slc i {
    opacity: .7;
    transition: transform .4s;
    display: inline-block;
    font-size: calc(45px + 10 * (100vw - 320px)/ 1080)
}

#cof .slc li>div:hover i {
    transform: scale(1.2) rotate(-5deg)
}

#cof .slc .t {
    font-size: calc(16px + 3 * (100vw - 320px)/ 1080);
    font-weight: 700
}

#cof .slc i+.t {
    margin-top: calc(15px + 5 * (100vw - 320px)/ 1080)
}

[data-range] {
    width: 30%;
    margin: calc(15px + .5%) auto calc(35px + 1%);
    height: 3px
}

[data-range]:before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: calc(100% + 20px);
    height: 100%;
    z-index: 0;
    background: rgba(0, 0, 0, .05);
    border-radius: 25px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset
}

[data-range] .ui-slider-range {
    opacity: .5;
    cursor: pointer;
    height: 100%;
    background-color: #061A2E;
    border-radius: 25px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05) inset
}

[data-range] .ui-slider-handle {
    cursor: grab;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

[data-range] .value {
    background-color: #fff;
    transition: .1s;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center bottom;
    font-size: 10px;
    padding-top: 15px;
    font-weight: 700;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 3px 10px rgba(0, 0, 0, .05)
}

[data-range] .both-max:before {
    opacity: 0;
    transition: .2s;
    width: 100%;
    text-align: center;
    content: 'ou +';
    position: absolute;
    bottom: 9px;
    left: 0;
    font-size: 9px
}

[data-range].maxi .both-max:before {
    opacity: 1
}

[data-range] .ui-state-active {
    cursor: grabbing;
    z-index: 9999;
    bottom: 100%
}

[data-range] .ui-state-active .value {
    transform: translate(-50%, -25%) scale(1.5)
}

#et {
    padding: calc(30px + 10%) 0;
    overflow: hidden;
    z-index: 4000
}

#et .swp {
    margin: 0 calc(-3px - 30 * (100vw - 320px)/ 1080)
}

#et .tc {
    left: -10px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background-color: #fff;
    box-sizing: content-box;
    border: 5px solid #fff
}

#et .swiper-wrapper {
    cursor: grab
}

#et .cont {
    width: 100%;
    height: 100%;
    background-color: #fff
}

#et .bg {
    overflow: hidden
}

#et.move .bg {
    transform: scale(.9)
}

#et .bg:after {
    opacity: .5;
    content: '';
    background-color: #061A2E
}

#et.move .bg:after {
    opacity: 0
}

#et .bg,
#et .bg:after,
#et .bg>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#et .bg>div {
    height: 150%
}

#et.move .bg>div {
    transform: scale(1.1)
}

#et .txt {
    user-select: none;
    -moz-user-select: none;
    transition: opacity .8s !important;
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center
}

#et.move .txt {
    opacity: .2
}

#et .txt ul {
    margin-top: calc(10px + 5 * (100vw - 320px)/ 1080);
    color: #fff;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: calc(10px + 4 * (100vw - 320px)/ 1080);
    font-weight: 400
}

#et .txt ul li:not(:last-child):after {
    vertical-align: middle;
    margin: 0 7px;
    top: -1px;
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: #fff;
    border-radius: 50%
}

#f {
    overflow: hidden;
    font-size: calc(12px + 2 * (100vw - 320px)/ 1080);
    color: #5c5c5c;
    line-height: 1.5;
    padding: calc(30px + 3%) 0 calc(25px + 3%);
    font-weight: 700;
    background: linear-gradient(120deg, #061A2E, #09080b)
}

#f .ct {
    display: flex
}

#f .l {
    padding-right: calc(25px + 7%)
}

#f .r {
    margin-left: auto
}

#f .logo {
    fill: #fff;
    width: 200px;
    margin-bottom: calc(20px + 1%)
}

#f h4 {
    margin-top: 3px;
    font-size: calc(13px + 3 * (100vw - 320px)/ 1080);
    margin-bottom: calc(20px + 1%)
}

#f .rs {
    margin-bottom: calc(20px + 1%);
    display: flex;
    justify-content: space-between;
    font-size: calc(18px + 2 * (100vw - 320px)/ 1080)
}

#f .rs li+li {
    margin-left: calc(10px + 15 * (100vw - 320px)/ 1080)
}

#f .rs i {
    font-weight: 300
}

#f .r {
    text-align: right
}

#f .r a:hover {
    color: #fff
}

fieldset {
    text-align: left;
    border: 0;
    background: rgba(0, 0, 0, .4);
    border-radius: 25px;
    height: 45px;
    font-size: 14px
}

fieldset ul {
    background: #ff4e4e;
    width: 35px;
    height: 35px;
    position: absolute;
    right: 5px;
    top: 5px;
    border-radius: 50%;
    padding: 0
}

fieldset ul:before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f00d';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

fieldset ul li {
    display: none
}

fieldset+fieldset {
    margin-top: 13px
}

fieldset>* {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 0;
    padding: 16px 25px 16px 25px;
    resize: none
}

fieldset>label {
    transition: .2s;
    color: #6d6681
}

fieldset.act>label {
    height: 15px;
    padding-top: 0;
    font-size: 10px;
    top: -4px
}

fieldset.txt {
    height: auto;
    min-height: 45px
}

fieldset textarea {
    position: relative;
    overflow: hidden
}

.tp {
    overflow: hidden;
    text-align: center;
    padding-top: calc(80px + 4%);
    background: linear-gradient(120deg, #061A2E, #09080b);
    color: #fff
}

.tp .ct {
    z-index: 5;
    padding: calc(50px + 2%) 0
}

.tp .sub {
    margin-bottom: calc(15px + 5 * (100vw - 320px)/ 1080);
    font-size: calc(11px + 1 * (100vw - 320px)/ 1080);
    text-transform: uppercase;
    letter-spacing: calc(5px + 6 * (100vw - 320px)/ 1080)
}

.tp .h1 {
    font-weight: 800;
    font-size: calc(20px + 20 * (100vw - 320px)/ 1080);
    margin-bottom: calc(5px + 10 * (100vw - 320px)/ 1080)
}

.tp .bg {
    opacity: .08;
    filter: blur(5px) grayscale(1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

#err {
    height: 100vh;
    color: #fff;
    display: flex;
    align-items: center
}

#err .error-code {
    font-weight: 800;
    font-size: calc(18px + 8 * (100vw - 320px)/ 1080);
    margin: calc(25px + 2%) 0 calc(10px + .5%)
}

#err p {
    line-height: 1.3;
    font-size: calc(13px + 3 * (100vw - 320px)/ 1080);
    margin-bottom: calc(25px + 2%)
}

.def h2 {
    font-size: calc(17px + 7 * (100vw - 320px)/ 1080)
}

.def h3 {
    font-size: calc(15px + 5 * (100vw - 320px)/ 1080);
    font-weight: 400
}

.def h4 {
    font-size: calc(14px + 5 * (100vw - 320px)/ 1080);
    font-weight: 800
}

.def *+h2,
.def *+h3 {
    margin-top: calc(30px + 5 * (100vw - 320px)/ 1080)
}

.def *+h4 {
    margin-top: calc(25px + 5 * (100vw - 320px)/ 1080)
}

.def *+.p {
    margin-top: calc(20px + 5 * (100vw - 320px)/ 1080)
}

.def .p {
    font-weight: 400;
    font-size: calc(13px + 1 * (100vw - 320px)/ 1080);
    line-height: 1.6;
    color: #3f3b48
}

.def .p strong {
    display: inline
}

.def .p>*+* {
    margin-top: calc(15px + 5 * (100vw - 320px)/ 1080)
}

.def .p ul li {
    padding-left: 15px
}

.def .p ul li+li {
    margin-top: 10px
}

.def .p ul li:before {
    content: '•';
    position: absolute;
    left: 0
}

.hspan span {
    display: block;
    white-space: nowrap
}

.hspan>span {
    line-height: 1.2;
    overflow: hidden;
    margin-bottom: calc(0px - 5 * (100vw - 320px)/ 1080)
}


.desk_view {
    display: block;
}

.mob_view {
    display: none;
}

.mob_view1 {
    display: none;
    visibility: hidden;
}

.modal-backdrop {
    background-color: none !important;
    display: none;
}

.modal-backdrop.show {
    opacity: 0;
    display: none;
}

/* header start*/
#h,
.she {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 70px;
    display: flex;
    pointer-events: none;
    align-items: center;
    justify-content: space-between;
    padding: calc(15px + 0px) calc(15px + 0px) calc(15px + 0px) calc(25px + 0px);
    z-index: 999;
    /* background: rgb(255 255 255 / 51%); */
    background-color: #fff;
}

#h>*:not(#n) {
    pointer-events: auto;
    z-index: 10;
}

.l,
.r {
    display: flex;
    align-items: center;
}

#h .lg {
    width: calc(160px + 30 * (100vw - 320px) / 1080);
    display: block;
    transition: 0.4s;
}

#h .logo {
    width: 100%;
    overflow: hidden;
    transition: width 0.4s, opacity 0.2s;
    margin-left: 20px;
}

.logo img {
    width: 100%;
}

/* -----header button start----- */
.contact-button2 {
    background: #fff;
    color: #1A73E8;
    border: 2px solid #1A73E8;
    border-radius: 16px;
    padding: 12px 22px;
    font-size: 16px;
    box-shadow: 3px 3px 25px rgb(0 0 0 / 20%);
}

.signup {
    margin-right: 20px !important;
    padding: 12px 32px !important;
    box-shadow: none !important;
}

.r button.btn.btn-primary {
    background: #1A73E8;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    padding: 8px;
    width: 142px;
    font-size: 18px;
    font-weight: bold;
    margin-right: 36px;
    color: #fff;
    text-transform: capitalize;
    letter-spacing: 0px;
}

/* -----header button end----- */
/* header end*/

/* banner start */
.btn.btn-primary {
    background: #1A73E8;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.btn-primary {
    border-radius: 8px;
}

#we:not(.r) {
    z-index: 100;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-image: url(../img/icons/bannerBg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    /* background: linear-gradient(120deg, #061A2E, #09080b); */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(50px + 5%) 0;
}

#we .wec {
    width: 50%;
    z-index: 10;
}

#we .wem {
    font-size: calc(25px + 50 * (100vw - 320px) / 1080);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    margin-top: calc(15px + 2%);
    margin-bottom: calc(30px + 4%);
}

#we .wem>div {
    overflow: hidden;
    margin-bottom: calc(0px - 15 * (100vw - 320px) / 1080);
}

#we .wem>div>div {
    display: inline-flex;
    align-items: center;
}

.hd-clr {
    color: #061A2E;
}

.quotes {
    /* display: none; */
    text-transform: uppercase;
}

.services {
    font-weight: normal;
    font-size: 28px;
    margin-top: 20px;
    letter-spacing: 0.5px;
    color: #061A2E;
}

.bt .btn-primary {
    font-size: 22px;
    line-height: 48px;
    width: 240px;
    padding: 8px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-weight: 900;
}

.bt .login-btn {
    width: 150px;
}

.demo-image {
    position: relative;
}

.demo-banner-img {
    border-radius: 50%;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
}

.contact-us-img-back1 {
    position: relative;
    left: -14%;
    width: 200px;
    height: 200px;
    /* background-color: #fff; */
    border-radius: 50%;
}

.contact-us-callicon {
    position: absolute;
    width: 104px;
    height: 104px;
    background: #1A73E8;
    border-radius: 50%;
    margin: 48px;
    z-index: 1;
}

.contact-us-callicon img {
    position: absolute;
    padding: 20px;
}

.play-icon img {
    width: 100%;
    border-radius: 50%;
}

.circle1 {
    border-radius: 50%;
    background-color: #1A73E8;
    width: 200px;
    height: 200px;
    position: absolute;
    opacity: 0;
    animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
}

@keyframes scaleIn {
    from {
        transform: scale(.5, .5);
        opacity: .5;
    }

    to {
        transform: scale(1.1, 1.1);
        opacity: 0;
    }
}

#exampleModal2 video {
    width: 100%;
}

/* banner end */

/* offering section start */
.offering {
    display: flex;
    overflow: hidden;
    height: 100%;
    color: #061A2E;
    display: flex;
    z-index: 999;
    background: #fff;
    align-items: center;
    justify-content: center;
    padding-left: calc(50px + 5%);
}

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

.header-group {
    display: flex;
    /* margin-left: 20px; */
}

.header-group img {
    margin: 0px;
}

.header-group h3 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    display: flex;
    align-items: center;
    color: #061A2E;
    text-align: center;
    margin: 40px 32px 40px -32px;
}

strong {
    font-weight: 700;
}

.header-group h3 strong {
    display: block;
    margin: 0 auto;
}

.qr-text h3 {
    font-size: 18px;
    padding: 10px;
    margin-top: 10px;
    color: #1A73E8;

}

.offr-content .tx {
    font-size: calc(13px + 2 * (100vw - 320px) / 1080);
    width: 100%;
    line-height: 1.8;
    /* margin: 0 auto; */
    color: #666;
    letter-spacing: 0.25px;
}

.load-p,
.load1-p,
.load-p2,
.about-p,
.feedback-text {
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 40px;
    margin-right: 30px;
    color: #061A2E;
    text-align: left;
}

.load-Sh {
    font-size: 18px;
}

.offr-demo {
    width: 120%;
    padding-right: 20px;
}

.offr-demo video {
    width: 100%;
    padding: 4px;
    background-color: #1072EB;
    border-radius: 16px;
}

/* offering section end */

/* testimonial start */
section {
    margin-bottom: 90px;
}

.removeBottomspace {
    margin-bottom: 0px;
    background-image: url('../img/cta_background.png');
    background-repeat: no-repeat;

}

.testimonials1 {
    z-index: 999;
}

.testimonials1 .container {
    max-width: 100%;
    padding: 0;
}

.test_card1 {
    background: #F7F7F7;
    display: flex;
}

.card-left {
    /* background-color: #1072EB; */
    /* color: #fff; */
    padding: 20px 60px 20px 100px;
    width: 70%;
}

.test-profile {
    line-height: 18px;
    margin-bottom: 20px;
}

.test-profile h3 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    /* line-height: 33px; */
}

.num_project,
.growth {
    margin-bottom: -12px;
}

.num_project h3,
.growth h3 {
    font-family: Poppins;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 16px;
    color: #1A73E8;
}

.individual {
    margin-bottom: -10px;
}

.individual h3 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 18px;
    display: flex;
    align-items: center;
    color: #1A73E8;
}

.test-profile p,
.num_project p,
.growth p,
.individual p {
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 26px;
    color: #061A2E;
}

.test_feedback {
    font-size: 14px;
    line-height: 22px;
}

.applyNowTstBtn {
    text-transform: capitalize;
    letter-spacing: 1px;
    font-weight: 800;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 16px;
}

.card-right {
    width: 33%;
}

.test_image {
    position: relative;
}

.card-right img {
    width: 100%;
    height: auto;
}

.quotationImg {
    width: 32px;
    top: -2px
}

/* testimonial end */

/* circular roation section start */
.offering-sh {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 36px;
    color: #1A73E8;
}

/* circular roation section end */

/* do you want section start */
.ct .header-group h3 {
    color: #ffff;
}

.load1-p {
    color: #fff;
}


/* .svg_circular_boundary {
    border: 3px solid #1072EB;
    border-radius: 100px;
} */
.circle_img img {
    width: 120px;
    height: 120px;
    padding: 30px;
    /* margin-top: 24px; */
}

.leadNurt img {
    width: 120px;
    height: 120px;
    padding: 30px;
    /* margin-top: 24px; */
    padding: 30px;
}

/* do you want section end */

/* cta section start */
.cta_section {
    display: flex;
    justify-content: space-between;
    /* background: #1b73e8; */
    color: #fff;
    padding: 20px 20px 0px 20px;
}

.ctaImg {
    margin-top: -114px;
    width: 330px;
    margin-left: -70px;
}

.ctaContent {
    /* padding-left: 100px;
    margin-top: 4px; */
    margin: 0 auto;
}

.ctaHeader {
    margin-top: -20px;
}

.ctaHeader1 {
    margin: -30px 0px;
    margin-left: -40px;
}

.cta_subhead1 {
    margin-left: -30px;
    margin-top: -24px;
    color: #fff;
}

.playStoreBtn {
    margin: 20px 0px 20px -27px;
}

.ctaButton {
    margin: 30px -30px !important;
}

.ctaButton1 {
    color: #fff;
    margin: 10px 0px 24px -80px;
    display: block;
    font-weight: bold;
    border-radius: 8px;
    background: #1b73e8;
    padding: 20px 10px;
    font-size: 14px;
}

.ctaButton2 {
    color: #fff;
    display: block;
    font-weight: bold;
    border-radius: 8px;
    background: #1b73e8;
    padding: 16px;
    font-size: 14px;
}

.InstallApp {
    margin-left: -82px;
}

.cta_section strong.cta-mh,
.telegramSection strong.cta-mh {
    color: #fff !important;
}

.cta_subhead {
    margin-left: 18px;
    margin-bottom: 20px;
    color: #fff;
}

.cta_section button {
    color: #1b73e8;
    padding: 20px;
    margin-top: 78px;
    display: block;
    margin: 78px auto;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    background: #fff;
}

/* cta section end */

/* squad section start */
.squad {
    /* background-image: url(../img/Squad/teamBG.svg); */
    background-size: cover;
    background-repeat: no-repeat;
}

.gallery_card .card {
    border: none;
    background: transparent;
}

.card_image {
    position: relative;
}

.setIcon {
    position: relative;
    width: 150px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.card .gallery_card_img {
    filter: grayscale(100%);
}

.card:hover .gallery_card_img {
    filter: grayscale(0%);
}

.gallery_card img {
    width: 100%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    filter: grayscale(100%);
}

img.gallery_card_logo {
    width: 22%;
    padding: 6px;
    position: absolute;
    bottom: 30px;
    background: #fff;
    right: 6%;
    left: calc(100% - 30%);
    border-radius: 26px;
    border: 1px solid #E2EBF0;
    box-sizing: border-box;
    box-shadow: inset 2px 2px 2px rgb(0 0 0 / 10%);
    filter: grayscale(0%);
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem 1rem;
}

.gallery_card h3 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #1A73E8;
}

.card-text:last-child {
    margin-bottom: 0;
}

.gallery_card p {
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #061A2E;
    opacity: 0.64;
}

.row2 {
    justify-content: center;
}


/* squad section end */

/* owl carousel section start */
.owl-carousel .owl-item img {
    height: 98px;
}

.item {
    transition: 6s ease all;
    margin: 0px;
    transform: scale(0.8);
}

.test-box {
    width: 256px;
    height: 100px;
    /* whiteColor */
    background: #FFFFFF;
    /* infoColor */
    border: 1px solid #1A73E8;
    box-sizing: border-box;
    border-radius: 8px;
}

.lntImg img {
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 21px;
}

.d-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background: #1A73E8;
    border-radius: 8px;
    overflow: hidden;
}

.owl-item.active .test-box .d-overlay {
    opacity: 1;
}

.owl-item:hover .test-box .d-overlay {
    opacity: 0;
}

/* .owl-item.active.lastactiveitem .test-box .d-overlay {
    opacity: 0;
} */
.p-comp {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    color: #fff;
    padding-top: 24px;
    padding-left: 140px;
}

.devProject {
    font-weight: 600 !important;
    font-size: 18px !important;
    color: #fff !important;
    right: 8px;
    top: 16px;
}

.o-icon {
    width: 100%;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.d-img {
    position: absolute;
    /* top: -52px; */
    left: 0px;
    bottom: -50px;
    /* width: 0; */
    /* height: 0; */
    border-bottom: 104px solid #fff;
    border-right: 106px solid transparent;
    z-index: 999;
}

.owl-carousel .owl-item img.proj-logo {
    width: auto;
    height: 70px;
    z-index: 999;
    position: absolute;
    /* left: -10px; */
    padding: 10px 4px;
    bottom: -50px;
}

.no-comp {
    position: absolute;
    top: -50px;
    left: 3px;
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 60px solid #061A2E;
}

.no-comp h6 {
    margin-top: -52px;
    margin-left: -20px;
    font-family: Poppins;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 27px;
}

/* owl carousel section end */

/* telegram cta section start */
.telegramSection {
    background: #061A2E;
    display: flex;
    justify-content: space-between;
    color: #fff;
    padding: 20px;
}

.telegramSection {
    background: #061A2E;
    display: flex;
    justify-content: space-between;
    color: #fff;
    padding: 20px;
}

.telegramSection .header-group {
    margin-left: 20px;
}

.telegramSection strong.cta-mh {
    color: #fff !important;
}

.telegramSection button {
    /* color: #fff;
    padding: 0px 15px 0px 0px!important;
    display: block;
    margin: 78px auto;
    font-size: 18px;
    font-weight: bold;
    line-height: 56px;
    border-radius: 15px;
    border-bottom-left-radius: 60px;
    border-top-left-radius: 60px;
    background-image: linear-gradient(to right, #1184cd , #2ab2ebcc); */
    color: #1b73e8;
    padding: 16px;
    margin-top: 78px;
    display: block;
    margin: 78px auto;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    background: #fff;
}

/* telegram cta section end */

/* contact us section start */
.contact-us {
    padding: 40px;
    background: linear-gradient(rgba(6, 26, 46, 0.5), rgba(6, 26, 46, 0.5)), url("../img/footerBg.svg") center center no-repeat;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.footer-group {
    display: flex;
    margin-left: 20px;
}

.footer-group img {
    margin: 0px;
}

.contact-us h3 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    margin: 40px 32px 40px -32px;
}

.contact-text h1 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 800;
    font-size: 42px;
    line-height: 108px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    margin-left: 20px;
}

.contact-button {
    margin-bottom: 30px;
    display: flex;
    margin-left: 20px;
}

.contact-button1 {
    background: #1A73E8;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 16px;
    box-shadow: 3px 3px 25px rgb(0 0 0 / 20%);
    margin-right: 32px;
}

.contact-button2 {
    background: #fff;
    color: #1A73E8;
    border: 2px solid #1A73E8;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 16px;
    box-shadow: 3px 3px 25px rgb(0 0 0 / 20%);
}

.contact-us-img-back {
    position: relative;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border-radius: 50%;
}

.contact-us-callicon {
    position: absolute;
    width: 104px;
    height: 104px;
    background: #1A73E8;
    border-radius: 50%;
    margin: 48px;
    z-index: 1;
}

.contact-us-callicon img {
    position: absolute;
    padding: 20px;
}

.circle1 {
    border-radius: 50%;
    background-color: #1A73E8;
    width: 200px;
    height: 200px;
    position: absolute;
    opacity: 0;
    animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
}

/* contact us section end */

/* footer start */
footer {
    padding: 40px;
    background-image: url("../img/footerBg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: -16px auto;
}

footer .magnet-logo img {
    width: 200px;
}

footer .social-icons {
    margin: 20px 10px;
}

footer .social-icons img {
    margin: 4px;
    filter: grayscale(100%);
}

footer .social-icons img:hover {
    filter: grayscale(0%);
}

.footer-nav,
.office-address {
    margin-left: 10px;
    margin-bottom: 20px;
}

.footer-nav h5,
.office-address h5 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #1072EB;
}

.footer-nav p,
.office-address p {
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #272838;
    margin-bottom: 0px;
}

.registered-office {
    margin-top: 30px;
}

/* footer end */

/* disclaimer start */
.disclaimer {
    background: #1A73E8;
    padding: 16px;
}

.disclaimer p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    margin-bottom: 0;
    text-align: center;
    padding: 3px;
    letter-spacing: 0.4px;
}

/* disclaimer end */

/* modal code start */
.modal {
    background: rgba(0, 0, 0, 0.5);
}

.letsTalk {
    text-align: center;
    border-radius: 9px;
    padding: 0px 10px;
    font-size: 24px;
    align-items: center;
    color: #1A73E8;
}

h5#exampleModalLabel {
    letter-spacing: 0.5px;
    font-weight: 500;
}

.modal.show .modal-dialog {
    transform: none;
    top: 100px;
}

/* .modal-dialog.popup {
    top: 50px!important;
} */
.modal.show .modal-dialog.modal-xl {
    top: 60px;
    bottom: 10px;
}

.carousel-item img {
    height: 440px;
}

#exampleModal1 .btn-close,
#exampleModal2 .btn-close {
    float: right;
    width: 1em;
    height: 1em;
    opacity: 1.5;
}

#exampleModal1 .modal-header,
#exampleModal2 .modal-header {
    padding: 1rem 1rem;
    padding-bottom: 0;
    border-bottom: none;
}

#exampleModal1 .modal-body,
#exampleModal2 .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 0.6rem;
}

#exampleModal2 .modal-body {
    background-color: #fff;
    text-align: center;
}

#exampleModal2 .modal-body iframe {
    width: 100%;
}

div#exampleModal1 .modal-content,
div#exampleModal2 .modal-content {
    border: none;
    background-color:#fff;
}

#exampleModal .form-control,
.form-select,
#cta_Modal .form-control {
    border-bottom: 1px solid #061A2E57 !important;
    border: none;
    border-radius: 0 !important;
    background: transparent;
}

#exampleModal .mb-4.phone_section,
#cta_Modal .mb-4.phone_section {
    display: flex;
}

#exampleModal .form-select,
#cta_Modal .form-select {
    width: 140%;
}

#exampleModal form,
#cta_Modal form {
    margin: 2rem !important;
}

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

#exampleModal .modal-header,
#cta_Modal .modal-header {
    border-bottom: 0px;
    background-image: url('../img/testimonials/hoverBg.webp');

}

#exampleModal .modal-body,
#cta_Modal .modal-body {
    background-image: url(../img/testimonials/hoverBg.webp);
}

/* modal code end */

/*privacy policy page code start */
.terms,
.policy,
.gallery {
    margin-top: 100px;
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 27px;
    color: #061A2E;
}

ol {
    width: 100%;
    list-style-type: decimal;
    margin: 0;
    padding: 0;
}

ol li {
    width: 100%;
    float: left;
    margin-bottom: 30px;
    list-style-type: decimal;
}

.nested-ol li {
    list-style: lower-alpha;
    margin-left: 20px;
}

table,
th,
td {
    border: 1px solid #0000001f;
    border-collapse: collapse;
}

.table {
    width: 60%;
    margin-top: 2rem;
}

.table-sm>:not(caption)>*>* {
    padding: 4px 6px;
    left: 2px;
}

/*privacy policy page code end */

/* floating action button start */
.floatingbtn {
    z-index: 999;
    left: 4%;
}

.round {
    border-radius: 50%;
}

.fab {
    transition: all 300ms ease-in-out;
    width: 50px;
    height: 50px;
    background-color: #1a73e9;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 30px;
    bottom: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    color: #000;
    font-size: 20px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16), 0px 3px 10px rgba(0, 0, 0, 0.16);

}

.fab img {
    transition: all 300ms ease-in-out;
    will-change: transform;
}

.floating_btn_text {
    background: #fff;
    color: #061A2E;
    font-weight: 900;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 14px;
    right: 40%;
    margin-top: 40%;
    box-shadow: 0px 3px 10px rgb(0 0 0 / 16%), 0px 3px 10px rgb(0 0 0 / 16%);
    /* position: absolute; */
}

.material-icons {
    width: 24px;
}

.inner-fabs .fab {
    width: 38px;
    height: 38px;
    right: 36px;
    bottom: 23px;
    font-size: 1.5em;
    will-change: bottom;
}

.inner-fabs.show .fab:nth-child(1) {
    bottom: 80px;
}

.inner-fabs.show .fab:nth-child(2) {
    bottom: 130px;
}

.inner-fabs.show .fab:nth-child(3) {
    bottom: 180px;
}

.inner-fabs.show .fab:nth-child(4) {
    bottom: 230px;
}

.inner-fabs.show .fab:nth-child(5) {
    bottom: 280px;
}

.inner-fabs.show .fab:nth-child(6) {
    bottom: 330px;
}

/* .inner-fabs.show .fab .floating_btn_text{
    visibility: visible;
    opacity: 1;
    background: #fff;
    color: #000;
    font-weight: 900;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 16px;
    right: 60%;
    margin-top: 40%;
} */

.inner-fabs.show+.fab img {
    transform: rotate(135deg);
}

.fab:before {
    content: attr(data-tooltip);
    transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1);
    position: absolute;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    color: #ececec;
    right: 50px;
    top: 25%;
    background-color: rgba(70, 70, 70, 0.9);
    font-size: 0.5em;
    line-height: 1em;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    border-radius: 2px;
    padding: 6px 8px;
    max-width: 200px;
    font-weight: bold;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.inner-fabs.show .fab:hover:before {
    content: attr(data-tooltip);
    visibility: visible;
    opacity: 1;
}

img#fabIcon {
    margin-right: 0px;
}

.material-icons.signupImg {
    margin-right: 98px;
}

/* .material-icons.signinImg {
    margin-right: 72px;
} */

/* .material-icons.telegramImg {
    margin-right: 100px;
} */

/* .phoneImg{
    margin-right:60px;
} */

/* .whatsappImg{
    margin-right:105px;
} */

.inner-fabs {
    display: none;
}

.inner-fabs.show {
    display: block;
}

/* floating action button end */

.rera_no {
    color: #1a73e8;
}

@media screen and (max-width:1600px) {
    #f .ct {
        width: 90vw
    }

    #f .l {
        padding-right: calc(20px + 5%)
    }

}

@media screen and (max-width:1250px) {
    #sv .rg {
        padding-left: 75%
    }

    #sv .lgt {
        padding-right: 35%
    }

}

@media screen and (max-width:1084px) {

    #we .wec,
    .ct {
        width: 85vw
    }

    #f .ct {
        flex-wrap: wrap
    }

    #f .l {
        order: 10;
        padding-top: calc(15px + 1%);
        margin-top: calc(15px + 1%);
        border-top: 1px solid rgba(255, 255, 255, .05);
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0
    }

    #f .logo {
        margin-bottom: 0
    }

    #f .l br {
        display: none
    }

    .line-p span {
        font-size: 9px
    }
}

@media screen and (min-width:901px) {
    #sv .rg>div {
        transform: none !important
    }
}

@media screen and (max-width:950px) {
    .ec {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden
    }

    .ec>:not(.cov) {
        height: auto
    }

    .ec section:not(.cov) {
        display: block
    }

    .ec .part-2 .ct,
    .ec .pres .ct,
    .ec section>.ct {
        padding: calc(45px + 50 * (100vw - 320px)/ 1080) 0;
        width: 85vw;
        margin: auto
    }

    .ec .cov .tc {
        left: 50%;
        transform: translateX(-50%)
    }

    .ec .tc i:before {
        display: block;
        transform: rotate(90deg)
    }

    .ec .mck {
        margin: 5vh auto
    }

    .ec .mck-5 {
        margin-bottom: -3vh
    }

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

    .ec .mck.mck-1 {
        left: -10vw
    }

    .ec .mck.mck-3 {
        margin-top: -15vw
    }

    .ec .bga {
        width: 100%;
        height: calc(350px + 250 * (100vw - 320px)/ 1080)
    }

    .ec .bga>div {
        width: 100%;
        height: 150%
    }

    .line-ec {
        height: 2px
    }

    .ec .part-lg .ct {
        display: block
    }

    .ec .part-lg .lgs {
        flex-direction: column;
        margin: calc(30px + 3%) auto calc(50px + 200 * (100vw - 320px)/ 1080);
        margin-left: 0
    }

    .ec .part-lg .lgs img {
        width: calc(350px + 200 * (100vw - 320px)/ 1080);
        max-width: 85%;
        margin-left: auto;
        margin-right: auto
    }

    .ec .part-lg .lgs img+img {
        margin-top: calc(40px + 3%)
    }

    .ec section.nxt {
        width: 100%;
        height: 100vh;
        display: flex
    }

    #sv .rg {
        padding-left: 0 !important;
        left: 0
    }

    #sv .rg>div {
        transform: translateY(-70%) rotate(-90deg);
        transform-origin: center center
    }

    #sv .rg .cir {
        top: 0;
        width: 100vw;
        height: 100vw
    }

    #sv .rg .rnd {
        transform: rotate(90deg)
    }

    #sv .lgt {
        padding: 40vh 0 0 !important;
        text-align: center;
        padding-right: 16px !important;
    }

    #sv .lgt .tx {
        width: 100%;
        padding: 0 calc(20px + 5%);
        margin: calc(25px + 15 * (100vw - 320px)/ 1080) 0;
    }

    #sv .crc:nth-child(1),
    #sv .crc:nth-child(3) {
        width: 50vw
    }

    #sv .crc:nth-child(2),
    #sv .crc:nth-child(4) {
        height: 50vw
    }

    #sv .lgt h3 strong {
        font-weight: 900;
        display: block;
        font-size: 22px;
    }

    .eavl {
        text-align: center;
        margin-top: 0 !important;
        position: relative;
        align-items: flex-end
    }

    .eavl h2 {
        display: none;
        transform: none !important;
        opacity: 1 !important;
        width: 100%;
        top: 100vh;
        left: 0
    }

    .eavl .ct {
        width: 100%;
        text-align: center
    }

    .lgtxc .ct>div {
        width: 100%;
        left: 0;
        text-align: left
    }

    .cirbc .ico,
    .cirbc svg {
        top: 30%
    }
}

@media screen and (max-width:900px) {
    #n .nr {
        display: none
    }

    #n .nl {
        width: 100%;
        text-align: center
    }

    #n .nl nav li:nth-child(4) {
        display: block
    }

    #cof {
        padding: 0 calc(10px + 60 * (100vw - 320px)/ 1080)
    }

    /* img.gallery_card_logo {
        left: 202px;
    } */
}

@media screen and (max-width:850px) {
    #map {
        width: 100%;
        height: 150vh;
        top: -40vh
    }

    #map:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 50vh;
        width: 100%;
        z-index: 10;
        background: linear-gradient(to top, #061A2E, rgba(0, 0, 0, 0))
    }

    #map .mapboxgl-control-container {
        display: none
    }
}

@media screen and (max-width:800px) {
    #f .ct {
        width: 85vw
    }

    #f .logo {
        width: 150px
    }

    #f .ct>* {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }

    #f h4 {
        margin-bottom: 0
    }

    #f .tl:after {
        content: '-';
        margin-left: 5px;
        pointer-events: none;
        color: #fff !important
    }

    #f .r {
        padding-top: calc(15px + 1%);
        margin-top: calc(15px + 1%);
        border-top: 1px solid rgba(255, 255, 255, .05);
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0
    }

    #f .rs {
        margin-bottom: 0
    }

    #sc {
        text-align: center
    }

    #sc .tc {
        margin: auto
    }

    #sc .ls li {
        margin-top: calc(40px + 10 * (100vw - 320px)/ 1080);
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }

    #sc .ls .ic {
        margin: auto;
        width: calc(100px + 50 * (100vw - 320px)/ 1080);
        height: calc(100px + 50 * (100vw - 320px)/ 1080)
    }

    #sc .ic svg {
        stroke-width: 2px;
        opacity: 0
    }

    #sc i {
        font-size: calc(25px + 15 * (100vw - 320px)/ 1080)
    }

    #sc .ls .p {
        margin-left: auto;
        margin-right: auto;
        width: 90%
    }

}

@media screen and (max-width:780px) {
    #et .tc {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%)
    }
}

@media screen and (max-width:750px) {
    #f .r {
        padding-top: 25px
    }

    #f h4 {
        margin-bottom: 5px
    }

    #f .l {
        flex-direction: column;
        padding-top: 25px
    }
}

@media screen and (max-width:700px) {
    .ec .pres .txt {
        font-size: calc(13px + 2 * (100vw - 320px)/ 1080)
    }

    .ec .sb {
        font-size: 10px;
        letter-spacing: 2px
    }
}

@media screen and (max-width:680px) {
    #we {
        align-items: flex-end
    }

    #sc h2 {
        font-size: calc(20px + 10 * (100vw - 320px)/ 1080)
    }
}

@media screen and (max-width:600px) {
    #cof .slc li {
        width: 50%;
        max-width: 50%;
        flex-basis: 50%
    }

    #cof .slc li>div {
        padding: calc(20px + 10 * (100vw - 320px)/ 1080) calc(15px + 10 * (100vw - 320px)/ 1080)
    }

    #cof .slc li i {
        font-size: calc(40px + 10 * (100vw - 320px)/ 1080)
    }

    #cof .slc .t {
        font-size: calc(14px + 5 * (100vw - 320px)/ 1080)
    }

    #eu .eui {
        height: calc(400px + 200 * (100vw - 320px)/ 1080)
    }
}

@media screen and (max-width:600px) {
    #cof .slc li>div {
        padding: calc(15px + 8 * (100vw - 320px)/ 1080) calc(10px + 8 * (100vw - 320px)/ 1080)
    }

    #cof .slc li i {
        font-size: calc(35px + 8 * (100vw - 320px)/ 1080)
    }

    #cof .slc .t {
        font-size: calc(13px + 4 * (100vw - 320px)/ 1080)
    }
}

@media(max-width: 768px) {
    .desk_view {
        display: none;
    }

    .mob_view {
        display: block;
    }

    .mob_view1 {
        display: block;
        visibility: visible;
        position: fixed !important;
        bottom: 0;
        width: 100%;
    }

    .modal-dialog.popup.mob_view1 {
        bottom: 0;
        top: initial;
    }

    /* .btnImg {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    } */
    .ctaButton2 {
        /* margin-bottom: 20px; */
    }

    .ctaImg2 {
        position: absolute;
        top: -74px;
        right: 0;
    }

    /* header start */
    #h,
    .she {
        padding: calc(5px + 2%) calc(5px + 2%) calc(5px + 2%) calc(5px + 2%);
        /* background: rgb(255 255 255 / 0%); */
        background: #fff;
        height: 40px;
    }

    #h .logo {
        width: 100%;
        margin-left: 0px;
    }

    img#user-w {
        width: 32px;
        margin-right: 18px;
    }

    .r button.btn.btn-primary {
        border-radius: 8px;
        padding: 6px 12px;
        width: auto;
    }

    .app-btn.blu {
        display: none;
    }

    /* header end */

    /* banner start */
    #we:not(.r) {
        flex-direction: column-reverse;
        height: auto !important;
        padding: calc(15px + 0%) 0;
        padding-top: 80px;
    }

    #we .wem {
        margin-top: calc(10px + 2%);
        margin-bottom: calc(10px + 4%);
    }

    .hd-clr {
        font-size: 38px;
    }

    .services {
        font-size: 14px;
    }

    .demo-image img {
        width: 100%;
        /* margin-top: 30px; */
    }

    .play-icon {
        top: 40%;
        left: 50%;
    }

    .contact-us-img-back1 {
        left: 14%;
        top: 86px;
    }

    .contact-us-callicon {
        position: absolute;
        width: 54px;
        height: 54px;
        background: #1A73E8;
        border-radius: 50%;
        margin: 28px;
        z-index: 1;
    }

    .circle1 {
        border-radius: 50%;
        background-color: #1A73E8;
        width: 110px;
        height: 110px;
        position: absolute;
        opacity: 0;
        animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
    }


    /* banner end */

    /* offering section start */
    .offering {
        padding: calc(15px + 0%);
        flex-direction: column;
    }

    .offr-content {
        width: 100%;
        height: 100%;
        margin-bottom: 50px;
    }

    .header-group h3 {
        /* font-size: 24px; */
        font-size: 22px;
        line-height: 30px;
        margin: 40px 0 40px -44px;
    }

    .load-Sh,
    .load-p,
    .load1-p,
    .about-p,
    .feedback-text,
    .load-p2 {
        padding: 16px;
        text-align: left;
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 0px;
    }

    .offr-demo {
        margin-bottom: 40px !important;
        margin-top: -270px;
        padding-right: 0px;
    }

    .offr-demo video {
        width: 100% !important;
        margin-top: 252px;
        padding: 16px !important;
        background: #1A73E8;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }


    /* offering section end */

    /* testimonial start */
    .addExtraSpace1 {
        margin-left: 10px;
    }

    .header-group h3 {
        /* font-size: 24px; */
        font-size: 22px;
        line-height: 30px;
        margin: 40px 0 40px -44px;
    }

    .addbackground {
        background: #F7F7F7;
        /* background:#fff; */
        z-index: 999;
        /* padding-left: 10px;
    padding-right: 10px; */
    }

    .test_card1 {
        flex-direction: column-reverse;
        height: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

    .card-left {
        width: 100% !important;
        margin-bottom: 80px;
        padding: 20px 0px;
    }

    .test-profile p,
    .num_project p,
    .growth p,
    .individual p,
    .test_feedback {
        font-size: 14px;
    }

    .test_feedback {
        margin-bottom: 22px;
    }

    .quotationImg {
        width: 30px;
        top: -4px;
    }

    .card-right {
        width: 100% !important;
    }

    .card-right img {
        height: 300px !important;
        margin-bottom: 10px;
    }

    /* testimonial end */

    /* developer section start */
    #developers .header-group {
        padding-left: 10px;
    }

    /* developer section end */

    /* circular roation section start */
    .lgt.fx .header-group {
        padding-left: 16px;
    }

    #sv .lgt .tx {
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    /* circular roation section end */

    /* do you want section start */
    .ct .header-group {
        padding-left: 16px;
    }

    .ct .header-group h3 {
        color: #000;
    }

    .lgtxc h3 {
        left: 5%;
    }

    .cirbc .ico {
        top: 22% !important;
    }

    .circle_img {
        top: 0%;
    }

    .circle_img img {
        margin-top: 104px;
    }

    /* do you want section end */

    /* cta section start */
    .cta_section {
        display: block;
        padding: 8px;
    }

    .cta_section .header-group {
        margin-left: 0px;
    }

    .testload-Sh {
        padding: 16px 16px 16px 0px;
        text-align: left;
        font-size: 16px;
        line-height: 24px;
    }

    .testload-Sh1 {
        padding: 0px 16px 16px 0px;
        text-align: left;
        font-size: 14px;
        line-height: 20px;
        margin-left: -82px;
    }

    /* .cta_subhead {
        margin-left: 40px;
    } */
    .cta_section button {
        padding: 15px;
        display: block;
        margin: 10px auto 44px 20px;
    }

    /* cta section end */

    /* squad section start */
    /* img.gallery_card_logo {
        filter: grayscale(0%);
    } */
    /* squad section end */

    /* telegram cta section start */
    .telegramSection {
        padding: 0px;
    }

    .telegramSection button {
        margin: 10px auto 50px 18px;
        padding: 15px;
    }

    /* telegram cta section end */

    /* contact us section start */
    .contact-us {
        padding-left: 10px;
    }

    .contact-text h1 {
        font-size: 18px;
        line-height: normal;
        margin-bottom: 20px;
    }

    .contact-button1 {
        padding: 12px;
    }

    .contact-button2 {
        padding: 12px;
    }

    .contact-us-img-back {
        position: relative;
        left: 0%;
        width: 110px;
        height: 110px;
        background-color: #fff;
        border-radius: 50%;
    }

    .contact-us-callicon {
        position: absolute;
        width: 54px;
        height: 54px;
        background: #1A73E8;
        border-radius: 50%;
        margin: 28px;
        z-index: 1;
    }

    .contact-us-callicon img {
        position: absolute;
        padding: 10px;
    }

    .circle1 {
        border-radius: 50%;
        background-color: #1A73E8;
        width: 110px;
        height: 110px;
        position: absolute;
        opacity: 0;
        animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
    }

    /* contact us section end */
    /*privacy policy page code start */
    .terms,
    .policy,
    .gallery {
        font-size: 16px;
        margin-top: 60px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .nested-ol li {
        padding-right: 16px;
    }

    .table {
        width: 100%;
        margin-left: -22px;
    }

    /*privacy policy page code end */
    /* #floatingBtnText1, #floatingBtnText2, #floatingBtnText3
{
    display: none;
} */


    .modal.show .modal-dialog {
        transform: none;
        /* top: 0px!important; */
    }

    #PopUp1 {
        /* top:240px; */
        background: none;
        /* box-shadow: 3px 3px 25px rgb(0 0 0 / 20%); */
    }

    .PopUp1_header {
        border-bottom: 0px;
    }

    .modal-dialog.popup {
        margin: 0px;
        bottom: 0px;
        left: 0;
        width: 100%;
    }

    /* .modal.show .modal-dialog
{
    margin: 0px;
    box-shadow: 5px 5px 10px rgb(6 26 46);
} */
    .popupMob1 {
        text-align: right;
        margin: 0;
        padding: 0;
        width: 100%;
        display: inline-block;
        position: relative;
        height: 32px;
    }

    .modal-content {
        border: none;
        margin: 0px;
        box-shadow: 0px 0px 6px rgb(6 26 46);
    }

    .modal-backdrop {
        z-index: -1;
    }
}

@media only screen and (orientation: landscape) {
    .demo-image {
        margin-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.blog-btn a:hover {
    color: #fff;
}

.branch-heading {
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 20px;
}

.branch-heading h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    color: #000;
}



.flex-container {
    display: flex;
}

.flex-container .whats-app {
    margin-left: 20px;
}

@media(min-width:820px) {
    .contact-content {
        position: relative;
        left: 50%;
        width: 110px;
        height: 110px;
        background-color: #fff;
        border-radius: 50%;
    }

    .contact-content .contact-us-callicon {
        position: absolute;
        width: 54px;
        height: 54px;
        background: #1A73E8;
        border-radius: 50%;
        margin: 28px;
        z-index: 1;
    }

    .contact-content .contact-us-callicon img {
        position: absolute;
        padding: 10px;
    }

    .contact-content .circle1 {
        border-radius: 50%;
        background-color: #1A73E8;
        width: 110px;
        height: 110px;
        position: absolute;
        opacity: 0;
        animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
    }

    .contact-content .desk_view {
        display: none;
    }

    .contact-content .desk_view {
        display: none;
    }

    .contact-content .mob_view {
        display: block;
    }

    .flex-container {
        margin-left: 60px;

    }
}

.terms-privacy {
    margin:20px 0 20px 0;
}

.terms-privacy a {
    text-decoration: none;
    color: #1A73E8;
    padding-right: 10px;
    font-weight: 600;
}

.social-section {
    display: none;
}

@media(min-width:768px) {

    .floating-button {
        display: none;
    }

    .branch-heading {
        margin-top: 0;
        position: relative;
    }

    /* .branch-heading h3::after {
        content: "";
        border: 1px solid #1A73E8;
        height: 1px;
        width: 80%;
        position: absolute;
        bottom: 10px;
        right: 0;
    } */

    /* .registered-office{
        margin-top: ;
    } */
    .social-section {
        z-index: 1000;
        display: block;
        position: fixed;
        bottom: 40%;
        right: 15px;
        display: flex;
        flex-direction: column
    }

    .social-section img {
        width: 40px;
    }

    .social-section .call-button {
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        margin-bottom: 1px;
    }

    .phone-button,
    .whatsapp-button {
        color: #fff;
        background: #fff;
        font-size: 12px;
        padding: 10px 0;
        width: 60px;
        border: 1px solid #1A73E8;
        text-align: center;
        font-weight: 900;
    }

    .social-section .phone-button {
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        margin-bottom: 1px;
    }

    .social-section .whatsapp-button {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }

    .terms-privacy{
        margin:10px 0 20px 0;
    }
}

.ctaContent .qr-section img {
    width: 100px;
}

.fab-wrapper {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    z-index: 100;
}

.fab-checkbox {
    display: none;
}

.fab {
    position: absolute;
    bottom: -1rem;
    right: -1rem;
    width: 4rem;
    height: 4rem;
    background: blue;
    border-radius: 50%;
    background: #126ee2;
    box-shadow: 0px 5px 20px #81a4f1;
    transition: all 0.3s ease;
    z-index: 1;
    border-bottom-right-radius: 6px;
    border: 1px solid #0c50a7;
}

.fab:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
}

.fab-checkbox:checked~.fab:before {
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
    background-color: rgba(255, 255, 255, 0.2);
}

.fab:hover {
    background: #2c87e8;
    box-shadow: 0px 5px 20px 5px #81a4f1;
}

.fab-dots {
    position: absolute;
    height: 8px;
    width: 8px;
    background-color: white;
    border-radius: 50%;
    top: 50%;
    transform: translateX(0%) translateY(-50%) rotate(0deg);
    opacity: 1;
    animation: blink 3s ease infinite;
    transition: all 0.3s ease;
}

.fab-dots-1 {
    left: 15px;
    animation-delay: 0s;
}

.fab-dots-2 {
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation-delay: 0.4s;
}

.fab-dots-3 {
    right: 15px;
    animation-delay: 0.8s;
}

.fab-checkbox:checked~.fab .fab-dots {
    height: 6px;
}

.fab .fab-dots-2 {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
}

.fab-checkbox:checked~.fab .fab-dots-1 {
    width: 32px;
    border-radius: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.fab-checkbox:checked~.fab .fab-dots-3 {
    width: 32px;
    border-radius: 10px;
    right: 50%;
    transform: translateX(50%) translateY(-50%) rotate(-45deg);
}

@keyframes blink {
    50% {
        opacity: 0.25;
    }
}

.fab-checkbox:checked~.fab .fab-dots {
    animation: none;
}

.fab-wheel {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid transparent;
    width: 10rem;
    height: 10rem;
    transition: all 0.3s ease;
    transform-origin: bottom right;
    transform: scale(0);
}

.fab-checkbox:checked~.fab-wheel {
    transform: scale(1);
}

.fab-action {
    position: absolute;
    background: #1A73E8;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: White;
    box-shadow: 0 0.1rem 1rem rgba(24, 66, 154, 0.82);
    transition: all 1s ease;

    opacity: 0;
}

.fab-checkbox:checked~.fab-wheel .fab-action {
    opacity: 1;
}

/* .fab-action:hover {
    background-color: #f16100;
} */

.fab-wheel .fab-action-1 {
    right: -1rem;
    top: 0;
}

.fab-wheel .fab-action-2 {
    right: 3.4rem;
    top: 0.5rem;
}

.fab-wheel .fab-action-3 {
    left: 0.5rem;
    bottom: 3.4rem;
}

.fab-wheel .fab-action-4 {
    left: 0;
    bottom: -1rem;
}

.call-heading h3 {
    margin: 10px 0 10px 0;
    font-size: 22px;
    font-weight: 600;
}

.ctaContent .call-number {
    padding: 10px;
    margin: 10px;
}

.call-number a {
    text-decoration: none;
    border: 1px solid #1A73E8;
    padding: 6px 20px;
}

.office-address .registered-office-heading{
    color: #000;
    font-size: 20px;
    margin-bottom: 20px;
}