@import"https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap";

@keyframes slideDownIn {
    0% {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    0% {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes slideDownInMobile {
    0% {
        -webkit-transform: translateY(-1.25rem);
        -moz-transform: translateY(-1.25rem);
        -ms-transform: translateY(-1.25rem);
        transform: translateY(-1.25rem)
    }

    100% {
        -webkit-transform: translateY(0.625rem);
        -moz-transform: translateY(0.625rem);
        -ms-transform: translateY(0.625rem);
        transform: translateY(0.625rem)
    }

    0% {
        -webkit-transform: translateY(-1.25rem);
        -moz-transform: translateY(-1.25rem);
        -ms-transform: translateY(-1.25rem);
        transform: translateY(-1.25rem)
    }
}

@keyframes slideUpIn {
    0% {
        -webkit-transform: translateY(-1.25rem);
        -moz-transform: translateY(-1.25rem);
        -ms-transform: translateY(-1.25rem);
        transform: translateY(-1.25rem)
    }

    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    0% {
        -webkit-transform: translateY(1.25rem);
        -moz-transform: translateY(1.25rem);
        -ms-transform: translateY(1.25rem);
        transform: translateY(1.25rem)
    }
}

@keyframes slideUpInMobile {
    0% {
        -webkit-transform: translateY(2.5rem);
        -moz-transform: translateY(2.5rem);
        -ms-transform: translateY(2.5rem);
        transform: translateY(2.5rem)
    }

    100% {
        -webkit-transform: translateY(1.5625rem);
        -moz-transform: translateY(1.5625rem);
        -ms-transform: translateY(1.5625rem);
        transform: translateY(1.5625rem)
    }

    0% {
        -webkit-transform: translateY(2.5rem);
        -moz-transform: translateY(2.5rem);
        -ms-transform: translateY(2.5rem);
        transform: translateY(2.5rem)
    }
}

@keyframes slideLeftIn {
    0% {
        -webkit-transform: translateX(6.25rem);
        -moz-transform: translateX(6.25rem);
        -ms-transform: translateX(6.25rem);
        transform: translateX(6.25rem)
    }

    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    0% {
        -webkit-transform: translateX(-6.25rem);
        -moz-transform: translateX(-6.25rem);
        -ms-transform: translateX(-6.25rem);
        transform: translateX(-6.25rem)
    }
}

@keyframes slideRightIn {
    0% {
        -webkit-transform: translateX(6.25rem);
        -moz-transform: translateX(6.25rem);
        -ms-transform: translateX(6.25rem);
        transform: translateX(6.25rem)
    }

    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    0% {
        -webkit-transform: translateX(6.25rem);
        -moz-transform: translateX(6.25rem);
        -ms-transform: translateX(6.25rem);
        transform: translateX(6.25rem)
    }
}

@keyframes floating {
    0% {
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%)
    }

    50% {
        -webkit-transform: translateY(1%);
        -moz-transform: translateY(1%);
        -ms-transform: translateY(1%);
        transform: translateY(1%)
    }

    100% {
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%)
    }
}

html {
    box-sizing: border-box;
    font-size: 100%;
    scroll-behavior: smooth
}

html:focus-within {
    scroll-behavior: inherit
}

* {
    box-sizing: inherit
}

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

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
button,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
header,
hgroup,
html,
i,
input,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
main,
nav,
object,
ol,
output,
option,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
select,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0
}

a::selection,
abbr::selection,
acronym::selection,
address::selection,
applet::selection,
article::selection,
aside::selection,
audio::selection,
b::selection,
big::selection,
blockquote::selection,
button::selection,
body::selection,
canvas::selection,
caption::selection,
center::selection,
cite::selection,
code::selection,
dd::selection,
del::selection,
details::selection,
dfn::selection,
div::selection,
dl::selection,
dt::selection,
em::selection,
embed::selection,
fieldset::selection,
figcaption::selection,
figure::selection,
footer::selection,
form::selection,
header::selection,
hgroup::selection,
html::selection,
i::selection,
input::selection,
iframe::selection,
img::selection,
ins::selection,
kbd::selection,
label::selection,
legend::selection,
li::selection,
mark::selection,
menu::selection,
main::selection,
nav::selection,
object::selection,
ol::selection,
output::selection,
option::selection,
p::selection,
pre::selection,
q::selection,
ruby::selection,
s::selection,
samp::selection,
section::selection,
small::selection,
span::selection,
strike::selection,
strong::selection,
sub::selection,
summary::selection,
select::selection,
sup::selection,
table::selection,
tbody::selection,
td::selection,
tfoot::selection,
th::selection,
thead::selection,
time::selection,
tr::selection,
tt::selection,
u::selection,
ul::selection,
var::selection,
video::selection {
    background: #0876fd;
    color: #fff
}

body {
    background: #f8fafc;
    color: #636d7e;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    text-rendering: optimizeSpeed;
    overflow-x: hidden;
    margin: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2b3850;
    margin: 0
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
    background: #0876fd;
    color: #fff
}

img {
    max-width: 100%;
    display: block;
    object-fit: cover
}

a,
a:visited,
a:active,
a:hover {
    text-decoration: none
}

input,
select,
textarea {
    border: none
}

input:focus,
select:focus,
textarea:focus {
    outline: none
}

textarea {
    resize: none
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    display: none
}

input[type=search]::-webkit-search-decoration:focus,
input[type=search]::-webkit-search-cancel-button:focus,
input[type=search]::-webkit-search-results-button:focus,
input[type=search]::-webkit-search-results-decoration:focus {
    outline: none
}

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: rgba(0, 0, 0, 0)
}

input[type=date]::before {
    content: attr(data-placeholder);
    width: 100%
}

input[type=date]:focus::before,
input[type=date]:valid::before {
    display: none
}

table tr {
    vertical-align: middle
}

table tr th,
table tr td {
    vertical-align: middle
}

.bigtitle-1 {
    font-family: "Titillium Web", sans-serif;
    font-size: 2rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4
}

@media screen and (min-width: 48rem) {
    .bigtitle-1 {
        font-size: 2.5rem
    }
}

@media screen and (min-width: 62rem) {
    .bigtitle-1 {
        font-size: 3.125rem
    }
}

@media screen and (min-width: 75rem) {
    .bigtitle-1 {
        font-size: 3.75rem
    }
}

@media screen and (min-width: 87.5rem) {
    .bigtitle-1 {
        font-size: 4.375rem
    }
}

.bigtitle-2 {
    font-family: "Titillium Web", sans-serif;
    font-size: 2rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4
}

@media screen and (min-width: 48rem) {
    .bigtitle-2 {
        font-size: 2.5rem
    }
}

