responsive site

I changed the location of the module to top 1 and it seems to be better when the resolution is reduced, but I cannot center it with the phone number to the right.
Also, where do I change when the mobile menu appears when the reolution i reduced. Let's say I still want the desktop menu view when the screen sice is 1024 and above?

I thought I could change it by adding teh following to the custom css but it doesn't have any effect.

@media (max-width: 1024px) {
    #sp-menu {display: none !important;} /* Hides desktop menu */
    #sp-mobile-menu {display: block !important;} /* Shows mobile menu */
}

I changed the custom css to teh following and it worked for the navigation

@media (max-width: 1024px)  {
    .sp-megamenu-parent {
        display: none !important;
    }
    #offcanvas-toggler {
        display: flex !important;
    }
}```

Now if there was a way for this all to happen with the book a meeting button over to the right ide of the page centered on teh same line as the phone number, it would be perfect

No.
Is there was a way to have the book a meeting button on the right side of the top position centered on the same line as the phone number and not below the phone number?