/* RESPONSIVE */

/* PC */
#navbar-desktop {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    box-shadow: -1px 15px 30px -12px rgba(32, 32, 32, 0.63);

    @media (max-width :1246px){
        display: none;
    }

}

#navbar-desktop .content {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#navbar-desktop .content h5 {
    margin: 0;
    font-weight: bold;
}

#navbar-desktop .content .items ul {
    display: flex;
    font-family: 'Rubik', sans-serif;
    margin-top: 1rem
}

#navbar-desktop .content .items ul li {
    margin-inline: 20px;
    list-style: none;
    color: black;
    font-size: large;
    font-weight: 500;
}

#navbar-desktop .content .items ul li a {
    padding: 8px;
    text-decoration: none;
    color: black;
}

#navbar-desktop .content .items ul li a:hover {
    border-bottom: 4px solid royalblue;
    color: royalblue;
}

#navbar-desktop .btn-donate i {
    margin-inline: 8px;
}
/* /PC */

/* MOBILE */
#navbar-mobile {
    background-color: white;
    display: flex;
    justify-content: center;
    box-shadow: -1px 15px 30px -12px rgb(32, 32, 32);
    height: 70px;

    @media (min-width :1247px){
        display: none;
    }
}

#navbar-mobile .container-fluid {
    width: 90%;
}

#navbar-mobile .navbar-brand {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

#navbar-mobile .navbar-nav {
    display: flex;
    align-items: center;
}

#navbar-mobile .nav-item {
    margin-top: 5%;
}

#navbar-mobile .nav-link {
    font-size: large;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    border-bottom: 4px solid #ffffff;
}
#navbar-mobile .nav-link:hover {
    border-bottom: 4px solid royalblue;
    color: royalblue;
}

#navbar-mobile .offcanvas-body {
    display: flex;
    align-items: center;
    height: 50%;

}

#navbar-mobile .btn-donate {
    margin-top: 10%;
}

#navbar-mobile .navbar-toggler{
    border: unset;
}
#navbar-mobile .navbar-toggler:active{
    border: unset;
}
#navbar-mobile .navbar-toggler:focus{
    border: unset!important;
    outline: unset!important;
    text-decoration: none!important;
    box-shadow:none!important;
}
#navbar-mobile .navbar-toggler:focus-visible{
    border: unset;
}
#navbar-mobile .navbar-toggler:focus-within{
    border: unset;
}
#navbar-mobile .navbar-toggler:visited{
    border: unset;
}

/* /MOBILE */



a.btn-numero {
    font-family: inherit;
    font-size: 20px;
    background: royalblue;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}

a.btn-numero span {
    display: block;
    margin-left: 0.5em;
    transition: all 0.3s ease-in-out;
}

a.btn-numero i {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
}

a.btn-numero:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
}

a.btn-numero:hover i {
    transform: translateX(3.4em) rotate(45deg) scale(1.1);
}

a.btn-numero:hover span {
    transform: translateX(10em);
}

a.btn-numero:active {
    transform: scale(0.95);
}

@keyframes fly-1 {
    from {
        transform: translateY(0.5em);
    }

    to {
        transform: translateY(-0.1em);
    }
}