@media screen and (min-width: 62rem) {
    .bigtitle-2 {
        font-size: 3rem
    }
}

@media screen and (min-width: 75rem) {
    .bigtitle-2 {
        font-size: 3.75rem
    }
}

h1 {
    font-family: "Titillium Web", sans-serif;
    font-size: 1.625rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4
}

@media screen and (min-width: 48rem) {
    h1 {
        font-size: 2rem
    }
}

@media screen and (min-width: 62rem) {
    h1 {
        font-size: 2.5rem
    }
}

@media screen and (min-width: 75rem) {
    h1 {
        font-size: 3rem
    }
}

h3 {
    font-family: "Titillium Web", sans-serif;
    font-size: 1.375rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4
}

@media screen and (min-width: 48rem) {
    h3 {
        font-size: 1.5625rem
    }
}

@media screen and (min-width: 62rem) {
    h3 {
        font-size: 1.75rem
    }
}

@media screen and (min-width: 75rem) {
    h3 {
        font-size: 1.9375rem
    }
}

h4 {
    font-family: "Titillium Web", sans-serif;
    font-size: 1.1875rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4
}

@media screen and (min-width: 48rem) {
    h4 {
        font-size: 1.3125rem
    }
}

@media screen and (min-width: 62rem) {
    h4 {
        font-size: 1.5rem
    }
}

h5 {
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 48rem) {
    h5 {
        font-size: 1.125rem
    }
}

@media screen and (min-width: 62rem) {
    h5 {
        font-size: 1.25rem
    }
}

h6 {
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 48rem) {
    h6 {
        font-size: 1.0625rem
    }
}

@media screen and (min-width: 62rem) {
    h6 {
        font-size: 1.125rem
    }
}

button,
[type=button],
[type=reset],
[type=submit] {
    cursor: pointer;
    opacity: 1;
    margin: 0;
    padding: 0
}

button:focus,
[type=button]:focus,
[type=reset]:focus,
[type=submit]:focus {
    box-shadow: none;
    outline: none
}

.up-btn {
    opacity: 1;
    padding: 0.75rem;
    border: 0
}

