@import url(../../base/colors.css);

/* HOME PAGE STATES STYLES */

/* Estilo del enlace activo cuando la navbar NO está colapsada */
.navbar__menu-item a.is-active {
    border-bottom: 4px solid var(--color-primary);
}

/* Estilo del enlace activo cuando la navbar está colapsada */
.navbar.scrolled .navbar__menu-item a.is-active {
    border-bottom: 2px solid var(--color-secondary);
}

/* Hover: Aplica estilos solo en el estado correspondiente */
.navbar__menu-item a:hover {
    border-bottom: 4px solid var(--color-primary);
}

.navbar.scrolled .navbar__menu-item a:hover {
    border-bottom: 2px solid var(--color-secondary);
}

/* Hover From the social media icons in the Navbar  */
.navbar__social-menu-icon {
    transition: transform 0.3s ease-in-out;
}

#facebook-icon:hover {
    content: url("../../../assets/images/facebook-hover.webp");
    transform: scale(1.1);
}

#instagram-icon:hover {
    content: url("../../../assets/images/instagram-hover.webp");
    transform: scale(1.1);
}

/* Mobile Number from the Navbar Hover*/
.navbar__mobile-number {
    transition: all 0.3s ease;
}

.navbar__mobile-number:hover {
    background-color: var(--color-primary);
    transform: scale(1.01);
}

/* Hover From the contact button in the Header */
.standar__button {
    transition: background-color 0.2s ease-out;
}

.standar__button:hover {
    background-color: var(--color-bg-dark);
}

/* Whatsapp Button Hover */
.whatsapp-container {
    transition: bottom 0.3s ease-out;
}

.whatsapp-container__image {
    transition: transform 0.3s ease-out;
}

.whatsapp-container a img:hover {
    transform: scale(1.1);
}

.gallery-item:hover {
    transform: translateY(-0.05rem) scale(1.02); /* Mueve la imagen hacia arriba y la agranda un poco */
}