body{
  font-family: Arial, sans-serif;
  margin:0;
  background:#f9f9f9;
  color:#333;
  line-height:1.6;
}
header{
  background:#646BA5;
  color:#fff;
  padding:2rem;
  text-align:center;
}
section{
  max-width:800px;
  margin:2rem auto;
  padding:0 1rem;
}
h2{
  color:#646BA5;
}
ul{
  padding-left:1.2rem;
}
footer{
  text-align:center;
  padding:1rem;
  background:#eee;
  font-size:0.9rem;
}
.profile-pic {
  position: absolute;
  width: 240px;
  height: 240px;
  top: -20px;   /* moved down slightly */
  left: -40px;
  object-fit: cover;
}

.photo-container{text-align:center;}
.site-logo{
  max-width:100px;
  max-height:100px;
  height:auto;
  display:block;
  margin:0 auto 20px;
}

.profile-zoom {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
  margin: 1rem auto;
}
.profile-frame {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin: 1rem auto;
  position: relative;
}
.cf-cert {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 2rem auto;
  border: 1px solid #ccc;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.project-icon {
  margin-right: 8px;
  color: #646BA5;
}
ul li i {
  margin-right: 8px;
  color: #646BA5;
}