:root {
    --primary-color: #aa0071;
    --secondry-color: #e97cc5;
    --light-color: #f0f2f3;
    --padding: 16px;
}

body {
    background-color: #fae0f1;
}

.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #aa0071 !important;
  }
  

.navbar {
    background: linear-gradient(160deg, var(--primary-color), var(--secondry-color));
    color: rgb(255, 216, 247) !important;
    padding: var(--padding);
}

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

.bg-gradient {
    background: linear-gradient(90deg, var(--primary-color), var(--secondry-color)) !important;
}

.card-bg-gradient {
    background: linear-gradient(180deg, #e97cc5, #fae0f1) !important;
    color:#aa0071;
    border-bottom:1px solid #aa0071 !important;
}

.card:hover img {
    transform: scale(1.1);
    transition: all 0.5s ease-in-out;
}

.btn-close:focus {
    outline: none;
    box-shadow: none;
}

.nav-link{
    font-size: 1.2rem;
}

.active-nav{
    background-color: rgb(231, 197, 0);
    color: var(--primary-color) !important;
    border-radius:10px;
    font-weight:bold;
}

@media screen and (max-width: 768px) {
    .offcanvas {
        background: linear-gradient(90deg, var(--primary-color), var(--secondry-color)) !important;
        border-radius: 20px;
    }
}