@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-Italic.woff2") format("woff2");
    font-style: italic;
    font-display: optional;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-Light.woff2") format("woff2");
    font-weight: 300;
    font-display: optional;
    font-style: normal;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: optional;
    font-style: normal;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: optional;
    font-style: normal;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: optional;
    font-style: normal;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: optional;
    font-style: normal;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: optional;
    font-style: normal;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Pochaevsk";
    src: url("../fonts/pochaevsk/Pochaevsk-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: optional;
    font-style: normal;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/Gilroy-Light.woff2") format("woff2");
    font-weight: 300;
    font-display: optional;
    font-style: normal;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/Gilroy-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: optional;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Roboto Mono";
    src: url("../fonts/roboto-mono/RobotoMono-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: optional;

    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Font Awesome 7 Brands";
    src: url("../fonts/font-awesome/Font-Awesome-7-Brands-Regular-400.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Font Awesome 7 Free";
    src: url("../fonts/font-awesome/Font-Awesome-7-Free-Regular-400.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Font Awesome 7 Free";
    src: url("../fonts/font-awesome/Font-Awesome-7-Free-Solid-900.woff2")
        format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --cw: 200px;
    --ch: 250px;
    /* Colors */
    --color-surface: #faf8ff;
    --color-surface-dim: #d2d9f4;
    --color-surface-bright: #faf8ff;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f2f3ff;
    --color-surface-container: #eceefb;
    --color-surface-container-high: #e6e8f6;
    --color-surface-container-highest: #e1e2f1;
    --color-on-surface: #1a1b23;
    --color-on-surface-variant: #444653;
    --color-outline: #757784;
    --color-outline-variant: #c5c6d5;
    --color-primary: #800080;
    --color-on-primary: #ffffff;
    --color-primary-container: #ffd7f5;
    --color-on-primary-container: #380038;
    --color-secondary: #3e0be9;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #e4dfff;
    --color-on-secondary-container: #150066;
    --color-tertiary: #0061a4;
    --color-on-tertiary: #ffffff;
    --color-error: #ba1a1a;
    --color-background: #faf8ff;
    --color-on-background: #1a1b23;

    /* Spacing */
    --spacing-margin-mobile: 20px;
    --spacing-margin-desktop: 80px;
    --spacing-gutter: 24px;
    --spacing-unit: 8px;
    --spacing-container-max: 1440px;

    /* Border Radius */
    --radius-default: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Font Families */
    /* --font-label-md: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-display-lg: "Manrope", system-ui, sans-serif;
  --font-headline-lg-mobile: "Manrope", system-ui, sans-serif;
  --font-body-md: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body-lg: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-headline-md: "Manrope", system-ui, sans-serif;
  --font-headline-lg: "Manrope", system-ui, sans-serif; */

    /* Font Sizes (with line-height, letter-spacing, weight) */
    --font-size-label-md: 14px;
    --line-height-label-md: 20px;
    --letter-spacing-label-md: 0.05em;
    --font-weight-label-md: 500;

    --font-size-display-lg: 64px;
    --line-height-display-lg: 72px;
    --letter-spacing-display-lg: -0.02em;
    --font-weight-display-lg: 800;

    --font-size-headline-lg-mobile: 32px;
    --line-height-headline-lg-mobile: 40px;
    --letter-spacing-headline-lg-mobile: -0.01em;
    --font-weight-headline-lg-mobile: 700;

    --font-size-body-md: 16px;
    --line-height-body-md: 24px;
    --font-weight-body-md: 400;

    --font-size-body-lg: 18px;
    --line-height-body-lg: 28px;
    --font-weight-body-lg: 400;

    --font-size-headline-md: 24px;
    --line-height-headline-md: 32px;
    --font-weight-headline-md: 600;

    --font-size-headline-lg: 40px;
    --line-height-headline-lg: 48px;
    --letter-spacing-headline-lg: -0.01em;
    --font-weight-headline-lg: 700;

    --bg: #f8f9fa;
    --text: #1a1b23;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.06);
    --gradient-brand: linear-gradient(135deg, #800080, #3e0be9);
    --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.08);
    --gradient-radial-purple: radial-gradient(
        ellipse at 30% 20%,
        rgba(128, 0, 128, 0.08),
        transparent 60%
    );
    --gradient-glow: radial-gradient(
        circle at 30% 40%,
        rgba(128, 0, 128, 0.1),
        transparent 60%
    );

    --gradient-radial-blue: radial-gradient(
        ellipse at 70% 80%,
        rgba(62, 11, 233, 0.06),
        transparent 60%
    );
}

/* ── Background Colors ── */
.animate-marquee {
    animation: marquee 24s linear infinite;
}

.bg-surface {
    background-color: var(--color-surface);
}
.bg-surface-dim {
    background-color: var(--color-surface-dim);
}
.bg-surface-bright {
    background-color: var(--color-surface-bright);
}
.bg-surface-container-lowest {
    background-color: var(--color-surface-container-lowest);
}
.bg-surface-container-low {
    background-color: var(--color-surface-container-low);
}
.bg-surface-container {
    background-color: var(--color-surface-container);
}
.bg-surface-container-high {
    background-color: var(--color-surface-container-high);
}
.bg-surface-container-highest {
    background-color: var(--color-surface-container-highest);
}
.bg-on-surface {
    background-color: var(--color-on-surface);
}
.bg-on-surface-variant {
    background-color: var(--color-on-surface-variant);
}
.bg-outline {
    background-color: var(--color-outline);
}
.bg-outline-variant {
    background-color: var(--color-outline-variant);
}
.bg-primary {
    background-color: var(--color-primary);
}
.bg-on-primary {
    background-color: var(--color-on-primary);
}
.bg-primary-container {
    background-color: var(--color-primary-container);
}
.bg-on-primary-container {
    background-color: var(--color-on-primary-container);
}
.bg-secondary {
    background-color: var(--color-secondary);
}
.bg-on-secondary {
    background-color: var(--color-on-secondary);
}
.bg-secondary-container {
    background-color: var(--color-secondary-container);
}
.bg-on-secondary-container {
    background-color: var(--color-on-secondary-container);
}
.bg-tertiary {
    background-color: var(--color-tertiary);
}
.bg-on-tertiary {
    background-color: var(--color-on-tertiary);
}
.bg-error {
    background-color: var(--color-error);
}
.bg-background {
    background-color: var(--color-background);
}
.bg-on-background {
    background-color: var(--color-on-background);
}

/* ── Text Colors ── */
.text-surface {
    color: var(--color-surface);
}
.text-surface-dim {
    color: var(--color-surface-dim);
}
.text-surface-bright {
    color: var(--color-surface-bright);
}
.text-surface-container-lowest {
    color: var(--color-surface-container-lowest);
}
.text-surface-container-low {
    color: var(--color-surface-container-low);
}
.text-surface-container {
    color: var(--color-surface-container);
}
.text-surface-container-high {
    color: var(--color-surface-container-high);
}
.text-surface-container-highest {
    color: var(--color-surface-container-highest);
}
.text-on-surface {
    color: var(--color-on-surface);
}
.text-on-surface-variant {
    color: var(--color-on-surface-variant);
}
.text-outline {
    color: var(--color-outline);
}
.text-outline-variant {
    color: var(--color-outline-variant);
}
.text-primary {
    color: var(--color-primary);
}
.text-on-primary {
    color: var(--color-on-primary);
}
.text-primary-container {
    color: var(--color-primary-container);
}
.text-on-primary-container {
    color: var(--color-on-primary-container);
}
.text-secondary {
    color: var(--color-secondary);
}
.text-on-secondary {
    color: var(--color-on-secondary);
}
.text-secondary-container {
    color: var(--color-secondary-container);
}
.text-on-secondary-container {
    color: var(--color-on-secondary-container);
}
.text-tertiary {
    color: var(--color-tertiary);
}
.text-on-tertiary {
    color: var(--color-on-tertiary);
}
.text-error {
    color: var(--color-error);
}
.text-background {
    color: var(--color-background);
}
.text-on-background {
    color: var(--color-on-background);
}

/* ── Border Colors ── */
.border-surface {
    border-color: var(--color-surface);
}
.border-surface-dim {
    border-color: var(--color-surface-dim);
}
.border-surface-bright {
    border-color: var(--color-surface-bright);
}
.border-surface-container-lowest {
    border-color: var(--color-surface-container-lowest);
}
.border-surface-container-low {
    border-color: var(--color-surface-container-low);
}
.border-surface-container {
    border-color: var(--color-surface-container);
}
.border-surface-container-high {
    border-color: var(--color-surface-container-high);
}
.border-surface-container-highest {
    border-color: var(--color-surface-container-highest);
}
.border-on-surface {
    border-color: var(--color-on-surface);
}
.border-on-surface-variant {
    border-color: var(--color-on-surface-variant);
}
.border-outline {
    border-color: var(--color-outline);
}
.border-outline-variant {
    border-color: var(--color-outline-variant);
}
.border-primary {
    border-color: var(--color-primary);
}
.border-on-primary {
    border-color: var(--color-on-primary);
}
.border-primary-container {
    border-color: var(--color-primary-container);
}
.border-on-primary-container {
    border-color: var(--color-on-primary-container);
}
.border-secondary {
    border-color: var(--color-secondary);
}
.border-on-secondary {
    border-color: var(--color-on-secondary);
}
.border-secondary-container {
    border-color: var(--color-secondary-container);
}
.border-on-secondary-container {
    border-color: var(--color-on-secondary-container);
}
.border-tertiary {
    border-color: var(--color-tertiary);
}
.border-on-tertiary {
    border-color: var(--color-on-tertiary);
}
.border-error {
    border-color: var(--color-error);
}
.border-background {
    border-color: var(--color-background);
}
.border-on-background {
    border-color: var(--color-on-background);
}

/* ── Border Radius ── */
.rounded {
    border-radius: var(--radius-default);
}
.rounded-lg {
    border-radius: var(--radius-lg);
}
.rounded-xl {
    border-radius: var(--radius-xl);
}
.rounded-full {
    border-radius: var(--radius-full);
}

/* ── Font Family ── */
.font-label-md {
    font-family: var(--font-label-md);
}
.font-display-lg {
    font-family: var(--font-display-lg);
}
.font-headline-lg-mobile {
    font-family: var(--font-headline-lg-mobile);
}
.font-body-md {
    font-family: var(--font-body-md);
}
.font-body-lg {
    font-family: var(--font-body-lg);
}
.font-headline-md {
    font-family: var(--font-headline-md);
}
.font-headline-lg {
    font-family: var(--font-headline-lg);
}

/* ── Font Size / Typography Utilities ── */
.text-label-md {
    font-size: var(--font-size-label-md);
    line-height: var(--line-height-label-md);
    letter-spacing: var(--letter-spacing-label-md);
    font-weight: var(--font-weight-label-md);
}
.text-display-lg {
    font-size: var(--font-size-display-lg);
    line-height: var(--line-height-display-lg);
    letter-spacing: var(--letter-spacing-display-lg);
    font-weight: var(--font-weight-display-lg);
}
.text-headline-lg-mobile {
    font-size: var(--font-size-headline-lg-mobile);
    line-height: var(--line-height-headline-lg-mobile);
    letter-spacing: var(--letter-spacing-headline-lg-mobile);
    font-weight: var(--font-weight-headline-lg-mobile);
}
.text-body-md {
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body-md);
    font-weight: var(--font-weight-body-md);
}
.text-body-lg {
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-body-lg);
    font-weight: var(--font-weight-body-lg);
}
.text-headline-md {
    font-size: var(--font-size-headline-md);
    line-height: var(--line-height-headline-md);
    font-weight: var(--font-weight-headline-md);
}
.text-headline-lg {
    font-size: var(--font-size-headline-lg);
    line-height: var(--line-height-headline-lg);
    letter-spacing: var(--letter-spacing-headline-lg);
    font-weight: var(--font-weight-headline-lg);
}

/* ── Spacing Utilities (margin & padding) ── */
.m-margin-mobile {
    margin: var(--spacing-margin-mobile);
}
.m-margin-desktop {
    margin: var(--spacing-margin-desktop);
}
.m-gutter {
    margin: var(--spacing-gutter);
}
.m-unit {
    margin: var(--spacing-unit);
}

.mx-margin-mobile {
    margin-left: var(--spacing-margin-mobile);
    margin-right: var(--spacing-margin-mobile);
}
.mx-margin-desktop {
    margin-left: var(--spacing-margin-desktop);
    margin-right: var(--spacing-margin-desktop);
}
.mx-gutter {
    margin-left: var(--spacing-gutter);
    margin-right: var(--spacing-gutter);
}
.mx-unit {
    margin-left: var(--spacing-unit);
    margin-right: var(--spacing-unit);
}

.my-margin-mobile {
    margin-top: var(--spacing-margin-mobile);
    margin-bottom: var(--spacing-margin-mobile);
}
.my-margin-desktop {
    margin-top: var(--spacing-margin-desktop);
    margin-bottom: var(--spacing-margin-desktop);
}
.my-gutter {
    margin-top: var(--spacing-gutter);
    margin-bottom: var(--spacing-gutter);
}
.my-unit {
    margin-top: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
}

.mt-margin-mobile {
    margin-top: var(--spacing-margin-mobile);
}
.mt-margin-desktop {
    margin-top: var(--spacing-margin-desktop);
}
.mt-gutter {
    margin-top: var(--spacing-gutter);
}
.mt-unit {
    margin-top: var(--spacing-unit);
}

.mb-margin-mobile {
    margin-bottom: var(--spacing-margin-mobile);
}
.mb-margin-desktop {
    margin-bottom: var(--spacing-margin-desktop);
}
.mb-gutter {
    margin-bottom: var(--spacing-gutter);
}
.mb-unit {
    margin-bottom: var(--spacing-unit);
}

.ml-margin-mobile {
    margin-left: var(--spacing-margin-mobile);
}
.ml-margin-desktop {
    margin-left: var(--spacing-margin-desktop);
}
.ml-gutter {
    margin-left: var(--spacing-gutter);
}
.ml-unit {
    margin-left: var(--spacing-unit);
}

.mr-margin-mobile {
    margin-right: var(--spacing-margin-mobile);
}
.mr-margin-desktop {
    margin-right: var(--spacing-margin-desktop);
}
.mr-gutter {
    margin-right: var(--spacing-gutter);
}
.mr-unit {
    margin-right: var(--spacing-unit);
}

.p-margin-mobile {
    padding: var(--spacing-margin-mobile);
}
.p-margin-desktop {
    padding: var(--spacing-margin-desktop);
}
.p-gutter {
    padding: var(--spacing-gutter);
}
.p-unit {
    padding: var(--spacing-unit);
}

.px-margin-mobile {
    padding-left: var(--spacing-margin-mobile);
    padding-right: var(--spacing-margin-mobile);
}
.px-margin-desktop {
    padding-left: var(--spacing-margin-desktop);
    padding-right: var(--spacing-margin-desktop);
}
.px-gutter {
    padding-left: var(--spacing-gutter);
    padding-right: var(--spacing-gutter);
}
.px-unit {
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

.py-margin-mobile {
    padding-top: var(--spacing-margin-mobile);
    padding-bottom: var(--spacing-margin-mobile);
}
.py-margin-desktop {
    padding-top: var(--spacing-margin-desktop);
    padding-bottom: var(--spacing-margin-desktop);
}
.py-gutter {
    padding-top: var(--spacing-gutter);
    padding-bottom: var(--spacing-gutter);
}
.py-unit {
    padding-top: var(--spacing-unit);
    padding-bottom: var(--spacing-unit);
}

.pt-margin-mobile {
    padding-top: var(--spacing-margin-mobile);
}
.pt-margin-desktop {
    padding-top: var(--spacing-margin-desktop);
}
.pt-gutter {
    padding-top: var(--spacing-gutter);
}
.pt-unit {
    padding-top: var(--spacing-unit);
}

.pb-margin-mobile {
    padding-bottom: var(--spacing-margin-mobile);
}
.pb-margin-desktop {
    padding-bottom: var(--spacing-margin-desktop);
}
.pb-gutter {
    padding-bottom: var(--spacing-gutter);
}
.pb-unit {
    padding-bottom: var(--spacing-unit);
}

.pl-margin-mobile {
    padding-left: var(--spacing-margin-mobile);
}
.pl-margin-desktop {
    padding-left: var(--spacing-margin-desktop);
}
.pl-gutter {
    padding-left: var(--spacing-gutter);
}
.pl-unit {
    padding-left: var(--spacing-unit);
}

.pr-margin-mobile {
    padding-right: var(--spacing-margin-mobile);
}
.pr-margin-desktop {
    padding-right: var(--spacing-margin-desktop);
}
.pr-gutter {
    padding-right: var(--spacing-gutter);
}
.pr-unit {
    padding-right: var(--spacing-unit);
}

/* Max-width container */
.max-w-container-max {
    max-width: var(--spacing-container-max);
}

/* ── Optional: Outline color (for focus rings etc.) ── */
.outline-outline {
    outline-color: var(--color-outline);
}
.outline-outline-variant {
    outline-color: var(--color-outline-variant);
}

/* common css */

* {
    box-sizing: border-box;
}

html {
    font-synthesis: none;
    scroll-behavior: smooth !important;
}

.shadow-elegant {
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.07),
        0 2px 8px rgba(0, 0, 0, 0.04);
}
.bg-muted{
    background-color: #F8F9FB;
}

.shadow-card {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.03);
}

