/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Header */
header {
  background: #dd0a13;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

header img {
  height: 50px;
}

nav {
  margin-right: 13px;
}

nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin: 0 18px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 17px;
}

nav ul li:last-child a {
  text-decoration: none;
  background-color: #fff;
  padding: 20px 75px;
  color: #dd0a13;
  font-size: 17px;
  border-radius: 10px;
  font-weight: bold;
}

/* Secciones */
section {
  display: flex;
  align-items: center;
  width: 100%;
  height: 70vh;
}

li {
  color: #fff;
}

#logoImageLogin {
  height: 20vh;
  width: 20vh;
  object-fit: fill;
  border-radius: 200px;
  align-self: center;
  margin: 20px 0;
  background-color: #ffffff;
}

#security {
  height: 90vh;
  background-color: #dd0a13;
}

#security p, 
#security h2 {
  color: #fff;
}

#compatibility .text {
  padding: 0 1.5%;
}

#input_filtro {
  width: 50vw;
  text-align: left;
  padding-left: 2vw;
}

#input_filtro::placeholder {
  color: #dd0a13;
}

#input_filtro::-ms-input-placeholder {
  color: #dd0a13;
}

#input_select {
  width: 20vw;
}

.search-button {
  padding: 0 3%;
  border-radius: 250px;
  border: none;
  color: #dd0a13;
  font-size: 18px;
}

.h100 {
  height: 100%;
}

.text {
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  padding: 0 5%;
}

.text:nth-child(2) {
  padding: 0 3%;
}

.image {
  flex: 1;
  height: 100%;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title {
  color: #dd0a13;
  font-weight: lighter;
  font-size: 3.3vw;
}

.sub_title {
  color: #dd0a13;
  font-size: 1.5vw;
  margin-top: 25px;
  line-height: 1.5;
}

.button {
  width: 48%;
  padding: 1vw;
  font-size: 1.2vw;
  border-radius: 10px;
}

.button1 {
 color: #fff;
 background-color: #dd0a13;
 border: none;
}

.button2 {
  color: #dd0a13;
  background-color: white;
  border-color: #dd0a13;
  border-width: 2px;
  font-weight: bold;
  border-style: solid;
}

.center_button {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}

/* SECCIÓN PRODUCTOS */
.productos {
  background: #dd0a13; /* Fondo rojo */
  text-align: center;
  padding: 5vh 0 8vh 0;
  color: white;
  display: flex;
  flex-direction: column;
  height: auto;
}

.brands {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: auto;
  flex-wrap: wrap;
  margin-top: 2.5vw;
}

.brand {
  width: 82%;
  padding-bottom: 1vw;
}

.brand img {
  width: 100%;
}

/* TÍTULO */
.productos h2 {
  color: #fff;
  margin-top: 1vw;
}

/* SUBTÍTULO */
.productos .sub_title {
  color: #fff;
  margin-top: 15px;
}

/* FILTROS */
.filtros {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 1.5vw 0 6vw 0;
  width: 70%;
}

/* INPUT Y SELECT REDONDEADOS */
.filtros input,
.filtros select {
  border: none;
  border-radius: 60px;
  font-size: 1.5vw;
  outline: none;
  text-align: center;
  padding-top: 1vw;
  padding-bottom: 1vw;
  color: #dd0a13;
}

/* GALERÍA */
.galeria {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
  width: 90%;
  margin: auto;
}

/* TARJETAS DE PRODUCTOS */
.producto {
  background: white;
  border-radius: 20px;
  text-align: center;
  transition: transform 0.2s;
  width: 90%;
  height: 40vh;
  margin-bottom: 4.5vh;
  display: flex;
  flex-direction: column;
}

.producto:hover {
  transform: scale(1.05);
}

.producto img {
  width: 100%;
  height: 50%;
  object-fit: cover;
  border-radius: 10px;
}

.product_title {
  font-size: 1.6vw;
  font-weight: bold;
  color: #e82630;
  text-align: left;
  
}

.consult_text {
  font-size: 1vw;
  color: #e82630;
  font-weight: bold;
  text-align: left;
  margin-bottom: 1vw;
}

.product_text_container {
  margin: 0.8vw 1vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

#contact {
  height: 80vh;
}

#contact .title {
  margin-bottom: 1.5vw;
  font-size: 3vw;
}

#about {
  height: 50vh;
}

#about .image {
  width: 100%;
  height: 50vh;
  position: absolute;
}

#about .text {
  z-index: 1000;
  text-align: center;
  width: 100%;
}

