@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

/* Estilos generales */
body {
  margin: 0;
}

.navbar {
  display: flex;
  justify-content: left;
  align-items: left;
  background-color: #ed1919;
  position: fixed;
  top: 0;
  width: 100%;
  font-size: 17px;
  padding: 7px;
  z-index: 1000;
}

.nav-right ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-right ul li a {
  text-decoration: none;
  color: white;
  padding: 10px 15px;
  transition: background-color 0.3s ease;
  border-radius: 5px;
}

.nav-right ul li a:hover {
  background-color: #ffffff;
  color: #ed1919;
  border-radius: 5px;
}

/* Botón de menú hamburguesa */
.menu-toggle {
  margin-left: 10px;
  font-size: 25px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  display: none;
  padding-right: 20px;
}

/* Diseño responsive para pantallas pequeñas */
@media (max-width: 750px) {
  .nav-right ul {
      flex-direction: column;
      width: 100%;
      display: none; /* Oculto por defecto */
  }

  .nav-right ul li {
      margin: 5px 10px;
      text-align: left;
      font-size: 15px;
      border: 1px solid #ccc;
      border-radius: 10px;
      margin-right: 30px;
      padding-right: 0px;
      padding-left: 0;
      width: 100%;
  }

  .nav-right ul li a{
    padding: 5px;
  }

  .menu-toggle {
      display: block; /* Mostrar el botón en pantallas pequeñas */
  }

  /* Mostrar el menú cuando está activo */
  .nav-right.active ul {
      display: flex;
  }
}


li {
  padding-left: 20px;
}

li a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color:white;
}

li ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li a:hover {
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  color: #ed1919;
}

.active {
  background-color: #ed1919;
}

.section-body{
    
    padding-top: 80px;
    padding-left: 15px;
}
.section-body h4{
    font-size: large;
    padding: 10px;
    padding-left: 20px;
}

.vertical-nav
{
    padding-top: 10px;
}


.section-body ul {
    list-style-type: none;
    width: 23%;
    background-color: #0070d2;
    border-radius: 20px;
    color: #fff;
    position: fixed;
    height: auto;
    overflow: auto;
    padding: 15px;
    padding-left: 2px;
  }
  
  .section-body  li a {
    display: block;
    color: #ffffff;
    padding: 8px;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 15px;
    margin-bottom: 7px;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .section-body li a.active {
    background-color: #0070d2;
    color: white;
  }
  
  .section-body li a:hover:not(.active) {
    background-color: #003868;
    color: white;
  }

/* 
  section-2 */

  h2{
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
  }

  span{
    color: #ffffff;
    background-color: #ed1919;
    border: #ed1919;
    border-radius: 100px;
    cursor: pointer;
    height: 30px;
    width: 50px;
    padding: 5px 10px;
    margin-right: 34px;
  }

  a{
    color: #ed1919;
  }

  .fa-shopping-cart{
    padding: 5px 2px;
    margin-left: 7px
  }

  p{
    padding-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 20px;
  }

  .image-holder{
    transition-duration:200ms;
    transition-timing-function: ease-out;
  }
  
  .image-holder:hover {
    transform: scale(1.05,1.05);
  }

.gallery{
    
    display: flex;
    flex-direction: row; 
    column-gap: 20px;
    flex-wrap: wrap;
    row-gap: 20px;
    gap: 20px;
}

.gallery-main{
  margin-left:25%;
  padding:1px 16px;
  height:1000px;
}

div.desc {
    text-align: center;
    width: 100%;
 }

 .desc i{
    float: left !important;
    padding-left: 10px;
 }

 .desc button{
    float:right !important;
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px;
 }

.gallery img{
    height: 250px;
    width:200px;
    object-fit: contain;
}

.btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 25px;
  background-color: #ed1919;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  border-radius: 100px;
  margin-bottom: 50px
}

.btn:hover {
  background-color: #fb4a4a;
  box-shadow: 0 0 15px #646464;
  color: #ffffff;
  transform: translateY(-1px);
}



/* Ajustes responsive para pantallas pequeñas */
@media (max-width: 630px) {
  /* Ajustar el nav vertical para que esté arriba */
  
  .vertical-nav {
      position: relative;
      width: 100%;
      background-color: #0070d2;
      margin-right: 10%;
      margin-bottom: 50px;
      border-radius: 25px;
  }

  h4, .left{
    text-align: center;
    margin-bottom: 15px;
  }

  .content {
    padding-top: 30px; /* Ajusta la separación del contenido respecto al navbar */
    padding-left: 10px; /* Separación de la izquierda */
    padding-right: 20px; /* Añadido para mantener simetría en resoluciones más pequeñas */
  }

  .section-body ul {
      width: 100%;
      position: relative;
      display: block;
      justify-content: space-around; /* Distribuye las opciones horizontalmente */
      flex-wrap: wrap; /* Permite que las opciones se ajusten en múltiples filas si es necesario */
      padding: 10px;
      margin-bottom: 20px; /* Añadir espacio entre el menú y el contenido principal */
      padding: 15px;
      padding-left: 2px; 
  }

  .section-body ul li {
      width: auto; /* Permite que las opciones tengan ancho automático */
  }

  .gallery-main {
      margin-left: 0; /* Restablece el margen para que las imágenes ocupen todo el ancho */
  }

  /* Ajustes adicionales para optimizar la vista */
  .gallery {
      flex-direction: column; /* Cambia la galería a columna en lugar de fila */
      align-items: center;
  }

  .gallery img {
      width: 100%;
      height: auto;
  }

  .image-holder {
      width: 100%;
      max-width: 350px; /* Limita el tamaño máximo de las imágenes */
      margin-bottom: 20px; /* Añade espacio entre las imágenes */
  }
}


/* Media query para pantallas más pequeñas (480px o menos) */
@media (max-width: 480px) {
  .navbar {
      font-size: 14px;
      padding: 5px;
  }

  .vertical-nav {
    margin-top: 20px;
}

  .content {
      padding-left: 10px;
      padding-right: 10px;
  }

  .section-body {
      padding: 10px;
  }

  .section-body h4 {
      font-size: medium;
      padding: 5px;
  }

  .gallery-main {
      padding: 10px;
  }

  .gallery {
      flex-direction: column;
      align-items: center;
  }

  .gallery img {
      width: 100%;
      height: auto;
  }

  .desc {
      text-align: center;
      margin-top: 5px;
  }

  .desc button {
      padding: 4px;
      font-size: 12px;
  }

  .btn {
      font-size: 14px;
      padding: 10px 20px;
      margin-bottom: 30px;
  }
}