.top-line-header {
  background: #DFDFDF;
  text-align: center;
  font-size: 18px;
  color: #000;
  padding: 5px;
  text-transform: uppercase;
  width: 100%;
}

.navbar-brand-logo {
  padding: 0px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px;
}

.navbar-brand-logo img {
  width: 150px;
}

.custom-main-nav {
  background: #fff;
  flex-wrap: wrap;
  padding: 0rem;
}

.custom-main-nav .nav-link {
  color: #000 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 16px;
  padding: 0 12px;
}

#main-navigation {
  position: absolute;
  margin-left: 200px;
}

.custom-main-nav .navbar-toggler {
  color: rgba(0, 0, 0, 1);
  border: 0px;
  font-size: 0px;
  padding: 0px;
}

.custom-main-nav .navbar-toggler svg {
  width: 40px;
}

.cartnav {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.cartnav-row {
  display: flex;
  gap: 10px;
}

.cartnav a {
  position: relative;
}

.cartnav-new {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cartnav-new a {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 100%;
  font-size: 20px;
  height: 60px;
  width: 60px;
  background: white;
  color: #343a40;
}

.cartnav-new a:hover,
.cartnav-new a:focus {
  text-decoration: none
}

.cartnav-new svg {
  width: 30px;
}

.cartnav-new svg path {
  fill: #343a40
}

/*only  desktop */
  @media(min-width:993px) {

    .cartnav {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAABFCAMAAAArfxleAAAAnFBMVEXf398AAADf39/////f39/f39/e3t7f39/f39/f39/b29vf39/f39/f39/f39/f39/g4ODV1dXMzMzk5OTf39/f39/f39/f39/g4ODm5ubg4ODZ2dni4uLc3Nzf39/f39/f39/g4ODo6Ojg4ODg4ODg4OC/v7/b29vf39/e3t7j4+Pf39/g4ODh4eHf39/h4eHV1dXf39/g4ODg4OC+ra29AAAANHRSTlP/APkCOOysedPlHJfuh1iY4wYFE/y1bfF7CqEUGiSxQKVaC/NjSwQOyF4JYCkR0DMMT5tr4rzHrwAAAbZJREFUeJztmsdyg0AQBTVkCVCWrGRl52z//78ZlasowgwsFz9cnj5y6i5YZg/TIbKfz/uo88c4rfovdCEJuGDvVie0UwNeH44/3mlAwvvXEO1lSHBjp9aZAKLR/ArtZsB0cZtxzgUQbTy0Xi1dJ2dcCCBaoAVrGF4XhIsBdJiiHauIiv7lADqjJav4KOmWA+gTbSkzK9syAXddtKdI4QALATRHe0rcM7JcwLGt42BhGEB7tKnAzjTgCW0qsDENeEObCjyaBkzQpgKcK/twjDYVMA4gtKmABqDRADQagEYD0GgAGg1AowFoNACNBqDRADQagEYD0GgAGg1AowFo/lGAhVZlscwDXLQri2seEKBdWQLzgHauDXnmAT7alcU3D3DQrizMqocUYLdx/2+YWfWrC6AYbcsQs6ZCQK99k8DqNQmgEO1bIuRFpYBJ22aZO2kWQH20cYGD4CkG0ACtnGMgacoBoy1aOsN21DyAljO0dspsKVpWBNC4LV/RYCxLVgUkJ7kN/yK3X6VYHUDrED3RrHBdaVgTkMzkGLnI2435+dsgILnZOb4XRL/9Jqwo8HyHvb/l+AYImBRadqYr2gAAAABJRU5ErkJggg==') no-repeat;
      width: 190px;
      height: 70px;
      background-size: cover;
      position: relative;
    }
  }
  @media (min-width:993px) and (max-width: 1200px) {
    .cartnav{background-size: 100% 100%;width: 150px;}
  }
/* large */
  @media (max-width: 1200px) {

    #main-navigation {
      margin-left: 155px;
    }
    #main-navigation .nav-link {
      padding: 0 10px;
    }
  }

/* mobile */
  @media (max-width: 992px) {
    .cartnav-new a {
      border-radius: 20px;
      height: auto;
      background: #DFDFDF;
      color: #343a40;
    }
    .cartnav-new svg {
      width: 20px;
    }
    .cartnav-new svg path {
      fill: #343a40
    }

    .navbar-collapse.show:after {
      content: '';
      height: 100vh;
      width: 100%;
      position: absolute;
      /*backdrop-filter: blur(5px);*/
      left: 0px;
      border: 0px;
    }
    .custom-main-nav .container {
      width: 100%;
      padding: 7px 1rem;
    }
    .cartnav {
      background: none;
    }
    .top-line-header {
      font-size: 14px;
    }
    #main-navigation {
      position: absolute;
      top: 120px;
      padding-left: 8% !important;
      background: #f8f9fa!important;
      width: 100%;
      left: 0;
      line-height: 35px;
      padding: 0 0 15px;
      margin: 0;
    }
    .navbar-brand-logo img {
      width: 100px;
    }
  }