@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
    --crimson: #be1e45;
    --navy: #1a2f4a;
    --ink: #000f13;
    --card: #0f1c24;
    --border: #1f2a32;
    --text: #f4f6f8;
    --muted: #c4d0d8;
    --glow: 0 18px 60px rgba(0, 0, 0, 0.35);
    --transition: all 0.5s ease-in-out;
}

html {
    scroll-behavior: smooth;
}

.skeleton {
    background: linear-gradient(90deg, #2f2f2f 0%, #3a3a3a 50%, #2f2f2f 100%);
    background-size: 400% 400%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

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

.loading-screen {
    position: fixed;
    inset: 0;
    background: #0b131a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000000;
    transition: opacity 0.35s ease;
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.loading-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(190, 30, 69, 0.15);
    border-top-color: #be1e45;
    animation: spin 0.9s linear infinite;
}

.loading-text {
    font-size: 14px;
    color: #cfd6de;
    letter-spacing: 0.4px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.defer-until-hero {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.defer-until-hero.reveal {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.lazy-placeholder {
    width: 100%;
    border-radius: 14px;
    margin: 18px 0;
    padding: 20px;
}

.lazy-section-hidden {
    display: none !important;
}

.skeleton-header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    align-items: center;
    gap: 20px;
}

.sk-logo {
    width: 120px;
    height: 40px;
}

.sk-nav {
    width: 300px;
    height: 20px;
}

.skeleton-hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.sk-title {
    width: 60%;
    height: 40px;
}

.sk-sub {
    width: 40%;
    height: 20px;
    margin-top: 10px;
}

.sk-btn {
    width: 140px;
    height: 35px;
    margin-top: 20px;
}

.skeleton-card .sk-img {
    width: 100%;
    height: 200px;
}

.skeleton-grid {
    display: grid;
    gap: 20px;
}

.sk-line.long {
    width: 90%;
    height: 14px;
    margin-top: 15px;
}

.sk-line.short {
    width: 60%;
    height: 14px;
    margin-top: 10px;
}

.img-placeholder {
    width: 100%;
    height: 100%;
    background: #222;
    filter: blur(6px);
    border-radius: 10px;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fade-in-loaded {
    opacity: 1;
}

#hero-skeleton-overlay {
    position: fixed;
    inset: 0;
    background: #0b131a;
    z-index: 10000001;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
}

#hero-skeleton-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.hero-stage .hero-content {
    opacity: 0;
}

.hero-stage.hero-visible .hero-content {
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* shortcut css code start */
.relative {
    position: relative;
}

.flex {
    display: flex;
}

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

.flex-column {
    display: flex;
    flex-direction: column;
}

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

.justify-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

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

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-12 {
    gap: 12px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-40 {
    gap: 40px;
}

.gap-50 {
    gap: 50px;
}

.gap-100 {
    gap: 100px;
}

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

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

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

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

.pb-50 {
    padding-bottom: 50px !important;
}

.pb-70 {
    padding-bottom: 70px !important;
}

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

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

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

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

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

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

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

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

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

.fs-16 {
    font-size: 16px;
}

.fs-20 {
    font-size: 20px;
    line-height: 30px;
}

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

.txt-primary {
    color: #be1e45;
}

.txt-center {
    text-align: center;
}

/* shortcut css code end */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: var(--text);
    font-family: "Montserrat", sans-serif;
    line-height: 1.7em;
    font-size: 18px;
    background: radial-gradient(circle at 20% 20%, rgba(38, 59, 144, 0.12), transparent 25%),
        radial-gradient(circle at 80% 10%, rgba(190, 30, 69, 0.12), transparent 25%),
        var(--ink);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: #f8f8f8;
    cursor: pointer;
}

ul li {
    list-style: none;
}

.ham-icon {
    display: none;
}

.mobile-menu-contents {
    display: none;
}

.container {
    width: min(1200px, 92vw);
    margin: 0 auto;
}

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

header {
    padding: 8px 0;
    margin-bottom: 50px;
    position: sticky;
    top: 0;
    left: 0;
    background: #000F13;
    color: #fff;
    /* Adjust text color for contrast */
    z-index: 99;
    transition: background-color 0.3s ease, transform 0.4s ease;
    z-index: 999999999;
}

header.scrolled {
    background: #fffffff7;
    color: #000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    transform: translateY(0);
    /* Reset slide-down effect when scrolled */
}

header.slide-up {
    transform: translateY(-100%);
    /* Slide up to hide initially when scrolling stops */
}

.scrolled li a {
    color: #000;
    font-weight: 600;
}

.scrolled .dropdown img {
    filter: brightness(0);
}

.right-nav {
    margin-top: 15px;
}

.right-nav a.nav-active {
    color: var(--crimson);
    border-bottom: 2px solid var(--crimson);
    padding-bottom: 6px;
}

.scrolled .right-nav a.nav-active {
    color: var(--crimson);
}

.header-contents a.nav-active {
    color: var(--crimson);
    font-weight: 700;
}

.right-nav li .dropdown-wrapper {
    height: 60px;
}

.dropdown-wrapper {
    position: relative;
}

.dropdown-content {
    position: absolute;
    top: 400%;
    left: 40px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    width: 0;
}

.dropdown-wrapper:hover .dropdown-content {
    top: 80%;
    left: -400px;
    opacity: 1;
    min-width: 100%;
    width: 500%;
    transform: translateY(0);
    visibility: visible;
}

.dropdown-content .drop-container {
    display: flex;
    gap: 20px;
}

.dropdown-content a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    color: #000;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 600;


}

.dropdown-content a:hover {
    background-color: #f0f0f0;
}

.dropdown-content img {
    width: 20px;
    height: 20px;
}

.drop-again {
    position: relative;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    padding: 6px;

}

.drop1,
.drop2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.drop-again:hover .nested-dropdown {
    display: block;
}

/* Style for the nested dropdown */
.nested-dropdown {
    display: none;
    position: absolute;
    top: -140%;
    left: 100%;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 1001;
    min-width: 300px;
    width: 300px;
}

.nested-dropdown a {
    padding: 10px;
    color: #333;
    text-decoration: none;
}

.nested-dropdown a:hover {
    background-color: #f0f0f0;
}

.right-arrow-blue {
    width: 12px !important;
    height: 12px !important;
    filter: brightness(0) invert(0);
}

.logo-div {
    width: 160px;
    height: 45px;
}

.colorful {
    background: linear-gradient(90deg, #BE1E45, #263B90, #BE1E45, #263B90);
    background-size: 300% 300%;
    padding: 10px;
    width: 300px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 15px;
    animation: gradientShift 8s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.colorful2 {
    background: linear-gradient(90deg, #BE1E45, #263B90, #BE1E45, #263B90);
    background-size: 300% 300%;
    width: 700px;
    margin-bottom: 30px;
    animation: gradientShift 15s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* Smooth continuous gradient shift animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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



/* Text animation for smooth fade-in and scale */
h2 {
    font-family: Montserrat;
    font-size: 38px;
    font-weight: 600;
    line-height: 50px;
    text-transform: uppercase;
    color: white;
}

/* Slight variation for the second header */
.colorful2 h2 {
    animation-delay: 1s;
    /* Delay the second text animation for a staggered effect */
}

/* Keyframes for the text fade-in and scale */



h3 {
    font-family: Montserrat;
    font-size: 30px;
    font-weight: 700;
    line-height: 45px;
    text-align: center;

}

.below-hero {
    font-size: 20px;
    text-align: center;
}

/* Hero Section Spacing - Standard Design Margins */
.hero-title {
    margin-bottom: 32px;
}

.hero-subtitle {
    margin-bottom: 24px;
}

.industry-highlight {
    margin-bottom: 48px;
}

.hero-cta-buttons {
    margin-bottom: 60px;
}

.social-proof {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    line-height: 1.6;
}

/* Animated Gradient Text - Zero-Defect Manufacturing */
.gradient-animated-text {
    background: linear-gradient(120deg,
            #263b90,
            #be1e45,
            #4bd4ff,
            #b24bf3);
    background-size: 240% 240%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 6s ease-in-out infinite;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

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

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

.primary-btn {
    border: 1px solid #ffffff1f;
    box-shadow: var(--glow);
    padding: 12px 36px;
    border-radius: 10px;
    cursor: pointer;
    font-family: Open Sans;
    font-weight: 600;
    background: linear-gradient(120deg, var(--crimson), #263b90);
    background-size: 180% 180%;
    color: #fff;
    transition: all 0.3s ease-in-out;
    letter-spacing: 0.2px;
}

.hero-header .primary-btn {
    position: relative;
    z-index: 999999;
}

.primary-btn:hover {
    background-position: 80% 20%;
    color: #fff;
    box-shadow: 0 10px 30px rgba(190, 30, 69, 0.35), 0 8px 20px rgba(49, 84, 197, 0.25);
    transform: translateY(-3px);
}

.primary-btn img {
    transition: all .3s ease-in-out;

}

.primary-btn:hover img {
    transform: translateX(4px);
    filter: brightness(0) invert(0);
}

.hero-left {
    position: absolute;
    left: -320px;
    top: -170px;
    transform-origin: center;
    animation: rotate 10s infinite linear;
    z-index: 9999;
}

.hero-left-gradient {
    position: absolute;
    left: -300px;
    top: -170px;
    transform-origin: center;
    z-index: 9999;
    animation: pulseRotate 7s infinite ease-in-out;


}

@keyframes pulseRotate {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(45deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}


.hero-left-gradient1 {
    position: absolute;
    left: -300px;
    top: -70px;

    animation: pulseRotate 5s linear infinite;
    z-index: 9999;
    transform: scale(0.7);


}

.hero-left-gradient2 {
    position: absolute;
    left: -500px;
    top: 20px;

    animation: translate2 5s linear infinite, scale 5s linear infinite;
    z-index: 9999;
    transform: scale(0.7);


}

@keyframes translate2 {
    0% {
        transform: translateY(-200px);
    }

    50% {
        transform: translateY(80px, 80px);
    }

    100% {
        transform: translateY(-200px);
    }
}


@keyframes scale {
    0% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(0.6);
    }

    100% {
        transform: scale(1.1);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hero-right {
    display: none;
}

.hero-right-gradient {
    display: none;

}

.hero-header {
    overflow-y: visible;
    overflow-x: clip;
    position: relative;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 5 !important;
}

.hero-bg-animation {
    transition: transform 0.6s ease-out;
    position: absolute;
    z-index: 0 !important;
}

.hero-spotlight {
    position: absolute;
    top: -40px;
    left: 50%;
    width: 520px;
    height: 220px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 40%,
            rgba(178, 75, 243, 0.12) 0%,
            rgba(190, 30, 69, 0.08) 35%,
            transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.hero-visual {
    position: absolute;
    right: 4%;
    top: 12%;
    width: 480px;
    height: 480px;
    pointer-events: none;
    filter: blur(30px);
    z-index: 0 !important;
    opacity: 0.25;
    mix-blend-mode: screen;
}

.visual-backplate {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(36, 0, 255, 0.55) 0%,
            rgba(0, 0, 128, 0.5) 24%,
            rgba(0, 0, 0, 0) 52%),
        radial-gradient(circle at 50% 50%,
            rgba(40, 8, 20, 0.85) 0%,
            rgba(190, 30, 69, 0.35) 40%,
            rgba(8, 10, 16, 0) 88%);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    box-shadow:
        0 0 140px rgba(190, 30, 69, 0.35),
        inset 0 0 90px rgba(36, 0, 255, 0.25),
        inset 0 0 60px rgba(190, 30, 69, 0.22);
    mix-blend-mode: screen;
}

.visual-core {
    position: absolute;
    inset: 44%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(190, 30, 69, 0.5));
    border-radius: 50%;
    animation: pulseGlow 5s ease-in-out infinite;
}

.visual-ring {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 2px solid rgba(36, 0, 255, 0.45);
    box-shadow: 0 0 40px rgba(36, 0, 255, 0.5), inset 0 0 30px rgba(190, 30, 69, 0.3);
    animation: spinSlow 14s linear infinite;
    mix-blend-mode: screen;
}

.ring-outer {
    inset: 0;
    border-color: rgba(36, 0, 255, 0.45);
    animation-duration: 18s;
}

.ring-inner {
    inset: 24%;
    border-color: rgba(190, 30, 69, 0.55);
    animation-direction: reverse;
}

.visual-glow {
    position: absolute;
    inset: 16%;
    background: radial-gradient(circle at 50% 50%,
            rgba(0, 0, 128, 0.4),
            rgba(190, 30, 69, 0.35),
            rgba(0, 0, 0, 0));
    filter: blur(30px);
    border-radius: 50%;
    animation: pulseGlow 6s ease-in-out infinite;
    mix-blend-mode: screen;
}

.visual-scan {
    position: absolute;
    inset: 6%;
    background: linear-gradient(180deg, transparent 20%,
            rgba(0, 0, 128, 0.25) 45%,
            rgba(190, 30, 69, 0.28) 55%,
            transparent 80%);
    border-radius: 50%;
    animation: scan 8s ease-in-out infinite;
    mix-blend-mode: screen;
    opacity: 0.4;
}

.visual-ring.halo {
    inset: -4%;
    border-color: rgba(36, 0, 255, 0.22);
    filter: blur(2px);
    animation-duration: 20s;
}

.visual-ring::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    animation: spinSlow 12s linear infinite reverse;
}

.hero-bg-animation>*,
.hero-visual {
    transition: transform 0.5s ease-out;
    will-change: transform;
}

.hero-bg-animation .dotted-circle {
    opacity: 0.15;
}

.hero-bg-animation .gradient-sweep {
    opacity: 0.25;
    filter: blur(90px);
}


.neural-particles {
    position: absolute;
    inset: 0;
    z-index: 0 !important;
    pointer-events: none;
    mix-blend-mode: screen;
}

.neural-particles .spark {
    position: absolute;
    width: 2px;
    height: 2px;
    background: radial-gradient(circle,
            rgba(90, 180, 255, 1),
            rgba(255, 80, 120, 0));
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0;
    animation: neuralSpark 3s ease-in-out infinite;
    mix-blend-mode: screen;
}

.neural-particles .s1 {
    top: 18%;
    left: 22%;
    animation-duration: 3.4s;
    animation-delay: 0.6s;
}

.neural-particles .s2 {
    top: 12%;
    left: 46%;
    animation-duration: 2.8s;
    animation-delay: 1.4s;
}

.neural-particles .s3 {
    top: 8%;
    left: 66%;
    animation-duration: 3.6s;
    animation-delay: 0.2s;
}

.neural-particles .s4 {
    top: 26%;
    left: 58%;
    animation-duration: 3.2s;
    animation-delay: 2s;
}

.neural-particles .s5 {
    top: 32%;
    left: 74%;
    animation-duration: 2.6s;
    animation-delay: 1.1s;
}

.neural-particles .s6 {
    top: 42%;
    left: 14%;
    animation-duration: 3.8s;
    animation-delay: 0.3s;
}

.neural-particles .s7 {
    top: 48%;
    left: 38%;
    animation-duration: 3s;
    animation-delay: 1.8s;
}

.neural-particles .s8 {
    top: 52%;
    left: 56%;
    animation-duration: 3.7s;
    animation-delay: 0.9s;
}

.neural-particles .s9 {
    top: 58%;
    left: 68%;
    animation-duration: 2.9s;
    animation-delay: 2.4s;
}

.neural-particles .s10 {
    top: 64%;
    left: 82%;
    animation-duration: 3.3s;
    animation-delay: 1.6s;
}

.neural-particles .s11 {
    top: 70%;
    left: 26%;
    animation-duration: 3.9s;
    animation-delay: 0.7s;
}

.neural-particles .s12 {
    top: 74%;
    left: 44%;
    animation-duration: 3.1s;
    animation-delay: 2.1s;
}

.neural-particles .s13 {
    top: 78%;
    left: 60%;
    animation-duration: 2.7s;
    animation-delay: 1.3s;
}

.neural-particles .s14 {
    top: 82%;
    left: 72%;
    animation-duration: 3.5s;
    animation-delay: 0.5s;
}

.neural-particles .s15 {
    top: 86%;
    left: 34%;
    animation-duration: 3.2s;
    animation-delay: 1.9s;
}

@keyframes neuralSpark {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.8);
    }

    40% {
        opacity: 0.7;
        transform: translate(5px, -5px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(10px, -10px) scale(0.9);
    }
}


.hero-bg-animation .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ff2d55, rgba(255, 45, 85, 0));
    border-radius: 50%;
    animation: floatParticle 7s ease-in-out infinite alternate;
    filter: blur(1px);
    opacity: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    box-shadow: 0 0 12px rgba(255, 45, 85, 0.35);
}

.hero-bg-animation .p1 {
    top: 18%;
    left: 14%;
    animation-duration: 8s;
}

.hero-bg-animation .p2 {
    top: 30%;
    left: 8%;
    animation-duration: 9s;
    animation-delay: 1s;
}

.hero-bg-animation .p3 {
    top: 12%;
    left: 46%;
    animation-duration: 7.5s;
    animation-delay: 0.6s;
}

.hero-bg-animation .p4 {
    top: 26%;
    left: 58%;
    animation-duration: 8.5s;
    animation-delay: 1.2s;
}

.hero-bg-animation .p5 {
    top: 38%;
    left: 70%;
    animation-duration: 9s;
    animation-delay: 0.8s;
}

.hero-bg-animation .p6 {
    top: 15%;
    left: 78%;
    animation-duration: 7.8s;
    animation-delay: 0.4s;
}

.hero-bg-animation .p7 {
    top: 46%;
    left: 18%;
    animation-duration: 8.8s;
    animation-delay: 1.6s;
}

.hero-bg-animation .p8 {
    top: 58%;
    left: 10%;
    animation-duration: 7.2s;
    animation-delay: 0.2s;
}

.hero-bg-animation .p9 {
    top: 62%;
    left: 32%;
    animation-duration: 8.2s;
    animation-delay: 1s;
}

.hero-bg-animation .p10 {
    top: 54%;
    left: 52%;
    animation-duration: 9.2s;
    animation-delay: 1.4s;
}

.hero-bg-animation .p11 {
    top: 68%;
    left: 68%;
    animation-duration: 8.4s;
    animation-delay: 0.9s;
}

.hero-bg-animation .p12 {
    top: 44%;
    left: 82%;
    animation-duration: 7.6s;
    animation-delay: 0.7s;
}

@keyframes floatParticle {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(40px, -30px);
    }
}

.industry-highlight {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 48px;
}

.industry-pill {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: 0.2px;
    opacity: 0;
    transform: translateY(10px);
    animation: pillFadeUp 0.8s ease forwards;
    position: relative;
    overflow: hidden;
}

.industry-pill::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(120deg, #be1e45, #4bd4ff);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(75, 212, 255, 0.4);
}

.industry-pill {
    padding-left: 20px;
}

.industry-pill:nth-child(1) {
    animation-delay: 0.1s;
}

.industry-pill:nth-child(2) {
    animation-delay: 0.2s;
}

.industry-pill:nth-child(3) {
    animation-delay: 0.3s;
}

.industry-pill:nth-child(4) {
    animation-delay: 0.4s;
}

.industry-pill:nth-child(5) {
    animation-delay: 0.5s;
}

.industry-pill:nth-child(6) {
    animation-delay: 0.6s;
}

.social-proof {
    opacity: 0.78;
    transform: translateY(20px);
    animation: trustLift 0.8s ease forwards;
    animation-delay: 0.6s;
}

@keyframes pillFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes trustLift {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes scan {
    0% {
        transform: translateY(-10%);
        opacity: 0.6;
    }

    50% {
        transform: translateY(10%);
        opacity: 0.2;
    }

    100% {
        transform: translateY(-10%);
        opacity: 0.6;
    }
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trusted-company img {
    max-width: 100%;
    max-height: 100%;
}

.trusted-wrapper {
    display: flex;
    gap: 24px;
    width: 90%;
    margin: 0 auto;
    overflow-x: auto;
    padding: 16px 20px;
    background: #0b1720;
    border: 1px solid var(--border);
    border-radius: 16px;
    scrollbar-width: none;
}

.trusted-wrapper::-webkit-scrollbar {
    display: none;
}

/* Trusted By Section - Infinite Carousel */
.trusted-section {
    overflow: hidden;
    position: relative;
}

.trusted-carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-left: 0;
    margin-top: 40px;
}

/* Fade effect on both ends */
.trusted-carousel-container::before,
.trusted-carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 2;
    pointer-events: none;
}

.trusted-carousel-container::before {
    left: 0;
    background: linear-gradient(to right,
            rgba(15, 28, 36, 1) 0%,
            rgba(15, 28, 36, 0.8) 30%,
            rgba(15, 28, 36, 0) 100%);
}

.trusted-carousel-container::after {
    right: 0;
    background: linear-gradient(to left,
            rgba(15, 28, 36, 1) 0%,
            rgba(15, 28, 36, 0.8) 30%,
            rgba(15, 28, 36, 0) 100%);
}

.trusted-carousel {
    display: flex;
    gap: 60px;
    animation: scroll 40s linear infinite;
    will-change: transform;
    width: fit-content;
    padding: 20px 0;
}

/* Pause animation on hover */
.trusted-carousel:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.trusted-company {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 80px;
    transition: all 0.3s ease;
}

.trusted-company img {
    max-width: 150px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(1.2);
    opacity: 0.5;
    transition: all 0.4s ease;
}

.trusted-company:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.1);
}

.trusted-txt {
    font-family: Open Sans;
    font-size: 24px;
    font-weight: 400;
    line-height: 32.68px;
    text-align: center;
    padding: 20px 0;

}

.about-sec p.pb-30 {
    font-family: Open Sans;
    font-size: 30px;
    font-weight: 400;
    line-height: 50px;
    text-align: justify;
}

.about-sec p.pb-50 {
    font-family: Open Sans;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    text-align: justify;
}

.about-box-in {
    position: relative;
    z-index: 1;
}

.gradient-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(90deg,
            #F6CACB 0%,
            #D4AECC 25%,
            #FF9DE7 50%,
            #FEFFBB 75%,
            #DCB0BB 100%);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
    z-index: 1;
    /* Ensure it's behind the content */
}

/* Gradient animation */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

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

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

.about-box {
    display: flex;
    justify-content: center;
    border-radius: 30px;
    background-color: var(--card);
    align-items: center;
    padding: 60px 100px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--glow);

}

.about-img-holder p {
    color: #000;
    font-family: Montserrat;
    font-size: 32px;
    font-weight: 700;
    line-height: 45.6px;
}

.about-img {
    width: 130px;
}

.about-sec {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: linear-gradient(184.51deg, #011F22 -11.79%, #01011B 122.12%);
}

.about-sec::before,
.about-sec::after {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    pointer-events: none;
    animation: aboutGlow 14s ease-in-out infinite alternate;
}

.about-sec::before {
    background: radial-gradient(circle, rgba(190, 30, 69, 0.4), rgba(0, 0, 0, 0));
    top: -140px;
    left: -120px;
}

.about-sec::after {
    background: radial-gradient(circle, rgba(36, 0, 255, 0.35), rgba(0, 0, 0, 0));
    bottom: -200px;
    right: -160px;
    animation-delay: 2s;
}

.about-plain {
    position: relative;
    text-align: center;
    z-index: 1;
}

.about-title {
    font-size: 34px;
    line-height: 50px;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.about-subtitle {
    font-family: "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    color: rgba(248, 248, 248, 0.95);
    margin-bottom: 60px;
}

.about-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
    justify-items: center;
}

.metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-width: 220px;
}

.metric-icon {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0));
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
}

.metric-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    background: conic-gradient(from 90deg, #be1e45, #2400ff8c, #be1e45);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: spinSlow 16s linear infinite;
    opacity: 0.7;
}

.metric-icon span {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
}

.metric-icon img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: brightness(0) invert(1);
}

