:root {
     --bg: #0f1724;
     --card: #0b1220;
     --accent: #06b6d4;
     --muted: #94a3b8;
     --glass: rgba(255, 255, 255, 0.03);
     --maxw: 1100px;
     --radius: 14px;
     --gap: 18px;
     font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
         "Helvetica Neue", Arial;
 }

 * {
     box-sizing: border-box;
     transition: all 0.3s ease-in-out;
 }

 html,
 body {
     height: 100%;
     margin: 0;
     /* background: linear-gradient(180deg, #071021 0%, #071726 100%); */
     background-color: #071021;
     color: #e6eef6;
     scroll-behavior: smooth !important;
 }

 a {
     color: var(--accent);
     text-decoration: none;
 }

 a:hover {
     opacity: 0.8;
 }

 .container {
     max-width: var(--maxw);
     margin: 0 auto;
     /* padding: 25px; */
 }

 header {
     display: flex;
     gap: 20px;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     position: sticky;
     top: 0;
     z-index: 1000;
     background: #071021;
     padding: 14px 28px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }

 .brand {
     display: flex;
     gap: 16px;
     align-items: center;
 }

 .avatar {
     width: 72px;
     height: 72px;
     border-radius: 12px;
     background: linear-gradient(135deg, var(--accent), #7c3aed);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 20px;
 }

 nav {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
 }

 nav a {
     padding: 8px 12px;
     border-radius: 10px;
     color: var(--muted);
     font-size: 14px;
 }

 nav a:hover {
     background: var(--glass);
     color: #fff;
 }

 section {
     scroll-margin-top: 100px;
 }
 

 .hero {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     margin-top: 28px;
     flex-wrap: wrap;
 }

 .hero-left {
     flex: 1;
     min-width: 260px;
 }

 .hero-right {
     flex: 1;
     display: flex;
     justify-content: center;
 }

 .hero-right img {
     width: 280px;
     height: 280px;
     border-radius: 50%;
     object-fit: cover;
     padding: 5px;
     background: linear-gradient(135deg, var(--accent), #7c3aed);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
 }

 .card {
     background: linear-gradient(180deg,
             rgba(255, 255, 255, 0.02),
             rgba(255, 255, 255, 0.01));
     border-radius: var(--radius);
     padding: 20px;
     box-shadow: 0 6px 20px rgba(2, 6, 23, 0.6);
 }
 .intro h1 {
     margin: 0;
     font-size: 32px;
 }

 .intro p {
     color: var(--muted);
     margin-top: 8px;
     line-height: 1.5;
 }

 .cta {
     margin-top: 16px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .btn {
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.06);
     padding: 10px 14px;
     border-radius: 10px;
     cursor: pointer;
     color: #fff;
     transition: all 0.3s ease;     

 }

.proj:hover, .skill:hover,.btn:hover {
      box-shadow: 0 0 5px rgba(0, 119, 255, 0.7);

 }

 .btn-primary {
     background: linear-gradient(90deg, var(--accent), #7c3aed);
     border: none;
     color: #061018;
 }

 .stats {
     display: flex;
     gap: 12px;
     margin-top: 18px;
     flex-wrap: wrap;
 }

 .stat {
     background: rgba(255, 255, 255, 0.02);
     padding: 12px;
     border-radius: 10px;
     text-align: center;
     min-width: 80px;
 }

 .stat b {
     display: block;
     font-size: 18px;
 }

 .socials {
     margin-top: 16px;
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .socials a {
     background: rgba(255, 255, 255, 0.05);
     padding: 10px 14px;
     border-radius: 10px;
     font-size: 14px;
     color: var(--muted);
 }

 .socials a:hover {
     background: linear-gradient(135deg, var(--accent), #7c3aed);
     color: #061018;
 }

 section {
     margin-top: 26px;
 }

 h2 {
     margin: 0 0 12px 0;
     font-size: 20px;
 }

 .grid-4 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;

 }

 .skill {
     background: rgba(255, 255, 255, 0.02);
     padding: 12px;
     border-radius: 10px;
     text-align: center;
     transition: all 0.3s ease; 
 }

 #skills h2,
 #projects h2 {
     padding: 20px;
 }

 .projects {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
 }

 .proj {
     padding: 14px;
     border-radius: 12px;
     background: linear-gradient(180deg,
             rgba(255, 255, 255, 0.015),
             rgba(255, 255, 255, 0.01));
     transition: transform 0.3s ease;
 }

 .proj:hover {
     transform: translateY(-4px);
 }

 .proj h3 {
     margin: 0 0 8px 0;
 }

 .proj p {
     margin: 0;
     color: var(--muted);
     font-size: 14px;
 }

 .proj .tags {
     margin-top: 10px;
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .tag {
     background: rgba(255, 255, 255, 0.02);
     padding: 6px 8px;
     border-radius: 8px;
     font-size: 12px;
     color: var(--muted);
 }

 footer {
     margin-top: 34px;
     text-align: center;
     color: var(--muted);
     padding: 12px;
 }

 .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
 }

 .hamburger span {
     width: 25px;
     height: 3px;
     background: #333;
     border-radius: 5px;
 }

 @media (max-width: 768px) {
     nav {
         display: none;
         flex-direction: column;
         background: #f9f9f9;
         position: absolute;
         top: 60px;
         right: 20px;
         padding: 15px;
         border: 1px solid #ccc;
         border-radius: 8px;
     }

     nav.active {
         display: flex;
     }

     .hamburger {
         display: flex;
     }
 }

 @media (max-width: 900px) {
     .projects {
         grid-template-columns: 1fr;
     }

     .grid-3 {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 480px) {
     .grid-3 {
         grid-template-columns: 1fr;
     }

     .hero-right img {
         width: 200px;
         height: 200px;
     }
 }

 .muted {
     color: var(--muted);
 }

 .row {
     display: flex;
     gap: 12px;
     align-items: center;
 }

.fade-slide {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.fade-slide.show {
  opacity: 1;
  transform: translateY(0);
}