@font-face {
  font-family: Suprema;
  src: url(../fuentes/Artegra-SupremaThin.otf);
}
@font-face {
    font-family: SupremaBold;
    src: url(../fuentes/suprema-bold.ttf);
}
body, html {
    margin: 0;
    padding: 0;
    font-family: Suprema;
    box-sizing: border-box;
    text-align: justify;
}

span{
    font-family: SupremaBold;
    color: #233a64;
}

.navbar {
    transition: background-color 0.8s ease;
    background-color: transparent; 
    margin-bottom: 20px;
    position: fixed;
    width: 100vw;
    z-index: 999;
}
.scrolled {
    background-color: #f4f4f4 
}

.nav-link {
    font-family: SupremaBold;
    color: #ffffff;
}
.scrollednl{
    color: #233a64;
}

#conocenos img{
    border-radius: 15px;
}


#contacto .contact-link {
    color: #0056b3;
    text-decoration: none;
    transition: color 0.3s ease;
}

#contacto .contact-link:hover {
    color: #003f7f;
}


.btn-primary {
    background-color: #394e74;
    border-color: #394e74;
}

.btn-primary:hover {
    background-color:#233a64;
    border-color:#233a64;
}

section {
    margin-bottom: 40px;
}

.bg-light {
    background-color: #f8f9fa !important;
}

form .form-control {
    border-radius: 5px;
}

form .btn-primary {
    border-radius: 5px;
}


#galeria {
    padding: 60px 0;
}

#galeria h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

#galeria p.lead {
    font-size: 1.25rem;
    color: #6c757d;
    margin-bottom: 30px;
}

#galeria img {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: rgb(243, 243, 243);
    color: #233a64;
    padding: 20px 0;
    font-family: SupremaBold;
}

footer p {
    margin: 0;
    font-size: 0.875rem;
    color: #233a64;
}

footer a {
    color: #233a64;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}
footer .col-md-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

footer .col-md-4 img {
  margin-bottom: 1rem;
}

footer .desarrollo{
    color: #54728fc4;
}

footer .col-md-4 h5 {
  margin-bottom: 0;
}
#hero {
    position: relative;
    height: 100vh;
}

#hero .carousel-item img {
    object-fit: cover;
    height: 100vh;
    width: 100%;
}
#hero .carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}


#hero .hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    padding: 0 15px;
    z-index: 2;
}

#hero .hero-text h1 {
    font-size: 3rem;
    margin: 0;
}

#hero .hero-text p {
    font-size: 1.25rem;
    margin-top: 0.5rem;
}
#hero span {
    color: white;
}
@media (max-width: 768px) {
    #hero .hero-text h1 {
        font-size: 2rem;
    }

    #hero .hero-text p {
        font-size: 1rem;
    }
}
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
	background: #394e74;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 500;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	transition: .3s ease all;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
}

.boton::after {
	content: "";
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: calc(-100%);
	border-bottom: 80px solid #233a64;
	transition: .4s ease-in-out all;
}
.boton span {
	position: relative;
	z-index: 2;
	transition: .3s ease all;
    color: white;
}

.boton:hover::after {
	left: 0;
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff; /* Fondo del loader */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Asegura que el loader esté encima del contenido */
}

.loader-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* Asegura que el video cubra toda el área sin distorsionar */
  z-index: -1; /* Mantiene el video detrás del contenido del loader */
}

.hidden {
    opacity: 0;
    visibility: hidden;
}


#preguntas-nosotros .accordion-button {
    background-color: #394e74;
    color: #ffffff;
}
#preguntas-nosotros .accordion-button:not(.collapsed) {
    background-color: #233a64;
    color: #fff;
}


#preguntas-nosotros.accordion-button::after {
    filter: brightness(0) invert(1);
}


/* .modal-content {
    border-radius: 0.5rem;
}

.modal-header {
    background-color: #f8f9fa;
}

.modal-body {
    font-size: 1rem;
    color: #333;
}

.modal-footer {
    border-top: 1px solid #e9ecef;
}

.modal-title {
    color: #0d6efd;
} */


#botones .btn {
  transition: transform 0.3s, box-shadow 0.3s;
}

#botones .btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#botones .btn-primary {
  background-color: #000000; 
  border-color: #ff6600;
}

#botones .lead {
  font-size: 1.25rem;
  color: #333; 
}


#news-section p.lead {
    font-size: 1.25rem; /* Tamaño de fuente más grande */
    padding: 15px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
}   
/* Personalización del modal con imagen de fondo */
.modal-content {
    border-radius: 12px; /* Bordes redondeados */
    background-size: cover; /* Asegura que la imagen cubra el modal */
    background-position: center; /* Centra la imagen */
    color: #000000; /* Color del texto dentro del modal */
    border: none; /* Sin borde */
}

/* Asegurar que el cuerpo del modal use flexbox para centrar el contenido */
.modal-body {   
    display: flex; /* Usar flexbox */
    flex-direction: column; /* Alinea el contenido en columna */
    align-items: center; /* Centra horizontalmente el contenido */
    justify-content: center; /* Centra verticalmente el contenido si es necesario */
    text-align: justify; /* Centra el texto dentro del modal */
    padding: 2rem; /* Añadir padding si es necesario */
}

/* Asegurar que la imagen se ajuste al contenedor */
img {
    max-width: 100%; /* La imagen no debe exceder el contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 8px; /* Bordes redondeados para la imagen */
    margin-bottom: 1rem; /* Separador entre la imagen y el texto */
}
.modal-header, .modal-footer {
    border: none; /* Sin borde */
    background-color: #233a64;
}

.modal-header {
    padding: 1rem; /* Relleno superior e inferior en la cabecera */
}

.modal-title {
    color: #ffffff; /* Color del título del modal */
}

.modal-footer {
    padding: 1rem; /* Relleno en el pie del modal */
}

.btn-secondary {
    background-color: #6c757d; /* Color de fondo del botón secundario */
    border-color: #6c757d; /* Color del borde del botón secundario */
}

#news-section .btn-secondary:hover {
    background-color: #5a6268; /* Color de fondo en el estado hover */
    border-color: #545b62; /* Color del borde en el estado hover */
}

.modal-body .separator {
    height: 1px; /* Altura del separador */
    width: 100%;
    background-color: #233a64; /* Color del separador */
    margin: 1rem 0; /* Margen superior e inferior para separar la imagen del texto */
}

/* Establecer tamaño mínimo para las tarjetas */
#news-section .news-card {
    min-height: 400px; /* Altura mínima de la tarjeta */
    display: flex;
    flex-direction: column; /* Asegura que el contenido se alinee verticalmente */
    justify-content: space-between; /* Espacia el contenido para que la tarjeta tenga una altura uniforme */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
}

/* Asegura que las imágenes no se expandan más allá de su contenedor */
#news-section .news-card img {
    min-height: 200px;
    max-height: 200px; /* Altura máxima para la imagen */
    object-fit: contain; /* Cubre el área del contenedor manteniendo la relación de aspecto */
}

/* Asegura que el cuerpo de la tarjeta ocupe el espacio disponible */
#news-section .card-body {
    flex: 1;
}