.shadow-glow {
    box-shadow:
        0 0 35px rgba(124, 58, 237, 0.35),
        0 4px 16px rgba(124, 58, 237, 0.2);
}
.accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.accordion-body.open {
    grid-template-rows: 1fr;
}
.accordion-body > div {
    overflow: hidden;
    min-height: 0;
}
.text-muted-foreground {
    color: #6b7280;
}
.bg-muted {
    background: #edf2f8;
}
/* Accordion trick */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.faq-answer.open {
    grid-template-rows: 1fr;
}
.faq-answer > div {
    overflow: hidden;
    min-height: 0;
}

.step-btn.active .step-number {
    border-color: transparent;
    background: linear-gradient(135deg, #800080, #3e0be9);
    color: white;
    box-shadow: 0 8px 30px -8px rgba(128, 0, 128, 0.35);
}
.step-btn.active .step-title {
    color: #0b1120;
    font-weight: 600;
}
.step-btn:not(.active) .step-title {
    color: #0b1120cc;
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.hover-lift {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

/* ─── Gradient Border ────────────────────────────────────── */
.gradient-border {
    position: relative;
    border: 1px solid transparent;
    background-clip: padding-box;
    background: white;
}
.gradient-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(128, 0, 128, 0.25),
        rgba(62, 11, 233, 0.2)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.gradient-border-inner {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: white;
    z-index: -1;
}

.tech {
    display: flex;
    justify-content: center;
    align-items: center;
}
input[type="checkbox"] {
    accent-color: #800080; /* Purple */
}
.client .tech img {
    height: 100%;
    background: #ededed;
    padding: 5px 14px;
    border-radius: 11px;
}
.shine-effect3 {
    position: relative;
    overflow: hidden;
}

.shine-effect3::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.35),
        transparent
    );
    pointer-events: none;

    /* Auto Shine */
    animation: autoShine 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

@keyframes autoShine {
    0% {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}
button {
    cursor: pointer;
}
.shine-effect {
    position: relative;
    overflow: hidden;
}
.shine-effect:hover {
    background: #18181b;
    color: #fff;
}

.shine-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transition: left 2s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

.shine-effect:hover::after {
    left: 150%;
}

/* Keep text intact */
.shine-effect,
.shine-effect * {
    position: relative;
    z-index: 1;
}
.shine-effect2 {
    position: relative;
    overflow: hidden;
}

.shine-effect2::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transition: left 2s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

.shine-effect2:hover::after {
    left: 150%;
}

/* Keep text intact */
.shine-effect2,
.shine-effect2::after * {
    position: relative;
    z-index: 1;
}

/* for deropdown */

.dropdown-menu {
    opacity: 0;
    display: none;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    display: block;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: #f8fafc;
    padding-left: 1.25rem;
}

/* Mobile sidebar submenu */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.submenu.open {
    max-height: 500px;
}

.mobile-submenu-item {
    transition: all 0.2s ease;
}

.mobile-submenu-item:hover {
    padding-left: 0.5rem;
    color: #a78bfa;
}

/* for owl carousel */
.owl-carousel {
    will-change: transform;
}

body {
    /* overflow-x: hidden; */
    /* font-family: system-ui, Arial, sans-serif; */
    /* font-family: "Poppins", system-ui, Arial, sans-serif; */
    font-family: "Huninn", sans-serif;
}

/* body.font-loaded {
  font-family: "Poppins", system-ui, Arial, sans-serif;
} */

body.no-scroll {
    overflow: hidden;
}
#modal-container .aurora-bg {
    background:
        radial-gradient(circle at 20% 30%, #3e0be9 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, #800080 0%, transparent 40%), #0a0a0a;
}
#modal-container .input-underline {
    border: none;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}
#modal-container .input-underline:focus {
    outline: none;
    box-shadow: none;
    border-color: #800080;
}
#modal-container .testimonial-slide {
    display: none;
}
#modal-container .testimonial-slide.active {
    display: block;
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Modal transitions */
#modal-container {
    transition: opacity 0.3s ease-in-out;
}
#modal-container #lead-modal {
    transition: transform 0.3s ease-out;
}
#modal-container .glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-card {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 30px 60px -15px rgba(124, 58, 237, 0.08),
        0 0 0 1px rgba(124, 58, 237, 0.05);
}
.timeline-vertical-line {
    background: linear-gradient(to bottom, #800080, #9a06d4, #3e0be9);
}
.masonry-grid {
    column-count: 3;
    column-gap: 1.5rem; /* gap-6 equivalent */
}
.masonry-card {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1.5rem;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}
/* responsive breakpoints for masonry columns */
@media (max-width: 1024px) {
    .masonry-grid {
        column-count: 2;
    }
}
@media (max-width: 768px) {
    .masonry-grid {
        column-count: 1;
    }
}
.service-card {
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.service-card:hover {
    transform: translateY(-6px);
}
.service-card:hover .icon-grad {
    transform: scale(1.05);
}
.service-card:hover .arrow-icon {
    transform: translateX(5px);
    opacity: 1;
}
.icon-grad {
    transition: transform 0.25s ease;
}
.arrow-icon {
    transition:
        transform 0.25s ease,
        opacity 0.2s;
}
/* hover effects and icon scaling */
.masonry-card:hover {
    transform: translateY(-6px);
}
.masonry-card:hover .icon-grad {
    transform: scale(1.05);
}
.masonry-card .icon-grad {
    transition: transform 0.3s ease;
}
/* subtle border animation on hover */
.masonry-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.2s;
}
.masonry-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
}
.icon-container {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider {
    display: flex;
    width: max-content;
    animation: scroll 15s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
.roboto-mono {
    font-family: "Roboto Mono", monospace;
}
.pochaevsk {
    font-family: "Pochaevsk", Arial, Helvetica, sans-serif;
}

.btn-black {
    display: block;
    background: #000000;
    padding: 20px 50px;
    border-radius: 74px;
    width: max-content;
    text-align: center;
    height: 54px;
    color: #ffffff;
    border: 1px solid #000000;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    font-weight: 400;
    cursor: pointer;
}

.btn-primary {
    background: #800080;
    padding: 8px 8px 8px 20px;
    border-radius: 74px;
    height: 54px;
    color: #ffffff;
    border: 1px solid #800080;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    font-weight: 400;
    cursor: pointer;
}

/* header css */
.dropdown .dropdown-menu {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition:
        visibility 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1),
        opacity 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1),
        transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    pointer-events: none;
    will-change: transform, opacity;
}

.dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown .service-card,
.dropdown .expertise-card {
    transition: all 0.3s cubic-bezier(0.2, 0.95, 0.4, 1.05);
    background-color: #ffffff;
    border: 1px solid #80008010;
    position: relative;
}

.dropdown .service-card:hover,
.dropdown .expertise-card:hover {
    transform: translateY(-5px);
    border-color: #800080;
    box-shadow:
        0 20px 30px -12px rgba(79, 70, 229, 0.2),
        0 0 0 1px rgba(79, 70, 229, 0.1);
}
.dropdown .service-card:hover .service-icon-wrapper,
.dropdown .expertise-card:hover .expertise-icon-wrapper {
    transform: scale(1.05);
    /* background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); */
}

.dropdown .service-icon-wrapper,
.dropdown .expertise-icon-wrapper {
    transition:
        transform 0.25s ease,
        background 0.2s ease;
    /* background: #80008010; */
}

.dropdown .card-arrow {
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.dropdown .service-card:hover .card-arrow,
.dropdown .expertise-card:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}

.dropdown .service-card:hover i:not(.fa-arrow-right),
.dropdown .expertise-card:hover i:not(.fa-arrow-right) {
    transform: rotate(3deg) scale(1.02);
}

.dropdown .service-icon-wrapper i,
.dropdown .expertise-icon-wrapper i {
    transition: transform 0.2s ease;
}

