/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */


body {
  color: rgb(var(--bs-tertiary-color-rgb));
  margin: 10px;
  padding: 10px;
}

/* BENEFICIOS SECTION */
.beneficios {
display: flex;
gap: 10px;
flex: 1;
flex-wrap: wrap;

}

.bene{
  width: 50%;
  margin: 10px; 
  border-radius: 10px;
  flex: 1;
  padding: 20px;
  flex: 1 1 260px;
  min-height: 260px;
  max-height: 260px;
  flex-direction: column;
  justify-content: center; /* centraliza vertical */
  align-items: center;     /* centraliza horizontal */
  border-radius: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch; /* força todos iguais */
 
}

.box {
    border: 1px solid #ffffff;
    box-shadow: 0 4px 8px rgba(187, 186, 186, 0.951);
}

.bene p {
  flex-grow: 1;
  text-align: center;
}



.i{
color: rgb(0, 0, 0);
font-size: 40px;
display: flex;
justify-content: center;
}


/*texto em destaque*/

.emphasis {
  font-weight: bold;
  text-align: center;
}



/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

   
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem
            }
        }

        .b-example-divider {
            width: 100%;
            height: 3rem;
            background-color: #0000001a;
            border: solid rgba(0, 0, 0, .15);
            border-width: 1px 0;
            box-shadow: inset 0 .5em 1.5em #0000001a, inset 0 .125em .5em #00000026
        }

        .b-example-vr {
            flex-shrink: 0;
            width: 1.5rem;
            height: 100vh
        }

        .bi {
            vertical-align: -.125em;
            fill: currentColor
        }

        .nav-scroller {
            position: relative;
            z-index: 2;
            height: 2.75rem;
            overflow-y: hidden
        }

        .nav-scroller .nav {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 1rem;
            margin-top: -1px;
            overflow-x: auto;
            text-align: center;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch
        }

        .btn-bd-primary {
            --bd-violet-bg: #712cf9;
            --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
            --bs-btn-font-weight: 600;
            --bs-btn-color: var(--bs-white);
            --bs-btn-bg: var(--bd-violet-bg);
            --bs-btn-border-color: var(--bd-violet-bg);
            --bs-btn-hover-color: var(--bs-white);
            --bs-btn-hover-bg: #6528e0;
            --bs-btn-hover-border-color: #6528e0;
            --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
            --bs-btn-active-color: var(--bs-btn-hover-color);
            --bs-btn-active-bg: #5a23c8;
            --bs-btn-active-border-color: #5a23c8
        }

        .bd-mode-toggle {
            z-index: 1500
        }

        .bd-mode-toggle .bi {
            width: 1em;
            height: 1em
        }

        .bd-mode-toggle .dropdown-menu .active .bi {
            display: block !important
        }
    



.profile {    
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 20px;
    display: flex;
   
}

.nav-link {
  position: relative;
  color: #333;
  text-decoration: none;
}

.foto-sobre {
  margin: 10px;

}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #0d6efd;
  transition: all 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
  left: 0;
}


/* Icones redes sociais */

.wa{
    font-size: 20px;
    color: rgb(253, 254, 253);
    margin-left: 15px;
}


/* contatos */

/* Fundo da seção */
.contact-section {
    min-height: 100vh;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    font-family: 'Segoe UI', sans-serif;
}

/* Card principal */
.contact {
    background: #333;
    padding: 50px 40px;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 0 40px rgba(0, 140, 255, 0.15);
    border: 1px solid rgba(0, 140, 255, 0.2);
}

/* Título */
.contact h2 {
    color: #fefefe;
    margin-bottom: 5px;
    font-size: 28px;
}

/* Subtítulo */
.contact .subtitle {
    color: #fefefe;
    font-size: 14px;
    margin-bottom: 30px;
}

/* Grupo input */
.input-group {
    position: relative;
    margin-bottom: 25px;
}

/* Inputs e textarea */
.input-group input,
.input-group textarea {
    width: 100%;
    padding: 14px;
    background: rgba(187, 186, 186, 0.951);
    border: 1px solid #1e293b;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

/* Textarea */
.input-group textarea {
    min-height: 120px;
    resize: none;
}

/* Label flutuante */
.input-group label {
    position: absolute;
    top: 14px;
    left: 14px;
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
    transition: 0.3s ease;
}

/* Animação label */
.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label,
.input-group textarea:valid + label {
    top: -10px;
    left: 10px;
    background: #111827;
    padding: 0 6px;
    font-size: 12px;
    color: #fefefe;
}

/* Efeito focus */
.input-group input:focus,
.input-group textarea:focus {
    border: 1px solid #00aaff;
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.3);
}

/* Botão */
.contact button {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(90deg, #000);
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s ease;
}

/* Hover botão */
.contact button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 170, 255, 0.4);
}