:root{
      --accent: #023e8a;
      --muted: #666;
      --card-bg: #fff;
      --page-max: 920px;
      --hand-font: 'Caveat', 'Segoe UI', Tahoma, sans-serif;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
        background: url("assets/cartoon.jpg");
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:#222;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Top floating nav for quick jumps */
    nav.topnav{
      position:sticky;
      top:0;
      z-index:40;
      background:rgba(250,250,250,0.98);
      backdrop-filter: blur(4px);
      border-bottom:1px solid #eee;
      display:flex;
      gap:10px;
      align-items:center;
      padding:8px 12px;
      justify-content:space-between;
    }
    .nav-left{display:flex; gap:12px; align-items:center;}
    .logo-mini{
      width:48px; height:48px; border-radius:6px; background:#e9eef8; display:flex; align-items:center; justify-content:center;
      border:2px dashed #cfe0ff; font-weight:700; color:var(--accent);
    }
    .nav-links{display:flex; gap:8px;}
    .nav-links a{
      padding:8px 12px; border-radius:8px; text-decoration:none; color:var(--accent);
      font-weight:600; font-size:14px;
    }
    .nav-links a:hover{background:#eef6ff}

    .wrap{
      max-width:var(--page-max);
      margin:22px auto;
      padding:20px;
      background:var(--card-bg);
      border-radius:10px;
      box-shadow:0 8px 30px rgba(0,0,0,0.06);
      overflow:hidden;
    }

    /* Top card */
    .card-top{ display:flex; gap:18px; align-items:flex-start;}
    .portrait{
      width:140px; height:170px; background:#fafafa; border:2px solid #ddd;
      display:flex; align-items:center; justify-content:center; font-size:13px; color:#999; object-fit:cover;
    }
    .details{flex:1}
    .details h3{
      margin:0; font-size:25px; color:var(--accent); font-family:var(--hand-font); font-weight:700;
    }
    .meta{color:black; margin-top:6px; line-height:1.4; font-size:16px}
    .buttons{margin-top:12px}
    .btn{
      background:var(--accent); color:white; border:none; padding:9px 14px; margin-right:8px; border-radius:8px;
      cursor:pointer; font-weight:600;
    }
    .btn.secondary{background:#00a6c7}

    /* Profile section */
    section{ margin-top:28px; padding-top:18px; border-top:1px dashed #eee }
    section h2{ font-family:var(--hand-font); color:var(--accent); margin:0 0 8px 0; font-size:28px }
    .click-to-view{ color:#0077b6; cursor:pointer; display:inline-block; margin-bottom:12px; font-weight:700; }

    .profile-block{ text-align:center; padding:10px 12px }
    .profile-photo{
      width:250px;height:200px; object-fit:cover; border-radius:8px; border:2px solid #ccc; display:block; margin:12px auto;
    }
    .bio{ max-width:760px; margin:8px auto; text-align:justify; color:#333; font-size:15px; line-height:1.5 }

    .small-note{
      display:inline-block; background:#fafafa; padding:10px 14px; border-radius:10px; border:1px solid #eee; font-size:14px;
    }

    /* Experience list - each item with circular logo placeholder */
    .list{ max-width:820px; margin:18px auto 0; display:grid; gap:18px }
    .exp-item{
      display:flex; gap:14px; align-items:flex-start; padding:12px; border-radius:10px; background:#fbfbff; border:1px solid #f0f6ff;
    }
    .exp-logo{
      min-width:70px; width:70px; height:70px; border-radius:50%; border:2px dashed #cfe0ff; display:flex; align-items:center; justify-content:center;
      font-family:var(--hand-font); color:var(--accent); font-weight:700;
    }
    .exp-body p{ margin:0; color:#333; line-height:1.45 }
    .exp-date{ margin-top:6px; color:var(--muted); font-size:13px }

    /* Two-column grid for memberships & specializations */
.swiper {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.swiper-slide {
  text-align: center;
}

.swiper-slide img {
  width: 300px;
  height: 300px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.swiper-slide img:hover {
  transform: scale(1.03);
}

.swiper-slide p {
  margin-top: 10px;
  font-weight: bold;
  font-size: 20px;
}



    /* Publications and community contributions */
    .publication{ display:flex; gap:14px; align-items:flex-start; padding:12px; border-radius:10px; background:#fbfbff; border:1px solid #f0f6ff; max-width:820px; margin:12px auto }
    .pub-logo{ width:66px; height:66px; border-radius:8px; border:2px dashed #cfe0ff; display:flex; align-items:center; justify-content:center; font-family:var(--hand-font); color:var(--accent) }

    /* Whatsapp floating button */
    .whatsapp{
      position:fixed; left:18px; bottom:18px; width:56px; height:56px; border-radius:50%;
      background:#25D366; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; cursor:pointer;
      box-shadow:0 8px 30px rgba(0,0,0,0.15);
      border:4px solid rgba(255,255,255,0.6)
    }

    .social{
      position:fixed; left:18px; bottom:88px; width:56px; height:56px; border-radius:50%;
      background:#f51f1f; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; cursor:pointer;
      box-shadow:0 8px 30px rgba(0,0,0,0.15);
      border:4px solid rgba(255,255,255,0.6)
    }

    .blog{
      position:fixed; left:18px; bottom:158px; width:56px; height:56px; border-radius:50%;
      background:#5806f0; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; cursor:pointer;
      box-shadow:0 8px 30px rgba(0,0,0,0.15);
      border:4px solid rgba(255,255,255,0.6)
    }

    .case{
      position:fixed; left:18px; bottom:228px; width:56px; height:56px; border-radius:50%;
      background:#f5f108; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; cursor:pointer;
      box-shadow:0 8px 30px rgba(0,0,0,0.15);
      border:4px solid rgba(255,255,255,0.6)
    }

    /* responsive */
    @media (max-width:760px){
      .card-top{ flex-direction:column; align-items:center }
      .two-col{ grid-template-columns:1fr }
      .exp-item{ flex-direction:row; align-items:center }
    }