body {
    background-color: white; /* color de fondo blanco */
    margin: 0; /* elimina el margen predeterminado */
    padding: 0; /* elimina el relleno predeterminado */
}

.mycolor{
    background-color: #9ac94d;
}
/* ----------------------------------------
Estilo para el menú  sect-infoproduct
---------------------------------------- */
.navbar {
    height: 100px; /* ajusta la altura del menú */
    background-color: rgba(255, 255, 255, 0.9); /* color blanco con opacidad */
    z-index: 1000; /* coloca el menú por encima del slider */
    width: 100%; /* asegura que el menú ocupe todo el ancho */
    position: fixed; /* fija el menú en la parte superior de la ventana */
    top: 0; /* posición superior 0 */
    transition: background-color 0.3s ease; /* transición para el fondo */
}
.navbar-nav {
    display: flex;
    align-items: center;
    flex-direction: column; /* Cambia la dirección a columna */
}
.navbar-nav .nav-item {
    margin: 0 10px; /* ajusta el espacio entre los elementos del menú */
    width: 100%; /* Asegura que los elementos ocupen todo el ancho */
}
/* ----------------------------------------
Estilos para el logo
---------------------------------------- */
/* Estilo para centrar el logo */
.navbar-brand-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease;
}

/* Ajuste de altura del logo */
.navbar-brand img {
    height: 90px; /* ajusta la altura del logo */
}

/* ----------------------------------------
Estilo para el submenú 
---------------------------------------- */
.cont-menu {   
    display: none;
    position: absolute; /* Cambia la posición a absoluta para superponer el menú principal */
    width: auto; /* Asegura que el submenú ocupe el ancho de su contenido */
    min-width: 100%; /* Asegura que el submenú ocupe al menos el ancho del elemento padre */
    background-color: #9ac94d; /* Color de fondo */
    border: none; /* Sin borde */
    z-index: 1000; /* Asegura que el submenú esté por encima del contenido */
    opacity: 0; /* Oculta el submenú inicialmente */
    transform: translateY(-20px); /* Mueve el submenú hacia arriba inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición para la opacidad y la transformación */
    max-height: 0; /* Altura máxima inicial */
}

.nav-item:hover .cont-menu {
    display: block; /* Muestra el submenú al hacer hover */
    opacity: 1; /* Muestra el submenú */
    transform: translateY(0); /* Mueve el submenú a su posición original */
    max-height: 500px; /* Altura máxima del submenú */
}

.cont-menu img {
    width: 30px; /* Ajusta el ancho de la imagen */
    height: 30px; /* Ajusta la altura de la imagen */
    margin-right: 10px; /* Ajusta el margen a la derecha de la imagen */
}

/* Aplica transición al texto */
.cont-menu a {
    transition: margin-left 0.3s ease, padding 0.3s ease; /* Agrega transición suave al margen izquierdo y al relleno */
    padding-left: 20px; /* Ajusta el relleno a la izquierda para dejar espacio al icono */
}

/* Ajusta el margen izquierdo al poner el mouse */
.cont-menu a:hover {
    margin-left: 0; /* Restablece el margen izquierdo al poner el mouse */
    padding-left: 40px; 
}

/* ----------------------------------------
Estilos para el botón de menú
---------------------------------------- */
.navbar-toggler{
    margin-top: 20px;
    height: 40px
}

.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px auto;
    transition: all 0.3s;
    background-color: #000;
}

/* Rotación y opacidad para la animación */
.navbar-toggler.collapsed .icon-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggler.collapsed .icon-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.collapsed .icon-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ----------------------------------------
Estilos para la animación del logo
---------------------------------------- */
.logo-anim {
    transition: transform 0.5s ease;
}

/* ----------------------------------------
Estilos para el slider
---------------------------------------- */
.carousel-indicators li {     
    color: transparent !important; 
}
/* ----------------------------------------
Destacados
---------------------------------------- */
/* Animación al pasar el ratón sobre la imagen grande */
.main-offer img {
    width: 100%;
    height: 103%; /* Ajusta la imagen grande para que sea un poco más alta que el contenedor */
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves para la transformación y la sombra */
}

