.scrolling-title{
            text-align: center;
            font-size: larger;
            width: 56%;
            margin: 0px auto;
            font-size: medium;
            font-weight: 400;
            color: white;
            background-color: #000000;
            border-radius: 20px;
            border: 1px solid #f7f5ff;
            padding: 10px;
         }

          .nav-list {
              margin-top: 20px;
              height: 100%;
          }

          .nav-list a {
              text-decoration: none;
              color: white;
          }

          .nav-list li{
            position: relative;
              margin: 8px 0;
              list-style: none;
          }
          
          .links_name {
              color: red;
              font-size: 15px;
              font-weight: 400;
              white-space: nowrap;
              /* opacity: 0; */
              pointer-events: none;
              transition: 0.4s;
          }

          .nav-list li img {
              height: 38px;
              width: 38px;
              object-fit: contain;
              /* border-radius: 6px; */
              margin-right: 10px;
          }


            /* Navbar */
    .navbar {
      height: 70px;
      background: #ffffff;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
    }

    .logo {
      font-size: 1.6rem;
      font-weight: bold;
      color: #2c3e50;
    }

    /* Add this CSS to control the logo perfectly */
.navbar-logo {
  height: 40px;        /* Most common & best height for navbars */
  width: auto;         /* Keeps aspect ratio */
  display: block;
}

/* Optional: Make it a bit larger on big screens */
@media (min-width: 992px) {
  .navbar-logo {
    height: 48px;      /* Slightly bigger on desktop */
  }
}

/* If you want a perfectly round logo (like many apps) */
.navbar-logo.round {
  border-radius: 50%;
  object-fit: cover;
}

/* If your logo has transparent padding and looks small, force exact size */
.navbar-logo.fixed {
  height: 50px;
  width: 150px;        /* Use when logo is wide (e.g., text + icon) */
  object-fit: contain;
}

    .nav-icons {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .icon-btn {
      position: relative;
      width: 40px;
      height: 40px;
      /* border-radius: 50%; */
      background: #ecf0f1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.3s;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }

    .icon-btn:hover {
      background: #1abc9c;
      color: white;
    }

    .badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background: #e74c3c;
      color: white;
      font-size: 0.7rem;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Hamburger */
    .hamburger {
      display: flex;
      cursor: pointer;
      flex-direction: column;
      gap: 5px;
    }

    .hamburger span {
      width: 28px;
      height: 3px;
      background: #2c3e50;
      border-radius: 3px;
      transition: 0.3s;
    }