@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

:root {
    --primaryLight: #35a7fd;
    --primary: #00b8ff;
    --primaryDark: #0092cc;
    --primaryCard: #006891;
    --light: #ffffff;
    --lightDark: #f5f5f5;
}

.navbar-toggler {
    border: none;
}

.navbar-default {
    transition: background-color 0.3s ease;
  }

.navbar-default.navbar-scrolled {
    background-color: var(--primary);
  }

.logo-default {
    width: 250px;
    height: 50px;
}

.logo-scrolled {
    width: 230px;
    height: 50px;
}


/*Background*/

.bg-primary{
    background-color: var(--primary) !important;
 }

.bg-info {
    background-color: var(--primaryDark) !important;
}

.bg-light {
    background-color: var(--light) !important;
}

/*Links*/

.link {
    color: var(--primaryDark) !important;
}

.link:hover {
    color: var(--primaryLight) !important;
}

/*Border*/

.border-light {
    border-color: var(--light) !important;
}

 .border-primary {
    border-color: var(--primary) !important;
 }

 /*Text*/

.text-primary {
    color: var(--primary) !important;
}

.text-light {
    color: var(--light) !important;
}

/*Card*/

.cartao:hover {
    background: var(--primaryCard) !important;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.206);
    transform: scale(1.08);
    transition: 0.5s;
}

/*Button*/

.btn-light {
    background-color: var(--light) !important;
    color: var(--primary) !important;
    border: none;
}

.btn-light:hover {
    background-image: linear-gradient(to left bottom, var(--lightDark), var(--light));
    background-size: 500% 100%;
    animation: degradeBTN 2s infinite alternate;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.206);
    transform: scale(1.08);
    transition: 0.5s;
}

.btn-primary {
    background-image: linear-gradient(to left bottom, var(--primaryLight), var(--primaryDark)) !important;
    border: none;
 }

.btn-primary:hover {
    background-image: linear-gradient(to left bottom, var(--primaryDark), var(--primaryLight));
    background-size: 500% 100%;
    animation: degradeBTN 2s infinite alternate;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.206);
    transform: scale(1.08);
    transition: 0.5s;
}

@keyframes degradeBTN {
    0%{
        background-position-x: 0%;
    }
    100%{
        background-position-x: 100%;
    }
}