.btn-buy {
    background: linear-gradient(151.47deg, hsl(188, 98%, 49%) 9.01%, hsl(213, 98%, 51%) 84.28%);
    color: #fff;
    background-size: 100% 100%;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    height: 2.75rem;
    padding: 0.75rem 1.75rem;
    text-align: center;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.btn-buy:not([disabled]):hover {
    background-size: 100% 50%
}

.btn-subscribe {
    background: #0876fd;
    color: #fff;
    border: 0;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    width: 5.6875rem;
    height: 2.25rem;
    padding: 0.75rem 1.25rem;
    -webkit-transition: background 350ms ease-in-out;
    -moz-transition: background 350ms ease-in-out;
    -ms-transition: background 350ms ease-in-out;
    -o-transition: background 350ms ease-in-out;
    transition: background 350ms ease-in-out
}

.btn-subscribe:not([disabled]):hover {
    background: #0a397b;
    color: #fff
}

.btn-live {
    padding: 0.875rem 1rem;
    border: solid 0.0625rem #4a5568;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    color: #4a5568;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1
}

.btn-live:not([disabled]):hover {
    background: #e6e6e6
}

.btn-learnmore {
    background-size: 100% 100%;
    padding: 0.875rem 1.625rem;
    display: inline-block;
    background: linear-gradient(151.47deg, hsl(188, 98%, 49%) 9.01%, hsl(213, 98%, 51%) 84.28%);
    color: #fff;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    border: solid 0.0625rem #fff;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.btn-learnmore:not([disabled]):hover {
    background-position: 50% 50%;
    background-size: 100% 500%
}

.subcribe-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(151.47deg, #02D7F8 9.01%, #0876FC 84.28%);
    border-radius: 8px;
    border: rgba(0, 0, 0, 0);
    color: #fff;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 100% 100%;
    font-weight: 700
}

.subcribe-btn:not([disabled]):hover {
    background-position: 50% 50%;
    background-size: 100% 500%
}

.update-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(151.47deg, #02D7F8 9.01%, #0876FC 84.28%);
    border-radius: 8px;
    border: rgba(0, 0, 0, 0);
    color: #fff;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 100% 100%;
    font-weight: 700
}

.update-btn:not([disabled]):hover {
    background-position: 50% 50%;
    background-size: 100% 500%
}

.google-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    background: #2d3748;
    border-radius: 8px;
    border: rgba(0, 0, 0, 0);
    color: #fff;
    font-weight: 700;
    display: flex;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.google-btn:not([disabled]):hover {
    background: #1a1f29
}

.create-account-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    background: #0876fd;
    border-radius: 8px;
    border: rgba(0, 0, 0, 0);
    color: #fff;
    font-weight: 700;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.create-account-btn:not([disabled]):hover {
    background: #025ecf
}

.btn-payNow {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    background: linear-gradient(151.47deg, #02D7F8 9.01%, #0876FC 84.28%);
    border-radius: 8px;
    border: rgba(0, 0, 0, 0);
    color: #fff;
    display: block;
    text-align: center;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 100% 100%;
    font-weight: 700;
    cursor: pointer
}

.btn-payNow:not([disabled]):hover {
    background-position: 50% 50%;
    background-size: 100% 500%
}

.heroCard {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
    padding: 0.625rem;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.heroCard .icon-wrapper {
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 1.875rem;
    -webkit-border-radius: 1.875rem;
    -moz-border-radius: 1.875rem;
    -ms-border-radius: 1.875rem;
    -o-border-radius: 1.875rem;
    border-radius: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #94e6ff;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.heroCard .icon-wrapper:not([disabled]):hover {
    background: #61daff
}

.heroCard-title {
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5;
    color: #2b3850
}

.heroCard:not([disabled]):hover {
    transform: translateY(-0.5rem)
}

.heroCard.second .icon-wrapper {
    background: #ffd97a
}

.heroCard.second .icon-wrapper:not([disabled]):hover {
    background: #ffcb47
}

.heroCard.third .icon-wrapper {
    background: #fba060
}

.heroCard.third .icon-wrapper:not([disabled]):hover {
    background: #fa832e
}

.heroCard.fourth .icon-wrapper {
    background: #f4a4df
}

.heroCard.fourth .icon-wrapper:not([disabled]):hover {
    background: #ef76cf
}

.analytics {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.analytics-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

@media screen and (min-width: 62rem) {
    .analytics-top {
        text-align: left;
        align-items: flex-start
    }
}

.analytics-bottom {
    border-top: solid 0.0625rem #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.875rem
}

.analytics-pill {
    background: rgba(41, 196, 131, .2);
    color: #00854d;
    border-radius: 3.125rem;
    -webkit-border-radius: 3.125rem;
    -moz-border-radius: 3.125rem;
    -ms-border-radius: 3.125rem;
    -o-border-radius: 3.125rem;
    border-radius: 3.125rem;
    text-transform: lowercase;
    font-family: "Titillium Web", sans-serif;
    font-size: .75rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3333333333;
    padding: 0.125rem 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center
}

.analytics-title {
    padding-top: 1.25rem;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3333333333
}

@media screen and (min-width: 62rem) {
    .analytics-title {
        padding-top: 1.875rem;
        font-family: "Titillium Web", sans-serif;
        font-size: 2.5rem;
        font-weight: 600;
        font-style: normal;
        line-height: 1.5
    }
}

.analytics-text {
    color: #2b3850;
    padding-top: 0.625rem
}

.analytics .pDashboard,
.analytics .inSync {
    display: flex;
    flex-direction: column;
    gap: 0.75rem
}

.analytics .pDashboard .icon-wrapper,
.analytics .inSync .icon-wrapper {
    width: 3.75rem;
    height: 3.75rem;
    background: #fcedc0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
    -webkit-border-radius: 1.25rem;
    -moz-border-radius: 1.25rem;
    -ms-border-radius: 1.25rem;
    -o-border-radius: 1.25rem;
    border-radius: 1.25rem
}

.analytics .pDashboard-title,
.analytics .inSync-title {
    color: #2b3850;
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5
}

.analytics .pDashboard-text,
.analytics .inSync-text {
    color: #2b3850
}

.analytics .inSync .icon-wrapper {
    background: #94e6ff
}

.collaborate {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.collaborate-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

@media screen and (min-width: 62rem) {
    .collaborate-top {
        text-align: left;
        align-items: flex-start
    }
}

.collaborate-bottom {
    border-top: solid 0.0625rem #e0e0e0;
    padding-top: 1.875rem;
    display: flex;
    gap: 1.875rem;
    flex-wrap: wrap
}

.collaborate-bottom .collaborate-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem
}

.collaborate-bottom .collaborate-features li {
    display: flex;
    align-items: center;
    gap: 0.625rem
}

.collaborate-pill {
    background: rgba(255, 132, 63, .2);
    color: #ff7b00;
    border-radius: 3.125rem;
    -webkit-border-radius: 3.125rem;
    -moz-border-radius: 3.125rem;
    -ms-border-radius: 3.125rem;
    -o-border-radius: 3.125rem;
    border-radius: 3.125rem;
    text-transform: lowercase;
    font-family: "Titillium Web", sans-serif;
    font-size: .75rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3333333333;
    padding: 0.125rem 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center
}

.collaborate-title {
    padding-top: 1.25rem;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3333333333
}

@media screen and (min-width: 62rem) {
    .collaborate-title {
        padding-top: 1.875rem;
        font-family: "Titillium Web", sans-serif;
        font-size: 2.5rem;
        font-weight: 600;
        font-style: normal;
        line-height: 1.5
    }
}

.collaborate-text {
    color: #2b3850;
    padding-top: 0.625rem
}

.report {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.report-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

@media screen and (min-width: 62rem) {
    .report-top {
        text-align: left;
        align-items: flex-start
    }
}

.report-bottom {
    border-top: solid 0.0625rem #e0e0e0;
    padding-top: 1.875rem;
    display: flex;
    gap: 1.875rem;
    flex-wrap: wrap
}

.report-bottom .report-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem
}

.report-bottom .report-features li {
    display: flex;
    align-items: center;
    gap: 0.625rem
}

.report-bottom .report-features li .number {
    color: #2b3850;
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5
}

.report-pill {
    background: rgba(255, 132, 63, .2);
    color: #ff7b00;
    border-radius: 3.125rem;
    -webkit-border-radius: 3.125rem;
    -moz-border-radius: 3.125rem;
    -ms-border-radius: 3.125rem;
    -o-border-radius: 3.125rem;
    border-radius: 3.125rem;
    text-transform: lowercase;
    font-family: "Titillium Web", sans-serif;
    font-size: .75rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3333333333;
    padding: 0.125rem 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center
}

.report-title {
    padding-top: 1.25rem;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3333333333
}

@media screen and (min-width: 62rem) {
    .report-title {
        padding-top: 1.875rem;
        font-family: "Titillium Web", sans-serif;
        font-size: 2.5rem;
        font-weight: 600;
        font-style: normal;
        line-height: 1.5
    }
}

.report-text {
    color: #2b3850;
    padding-top: 0.625rem
}

.cardblog {
    background: #fff;
    box-shadow: 0 .25rem .25rem rgba(0, 0, 0, .05);
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.625rem
}

.cardblog-header {
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.cardblog-header .blog-thumbnail {
    width: 100%;
    height: 12.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.cardblog-header .blog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: transform 350ms ease-in-out;
    -moz-transition: transform 350ms ease-in-out;
    -ms-transition: transform 350ms ease-in-out;
    -o-transition: transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out
}

.cardblog-header .overlay {
    position: absolute;
    inset: 0;
    background: rgba(40, 46, 57, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.cardblog-header .overlay .icon {
    width: 3.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.cardblog-header .overlay .icon svg {
    width: 100%;
    height: 100%
}

.cardblog-header:not([disabled]):hover .overlay {
    opacity: 1;
    visibility: visible
}

.cardblog-header:not([disabled]):hover .blog-thumbnail img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}

.cardblog-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0.625rem 1.25rem
}

.cardblog-body .blog-category,
.cardblog-body .publish-date {
    color: #a8a8a8;
    font-size: 0.875rem;
    font-weight: 400
}

.cardblog-body .blog-title {
    color: #2b3850;
    font-size: 1.125rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-transition: color 350ms ease-in-out;
    -moz-transition: color 350ms ease-in-out;
    -ms-transition: color 350ms ease-in-out;
    -o-transition: color 350ms ease-in-out;
    transition: color 350ms ease-in-out
}

.cardblog-body .blog-title:not([disabled]):hover {
    color: #0876fd
}

.cardblog-body .blog-text {
    color: #2b3850;
    font-size: 0.875rem;
    font-weight: 400
}

.featured-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.875rem;
    -webkit-border-radius: 0.875rem;
    -moz-border-radius: 0.875rem;
    -ms-border-radius: 0.875rem;
    -o-border-radius: 0.875rem;
    border-radius: 0.875rem;
    height: 20.375rem
}

.featured-card .featured-thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    overflow: hidden
}

.featured-card .featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    border-radius: 1rem;
    display: block
}

.featured-card .featured-content {
    background: #fff;
    position: absolute;
    bottom: -6.25rem;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    height: 12.125rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    z-index: 10;
    padding: 1rem;
    align-items: flex-start;
    border-bottom-left-radius: 0.875rem;
    border-bottom-right-radius: 0.875rem
}

.featured-card .featured-content .content-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem
}

.featured-card .featured-content .top-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start
}

.featured-card .featured-content-title {
    font-family: "Titillium Web", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5;
    color: #4a5568;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.featured-card .featured-content-text {
    color: #4a5568;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.featured-card .featured-content-text.less {
    min-height: 40px
}

.featured-card .featured-content-price {
    color: #4a5568;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5333333333
}

.featured-card .featured-content .featured-buttons {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 0.5rem
}

.featured-card:not([disabled]):hover .featured-content {
    bottom: 0px
}

.cardPayment {
    border: solid 0.0625rem #d3d6df;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    background: #fff
}

.cardPayment-header {
    border-bottom: solid 0.0625rem #d3d6df;
    padding: 1.25rem 1.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media screen and (min-width: 62rem) {
    .cardPayment-header {
        padding: 1.5rem 2.125rem
    }
}

.cardPayment-header .payment-type {
    color: #8490a4;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5
}

.cardPayment-header .price {
    color: #4a5568;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5333333333
}

.cardPayment-body {
    padding: 1.25rem 1.875rem;
    padding-right: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.625rem
}

@media screen and (min-width: 62rem) {
    .cardPayment-body {
        padding: 1.5rem 2.125rem;
        padding-right: 0
    }
}

.cardPayment-body .payment-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem
}

.cardPayment-body .payment-features li {
    display: flex;
    align-items: center;
    gap: 0.625rem
}

.cardPayment-footer {
    border-top: solid 0.0625rem #d3d6df;
    padding: 1.25rem 1.875rem
}

@media screen and (min-width: 62rem) {
    .cardPayment-footer {
        padding: 1.5rem 2.125rem
    }
}

.cardService {
    background: #fff;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    -webkit-transition: transform 350ms ease-in-out;
    -moz-transition: transform 350ms ease-in-out;
    -ms-transition: transform 350ms ease-in-out;
    -o-transition: transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out
}

.cardService-icon {
    width: 3rem;
    height: 3rem;
    -webkit-transition: transform 350ms ease-in-out;
    -moz-transition: transform 350ms ease-in-out;
    -ms-transition: transform 350ms ease-in-out;
    -o-transition: transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out
}

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

.cardService-title {
    color: #4a5568;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4
}

.cardService-text {
    padding-top: 0.375rem;
    padding-bottom: 1.25rem;
    color: #728197;
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.875
}

.cardService:not([disabled]):hover {
    transform: translateY(-0.5rem)
}

.cardService:not([disabled]):hover .cardService-icon {
    transform: rotate(20deg)
}

.header {
    background: #fff;
    box-shadow: 0 0 .0625rem rgba(12, 26, 75, .24), 0 .1875rem .5rem -0.0625rem rgba(50, 50, 71, .05);
    height: 5rem;
    display: flex;
    align-items: center
}

@media screen and (min-width: 62rem) {
    .header {
        height: 6.25rem
    }
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center
}

.header-nav .logo {
    width: 3.75rem;
    height: 3.75rem;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-left: 1rem
}

@media screen and (min-width: 62rem) {
    .header-nav .logo {
        margin-left: 0rem
    }
}

.header-nav .desktoplist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center
}

