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

:root {
    --corMarrom: #BD9155;
    --corAzul: #08192b;
    --fontetitulo: "Libre Baskerville", serif;
    --fonteTexto: "Inter", serif;
    --corCinza: #333333;
    --corDescr: #9a9292;
}

main .areasAtuacao .conteiner .caixa span {
    cursor: pointer;
}

@media (max-width: 400px) {
    header .caixa .contHeader {
        position: relative;
        top: 10px;
        left: -1500px;
        width: 100%;
        display: flex;
        flex-direction: column;
        z-index: 1;
        padding-bottom: 20px;
        transition: left 0.5s;
        background-color: var(--corAzul);
        height: 270px;
    }

    header ul {
        position: absolute;
        left: 0;
    }

    main .valores .informa p {
        font-size: 14px;
    }

    main .valores .informa {
        width: 90% !important;
    }

    header .icones {
        left: 200px;
    }
}

@media (max-width: 600px) {
    #selecionado {
        height: 250px !important;
    }

    main .areasAtuacao .conteiner .caixa p {
        position: absolute;
        top: 58%;
        transform: translateY(-50%);
        left: 10px;
        font-size: 15px;
        font-family: var(--fonteTexto);
        color: #fff;
        padding: 0 5px;
        transition: opacity 0.5s;
        opacity: 0;
        display: none;
        pointer-events: none;
        text-align: justify;
    }

    #On {
        opacity: 1;
        pointer-events: all;
    }

    main #foto {
        bottom: 0 !important;
    }

    main .areasAtuacao {
        position: relative;
        top: 0;
        left: 0;
    }

    main .areasAtuacao .conteiner {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 100%;
        gap: 30px;
    }

    main .areasAtuacao .fotoAreas img {
        height: 830px;
        width: 100%;
        object-fit: cover;
    }

    main .areasAtuacao .conteiner .caixa {
        position: relative;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        background: linear-gradient(to top, #0B3354, #02172D);
        display: flex;
        flex-direction: column;
        padding: 30px 0;
        border: 2px solid #0E4A78;
        border-radius: 10px;
        width: 320px;
        height: 200px;
    }

    main .areasAtuacao .conteiner .caixa i {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        font-size: 35px;
        color: #fff;
        display: flex;
        margin: 15px auto;
    }

    main .areasAtuacao .conteiner .caixa h2 {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 20px;
        color: #fff;
        width: 95%;
        text-align: center;
    }

    main .areasAtuacao .conteiner .caixa span {
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fonteTexto);
        font-size: 18px;
        color: var(--corMarrom);
        text-align: center;
        margin: 13px 0;
    }

    main .areasAtuacao .conteiner .caixa img {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        width: 45px;
        height: 45px;
    }

    main .areasAtuacao #titulo {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 30px;
        color: var(--corMarrom);
        width: 80%;
        text-align: center;
    }
}

@media (max-width: 620px) {
    main .areasAtuacao .conteiner {
        top: 750px !important;
        grid-template-columns: repeat(1,1fr) !important;
        gap: unset;
    }

    main .areasAtuacao .fotoAreas img {
        height: 1400px !important;
    }
}

@media (max-width: 740px) {
    main .areasAtuacao .conteiner .caixa {
        width: 270px !important;
        height: 180px !important;
    }

    main .areasAtuacao .conteiner .caixa h2 {
        font-size: 17px !important;
    }

    main .areasAtuacao .conteiner {
        gap: 20px;
    }

    main .areasAtuacao .conteiner .caixa span {
        top: 120px !important;
    }
}

@media (min-width: 600px) and (max-width: 800px) {
    #selecionado {
        height: 250px !important;
    }

    main .areasAtuacao .conteiner .caixa p {
        position: absolute;
        top: 58%;
        transform: translateY(-50%);
        left: 10px;
        font-size: 15px;
        font-family: var(--fonteTexto);
        color: #fff;
        padding: 0 5px;
        transition: opacity 0.5s;
        opacity: 0;
        display: none;
        pointer-events: none;
        text-align: justify;
    }

    #On {
        opacity: 1;
        pointer-events: all;
    }

    main #foto {
        bottom: 0 !important;
    }

    main .areasAtuacao {
        position: relative;
        top: 0;
        left: 0;
    }

    main .areasAtuacao .conteiner {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 100%;
        gap: 30px;
    }

    main .areasAtuacao .fotoAreas img {
        height: 830px;
        width: 100%;
        object-fit: cover;
    }

    main .areasAtuacao .conteiner .caixa {
        position: relative;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        background: linear-gradient(to top, #0B3354, #02172D);
        display: flex;
        flex-direction: column;
        padding: 30px 0;
        border: 2px solid #0E4A78;
        border-radius: 10px;
        width: 320px;
        height: 200px;
    }

    main .areasAtuacao .conteiner .caixa i {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        font-size: 35px;
        color: #fff;
        display: flex;
        margin: 15px auto;
    }

    main .areasAtuacao .conteiner .caixa h2 {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 20px;
        color: #fff;
        width: 95%;
        text-align: center;
    }

    main .areasAtuacao .conteiner .caixa span {
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fonteTexto);
        font-size: 18px;
        color: var(--corMarrom);
        text-align: center;
        margin: 13px 0;
    }

    main .areasAtuacao .conteiner .caixa img {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        width: 45px;
        height: 45px;
    }

    main .areasAtuacao #titulo {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 30px;
        color: var(--corMarrom);
    }
}

