
/* NavBar*/

head, .navbar
{
    height: 90px;
    background-color: #0F4188;

}

#nav-container
{
    padding-top: 0;
    padding-bottom: 0;

    
}

#logo
{
    width: 150px;
    color:#ffffff;

    margin-left: 30%;
}
.bgcolor .scrolled
{
background-color: #0F4188;
}

.navbar-brand
{
    padding: 0;
    color: #ffffff;
    
}

.navbar-toggler
{
    border-radius: 80px;
    height: 100px;
    width: 100px;
    background-color: #ffffff;
    border: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #0F4188; 
    margin-right: 30px;
}

.navbar-brand:hover
{
    color: #ffffff;

    
}

.navbar-links a
{
    font-size: 16px;
    color: #ffffff;
}

.navbar-expand-lg .navbar-nav .nav-link
{
    margin: 2rem;
    padding-top: 1rem;
    color: #ffffff;
    text-align: right;
}
.navbar-toggler-icon-custom
{
    margin-top: 30px;
    margin-left: 5px;
    width: 100px;
    height: 100px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.3.1  SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Camada_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 31 29' style='enable-background:new 0 0 31 29%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:%230F4188%3B%7D%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M23 14.1H7c-0.5 0-0.9 0.4-0.9 0.9c0 0.5 0.4 0.8 0.9 0.8h16c0.5 0 0.8-0.4 0.8-0.8C23.8 14.5 23.5 14.1 23 14.1z'/%3E%3Cpath class='st0' d='M23 20.2H7c-0.5 0-0.9 0.4-0.9 0.8s0.4 0.8 0.9 0.8h16c0.5 0 0.8-0.4 0.8-0.8S23.5 20.2 23 20.2z'/%3E%3Cpath class='st0' d='M7 9.9h16c0.5 0 0.8-0.4 0.8-0.9S23.5 8.1 23 8.1H7C6.5 8.1 6.1 8.5 6.1 9S6.5 9.9 7 9.9z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: 100px;
    
}



#comes-menu
{   text-align: center;
    border-radius: 32px;
    border: 2px solid rgba(255,255,255,.4);
    padding: 10px;
    width: 176px;
    height: 47px;
    margin-top: 35px;
    
}


/*Botões*/

.cookie-button
{
    border-radius: 32px;
    border: 2px solid #ffffff;
    background-color: #ffffff;
    width: 225px;
    height: 40px;
    

    color: #0F4188;

    
    align-content: center;
    align-self: center;
    padding: 7px;
    margin-left: 10px;
}

.vagas-button
{
    border-radius: 32px;
    border: 2px solid #0F4188;
    background-color: #0F4188;
    width: 250px;
    height:42px;

    color: #ffffff;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;

    align-content: center;
    margin-bottom: 10px;

    opacity: 0;
    transform: translateX(10rem);
    animation: slideUp 2s forwards;
    animation-delay: 1s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) ;
}

@keyframes slideUp
{
    to
    {
        transform: initial;
        opacity: initial;
    }
}

.seta-icon
{
    width: 22px;
    padding-bottom: 1px;

}
.up-button
{    border-radius: 32px;
    border: 2px solid #0F4188;
    background-color: #0F4188;

    width: 40px;
    height: 40px; 
    margin-left: 10px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) ;

    opacity: 0;
    transform: translateY(1rem);
    animation: slideUp 1s forwards;
}

.main-btn
{
    border-radius: 32px;
    border: 2px solid #0F4188;
    background-color: #0F4188;
    width: 225px;
    height: 40px;

    color: #ffffff;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;

    align-content: center;
    margin-bottom: 90px;
    margin-top:50px;

}
.button-round
{
    border-radius: 32px;
    border: 2px solid #0F4188;
    background-color: #0F4188;
    width: 225px;
    height: 40px;
    margin-top: 50px;

    color: #ffffff;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
}

.button-round:disabled, button-round[disabled]
{

    border: 2px solid #87a3ca;
    background-color: #87a3ca;
    
}


.detail-button
{
    justify-self: end;
font-family: 'Montserrat';
font-weight: 700;
font-size: 14px;
color: #0F4188;
text-align: center;
border-radius: 20px;
border: 1px solid #0F4188;
background-color: #ffffff;
margin: 40px 0px 10% 100%;

height: 34px;
width: 160px;
grid-area: detail-button;


}

#icon-services
{
padding-top: 24px;
grid-area: icon-services;
padding-left: 20%;

}




/* Layout*/