.header-nav .desktoplist-link {
    color: #2b3850;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 1.25rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    -webkit-transition: color 350ms ease-in-out;
    -moz-transition: color 350ms ease-in-out;
    -ms-transition: color 350ms ease-in-out;
    -o-transition: color 350ms ease-in-out;
    transition: color 350ms ease-in-out
}

.header-nav .desktoplist-link:hover:not(.active) {
    color: #0876fd
}

.header-nav .desktoplist-link.active {
    color: #0876fd
}

.header .btn-hamburger {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0, 0, 0, 0);
    border: none;
    background: #0876fd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.5rem;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
    border-radius: 0.25rem
}

.header .btn-hamburger svg {
    width: 100%;
    height: 100%
}

.header .btn-hamburger svg path {
    fill: #fff
}

.header .right-menu {
    display: flex;
    align-items: center;
    gap: 1.25rem
}

.header .right-menu .header-user {
    display: flex;
    align-items: center;
    gap: 1.25rem
}

.header .right-menu .username {
    color: #2b3850;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.4285714286
}

.header .right-menu .user-image {
    width: 2.5rem;
    height: 2.5rem;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden
}

.header .right-menu .user-image img {
    width: 100%;
    height: 100%
}

.header .right-menu .signin-lignk {
    color: #2b3850;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 1.25rem 0rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    -webkit-transition: color 350ms ease-in-out;
    -moz-transition: color 350ms ease-in-out;
    -ms-transition: color 350ms ease-in-out;
    -o-transition: color 350ms ease-in-out;
    transition: color 350ms ease-in-out
}

.header .right-menu .signin-lignk:hover:not(.active) {
    color: #0876fd
}

.header .right-menu .signin-lignk.active {
    color: #0876fd
}

.form-control:focus,
.form-select:focus {
    outline: none;
    box-shadow: none
}

.form-group {
    position: relative
}

.form-group .form-label {
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4285714286;
    color: #425466
}

.form-group .form-control {
    color: #b6b6be;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4285714286;
    border-radius: 0.375rem;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    -ms-border-radius: 0.375rem;
    -o-border-radius: 0.375rem;
    border-radius: 0.375rem;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    padding: 0.5625rem 0.625rem;
    color: #4a5568
}

.form-group .form-control::placeholder {
    color: #b6b6be;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4285714286
}

.form-group select {
    border: solid 0.0625rem #d3d6df;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.5rem;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.form-group select:focus {
    border-color: #0876fc
}

.form-group .show-hide {
    position: absolute;
    right: 0.25rem;
    top: 53%;
    cursor: pointer
}

.input_container {
    border: 1px solid #e2e8f0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    -ms-border-radius: 0.375rem;
    -o-border-radius: 0.375rem;
    border-radius: 0.375rem
}

