/* Made with love by Mutiullah Samim*/

@import url('https://fonts.googleapis.com/css?family=Numans');

html,body{
  background-image: linear-gradient(
    to bottom ,
    var(--primary-200) ,
      var(--primary-200), 
      var(--primary-300) 
  );
  background-size: cover; /* Or contain, depending on your preference */
  background-repeat: no-repeat;
  background-attachment: fixed; /* This is the key! */;  
  height: 100%;
  font-family: 'Numans', sans-serif;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: #EF92A5;
    text-decoration: none;
  }

.card{
    margin-bottom: 10px;
    margin-right: 10px;
}
.card-header h3{
color: white;
}

.container{
height: 100%;
align-content: center;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: white;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}


.links{
color: white;
}

.links a{
margin-left: 4px;
}

.card-header{
  background-color : var(--primary-50);
  }
.card-header a { /* Targets all <a> tags WITHIN the element with class "card-footer" */
  color: var(--primary-800); /* Sets the initial color */
  text-decoration: none; /* Optional: removes underlines */
}
.card-header a:visited { /* Targets visited links WITHIN the element with class "card-footer" */
  color: var(--secondary-400); /* Or any color you prefer for visited links */
}
.card-header a:hover { /* Styles for hover state */
  color: var(--primary-default); /* Example hover color */
}
.card-header a:active { /* Styles for active/pressed state */
  color: var(--primary-100); /* Example active color */
}

.card-body{
  background-color : var(--secondary-50);
  }
.card-body a { /* Targets all <a> tags WITHIN the element with class "card-footer" */
  color: var(--primary-800); /* Sets the initial color */
  text-decoration: none; /* Optional: removes underlines */
}
.card-body a:visited { /* Targets visited links WITHIN the element with class "card-footer" */
  color: var(--secondary-400); /* Or any color you prefer for visited links */
}
.card-body a:hover { /* Styles for hover state */
  color: var(--primary-default); /* Example hover color */
}
.card-body a:active { /* Styles for active/pressed state */
  color: var(--primary-100); /* Example active color */
}

.navbar {
  background-color: var(--secondary-50);
}

/* Style for the active navbar link */
.navbar-nav .nav-item.active .nav-link {
    color: var(--primary-default) !important; /* Or any color you prefer */
    font-weight: bold; /* Optional: Make the active link bold */
}

/* Optional: Style for the non-active links */
.navbar-nav .nav-item .nav-link {
    color: var(--primary-800); /* Or any color you prefer */
}

.navbar-nav .nav-item .nav-link:hover {
    color: var(--primary-default); /* Or any color you prefer */
}

/* In your custom.css */
.da_action_btn {
  width: 100%; /* Full width on mobile */
}