/* Estilo do container do aviso de cookie */


.align-button
{
    padding:0 80% 0 14%;
}

.vagas-container
{
    position: fixed;
    z-index: 9999;
    width: 500px;
    bottom: 2rem;
    margin:0 30% 0 70%;
}


.vagas-content
{
    justify-content: space-between;

    

    color: #ffffff;
    align-items: right;
   
}


.cookies-container
{
    position: fixed;
    z-index: 10000;
    width: 100%;
    bottom: 2rem;
    
}


.cookies-content
{
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) ;
    background-color: #0F4188;
    width: 60%;
    border-radius: 5px;
    padding: 1rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(1rem);
    animation: slideUp 1s forwards;

  
    align-items: center;  


}

@keyframes slideUp
{
    to
    {
        transform: initial;
        opacity: initial;
    }
}

#indicador-carrocel
{
    width: 7px;
    height: 7px;
    border-radius: 100%;
    margin: 12px;
}

#ImagemCarrocel
{
    height: 712px;
    width: 1920px;
    object-fit: cover;
}

.home-about
{
    padding-top: 71px;
    text-align: center;

}

.servicos-container
{
    padding-top: 80px;
    margin-top: 74px;
    background-color: #F1F1F1;
    padding-bottom: 80px;
}

.container-service
{
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content:space-around;

}

.services-row
{
    padding: 0px 10%;
    display: grid;
    grid-gap: 0px;
    align-items: center;
    justify-content:space-around;

    grid-template-areas: 
    "service service"
    "service service"
    "service service"
    "service service"
    ;
    
}

.service
{
margin: 0 28px 0 28px;
background-color: #ffffff;
max-width: 1000px ;
height: 300px;
padding: 15px;


min-width: 375px;

box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

display: grid;

grid-template-rows:70px 120px;
grid-template-columns: 100px auto auto 100px;

justify-content:space-around;


grid-template-areas: 
"icon-services p5 p5 p5"
"icon-services p6 p6 p6"
". . . detail-button"
;
}

.clientes-container
{
    padding-top: 80px;
    background-color: #ffffff;
    padding-bottom: 80px;
}

#rowClientes
{
   justify-content: space-around;
}
#CarrocelClientes
{     
    align-content: center;
    max-width: 1002px;
    margin:0 auto;
    
    min-width: 100px;
    
}

.carousel-item .row .col-md-3 img {
  width: 202px;

  }

.parceiros
{
    background-color: #F1F1F1;
    padding-bottom: 80px;
    padding: 60px 6% 40px 6%;

}

.container-logos-parceiros
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.parceiro-logo
{
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    width:300px;
}

.contato-form
{
    padding-top: 80px;
    background-color: #ffffff;
    padding-bottom: 80px;
    align-content: center;
}

.form-group
{

    align-content: center;
    display:block;
    width:40%;
    margin:0 auto;

    color: #585858;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;

    margin-top: 20px;
}

.form-button
{
    color: #ffffff;
    margin-top: 30px;
    align-content: center;
    display:block;
    margin:30px auto;   
}


.form-control
{
border-radius: 10px;
}


footer {
    background-color: #0F4186;
    color: white;

}



.footer {

    padding-left: 10%;
    padding-right: 10%;
    padding-top: 30px;
    padding-bottom: 70px;
    grid-template-rows:auto 30px 30px 30px;
    grid-template-columns: auto auto auto auto;

    display: grid;
    grid-gap: 10px;
    grid-template-areas: 
    "logoMult DireitosMult redesSociais"
    "sedeAdm sedeOp contatosFooter"
    "sedeAdmDescricao sedeOpDescricao contatosFooterDescricao"
;
}

#footer_logo
{   
    max-width:207px;
    grid-area: logoMult;
    padding-bottom: 48px;
}

#sedeAdm
{
    grid-area: sedeAdm;
}

#sedeAdmDescricao
{
    grid-area: sedeAdmDescricao;
}

#sedeOp
{
    grid-area: sedeOp;
}

#sedeOpDescricao
{
    grid-area: sedeOpDescricao;
}

#contatosFooter
{
    grid-area: contatosFooter;
}

#contatosFooterDescricao
{
    grid-area: contatosFooterDescricao;
}

#DireitosMult
{
    display: flex;
    justify-content:space-around;
    grid-area: DireitosMult;
    padding-top: 20px;
}

#redesSociais
{
    display: flex;
    grid-area: redesSociais;
    padding-top: 20px;
    padding-left: 50%;
    justify-content:center;
    
}