.mega-panel-premium {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(0px);
    box-shadow:
        0 30px 50px -20px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.mega-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 2rem;
}

/* left section stats styling */
.stat-number {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* mobile menu button (keep existing) */
@media (max-width: 1023px) {
    .desktop-nav {
        display: none;
    }
}

/* make dropdown full width edge to edge */
.dropdown-menu {
    left: 0 !important;
    width: 100vw !important;
}
.nav-link {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: white;
}

/* service section css start */
#services-section .owl-carousel .owl-item {
    padding: 0 7px;
}
#services-section .owl-carousel .owl-nav {
    display: none !important;
}
#services-section .owl-carousel .owl-dots {
    display: none !important;
}

#services-section .service-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 428px;
    cursor: pointer;
    /* background: #111; */
}

#services-section .service-card .card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.45s ease;
    opacity: 1;
}

#services-section .service-card .card-fill {
    position: absolute;
    inset: 0;
    background: #800080;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

#services-section .service-card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 22px 15px;
    z-index: 3;
}

#services-section .service-card .card-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    color: #172740;
    margin-bottom: 8px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#services-section .service-card .card-desc {
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    color: #000000;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease;
}

#services-section .service-card.hovered .card-desc {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

#services-section .service-card .card-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);

    margin-top: 14px;
    transform: translateY(10px);
    transition:
        opacity 0.3s ease 0.15s,
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
        background 0.2s ease;
    cursor: pointer;
}

