/* --- General Styles --- */
body { margin: 0; font-family: Lato, "Source Sans", Aptos, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: #1a1a1a; font-size: 15px; background-color: #f4f4f4; }
a { text-decoration: none; color: inherit; }

/* --- Layout --- */
.container { display: flex; min-height: 100vh; flex-wrap: wrap; width: 100%; }

/* --- Top Banner Section --- */
#topboard { width: 100%; background-color: #003366; color: #fff; padding: 2rem 2rem 1rem 2rem; box-sizing: border-box; text-align: left; }

.banner-wrapper { max-width: 1200px; margin: 0 auto; margin-left: 250px; margin-right: auto; }

.name-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.5rem; }

.banner-wrapper h1 { margin: 0; font-size: 2.2rem; }

.subtitle { margin: 0; opacity: 0.9; font-size: 1.1rem; text-align: left; }

.linkedin-link { color: #ffcc00; font-weight: 600; white-space: nowrap; font-size: 1.1rem; transition: color 0.2s; padding-bottom: 0.1rem; }
.linkedin-link a { color: inherit; }
.linkedin-link:hover { color: #fff; }

/* --- Navigation --- */
nav { width: 250px; background-color: #003366; color: #fff; padding: 1rem 1rem 2rem 1rem; position: sticky; top: 0; height: 100vh; box-sizing: border-box; }

.nav-links { padding: 0; list-style: none; }
.nav-links li a { color: #fff; font-weight: 600; display: inline-block; transition: color 0.2s; padding: 0.5rem 0; }
.nav-links li a:hover { color: #ffcc00; }

/* --- Main Content --- */
main { flex: 1; padding: 2rem; background-color: #fff; }
main section { max-width: 1000px; margin: 0 auto; }

h2 { font-size: 1.8rem; color: #003366; border-bottom: 2px solid #003366; padding-bottom: 0.25rem; margin-top: 2rem; }
h3 { font-size: 1.2rem; color: #003366; margin-top: 1rem; }
h4 {color: #003366;}
p { margin: 0 0 1.5rem 0; line-height: 1.7; }
ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
ul li { line-height: 1.7; }

/* --- Case Studies / Chips --- */
/*
#case-studies h3 { margin-top: 2rem; margin-bottom: 0.5rem; border-bottom: none; padding-bottom: 0; }
.section-title { margin-bottom: 1.5rem;display:flex;align-items:center;gap:10px;margin-bottom:8px}

.chip { padding: 0.4rem 0.8rem; background-color: #eef2ff; color: #fff; border-radius: 4px; font-weight: 600; margin-bottom: 0.5rem; transition: background-color 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.chip a { color: #333; text-decoration: underline; }
.chip:hover { background-color: #68bbe3; }

.meta { font-size: 0.95rem; color: #555; line-height: 1.5; margin-top: 0.5rem; padding-left: 0.5rem; border-left: 2px solid #ccc; }

*/

.section-title {  display: flex;  align-items: flex-start;  gap: 20px;  margin-bottom: 1.2rem; }
.section-title .chip {  flex: 0 0 30%;   background-color: #eef2ff;   padding: 0.6rem 1rem;   border-radius: 6px;   font-weight: 600;   box-shadow: 0 1px 3px rgba(0,0,0,0.1);}
.section-title .chip a {  color: #003366;  text-decoration: underline;  display: block;}
.section-title .meta {  flex: 1;    font-size: 0.95rem;   color: #444;  line-height: 1.6;  padding: 0.5rem 0;  border-left: none; }
.section-title .chip:hover { background-color: #68bbe3; }

	
/* --- Experience --- */
.timeline { margin-top: 2rem; }
.timeline-item { position: relative; margin-bottom: 2rem; padding-left: 30px; }
.timeline-item::before { content: ''; position: absolute; left: 0; width: 16px; height: 16px; background: #003366; border-radius: 50%; border: 2px solid #fff; }
.timeline h3 { font-size: 0.90rem; color: #333 }
.timeline-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; font-weight: 600; }
.company-title {  font-size: 1.2rem; font-weight: 700; color: #003366; }
.job-title { color: #555;font-style: italic;}
.job-date { font-weight: 500; color: #555; margin-left: auto; }

/* --- Education --- */
.education-item { margin-bottom: 15px;}/* This creates the gap after each complete course/school pair */
.course { font-size: 1rem; font-weight: 700; color: #003366;}
.school { margin-left: 2rem; line-height: 1.5rem;}

/* --- Awards  --- */
.award-list li a {color: #003366; text-decoration: underline dashed 5%;}


/* --- Go To Top Arrow --- */
#go-to-top {display: block; /* Hidden by default on desktop */
    position: fixed; bottom: 20px;    right: 20px;    z-index: 100;    background-color: #003366;    color: #fff;    border-radius: 50%;    width: 45px;    height: 45px;    text-align: center;    line-height: 45px;    font-size: 24px;    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);    transition: background-color 0.2s;}
#go-to-top:hover {    background-color: #ffcc00;    color: #003366;}

/* --- Responsive --- */
@media (max-width: 900px) {
  .container { flex-direction: column; }
  nav { width: 100%; height: auto; position: relative; padding-top: 0; }
  #topboard { text-align: left; }
  .banner-wrapper { max-width: 100%; margin: 0; }
  .name-row { flex-direction: column; align-items: flex-start; }
  main { padding: 1rem; }
  main section { max-width: 100%; }
  .timeline-item { padding-left: 30px; }
  .timeline-header { flex-direction: column; align-items: flex-start; }
  .job-date { margin-left: 0; }
  .nav-links { display: flex; flex-wrap: wrap; gap: 1rem; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); margin: 0; padding: 1rem 0; }
  .nav-links li { padding: 0.25rem 0.5rem; }
  #go-to-top {    display: block;   }
}