/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */
 
 
 
/*banner css starting */


  html {
        /* Lenis takes over smooth scroll — disable native smooth */
        scroll-behavior: auto !important;
    }

    /* ═══════════════════════════════════════════════════
       HERO WRAPPER  — creates the scroll distance (600 vh)
       The sticky hero fills 100 vh; the remaining 500 vh
       is consumed as the user scrolls through the tunnel.
    ═══════════════════════════════════════════════════ */
    #hero-section-wrapper {
        position: relative;
        height: 600vh;
    }

    /* ═══════════════════════════════════════════════════
       HERO  — sticky, fullscreen, overflow hidden
    ═══════════════════════════════════════════════════ */
    #hero-tunnel {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: #000000;
        /* Set background to solid black */
    }

    /* ═══════════════════════════════════════════════════
       WEBGL CANVAS
       z-index ABOVE video-wrapper so the Three.js
       end-cap mesh (with arch hole) masks the video edges.
       pointer-events:none so scroll/mouse pass through.
    ═══════════════════════════════════════════════════ */
    #gl-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 3;
        pointer-events: none;
    }

    /* ═══════════════════════════════════════════════════
       VIDEO WRAPPER
       Behind the canvas (z:2). JS projects a 3-D point
       and sets transform: translate(x,y) scale(s) each frame.
       Transform-origin is the center of the 1280×720 box.
    ═══════════════════════════════════════════════════ */
    #video-wrapper {
        position: absolute;
        width: 1280px;
        height: 720px;
        top: 0;
        left: 0;
        transform-origin: 640px 360px;
        opacity: 0;
        z-index: 2;
        overflow: hidden;
        will-change: transform, opacity;
        /* No border-radius needed — the Three.js arch cap handles masking */
    }

    #hero-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* ═══════════════════════════════════════════════════
       LEFT & RIGHT BARS — narrow down the video cinematically
    ═══════════════════════════════════════════════════ */
    #left-bar,
    #right-bar {
        position: absolute;
        top: 0;
        height: 100%;
        background-color: #000000;
        /* Solid Black Background */
        z-index: 10;
        width: 0px;
        will-change: width;
    }

    #left-bar {
        left: 0;
    }

    #right-bar {
        right: 0;
    }

    /* ═══════════════════════════════════════════════════
       VIGNETTE  — cinematic radial dark border
    ═══════════════════════════════════════════════════ */
    #vignette {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background:
            radial-gradient(ellipse 85% 85% at 50% 46%,
                transparent 32%,
                rgba(0, 0, 0, 0.70) 72%,
                rgba(0, 0, 0, 0.95) 100%);
    }

    /* ═══════════════════════════════════════════════════
       HERO OVERLAY  — nav + headline + scroll hint
    ═══════════════════════════════════════════════════ */
    .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;
        pointer-events: none;
    }

    /* ── Navigation ── */
    .hero-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem 2.25rem;
        pointer-events: all;
    }

    .nav-logo {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        text-decoration: none;
        color: #fff;
    }

    .nav-logo-icon {
        width: 38px;
        height: 38px;
        border: 1.5px solid rgba(255, 255, 255, 0.85);
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }

    .nav-logo-text {
        font-weight: 700;
        font-size: 0.9rem;
        line-height: 1.2;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.92);
    }

    .nav-logo-text span {
        display: block;
    }

    .nav-actions {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .nav-btn {
        font-size: 0.82rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.88);
        text-decoration: none;
        padding: 0.45rem 1.2rem;
        border: 1.5px solid rgba(255, 255, 255, 0.45);
        border-radius: 9999px;
        letter-spacing: 0.04em;
        transition: border-color 0.25s ease, background 0.25s ease;
        pointer-events: all;
    }

    .nav-btn:hover {
        border-color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.06);
    }

    /* ── Hero Content (bottom-left) — hidden by default, not used ── */
    .hero-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 2.25rem 4.5rem;
        max-width: 54%;
        will-change: opacity, transform;
        pointer-events: none;
        opacity: 0 !important;
        display: none !important;
    }

    .hero-headline {
        font-weight: 800;
        font-size: clamp(2.4rem, 4.6vw, 4.4rem);
        line-height: 1.04;
        letter-spacing: -0.025em;
        color: #fff;
        margin-bottom: 1.2rem;
    }

    .hero-sub {
        font-weight: 300;
        font-size: clamp(0.9rem, 1.15vw, 1.05rem);
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.58);
        max-width: 440px;
    }

    /* ═══════════════════════════════════════════════════
       TUNNEL TEXT OVERLAYS (TOV)
       Three text blocks that appear sequentially inside
       the tunnel after the door opens.
    ═══════════════════════════════════════════════════ */

