:root{
      --bg:#07070a;
      --card:#0f1720;
      --muted:#9aa3b2;
      --accent:#00e5ff;
      --glass: rgba(255,255,255,0.03);
      --glass-2: rgba(255,255,255,0.02);
      --glass-border: rgba(255,255,255,0.04);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg,#03000f 0%, #03000f 100%);
      color:#e6eef6;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.4;
    }

    /* Layout */
    header.nav{
      position:fixed; top:0; left:0; right:0; z-index:60;
      display:flex; justify-content:space-between; align-items:center;
      padding:14px 22px;
      backdrop-filter: blur(6px);
      background: linear-gradient(180deg, rgba(7,7,10,0.45), rgba(7,7,10,0.15));
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .logo {
      display:flex; align-items:center; gap:12px;
      font-weight:800; letter-spacing:0.8px;
    }
    .logo .mark{
      width:44px; height:44px; border-radius:8px;
      overflow:hidden; display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg,#0ff,#3f51b5);
      box-shadow: 0 6px 20px rgba(0,0,0,0.6);
      color:#022; font-weight:900;
    }
    nav a{color:var(--muted); text-decoration:none; margin-left:18px; font-weight:600; font-size:14px}
    nav a:hover{color:var(--accent)}

    /* Hero / Home */
    .hero{
      position:relative;
      height:100vh;
      display:grid;
      place-items:center;
      text-align:center;
      overflow:hidden;
    }
    .hero video#bgVideo{
      position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      z-index:0; opacity:0.75;
      filter: saturate(1.05) contrast(1.02) brightness(0.9);
    }
    .hero::after{
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 70%);
      z-index:1;
    }
    .hero .container{
      position:relative; z-index:2; max-width:1100px; padding:48px;
    }
    .hero h1{font-size:clamp(28px,5vw,56px); margin:6px 0 8px; font-weight:800}
    .hero p{color:var(--muted); font-size:18px; margin:0 0 18px}
    .cta {
      display:inline-block; padding:12px 18px; border-radius:10px; font-weight:700;
      background:linear-gradient(90deg, rgba(0,229,255,0.12), rgba(63,81,181,0.12));
      border: 1px solid rgba(255,255,255,0.04);
      color:var(--accent);
      text-decoration:none;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .cta:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,229,255,0.06) }


    /* about me section */


    .aboutMe{padding:72px 20px}

    .aboutMe .inner{
      max-width:1200px; margin:0 auto

    }



    /* Reels Section */
   

    #reels{

      padding-top: 6rem;

    }

    .section{
    
    padding:0px 20px;
    height: 34rem;

}
  .section .inner{

    height: 100%;

    max-width:1200px; margin:0 auto

        }
  .reels {

    height: 78%;

    position:relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-radius:14px;
    padding:18px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(63, 105, 241, 0.438);
  }

  .reel-viewport{
    overflow:hidden;
    position:relative;
    width:100%;
    height:100%;
    border-radius:10px;
    background:var(--glass-2);
    display:flex; align-items:center;
    border:1px solid rgba(255,255,255,0.02);
  }
  .reel-track{
    height: 118%;
    display:flex;
    align-items:center;
    gap:21px;
    will-change: transform;
    padding:14px;
    transition: transform .12s linear;
  }
  .reel{
    width:30%px; height:82%; flex:0 0 auto;
    border-radius:20px; overflow:hidden;
    background:#0b0f14; position:relative;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.03);
    transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease;
  }
  .reel video, .reel img{
    width:100%; height:126%; object-fit:cover; display:block;
  }
  .reel .label{
    position:absolute; left:10px; bottom:8px; padding:6px 8px; font-size:12px;
    background:rgba(0,0,0,0.45); border-radius:6px; color:#fff;
    backdrop-filter: blur(4px);
  }
  .reel:hover{
    transform:scale(1.03);
    box-shadow: 0 18px 40px rgba(2,229,255,0.06), 0 6px 18px rgba(0,0,0,0.6);
    z-index:10;
  }
  .reel.paused::after{
    content:"PAUSED"; position:absolute; top:8px; right:8px; font-size:11px; padding:4px 6px;
    background:rgba(0,0,0,0.5); border-radius:6px; color:var(--muted);
  }




    /* Arrows */
    .reel-arrow{
      position:absolute; top:50%; transform:translateY(-50%);
      width:36px; height:36px;
      background:rgba(0,0,0,0.5); border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; z-index:20;
      transition: background .2s ease;
    }
    .reel-arrow:hover{ background:rgba(0,0,0,0.7);}
    .reel-arrow.left{ left:10px; }
    .reel-arrow.right{ right:10px; }
    .reel-arrow svg{ width:50px; height:50px; fill:#ffffff; }

    /* Pricing, Contact, Footer (unchanged) */
    .pricing-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px;}
    
    #pricing{

      padding-top: 6rem;


    }

    .price-card{
        padding:20px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--glass-border); box-shadow: 0 8px 30px rgba(2,6,23,0.6); transition: transform .18s ease, box-shadow .18s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .price-card:hover{ background-color: #1b253b;
    transition: 0.8s;transform: translateY(-8px); box-shadow:0 7px 30px rgba(0, 47, 255, 0.589) }
    .price-card h3{margin:0 0 8px}
    .price-card .price{font-size:22px; font-weight:800; margin:6px 0}
    .feature-list{color:var(--muted); margin:12px 0 18px}
    .btn-ghost{display:inline-block; padding:10px 14px; border-radius:8px; font-weight:700; border:1px solid rgba(255,255,255,0.06); text-decoration:none; color:var(--accent);}
    /*.contact{display:grid; grid-template-columns: 1fr 360px; gap:24px; align-items:start;}*/
    @media (max-width:900px){ .contact{ grid-template-columns: 1fr; } .hero{height:75vh} .reel{width:200px} .reel-viewport{height:150px} }
    .contact form{background:var(--card); padding:18px; border-radius:12px; border:1px solid var(--glass-border);}
    form label{display:block; font-size:13px; margin-bottom:6px; color:var(--muted)}
    form input, form textarea{width:100%; padding:10px 12px; margin-bottom:12px; border-radius:9px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit; font-size:14px;}
    form button{padding:10px 14px; border-radius:9px; border:0; background:linear-gradient(90deg,#1b253b,#1b253b); color:rgb(255, 255, 255); font-weight:800; cursor:pointer;}
    .socials{display:flex; gap:10px; align-items:center}
    .socials a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; background:var(--glass); border:1px solid rgba(255,255,255,0.03); text-decoration:none}
    .footer{padding:26px 20px; text-align:center; color:var(--muted); font-size:13px; border-top:1px solid rgba(255,255,255,0.02); margin-top:36px}
    .muted{color:var(--muted)}
    .section-title{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
     /* Mobile responsiveness */
  .hero {
    position: relative;
    width: 100%;
    height: 100vh; /* full screen height */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-container {
    position: relative;
    width: 100%;
    height: 100%;
  }








.vaishfxLogo{

  position: relative;
 top: -16px;
 
  width:  106px;
  height: 118px;
}





textarea{
  resize: none;
}


.divForLogo{

  width: 150px;
  height: 70px; 

  overflow: hidden;
  overflow-x: 1;
  overflow-y: 1;
}



/* ---------------------------------------------------------------------------------------------- */
/* ----------------------mobile version---------------------- */




  /*Media Queries*/


  @media (max-width: 430px) {

    .hero {
    height: auto;
    margin-top: 60px;
    }

    .hero video {
    width: 100%;
    }


    /* ------about me----- */

    #about{
      padding-bottom: 0;
    }




      /* ----mobile reel   section */

  
#reels{

      padding-top: 3rem;

    }

    .section{
    
    padding:0px 20px;
    height: 26rem;

}
  .section .inner{

    height: 100%;

    max-width:1200px; margin:0 auto

        }
  .reels {

    height: 98%;

    position:relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-radius:14px;
    padding:18px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(63, 105, 241, 0.438);
  }

  .reel-viewport{
    overflow:hidden;
    position:relative;
    width:100%;
    height:100%;
    border-radius:10px;
    background:var(--glass-2);
    display:flex; align-items:center;
    border:1px solid rgba(255,255,255,0.02);
  }
  .reel-track{
    height: 118%;
    display:flex;
    align-items:center;
    gap:14px;
    will-change: transform;
    padding:14px;
    transition: transform .12s linear;
  }
  .reel{
    width:100%; height: 85%; flex:0 0 auto;
    border-radius:20px; overflow:hidden;
    background:#0b0f14; position:relative;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.03);
    transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease;
  }
  .reel video, .reel img{
    width:100%; height:126%; object-fit:cover; display:block;
  }
  .reel .label{
    position:absolute; left:10px; bottom:8px; padding:6px 8px; font-size:12px;
    background:rgba(0,0,0,0.45); border-radius:6px; color:#fff;
    backdrop-filter: blur(4px);
  }
  .reel:hover{
    transform:scale(1.03);
    box-shadow: 0 18px 40px rgba(2,229,255,0.06), 0 6px 18px rgba(0,0,0,0.6);
    z-index:10;
  }
  .reel.paused::after{
    content:"PAUSED"; position:absolute; top:8px; right:8px; font-size:11px; padding:4px 6px;
    background:rgba(0,0,0,0.5); border-radius:6px; color:var(--muted);
  }





  /* -----pricing mobile------------ */
  
  

 /* .pricing-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px;} */
    
    #pricing{

      padding-top: 5rem;
      height: 64rem;


    }


    /* ----contact----- */

#contact{

  height: auto;

}