.metric-badge {
    min-width: 220px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: linear-gradient(90deg, #BE1E45 -20%, #000080 120%);
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.3px;
    line-height: 46px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
    .about-title {
        font-size: 28px;
    }

    .about-subtitle {
        font-size: 18px;
    }

    .metric-icon {
        width: 100px;
        height: 100px;
    }

    .metric-icon img {
        width: 60px;
        height: 60px;
    }

    .metric-badge {
        font-size: 20px;
        min-width: 180px;
        height: 44px;
    }
}

@keyframes aboutGlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(30px, -20px, 0) scale(1.08);
    }
}

/* .vision-sec .container{
    border: 1px dashed #FFFFFF;
    padding: 50px;
} */

.domain-img-main-box {
    position: relative;
    padding: 30px;
    background: #fff;
    z-index: 1;
}

.domain-img-main-box h5 {
    position: absolute;
    z-index: 5;
    top: -20px;
    height: 20px;
    width: 220px;
    background: #000;
    padding-left: 10px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
}

.domain-img-main-box::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(161.8deg, #FF003E 2.33%, #A7B0FE 121.57%);
    z-index: -1;

}

.domain-img-main-box::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: #000;
    z-index: 1;

}

.domain-img-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 2;
}

.domain-img {
    width: 115px;
    height: 100px;
    background: #fff;
}