input[type=file]::file-selector-button {
    background: linear-gradient(151.47deg, #02D7F8 9.01%, #0876FC 84.28%);
    color: #fff;
    border: 0px;
    border-right: 1px solid #e5e5e5;
    padding: 2px 10px;
    margin-right: 20px;
    transition: .5s;
    border-radius: 0.3125rem;
    -webkit-border-radius: 0.3125rem;
    -moz-border-radius: 0.3125rem;
    -ms-border-radius: 0.3125rem;
    -o-border-radius: 0.3125rem;
    border-radius: 0.3125rem
}

input[type=file]::file-selector-button:hover {
    background-color: #eee;
    border: 0px;
    border-right: 1px solid #e5e5e5
}

.otp-container {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.otp-container .filled {
    border-color: #2a374e !important
}

.otp-container input[type=text] {
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 0 #2a374e;
    width: 3.375rem;
    text-align: center;
    font-size: 24px;
    margin: 0 5px;
    border: none;
    border-bottom: 2px solid #ccc;
    outline: none;
    transition: border-color .3s;
    background: rgba(0, 0, 0, 0);
    padding-bottom: 0.5rem;
    font-family: "Titillium Web", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5625
}

.otp-container input[type=text]:focus {
    border-color: #0876fd
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    box-shadow: none
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: none
}

.offcanvas {
    height: 100vh;
    width: 17.5rem
}

@media screen and (min-width: 48rem) {
    .offcanvas {
        width: 20rem
    }
}

.offcanvas.offcanvas-top {
    border-bottom: 0
}

.offcanvas.offcanvas-bottom {
    border-top: 0
}

.offcanvas.offcanvas-start {
    border-right: 0
}

.offcanvas.offcanvas-end {
    border-left: 0
}

.offcanvas.offcanvas-start {
    border-right: 0
}

.offcanvas-header .logo {
    width: 3.75rem;
    height: 3.75rem;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.offcanvas-header .btn-close {
    background: #fff;
    color: #2b3850;
    display: flex;
    gap: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0rem;
    -webkit-border-radius: 0rem;
    -moz-border-radius: 0rem;
    -ms-border-radius: 0rem;
    -o-border-radius: 0rem;
    border-radius: 0rem;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.offcanvas-header .btn-close svg {
    width: 100%;
    height: 100%
}

.offcanvas-header .btn-close:not([disabled]):hover {
    opacity: 1;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.offcanvas-header .btn-close:not([disabled]):hover svg path {
    fill: #e41b54
}

.offcanvas-body {
    padding-top: 0
}

.offcanvas-body .mobilelist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column
}

.offcanvas-body .mobilelist-link {
    color: #2b3850;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.625rem;
    letter-spacing: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-transform: uppercase;
    -webkit-transition: color 350ms ease-in-out;
    -moz-transition: color 350ms ease-in-out;
    -ms-transition: color 350ms ease-in-out;
    -o-transition: color 350ms ease-in-out;
    transition: color 350ms ease-in-out
}

.offcanvas-body .mobilelist-link:hover:not(.active) {
    color: #0876fd
}

.offcanvas-body .mobilelist-link.active {
    color: #0876fd
}

.offcanvas-body::-webkit-scrollbar {
    background: rgba(0, 0, 0, 0);
    width: 0.5rem
}

.offcanvas-body::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem
}

.modal-content {
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    border: none
}

.modal-header {
    border-bottom: 0
}

.modal-header .btn-close {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1
}

.modal-header .btn-close svg {
    width: 100%;
    height: 100%;
    -webkit-transition: transform 350ms ease-in-out;
    -moz-transition: transform 350ms ease-in-out;
    -ms-transition: transform 350ms ease-in-out;
    -o-transition: transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out
}

.modal-header .btn-close:not([disabled]):hover svg {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.supportform {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem
}

@media screen and (min-width: 36rem) {
    .supportform {
        padding: 1.875rem 1.875rem
    }
}

@media screen and (min-width: 36rem) {
    .supportform {
        padding: 2.375rem 3.125rem
    }
}

.supportform-header {
    border-bottom: solid 0.0625rem #dde4e9;
    padding-bottom: 1.25rem
}

.supportform-header .title {
    color: #2b3850;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5
}

.supportform-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.checkoutform {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem
}

@media screen and (min-width: 36rem) {
    .checkoutform {
        padding: 1.875rem 1.875rem
    }
}

@media screen and (min-width: 36rem) {
    .checkoutform {
        padding: 2.375rem 3.125rem
    }
}

.checkoutform-header {
    border-bottom: solid 0.0625rem #dde4e9;
    padding-bottom: 1.25rem
}

.checkoutform-header .title {
    color: #2b3850;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5
}

.checkoutform .product-cart {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: solid 0.0625rem #dde4e9;
    padding-bottom: 1.25rem
}

.checkoutform .product-cart .product-thumb {
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem
}

.checkoutform .product-cart .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.checkoutform .product-cart .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem
}

.checkoutform .product-cart .product-info .product-title {
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4285714286;
    color: #425466
}

.checkoutform .product-cart .product-info .product-text {
    font-size: 0.625rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3
}

.checkoutform .product-cart .product-price h3 {
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4285714286;
    color: #425466
}

.checkoutform .coupon {
    padding-top: 0.875rem;
    padding-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.checkoutform .coupon-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.checkoutform .coupon-header .title,
.checkoutform .coupon-header .price {
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4285714286;
    color: #425466
}

.checkoutform .coupon .coupon-box {
    display: flex;
    gap: 0.375rem;
    border-bottom: solid 0.0625rem #dde4e9;
    padding-bottom: 1.25rem
}

.checkoutform .coupon .coupon-box input {
    flex: 1;
    border-radius: 0.375rem;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    -ms-border-radius: 0.375rem;
    -o-border-radius: 0.375rem;
    border-radius: 0.375rem;
    padding: 0.625rem;
    border: solid 0.0625rem #e2e8f0;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.checkoutform .coupon .coupon-box input:focus {
    border-color: #0876fd
}

.checkoutform .coupon .coupon-box .btn-coupon {
    padding: 0.625rem 1.25rem;
    border: none;
    background: linear-gradient(151.47deg, #02D7F8 9.01%, #0876FC 84.28%);
    color: #fff;
    border-radius: 0.375rem;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    -ms-border-radius: 0.375rem;
    -o-border-radius: 0.375rem;
    border-radius: 0.375rem
}

.checkoutform .total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: dashed 0.125rem #dde4e9;
    padding-bottom: 1.25rem
}

.checkoutform .total-price,
.checkoutform .total-title {
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4285714286;
    color: #425466
}

.checkoutform .payment {
    display: flex;
    flex-direction: column;
    padding-top: 0.875rem;
    gap: 1.25rem
}

.checkoutform .payment-header .payment-title {
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4285714286;
    color: #425466
}

.checkoutform .payment-methods {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px
}

.checkoutform .payment-methods .payment-method {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #dde4e9;
    height: 5rem;
    width: 6.125rem;
    position: relative;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    cursor: pointer
}

.checkoutform .payment-methods .payment-method:last-child {
    margin-bottom: 0
}

.checkoutform .payment-methods .payment-method:hover {
    cursor: pointer
}

.checkoutform .payment-methods .payment-method.selected {
    border: 1px solid #0876fc
}

.checkoutform .payment-methods .payment-method.selected .method-radio {
    border-color: #0876fc
}

.checkoutform .payment-methods .payment-method.selected .method-radio::before {
    background-color: #0876fc;
    border-color: red
}

.checkoutform .payment-methods .payment-method input[type=radio] {
    display: none
}

.checkoutform .payment-methods .payment-method .method-radio {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid #dde4e9;
    background: #dde4e9;
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.checkoutform .payment-methods .payment-method .method-radio::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.checkoutform .payment-methods .payment-method .method-content img {
    margin-right: 8px
}

.checkoutform .success-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 0rem;
    gap: 1.25rem
}

.checkoutform .success-wrapper .success-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem
}

.checkoutform .success-wrapper .success-content .success-title {
    color: #425466;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4285714286
}

.checkoutform .success-wrapper .success-content .success-text {
    color: #425466;
    font-family: "Titillium Web", sans-serif;
    font-size: .75rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.3333333333
}

.tooltip-inner {
    background: #2b3850;
    font-size: 0.75rem
}

.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: #2b3850
}

.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: #2b3850
}

.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: #2b3850
}