/* Dark readability overlay */
#tov-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 14%) 0%, rgb(0 0 0 / 0%) 35%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Ensure text sits above overlay */
#tov-container .tov {
  position: absolute;
  z-index: 2;
}

/* Heading styles */
#tov-container .tov h1,
#tov-container .tov h2 {
  color: #fff !important;
  text-shadow:0 4px 18px rgb(0 0 0 / 29%) !important;
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.15) !important;
  line-height: 65px ;
}

/* Paragraph styles */
#tov-container .tov .tov-text p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  line-height: 1.5;
  max-width: 520px;
}

/* Optional: make the active text block feel cleaner */
#tov-container .tov {
  padding: 16px 0px;
  border-radius: 18px;
  /* background: rgba(0, 0, 0, 0.08); */
  /* backdrop-filter: blur(2px); */
  display: inline-block;
}
    .tov-container {
        position: absolute;
        inset: 0;
        z-index: 12;
        pointer-events: none;
        overflow: hidden;
    }

    .tov {
        position: absolute;
        top: 50%;
        width: 100%;
        max-width: 656px;
        opacity: 0;
        filter: blur(18px);
        transform: translateY(calc(-50% + 40px));
        transition: none;
        will-change: opacity, filter, transform;
        pointer-events: none;
        margin-top: 20px !important;
    }

    .tov.active {
        pointer-events: auto;
    }

    .tov.left {
        left: 2%;
        text-align: left;
    }

    .tov.right {
        right: 5%;
        text-align: right;
    }

    .tov h1,
    .tov h2 {
        font-weight: 500 !important; 
        font-size: clamp(30px, 4.5vw, 3.8rem) !important;
       
        color: #fff !important;
        margin-bottom: 1rem !important; 
    }

    .tov .tov-text p {
        font-weight: 300;
        font-size: clamp(0.88rem, 16px, 1.02rem);
        line-height: 1.7;
        color: white;
        max-width: 400px;
    }

    .tov.right .tov-text p {
        margin-left: auto;
    }

    @media (max-width: 900px) {
        .tov {
            width: 70%;
            max-width: none;
        }

        .tov.right {
            right: auto;
            left: 5%;
            text-align: left;
        }

        .tov.right .tov-text p {
            margin-left: 0;
        }

        .tov h1,
        .tov h2 {
            line-height: 40px !important;
        }
    }

    @media (max-width: 640px) {
        .tov {
            width: 88%;
            left: 6% !important;
            right: auto !important;
            text-align: left !important;
        }

        .tov.right .tov-text p {
            margin-left: 0;
        }
    }

    /* ═══════════════════════════════════════════════════
       SCROLL INDICATOR  — circular progress ring / follower cursor
    ═══════════════════════════════════════════════════ */

    /* Global hides of browser cursor when custom cursor active */
    body.has-custom-cursor {
        cursor: none !important;
    }

    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor [role="button"],
    body.has-custom-cursor .nav-btn,
    body.has-custom-cursor input,
    body.has-custom-cursor select,
    body.has-custom-cursor textarea {
        cursor: none !important;
    }

    /* Restore browser cursor on interactive hovering */
    body.has-custom-cursor.is-hovering {
        cursor: auto !important;
    }

    body.has-custom-cursor.is-hovering a,
    body.has-custom-cursor.is-hovering button,
    body.has-custom-cursor.is-hovering [role="button"],
    body.has-custom-cursor.is-hovering .nav-btn {
        cursor: pointer !important;
    }

    body.has-custom-cursor.is-hovering input,
    body.has-custom-cursor.is-hovering select,
    body.has-custom-cursor.is-hovering textarea {
        cursor: text !important;
    }

    .scroll-ring-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    .scroll-ring-track {
        fill: none;
        stroke: rgba(255, 255, 255, 0.08);
        stroke-width: 1.5;
    }

    .scroll-ring-fill {
        fill: none;
        stroke: rgba(74, 143, 168, 0.85);
        stroke-width: 2;
        stroke-linecap: round;
        /* r=40 → circumference ≈ 251.3 */
        stroke-dasharray: 251.3;
        stroke-dashoffset: 251.3;
        transition: stroke-dashoffset 0.04s linear;
    }

    /* ═══════════════════════════════════════════════════
       POST-HERO SECTION (Heading Under the Banner)
    ═══════════════════════════════════════════════════ */
    .post-hero {
        position: relative;
        z-index: 20;
        background: #000000;
        /* Set background to pure black */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        padding: 5rem 0rem;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .post-hero-eyebrow {
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(74, 143, 168, 0.8);
    }

    .post-hero-headline {
        font-weight: 800;
        font-size: clamp(2rem, 4vw, 3.4rem);
        line-height: 1.1;
        letter-spacing: -0.025em;
        color: #fff;
        max-width: 680px;
    }

    .post-hero-body {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.48);
        max-width: 520px;
    }

    /* ═══════════════════════════════════════════════════
       FALLBACK STATES
       Applied to <html> by JS when WebGL/motion unavailable
    ═══════════════════════════════════════════════════ */
    .no-webgl #gl-canvas,
    .reduced-motion #gl-canvas {
        display: none;
    }

    .no-webgl #hero-tunnel,
    .reduced-motion #hero-tunnel {
        background: linear-gradient(160deg, #060C16 0%, #0B1A2E 55%, #0E2240 100%);
        display: flex;
        align-items: stretch;
    }

    .no-webgl #hero-section-wrapper,
    .reduced-motion #hero-section-wrapper {
        height: 100vh;
    }

    .no-webgl .hero-content,
    .reduced-motion .hero-content {
        max-width: 65%;
        justify-content: center;
        padding-bottom: 0;
        opacity: 1 !important;
        transform: none !important;
    }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════════════ */
    @media (max-width: 900px) {
        .hero-content {
            max-width: 80%;
            padding-bottom: 6rem;
        }
    }

    @media (max-width: 640px) {
        .hero-content {
            max-width: 100%;
            padding-bottom: 5.5rem;
        }

        .nav-actions .nav-btn:last-child {
            display: none;
        }
    }

    /* logo marquee css start  */
    .logotypes-marquee-wrapper {
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding: 20px 0;
    }

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

    .logotypes-marquee-track {
        display: flex;
        width: max-content;
        will-change: transform;
        animation: marquee 25s linear infinite;
    }

    .logotypes-marquee:hover .logotypes-marquee-track {
        animation-play-state: paused;
    }

    .logotypes-marquee-group {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .logotypes-marquee-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 80px;
        margin: 0 16px;
        flex-shrink: 0;
    }

    .logotypes-marquee-logo {
        display: block;
        max-width: 100%;
        height: auto;
        user-select: none;
        opacity: 0.5;
        transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
        filter: invert(41%) sepia(3%) saturate(17%) hue-rotate(30deg) brightness(94%) contrast(88%);
    }

    .logotypes-marquee-item:hover .logotypes-marquee-logo {
        opacity: 1;
        filter: none;
    }

    @keyframes marquee {
        from {
            transform: translateX(0);
        }

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

    @media (max-width: 767px) {
        
        
		
		.StatsCard{
			padding:0px !important;
		}
		.StatsCard::after{
			display:none !important;
		}
		.post-hero{
			padding:4rem 0rem 2rem 0rem !important;
		}
		
		.logotypes-marquee-wrapper{
        flex-direction:column;
		}
		.trustedPArtner{
			width:100% !important;
			border:none !important;
		}
        .logotypes-marquee-item {
            width: 120px;
            margin: 0 10px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .logotypes-marquee-track {
            animation: none;
        }
    }

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

    /* left + right black shadow overlays */
    .logotypes-marquee::before,
    .logotypes-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        width: 120px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }

    .logotypes-marquee::before {
        left: 0;
        background: linear-gradient(to right, rgb(0 0 0), rgb(0 0 0 / 11%));
    }

    .logotypes-marquee::after {
        right: 0;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    }

    /* keep the track behind the shadow */
    .logotypes-marquee-track {
        position: relative;
        z-index: 1;
    }
									

/* start: seedavatar */
.seedavatar-group {
    display: flex;
    align-items: center;
    justify-content: center;
        gap: 10px;
}
.seedavatar {
    position: relative;
    transition: .2s;
}
.seedavatar:not(:first-child) {
    margin-left: -1.5rem;
}
.seedavatar:hover {
    z-index: 1;
    transform: translateY(-.5rem);
}
.seedavatar-name {
    position: absolute;
    bottom: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%);
    padding: .5rem .75rem;
    border-radius: .25rem;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: .875rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}
.seedavatar-name::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: .5rem solid;
    border-color: rgba(0, 0, 0, .7) transparent transparent;
}
.seedavatar:hover .seedavatar-name {
    opacity: 1;
    visibility: visible;
}
.seedavatar img {
    width: 3rem !important;
    height: 3rem !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .1) !important; 
}

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

.avatartext{
      display: flex;
    flex-direction: column;
    align-items: start;
    gap: 8px;
    font-size: 19px;
        font-weight: 600;
}
.trustedPArtner{
	    width: 22%;
    font-size: 15px;
    border-right: 1px solid yellow;
}									
/* end: seedavatar */


/*banner css end */