/* code from to line 103 is for the nav-bar and all the header section */



  :root{
    --bg: #0d0f14;
    --bg-alt: #10131a;
    --card: #161a22;
    --card-hover: #1b202b;
    --border: #262b36;
    --text: #edf0f4;
    --text-dim: #9aa4b5;
    --text-faint: #5c6577;
    --blue: #5b9dff;
    --teal: #3fc9ac;
    --amber: #e2a94a;
    --sans: 'IBM Plex Sans', sans-serif;
    --display: 'Space Grotesk', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }

  /* Nav */
  header.topbar{ position:sticky; top:0; z-index:50; background:rgba(13,15,20,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
  .topbar-inner{ max-width:920px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }

  /* .logo{ font-family:var(--display); font-weight:700; font-size:20px; color:var(--text); letter-spacing:-0.2px;text-decoration: none; }
  .logo span{ color:var(--blue); }  */


 .logo {
    position: relative;
    display: inline-block;
    text-decoration: none !important;
    color: #fff;
    font-size:25px;
    font-weight: 700;
    transition: color .3s ease, transform .3s ease;
}

.logo span {
    color: #00abf0;
}

.logo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: #5b9dff;
    transition: width .3s ease;
}

/* .logo:hover {
    color: #00abf0;
    transform: translateY(-2px);
} */

.logo:hover::after {
    width: 100%;
}


  nav.topnav{ display:flex; gap:28px; }
  nav.topnav a{ color:var(--text-dim); font-size:14px; font-weight:500; position:relative; padding-bottom:2px; }
  nav.topnav a:hover{ color:var(--text); text-decoration:none; }
  nav.topnav a.active{ color:var(--text); }
  nav.topnav a.active::after{ width:100%; }
  nav.topnav a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--blue); transition:width .25s ease; }
  nav.topnav a:hover::after{ width:100%; }

  /* Mobile hamburger */
  .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; }
  .nav-toggle span{ display:block; width:100%; height:2px; background:var(--text-dim); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  @media (max-width:640px){
    .topbar-inner{ position:relative; }
    .nav-toggle{ display:flex; }
    nav.topnav{
      display:flex;
      flex-direction:column;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      background:var(--bg-alt);
      border-bottom:1px solid var(--border);
      padding:0 24px;
      gap:2px;
      max-height:0;
      overflow:hidden;
      transition:max-height .3s ease, padding .3s ease;
    }
    nav.topnav.open{
      max-height:280px;
      padding:12px 24px 18px;
    }
    nav.topnav a{ padding:10px 0; font-size:15px; }
  }

  a {
    text-decoration: none;
  }


                                                             /* This css section for Page transition Animation */



@view-transition {
  navigation: auto;
}

::view-transition-group(page-content){
  animation-duration: 1s;
  animation-timing-function: ease;
}

::view-transition-old(page-content){
  animation-name: slide-out;
}

::view-transition-new(page-content){
  animation-name: slide-in;
}

main {
  view-transition-name: page-content;

}

@keyframes slide-out {
  to {
    translate: -100vw;
  }
}

@keyframes slide-in {
  from {
    translate: 100vw;
  }
}