#body {
  background: linear-gradient(306deg, #979b9a, #ffffff);
  background-size: 120% 120%;
  animation: gradient-animation 14s ease infinite;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-width: 200px;
}
.img-fluid {
  max-width: 100% !important;
  height: auto; 
}

.bg-primary {
  background-color: #143c74 !important;
}
.text-primary{
  color: #143c74 !important;
}
.btn-primary{
  color: #fdfdfd !important;
  background-color: #143c74;
}

.neu-button {
  background-color: #143c74;
  border-radius: 50px;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.2rem; /* Cambiar a unidad relativa */
  padding: 1rem 2.5rem; /* Cambiar a unidades relativas */
  transition: all 0.2s ease-in-out;
  border: 2px solid rgb(206, 206, 206);
  text-decoration: none;
  width: auto; /* Permitir que el botón ajuste su tamaño */
  max-width: 100%; /* Evitar que el botón exceda el ancho del contenedor */
}

.neu-button:hover {
  box-shadow: inset 1px 1px #252525, 1px 1px  #252525;
}

.neu-button:focus {
  outline: none;
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}

@media (max-width: 768px) {
  .neu-button {
    font-size: 1rem;
    padding: 0.8rem 2rem;
  }
}

@media (max-width: 480px) {
  .neu-button {
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
  }
}

.neu-button-facebook {
  background-color: #316FF6;
  border-radius: 50px;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.2rem; /* Cambiar a unidad relativa */
  padding: 1rem 2.5rem; /* Cambiar a unidades relativas */
  transition: all 0.2s ease-in-out;
  border: 1px solid rgb(206, 206, 206);
  text-decoration: none;
  width: auto; /* Permitir que el botón ajuste su tamaño */
  max-width: 100%; /* Evitar que el botón exceda el ancho del contenedor */
}


.neu-button-facebook:hover {
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}

.neu-button-facebook:focus {
  outline: none;
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}

@media (max-width: 768px) {
  .neu-button-facebook {
    font-size: 1rem;
    padding: 0.8rem 2rem;
  }
}

@media (max-width: 480px) {
  .neu-button-facebook {
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
  }
}

.neu-button-wpp {
  background-color: #25d366;
  border-radius: 50px;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.2rem; /* Cambiar a unidad relativa */
  padding: 1rem 2.5rem; /* Cambiar a unidades relativas */
  transition: all 0.2s ease-in-out;
  border: 2px solid rgb(206, 206, 206);
  text-decoration: none;
  width: auto; /* Permitir que el botón ajuste su tamaño */
  max-width: 100%; /* Evitar que el botón exceda el ancho del contenedor */
}

.neu-button-wpp:hover {
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}

.neu-button-wpp:focus {
  outline: none;
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}

@media (max-width: 768px) {
  .neu-button-wpp {
    font-size: 1rem;
    padding: 0.8rem 2rem;
  }
}

@media (max-width: 480px) {
  .neu-button-wppk {
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
  }
}

#mainNavbar{

  position: fixed; /* Set the navbar to fixed position */
  top: 0;
  width: 100%; /* Full width */
  z-index: 10;

}

#modalBody{
  z-index: 1000;
}

#text{

  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: white;
  font-size: 1.5rem;
  padding: 3vh;
  border-radius: 50px;
  margin-bottom: 2vh;
}

#text{
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: white;
  font-size: 1.5rem;
  padding: 3vh;
  border-radius: 50px;
  margin-bottom: 2vh;
}

body #container {
  margin-top: 1vh;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.29);
  padding-left: 0%;
  padding-right: 0%;
  z-index: -1;
}
#content{
  padding-top: 10vh;
}

footer{
  margin-top: 1vh;
  background: rgba(255, 255, 255,  1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.29);
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.new-card{
    width: 200px;
    height: 300px;
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow: 20px 20px 60px #bebebe,
                  -20px -20px 60px #ffffff;
}

.product-image {
  width: 100%; /* El ancho será el 100% del contenedor padre */
  position: relative; /* Necesario para el posicionamiento del contenido interno */
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 (9 / 16 = 0.5625 = 56.25%) */
  background-color: #f0f0f0; /* Color de fondo para cuando la imagen no cargue */
}

.product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Para asegurar que la imagen mantenga su proporción dentro del contenedor */
}

.carousel-item img {
  height: 500px;
  object-fit: contain;
}

.hover-effect:hover {
  transform:scale(1.05);
  -webkit-box-shadow: 1px -10px 22px -7px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px -10px 22px -7px rgba(0,0,0,0.75);
  box-shadow: 1px -10px 22px -7px rgba(0,0,0,0.75);
}

#stihl_bg{
  background-color: #f46717;
  color: #ffffff;
}
#zanella_bg{
  background-color: #dc3545;
  color: #ffffff;
}
#aguilar_bg{
  background-color: #143c74;
  color: #ffffff;
  position: relative; /* Para asegurarse de que el contexto de contención está definido */
  width: 100%;       /* Asegura que el div ocupe el espacio disponible */
  height: 100%;      /* Ajusta según el tamaño del contenedor */
  overflow: hidden;  /* Oculta el contenido sobrante */
}

#aguilar_bg img {
  position: absolute; 
  top: 50%;           
  left: 50%;          
  transform: translate(-50%, -50%); 
  width: 100%;        
  height: 100%;       
  object-fit: cover; 
}

.brandnavlogo {
  width: 80%; 
  filter: grayscale(100%); 
  transition: filter 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  padding-top: 10%;
}

.brandnavlogo:hover {
  filter: grayscale(0%);
  transform: scale(1.1);
}
.card-product{
  border-color: var(--dirty);
}

#logo{
  padding-top: 5vh;
  height: 40vh;
  margin-bottom: 5vh;
}
#carousel{
  border-color: #143c74 !important;
}
#filtros-container{
  color: #143c74;
  background-color: rgba(248, 245, 245, 0.9);
}
.carousel-title{
  color: #143c74 !important;
}
.carousel-caption{
  background-color: rgba(248, 245, 245, 0.9);
}