#services-section .service-card .card-arrow img {
    width: max-content;
    height: max-content;
}
#services-section .service-card .card-arrow:hover {
    background: rgba(255, 255, 255, 0.4);
}

#services-section .service-card:hover .card-img {
    transform: scale(1.07);
    opacity: 0.18;
}

#services-section .service-card:hover .card-fill {
    opacity: 1;
}

#services-section .service-card:hover .card-overlay {
    opacity: 0;
}

#services-section .service-card:hover .card-title {
    transform: translateY(-4px);
    color: #fff;
}

#services-section .service-card:hover .card-desc {
    -webkit-line-clamp: unset;
    overflow: visible;
    display: block;
    font-size: 12px;
    color: #ffffff;
    opacity: 1;
    transform: translateY(0);
}

#services-section .service-card:hover .card-arrow {
    display: inline-flex;
    backdrop-filter: blur(100px);
    transform: translateY(0);
}

#services-section .owl-nav-services .owl-nav-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        transform 0.15s;
}
/* #services-section .owl-nav-services .owl-nav-btn:hover {
  background: #444;
  transform: scale(1.07);
} */
/* service section css end */

/* software development section start*/
#software-development-services .col-line::before {
    content: "";
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: #d1d5db;
    z-index: 0;
}

#software-development-services .svc-card {
    position: relative;
    z-index: 1;
    background: #f3f3f3;
    border-radius: 14px;
    padding: 18px 20px;
    cursor: pointer;
    transition:
        background 0.35s ease,
        box-shadow 0.35s ease;
}

#software-development-services .svc-card.active {
    background: #000000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

#software-development-services .svc-num {
    font-size: 12px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: -1%;
    color: #222;
    font-style: italic;
    transition: color 0.3s;
}
#software-development-services .svc-card.active .svc-num {
    color: #fff;
}

#software-development-services .svc-title {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    line-height: 24px;
    transition: color 0.3s;
}
#software-development-services .svc-card.active .svc-title {
    color: #fff;
}

#software-development-services .svc-divider {
    height: 1px;
    background: #374151;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

#software-development-services .svc-card.active .svc-divider {
    margin: 12px 0;

    max-height: 2px;
}

#software-development-services .svc-desc {
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-weight: 300;
    transition:
        max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease 0.08s;
    letter-spacing: 0%;
}
#software-development-services .svc-card.active .svc-desc {
    max-height: 300px;
    opacity: 1;
}

#software-development-services .col-label {
    font-size: 20px;
    color: #9ca3af;
    line-height: 20px;
    letter-spacing: -1%;
    font-weight: 500;
    position: absolute;
    left: -10px;
    top: -24px;
}


/* software development section end */

/* technologies section start */
#technologies .tech-card {
    width: 200px;
    height: 224px;
    border-radius: 20px;
    background: linear-gradient(
        100.42deg,
        rgba(255, 255, 255, 0.48) 16.09%,
        rgba(255, 255, 255, 0.14) 105.27%
    );
    border: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(
        95.7deg,
        rgba(23, 39, 64, 0.05) 6.43%,
        rgba(44, 189, 255, 0.28) 55.1%,
        rgba(94, 244, 178, 0.18) 85.19%
    );
    box-shadow: 4px 4px 30px 0px #00000008;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#technologies .tech-card p {
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
}

#technologies .slider-track-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}

#technologies .slider-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: slide-loop 16s linear infinite;
}

#technologies .slider-track:hover {
    animation-play-state: paused;
}

#technologies .slider-track .tech-item {
    width: 141px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

/* technologies section end */

/* industries section start */

#industries-section .industries-card {
    width: 372px;
    height: 119px;
    border-radius: 15px;
    angle: 0 deg;
    opacity: 1;
    background: #0000004d;
    box-shadow: 0px 10px 20px 0px #00000040;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
}

#industries-section .industries-card p {
    font-weight: 700;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 80px;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0px 4px 4px 0px #00000040;
}

/* industries section end */

/* Why Softfix Setion Start */
#whyUs .whyUs-card {
    width: 280px;
    position: absolute;
}

#whyUs .whyUs-card .dotP {
    width: 64px;
    height: 64px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#whyUs .whyUs-card .dotP .dot {
    width: 23px;
    height: 23px;
    background: #800080;

    border-radius: 50%;
}

#whyUs .whyUs-card h2 {
    font-weight: 600;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 30px;
    letter-spacing: -3%;
    margin-top: 25px;
}
#whyUs .whyUs-card p {
    font-size: 16px;
    line-height: 30px;
    letter-spacing: -2%;
    color: #64607d;
}

