/* NAVBAR */
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:#061a2b;

}

.main-header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.navbar{
  position:fixed;
  width:100%;
  top:0;
  z-index:999;
  border-bottom:1px solid rgba(255,255,255,0.05);
   background:rgba(6,27,46,0.9);
  backdrop-filter:blur(8px);
}

.nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 40px;
}

.logo{flex:0 0 auto}


.nav-right{display:flex;align-items:center;margin-left:auto}



.logo{
    
   flex:1;
  text-align:left;    
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1;
  padding-top:10px; /* ✅ subtle push down */
}
.logo-circles{display:flex;gap:6px}
.logo-circles span{width:44px;height:44px;background:#4fd1ff;color:#0b2c4a;font-weight:700;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,0.3);transition:0.3s}
.logo-circles span:hover{transform:translateY(-3px) scale(1.05)}
.logo-text{
  font-size:12px;
  color:#4fd1ff;
  margin-top:6px; /* ✅ better gap */
  letter-spacing:1px;
}
#typing-text::after{content:"|";margin-left:3px;animation:blink 1s infinite; animation-iteration-count: 5;}   
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.menu-toggle{display:none;font-size:22px;cursor:pointer;margin-left:auto}



.nav{
  flex:1;
  display:flex;
  justify-content:flex-end;
}



.nav-right{
  margin-right:20px;
  padding: 10px;
}


.nav-links{display:flex;gap:20px;margin-left:auto;align-items:center}
.nav-links li{list-style:none}
.nav-links a{
  color:#ffffff;
  text-decoration:none;
  font-weight:500;
}

.nav-links a:hover{
  color:#1fc8db;
}

@media(max-width:768px){
.nav-links{position:absolute;top:60px;left:0;width:100%;background:#061b2e;flex-direction:column;display:none}
.nav-links.active{display:flex}
.menu-toggle{display:block}

.logo-circles{display:flex;gap:6px}
.logo-circles span{width:34px;height:34px;background:#4fd1ff;color:#0b2c4a;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,0.3);transition:0.3s}
.logo-circles span:hover{transform:translateY(-3px) scale(1.05)}

.logo-text{
  font-size:10px;
  color:#4fd1ff;
  margin-top:6px; /* ✅ better gap */
  letter-spacing:1px;
}
#typing-text::after{content:"|";margin-left:3px;animation:blink 1s infinite; animation-iteration-count: 5;} 
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

}

@media (max-width: 600px) {

}