:root {
    --primary: #009689;
    --primary-light: #00d5be;
    --secondary: #101a31;
    --body-bg: #020718;
    --section-bg: #101a30;
    --card-bg: #111a2e;
    --white: #fff;
    --grey-color-1: #90a1b9;
    --grey-color-2: #60708a;
    --border: #1D293D;
    --danger: #ff6174;
    --container: 1728px;
    --radius: 12px;
    --shadow: 0 14px 40px rgba(0, 213, 192, 0.31);
}

/*  ============= Arial Fonts Start ================= */
@font-face {
    font-family: "Arial";
    src:
        url("assets/fonts/ArialMT.woff2") format("woff2"),
        url("assets/fonts/ArialMT.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src:
        url("assets/fonts/Arial-BoldMT.woff2") format("woff2"),
        url("assets/fonts/Arial-BoldMT.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/*  ============= Arial Fonts End ================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--body-bg);
    color: var(--grey-color-1);
    font-family: "Arial";
    font-weight: normal;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s all;
}

button,
input,
select,
textarea {
    font: inherit;
    font-family: "Arial";
}

button {
    cursor: pointer;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    margin: 0 0 16px;
    color: var(--white);
    line-height: 1.12;
    font-weight: bold;
}

h1,
.h1 {
    font-size: 60px;
}

h2,
.h2 {
    font-size: 36px;
    line-height: 1.15;
}

h3,
.h3 {
    font-size: 20px;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-size: 18px;
}

p {
    margin: 0 0 16px;
    color: var(--grey-color-1);
}

p:last-child {
    margin: 0 0 0px;
}

.p-xl {
    font-size: 20px;
    line-height: 1.6;
}

.p-lg {
    font-size: 18px;
}

.p-sm {
    font-size: 14px;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: 36px;
    padding-right: 36px;
}

.container-narrow {
    max-width: 1060px;
    margin: auto;
}

.pt-64 {
    padding-top: 64px;
}

.pb-64 {
    padding-bottom: 64px;
}

.mt-64 {
    margin-top: 64px;
}

.mb-64 {
    margin-bottom: 64px;
}

.section-alt {
    background: var(--secondary);
}

.text-primary {
    color: var(--primary-light);
}

.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(2, 7, 24, 0.92);
    backdrop-filter: blur(16px);
}

.header-inner {
    position: relative;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


.site-logo {
    position: relative;
    z-index: 1;
}

.site-logo::before,
.site-logo::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 50px;
    height: 50px;
    z-index: 0;
    filter: blur(40px);
}

.site-logo::before {
    left: 50px;
    background-color: #cb5312;
}

.site-logo::after {
    left: 100px;
    background-color: #477bff;
}

.site-logo img {
    position: relative;
    z-index: 1;
    width: 150px;
}

.main-nav,
.main-nav ul {
    display: flex;
    align-items: center;
    gap: 38px;
}

.main-nav {
    position: relative;
    z-index: 1;
    color: #aab6ca;
    font-size: 14px;
}

.main-nav ul {
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    list-style-type: none;
}

.main-nav a:hover {
    color: var(--white);
}

.menu-toggle {
    display: none;
    border: 0;
    background: none;
    padding: 8px;
}

.btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 100px;
    padding: 12px 25px;
    color: var(--white);
    transition: 0.25s;
    line-height: 1;
}

.btn i {
    width: 22px;
    height: 22px;
}

.btn-primary {
    background: var(--primary);
    box-shadow: 0 10px 30px rgba(0, 213, 190, 0.18);
}

.btn-primary:hover {
    box-shadow: var(--shadow);
    background-color: var(--primary-light);
}

.btn-outline {
    border-color: #314158;
    background: #0f172b80;
}

.btn-outline:hover {
    color: var(--primary-light);
    border-color: var(--primary-light);
}

.btn-light {
    background: var(--white);
    color: var(--body-bg);
}

.btn-light:hover {
    background-color: var(--primary-light);
    box-shadow: var(--shadow);
}

.btn-light i {
    background-color: var(--body-bg);
}

.btn-small {
    min-height: 38px;
    padding: 8px 18px;
}

.btn-glass {
    transition: 0.3s all;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.219);
    box-shadow: 0px 28px 18.8px 0px #0F172B33;
}

