@charset "utf-8";
@import "bootstrap.min.css";
@import "icones.css";
@import "sweetalert2.css";
@import "jPages.css"; 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --bg-default: #181A20;
    --white2: #ffffff;
    --black: #000;
    --theme-color1: #000000;
    --theme-color2: #1cbec9;
    --theme-color3: #2584c6;
    --theme-color4: #013668;
    --theme-color5: #195da9;
    --color-none: #464645;
    --menu-link: #555555;
    --bg-fmr-home: #f7f7f7;    
    --bg-faq-home: #F5F5F5;
    --bg-btn-default: #000000;
    --bg-btn-danger-item: #e03030;
    --bg-footer: #E9E9E9;
    --text-color-2: #1C1C1C; 
    --text-color-3: #0077C8;    
    --text-color-4: #97D653;   
    --text-color-5: #97D353;    
    --text-color-6: #AEAEAE;
    --alert-color: #FF4337;
}

/*Admin - Ver senha*/
.forca-senha{
    position: relative;
    min-height:5px;
    width: 100%;
}
.forca-senha .barra{
    position: pos;
}
.senha{
    position: relative;
}

.ver-senha, .ver-senha:focus{
    all: unset;
    position: absolute;
    right: 23px;
    top: 37px;
    cursor: pointer;
}
#itemMudar .ver-senha{
    top:31px;
}
.ver-senha i{
        font-size: 26px;
}
.ver-senha i.img-1{
        color: var(--cor-tema-principal);
}
.ver-senha i.img-2{
        color: #f44336;
}
.ver-senha.active i.img-2,.ver-senha. i.img-1,.ver-senha img.img-1,.ver-senha.active img.img-2, .ver-senha.active i.img-2{
    display: block;
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

}

.ver-senha:not(.active)  img.img-2, .ver-senha:not(.active) i.img-2{
    display: none;
}

.ver-senha.active img.img-1, .ver-senha.active i.img-1{
    display: none;
}

