/* Team TararBari - Exact Demo Hero V4
   Source aspect ratio: 1672/861
   The original live header remains. The generated demo's baked header was cropped away.
*/

.block-hero{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    /* Keep the ENTIRE demo image visible with the same composition. */
    width:100% !important;
    aspect-ratio:1672 / 861 !important;
    min-height:0 !important;
    height:auto !important;

    background-color:#030916 !important;
    background-image:url('/uploads/home/team-tararbari-exact-demo-hero-v4.jpg?v=4') !important;
    background-repeat:no-repeat !important;
    background-position:center top !important;
    background-size:100% 100% !important;
}

/* Remove earlier hero pseudo backgrounds/overlays completely. */
.block-hero::before{
    content:none !important;
    display:none !important;
}
.block-hero::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      radial-gradient(circle at 66% 27%,rgba(255,170,70,.05),transparent 25%),
      radial-gradient(circle at 28% 25%,rgba(0,210,255,.025),transparent 24%) !important;
    animation:tbDemoGlow 5s ease-in-out infinite alternate !important;
}

/*
 Exact-demo mode:
 the headline/subtitle/buttons are already part of the generated visual,
 so hide the old live hero content to prevent duplicates.
 The CMS data itself is NOT deleted.
*/
.block-hero .hero-grid,
.block-hero .hero-copy,
.block-hero .hero-art{
    visibility:hidden !important;
    pointer-events:none !important;
}

/* Clickable areas placed over the two buttons visible in the demo artwork. */
.tb-demo-hotspot{
    position:absolute !important;
    z-index:10 !important;
    display:block !important;
    background:transparent !important;
    border:0 !important;
    text-decoration:none !important;
    cursor:pointer !important;
}
.tb-demo-hotspot.projects{
    left:7.05% !important;
    top:52.0% !important;
    width:17.1% !important;
    height:7.7% !important;
}
.tb-demo-hotspot.team{
    left:25.15% !important;
    top:52.0% !important;
    width:14.4% !important;
    height:7.7% !important;
}
.tb-demo-hotspot:focus-visible{
    outline:3px solid #22d3ee !important;
    outline-offset:2px !important;
    border-radius:14px !important;
}

@keyframes tbDemoGlow{
    from{opacity:.45}
    to{opacity:1}
}

/* On narrow screens keep the complete picture; no cropping. */
@media(max-width:700px){
    .block-hero{
        aspect-ratio:1672 / 861 !important;
        background-size:100% 100% !important;
        background-position:center top !important;
    }
}

@media(prefers-reduced-motion:reduce){
    .block-hero::after{animation:none !important}
}