body {

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

/* 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 {
  background-color: #3C3679;
   color: #ffffff !important;
  border: 1px solid #ffffff;
}

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

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

.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;
}



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

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

#imagensIlustrativas {
    display:    flex;
    justify-content: space-between;
    align-items:  center;
}
.icon-bar img {
    max-height: 70px;
    transform:  all 1s ease-int-out;
    cursor:     pointer;
}
.icon-bar img:hover{
    transform:  scale(1.2);
}
@media (max-width: 992px) {

#imagensIlustrativas {
    flex-wrap: wrap;
    gap: 35px;
}


/*    .icon-bar img {
        height: auto;
        margin: 3px 40px;
        width: 50%;   
    }*/
}

@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%;
    }
}