h5 {
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 600;
    line-height: 29.26px;
    padding-bottom: 30px;
    position: relative;
}

.vision-app-wrapper {
    position: relative;
    padding: 20px;
    background: #fff;
    z-index: 2;
    margin: 0 auto;
    margin-top: 250px;
    display: flex;
}

.vision-app-wrapper::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(22.3deg, #FF003E -29.4%, rgba(167, 176, 254, 0.9929) 112.73%);
    z-index: -1;

}

.vision-app-wrapper::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: #000;
    z-index: 1;

}

.vision-app-main h5 {
    position: relative;
    z-index: 5;
    top: 290px;
    width: 230px;
    background: #000;
    margin-left: 10px;



}

.vision-top {
    position: relative;
    z-index: 2;

}

.vision-top .domain-img {
    width: 140px;
    height: 120px;
}

.vision-app-img-wrapper {
    border: 0.2px solid #F8F8F8;
    padding: 5px;
    border-radius: 4px;
}

.vision-app-img-wrapper p {
    font-family: Open Sans;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
}

.vision-mid {
    position: relative;
    z-index: 2;
    width: 20px;
    height: 40px;
    margin: 80px auto;
    transform: rotate(270deg);
}

.vision-right {
    border: 1px dashed #fff;
    padding: 10px;
}

.vision-top h6 {
    font-size: 20px;
    position: relative;
    color: #fff;
    margin-bottom: 5px;
    font-weight: 500;
}

.eye-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #C0DDFF;
    border-radius: 50%;
    padding: 50px;
    width: 160px;
    height: 160px;
    margin-top: 30px;
    z-index: 5;
    background: #000;

}

.eye-gradient {
    position: absolute;
    z-index: 10;
}

.vision-left {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-top: 172px;
    width: 3px;
    height: 90px;
    background: linear-gradient(90deg, #BE82CC 64.48%, #C0DDFF 64.48%);
    z-index: 3;
}

.vision-top-right {
    position: absolute;
    width: 207px;
    top: -150px;
    right: 200px;
}

.vision-bot-right {
    position: absolute;
    width: 140px;
    top: -150px;
    left: 250px;
}

.green-border {
    border: 0.2px solid #33FF00 !important;
}

.red-border {
    border: 0.2px solid #ff0000 !important;
}

.pre-heading {
    font-family: Montserrat;
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
    line-height: 45.6px;

}

.solution-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
    gap: 20px;
    row-gap: 30px;
}

.sol-box {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    background: var(--card);
    transition: all .5s ease-in-out;
    cursor: pointer;
    box-shadow: var(--glow);
}

.sol-box:hover img {
    transform: scale(1.1);
    transition: all .5s ease-in-out;
}

.sol-img {
    overflow: hidden;
    border-radius: 8px;

}

.sol-box img {
    transition: all .5s ease-in-out;
}

h4 {
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 600;
    line-height: 21.94px;
    position: relative;

}

h4::after {
    position: absolute;
    content: '';
    height: 1px;

    width: 50%;
    left: 0;
    bottom: -7px;
    transition: all .5s ease-in-out;
}

.sol-box:hover h4::after {
    background: #BE1E45;
    width: 80%;
    transition: all .5s ease-in-out;
}

.sol-box p {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    text-align: justify;

}

.product-div {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--glow);
}

.product-div h3 {

    font-family: Montserrat;
    font-size: 24px;
    font-weight: 600;
    line-height: 29.26px;
    text-align: left;


}

.product-div p {
    font-size: 16px;
}

.video-img {
    width: 500px;
    height: 500px;
    background: #E4E4E4;
    position: relative;
    z-index: 2;
    border-radius: 8px;

}

.product-video-img {
    width: 550px;
    height: 450px;
    background: #D9D9D9;
    border-radius: 12px;
    position: relative;
    z-index: 2;
}

/* .video-img::after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    width: 504px;
    height: 504px;
    background: linear-gradient(271.52deg, #FFFFFF 45.75%, #FF003E 96.46%);
    z-index: 1;
}

.video-img::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #E4E4E4;
    z-index: 2;
} */

.play-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 5;
}

.tab-sec {
    overflow-x: clip;
    overflow-y: visible;
    width: 100%;
    position: relative;
    z-index: 9;
}