.btn-glass:hover {
    box-shadow: var(--shadow);
    backdrop-filter: blur(2px);
    border-color: var(--primary-light);
    color: var(--primary-light);
    background-color: #00d5c029;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

/* ============== Icon CSS Start ===================== */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--primary-light);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    flex-shrink: 0;
}

.icon-check {
    mask-image: url("assets/images/icons/icon-check.svg");
    -webkit-mask-image: url("assets/images/icons/icon-check.svg");
}

.icon-check-line {
    mask-image: url("assets/images/icons/icon-check-line.svg");
    -webkit-mask-image: url("assets/images/icons/icon-check-line.svg");
}

.icon-menu {
    mask-image: url("assets/images/icons/icon-menu.svg");
    -webkit-mask-image: url("assets/images/icons/icon-menu.svg");
}

.icon-close {
    mask-image: url("assets/images/icons/icon-close.svg");
    -webkit-mask-image: url("assets/images/icons/icon-close.svg");
}

.icon-arrow-right {
    mask-image: url("assets/images/icons/icon-arrow-right.svg");
    -webkit-mask-image: url("assets/images/icons/icon-arrow-right.svg");
}

.icon-search {
    mask-image: url("assets/images/icons/icon-search.svg");
    -webkit-mask-image: url("assets/images/icons/icon-search.svg");
}

.icon-chart {
    mask-image: url("assets/images/icons/icon-chart.svg");
    -webkit-mask-image: url("assets/images/icons/icon-chart.svg");
}

.icon-grow {
    mask-image: url("assets/images/icons/icon-grow.svg");
    -webkit-mask-image: url("assets/images/icons/icon-grow.svg");
}

.icon-users {
    mask-image: url("assets/images/icons/icon-users.svg");
    -webkit-mask-image: url("assets/images/icons/icon-users.svg");
}

.icon-bolt {
    mask-image: url("assets/images/icons/icon-bolt.svg");
    -webkit-mask-image: url("assets/images/icons/icon-bolt.svg");
}

.icon-settings {
    mask-image: url("assets/images/icons/icon-settings.svg");
    -webkit-mask-image: url("assets/images/icons/icon-settings.svg");
}

.icon-dollar {
    mask-image: url("assets/images/icons/icon-dollar.svg");
    -webkit-mask-image: url("assets/images/icons/icon-dollar.svg");
}

.icon-map {
    mask-image: url("assets/images/icons/icon-map.svg");
    -webkit-mask-image: url("assets/images/icons/icon-map.svg");
}

.icon-briefcase {
    mask-image: url("assets/images/icons/icon-briefcase.svg");
    -webkit-mask-image: url("assets/images/icons/icon-briefcase.svg");
}

.icon-trophy {
    mask-image: url("assets/images/icons/icon-trophy.svg");
    -webkit-mask-image: url("assets/images/icons/icon-trophy.svg");
}

.icon-shield {
    mask-image: url("assets/images/icons/icon-shield.svg");
    -webkit-mask-image: url("assets/images/icons/icon-shield.svg");
}

.icon-quote {
    mask-image: url("assets/images/icons/icon-quote.svg");
    -webkit-mask-image: url("assets/images/icons/icon-quote.svg");
}

.icon-chevron-down {
    mask-image: url("assets/images/icons/icon-chevron-down.svg");
    -webkit-mask-image: url("assets/images/icons/icon-chevron-down.svg");
}

.icon-video {
    mask-image: url("assets/images/icons/icon-video.svg");
    -webkit-mask-image: url("assets/images/icons/icon-video.svg");
}

.icon-glob {
    mask-image: url("assets/images/icons/icon-glob.svg");
    -webkit-mask-image: url("assets/images/icons/icon-glob.svg");
}

.icon-share {
    mask-image: url("assets/images/icons/icon-share.svg");
    -webkit-mask-image: url("assets/images/icons/icon-share.svg");
}

.icon-mail {
    mask-image: url("assets/images/icons/icon-mail.svg");
    -webkit-mask-image: url("assets/images/icons/icon-mail.svg");
}

.icon-chat {
    mask-image: url("assets/images/icons/icon-chat.svg");
    -webkit-mask-image: url("assets/images/icons/icon-chat.svg");
}

