@import url('./main.css');
.cls-navbar-items{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100px;
    
  position: sticky;
  background: var(--second-bg);
 border: var(--border-width) solid var(--border);
 border-radius: var(--radius);
}
.cls-navbar-item{

  margin-top: 30px;
    margin-left: 5%;
    margin-right: 7%;
    font-size: var(--fs-lg);
    background: var(--second-bg);
}
.cls-navbar-item a{
    color: var(--text);
    text-decoration: none;
   background: var(--second-bg);
}


.cls-theme-icon{
  inline-size: 56px; 
  block-size: 28px; 
  fill: var(--text);
 background: var(--second-bg); 
transform: rotate(-45deg);

  
}.cls-theme-switch { 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
 
  color: var(--text);  
  white-space: nowrap; 
  
    background: var(--second-bg);
 
}

.cls-theme-label { 
  inline-size: 56px; 
  block-size: 28px; 
  background: var(--text); 
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 20px; 
  cursor: pointer; 
  display: inline-block; 
  position: relative; 
 
}

.cls-theme-label::after { 
  content: ""; 
  position: absolute; 
  inset: 2px auto 2px 2px; 
  width: 20px; 
  height: 20px; 
  border-radius: 50%;
   background: var(--bg);
  transition: transform 0.25s ease, background 0.3s ease; 
} 

.nav-toggle {
  display: none;
  border: var(--border);
  cursor: pointer;
background: none;
  color: var(--text);
  
}




@media (max-width: 1200px) {
  .nav-toggle {
    display: flex;
  
    position: fixed;
    top: 1rem;
    right: 1rem; 
    z-index: 2001;
    opacity: 0.9;
    
  }
  .cls-icon-nav{
    fill: var(--text); 
     width: 32px;
  height: 32px;
  
  }


  .cls-navbar-items {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;       
    height: 100%;
    background: var(--second-bg);
    flex-direction: column;
    align-items: center;
    transform: translateX(100%);   
    transition: transform 0.4s ease; 
    z-index: 2000;
    opacity: 0.9;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
   

  }.cls-navbar-item{
      border-bottom: 2px solid var(--border);
padding-bottom: 15px;
border-radius: var(--radius);
  }

  .cls-navbar-items.active {
    transform: translateX(0);
  }

 
}