Как сделать сворачиваемость меню в гамбургер и переход логотипа по центру при мобильной адаптации?

/* Button
*{
    font-family: 'Montserrat', sans-serif;
}
.first-section{
    background-image: url(img/background.jpg);
}
#signin{
    background-color: transparent;
    border: none;
    color: rgb(226, 226, 226);
}
.logo{
    width: 120px;
    height: 100px;
}

#to-top {
    position: fixed;
    width: 64px;
    height: 64px;
    z-index: 1;
    border-radius: 50%;
    background: #111;
    border: 0;
    padding: 0;
    bottom: 5vw;
    right: 5vw;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(0) rotate(-45deg);
    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 8px 8px rgba(0,0,0,0.11), 
              0 16px 16px rgba(0,0,0,0.11), 
              0 32px 32px rgba(0,0,0,0.11);
}
#to-top._active {
    opacity: 1;
    visibility: visible;
    transform: scale(.9) rotate(0);
}
#to-top:hover {
    transform: scale(1);
}
#to-top:hover #progress-main {
    transition: stroke-dashoffset .2s;
}
/* Progress */
/* #to-top svg {
    display: block;
    width: 100%;
    height: 100%;
}

#to-top svg circle {
    fill: transparent;
  stroke-dashoffset: 0;
    stroke-dasharray: 0;
  stroke-width: 4px;
}

#to-top #progress-back {
    stroke: rgba(255, 255, 255, .2);
}

#to-top #progress-temp {
    stroke: rgba(255, 255, 255, .4);
    transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

#to-top #progress-main {
    stroke: #eee;
    transform: rotate(-90deg);
  transform-origin: 50% 50%;
} */

/* Arrow */
/* #arrow path {
    fill: #eee;
    transform-origin: 50% 50%;
    transform: scale(.33);
    transition: all .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#to-top._reverse #arrow path {
    transform: scale(.33) rotate(-180deg);
}

#to-top:hover #arrow-animation {
    animation: bounce-up 2s infinite 1s;
}

#to-top._reverse:hover #arrow-animation {
    animation: bounce-down 2s infinite 1s;
}

@keyframes bounce-down {
  0%, 20%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10%);
  }
    50% {
        transform: translateY(5%);
    }
  60% {
    transform: translateY(-5%);
  }
}

@keyframes bounce-up {
  0%, 20%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(10%);
  }
    50% {
        transform: translateY(-5%);
    }
  60% {
    transform: translateY(5%);
  }
}

  
li, a, button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: rgb(214, 214, 214);
    text-decoration: none;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
    
  }
  
  .nav-links {
    list-style: none;
  }
  
  .nav-links li {
    display: inline-block;
    padding: 0px 20px;
  }
  
  .nav-links li a {
    transition: all 0.3s ease 0s;
    
  }
  
  .nav-links li a:hover {
    color: white;
    
  }
  
  button {
    padding: 9px 25px;
    background-color: #0088a9;
    opacity: 1;
    border: none;
    border-radius: 50px;
    transition: all 0.3s ease 0s;
    cursor: pointer;
  }
  
  button:hover {
    background-color: white;
    opacity: 0.8;
    color: black;
  }

  a{
    color: rgb(226, 226, 226);
  }
  a:hover{
      outline: none;
      text-decoration: none;
      color: rgb(151, 151, 151) !important;
  }
.mainh5{
color: white;
  }
  h1{
      color: white;
  }

.mainlay{
    width: 50%;
    margin-left: 15%;
} */



