/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /*background-color: #f9f9f9;*/
}

/* Navigation Bar */
.navbar {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.navbar-brand {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

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

.navbar-links li {
    margin-left: 20px;
}

.navbar-links a {
    text-decoration: none;
    color: #555;
    font-weight: bold;
}

.navbar-links a:hover {
    color: #000;
}

/* Main Container */
.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
   /* background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden; */
}

/* Profile Section */
.profile-section {
    flex: 1;
    text-align: center;
    margin-left: -70px;
}

.profile-image img {
    width: 175px;
    height: 200px;
    border-radius: 50%; /* Oval image */
    border: 5px solid #ddd;
    object-fit: cover;
}

.profile-section h2 {
    margin-top: 15px;
    font-size: 20px;
    color: #333;
}
.profile-section h3 {
    margin-top: 5px;
    font-size: 15px;
    color: #333;
}

.profile-section p {
    color: #555;
    margin: 5px 0;
    text-decoration: none;
    text-align: left;


}

.contact-info p {
    margin: 10px 0;
    margin-top: 15px;
    font-size: 14px;
    color: #666;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    margin-left: 80px;
    left-padding: 20px;
}

.contact-info a{
    color: #52adc8;
    text-decoration: none;
}

/* Content Section */
.content-section {
    flex: 2;
   
    margin-left: -50px;
}

.content-section p, ol, ul {
    margin: 10px 0;
    color: #444;
    line-height: 1.6;
    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
    font-size: 16px;
}


.content-section a{
    color: #284697;
    text-decoration: underline;
    
}


.content-section h3 {
    margin-top: 20px;
    color: #333;
    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;

}

.content-section ul {
    padding-left: 10px;
}

.content-section li {
    margin-bottom: 10px;
    color: #555;
}

.skills ul {
    padding-left: 50px;
}

.skills li {
    margin-bottom: 0px;
}


.section {
    margin-bottom: 40px;
}
.section h2 {
    font-size: 20px;
    margin-top: 1px;
    }
.section hr {
    border: none;
      border-top: 1px solid #e4dddd; /* simple thin black line */
      width: 100%;
      margin-bottom: 10px;
      margin-top: -5px;
}
.section p {
    font-size: 16px;
    max-width: 1000px;
    text-align: justify;
}

.section it {
    font-size: 16px;
    font-style:italic;
    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
}


/*-------Project page-------------*/

.containerProject {

    flex: 2;
    margin-left: 300px;
    max-width: 1200px;
    margin: 50px auto;
    padding-left: 50px;
    align: center

}

.project {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    border-radius: 8px;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    margin-right: 120px;
}

.image img {
    width: 200px;
    height: auto;
    border-radius: 4px;
    margin-right: 20px;
}

.video video {
    /* width: 200px; */
    width:100%;
    height: 200px;
    border-radius: 4px;
    margin-right: 20px;
}

.details h2 {
    font-size: 18px;
    color: #00bcd4;
    margin: 0;
}

.details p {
    font-size: 14px;
    margin-right: 10px
    color: #444;
    line-height: 1.6;
    margin: 10px 0;
}

.links a {

    color: #6495ED
    text-decoration: none;
    margin-right: 10px;
}

.links a:hover {
    text-decoration: underline;
}

/* --- Projects page layout --- */
.proj-wrap{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}
.proj-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.proj-header h1{
  margin:0;
  font-size:28px;
}

/* Filters */
.proj-filters{ display:flex; flex-wrap:wrap; gap:10px; }
.pf-btn{
  appearance:none;
  border:1px solid #e2e5ea;
  background:#fff;
  color:#111827;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  transition:.2s ease;
}
.pf-btn:hover{ transform:translateY(-1px); }
.pf-btn.active{
  background:#5b7cfa;
  border-color:#5b7cfa;
  color:#fff;
}

/* Grid */
.proj-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:22px;
}
.proj-card{
  grid-column:span 12;
  border:1px solid #e6e8ef;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}
@media (min-width:700px){ .proj-card{ grid-column:span 6 } }
@media (min-width:1024px){ .proj-card{ grid-column:span 4 } }

/* Card */
.pc-media{
  aspect-ratio:16/9;
  background:#f5f7fb;
  overflow:hidden;
  border-bottom:1px solid #eef0f5;
}
.pc-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pc-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; }
.pc-title-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pc-title-row h3{ margin:0; font-size:18px; }
.pc-badge{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:6px 10px; border-radius:999px; background:#eef2ff; color:#3646c5; border:1px solid #dfe5ff;
}
.pc-desc{ color:#4b5563; margin:0; text-align: justify; font-size: 14px;
    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; }
.pc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pc-chip{
  font-size:12px; color:#374151; background:#f3f4f6; border:1px solid #e5e7eb;
  border-radius:999px; padding:6px 10px;
}
.pc-actions{ display:flex; gap:10px; margin-top:6px; }
.pc-btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  border:1px solid #d1d5db; background:#fff; color:#111827;
  padding:5px 8px; border-radius:12px; font-weight:200; transition:.2s;
}
.pc-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.08); }

/* Optional: highlight active link in your navbar */
.navbar-links a.active{ color:#5b7cfa; font-weight:700; }