*{
    margin: 0;
    padding: 0;
}
 
.circle{border-radius: 50%;height:50px;width:50px;border:1px solid #ccc;
    padding:0.7rem;text-align: center;}

    .badge{position: absolute;top:0px; right:10px;}
    hr{margin-bottom: 0rem !important;}
    #nav li a{color:#000;}
    #nav li{padding:0 10px;}
    #nav li a:hover{color:#ccc;}
    #hr{margin-top: 0rem !important;}
    #card{border-radius: 12px;}
    a:hover{text-decoration: none;}
    #list-ul li a {color:#000;}
    #list-ul .dropright .dropdown-toggle::after{margin-left: 160px !important;}

    .card-body{padding:0 23px;}

    .card h4{margin-top: -15px;}

    .but{border-radius: 10px; padding:7px 15px;}

    .col-md-3 .card:hover{box-shadow: 0 4px 15px rgb(153 153 153 / 30%)}
     footer .col-md-3 ul li{list-style: none;}
     footer .col-md-3 ul a{color:#000;}
     h6{font-weight: bold}

    .ok{background:#f8f9fa; padding-bottom: 20px;margin-top: 30px;}
    #cool{height:50px;width:100px;margin-left: 200px;}

    .color{background-color:lightblue;padding-top: 70px;padding-bottom: 70px;}

    .form{background-color: #fff;border:1px solid #fff;padding:20px;}

    #circlee{position: relative;}
    #login-badge{position: absolute;top:-5px;right:0px;}
    
    .mytabs{margin-top:3rem;}
    .mytabs .nav-link {
    display: block;
    padding: .5rem 9rem;border-bottom: 2px solid #000 !important;
    font-weight: 700;
    }
    .mytabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    
    border-color: transparent !important;
    color:#ff6600;
    ;}

    .wrap-text{padding: 1rem;}
    /* Romantic style for sidebar categories */
#list-ul .list-group-item {
  font-family: Arial, sans-serif;  /* romantic font */
  font-size: 16px;
  font-weight: 600;
  color: white;
  text-align: center;
  border: none;
  margin-bottom: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, #28a745, #ff7f50); /* green → orange gradient */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover effect */
#list-ul .list-group-item:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  background: linear-gradient(90deg, #218838, #ff5a1f); /* darker green → orange */
}