@media (min-width: 800px) and (max-width: 999px) {
    #selecionado {
        height: 250px !important;
    }

    main .areasAtuacao .conteiner .caixa p {
        position: absolute;
        top: 58%;
        transform: translateY(-50%);
        left: 10px;
        font-size: 15px;
        font-family: var(--fonteTexto);
        color: #fff;
        padding: 0 5px;
        transition: opacity 0.5s;
        opacity: 0;
        display: none;
        pointer-events: none;
        text-align: justify;
    }

    #On {
        opacity: 1;
        pointer-events: all;
    }

    main #foto {
        bottom: 0 !important;
    }

    main .areasAtuacao {
        position: relative;
        top: 0;
        left: 0;
    }

    main .areasAtuacao .conteiner {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 100%;
        gap: 30px;
    }

    main .areasAtuacao .fotoAreas img {
        height: 830px;
        width: 100%;
        object-fit: cover;
    }

    main .areasAtuacao .conteiner .caixa {
        position: relative;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        background: linear-gradient(to top, #0B3354, #02172D);
        display: flex;
        flex-direction: column;
        padding: 30px 0;
        border: 2px solid #0E4A78;
        border-radius: 10px;
        width: 320px;
        height: 200px;
    }

    main .areasAtuacao .conteiner .caixa i {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        font-size: 35px;
        color: #fff;
        display: flex;
        margin: 15px auto;
    }

    main .areasAtuacao .conteiner .caixa h2 {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 20px;
        color: #fff;
        width: 95%;
        text-align: center;
    }

    main .areasAtuacao .conteiner .caixa span {
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fonteTexto);
        font-size: 18px;
        color: var(--corMarrom);
        text-align: center;
        margin: 13px 0;
    }

    main .areasAtuacao .conteiner .caixa img {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        width: 45px;
        height: 45px;
    }

    main .areasAtuacao #titulo {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 30px;
        color: var(--corMarrom);
    }
}