.icon-layout {
    mask-image: url("assets/images/icons/icon-layout.svg");
    -webkit-mask-image: url("assets/images/icons/icon-layout.svg");
}

.icon-design {
    mask-image: url("assets/images/icons/icon-design.svg");
    -webkit-mask-image: url("assets/images/icons/icon-design.svg");
}

.icon-database {
    mask-image: url("assets/images/icons/icon-database.svg");
    -webkit-mask-image: url("assets/images/icons/icon-database.svg");
}

.icon-dash {
    mask-image: url("assets/images/icons/icon-dash.svg");
    -webkit-mask-image: url("assets/images/icons/icon-dash.svg");
}

/* ============== Icon CSS End===================== */

.hero {
    padding: 190px 0px 100px 0px;
}

.hero-grid,
.split-grid,
.service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.hero-content {
    max-width: 672px;
    width: 100%;
}

.hero-content h1 {
    margin-bottom: 30px;
    line-height: 1.25;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #1d293d;
    border-radius: 30px;
    color: var(--primary-light);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 22px;
    font-weight: 700;
    background-color: #0f172b;
    line-height: 1.2;
}

.dot,
.metric span i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-light);
}

.hero h1 span {
    color: var(--primary);
}

.hero-img-wrap {
    max-width: 816px;
    min-height: 540px;
    height: 100%;
    width: 100%;
    position: relative;
}

.hero-visual {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background:
        radial-gradient(circle at 55% 40%,
            rgba(0, 213, 190, 0.09),
            transparent 34%),
        var(--body-bg);
    overflow: hidden;
}

.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 16px;
    background: linear-gradient(180deg, #1d293d 0%, rgba(29, 41, 61, 0) 100%);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}


.metric {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px;
    border: 1px solid #314158;
    border-radius: 14px;
    background: #0F172BE5;
    box-shadow: 0px 25px 50px -12px #00000040;
    transition: 0.3s all;
    backdrop-filter: blur(6px);
}

.metric:hover {
    box-shadow: none;
}

.metric-top {
    right: 60px;
    top: -18px;
}

.metric-bottom {
    left: 48px;
    bottom: -24px;
}

.metric span {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.metric span,
.metric small {
    font-size: 12px;
}

.metric span i {
    width: 12px;
    height: 12px;
    display: inline-block;
}

.metric strong {
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
}

.trusted-mini {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    font-size: 13px;
    color: #62748E;
}

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

.avatars i,
.avatars img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #263550;
    border: 2px solid var(--body-bg);
    margin-left: -8px;
    object-fit: cover;
    object-position: center;
}

.avatars i:first-child {
    margin-left: 0;
}

.trust-strip {
    text-align: center;
}

.overline {
    text-transform: uppercase;
    font-weight: bold;
    color: #45556C;
    letter-spacing: 1.4px;
    margin-bottom: 24px;
}

.logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 960px;
    width: 100%;
    margin: auto;
}

.logo-row span {
    color: #90A1B9;
    opacity: 30%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.logo-row span.comapany-img {
    flex-shrink: 0;
    border-radius: 4px;
    background-color: #314158;
    width: 32px;
    height: 32px;
    overflow: hidden;
    display: inline-block;
}

.logo-row span.comapany-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.problem-visual {
    max-width: 704px;
    position: relative;
    min-height: 680px;
    height: 100%;
    border-radius: 16px;
    background: #00BBA71A;
    overflow: hidden;
    box-shadow: 0px 25px 50px -12px #00000040;
    border: 1px solid #31415880;
}

.problem-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.float-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border-radius: 12px;
    background: #11192d;
    border: 1px solid #314158;
    background-color: #0F172BE5;
    box-shadow: 0px 10px 15px -3px #0000001A;
}

.float-card span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.float-card span i {
    width: 15px;
    height: 15px;
}

.float-card strong {
    padding-bottom: 7px;
    margin-bottom: 3px;
}

.float-card.bad strong {
    color: var(--danger);
    border-bottom: 1px solid #1D293D;
}

.float-card.bad span i {
    background-color: var(--danger);
}

.float-card.bad {
    right: 36px;
    top: 32px;
    transform: rotate(3deg);
}

.float-card.good {
    left: 24px;
    bottom: 24px;
    transform: rotate(-2deg);
    background: #0B4F4AE5;
    border: 1px solid #00786F80;
}

