Hi,

If you can provide wp admin access in a private comment we can import demo data free of charge. This will give you a snapshot of our live demo you can start customizing from. Specify the editor of your choice Gutenberg or Elementor

Hi there, my answers inline, bolded:

I would like to increase the size of our Supercreatures logo on the landing page by 1.5 times.

I see that you added several related styles to it. best i think is to increase the the height of the logo because it tries to cover the available width.

#logo img {
    height: 50px;
}

Modify the value in pixels (50) and then add the code to customizer -> additional CSS. This will apply to both the light and dark versions of the logo

I would like to reduce the size of the Video Hero in the Hero Portfolio. How can I do this?

Do you mean the size of the hero section or the size of the video file?

how to adjust the font size of the Hero Caption Title.

you can adjust both the hero title font size and the line height with custom CSS

@media only screen and (max-width: 1466px){
    .uppercase-text .hero-title {
         font-size: 8vw;
         line-height: 8vw;
   }

you can specify the size in view units or pixels and then add the code to customizer -> additional CSS

I would like to use YouTube or an external server link for the Vieo-Hero Webm Video URL and MP4 Video URL to improve efficiency due to high traffic. Is there a good way to do this?

Yes, absolutely. the video hero section needs just direct links to video files, no matter where they are stored. So storing them on a CDN will improve the streaming speed.

It's a different thing with images though. The browser may block them because it's coming froma different domain name due to CORS policy

Hi there

where exactly do you have the hero video section, can you send us the link URL?

Hello, my answers inline, bolded:

1. I want to resize the Hero title when it is the maximum size(PC screen), and make it in the middle of the screen. 

it's worthwhile mentioning CSS media queries. in them, you can specify a certain screen width that indicates when the CSS instructions are applied, for example

@media only screen and (max-width: 1466px){

     .uppercase-text .hero-title {
          font-size: 15vw;
          line-height: 15vw;
    }

}

modify the attributes for font size and line height for screen up with width up to 1466px.

for mobile devices the css selector would become 

@media only screen and (max-width: 769px){

to center the hero title 

#hero.has-image #hero-caption {

    text-align: center;
}

in customizer -> additional CSS

2. Adjust the Hero video height  when it is maximum (PC screen), and smartphone screen 

Similar situations. you can leave the media query for PC screens. the height is specified in view units

#hero-image-wrapper {
    height: 100vh;
}

for mobile:

@media only screen and (max-width: 769px){

      #hero-image-wrapper {     

         height: 100vh; 

      }

}

modify the values for height and then add the code to customizer -> additional CSS

3. too much long height between the menu and the hero title when it is mobile screen size. I want to make it as a decent height 

I can see you already added a value for the height in custom css?

https://prnt.sc/j3HYU6fq-ynr