#about .text p {
  margin: 0 7%;
  font-weight: bold;
  font-size: 1.7vw;
}

.form-group {
  margin-bottom: 15px;
}

#contacto .form-group {
  height: 10vh;
}

#textarea {
  height: 15vh !important;
}

#contacto {
  height: 80vh;
}

.form-label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.form-input {
  width: 100%;
  padding: 1.3vw;
  border: 2px solid #ccc;
  border-radius: 10px;
  font-size: 1vw;
  border-color: #dd0a13;
  margin-top: 0.7vw;
}

.form-input::placeholder {
  color: #dc3545;
}

#contact .text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text form {
  width: 65%;
}

#message {
  height: 100%;
  resize: none;
}

#submit-button {
  width: 100%;
  padding: 1.2vw;
  background-color: #dd0a13;
  border: none;
  color: white;
  font-size: 1vw;
  margin-top: 15px;
  cursor: pointer;
  border-radius: 10px;
}

#submit-button:hover {
  background-color: #0056b3;
}

.alert {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  color: white;
  text-align: center;
}

.success {
  background-color: #28a745;
}

.error {
  background-color: #dc3545;
}

#footer {
  display: flex;
  flex-direction: column;
  height: 85%;
  justify-content: space-evenly;
}

#contacto .text {
  display: flex;
}

#contacto img {
  object-fit: cover;
}

.custom-navbar {
  position: absolute; /* Allows the navbar to expand freely outside the container */
  left: 0; /* Aligns the navbar's start point with the parent container */
  top: 100%; /* Places the expanded navbar below the parent */
  z-index: 1050; /* Ensures it appears above other elements */
  background-color: var(--bs-body-bg); /* Matches Bootstrap's default body background */
  padding: 0.5rem; /* Keeps spacing consistent with Bootstrap styles */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for aesthetics */
}

/* Footer */
footer {
  background: #dd0a13;
  color: white;
  padding: 0 5.5vw;
  height: 23vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer div p {
  font-weight: bold;
  font-size: 1.1vw;
}

footer .social a {
  color: white;
  margin: 0 10px;
  font-size: 1.5rem;
}

.social {
  display: flex;
  flex-direction: row;
  gap: 1vw;
}

footer img {
  height: 50px;
}
.navbar-collapse {
  flex-grow: 0;
}
.bg-body-tertiary {
  background-color: #dd0a13!important;
}
.button3 {
  color: #dd0a13!important;
  background-color: #fff;
  border: none;
  width: 12vw;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7.2vh;
  font-weight: bold;
 }
.navbar{
  padding:0px;
}
 .navbar-expand-lg{
  margin-right: 0px;
 }

 .nav-link{
  margin-right: 2vw;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  text-decoration: none;
  background: 0 0;
  border: 0;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
 }

 .custom-logo {
    margin-left: -12px; 
  }

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-toggler{
  border-color: #fff;
}

/* Cuando la pantalla es menor a 900px  (tablets y teléfonos inteligentes)*/
@media only screen and (max-width : 900px) {
  section {
    height: 70vh;
  }

  footer {
    height: auto;
    padding: 5%;
  }

  footer div p {
    font-size: 3vw;
  }

  footer .social a:first-child {
    margin: 0 0 10px 0;
  }

  #inicio {
    position: relative;
  }

  #about .text p {
    font-size: 4vw;
  }

  #security .text {
    background-color: #dd0a13;
  }

  #contacto .form-group {
    height: auto;
  }

  #compatibility .text {
    padding: 5%;
  }

  #input_filtro {
    font-size: 3vw;
    width: 80vw;
    height: 10vw;
  }
  
  #input_select {
    font-size: 3vw;
  }

  #submit-button {
    font-size: 4vw;
  }

  .search-button {
    font-size: 3vw;
  }

  .form-input {
    font-size: 4vw;
  }

  .filtros {
    width: 90%;
  }

  .galeria {
    grid-template-columns: 1fr 1fr;
  }

  .producto {
    height: 25vh;
  }

  .product_title {
    font-size: 4vw;
  }

  .consult_text {
    font-size: 3vw;
  }

  .text {
    padding: 5%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    width: 100%;
  }

  .title {
    font-size: 7vw;
  }

  .text:nth-child(2) {
    padding: 5%;
  }

  .center_button {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .social {
    margin-top: 5%;
  }

  .button {
    font-size: 4vw;
    padding: 1vw 0;
  }

  .button2 { 
    margin-top: 1vh;
  }

  .sub_title {
    font-size: 4vw;
  }

  footer {
    display: block;
  }
}