@media (max-width: 1030px)
{


    .cookies-content
    {
        display: flex;
        justify-content: space-between;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) ;
        background-color: #0F4188;
        width: 90%;
        border-radius: 5px;
        padding: 1rem;
        margin: 0 auto;
        opacity: 0;
        transform: translateY(1rem);
        animation: slideUp 1s forwards;
    
      
        align-items: center;  
        
    }

    head, .navbar
    {
        height: 140px;
        background-color: #0F4188;
    
    }


    #logo
{
    width: 300px;
    color:#ffffff;

    margin-left: 20%;
}


    .cookie-button
{
    border-radius: 32px;
    border: 2px solid #ffffff;
    background-color: #ffffff;
    width: 300px;
    height: 60px;
    

    color: #0F4188;

    
    align-content: center;
    align-self: center;
    padding: 7px;
    margin-left: 10px;
} 

    .main-btn
    {
        border-radius: 32px;
        border: 2px solid #0F4188;
        background-color: #0F4188;
        width: 400px;
        height: 60px;
    
        color: #ffffff;
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: 25px;
    
        align-content: center;
        margin:0 auto 30px auto;
    }

    .button-round
{
    border-radius: 32px;
    border: 2px solid #0F4188;
    background-color: #0F4188;
    width: 400px;
    height: 60px;
    margin-top: 50px;

    color: #ffffff;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
}



    #ImagemCarrocel
    {
        height: 712px;
        width: 375px;
    }



        .services-row
    {
        display: grid;
        grid-gap: 50px;
        grid-template-areas: 
        "service"
        "service"
        "service"
        "service"
        "service"
        "service"
        "service"
        "service";



    }    

    .container-service
{
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content:space-around;

}


.detail-button
{
    justify-self: end;
font-family: 'Montserrat';
font-weight: 700;
font-size: 25px;
color: #0F4188;
text-align: center;
border-radius: 20px;
border: 1px solid #0F4188;
background-color: #ffffff;
margin: 230px 0px 0 350px;

height: 40px;
width: 200px;
grid-area: detail-button;


}

    .service
{
margin: 0 28px 0 28px;
background-color: #ffffff;
max-width: 652px;
height: 600px;
padding: 30px 0 1px 100px;


min-width: 375px;

box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

display: grid;
grid-gap: 50px;

grid-template-rows:50px 120px;
grid-template-columns: 652px;



grid-template-areas: 
" p5"
" p6"
"detail-button"
;
}

#icon-services
{
display: none;

}

    .form-group
{

    align-content: center;
    display:block;
    width:60%;
    margin:0 auto;

    color: #585858;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;

    margin-top: 20px;
    
}

.form-button
{
    color: #ffffff;
    margin-top: 30px;
    align-content: center;
    display:block;
    margin:0px auto; 
}

    #redesSociais
{

    grid-area: redesSociais;
    padding-top: 20px;
    padding-left: 0%;
    grid-gap: 20px;

    justify-content:center;
    
}

#DireitosMult
{
    display: flex;
    justify-content:space-around;
    grid-area: DireitosMult;
    padding-top: 20px;
}

    .footer {


        padding-left: 10%;
        padding-right: 10%;
        padding-top: 41px;
        padding-bottom: 41px;
        grid-template-rows:auto 20px 120px 30px;
        grid-template-columns: auto auto auto auto;
    
        display: grid;
        grid-gap: 20px;
        grid-template-areas: 
        "logoMult "
        "sedeAdm "
        "sedeAdmDescricao "
        "sedeOp"
        "sedeOpDescricao"
        "contatosFooter"
        "contatosFooterDescricao"
        "redesSociais"
        "DireitosMult"
    ;
    }
}

@media (max-width: 991px)
{
    .navbar-collapse {
        margin-left: 10%;
        background-color: #0F4188;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }

      #comes-menu
{   text-align: center;
    border-radius: 32px;
    border: 2px solid rgba(255,255,255,.4);
    padding: 10px;
    width: 350px;
    height: 70px;
    margin-left:55%;
    
}

.vagas-container
{
    display: none;
}

.vagas-button
{
    display: none;
}

@keyframes slideUp
{
    to
    {
        transform: initial;
        opacity: initial;
    }
}



.up-button
{
display: none;
}


}
    @media (max-width: 770px)
    {
        #CarrocelClientes
        {     
            align-content: center;
            max-width: 200px;
            margin:0 auto;
            
            min-width: 100px;

    }
    }