/* GLOBAL RESET */
*{
    box-sizing: border-box;
}

body{
    font-family: Arial;
    margin: 0;
    background: #f4f4f4;
    color: #333;
    overflow-x: hidden;
}

/* NAVBAR */
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #222;
    color: white;
    padding: 15px 40px;
    position: sticky;
    top: 0;
    z-index: 100; /* FIXED */
}

.logo{
    font-size: 22px;
    font-weight: bold;
}

.nav-links{
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li{
    margin-left: 25px;
}

.nav-links a{
    text-decoration: none;
    color: white;
    font-size: 16px;
}

.nav-links a:hover{
    color: #00adb5;
}

/* HERO SECTION */
.hero{
    padding: 120px 20px;
    text-align: center;
    background: url('images/motion-background.jpg') no-repeat center center;
    background-size: cover;
}

.hero h1{
    font-size: 42px;
    margin-bottom: 10px;
}

.hero h2, .hero h3{
    color: #00adb5;
}

.hero p{
    max-width: 600px;
    margin: auto;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* HERO BUTTONS */
.hero-buttons{
    margin-top: 20px;
}

.hero-btn{
    display: inline-block;
    margin-top: 25px;
    padding: 12px 25px;
    background: #00adb5;
    color: white;
    text-decoration: none;
    border-radius: 6px;
}

/* HERO LAYOUT */
.hero-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* PROFILE IMAGE */
.hero-image img{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
}

/* SECTIONS */
section{
    padding: 60px 20px;
    text-align: center;
}

section h2{
    font-size: 32px;
    /* margin-bottom: 10px; */
    display: inline-block;
}

section h2::after{
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #00adb5;
    margin: 10px auto 0;
}

/* SKILLS */
.skills-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: auto;
}

.skill{
    width: 90px;
    text-align: center;
}

.skill i{
    font-size: 50px;
    transition: 0.3s;
}

.skill:hover i{
    color: #00adb5;
    transform: scale(1.2);
}

.tech-stack{ 
  margin-top:15px;
   display:flex; 
   flex-wrap:wrap; gap:8px; 
  } 
  
  .tech-stack span{ 
    background:#eef6f7; 
    color:#007a80; 
    padding:6px 10px;
     border-radius:6px; 
     font-size:13px; font-weight:500; 
    } 
    
    .tech-stack span:hover{
       background:#00adb5; 
       color:white; 
      }


/* PROJECTS */

.project-status{
   display:inline-block;
    background:#ff9800; 
    color:white; 
    padding:4px 10px;
     font-size:12px; 
     border-radius:4px; 
     margin-bottom:10px;
     }

.projects-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

.project-card{
    background: white;
    width: 300px;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.project-card:hover{
    transform: translateY(-5px);
}

.project-card img{
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.project-image img{
    transition: transform 0.4s ease;
}

.project-card:hover img{
    transform: scale(1.2);
}

.project-buttons{ 
  margin-top:15px; 
} 
.btn{ 
  text-decoration:none; 
  background:#00adb5;
   color:white;
    padding:8px 14px; 
    margin-right:10px; 
    border-radius:5px; 
    font-size:14px;
   } 
   

   .btn:hover{ 
    background:#007b83;
   }

 

/* BUTTONS */


.btn:hover{
    background: #007b83;
}

.btn-outline{ 
  border:2px solid #00adb5;
   padding:10px 16px; 
   border-radius:5px;
    text-decoration:none;
     color:#00adb5; 
     margin-right:10px;
     margin-top: 50px;
     } 
     
     .btn-outline:hover{ 
      background:#00adb5; 
      color:white; 
    }



      /* PUBLICATIONS */
#publications{
    /* padding: 50px 10px; */
    background: #f8fafc;
    text-align: center;
    
}

.publication-subtitle{
    margin: 10px 0 20px;
}

.publications-container{
    max-width: 900px;
    margin: 40px auto; /* FIXED (no margin-left) */
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 5px;
}

.publication-card{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 25px;
    /* border-radius: 12px; */
}

.publication-content{
    text-align: left;
}

  .external-link{
     font-size:22px;
      text-decoration:none; 
      color:#6b7280; }

    .external-link:hover{
       color:#00adb5;
       }



/* CONTACT */
#contact{
    padding: 40px 10px;
    background: #f4f4f4;
    text-align: center;
    gap: 20px;
     /* margin-top: 20px; */
}

.contact-container{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    /* margin-top: 20px; */
}

.contact-card{
    background: white;
    width: 250px;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
}

.contact-card i{
    font-size: 40px;
}

.contact-card .fa-linkedin{ 
  color:#0077b5; 
}
 .contact-card .fa-github{ 
  color:#333; 
} 
 .contact-card .fa-envelope{
   color:#d44638; 
  }

 .contact-card a{ 
  text-decoration:none; 
  color:#333; 
  font-size:14px;
   word-break:break-all;
   }

   .contact-card a:hover{
     color:#00adb5;
     }


/* FOOTER */
footer{
    background: #222;
    color: white;
    text-align: center;
    padding: 20px;
    font-size:14px;
}