:root{--bg:#fff;--muted:#6c757d;--accent:#0d6efd}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial;margin:0;color:#212529;background:var(--bg)}
.container{max-width:960px;margin:0 auto;padding:20px}
.navbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#212529;color:#fff;z-index:1000}
.navbar-brand{font-weight:700;color:inherit;text-decoration:none}
.navbar-nav{list-style:none;margin:0;padding:0;display:flex;gap:14px}
.nav-link{color:rgba(255,255,255,0.9);text-decoration:none;font-size:14px}
.menu-toggle{display:none;font-size:24px;background:none;border:none;color:white;cursor:pointer}
.hero{padding:60px 20px 40px;text-align:center;background:#f8f9fa}
.profile-photo{width:200px;height:200px;border-radius:50%;object-fit:cover;object-position:top;display:block;margin:0 auto;box-shadow:0 0 15px rgba(0,0,0,0.3);border:4px solid #ffffff}
.avatar-placeholder{width:200px;height:200px;border-radius:50%;background:#4a82b3;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto;box-shadow:0 0 15px rgba(0,0,0,0.3)}
h1,h2,h4{margin:10px 0}
.muted{color:var(--muted)}
.bg-light{background:#f8f9fa;padding:20px}
section{padding:40px 0}
ul{padding-left:1.1rem}
a{color:var(--accent)}

#about p {
  text-align: justify !important;
  text-justify: inter-word;
}

/* Mobile Navbar Fix */
@media (max-width: 768px) {
.navbar {
    display: flex;
    justify-content: space-between; /* Logo left, menu right */
    align-items: center;            /* Center everything vertically */
    padding: 0 15px;
}


.menu-toggle {
    display: flex;               /* Use flexbox for centering */
    align-items: center;         /* Vertical center */
    justify-content: center;     /* Horizontal center */
    font-size: 24px;
    background: none;
    border: none;
    color: #fff;
    padding: 10px;                /* Some breathing space */
    cursor: pointer;
}



  .navbar-nav {
    display: none;
    flex-direction: column;
    justify-content: center; /* Center vertically inside dropdown */
    align-items: center;     /* Center horizontally inside dropdown */
    background-color: #333;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%; /* Full width dropdown */
    padding: 0;
    margin: 0;
}

.navbar-nav.show {
    display: flex;
}

.navbar-nav li {
    width: 100%;
    text-align: center; /* Center text inside each li */
    padding: 12px 0;
}

.navbar-nav li a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
}