/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); */

* {
  margin: 0;
}

/* @font-face {
    font-family: 'MiFuente';
    src: url('/fonts/Roboto.woff2') format('woff2'),
          url('/fonts/Roboto.woff') format('woff'),
          url('/fonts/Roboto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} */


#principal {
  /* background-image: url("/images/Banner_2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 90vh;  */
  /* Ocupa el 100% del alto del viewport*/
  /* background-position: center;  */
  /* Mueve la imagen hacia la parte superior */
  top: 0;
  /* z-index: -1; */
}

/* CAROUSEL DE PORTADA */
.carousel-item-portada {
    height: 90vh; /* Asegúrate de que cada ítem del carrusel tenga el alto completo */
}

.carousel-item-portada img {
    max-width: 100%; /* Asegúrate de que la imagen no desborde */
}

.carousel-inner {
  height: 100%; /* Asegúrate de que el contenedor interno tenga una altura completa */
}

.carousel-item-portada h1, .carousel-item-portada h4, .carousel-item-portada h5 {
  /* Ajusta el tamaño de los textos si es necesario para que no se vea demasiado alto */
  margin: 0; /* Elimina márgenes que puedan aumentar la altura */
}


#nav {
  color: rgb(255, 255, 255); /* Color del texto en blanco para mejor contraste */
  background: linear-gradient(90deg, #B70C0C 0%, #510505 100%);
  /* Gradiente de izquierda a derecha de #B70C0C a #510505 */
  
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.09); /* Sombras para darle un efecto flotante */
  /* color: rgb(255, 0, 0); */
  /* background-color: rgb(255, 255, 255); */
  /* backdrop-filter: blur(10px); */
  /* box-shadow: 0 20px 30p rgba(255, 255, 255, 0.09); */
}

#nav a {
  color: white;
}

#navbar a {
  color: white;
  transition: 3s;
}

#nav a:hover {
  color: white;
}

.navbar-nav {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos del menú */
}

.navbar-nav .nav-item {
    display: flex;
    align-items: center; /* Alinea verticalmente el contenido de cada elemento del menú */
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center; /* Alinea verticalmente el texto del enlace */
}

.navbar-nav .nav-item i {
    font-size: 1.25rem; /* Ajusta el tamaño del icono según sea necesario */
}


/* tarjeta de empresa */
#card-empresa {
  border-color: rgb(255, 255, 255);
  background-color: rgba(5, 5, 5, 0.377);
  color: rgb(0, 0, 0);
}

#card-empresa img {
  height: 150px;
  border-radius: 100%;
}

.titulo-principal {
    color: rgb(255, 255, 255);
}

.subTitulo {
  color: rgb(255, 255, 255);
}

.contenido-card {
    color: rgb(255, 255, 255);
}
/* tarjeta de empresa */


/* contenido del hero */
/* .dropdown-button-custom {
    background-color: #ffffff;
    border: 1px solid #000000;
    color: #000000;
} */

/* .dropdown-button-custom:hover {
  background-color: #ffffff;
  border: 1px solid #000000; 
} */

#vehiculos {
  padding-top: 50px;
}

#hero {
  color: rgb(0, 0, 0);
}

#card-vehiculos {
    background-color: rgba(255, 255, 255, 0.09);
    font-size: 16px;
}

.tarjetas:hover {
  transform: scale(1.01);
  transition: transform 0.1s ease-in-out;
  box-shadow: 0px 0px 15px 5px rgba(24, 24, 24, 0.596);
}

.carousel-img {
  object-fit: cover; /* Mantiene la proporción de la imagen */
}
/* contenido del hero */

/* pie de pagina */
.pie-pagina {
  background-color: black;
  color: white;
}
/* pie de pagina */


/* contacto */
.contact-form {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.contact-form label {
  color: #f0f0f0;
}
.contact-form input,
.contact-form textarea {
  background-color: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444444;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #888888;
}

/* Estilos para el formulario */
.contact-form .form-control {
  background-color: #ffffff !important; /* Fondo oscuro para los campos de entrada */
  color: #000000 !important; /* Texto blanco dentro de los campos de entrada */
  border: 1px solid #555 !important; /* Borde ligeramente más claro que el fondo para que se distinga */
}

.contact-form .form-control::placeholder {
  color: #000000 !important; /* Color del texto del placeholder en gris claro */
}

/* Estilos para el textarea */
.contact-form textarea.form-control {
  background-color: #ffffff; /* Fondo oscuro para el área de texto */
  color: #000000; /* Texto blanco dentro del área de texto */
  border: 1px solid #555; /* Borde ligeramente más claro que el fondo para que se distinga */
}
/* contacto */


/* Ajustar la altura fija de las tarjetas para que todas las slides tengan el mismo tamaño */
.carousel-item .card {
    min-height: 700px; /* Ajusta según tu necesidad */
    max-height: 700px; /* Asegura que todas las tarjetas tengan el mismo tamaño */
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}

/* Ajusta el espacio entre los elementos del card-body */
.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Ajusta el espacio entre los grupos de input */
    justify-content: flex-start; /* Alinea los contenidos hacia arriba */
}

/* Mantén los botones al final de la card */
.card .btn {
    align-self: flex-end; /* Alinea los botones al final */
}

/* Ajusta los títulos para mantener espacio uniforme */
.card h3 {
    margin-bottom: 20px;
}

/* Estilo para que el formulario tenga espaciado consistente */
.row.mb-3 {
    margin-bottom: 10px; /* Ajusta el espacio entre filas para una mejor apariencia */
}


/* SELECT2 */
.select2-container {
    width: auto; /* Asegúrate de que el ancho sea 100% del contenedor */
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1); /* Sombra para el dropdown */
}

.select2-container--default .select2-selection--single {
    height: 50px; /* Ajusta según la altura deseada */
    line-height: 36px; /* Para centrar verticalmente */
    padding: 10px 10px; /* Añade espacio alrededor del texto */
    border: 1px solid #d1d5db; /* Color de borde similar a Tailwind */
    border-radius: 0.375rem; /* Bordes redondeados (tailwind: rounded-md) */
    background-color: #ffffff; /* Color de fondo similar a Tailwind */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Sombra similar a Tailwind */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    white-space: nowrap; /* Evita que el texto se envuelva */
    overflow: hidden; /* Oculta el desbordamiento */
    text-overflow: ellipsis; /* Muestra puntos suspensivos si hay desbordamiento */
    color: #374151; /* Color de texto similar a Tailwind */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 50%; /* Centrar verticalmente la flecha */
    transform: translateY(-50%); /* Centrar verticalmente la flecha */
}

/* Estilo para el contenedor del select en modo búsqueda */
.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 0.5rem; /* Espaciado alrededor del campo de búsqueda */
    border: 1px solid #d1d5db; /* Color de borde */
    border-radius: 0.375rem; /* Bordes redondeados */
    box-shadow: none; /* Sin sombra */
}

/* Sombra en el contenedor del dropdown */
.select2-container--default .select2-results {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Sombra para el dropdown */
}