:root {
   
    /* primitives */
    --color-primary: 223 169 61;
    --color-secondary: 175 113 50;
    --color-dark: 17 24 39;
    --color-text: 71 85 105;
    --color-white: 255 255 255;
    --color-muted: 156 163 175;

    --radius-xl: 1.5rem;
    --radius-lg: 1.25rem;
    --radius-md: 1rem;
    --radius-sm: 0.5rem;

    /* semantic */
    --grad-blue: linear-gradient(145deg, #60A5FA, #2563EB);
    --grad-green: linear-gradient(145deg, #4ADE80, #10B981);
    --grad-indigo: linear-gradient(145deg, #818CF8, #9333EA);
    --grad-yellow-red: linear-gradient(145deg, #FACC15, #EF4444);
    --grad-cyan-green: linear-gradient(145deg, #22D3EE, #22C55E);
    --grad-pink: linear-gradient(145deg, #C084FC, #EC4899);
    --grad-text-primary: linear-gradient(to right, rgb(var(--color-primary)), rgb(var(--color-secondary)));

    --leading-tight: 1.2;
    --leading-normal: 1.5;

    --space-xxs: 0.25rem; /* 4px */
    --space-xs: 0.5rem; /* 8px */
    --space-sm: 0.75rem; /* 12px */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 3rem; /* 48px */
    --space-3xl: 4rem; /* 64px */
    --space-4xl: 5rem; /* 80px */
    --space-5xl: 6rem; /* 96px */

    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */

    --shadow-md: 0 10px 15px -5px rgb(0 0 0 / 0.15);
    --shadow-sm: 0 5px 10px -2px rgb(0 0 0 / 0.15);
    --floating-offset: 80px;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-size: var(--text-base);
    color: rgb(var(--color-text));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1360px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: rgb(var(--color-dark));
    line-height: var(--leading-normal);
    margin-block-end: var(--space-lg);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-sm {
    font-size: var(--text-sm);
}

.font-semibold {
    font-weight: 600;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.125rem);
}

h2 {
    font-size: clamp(1.6rem, 4.5vw, 2.5rem);
}

@media (min-width:1441px) {
    h1 {
        font-size: clamp(2.5rem, 5vw, 3.75rem);
    }

    h2 {
        font-size: clamp(1.75rem, 4.5vw, 3.25rem);
    }
}

ul {
    list-style: none;
}

p {
    margin-block-end: 1.5em;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: rgb(var(--color-primary));
}

a:focus-visible {
    outline: 1px solid rgb(var(--color-primary));
    outline-offset: 1px;
}

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

img[src="images/prime.svg"] {
  aspect-ratio: 200 / 60;
}

.start--chat {
    background: var(--grad-text-primary);
    border-radius: var(--floating-offset);
    transition: transform 0.3s ease, opacity 0.3s ease;
    padding: var(--space-sm) var(--space-md);
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 5.5rem;
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.start--chat:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

.start--chat svg {
    width: 45px;
    height: auto;
    fill: rgb(var(--color-white));
}

.btn {
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border: 0;
    padding: var(--space-sm) var(--space-md);
}

@media (min-width: 768px) {
    .btn {
        padding: var(--space-md) var(--space-lg);
    }
}

.btn-link {
    color: rgb(var(--color-dark));
    box-shadow: none;
    text-decoration: none;
}

.btn-primary {
    background: var(--grad-text-primary);
    color: rgb(var(--color-white));
    border: 2px solid rgb(var(--color-primary));
}

@media (hover: hover) {
    .btn:hover {
        transform: scale(1.05);
        border-color: rgb(var(--color-primary));
    }

    a:hover {
        text-decoration: none;
        box-shadow: none;
    }

    .main--featured-card:hover {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }
}

.btn i {
    font-weight: 300;
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid rgb(var(--color-primary));
    color: rgb(var(--color-primary));
}

.btn-outline-primary:hover {
    background: rgb(var(--color-primary));
    color: rgb(var(--color-white));
    border-color: rgb(var(--color-primary));
}

.navbar {
    background: rgb(254 253 251);
    min-height: 86px;
}

.navbar-nav {
    gap: 12px;
}

@media (min-width: 1400px) {
    .navbar-nav {
        gap: var(--space-lg);
    }
}

.navbar-light .navbar-nav .nav-link {
    border-radius: 6px;
    color: rgb(var(--color-dark));
    padding: var(--space-xs) var(--space-sm);
    font-weight: 400;
    font-size: var(--text-base);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    background-color: #ECF4FF;
}

.navbar-light .navbar-nav .dropdown-toggle::after {
    width: 6px;
    height: 6px;
    border: 0;
    border-right: 2px solid;
    border-bottom: 2px solid;
    transform: rotate(45deg);
    vertical-align: 0.25rem;
}

.navbar .btn-primary {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-lg);
    font-weight: 600;
}

/*-=-=-=-=-
Hero Section
-=-=-=-=-=*/

section {
    padding: 3.75rem 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
}

@media (min-width: 768px) {
    section {
        padding: 80px 0;
    }
}

.hero-section, .inner--banner {
    background: linear-gradient(180deg, rgb(var(--color-primary) / 0.02) 0%, rgb(var(--color-secondary) / 0.08) 100%);
    padding-block-end: var(--floating-offset);
    padding-block-start: calc(var(--floating-offset) / 1.5);
}

.hero-section {
   min-height: clamp(500px, 80vh, 756px);
}

.hero-section .trusted--badge {
    background-color: rgb(var(--color-white) / 0.8);
    border: 1px solid rgb(var(--color-dark) / 0.1);
    border-radius: 50px;
    box-shadow: var(--shadow-md);
    padding: 8px 16px;
    margin-block-end: 20px;
    width: fit-content;
}

.trusted--badge .star--list li svg {
    width: auto;
    height: 1rem;
    fill: #FACC15;
    color: #FACC15;
}

.hero-section .trusted--badge p {
    color: rgb(var(--color-text));
    font-weight: 600;
    font-size: var(--text-sm);
}

.trusted--badge .anim--dot {
    width: 12px;
    height: 12px;
    border-radius: var(--floating-offset);
    background-color: #22C558;
    transition: opacity 0.3s, transform 0.3s;
    animation: pulse 2s ease-in-out 3;
}

@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anim--dot {
        animation: none;
    }
}

h1 span,
h2 span {
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: var(--grad-text-primary);
}

.hero-section h1 {
    margin-block-end: 20px;
}

.hero-section p {
    font-size: var(--text-lg);
    margin-block-end: 20px;
}

.hero-section .btn-primary svg {
    width: 1rem;
    height: auto;
    color: rgb(var(--color-white));
    margin-left: 8px;
}

.trusted--list .list-group-item {
    background-color: transparent;
    border: 0;
    padding: 0;
    color: rgb(var(--color-text));
    font-weight: 600;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-section .trusted--list .list-group-item svg {
    width: 1rem;
    height: 1rem;
    color: #22C558;
}

.carousel--container {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    background: linear-gradient(145deg, rgb(var(--color-dark)) 0%, #1E3A8A 100%);
    border: 1px solid rgb(226 232 240 / 0.5);
}

.carousel-fade {
    background-color: rgb(var(--color-white) / 0.1);
    border: 1px solid rgb(var(--color-white) / 0.1);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin-block-end: 0;
}

.carousel-fade img {
    border-radius: var(--radius-md);
}

.carousel--container .card-group {
    gap: var(--space-lg);
    border: 0;
    background: none;
    transform: translateY(50px);
}

.carousel--container .card-group .card {
    border: 0;
    padding: var(--space-md);
    background-color: rgb(var(--color-white));
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.carousel--container .card h5 {
    font-size: var(--text-xl);
    color: rgb(var(--color-dark));
    font-weight: 700;
    margin-block-end: 0;
}

.carousel--container .card p {
    font-size: var(--text-sm);
    color: rgb(var(--color-text));
    font-weight: 400;
}

/*-==-=-=
Main Features
-=--=-=*/

.main--featured {
    background: linear-gradient(145deg, #0F172A 50%, #000000 100%);
}

.main--featured h2 {
    color: rgb(var(--color-white));
    margin-block-end: var(--space-lg);
}

.main--featured .main--featured-card {
    background: rgb(31 41 55 / 0.6);
    border-style: solid;
    border-width: 1px;
    border-color: rgb(55 65 81 / 0.5);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    transition: transform 0.3s ease;
}

.main--featured .main--featured-card .card-body {
    padding: 0;
}

.main--featured-card .featured--icon {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: var(--floating-offset);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 20px;
}

.main--featured-card .featured--icon svg {
    width: 30px;
    height: auto;
    color: rgb(var(--color-white));
}

.main--featured-card .color--one,
.main--featured-card .color--seven {
    background: var(--grad-blue);
}

.main--featured-card .color--two {
    background: var(--grad-pink);
}

.main--featured-card .color--three {
    background: var(--grad-green);
}

.main--featured-card .color--four {
    background: var(--grad-indigo);
}

.main--featured-card .color--five {
    background: var(--grad-yellow-red);
}

.main--featured-card .color--six {
    background: var(--grad-cyan-green);
}

.main--featured-card .color--eight {
    background: var(--grad-pink);
}

.main--featured-card h5 {
    color: rgb(var(--color-white));
    font-size: var(--text-lg);
    font-weight: 700;
    margin-block-end: 15px;
}

.main--featured-card p {
    font-size: var(--text-sm);
    font-weight: 400;
    color: rgb(var(--color-muted));
}

.main--featured .btn-outline-primary {
    background: transparent;
    border: 2px solid rgb(var(--color-white));
    color: rgb(var(--color-white));
}

/*-=-=-=
Main Services
-=--=-=*/

.main--services {
    background: #F7F7F794;
}

.main--services h3 {
    margin-block-end: 1.5rem;
}

.main--services .btn {
    padding: 0;
    color: rgb(var(--color-secondary));
    font-size: 18px;
}

.main--services img {
    border-radius: var(--radius-xl);
}

.featured--tabs .nav-tabs {
    border-bottom: 0;
    flex-flow: row wrap;
    gap: var(--space-lg);
    max-height: 530px;
    overflow-y: auto;
}

.featured--tabs .nav-tabs .nav-item {
    width: 100%;
    flex: 1 1 100%;
}

.featured--tabs .nav-tabs,
.featured--tabs .tab-content {
    flex: 1 1;
}

.featured--tabs .nav-tabs .nav-link {
    margin-block-end: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    background-color: rgb(var(--color-white));
    color: rgb(var(--color-dark));
    border-style: solid;
    border-width: 2px;
    border-color: #D1D9D8;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
}

.featured--tabs .nav-tabs .nav-item.show .nav-link,
.featured--tabs .nav-tabs .nav-link.active,
.featured--tabs .nav-tabs .nav-link:focus,
.featured--tabs .nav-tabs .nav-link:hover {
    color: rgb(var(--color-white));
    background-color: rgb(var(--color-dark));
    border-color: rgb(var(--color-dark));
}

.featured--tabs .nav-tabs .tab--icon,
.list--productivity .list-group-item .list--icon,
.quick--title span {
    width: 56px;
    height: 56px;
    min-width: 56px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    border-radius: var(--radius-md);
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    background-image: var(--grad-text-primary);
}

.featured--tabs .nav-tabs .tab--icon img,
.list--productivity .list--icon img,
.quick--title span img {
    filter: invert(1);
}

.featured--tabs .tab--text,
.list--productivity h5 {
    font-size: var(--text-lg);
}

.featured--tabs .tab--text small {
    font-size: var(--text-sm);
    font-weight: normal;
}

.featured--tabs .tab-pane {
    background: rgb(var(--color-dark));
    padding: var(--space-xl);
    color: rgb(var(--color-white));
    border-radius: var(--radius-xl);
}

.featured--tabs .tab-pane h4,
.featured--tabs .tab-pane p,
.featured--tabs .tab-pane li {
    color: rgb(var(--color-white));
}

.featured--tabs .tab-pane h4 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    margin-block-end: 20px;
}

.featured--tabs .tab-pane h5 {
    padding: .75rem 1.5rem;
    background: rgb(var(--color-primary));
    border-radius: var(--floating-offset);
    align-items: center;
    display: flex;
    margin-top: 2rem;
    margin-block-end: 2rem;
    color: rgb(var(--color-white));
    font-size: 1.25rem;
}

.featured--tabs .shield--icon {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    background-image: var(--grad-text-primary);
    border-radius: var(--radius-xl);
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    display: flex;
    margin-block-end: 2rem;
}

.featured--tabs .shield--icon img {
    width: 50px;
    height: auto;
    filter: invert(1);
}

.featured--tabs .tab-pane .list-group {
    gap: var(--space-lg);
}

.featured--tabs .tab-pane .list-group-item {
    background-color: transparent;
    border: 0;
    padding: 0;
    color: rgb(var(--color-white));
    font-weight: 600;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured--tabs .tab-pane .list-group-item .check--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(217 160 60);
    border-radius: 9999px;
    width: 1.5rem;
    height: 1.5rem;
    padding: .15rem;
    min-width: 1.5rem;
}

.featured--tabs .tab-pane .list-group-item .check--icon img {
    filter: invert(1);
}

/*-=-=-=-
Results Tabs CSS
-=-=-*/

.results--tabs .tab-pane {
    background: none;
    padding: 0;
    border-radius: 0;
}

.results--tabs .nav-tabs .nav-link {
    font-size: 18px;
    font-weight: 700;
    border-width: 0px;
    border-radius: 50px;
    padding: 1rem 2rem;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.results--tabs .nav-tabs .nav-item.show .nav-link,
.results--tabs .nav-tabs .nav-link.active,
.results--tabs .nav-tabs .nav-link:focus {
    color: rgb(var(--color-white));
    background: var(--grad-text-primary);
}

.results--tabs .nav-tabs .nav-link:hover {
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
    background: rgb(var(--color-white) / 0.1);
}

.results--tabs .nav-tabs {
    max-height: 100%;
    overflow-y: visible;
}

/*-=-==-
Reviews CSS
-==-==-=*/

.reviews--slider {
    display: flex;
    gap: var(--space-lg);
    position: relative;
    will-change: transform;
}

.review--slide {
    background: rgb(var(--color-white) / 0.9);
    padding: var(--space-lg);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    border-radius: var(--radius-md);
    -webkit-border-radius: var(--radius-md);
    border: 1px solid rgb(229 231 235);
    height: auto;
    display: flex;
    flex: 1 1;
    flex-flow: column wrap;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.star--rating svg {
    height: auto;
    width: 24px;
    fill: #FACC15;
}

.star--rating {
    display: flex;
    align-items: center;
}

.review--slide .quote--icon {
    margin: .5rem 0;
}

.review--slide .quote--icon img {
    filter: invert(44%) sepia(93%) saturate(1352%) hue-rotate(201deg) brightness(96%) contrast(96%);
}

.review--content p {
    font-size: var(--text-sm);
    margin-block-end: 1rem;
    font-weight: 500;
    line-height: 1.6;
}

.author--info {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: auto;
}

.author--image img {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    object-fit: cover;
    border: 1px solid rgb(255 255 255);
    border-radius: 9999px;
    width: 2.4rem;
    height: 2.4rem;
}

.author--name h3 {
    font-weight: 700;
    font-size: var(--text-base);
    padding: 0;
    margin: 0;
}

.author--name h3 span {
    font-weight: normal;
    font-size: var(--text-sm);
    color: #999999;
    display: block;
}

/*-=-=-=-=-=
Main CTA CSS
-=-=-=-=-*/

.main--cta .list-group-item {
    background-color: transparent;
    border: 0;
    padding: 0;
    color: rgb(var(--color-muted));
    font-weight: 600;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.main--cta .list-group-item img, .pricing--plans .trusted--list .list-group-item img {
    filter: brightness(0) saturate(100%) invert(73%) sepia(44%) saturate(640%) hue-rotate(2deg) brightness(92%) contrast(90%);
}

.main--cta .card-group {
    row-gap: var(--space-lg);
    column-gap: var(--space-5xl);
    padding: var(--space-xl);
    margin-top: 50px;
    border-radius: var(--radius-xl);
    background: rgb(31 41 55 / 60%);
    border: 1px solid rgb(var(--color-white) / 0.15);
}

.main--cta .card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.main--cta .card h5 {
    font-size: var(--text-lg);
    line-height: 2rem;
    margin-block-end: 5px;
    color: rgb(var(--color-white));
}

.main--cta .card p {
    font-size: var(--text-base);
    color: rgb(var(--color-muted));
}

.title--list .list-group-item {
    color: rgb(var(--color-text));
    font-weight: 600;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
}

.title--list .list-group-item .circle--green,
.title--list .list-group-item .circle--blue,
.title--list .list-group-item .circle--purple {
    width: 12px;
    height: 12px;
    border-radius: var(--floating-offset);
}

.title--list .list-group-item .circle--green {
    background-color: rgb(34 197 94);
}

.title--list .list-group-item .circle--blue {
    background-color: rgb(59 130 246);
}

.title--list .list-group-item .circle--purple {
    background-color: rgb(168 85 247);
}

.list--productivity {
    gap: var(--space-xl);
}

.list--productivity .list-group-item {
    color: rgb(var(--color-text));
    font-weight: 600;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    border: 1px solid #E5E7EB;
    background: rgb(var(--color-white) / 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: box-shadow 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.list--productivity .list-group-item:hover {
    box-shadow: var(--shadow-md);
}

.list--productivity h5 {
    margin-block-end: 0;
}

.list--productivity h5 small {
    font-size: var(--text-base);
    margin-top: .5rem;
    font-weight: normal;
}

.quick--setup {
    background-image: linear-gradient(145deg, #111827 0%, #1F2937 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    color: rgb(var(--color-white));
}

.quick--setup .list-group {
    gap: 40px;
}

.quick--setup .list-group-item {
    background: none;
    border: 0;
    padding: 0;
    color: rgb(var(--color-white));
    font-weight: 600;
    font-size: var(--text-base);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-flow: row wrap;
}

.quick--setup .list-group-item h5 {
    margin-block-end: 0;
    color: rgb(var(--color-white));
    font-size: var(--text-xl);
    flex: 1 1;
}

.quick--setup .list-group-item h5 small {
    font-size: var(--text-base);
    margin-top: .5rem;
    font-weight: normal;
    color: rgb(var(--color-muted));
}

.quick--setup .list-group-item .number--icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: var(--floating-offset);
    background: linear-gradient(145deg, rgb(var(--color-primary)) 0%, rgb(var(--color-dark)) 100%);
    color: rgb(var(--color-white));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
}

.quick--setup .list-group-item .number--icon:after {
    background-image: linear-gradient(to bottom, rgb(var(--color-primary)), transparent);
    width: .125rem;
    height: 4rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    content: '';
    transform: translateY(80px);
    -webkit-transform: translateY(80px);
}

.quick--setup .list-group-item p {
    flex: 1 1 100%;
    max-width: 100%;
    margin: 0;
    font-weight: normal;
    font-size: var(--text-sm);
    padding-inline-start: 68px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.quick--setup .list-group-item p img {
    filter: invert(1);
}

footer {
    background: rgb(var(--color-dark));
    padding: var(--space-4xl) 0 var(--space-md);
}

footer .list-group {
    gap: var(--space-md);
}

footer .list-group-item {
    background-color: transparent;
    border: 0;
    padding: 0;
    color: rgb(var(--color-white));
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

footer .list-group-item svg {
    width: var(--text-lg);
    height: auto;
    fill: rgb(var(--color-primary));
}

footer .list-group-item-action:focus, footer .list-group-item-action:hover {
    z-index: 1;
    color: rgb(var(--color-primary));
    text-decoration: none;
    background-color: transparent;
}

footer p {
    color: rgb(var(--color-white));
}

footer .form-group {
    flex: 1 1;
}

footer .form-group input {
    border: 1px solid #334155;
    background: rgb(var(--color-white) / 0.05);
    color: rgb(var(--color-white));
    font-size: var(--text-lg);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-md);
    min-height: 3.5rem;
}

/*-=-=-=
Inner Pages CSS
-=-=-=-=-*/

.work--featured {
    background: rgb(var(--color-white));
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--color-primary) / 0.5);
    position: relative;
}

.work--featured:not(:last-child):before {
    content: '';
    position: absolute;
    width: 1px;
    height: 50px;
    background: rgb(var(--color-primary));
    left: 30px;
    top: 100%;
}

.work--title {
    background: rgb(var(--color-primary) / .03);
    max-width: 300px;
    width: 100%;
}

.work--title h2 {
    margin: 0;
    font-weight: 900;
    color: rgb(var(--color-primary));
}

.text--primary {
    color: rgb(var(--color-primary));
    letter-spacing: .1em;
}

.work--title, .work--bullets, .work--performa {
    padding: var(--space-xl);
}

.work--title .work--icon, .work--performa .work--icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background: var(--grad-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.work--title .work--icon img, .work--performa .work--icon img {
    filter: invert(1) brightness(5);
}

.work--bullets .list-group {
  counter-reset: item;
}

.work--performa .list-group {
    gap: var(--space-md);
}

.work--bullets .list-group-item, .work--performa .list-group-item {
    border: 0;
    padding: 0;
    background: none;
    color: rgb(var(--color-text));
    counter-increment: item;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-base);
}

.work--bullets .list-group-item::before {
    content: counter(item);
    font-weight: 600;
    color: rgb(var(--color-primary));
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--color-primary) / .5);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.work--bullets .list-group-item+.list-group-item {
    margin-top: var(--space-md);
}

.tracking--works {
    background: rgb(var(--color-primary) / .06);
}

.why--card {
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--color-primary) / .2);
    height: 100%;
    box-shadow: 0px 4px 32px rgb(var(--color-dark) / 0.05);
}

.why--card span.sub--heading--icon--wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: var(--grad-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.why--card span.sub--heading--icon--wrapper img {
    filter: invert(1) grayscale(1) brightness(2);
}

.sub--heading--icon .badge {
    background: rgb(var(--color-primary) / .1);
    color: rgb(var(--color-primary));
    font-size: var(--text-xs);
    border: 1px solid rgb(var(--color-primary) / .2);
    font-weight: 600;
    padding: 3px 8px 3px 15px;
    position: relative;
}

.sub--heading--icon .badge::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: var(--floating-offset);
    background: rgb(var(--color-primary));
    transition: opacity 0.3s, transform 0.3s;
    animation: pulse 2s ease-in-out 3;
}

.team--built .nav-tabs {
    flex-flow: row wrap;
    gap: var(--space-lg);
    background: rgb(var(--color-primary) / 0.03);
    border: 1px solid rgb(var(--color-primary) / 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    margin-block-end: var(--space-xl);
    justify-content: space-between;
}

.team--built .nav-tabs .nav-link {
    border: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
    color: rgb(var(--color-dark));
    background: none;
    font-weight: 600;
}

.team--built .nav-tabs .nav-link.active {
    background: var(--grad-text-primary);
    color: rgb(var(--color-white));
}

.team--built .nav-tabs .nav-link.active img {
    filter: invert(1);
}

.team--built .work--title, .team--built .work--performa {
    flex: 1 1;
    max-width: 100%;
}

.team--built .work--title h3 {
    margin: 0;
    font-weight: 900;
    font-size: 3.75rem;
    color: rgb(var(--color-primary));
}

.team--built .work--title ul, .blog--single--content ul {
    list-style-type: disc;
    padding-left: 1rem;
    margin-block-end: var(--space-lg);
}

.team--built .work--title ul li {
    font-size: var(--text-base);
    font-weight: 500;
}

.team--built .work--title ul li::marker {
    color: rgb(var(--color-primary));
}

.team--built .work--title li:not(:last-child) {
    margin-block-end: var(--space-sm);
}

.team--built .client--feedback {
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--color-primary) / .2);
}

.team--built .blockquote-footer::before {
    display: none;
}

.team--built .blockquote-footer span {
    background: rgb(var(--color-primary));
    color: rgb(var(--color-white));
    width: var(--space-xl);
    height: var(--space-xl);
    border-radius: var(--floating-offset);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/*-==-=-=-
Pricing Page CSS
-=-=-=*/

.pricing--plans {
    text-align: center;
}

.pricing--plans .tabs {
    display: inline-flex;
    justify-content: center;
    margin: auto;
    align-self: center;
    gap: 1rem;
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    border: 0;
}

.pricing--plans .tab {
    padding: 12px 32px;
    margin: 0;
    border-radius: 50px;
    background-color: #e2e8f020;
    cursor: pointer;
    border: 1px solid #e2e8f0;
}

.pricing--plans .tab.active {
    color: #FFFFFF;
    background: var(--grad-text-primary);
    box-shadow: var(--shadow-md);
}

.popular {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: #ffffff;
    background: #DFA93D;
    width: max-content;
    border-radius: var(--floating-offset);
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 700;
    padding-block-start: .5rem;
    padding-block-end: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.pricing--plans .pricing-cards {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-block-start: 50px;
    text-align: left
}

.pricing--plans .card {
    background: white;
    border-radius: .75rem;
    -webkit-border-radius: .75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    padding: 0;
    padding-block-end: 40px;
    width: max-content;
    position: relative;
    flex: 1 1;
    border: 1px solid #e5e7eb;
}

.pricing--plans .pro--plan {
    z-index: 1;
}

.pricing--plans .card #badge-pro,
.pricing--plans .card #badge-elite {
    position: absolute;
    top: 0;
    right: 20px;
    background: var(--grad-text-primary);
    color: #ffffff;
    padding: 6px 8px;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 700;
    border-radius: var(--floating-offset);
    -webkit-border-radius: var(--floating-offset);
    line-height: 1.3;
    margin: auto;
    width: max-content;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    bottom: 0;
    margin: auto;
    height: fit-content;
}

.pricing--plans .card #badge-pro:empty,
.pricing--plans .card #badge-elite:empty {
    display: none;
}

.bg-gradient-to-r {
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    width: 100%;
    max-width: calc(100% - 50px);
    margin: 1rem auto 2rem;
    background: linear-gradient(to right, #f8fafc, #f1f5f9);
}

.free--card .bg-gradient-to-r {
    border: 1px solid #0f766e50;
    background: linear-gradient(to right, #f0fdfa, #ECFEF5);
}

.bg-gradient-to-r .sub--text {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .025em;
}

.pricing--plans .card h2 {
    font-size: 25px;
    margin: 0 0 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 15px 35px;
    background: #0F172A;
    color: #ffffff;
    text-transform: uppercase;
    border-radius: .75rem .75rem 0 0;
    position: relative;
}

.pricing--plans .card p {
    text-align: center;
    margin-block-end: 0;
}

.pricing--plans .price {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(to right, #dfa93d, #af7132);
    font-size: 48px;
    margin: 5px 0;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0px;
    justify-content: center;
    flex-flow: column wrap;
    text-align: center;
    line-height: 1;
}

.pricing--plans .free--card .price {
    background-image: linear-gradient(to right, #0f766e, #0f766e);
}

.pricing--plans .price span,
.pricing--plans .text-xs {
    display: block;
    color: #121212;
    line-height: 1.2;
    font-size: .75rem;
    font-weight: 500;
    min-height: 30px;
}

.pricing-cards h3 {
    letter-spacing: .025em;
    font-size: 14px;
    padding: 0 25px 8px;
    margin-block-end: 0;
    text-transform: uppercase;
    border-bottom: 1px solid #f1f1f1;
}

.pricing--plans .card ul {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: calc(100% - 50px);
    margin: 1rem auto 0;
}

.pricing--plans .card li {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1.6;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    padding: .5rem .75rem;
    background: #ffffff;
    gap: .5rem;
}

.pricing--plans .card li span {
    color: #00CA0F;
}

.pricing--plans .card li+li {
    margin-top: 1rem
}

.contact--cta {
    background: linear-gradient(90deg, #F9FAFB 0%, #EFF6FF80 100%);
    border-radius: var(--radius-md);
    padding: var(--space-xl) var(--space-4xl);
    border: 1px solid #E5E7EB;
    text-align: center;
}

.only--content ul {
    list-style: disc;
    margin-bottom: var(--space-lg);
    padding-left: var(--space-2xl);
}

.help--card {
    border: 1px solid #E5E7EB;
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
}

.help--card .card--icon {
    width: 5.2rem;
    height: 5.2rem;
    border-radius: var(--radius-sm);
    background: var(--grad-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--floating-offset);
    margin-block-end: var(--space-lg);
}

.help--card .card--icon svg {
    height: 40px;
    width: auto;
    filter: invert(1);
}

.chat--popper {
    cursor: pointer;
}

/*-=-=-=
Blog Page CSS
-=-=-=-=-*/

.blog--card {
    border: 1px solid #E2E8F080;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.blog--card img {
    height: 260px;
    object-fit: cover;
    object-position: top center;
    border-radius: 16px 16px 0px 0px;
}

.blog--card .blog--meta {
    font-size: var(--text-sm);
    color: rgb(var(--color-muted));
    display: flex;
    align-items: center;
    gap: .5rem;
}

.blog--card .blog--meta svg {
    width: 16px;
    height: auto;
    fill: rgb(var(--color-muted));
}

.blog--card .blog--excerpt {
    line-clamp: 3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-base);
}

.blog--card h2 a {
    color: rgb(var(--color-dark));
    transition: color 0.3s ease;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
}

.blog--card h2 a:hover {
    color: rgb(var(--color-primary));
}

.blog--card .btn-link {
    padding: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: rgb(var(--color-primary));
}

.blog--card .btn-link:hover {
    text-decoration: underline;
}

.blog--card .btn-link svg {
    width: 16px;
    height: auto;
}

.blog--single--content img {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    width: 100%;
}

.blog--single--content blockquote {
    font-style: italic;
    border: 1px solid #d9d9d9;
    border-left: 4px solid #dda73d;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
}

.blog--single--content ul li:not(:last-child) {
    margin-block-end: var(--space-md);
}

.blog--single .blog--card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.blog--single .blog--card:not(:last-child) {
    margin-block-end: var(--space-lg);
}

.fixed--sidebar {
    position: sticky;
    top: var(--floating-offset);
    -webkit-position: sticky;
}

.blog--single .blog--card--header {
    max-width: var(--floating-offset);
    min-width: var(--floating-offset);
}

.blog--single .blog--card img {
    height: var(--floating-offset);
    object-fit: cover;
    object-position: top center;
    border-radius: 0;
    width: 100%;
}

.blog--single .blog--card h4 {
    font-weight: 600;
    margin-bottom: 0;
}

.blog--single .blog--card h4 a {
    color: rgb(var(--color-dark));
    transition: color 0.3s ease;
}

.blog--single .blog--card h4 a:hover {
    color: rgb(var(--color-primary));
}

/*-=-=-=
Mega Menu CSS
-==-=-*/
.mega-menu {
    width: 100%;
    left: 0;
    right: 0;
    border: none;
    padding: 2rem;
    box-shadow: var(--shadow-md);
}

.mega-item {
    display: flex;
    gap: 10px;
    position: relative;
}

.mega-item a.mega--item--link {
    background: transparent;
    border: none;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 9999;
    top: 0px;
    left: 0px;
}

.mega-item .item--icon {
    min-width: 45px;
    max-width: 45px;
}

.mega-item:not(:last-child) {
    margin-bottom: var(--space-lg);
}

.mega-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.cta-box img {
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-md);
    aspect-ratio: 3 / 1;
    width: 100%;
}



/*-=-=-
 * Media CSS-=-==
 * -=-=-=-=*/

@media (min-width: 768px) {
    .review--slide {
        min-width: 350px;
    }

    .pricing--plans .pricing-cards {
        gap: 1.5rem;
    }
}

@media (max-width: 1199px) {
    .navbar-collapse, .navbar-collapse.show, .collapse:not(.show) {
        position: fixed;
        display: block;
        top: 0;
        right: -100%;
        height: 100dvh;
        width: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 110;
    }

    .navbar-collapse.show {
        right: 0;
    }
    
    .collapse:not(.show) .navbar-nav {
        transform: translateX(100%);
        transition: transform .4s ease;
    }

    .navbar-nav {
        background: rgb(var(--color-white));
        padding: var(--space-2xl);
        overflow-y: auto;
        width: 70%;
        max-width: 100%;
        margin-right: 0 !important;
        height: 100%;
        transform: translateX(0);
    }

    .navbar-light .navbar-nav .nav-item:not(:last-child) {
        border-bottom: 1px solid rgb(229 231 235);
    }

    .navbar-nav .dropdown-menu {
        padding: 0;
        padding-block-start: var(--space-sm);
    }

    .mega-menu {
        box-shadow: none;
    }

    .list--productivity .list-group-item, .featured--tabs .nav-tabs .nav-link {
        padding: var(--space-md);
    }
}

@media (max-width: 991px) {
    .hero-section p {
        font-size: var(--text-base);
    }

    .featured--tabs .tab--text {
        font-size: var(--text-base);
        text-align: left;
    }

    .featured--tabs .tab-pane {
        padding: 1.5rem;
    }

    .featured--tabs .tab-pane h5 {
        font-size: var(--text-sm);
    }

    .featured--tabs .tab-pane p {
        font-size: var(--text-base);
    }

    .featured--tabs .nav-tabs .nav-link {
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }

    .featured--tabs .tab-pane h4 {
        font-size: 1.5rem;
        line-height: 2rem;
        margin-block-end: 12px;
    }

    .featured--tabs .shield--icon {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: var(--radius-md);
    }

    .featured--tabs .shield--icon img {
        width: 30px;
    }

    .featured--tabs .nav-tabs .tab--icon, .list--productivity .list-group-item .list--icon, .quick--title span {
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
        border-radius: var(--radius-sm);
    }

    .featured--tabs .nav-tabs {
        gap: var(--space-sm);
    }

    .main--cta .card-group {
        column-gap: var(--space-xl);
    }

    .list--productivity .list-group-item {
        border-radius: var(--radius-sm);
        padding: var(--space-sm);
    }

    .list--productivity h5 small {
        margin-top: .25rem;
    }

    footer p {
        font-size: var(--text-sm);
    }

    footer {
        padding: var(--space-3xl) 0 var(--space-md);
    }

    .pricing--plans .card {
        flex: 1 1 100%;
    }

    .mega-menu {
        padding: 1rem;
    }

    .start--chat {
        bottom: 20px;
    }

    .work--title {
        max-width: 100%;
    }

    .why--us .card {
        flex: 1 1 100%;
        max-width: 50%;
    }

    .team--built .nav-tabs {
        gap: var(--space-xs);
        justify-content: center;
    }

    .work--title, .work--bullets, .work--performa {
        padding: var(--space-lg);
    }
}

@media screen and (max-width: 767px) {
    .navbar-light .navbar-toggler {
        border-color: rgb(var(--color-dark));
    }

    .hero-section {
        padding-block-end: 60px;
        padding-block-start: 40px;
    }

    .carousel--container .card-group {
        transform: translateY(0px);
        margin-top: 2rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--space-sm);
        justify-content: center;
    }

    .featured--tabs {
        flex-direction: column;
    }

    .review--slide {
        min-width: 100%;
    }

    .main--featured-card .featured--icon {
        width: 3.25rem;
        height: 3.25rem;
    }

    .main--featured-card .featured--icon svg {
        width: 24px;
    }

    .featured--tabs .nav-tabs .nav-link {
        padding: 10px 12px;
    }

    .quick--setup {
        border-radius: var(--radius-lg);
        padding: var(--space-lg);
    }

    .pricing--plans .tab {
        padding: 10px 18px;
    }

    .navbar-nav {
        padding: var(--space-xl);
        width: 80%;
    }

    section {
        padding: var(--space-2xl) var(--space-md);
    }

    footer {
        padding: var(--space-3xl) var(--space-md) var(--space-md);
    }

    .why--us .card {
        max-width: 100%;
        border-left: 0 !important;
        border-right: 0 !important;
        flex-flow: row wrap;
        gap: 1rem;
    }

    .why--us .card .card-body {
        flex: 1 1;
    }

    .inner--banner {
        padding-block-start: var(--space-2xl);
        padding-block-end: var(--space-2xl);
    }

    .team--built .work--title h3 {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 575px) {
    .team--built .nav-tabs .nav-link {
        width: 100%;
    }
}