.main-offer img:hover {
    transform: scale(1.05); /* Amplía la imagen ligeramente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Añade una sombra sutil */
}

/* Animación al pasar el ratón sobre las imágenes pequeñas */
.offer-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves para la transformación y la sombra */
}

.offer-card img:hover {
    transform: scale(1.1); /* Amplía la imagen ligeramente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Añade una sombra sutil */
}

/*------------------------------------
Ruta de Navegación - tags
------------------------------------*/
.cont-Navegador{
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px
  }
  
  .cont-tag {
    background: #eee;
    border-radius: 3px 0 0 3px;
    color: #999;
    display: inline-block;
    height: 30px;
    line-height: 28px;
    padding: 0 20px 0 0px;
    position: relative;
    margin: 0 10px 10px 0;
    text-decoration: none;
    -webkit-transition: color 0.2s;
  }
  
  .tagInicio{
    padding-left: 23px
  }
  
  .tagRuta{
    padding-left: 10px
  }
  
  .cont-tags span a{
    font-weight: 550;
    color: #808080;
    font-size: 14px
  } 
  
  .cont-tags small{
    color: #808080;
    font-weight: 550
  }
  
  .cont-tag::after {
    background: #fff;
    border-bottom: 17px solid transparent;
    border-left: 10px solid #eee;
    border-top: 13px solid transparent;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .tagInicio::before {
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
    content: '';
    height: 6px;
    left: 10px;
    position: absolute;
    width: 6px;
    top: 12px;
  }
  
  .tagRuta::before {
    background: #eee;
    border-bottom: 17px solid transparent;
    border-left: 10px solid #fff;
    border-top: 13px solid transparent;
    content: '';
    position: absolute;
    left:  -9px;
    top: 0;
  }
  
  .tagInicio:hover, .tagNavegar:hover{ 
    text-decoration: none;
    background: #9ac94d;
    color: white; 
  }
  
  .tagInicio:hover::after, .tagNavegar:hover::after{
     border-left-color: #9ac94d; 
  }
  
  .tagNavegar:hover::before{
    border-left-color: #fff; 
     background: #9ac94d;
  }
  
/* ----------------------------------------
Products
---------------------------------------- */

/* .card {
    position: relative;
    overflow: hidden;
} */

.image-container {
    position: relative;
}

.card-img-top {
    width: 100%;
    transition: opacity 0.5s ease-in-out;
}

.second-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.image-container:hover .first-image {
    opacity: 0;
}

.image-container:hover .second-image {
    opacity: 1;
}

.card-body {
    padding: 15px;
}

.card-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.card-text {
    color: #777;
    font-size: 14px;
}

a {
    text-decoration: none;
    color: inherit;
}



.profile-container {
    text-align: center;
    max-width: 600px;
    padding: 20px;
    background-color: #444;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 1.5em;
    margin-bottom: 1em;
    color: #ccc;
}

.divider {
    width: 50%;
    height: 2px;
    background-color: #fff;
    margin: 20px auto;
    position: relative;
}

.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: -5px;
    width: 10px;
    height: 2px;
    background-color: #fff;
}

.divider::before {
    left: -15px;
}

.divider::after {
    right: -15px;
}

p {
    font-size: 1em;
    line-height: 1.5;
    color: #bbb;
}

/* ----------------------------------------
Info  border-top-color: #ff214f;
---------------------------------------- */
#info {
    min-height: 350px;
    background-color: #343a40 !important;
}

#info h3{
    font-family: arial;
    font-size: 30px;
}

#info p{
    color: #fff;     
}

.cont-info{
    padding: 50px 0 !important;
}

.info-body {
    position: relative;
    padding: 1rem;
    border: 2px solid #495057;
    border-top-color: #ff214f;
    border-radius: 0.2rem;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.info-body::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #ff214f;
    background-color: #495057;
}

.info-body::before {
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
    border-top: none;
    border-right: none;
}

.info-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.row {
    display: flex;
}

.col-md-4 {
    display: flex;
    flex-direction: column;
}