body {
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
  }
  .container-fluid{
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #FFF;
  }
  /* ============= Animation background ========= */
  .background {
    background: linear-gradient(132deg,  #1b2855, #281555, rgb(32, 14, 72), #0b0927, #050a1d);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    padding:0;
    margin:0px;
  }
  .cube {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    border: solid 1px rgba(32, 14, 172, 0.1);
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 12s ease-in forwards infinite;
  }
  .cube:nth-child(2n) {
    border-color: rgba(32, 14, 172, 0.1);; 

  }
  .cube:nth-child(2) {
    animation-delay: 2s;
    left: 25vw;
    top: 40vh;
  }
  .cube:nth-child(3) {
    animation-delay: 4s;
    left: 75vw;
    top: 50vh;
  }
  .cube:nth-child(4) {
    animation-delay: 6s;
    left: 90vw;
    top: 10vh;
  }
  .cube:nth-child(5) {
    animation-delay: 8s;
    left: 10vw;
    top: 85vh;
  }
  .cube:nth-child(6) {
    animation-delay: 10s;
    left: 50vw;
    top: 10vh;
  }
  /* ================= Header ============ */
  header{
    position: absolute;
    top:0%;
    left: 0%;
    width:100%;
    margin: 0;
    padding: 0;
  }
  /* navbar */
  nav{
    color: #FFF;
    float: right;
    margin:30px 90px;
  }
  nav ul{
    list-style: none;
  }
  nav ul li {
    float: left;
    transition: .3s;
  }
  nav ul li a{
    text-decoration: none;
    color: #EFEEF5;
    transition: .5;
    font-size: 15px;
    margin-left:16px;
  }
  nav ul li:hover a{
    text-decoration: none;
    color: #8b65cd;;
  }

  /* Logo */
  .logo{
    margin: 40px 63px;
    float: left;
    /* transform: rotate(-30deg); */
  }
  .logo span{
    /* color: #591BC5; */
    font-size: 1.5em;
    line-height: 1.4;
    padding-left: 5px;
    font-weight: bold;
  }
  /* Header content & title & button*/
  .header-content{
    margin-top:25%;
    text-align: center;
    color:  #EFEEF5;
  }
  .header-content h1{
    text-transform: uppercase;
    font-size: 3em;
    letter-spacing: 1px;
  }
  .header-content p {
    font-size: 20px;
    line-height: 1.5;
    margin: 20px auto;
  }
  .header-content button{
    width: 140px;
    margin:20px 10px;
    color: #591BC5;
    font-size: 17px;
    border:1px solid #EFEEF5;
    font-weight: 500;
    background: #EFEEF5;
    border-radius: 20px;
    padding: 10px;
    cursor:pointer;
    transition: .3s;
  }
  .header-content button:hover{
    border-radius: 0;
  }
  /* Animate Background*/
  @keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @keyframes cube {
    from {
      transform: scale(0) rotate(0deg) translate(-50%, -50%);
      opacity: 1;
    }
    to {
      transform: scale(20) rotate(960deg) translate(-50%, -50%);
      opacity: 0;
    }
  }

  .gradient-text{
    text-transform: uppercase;
    background: linear-gradient(45deg, #5281EB 33%, #6053D9 66%, #7E4CF2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0B2349;
    display: table;
  }



@media screen and (min-width: 955px){
  .gradient-text{
    text-align: center !important;
  }
  .logo{
    text-align: center !important;
  }
}

@media screen and (max-width: 955px){
  .gradient-text{
    text-align: center !important;
  }
  .logo{
    text-align: center !important;
  }
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <title>Roga</title>
</head>
<body>


    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">


      <div class="container-fluid">
        <div class="background">
           <div class="cube"></div>
           <div class="cube"></div>
           <div class="cube"></div>
           <div class="cube"></div>
          <div class="cube"></div>
        </div>

       <header>
         <nav>
            <ul>
               <li><a href="#">Главная</a></li>
                <li><a href="#">О продукте</a></li>
                <li><a href="#">Партнёры</a></li>
                <li><a href="#">Контакты</a></li>
                <li><a href="#">Регистрация</a></li>
             </ul>
           </nav>
          <div class="logo"><span class="gradient-text">Roga-Group</span></div>

          <section class="header-content">
             <h1 align="center">GOGOGGO</h1>
            <p> LoremLOREMLOREM</p>
              
            <button><a href="#mainh1">Информация</a></button>
            <button>Контакты</button>
          </section>
      </header>




<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>