#whyUs .whyUs-card .number p {
    font-family: "Gilroy", cursive;
    font-weight: 900;
    font-size: 204px;
    line-height: 204px;
    color: #e5e5e5;
    letter-spacing: -2%;
    position: absolute;
    top: -32px;
    right: 31px;
    z-index: -1;
}
/* Why Softfix Setion End */

/* Case Studies Section Start */
/* ── Portfolio section wrapper ── */
.portfolio-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
}

#case-studies-section .project-card {
    position: relative;
    /* background: #000; */
    background: radial-gradient(circle at 50% 20%, #bb35bb, #000 60%);
    /* background:
    radial-gradient(
      ellipse at 40% 60%,
      rgba(140, 0, 255, 0.5),
      transparent 40%
    ),
    radial-gradient(circle at 70% 30%, rgba(0, 120, 255, 0.4), transparent 40%),
    linear-gradient(135deg, #050505, #000000); */
    border-radius: 20px;
    max-width: 1015px;
    overflow: hidden;
    width: 100%;
    padding: 32px 28px 28px;
    margin-top: 28px;
}

/* #case-studies-section .project-card::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  height: 280px;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(255, 80, 255, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
} */

#case-studies-section .mini-carousel-wrap {
    position: relative;
    width: 100%;
    height: calc(var(--ch) + 200px);
    perspective: 900px;
    perspective-origin: 50% 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    user-select: none;
    cursor: grab;
}
#case-studies-section .mini-carousel-wrap:active {
    cursor: grabbing;
}

#case-studies-section #miniRing {
    position: relative;
    width: var(--cw);
    height: var(--ch);
    transform-style: preserve-3d;
    will-change: transform;
}

#case-studies-section .mcard {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    will-change: transform, filter;
}

#case-studies-section .mcard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 99;
    display: block;
    border-radius: 12px;
    pointer-events: none;
    transition: transform 0.5s ease;
}
#case-studies-section .mcard:hover img {
    transform: scale(1.05);
}

#case-studies-section .mcard::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    z-index: 2;
    pointer-events: none;
    transition:
        border-color 0.3s,
        box-shadow 0.3s;
}
#case-studies-section .mcard.active::before {
    border-color: rgba(160, 100, 255, 0.55);
    box-shadow:
        0 0 0 1px rgba(160, 100, 255, 0.22),
        0 12px 40px rgba(0, 0, 0, 0.8),
        0 0 28px rgba(140, 80, 255, 0.4);
}

#case-studies-section .mcard::after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 15%;
    right: 15%;
    height: 16px;
    background: radial-gradient(
        ellipse,
        rgba(0, 0, 0, 0.45) 0%,
        transparent 75%
    );
    border-radius: 50%;
    pointer-events: none;
}

#case-studies-section .mini-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition:
        background 0.2s,
        border-color 0.2s,
        transform 0.15s;
}
#case-studies-section .mini-arrow:hover {
    background: rgba(140, 80, 255, 0.2);
    border-color: rgba(160, 100, 255, 0.6);
    transform: translateY(-50%) scale(1.1);
}
#case-studies-section .mini-arrow.left {
    left: 10px;
}
#case-studies-section .mini-arrow.right {
    right: 10px;
}

#case-studies-section .mini-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
}
#case-studies-section .mdot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition:
        background 0.2s,
        width 0.2s;
}
#case-studies-section .mdot.active {
    background: #fff;
    width: 14px;
    border-radius: 3px;
}

#case-studies-section .tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 4px 14px;
    margin-right: 6px;
}

#case-studies-section .btn-view {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 9px 24px;
    cursor: pointer;
    background: transparent;
    transition:
        background 0.2s,
        border-color 0.2s;
    letter-spacing: 0.01em;
}

#case-studies-section .btn-view:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.5);
}
/* Case Studies Section End */

/* Testimonial Section Start */
#testimonial .owl-testimonial-services .owl-nav-btn {
    width: 35px;
    height: 35px;
    border-radius: 1.18px;
    background: #fff;
    color: #556575;
    border: 1px solid #e1e1e1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        transform 0.15s;
}
#testimonial .owl-testimonial-services .owl-nav-btn:hover {
    /* background: #444; */
    transform: scale(1.07);
}
#testimonial img {
    width: 96px;
}
/* Testimonial Section End */

/* =============================== Contact Us Page CSS Start ==================================== */
/* Phone With Country Code CSS Start */
#contactPage .phone-input-wrapper {
    position: relative;
    width: 100%;
    transition: all 0.2s;
}

/* right container for button & code pill */
#contactPage .phone-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    pointer-events: auto;
}

/* modern dropdown trigger button */
#contactPage .country-picker-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    padding: 0.4rem 0.9rem 0.4rem 0.9rem;
    /* border-radius: 40px; */
    font-size: 0.9rem;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    border-left: 1px solid #a7a7a7;
    transition: all 0.2s;
    font-family: inherit;
}

#contactPage .country-picker-btn:hover {
    /* background: #e6edf4; */
    transform: scale(0.98);
}

#contactPage .country-picker-btn:active {
    background: #dee4ec;
    transform: scale(0.96);
}

#contactPage .flag-icon {
    font-size: 1.2rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
    font-family:
        "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

#contactPage .dial-code {
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #1e293b;
}

#contactPage .chevron-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
    transition: transform 0.2s ease;
}

/* rotate chevron when dropdown is open */
#contactPage .country-picker-btn[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}

/* improved dropdown - more modern, glassmorphism touches */
#contactPage .country-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 260px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(0px);
    border-radius: 28px;
    box-shadow:
        0 20px 35px -12px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    z-index: 100;
    transition:
        opacity 0.15s ease,
        transform 0.2s ease;
    transform-origin: top right;
    opacity: 1;
    border: 1px solid rgba(203, 213, 225, 0.5);
}

#contactPage .country-dropdown.hidden {
    display: none;
}

/* elegant list items */
#contactPage .country-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.2rem;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.95rem;
    font-weight: 450;
    color: #1e293b;
    border-bottom: 1px solid #f0f2f5;
}

#contactPage .country-item:last-child {
    border-bottom: none;
}