.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: #2b3850
}

.footer {
    background: #021022;
    padding: 3.375rem 0
}

.footer-details {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 20rem;
    text-align: center;
    margin-inline: auto
}

@media screen and (min-width: 48rem) {
    .footer-details {
        margin: 0;
        text-align: left;
        align-items: flex-start
    }
}

.footer-details .logo {
    width: 5rem;
    height: 5rem;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.footer-details .newsletter {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.25rem;
    position: relative
}

.footer-details .newsletter .inputbox {
    height: 2.25rem;
    width: calc(100% - 5.6875rem)
}

.footer-details .newsletter .inputbox .form-control {
    background: rgba(0, 0, 0, 0);
    color: #2b3850;
    border-radius: 0rem;
    -webkit-border-radius: 0rem;
    -moz-border-radius: 0rem;
    -ms-border-radius: 0rem;
    -o-border-radius: 0rem;
    border-radius: 0rem;
    font-size: 0.8125rem;
    width: 100%;
    height: 100%;
    border: 0
}

.footer-details .newsletter .inputbox .form-control::placeholder {
    color: #7b828a
}

.footer-details .newsletter .inputbox .form-control:focus {
    border: 0;
    box-shadow: none;
    outline: none
}

.footer-details .newsletter .inputbox .valid-feedback,
.footer-details .newsletter .inputbox .invalid-feedback {
    position: absolute;
    top: 100%;
    left: 0
}

.footer-details .newsletter .submitbox {
    width: 5.6875rem
}

.footer-details .basisthumb {
    width: 14.0625rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.footer-info .title {
    color: #9e9e9e;
    font-size: 1rem;
    font-weight: 600;
    font-feature-settings: "salt"
}

.footer-info .footerlist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.footer-info .footerlist-link {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    -webkit-transition: color 350ms ease-in-out;
    -moz-transition: color 350ms ease-in-out;
    -ms-transition: color 350ms ease-in-out;
    -o-transition: color 350ms ease-in-out;
    transition: color 350ms ease-in-out
}

.footer-info .footerlist-link:not([disabled]):hover {
    color: #0876fd
}

.footer .copyright {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 400
}

.footer .copyright span {
    color: inherit;
    font: inherit
}

table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px
}

table th,
table td {
    padding: 0.625rem 0.5rem;
    text-align: left
}

table td {
    border-bottom: 1px solid #dde4e9;
    color: #425466;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    max-width: 13.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

table th {
    background: #fff;
    color: #425466;
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5;
    border-bottom: 1px solid #dde4e9
}

table tr:hover {
    background-color: #f0f2f7
}

table tr:hover .buttons-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

table .buttons-wrapper {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    transform: translateX(100px)
}

table .buttons-wrapper button {
    border: none;
    background: rgba(0, 0, 0, 0)
}

.table-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px
}

.table-pagination a {
    display: inline-block;
    width: 1.875rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    text-decoration: none;
    color: #728197;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4285714286;
    border-radius: 5px;
    background: #f0f2f7;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.table-pagination a:hover:not(.active) {
    background-color: #cfd5e5
}

.table-pagination .active {
    background-color: #333;
    color: #fff
}

.table-pagination .prev,
.table-pagination .next {
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    margin-right: 10px
}

.table-pagination .disabled {
    opacity: .5;
    cursor: not-allowed
}

.customcheck-box:checked~.customcheck-label::before {
    background: #0876fd;
    border: 1px solid #e2e8f0
}

.customcheck-box:checked~.customcheck-label::after {
    opacity: 1;
    visibility: visible
}

.customcheck-label {
    position: relative;
    color: #425466;
    padding-left: 1.875rem;
    cursor: pointer;
    font-family: "Titillium Web", sans-serif;
    font-size: .875rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4285714286
}

.customcheck-label a {
    color: #0876fd
}

.customcheck-label a:not([disabled]):hover {
    text-decoration: underline
}

.customcheck-label::before,
.customcheck-label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0
}

