* {
     margin:0;
      padding:0;
       box-sizing:border-box;
        font-family:"Poppins",sans-serif;
     }
body 
{ 
    background:#fff; 
    color:#333; 
    line-height:1.6; 
    overflow-x:hidden;
 }

.navbar {
  display:flex; justify-content:space-between;
   align-items:center;
  padding:1rem 5%;
   background:#fff;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
  position:sticky;
   top:0;
    z-index:1000;
}
.logo
 {
     font-size:1.8rem; 
     font-weight:700;
      color:#2c3e50;
     }
.nav-links 

{ 
    list-style:none;
     display:flex;
      gap:1.5rem;
     }
.nav-links li a {
     text-decoration:none; 
     color:#333; 
     font-weight:500;
      transition:0.3s; 
    }
.nav-links li a:hover { 
    color:#3498db; 
}
.menu-toggle { 
    display:none; 
    font-size:1.8rem; 
    cursor:pointer; 
    color:#2c3e50;
 }

.hero {
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  padding:5% 8%;
   min-height:100vh;
    gap:2rem; 
    flex-wrap:wrap;
}
.hero-left 
{
     flex:1;
     }
.hero-left h1 
{ font-size:3rem;
     margin-bottom:0.5rem; 
     color:#2c3e50; 
    }
.hero-left h2 
{ 
    font-size:1.6rem;
     margin-bottom:1rem;
      font-weight:500;
       color:#3498db;
     }
.hero-left p 
{ 
    max-width:550px; 
    margin-bottom:1.5rem; 
    line-height:1.6; 
    color:#555; 
}
.contact-info { 
    display:flex;
     flex-direction:column;
      gap:0.8rem; 
      margin-bottom:1.5rem; 
    }
.contact-info a, .contact-info span 
{
  display:flex;
   align-items:center; 
   gap:0.5rem; 
   color:#555; 
   text-decoration:none;
    font-weight:500;
}
.contact-info i {
     font-size:1.2rem;
      color:#3498db;
     }
.hero-buttons
 {
     display:flex;
      gap:1rem; 
      margin-top:1rem; 
      flex-wrap:wrap;
     }
.btn 
{ padding:0.6rem 1.2rem;
     border-radius:6px;
      text-decoration:none; 
      font-weight:500; 
      transition:0.3s;
     }
.btn.primary 
{ background:#3498db;
    color:#fff;
 }
.btn.primary:hover 
{ 
    background:#217dbb;
 }
.btn.outline 
{ 
    border:2px solid #3498db;
    color:#3498db; 
}
.btn.outline:hover
 { 
    background:#3498db;
    color:#fff; 
}
.hero-right 
{ 
    flex:1; 
    display:flex; 
    justify-content:center;
 }
.hero-img 
{ 
    max-width:100%;
     border-radius:12px;
     }

section
 {
     padding:4rem 8%;
     }
section h2 
{ 
    text-align:center;
     margin-bottom:2rem;
      font-size:2rem;
       color:#2c3e50;
     }

.exp-grid, .proj-grid 
{ display:grid;
     grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); 
     gap:1.5rem; 
    }
.card 
{
     background:#fff;
      padding:1.5rem; 
      border-radius:10px;
       box-shadow:0 3px 8px rgba(0,0,0,0.05); 
       transition:0.3s; 
    }
.card:hover 
{ transform:translateY(-5px); 
    box-shadow:0 8px 20px rgba(0,0,0,0.1); 
}
.card h3 
{
     margin-bottom:0.6rem;
      color:#3498db;
       font-size:1.2rem;
     }
.card-icon 
{ width:50px; 
    height:50px; 
    margin-bottom:10px; 
}

.skills
 { 
    background:#f9f9fb;
     text-align:center;
     }
.skills-container 
{ max-width:800px;
    margin:auto; 
}
.skill 
{ 
    margin-bottom:20px;
     text-align:left;
      display:flex;
       align-items:center;
        gap:1rem;
     }
.skill i
 {
     font-size:1.4rem;
      color:#3498db; 
    }
.skill span
 {
     font-weight:bold;
      flex:1; 
      color:#333;
     }
.progress-bar 
{
     background:#e0e0e0;
      border-radius:30px;
       overflow:hidden;
        height:12px; 
        flex:2;
     }
.progress 
{
     height:100%; 
     border-radius:30px;
      width:0; 
      transition:width 2s ease-in-out;
     }
.html {
     background:#e34c26; 
    } 
    .css
     {
         background:#264de4;
         } 
         .js
          {
             background:#f0db4f; 
            } 
            .react
             {
                 background:#61dbfb; 
                }
.bootstrap
 { 
    background:#7952b3;
 } 
 .mui 
 {
     background:#007fff;
     } 
     .tailwind 
     {
         background:#38bdf8;
         }
.figma 
{
     background:#a259ff;
     } 
     .responsive
      {
         background:#16a34a; 
        } 
        .git
         { 
            background:#f34f29;
         }


.footer 
{
     background:#2c3e50;
      color:#fff; 
      text-align:center;
       padding:1.5rem;
     }
.footer .socials
 {
     margin-bottom:1rem;
     }
.footer .socials a 
{
     color:#fff;
      margin:0 0.6rem; 
      font-size:1.3rem;
       transition:0.3s;
     }
.footer .socials a:hover
 { 
    color:#3498db; 
}

@media(max-width:992px)
{ 
    .hero{
        flex-direction:column;
        text-align:center;
    } 
    .hero-right
    {
        margin-top:2rem;
    }
 }
@media(max-width:768px){
  .nav-links
  {
     display:none; 
     flex-direction:column;
      gap:1rem; 
      position:absolute; 
      top:70px; right:5%;
       background:#fff;
        padding:1rem; 
        border-radius:8px; 
        box-shadow:0 6px 18px rgba(0,0,0,0.1);
     }
  .nav-links.active
  { 
    display:flex; 
}
  .menu-toggle
  {
     display:block;
     }
  .contact-info
  { 
    flex-direction:column; 
    gap:0.8rem; 
    text-align:center;
 }
}
@media(max-width:480px)
{ 
    .hero-left h1
    {
        font-size:2rem;
    } 
    .hero-left h2
    {
        font-size:1.1rem;
    } 
    section
    
    {
        padding:3rem 5%;
    } 
    .btn{
        padding:0.5rem 1rem;
        font-size:0.9rem;
    } 
}