#contactPage .country-item:hover {
    background: #f8fafd;
}

#contactPage .country-item:active {
    background: #eef2f8;
}

#contactPage .country-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

#contactPage .country-flag {
    font-size: 1.25rem;
}

#contactPage .country-code {
    font-family: monospace;
    font-weight: 600;
    color: #3b82f6;
    background: #eff6ff;
    padding: 0.2rem 0.5rem;
    border-radius: 30px;
    font-size: 0.8rem;
}

/* search input inside dropdown  */
#contactPage .dropdown-search {
    padding: 12px 14px;
    border-bottom: 1px solid #edf2f7;
    background: #ffffff;
}

#contactPage .dropdown-search input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 40px;
    border: 1px solid #e2e8f0;
    background: #f9fafb;
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s;
}

#contactPage .dropdown-search input:focus {
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#contactPage .country-list-scroll {
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* additional micro tip styling */
#contactPage .helper-tip {
    margin-top: 12px;
    font-size: 0.75rem;
    color: #5b6e8c;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
}

#contactPage .helper-tip svg {
    opacity: 0.6;
}

#contactPage .flag-icon,
#contactPage .dial-code {
    transition: all 0.1s ease;
}
/* Phone With Country Code CSS End */

/* =============================== Contact Us Page CSS End ==================================== */

/* ===================== Healhcare Developement Page CSS Start ==========================  */
#healthcarePage .card {
    background: #e5e7eb;
    color: #000;
}

#healthcarePage .active-card {
    background: #800080;
}

#healthcarePage .active-card h2,
#healthcarePage .active-card p {
    color: #fafafa;
}

#healthcarePage #health .icon {
    background: #800080;
    color: #ffffff;
}

#healthcarePage #health .active-card .icon {
    background: #ffffff;
    color: #800080;
}

/* ===================== Healhcare Developement Page CSS End ==========================  */

/* ===================== Epertise SEO Page CSS Start ==========================  */
#seoPage .owl-nav-services .owl-nav-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        transform 0.15s;
}
#seoPage .owl-nav-services .owl-nav-btn:hover {
    background: #444;
    transform: scale(0.97);
}
/* ===================== Epertise SEO Page CSS End ==========================  */

/* dotNet Application Page CSS Start */
/* custom pulse animation for center hub */
@keyframes soft-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
    }

    50% {
        box-shadow: 0 0 0 20px rgba(79, 70, 229, 0);
    }
}

#doNetApplicationPage .pulse-glow {
    animation: soft-pulse 2.5s infinite;
}

/* node hover transitions */
#doNetApplicationPage .network-node {
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

#doNetApplicationPage .network-node:hover {
    transform: translateY(-5px);
}

#doNetApplicationPage .center-node {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

#doNetApplicationPage .center-node:hover {
    transform: scale(1.02);
}
#doNetApplicationPage .network-svg {
    animation: none !important;
}

/* make SVG lines responsive and hidden on mobile */
@media (max-width: 1023px) {
    #doNetApplicationPage .network-svg {
        display: none;
    }
}
/* dotNet Application Page CSS End */

/* content management system page css start */
#contentManagementSystemPage .scroll-card {
    transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
}

#contentManagementSystemPage .stats-card {
    transition: all 0.3s ease;
}

#contentManagementSystemPage .stats-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(79, 70, 229, 0.3);
}

/* sticky left column */
#contentManagementSystemPage .sticky-column {
    position: sticky;
    top: 100px;
    height: fit-content;
}

@media (max-width: 1023px) {
    #contentManagementSystemPage .sticky-column {
        position: relative;
        top: 0;
    }
}

/* active card highlight effect */
#contentManagementSystemPage .card-active {
    border-left: 4px solid #4f46e5;
    box-shadow: 0 25px 35px -12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
    background: white;
}

#contentManagementSystemPage .card-inactive {
    opacity: 0.5;
    filter: blur(0.5px);
}

/* smooth icon transition */
#contentManagementSystemPage .floating-icon {
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}
/* content management system page css end */

/* services, expertise --> tabs and panel css start */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.glass-card:hover {
    box-shadow: 0 20px 40px rgba(128, 0, 128, 0.1);
    transform: translateY(-8px);
    border-color: rgba(128, 0, 128, 0.2);
}

.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-border {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
}

.gradient-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(135deg, #800080, #485cdf);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.glass-card:hover.gradient-border::before {
    opacity: 0.8;
}

.bg-radial-glow {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(128, 0, 128, 0.08) 0%,
        transparent 70%
    );
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#canvas-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
}

/* ---- Service Panel Transitions ---- */
.service-panel {
    display: none;
    flex-direction: column;
    gap: 2rem;
}

