@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
:root{
    --azul-escuro:#002D80;
    --azul-claro:#2F67F8;
    --azul-claro-2:#0053FF;
    --azul-escuro-2:#0740B2;
    --cinza-escuro:#15222B;
    --cinza:#2D3035;
    --cinza-claro: #989898;
    --vermelho:#DC0A0A;
    --branco: #FFF;
    --branco-2: #F2F2F2;
    --violeta: #6E67D8;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Nunito", "sans serif";
    font-display: swap;
}
  html {
     scroll-behavior: smooth;
   }

.container{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.container a{
    text-decoration: none;
    color: var(--branco);
}

.container a:visited{
    text-decoration: none;
    color: var(--branco);
}

.container .header{
    display: grid;
    grid-template-columns: 2fr 3fr;
    width: 100%;
    background-color: var(--azul-escuro);
    color: var(--branco);
    height: 150px;
    justify-content:space-between;
    align-items: center;  
}

.header-adress {
    position: absolute;
    right: 0;
    top:0;
    width: 80%;
    height: 0;
    border-top: 30px solid var(--violeta);
    border-left: 30px solid transparent;
}

.header-adress p{
    color: var(--branco);
    margin-top: -24px;
    text-align: right;
    margin-right: 40px;
}

.container .logo{
     margin-left: 20px;
}

.container .header .nav{
    text-align: end;  
    margin-right: 140px;
}

.container .header .nav a:hover{
    text-decoration: none;
    color: var(--azul-claro-2);
}

.container .header .nav a:visited, .nav a:active{
    text-decoration: none;
}

.container .nav  ul li{
    align-items: end;
    margin-right: 20px;
    display: inline-block;
    list-style-type: none;
    font-size: 1.2em;
    font-family: "Nunito", sans-serif;
}

.apresentacao{
    display: grid;
    grid-template-columns: 3fr 2fr;
    background-color: var(--branco);
    color: var(--azul-claro-2);
    font-family: "Nunito", "sans-serif";
    font-size: 1.4em;
}

.apresentacao a{
    text-decoration: none;
    color: var(--branco);
} 

.apresentacao img{
    max-width: 400px;
}

.apresentacao :nth-child(1){
    text-align: center;
    padding: 40px;
}

.apresentacao :nth-child(2){
    text-align: center;
    padding: 20px;
}

.apresentacao-cardbox{
    width: 450px;
    height: 500px;
    background-image: url("../img/img_carolorgcontabil-apresentacao.avif");
    background-repeat: no-repeat, repeat;
    background-size: cover;
    background-position: start;
    border: 12px solid var(--branco-2);
    border-radius: 150px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.apresentacao span{
    background-color: var(--azul-escuro);;
    border: 4px solid var(--branco);
    border-radius: 8px;
    color: var(--branco);
    padding: 4px 20px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.apresentacao span:hover{
    background-color: var(--azul-claro-2);
}

.diretrizes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: var(--azul-claro-2);
}
.diretrizes h3{
    color: var(--branco);
    margin-top: 40px;
    font-size: 2em;
}
.diretrizes-card-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 20px;
    justify-content: space-around;
     margin-bottom: 40px;
     
}

.diretrizes-card{
    width: 200px;
    background-color: var(--branco-2);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    border: 4px solid var(--branco);
    border-radius: 10px;
    text-align: center;
    padding: 10px;
}
.diretrizes-card i{
    color: var(--azul-claro-2);
    font-size: 2em;
}
.sobre-container{
    display: flex;
    width: 100%;
    background-color: var(--azul-claro-2);
    padding:  50px;
}

.sobre{
    display: grid;
    grid-template-columns: 2fr 3fr;
    width: 100%;
    background-color: var(--azul-claro);
    color: var(--branco);
    padding: 40px;
}

.sobre-card{
    width: 450px;
    height: 500px;
    margin-left: 100px;
    background-image: url("../img/img_carolorgcontabil-sobre-new.avif");
    background-repeat: no-repeat, repeat;
    background-size: cover;
    background-position: start;
    border: 12px solid var(--branco-2);
    border-radius: 150px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.sobre-descricao{
    text-align: center;
    font-size: 1.2em;
}

.sobre-descricao h3{
    font-size: 4em;
}

.sobre-descricao p{
    padding: 40px; 
}

.sobre-descricao span{
    background-color: var(--azul-escuro);;
    border: 4px solid var(--branco);
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.sobre-descricao span:hover{
    background-color: var(--azul-claro-2);
}

.parceiros-titulo{
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 2em;
    background-color: var(--azul-claro-2);
    color: var(--branco);
}

.parceiros{
    display:flex;  
    align-items:center;  
    justify-content:center; 
    overflow: hidden;
    background-color: var(--azul-claro-2);
}


.avaliacao-google{
    display: flex;
    width: 100%;
    margin: 40px;
    justify-content: center;
    align-items: center;
}

.servicos-titulo{
    display: flex;
    width: 100%;
    Color: var(--branco);
    
    align-items: center;
    justify-content: center;
    background-color: var(--azul-claro-2);
    & h3{
        font-size: 2em;
        margin-top: 40px;
    }
}

.servicos{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--azul-claro-2);
    padding: 40px;
}

.servicos .servicos-card{
    display: block;
    text-align: center;
    border: 4px solid var(--branco);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 40px 40px;
    width: 200px;
    height: 200px;
    padding:  40px 20px;
    color:var(--branco);
    font-size: 1.2em;
    background-color: var(--azul-escuro-2); 
    & i{
        font-size: 2em;
    }
    &:hover{
        background-color: var(--azul-claro-2);
    }
}

.missao-container{
    display: flex;
    justify-content: space-around;
    width: 100%;
    background-color: var(--azul-escuro-2); 
    color: var(--branco);
}

.card-missao{
    margin: 60px 0;
    width: 300px;
    height: 300px;
    padding: 10px;
    text-align: center;
    color: #002D80;
    background: linear-gradient(rgb(209, 205, 205), white) padding-box, linear-gradient(to right, #6f0adb, #1c0331) border-box;
    border-radius: 50em;
    border: 4px solid transparent;
    border-radius: 40px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.card-missao h4{
    font-size: 1.5em;
    margin: 10px;
    color: #000;
}

.card-missao i{
    font-size: 2em;
    margin: 10px;
    color: var(--vermelho)
}

.footer{
    display: flex;
    justify-content: space-around;
    background-color: var(--cinza-escuro);
    width: 100%;
    color: var(--branco);
    padding: 40px;
}

.footer ul li{
    list-style-type: none;
    font-family: "Nunito", sans-serif;
}

.footer p, li{
    margin: 14px 0;
}

.footer .footer-logo {
    text-align: center;
}

.footer-rede-social{
    font-size: 1.5em;
    margin-top: 20px;
}

.footer-rede-social i{
    padding: 10px;
}

.footer-endereco li{
    padding: 10px;
}

.whatsapp{
    width: 60px;
    height: 60px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 200;
}

.whatsapp:hover{
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.copyright{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background-color: var(--cinza);
    color:var(--cinza-claro);
    height: 40px;
    font-size: .8em;
}

.copyright a{
    color: var(--cinza-claro);
}

/*#region MEDIA QUERY*/
@media (max-width: 320px){
  .header-adress {
        display: none;
    }
    
    .container .header{
        grid-template-columns: 1fr;
        height: 200px;
    }

    .container .logo{
     margin: 10px 0;
     text-align: center;
    }

    .container .header .nav{
        text-align: center; 
    }
    
    .container .nav{width: 100%;}

    .container .nav  ul li{
        font-size: .7em;
    }

    .apresentacao{
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        font-size: 1em;
    }

    .apresentacao h3{
        display: none;
    }

    .apresentacao-cardbox{
        width: 250px;
        height: 300px;
    }

    .apresentacao :nth-child(1){
        padding-top: 0;
    }

    .apresentacao :nth-child(2){
        padding-bottom: 30px;
    }

   .diretrizes-card-container{
        flex-direction: column;
        align-items: center;
    }

    .diretrizes-card{
        margin: 10px;
    }

    .diretrizes h3{
        font-size: 1.4em;
    }

    .sobre-container{
        padding: 20px;
    }

    .sobre{
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .sobre-card{
        width: 250px;
        height: 350px;
        margin: 0 auto;
        text-align: center;
    }

    .sobre-descricao{
        font-size: .8em;
        margin-bottom: 20px;
    }

    .sobre-descricao h3{
        font-size: 2em;
        margin-top: 20px;
    }

    .sobre-descricao p{
        padding: 4px; 
        font-size: 1em;
        margin-bottom: 20px;
    }

    .missao-container{
        flex-direction: column;
        align-items: center;
    }

    .card-missao{
        margin: 10px;
    }

    .footer{
        flex-direction: column;
    }

    .footer-servicos, .footer-endereco{
        text-align: center;
        margin: 20px 0;
    }

    .whatsapp{
        display:none
    }
}

@media (min-width: 320px) and (max-width: 375px){
    .header-adress {
        display: none;
    }
    
    .container .header{
        grid-template-columns: 1fr;
        height: 200px;
    }

    .container .logo{
     margin: 10px 0;
     text-align: center;
    }

    .container .header .nav{
        text-align: center; 
    }
    
    .container .nav{width: 100%;}

    .container .nav  ul li{
        font-size: .7em;
    }

    .apresentacao{
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        font-size: 1em;
    }

    .apresentacao h3{
        display: none;
    }

    .apresentacao-cardbox{
        width: 250px;
        height: 300px;
    }

    .apresentacao :nth-child(1){
        padding-top: 0;
    }

    .apresentacao :nth-child(2){
        padding-bottom: 30px;
    }

   .diretrizes-card-container{
        flex-direction: column;
        align-items: center;
    }

    .diretrizes-card{
        margin: 10px;
    }

    .diretrizes h3{
        font-size: 1.4em;
    }

    .sobre-container{
        padding: 20px;
    }


    .sobre{
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .sobre-card{
        width: 250px;
        height: 350px;
        margin: 0 auto;
        text-align: center;
    }

    .sobre-descricao{
        font-size: .8em;
        margin-bottom: 20px;
    }

    .sobre-descricao h3{
        font-size: 2em;
        margin-top: 20px;
    }

    .sobre-descricao p{
        padding: 4px; 
        font-size: 1em;
        margin-bottom: 20px;
    }

    .missao-container{
        flex-direction: column;
        align-items: center;
    }

    .card-missao{
        margin: 10px;
    }

    .footer{
        flex-direction: column;
    }

    .footer-servicos, .footer-endereco{
        text-align: center;
        margin: 20px 0;
    }

    .whatsapp{
        display:none
    }
}

@media (min-width: 375px) and (max-width: 425px){
  .header-adress {
        display: none;
    }
    
    .container .header{
        grid-template-columns: 1fr;
        height: 200px;
    }

    .container .logo{
     margin: 10px 0;
     text-align: center;
    }

    .container .header .nav{
        text-align: center; 
    }
    
    .container .nav{width: 100%;}

    .container .nav  ul li{
        font-size: .7em;
    }

    .apresentacao{
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        font-size: 1em;
    }

    .apresentacao h3{
        display: none;
    }

    .apresentacao-cardbox{
        width: 250px;
        height: 300px;
    }

    .apresentacao :nth-child(1){
        padding-top: 0;
    }

    .apresentacao :nth-child(2){
        padding-bottom: 30px;
    }

   .diretrizes-card-container{
        flex-direction: column;
        align-items: center;
    }

    .diretrizes-card{
        margin: 10px;
    }

    .diretrizes h3{
        font-size: 1.4em;
    }

    .sobre-container{
        padding: 20px;
    }


    .sobre{
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .sobre-card{
        width: 250px;
        height: 350px;
        margin: 0 auto;
        text-align: center;
    }

    .sobre-descricao{
        font-size: .8em;
        margin-bottom: 20px;
    }

    .sobre-descricao h3{
        font-size: 2em;
        margin-top: 20px;
    }

    .sobre-descricao p{
        padding: 4px; 
        font-size: 1em;
        margin-bottom: 20px;
    }

    .missao-container{
        flex-direction: column;
        align-items: center;
    }

    .card-missao{
        margin: 10px;
    }

    .footer{
        flex-direction: column;
    }

    .footer-servicos, .footer-endereco{
        text-align: center;
        margin: 20px 0;
    }
}

@media (min-width: 425px) and (max-width: 768px){
    .header-adress {
        display: none;
    }
    
    .container .header{
        grid-template-columns: 1fr;
        height: 200px;
    }

    .container .logo{
     margin: 10px 0;
     text-align: center;
    }

    .container .header .nav{
    text-align: center;  
    }
    
    .container .nav{width: 100%;}

    .container .nav  ul li{
        font-size: 1em;
    }

    .apresentacao{
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        font-size: 1em;
    }

    .apresentacao h3{
        display: none;
    }

    .apresentacao-cardbox{
        width: 350px;
        height: 400px;
    }

    .apresentacao :nth-child(1){
        padding-top: 0;
    }

    .apresentacao :nth-child(2){
        padding-bottom: 30px;
    }

   .diretrizes-card-container{
        flex-direction: column;
        align-items: center;
    }

    .diretrizes-card{
        margin: 10px;
    }

    .sobre{
        grid-template-columns: 1fr;
    }

    .sobre-card{
        width: 200px;
        height: 250px;
        margin: auto;
        text-align: center;
    }

    .sobre-descricao{
        font-size: 1em;
    }

    .sobre-descricao h3{
        font-size: 2em;
        margin-top: 20px;
    }

    .sobre-descricao p{
        padding: 4px; 
        margin-bottom: 20px;
    }

    .missao-container{
        flex-direction: column;
        align-items: center;
    }

    .card-missao{
        margin: 10px;
    }

    .footer{
        flex-direction: column;
    }

    .footer-servicos, .footer-endereco{
        text-align: center;
        margin: 20px 0;
    }
}

@media (min-width: 768px) and (max-width: 1024px){
    .sobre-card{
        width: 350px;
        height: 400px;
        margin: auto;
        text-align: center;
    }
    .sobre-descricao{
        font-size: 1em;
    }
    .footer{
        font-size: .8em;
}
  
}
/*#endregion*/