@media screen and (min-width: 481px) {
    body, html {
        margin: 0;
        height: 100%;
        overflow: hidden;
    }   
    .topbar {
        width: 100%;
        height: 8vh;
        background-color: #FF6A00;
        display: flex; 
        justify-content: space-between;
        align-items: center;
    }   
    
    .container {
        width: 100%;
        height: calc(100vh - 8vh);
        background-size: cover; /* Faz a imagem caber na div sem cortar ou distorcer */
        background-position: center;
        background-repeat: no-repeat; /* Evita repetição da imagem */
    }
    
    #div-icons {
        width: 50%;
        height: 8vh;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 6.5rem;
    }
    
    #div-icons svg {
        margin-right: 2vw;
        width: 1vw;
        cursor: pointer;
    }
    
    .container div {
        left: 57vw;
        top: 30vh;
        margin-right: 10vw;
        border-left: 0.3vw solid white;
        padding: 2vw 2vw 2.7vw 3vw;
    }
    
    .container div button {
        border-radius: 30px;
        border: none;
        padding: 3px 35px 3px 35px;
        cursor: pointer;
        margin: 1vw;
        font-size: 1.1vw;
        font-family: 'Averta Bold', sans-serif;
        font-weight: bold;
        /*0 - Top | 0 - Right | 0 - Bottom | 0 - Left*/
    }
    
    .container div h1 {
        font-size: 2.0vw;
        margin-bottom: 3vw;
        font-family: 'Averta', sans-serif;
    }
    
    .container div p {
        margin-bottom: -1vw;
        font-family: 'Averta Light', sans-serif;
    }
    
    .container div h3 {
        font-size: 1.3vw;
        font-family: 'Averta', sans-serif;
    }
}

@media screen and (max-width: 480px) {
    body, html {
        margin: 0;
        height: 100%;
        overflow: hidden;
    }   
    .topbar {
        width: 100%;
        height: 8vh;
        background-color: #FF6A00;
        display: flex; 
        justify-content: space-between;
        align-items: center;
    }   
    
    .container {
        width: 100%;
        height: calc(100vh - 8vh);
        background-size: cover; /* Faz a imagem caber na div sem cortar ou distorcer */
        background-position: center;
        background-repeat: no-repeat; /* Evita repetição da imagem */
    }
    
    #div-icons {
        width: 50%;
        height: 8vh;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 5vw;
    }
    
    #div-icons svg {
        margin-right: 4vw;
        width: 3vw;
        cursor: pointer;
    }

    #div-icons svg:last-child {
        margin-right: 2vw;
    }
    
    .container div {
        margin-top: 45vh;
        height: 100%;
    }

    .container div button {
        display: block;
        margin: 2vw auto;
        border-radius: 30px;
        border: none;
        padding: 3px 35px 3px 35px;
        cursor: pointer;
        font-size: 3vw;
        font-family: 'Averta Bold', sans-serif;
        font-weight: bold;
        width: 50vw;
        /*0 - Top | 0 - Right | 0 - Bottom | 0 - Left*/
    }
    
    .container div h1 {
        padding: 4vw 4vw 0 4vw;
        font-size: 5vw;
        margin-bottom: 3vw;
        font-family: 'Averta', sans-serif;
    }
    
    .container div p {
        margin-bottom: 0;
        font-size: 4vw;
        padding: 0 5vw 0 5vw;
        font-family: 'Averta', sans-serif;
    }
    
    .container div h3 {
        font-size: 3vw;
        padding: 0 5vw 0 5vw;
        font-family: 'Averta', sans-serif;
    }
}