.container {
            display: inline-block;
            cursor: pointer;
        }

        #hamburgerBar {
            margin-top: 5px;
            margin-left: -20px;
        }

        /* .bar1,
        .bar2,
        .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
        } */
       
        /* .bar1 {
            transform: translate(0, 8px) rotate(45deg);
            width: 35px;
            height: 5px;
            background-color: #fff;
            margin: 6px 0;
            transition: 0.4s;
        } */

        .bar1 {
            transform: translate(0, 16px) rotate(30deg);
            width: 35px;
            height: 5px;
            background-color: #fff;
            margin: 6px 0;
            transition: 0.4s;
            border-radius: 25px;
        }

        .bar2 {
            opacity: 0;
        }

        /* .bar3 {
            transform: translate(0, -3px) rotate(-45deg);
            width: 35px;
            height: 5px;
            background-color: #fff;
            margin: 6px 0;
            transition: 0.4s;
        } */

        .bar3 {
            transform: translate(0, -11px) rotate(-30deg);
            width: 35px;
            height: 5px;
            background-color: #fff;
            margin: 6px 0;
            transition: 0.4s;
            border-radius: 25px;
        }

       .change .bar1 {
            transform: translate(0, 2px) rotate(0deg);
       
        }

        .change .bar2 {
            transform: translate(0, 2px) rotate(0deg);
            width: 35px;
            height: 5px;
            background-color: #fff;
            margin: 6px 0;
            transition: 0.4s;
            opacity: 1;

        }

        .change .bar3 {
            transform: translate(0, 2px) rotate(0deg);
        }