body {
    padding-top: 70px;
    background-color: #161616;
    color: #e1e1e1;
    font-family: "Poppins", serif;
}
img {
    max-width: 100%;
}
a,
.a:hover {
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.logo {
    width: 210px;
}
.card {
    width: 100%;
    aspect-ratio: 1;
    background-color: #303030;
}

.container-fluid {
    width: 94%;
    margin: 0 auto;
    max-width: 94%;
}
.border-round-0 {
    border-radius: 0;
}
.mt-neg100 {
    margin-top: -100px;
}
.min-50vh {
    min-height: 50vh;
}
.dropdown-header {
    font-size: 1.5rem;
    padding: 0;
    width: 350px;
}
.mobile-header {
    width: 100% !important;
}
.fixed-top {
    border-bottom: 1px solid #f1f1f10a;
    background-color: #161616 !important;
}
footer.footer {
    border-top: 1px solid #f1f1f10a;
}
.nav-link,
.dropdown-item {
    font-weight: 700;
}
.navbar {
    padding: 0.5rem 2rem;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    border: 5px solid #21fdcc;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
    background-color: #008cba;
    padding: 10px;
    border-radius: 20px;
}
.card {
    border: 0;
    border-radius: 20px !important;
}
.card-pin:hover .overlay {
    opacity: 0.5;
    -webkit-transition: ease 0.2s;
    transition: ease 0.2s;
    background-color: #000;
    cursor: pointer;
}
.more {
    color: #fff;
    font-size: 14px;
    position: absolute;
    bottom: 10px;
    right: 0;
    text-transform: uppercase;
    -webkit-transform: translate(-20%, -20%);
    transform: translate(-20%, -20%);
    -ms-transform: translate(-50%, -50%);
}
.view {
    color: #fff;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
}
.card-title {
    color: #fff;
    margin-top: 10px;
    text-align: center;
    font-size: 1.2em;
}
.card-pin:hover .more a {
    text-decoration: none;
    color: #fff;
}
.card-pin:hover .download a {
    text-decoration: none;
    color: #fff;
}
.social {
    position: relative;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.social .fa {
    margin: 0 3px;
}

.app-links {
    padding: 5px;
    gap: 5px;
}
.app-links a {
    flex: 1;
    transition: all 0.3s ease-in-out;
}
.app-links a:hover {
    transform: scale(0.95);
}
.app-links a img {
    width: 100%;
}
.dropdown-menu {
    display: block;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    visibility: hidden;
    padding: 0;
}
.dropdown.show .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.footer-links img {
    transition: all 0.3s ease-in-out;
}
.footer-links img:hover {
    transform: scale(0.95);
}
.credits {
    letter-spacing: 0.2px;
}
.credits a {
    transition: all 0.3s ease-in-out;
    color: #e1e1e1 !important;
}
.credits a:hover {
    color: #21fdcc !important;
}
.nav-link {
    color: #e1e1e1 !important;
    font-weight: 400;
    transition: all 0.3s ease-in-out;
}
.nav-link:hover {
    color: #21fdcc !important;
}
.overflow-x-auto {
    overflow-x: auto;
}
.navbar-light .navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.19%200H5.81C2.17%200%200%202.17%200%205.81V14.18C0%2017.83%202.17%2020%205.81%2020H14.18C17.82%2020%2019.99%2017.83%2019.99%2014.19V5.81C20%202.17%2017.83%200%2014.19%200ZM15%2015.25H5C4.59%2015.25%204.25%2014.91%204.25%2014.5C4.25%2014.09%204.59%2013.75%205%2013.75H15C15.41%2013.75%2015.75%2014.09%2015.75%2014.5C15.75%2014.91%2015.41%2015.25%2015%2015.25ZM15%2010.75H5C4.59%2010.75%204.25%2010.41%204.25%2010C4.25%209.59%204.59%209.25%205%209.25H15C15.41%209.25%2015.75%209.59%2015.75%2010C15.75%2010.41%2015.41%2010.75%2015%2010.75ZM15%206.25H5C4.59%206.25%204.25%205.91%204.25%205.5C4.25%205.09%204.59%204.75%205%204.75H15C15.41%204.75%2015.75%205.09%2015.75%205.5C15.75%205.91%2015.41%206.25%2015%206.25Z%22%20fill%3D%22%23E1E1E1%22%2F%3E%3C%2Fsvg%3E) !important;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
    outline: none !important;
}
.download-menu-image {
    display: none;
}
.card-columns {
    width: 100%;
}
.card-columns .card {
    margin-bottom: 1.25rem !important;
}

