*{
    margin: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}
body{
    width: 100%;
}

.card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}

/* Cabecalho da pagina */
header nav{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 101px;

    background-color: #000000;
}

header nav .logo{
    height: 43px;
}

/* Corpo da pagina */

/* Banner principal da pagina */
main .banner-container .banner-desktop img{
    width: 100%;
}

main .banner-container .banner-mobile{
    display: none;
}

/* Titulo e descricao do site */
main section.container-description{
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 73px 0 178px;
}

main section.container-description .description-text h2.description-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    text-align: center;
    font-weight: 400;
    font-size: 32px;
    text-transform: uppercase;
}

main section.container-description .description-text h2.description-title span.description-subtitle{
    font-size: 48px;
    font-weight: 500;
}

main section.container-description .description-text p.description{
    width: 100%;
    max-width: 766px;
    line-height: 24px;
    font-weight: 400;
    padding: 28px 0 73px;
}

/* Primeiro container com cards */
main section.container-cards{
    display: flex;
    flex-wrap: wrap;
    gap: 21px;
    justify-content: center;
    align-items: center;

    padding: 0 15px 80px 15px;
}

main section.container-cards .card{
    width: 350px;
    height: 287px;
}

main section.container-cards .card img.card-image{
    padding-top: 35px;
}

main section.container-cards .card figcaption.card-description{
    line-height: 24px;
    padding: 30px 25px 27px 26px;
}

/* Container com tres imagens */
main .container-three-images{
    background-color: #E0E0E0;
    margin-bottom: 192px;
}

main .container-three-images .three-images-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 39px;

    position: relative;
    top: 62px;

    padding: 0 62px;
}

main .container-three-images .three-images-wrapper img{
    width: 566px;
}

/* Segundo container com cards */
main section.container-cards.second .card{
    width: 432px;
    height: 332px
}

main section.container-cards.second .card figcaption.card-description{
    line-height: 24px;
    padding: 30px 32px 65px 33px;
}

/* Artigo da pagina */
main article.container-article{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 108px 10px 116px;
}

main article.container-article .article-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 24px;

    padding-bottom: 50px;
}

main article.container-article .article-text h3.article-title{
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
}

main article.container-article .article-text p.article-description{
    width: 100%;
    max-width: 550px;
}

main article.container-article figure.article-image{
    display: flex;
    justify-content: center;
}

main article.container-article figure.article-image img{
    width: 100%;
}

/* Footer da pagina  */
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;

    background-color: #000000;
    padding: 28px 0;
}

footer .social-links{
    display: flex;
    gap: 21px;
}

footer span.footer-description{
    font-size: 10px;
    text-transform: uppercase;
    color: #BDBDBD;
    line-height: 12px;
}