*{
    padding: 0;
    margin: 0;
}

body{
    background-color: black;
    width: 100%;
    overflow-x: hidden;
}

.cabecario{
    background-color: rgb(231, 152, 33);
    color: black;

    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;

    width: auto;
    height: 300px;
    margin: auto;

    display: flex;
    flex-flow: column wrap;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: background-image 1s ease-in-out;

}

.cabecario h1{
    align-items: center;
    margin: auto;
    margin-bottom: 6px;

    color: beige;
    font-size: 3rem;
    text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.37);
}

.cabecario p{
    align-items: center;
    margin: auto;
    margin-top:0px;

    color: beige;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.377);
}

nav{
    display: flex;
    justify-content: center;
    align-items: center;
}

nav > ul{
    display: flex;
    list-style: none;
    gap: 20px 20px;
    margin-bottom: 50px;
}

nav  a{
    display: inline-block;

    text-decoration: none;
    color: aliceblue;
    font-size: 25px;

    background-color: rgb(209, 122, 9);
    padding: 10px;

    border-radius: 2px;
}

nav a:hover{
    transform: scale(1.08);
    cursor: pointer;

    background-color: black;
    color: beige;
}

main.corpo{
    background-color: black;
}

.destaques{
    display: flex;              /* ativa o flex */
    justify-content: center;    /* centraliza horizontal */
    align-items: center;        /* centraliza vertical (opcional) */
    gap: 40px;                  /* espaço entre as boxes */
    flex-wrap: wrap;

    margin: auto;

    background-color: black;
    width: 100vw;
    height: 650px;

}

div.itens1{

    width: 210px;
    height: 360px;

    margin: 20px;

    background-color: azure;
}

div.itens1:hover{
    transform: scale(1.31);
    cursor: pointer;

    transition: 0.9s;
}

.destaques > #foto1{
    background-image: url(./fotos/foto-drone1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    width: 100%;
    max-width: 250px;
    height: 350px;
}

.destaques > #foto2{
    background-image: url(./fotos/foto-drone2.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    width: 100%;
    max-width: 250px;
    height: 350px;
}

.destaques > #foto3{
    background-image: url(./fotos/foto-drone3.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    width: 100%;
    max-width: 250px;
    height: 350px;
}

.destaques .botao{
    padding: 10px;
    width: 100px;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 13px;
}

.botao:hover{
    transform: scale(1.08);
    cursor: pointer;

    color: azure;
    background-color: black;

    border: none;
}

.caixa{
    display: flex;
    justify-content: center;
    

    background-color: rgb(206, 149, 76);
    color: aliceblue;

    text-align: center;
    font-family: Arial, Helvetica, sans-serif;

    padding: 10px;
}

.sobre h1{
    background-color: black;
    width: 250px;
    border-radius: 10px;

    margin: auto;
    font-size: 2.7rem;
    font-weight: bold;

    padding: 10px;
}

.sobre p{
    font-size: 1.5rem;

    max-width: 700px;
    width: 90%;
    margin: auto;
}

.cadastro {

    display: block;
    margin: 30px auto;

    width: 100px;
    height: 55px;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;

    
}

.cadastro:hover{
    transition: 0.3s;
    transform: scale(1.08);
    cursor: pointer;

    color: aliceblue;
    background-color: black;

    border: solid 1px rgb(231, 231, 231);

    font-size: 19px;
}

#resultado{
    color: rgb(218, 174, 30);

    text-align: center;
    font-size: 40px;
    font-weight: bolder;

    margin: 40px;

}