*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Roboto", sans-serif;
}

body, html{
    overflow-x: hidden; /* todo conteÚdo que ultrapassar na horizontal no serÃĄ visível */
}

.container{
    max-width: 1024px;
    width: 95%;
    margin: 0 auto;
}

h1{
    font-size: 1.8em;
    font-weight: bold;
}

h2{
    font-size: 1.4em;
}

nav li {
    list-style: none;
    display: inline;
    margin-left: 16px;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-voltar-topo {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Inicialmente oculto */
    cursor: pointer;
    height: 40px;
    mix-blend-mode: multiply;
  }

/*############### CABEÇALHO #######################*/

header{
    position: sticky;
    background-color: rgb(252,217,61);
    padding: 16px 0;
    color:  #040815;
    z-index: 1; /*Porque o carousel tambÃĐm ÃĐ position: relative - entÃĢo temos que criar um index para que o cabeçalho tenha preferÊncia*/
}

header > .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav li:hover {
    border-top: 3px solid #040815;
    border-bottom: 3px solid #040815;
    padding: 10px 0;
}

header nav li a{
    color: #040815;
    text-decoration: none;
}

.logo{
    display: flex;
    align-items: center;
    position: relative;
    animation-name: surgirLogo;
    animation-duration: 3s;
}

.menuSuperior{
    position: relative;
    animation-name: surgirMenuSuperior;
    animation-duration: 3s;
}

header img{
    height: 70px;
    mix-blend-mode: multiply;
}

.error {
    color: #f00;
    margin-top: 8px;
  }

/*############### MENU HAMBURGUER #######################*/

.menu-hamburguer{
    width: 32px;
    cursor: pointer;
    padding-right: 8px;
}

.menu-hamburguer span{
    height: 2px;
    width: 100%;
    background-color: #040815;
    display: none;
    margin-bottom: 4px;
}

.menu_media{
    display: none;
    font-size: 0.8em;
    background-color: rgb(252,217,61);
    padding: 16px 0;
}

.menu_celular{
    animation-name: surgirMenuCelular;
    animation-duration: 3s;
    position: relative;
}

.menu_media ul li:hover{
    border-top: 3px solid #040815;
    border-bottom: 3px solid #040815;
    padding: 10px 0;;
}

.menu_media ul li{
    display: none;
}

.menu_media ul li a{
    color: #040815;
    text-decoration: none;
}

/*############ SEÇÕES ##############*/

.container .topo{
    width: 100%;
    border-bottom: 3px solid #040815;
    margin-bottom: 10px;
    background-color: rgb(252,217,61);
    border-radius: 10px;
}

section h2,
section h3{
    font-weight: 650;
    color:#040815;
}

section h2{
    margin-left: 15px;
    padding-top: 10px;
}

section .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section{
    padding: 24px 0;
    color: #182C61;
}

section .container{
    align-items: flex-start;
}

section h2,
section h3{
    margin-bottom: 12px;
}

section p{
    margin-bottom: 8px;
    
    text-align: justify;
}

/*############ SEÇÃO SOBRE ##############*/
/*######################################*/

.imagem-sobre{
    width: 50%;
    margin-left: 10px;
    border-radius: 12px;
}

#sobre .container{
    align-items: center;
}

.btn-cta {
    background-color: #4CAF50; /* Verde padrão do Material Design */
    color: white;
    padding: 8px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 10px;
  }

/*############ SEÇÃO SERVICOS ##############*/
/*######################################*/

img.imagem-servicos{
    width: 50%;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 12px;
}
#servicos .container{
    align-items: center;
}

/*############ SEÇÃO STORAGE ##############*/
/*######################################*/

#storage .container .self-storage img{
    width: 80%;
}

#storage .container{
    align-items: center;
}

#storage .container img{
    border-radius: 12px;
    padding-bottom: 16px;
    width: 100%;
}

.grade{
    padding-top: 16px;
    display: grid;
    grid-template-columns: 65% 35%;
    column-gap: 16px;
}

