:root {
    /* --- Base Palette Constants --- */
    --color-dark: #0D0D16;
    --color-light: #ffffff;
    --color-dark-2: #1D2833;
    --color-black: #161616;
    --color-gray: #464646;
    --color-light-blue-1: #EBF5FF;
    --color-light-blue-2: #248CF4;
    --color-dark-3: #1D2730;
    --color-light-blue-bg: #E0F0FF;
    --color-gray-90: #909090;

    /* --- Theme Core Variables (Dark Mode Default) --- */
    --bg-body: #05050a;
    --bg-body-alt: #02040d;
    --bg-card: #1D2833;
    --bg-card-alt: #1D2733;
    --bg-card-flat: #01030b;
    --bg-cta: #171E26;
    --border-color: rgba(255, 255, 255, 0.2);
    --border-color-light: rgba(255, 255, 255, 0.1);

    --text-primary: #ffffff;
    --text-secondary: #EEEEEE;
    --text-muted: #BCBCBC;
    --logo-text-color: #ffffff;
    --accent-color-1: #248CF4;

    /* --- Component Variables --- */
    /* Badges */
    --hero-badge-bg: #FFFFFF1A;
    --badge-bg: #FFFFFF33;
    --badge-text: #D0D0D0;
    --badge-border: rgba(31, 81, 131, 1);

    /* FAQ Section */
    --faq-bg: transparent;
    --faq-bg-highlight: #202F3F;
    --faq-text: rgba(208, 208, 208, 1);
    --faq-highlight-text: rgba(176, 176, 176, 1);
    --faq-question-color: #B0B0B0;
    --faq-icon-color: #B0B0B0;
    --faq-icon-color-active: #FFFFFF;
    --faq-border-color: #FFFFFF4D;

    /* Pricing Section */
    --pricing-btn-bg: #243C53;
    --pricing-btn-border: #49596C;
    --pricing-btn-text: #ffffff;
    --testimonial-card-bg: #1D2833;

    /* Banner & Header */
    --header-bg: rgba(5, 5, 10, 0.85);
    --banner-bg: url('../img/banner-dark-bg.jpg');
    --banner-bg-overlay: transparent;
    --wave-color: rgba(255, 255, 255);
    --nav-link-color: #E0E0E0;

    /* Services & CTA img */
    --why-bg-image: url('../img/services-bg.svg');
    --cta-bg-image: url('../img/CTA-BG.svg');

    /* About Section */
    --about-audio-bg: #141A21;
    --about-audio-outline: #1D2730;
    --about-bg-overlay: radial-gradient(50% 50% at 50% 50%, rgba(13, 13, 22, 0.3) 0%, #0D0D16 100%);
    --about-text-color: #ffffff;
    --about-waveform-bar: #2E3E4D;

    /* Marquee Section */
    --marquee-overlay-left: linear-gradient(90deg, #05050a 0%, rgba(5, 5, 10, 0) 100%);
    --marquee-overlay-right: linear-gradient(270deg, #05050a 0%, rgba(5, 5, 10, 0) 100%);

    /* Testimonials & Avatar */
    --avatar-name-color: #ffffff;
    --avatar-text-color: #BBBBBB;

    /* Footer */
    --footer-bg: linear-gradient(180deg, rgba(36, 140, 244, 0.4) 0%, rgba(36, 140, 244, 0) 100%);
}

body.light-mode {
    /* --- Theme Core Variables (Light Mode Overrides) --- */
    --bg-body: #ffffff;
    --bg-body-alt: #ffffff;
    --bg-card: #ffffff;
    --bg-card-alt: #ffffff;
    --bg-card-flat: #ffffff;
    --bg-cta: #E0F0FF;
    --border-color: rgba(15, 23, 42, 0.12);
    --border-color-light: rgba(15, 23, 42, 0.06);

    --text-primary: #0f172a;
    --text-secondary: #606060;
    --text-muted: #64748b;
    --logo-text-color: #000000;
    --accent-color-1: var(--color-light-blue-2);
    --color-dark-3: #F0F7FF;

    /* --- Component Variables --- */
    /* Badges */
    --hero-badge-bg: #9B9B9B1A;
    --badge-bg: #248CF433;
    --badge-text: var(--color-gray);
    --badge-border: rgba(202, 229, 255, 1);

    /* FAQ Section */
    --faq-bg: #ffffff;
    --faq-bg-highlight: #eff6ff;
    --faq-text: #1e293b;
    --faq-highlight-text: #334155;
    --faq-question-color: #6F6C8F;
    --faq-icon-color: #6F6C8F;
    --faq-icon-color-active: #0984FF;
    --faq-border-color: #CCE5FF;

    /* Pricing Section */
    --pricing-btn-bg: #FFFFFF;
    --pricing-btn-border: #cbd5e1;
    --pricing-btn-text: #334155;
    --testimonial-card-bg: #EBF5FF;

    /* Banner & Header */
    --header-bg: rgba(248, 250, 252, 0.85);
    --banner-bg: url('../img/hero-light-bg.png');
    --wave-color: #248CF4;
    --nav-link-color: #606060;

    /* Services & CTA img */
    --why-bg-image: url('../img/service-bg-light.svg');
    --cta-bg-image: url('../img/cta-light-bg.svg');

    /* About Section */
    --about-audio-bg: #ffffff;
    --about-audio-outline: #F0F0F0;
    --about-bg-overlay: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, #ffffff 100%);
    --about-text-color: #0f172a;
    --about-waveform-bar: #E2E8F0;

    /* Marquee Section */
    --marquee-overlay-left: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    --marquee-overlay-right: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);

    /* Testimonials & Avatar */
    --avatar-name-color: #000000;
    --avatar-text-color: #909090;

    /* Footer */
    --footer-bg: linear-gradient(180deg, #16324E 0%, #031628 100%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -o-font-smoothing: antialiased;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-visible {
    overflow: visible;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

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

.justify-around {
    justify-content: space-around;
}

.justify-start {
    justify-content: flex-start;
}

.items-start {
    align-items: start;
}

.items-end {
    align-items: end;
}

.items-between {
    align-items: space-between;
}

.items-around {
    align-items: space-around;
}

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

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

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    outline: none;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

button,
input,
textarea,
[role="button"] {
    cursor: pointer;
}

.w-full {
    width: 100%;
}

.h-screen {
    height: 100vh;
}

.h-full {
    height: 100%;
}

.cursor-pointer {
    cursor: pointer;
}


@theme {
    --font-heading: "Funnel Display", sans-serif;
    --font-body: "Montserrat", sans-serif;
}


body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--text-primary);
    background: var(--bg-body);
    transition: background-color 0.3s ease, color 0.3s ease;
}

main {
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

.banner {
    width: 100%;
    position: relative;
    text-align: center;
    /* padding: 2rem 1.5rem 8rem; */
    background-image: var(--banner-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* overflow: hidden; */
    height: auto;
    min-height: 1080px;
    transition: background-image 0.3s ease;
}

.banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--banner-bg-overlay);
    transition: background 0.3s ease;
}

.banner-inner {
    position: relative;
    z-index: 1;
    /* max-width: 1120px; */
    margin: 0 auto;
    padding-top: 104px;
}

.banner-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* margin-bottom: 2rem; */
    padding: 1.5rem 120px;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.banner-header.scrolled {
    background-color: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem 120px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--border-color-light);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    text-decoration: none;
}

.logo svg .logo-text-path path {
    fill: var(--logo-text-color);
}

.footer-logo .logo svg .logo-text-path path {
    fill: #ffffff;
}

.logo-text {
    color: var(--logo-text-color);
    transition: fill 0.3s ease;
    font-size: 26px;
    font-weight: 700;

}

.nav .nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav .nav-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav .nav-menu li a {
    color: var(--nav-link-color);
    text-decoration: none;
    font: 16px/1.5 funnel-display, system-ui, sans-serif;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav .nav-menu li a:hover,
.nav .nav-menu .current-menu-item>a,
.nav .nav-menu .current_page_item>a {
    color: var(--text-primary);
}

.nav {
    display: none;
    align-items: center;
    gap: 2rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
}

.nav a {
    color: var(--nav-link-color);
    text-decoration: none;
    font: 16px/1.5 funnel-display, system-ui, sans-serif;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav a:hover {
    color: var(--text-primary);
}

.controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icon-btn {
    position: relative;
    overflow: hidden;
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(66, 66, 78, 1);
    border: 1px solid rgba(96, 96, 118, 1);
    color: #ffffff;
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.icon-btn svg {
    position: absolute;
    width: 20px;
    height: 20px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

/* Default (Dark Mode) state: Show Sun, Hide Moon */
.icon-btn .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.icon-btn .moon-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

/* Light Mode state: Hide Sun, Show Moon */
body.light-mode .icon-btn .sun-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

body.light-mode .icon-btn .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    fill: #88BFF8;
}

/* Light mode overrides for toggle button container */
body.light-mode .icon-btn {
    background: #FFFFFF;
    border-color: #D0E7FF;
    color: #88BFF8;
}


.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-height: 2.75rem; */
    padding: 20px 48px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #1087FF 0%, #0A4987 100%);
    color: #ffffff;
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    height: 100%;
}


.btn-gradient-animated {
    background: radial-gradient(79.04% 205.71% at 0% -72.32%, #6DB6FF 0%, #1A8CFF 50%, #0A4987 100%);
    background-size: 200% 200%;
    animation: radial-gradient-flow 12s ease infinite;
    box-shadow: 0 10px 30px rgba(26, 140, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.3s ease;
}


@keyframes radial-gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    padding: 0 20px;
}

.hero-badge {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 30px;
    border-radius: 9999px;
    background: var(--hero-badge-bg);
    font-size: 14px;
    color: var(--badge-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hero-badge img {
    width: 24px;
    height: 24px;
}

.hero-title {
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 68px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.3s ease;
    /* max-width: 70rem; */
}

span {
    color: var(--accent-color-1);
    transition: color 0.3s ease;
    display: inline-flex;
}

.hero-copy {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-top: 12px;
    transition: color 0.3s ease;
    font-weight: 400;
}

.hero-actions {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.hero-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 48px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #1087FF 0%, #0A4987 100%);
    color: #ffffff;
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
    height: 100%;
    gap: 8px;
}

.hero-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 48px;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    height: 100%;
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: #FFFFFF33;
    gap: 8px;
}


.wave-image {
    color: var(--wave-color);
    overflow: visible;
}

.wave-image-mirrored {
    transform: scaleX(-1);
    transform-origin: center;
}

@media (min-width: 640px) {
    .icon-btn {
        display: inline-flex;
    }
}

@media (min-width: 768px) {

    /* .banner {
                padding: 2.5rem 2rem 10rem;
            } */
    .nav {
        display: flex;
    }
}

/* .about {
            padding: 6rem 1.5rem 4rem;
            background: #03050f;
        } */
.about-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    height: 650px;
    justify-content: center;
    gap: 82px;
    align-items: center;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.about-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.about-badge-wave {
    padding: 13px;
    background: var(--badge-bg);
    border-radius: 12px;
    transition: background-color 0.3s ease;
}

.about-badge-text {
    padding: 15px 12px;
    border: 1px solid var(--badge-border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.46;
    background: transparent;
    color: var(--badge-text);
    transition: all 0.3s ease;
}

.about-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 38px;
    line-height: 1.3;
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-weight: 600;
    max-width: 720px;
    transition: color 0.3s ease;
}

.about-cta {
    margin-top: 36px;
    display: inline-flex;
    font-weight: 400;
    padding: 20px 48px;
    font-size: 16px;
    width: fit-content;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    background: linear-gradient(90deg, #1087FF 0%, #0A4987 100%);
    color: #ffffff;
    font-family: 'Funnel Display', system-ui, sans-serif;
    text-decoration: none;
    height: 100%;
}

.about-right {
    display: flex;
    justify-content: center;
    max-width: 597px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 480px;
    overflow: hidden;
    z-index: 0;
}

.video-icon {
    width: 56px;
    height: 56px;
}

.about-right-audio-block {
    display: flex;
    gap: 20px;
    padding: 30px;
    border-radius: 20px;
    background-color: var(--about-audio-bg);
    outline: 16px solid var(--about-audio-outline);
    position: absolute;
    z-index: 3;
}

.about-right-audio-block svg rect {
    fill: var(--about-waveform-bar);
    transition: fill 0.3s ease;
}

.about-right-bg-overlay {
    position: absolute;
    background: var(--about-bg-overlay);
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.about-right-marquee-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.about-right-marquee-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: scroll-vertical 15s linear infinite;
}


.about-right-copy {
    font-family: Funnel Display;
    font-weight: 400;
    font-size: 24px;
    line-height: 140%;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: top;
    color: var(--about-text-color);
    margin: 0;
    box-sizing: border-box;
}

@keyframes scroll-vertical {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-100% / 3));
    }
}

.audio-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.features-blocks .feature-card:nth-child(2) {
    flex: 1 1 44%;
    max-width: calc(1500px - 56%);
    border-right: none;
}

.features-blocks .feature-card:nth-child(3) {
    flex: 1 1 40%;
    max-width: calc(1500px - 59%);
    border-top: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.features-blocks .feature-card:nth-child(4) {
    flex: 1 1 60%;
    max-width: calc(1500px - 41%);
    border-top: 1px solid var(--border-color);
    border-right: none;
    transition: border-color 0.3s ease;
}

/*==================================================
  RESPONSIVE STYLES
  ==================================================*/



/* Large Screens */
@media (max-width: 1500px) {

    .about-inner,
    .counter-inner,
    .space,
    .services-inner,
    .features-inner,
    .testimonials-inner,
    .cta-inner,
    .pricing-inner,
    .faqs-inner,
    .footer p,
    .footer-content {
        max-width: 1300px;
        padding: 30px;
    }

    .counter-inner,
    .features-inner {
        padding: 0;
    }

    .features-blocks .feature-card {
        max-width: calc(1300px - 44%);
    }

    /* .features-blocks .feature-card:nth-child(2) {
        max-width: calc(1300px - 56%);
    }

    .features-blocks .feature-card:nth-child(3) {
        max-width: calc(1300px - 59%);
    }

    .features-blocks .feature-card:nth-child(4) {
        max-width: calc(1300px - 41%);
    } */

    /* .services-blocks {
        padding: 30px;
    } */


}

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





.testimonials-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
}

.testimonials-inner::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 220px;
    background: var(--marquee-overlay-left);
    z-index: 5;
    pointer-events: none;
}

.testimonials-inner::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 220px;
    background: var(--marquee-overlay-right);
    z-index: 5;
    pointer-events: none;
}

.counter-section {
    background: var(--bg-body-alt);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.counter-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    height: 250px;
    transition: border-color 0.3s ease;
}

.counter-card {
    padding: 40px 0 40px 60px;
    background: var(--bg-card-flat);
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: flex-start;
    justify-content: space-between;
    border-left: 1px solid var(--border-color);
    height: 100%;
    width: 100%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.counter-label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1.6;
    font-weight: 500;
    transition: color 0.3s ease;
}

.counter-value {
    margin: 0;
    color: var(--text-primary);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 60px;
    line-height: 1.2;
    font-weight: 600;
    transition: color 0.3s ease;
}

.space {
    height: 100px;
    max-width: 1500px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    margin: 0 auto;
    transition: border-color 0.3s ease;
}

.services {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.services-inner {
    background-image: var(--why-bg-image);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    transition: background-image 0.3s ease, border-color 0.3s ease;
}



.services-heading {
    max-width: 930px;
    text-align: center;
    margin-top: 100px;
}

.services-heading h2 {
    margin: 0;
    color: var(--color-light);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 600;
    transition: color 0.3s ease;
}

.top-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.top-badge-wave {
    padding: 13px;
    background: var(--badge-bg);
    border-radius: 12px;
    transition: background-color 0.3s ease;

}




.about -badge-wave img {
    display: block;
}

.top-badge-text {
    padding: 15px 12px;
    border: 1px solid var(--badge-border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.46;
    background: transparent;
    color: var(--badge-text);
    transition: all 0.3s ease;
}

.services-blocks {
    max-width: 1380px;
    margin-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.875rem;
    width: 100%;
}

.service-card {
    background: rgb(240, 247, 255);
    border: 1px solid var(--border-color-light);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: space-between;
    flex: 1 1 min(440px, 30%);
    transition: border-color 0.3s ease;
    /* min-width: 280px;
            max-width: 33.333%; */
}

.services-blocks>.service-card:nth-child(4),
.services-blocks>.service-card:nth-child(5) {
    flex: 1 1 min(420px, 50%);
    max-width: 50%;
}

.service-card-wide {
    flex: 1 1 min(420px, 50%);
    max-width: 50%;
}

.service-card-small {
    flex: 1 1 min(420px, 50%);
    max-width: 50%;
}

.service-text {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.service-card h3 {
    margin: 0;
    color: #161616;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
    font-family: 'Funnel Display', system-ui, sans-serif;
}

.service-card p {
    margin: 0;
    color: rgb(96, 96, 96);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* .service-preview {
            
        } */

/* Features Section */
.features {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.features-inner {
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.features-heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 90px 60px 50px 60px;
}

.header-text {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.header-text h2 {
    color: var(--text-primary);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 38px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.features-card-text p {
    color: var(--text-secondary);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 22px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.features-card-text p span {
    color: var(--text-primary);
    transition: color 0.3s ease;
    font-weight: 600;
}

.features-blocks {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* gap: 1.5rem; */
    /* padding: 0 60px 90px; */
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.feature-card {
    padding: 60px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    min-width: 320px;
    box-sizing: border-box;
    flex: 1 1 56%;
    max-width: calc(1500px - 44%);
    border-right: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.feature-card img {
    background-color: var(--color-dark-3);
    border-radius: 20px;
}

.top-badge-wave img {
    display: block;
    background-color: transparent;
}

.feature-light-img {
    display: none;
}

.feature-dark-img {
    display: block;
}

body.light-mode .feature-light-img {
    display: block;
}

body.light-mode .feature-dark-img {
    display: none;
}




/* Testimonials */
.testimonials {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
    z-index: 0;
    position: relative;
}

.testimonials-inner {
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0 auto;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 100px 60px 100px 60px;
    transition: border-color 0.3s ease;
}

.testimonials-text {
    display: flex;
    gap: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.testimonials-text .top-badge {
    margin: 0;
}

.testimonials-text h2 {
    color: var(--text-primary);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 38px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.testimonial-heading p {
    color: var(--badge-text);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

.testimonials-marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.testimonials-marquee-container::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 220px;
    background: var(--marquee-overlay-left);
    z-index: 5;
    pointer-events: none;
}

.testimonials-marquee-container::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 220px;
    background: var(--marquee-overlay-right);
    z-index: 5;
    pointer-events: none;
}

.testimonial-cards-1 {
    width: 100%;
    display: flex;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
}

.testimonial-cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 60px 60px 60px 90px;
    justify-content: space-between;
}

.testimonial-card {
    background: var(--testimonial-card-bg);
    border-radius: 16px;
    padding: 30px;
    min-width: 570px;
    margin-right: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card img {
    padding-bottom: 20px;
}

body.light-mode .testimonial-logo img {
    filter: invert(1);
}

.testimonial-logo img {
    filter: invert(0);
}

.testimonial-card p {
    color: var(--text-secondary);
    padding-bottom: 32px;
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.avatar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar p {
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: var(--avatar-text-color);
}

.avatar p span {
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--avatar-name-color);
}



/* CTA Section */
.cta {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.cta-inner {
    max-width: 1500px;
    background-image: var(--cta-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 0 auto;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 100px 60px 100px 60px;
    transition: border-color 0.3s ease;
}

.buttons {
    display: flex;
    gap: 8px;
}

.cta-text h2 {
    color: var(--color-light);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 38px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.cta-heading {
    color: var(--color-light);
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
    transition: color 0.3s ease;
}

.btn-w {
    padding: 16px 36px;
    background: rgb(255, 255, 255);
    border-radius: 60px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    color: #000000;
    font-size: 16px;
    line-height: 1.5;
}



.btn-s {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 36px;
    background: transparent;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 60px;
    cursor: pointer;
}


/* Pricing Section */
.pricing {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.pricing-inner {
    max-width: 1500px;
    background-color: var(--bg-cta);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 0 auto;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 100px 60px 100px 60px;
    transition: border-color 0.3s ease;
}

.pricing-text {
    display: flex;
    gap: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pricing-text h2 {
    color: var(--text-primary);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 38px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.pricing-text .top-badge {
    margin-bottom: 0;
}

.pricing-heading p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    margin-top: 16px;
    transition: color 0.3s ease;
}

.pricing-blocks {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.month-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.pricing-cards {
    width: 1120px;

    display: flex;
    gap: 20px;
}

.pricng-card {
    width: 100%;
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color-light);
    border-radius: 16px;
    padding: 24px;
    /* flex: 1 1 33%; */

    gap: 32px;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pricing-head {
    font-family: 'Funnel Display', system-ui, sans-serif;
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.head-detail {
    display: flex;
    gap: 36px;
    flex-direction: column;
}

.head-detail ul li {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    list-style: none;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    align-items: center;
    transition: color 0.3s ease;
}

.checkbox-icon {
    width: 18px;
    height: 18px;
}

.pricing-btn-s {
    width: 100%;
    padding: 16px 36px;
    background: var(--pricing-btn-bg);
    border: 1px solid var(--pricing-btn-border);
    border-radius: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    text-decoration: none;
    color: var(--pricing-btn-text);
    font-size: 14px;
    line-height: 1.5;
    transition: color 0.3s ease;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.pricng-card-highlight {
    width: 100%;
    background: linear-gradient(180deg, #007FFF 0%, #023D77 100%);
    border-radius: 16px;
    padding: 24px;
    /* flex: 1 1 33%; */

    gap: 32px;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

.pricing-head-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.popular-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 6px;
    background: rgba(225, 103, 65, 1);
    border-radius: 30px;
    color: #ffffff;

    font-size: 12px;
    line-height: 1.2;
}

.pricng-card-highlight .head-detail ul li {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;

    list-style: none;
    color: #f0f0f0;

    font-size: 14px;
    line-height: 1.5;
}

.pricing-btn-p {
    width: 100%;
    padding: 16px 36px;
    background: white;
    border-radius: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0051A2;
    font-weight: 500;
}

.pricing-btn-p a {
    text-decoration: none;
    color: #0051A2;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}


/* FAQ's Section */
.faqs {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.faqs-inner {
    max-width: 1500px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 0 auto;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 100px 60px 100px 60px;
    transition: border-color 0.3s ease;
}

.faq-text {
    display: flex;
    gap: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.faq-text h2 {
    color: var(--text-primary);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 38px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.faq-text .top-badge {
    margin-bottom: 0;
}

.faq-heading p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    margin-top: 16px;
    transition: color 0.3s ease;
}

.faq-blocks {
    width: 100%;
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.faq-block {
    width: 100%;
    padding: 32px;
    background: var(--faq-bg);
    border: 1px solid var(--faq-border-color);
    border-radius: 20px;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0px 1px 4px 0px #19213D0F;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 0;
}

.faq-block.active {
    background: var(--faq-bg-highlight);
    border-color: transparent;
    box-shadow: 0px 5px 15px 0px #4A3AFF0F;
}

.faq-block.active .faq-question {
    color: #ffffff;
}

body.light-mode .faq-block.active .faq-question {
    color: rgba(9, 132, 255, 1);
}

.faq-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-answer {
    overflow: hidden;
    width: 100%;
}

.faq-block .faq-icon svg {
    transition: transform 0.3s ease;
}

.faq-block .faq-icon svg path {
    stroke: var(--faq-icon-color);
    transition: stroke 0.3s ease;
}

.faq-block.active .faq-icon svg {
    transform: rotate(180deg);
}

.faq-block.active .faq-icon svg path {
    stroke: var(--faq-icon-color-active);
}

.faq-answer p {
    color: var(--faq-question-color);
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-question {
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: 0%;
    color: var(--faq-text);
    transition: color 0.3s ease;
}

/* Invert FAQ arrow icons in light mode so they are visible */
body.light-mode .faq-block img,
body.light-mode .faq-block-highlight img {
    filter: invert(1) brightness(0.2);
}



/* Footer Section */
.footer {
    border-top: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.footer p {
    color: var(--color-gray-90);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    padding: 24px;

    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    max-width: 1500px;
    margin: 0 auto;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.footer-content {
    background: var(--footer-bg);
    padding: 100px 60px 100px 60px;
    max-width: 1500px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    width: 100%;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.footer-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footerfaq-text {
    display: flex;
    gap: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-text h2 {
    color: var(--text-primary);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 30px;
    line-height: 1.3;
    max-width: 576px;
    transition: color 0.3s ease;
}

.footer-btn {
    display: flex;
    gap: 8px;
}

.footer-p {
    background: linear-gradient(90deg, #0080FF 0%, #004D99 100%);
    border: none;
    padding: 16px 24px;
    border-radius: 40px;
}

.footer-p a {
    text-decoration: none;
    color: #fff;

    font-family: 'Funnel Display', system-ui, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
}

.footer-s {
    background: transparent;
    border: 1px solid white;
    padding: 16px 24px;
    border-radius: 40px;
}

.footer-s a {
    text-decoration: none;
    color: #fff;

    font-family: 'Funnel Display', system-ui, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-links {
    display: flex;
    gap: 16px;
    align-items: center;
    list-style: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    transition: color 0.3s ease;
}

.footer-links li {
    cursor: pointer;
    transition: color 0.2s ease;
}

.footer-links li:hover {
    color: #ffffff;
}

/* Force footer typography & logo elements to remain white on the dark footer bg in both themes */
.footer-text h2 {
    color: #ffffff;
}

.footer-content .top-badge-text {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.footer-logo .logo-text {
    color: #ffffff;
}

/* Custom premium slide-and-roll hover animations for buttons */
.btn-primary,
.btn-secondary,
.hero-actions .btn-primary,
.hero-actions .btn-secondary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.btn-text {
    display: inline-block;
    color: var(--color-light);
    font-size: 20px;
}

.btn-arrow {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

/* Hover-in animations */
.btn-primary:hover .btn-text,
.btn-secondary:hover .btn-text {
    animation: MoveUpInitial 0.35s cubic-bezier(0.3, 0, 0.1, 1) forwards,
        MoveUpEnd 0.35s cubic-bezier(0.3, 0, 0.1, 1) forwards 0.35s;
    overflow: hidden;
}

.btn-primary:hover .btn-arrow,
.btn-secondary:hover .btn-arrow {
    animation: MoveRightInitial 0.35s cubic-bezier(0.3, 0, 0.1, 1) forwards,
        MoveRightEnd 0.35s cubic-bezier(0.3, 0, 0.1, 1) forwards 0.35s;
}

/* Hover-out animations (triggered only after the button has been hovered once) */
.btn-primary.has-hovered:not(:hover) .btn-text,
.btn-secondary.has-hovered:not(:hover) .btn-text {
    animation: MoveDownInitial 0.35s cubic-bezier(0.3, 0, 0.1, 1) forwards,
        MoveDownEnd 0.35s cubic-bezier(0.3, 0, 0.1, 1) forwards 0.35s;
    overflow: hidden;
}

.btn-primary.has-hovered:not(:hover) .btn-arrow,
.btn-secondary.has-hovered:not(:hover) .btn-arrow {
    animation: MoveLeftInitial 0.35s cubic-bezier(0.3, 0, 0.1, 1) forwards,
        MoveLeftEnd 0.35s cubic-bezier(0.3, 0, 0.1, 1) forwards 0.35s;
}

/* Keyframe animations */

/* Move UP animations (Text) */
@keyframes MoveUpInitial {
    to {
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes MoveUpEnd {
    from {
        transform: translate3d(0, 100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Move DOWN animations for hover out (Text) */
@keyframes MoveDownInitial {
    to {
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes MoveDownEnd {
    from {
        transform: translate3d(0, -100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Move RIGHT animations for hover in (Arrow) */
@keyframes MoveRightInitial {
    to {
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes MoveRightEnd {
    from {
        transform: translate3d(-100%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Move LEFT animations for hover out (Arrow) */
@keyframes MoveLeftInitial {
    to {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes MoveLeftEnd {
    from {
        transform: translate3d(100%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Laptops / Smaller Desktops */
@media (max-width: 1200px) {
    .banner-header {
        padding: 1.5rem 5rem;
    }

    .banner-header.scrolled {
        padding: 1rem 5rem;
    }

    .hero-title {
        font-size: 56px;
    }

    .about-inner {
        height: auto;
        padding: 60px 40px;
        gap: 40px;
    }

    .counter-inner {
        height: auto;
        flex-wrap: wrap;
    }

    .counter-card {
        flex: 1 1 33.33%;
        padding: 30px;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 1px solid var(--border-color);

    }

    .services-blocks {
        padding: 0 40px;
    }

    .pricing-cards {
        width: 100%;
    }

    .testimonial-card {
        min-width: 400px;
    }

    .footer-btn {
        flex-direction: column;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .banner-header {
        padding: 1.5rem 2rem;
    }

    .banner-header.scrolled {
        padding: 1rem 2rem;
    }

    .hero-title {
        font-size: 48px;
    }

    .about-inner {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
        gap: 2rem;
        padding: 60px 20px;
    }

    .about-right img {
        max-width: 100%;
    }

    .about-title {
        font-size: 32px;
    }

    .services-blocks>.service-card,
    .services-blocks>.service-card:nth-child(4),
    .services-blocks>.service-card:nth-child(5),
    .service-card-wide,
    .service-card-small {
        flex: 1 1 100%;
        max-width: 100%;
        height: auto;
    }


    .services-heading {
        width: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 30px;
    }

    .features-heading {
        flex-direction: column;
        text-align: left;
        gap: 20px;
        align-items: flex-start;
        padding: 60px 20px 30px;
    }

    .header-text h2 {
        text-align: left;
    }





    .pricing-text {
        width: 100%;
        align-items: flex-start;
    }

    .pricing-heading p {
        text-align: left;
    }

    .faq-text {
        width: 100%;
        align-items: flex-start;
    }

    .faq-heading p {
        text-align: left;
    }

    .cta-heading {
        width: 100%;
        text-align: left;
        align-items: flex-start;
    }

    .footer-text {
        width: 100%;
        align-items: flex-start;
    }

    .feature-card {
        padding: 40px 20px;
    }

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

    .features-blocks .feature-card,
    .features-blocks .feature-card:nth-child(2),
    .features-blocks .feature-card:nth-child(3),
    .features-blocks .feature-card:nth-child(4) {
        flex: 1 1 100%;
        max-width: 100%;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .faqs-inner {
        align-items: flex-start;
    }


    .pricing-cards {
        flex-direction: column;
        gap: 30px;
        box-sizing: border-box;
    }

    .faqs-inner,
    .cta-inner,
    .testimonials-inner,
    .pricing-inner,
    .footer-content {
        padding: 60px 20px;
    }

    .footer-top {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
        gap: 30px;
    }

    .cta-inner {
        align-items: flex-start;
    }

    .footer-btn {
        flex-direction: row;
        width: 100%;
    }

    .services-blocks {
        padding: 0;
        margin-bottom: 30px;
    }

    .footer-top {
        flex-direction: column;
        gap: 36px;
        align-items: flex-start;
    }
}

/* Tablet & Mobile responsive navigation overrides */
@media (max-width: 991px) {
    .nav {
        display: none !important;
    }

    .controls .btn-primary {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    .btn-text {
        font-size: 20px;
    }

    .hero-actions {
        flex-direction: column;
    }

}

@media (min-width: 992px) {
    .mobile-menu-overlay {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .about-right {
        margin: 0 auto;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .nav {
        display: none !important;
    }

    .banner {
        min-height: auto;
        padding-bottom: 60px;
    }

    .banner-header {
        justify-content: space-between;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-content {
        margin-top: 60px;
        padding: 0 20px;
        text-align: center;
    }

    .hero-actions {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .hero-actions a {
        width: 100%;
        box-sizing: border-box;
    }

    .hero-actions img {
        display: none;
    }

    .btn-text {
        font-size: 18px;
    }

    .counter-card {
        flex: 1 1 100%;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
        border-bottom: 1px solid var(--border-color);
    }

    .counter-value {
        font-size: 40px !important;
    }

    .space {
        height: 60px;
    }

    .services-heading h2 {
        font-size: 28px;
    }

    .testimonials-inner::before,
    .testimonials-inner::after {
        display: none !important;
    }

    .testimonials-inner {
        align-items: flex-start;
    }

    .testimonial-cards-1 {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
    }

    .testimonials-text {
        width: 100%;
        align-items: flex-start;
    }

    .testimonial-heading p {
        text-align: left;
    }

    .marquee-track {
        display: flex !important;
        flex-direction: row !important;
        width: max-content !important;
    }

    .testimonial-card {
        width: calc(100vw - 40px) !important;
        min-width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        margin-right: 20px !important;
        box-sizing: border-box !important;
    }

    .buttons {
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .buttons .btn-w,
    .buttons .btn-s {
        width: fit-content !important;
        padding: 12px 24px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .btn-w a,
    .btn-s a,
    .footer-p a,
    .footer-s a {
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        display: inline !important;
    }

    .footer-btn {
        gap: 12px !important;
        flex-wrap: wrap;
    }

    .footer-p,
    .footer-s {
        width: fit-content !important;
        padding: 12px 24px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .footer-bottom {
        flex-direction: row;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .faq-block,
    .faq-block-highlight {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .faq-content {
        align-items: flex-start;
    }

    .faq-head {
        font-size: 18px;
    }
}

/* Mobile Devices (576px and down) */
@media (max-width: 576px) {
    .hero-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .about-title,
    .services-heading h2,
    .features-heading h2,
    .header-text h2,
    .testimonials-text h2,
    .pricing-heading h2,
    .faqs-heading h2,
    .cta-text h2,
    .footer-text h2,
    .consultation-text h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    .hero-actions {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .hero-actions a {
        width: fit-content !important;
        padding: 12px 24px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .buttons {
        width: 100%;
        gap: 12px;
    }

    .buttons .btn-w,
    .buttons .btn-s,
    .footer-p,
    .footer-s {
        width: fit-content !important;
        padding: 12px 24px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* Mobile Responsive Overrides for screen widths under 480px down to 320px */
@media (max-width: 480px) {
    .banner-header {
        padding: 12px 15px !important;
    }

    .banner-header.scrolled {
        padding: 8px 15px !important;
    }



    .logo-text {
        font-size: 18px !important;
    }

    .hero-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .hero-subtitle {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .hero-content {
        margin-top: 40px !important;
        padding: 0 10px !important;
    }

    .btn-primary,
    .btn-secondary {
        padding: 12px 24px;
        font-size: 14px;
        width: fit-content;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .about-inner,

    .services-inner,
    .features-inner,
    .testimonials-inner,
    .cta-inner,
    .pricing-inner,
    .faqs-inner,
    .footer-content {
        padding: 40px 15px !important;
    }

    .about-title,
    .services-heading h2,
    .features-heading h2,
    .testimonials-text h2,
    .pricing-heading h2,
    .faqs-heading h2,
    .cta-text h2,
    .footer-text h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

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

    .about-right-audio-block {
        width: calc(100% - 20px) !important;
        max-width: 340px !important;
        padding: 15px !important;
        gap: 12px !important;
        outline: 8px solid var(--about-audio-outline) !important;
        box-sizing: border-box !important;
    }

    .about-right-audio-block svg {
        width: 100% !important;
        height: auto !important;
    }

    .video-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .counter-card {
        padding: 20px 10px !important;
    }

    .feature-card {
        padding: 30px 15px !important;
        min-width: unset !important;
        max-width: 100% !important;
    }

    .features-heading {
        padding-top: 0px;
    }

    .pricing-cards {
        padding: 0 !important;
    }

    .pricng-card,
    .pricng-card-highlight {
        padding: 20px 15px !important;
    }

    .testimonials-inner::before,
    .testimonials-inner::after {
        display: none !important;
    }

    .testimonial-card {
        width: calc(100vw - 30px) !important;
        min-width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;
        margin-right: 15px !important;
    }

    .footer-links {
        gap: 15px !important;
    }

    .footer-links li {
        font-size: 13px !important;
    }
}

/* Mobile Menu Base Styles */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

.mobile-menu-toggle:hover {
    background-color: var(--badge-bg);
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-body);
    z-index: 9999;
    display: none;
    flex-direction: column;
    padding: 30px 24px;
    box-sizing: border-box;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 60px;
}

.mobile-menu-header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.mobile-menu-header .logo-text {
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--logo-text-color);
}

.mobile-menu-close {
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

.mobile-menu-close:hover {
    background-color: var(--badge-bg);
}

.mobile-nav .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px;
}

.mobile-nav a {
    font-size: 26px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    font-family: 'Funnel Display', system-ui, sans-serif;
}

.mobile-nav a:hover {
    color: var(--accent-color-1);
}

.mobile-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.mobile-controls .icon-btn {
    display: none !important;
}

.mobile-controls .btn-primary {
    width: 100%;
    max-width: 320px;
    text-align: center;
    justify-content: center;
}



/* ==================================================
  DEPLOY AI CONSULTATION SECTION
  ==================================================*/
.consultation {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.consultation-inner {
    max-width: 1500px;
    background-color: var(--bg-cta);
    margin: 0 auto;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 100px 60px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.consultation-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    width: 100%;
}

.consultation-text {
    flex: 1 1 490px;
    max-width: 490px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: left;
}

.consultation-text h2 {
    color: var(--text-primary);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 38px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0px;
    transition: color 0.3s ease;
}

.consultation-text p {
    color: rgba(208, 208, 208, 1);
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0px;
    transition: color 0.3s ease;
}

body.light-mode .consultation-text p {
    color: rgba(96, 96, 96, 1);
}

.consultation-card {
    flex: 0 1 520px;
    background: var(--bg-card);
    border: 1px solid rgba(36, 140, 244, 0.36);
    border-radius: 24px;
    padding: 32px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.light-mode .consultation-card {
    border: 1px solid rgba(36, 140, 244, 0.6);
}

.consultation-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    width: 100%;
}

.wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
}

.consultation-form input,
.consultation-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color-light);
    padding: 12px 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s ease;
}

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

.wpcf7-not-valid-tip {
    margin-top: 1rem;
}

.wpcf7 form.invalid .wpcf7-response-output {
    color: var(--text-primary);
}

.consultation-form input::placeholder,
.consultation-form textarea::placeholder {
    color: rgba(113, 131, 148, 1);
    opacity: 1;
}

body.light-mode .consultation-form input::placeholder,
body.light-mode .consultation-form textarea::placeholder {
    color: rgba(136, 161, 185, 1);
    opacity: 1;
}

.consultation-form input:focus,
.consultation-form textarea:focus {
    border-bottom-color: var(--accent-color-1);
}

.btn-submit {
    width: 100%;
    padding: 16px 36px;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(90deg, #1087FF 0%, #0A4987 100%);
    color: #ffffff;
    font-family: 'Figtree', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(10, 73, 135, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(10, 73, 135, 0.3);
}

.btn-submit:active {
    transform: translateY(0);
}

/* Tablet & Mobile Responsive */
@media (max-width: 992px) {
    .consultation-content {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .consultation-text {
        flex: 0 1 auto;
        max-width: 100%;
        text-align: left;
    }

    .consultation-card {
        flex: 1 1 auto;
        max-width: 100%;
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .consultation-inner {
        padding: 60px 20px;
    }

    .consultation-text h2 {
        font-size: 32px;
    }
}