.info-title, .info-subtitle {
    text-align: center;
}

/* ----------------------------------------
Contact-Us
---------------------------------------- */
.custom-card {   
  border-radius: 20px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  margin-top: 50px;
  padding: 20px;
  margin-bottom: 50px;
  text-align: center;
  height: 287px;
  padding: 30px;
  border: 1px solid #e7e7e2; /* Cambia el color del borde aquí */
}

.custom-card img{
    width: 64px;
    height: 64px;
    margin-bottom: 30px
        
}

.custom-card h1 {
    font-size: 24px;
    font-weight: bold;
    display: block;
    height: 50px;
}
.custom-card span {
    font-size: 14px;
    color: #666;
}
/* Estilos para el formulario */
.cont-sect-contact{
    padding-top: 50px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 50px;  
    background: linear-gradient(to right, white 90%, #9ac94d 20%);
}
.section-contact-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-contact-us span{
    font-family: "Roboto", sans-serif; 
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px
}

form {
    width: 100%;
    max-width: 400px;
    padding-top: 30px;
    padding-bottom: 50px
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.section-contact-us button {
    background-color: #9ac94d;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 10px 40px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.section-contact-us button:hover {
    background-color: #7fbe1a;
}

.cont-sect-contac-info{
    background-color: #9ac94d;
    border-radius: 0 0 150px 0;
    padding-left: 50px;
    padding-top: 50px;
    padding-right: 50px
}

.section-map iframe{
    display: block;
    width: 90%;
    margin-top: 10px;
    padding-bottom: 50px
}
/* ----------------------------------------
footer
---------------------------------------- */
footer {
    background-color: #9ac94d;
    color: white;
    text-align: center;
    padding: 20px;
}

/* ----------------------------------------
Estilos para el menú en dispositivos móviles
---------------------------------------- */
@media (max-width: 768px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        transition: left 0.3s ease;
    }
    .navbar-collapse.show {
        left: 0;
    }
    .navbar-toggler {
        position: absolute;
        left: 10px; /* Mueve el toggler a la izquierda */
        top: 10px; /* Ajusta la posición superior */
        z-index: 1050; /* Asegura que el toggler esté por encima del menú */
        transition: left 0.3s ease; /* Añade transición para mover el toggler */
    }
    .navbar-collapse.show + .navbar-toggler {
        left: 260px; /* Mueve el toggler junto con el menú desplegado */
    }
    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }
    .navbar-nav .nav-item {
        width: 100%; /* ancho de los elementos del menú */
        height: auto; /* altura automática para ajustar el contenido */
        margin: 2px 0; /* ajusta el margen entre los elementos del menú */
    }
    .navbar-nav .nav-link {
        width: 100%;
        padding: 13px 32px 13px 12px; /* padding especificado */
        font-size: 14px; /* tamaño de fuente */
        text-align: left; /* alineación del texto */
        border-right: solid 0px; /* borde derecho */
        background-color: transparent; /* sin color de fondo */
        color: #666666; /* color del texto */
        line-height: 25px; /* altura de línea */
        border-bottom: 1px solid; /* borde inferior */
        border-bottom-color: rgba(0, 0, 0, 0.13); /* color del borde inferior */
        position: static; /* posición estática */
    }
    .navbar-nav .nav-link:hover {
        background-color: #f0f0f0; /* color de fondo al hacer hover */
    }
    .cont-menu::before {
        display: none; /* elimina el pseudo-elemento en responsive */
    }
    .navbar-nav.ml-auto {
        margin: -17px 10px; /* elimina el margen entre los <ul> */
        padding: 0; /* elimina el padding entre los <ul> */
    }
    .navbar-nav .nav-item .cont-menu {
        display: none; /* oculta el submenú por defecto */
    }
    .navbar-nav .nav-item.active .cont-menu {
        display: block; /* muestra el submenú cuando el elemento está activo */
        opacity: 1; /* muestra el submenú */
        transform: translateY(0); /* mueve el submenú a su posición original */
        max-height: 500px; /* altura máxima del submenú */
    }
    #carouselExampleIndicators{
        margin-top: 75px
    }
}