* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #f1f1f1;
  color: #1e293b;
  scroll-behavior: smooth;
}

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

#home {
  background: #ffffff;
}

#details {
  background: #ffffff;
}

#special {
  background: #e2e8f0;
}

.profile-pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid;
  margin-bottom: 20px;
}

h1 {
  font-size: 2.2rem;
}

.tagline {
  font-size: 1rem;
  color: #64748b;
  margin-top: 10px;
}

h2 {
  font-size: 1.5rem;
  color: #0ea5e9;
  margin: 20px 0 15px 0;
}

.skills-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.skills-list li {
  background: #e2e8f0;
  padding: 8px 14px;
  border-radius: 10px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.project-card {
  background: #f8fafc;
  padding: 20px;
  border-radius: 12px;
  transition: transform 0.3s, background 0.3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.project-card:hover {
  transform: translateY(-5px);
  background: #e2e8f0;
}

a {
  color: #0ea5e9;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  .skills-list {
    gap: 8px;
  }

  .skills-list li {
    font-size: 0.9rem;
    padding: 6px 10px;
  }

  .profile-pic {
    width: 120px;
    height: 120px;
  }
}
  
.nav-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

.nav-dots .dot {
  position: relative;
  width: 14px;
  height: 14px;
  background: #cbd5e1;
  border-radius: 50%;
  display: block;
  transition: background 0.3s, transform 0.3s;
}

.nav-dots .dot::after {
  content: attr(data-label);
  position: absolute;
  right: 120%;
  top: 50%;
  transform: translateY(-50%);
  background: #0ea5e9;
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
}

.nav-dots .dot:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(-5px);
}

.nav-dots .dot:hover {
  background: #0ea5e9;
  transform: scale(1.2);
}

.nav-dots .dot.active {
  background: #0ea5e9;
}

.project-network {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.center-logo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}


.project-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #ccc;
}

.logo1 { top: 28%; left: 32%; }
.logo2 { top: 28%; right: 32%; }
.logo3 { bottom: 28%; left: 32%; }
.logo4 { bottom: 28%; right: 32%; }

.connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.connections .wire {
  stroke: #9ca3af;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.main-logo img {
width: 120px;
height: 120px;
border-radius: 50%;
z-index: 10;
position: relative;
}

.ring a img {
width: 60px;
height: 60px;
border-radius: 50%;
}

.ring1 { width: 220px; height: 220px; }
.ring2 { width: 340px; height: 340px; }
.ring3 { width: 480px; height: 480px; }
.ring4 { width: 640px; height: 640px; }


.ring1 .project, .ring2 .project, .ring3 .project, .ring4 .project {
position: absolute;
}


.ring1 .project:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); }
.ring1 .project:nth-child(2) { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.ring1 .project:nth-child(3) { bottom: 0; right: 0; transform: translate(50%, 50%); }


.ring2 .project:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); }
.ring2 .project:nth-child(2) { top: 25%; right: 0; transform: translate(50%, -50%); }
.ring2 .project:nth-child(3) { bottom: 25%; right: 0; transform: translate(50%, 50%); }
.ring2 .project:nth-child(4) { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.ring2 .project:nth-child(5) { top: 25%; left: 0; transform: translate(-50%, -50%); }


.ring3 .project:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); }
.ring3 .project:nth-child(2) { top: 20%; right: 0; transform: translate(50%, -50%); }
.ring3 .project:nth-child(3) { bottom: 20%; right: 0; transform: translate(50%, 50%); }
.ring3 .project:nth-child(4) { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.ring3 .project:nth-child(5) { bottom: 20%; left: 0; transform: translate(-50%, 50%); }
.ring3 .project:nth-child(6) { top: 20%; left: 0; transform: translate(-50%, -50%); }


.ring4 .project:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); }
.ring4 .project:nth-child(2) { top: 15%; right: 0; transform: translate(50%, -50%); }
.ring4 .project:nth-child(3) { top: 50%; right: 0; transform: translate(50%, -50%); }
.ring4 .project:nth-child(4) { bottom: 15%; right: 0; transform: translate(50%, 50%); }
.ring4 .project:nth-child(5) { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.ring4 .project:nth-child(6) { bottom: 15%; left: 0; transform: translate(-50%, 50%); }
.ring4 .project:nth-child(7) { top: 15%; left: 0; transform: translate(-50%, -50%); }

*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}

/* network area */
.logo-network{position:relative;width:100%;height:680px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.center-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10}
#mainLogo{width:120px;height:120px;border-radius:50%;display:block}

/* rings container (holds project nodes) */
.rings{position:absolute;inset:0;pointer-events:none}

/* node style */
.node{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;z-index:5}
.node a{display:block}
.node img{width:60px;height:60px;border-radius:50%;display:block;border:2px solid rgba(0,0,0,0.08);box-shadow:0 6px 14px rgba(0,0,0,0.06);background:#fff}

/* SVG connections overlay */
.connections{position:absolute;inset:0;z-index:2;pointer-events:none}
.connections path{fill:none;stroke:#999;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* responsive */
@media (max-width:900px){
  .logo-network{height:560px}
  #mainLogo{width:96px;height:96px}
  .node img{width:52px;height:52px}
}
@media (max-width:600px){
  .logo-network{height:520px}
  #mainLogo{width:84px;height:84px}
  .node img{width:44px;height:44px}
  h2{font-size:1.25rem}
}