@font-face {
    font-family: 'Bootstrap Icons';
    src: url('fonts/bootstrap-icons.woff2') format('woff2'),
         url('fonts/bootstrap-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* Definir fuente Lato usando .ttf */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
/* Estilo para campos válidos */
.is-valid {
    border-color: #28a745 !important; /* Verde */
}

/* Estilo para campos no válidos */
.is-invalid {
    border-color: #dc3545 !important; /* Rojo */
}
/* Fuente global */
html ,body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    font-size:medium;
}
h1{
   font-weight: 800;
   line-height: 1.6;
}
h4{
    font-weight: 600;
    line-height: 1.6;
 }
li {
    list-style-type: none; /* Elimina la viñeta de la lista */

}
i {
    list-style-type: none; /* Elimina la viñeta de la lista */
    color: #000000 !important; /* Cambia a tu color deseado */
}

a  {
    text-decoration: none; /* Elimina la viñeta de la lista */
    color: #000000 !important; /* Cambia a tu color deseado */
}
p{
    text-align: justify;
}
/* Encabezado */
header {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

header .navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
}

header .nav-link {
    color: #555;
}

header .nav-link:hover {
    color: #007bff;
}

/* Carrusel */
.carousel-item {
    position: relative;
}

.img-overlay {
    filter: brightness(50%); /* Aplica el filtro oscuro a las imágenes */
}
/* Carrusel */
.carousel-item {
    position: relative;
    height: 75vh; /* Ajusta el carrusel a un 75% de la altura de la ventana */
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen sin distorsión, cubriendo todo el espacio */
    object-position: center; /* Centra la imagen */
}

.img-overlay {
    filter: brightness(50%); /* Filtro oscuro para mejorar la legibilidad del texto */
}

.carousel-caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    z-index: 1; /* Asegura que el texto esté encima de la imagen */
}

.carousel-caption h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.carousel-caption p {
    font-size: 1.25rem;
    max-width: 80%;
}
/* Fondo alterno para las secciones */
#psicologia, #abogacia, #matronas {
    position: relative;
    padding: 3rem 1rem;
    overflow: hidden; /* Asegura que los iconos no sobresalgan de las secciones */
}

/* Icono de fondo en la sección Psicología */
#psicologia::before {
    content: "\F8F6"; /* icono de persona para psicología */
    font-family: 'Bootstrap Icons';
    font-size: 24rem;
    color:rgba(149, 150, 149, 0.1); /* Color rojo claro y semi-transparente */
    position: absolute;
    top: 50%; 
    right: 10%; 
    transform: translateY(-50%); /* Centrado vertical */
    z-index: 1;
}

/* Icono de fondo en la sección Abogacía */
#abogacia::before {
    content: "\F86D"; /* icono de maletín para abogacía */
    font-family: 'Bootstrap Icons';
    font-size: 24rem;
    color:rgba(149, 150, 149, 0.1); /* Color rojo claro y semi-transparente */
    position: absolute;
    top: 50%; 
    right: 10%; 
    transform: translateY(-50%); /* Centrado vertical */
    z-index: 1;
}

/* Icono de fondo en la sección Matronas */
#matronas::before {
    content: "\F72F"; /* icono de corazón para matronas */
    font-family: 'Bootstrap Icons';
    font-size: 24rem;
    color:rgba(149, 150, 149, 0.1); /* Color rojo claro y semi-transparente */
    position: absolute;
    top: 50%; 
    right: 10%; 
    transform: translateY(-50%); /* Centrado vertical */
    z-index: 1;
}

/* Títulos de secciones */
h3 {
    font-size: 2rem;
    color: #343a40;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
    z-index: 2; /* Asegura que el texto esté delante del icono de fondo */
}

/* Imágenes y texto en servicios */
.container img {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.container ul li i {
    color: #007bff;
    margin-right: 0.5rem;
}

/* Botones de servicio */
.container .btn-primary {
    background-color: #007bff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 2;
}

.container .btn-primary:hover {
    background-color: #0056b3;
}

/* Modal de Solicitud de Servicio */
.modal-header {
    background-color: #007bff;
    color: #fff;
}

.modal-body label {
    font-weight: bold;
}

/* Contenedor del icono de validación */
.form-control.is-valid,
.form-control.is-invalid {
    position: relative;
    padding-right: 2.5rem; /* Espacio para el icono */
}

.valid-feedback-icon,
.invalid-feedback-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    pointer-events: none;
}

.valid-feedback-icon {
    color: #28a745; /* Verde para campos válidos */
}

.invalid-feedback-icon {
    color: #dc3545; /* Rojo para campos inválidos */
}

/* Botón de Volver Arriba */
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Oculto inicialmente */
    z-index: 1000;
    background-color: #007bff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#backToTop:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

/* Formulario de Contacto */
#contacto {
    padding: 2rem;
    background-color: #e9ecef;
}

#contacto h3 {
    color: #343a40;
}

#contacto form .form-label {
    font-weight: bold;
}

#contacto .btn-primary {
    background-color: #007bff;
    border: none;
}

/* Pie de página */
footer {
    background-color: #343a40;
    color: #fff;
    padding: 1rem;
    text-align: center;
}

footer p {
    margin: 0;
   text-align: center;
}

/* Fondo con imagen en secciones fluidas */
.bg-image {
    background-image: url('../imagenes/fondo.jpg'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Ajusta la imagen para cubrir toda la sección */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
    padding: 3rem 1rem; /* Espacio interno para contenido */
}

.bg-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Capa de color oscuro semitransparente */
    z-index: 1;
}

.bg-image > .container-fluid {
    position: relative;
    z-index: 2;
    color: #fff; /* Color de texto blanco para contraste */
}


.flecha {

    color: white !important; /* Cambia a tu color deseado */
}