.avatar-container {
      position: relative;
      display: inline-block;
      float: right;
      margin: 5px;
    }

    .avatar-icon {
      width: 40px;
      height: 40px;
      background-color: #007bff;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .avatar-icon:hover {
      background-color: #0056b3;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      right: 0;
      margin-top: 10px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      min-width: 150px;
      z-index: 10;
    }

    .dropdown-menu a {
      display: block;
      padding: 10px 15px;
      text-decoration: none;
      color: #333;
      font-weight: 500;
      transition: background 0.3s;
    }

    .dropdown-menu a:hover {
      background-color: #0000FF;
    }

    @media (max-width: 768px) {
      .avatar-container {
        float: none;             /* prevent float issues */
        margin: 10px auto;       /* center avatar */
        display: block;
        text-align: center;

      }

      .avatar-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;         /* slightly bigger for touch */
      }

      .dropdown-menu {
        right: 50%;
        transform: translateX(50%); /* center dropdown */
        min-width: 200px;
      }
    }

    /* Mobile phones */
    @media (max-width: 480px) {
      .avatar-icon {
        width: 45px;
        height: 45px;
        font-size: 22px;
      }

      .dropdown-menu {
        width: 90%;              /* almost full width */
        left: 5%;                /* center horizontally */
        right: auto;
        transform: none;
      }

      .dropdown-menu a {
        padding: 12px;           /* bigger touch target */
        font-size: 16px;
      }
    }