.self-storage{
    text-align: center;
    /* style="margin-right: 12px; text-align: center;" */
    /* style="text-align: right;" */
}

/*############ SEÇÃO CONTATO ##############*/
/*######################################*/

.social-links img{
    height: 35px;
    margin-bottom: 40px;
    padding-right: 20px;
}

.horario div{
    margin-bottom: 40px;
}

.social-links li{
    display: inline;
    margin-right: 8px;
}

.social-links li a{
    text-decoration: none;
}

#contato .container{
    display: block;
}

.metodos-contato{
    display: flex;
    justify-content: space-between;
}

/*############ FORMULÁRIO ##############*/
/*######################################*/

input, textarea{
    font-family: "Roboto", sans-serif;
}

form input,
form textarea,
form button{
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 8px;
}

form button{
    font-weight: normal;
}

input:focus, textarea:focus{
    outline-color: rgb(252,217,61);
}

form textarea{
    resize: none;
    height: 200px;
}

form button{
    background-color: rgb(252,217,61);
    color: #182C61;
    border: none;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 10px;
}

form button:hover{
    background-color: rgb(232, 190, 7);

}

/*############ RODAPÉ ##############*/
/*#########################################*/

footer{
    background-color: rgb(252,217,61);
    color: #182C61;
    padding: 16px 0;
    font-size: 1em;
}

footer .container{
    display: flex;
    justify-content: center;
}

footer p{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer img{
    height: 70px;
}

/*############### TELA CELULAR #######################*/

@media screen and (max-width: 767px){
    .container{
        width: 90%;
    }

    header .container{
        padding-bottom: 6px;
    }

    .imagem-sobre{
        width: 100%;
        margin-left: 0;
    }

    .menu_media{
        display: block;
    }
    
    .menu_media ul li{
        display: block;
    }
    
    img.imagem-servicos{
        width: 100%;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 16px;
    }

    #storage .container img{
        width: 100%;
    }

    .corousel-imagens .slick-slide{
        margin: 0;
        padding: 0;
    }

    .corousel-imagens{
        width: 100%;
        overflow: hidden;
    }

    .menu-hamburguer span{
        display: block;
    }

    .menu_media ul li{
        display: inline;
    }

    header nav {
        display: none;
    }

    section .container{
        display: block;
        align-items: center;
    }

    .metodos-contato{
        display: block;
    }

    .metodos-contato h3{
        padding-top: 16px;
    }

    form{
        padding-bottom: 16px;
    }

    form textarea{
        height: 100px;
    }
    
    footer .container{
        display: block;
        align-content: center;
    }
    
    footer p{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    @keyframes surgirLogo {
        from{
            opacity: 0;
            bottom: 70px;
            mix-blend-mode: multiply;
        }
        to{
            opacity: 1;
            bottom: 0px;
            mix-blend-mode: multiply;
        }
    }

    @keyframes surgirMenuCelular {
        0%{
            opacity: 0;
            mix-blend-mode: multiply;
            left: 200px;
        }
        100%{
            opacity: 1;
            mix-blend-mode: multiply;
            left: 0px;
        }
    }
}

/*############### TELA ACIMA #######################*/

@media screen and (min-width: 768px) {
    .menu_media{
        display: none;
    }
    .menu_media ul li{
        display: none;
    }
/* 
    #storage .container img{
        height: 250px;
        border-radius: 12px;
    }     */

    .metodos-contato form{
        padding-right: 16px;
        padding-left: 16px;
    }

    form input,
    form textarea,
    form button{
        width: 320px;
    }
    
    @keyframes surgirLogo {
        0%{
            opacity: 0;
            mix-blend-mode: multiply;
            right: 200px;
        }
        100%{
            opacity: 1;
            mix-blend-mode: multiply;
            right: 0px;
        }
    }
    
    @keyframes surgirMenuSuperior {
        0%{
            opacity: 0;
            mix-blend-mode: multiply;
            left: 200px;
        }
        100%{
            opacity: 1;
            mix-blend-mode: multiply;
            left: 0px;
        }
    }
}