/* ----------------- Imported Poppins font from Google font ---------------- */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400;600;700;800;900&display=swap');

    /* ------------- HTML document styling -------------- */
    *
    {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    /* ------------- HTML body styling ------------- */
    html, body
    {
      font-family: 'Poppins', sans-serif;
    }
    
    /* ------------- Container styling ---------------- */
    .container
    {
      width: 100%;
      height: 100vh;
    }
    
    /* -------------- Burgur styling ----------------- */
    .btn
    {
      top: 0;
      right: 0;
      height: 70px;
      width: 70px;
      padding: 16px;
      background: #292a2b;
      position: absolute;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: column;
      cursor: pointer;
    }
    
    .btn .bar1, .btn .bar2, .btn .bar3
    {
      height: 4px;
      width: 100%;
      display: block;
      background: #fff;
    }
    
    /* ----------- close btn ------------- */
    .close-btn
    {
      top: 0;
      right: 0;
      height: 70px;
      width: 70px;
      padding: 20px;
      background: #292a2b;
      position: absolute;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: column;
      cursor: pointer;
    }
    
    .close-btn .bar1
    {
      transform: rotate(-130deg);
      height: 4px;
      width: 90%;
      display: block;
      background: #fff;
      position: absolute;
    }
    
    .close-btn .bar2
    {
      display: none;
    }
    
    .close-btn .bar3
    {
      transform: rotateZ(130deg);
      height: 4px;
      width: 90%;
      display: block;
      background: #fff;
      position: absolute;
    }
    
    /* ------------- Hide menu ----------- */
    .menu
    {
      display: none;
    }
    
    /* ------------------- Menu styling --------------- */
    .open-menu
    {
      width: 100%;
      height: 20;
      background: #292a2b;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 5s all;
    }
    
    .open-menu ul
    {
      display: flex;
      justify-content: center;
      align-items: start;
      flex-direction: column;
    }
    
    .open-menu ul li
    {
      list-style: none;
      padding: 6px;
    }
    
    .open-menu ul li a
    {
      text-decoration: none;
      /*text-styling: none;*/
      font-size: 5vw;
      font-weight: 400;
      color: #fff;
    }
    
    .open-menu ul li a:hover
    {
      border-bottom: 5px solid #fff;
      transition: 0.2s all;
    }