:root {
    --primary-color: #5509e2;
    --dark-color: #000;
    --light-color: #fff;
    --gray-color: #808080;
    --primary-filter: invert(73%) sepia(13%) saturate(5708%) hue-rotate(7deg) brightness(100%) contrast(93%);
    --light-filter: invert(92%) sepia(100%) saturate(23%) hue-rotate(251deg) brightness(108%) contrast(100%);
    --gray-filter: invert(58%) sepia(0%) saturate(3400%) hue-rotate(13deg) brightness(87%) contrast(97%);
  }

  
   .button-contain {
    display: flex;
    align-content: center;
    align-items: center;
    gap: 10px;
  }
  
  @media (max-width: 992px) {
     .button-contain .custom-btn {
      display: none;
    }
  }
  
   .button-contain .lang {
    width: 50px;
    height: 50px;
    border: 1px solid var(--primary-color);
    background-color: var(--light-color);
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    z-index: 9;
    overflow: hidden;
  }
  
   .button-contain .lang::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    transform: scale(0);
    border-radius: 50%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s linear;
  }
  
  .button-contain .lang img {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
  }
  
   .button-contain .lang span {
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 700;
  }
  
   .button-contain .lang:hover span {
    color: var(--light-color);
    animation: fadeInLeft 0.3s linear;
  }
  
   .button-contain .lang:hover::after {
    transform: scale(1);
  }
  .nav .brand-name .img {
    width: 130px;
    height: 80px;
    -o-object-fit: contain;
    object-fit: contain;
  }
  
  .nav .brand-name.brand-name span {
    font-size: 15px;
    font-weight: 900;
    color: var(--dark-color);
  }
  
  .nav .brand-name.navbar-nav {
    flex-direction: row;
    gap: 40px;
  }