.customcheck-label::before {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
    border-radius: 0.25rem;
    border: solid 0.0625rem #e2e8f0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.customcheck-label::after {
    width: 0.375rem;
    height: 0.75rem;
    border: solid 0.125rem #fff;
    border-top: 0;
    border-left: 0;
    left: 0.4375rem;
    -webkit-transform: translateY(-70%) rotate(45deg);
    -moz-transform: translateY(-70%) rotate(45deg);
    -ms-transform: translateY(-70%) rotate(45deg);
    transform: translateY(-70%) rotate(45deg);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.customcheck-label::selection {
    background: rgba(0, 0, 0, 0);
    color: #000
}

.hero {
    padding: 4.375rem 0rem;
    padding-bottom: 6.25rem
}

@media screen and (min-width: 62rem) {
    .hero {
        padding-bottom: 8.125rem
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 3.75rem
}

@media screen and (min-width: 62rem) {
    .hero-content {
        gap: 8.125rem
    }
}

.hero .left-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: flex-end;
    height: 100%;
    text-align: center
}

@media screen and (min-width: 62rem) {
    .hero .left-content {
        text-align: left
    }
}

.hero-title {
    color: #2b3850;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5333333333
}

@media screen and (min-width: 48rem) {
    .hero-title {
        font-family: "Titillium Web", sans-serif;
        font-size: 2.25rem;
        font-weight: 700;
        font-style: normal;
        line-height: 1.3888888889
    }
}

.hero .hero-image {
    max-height: 22.5rem;
    overflow: hidden;
    transform: translatey(0px);
    animation: float 8s ease-in-out infinite
}

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

.hero .subcribe-box {
    display: flex;
    gap: 0.625rem
}

.hero .subcribe-box input {
    background: #fff;
    border: solid 0.0625rem #d3d6df;
    padding: 0.75rem 1.5rem;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    flex: 1;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem
}

.hero .subcribe-box input:focus {
    border-color: #02d7f8
}

.featured {
    background: linear-gradient(135deg, #0A387A 0%, #6541C0 100%);
    padding: 3.75rem 0rem;
    padding-bottom: 4.375rem;
    margin-bottom: 3.125rem
}

@media screen and (min-width: 62rem) {
    .featured {
        margin-bottom: 5rem
    }
}

.featured-title {
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3.75rem
}

.amazingFeature {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem
}

@media screen and (min-width: 62rem) {
    .amazingFeature {
        gap: 3rem
    }
}

.amazingFeature-content {
    border-top: solid 0.0625rem #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 3.75rem 0
}

@media screen and (min-width: 62rem) {
    .amazingFeature-content {
        gap: 3.75rem;
        padding: 3.75rem 0 7.5rem
    }
}

.amazingFeature-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center
}

@media screen and (min-width: 62rem) {
    .amazingFeature-header {
        gap: 2.5rem
    }
}

.amazingFeature-header .amazingFeature-title {
    color: #2b3850;
    font-weight: 600
}

.amazingFeature-header .amazingFeature-text {
    color: #2b3850;
    font-size: 0.875rem;
    font-weight: 400
}

.amazingFeature .amazingFeature-thumb {
    border-radius: 1.25rem;
    -webkit-border-radius: 1.25rem;
    -moz-border-radius: 1.25rem;
    -ms-border-radius: 1.25rem;
    -o-border-radius: 1.25rem;
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
    max-height: 31.875rem
}

.amazingFeature .amazingFeature-thumb::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg)
}

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

.amazingFeature .amazingFeature-thumb:not([disabled]):hover::before {
    -webkit-animation: shine 1s;
    animation: shine 1s
}

.ourProduct {
    padding-bottom: 3.125rem
}

@media screen and (min-width: 62rem) {
    .ourProduct {
        padding-bottom: 7.5rem
    }
}

.ourProduct-title {
    border-top: solid 0.0625rem #e0e0e0
}

.ourProduct-title .title {
    text-align: center;
    padding: 5rem 0rem;
    color: #2b3850;
    font-weight: 600
}

.integration {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem
}

@media screen and (min-width: 62rem) {
    .integration {
        gap: 3rem
    }
}

.integration-content {
    border-top: solid 0.0625rem #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 3.75rem 0
}

@media screen and (min-width: 62rem) {
    .integration-content {
        gap: 3.75rem;
        padding: 3.75rem 0 7.5rem
    }
}

.integration-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center
}

@media screen and (min-width: 62rem) {
    .integration-header {
        gap: 2.5rem
    }
}

.integration-header .integration-title {
    color: #2b3850;
    font-weight: 600
}

.integration-header .integration-text {
    color: #2b3850;
    font-size: 0.875rem;
    font-weight: 400
}

.integration-body {
    background: #fff;
    border-radius: 0.625rem;
    -webkit-border-radius: 0.625rem;
    -moz-border-radius: 0.625rem;
    -ms-border-radius: 0.625rem;
    -o-border-radius: 0.625rem;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.625rem
}

.integration-body .card-integration {
    background: #f7f6f9;
    border-radius: 0.625rem;
    -webkit-border-radius: 0.625rem;
    -moz-border-radius: 0.625rem;
    -ms-border-radius: 0.625rem;
    -o-border-radius: 0.625rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1.25rem
}

.integration-body .card-integration[data-integration=rectangle] {
    width: 12.5rem;
    height: 5.375rem
}

.integration-body .card-integration[data-integration=square] {
    width: 5.375rem;
    height: 5.375rem
}

@-webkit-keyframes shine {
    100% {
        left: 125%
    }
}

@keyframes shine {
    100% {
        left: 125%
    }
}

@keyframes float {
    0% {
        transform: translatey(0px)
    }

    50% {
        transform: translatey(-20px)
    }

    100% {
        transform: translatey(0px)
    }
}

.servicesHero {
    padding: 1.875rem 0rem
}

@media screen and (min-width: 62rem) {
    .servicesHero {
        padding: 3.75rem 0rem
    }
}

.servicesHero-content {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    align-items: center;
    text-align: center
}

@media screen and (min-width: 62rem) {
    .servicesHero-content {
        gap: 3.125rem
    }
}

.servicesHero-header {
    display: flex;
    flex-direction: column;
    gap: 0.875rem
}

.servicesHero-title {
    color: #2a374e;
    font-weight: 600
}

.servicesHero-thumb {
    max-width: 60rem;
    margin: auto
}

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

.services {
    padding-bottom: 6.25rem
}

.buildingWebsite {
    padding-bottom: 6.25rem
}

.buildingWebsite .building-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    text-align: center;
    padding: 0.625rem
}

@media screen and (min-width: 62rem) {
    .buildingWebsite .building-content {
        align-items: flex-start;
        text-align: left
    }
}

.buildingWebsite .building-content .building-title {
    color: #4a5568;
    font-weight: 600;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    font-style: normal;
    line-height: 2.0833333333
}

@media screen and (min-width: 36rem) {
    .buildingWebsite .building-content .building-title {
        font-family: "Titillium Web", sans-serif;
        font-size: 2rem;
        font-weight: 600;
        font-style: normal;
        line-height: 2.1875
    }
}

.buildingWebsite .building-content .building-text {
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.875;
    color: #728197
}

.buildingWebsite .building-content .building-contact {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-direction: column;
    padding-top: 1.875rem
}

@media screen and (min-width: 62rem) {
    .buildingWebsite .building-content .building-contact {
        flex-direction: row
    }
}

.buildingWebsite .buildingWebsite-thumb img {
    margin: auto
}

.rotate-element {
    display: inline-block;
    animation: rotate 8s linear infinite
}

.animate-element {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    white-space: nowrap;
    background-color: red;
    z-index: 900;
    animation: slide 10s linear infinite
}

@keyframes slide {
    0% {
        left: 0
    }

    100% {
        left: calc(100% - 100px)
    }
}

.productDetail {
    padding: 3.125rem 0rem
}