@media (max-width: 768px) {
    .download-menu {
        display: none !important;
    }
    .download-menu-image {
        display: block !important;
    }
}
.page-link {
    color: #21fdcc !important;
    background-color: #303030;
    border-color: #f1f1f10a;
}
.page-item.active .page-link {
    color: #ffffff !important;
    background-color: #21fdcc !important;
    border-color: #21fdcc !important;
}
.page-item.disabled .page-link {
    background-color: #30303080;
    border-color: #f1f1f10a;
}
.page-link:hover {
    background-color: #222;
    border-color: #21fdcc !important;
}
.page-link:focus {
    box-shadow: none !important;
}
.bg-gray200 {
    background-color: #161616 !important;
}
.tags {
    gap: 10px;
    flex-wrap: wrap;
}
.tags a {
    font-weight: 400 !important;
}
.card-img {
    border-radius: 20px;
}
.card-img-top {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    border-radius: 20px !important;
}
.no-aspect {
    aspect-ratio: unset !important;
}
.modal-content {
    background-color: #0e0e0e !important;
}
.modal-header {
    border-bottom: 1px solid #e1e1e117;
}
.close {
    color: #e1e1e1 !important;
    font-weight: 400 !important;
}
button:focus {
    outline: none !important;
}
.loader {
    width: 80px;
}
.nav-link.active {
    color: #21fdcc !important;
}

/* Estilo básico de la barra de navegación */
.navbar {
    background-color: #343a40; /* Fondo oscuro */
    padding: 10px;
}

/* Lista de elementos del menú */
.navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Estilo para cada item del menú */
.nav-item {
    margin: 10px;
}

/* Estilo para el link del menú */
.nav-link {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #6c757d00;
    transition: background-color 0.3s;
}

.nav-link:hover {
    background-color: #495057;
}







/* Estilo para el botón de menú en dispositivos pequeños */
.menu-toggle {
    display: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
    padding: 10px;
}

/* Mostrar el botón de menú solo en pantallas pequeñas */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .navbar-nav {
        display: none; /* Ocultar el menú en pantallas pequeñas */
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .navbar-nav.open {
        display: flex; /* Mostrar el menú cuando esté abierto */
    }
}

/* Ocultar el menú en dispositivos móviles */
/* Asegurar que el menú funcione con Bootstrap */
#categoryMenu {
    flex-wrap: wrap;
    justify-content: center;
}

/* Mostrar el botón de hamburguesa en móviles */
@media (max-width: 767px) {
    #categoryMenu {
        display: none; /* Bootstrap maneja esto con collapse */
        text-align: center;
    }

    .navbar-collapse.show {
        display: block !important; /* Forzar visibilidad cuando se activa */
    }

    .navbar-nav {
        flex-direction: column; /* Hacer que los elementos se apilen en móviles */
    }
}









/* Mostrar el botón de menú solo en pantallas pequeñas */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .navbar-nav {
        display: none; /* Ocultar el menú en pantallas pequeñas */
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .navbar-nav.open {
        display: flex; /* Mostrar el menú cuando esté abierto */
    }
}

/* Ocultar el menú en dispositivos móviles */
/* Asegurar que el menú funcione con Bootstrap */
#navbarsDefault {
    flex-wrap: wrap;
    justify-content: center;
}

/* Mostrar el botón de hamburguesa en móviles */
@media (max-width: 767px) {
    #navbarsDefault {
        display: none; /* Bootstrap maneja esto con collapse */
        text-align: center;
    }

    .navbar-collapse.show {
        display: block !important; /* Forzar visibilidad cuando se activa */
    }

    .navbar-nav {
        flex-direction: column; /* Hacer que los elementos se apilen en móviles */
    }
}