.float-card.good strong {
    color: #CBFBF1;
    border-bottom: 1px solid #00BBA74D;
}

.float-card.good span {
    color: #96F7E4;
}

.float-card.good span i {
    background-color: var(--primary-light);
}

.problem-copy {
    max-width: 645px;
}

.problem-copy .title {
    margin-bottom: 26px;
}

.problem-copy p {
    margin-bottom: 24px;
}

.check-row {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin: 18px 0;
}

.check-row .list-wrap .list-title {
    color: var(--white);
    font-weight: 700;
    margin-bottom: 3px;
}

.check-row .list-wrap .list-desc {
    color: #62748E;
}

.check-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid #00BBA733;
    background-color: #0B4F4A4D;
    border-radius: 50%;
}

.check-row span i {
    width: 16px;
    height: 16px;
}

.check-row strong,
.check-row small {
    display: block;
}

.check-row strong {
    color: var(--white);
    font-size: 16px;
}

.check-row small {
    margin-top: 3px;
}

.problem-copy .btn {
    margin-top: 12px;
}

.section-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}

.comparison-table {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--section-bg);
    overflow: hidden;
    font-size: 14px;
}

.table-row {
    display: grid;
    grid-template-columns: 0.8fr 0.5fr 1fr;
    align-items: center;
    min-height: 74px;
    border-bottom: 1px solid var(--border);
}

.table-row>* {
    padding: 18px 24px;
}

.table-row>strong {
    color: var(--white);
    font-size: 16px;
}

.table-head strong {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #62748E;
    font-size: 14px;
}

.table-head span,
.table-row>span {
    text-align: center;
}

.table-head span {
    font-weight: 700;
    width: fit-content;
    margin: auto;
    padding: 5px 16px;
    background-color: #1D293D;
    border-radius: 100px;
}

.table-head .active-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 4px solid var(--primary);
}

.table-head span.active {
    color: #fff;
    background-color: var(--primary);
    box-shadow: var(--shadow);
}

.negative,
.positive,
.dash {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.negative i {
    background-color: var(--danger);
}

.dash i {
    background-color: #45556C;
}

.negative i,
.positive i,
.dash i {
    width: 16px;
    height: 16px;
}

.negative {
    color: #90A1B9;
}

.active-wrap,
.positive {
    max-width: 530px;
}

.positive {
    color: #CBFBF1;
    background-color: #00BBA70D;
    padding: 4px 16px;
}

.positive.cmo-negative {
    color: var(--danger);
    background-color: rgb(255 0 0 / 9%);
}

.positive.cmo-negative i {
    background-color: var(--danger);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.feature-card,
.partner-grid article,
.quote-card {
    padding: 32px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: 0px 4px 6px -4px #00000033;

}

.card-icon-wrap {
    width: 48px;
    height: 48px;
    border: 1px solid #00BBA733;
    background-color: #0B4F4A33;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feature-card p {
    max-width: 380px;
    width: 100%;
    line-height: 1.65;
}

.feature-card h3,
.partner-grid h3 {
    margin-top: 24px;
}

.roadmap,
.tools {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    gap: 28px;
    text-align: center;
}

.steps:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    top: 44px;
    border-top: 2px solid #1D293D;
}

.step-icon {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    border: 4px solid #1D293D;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0F172B;
}

.step-inner-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1D293D;
    border-radius: 50%;
}

.step-inner-icon i {
    width: 30px;
    height: 30px;
}

.step-icon b {
    position: absolute;
    right: -8px;
    top: -10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 50%;
    background: #1D293D;
    font-size: 14px;
    border: 1px solid #314158;
    font-weight: 700;
    color: var(--white);
}

.tools p {
    max-width: 625px;
    width: 100%;
    margin-bottom: 0px;
}

.tool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 48px;
    max-width: 1600px;
    width: 100%;
}

.tool-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    border: 1px solid var(--border);
    background: #020618;
    color: #E2E8F0;
    font-weight: 700;
    border-radius: 10px;
}

.tool-list span i {
    width: 20px;
    height: 20px;
    background-color: #62748E;
}

.tool-list span,
.tool-list em {
    font-size: 14px;
}

