:root{
      --bg:#0b0f14;           /* background */
      --card:#111723;         /* card */
      --muted:#94a3b8;        /* muted text */
      --text:#e6edf3;         /* primary text */
      --brand:#7c3aed;        /* accent */
      --brand-2:#22d3ee;      /* accent 2 */
      --border: #1f2937;      /* borders */
      --ring: #22d3ee55;      /* focus ring */
    }

    *{
        box-sizing:border-box;
    }

    html{
        scroll-behavior:smooth;
    }

    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';
      background: radial-gradient(1000px 600px at 10% -10%, #0f172a 0%, transparent 60%),
                  radial-gradient(800px 500px at 110% 10%, #0b1324 0%, transparent 60%),
                  var(--bg);
      color:var(--text);
      line-height:1.6;
    }
    

    a{
        color:inherit;
        text-decoration:none;
    }

    img{
        max-width:100%;
        display:block; 
        border-radius: 50%;
    }

    .container{
        width:min(1120px,92vw);
        margin-inline:auto;
    }
    .btn{
        display:inline-flex;
        align-items:center;
        gap:.6rem;
        padding:.8rem 1.1rem;
        border-radius:999px;
        border:1px solid var(--border);
        background:linear-gradient(180deg,#0f172a,#0b1220);
        color:var(--text);transition:.25s ease;
        cursor:pointer;
    }
    .btn:hover{
        transform:translateY(-1px);
        box-shadow:0 10px 30px #00000050, 0 0 0 6px var(--ring);
    }
    .btn.primary{
        background:linear-gradient(90deg,var(--brand),var(--brand-2));
        border-color:transparent;
    }
    .chip{
        display:inline-flex;
        align-items:center;
        gap:.45rem;
        padding:.45rem .7rem;
        border:1px solid var(--border);
        border-radius:999px;
        font-size:.9rem;
        color:var(--muted);
        background:#0c1421aa;
    }
    .nav{
        position:sticky;
        top:0;
        z-index:50;
        background:rgba(11,15,20,.65);
        backdrop-filter: blur(12px);
        border-bottom:1px solid var(--border);
    }
    .nav-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding: .9rem 0;
    }
    .brand{
        display:flex;
        align-items:center;
        gap:.65rem;
        font-weight:800;
        letter-spacing:.4px;
    }
    .brand svg{
        width:28px;
        height:28px;
    }
    .nav-links{
        display:flex;
        gap:1rem;
    }
    .nav-links a{
        padding:.5rem .8rem;
        border-radius:10px;
        color:#cbd5e1;
    }
    .nav-links a:hover{
        background:#0e1626;
    }
    .menu-btn{
        display:none;
    }


    /* Notification  */
    .notification {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        width: 50%;
        padding: 0;
    }


    /* Hero */
    .hero{
        padding:clamp(3rem,6vw,5rem) 0 3rem;
        position:relative;
    }
    .hero-grid{
        display:grid;
        grid-template-columns: 1.2fr .8fr;
        gap:2rem;
        align-items:center;
    }
    .eyebrow{
        color:var(--muted);
        font-weight:600;
        letter-spacing:.12em;
        text-transform:uppercase;
    }
    h1{
        font-size:clamp(2rem,4.5vw,3.2rem);
        line-height:1.15;
        margin:.5rem 0 1rem;
    }
    .lead{
        color:#c7d2fe;
        max-width:56ch;
    }
    .hero-cta{
        display:flex;
        gap:1rem;
        align-items:center;
        flex-wrap:wrap;
        margin-top:1.4rem;
    }
    .card{
        background:linear-gradient(180deg,#0b1220,#0a0f19);
        border:1px solid var(--border);
        border-radius:20px;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
        padding:1.2rem;
    }
    .avatar-wrap{
        aspect-ratio:1/1;
        border-radius:22px;
        overflow:hidden;
        position:relative;
        border:none;
    }
    #profile_card{
        border-radius: 50% !important; 
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    #profile_card::before{
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: conic-gradient(   from 0deg,  #7c3aed, #22d3ee);
        animation: spin 3s linear infinite ;
        z-index: 0;
    }
    #profile_card::after{
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: 50%;
        background: var(--card);
        z-index: 0;
    }
    #profile_card img{
        position: relative;
        z-index: 1;
    }

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

    /* Inline SVG Avatar (replace with your image if you want) */
    .avatar{
        width:100%;
        height:100%;
        background: radial-gradient(120px 120px at 30% 20%, #1f1b3a, transparent 60%),
                              radial-gradient(200px 200px at 100% 0%, #0b1020, transparent 60%),
                              linear-gradient(120deg,#221b43,#111827);
        }
    .avatar::before{
        content:"";
        position:absolute;
        inset:0;background:
      radial-gradient(200px 80px at 20% 10%, #7c3aed55, transparent 60%),
      radial-gradient(120px 120px at 90% 80%, #22d3ee44, transparent 60%);
    }
    .avatar-badge{
        position:absolute;
        bottom:10px;
        left:10px;
        background:linear-gradient(90deg,#22d3ee,#7c3aed);
        padding:.4rem .6rem;
        border-radius:999px;
        font-size:.8rem;
        font-weight:600;
    }

    /* Sections */
    section{
        padding:clamp(2.2rem,6vw,4rem) 0;
    }
    .section-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        margin-bottom:1.2rem;
    }
    .section-head h2{
        font-size:clamp(1.4rem,3vw,2rem);
        margin:0;
    }
    .grid{
        display:grid;
        gap:1rem;
    }

    /* Skills */
    .skills{
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .skill-card{
        padding:1.1rem;
        border-radius:16px;
        border:1px solid var(--border);
        background:#0b1220;
    }
    .skill-row{
        display:flex;
        gap:.6rem;
        flex-wrap:wrap;
        margin-top:.7rem;
    }

    /* Projects */
    .grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    }
    .project{
        border:1px solid var(--border);
        border-radius:16px;
        overflow:hidden;
        background:#0b1220;
        display:flex;
        flex-direction:column;
    }
    .thumb{
        aspect-ratio:16/10;
        /* padding: 10px; */
    }
    .thumb img{
        max-width:100%;
        display:block;
        border-radius:0;
        z-index: 1;
    }
    .project .meta{
        padding:1rem;
        display:flex;
        flex-direction:column;
        gap:.6rem;
    }
    .meta .tags{
        display:flex;
        flex-wrap:wrap;
        gap:.45rem;
    }

    /* Timeline */
    .timeline{
        position:relative;
        padding-left:1.2rem;
    }
    .timeline::before{
        content:"";
        position:absolute;
        left:.4rem;
        top:0;
        bottom:0;
        width:2px;
        background:linear-gradient(#22d3ee,#7c3aed);
    }
    .t-item{
        margin:.9rem 0;
        padding-left:.9rem;
    }
    .t-item .t-title{
        font-weight:600;
    }
    .t-item .t-time{
        font-size:.9rem;
        color:var(--muted);
    }

    /* Contact */
    form{
        display:grid;
        gap:.8rem;
        max-width:680px;
    }
    .field{
        display:grid;
        gap:.35rem;
    }
    input,textarea{
        background:#0b1220;
        color:var(--text);
        border:1px solid var(--border);
        border-radius:12px;
        padding:.9rem;
    }
    input:focus,textarea:focus{
        outline:none;
        border-color:var(--brand-2);
        box-shadow:0 0 0 6px var(--ring);
    }

    /* Footer */
    footer{
        border-top:1px solid var(--border);
        padding:1.2rem 0;
        color:var(--muted);
    }


    /* Sidebar Styles */
    .sidebar {
      position: fixed;
      top: 0;
      left: -260px;
      width: 240px;
      height: 100%;
      background: #0b1220;
      border-right: 1px solid #334155;
      padding: 2rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: left 0.3s ease;
      z-index: 1000;
    }
    .sidebar a {
      color: #e2e8f0;
      text-decoration: none;
      padding: .7rem 1rem;
      border-radius: 10px;
      transition: background 0.2s;
    }
    .sidebar a:hover {
      background: #111827;
    }
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      display: none;
      z-index: 999;
    }
    .sidebar.active {
      left: 0;
    }
    .overlay.active {
      display: block;
    }



     .cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 65px;
      height: 65px;
      border: 2px solid #ccc;
      border-radius: 50%;
      pointer-events: none; /* যাতে ক্লিক ব্লক না করে */
      transform: translate(-50%, -50%);
      transition: transform 0.1s ease-out;
      z-index: 999;
    }


     /* Scroll to Top button */
    #scrollTop {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      font-size: 16px;
      border: none;
      border-radius: 50%;
      background: #1100ff;
      color: white;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      display: none; /* default hidden */
      transition: opacity 0.3s ease;
      z-index: 10000;
    }
    #scrollTop:hover {
        background: #0051ff;
    }

    #scrollTop.show {
      display: block;
      opacity: 1;
    }


    
.bubbles {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1; /* যাতে কন্টেন্টের নিচে থাকে */
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}

.bubbles span {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  background: linear-gradient(#0051ff, #22d3ee);
  border-radius: 50%;
  animation: moveUp 10s linear infinite;
}

.bubbles span:nth-child(1) { animation-duration: 8s; width: 30px; height: 30px; }
.bubbles span:nth-child(2) { animation-duration: 12s; }
.bubbles span:nth-child(3) { animation-duration: 15s; width: 50px; height: 50px; }
.bubbles span:nth-child(4) { animation-duration: 18s; }
.bubbles span:nth-child(5) { animation-duration: 20s; width: 60px; height: 60px; }

@keyframes moveUp {
  0% { transform: translateY(100vh) scale(0); opacity: 0.4; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}



    @media(min-width: 920px){
      .sidebar, .overlay { 
        display: none !important; 
    }
    }


    /* Responsive */
    @media (max-width: 920px){
      .hero-grid{
        grid-template-columns: 1fr;
    }
      .nav-links{
        display:none;
    }
      .menu-btn{
        display:inline-flex;
    }
      #box{
        display: inline !important;
    }
      #abcard{
        margin-bottom: 15px;
    }
     #successMsg {
        font-size: 16px;
     }
     .notification {
        width: 100%;
     }
    }