@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@font-face {
    font-family:'Michelin-Regular';
    src: url('/assets/fonts/Michelin-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family:'Michelin';
    src: url('/assets/fonts/Michelin-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family:'Michelin-Light';
    src: url('/assets/fonts/Michelin-Black.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
}

p {
    font-family: 'open-sans', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

.box-azul-escuro {
    background-color: #00205B;
    font-family: 'Michelin', sans-serif;
    border-radius: 15px;
    padding: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.box-roxo {
    background-color: #FF3399;
    font-family: 'Michelin', sans-serif;
    border-radius: 15px;
    padding: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.box-descricao-amarelo {
    background-color: #FFE200;
    border-radius: 0px 20px 20px 0px;
    padding: 20px;
    font-weight: 400;
    color: #27509B;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.box-azul {
    background-color: #27509B;
    font-family: 'Michelin', sans-serif;
    border-radius: 15px;
    padding: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.box-amarelo {
    background-color: #FFE200;
    font-family: 'Michelin', sans-serif;
    border-radius: 15px;
    padding: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #27509B;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.text-azul-claro {
    color: #27509B;
}

.text-azul-escuro {
    color: #00205B;
    line-height: 21pt;
}

.text-tit-segmento h2 {
    font-family: 'Michelin', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #27509B;
    margin: 0px;
}

.text-tit-segmento h2.sub {
    font-family: 'Michelin-Regular', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #27509B;
    margin: 0px;
}

.text-tit-necessidade h2 {
    font-family: 'Michelin', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #ffffff;
}

.text-mi-azul-escuro {
    font-family: 'Michelin-Regular', sans-serif;
    color: #00205B;
    line-height: 24pt;
    font-size: 0.95rem;
    font-weight: 100;
}

.text-mi-azul-escuro span {
    font-family: 'Michelin-Regular', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
}

.text-necessidade-azul-escuro {
    color: #00205B;
    line-height: 25pt;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
}

.text-necessidade-azul-escuro-nessecidade {
    color: #00205B;
    line-height: 25pt;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
}



.bg-master {
    background-image: url("/tco/bg-full.jpg") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-attachment: fixed !important;
    height: 100vh !important;
    background-color: #27509B !important;
}

.container {
    max-width: 980px;
}

.text-mi {
    font-family: 'Michelin', sans-serif;
}

.text-mi-r {
    font-family: 'Michelin-Regular', sans-serif;
}

.text-azul {
    color: #1159A5;
}

.text-amarelo {
    color: #FDDF48;
}

.text-14pt {
    font-size: 14pt;
}

.text-16pt {
    font-size: 16pt;
}

.text-18pt {
    font-size: 18pt;
}

.text-20pt {
    font-size: 20pt;
}

.navbar-nav .nav-item .nav-link {
    color: #1159A5;
    font-size: 14pt;
    font-weight: 600;
}

.dropdown-menu {
    background: #FDDF48;
    border-radius: 0px 0px 10px 10px;
    border: 0px;
    box-shadow: 5px 5px 15px -5px;
    margin-left: 15px;
    border-left: 2px solid #E5BA42;
}

.dropdown-menu .dropdown-item {
    color: #1159A5;
    font-size: 11pt;
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
}

.dropdown-menu .dropdown-item:hover {
    color: #FFFFFF;
    background-color: #1159A5;
}

#mnecessidade {
    background: #1159A5 !important;
    border-radius: 0px 0px 10px 10px;
    border: 0px;
    box-shadow: 5px 5px 15px -5px;
    margin-left: 15px;
    border-left: 2px solid #E5BA42;
}

#mnecessidade .dropdown-item {
    color: #FFFFFF !important;
    font-size: 11pt;
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
}

#mnecessidade .dropdown-item:hover {
    color: #FFFFFF;
    background-color: #454849 !important;
}

.btn-filtros {
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    font-size: 14px;
}

.bloco-necessidade {
    background: #E1E9EC;
    border-radius: 30px 0px 0px 0px;
    border: 2px solid #FFFFFF;
    box-shadow: 5px 5px 15px -5px;
    transition: 0.3s;
}

.active_filtro {
    background: #337BBD;
    color: #fff;
}

.bloco-necessidade .icone {
    width: 110px;
    height: 110px;
    border-radius: 55px;
    background-color: #FDDF48;
    margin: 0 auto;
    top: -40px;
    position: relative;
    border: 10px solid #337BBD;
    transition: 0.3s;
    padding: 20px;
}

.bloco-necessidade .icone img {
    width: 100px;
    transition: 0.3s;
}

.bloco-necessidade .titulo {
    color: #337BBD;
    font-size: 12pt;
    padding: 0px 10px 10px 10px;
    font-weight: 700;
    min-height: 85px;
    transition: 0.3s;
}

.bloco-necessidade:hover {
    background: #337BBD;
    border-radius: 30px 0px 0px 0px;
    border: 2px solid #337BBD;
    box-shadow: 5px 5px 15px -5px;
}

.bloco-necessidade:hover .icone {
    border: 0px;
    width: 110px;
    height: 110px;
    border-radius: 55px;
    text-align: center;
    padding: 20px;
}

.bloco-necessidade:hover .icone img {
    width: 110px;
}

.bloco-necessidade:hover .titulo {
    color: #ffffff;
    font-size: 12pt;
    padding: 0px 10px 10px 10px;
    font-weight: 700;
    min-height: 85px;
}

.box-titulo-segmento {
    background: #FDDF48;
    border-radius: 10px;
}

.box-titulo-necessidade {
    background: #337BBD;
    border-radius: 10px;
}

.box-titulo-necessidade .icone {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #FDDF48;
    padding: 10px;
}

.box-titulo .icone {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #FDDF48;
}

.text-top {
    font-style: italic;
    font-weight: 600;
    color: #26509B;
    font-size: 18px;
}

.btn-filtro {
    border-radius: 15px;
    padding: 20px;
    font-style: italic;
    font-weight: 600;
    font-size: 26px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.btn-filtro-on {
    background-color: rgba(39,80,155,1);
    color: #fff;

}

.btn-filtro-off {
    background-color: rgba(31,91,164,0.5);
    color: #00205B;
}

.card-michelin-segmento {
    background-color: rgba(255,255,255,0.7);
    border-radius: 15px;
    padding: 20px;
    font-size: 1.28rem;
    font-weight: 600;
    color: #00205B;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.card-michelin-segmento h3 {
    font-style: italic;
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 0px;
}

.card-michelin-necessidade {
    background-color: rgba(31,91,164,0.9);
    border-radius: 15px;
    padding: 20px;
    font-size: 1.28rem;
    font-weight: 600;
    color: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.card-michelin-necessidade h3 {
    font-style: italic;
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 0px;
}

.card-michelin-necessidade img {
    filter: invert(100%);
}

.imagem-com-borda {
    position: relative;
    display: inline-block;
}

.imagem-com-borda::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid #ff0000; /* Cor da borda */
    transform: skew(-30deg); /* Inclinação para criar a diagonal */
    transform-origin: 0 100%; /* Ponto de origem da transformação */
    z-index: 1; /* Para sobrepor a imagem */
}

.imagem-com-borda img {
    display: block;
    z-index: 2; /* Coloque a imagem acima da borda */
}

.det-beneficio p {
    font-size: 14pt;
    font-weight: 600;
    color: #00205B;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.det-tecnologia .foto {
    max-width: 35%;
    border: 2px solid #f0f0f0;
    padding: 5px;
    border-radius: 10px;
    background: #ffffff;
}

.det-tecnologia .texto {
    border: 0px;
    background: rgb(227,236,241);
    background: linear-gradient(90deg, rgba(227,236,241,1) 0%, rgba(255,255,255,0) 100%);
    padding: 10px;
    border-radius: 10px;
    color: #00467A;
}

.box-produto {
    background-color: #F0F0F0;
    font-family: 'Michelin', sans-serif;
    border-radius: 15px;
    padding: 0px;
    font-size: inherit;
    font-weight: 600;
    color: #000;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.box-produto img {
    width: 100%;
}

.box-produto .titulo {
    width: 100%;
    color: #FFE200;
    background-color: #27509B;
    font-family: 'Michelin', sans-serif;
    border-radius: 15px;
    padding: 10px 15px;
    font-size: 0.97rem;
    font-weight: 600;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.box-produto .titulo span {
    color: #ffffff;
    font-family: 'Michelin', sans-serif;
    font-size: 80%;
    display: block;
}

.box-produto .descricao {
    padding: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
}

.box-detalhe .titulo {
    width: 100%;
    color: #FFE200;
    background-color: #27509B;
    font-family: 'Michelin', sans-serif;
    border-radius: 15px;
    padding: 20px;
    font-size: 1.4rem;
    font-weight: 600;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.box-detalhe .titulo span {
    color: #ffffff;
    font-family: 'Michelin', sans-serif;
    font-size: 1rem;
    display: block;
}

.barra_segmento {
    background: #00205B;

    width: 60px;
    padding: 20px 0px 0px 7px;
}

.barra_segmento span {
    writing-mode: vertical-lr;
    color: #777;
    transform: rotate(180deg);
    font-size: 30px;
    font-family: 'Michelin', sans-serif;
}

.barra_necessidade {
    background: #00205B;

    width: 60px;
    padding: 200px 0px 0px 12px;
}



.barra_necessidade_branca {
    background: #FFFFFF;

    width: 60px;
    padding: 20px 0px 0px 0px;
}

.barra_necessidade_branca span {
    writing-mode: vertical-lr;
    color: #474747;
    transform: rotate(180deg);
    font-size: 20px;
    font-family: 'Michelin', sans-serif;
    padding: 20px 15px 170px 0px;
}

.barra_necessidade span {
    writing-mode: vertical-lr;
    color: #777;
    transform: rotate(180deg);
    font-size: 25px;
    font-family: 'Michelin', sans-serif;
}

.bola_branca {
    background: #fff;
    width: 180px;
    height: 180px;
    border-radius: 90px;
    margin: -15px 0px 0px -65px;
    text-align: center;
}

.bola_branca image {
    width: 90%;
}