.service-panel.active {
    display: flex;
    animation: fadeSlideIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(28px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Professional Tab Styling ---- */

.tab-btn {
    transition: all 0.25s ease;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    color: #52424e;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
}

.tab-btn:hover {
    background: rgba(0, 70, 128, 0.06);
    color: #485cdf;
    border-color: rgba(0, 98, 128, 0.15);
}

.tab-btn.active-tab {
    background: var(--gradient-brand);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(128, 0, 128, 0.25);
}

.tab-btn.active-tab:hover {
    box-shadow: 0 6px 20px rgba(128, 0, 128, 0.35);
    transform: translateY(-1px);
}

/* Tab container enhancement */
.tab-container {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    padding: 0.5rem;
    border-radius: 9999px;
    gap: 0.25rem;
}

@media (max-width: 640px) {
    .tab-container {
        border-radius: 2rem;
        padding: 0.375rem;
        gap: 0.125rem;
    }

    .tab-btn {
        padding: 0.375rem 0.875rem;
        font-size: 0.75rem;
    }
}

/* ---- Responsive tweaks ---- */
@media (max-width: 1024px) {
    .service-panel .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .service-panel .glass-card.rounded-\[32px\].grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .service-panel
        .glass-card.rounded-\[32px\].grid.lg\:grid-cols-2
        .relative.h-\[400px\] {
        height: 240px !important;
    }
}

@media (max-width: 768px) {
    .service-panel .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .service-panel
        .glass-card.rounded-\[32px\].grid.lg\:grid-cols-2
        .relative.h-\[400px\] {
        height: 200px !important;
    }

    .service-panel .p-12 {
        padding: 1.5rem !important;
    }

    .service-panel .lg\:p-16 {
        padding: 1.5rem !important;
    }

    .service-panel .space-y-8 {
        gap: 1.25rem !important;
    }

    .service-panel .grid.grid-cols-2.gap-8 {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .service-panel .grid.grid-cols-2.gap-8 {
        grid-template-columns: 1fr !important;
    }

    .service-panel
        .glass-card.rounded-\[32px\].grid.lg\:grid-cols-2
        .relative.h-\[400px\] {
        height: 160px !important;
    }

    .service-panel .p-8 {
        padding: 1.25rem !important;
    }

    .service-panel .text-display-lg {
        font-size: 2rem !important;
    }

    .service-panel .text-headline-lg {
        font-size: 1.5rem !important;
    }

    .service-panel .text-headline-md {
        font-size: 1.125rem !important;
    }
}
/* services, expertise --> tabs and panel css end */

/* =================== Core Team CSS Start ==================== */

.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.bg-gradient-brand {
    background: linear-gradient(135deg, #800080, #3e0be9);
}
.bg-gradient-soft {
    background: linear-gradient(
        135deg,
        rgba(128, 0, 128, 0.08),
        rgba(62, 11, 233, 0.08)
    );
}
.text-gradient {
    background: linear-gradient(135deg, #800080, #3e0be9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-elevated {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* ── Animations ── */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

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

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

.animate-gradient {
    background-size: 300% 300%;
    animation: gradient 8s ease infinite;
}

@keyframes pulse-glow {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* ── Hero grid overlay (light) ── */
.grid-overlay {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ── Scrollbar hide ── */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ── Transition tweaks ── */
.transition-smooth {
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── For the network tooltip ── */
.node-tooltip {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.node-tooltip.show {
    opacity: 1;
    pointer-events: auto;
}

/* For gradients on culture tiles, keep them with white text */
.culture-tile .text-white {
    color: #fff !important;
}

/* =================== Core Team CSS End ==================== */

/* =================== FAQ Page CSS Start ==================== */
.gradient-border {
    position: relative;
    border: 1px solid transparent;
    background-clip: padding-box;
    background: white;
}
.gradient-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(128, 0, 128, 0.3),
        rgba(62, 11, 233, 0.2)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ── Hover glow (light) ── */
.hover-glow {
    transition: box-shadow 0.4s ease;
}
.hover-glow:hover {
    box-shadow: 0 0 60px -20px rgba(128, 0, 128, 0.25);
}

/* ── Background grid (light) ── */
.bg-grid {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ── Animations ── */
@keyframes float-slow {
    0%,
    100% {
        transform: translateY(0px) translateX(0px);
    }
    50% {
        transform: translateY(-20px) translateX(10px);
    }
}
.animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-up {
    animation: fade-up 0.6s ease forwards;
}

@keyframes pulse-glow {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}
.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.animate-gradient {
    background-size: 300% 300%;
    animation: gradient 8s ease infinite;
}

@keyframes streak {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}
.animate-streak {
    animation: streak 8s ease-in-out infinite;
}

@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(90px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(90px) rotate(-360deg);
    }
}

/* ─── Accordion transition ─── */
.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.4s ease;
}

.accordion-content.open {
    max-height: 600px;
    opacity: 1;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* .sticky-search {
  position: sticky;
  top: 80px;
  z-index: 20;
} */

.gradient-border {
    background: white;
}

.culture-tile .text-white {
    color: #fff !important;
}
/* =================== FAQ Page CSS End ==================== */
/* =================== Services Page CSS Start ==================== */

.text-gradient-brand {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bg-gradient-brand {
    background: var(--gradient-brand);
}
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.ring-glow {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 20px 60px -20px rgba(128, 0, 128, 0.15);
}
.grid-bg {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ─── Animations ─────────────────────────────────── */
@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-up {
    animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-16px);
    }
}
.animate-float {
    animation: float 5s ease-in-out infinite;
}

.service-content {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}
.service-content.fade-out {
    opacity: 0;
    transform: translateY(10px);
}
.service-content.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Pill styles ────────────────────────────────── */
.pill-active {
    background: var(--gradient-brand) !important;
    color: white !important;
    box-shadow: 0 6px 24px -8px rgba(128, 0, 128, 0.4) !important;
    border-color: transparent !important;
}
.pill-inactive {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
    color: rgba(0, 0, 0, 0.6);
}
.pill-inactive:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1b23;
}

/* =================== Services Page CSS End ==================== */
/* =================== footer Page active tabs CSS start ==================== */
.tabs {
    position: relative;
    display: flex;
    gap: 64px;
    width: 100%;
    border-bottom: 2px solid #d1d5db;
    overflow: visible;
}

.tabs::before {
    content: "";
    position: absolute;
    height: 2px;
    background: #d1d5db;
    bottom: -2px;
    left: 0;
    width: 100%;
    z-index: 1;
}

.tabs::after {
    content: "";
    position: absolute;
    height: 2px;
    background: #000;
    bottom: -2px;
    z-index: 2;
    transition: all 0.4s ease;
}


.tabs.canada-active::after {
    width: 50%;
    left: 0;
}

.tabs.india-active::after {
    width: 50%;
    left: 50%;
}


.tab {
    position: relative;
    padding-bottom: 8px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    color: #6b7280;
    transition: color 0.3s ease;
    z-index: 3;
}

.tab.active {
    color: #000;
}


/* Location Tabs Content */
.location-content-wrapper {
    position: relative;
    min-height: 100px;
    width: 250px;
}

.location-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.3s ease;

    /* text wrapping */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}


.location-content.invisible {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.location-content.visible {
    opacity: 1;
    visibility: visible;
}


/* Contact Tabs Content */
.contact-content-wrapper {
    position: relative;
    min-height: 160px;
}

.contact-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.3s ease;
}

.contact-content.invisible {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.contact-content.visible {
    opacity: 1;
    visibility: visible;
}


.country-tab {
    position: relative;
    color: #9ca3af;
    transition: color 0.3s ease;
}
 
.country-tab.active-tab {
    color: #0b1a33;
}
 
.country-tab.active-tab .relative {
    font-weight: 600;
}
#tab-indicator {
    position: absolute;
    left: 0;
    height: 100%;
    width: 50%;
    border-radius: 9999px;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tab-underline-container {
    background-color: #e5e7eb;
}