/*
    Unidades de Medida
    px => pixel
    vh => view height / a Altura da tela divido por 100
    vw => view width / a Largura da tela divido por 100
    cm => centímetro
    top => cima
    bottom => baixo
    left => esquerda
    right => direita
    width => LARGURA
    height => ALTURA
    background-image => Troca a imagem de fundo
    font-size => Troca o tamanho do texto
    color => Troca a cor do texto
    font-family => Troca a fonte do texto
    display => Troca a forma que o elemento se comporta na tela ( Ex: Fica sozinho na linha ou na mesma linha de outros elementos)
    cursor => Muda o cursor do mouse
    position => Serve para definir como iremos posicionar os elementos na tela
    border-radius => Arredonda as bordas
    border => Muda a cor, o tamanho e o tipo de borda do elemento
    float => Direciona o elemento para um lado determinado
    padding => espaçamento interno
    margin => espaçamento externo
    text-align => Alinha o texto
    href => Local para onde queremos que o link nos envie
    opacity => Transparencia do elemento
    */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Montserrat', sans-serif;
    }
    
    
    .caixa-superior {
        background-image: url("./dev.png");
        background-size: cover;
        height: 90vh;
    }
    
    .cabecalho {
        padding-top: 25px;
        padding-left: 35px;
    }
    
    .titulo-cabecalho {
        font-size: 24px;
        color: white;
        display: inline;
    }
    
    .link-cabecalho {
        font-size: 14px;
        color: #FFFFFF;
        display: inline;
        margin-left: 20px;
        cursor: pointer;
        text-decoration: none;
    }
    
    h1 {
        font-size: 58px;
        color: #FFFFFF;
        position: relative;
        top: 280px;
        margin-left: 35px;
    }
    
    form {
        opacity: 0;
        transition: opacity 1s linear;
        background-color: #FFFFFF;
        border-radius: 10px;
        float: right;
        padding: 20px;
        margin-right: 50px;
        position: relative;
        bottom: 70px;
    }
    
    .mostrar-formulario{
        opacity: 1;
    }
    
    input {
        display: block;
        background: #F9F9F9;
        border: 1px solid #E6E6E6;
        border-radius: 5px;
        height: 30px;
        width: 240px;
        margin-bottom: 20px;
        padding-left: 10px;
    }
    
    textarea {
        display: block;
        height: 80px;
        width: 250px;
        background: #F9F9F9;
        border: 1px solid #E6E6E6;
        border-radius: 5px;
        margin-bottom: 20px;
        padding-left: 10px;
    }
    
    .titulo-formulario {
        font-size: 24px;
        color: #252B42;
        margin-bottom: 30px;
        text-align: center;
    }
    
    label {
        font-size: 14px;
        color: #252B42;
    }
    
    button {
        width: 250px;
        height: 40px;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        background: #40BB15;
        color: #FFFFFF;
    }
    
    .caixa-central {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 50px;
    }
    
    #titulo-meio {
        font-size: 40px;
        color: #252B42;
        margin-top: 50px;
        margin-bottom: 50px;
        text-align: center;
    }
    
    .card {
        width: 300px;
        border-radius: 10px;
        background-color: #FFFFFF;
        border: 1px solid #A9D6FF;
    }
    
    .titulo-card {
        background: #219653;
        color: #FFFFFF;
        text-align: center;
        padding: 20px;
        border-radius: 10px 10px 0 0;
    }
    
    ul {
        padding: 20px;
    }
    
    li {
        margin-bottom: 5px;
        margin-left: 10px;
    }
    
    .caixa-inferior {
        background-color:black;
    }
    
    #titulo-inferior {
        color: #FFFFFF;
        font-size: 40px;
        text-align: center;
        padding-top: 50px;
    }
    
    .paragrafo-inferior {
        font-size: 18px;
        color: #FFFFFF;
        text-align: center;
        padding: 20px 50px 50px 50px;
    }