.tab-wrapper {
    width: 50%;
}

.tab-list {
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 10px 20px;
    background: #0b1720;
    box-shadow: var(--glow);
}

.tab {
    cursor: pointer;
    color: var(--muted);
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 600;
    line-height: 36px;
    padding: 8px 25px;
    border-radius: 40px;
    transition: var(--transition);
}

.tab.active {
    background: linear-gradient(120deg, var(--crimson), #263b90);
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.tab-pic {
    width: 450px;
    height: 450px;
    background: #eeeeee;
    border-radius: 12px;
    position: absolute;
    right: -100px;
    transform: translateX(100%);
    top: -120px;
    z-index: 1;
}

.tab-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: -1;
    width: 600px;
    height: 250px;
    transition: opacity 0.5s ease-in-out, visibility 0.1s ease-in-out, z-index 0.5s ease-in-out;
}

.tab-content.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 1;
}

.double-dot {
    position: absolute;
    bottom: -150px;
    left: 50%;
    animation: rotate 5s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.red-small-gradient {
    position: absolute;
    top: 45%;
    left: -10px;
}

.testimonial-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.testi-box {
    background: var(--card);
    padding: 25px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: all .35s ease-in-out;
    border: 1px solid var(--border);
    box-shadow: var(--glow);
}

.testi-box:hover {
    background: linear-gradient(140deg, rgba(190, 30, 69, 0.35), rgba(38, 59, 144, 0.35));
    transform: translateY(-10px);
    transition: all .35s ease-in-out;
}

.testi-box p {
    font-family: Open Sans;
    font-size: 16px;
    line-height: 32px;

}

.auth-div {
    font-family: Open Sans;
    font-size: 14px;
    line-height: 32px;


}

.partner-box-wrapper {
    position: relative;
    display: inline-block;
    width: 154px;
    height: 144px;
    background: linear-gradient(180deg, #BE1E45 0%, #263B90 100%);
    border-radius: 6px;
    padding: 2px;
    margin: 10px;
}

.partner-box {
    width: 150px;
    height: 140px;
    background: #FFFFFFCC;
    border-radius: 4px;
    /* Match inner border radius */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.partner-box img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    padding: 10px;
}

.global-graph {
    position: relative;
}

.flag-box {
    background: linear-gradient(91.41deg, #F8F8F8 1.2%, #C0FFFF 185.38%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}

.flag-nepal {
    position: absolute;
    left: 40%;
    top: 35%;
}

.flag-india {
    position: absolute;
    left: 68%;
    top: 38%;
}
.flag-bangladesh {
    position: absolute;
    left: 10%;
    top: 38%;
}
.flag-usa {
    position: absolute;
    left: 35%;
    top: 30%;
}
/* .gradient-btn {
    background: linear-gradient(90deg, #0634EE 0%, #F30E46 100%);
    padding: 15px 30px;
    border-radius: 8px;
    box-shadow: 0px 8px 40px 0px #7090B033;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: all .5s ease-in-out;
} */

/* .gradient-btn:hover {
    background: linear-gradient(90deg, #F30E46 0%, #0634EE 100%);
    transition: all .5s ease-in-out;
} */

.gradient-btn {
    background: linear-gradient(270deg, #0634EE, #F30E46, #0634EE, #F30E46);
    background-size: 400% 400%;
    /* Larger size for a seamless flow */
    padding: 15px 30px;
    border-radius: 8px;
    box-shadow: 0px 8px 40px 0px #7090B033;
    position: relative;
    z-index: 1;
    cursor: pointer;
    overflow: hidden;
    animation: gradient-flow 8s ease infinite;
    /* Smooth infinite animation */
}

.gradient-btn::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    background: #000;
    z-index: 2;
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    border-radius: 8px;
}

/* Keyframes for smooth gradient flow */
@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

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

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


.btn-content {
    position: relative;
    z-index: 4;
    cursor: pointer;
}

.gradient-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 10%, rgba(61, 89, 204, 0.3), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(233, 50, 110, 0.35), transparent 35%),
        linear-gradient(165deg, #05060c 0%, #0c1328 60%, #08060b 100%);
    
    z-index: 0;
    pointer-events: none;
}

.footer-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 30%, rgba(61, 89, 204, 0.25), transparent 38%),
        radial-gradient(circle at 90% 36%, rgba(233, 50, 110, 0.3), transparent 42%),
        radial-gradient(circle at 50% 10%, rgba(20, 36, 90, 0.3), transparent 50%),
        linear-gradient(160deg, #04050b 0%, #0a1020 55%, #0f0710 100%);
    padding: 80px 0 40px;
}

.footer-cta .gradient-bg {
    display: none;
}

.footer-cta::before,
.footer-cta::after {
    content: none;
}

.footer-cta .container {
    position: relative;
    z-index: 2;
}

footer {
    position: relative;
    padding: 60px 0 40px;
    background: transparent;
    overflow: hidden;
    color: #f4f6f8;
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}

footer::before,
footer::after {
    content: none;
}

.footer-cta + footer {
    margin-top: 0;
    padding-top: 80px;
}

.relative .container {
    position: relative;
    z-index: 2;
}

.footer-shell {
    position: relative;
    z-index: 2;
}

.footer-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 60px;
    position: relative;
    z-index: 2;
}

.quick-links h5 {
    font-size: 24px;
    font-weight: 700;
    line-height: 29.26px;
    position: relative;
    display: inline-block;


}

.quick-links h5::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 18px;
    height: 2px;
    background: linear-gradient(90deg, #1c59ff 0%, #f30e46 100%);
    width: 120px;
}

.footer-wrapper a {
    color: #e7ebf3;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-wrapper a:hover {
    color: #9db8ff;
}

.contact-us p {
    color: #e7ebf3;
}

.social-links img {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-links a:hover img {
    transform: translateY(-3px);
    opacity: 0.85;
}

.copyright {
    padding-top: 40px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(231, 235, 243, 0.8);
}

.footer-legal a {
    color: rgba(231, 235, 243, 0.8);
    font-weight: 600;
}

.footer-legal a:hover {
    color: #ffffff;
}

.contact-us h5::after {
    width: 160px;
}

.quick-links {
    text-align: left;
    ;
}

.quick-links p {
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 10px;
    color: #f4f6f8;
}

.quick-links a {
    transition: all .5s ease-in-out;
    color: #d9e2ed;
}

.quick-links a:hover {
    color: #ff3c74;
    transform: translateX(4px);
}

.quick-links a img {
    width: 25px;
    height: 25px;
    margin-top: 3px;
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 18px;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

.copyright p {
    font-family: Open Sans;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #dfe5ee;


}

.copyright p span {
    font-weight: 600;
    padding-left: 3px;
    color: #fff;
}

.vision-box {
    width: 75%;
    margin: 0 auto;
}

.core-field {
    background: linear-gradient(180deg, #00192C 6.42%, #000F16 103.1%);


    padding: 50px 0;
    height: 560px;
    position: relative;


}

.core-gradient {
    position: absolute;
    bottom: -500px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.core-field h2 {
    position: absolute;
    bottom: 40px;
    font-weight: 700;
    line-height: 50px;
    left: 50%;
    transform: translateX(-50%) !important;
    z-index: 1;
}

.field1-img img {
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 12px;
    left: 12px;
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.gradient-circle img {
    width: 224px;
    height: 224px;
}

.field1 {
    position: absolute;
    bottom: 205px;
    left: 14%;
}

.field2 {
    position: absolute;
    bottom: 285px;
    left: 35%;
}

.field2 .red-line1 {
    transform: rotate(-10deg);
}

.field3 {
    position: absolute;
    bottom: 285px;
    left: 58%;
}

.field3 .red-line1 {
    transform: rotate(10deg);
}

.field4 {
    position: absolute;
    bottom: 205px;
    left: 78%;
}

.field4 .red-line1 {
    transform: rotate(18deg);
}

.red-line1 {
    border-left: 2px dashed #BE1E45;
    height: 120px;
    width: 0;
    transform: translateX(-50%) rotate(-22deg);
    position: absolute;
    left: 50%;
    bottom: -120px;
}

.text-field {
    position: absolute;
    left: 50%;
    width: auto;
    bottom: -55px;
    border-radius: 18px;
    background: linear-gradient(120deg, #BE1E45 0%, #263B90 100%);
    padding: 8px 16px;
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    transform: translateX(-50%);
    text-transform: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}


.white-box {
    border: 1px solid #C0FFFF;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;

}

.crimson-logo {
    position: absolute;
    top: 120px;
    left: 30px;
    z-index: 3;
}

.search {
    position: absolute;
    top: 0px;
    left: 350px;

}

.settings {
    position: absolute;
    top: 0;
    left: 580px;
}

.computer {
    position: absolute;
    top: 0;
    left: 810px;
}

.eye {
    position: absolute;
    top: 300px;
    left: 120px;
}

.insetting {
    position: absolute;
    top: 380px;
    left: 350px;
    z-index: 3;
    background: #012133;
}

.crane {
    position: absolute;
    top: 300px;
    left: 580px;
}

.iot {
    position: absolute;
    top: 250px;
    left: 810px;
}

.crimson-left {
    position: absolute;
    top: 190px;
    left: 20px;
}

.crimson-right {
    position: absolute;
    top: 190px;
    left: 170px;
    width: 230px;
    z-index: 1;
}

.search-left {
    position: absolute;
    top: 60px;
    left: 265px;
    width: 85px;
    height: 200px;

}

.search-right {
    position: absolute;
    height: 1px;
    width: 110px;
    background: #fff;
    top: 60px;
    left: 470px;
}

.settings-right {
    position: absolute;
    height: 1px;
    width: 110px;
    background: #fff;
    top: 60px;
    left: 700px;
}

.computer-bottom {
    position: absolute;
    width: 1px;
    height: 130px;
    background: #fff;
    top: 120px;
    left: 870px;
}

.settings-bottom {
    position: absolute;
    width: 1px;
    height: 180px;
    background: #fff;
    top: 120px;
    left: 645px;
}

.insetting-right {
    position: absolute;
    left: 470px;
    top: 420px;

}

.iot-left {
    position: absolute;
    top: 320px;
    left: 700px;
    width: 110px;

}

.vision-bottom {
    position: absolute;
    top: 420px;
    left: 180px;
    width: 200px;
}

.anchor-link a {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;


}

.anchor-link p {
    font-family: Open Sans;
    padding-top: 3px;
}

.anchor-link a span {
    font-weight: 600;
}

.below-header-p {
    font-family: Open Sans;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    text-align: justify;

}

.product-hero {
    overflow-x: clip;
    overflow-y: visible;

}

.product-left {
    background: linear-gradient(180deg, #001321 0%, #001321 100%);
    padding-left: 12px;
    padding-right: 50px;
    padding: 10px 50px 10px 12px;

}

.italic-text {
    font-style: italic;

}


.product-left-gradient {
    position: absolute;
    left: -400px;
    top: 0;
    animation: pulseRotate 7s infinite ease-in-out;
}

.product-right-gradient {
    position: absolute;
    right: -400px;
    top: -420px;
    transform: rotate(180deg);


}

.product-ring {
    position: absolute;
    right: -150px;
    top: -155px;
    width: 600px;
    animation: rotate 10s infinite linear;
}

.ct-mikha-img {
    width: 100%;
    height: 100%;
    background: #D9D9D9;

}

.ct-mikha-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ct-mikha {
    background: linear-gradient(180deg, #001321 0%, #000910 100%);
    padding: 50px;

}

.features-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.feature-box {
    border: 1px solid #767676;
    border-radius: 4px;
    background: #000C0F;
    padding: 20px;

}

.feature-box h6 {
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 600;
    line-height: 29.26px;


}

.feature-box p {
    margin-left: 50px;

}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    justify-content: space-between;
    align-items: center;
}

.form-controller {
    width: 100%;
    background: #FFFFFF63;
    height: 40px;
    padding: 10px 12px;
    color: #fff;
    outline: none;
    border-radius: 4px;
    margin-bottom: 10px;

}

.iti__country-list {
    background-color: #000 !important;

}

#txtarea {
    height: 100px;
    resize: none;
    font-family: Open Sans;
}

.txtarea {
    margin-top: 10px;
}

.name-sec {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

label {

    font-family: Open Sans;
    font-size: 14px;
    line-height: 32px;
}

.contact-btn {
    width: 100%;
    margin-top: 25px;
    padding: 14px 0;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #e63946 0%, #ff6a7a 100%);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 14px 36px rgba(230, 57, 70, 0.35);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.contact-btn p {
    color: #fff;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(230, 57, 70, 0.45);
    filter: brightness(1.05);
}

.phn-div img {
    width: 30px;
    height: 30px;
    margin-top: 5px;
}

.iti--separate-dial-code .iti__selected-dial-code {
    font-size: 14px !important;
}

.responsive-map {
    width: 100%;
}

.service-wrapper h2 {
    font-family: Montserrat;
    font-size: 40px;
    font-weight: 600;
    line-height: 60px;
    text-align: center;
    text-transform: none;


}

/* Contact page redesign */
.contact-hero {
    position: relative;
    padding: 80px 0 120px;
    overflow: hidden;
}

.contact-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 30%, rgba(71, 101, 214, 0.2), transparent 45%),
        radial-gradient(circle at 90% 28%, rgba(214, 68, 120, 0.18), transparent 45%),
        linear-gradient(170deg, #05090f 0%, #061423 60%, #05090f 100%);
    z-index: 0;
}

.contact-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 70px;
    align-items: start;
}

.contact-info h3 {
    margin: 16px 0 24px;
    font-size: 28px;
    font-weight: 700;
}

.contact-logo {
    width: 200px;
}

.info-line {
    margin-bottom: 14px;
    font-size: 17px;
    color: #e9edf5;
}

.info-line .icon {
    width: 22px;
    height: 22px;
}

.info-block {
    margin-top: 20px;
}

.info-block .label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 13px;
    color: #9fb1c7;
    margin-bottom: 10px;
}

.contact-card {
    background: linear-gradient(180deg, #0c1420 0%, #0a111d 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    padding: 32px;
    backdrop-filter: blur(8px);
}

.contact-card h4 {
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.contact-card .muted {
    color: #c6d2e4;
    font-size: 15px;
    margin-bottom: 26px;
}

.contact-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contact-form label {
    color: #dfe6f5;
    font-size: 13px;
    margin-bottom: 4px;
}

.contact-form .form-controller {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e9edf5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-form .form-controller::placeholder {
    color: #9fb1c7;
}

.contact-form .form-controller:focus {
    border-color: #6f8dff;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(111, 141, 255, 0.18);
    outline: none;
}

.phone-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
}

.phone-row .short {
    text-align: center;
    letter-spacing: 0.5px;
}

#txtarea {
    height: 130px;
}

.contact-card .contact-btn {
    margin-top: 24px;
    border: none;
    width: 100%;
    padding: 0;
    background: linear-gradient(135deg, #e63946 0%, #7a4bff 100%);
    box-shadow: 0 16px 42px rgba(88, 86, 255, 0.35);
    border-radius: 10px;
}

.contact-card .gradient-btn::after {
    background: transparent;
    border: none;
}

.contact-card .gradient-btn {
    min-height: 54px;
    padding: 0;
    box-shadow: 0 12px 36px rgba(12, 24, 46, 0.45);
    background: linear-gradient(135deg, #e63946 0%, #7a4bff 100%);
    border-radius: 10px;
}

.contact-card .gradient-btn .btn-content {
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.contact-map .responsive-map iframe {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.service-wrapper .product-left-gradient {
    top: -200px;
}

.our-services-sec h3 {
    text-align: left;
}

.service-box {
    padding: 15px;
    font-family: Open Sans;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    border-radius: 4px;

    background: #000;
    color: #fff;
    box-sizing: border-box;
    cursor: pointer;
    transition: all .5s ease-in-out;

}

.service-box::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 4px;
    background: linear-gradient(90deg, #BE1E45 0%, #2B43A4 100%);
    z-index: -1;

}

.service-box:hover {
    background: linear-gradient(85.58deg, rgba(190, 30, 69, 0.1) 34.83%, rgba(6, 52, 238, 0.1) 110.26%);


    transition: all .5s ease-in-out;
}

.service-sec-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.service-layer {
    background: linear-gradient(90deg,
            rgba(18, 16, 24, 1) 0%,
            rgba(15, 17, 27, 1) 25%,
            rgba(11, 17, 30, 1) 50%,
            rgba(8, 18, 34, 1) 75%,
            rgba(4, 18, 37, 1) 100%);
    height: 100%;
    width: 100%;
}

.service-card-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.service-card {
    padding: 20px 15px;
    border: 1px solid #F8F8F8;
    background: #000F13;
    border-radius: 12px;

}

.service-card-img {
    display: flex;
    justify-content: center;
    padding-bottom: 30px;

}

.service-card h4 {
    margin-bottom: 30px;
}

.service-card h4::after {
    left: 25%;
}

.red-service {
    position: absolute;
    bottom: -220px;
    left: 0px;
}

.product-hero .product-left-gradient {
    left: -300px;
    top: -100px;
}

.overflow-h {
    overflow: hidden;
}

.partner-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    background: linear-gradient(197.18deg, #0d1520 -85.23%, #031f36 206.94%);
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--glow);

}

@media (max-width:1220px) {
    .container {
        width: 90%;
    }

    .dropdown-content {
        left: -100px;
    }

    .nested-dropdown {
        width: 200px;
    }

    .about-box {
        padding: 30px 50px;
    }

    .about-img {
        width: 100px;
    }

    .about-img-holder p {

        font-size: 24px;
    }

    .vision-box {
        width: 100%;

    }

    .our-field .pre-heading {
        text-align: center;
        line-height: 30px;
    }

    .our-field h2 {
        text-align: center;
    }

    h2 {
        font-size: 28px;
        font-weight: 600;
        line-height: 42px;
    }

    .video-img {
        width: 400px;
        height: 420px;
    }

    .video-img::after {
        width: 404px;
        height: 424px;
    }

    .tab {

        font-size: 16px;

        padding: 8px 18px;

    }

    .tab-wrapper {
        width: 60%;
    }

    .tab-pic {
        width: 380px;
        height: 420px;
    }

    .tab-content {

        width: 460px;
    }

    h3 {
        font-size: 28px;
    }

    .colorful {
        width: 240px;
    }

    .colorful2 {
        width: 500px;
    }

    .below-hero {
        font-size: 18px;
        text-align: center;
        width: 60%;
        margin: 0 auto;
        margin-bottom: 50px;
    }

    .mb-300 {
        margin-bottom: 200px;
    }

    .testimonial-wrapper {
        grid-template-columns: 1fr 1fr;

    }

    .testi-box {
        height: 100%;
    }

    .testi-box3 {
        flex-direction: row;
        grid-column: span 2;
    }

    .core-field-wrapper {
        width: 100%;
    }

    .mt-100 {
        margin-top: 70px;
    }

    .field1 {
        left: 8%;
    }

    .field2 {
        left: 28%;
    }

    .field1 .red-line1 {
        height: 100px;
        bottom: -40px;
    }

    .field4 .red-line1 {
        height: 100px;
        bottom: -50px;
    }

    .field1 .red-line1 {
        height: 80px;
        bottom: auto;
    }

    .field4 .red-line1 {
        height: 80px;
        bottom: auto;
    }

}

@media (max-width:980px) {
    .colorful {
        height: 50px;
    }

    .about-sec p.pb-30 {

        font-size: 20px;

        line-height: 30px;

    }

    .about-sec p.pb-50 {

        font-size: 18px;

        line-height: 27px;

    }

    .about-img {
        width: 80px;
    }

    .about-img-holder p {
        font-size: 18px;
    }

    .gap-100 {
        gap: 60px;
    }

    .trusted-wrapper {

        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    }

    .domain-img-box {
        grid-template-columns: 1fr 1fr 1fr 1fr;

    }

    .domain-img-main-box {

        width: 85%;
        margin: 0 auto;

    }

    .vision-app-main {
        width: 85%;
        margin: 0 auto;
    }

    .solution-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
        width: 100%;

    }

    .video-img {
        width: 300px;
        height: 320px;
    }

    .video-img::after {
        width: 304px;
        height: 324px;
    }

    .tab-wrapper {
        width: 75%;
    }

    .tab-pic {
        width: 300px;
        height: 300px;

        right: auto;
        left: 0;
        transform: none;
        top: -330px;

    }

    .mb-70 {
        margin-bottom: 40px;
    }

    .tab-content {
        margin-top: 280px;
        width: 600px;
    }

    .our-partner-div {
        flex-direction: column;
        gap: 50px;
    }

    body {

        font-size: 16px;

    }

    .footer-wrapper {

        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 45px;
    }

    .quick-links h5 {
        font-size: 18px;

    }

    .contact-us h5::after {
        width: 110px;
    }

    .quick-links h5::after {
        width: 80px;
    }

    .white-box {

        width: 90px;
        height: 90px;
        padding: 10px;

    }

    .crimson-logo {
        width: 125px;
    }

    .eye {
        top: 330px;
        left: 90px;
        background: #012133;
        z-index: 4;
    }

    .vision-bottom {

        left: 135px;

    }

    .crimson-right {

        left: 130px;

    }

    .insetting {
        top: 410px;
        left: 330px;

    }

    .search {
        top: 60px;
        left: 285px;
    }

    .search-left {

        left: 220px;
        width: 65px;
        height: 130px;
        top: 110px;
    }


    .search-right {
        left: 375px;
        width: 80px;
        top: 100px;
    }

    .settings {
        top: 60px;
        left: 455px;
    }

    .crane {
        top: 330px;
        left: 455px;
    }

    .insetting-right {

        left: 380px;

    }

    .settings-bottom {

        top: 150px;
        left: 505px;
    }

    .settings-right {
        top: 130px;
        left: 535px;
        transform: rotate(45deg);
        width: 70px;
    }

    .computer {

        top: 155px;
        left: 570px;
    }

    .iot {
        top: 300px;
        left: 575px;
    }

    .computer-bottom {

        height: 55px;

        top: 245px;
        left: 615px;
    }

    .iot-left img {
        display: none;
    }

    .iot-left {
        width: 40px;
        height: 1px;
        background: #fff;
        transform: rotate(-45deg);
        top: 390px;
        left: 540px;
    }

    .vision-sec {
        display: none;
    }

    .product-hero-wrapper {
        flex-direction: column;
    }

    .product-ring {
        right: -120px;
        top: auto;
        bottom: -65px;
    }

    .product-ring img {
        width: 600px;
        height: 600px;
    }

    .ct-mikha-wrapper {
        grid-template-columns: 1fr;
    }

    .ct-mikha-img {
        width: 100%;
        height: 300px;

    }

    .features-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .below-header-p {
        font-size: 18px;
        line-height: 36px;
    }

    h5 {
        font-size: 20px;

    }

    .product-video-img {
        width: 100%;
        height: 300px;
    }

    .product-ring img {
        width: 500px;
        height: 500px;
    }

    .product-ring {
        right: -120px;
        top: auto;
        bottom: -139px;
    }

    .ct-mikha {
        padding: 20px;
    }

    .feature-box h6 {

        font-size: 18px;

    }

    .mt-100 {
        margin-top: 50px;
    }

    .service-card-wrapper {

        grid-template-columns: 1fr 1fr;

    }

    .red-service {
        bottom: -260px;
    }

    .contact-content {
        flex-direction: column;
    }

    .gradient-circle img {
        height: 185px;
        width: 185px;
    }

    .field1-img img {
        height: 170px;
        width: 170px;
        top: 7px;
        left: 7px;
    }

    .field1 {
        left: 6%;
        bottom: 140px;
    }

    .field2 {
        left: 28%;
        bottom: 220px;
    }

    .field3 {
        left: 56%;
        bottom: 220px;
    }

    .field4 {
        left: 78%;
        bottom: 140px;
    }

    .field1 .red-line1 {
        height: 90px;
        bottom: -100px;
    }

    .field2 .red-line1 {
        height: 120px;
        bottom: -130px;
        transform: rotate(-8deg);
    }

    .field3 .red-line1 {
        height: 120px;
        bottom: -130px;
        transform: rotate(8deg);
    }

    .field4 .red-line1 {
        height: 90px;
        bottom: -100px;
    }
}


@media (max-width:650px) {
    .ham-icon {
        display: block;
        width: 35px;
        padding-top: 15px;

    }

    .ham-icon img {
        filter: brightness(0) invert(1);
    }

    .scrolled .ham-icon img {
        filter: brightness(1);
    }

    .scrolled .mobile-menu-contents.active {
        background: #fff;
        height: 100vh;
    }

    .scrolled .header-contents a {
        color: #000;
        font-weight: 500;
    }

    .scrolled .cross-icon {
        filter: brightness(0);
    }


    .mobile-menu-contents {
        display: block;
        padding: 20px;
        background: #000;
        color: #fff;
        position: fixed;
        left: -250px;
        opacity: 0;
        top: 0;
        /* overflow: hidden; */
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        height: auto;
        width: 100%;
        box-shadow: 0 14px 32px rgb(0 0 0 / 10%);
        overflow-y: scroll;
        z-index: 99999;
    }

    .mobile-menu-contents.active {
        visibility: visible;
        opacity: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .right-nav {
        display: none;
    }

    .logo-div {
        width: 100px;
        height: 30px;
    }

    .hero-left img {
        width: 330px;
    }

    .hero-right img {
        width: 300px;
    }

    .colorful {
        width: 200px;
    }

    .colorful2 {
        width: 340px;
    }

    h2 {
        font-size: 20px;
        line-height: 38px;
    }

    .below-hero {
        font-size: 16px;

        width: 85%;

    }

    .hero-right {
        top: auto;
        bottom: -110px;
    }

    .mb-300 {
        margin-bottom: 150px;
    }

    .mb-40 {
        margin-bottom: 25px;
    }

    h3 {
        font-size: 22px;
    }

    .about-box-in {
        flex-direction: column;
    }

    .gap-100 {
        gap: 40px;
    }

    .vision-sec {
        display: none;
    }

    .product-div {
        flex-direction: column;
    }

    .tab-wrapper {
        width: 100%;
    }

    .gap-30 {
        gap: 15px;
    }

    .tab {
        font-size: 13px;
        padding: 4px;
    }

    .tab-list {
        padding: 10px 12px;
    }

    .partner-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .btn-content p {
        font-size: 16px;
    }

    .footer-wrapper {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .revolution-sec .justify-right {
        margin-right: 60px;
    }

    .tab-content {
        width: 365px;
    }

    .cross-icon {
        position: relative;
        width: 30px;
        height: 30px;
    }

    .cross-line {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 3px;
        background-color: #fff;
        transform-origin: center;
    }

    .cross-line:first-child {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .cross-line:last-child {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .logo-holder {
        width: 150px;
    }

    .contact-us h5::after {
        width: 100px;
    }

    .quick-links p {

        font-size: 16px;

    }

    .copyright p {

        font-size: 10px;
    }

    .testimonial-wrapper {
        grid-template-columns: 1fr;
    }

    .testi-box3 {
        flex-direction: column;
        grid-column: span 1;
    }

    .field1,
    .field2,
    .field3,
    .field4 {
        position: unset;
        margin-bottom: 25px;
        text-align: center;
    }

    .red-line1 {
        display: none;
    }

    .core-field h2 {
        position: unset;
        transform: none !important;
        line-height: 32px;
    }

    .core-field {
        height: auto;
        padding: 30px 0;
    }

    .core-field.mb-300 {
        margin-bottom: 50px;
    }

    .text-field {

        font-size: 20px;
        width: 40%;

        left: 40%;
        transform: translateX(-50%);
    }

    .field1-img img {
        height: 170px;
        width: 170px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -52%);
    }


    .core-gradient {
        display: none;
    }

    .trusted-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .trusted-company {
        width: 130px;

    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-card {
        order: 2;
    }

    .contact-info {
        order: 1;
    }

    .contact-form .form-grid {
        grid-template-columns: 1fr;
    }

    .phone-row {
        grid-template-columns: 1fr;
    }

    .hero-left-gradient {

        left: -390px;

    }

    .hero-right-gradient {

        top: -150px;
        right: -390px;

    }

    .service-card-wrapper {
        grid-template-columns: 1fr;
    }

    .service-wrapper h2 {
        font-size: 24px;
        line-height: 42px;

    }

    .service-sec-wrapper {

        grid-template-columns: 1fr;
        gap: 30px;
    }

    .red-service {
        bottom: -280px;
    }

    .hero-left {

        left: -450px;

    }

    .hero-left-gradient {
        left: -450px;
    }

    .hero-left-gradient1 {
        left: -550px;
    }

    .hero-right-gradient {
        top: -150px;
        right: -420px;
    }

    .product-hero .product-left-gradient {
        left: -360px;

    }

    .video-img {
        width: 100%;

    }

    .flag-box {
        width: 50px;
        height: 50px;
    }

    .flag-box img {
        width: 30px;
    }

}

/* New Hero Section Styles */
.hero-title {
    font-family: Montserrat;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-transform: capitalize;
}

.hero-subtitle {
    font-family: Open Sans;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--muted);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.industry-highlight {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 600;
    color: var(--crimson);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.social-proof {
    font-family: Open Sans;
    font-size: 14px;
    color: var(--muted);
    opacity: 0.8;
    margin-top: 40px;
}

.secondary-btn {
    border: 1px solid var(--border);
    padding: 12px 36px;
    border-radius: 10px;
    cursor: pointer;
    font-family: Open Sans;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    transition: all 0.3s ease-in-out;
    letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.secondary-btn:hover {
    border-color: var(--crimson);
    background: linear-gradient(120deg, rgba(190, 30, 69, 0.2), rgba(38, 59, 144, 0.15));
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(190, 30, 69, 0.22);
}

/* Solutions Grid Styles */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.solution-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.solution-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    border-color: var(--crimson);
}

.card-icon {
    width: 60px;
    height: 60px;
    background: rgba(190, 30, 69, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.card-icon img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
}

.solution-card h4 {
    font-family: Montserrat;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

.solution-card p {
    font-family: Open Sans;
    font-size: 16px;
    color: var(--muted);
    line-height: 1.6;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
    }
}

/* CT Flow Builder Section */
.flow-builder-sec .pre-heading {
    color: var(--crimson);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.feature-list p {
    font-family: Open Sans;
    font-size: 16px;
    color: var(--muted);
}

.gradient-bg-small {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(190, 30, 69, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
    top: 0;
    left: 0;
    z-index: -1;
}

/* Award Section - Card Design with Gradient Separation */
.award-sec {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(38, 59, 144, 0.08) 20%,
            rgba(38, 59, 144, 0.08) 80%,
            rgba(0, 0, 0, 0) 100%);
    padding: 80px 0;
    position: relative;
}

.award-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(190, 30, 69, 0.3) 50%,
            transparent 100%);
}

.award-sec::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(190, 30, 69, 0.3) 50%,
            transparent 100%);
}

/* Bold Glassy Award Card */
.award-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 60px 50px;
    min-height: 500px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* Animated Gradient Shadow */
.award-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(190, 30, 69, 0.4) 60deg,
            rgba(38, 59, 144, 0.4) 120deg,
            transparent 180deg,
            transparent 360deg);
    animation: rotateShadow 8s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.award-card:hover::before {
    opacity: 1;
}

@keyframes rotateShadow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Shining Light Effect */
.award-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transform: skewX(-20deg);
    animation: shine 6s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes shine {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 150%;
    }
}

.award-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(190, 30, 69, 0.5);
    box-shadow: 0 12px 50px 0 rgba(190, 30, 69, 0.3),
        0 0 80px rgba(190, 30, 69, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    transform: translateY(-5px) scale(1.01);
}

.award-card-inner {
    position: relative;
    z-index: 2;
}

/* Award Content - Left Side */
.award-content {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
}

.award-content h2 {
    color: #fff;
    font-family: Montserrat;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.9) 50%, #BE1E45 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(190, 30, 69, 0.3);
}

.award-content p {
    font-family: Open Sans;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    font-weight: 400;
}

/* Award Image - Right Side - Big and Bold */
.award-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50%;
    max-width: 50%;
}

.award-img img {
    width: 100%;
    height: 380px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    object-fit: cover;
}

/* Glowing Backdrop for Image */
.award-img::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
            rgba(190, 30, 69, 0.4) 0%,
            rgba(38, 59, 144, 0.3) 50%,
            transparent 70%);
    z-index: 0;
    opacity: 0.6;
    transition: all 0.5s ease;
    filter: blur(40px);
}

.award-card:hover .award-img::before {
    opacity: 1;
    filter: blur(50px);
    transform: translate(-50%, -50%) scale(1.2);
}

.award-card:hover .award-img img {
    transform: scale(1.05);
    filter: drop-shadow(0 15px 40px rgba(190, 30, 69, 0.4));
}

/* Responsive adjustments for award card */
@media (max-width: 968px) {
    .award-card {
        min-height: auto;
    }

    .award-card-inner {
        flex-direction: column-reverse;
    }

    .award-img {
        margin-bottom: 30px;
        flex: 1;
        max-width: 100%;
    }

    .award-img img {
        height: 300px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .award-content {
        text-align: center;
        flex: 1;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .award-card {
        padding: 40px 30px;
        min-height: auto;
    }

    .award-content h2 {
        font-size: 32px;
    }

    .award-content p {
        font-size: 16px;
    }

    .award-img img {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .award-card {
        padding: 30px 20px;
    }

    .award-content h2 {
        font-size: 28px;
    }

    .award-img img {
        height: 200px;
    }
}

/* CT Flow Builder Glassy Card Section */
.flow-builder-glassy-sec {
    position: relative;
    overflow: hidden;
}

.flow-builder-glassy-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.flow-builder-glassy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: left 0.7s ease;
    z-index: 1;
}

.flow-builder-glassy-card:hover::before {
    left: 100%;
}

.flow-builder-glassy-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(190, 30, 69, 0.5);
    box-shadow: 0 8px 32px 0 rgba(190, 30, 69, 0.2),
        0 0 60px rgba(190, 30, 69, 0.3);
    transform: translateY(-5px);
}

.glassy-card-inner {
    position: relative;
    z-index: 2;
}

.flow-builder-img-glassy {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    transition: all 0.4s ease;
}

.flow-builder-img-glassy::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
            rgba(190, 30, 69, 0.15) 0%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.flow-builder-glassy-card:hover .flow-builder-img-glassy::after {
    opacity: 1;
}

.flow-builder-img-glassy img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease;
}

.flow-builder-glassy-card:hover .flow-builder-img-glassy img {
    transform: scale(1.02);
}

/* Responsive adjustments for glassy card */
@media (max-width: 768px) {
    .flow-builder-glassy-card {
        padding: 40px 30px;
    }

    .flow-builder-img-glassy {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .flow-builder-glassy-card {
        padding: 30px 20px;
    }
}

/* ============================================     HERO SECTION - ADVANCED AI/MACHINE VISION BRANDING     ============================================ */    /* Hero Layout */  .hero-layout  {
          position:  relative;
          z-index:  2;
      
}

    .hero-content-left  {
          text-align:  left;
      
}

    /* 1. ANIMATED GRADIENT HEADLINE */  .hero-title-gradient  {
          font-family:  Montserrat;
          font-size:  56px;
          font-weight:  700;
          line-height:  1.2;
          margin-bottom:  32px;
          display:  flex;
          flex-direction:  column;
          gap:  8px;
      
}

    .gradient-text  {
          background:  linear-gradient(90deg,               #FF1B6B 0%,               #B24BF3 25%,               #45CAFF 50%,               #B24BF3 75%,               #FF1B6B 100%);
          background-size:  200% auto;
          -webkit-background-clip:  text;
          -webkit-text-fill-color:  transparent;
          background-clip:  text;
          animation:  gradientShift 5s ease-in-out infinite;
          filter:  drop-shadow(0 0 3px rgba(255,  27,  107,  0.5)) drop-shadow(0 0 8px rgba(178,  75,  243,  0.3));
          display:  block;
      
}

    @keyframes gradientShift  {

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

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

      
}

    /* 2. ANIMATED BACKGROUND ELEMENTS */  .hero-bg-animation  {
          position:  absolute;
          top:  0;
          left:  0;
          width:  100%;
          height:  100%;
          overflow:  hidden;
          pointer-events:  none;
          z-index:  0;
      
}

    /* Floating Orbital Particles */  .orbital-particle  {
          position:  absolute;
          width:  6px;
          height:  6px;
          background:  radial-gradient(circle,  rgba(178,  75,  243,  0.8),  rgba(69,  202,  255,  0.4));
          border-radius:  50%;
          box-shadow:  0 0 10px rgba(178,  75,  243,  0.6);
      
}

    .orbital-1  {
          top:  20%;
          left:  10%;
          animation:  float1 8s ease-in-out infinite;
      
}

    .orbital-2  {
          top:  60%;
          left:  80%;
          animation:  float2 10s ease-in-out infinite;
      
}

    .orbital-3  {
          top:  40%;
          left:  50%;
          animation:  float3 12s ease-in-out infinite;
      
}

    @keyframes float1  {

            0%,
          100%  {
                  transform:  translate(0,  0);
              
    }

            25%  {
                  transform:  translate(30px,  -20px);
              
    }

            50%  {
                  transform:  translate(60px,  10px);
              
    }

            75%  {
                  transform:  translate(30px,  30px);
              
    }

      
}

    @keyframes float2  {

            0%,
          100%  {
                  transform:  translate(0,  0);
              
    }

            33%  {
                  transform:  translate(-40px,  20px);
              
    }

            66%  {
                  transform:  translate(-20px,  -30px);
              
    }

      
}

    @keyframes float3  {

            0%,
          100%  {
                  transform:  translate(0,  0);
              
    }

            50%  {
                  transform:  translate(20px,  -40px);
              
    }

      
}

    /* Dotted Circular Paths */  .dotted-circle  {
          position:  absolute;
          border:  2px dashed rgba(178,  75,  243,  0.2);
          border-radius:  50%;
          animation:  rotate 20s linear infinite;
      
}

    .circle-1  {
          width:  300px;
          height:  300px;
          top:  10%;
          left:  5%;
      
}

    .circle-2  {
          width:  400px;
          height:  400px;
          top:  30%;
          right:  10%;
          animation-direction:  reverse;
          animation-duration:  25s;
      
}

    @keyframes rotate  {
          from  {
                  transform:  rotate(0deg);
              
    }

            to  {
                  transform:  rotate(360deg);
              
    }

      
}

    /* Gradient Light Sweep */  .gradient-sweep  {
          position:  absolute;
          top:  -50%;
          left:  -50%;
          width:  200%;
          height:  200%;
          background:  radial-gradient(circle at center,               rgba(178,  75,  243,  0.1) 0%,               transparent 50%);
          animation:  sweep 8s ease-in-out infinite;
      
}

    @keyframes sweep  {

            0%,
          100%  {
                  transform:  translate(0,  0) scale(1);
                  opacity:  0.3;
              
    }

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

      
}

    /* 3. RIGHT-SIDE NEURAL NETWORK GRAPHIC */  .hero-graphic-right  {
          position:  relative;
          display:  flex;
          align-items:  center;
          justify-content:  center;
      
}

    .neural-network-container  {
          position:  relative;
          width:  100%;
          max-width:  500px;
          height:  500px;
      
}

    .neural-network  {
          width:  100%;
          height:  100%;
      
}

    /* Network Lines */  .network-line  {
          stroke:  rgba(178,  75,  243,  0.4);
          stroke-width:  2;
          fill:  none;
          stroke-dasharray:  5,  5;
          animation:  pulse 3s ease-in-out infinite;
      
}

    .line-1  {
          animation-delay:  0s;
      
}

    .line-2  {
          animation-delay:  0.5s;
      
}

    .line-3  {
          animation-delay:  1s;
      
}

    .line-4  {
          animation-delay:  1.5s;
      
}

    .line-5  {
          animation-delay:  2s;
      
}

    @keyframes pulse  {

            0%,
          100%  {
                  stroke-opacity:  0.3;
                  stroke-width:  2;
              
    }

            50%  {
                  stroke-opacity:  1;
                  stroke-width:  3;
              
    }

      
}

    /* Network Nodes */  .network-node  {
          fill:  rgba(69,  202,  255,  0.6);
          stroke:  rgba(178,  75,  243,  0.8);
          stroke-width:  2;
          filter:  drop-shadow(0 0 8px rgba(178,  75,  243,  0.6));
          animation:  nodePulse 2s ease-in-out infinite;
      
}

    .node-1  {
          animation-delay:  0s;
      
}

    .node-2  {
          animation-delay:  0.3s;
      
}

    .node-3  {
          animation-delay:  0.6s;
      
}

    .node-4  {
          animation-delay:  0.9s;
      
}

    .node-5  {
          animation-delay:  1.2s;
      
}

    .node-6  {
          animation-delay:  1.5s;
      
}

    @keyframes nodePulse  {

            0%,
          100%  {
                  r:  8;
                  fill-opacity:  0.6;
              
    }

            50%  {
                  r:  12;
                  fill-opacity:  1;
              
    }

      
}

    /* Rotating Ring */  .rotating-ring  {
          position:  absolute;
          top:  50%;
          left:  50%;
          transform:  translate(-50%,  -50%);
          width:  350px;
          height:  350px;
          border:  3px solid transparent;
          border-top-color:  rgba(255,  27,  107,  0.6);
          border-right-color:  rgba(178,  75,  243,  0.4);
          border-radius:  50%;
          animation:  rotateRing 6s linear infinite;
          box-shadow:  0 0 20px rgba(178,  75,  243,  0.3);
      
}

    @keyframes rotateRing  {
          from  {
                  transform:  translate(-50%,  -50%) rotate(0deg);
              
    }

            to  {
                  transform:  translate(-50%,  -50%) rotate(360deg);
              
    }

      
}

    /* 4. ENHANCED CTA BUTTONS */  .primary-btn-enhanced  {
          background:  linear-gradient(135deg,  #FF1B6B 0%,  #B24BF3 100%);
          border:  1px solid rgba(255,  255,  255,  0.2);
          padding:  14px 40px;
          border-radius:  12px;
          cursor:  pointer;
          font-family:  Open Sans;
          font-weight:  600;
          font-size:  16px;
          color:  #fff;
          transition:  all 0.4s ease;
          position:  relative;
          overflow:  hidden;
          box-shadow:  0 4px 20px rgba(255,  27,  107,  0.3);
      
}

    .primary-btn-enhanced::before  {
          content:  '' ;
          position:  absolute;
          top:  0;
          left:  -100%;
          width:  100%;
          height:  100%;
          background:  linear-gradient(90deg,  transparent,  rgba(255,  255,  255,  0.3),  transparent);
          transition:  left 0.5s ease;
      
}

    .primary-btn-enhanced:hover::before  {
          left:  100%;
      
}

    .primary-btn-enhanced:hover  {
          transform:  translateY(-2px);
          box-shadow:  0 8px 30px rgba(255,  27,  107,  0.5),           0 0 40px rgba(178,  75,  243,  0.3);
      
}

    .primary-btn-enhanced .arrow-icon  {
          transition:  transform 0.3s ease;
      
}

    .primary-btn-enhanced:hover .arrow-icon  {
          transform:  translateX(5px);
          animation:  arrowBounce 0.6s ease-in-out infinite;
      
}

    @keyframes arrowBounce  {

            0%,
          100%  {
                  transform:  translateX(5px);
              
    }

            50%  {
                  transform:  translateX(10px);
              
    }

      
}

    /* Secondary Glassmorphism Button */  .secondary-btn-glass  {
          background:  rgba(255,  255,  255,  0.05);
          backdrop-filter:  blur(10px);
          -webkit-backdrop-filter:  blur(10px);
          border:  1px solid rgba(255,  255,  255,  0.15);
          padding:  14px 40px;
          border-radius:  12px;
          cursor:  pointer;
          font-family:  Open Sans;
          font-weight:  600;
          font-size:  16px;
          color:  #fff;
          transition:  all 0.4s ease;
          box-shadow:  0 4px 15px rgba(0,  0,  0,  0.2);
      
}

    .secondary-btn-glass:hover  {
          background:  rgba(255,  255,  255,  0.1);
          border-color:  rgba(178,  75,  243,  0.5);
          transform:  translateY(-2px);
          box-shadow:  0 6px 25px rgba(178,  75,  243,  0.2);
      
}

    /* 5. MICRO TRUST BAR */  .micro-trust-bar  {
          margin-top:  50px;
          padding-top:  30px;
          border-top:  1px solid rgba(255,  255,  255,  0.1);
      
}

    .trust-text  {
          font-size:  13px;
          color:  rgba(255,  255,  255,  0.6);
          text-align:  center;
          margin-bottom:  15px;
          font-weight:  500;
          letter-spacing:  0.5px;
          text-transform:  uppercase;
      
}

    .trust-icons  {
          display:  flex;
          flex-wrap:  wrap;
      
}

    .trust-icon  {
          width:  40px;
          height:  40px;
          display:  flex;
          align-items:  center;
          justify-content:  center;
          transition:  all 0.3s ease;
          cursor:  pointer;
      
}

    .trust-icon img  {
          width:  100%;
          height:  100%;
          object-fit:  contain;
          filter:  grayscale(100%) brightness(0.7);
          opacity:  0.5;
          transition:  all 0.3s ease;
      
}

    .trust-icon:hover img  {
          filter:  grayscale(0%) brightness(1);
          opacity:  1;
          transform:  scale(1.15);
      
}

    /* RESPONSIVE DESIGN */  @media (max-width: 968px)  {
          .hero-layout  {
                  flex-direction:  column;
                  gap:  60px;
              
    }

            .hero-content-left  {
                  text-align:  center;
              
    }

            .hero-title-gradient  {
                  font-size:  42px;
              
    }

            .hero-cta-buttons  {
                  justify-content:  center;
              
    }

            .neural-network-container  {
                  max-width:  400px;
                  height:  400px;
              
    }

            .rotating-ring  {
                  width:  280px;
                  height:  280px;
              
    }

      
}

    @media (max-width: 768px)  {
          .hero-title-gradient  {
                  font-size:  36px;
              
    }

            .hero-cta-buttons  {
                  flex-direction:  column;
                  align-items:  center;
              
    }

            .primary-btn-enhanced,
          .secondary-btn-glass  {
                  width:  100%;
                  max-width:  300px;
                  justify-content:  center;
              
    }

            .neural-network-container  {
                  max-width:  300px;
                  height:  300px;
              
    }

            .trust-icons  {
                  gap:  10px;
              
    }

            .trust-icon  {
                  width:  32px;
                  height:  32px;
              
    }

      
}

    @media (max-width: 480px)  {
          .hero-title-gradient  {
                  font-size:  28px;
              
    }

            .hero-subtitle  {
                  font-size:  16px;
              
    }

            .orbital-particle,
          .dotted-circle  {
                  display:  none;
              
    }

      
}

   @media (max-width: 1024px)  {
         .hero-visual  {
                 width:  320px;
                 height:  320px;
                 top:  22%;
                 right:  -2%;
             
    }

          .hero-spotlight  {
                 width:  420px;
             
    }

     
}

  @media (max-width: 768px)  {
         .hero-visual  {
                 display:  none;
             
    }

          .hero-spotlight  {
                 width:  320px;
                 height:  180px;
                 top:  -20px;
             
    }

     
}

   @media (max-width: 1024px) {
    .hero-visual {
        width: 340px;
        height: 340px;
        top: 18%;
        right: 0%;
    }

    .hero-spotlight {
        width: 420px;
    }
}

/* Responsive tweaks for Flow Builder card */
.glassy-card-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
}

.glassy-card-content {
    flex: 1 1 55%;
}

.glassy-card-visual {
    flex: 1 1 45%;
    display: flex;
    justify-content: flex-end;
}

.glassy-card-inner .flow-builder-img-glassy {
    width: 100%;
    max-width: 100%;
    min-width: 260px;
}

@media (max-width: 768px) {
    .glassy-card-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .glassy-card-content,
    .glassy-card-visual {
        flex: 1 1 100%;
    }

.glassy-card-inner .flow-builder-img-glassy {
    width: 60%;
    max-width: 60%;
    margin: 0 auto;
    }
}

.minimal-map-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.minimal-map {
    width: min(720px, 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-radius: 18px;
}

.map-legend {
    font-size: 14px;
    color: #cfd6de;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #be1e45;
    display: inline-block;
}

/* Stats section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.stat-number {
    color: #e63946;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
}

.stat-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.stat-desc {
    font-size: 15px;
    color: var(--muted);
}