.burger {
   display: none;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   margin-left: 50px;
 }
 
 .burger__menu {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   width: 25px;
   height: 20px;
   position: relative;
 }
 
 .burger__menu span {
   position: absolute;
   left: 0px;
   top: 50%;
   width: 50%;
   height: 2px;
   background: var(--col1, linear-gradient(180deg, #9550D5 0%, #354DB4 100%));
   -webkit-transform: translate(0, -50%);
       -ms-transform: translate(0, -50%);
           transform: translate(0, -50%);
   -webkit-transition: -webkit-transform 0.3s ease-in-out;
   transition: -webkit-transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
 }
 
 .burger__menu::before,
 .burger__menu::after {
   display: block;
   content: "";
   height: 2px;
   background: var(--col1, linear-gradient(180deg, #9550D5 0%, #354DB4 100%));
   border-radius: 5px;
   position: absolute;
   left: 0;
   -webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
   transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
 }
 
 .burger__menu::before {
   top: 0;
   width: 100%;
 }
 
 .burger__menu::after {
   width: 75%;
   bottom: 0;
 }