:root {
    --color-dark: #212529;
    --color-gray: #15212F;
    --color-blue: #25374f;
    --color-brown: #AF8C55;
    --color-brown-bone: #E5DAC8;
    --color-brown-khaki: #D1BE9E;
    --color-yellow: #f0a71c;
    --color-ghostwhite: #f7f7f7;
    --color-old-lace: #FFF8EB;
    --color-beige: #F2F2CF;
}

.bg-footer{
    background-color: var(--color-ghostwhite);
}

.unique-color-brown {
    background-color: var(--color-brown);
}

.unique-color-dark {
    background-color: var(--color-blue);
}

.unique-background {
    background-color: var(--color-brown-khaki);
}

.unique-background-section {
    background-color: var(--color-brown-bone);
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.navbg {
    background-color: var(--color-dark);
    color: var(--color-yellow);
}

navbar-dark .navbar-brand {
    color: #fff
}

.navbg .navbar-brand:focus,
.navbg .navbar-brand:hover {
    color: var(--color-yellow);
}

.navbg .navbar-nav .navlink {
    color: var(--color-yellow);
}

.navlink-custom {
    color: var(--color-yellow);

}

.navbg .navbar-nav .nav-link:focus,
.navbg .navbar-nav .nav-link:hover {
    color: #F5C366;
}

    .navbg .navbar-nav .nav-link.disabled {
        color: #F5C366;
    }

.navbg .navbar-nav .active > .nav-link,
.navbg .navbar-nav .nav-link.active, .navbg .navbar-nav .nav-link.show, .navbg .navbar-nav .show > .nav-link {
    font-weight: 800;
    color: var(--color-yellow);
}

.navbg .navbar-toggler {
        color: var(--color-yellow);
        border-color: var(--color-yellow);
}

.navbg .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28240, 165, 25, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbg .navbar-text {
    color: var(--color-yellow);
}

.navbg .navbar-text a {
    color: var(--color-yellow);
 }

.navbg .navbar-text a:focus, .navbg .navbar-text a:hover {
     color: var(--color-yellow);
}


select, select option {
    text-transform: capitalize
}

/*Flecha para hacer la pagina hacia arriba*/
.ir-arriba {
    display: none;
    background-repeat: no-repeat;
    font-size: 30px;
    color: black;
    cursor: pointer;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 2;
}