/* ======================================== */
/* LEMBRETE                                 */
/* ======================================== */

/* Celulares pequenos */
/* @media (max-width: 320px) */
/* estilos para telas até 320px */

/* Celulares maiores */
/* @media (max-width: 414px) */
/* estilos para telas até 414px */

/* Celulares maiores */
/* @media (max-width: 480px) */
/* estilos para telas até 480px */

/* Laptops e desktops (a partir de 769px) */
/* @media (min-width: 768px) */
/* estilos para telas maiores que 768px */

/* Laptops e desktops maiores (a partir de 1024px) */
/* @media (min-width: 1024px) */
/* estilos para telas maiores que 1024px */

/* Laptops e desktops grandes (a partir de 1440px) */
/* @media (min-width: 1440px) */
/* estilos para telas maiores que 1440px */


.displayN {
    display: none;
}


/* ---------------------------------------------------------- */
/* -------------------------- BODY -------------------------- */
/* ---------------------------------------------------------- */


#container {
    background-color: #eaeef1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 130px;
}


.divAtuacao {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background-color: #0f6983;
    padding: 40px 10px;
    margin-top: 50px;
}

    .divAtuacao p {
        color: #e4e6e7;
        font-size: 15px;
        margin-top: -5px;
        width: 80vw;
    }

    .divAtuacao h3 {
        font-weight: bold;
        color: #e4e6e7;
        font-size: 15px;
        width: 80vw;
    }

    .divAtuacao strong {
        color: #ff7724;
        font-size: 15px;
        font-weight: 600;
    }

    .divAtuacao span {
        font-size: 15px;
        background: #e4e6e7;
        padding: 5px 10px;
        border-radius: 50px;
    }

        .divAtuacao span i {
            color: #0f6983;
            margin-bottom: 10px;
        }


#tituloPrincipal {
    padding-left: 5vw;
    order: 1;
}

    #tituloPrincipal h1 {
        font-weight: bold;
        color: white;
        font-size: 30px;
        text-align: initial;
    }

#modalidadeTransporteA {
    order: 3;
}

#modalidadeTransporteB {
    order: 4;
}

#svg-map {
    order: 2;
    width: 100%;
    max-width: 550px;
    height: auto;
}

.estado {
    text-decoration: none;
}

    .estado text {
        font-family: sans-serif;
        font-size: 8px;
        font-weight: bold;
        fill: #0f6983;
        pointer-events: none;
        text-decoration: none;
    }

        .estado path {
            fill: #ffffff;
            stroke: #0f6983;
            stroke-width: 0.8;
            transition: fill 0.3s ease;
        }

        .estado:hover path {
            fill: #f0f0f0;
            cursor: pointer;
        }

[name="Minas Gerais"] path {
    fill: #f8f8f8;
    stroke-width: 1.2;
}


.ancora-matriz line {
    stroke: #ff7724;
    stroke-width: 2;
}

.ponto-pulsa {
    fill: #ff7724;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        r: 3;
        opacity: 1;
    }

    50% {
        r: 6;
        opacity: 0.4;
    }

    100% {
        r: 3;
        opacity: 1;
    }
}

.texto-matriz {
    font-family: sans-serif;
    pointer-events: none;
    text-decoration: none;
}

    .texto-matriz tspan {
        text-decoration: none;
    }



.textContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 10px;
}


h1 {
    font-family: sans-serif;
    color: #024150;
    font-weight: bold;
    text-align: center;
}

#textoPaginaPrincipal {
    color: #737373;
    text-align: center;
    width: 90vw;
}

    #textoPaginaPrincipal strong {
        color: #707070;
    }

.cardsGroup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #737373;
    padding: 10px;
}

.servicos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 50px 10px;
}

    .servicos img {
        width: 250px;
        border-radius: 20px;
        box-shadow: 0px 0px 50px #707070;
    }

    .servicos h2 {
        font-size: 30px;
        color: #024150;
        font-weight: bold;
    }

    .servicos h3 {
        font-size: 30px;
        color: #ff7724;
        font-weight: bold;
        text-align: center;
    }

    .servicos p {
        color: #737373;
        padding: 5px 0px;
        text-align: center;
        width: 80vw;
    }

#cargasFracionadas,
#cargasDedicadas,
#armazenagemEDistribuicao,
#coletaDeMercadorias {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0px;
}


/* ---------------------------------------------------------- */
/* -------------------------- MEDIA QUERIES -------------------------- */
/* ---------------------------------------------------------- */


@media (min-width: 768px) {


    #container {
        padding-top: 160px;
    }

    #modalidadeTransporteA {
        padding-top: 0;
    }

    #matrizContagem {
        margin-top: 0;
    }

    .servicos {
        flex-direction: row;
    }

    .reverso {
        flex-direction: row-reverse;
    }

    .servicos img {
        width: 280px;
    }

    .servicos h2 {
        text-align: justify;
    }

    .servicos h3 {
        text-align: start;
    }

    .servicos p {
        text-align: justify;
        width: 40vw;
    }

    #cargasFracionadas,
    #cargasDedicadas,
    #armazenagemEDistribuicao, 
    #coletaDeMercadorias {
        align-items: flex-start;
        padding: 50px;
    }
}

@media (min-width: 1024px) {
    #container {
        padding-top: 170px;
    }

    .divAtuacao {
        display: grid;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 20px;
        width: 100vw;
        margin-top: 0px;
    }

    #tituloPrincipal {
        grid-column: 1 / span 2;
        order: 1;
    }

    #svg-map {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: 550px;
        justify-self: center;
    }

    #modalidadeTransporteA {
        grid-column: 2;
        grid-row: 2;
        align-self: start; 
    }

    #modalidadeTransporteB {
        grid-column: 2;
        grid-row: 2;
        align-self: end; 
        margin-top: 20px;
    }

    .divAtuacao h3, .divAtuacao p {
        width: 100%; 
    }

    .servicos img {
        width: 350px;
        box-shadow: 0px 0px 80px #707070;
    }

    .servicos p {
        width: 50vw;
    }
}


@media (min-width: 1440px) {
    .divAtuacao {
        display: grid;
        grid-template-columns: 1fr 500px 1fr;
        grid-template-areas:
            "titulo titulo titulo"
            "modA mapa modB";
        column-gap: 40px;
        align-items: center;
        padding: 60px 10vw;
    }

    #tituloPrincipal {
        grid-area: titulo;
        justify-self: center;
    }

    #svg-map {
        grid-area: mapa;
        width: 100%;
        max-width: 500px;
    }

    #modalidadeTransporteA {
        grid-area: modA;
        justify-self: end;
        text-align: right;
    }

    #modalidadeTransporteB {
        grid-area: modB;
        justify-self: start;
        text-align: left;
        margin-top: 0;
    }

    .divAtuacao p, .divAtuacao h3 {
        width: 100%;
        max-width: 350px;
    }
}