@media (max-width: 768px) {
    .icon-md {
      display: none !important; /* Hide icons container */
    }
    .menu-button {
      display: none !important;
    }
    .main-content {
      display: none !important;
    }
    .md-hide {
      display: block !important;
    }
  }
  
  @media (min-width: 769px) {
    .navbar-toggler {
      display: none; /* Hide hamburger icon for tablet and laptop */
    }
    .icon-md {
      display: flex !important; /* Show icons container */
    }
    .menu-button {
      display: block !important;
    }
    .main-content {
      display: block !important;
      padding-left: 230px; /* Adjusted padding left */
    }
    .md-hide {
      display: none !important;
    }
  }
  
  @media (max-width: 390px) {
    .fs-sm-3 {
      font-size: 0.8125rem;
    }
  }
  
  @media (max-width: 350px) {
    .fs-sm-3 {
      font-size: 0.6875rem;
    }
    .fs-sm-4 {
      font-size: 1rem !important;
    }
  }
  
  /* Main Layout */
  
  body {
    /* background-color: #1a1a1a; */
    background-color: black;
    color: #ffffff;
    padding-top: 75px; /* Height of the fixed-top navbar */
  }
  
  .navbar-brand img {
    height: 50px;
  }
  
  .sidebar {
    position: fixed;
    top: 75px; /* Height of the fixed-top navbar */
    left: 0;
    bottom: 0;
    width: 230px;
    overflow: hidden;
    z-index: 1000; /* Ensure sidebar is above other content */
    padding-top: 20px; /* Adjusted padding top */
  }
  
  .menu-item {
    padding: 10px 15px; /* Padding for menu items */
    cursor: pointer; /* Cursor on hover */
    overflow: hidden; /* Hide overflow content */
    white-space: nowrap; /* Prevent text from wrapping */
    margin-top: 8px;
    /* margin-bottom: 1px; */
  }
  
  .menu-item:hover,
  .menu-item.active {
    background-color: #e128ff;
    border-radius: 20px;
  }
  
  .navbar-icons-container {
    display: flex;
    align-items: center;
  }
  .menu-button:disabled {
    background-color: white;
    color: black;
    border-color: transparent;
  }
  .menu-button {
    border-radius: 20px;
    padding: 3px 6px;
    border: 0;
  }
  
  .menu-button img {
    border: 1px solid #ffffff;
    border-radius: 50%;
    width: 28px;
  }
  
  .menu-button:hover,
  .menu-button.active {
    background-color: #e128ff;
    color: #ffffff;
  }
  
  .icon-container {
    background-color: #ffffff; /* White background */
    border-radius: 50%; /* Make icon circular */
    width: 30px; /* Fixed width */
    height: 30px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px; /* Margin between icons */
    position: relative; /* Position relative for counter */
    cursor: pointer; /* Cursor on hover */
    text-decoration: none;
  }
  
  .icon-container i {
    font-size: 0.9rem; /* Icon size */
    color: #343a40; /* Dark icon color */
  }
  
  .icon-container.active,
  .icon-container:hover {
    background-color: #e128ff;
  }
  
  .icon-container.active i,
  .icon-container:hover i {
    color: #ffffff;
  }
  
  .counter {
    background-color: #e128ff;
    color: #ffffff;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 50%;
    position: absolute;
    top: 94%; /* Center vertically */
    left: 90%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the counter */
  }
  
  .nav-link {
    transition: none;
  }
  
  .collapsing {
    transition: none !important;
    /* transition: height 0.175s ease !important; */
  }
  
  .navbar-toggler {
    border: none;
    border-radius: 50%;
    background-color: #ffffff;
    width: 30px;
    height: 30px;
    padding: 0;
  }
  
  /* .navbar-toggler:hover, */
  .navbar-toggler.active {
    background-color: #e128ff;
  }
  
  .navbar-toggler:focus {
    box-shadow: none;
  }
  
  .navbar-toggler-icon {
    background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3e%3cpath stroke="black" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/%3e%3c/svg%3e');
    width: 0.7em;
    height: 0.7em;
    vertical-align: baseline;
  }
  
  /* .navbar-toggler:hover > .navbar-toggler-icon, */
  .navbar-toggler.active > .navbar-toggler-icon {
    background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3e%3cpath stroke="white" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/%3e%3c/svg%3e');
  }
  
  .f-anton {
    font-family: "Anton", sans-serif;
    /* font-weight: 400;
  font-style: normal; */
  }
  .f-inter {
    font-family: "Inter", sans-serif;
  }
  
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  
  /* Card tiles */
  
  .icon-circle {
    background-color: #e128ff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  
  .tile .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(225, 40, 255, 0.4); /* Increased shadow opacity */
  }
  
  .tile .card:hover {
    transform: scale(1.033);
    box-shadow: 0 4px 8px rgba(225, 40, 255, 0.6); /* Increased shadow opacity on hover */
  }
  
  /* Forms */
  
  .btn-pink {
    background-color: #e128ff !important;
    border-color: #e128ff !important;
    color: #fff;
  }
  
  .btn-pink:hover {
    background-color: #c800e6 !important;
    border-color: #c800e6 !important;
    color: #fff !important;
  }
  
  .btn-pink:active,
  .btn-pink:focus {
    background-color: #b300e6 !important;
    border-color: #b300e6 !important;
    color: #fff !important;
  }
  .btn-pink:disabled {
    color: white;
  }
  .form-control,
  .form-select {
    border-radius: 0.9rem;
  }
  
  .form-control:focus,
  .form-select:focus {
    border-color: #e128ff;
    /* box-shadow: 0 0 0 0.25rem rgba(225, 40, 255, 0.25); */
    box-shadow: none;
  }
  
  /* Form Image Upload */
  .btn-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
  }
  
  .btn-circle:hover img,
  .btn-circle:focus img {
    filter: brightness(90%);
  }
  
  .btn-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: filter 0.3s ease;
    border-radius: 50%;
    filter: brightness(90%);
  }
  
  .btn-circle .bi-pencil-fill {
    font-size: 14px;
    color: #000000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  
  .pencil-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
  }
  
  .btn-circle input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .w-99{
    width: 99%;
  }
  .bi-bold{
    -webkit-text-stroke: 1px; 
}