@media (min-width: 999px) and (max-width: 1200px) {
    #selecionado {
        height: 250px !important;
    }

    main .areasAtuacao .conteiner .caixa p {
        position: absolute;
        top: 58%;
        transform: translateY(-50%);
        left: 10px;
        font-size: 15px;
        font-family: var(--fonteTexto);
        color: #fff;
        padding: 0 5px;
        transition: opacity 0.5s;
        opacity: 0;
        display: none;
        pointer-events: none;
        text-align: justify;
    }

    #On {
        opacity: 1;
        pointer-events: all;
    }

    main #foto {
        width: 300px !important;
        bottom: 0 !important;
    }

    main .areasAtuacao {
        position: relative;
        top: 0;
        left: 0;
    }

    main .areasAtuacao .conteiner {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 100%;
        gap: 30px;
    }

    main .areasAtuacao .fotoAreas img {
        height: 830px;
        width: 100%;
        object-fit: cover;
    }

    main .areasAtuacao .conteiner .caixa {
        position: relative;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        background: linear-gradient(to top, #0B3354, #02172D);
        display: flex;
        flex-direction: column;
        padding: 30px 0;
        border: 2px solid #0E4A78;
        border-radius: 10px;
        width: 350px;
        height: 200px;
    }

    main .areasAtuacao .conteiner .caixa i {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        font-size: 35px;
        color: #fff;
        display: flex;
        margin: 15px auto;
    }

    main .areasAtuacao .conteiner .caixa h2 {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 20px;
        color: #fff;
        width: 95%;
        text-align: center;
    }

    main .areasAtuacao .conteiner .caixa span {
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fonteTexto);
        font-size: 18px;
        color: var(--corMarrom);
        text-align: center;
        margin: 13px 0;
    }

    main .areasAtuacao .conteiner .caixa img {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        width: 45px;
        height: 45px;
    }

    main .areasAtuacao #titulo {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 30px;
        color: var(--corMarrom);
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    #selecionado {
        height: 250px !important;
    }

    main .areasAtuacao .conteiner .caixa p {
        position: absolute;
        top: 58%;
        transform: translateY(-50%);
        left: 10px;
        font-size: 15px;
        font-family: var(--fonteTexto);
        color: #fff;
        padding: 0 5px;
        transition: opacity 0.5s;
        opacity: 0;
        display: none;
        pointer-events: none;
        text-align: justify;
    }

    #On {
        opacity: 1;
        pointer-events: all;
    }

    body main .foto {
        height: 750px;
    }

    main #foto {
        width: 360px !important;
        bottom: 0 !important;
    }

    main .areasAtuacao {
        position: relative;
        top: 0;
        left: 0;
    }

    main .areasAtuacao .conteiner {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 90%;
        gap: 30px;
    }

    main .areasAtuacao .fotoAreas img {
        height: 830px;
        width: 100%;
        object-fit: cover;
    }

    main .areasAtuacao .conteiner .caixa {
        position: relative;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        background: linear-gradient(to top, #0B3354, #02172D);
        display: flex;
        flex-direction: column;
        padding: 30px 0;
        border: 2px solid #0E4A78;
        border-radius: 10px;
        width: 350px;
        height: 200px;
    }

    main .areasAtuacao .conteiner .caixa i {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        font-size: 35px;
        color: #fff;
        display: flex;
        margin: 15px auto;
    }

    main .areasAtuacao .conteiner .caixa h2 {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 20px;
        color: #fff;
        width: 95%;
        text-align: center;
    }

    main .areasAtuacao .conteiner .caixa span {
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fonteTexto);
        font-size: 18px;
        color: var(--corMarrom);
        text-align: center;
        margin: 13px 0;
    }

    main .areasAtuacao .conteiner .caixa img {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        width: 45px;
        height: 45px;
    }

    main .areasAtuacao #titulo {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 35px;
        color: var(--corMarrom);
    }
}

@media (min-width: 1400px) {
    #selecionado {
        height: 250px !important;
    }

    main .areasAtuacao .conteiner .caixa p {
        position: absolute;
        top: 58%;
        transform: translateY(-50%);
        left: 10px;
        font-size: 15px;
        font-family: var(--fonteTexto);
        color: #fff;
        padding: 0 5px;
        transition: opacity 0.5s;
        opacity: 0;
        display: none;
        pointer-events: none;
        text-align: justify;
    }

    #On {
        opacity: 1;
        pointer-events: all;
    }

    main #foto {
        width: 400px !important;
        bottom: 0 !important;
    }

    main .areasAtuacao {
        position: relative;
        top: 0;
        left: 0;
    }

    main .areasAtuacao .conteiner {
        position: absolute;
        top: 54%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(3,1fr);
        width: 80%;
        gap: 30px;
    }

    main .areasAtuacao .fotoAreas img {
        width: 100%;
        height: 780px;
        object-fit: cover;
    }

    main .areasAtuacao .conteiner .caixa {
        position: relative;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        background: linear-gradient(to top, #0B3354, #02172D);
        display: flex;
        flex-direction: column;
        padding: 30px 0;
        border: 2px solid #0E4A78;
        border-radius: 10px;
        width: 350px;
        height: 200px;
        margin: 15px 0;
    }

    main .areasAtuacao .conteiner .caixa i {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        font-size: 35px;
        color: #fff;
        display: flex;
        margin: 15px auto;
    }

    main .areasAtuacao .conteiner .caixa h2 {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 20px;
        color: #fff;
        width: 95%;
        text-align: center;
    }

    main .areasAtuacao .conteiner .caixa span {
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fonteTexto);
        font-size: 18px;
        color: var(--corMarrom);
        text-align: center;
        margin: 13px 0;
    }

    main .areasAtuacao .conteiner .caixa img {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        width: 45px;
        height: 45px;
    }

    main .areasAtuacao #titulo {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%);
        font-family: var(--fontetitulo);
        font-size: 40px;
        color: var(--corMarrom);
    }
}

@media (min-width: 1550px) {
    main .areasAtuacao .conteiner {
        width: 80% !important;
        gap: 30px;
    }

    main .areasAtuacao .fotoAreas img {
        width: 100%;
        object-fit: cover;
    }

    main .areasAtuacao .conteiner .caixa {
        margin: 30px 0;
    }
}