.navbar{
    background-color:var(--primaryColor);
}

.navbar-brand{
    font-family:"MyFont";
    font-size:26px !important;
    color:var(--green)!important;
}

.navbar-brand:hover{
    color:var(--green)!important;
}   

.navbar-toggler-icon {
    background-color: var(--green);
    border-radius: 5px;
    width: 25px;
    height: 3px;
  }
  
  .navbar-toggler-icon::after {
    background-color:var(--green);
  }
  
  .navbar-toggler {
    border: 2px solid var(--green);
    border-radius: 8px;
  }
  
.offcanvas-header{
    background-color:var(--green);
}
.offcanvas-body{
    background-color:var(--primaryColor);
}

.toggle-heading{
    color:var(--black)!important;
}
.navbar-nav{
    gap:20px;
}
.nav-item .nav-link{
    font-family:13px;
    font-weight: 500;
    color:var(--green);
}

.nav-item .nav-link:hover{
    color:var(--white);
}

/* circle start */
.mainCircel{
    display: flex;
    align-items:center;
    gap:5px;
}

.circle{
    border-radius:50%;
    background-color:var(--green);
}

.circle:nth-child(1){
    width:7px;
    height:7px;
}

.circle:nth-child(2){
    width:20px;
    height:20px;
}

.circle:nth-child(3){
    width:30px;
    height:30px;
}
/* circle end */