@media screen and (min-width: 62rem) {
    .productDetail {
        padding: 3.75rem siz(0);
        padding-bottom: 6.875rem
    }
}

.productDetail .product-title {
    font-family: "Titillium Web", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5833333333;
    color: #2b3850;
    padding-bottom: 3.75rem
}

@media screen and (min-width: 36rem) {
    .productDetail .product-title {
        font-family: "Titillium Web", sans-serif;
        font-size: 1.875rem;
        font-weight: 700;
        font-style: normal;
        line-height: 1.5333333333
    }
}

.productDetail-info {
    display: flex;
    flex-direction: column;
    gap: 3.125rem
}

.productDetail .productDetail-content {
    background: #fff;
    border-radius: 0.875rem;
    -webkit-border-radius: 0.875rem;
    -moz-border-radius: 0.875rem;
    -ms-border-radius: 0.875rem;
    -o-border-radius: 0.875rem;
    border-radius: 0.875rem;
    border: solid 0.0625rem #edeff2;
    padding: 1.25rem 1.25rem
}

@media screen and (min-width: 36rem) {
    .productDetail .productDetail-content {
        padding: 2.625rem 2rem
    }
}

.productDetail .productDetail-content h4 {
    color: #1d293a;
    padding: 0.875rem 0rem
}

@media screen and (min-width: 36rem) {
    .productDetail .productDetail-content h4 {
        padding: 1.875rem 0rem
    }
}

.productDetail .productDetail-content p {
    color: #1d293a;
    line-height: 1.875rem
}

.productDetail .productDetail-content ul li {
    line-height: 1.875rem
}

.productDetail .productDetail-image {
    width: 100%;
    height: auto;
    border-radius: 1.25rem;
    -webkit-border-radius: 1.25rem;
    -moz-border-radius: 1.25rem;
    -ms-border-radius: 1.25rem;
    -o-border-radius: 1.25rem;
    border-radius: 1.25rem
}

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

.youMayLike {
    padding-bottom: 3.125rem
}

@media screen and (min-width: 62rem) {
    .youMayLike {
        padding-bottom: 7.5rem
    }
}

.youMayLike-title {
    border-top: solid 0.0625rem #e0e0e0
}

.youMayLike-title .title {
    text-align: center;
    padding: 5rem 0rem;
    color: #2b3850;
    font-weight: 600
}

.blog {
    padding: 3.75rem 0
}

@media screen and (min-width: 62rem) {
    .blog {
        padding: 3.75rem 0 7.5rem
    }
}

.blog-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

@media screen and (min-width: 62rem) {
    .blog-content {
        gap: 3.75rem
    }
}

.blog-header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.blog-header .blog-title {
    color: #2b3850;
    font-weight: 700
}

.support {
    padding: 1.875rem 0rem
}

@media screen and (min-width: 62rem) {
    .support {
        padding: 3.75rem 0rem
    }
}

@media screen and (min-width: 62rem) {
    .support .small-section {
        padding: 0rem 6.25rem
    }
}

.support-header {
    padding-bottom: 3.125rem
}

@media screen and (min-width: 36rem) {
    .support-header {
        padding-bottom: 5rem
    }
}

.support .section-title {
    color: #2a374e;
    font-weight: 700
}

.support .support-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center
}

@media screen and (min-width: 36rem) {
    .support .support-content {
        align-items: flex-start
    }
}

@media screen and (min-width: 62rem) {
    .support .support-content {
        padding-left: 5.625rem
    }
}

@media screen and (min-width: 36rem) {
    .support .support-content {
        padding: 1.25rem 1.875rem;
        padding-left: 2.5rem
    }
}

.support .support-title {
    color: #2a374e;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2222222222
}

.myAccount {
    padding: 1.875rem 0rem;
    padding-bottom: 6.25rem
}

.myAccount-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 0
}

@media screen and (min-width: 62rem) {
    .myAccount-content {
        flex-direction: row
    }
}

.myAccount-sidebar {
    background: #fff;
    padding: 1.25rem 0rem;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    padding-left: 1rem;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, .05)
}

@media screen and (min-width: 62rem) {
    .myAccount-sidebar {
        width: 14rem
    }
}

.myAccount-details {
    background-color: #fff;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, .05);
    flex: 1;
    padding: 1.875rem 1.875rem
}

@media screen and (min-width: 36rem) {
    .myAccount-details {
        padding: 2.5rem 3.125rem
    }
}

.userInfo {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-bottom: 1.875rem
}

.sidebarMenu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 7.5rem
}

.sidebarMenu-link {
    padding: 0.5rem 1.25rem;
    color: #728197;
    display: block
}

.sidebarMenu-link.active {
    color: #2b3850
}

.change-pass-text {
    color: #2b3850;
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5;
    padding: 1.875rem 0rem
}

@media screen and (min-width: 36rem) {
    .change-pass-text {
        padding: 3.125rem 0rem
    }
}

.authentications {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: flex-end; */
    /* min-height: 100vh; */
    /* padding: 0.875rem; */
    overflow-y: auto
}

@media screen and (min-width: 62rem) {
    .authentications {
        flex-direction: row;
        padding: 0;
    }
}

.authentications .forget {
    color: #425466
}

.authentications .forget:not([disabled]):hover {
    text-decoration: underline
}

.authentications .left-content,
.authentications .right-content {
    padding: 20px;
    width: 100%;
    margin-top:-15rem;
    padding-left: 5rem;
}

@media screen and (min-width: 62rem) {

    .authentications .left-content,
    .authentications .right-content {
        flex: 0 0 50%;
        max-width: 50%
    }
}

.authentications .left-content {
    display: flex;
    justify-content: center;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    height: 100%;
    padding: 2.5rem 1.25rem
}

.authentications .left-content figure {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.authentications .left-content figure img {
    max-width: 100%;
    height: auto
}

.authentication-form {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

@media screen and (min-width: 62rem) {
    .authentication-form {
        gap: 3.75rem
    }
}

.authentication-form-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.authentication-form-header .form-title {
    color: #2b3850;
    font-weight: 600
}

.authentication-form-footer {
    text-align: center
}

.authentication-form-footer p {
    color: #425466
}

.authentication-form-footer a {
    color: #0876fd
}

.authentication-form-footer a:not([disabled]):hover {
    text-decoration: underline
}

.authentication-form.forgot-form {
    width: 100%
}

@media screen and (min-width: 62rem) {
    .authentication-form.forgot-form {
        width: 80%
    }
}

@media screen and (min-width: 75rem) {
    .authentication-form.forgot-form {
        width: 70%
    }
}

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

.error-wrapper figure img {
    width: 100%;
    height: 100%;
    margin: auto
}

/*# sourceMappingURL=style.min.css.map */