/* -------footer---- */




}






/* -----------------tablet--------- */


@media ( min-width:431px) and ( max-width: 769px ) {
  
  .hero {
    height: auto;
    margin-top: 60px;
    }

    .hero video {
    width: 100%;
    }


    /* ------about me----- */

    #about{
      padding-bottom: 0;
    }




      /* ----mobile reel   section */

  
#reels{

      padding-top: 3rem;

    }

    .section{
    
    padding:0px 20px;
    height: 26rem;

}
  .section .inner{

    height: 100%;

    max-width:1200px; margin:0 auto

        }
  .reels {

    height: 98%;

    position:relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-radius:14px;
    padding:18px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(63, 105, 241, 0.438);
  }

  .reel-viewport{
    overflow:hidden;
    position:relative;
    width:100%;
    height:100%;
    border-radius:10px;
    background:var(--glass-2);
    display:flex; align-items:center;
    border:1px solid rgba(255,255,255,0.02);
  }
  .reel-track{
    height: 118%;
    display:flex;
    align-items:center;
    gap:14px;
    will-change: transform;
    padding:14px;
    transition: transform .12s linear;
  }
  .reel{
    width:100%; height: 85%; flex:0 0 auto;
    border-radius:20px; overflow:hidden;
    background:#0b0f14; position:relative;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.03);
    transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease;
  }
  .reel video, .reel img{
    width:100%; height:126%; object-fit:cover; display:block;
  }
  .reel .label{
    position:absolute; left:10px; bottom:8px; padding:6px 8px; font-size:12px;
    background:rgba(0,0,0,0.45); border-radius:6px; color:#fff;
    backdrop-filter: blur(4px);
  }
  .reel:hover{
    transform:scale(1.03);
    box-shadow: 0 18px 40px rgba(2,229,255,0.06), 0 6px 18px rgba(0,0,0,0.6);
    z-index:10;
  }
  .reel.paused::after{
    content:"PAUSED"; position:absolute; top:8px; right:8px; font-size:11px; padding:4px 6px;
    background:rgba(0,0,0,0.5); border-radius:6px; color:var(--muted);
  }





  /* -----pricing mobile------------ */
  
  

 /* .pricing-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px;} */
    
    #pricing{

      padding-top: 5rem;
      height: 37rem;


    }


    /* ----contact----- */

#contact{

  height: 31rem;

}




}