.tool-list em {
    transition: 0.3s all;
    cursor: pointer;
    padding: 10px;
    color: #67768e;
    display: flex;
    align-items: center;
    justify-content: start;
}

.tool-list em:hover {
    color: var(--white);
}

.bars-cta {
    overflow: hidden;
}

.bar-chart-container {
    position: relative;
    min-height: 652px;
}

.bar-chart-heading-wrap {
    position: relative;
    z-index: 2;
    text-align: center;
}

.bar-chart-wrap {
    position: relative;
}

.bar-chart-img-wrap {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: calc(100% - 72px);
    left: 50%;
    transform: translateX(-50%);
}

.bar-chart-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.partner-panel {
    padding: 62px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(120deg, #172038, #14283a);
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.partner-grid article {
    background-color: #FFFFFF0D;
    border-color: #FFFFFF0D;
}

.partner-grid article .card-icon-wrap {
    box-shadow: 0px 10px 15px -3px #0B4F4A80;
    background-color: var(--primary-light);
}

.partner-grid article .card-icon-wrap i {
    background-color: var(--white);
}

.partner-grid article p {
    max-width: 350px;
    width: 100%;
    color: #CAD5E2;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.audience-content-wrapper {
    background-color: #0F172B;
    border-radius: 20px 0px 0px 20px;
}

.audience-content-wrapper,
.fit-grid {
    padding: 40px;
}

.fit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    border: 1px solid var(--border);
    border-radius: 0px 20px 20px 0px;
    align-items: center;
}

.fit-grid .audience-card {
    position: relative;
    border-radius: 12px;
}

.audience-img {
    height: 292px;
    border: 1px solid var(--border);
    background: #0F172B;
    border-radius: 14px;
    overflow: hidden;
}

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

.fit-grid .perfect .audience-img {
    border-color: #00BBA780;
    border-width: 2px;
    background: #022F2E4D;
}

.audience-content {
    text-align: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
    margin-inline: 16px;
}

.audience-content .name {
    color: var(--white);
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.4;
}

.fit-grid .perfect b {
    position: absolute;
    font-weight: 400;
    line-height: 1;
    left: 50%;
    transform: translateX(-50%);
    top: -10px;
    padding: 4px 10px;
    border-radius: 20px;
    background-color: var(--primary);
    color: var(--white);
    font-size: 12px;
    width: max-content;
}

.service-grid {
    gap: 0;
    border: 1px solid #1D293DCC;
    background-color: #0F172B;
    border-radius: 16px;
    overflow: hidden;
}

.service-img-wrap {
    min-height: 540px;
    height: 100%;
    border-radius: 16px;
    background: #314158;
    display: grid;
    place-items: center;
}

.service-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.service-content-wrapper {
    padding: 120px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.service-content-wrapper p {
    margin-bottom: 0px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.tag-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background-color: #020618;
    color: #E2E8F0;
    font-weight: 700;
    font-size: 14px;
}

.tag-list .icon {
    width: 17px;
    height: 17px;
}


.team {
    border-top: 1px solid #0F172B;
}

.team-card {
    text-align: center;
}

.team-img-wrap {
    height: 334px;
    border: 1px solid #1D293DCC;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(0deg, #0f172b00, #0F172B);
}

.team-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.team-card h3 {
    margin: 20px 0 4px;
}

.team-card span {
    display: block;
    color: var(--primary-light);
    margin: 10px 0px;
}

.swiper-pagination {
    position: relative !important;
    inset: 0 !important;
    margin-top: 20px;
}

.swiper-pagination-bullet {
    background: #526079;
}

.swiper-pagination-bullet-active {
    background: var(--primary);
}

.quote-card {
    height: auto;
}

.testimonial-slider,
.contact-grid {
    width: 100%;
    max-width: 1490px;
    margin: auto;
}

.testi-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.testi-profile .profile-pic {
    border: 1px solid #FFFFFF00;
    width: 48px;
    height: 48px;
    box-shadow: 0px 0px 0px 2px #1D293D;
    border-radius: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.testi-profile .profile-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.testi-profile .designation {
    color: #62748E;
}

.quote-card .icon {
    width: 40px;
    height: 40px;
    margin-bottom: 24px;
}

.quote-icon {
    margin-bottom: 20px;
}

.quote-card blockquote {
    margin: 0 0 28px;
    color: #CAD5E2;
    font-style: italic;
    font-size: 18px;
}

.quote-card strong,
.quote-card span {
    display: block;
}

.quote-card strong {
    color: var(--white);
    margin-bottom: 2px;
}

.contact-section {
    background: #0B514C;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 50px;
}

.contact-content-wrapper p,
.contact-content-wrapper ul li {
    color: #CBFBF1;
}

.contact-content-wrapper p {
    max-width: 500px;
    margin-bottom: 35px;
}

.contact-content-wrapper ul {
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}


.lead-form {
    padding: 34px;
    background: #020618;
    border: 1px solid var(--border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    box-shadow: 0px 25px 50px -12px #00000040;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.lead-form label {
    font-size: 14px;
    color: #CAD5E2;
}

.lead-form input,
.lead-form select {
    display: block;
    width: 100%;
    margin-top: 7px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 15px;
    color: #fff;
    background: #0F172B;
    outline: none;
}

.lead-form input:focus {
    border-color: var(--primary);
}

.lead-form input::placeholder {
    color: #62748E;
}

.lead-form small {
    text-align: center;
    font-size: 12px;
    color: #62748E;
    display: block;
    width: 100%;
}

.lead-form button {
    width: 100%;
    margin-top: 5px;
}

.lead-form button .wpcf7-spinner {
    width: 18px;
    height: 18px;
    margin: 0;
}

.lead-form .wpcf7-response-output {
    margin: 0px 0px 0px 0px !important;
    font-size: 14px;
    border-radius: 10px;
    border-width: 1px !important;
    text-align: center;
}

.faq .section-heading {
    margin-bottom: 30px;
}

.lead-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lead-form form p {
    position: relative;
    margin: 0;
}

.lead-form form p .wpcf7-not-valid-tip {
    position: absolute;
    top: calc(100% + 1px);
    font-size: 12px;
}

.lead-form form p .wpcf7-form-control-wrap {
    display: block;
}

.accordion article {
    border-bottom: 1px solid var(--border);
}

.accordion button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    border: 0;
    background: none;
    color: var(--white);
    text-align: left;
    font-weight: 700;
}

.accordion button .icon {
    width: 18px;
    height: 18px;
    background-color: #8492a8;
    transition: 0.2s;
}

.accordion article .answer {
    display: none;
    padding: 0 45px 10px 0;
}

.accordion article.active button .icon {
    transform: rotate(180deg);
}

.site-footer {
    border-top: 1px solid #0F172B;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 60px;
    padding: 35px 0px;
}

.footer-brand {
    width: 140px;
    display: inline-block;
/*     margin-bottom: 16px; */
}

.footer-brand img {
    width: 100%;
}

.footer-grid>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

.footer-grid h4 {
    margin-bottom: 7px;
}

.footer-links-wrap a:hover {
    color: var(--white);
}

.footer-social-media {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-social-media li {
    list-style-type: none;
}

.footer-social-media li a i {
    transition: 0.3s all;
    background-color: #90A1B9;
    width: 20px;
    height: 20px;
}

.footer-social-media li a:hover i {
    background-color: var(--primary-light);
}

.logo-content-wrap {
/*     max-width: 315px; */
    width: 100%;
}

.copyright {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
	align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #45556C;
}

.copyright-link-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}

.copyright-link-wrap a:hover {
    color: var(--white);
}


/* ================== RTL CSS START ======================= */
html[dir="rtl"] .audience-content-wrapper {
    border-radius: 0px 20px 20px 0px;
}

html[dir="rtl"] .fit-grid {
    border-radius: 20px 0px 0px 20px;
}

html[dir="rtl"] .lead-form form,
html[dir="rtl"] .lead-form form input,
html[dir="rtl"] .lead-form form select,
html[dir="rtl"] .lead-form form textarea {
    direction: rtl;
}

html[dir="rtl"] .accordion article .answer {
    padding: 0 0 10px 45px;
}

html[dir="rtl"] .btn i {
    rotate: 180deg;
}

html[dir="rtl"] .avatars i:first-child {
    margin-left: -8px;
}

html[dir="rtl"] .avatars i:last-child {
    margin-left: 0px;
}

/* ================== RTL CSS END======================= */