.ver-senha img{
    width: 30px;
    transition: all 200ms ease-in-out;
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.dataTables_length{
    margin-bottom: 10px;
}
.dataTables_wrapper{
     font-family: 'Montserrat';
}
.dataTables_wrapper table thead th{
    color: var(--theme-color3);
}
.dataTables_wrapper table{
    margin-top: 20px;
    margin-bottom: 20px;
}
.dataTables_paginate a{
   font-family: 'Montserrat';
   color: var(--theme-color4);
   font-weight: 700;
}

.paginate_button.current {
    color: var(--theme-color3) !important;
}

.paginate_button {
    padding: 0px 3px;
}


.dataTables_filter input{
    border: 1px solid var(--theme-color3);
    border-radius: 25px;
    padding: 9px 9px;
    text-align: center;
}




body {
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

label.error {
    width: auto;
    position: absolute;
    top: 0;
    font-size: 0.8rem;
    right: 0;
    left: initial;
    color: #ff0000;
    padding: 0;
    height: auto;
    transition: auto;
    transform: none!important;
}

/* HEADER CORRIGIDO */
header {
    background:#2B2A66;
    padding: 22px 0;
}

/* Navbar */
.top-bar {
  background-color: #3C3679; 
  width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: #000000;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

/* Botões */
.navbar-right a {
  margin-left: 15px;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Estilos específicos */
.btn-login, .btn-login:hover{
  background-color: #3C3679;
   color: #ffffff !important;
  border: 1px solid #ffffff;
}



.btn-cadastro,.btn-cadastro:hover {
  background-color: #CECECE;
  color: #000000 !important;
}


.btn-validar,.btn-validar:hover,.btn-validar.active{
  background-color: #1A932E;
  color: #ffffff !important;
  border: none;
}

.btn-login:hover,.btn-cadastro:hover, .btn-validar:hover{
    opacity: 0.7;
}

.navbar-right a:hover {
  opacity: 0.85;
  transform: scale(1.02);

}



/* HERO */
.hero-box {
    background:#E5E5FF;
    border-radius: 20px;
    padding: 60px;
}

.hero-title {
    font-size: 2.6rem;
    font-weight: 700;
}

.hero-img {
    max-height: 350px;
    object-fit: contain;
}

/* ICON BAR */
.icon-bar {
    background:#fff;
    border-radius: 20px;
    padding: 44px;
    border: 2px solid #e3e3e3;
}

.icon-bar img {
    height: 55px;
    margin: 0px 40px;
    width: 5%;
}

/* SECTION 2 */
.section-title {
    font-size: 2rem;
    font-weight: 700;
}

/* COMO FUNCIONA */
.how-wrapper {
    background:#2B2A66;
    color:#fff;
    border-radius: 20px;
    padding: 60px;
}



.btn-primary {
    background:#4B3DF7;
    border: none;
}

.btn-secondary {
    background:#D6D6F9;
    color:#000;
    border:none;
}

top-bar {
    background: #3b337a;
    height: 50px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

/* Container da navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 40px;
    font-family: "Segoe UI", sans-serif;
}

/* Logo (Just in Time) */
.logo {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

/* Container dos botões */
.buttons {
    display: flex;
    gap: 12px;
}

/* Estilo base dos botões */
.btn {
    margin-top: 10px;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    display: inline-block;
    color: #333;
    margin-left: 13px;
}

/* Botão Login (roxo) */
.login {
    background: #3c3679;
    color: white;
}


/* Botão Cadastrar Empresa (cinza) */
.cadastro {
    background-color: #CBCFFA;
    color: #333;
}

/* Botão Validar Certificado (verde) */
.validar {
    background: #0f8c2f;
    color: white;
}

.hero-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.hero-box {
    display: flex;
    background: white;

    border-radius: 4px;
    padding: 40px;
    width: 100%;
    max-width: 1250px;
}

.hero-left {
    width: 100%;
}

.hero-left h1 {
    font-size: 52px;
    line-height: 1.1;
    color: #1d1b4f;
    font-weight: 700;
    margin-bottom: 25px;
}

.hero-left p {
    width: 85%;
    font-size: 18px;
    margin-bottom: 30px;
    color: #333;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.btn-blue {
    background: #3b337a;
    color: white;
    padding: 12px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.btn-gray {
    background: #d3d3d3;
    color: #333;
    padding: 12px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

/* Parte direita com fundo azul */
.hero-right {
    width: 50%;
    background: #e7edff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 20px;
    position: relative;
}

.hero-img {
    width: 100%;
    max-width: 460px;
    position: absolute;
    right: 0;
    bottom: 0;
}

/* Seta curva */
.arrow {
    width: 90px;
    position: absolute;
    top: 40px;
    left: 40px;
    opacity: 0.7;
}

/* Estrela */
.star {
    width: 40px;
    position: absolute;
    top: 110px;
    right: 50px;
    opacity: 0.7;
}
.custom-img {
max-width: 130%;   
  height: auto;          
  border-radius: 12px;  
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efeito hover */
.custom-img:hover {
  transform: scale(1.03);

}.hero-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;

}

.custom-img {
    max-width: 130%;
    border-radius: 8px;
}

.hero-box h1 {
    font-size: 3.1rem;
    color: #1b1b3a;
    margin-bottom: 1rem;
}

.hero-box p {
    font-size: 1rem;
    color: #4b4b5e;
    margin-bottom: 1.5rem;
}

.features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #e0e0ff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.hero-buttons a {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 24px;
    margin-left: 1px;
}

.btn-primary {
    background-color: #3b2f9b;
    color: white;
    margin-top: 50px;
    margin-left: 0px;
}

.btn-secondary {
    background-color: #c2c2d6;
    color: #333;
    margin-top: 50px;
    margin-left: 0px;
}


.custom-img2 {
    max-width: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 60px;
}

.custom-img2:hover {
  transform: scale(1.03);
}

.hero-checklist {
    margin-top: 20px;
    padding: 4px;
}


  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
      
footer hr {
  border: none;
  border-top: 2px solid #000000; /* linha preta mais grossa */
  margin-bottom: 10px;
}

.row.g-4footer {
    margin-left: 4%;
}

@media (max-width: 992px) {
    .icon-bar img {
        height: 55px;
        margin: 3px 40px;
        width: 18%;   
    }
}

@media (max-width: 576px) {
    .navbar-right a {
        margin-top: 10px;      
        margin-left: 0;        
        padding: 12px 16px;    
        font-size: 13px;      
        display: block;        
        width: 100%;           
        text-align: center;    
    }
}

@media (max-width: 992px) {
    .hero-box h1 {
        font-size: 1.8rem;
    }

}

@media (max-width: 992px) {
    .btn-primary {
        width: 100%;
        text-align: center;
        margin-left: 0;    
        margin-top: 12px;  
        
    }
}

@media (max-width: 992px) {
    .btn-secondary {
        width: 100%;
        text-align: center;
        margin-left: 0;    
        margin-top: 12px;  
        
    }
}

@media (max-width: 992px) {
    .hero-box {
     display: flex;
     background: white;
      border-radius: 4px;
        width: 100%; max-width: 1250px;
    }
}

@media (max-width: 992px) {
    .custom-img {
        width: auto;
        height: 306px     

    }
}
@media (max-width: 992px) {
    .btn {
        width: 100%;
    }
}