body {

    font-family: "Inter", sans-serif;

    background-color: #f8f9fa;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 600; /* Negrito */

}



button {

    font-weight: 500;

}



p,

input,

select,

label {

    font-weight: 400; /* Regular */

}



.font-color-3C4257 {

    color: #3c4257;

}



.font-color-4F566B {

    color: #4f566b;

}

.form-label.font-color-4F566B {

    font-size: 14px !important;

}

.form-check-label.font-color-4F566B {

    font-size: 14px !important;

}



.btn-orange {

    background-color: #ff7601;

    color: #fff;

}

.btn-orange:hover {

    background-color: #f58a2d;

    color: #fff;

}



/* Stepper Styles */

.stepper {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    margin-top: 50px;

}



.step {

    flex: 1;

    text-align: center;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.step .step-text {

    margin-top: 5px;

    font-size: 12px;

    max-width: 90px;

}



.step-content {

    margin-top: 3rem !important;

    position: relative;

}



.step.active .step-number {

    background-color: #ff6700;

    color: #fff;

}



.step.active .step-text {

    font-weight: 800;

}



.step.completed .step-number {

    background-color: #003782;

    color: #fff;

}



.step .step-number {

    display: inline-block;

    width: 40px;

    height: 40px;

    line-height: 40px;

    border-radius: 50%;

    background-color: #e0e0e0;

    color: #000;

    font-size: 18px;

    font-weight: 500;

}



.step:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 30%;

    right: -50%;

    width: 100%;

    height: 3px;

    background-color: #e0e0e0;

    transform: translateY(-50%);

    z-index: -1;

}



.step.completed:not(:last-child)::after {

    background-color: #003782;

}



#form-step1 {

    background-color: #fff;

}



/* Step 2 */



/* Cards */

.card {

    border-radius: 16px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    background-color: #fff;

}



.card-plano:hover {

    transform: scale(1.05);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

}



.card-header {

    background-color: #f8f9fa;

    border-radius: 16px 16px 0 0;

}



.card-highlight {

    border: 2px solid #ff6700 !important;

}



.card-highlight .card-header,

.card-highlight .card-header h5 {

    background-color: #fde5d4;

    border-radius: 16px 16px 0 0;

    color: #ff6700 !important;

}



.card-body ul li {

    margin: 5px 0;

    font-size: 0.9rem;

}



.btn-primary {

    background-color: #003782;

    border: none;

    font-weight: bold;

    border-radius: 8px;

}



.btn-primary:hover {

    background-color: #0050b3;

}



.text-primary {

    color: #003782 !important;

}



/* Estilo geral do botão do acordeão */

.accordion-button {

    font-size: 22px;

    font-weight: 600;

    background-color: #f8f9fa;

    color: #003782;

    padding: 15px 20px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    text-transform: uppercase;

}



.accordion-button:hover {

    background-color: #e8f0ff;

}



.accordion-button:not(.collapsed) {

    background-color: #003782;

    color: #fff;

    font-weight: 700;

}



/* Estilo do ícone antes do texto */

.accordion-button i {

    font-size: 26px;

    color: #ff6700;

}



.text-ff6700 {

    color: #ff6700;

}



/* Personalizando o ícone da seta */

.accordion-button::after {

    font-size: 5.5rem !important;

    color: #f1f;

}



.accordion-button::after {

    content: url("data:image/svg+xml;base64,..."); /* Base64 de um ícone SVG */

    display: inline-block;

    width: 24px;

    height: 24px;

}



.accordion-button:not(.collapsed)::after {

    font-size: 5.5rem;

    transform: rotate(-180deg);

    color: #f1f !important;

}



/* Corpo do acordeão */

.accordion-body {

    padding: 20px;

    background-color: #ffffff;

    border: 1px solid #e0e0e0;

    border-top: none;

    border-radius: 0 0 8px 8px;

}



/* Estilo dos itens do acordeão */

.accordion-item {

    border: none;

    margin-bottom: 10px;

}



.position-responsive {

    position: relative !important; /* Padrão */

}



@media (min-width: 992px) {

    /* lg breakpoint do Bootstrap */

    .position-responsive {

        position: fixed !important;

    }

}



.is-valid {

    border: 2px solid #28a745; /* Verde */

    background-color: #e9fbe9; /* Fundo verde claro */

}



.is-invalid {

    border: 2px solid #dc3545; /* Vermelho */

    background-color: #fbe9e9; /* Fundo vermelho claro */

}



.invalid-feedback {

    color: #dc3545;

    font-size: 12px;

    margin-top: 4px;

}



.overlay-processo {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background-color: rgba(0, 55, 130); /* Azul escuro */

    z-index: 9999;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    padding: 20px;

    text-align: center;

    color: white;

    font-family: "Segoe UI", sans-serif;

}



.logo-processo {

    width: 180px;

    margin-bottom: 45px;

    animation: fadeIn 1s ease-in-out;

}



.mensagem-processo {

    font-size: 1.8rem;

    font-weight: 500;

    color: #ffffff;

    background-color: rgba(0, 0, 0, 0.3);

    padding: 20px 30px;

    border-radius: 10px;

    box-shadow: 0 0 10px #00000033;

    animation: fadeIn 0.5s ease-in-out;

}



/* Animação opcional */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.fade-out {

    opacity: 0;

    transition: opacity 0.5s ease-out;

}



.fade-in {

    opacity: 1;

    transition: opacity 0.5s ease-in;

}



.campo-invalido {

    border: 2px solid red !important;

    background-color: #ffe6e6;

}